.dvh-phones-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:var(--demo-gap-lg)}.dvh-phone-col{display:flex;flex-direction:column;align-items:center;gap:8px}.dvh-phone-title{font-family:var(--demo-font-mono);font-size:var(--demo-font-size-base);font-weight:700;color:var(--secondary-text);text-align:center;letter-spacing:.5px}.dvh-phone-star .dvh-phone-title{color:var(--demo-accent)}.dvh-star-tag{font-size:10px;font-weight:600;color:var(--demo-accent);background:rgba(var(--demo-accent-rgb),.12);border-radius:3px;padding:4px 8px;margin-inline-start:4px;vertical-align:middle;letter-spacing:.3px;text-transform:uppercase}.dvh-phone{width:100%;max-width:160px;height:320px;border:2px solid rgba(var(--demo-accent-rgb),.2);border-radius:18px;background:var(--demo-surface);position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(var(--demo-accent-rgb),.06),0 8px 24px #00000059}.dvh-phone-star .dvh-phone{border-color:rgba(var(--demo-accent-rgb),.5);box-shadow:0 0 0 1px rgba(var(--demo-accent-rgb),.15),0 0 20px rgba(var(--demo-accent-rgb),.08),0 8px 24px #00000059}.dvh-phone-body{display:flex;flex-direction:column;height:100%}.dvh-phone-status{height:20px;background:#0e1219d9;display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-family:var(--demo-font-mono);font-size:8px;color:var(--secondary-text);flex-shrink:0;z-index:2;position:relative}.dvh-phone-notch{width:40px;height:3px;border-radius:2px;background:rgba(var(--demo-accent-rgb),.12);position:absolute;top:8px;left:50%;transform:translate(-50%)}.dvh-address-bar{height:30px;background:#0e1219b3;border-bottom:1px solid var(--demo-border);display:flex;align-items:center;padding:0 8px;transition:height .5s ease,opacity .5s ease,padding .5s ease;overflow:hidden;flex-shrink:0;z-index:2;position:relative}.dvh-address-bar.collapsed{height:0;opacity:0;padding:0 8px;border-bottom-color:transparent}.dvh-url-field{flex:1;height:18px;border-radius:9px;background:rgba(var(--demo-accent-rgb),.06);border:1px solid var(--demo-border);display:flex;align-items:center;padding:0 8px;font-family:var(--demo-font-mono);font-size:8px;color:var(--secondary-text)}.dvh-viewport{flex:1;position:relative;display:flex;flex-direction:column;overflow:hidden}.dvh-full-el{transition:height .5s ease;display:flex;align-items:center;justify-content:center;font-family:var(--demo-font-mono);font-size:11px;color:#0e1219;font-weight:700;position:relative;overflow:hidden}.dvh-full-el-bg{position:absolute;inset:0;background:linear-gradient(145deg,rgba(var(--demo-accent-rgb),.65),#840d328c);border-radius:var(--demo-radius)}.dvh-phone-star .dvh-full-el-bg{background:linear-gradient(145deg,rgba(var(--demo-accent-rgb),.8),#840d32b3)}.dvh-px-label{position:relative;z-index:1;text-align:center;line-height:1.3;white-space:pre-line;font-size:11px;text-shadow:0 1px 2px rgba(255,255,255,.15)}.dvh-overflow-zone{flex:1;background:repeating-linear-gradient(-45deg,transparent,transparent 3px,rgba(248,113,113,.1) 3px,rgba(248,113,113,.1) 6px);position:relative;min-height:0;border-top:2px dashed rgba(248,113,113,.35);display:none}.dvh-overflow-zone.visible{display:block}.dvh-overflow-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--demo-font-mono);font-size:13px;color:var(--text-color);white-space:nowrap;background:var(--light-bg);padding:4px 10px;border-radius:3px}.dvh-phone-status-badge{font-family:var(--demo-font-mono);font-size:10px;font-weight:600;padding:2px 10px;border-radius:10px;text-align:center;transition:background .3s ease,color .3s ease,border-color .3s ease;border:1px solid transparent;margin-top:7px}.dvh-badge-overflow{color:#f87171;background:#f871711a;border-color:#f8717133}.dvh-badge-fits{color:#4ead80;background:#4ead801a;border-color:#4ead8033}.dvh-badge-hidden{opacity:0;pointer-events:none}.dvh-demo-controls{display:flex;flex-direction:column;align-items:center;gap:var(--demo-gap-lg);margin-top:40px}.dvh-toolbar-toggle{display:inline-flex;align-items:center;gap:6px;background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:var(--demo-radius);padding:8px 20px;font-family:var(--demo-font-noto);font-size:var(--demo-font-size-sm);color:var(--heading-color);cursor:pointer;transition:color .2s,border-color .2s;background:var(--border-color);border Shorthand property for setting border width,style,and color. Widely available across major browsers (Baseline since January 2018) Learn more Don't show
: 1px solid var(--border-color-2);';
font-weight: 5;font-weight:600}.dvh-toolbar-toggle:hover{border-color:rgba(var(--demo-accent-rgb),.4);color:var(--demo-accent)}.dvh-toolbar-toggle.active{border-color:var(--demo-accent);color:var(--demo-accent)}.dvh-codepen-form{text-align:start;margin-top:var(--demo-pad-lg)}@media(max-width:720px){.dvh-phones-grid{grid-template-columns:repeat(2,1fr);gap:20px 12px}.dvh-phone{max-width:140px;height:280px}.dvh-phone-status{height:18px;font-size:7px}.dvh-address-bar{height:26px}.dvh-px-label{font-size:10px}}@media(max-width:420px){.dvh-phone{max-width:120px;height:240px}.dvh-phone-title{font-size:var(--demo-font-size-xs)}.dvh-phone-status-badge{font-size:9px;padding:1px 6px}.dvh-px-label{font-size:9px}.dvh-star-tag{font-size:7px}}