/* shared UI: tokens, base, components, motion */
:root{
  --color-background:#0a0a0a;
  --color-surface:#272727;
  --color-surface-muted:#3f3f46;
  --color-text-primary:#ffffff;
  --color-text-secondary:#00fa9a;
  --color-text-muted:#dadada;
  --color-border:#272727;
  --color-primary:#0a84ff;
  --color-secondary:#00fa9a;
  --color-primary-hover:#3399ff;
  --color-success:#00fa9a;
  --color-info:#0a84ff;
  --color-surface-deep:#18181b;
  --color-text-dim:color-mix(in srgb,var(--color-text-muted) 60%,var(--color-background));
  --font-body:'Geist',Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-heading:'Geist',Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-size-display:72px;
  --font-size-h2:36px;
  --font-size-h1:16px;
  --font-size-small:11.5px;
  --font-size-body:14px;
  --spacing-3xs:4px;
  --spacing-2xs:8px;
  --spacing-xs:12px;
  --spacing-sm:16px;
  --spacing-md:20px;
  --spacing-lg:24px;
  --spacing-xl:32px;
  --spacing-2xl:36px;
  --spacing-3xl:48px;
  --spacing-4xl:56px;
  --spacing-5xl:80px;
  --spacing-section:80px;
  --container-max-width:1090px;
  --container-padding:32px;
  --radius-xs:8px;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-full:9999px;
  --shadow-xs:rgba(0,0,0,0) 0px 0px 0px 0px;
  --gradient-glow:radial-gradient(ellipse at top,rgba(255,255,255,.12),rgba(0,0,0,0) 70%);
  --gradient-title:linear-gradient(var(--color-text-primary),rgba(255,255,255,.6));
  --gradient-card:linear-gradient(to right bottom,var(--color-surface-muted),var(--color-surface-deep));
  --gradient-line:linear-gradient(to right,rgba(0,0,0,0),rgba(255,255,255,.4),rgba(0,0,0,0));
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-std:cubic-bezier(.4,0,.2,1);
  --dur-fast:.15s;
  --dur-base:.3s;
  --dur-spring:.5s;
  --dur-fade:.6s;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--color-background);color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--font-size-body);line-height:20px;font-weight:400;color:var(--color-text-primary);background:var(--color-background);padding-bottom:calc(var(--spacing-5xl) + var(--spacing-sm) + env(safe-area-inset-bottom,0px));-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,summary{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul{list-style:none}
img{display:block;max-width:100%}
::selection{background:var(--color-primary);color:var(--color-text-primary)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i.lg{width:20px;height:20px}
.i.xl{width:24px;height:24px}
.wrap{width:100%;max-width:calc(var(--container-max-width) + var(--container-padding)*2);padding-inline:var(--container-padding);margin-inline:auto}
.band{padding-block:var(--spacing-section)}
.small{font-size:var(--font-size-small);line-height:16px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase}
.eyebrow{color:var(--color-text-secondary)}
.mono{font-family:var(--font-mono)}
.dim{color:var(--color-text-dim)}
.display{font-family:var(--font-heading);font-size:var(--font-size-display);line-height:75.5px;font-weight:600;letter-spacing:-1.8px}
.h2{font-family:var(--font-heading);font-size:var(--font-size-h2);line-height:40px;font-weight:600;letter-spacing:-.9px}
.lead{font-size:var(--font-size-h1);line-height:24px;letter-spacing:-.375px;color:var(--color-text-muted)}
.grad{background:var(--gradient-title);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.rule{height:1px;background:var(--gradient-line)}
.hd{height:60px;position:relative;z-index:30}
.hd .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-sm)}
.brand{display:inline-flex;align-items:center;gap:var(--spacing-2xs);font-size:var(--font-size-h1);font-weight:600;letter-spacing:-.375px}
.brand .mk{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--gradient-card);transition:transform var(--dur-spring) var(--ease-spring)}
.brand:hover .mk{transform:rotate(-8deg) scale(1.08)}
.brand:active .mk{transform:scale(.92);transition-duration:var(--dur-fast)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2xs);height:48px;padding:0 var(--spacing-lg);border:2px solid var(--color-text-primary);border-radius:var(--radius-full);color:var(--color-text-primary);font-size:var(--font-size-body);font-weight:600;line-height:1;white-space:nowrap;transition:transform var(--dur-spring) var(--ease-spring),background-color var(--dur-base) var(--ease-std),color var(--dur-base) var(--ease-std),border-color var(--dur-base) var(--ease-std),opacity var(--dur-base) var(--ease-std)}
.btn:hover{background:var(--color-text-primary);color:var(--color-background);transform:translateY(-2px)}
.btn:active{transform:scale(.96);transition-duration:var(--dur-fast)}
.btn .arr{transition:transform var(--dur-spring) var(--ease-spring)}
.btn:hover .arr{transform:translateX(4px)}
.btn.g{border-color:var(--color-secondary);color:var(--color-secondary)}
.btn.g:hover{background:var(--color-secondary);color:var(--color-background)}
.btn.f{background:var(--color-text-primary);color:var(--color-background)}
.btn.f:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:var(--color-text-primary)}
.btn.m{border-color:var(--color-border);color:var(--color-text-muted)}
.btn.m:hover{background:var(--color-surface);border-color:var(--color-surface-muted);color:var(--color-text-primary)}
.btn.sm{height:36px;padding:0 var(--spacing-sm)}
.btn.xs{height:32px;padding:0 14px;border:0;border-radius:var(--radius-xs);background:var(--color-text-primary);color:var(--color-background);font-weight:500}
.btn.xs:hover{background:var(--color-primary-hover);color:var(--color-text-primary)}
.btn.w{width:100%}
.btn[data-s=busy]{pointer-events:none;opacity:.7}
.btn .sp,.sp{display:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--color-surface-muted);border-top-color:var(--color-text-primary);animation:spin .6s linear infinite}
.btn[data-s=busy] .sp{display:block}
.btn[data-s=busy] .i:not(.keep){display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0;transform:translateY(var(--spacing-lg))}to{opacity:1;transform:none}}@keyframes dockrise{from{opacity:0;transform:translateX(-50%) translateY(var(--spacing-lg))}to{opacity:1;transform:translateX(-50%)}}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes pulse{70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}
.rise{opacity:0}
.rise.in{opacity:1;animation:rise var(--dur-fade) ease backwards;animation-delay:var(--d,0ms)}
.enter{animation:rise var(--dur-fade) ease backwards;animation-delay:calc(var(--i,0)*60ms)}
.card{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-lg);transition:transform var(--dur-spring) var(--ease-spring),border-color var(--dur-base) ease}
.card.lg{border-radius:var(--radius-lg)}
.card.grad-bg{background:var(--gradient-card)}
a.card:hover,.card.hv:hover{transform:translateY(-4px);border-color:var(--color-surface-muted)}
a.card:active,.card.hv:active{transform:scale(.98);transition-duration:var(--dur-fast)}
.tile{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--gradient-card);color:var(--color-text-primary);transition:transform var(--dur-spring) var(--ease-spring)}
.card:hover .tile{transform:rotate(-6deg) scale(1.1)}
.chipx{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 var(--spacing-2xs);border:1px solid var(--color-border);border-radius:var(--radius-xs);color:var(--color-text-muted);font-size:var(--font-size-small);font-weight:600;letter-spacing:.4px;line-height:16px;transition:border-color var(--dur-base) ease,color var(--dur-base) ease}
.chipx.hi{background:var(--color-text-primary);border-color:var(--color-text-primary);color:var(--color-background)}
.chipx.ok{border-color:var(--color-secondary);color:var(--color-secondary)}
.dock{position:fixed;left:50%;bottom:calc(var(--spacing-md) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:flex;gap:var(--spacing-3xs);padding:var(--spacing-2xs);border:1px solid var(--color-border);border-radius:var(--radius-full);background:color-mix(in srgb,var(--color-background) 80%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:dockrise var(--dur-fade) ease .3s backwards}
.dock a{position:relative;width:48px;height:40px;display:grid;place-items:center;border-radius:var(--radius-full);color:var(--color-text-dim);transition:transform var(--dur-spring) var(--ease-spring),background-color var(--dur-base) var(--ease-std),color var(--dur-base) var(--ease-std)}
.dock a:hover{color:var(--color-text-primary);transform:translateY(-4px) scale(1.12)}
.dock a:active{transform:scale(.9);transition-duration:var(--dur-fast)}
.dock a[aria-current=page]{background:var(--color-surface);color:var(--color-text-primary)}
.dock a span{position:absolute;bottom:calc(100% + var(--spacing-2xs));left:50%;transform:translate(-50%,4px);padding:var(--spacing-3xs) var(--spacing-2xs);border:1px solid var(--color-border);border-radius:var(--radius-xs);background:var(--color-background);color:var(--color-text-primary);font-size:var(--font-size-small);font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-std),transform var(--dur-spring) var(--ease-spring)}
@media(hover:hover){.dock a:hover span{opacity:1;transform:translate(-50%,0)}}
.ft{border-top:1px solid var(--color-border);padding-block:var(--spacing-4xl) var(--spacing-2xl)}
.ft-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spacing-xl)}
.ft-a{grid-column:span 2;display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:flex-start}
.ft-a p{max-width:360px;color:var(--color-text-dim)}
.ft-b{grid-column:span 2}
.ft-b h3{margin-bottom:var(--spacing-md);color:var(--color-text-secondary)}
.ft-b ul{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-xs) var(--spacing-lg)}
.ft-b a,.ft-b button{display:inline-flex;align-items:center;gap:6px;color:var(--color-text-muted);transition:color var(--dur-base) ease,transform var(--dur-spring) var(--ease-spring)}
.ft-b a:hover,.ft-b button:hover{color:var(--color-text-primary);transform:translateX(4px)}
.ft-end{margin-top:var(--spacing-3xl);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border);display:flex;justify-content:space-between;gap:var(--spacing-sm);flex-wrap:wrap;color:var(--color-text-dim)}
.toast{position:fixed;left:50%;bottom:calc(var(--spacing-5xl) + var(--spacing-xl) + env(safe-area-inset-bottom,0px));z-index:80;max-width:calc(100% - var(--spacing-xl)*2);padding:var(--spacing-xs) var(--spacing-md);border:1px solid var(--color-surface-muted);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text-primary);font-weight:500;opacity:0;transform:translate(-50%,var(--spacing-sm));pointer-events:none;transition:opacity var(--dur-base) var(--ease-std),transform var(--dur-spring) var(--ease-spring)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr}.ft-a,.ft-b{grid-column:auto}}
@media(max-width:640px){
  :root{--container-padding:20px}
  .display{font-size:var(--font-size-h2);line-height:40px;letter-spacing:-.9px}
  .band{padding-block:var(--spacing-3xl)}
  .ft-b ul{grid-template-columns:1fr}
  .btn{width:100%}
  .btn.sm,.btn.xs{width:auto}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rise{opacity:1}}

dialog.qr{margin:auto;width:min(calc(100% - var(--spacing-xl)),360px);padding:var(--spacing-lg);border:1px solid var(--color-surface-muted);border-radius:var(--radius-lg);background:var(--color-background);color:var(--color-text-primary);text-align:center}
dialog.qr::backdrop{background:color-mix(in srgb,var(--color-background) 80%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
dialog.qr[open]{animation:pop var(--dur-spring) var(--ease-spring)}
dialog.qr h2{font-size:var(--font-size-h1);font-weight:600;letter-spacing:-.375px;margin-bottom:var(--spacing-xs)}
dialog.qr img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:var(--radius-sm);background:var(--color-text-primary);margin-bottom:var(--spacing-xs)}
dialog.qr p{color:var(--color-text-dim);margin-bottom:var(--spacing-md)}
dialog.qr .acts{display:flex;gap:var(--spacing-xs);justify-content:center}