:root{
  color-scheme:dark;
  --bg:#06080c;--panel:rgba(24,27,34,.76);--panel2:rgba(31,35,44,.72);
  --line:rgba(255,255,255,.105);--text:#f5f5f7;--muted:#a7a7ad;
  --gold:#ffd27a;--cyan:#64d2ff;--accent:#0a84ff;
  --shadow:0 24px 70px rgba(0,0,0,.38),0 1px 0 rgba(255,255,255,.055) inset;
  --radius:24px;
  font:100%/1.5 ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  font-optical-sizing:auto;
}
*{-webkit-tap-highlight-color:transparent}
html{background:#06080c;scroll-padding-top:92px}
body{
  background:
    radial-gradient(ellipse 70% 42% at 50% -10%,rgba(10,132,255,.16),transparent 70%),
    radial-gradient(ellipse 45% 36% at 92% 24%,rgba(100,210,255,.07),transparent 70%),
    linear-gradient(180deg,#090b10 0,#06080c 52%,#080a0f 100%);
  background-attachment:fixed;
  letter-spacing:0;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,black,transparent 72%)}
.shell{width:min(1120px,calc(100% - 36px));padding:18px 0 56px}
header{
  position:sticky;top:10px;z-index:20;
  min-height:64px;margin:0 0 24px;padding:10px 12px;
  border:1px solid rgba(255,255,255,.11);border-radius:20px;
  background:rgba(20,22,28,.66);backdrop-filter:blur(24px) saturate(165%);
  -webkit-backdrop-filter:blur(24px) saturate(165%);
  box-shadow:0 12px 40px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.1) inset;
}
header::after{content:"";position:absolute;left:18px;right:18px;bottom:-13px;height:12px;pointer-events:none;background:linear-gradient(to bottom,rgba(6,8,12,.3),transparent);filter:blur(5px)}
.brand{gap:11px;letter-spacing:0}.brand-mark{width:42px;height:42px;border:0;border-radius:13px;background:linear-gradient(145deg,#198cff,#0066d6);box-shadow:0 8px 20px rgba(0,105,218,.28),0 1px 0 rgba(255,255,255,.32) inset}.brand-mark svg{width:21px;color:white}.brand-copy{display:grid;line-height:1.08}.brand-copy b{font-size:15px;letter-spacing:-.01em}.brand-copy small{margin-top:5px;color:#92939a;font-size:10px;font-weight:600;letter-spacing:.045em;text-transform:uppercase}
.counter{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.055);color:#a9aab0;padding:8px 12px;backdrop-filter:blur(10px)}.counter b{color:#f5f5f7}
.independence-banner{margin-bottom:16px;padding:15px 17px;border-color:rgba(255,210,122,.24);border-radius:20px;background:rgba(255,210,122,.075);box-shadow:0 1px 0 rgba(255,255,255,.06) inset}.independence-mark{width:44px;height:44px;border-radius:13px;background:#ffd27a;color:#2b1c00;box-shadow:0 5px 18px rgba(255,183,67,.16)}.independence-banner strong{font-size:14px;letter-spacing:-.005em}.independence-banner p{color:#b1b2b8;line-height:1.5}
.intro{margin:0 4px 25px;color:#97989e;font-size:13px}.intro strong{color:#f5f5f7;font-weight:650}
.grid{gap:16px}.card{border-color:rgba(255,255,255,.095);border-radius:24px;background:linear-gradient(145deg,rgba(31,34,42,.79),rgba(18,21,27,.8));backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%);box-shadow:var(--shadow)}
.stage{min-height:560px;padding:28px}.stage::after{inset:auto -20% -50% 8%;height:72%;background:radial-gradient(ellipse,rgba(10,132,255,.13),transparent 65%)}
.stage-top{padding:1px 2px}.kicker{color:#64d2ff;font-size:11px;letter-spacing:.13em}.difficulty{padding:6px 10px;color:#ffd27a;border-color:rgba(255,210,122,.23);background:rgba(255,210,122,.07)}
.word-wrap{padding:42px 0 30px}.word-wrap::before{width:min(68%,440px);border-color:rgba(100,210,255,.09);box-shadow:0 0 0 32px rgba(100,210,255,.018),0 0 0 64px rgba(10,132,255,.012)}
#word{font-size:clamp(44px,7vw,78px);font-weight:720;line-height:1.02;letter-spacing:-.045em;text-shadow:0 18px 42px rgba(0,0,0,.32)}#categoryNote{max-width:540px;margin-top:18px;color:#a4a6ad;font-size:13px;line-height:1.7}
.meta-row{color:#91939a}.meta-row strong{font-weight:650}
button,.chip,.history-item{touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{min-height:44px;transform:scale(1);transform-origin:center;transition:transform .18s cubic-bezier(.2,.8,.2,1),filter .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease}
button:active{transform:scale(.965);transition-duration:.07s}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(10,132,255,.55)!important;outline-offset:3px}
.draw{min-width:220px;border-radius:14px;padding:14px 24px;color:white;background:#0a84ff;box-shadow:0 9px 24px rgba(10,132,255,.25),0 1px 0 rgba(255,255,255,.22) inset}.draw:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(10,132,255,.3)}.draw:active{transform:scale(.97)}
.icon-btn{width:46px;height:46px;border-radius:14px;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#a9aab1}.icon-btn:hover,.icon-btn.active{color:#64d2ff;border-color:rgba(100,210,255,.28);background:rgba(100,210,255,.09)}
.side{gap:16px}.panel{padding:20px}.panel h2{font-size:14px;letter-spacing:-.01em}.panel h3{color:#91939a;font-size:12px}
.chips{gap:7px}.chip{min-height:34px;padding:7px 10px;border-color:rgba(255,255,255,.085);background:rgba(255,255,255,.045);color:#a6a7ad}.chip.active{color:white;background:#0a84ff;box-shadow:0 5px 16px rgba(10,132,255,.2)}.difficulty-filter .chip.active{color:#251900;background:#ffd27a;box-shadow:0 5px 15px rgba(255,186,60,.14)}
.switch{position:relative;width:52px;height:44px;min-width:52px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none}
.switch::before{content:"";position:absolute;left:.5px;top:6.5px;width:51px;height:31px;border-radius:999px;background:#3a3a3c;transition:background-color .18s ease}
.switch::after{width:27px;height:27px;left:2.5px;top:8.5px;background:white;box-shadow:0 2px 7px rgba(0,0,0,.34);transition:left .22s cubic-bezier(.2,.8,.2,1)}
.switch.on{background:transparent}.switch.on::before{background:#30d158}.switch.on::after{left:22.5px;background:white}
.step{grid-template-columns:30px 1fr;color:#a5a6ad;line-height:1.55}.step b{width:28px;height:28px;border-radius:9px;color:#64d2ff;background:rgba(100,210,255,.09)}.step strong{color:#e4e4e7}.challenge::before{display:none}.history-item{min-height:36px;border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#a6a7ad}
.learning-workspace{margin-top:16px}.mw-stage-head{padding:23px 25px;border-color:rgba(255,255,255,.085);background:rgba(255,255,255,.025)}.mw-kicker{color:#64d2ff;letter-spacing:.12em}.mw-stage-head h2{font-weight:690;letter-spacing:-.025em;line-height:1.12}.mw-stage-head p{color:#9c9da3}.mw-progress i{background:#34353c}.mw-progress i.done{background:#30d158}.mw-progress i.now{background:#0a84ff;box-shadow:0 0 16px rgba(10,132,255,.32)}.mw-body{padding:24px 25px 27px}
.mw-pledge,.mw-panel,.mw-timer,.mw-recorder,.mw-export,.mw-record-item,.mw-gate{border-color:rgba(255,255,255,.085);background:rgba(255,255,255,.035);border-radius:18px}.mw-pledge{border-color:rgba(255,210,122,.2);background:rgba(255,210,122,.055)}
.mw-primary,.mw-secondary,.mw-danger{min-height:44px;border-radius:13px;padding:10px 15px}.mw-primary{color:white;background:#0a84ff;box-shadow:0 6px 18px rgba(10,132,255,.2)}.mw-secondary{color:#ededf0;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1)}.mw-danger{color:#ff9f92;background:rgba(255,69,58,.075);border-color:rgba(255,69,58,.19)}
.mw-clock{font-weight:740;letter-spacing:-.045em}.mw-clock.warn{color:#ffd60a}.mw-timer-meta span,.mw-help,.mw-gate p,.mw-record-state,.mw-export p{color:#999ba2}.mw-search-link{min-height:44px;border-color:rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.035);color:#d0d1d5}.mw-search-link span{color:#64d2ff}.mw-search-link:hover{border-color:rgba(100,210,255,.3);background:rgba(100,210,255,.06)}
.mw-field input,.mw-field textarea{border-color:rgba(255,255,255,.1);border-radius:13px;background:rgba(5,7,10,.42);color:#f5f5f7}.mw-field input:focus,.mw-field textarea:focus{border-color:#0a84ff;box-shadow:0 0 0 3px rgba(10,132,255,.14)}
.mw-mic{background:rgba(10,132,255,.12);border-color:rgba(100,210,255,.25)}.mw-mic.live{background:rgba(255,69,58,.12);border-color:rgba(255,69,58,.28);animation:apple-pulse 1.3s ease-out infinite}.mw-score-ring{background:conic-gradient(#30d158 calc(var(--score)*1%),#34353c 0)}.mw-score-ring::before{background:#161920}.mw-bar{background:#34353c}.mw-bar i{background:linear-gradient(90deg,#0a84ff,#64d2ff)}.mw-feedback-item{border-color:rgba(255,255,255,.085);background:rgba(255,255,255,.035);color:#d2d3d7}.mw-feedback-item strong{color:#ffd27a}
.insight-head{padding:24px 25px;border-color:rgba(255,255,255,.085);background:rgba(255,255,255,.025)}.insight-head h2{font-weight:690;letter-spacing:-.025em}.reveal-btn{min-height:44px;border-color:rgba(10,132,255,.24);background:rgba(10,132,255,.1);color:#64d2ff}.guide-panel{border-color:rgba(255,255,255,.085);background:rgba(255,255,255,.03)}
dialog{border-color:rgba(255,255,255,.12);background:rgba(28,31,39,.92);backdrop-filter:blur(34px) saturate(160%);-webkit-backdrop-filter:blur(34px) saturate(160%);box-shadow:0 38px 110px rgba(0,0,0,.62),0 1px 0 rgba(255,255,255,.1) inset}dialog::backdrop{background:rgba(0,0,0,.62);backdrop-filter:blur(8px)}.timeup-mark{background:#30d158;color:white}
.toast{bottom:28px;border:1px solid rgba(255,255,255,.1);background:rgba(39,42,51,.88);backdrop-filter:blur(20px) saturate(150%);color:white;box-shadow:0 20px 55px rgba(0,0,0,.4)}
.learning-workspace:not([hidden]),.insight-card.v3-unlocked{animation:apple-materialize .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes apple-materialize{from{opacity:0;transform:scale(.985) translateY(8px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}@keyframes apple-pulse{0%{box-shadow:0 0 0 0 rgba(255,69,58,.22)}100%{box-shadow:0 0 0 15px rgba(255,69,58,0)}}
@media(max-width:620px){.shell{width:min(100% - 20px,1120px);padding-top:10px}header{top:7px;min-height:58px;margin-bottom:17px;border-radius:17px}.brand-mark{width:38px;height:38px}.brand-copy small{display:none}.counter{padding:7px 9px}.independence-banner{border-radius:17px}.stage{padding:20px;border-radius:21px}.card{border-radius:21px}.mw-stage-head,.mw-body{padding-left:18px;padding-right:18px}.word-wrap::before{width:78%}}
@media(hover:none){.draw:hover{transform:none}.chip:hover,.icon-btn:hover{filter:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.learning-workspace:not([hidden]),.insight-card.v3-unlocked{transform:none!important;filter:none!important}}
@media(prefers-reduced-transparency:reduce){header,.card,dialog,.toast{background:#181b22!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.mw-panel,.mw-timer,.mw-recorder,.mw-export,.mw-record-item,.mw-gate{background:#1d2028!important}}
@media(prefers-contrast:more){:root{--line:rgba(255,255,255,.3);--muted:#d0d0d4}.card,header,.mw-panel,.mw-field input,.mw-field textarea{border-color:rgba(255,255,255,.32)!important}.counter,.intro,.mw-help,.mw-gate p{color:#d0d1d5!important}}
