:root{--bg: #0b1020;--bg-raised: #141a2e;--bg-sunken: #080c18;--line: #232b45;--text: #e8ecf7;--text-dim: #96a0be;--accent: #6ea8fe;--accent-ink: #0b1020;--ok: #4ade80;--warn: #fbbf24;--err: #f87171;--code: #a5d8ff;--radius: 14px;--tap: 44px;color-scheme:dark}@media(prefers-color-scheme:light){:root{--bg: #f6f7fb;--bg-raised: #ffffff;--bg-sunken: #eceff7;--line: #d9deeb;--text: #131a2c;--text-dim: #5a6580;--accent: #2563eb;--accent-ink: #ffffff;--ok: #15803d;--warn: #a16207;--err: #b91c1c;--code: #1e40af;color-scheme:light}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior-y:none}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}code,pre,textarea.sql{font-family:SF Mono,ui-monospace,JetBrains Mono,Menlo,Consolas,monospace;font-size:14px}.app{display:flex;flex-direction:column;min-height:100%;max-width:720px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:max(env(safe-area-inset-top),10px) 16px 10px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.topbar h1{flex:1;margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}.topbar .sub{display:block;font-size:12px;font-weight:400;color:var(--text-dim)}.icon-btn{min-width:var(--tap);min-height:36px;padding:0 12px;border-radius:10px;background:var(--bg-raised);border:1px solid var(--line);font-size:13px;color:var(--text-dim)}.content{flex:1;padding:16px;display:flex;flex-direction:column;gap:16px}.card{background:var(--bg-raised);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.card h2{margin:0 0 8px;font-size:15px;font-weight:600}.muted{color:var(--text-dim);font-size:14px}.pill{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--bg-sunken);border:1px solid var(--line);font-size:11px;color:var(--text-dim);white-space:nowrap}.pill.level{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}.btn{display:block;width:100%;min-height:50px;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:16px}.btn.secondary{background:var(--bg-raised);color:var(--text);border:1px solid var(--line)}.btn:disabled{opacity:.45}.row{display:flex;gap:10px}.row>*{flex:1}.hero{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}.hero .big{font-size:40px;font-weight:700;line-height:1;letter-spacing:-.03em}.skill-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}.skill-row:last-child{border-bottom:none}.skill-row .name{flex:1;min-width:0;font-size:14px}.skill-row .name small{display:block;color:var(--text-dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.skill-row.locked .name{color:var(--text-dim)}.bar{width:64px;height:6px;border-radius:3px;background:var(--bg-sunken);overflow:hidden;flex:none}.bar span{display:block;height:100%;background:var(--ok);border-radius:3px}.bar.due span{background:var(--warn)}.brief{font-size:15px;line-height:1.55}.goal{margin-top:10px;padding:12px;border-radius:10px;background:var(--bg-sunken);border-left:3px solid var(--accent);font-size:14px}textarea.sql{width:100%;min-height:150px;padding:12px;border-radius:10px;background:var(--bg-sunken);border:1px solid var(--line);color:var(--code);resize:vertical;line-height:1.6;tab-size:2}textarea.sql:focus{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-1px}.accessory{display:flex;gap:6px;overflow-x:auto;padding:8px 0 2px;scrollbar-width:none}.accessory::-webkit-scrollbar{display:none}@media(min-width:640px){.accessory{flex-wrap:wrap;overflow-x:visible}}.accessory button{flex:none;min-height:36px;padding:0 11px;border-radius:9px;background:var(--bg-sunken);border:1px solid var(--line);font-family:SF Mono,ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--code)}.accessory button.dim{color:var(--text-dim)}.tabs{display:flex;gap:6px;margin-bottom:8px}.tabs button{flex:1;min-height:34px;border-radius:9px;border:1px solid var(--line);background:var(--bg-sunken);font-size:12px;color:var(--text-dim)}.tabs button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--bg-sunken);-webkit-overflow-scrolling:touch}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:7px 10px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}th{position:sticky;top:0;background:var(--bg-raised);font-weight:600;font-size:12px;color:var(--text-dim)}td.num{text-align:right;font-variant-numeric:tabular-nums}td.null{color:var(--text-dim);font-style:italic}tbody tr:last-child td{border-bottom:none}.feedback{border-radius:12px;padding:14px;border:1px solid}.feedback.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:color-mix(in srgb,var(--ok) 10%,transparent)}.feedback.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));background:color-mix(in srgb,var(--warn) 10%,transparent)}.feedback.error{border-color:color-mix(in srgb,var(--err) 45%,var(--line));background:color-mix(in srgb,var(--err) 10%,transparent)}.feedback h3{margin:0 0 6px;font-size:15px}.feedback p{margin:0 0 10px;font-size:14px;line-height:1.55}.feedback ul{margin:0;padding-left:18px;font-size:14px}.feedback li{margin-bottom:6px}.feedback .style-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--text-dim)}.option{display:block;width:100%;text-align:left;padding:13px 14px;margin-bottom:8px;border-radius:11px;background:var(--bg-sunken);border:1px solid var(--line);font-size:14px;line-height:1.45}.option[data-state=correct]{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}.option[data-state=wrong]{border-color:var(--err);background:color-mix(in srgb,var(--err) 12%,transparent)}.option .why{display:block;margin-top:7px;font-size:13px;color:var(--text-dim)}.hint{padding:11px 13px;border-radius:10px;background:var(--bg-sunken);border:1px dashed var(--line);font-size:14px;margin-bottom:8px}.hint-btn{width:100%;min-height:42px;border-radius:10px;border:1px dashed var(--line);color:var(--text-dim);font-size:13px}pre.sql-block{margin:0;padding:12px;border-radius:10px;background:var(--bg-sunken);border:1px solid var(--line);color:var(--code);overflow-x:auto;line-height:1.55}.sheet-backdrop{position:fixed;inset:0;z-index:40;background:#0000008c}.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:86vh;overflow-y:auto;background:var(--bg-raised);border-radius:18px 18px 0 0;border-top:1px solid var(--line);padding:8px 16px calc(24px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}.sheet .grabber{width:38px;height:4px;border-radius:2px;background:var(--line);margin:6px auto 14px}.sheet h2{margin:0 0 4px;font-size:17px}details.table-doc{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden}details.table-doc>summary{padding:12px 14px;cursor:pointer;list-style:none;font-size:14px}details.table-doc>summary::-webkit-details-marker{display:none}details.table-doc>summary small{display:block;color:var(--text-dim);font-size:12px;margin-top:2px}.col-doc{display:flex;gap:10px;padding:8px 14px;border-top:1px solid var(--line);font-size:13px}.col-doc code{flex:none;min-width:42%;color:var(--code);word-break:break-all}.col-doc span{color:var(--text-dim)}.note{padding:10px 14px;font-size:13px;color:var(--warn);border-top:1px solid var(--line)}.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px 24px;text-align:center;color:var(--text-dim)}.spinner{width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}.progress-dots{display:flex;gap:5px}.progress-dots i{width:22px;height:4px;border-radius:2px;background:var(--line)}.progress-dots i.done{background:var(--ok)}.progress-dots i.current{background:var(--accent)}