/* owner: SHELL | contract: DESIGN_BRIEF.md sections 4, 5, 6, 13 (base layer: reset, type, layout skeleton, motion rules) */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--kw-bg-0);
  color:var(--kw-ink);
  font:400 16px/1.45 var(--kw-font-ui);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overscroll-behavior:none;
}
:root[data-theme="night"] body,:root[data-theme="auto"]:where([data-resolved="night"]) body,:root:not([data-theme]) body{
  background:
    radial-gradient(120% 70% at 50% 108%,rgba(232,182,200,.10),transparent 60%),
    radial-gradient(90% 60% at 50% -10%,rgba(143,124,255,.10),transparent 60%),
    var(--kw-bg-0);
}
img,svg,canvas,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--kw-t-gold);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--kw-line);margin:var(--kw-s-4) 0}
::selection{background:rgb(var(--kw-gold-rgb) / .35);color:inherit}

/* visible focus everywhere (keyboard reachable) */
:focus{outline:none}
/* ONE token for the ring, so Light, Evening and Auto (Auto is whichever the computer is using) can never disagree: deep violet in Light (6.4:1), bubblegum pink in Evening (7:1).
   tokens.css gives --kw-focus its value in every mode, including data-theme="auto" under either operating-system setting. */
:focus-visible{outline:2px solid var(--kw-focus,var(--kw-violet-deep));outline-offset:2px;border-radius:6px}

/* type */
.kw-display{font-family:var(--kw-font-display);font-weight:600;line-height:1.15;font-feature-settings:"lnum"}
.kw-script{font-family:var(--kw-font-script);font-weight:400;line-height:1.1}
.kw-mono{font-family:var(--kw-font-mono)}
.kw-label{font:500 11px/1.2 var(--kw-font-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--kw-ink-3)}
.kw-num{font-variant-numeric:tabular-nums}
.kw-muted{color:var(--kw-ink-3)}
.kw-gold{color:var(--kw-t-gold)}
.kw-gain{color:var(--kw-t-mint)}
.kw-loss{color:var(--kw-t-loss)}

/* hidden but readable */
.kw-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* skip link */
.kw-skip{position:fixed;left:12px;top:-60px;z-index:calc(var(--kw-z-saver) + 5);background:var(--kw-gold);color:var(--kw-on-gold);padding:10px 16px;border-radius:var(--kw-r-s);font-weight:600}
.kw-skip:focus{top:12px}

/* app skeleton: every layer is a fixed host so the world can sit behind everything */
.kw-root{position:relative;min-height:100vh;min-height:100dvh}
#kw-world{position:fixed;inset:0;z-index:var(--kw-z-world);background:transparent}
#kw-hud{position:relative;z-index:var(--kw-z-hud)}
#kw-main{position:relative;z-index:var(--kw-z-sheet)}
#kw-sheet{position:relative;z-index:var(--kw-z-sheet)}
#kw-gate{position:fixed;inset:0;z-index:calc(var(--kw-z-modal) - 5);pointer-events:none}
#kw-gate>*{pointer-events:auto}
#kw-modal{position:relative;z-index:var(--kw-z-modal)}
#kw-toast{position:fixed;left:0;right:0;bottom:calc(88px + env(safe-area-inset-bottom));z-index:var(--kw-z-toast);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 var(--kw-gutter)}
#kw-tour{position:relative;z-index:var(--kw-z-tour)}
#kw-screensaver{position:relative;z-index:var(--kw-z-saver)}

/* no-script and boot states */
.kw-boot{position:fixed;inset:0;display:grid;place-items:center;z-index:calc(var(--kw-z-modal) - 6);pointer-events:none}
.kw-boot__k{font:400 88px/1 var(--kw-font-script);background:var(--kw-foil);-webkit-background-clip:text;background-clip:text;color:transparent;animation:kw-pulse 2.4s ease-in-out infinite}
.kw-noscript{max-width:520px;margin:20vh auto;padding:var(--kw-s-5);text-align:center;border:1px solid var(--kw-line-2);border-radius:var(--kw-r-m);background:var(--kw-bg-2)}

/* shared keyframes (only transform and opacity are ever animated) */
@keyframes kw-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes kw-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes kw-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes kw-fade{from{opacity:0}to{opacity:1}}
@keyframes kw-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes kw-spin{to{transform:rotate(360deg)}}

/* motion: calm mode and the OS setting both stop movement */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
:root[data-motion="calm"] *,:root[data-motion="calm"] *::before,:root[data-motion="calm"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}

/* print: only what is marked for printing */
@media print{
  body{background:#fff!important;color:#000!important}
  body *{visibility:hidden}
  .kw-print,.kw-print *{visibility:visible}
  .kw-print{position:absolute;left:0;top:0;width:100%;padding:24px;color:#000!important;background:#fff!important}
}