:root {
  color-scheme: light;
  --bg:#faf7ef; --panel:#fff; --panel2:#f3efe4; --text:#24231e; --muted:#76736b;
  --faint:#aaa69b; --border:#e8e3d8; --border2:#d6d0c4; --accent:#3f6b52;
  --accent-deep:#294837; --accent-soft:#e7f0e8; --accent2:#b5652f; --good:#2c7a4b;
  --bad:#b23a2e; --shadow:0 8px 24px rgba(58,49,31,.07); --on-accent:#fff;
  --board-light:#e9e3d3; --board-dark:#607754; --frame:#33402c;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
html.dark { color-scheme:dark; --bg:#15140f; --panel:#201e17; --panel2:#2a2820; --text:#f2eee4; --muted:#bcb5a6; --faint:#827b6d; --border:#38352d; --border2:#514d42; --accent:#6fa383; --accent-deep:#456b52; --accent-soft:#263d2e; --accent2:#d68a54; --good:#73bb89; --bad:#e0685a; --on-accent:#101b13; --board-light:#d9d1bd; --board-dark:#5e7759; --frame:#263525; --shadow:0 9px 24px rgba(0,0,0,.23); }
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);min-height:100vh} button{font:inherit} button,a{touch-action:manipulation} button:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:3px}
.app-shell{width:100%;max-width:480px;min-height:100vh;margin:auto;background:var(--bg);padding-bottom:84px}.topbar{height:69px;position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 20px 0;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.brand{border:0;background:none;padding:8px 0;color:var(--text);font:600 21px "Source Serif 4",Georgia,serif;cursor:pointer}.brand::before{content:"♞";font-family:Georgia,serif;font-size:24px;margin-right:7px;color:var(--accent)}.icon-button{height:36px;width:36px;border:1px solid var(--border);background:var(--panel);color:var(--muted);border-radius:50%;cursor:pointer}.top-actions{display:flex;gap:8px}.page{animation:rise .22s ease both}.content{padding:20px}.eyebrow{font-size:11px;letter-spacing:.09em;font-weight:750;text-transform:uppercase;color:var(--muted)}h1,h2,h3{font-family:"Source Serif 4",Georgia,serif;letter-spacing:-.02em}h1{font-size:29px;line-height:1.08;margin:0 0 5px}h2{font-size:22px;line-height:1.12;margin:0}h3{font-size:18px;margin:0}.subtitle{font-size:14px;line-height:1.48;color:var(--muted);margin:0}.hero{background:linear-gradient(155deg,var(--accent),var(--accent-deep));color:var(--on-accent);min-height:196px;padding:27px 20px;border-radius:0 0 28px 28px;position:relative;overflow:hidden}.hero h1{font-size:31px;margin:4px 0 5px;position:relative}.hero .subtitle{color:var(--on-accent);opacity:.83;max-width:275px;position:relative}.hero::after{content:"♛";position:absolute;right:-17px;top:-39px;font:154px Georgia,serif;opacity:.14}.progress-pill{position:relative;display:inline-flex;gap:7px;margin-top:18px;padding:7px 12px;border-radius:99px;background:rgba(0,0,0,.16);font-size:12px;font-weight:700}.stack{display:grid;gap:12px}.hero + .content{margin-top:-1px}.card{background:var(--panel);border:1px solid var(--border);border-radius:19px;box-shadow:var(--shadow)}.continue-card{padding:20px;border-left:5px solid var(--accent)}.continue-card h2{margin:7px 0 4px}.continue-card p{margin:0 0 16px;color:var(--muted);font-size:13.5px}.primary,.secondary,.danger{border:0;border-radius:12px;min-height:43px;padding:0 15px;cursor:pointer;font-weight:750}.primary{color:var(--on-accent);background:var(--accent)}.secondary{color:var(--text);background:var(--panel);border:1px solid var(--border)}.danger{color:var(--bad);background:var(--panel);border:1px solid color-mix(in srgb,var(--bad) 26%,var(--border))}.link-card{width:100%;text-align:left;display:flex;align-items:center;gap:14px;padding:16px 17px;border-radius:17px;background:var(--panel);border:1px solid var(--border);color:var(--text);cursor:pointer}.card-icon{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;color:var(--accent);background:var(--accent-soft);font-size:21px}.link-card strong{display:block;font-size:16px}.link-card small{display:block;margin-top:2px;color:var(--muted);font-size:13px}.chevron{margin-left:auto;color:var(--faint);font-size:20px}.subtle-row{width:100%;border:0;background:none;color:var(--muted);display:flex;align-items:center;padding:8px 3px;gap:9px;text-align:left;cursor:pointer;font-size:13px;font-weight:650}.subtle-row .chevron{font-size:17px}.bottom-nav{position:fixed;z-index:12;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);display:grid;grid-template-columns:repeat(3,1fr);padding:9px 12px calc(8px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(13px);border-top:1px solid var(--border)}.nav-item{border:0;background:none;min-height:48px;border-radius:13px;color:var(--faint);font-size:11px;font-weight:700;cursor:pointer}.nav-item span{display:block;font-size:18px;line-height:19px}.nav-item.active{color:var(--accent);background:var(--accent-soft)}.page-heading{margin-bottom:20px}.opening-list{display:grid;gap:10px}.opening-card{width:100%;text-align:left;padding:14px 15px;border:1px solid var(--border);border-radius:16px;background:var(--panel);color:var(--text);cursor:pointer;position:relative;overflow:hidden}.opening-card::before{content:"";width:4px;position:absolute;left:0;top:17px;bottom:17px;border-radius:4px;background:var(--accent)}.opening-card.black::before{background:var(--accent2)}.opening-title{display:flex;align-items:center;gap:7px;padding-left:7px}.opening-title h3{font-size:18px}.badge{border-radius:99px;background:var(--accent-soft);color:var(--accent);padding:3px 7px;font-size:10px;font-weight:750}.opening-card p{padding-left:7px;margin:5px 0 6px;font-size:13px;line-height:1.3;color:var(--muted)}.opening-meta{padding-left:7px;color:var(--accent);font-size:11.5px;font-weight:700}.back{border:0;background:var(--panel);border:1px solid var(--border);border-radius:50%;width:36px;height:36px;color:var(--text);cursor:pointer}.detail-heading{display:flex;align-items:center;gap:10px;margin-bottom:18px}.detail-heading div{min-width:0}.detail-heading h1{font-size:23px}.detail-heading small{color:var(--muted);font-size:12px}.detail-actions{margin-left:auto;display:flex;gap:7px}.chip-label{margin:14px 0 7px}.chip-row{display:flex;overflow-x:auto;gap:7px;scrollbar-width:none;padding:0 0 2px}.chip{white-space:nowrap;border:1px solid var(--border);background:var(--panel);border-radius:99px;color:var(--text);padding:8px 11px;font-size:12px;font-weight:700;cursor:pointer}.chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.board-frame{padding:10px;border-radius:18px;background:var(--frame);box-shadow:0 10px 26px rgba(0,0,0,.31),inset 0 2px 0 rgba(255,255,255,.14),inset 0 -3px 8px rgba(0,0,0,.30);margin:17px 0}.board-layout{display:flex;gap:5px}.rank-labels{display:grid;grid-template-rows:repeat(8,1fr);width:11px;color:color-mix(in srgb,var(--panel) 75%,var(--text));font-size:9px;font-weight:800;text-align:center;align-items:center}.board-grid{width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);overflow:hidden;border-radius:6px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.22)}.board-file-wrap{flex:1;min-width:0}.file-labels{display:grid;grid-template-columns:repeat(8,1fr);color:color-mix(in srgb,var(--panel) 75%,var(--text));font-size:9px;font-weight:800;text-align:center;padding-top:4px}.square{border:0;position:relative;display:grid;place-items:center;padding:0;background:linear-gradient(135deg,color-mix(in srgb,var(--board-light) 92%,white),var(--board-light));cursor:pointer}.square.dark{background:linear-gradient(135deg,color-mix(in srgb,var(--board-dark) 86%,white),var(--board-dark))}.piece{font:clamp(23px,8.7vw,42px)/1 Georgia,"Times New Roman",serif;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35));transform:translateY(-1px)}.piece.black-piece{color:#1d211b;text-shadow:0 1px 0 rgba(255,255,255,.25)}.piece.white-piece{color:#f4eee2;text-shadow:0 1px 1px rgba(0,0,0,.55)}.square.selected{box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent) 80%,white)}.square.target::after{content:"";width:27%;height:27%;border-radius:50%;background:var(--accent);opacity:.58;position:absolute}.square.hint::after{content:"";position:absolute;inset:8%;border:3px solid var(--accent2);border-radius:7px}.move-controls{display:flex;gap:8px}.move-controls button{flex:1}.moves{display:flex;gap:6px;overflow:auto;margin:12px 0 0}.move{white-space:nowrap;padding:6px 9px;border-radius:8px;background:var(--panel2);color:var(--muted);font-size:11.5px}.move.current{background:var(--accent-soft);color:var(--accent);font-weight:800}.note{margin-top:13px;padding:14px;background:var(--accent-soft);border-radius:13px;font-size:13px;line-height:1.45;color:var(--text)}.note b{color:var(--accent)}.ideas{padding:0 0 0 18px;color:var(--muted);font-size:13px;line-height:1.45}.practice-row{display:flex;gap:8px;margin-top:16px}.practice-row button{flex:1}.puzzle-head{display:flex;justify-content:space-between;align-items:flex-start}.puzzle-score{text-align:right;color:var(--accent);font-size:20px;font-weight:800}.puzzle-score small{display:block;color:var(--muted);font-size:11px;font-weight:650}.feedback{padding:12px 14px;border-radius:12px;font-size:13px;font-weight:700;background:var(--accent-soft);color:var(--accent)}.feedback.bad{background:color-mix(in srgb,var(--bad) 12%,var(--panel));color:var(--bad)}.puzzle-actions{display:flex;gap:8px}.puzzle-actions button{flex:1}.settings-section{margin:25px 0}.settings-section:first-of-type{margin-top:0}.settings-title{margin-bottom:8px}.theme-list,.settings-list{overflow:hidden;border:1px solid var(--border);border-radius:15px;background:var(--panel)}.theme-option{display:flex;width:100%;gap:12px;align-items:center;border:0;border-bottom:1px solid var(--border);background:var(--panel);color:var(--text);padding:12px 13px;text-align:left;cursor:pointer;font-weight:700}.theme-option:last-child,.settings-row:last-child{border-bottom:0}.theme-option.active{box-shadow:inset 0 0 0 1px var(--accent)}.swatch{width:34px;height:34px;border-radius:7px;background:conic-gradient(var(--swatch1) 0 25%,var(--swatch2) 0 50%,var(--swatch1) 0 75%,var(--swatch2) 0);border:1px solid rgba(0,0,0,.08)}.check{margin-left:auto;color:var(--accent);font-size:18px}.piece-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.piece-option{min-height:85px;border:1px solid var(--border);border-radius:13px;background:var(--panel);color:var(--text);cursor:pointer;font-size:12px;font-weight:700}.piece-option .piece{display:block;font-size:31px;margin-bottom:4px}.piece-option.active{border-color:var(--accent);background:var(--accent-soft)}.segment{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:13px;padding:3px;background:var(--panel2)}.segment button{border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:13px;font-weight:750;min-height:38px;cursor:pointer}.segment button.active{background:var(--panel);color:var(--accent);box-shadow:var(--shadow)}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;font-size:13px;font-weight:650}.settings-row small{display:block;color:var(--muted);font-size:11px;font-weight:500;margin-top:2px}.toggle{display:flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;flex-shrink:0}.toggle button{border:0;background:var(--panel);color:var(--muted);font-size:11px;font-weight:800;padding:6px 9px;cursor:pointer}.toggle button.active{color:var(--on-accent);background:var(--accent)}.text-button{border:0;background:none;color:var(--accent);font-weight:750;cursor:pointer;padding:7px 0}.empty{padding:20px;text-align:center;color:var(--muted)}@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media (min-width:481px){body{background:#ede8dc}.app-shell{box-shadow:0 0 0 1px rgba(0,0,0,.04),0 20px 65px rgba(55,45,30,.12)}}