.viewport-mode{margin-top:28px;border:1px solid var(--line);border-radius:16px;padding:18px;background:linear-gradient(135deg,rgba(124,156,255,.10),rgba(255,255,255,.025));box-shadow:0 20px 60px rgba(0,0,0,.18)}.viewport-mode__head{display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap}.viewport-mode__kicker{display:block;color:var(--accent);font-size:11px;letter-spacing:.14em}.viewport-mode h2{margin:6px 0 0;font-family:Inter,system-ui,sans-serif;font-size:clamp(1.4rem,4vw,2.2rem);letter-spacing:-.04em}.viewport-mode__hint{margin:0;max-width:520px;color:var(--muted);font-family:system-ui,sans-serif;font-size:13px;line-height:1.6}.viewport-mode__bands{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.viewport-band{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;padding:15px 14px;background:rgba(255,255,255,.025);color:var(--muted);transition:border-color .2s ease,background .2s ease,transform .2s ease}.viewport-band:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:transparent}.viewport-band strong{display:block;color:inherit;font-family:Inter,system-ui,sans-serif;font-size:1rem}.viewport-band span{display:block;margin-top:5px;font-size:11px}.viewport-band.is-mobile,.viewport-band.is-tablet,.viewport-band.is-desktop{color:var(--muted)}@media(max-width:639px){.viewport-band.is-mobile{border-color:rgba(103,232,165,.6);background:rgba(103,232,165,.10);color:var(--text);transform:translateY(-2px)}.viewport-band.is-mobile:before{background:var(--ok)}}@media(min-width:640px) and (max-width:1023px){.viewport-band.is-tablet{border-color:rgba(103,232,165,.6);background:rgba(103,232,165,.10);color:var(--text);transform:translateY(-2px)}.viewport-band.is-tablet:before{background:var(--ok)}}@media(min-width:1024px){.viewport-band.is-desktop{border-color:rgba(103,232,165,.6);background:rgba(103,232,165,.10);color:var(--text);transform:translateY(-2px)}.viewport-band.is-desktop:before{background:var(--ok)}}@media(max-width:720px){.viewport-mode__bands{grid-template-columns:1fr}.viewport-mode__head{align-items:flex-start}}@media(prefers-reduced-motion:reduce){.viewport-band{transition:none}}