*{box-sizing:border-box;margin:0;padding:0}body,body[data-variant="vault"]{--ground:#06070a;--ground-image:radial-gradient(rgba(255,255,255,0.05) 1px,transparent 1px);--ground-size:26px 26px;--phone-bezel:#1a1d29;--phone-radius:44px;--screen:#0a0b0e;--ink:#ffffff;--muted:#737b91;--skeleton:#14161f;--bar-bg:#14161f;--bar-border:1px solid #262b3d;--bar-radius:26px;--bar-shadow:0 -8px 30px rgba(0,0,0,0.5);--bar-pad:6px;--indicator-bg:#c8ff00;--indicator-radius:18px;--indicator-shadow:0 6px 18px rgba(200,255,0,0.22);--tab-fg:#737b91;--tab-fg-active:#06070a;--badge-bg:#ff4d6d;--badge-fg:#ffffff;--label-size:0.62rem;--label-weight:600;--label-tracking:0.04em;--label-transform:none;--font-body:'Space Grotesk',system-ui,sans-serif;--font-title:'Space Grotesk',system-ui,sans-serif;--title-weight:700;--title-transform:none;--focus-ring:#c8ff00;--toolbar-bg:#14161f;--toolbar-ink:#06070a;--indicator-stretch:1}body[data-variant="soft"]{--ground:#eee9f7;--ground-image:radial-gradient(30rem 20rem at 20% 10%,rgba(178,152,240,0.35),transparent 65%);--ground-size:auto;--phone-bezel:#ffffff;--phone-radius:40px;--screen:#faf8ff;--ink:#33265a;--muted:#9086ab;--skeleton:#efeaf9;--bar-bg:#ffffff;--bar-border:1px solid #e9e2f6;--bar-radius:24px;--bar-shadow:0 12px 30px rgba(115,88,175,0.16);--bar-pad:7px;--indicator-bg:#d9c9fb;--indicator-radius:17px;--indicator-shadow:0 6px 16px rgba(120,90,190,0.2);--tab-fg:#9086ab;--tab-fg-active:#3d2a70;--badge-bg:#ff8fab;--badge-fg:#4a1a2c;--label-size:0.63rem;--label-weight:600;--label-tracking:0.02em;--label-transform:none;--font-body:'Space Grotesk',system-ui,sans-serif;--font-title:'Space Grotesk',system-ui,sans-serif;--title-weight:600;--title-transform:none;--focus-ring:#7b5cd6;--toolbar-bg:#ffffff;--toolbar-ink:#ffffff;--indicator-stretch:0.7}body[data-variant="brutal"]{--ground:#f2f0e9;--ground-image:repeating-linear-gradient(45deg,rgba(0,0,0,0.05) 0 2px,transparent 2px 9px);--ground-size:auto;--phone-bezel:#000000;--phone-radius:0px;--screen:#ffffff;--ink:#000000;--muted:#3d3d3d;--skeleton:#e8e5dc;--bar-bg:#ffffff;--bar-border:2px solid #000000;--bar-radius:0px;--bar-shadow:0 -4px 0 rgba(0,0,0,1);--bar-pad:5px;--indicator-bg:#ff4d00;--indicator-radius:0px;--indicator-shadow:none;--tab-fg:#000000;--tab-fg-active:#ffffff;--badge-bg:#000000;--badge-fg:#ffe600;--label-size:0.58rem;--label-weight:700;--label-tracking:0.1em;--label-transform:uppercase;--font-body:ui-monospace,SFMono-Regular,Menlo,monospace;--font-title:'Archivo Black',system-ui,sans-serif;--title-weight:400;--title-transform:uppercase;--focus-ring:#ff4d00;--toolbar-bg:#ffffff;--toolbar-ink:#ffffff;--indicator-stretch:1.6}body{background-color:var(--ground);background-image:var(--ground-image);background-size:var(--ground-size);color:var(--ink);font-family:var(--font-body);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;-webkit-font-smoothing:antialiased}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.phone{width:min(390px,100%);height:min(720px,calc(100vh - 3rem));padding:10px;border-radius:var(--phone-radius);background:var(--phone-bezel);box-shadow:0 30px 70px rgba(0,0,0,0.35)}.phone-screen{position:relative;height:100%;border-radius:calc(var(--phone-radius) - 10px);background:var(--screen);overflow:hidden;display:flex;flex-direction:column}.screen-body{flex:1;padding:2.25rem 1.5rem 1rem;overflow:hidden}.screen-title{font-family:var(--font-title);font-weight:var(--title-weight);text-transform:var(--title-transform);font-size:1.65rem;letter-spacing:-0.01em;margin-bottom:1.4rem}.screen-row{height:58px;border-radius:calc(var(--bar-radius) / 2);background:var(--skeleton);margin-bottom:0.75rem}.screen-row.short{width:62%}.tab-bar{position:relative;display:flex;align-items:stretch;margin:0 0.75rem 0.75rem;padding:var(--bar-pad);padding-bottom:calc(var(--bar-pad) + env(safe-area-inset-bottom,0px));background:var(--bar-bg);border:var(--bar-border);border-radius:var(--bar-radius);box-shadow:var(--bar-shadow)}.tab-indicator{position:absolute;left:0;top:var(--bar-pad);height:calc(100% - var(--bar-pad) * 2 - env(safe-area-inset-bottom,0px));width:60px;border-radius:var(--indicator-radius);background:var(--indicator-bg);box-shadow:var(--indicator-shadow);pointer-events:none;z-index:1}.tab{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0.5rem 0.25rem;color:var(--tab-fg);text-decoration:none;transition:color 0.25s ease;border-radius:var(--indicator-radius);-webkit-tap-highlight-color:transparent}.tab.is-active{color:var(--tab-fg-active)}.tab-icon{display:block;line-height:0}.tab-icon svg{width:22px;height:22px;display:block}.tab-label{font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);text-transform:var(--label-transform);line-height:1}.tab-badge{position:absolute;top:4px;left:calc(50% + 4px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--badge-bg);color:var(--badge-fg);font-size:0.6rem;font-weight:700;line-height:17px;text-align:center;z-index:3}.tab:focus-visible,.showcase-toolbar button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.showcase-toolbar{position:fixed;top:0.75rem;left:0.75rem;z-index:1000;display:flex;gap:0.25rem;padding:0.25rem;border-radius:8px;background:var(--toolbar-bg);border:1px solid var(--phone-bezel);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.7rem}.showcase-toolbar button{background:transparent;border:0;color:var(--muted);padding:0.3rem 0.55rem;border-radius:6px;cursor:pointer;font:inherit;letter-spacing:0.04em}.showcase-toolbar button[aria-pressed="true"]{background:var(--indicator-bg);color:var(--toolbar-ink)}body[data-variant="vault"] .showcase-toolbar button[aria-pressed="true"]{color:#06070a}body[data-variant="soft"] .showcase-toolbar button[aria-pressed="true"]{color:#3d2a70}body[data-variant="brutal"] .showcase-toolbar button[aria-pressed="true"]{color:#ffffff}@media (max-width:430px){body{padding:0;align-items:stretch}.phone{width:100%;height:100vh;padding:0;border-radius:0;box-shadow:none}.phone-screen{border-radius:0}.screen-body{padding-top:3.25rem}.showcase-toolbar{top:auto;bottom:6.25rem;left:50%;margin-left:-84px}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.001ms !important;transition-duration:0.001ms !important}}