:root {
  --sky: #4DB0FF; --blue-mid: #2F86E6; --blue-deep: #1E5FB8; --navy: #243E73;
  --cream: #FCE7C0; --tan: #E6BE8A; --outline: #3A1E10; --blush: #F7A48C;
  --yellow: #FFD54A; --cardboard: #D9A367; --paper: #FFF6E6; --loss: #FF3B3B; --pump: #2EE87A;
  --line: #1B4A9C; --wall: #4FA8F7; --floor: #3D8FE8;
  --u: min(1vw, 1.8vh);
  --display: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  --body: 'Fredoka', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html { background: var(--sky); }
body {
  background: var(--sky); color: var(--outline); font-family: var(--body); font-weight: 600;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
body.loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--yellow); }
.prop { position: absolute; display: block; pointer-events: none; }
.prop svg { width: 100%; height: auto; display: block; overflow: visible; }
.boil { filter: url(#boil); }

/* ---------- cursor ---------- */
#cursor { display: none; }
@media (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  html.has-cursor input, html.has-cursor textarea { cursor: text !important; }
  #cursor { display: block; }
}
#cursor { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; transition: opacity .25s; }
#cursor.off { opacity: 0; }
.cur-dot { position: fixed; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--outline); box-shadow: 0 0 0 2px var(--yellow); }
.cur-follow { position: fixed; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; will-change: transform; }
.cur-blob, .cur-hand { position: absolute; inset: 0; transition: transform .35s cubic-bezier(.3,1.8,.5,1), opacity .2s; }
.cur-blob svg, .cur-hand svg { width: 100%; height: 100%; overflow: visible; display: block; }
.cur-blob svg { filter: drop-shadow(0 3px 0 rgba(20,50,120,.3)); }
.cur-hand { opacity: 0; transform: scale(.5); }
.cur-hand svg { position: absolute; inset: 0; }
.cur-grab { opacity: 0; }
.cur-label {
  position: absolute; left: 50%; top: 100%; margin-top: 6px; translate: -50% 0; white-space: nowrap; font-family: var(--display); font-size: 12px; letter-spacing: .06em;
  background: var(--yellow); border: 2.5px solid var(--outline); border-radius: 99px; padding: 2px 8px; box-shadow: 0 2px 0 var(--outline);
  opacity: 0; transform: scale(.4) translateY(-6px); transition: transform .3s cubic-bezier(.3,1.8,.5,1), opacity .2s;
}
#cursor.is-hover .cur-blob { transform: scale(1.35) rotate(-8deg); }
#cursor.is-hover .cur-label { opacity: 1; transform: none; }
#cursor.is-hover .cur-dot, #cursor.is-hand .cur-dot { transform: scale(0); }
#cursor.is-hand .cur-blob { opacity: 0; transform: scale(.4); }
#cursor.is-hand .cur-hand { opacity: 1; transform: scale(1); }
#cursor.is-grab .cur-open { opacity: 0; }
#cursor.is-grab .cur-grab { opacity: 1; }
#cursor.is-grab .cur-hand { transform: scale(.88); }
#cursor.is-down .cur-blob { transform: scale(.75, .6); }
#cursor.on-input .cur-follow, #cursor.on-input .cur-dot { opacity: 0; }
.cur-dot { transition: transform .2s; }

/* ---------- loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 58; background: radial-gradient(circle at 50% 45%, #7cc6ff, var(--sky) 60%, #2f86e6);
  display: grid; place-items: center; align-content: center; gap: 2vh;
}
.loader-box { position: relative; width: min(60vw, 340px); aspect-ratio: 300/240; }
.loader-box svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lb-rays { width: 22%; left: 86%; top: -10%; opacity: 0; }
.loader-anchor { position: absolute; left: 50%; top: 40%; width: 1px; height: 1px; }
.loader-txt { font-family: var(--display); color: #fff; font-size: 20px; letter-spacing: .04em; text-shadow: 0 3px 0 var(--line); }

/* ---------- papers + character ---------- */
#papers { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
.char { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; will-change: transform; }
.char-inner { transform-origin: 50% 100%; will-change: transform; }
.char svg { width: 100%; height: auto; display: block; overflow: visible; pointer-events: auto; filter: url(#boil) drop-shadow(0 6px 0 rgba(20,50,120,.18)); touch-action: none; }
.char.is-dragging svg { pointer-events: none; }
.char-shadow {
  position: absolute; left: 50%; bottom: -4px; width: 70%; height: 14px; border-radius: 50%;
  background: rgba(16, 52, 128, .28); transform-origin: 50% 50%; z-index: -1;
}
.char-say {
  position: absolute; left: 50%; bottom: 106%; translate: -50% 0; white-space: nowrap; transform-origin: 50% 120%;
  background: var(--paper); border: 3px solid var(--outline); border-radius: 18px; padding: 6px 14px;
  font-family: var(--display); font-size: clamp(13px, 1.2vw, 18px); letter-spacing: .02em; transform: scale(0);
  box-shadow: 0 4px 0 var(--outline);
}
.char-say::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -8px; border: 8px solid transparent; border-top-color: var(--outline); }

/* ---------- nav ---------- */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; justify-content: space-between; align-items: center;
  padding: 14px clamp(16px, 3vw, 36px); pointer-events: none;
}
.topnav > * { pointer-events: auto; }
.nav-logo { font-family: var(--display); font-size: clamp(22px, 2.4vw, 32px); color: var(--yellow); letter-spacing: .02em;
  -webkit-text-stroke: 6px var(--outline); paint-order: stroke fill; text-shadow: 0 4px 0 var(--outline); }
.nav-right { display: flex; gap: 10px; align-items: center; }
.pill-s {
  display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 3px solid var(--outline);
  border-radius: 999px; padding: 6px 14px; font-family: var(--display); font-size: 14px; letter-spacing: .03em;
  box-shadow: 0 4px 0 var(--outline); white-space: nowrap;
}
.nav-count:hover, .nav-ic:hover { transform: translateY(-2px) rotate(-2deg); }
.nav-ic { width: 40px; height: 40px; display: grid; place-items: center; background: var(--yellow); border: 3px solid var(--outline); border-radius: 50%; box-shadow: 0 4px 0 var(--outline); font-weight: 700; transition: transform .2s; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--loss); box-shadow: 0 0 0 2px var(--outline); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.help { position: fixed; left: 50%; bottom: 16px; translate: -50% 0; z-index: 80; font-size: 13px; opacity: 0; pointer-events: none; }

/* ---------- dock ---------- */
#dock {
  position: fixed; right: 14px; top: 50%; z-index: 65; translate: 0 -50%; display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  opacity: 0; pointer-events: none; transform: translateX(120%); transition: transform .45s cubic-bezier(.3,1.6,.5,1), opacity .3s;
}
#dock.show { opacity: 1; transform: none; }
.dock-title { font-family: var(--display); color: #fff; text-shadow: 0 3px 0 var(--line); font-size: 15px; }
.dock-doors { display: flex; flex-direction: column; gap: 6px; }
.dock-door {
  display: flex; align-items: center; gap: 8px; background: var(--blue-mid); color: #fff; border: 3px solid var(--line); border-radius: 12px;
  padding: 7px 12px 7px 8px; font-family: var(--display); font-size: 14px; box-shadow: 0 4px 0 var(--line); transition: transform .2s, background .2s;
}
.dock-door i { width: 16px; height: 24px; background: #A8DBFF; border: 2px solid var(--line); border-radius: 3px; }
.dock-door.hot { background: var(--yellow); color: var(--outline); border-color: var(--outline); transform: scale(1.12) translateX(-8px); box-shadow: 0 4px 0 var(--outline); }

/* ---------- scenes ---------- */
.scene { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.stage { position: absolute; inset: 0; overflow: hidden; }
.room .wall, .scene .wall { position: absolute; inset: 0 0 22% 0; background:
  repeating-linear-gradient(90deg, transparent 0 calc(var(--u)*18), rgba(27,74,156,.08) calc(var(--u)*18) calc(var(--u)*18 + 3px)),
  linear-gradient(#5DB6FF, var(--wall)); }
.room .wall::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u)*2); background: #3A8BE8; border-top: 3px solid var(--line); }
.room .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background:
  linear-gradient(rgba(255,255,255,.08), transparent 40%), var(--floor); border-top: 4px solid var(--line); }
.ceil-light { position: absolute; top: 0; width: calc(var(--u)*16); height: calc(var(--u)*2.2); translate: -50% 0; background: #EAF6FF; border: 3px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; box-shadow: 0 10px 40px 10px rgba(255,255,255,.35); }
.scene-title {
  position: absolute; left: 50%; top: 11%; translate: -50% 0; text-align: center; width: 92%;
  font-family: var(--display); font-weight: 400; color: #fff; font-size: clamp(30px, 5.4vw, 86px); line-height: .95; letter-spacing: .01em;
  -webkit-text-stroke: clamp(5px, .7vw, 10px) var(--outline); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--outline); z-index: 5;
}
.room-plate { position: absolute; left: 50%; top: 7%; translate: -50% 0; font-family: var(--display); font-size: clamp(18px, 2.2vw, 30px); color: #fff; background: var(--navy); border: 4px solid var(--outline); border-radius: 12px; padding: 6px 18px; box-shadow: 0 5px 0 var(--outline); z-index: 5; white-space: nowrap; }
[data-anchor] { position: absolute; width: 2px; height: 2px; pointer-events: none; }
.anchor-free { translate: -50% 0; }

/* ---------- hero ---------- */
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #8FD0FF 0%, var(--sky) 45%, #2A8BF0 100%); }
.sunburst { width: 170vmax; left: 50%; top: 50%; translate: -50% -50%; animation: spin 60s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.hero-float .hf { transition: none; }
.hero-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vh; padding-top: 4vh; }
.logo-wrap { position: relative; }
.logo { font-family: var(--display); font-weight: 400; font-size: clamp(76px, 17vw, 270px); line-height: .9; letter-spacing: .01em; display: flex; }
.logo .l { display: inline-block; position: relative; }
.logo .li {
  display: inline-block; color: var(--yellow); -webkit-text-stroke: .075em var(--outline); paint-order: stroke fill;
  text-shadow: 0 .06em 0 var(--outline), 0 .12em 0 rgba(20,60,140,.25); position: relative; cursor: pointer;
}
.logo .li::after { content: ''; position: absolute; left: 24%; top: 22%; width: 16%; height: 8%; background: rgba(255,255,255,.75); border-radius: 99px; rotate: -12deg; }
.logo .l:nth-child(odd) .li { rotate: -3deg; } .logo .l:nth-child(even) .li { rotate: 3deg; }
.lr { width: clamp(46px, 7vw, 110px); top: 10%; }
.lr-l { left: -6%; rotate: -80deg; scale: -1 1; } .lr-r { right: -6%; rotate: 0deg; }
.pill {
  font-family: var(--display); font-size: clamp(22px, 4.2vw, 64px); background: var(--paper); border: .1em solid var(--outline); border-radius: 999px;
  padding: .12em .7em .08em; box-shadow: 0 .1em 0 var(--outline); display: inline-flex; align-items: center; gap: .3em; line-height: 1; position: relative;
}
.pill-1 { rotate: -2deg; } .pill-2 { rotate: 1.5deg; font-size: clamp(20px, 3.4vw, 52px); }
.pill-2 .dot { width: .35em; height: .35em; }
.countdown { display: flex; gap: 10px; margin-top: 1vh; }
.countdown div { background: var(--navy); color: #fff; border: 3px solid var(--outline); border-radius: 12px; padding: 6px 10px; text-align: center; min-width: 62px; box-shadow: 0 4px 0 var(--outline); font-family: var(--display); font-size: clamp(20px, 2.2vw, 30px); line-height: 1; }
.countdown small { display: block; font-family: var(--body); font-size: 10px; opacity: .8; letter-spacing: .1em; margin-top: 4px; }
.hero-anchor { position: absolute; left: 18%; bottom: 12%; }
.scroll-cue { position: absolute; bottom: 3vh; left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; font-family: var(--display); color: #fff; text-shadow: 0 3px 0 var(--line); font-size: 15px; letter-spacing: .15em; }
.scroll-cue b { font-size: 28px; animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(8px); } }

/* ---------- tape ---------- */
.tape { position: relative; z-index: 10; height: 0; }
.tape > .tape-track {
  position: absolute; left: -10vw; width: 120vw; top: 0; translate: 0 -50%; rotate: -2.5deg; background: var(--yellow); border-block: 5px solid var(--outline);
  font-family: var(--display); font-size: clamp(18px, 2vw, 28px); white-space: nowrap; padding: 10px 0; overflow: hidden; box-shadow: 0 6px 0 rgba(0,0,0,.15);
}
.tape-b > .tape-track { rotate: 2deg; background: var(--paper); }
.tape-track span { display: inline-block; will-change: transform; }

/* ---------- door ---------- */
.door-cam { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.door-wrap { position: absolute; left: 50%; bottom: 22%; height: 56%; aspect-ratio: 150/280; translate: -50% 0; perspective: 1200px; }
.door-hole { position: absolute; inset: 0; background: #16316A; border: calc(var(--u)*1.1) solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; overflow: hidden; }
.door-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 70%, #FFE38A 0%, #D9A367 25%, #3a5fa8 70%); opacity: .9; }
.door-leaf { position: absolute; inset: 0; background: #3C86E8; border: calc(var(--u)*1.1) solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; transform-origin: 0 50%; backface-visibility: hidden; }
.dl-window { position: absolute; left: 18%; right: 18%; top: 10%; height: 24%; background: linear-gradient(135deg, #A8DBFF 60%, #fff 60% 66%, #A8DBFF 66%); border: 5px solid var(--line); border-radius: 8px; }
.dl-plaque { position: absolute; left: 10%; right: 10%; top: 42%; background: var(--yellow); border: 4px solid var(--outline); border-radius: 6px; font-family: var(--display); text-align: center; font-size: calc(var(--u)*2.2); padding: 4px 0; }
.dl-handle { position: absolute; right: 10%; top: 58%; width: 12%; height: 14%; background: #DCEBFF; border: 4px solid var(--line); border-radius: 8px; }
.door-anchor { left: 50%; bottom: 0; }
.sign-storage { position: absolute; left: 50%; bottom: 80%; translate: -50% 0; font-family: var(--display); background: var(--navy); color: #fff; border: 4px solid var(--line); border-radius: 10px; padding: 6px 14px; text-align: center; font-size: calc(var(--u)*2.4); line-height: 1; }
.sign-storage small { display: block; font-family: var(--body); font-size: .5em; opacity: .8; margin-top: 3px; }
.door-fade { position: absolute; inset: 0; background: var(--wall); opacity: 0; pointer-events: none; }
.door-title { top: 13%; }

/* ---------- closet ---------- */
.layer { position: absolute; inset: 0; will-change: transform; }
.l-back { inset: 0 -6vw; }
.l-front .prop { filter: blur(3px); }
.closet-title { top: 8%; }
.hbox { position: absolute; left: 50%; bottom: 10%; width: min(44vw, 58vh); aspect-ratio: 300/200; translate: -50% 0; z-index: 4; }
.hbox > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hb-rays { width: 16%; top: -22%; opacity: 0; }
.hb-rays-l { left: -6%; rotate: -80deg; scale: -1 1; } .hb-rays-r { right: -6%; }
.intro-card {
  position: absolute; left: 14%; right: 14%; top: 18%; height: 110%; background: var(--paper); border: 5px solid var(--outline); border-radius: 14px;
  box-shadow: 0 8px 0 var(--outline); transform-origin: 50% 100%; padding: 4%; overflow: hidden;
}
.ic-tag { font-family: var(--display); text-align: center; font-size: clamp(18px, 3vw, 40px); line-height: 1; transform: rotate(-3deg); }
.ic-body { opacity: 0; margin-top: 3%; }
.kicker { font-family: var(--display); color: var(--blue-mid); font-size: clamp(11px, 1vw, 15px); letter-spacing: .12em; }
.ic-body h3 { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.4vw, 36px); line-height: 1; margin: .2em 0 .3em; }
.ic-body p { font-size: clamp(12px, 1.05vw, 16px); line-height: 1.35; font-weight: 500; }
.ic-stats { display: flex; gap: 8px; margin-top: 4%; }
.ic-stats div { flex: 1; background: var(--sky); border: 3px solid var(--outline); border-radius: 10px; text-align: center; padding: 6px 2px; color: #fff; }
.ic-stats b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(16px, 1.8vw, 28px); -webkit-text-stroke: 4px var(--outline); paint-order: stroke fill; }
.ic-stats span { font-size: 11px; color: var(--outline); }
.hbox-anchor { left: -10%; bottom: 0; }

/* ---------- corridor ---------- */
.corr-track { position: absolute; top: 0; bottom: 0; left: 0; width: 560vw; will-change: transform; }
.corr-wall { position: absolute; inset: 0 0 22% 0; background:
  repeating-linear-gradient(90deg, transparent 0 22vw, rgba(27,74,156,.1) 22vw calc(22vw + 4px)), linear-gradient(#5DB6FF, var(--wall)); }
.corr-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: repeating-linear-gradient(90deg, var(--floor) 0 12vw, #3A89E0 12vw 24vw); border-top: 5px solid var(--line); }
.corr-title { position: absolute; left: 6vw; top: 16%; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 8vw, 140px); line-height: .9; color: #fff; -webkit-text-stroke: clamp(6px, .9vw, 14px) var(--outline); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--outline); }
.cdoor { position: absolute; bottom: 22%; height: 50%; aspect-ratio: 150/280; cursor: pointer; }
.cdoor .prop { position: absolute; inset: 0; width: 100%; }
.plaque { position: absolute; left: 50%; bottom: 104%; translate: -50% 0; white-space: nowrap; font-family: var(--display); background: var(--yellow); border: 4px solid var(--outline); border-radius: 10px; padding: 6px 14px; font-size: clamp(14px, 1.6vw, 24px); box-shadow: 0 4px 0 var(--outline); transform-origin: 50% 0; }
.poster { position: absolute; bottom: 38%; width: clamp(180px, 22vw, 380px); background: #fff; border: 6px solid var(--navy); border-radius: 8px; padding: 8px 8px 34px; box-shadow: 0 8px 0 rgba(20,50,120,.25); }
.poster img { width: 100%; display: block; border-radius: 4px; border: 3px solid var(--navy); }
.poster figcaption { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--display); font-size: clamp(13px, 1.2vw, 18px); }
.poster::before { content: ''; position: absolute; left: 50%; top: -14px; width: 70px; height: 24px; translate: -50% 0; rotate: -4deg; background: rgba(255,213,74,.85); border: 2px solid rgba(58,30,16,.3); }
.corr-hint { position: absolute; bottom: 4%; right: 4%; font-size: 13px; }

/* ---------- pc ---------- */
.window-box { position: absolute; width: calc(var(--u)*20); height: calc(var(--u)*24); background: linear-gradient(#BFE6FF, #8FD0FF); border: calc(var(--u)*1) solid var(--line); border-radius: 8px; overflow: hidden; }
.window-box::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: calc(var(--u)*.8); background: var(--line); }
.cloud { position: absolute; width: 60%; height: 18%; background: #fff; border-radius: 99px; animation: drift 14s linear infinite; }
.cloud.c1 { top: 18%; left: -60%; } .cloud.c2 { top: 55%; left: -60%; animation-delay: -7s; width: 40%; }
@keyframes drift { to { left: 120%; } }
.desk { position: absolute; left: 50%; bottom: 14%; width: min(64vw, 110vh); height: calc(var(--u)*16); translate: -50% 0; }
.desk-top { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u)*3.4); background: #E3B07A; border: 5px solid var(--outline); border-radius: 8px; z-index: 2; }
.desk-leg { position: absolute; top: 20%; bottom: 0; width: calc(var(--u)*3); background: #C99158; border: 5px solid var(--outline); border-top: 0; }
.desk-leg.l { left: 6%; } .desk-leg.r { right: 6%; }
.kbd { position: absolute; left: 50%; translate: -50% 0; width: 30%; height: calc(var(--u)*2.4); background: var(--navy); border: 4px solid #122A55; border-radius: 6px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 3px; z-index: 3; }
.kbd i { background: #5B7BC0; border-radius: 2px; }
.kbd i.down { background: var(--yellow); }
.mon-wrap { position: absolute; left: 50%; bottom: calc(100% - var(--u)*1); translate: -50% 0; width: 62%; perspective: 1400px; z-index: 1; }
.monitor { position: relative; width: 100%; aspect-ratio: 16/10; transform-style: preserve-3d; transform: rotateY(180deg); transform-origin: 50% 100%; }
.m-face { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.m-back { background: linear-gradient(#2E4A86, var(--navy)); border: calc(var(--u)*1) solid #122A55; transform: rotateY(180deg); display: grid; place-items: center; }
.m-back span { font-family: var(--display); color: rgba(255,255,255,.35); font-size: calc(var(--u)*2.6); }
.m-back::after { content: ''; position: absolute; left: 30%; right: 30%; top: 30%; bottom: 30%; border: 5px solid rgba(18,42,85,.6); border-radius: 10px; }
.m-front { background: var(--navy); border: calc(var(--u)*1) solid #122A55; padding: calc(var(--u)*1); }
.screen { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #7FC8FF, #4DB0FF 60%, #FFD54A 160%); }
.desk-icons { position: absolute; left: 3%; top: 5%; display: flex; flex-direction: column; gap: 6%; height: 80%; }
.desk-icons b { font-size: calc(var(--u)*2.4); text-align: center; font-family: var(--body); color: #fff; line-height: 1.1; }
.desk-icons b br + * { font-size: .5em; }
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: var(--navy); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 2%; font-family: var(--display); font-size: calc(var(--u)*1.5); }
.win { position: absolute; width: 44%; background: var(--paper); border: 4px solid var(--outline); border-radius: 10px; box-shadow: 0 5px 0 var(--outline); overflow: hidden; cursor: grab; touch-action: none; }
.win-bar { background: var(--yellow); border-bottom: 4px solid var(--outline); padding: 3px 8px; font-family: var(--display); font-size: calc(var(--u)*1.6); display: flex; justify-content: space-between; }
.win-bar i { font-style: normal; letter-spacing: 2px; }
.win-body { padding: 6px 10px 10px; font-size: calc(var(--u)*1.45); line-height: 1.3; white-space: pre-line; font-weight: 500; }
.m-stand { width: 16%; height: calc(var(--u)*5); margin: 0 auto; background: #1B3566; border: 4px solid #122A55; border-top: 0; }
.peek-anchor { left: 50%; bottom: calc(var(--u)*10); }

/* ---------- trading ---------- */
.alarm { position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: 3; }
.alarm-bulb { width: calc(var(--u)*6); height: calc(var(--u)*4); background: #FF6B6B; border: 4px solid var(--outline); border-top: 0; border-radius: 0 0 50% 50%; position: relative; }
.alarm-beam { position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; translate: -50% -50%; background: conic-gradient(from 0deg, rgba(255,59,59,.35) 0 20deg, transparent 20deg 180deg, rgba(255,59,59,.35) 180deg 200deg, transparent 200deg); opacity: 0; animation: spin 1.4s linear infinite; pointer-events: none; }
.city { width: calc(var(--u)*22); height: calc(var(--u)*22); background: linear-gradient(#BFE6FF, #8FD0FF); }
.bld { position: absolute; bottom: 0; background: #5C9BE6; border: 3px solid var(--line); border-bottom: 0; }
.b1 { left: 8%; width: 24%; height: 60%; } .b2 { left: 38%; width: 22%; height: 80%; } .b3 { left: 66%; width: 26%; height: 45%; }
.tdesk { position: absolute; left: 56%; bottom: 14%; width: min(70vw, 112vh); height: calc(var(--u)*16); translate: -50% 0; }
.tmon { position: absolute; left: 50%; bottom: calc(100% + var(--u)*5); translate: -50% 0; width: 76%; aspect-ratio: 16/9; background: var(--navy); border: calc(var(--u)*1.2) solid #122A55; border-radius: 18px; z-index: 1; }
.t-stand { position: absolute; left: 50%; bottom: calc(100% - 4px); translate: -50% 0; width: 12%; height: calc(var(--u)*5.5); background: #1B3566; border: 4px solid #122A55; border-bottom: 0; }
.tscreen { position: absolute; inset: 0; background: #FFF9F2; border-radius: 8px; overflow: hidden; }
.ts-side { position: absolute; left: 0; top: 0; bottom: 0; width: 8%; background: #EAF0FA; display: flex; flex-direction: column; gap: 8%; padding: 12% 16%; }
.ts-side i { height: 5%; background: #C9D7EE; border-radius: 3px; }
.ts-head { position: absolute; left: 10%; right: 3%; top: 4%; display: flex; align-items: baseline; gap: 4%; z-index: 2; }
.pair { font-family: var(--display); font-size: calc(var(--u)*1.8); color: var(--navy); }
.tnum { font-family: var(--display); font-size: calc(var(--u)*5.4); color: var(--loss); margin-left: auto; line-height: 1; }
.tusd { font-family: var(--display); font-size: calc(var(--u)*3); color: var(--loss); }
.chart { position: absolute; left: 10%; right: 3%; top: 22%; bottom: 6%; width: 87%; height: 72%; overflow: visible; }
.stamp { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -10deg; font-family: var(--display); font-size: calc(var(--u)*5.4); line-height: .95; text-align: center; color: var(--loss); border: 8px solid var(--loss); border-radius: 14px; padding: 8px 20px; background: rgba(255,249,242,.85); opacity: 0; z-index: 3; }
.glitch { position: absolute; inset: 0; opacity: 0; z-index: 4; background: repeating-linear-gradient(0deg, rgba(46,232,122,.5) 0 6px, transparent 6px 14px, rgba(255,59,59,.4) 14px 18px, transparent 18px 30px); mix-blend-mode: multiply; }
.t-chair { width: calc(var(--u)*13); left: 30%; bottom: -30%; z-index: 3; }
.red-flash { position: absolute; inset: 0; background: radial-gradient(circle, transparent 30%, rgba(255,40,40,.55)); opacity: 0; pointer-events: none; z-index: 6; }
.green-glow { position: absolute; inset: 0; background: radial-gradient(circle at 60% 40%, rgba(46,232,122,.45), transparent 60%); opacity: 0; pointer-events: none; z-index: 1; }
.trade-text { position: absolute; left: 50%; top: 14%; translate: -50% 0; width: 94%; text-align: center; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 4.4vw, 68px); color: #fff; -webkit-text-stroke: clamp(5px, .6vw, 9px) var(--outline); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--outline); z-index: 7; line-height: 1; }
.t2 em { color: var(--pump); }
.t2 { opacity: 0; }

/* ---------- archive ---------- */
.archive-title { top: 8%; }
.cabinets { position: absolute; left: 50%; bottom: 14%; translate: -50% 0; display: flex; gap: 2vw; align-items: flex-end; }
.cab { position: relative; width: clamp(64px, 14vw, 210px); }
.cab-binders { position: absolute; bottom: 100%; left: 8%; width: 70%; }
.cab-body { background: #2A66C8; border: 5px solid var(--line); border-radius: 8px; padding: 6%; display: flex; flex-direction: column; gap: 6%; height: clamp(160px, 40vh, 380px); }
.drawer { flex: 1; background: #3C86E8; border: 4px solid var(--line); border-radius: 6px; position: relative; transform-origin: 50% 100%; }
.drawer .lbl { position: absolute; left: 50%; top: 22%; translate: -50% 0; width: 44%; background: var(--paper); border: 3px solid var(--line); border-radius: 3px; font-family: var(--display); font-size: clamp(9px, 1vw, 15px); text-align: center; }
.drawer .hdl { position: absolute; left: 50%; bottom: 20%; translate: -50% 0; width: 36%; height: 14%; background: #DCEBFF; border: 3px solid var(--line); border-radius: 6px; }
.folders { position: absolute; inset: 0; pointer-events: none; }
.folder {
  position: absolute; left: 50%; top: 52%; width: min(82vw, 520px); translate: -50% -50%; background: #FFD98A; border: 5px solid var(--outline); border-radius: 6px 16px 16px 16px;
  padding: 26px 26px 22px; box-shadow: 0 10px 0 var(--outline); opacity: 0; z-index: 6;
}
.folder::before { content: ''; position: absolute; left: -5px; top: -30px; width: 40%; height: 30px; background: #FFD98A; border: 5px solid var(--outline); border-bottom: 0; border-radius: 12px 12px 0 0; }
.folder .ph { font-family: var(--display); color: var(--blue-deep); letter-spacing: .1em; font-size: 16px; }
.folder h3 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4vw, 54px); line-height: 1; margin: 4px 0 12px; }
.folder ul { list-style: none; display: grid; gap: 8px; }
.folder li { background: var(--paper); border: 3px solid var(--outline); border-radius: 10px; padding: 6px 12px; font-size: clamp(14px, 1.3vw, 18px); }
.folder li::before { content: '✔ '; color: var(--blue-mid); }
.stamp-s { position: absolute; right: -14px; top: 10px; rotate: 12deg; font-family: var(--display); font-size: clamp(20px, 2.6vw, 34px); color: var(--loss); border: 5px solid var(--loss); border-radius: 10px; padding: 2px 12px; background: rgba(255,246,230,.8); }

/* ---------- mint ---------- */
.mint-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, #3A6BC8, var(--navy) 70%); }
#mint .sunburst { opacity: .6; }
.spot { position: absolute; top: -10%; width: 40vw; height: 130%; background: linear-gradient(rgba(255,230,140,.35), transparent 80%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); transform-origin: 50% 0; }
.s1 { left: 5%; rotate: 18deg; animation: sway 5s ease-in-out infinite; } .s2 { right: 5%; rotate: -18deg; animation: sway 6s ease-in-out infinite reverse; }
@keyframes sway { 50% { rotate: 0deg; } }
.mint-title { top: 7%; }
.deck { position: absolute; left: 50%; top: 52%; width: 0; height: 0; }
.nft { position: absolute; width: clamp(130px, 15vw, 230px); aspect-ratio: 3/4; left: 0; top: 0; translate: -50% -50%; perspective: 800px; }
.nft-in { position: absolute; inset: 0; border-radius: 16px; border: 5px solid var(--outline); background: var(--c); box-shadow: 0 8px 0 var(--outline); overflow: hidden; transition: transform .25s; transform-style: preserve-3d; }
.nft-in::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.55), transparent 45%), linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, rgba(255,120,220,.25) 52%, rgba(120,255,240,.25) 58%, transparent 70%); background-size: 100% 100%, 250% 250%; background-position: 0 0, var(--hx, 0%) 0; mix-blend-mode: soft-light; pointer-events: none; z-index: 2; }
.nft-art { position: absolute; left: 10%; right: 10%; top: 14%; }
.nft-art svg { width: 100%; height: auto; overflow: visible; }
.nft-meta { position: absolute; left: 0; right: 0; bottom: 0; background: var(--paper); border-top: 4px solid var(--outline); padding: 6px 10px; font-family: var(--display); display: flex; justify-content: space-between; align-items: center; font-size: clamp(11px, 1vw, 15px); }
.nft-meta small { font-family: var(--body); font-size: .8em; background: var(--outline); color: var(--yellow); border-radius: 6px; padding: 1px 6px; }
.nft-id { position: absolute; left: 10px; top: 8px; font-family: var(--display); color: #fff; -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; font-size: clamp(12px, 1.2vw, 18px); }
.mint-panel { position: absolute; right: 4vw; bottom: 8vh; width: min(88vw, 330px); background: var(--paper); border: 5px solid var(--outline); border-radius: 18px; padding: 16px; box-shadow: 0 8px 0 var(--outline); z-index: 5; }
.mp-row { display: flex; justify-content: space-between; border-bottom: 3px dashed #C9B89A; padding: 6px 2px; font-size: 14px; }
.mp-row b { font-family: var(--display); font-weight: 400; font-size: 20px; }
.btn { display: inline-flex; justify-content: center; align-items: center; font-family: var(--display); font-size: clamp(18px, 1.8vw, 26px); border: 5px solid var(--outline); border-radius: 16px; padding: 12px 22px; box-shadow: 0 7px 0 var(--outline); transition: transform .15s, box-shadow .15s; background: var(--yellow); }
.btn:hover { transform: translateY(-3px) rotate(-2deg) scale(1.04); box-shadow: 0 10px 0 var(--outline); }
.btn:active { transform: translateY(5px) scale(.97); box-shadow: 0 2px 0 var(--outline); }
.mint-panel .btn { width: 100%; margin-top: 14px; }
.btn-x { background: #fff; } .btn-tg { background: var(--sky); color: #fff; -webkit-text-stroke: 5px var(--outline); paint-order: stroke fill; }

/* ---------- faq ---------- */
#faq { height: auto; min-height: 100vh; }
#faq .stage { position: relative; padding: 18vh 4vw 22vh; }
#faq .wall { inset: 0; }
.faq-title { top: 5vh; }
.cork-big { position: relative; max-width: 1100px; margin: 0 auto; background: #8CC4FF; border: 10px solid var(--line); border-radius: 18px; padding: 4vw 3vw; box-shadow: 0 10px 0 rgba(20,50,120,.3); }
.notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; }
.note { position: relative; height: 200px; perspective: 900px; cursor: pointer; }
.note-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.5,.5,1); }
.note.open .note-in { transform: rotateY(180deg); }
.note-f, .note-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 4px solid var(--outline); border-radius: 4px; padding: 26px 18px 16px; box-shadow: 0 6px 0 rgba(58,30,16,.35); }
.note-f { background: var(--c, #FFD95A); font-family: var(--display); font-size: 24px; line-height: 1.05; display: flex; align-items: center; }
.note-f::after { content: 'tap to flip ↻'; position: absolute; right: 12px; bottom: 10px; font-family: var(--body); font-size: 12px; opacity: .6; }
.note-b { background: var(--paper); transform: rotateY(180deg); font-size: 16px; line-height: 1.35; font-weight: 500; display: flex; align-items: center; }
.pin { position: absolute; left: 50%; top: -8px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--loss); border: 3px solid var(--outline); z-index: 3; }

/* ---------- final ---------- */
.final-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 70%, #FFE38A, var(--yellow) 25%, var(--sky) 60%); }
.fbox { position: absolute; left: 50%; bottom: 8%; width: min(44vw, 52vh); aspect-ratio: 300/200; translate: -50% 0; z-index: 4; }
.fbox svg { width: 100%; height: 100%; overflow: visible; }
.fbox-anchor { left: 50%; top: 22%; }
.minis { position: absolute; left: 50%; bottom: 25%; width: 0; height: 0; z-index: 3; }
.mini { position: absolute; width: clamp(50px, 6vw, 90px); left: 0; top: 0; translate: -50% -50%; }
.mini svg { width: 100%; height: auto; overflow: visible; }
.final-cta { position: absolute; left: 50%; top: 15%; translate: -50% 0; width: 94%; text-align: center; z-index: 6; }
.final-title { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 8.6vw, 150px); line-height: .9; color: var(--yellow); -webkit-text-stroke: clamp(7px, 1vw, 16px) var(--outline); paint-order: stroke fill; text-shadow: 0 .07em 0 var(--outline); }
.final-cta p { font-size: clamp(16px, 1.6vw, 22px); margin: 1.4vh 0 2.4vh; color: var(--outline); }
.btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.footer { background: var(--sky); padding: 8vh 4vw 6vh; position: relative; z-index: 2; }
.crumpled { max-width: 760px; margin: 0 auto; background: var(--paper); border: 4px solid var(--outline); padding: 26px 30px; rotate: -1.2deg; box-shadow: 0 8px 0 rgba(20,50,120,.3);
  clip-path: polygon(0 3%, 6% 0, 20% 2%, 40% 0, 62% 3%, 80% 0, 100% 2%, 98% 30%, 100% 60%, 98% 100%, 70% 97%, 45% 100%, 20% 97%, 0 100%, 2% 60%, 0 30%); }
.crumpled p { font-size: 15px; font-weight: 500; line-height: 1.45; }
.crumpled .copy { font-family: var(--display); margin-top: 12px; font-size: 14px; opacity: .7; }

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  :root { --u: min(1.6vw, 1.4vh); }
  .nav-count { font-size: 12px; padding: 5px 10px; }
  .nav-ic { width: 34px; height: 34px; }
  .help { display: none; }
  .hero-anchor { left: 20%; bottom: 8%; }
  .countdown div { min-width: 52px; padding: 5px 6px; }
  .hbox { width: 76vw; bottom: 16%; }
  .intro-card { left: 4%; right: 4%; height: 150%; }
  .desk, .tdesk { width: 96vw; }
  .tdesk { left: 50%; }
  .tmon { width: 92%; }
  .mon-wrap { width: 78%; }
  .win { width: 64%; }
  .cabinets { gap: 3vw; }
  .mint-panel { right: 50%; translate: 50% 0; bottom: 3vh; padding: 10px 14px; }
  .mp-row { padding: 3px 2px; }
  .deck { top: 42%; }
  .fbox { width: 80vw; }
  #dock { right: 6px; }
  .dock-door { font-size: 12px; padding: 5px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sunburst, .cloud, .alarm-beam, .scroll-cue b, .dot { animation: none !important; }
}

/* ---------- waitlist ---------- */
.nav-wl { background: var(--yellow); transition: transform .2s; }
.nav-wl:hover { transform: translateY(-2px) rotate(2deg) scale(1.05); }
#waitlist { height: auto; min-height: 100vh; }
#waitlist .stage { position: relative; padding: 16vh 4vw 18vh; display: flex; flex-direction: column; align-items: center; }
#waitlist .wall { inset: 0; }
.wl-title { position: relative; left: auto; top: auto; translate: none; width: auto; }
.wl-sub { position: relative; z-index: 5; margin-top: 1.4vh; font-size: clamp(16px, 1.6vw, 22px); color: #fff; text-shadow: 0 2px 0 var(--line); text-align: center; max-width: 560px; }
.wl-counter { position: relative; z-index: 5; margin: 2vh 0 5vh; font-size: 15px; }
.wl-line { color: var(--blue-mid); font-size: 1.3em; }
.clipboard { position: relative; z-index: 5; width: min(92vw, 620px); background: #C98E52; border: 6px solid var(--outline); border-radius: 22px; padding: 46px 18px 18px; box-shadow: 0 12px 0 var(--outline); }
.cb-clip { position: absolute; left: 50%; top: -26px; translate: -50% 0; width: 40%; height: 58px; background: linear-gradient(#E4ECF7, #B8C6DB); border: 6px solid var(--outline); border-radius: 14px 14px 10px 10px; z-index: 3; }
.cb-clip::after { content: ''; position: absolute; left: 50%; top: 8px; translate: -50% 0; width: 30%; height: 14px; border-radius: 99px; background: var(--outline); }
.cb-paper { position: relative; background: var(--paper); border: 4px solid var(--outline); border-radius: 6px; padding: 22px clamp(14px, 3vw, 28px) 26px;
  background-image: repeating-linear-gradient(transparent 0 33px, rgba(77,176,255,.18) 33px 35px); }
.cb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 4px solid var(--outline); padding-bottom: 10px; flex-wrap: wrap; }
.cb-head b { font-family: var(--display); font-weight: 400; font-size: clamp(20px, 2.4vw, 30px); }
.cb-head span { font-size: 12px; opacity: .6; letter-spacing: .08em; }
.wl-progress { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; }
.wl-bar { flex: 1; height: 18px; background: #fff; border: 3px solid var(--outline); border-radius: 99px; overflow: hidden; }
.wl-bar i { display: block; height: 100%; width: 0%; background: repeating-linear-gradient(-45deg, var(--yellow) 0 10px, #FFC21A 10px 20px); border-right: 3px solid var(--outline); transition: width .6s cubic-bezier(.3,1.5,.5,1); }
.wl-count { font-family: var(--display); font-size: 20px; min-width: 42px; text-align: right; }
.tasks { list-style: none; display: grid; gap: 12px; }
.task { position: relative; display: flex; align-items: center; gap: 12px; background: #fff; border: 4px solid var(--outline); border-radius: 14px; padding: 10px 10px 10px 12px; box-shadow: 0 5px 0 var(--outline); transform-origin: 0 50%; }
.t-box { flex: none; width: 34px; height: 34px; border: 4px solid var(--outline); border-radius: 9px; background: var(--paper); display: grid; place-items: center; }
.t-box svg { width: 22px; height: 22px; overflow: visible; }
.t-box path { fill: none; stroke: var(--pump); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .4s .1s; }
.t-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sky); border: 3px solid var(--outline); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 19px; }
.t-title { flex: 1; font-size: clamp(14px, 1.4vw, 17px); line-height: 1.2; }
.t-title small { display: block; font-size: 12px; opacity: .55; font-weight: 500; }
.t-go { flex: none; font-family: var(--display); font-size: 16px; background: var(--yellow); border: 4px solid var(--outline); border-radius: 12px; padding: 8px 14px; box-shadow: 0 4px 0 var(--outline); cursor: pointer; transition: transform .15s; min-width: 82px; color: var(--outline); }
.t-go:hover { transform: translateY(-2px) rotate(-3deg); }
.t-go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--outline); }
.task.checking .t-go { background: #fff; pointer-events: none; }
.task.checking .t-go::after { content: ''; display: inline-block; width: 12px; height: 12px; margin-left: 6px; border: 3px solid var(--outline); border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: -1px; }
.task.done { background: #E9FFF1; }
.task.done .t-box path { stroke-dashoffset: 0; }
.task.done .t-go { background: var(--pump); pointer-events: none; }
.task.done .t-title { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(58,30,16,.35); }
.t-done { position: absolute; right: 100px; top: 50%; translate: 0 -50%; rotate: -12deg; font-family: var(--display); color: var(--pump); border: 4px solid var(--pump); border-radius: 8px; padding: 0 8px; font-size: 18px; background: rgba(233,255,241,.9); opacity: 0; pointer-events: none; }
.wl-form { position: relative; margin-top: 20px; display: grid; gap: 12px; }
.wl-form label { display: grid; gap: 6px; font-family: var(--display); font-size: 15px; letter-spacing: .03em; }
.wl-form input { font: 600 16px var(--body); color: var(--outline); background: #fff; border: 4px solid var(--outline); border-radius: 12px; padding: 12px 14px; outline: none; box-shadow: inset 0 3px 0 rgba(58,30,16,.08); transition: box-shadow .2s, transform .2s; width: 100%; }
.wl-form input:focus { box-shadow: 0 0 0 4px var(--yellow); transform: rotate(-.5deg); }
.wl-form .btn { width: 100%; margin-top: 4px; }
.wl-form.is-locked label, .wl-form.is-locked .btn { opacity: .35; pointer-events: none; filter: grayscale(.6); }
.wl-lock { position: absolute; inset: -6px; z-index: 2; display: grid; place-items: center; align-content: center; gap: 4px; font-family: var(--display); font-size: 18px; text-align: center; background: repeating-linear-gradient(-45deg, rgba(255,213,74,.85) 0 22px, rgba(58,30,16,.85) 22px 44px); color: #fff; -webkit-text-stroke: 4px var(--outline); paint-order: stroke fill; border: 4px solid var(--outline); border-radius: 14px; }
.wl-lock span { font-size: 36px; -webkit-text-stroke: 0; }
.wl-form:not(.is-locked) .wl-lock { display: none; }
.wl-err { min-height: 1.2em; color: var(--loss); font-size: 14px; }
.wl-ticket { margin-top: 20px; background: var(--yellow); border: 5px solid var(--outline); border-radius: 16px; padding: 18px; text-align: center; box-shadow: 0 8px 0 var(--outline); position: relative;
  -webkit-mask: radial-gradient(circle 14px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.tk-top { font-family: var(--display); letter-spacing: .1em; font-size: 14px; }
.tk-no { font-family: var(--display); font-size: clamp(56px, 9vw, 96px); line-height: 1; color: #fff; -webkit-text-stroke: 8px var(--outline); paint-order: stroke fill; margin: 6px 0; }
.tk-who { font-size: 15px; word-break: break-all; }
.tk-foot { font-size: 12px; opacity: .7; margin-top: 6px; }
.wl-stamp { position: absolute; right: 6%; top: 36%; rotate: -14deg; font-family: var(--display); font-size: clamp(36px, 6vw, 64px); color: var(--loss); border: 8px solid var(--loss); border-radius: 14px; padding: 0 16px; background: rgba(255,246,230,.8); opacity: 0; pointer-events: none; z-index: 4; }
.wl-anchor { left: 12%; bottom: 8vh; }
@media (max-width: 700px) {
  .nav-count { display: none; }
  .nav-wl { font-size: 12px; padding: 5px 10px; }
  .t-ic { display: none; }
  .task { gap: 10px; }
  .t-go { min-width: 70px; padding: 6px 10px; }
  .t-done { right: 84px; }
}

[hidden] { display: none !important; }