.is-demo-viewer{background:#f5f4ef;color:#191c19}
.demo-viewer{min-height:calc(100svh - 76px);padding:clamp(20px,4vw,56px) clamp(16px,5vw,72px);display:flex;flex-direction:column;gap:22px}
.demo-viewer-head{display:grid;grid-template-columns:1fr minmax(240px,2fr) 1fr;align-items:center;gap:20px;border-bottom:1px solid rgba(25,28,25,.25);padding-bottom:18px}
.demo-viewer-head .mono,.demo-view-toggle,.demo-browser-bar,.demo-back,.demo-open{font:600 11px/1.4 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.demo-viewer-head h1{font:400 clamp(30px,5vw,60px)/.98 'Instrument Serif',Georgia,serif;margin:8px 0 0}
.demo-back,.demo-open{color:inherit;text-decoration:none}
.demo-open{text-align:right}
.demo-view-toggle{display:flex;align-items:center;gap:8px;position:sticky;top:76px;z-index:5;background:#f5f4ef;padding-block:3px}
.demo-view-toggle a{border:1px solid #191c19;color:#191c19;padding:10px 15px;text-decoration:none}
.demo-view-toggle a.is-active{background:#153b47;color:#f5f4ef}
.demo-fit-toggle{min-height:40px;border:1px solid #191c19;background:#e9eae1;color:#191c19;padding:9px 12px;font:600 10px/1.2 'JetBrains Mono',monospace;letter-spacing:.06em;cursor:pointer}
.demo-fit-toggle:focus-visible,.demo-view-toggle a:focus-visible{outline:3px solid #153b47;outline-offset:3px}
.demo-view-hint{font:12px/1.5 'DM Sans',sans-serif;letter-spacing:0;text-transform:none;margin-left:12px;opacity:.72}
.demo-rotate-hint{display:none;margin:0;font:12px/1.5 'DM Sans',sans-serif;opacity:.72}
.demo-view-stage{min-height:58svh;flex:1;display:grid;place-items:center;overflow:hidden;background-color:#e9eae1;background-image:radial-gradient(rgba(21,59,71,.19) 1px,transparent 1px);background-size:14px 14px;border:1px solid #191c19;padding:clamp(14px,3vw,36px)}
.demo-browser{width:min(100%,1440px);height:min(72svh,880px);min-height:420px;background:#f5f4ef;border:2px solid #191c19;box-shadow:7px 7px 0 #191c19;display:flex;flex-direction:column}
.demo-browser-bar{height:38px;flex:none;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:0 14px;border-bottom:1px solid #191c19;background:#e9eae1}
.demo-browser-bar span:first-child{color:#153b47;letter-spacing:.25em}
.demo-browser-bar span:nth-child(2){text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.demo-browser-bar a{justify-self:end;color:inherit;text-decoration:none;font-size:16px}
.demo-desktop-viewport{position:relative;flex:1;min-height:0;overflow:hidden;background:#fff}
.demo-desktop-canvas{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:top left}
.demo-desktop-viewport[data-actual="true"]{overflow:auto}
.demo-desktop-viewport[data-actual="true"] .demo-desktop-canvas{position:relative;flex:none}
.demo-browser iframe{width:1440px;height:900px;display:block;border:0;background:white}
.demo-phone{height:min(76svh,820px);aspect-ratio:9/19.5;position:relative;border:8px solid #191c19;border-radius:36px;background:#191c19;padding:0;box-shadow:7px 7px 0 #191c19;overflow:hidden}
.demo-phone iframe{width:100%;height:100%;display:block;border:0;border-radius:27px;background:white}
.demo-notch{position:absolute;z-index:2;top:8px;left:50%;transform:translateX(-50%);width:32%;height:18px;border-radius:0 0 14px 14px;background:#191c19;pointer-events:none}
.demo-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.demo-viewer-foot{display:flex;justify-content:space-between;gap:20px;align-items:center;font:13px/1.5 'DM Sans',sans-serif}
.demo-viewer-foot p{margin:0;max-width:680px}
.demo-viewer-foot a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap}
@media(max-width:760px){.demo-viewer{min-height:calc(100svh - 60px);padding:18px 14px;gap:14px}.demo-viewer-head{grid-template-columns:1fr auto;gap:12px}.demo-viewer-head>div{grid-row:2;grid-column:1/-1}.demo-viewer-head h1{font-size:38px}.demo-view-hint{display:none}.demo-view-toggle{width:100%;top:64px}.demo-view-toggle a{flex:1;text-align:center}.demo-rotate-hint{display:block}.demo-view-stage{min-height:58svh;padding:12px}.demo-browser{height:65svh;min-height:360px}.demo-phone{height:min(67svh,680px)}.demo-viewer-foot{align-items:flex-start;flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){.demo-viewer *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}