:root{
  --bg:#101219;
  --panel:#181b24;
  --panel2:#202430;
  --paper:#f2efdf;
  --ink:#151820;
  --text:#f6f2e8;
  --muted:#aaa99f;
  --accent:#ffb347;
  --accent2:#ffd27b;
  --line:rgba(255,255,255,.11);
  --danger:#e58b78;
  --life:#b6d7bd;
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic",sans-serif}
body{min-height:100dvh;overflow-x:hidden}
button,input{font:inherit}
button{touch-action:manipulation}
.app-shell{width:min(100%,520px);min-height:100dvh;margin:0 auto;position:relative;background:radial-gradient(circle at 50% -12%,#2b2b34 0,#161820 34%,var(--bg) 66%);overflow:hidden}
.topbar{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:absolute;left:0;right:0;top:env(safe-area-inset-top);z-index:20;pointer-events:none}
.brand{font-size:12px;letter-spacing:.14em;color:#8d8c84;font-weight:700;pointer-events:auto}
.icon-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.05);color:var(--muted);pointer-events:auto}
.icon-btn.off{opacity:.35}
.screen{display:none;min-height:100dvh;padding:92px 22px 36px;position:relative;animation:fadeIn .32s ease both}
.screen.active{display:flex;flex-direction:column}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{margin:0 0 12px;color:var(--accent);font-size:12px;letter-spacing:.18em;font-weight:800}
h1,h2{margin:0;letter-spacing:-.045em;line-height:1.1}
h1{font-size:clamp(48px,13vw,68px)}
h2{font-size:clamp(34px,9.3vw,48px)}
.lead{font-size:17px;line-height:1.8;margin:22px 0;color:#d7d3c7}
.lead.small{font-size:16px}
.sublead{font-size:14px;line-height:1.7;color:var(--muted);margin:15px 0 24px}
.microcopy{font-size:12px;line-height:1.65;color:#74756f;text-align:center;margin:18px auto 0;max-width:390px}
.microcopy.left{text-align:left;margin:18px 0}
.primary-btn{width:100%;min-height:58px;border:0;border-radius:18px;background:var(--accent);color:#1b160e;font-weight:850;letter-spacing:.01em;margin-top:18px;box-shadow:0 10px 28px rgba(255,179,71,.18)}
.primary-btn:active{transform:scale(.985)}
.primary-btn:disabled{background:#343640;color:#777a84;box-shadow:none}
.text-btn{border:0;background:none;color:#a4a49c;padding:16px 10px;margin-top:4px;text-decoration:underline;text-decoration-color:#55564f;text-underline-offset:4px}
.text-btn.light{color:#ddd9cf;text-decoration-color:#777}
.home-visual{height:245px;margin:4px 0 10px;position:relative;display:flex;align-items:center;justify-content:center}
.brain-core{width:118px;height:118px;border-radius:45% 55% 51% 49% / 55% 46% 54% 45%;background:#252935;border:1px solid #393e4c;box-shadow:inset 0 0 28px rgba(255,255,255,.03),0 20px 60px rgba(0,0,0,.28);display:grid;place-items:center;color:#707683;font-weight:900;font-size:30px}
.brain-orbit{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;animation:orbit 9s linear infinite}
.brain-orbit span{position:absolute;background:#eee9d9;color:#28271f;border-radius:9px;padding:7px 10px;font-size:12px;box-shadow:0 10px 20px rgba(0,0,0,.2);white-space:nowrap}
.orbit-a{width:205px;height:130px;transform:rotate(-12deg)} .orbit-a span{left:-12px;top:52px}
.orbit-b{width:250px;height:180px;transform:rotate(15deg);animation-duration:13s;animation-direction:reverse}.orbit-b span{right:-18px;top:50px}
.orbit-c{width:280px;height:215px;transform:rotate(-6deg);animation-duration:16s}.orbit-c span{left:126px;bottom:-10px}
@keyframes orbit{from{filter:brightness(.92)}50%{filter:brightness(1.12)}to{filter:brightness(.92)}}
.meter-card{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:18px;padding:15px 16px;margin-top:22px}
.meter-card.compact{margin:0 0 6px}
.meter-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted)}
.meter-row strong{font-size:20px;color:var(--text)}
.meter{height:7px;border-radius:999px;background:#2a2c34;margin-top:11px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#f07865);transition:width .45s ease}
.step-line{height:24px;display:flex;align-items:center;gap:8px;margin-bottom:24px}
.step-line span{width:24px;height:24px;border-radius:50%;border:1px solid #4c4e58;color:#767780;display:grid;place-items:center;font-size:12px;font-weight:800}
.step-line i{height:1px;background:#3a3c44;flex:1}.step-line .done{background:var(--accent);border-color:var(--accent);color:#1a160f}.step-line i.done{background:var(--accent)}
.thought-form{margin-top:4px}
.input-row{display:flex;gap:10px}
.input-row input{flex:1;min-width:0;height:58px;border:1px solid #3a3d48;border-radius:16px;background:#1b1e27;color:var(--text);padding:0 17px;outline:none;font-size:16px}
.input-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,179,71,.09)}
.add-btn{width:58px;border:0;border-radius:16px;background:#f1edde;color:#191a1f;font-size:30px;font-weight:300}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips button{border:1px solid #383b46;border-radius:999px;background:transparent;color:#aaa99f;padding:8px 11px;font-size:12px}
.thought-list{display:flex;flex-direction:column;gap:9px;margin:18px 0 8px;min-height:86px}
.thought-item{display:flex;justify-content:space-between;gap:12px;background:#f0ecdd;color:#1b1d23;border-radius:15px;padding:14px 15px;box-shadow:0 8px 20px rgba(0,0,0,.12);animation:cardPop .24s ease both}
.thought-item span{font-weight:750}.thought-item button{border:0;background:none;color:#7b776c;font-size:18px}
@keyframes cardPop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.work-card{margin:32px auto 26px;width:86%;min-height:124px;border-radius:16px;background:var(--paper);color:var(--ink);display:grid;place-items:center;text-align:center;padding:22px;font-size:21px;font-weight:850;transform:rotate(-1.2deg);box-shadow:0 18px 38px rgba(0,0,0,.28);position:relative}
.work-card:after{content:"";position:absolute;width:46px;height:16px;top:-7px;left:50%;transform:translateX(-50%) rotate(2deg);background:rgba(225,210,164,.62)}
.sort-actions{display:flex;flex-direction:column;gap:10px}
.choice-btn{text-align:left;border:1px solid #343744;background:#1a1d26;color:var(--text);border-radius:16px;padding:14px 16px}
.choice-btn b{display:block;font-size:15px}.choice-btn small{display:block;color:#8f9089;font-size:12px;margin-top:5px;line-height:1.4}
.choice-btn.danger{border-color:rgba(229,139,120,.36)} .choice-btn.danger b{color:#e8b1a6}
.choice-btn:active{transform:scale(.99);background:#212530}
.sort-progress,.erase-progress{text-align:center;color:#6f706a;font-size:12px;margin:15px 0 0}
.urgent-mark{width:84px;height:84px;border:1px solid rgba(229,139,120,.35);border-radius:50%;display:grid;place-items:center;color:var(--danger);font-size:38px;margin:34px 0 26px;background:rgba(229,139,120,.06)}
.eraser-stage{margin-top:20px;height:300px;border-radius:24px;background:linear-gradient(150deg,#d7d3c3,#f1edde);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 22px 45px rgba(0,0,0,.3);position:relative;overflow:hidden;touch-action:none}
#eraseCanvas{width:100%;height:100%;display:block;touch-action:none}
.eraser-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);color:rgba(25,26,31,.42);font-size:12px;pointer-events:none;transition:opacity .2s}
.eraser-object{position:absolute;width:56px;height:32px;border-radius:8px;background:linear-gradient(90deg,#f0b06c 0 62%,#d8d3c1 62%);box-shadow:0 7px 15px rgba(0,0,0,.18);display:none;pointer-events:none;transform:translate(-50%,-50%) rotate(-15deg)}
.life-field{position:relative;flex:1;min-height:480px;margin-top:12px;border-radius:26px;background:radial-gradient(circle at 50% 44%,rgba(182,215,189,.11),rgba(255,255,255,.02) 60%);border:1px solid var(--line);overflow:hidden}
.life-item{position:absolute;width:86px;height:86px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:#1a1d25;color:#dcd8cd;display:grid;place-items:center;padding:8px;text-align:center;font-size:12px;transition:.25s ease;box-shadow:0 10px 24px rgba(0,0,0,.18);animation:floaty 4s ease-in-out infinite alternate}
.life-item.life{border-color:rgba(182,215,189,.24)}
.life-item.work{color:#777871;border-style:dashed}
.life-item.caught{transform:scale(.72);opacity:0;pointer-events:none}
.life-item.wrong{animation:shake .24s linear}
@keyframes floaty{from{margin-top:-4px}to{margin-top:6px}}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.shift-status{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:9px;margin-top:18px;color:#77786f;font-size:12px;letter-spacing:.1em}
.shift-status strong{font-size:18px;color:var(--text)}
.shift-status i{height:2px;background:linear-gradient(90deg,#d78068,var(--life));border-radius:99px}
.quiet-orb{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 42% 35%,#303746,#1c2029 60%,#14161d);margin:26px auto 34px;box-shadow:0 0 90px rgba(182,215,189,.11);animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.045);box-shadow:0 0 120px rgba(182,215,189,.17)}}
.result-copy{color:#9b9b92;margin:18px 0 10px}
.result-grid,.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:22px}
.result-grid div,.stats-grid div{min-height:105px;background:#181b23;border:1px solid var(--line);border-radius:18px;padding:13px 11px;display:flex;flex-direction:column;justify-content:flex-end}
.result-grid span,.stats-grid span{font-size:12px;line-height:1.4;color:#85867e}
.result-grid strong,.stats-grid strong{font-size:25px;margin-top:7px}.result-grid small{font-size:12px;color:#85867e}
.tomorrow-box{margin-top:12px;border:1px dashed #41444d;border-radius:16px;padding:14px 15px;color:#8b8c84;font-size:12px}
.tomorrow-box ul{margin:9px 0 0;padding-left:18px;color:#c8c5bb;line-height:1.7}
.quiet-screen{background:linear-gradient(#141722,#1b2027 58%,#22231e);justify-content:flex-end;padding-bottom:56px}
.quiet-scene{position:absolute;inset:0;overflow:hidden}
.moon{position:absolute;width:92px;height:92px;border-radius:50%;right:52px;top:118px;background:#e9e2c8;box-shadow:0 0 46px rgba(233,226,200,.15)}
.hill{position:absolute;border-radius:50% 50% 0 0}.hill-a{width:140%;height:38%;left:-25%;bottom:7%;background:#1a211f;transform:rotate(5deg)}.hill-b{width:130%;height:28%;right:-30%;bottom:0;background:#151b19;transform:rotate(-6deg)}
.fire{position:absolute;width:70px;height:62px;left:50%;bottom:112px;transform:translateX(-50%)}
.fire i{position:absolute;bottom:0;left:50%;width:20px;height:52px;background:#dda360;border-radius:50% 50% 45% 45%;transform-origin:bottom;filter:blur(.1px);animation:flame .9s ease-in-out infinite alternate}.fire i:nth-child(2){height:39px;transform:translateX(-22px) rotate(-20deg);animation-delay:.2s}.fire i:nth-child(3){height:44px;transform:translateX(11px) rotate(18deg);animation-delay:.35s}
@keyframes flame{to{height:42px;opacity:.7}}
.quiet-screen h2,.quiet-screen p,.quiet-screen button{position:relative;z-index:2}.quiet-screen p{color:#a2a097}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,14px);background:#f0ecdd;color:#1b1d23;border-radius:999px;padding:10px 15px;font-size:12px;font-weight:700;opacity:0;pointer-events:none;transition:.25s ease;z-index:100;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:370px){.screen{padding-left:17px;padding-right:17px}.life-item{width:76px;height:76px}.result-grid strong,.stats-grid strong{font-size:21px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}