.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 rgb(0 0 0 / .35)}.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 rgb(0 0 0 / .35)}.dvh-phone-body{display:flex;flex-direction:column;height:100%}.dvh-phone-status{height:20px;background:rgb(14 18 25 / .85);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:translateX(-50%)}.dvh-address-bar{height:30px;background:rgb(14 18 25 / .7);border-bottom:1px solid var(--demo-border);display:flex;align-items:center;padding:0 8px;transition:height 0.5s ease,opacity 0.5s ease,padding 0.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:#fff0}.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 0.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),rgb(132 13 50 / .55));border-radius:var(--demo-radius)}.dvh-phone-star .dvh-full-el-bg{background:linear-gradient(145deg,rgba(var(--demo-accent-rgb),.8),rgb(132 13 50 / .7))}.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 rgb(255 255 255 / .15)}.dvh-overflow-zone{flex:1;background:repeating-linear-gradient(-45deg,transparent,transparent 3px,rgb(248 113 113 / .1) 3px,rgb(248 113 113 / .1) 6px);position:relative;min-height:0;border-top:2px dashed rgb(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 0.3s ease,color 0.3s ease,border-color 0.3s ease;border:1px solid #fff0;margin-top:7px}.dvh-badge-overflow{color:#f87171;background:rgb(248 113 113 / .1);border-color:rgb(248 113 113 / .2)}.dvh-badge-fits{color:#4ead80;background:rgb(78 173 128 / .1);border-color:rgb(78 173 128 / .2)}.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 0.2s,border-color 0.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}}