html,body{margin:0;padding:0;background:#0f0f14}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#f5f3ed;min-height:100vh;overflow-x:hidden}*,*:before,*:after{box-sizing:border-box}button{font:inherit}.showcase-bar{position:sticky;top:0;z-index:50;background:#0f0f14d9;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08);padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.showcase-brand{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.2px;color:#f5f3ed;opacity:.95;margin-right:auto;min-width:0}.showcase-brand-dot{width:8px;height:8px;border-radius:4px;background:#b8e0ce;box-shadow:0 0 0 3px #b8e0ce2e;flex-shrink:0}.showcase-brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}.showcase-brand-text .who{font-weight:700;letter-spacing:-.1px;font-size:13px}.showcase-brand-text .what{font-size:10.5px;opacity:.6;letter-spacing:.4px;text-transform:uppercase}.showcase-pills{display:flex;gap:4px;background:#ffffff0f;border-radius:999px;padding:4px;border:1px solid rgba(255,255,255,.08)}.showcase-pill{border:none;background:transparent;color:#f5f3ed;font-size:12px;font-weight:600;letter-spacing:.2px;padding:7px 13px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s;display:flex;align-items:center;gap:6px}.showcase-pill:hover{background:#ffffff0d}.showcase-pill[data-active=true]{background:#f5f3ed;color:#0f0f14}.showcase-pill .pill-letter{font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;opacity:.7}.showcase-pill[data-active=true] .pill-letter{opacity:.8}.viewport-pills{display:flex;gap:4px;background:#ffffff0f;border-radius:999px;padding:4px;border:1px solid rgba(255,255,255,.08)}.viewport-pill{border:none;background:transparent;color:#f5f3ed;font-size:12px;font-weight:600;letter-spacing:.2px;padding:7px 11px;border-radius:999px;cursor:pointer;transition:background .18s,color .18s;display:inline-flex;align-items:center;gap:6px;line-height:1}.viewport-pill:hover{background:#ffffff0d}.viewport-pill[data-active=true]{background:#f5f3ed;color:#0f0f14}.viewport-pill svg{display:block}@media (max-width: 640px){.viewport-pill span:not(.pill-letter){display:none}.viewport-pill{padding:7px 9px}}.compare-toggle{display:none;border:1px solid rgba(255,255,255,.14);background:transparent;color:#f5f3ed;font-size:12px;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .18s}.compare-toggle:hover{background:#ffffff0f}.compare-toggle[data-active=true]{background:#f5f3ed;color:#0f0f14;border-color:#f5f3ed}.stage{background:#0f0f14;min-height:calc(100vh - 60px);display:flex;justify-content:center}.stage--mobile .stage-inner{width:100%;max-width:100%}.stage--desktop{padding:16px 16px 48px}.stage--desktop .stage-inner{width:100%;max-width:100%}@media (min-width: 720px){.compare-toggle{display:inline-flex;align-items:center;gap:6px}.stage--mobile{padding:32px 24px 56px}.stage--mobile .stage-inner{max-width:430px;background:#fff;border-radius:36px;overflow:hidden;box-shadow:0 0 0 1px #ffffff14,0 30px 80px -20px #00000080,0 8px 24px #0000004d}.stage--mobile .stage-inner:before{content:"";display:block;height:8px;background:#0f0f14}.stage--desktop{padding:28px 24px 64px}}@media (max-width: 720px){.showcase-pill .pill-name{display:none}.showcase-pill{padding:7px 10px}}.compare-grid{display:none;padding:32px 24px 64px;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;min-height:calc(100vh - 60px)}body[data-mode=compare] .compare-grid{display:flex}body[data-mode=compare] .stage{display:none}.compare-phone{flex:0 0 380px;scroll-snap-align:start;display:flex;flex-direction:column;gap:14px}.compare-phone-head{display:flex;align-items:baseline;gap:10px;color:#f5f3ed}.compare-phone-head .letter{font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;opacity:.55;font-weight:600}.compare-phone-head .name{font-size:14px;font-weight:700;letter-spacing:-.1px}.compare-phone-head .tag{font-size:10.5px;opacity:.5;letter-spacing:.6px;text-transform:uppercase;margin-left:auto}.compare-phone-frame{background:#fff;border-radius:32px;overflow:hidden;box-shadow:0 0 0 1px #ffffff14,0 24px 64px -16px #00000080,0 6px 18px #0000004d;height:760px;overflow-y:auto;scrollbar-width:thin}.compare-phone-frame:before{content:"";display:block;height:6px;background:#0f0f14;position:sticky;top:0}@media (min-width: 1280px){.compare-grid{justify-content:center;overflow-x:visible}}.bottom-hint{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:#0f0f14d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);color:#f5f3ed;padding:8px 14px;border-radius:999px;font-size:11px;font-weight:500;letter-spacing:.2px;opacity:.85;pointer-events:none;z-index:60}@media (min-width: 720px){.bottom-hint{display:none}}