/* Keelson Study: the Keelson glass (gold hairline, warm black, one gold focal per screen) on the room's wallpaper */
:root{--gold:#F0C040;--gd:#d9b766;--gdim:#8a7a52;--ink:#e6dcc4;--strong:#f0e6d2;--text:#cbbf9f;--dim:#a89a7a;--faint:#857a5c;--ghost:#6b6045;
  --ok:#9be38a;--due:#d9b766;--bad:#e8966e;--glass:rgba(14,15,15,.64);--line:rgba(217,183,102,.16);--soft:rgba(217,183,102,.08);--mono:'JetBrains Mono',ui-monospace,monospace}
*{margin:0;box-sizing:border-box}
html,body{height:100%}
body{background:#0c0b09 url(/wall.jpg) center/cover fixed;color:var(--ink);font-family:Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(8,8,8,.6),rgba(8,8,8,.8));pointer-events:none}
.app{position:relative;max-width:520px;min-height:100%;margin:0 auto;padding:calc(env(safe-area-inset-top) + 28px) 18px 28px;display:flex;flex-direction:column;gap:12px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.top{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px;min-height:20px}
.top b{font-size:13px;font-weight:600;color:var(--gd)}
.top span,.top button{font:400 12px var(--mono);color:var(--faint)}
h1{font-size:28px;font-weight:600;letter-spacing:-.02em;color:var(--strong);padding:4px 4px 0}
.lede{font-size:15px;color:var(--text);padding:0 4px;line-height:1.5}
.pn{background:var(--glass);border:.5px solid var(--line);border-radius:16px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:16px}
.h{font-size:12px;font-weight:600;color:var(--gd);margin-bottom:8px}
.go{width:100%;height:50px;border-radius:13px;background:var(--gold);color:#16130b;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;transition:transform .15s cubic-bezier(.16,1,.3,1),opacity .2s}
.go span{font:400 12px var(--mono);opacity:.7}
.go:active{transform:scale(.98)}.go:disabled{opacity:.45;cursor:default}
.ghost{background:transparent;border:.5px solid var(--line);color:var(--ink)}
.ring{position:relative;width:180px;height:180px;margin:4px auto 14px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset .6s cubic-bezier(.16,1,.3,1)}
.ring .in{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .in b{font:500 42px/1 Geist;color:var(--strong);letter-spacing:-.03em}.ring .in span{font-size:13px;color:var(--dim);margin-top:6px}
.r{display:grid;grid-template-columns:8px 1fr auto;gap:2px 10px;padding:11px 0;border-top:.5px solid var(--soft);text-align:left;width:100%}
.r:first-of-type{border-top:0;padding-top:2px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--due);margin-top:6px}.dot.g{background:var(--ok)}
.r .t{font-size:15px;color:var(--ink)}.r .s{grid-column:2;font-size:12.5px;color:var(--faint)}.r .v{font:400 12px var(--mono);color:var(--dim);white-space:nowrap}
.src{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.src button,.src label{height:58px;border-radius:12px;border:.5px solid var(--line);background:rgba(10,10,10,.45);display:grid;place-items:center;font-size:14px;color:var(--text);cursor:pointer}
.src input{display:none}
textarea{width:100%;min-height:200px;resize:vertical;border-radius:12px;border:.5px solid var(--line);background:rgba(10,10,10,.5);padding:14px;color:var(--ink);font:15px/1.5 Geist,system-ui,sans-serif;outline:0}
textarea:focus{border-color:rgba(240,192,64,.5)}
.small{font-size:12.5px;color:var(--faint);text-align:center}
.bar{height:5px;border-radius:3px;background:rgba(230,220,196,.12);overflow:hidden}.bar i{display:block;height:100%;background:var(--gd);transition:width .3s}
.q{font-size:21px;line-height:1.35;color:var(--strong);font-weight:500}
.opt{width:100%;min-height:52px;border-radius:12px;border:.5px solid var(--line);background:rgba(10,10,10,.45);display:flex;align-items:center;gap:12px;padding:10px 14px;font-size:15.5px;color:var(--ink);text-align:left}
.opt b{width:26px;height:26px;flex:none;border-radius:7px;border:.5px solid var(--line);display:grid;place-items:center;font:500 12px var(--mono);color:var(--dim)}
.opt.right{border-color:rgba(155,227,138,.6);background:rgba(155,227,138,.1)}.opt.right b{color:var(--ok);border-color:rgba(155,227,138,.6)}
.opt.wrong{border-color:rgba(232,150,110,.55);background:rgba(232,150,110,.08)}
.opts{display:grid;gap:8px}
.verdict{display:flex;align-items:center;gap:8px;color:#f0c4a0;font-size:15px;font-weight:500}
.verdict i{width:22px;height:22px;border-radius:50%;background:rgba(232,150,110,.14);border:.5px solid rgba(232,150,110,.45);display:grid;place-items:center;font-style:normal;font-size:12px}
.miss{border-left:2px solid var(--due);padding:2px 0 2px 12px;font-size:15px;line-height:1.5;color:var(--text)}
.miss b{color:var(--strong);font-weight:500}
.later{font-size:12.5px;color:var(--faint)}
.flash{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 0 4px rgba(155,227,138,.6),inset 0 0 90px rgba(155,227,138,.22);opacity:0}
.flash.on{animation:flash .55s cubic-bezier(.16,1,.3,1)}
@keyframes flash{20%{opacity:1}100%{opacity:0}}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat div{border-radius:14px;border:.5px solid var(--line);background:rgba(10,10,10,.45);padding:16px}
.stat b{display:block;font:500 32px/1 Geist;color:var(--strong);letter-spacing:-.02em}.stat span{font-size:12.5px;color:var(--dim)}
.idea{display:grid;grid-template-columns:18px 1fr;gap:10px;padding:9px 0;border-top:.5px solid var(--soft);font-size:14.5px;color:var(--ink)}
.idea:first-of-type{border-top:0}
.idea i{width:14px;height:14px;border-radius:50%;margin-top:2px;border:1.5px solid var(--ok);background:rgba(155,227,138,.25)}
.wait{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 0;color:var(--text);font-size:15px}
.spin{width:28px;height:28px;border-radius:50%;border:2px solid rgba(217,183,102,.2);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.err{font-size:14px;color:#f0c4a0;text-align:center;line-height:1.5}
.screen{display:flex;flex-direction:column;gap:12px;animation:in .22s cubic-bezier(.16,1,.3,1)}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.grow{flex:1}
@media(prefers-reduced-motion:reduce){.screen,.flash.on{animation:none}.ring circle{transition:none}}