:root { --ink:#18202a; --muted:#66707c; --paper:#f4f2ee; --panel:#ffffff; --line:#d8d4ce; --red:#d9584c; --blue:#336eaf; --dark:#26313d; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif; }
button, select { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100svh; }
.screen { min-height:100svh; display:none; }
.active-screen { display:block; }
.home-screen { position:relative; padding:calc(20px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); background:radial-gradient(circle at 50% 35%, #fff 0, #f5f2ec 42%, #ebe6dd 100%); }
.home-settings { position:absolute; top:calc(20px + env(safe-area-inset-top)); right:20px; }
.home-center { min-height:calc(100svh - 48px); max-width:520px; margin:0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.app-kicker { margin:0 0 12px; font-size:.72rem; letter-spacing:.18em; color:var(--muted); font-weight:800; }
.home-center h1, .placeholder-content h1 { margin:0; font-size:clamp(3.9rem,14vw,6.6rem); line-height:.83; letter-spacing:-.08em; font-weight:800; }
.home-subtitle { max-width:280px; color:var(--muted); line-height:1.5; margin:26px 0 38px; }
.home-actions { width:min(100%, 360px); display:grid; gap:14px; }
.home-action-button { min-height:104px; text-align:left; padding:20px 22px; border:1px solid rgba(0,0,0,.08); border-radius:24px; color:white; box-shadow:0 12px 24px rgba(43,46,55,.11); transition:transform .16s ease, box-shadow .16s ease; }
.home-action-button:active { transform:translateY(2px) scale(.99); }
.home-action-button span { font-weight:800; font-size:1.55rem; display:block; margin-bottom:4px; }
.home-action-button small { opacity:.78; font-size:.9rem; }
.play-action { background:linear-gradient(135deg,#324b6f,#233143); }
.study-action { background:linear-gradient(135deg,#d35b4d,#ad4037); }
.icon-button { appearance:none; border:0; background:transparent; color:var(--ink); width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-size:1.75rem; line-height:1; }
.icon-button:hover { background:rgba(23,31,40,.07); }
.study-screen { padding:calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom)); }
.study-header { max-width:1200px; margin:0 auto 8px; min-height:52px; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; position:relative; }
.study-header > h2 { margin:0; text-align:center; font-size:1.1rem; }
.header-spacer { width:44px; }
.module-picker-wrap { justify-self:center; position:relative; }
.module-picker-button { border:0; background:transparent; color:var(--ink); padding:10px 14px; border-radius:14px; font-size:1.14rem; font-weight:800; }
.module-picker-button:hover { background:rgba(23,31,40,.07); }
.chevron { margin-left:7px; font-size:.85em; color:var(--muted); }
.module-menu { z-index:5; width:210px; position:absolute; top:46px; left:50%; transform:translateX(-50%); padding:7px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 42px rgba(35,42,53,.18); }
.module-menu button { width:100%; border:0; background:transparent; text-align:left; padding:11px 12px; border-radius:10px; color:var(--ink); }
.module-menu button:hover { background:#f1eee9; }
.study-workspace { max-width:1200px; margin:0 auto; background:rgba(255,255,255,.58); border:1px solid rgba(86,86,86,.11); border-radius:20px; padding:12px; box-shadow:0 10px 30px rgba(75,61,46,.07); }
.toolbar { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:2px 4px 12px; }
.fret-control { display:flex; align-items:center; gap:12px; font-size:.8rem; color:var(--muted); font-weight:750; }
.stepper { overflow:hidden; display:flex; background:#fff; border:1px solid var(--line); border-radius:10px; }
.stepper button { width:31px; height:28px; border:0; background:#fff; color:var(--ink); font-weight:800; }
.stepper button + button { border-left:1px solid var(--line); }
.toolbar-icons { display:flex; gap:7px; }
.tool-toggle { width:31px; height:29px; border:1px solid transparent; border-radius:9px; background:transparent; color:#9aa0a8; font-weight:800; }
.tool-toggle.active-toggle { color:var(--ink); background:#fff; border-color:var(--line); }
.results-panel { background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:15px; padding:10px 12px; }
.results-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.results-panel h2 { margin:0; font-size:.82rem; letter-spacing:.02em; }
.mode-switch { display:flex; background:#ebe8e3; border-radius:10px; padding:3px; }
.mode-button { border:0; background:transparent; border-radius:7px; padding:6px 11px; font-size:.76rem; color:var(--muted); font-weight:750; }
.active-mode { color:var(--ink); background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.result-content { min-height:31px; padding-top:8px; }
.result-content p { margin:0; font-size:.93rem; color:var(--muted); }
.result-strong { color:var(--ink)!important; font-weight:700; }
.quiz-controls { padding-top:8px; display:flex; align-items:center; gap:10px; }
.quiz-begin, .done-button { border:0; color:white; background:var(--dark); padding:8px 13px; border-radius:10px; font-weight:800; }
#quiz-status { color:var(--muted); font-size:.8rem; }
.fretboard-section { padding-top:15px; overflow:hidden; }
.fretboard { --fret-count:13; display:grid; grid-template-columns:42px repeat(var(--fret-count), minmax(0,1fr)); gap:4px; align-items:center; width:100%; }
.string-label { height:33px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.78rem; font-weight:800; }
.fret-cell { height:33px; position:relative; border:0; border-radius:0; background:linear-gradient(transparent calc(50% - 1px), rgba(46,54,62,.55) calc(50% - 1px), rgba(46,54,62,.55) calc(50% + 1px), transparent calc(50% + 1px)); padding:0; min-width:0; }
.fret-cell::after { content:""; position:absolute; right:-2px; top:0; width:1px; height:100%; background:rgba(77,85,91,.25); }
.fret-cell[data-fret="0"]::after { width:4px; right:-3px; background:rgba(35,42,50,.52); }
.fret-cell.inlay::before { content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%; transform:translate(-50%,-50%); background:rgba(55,63,71,.16); }
.note-dot { width:min(25px, 70%); aspect-ratio:1; border-radius:999px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; font-size:clamp(.47rem,1.6vw,.66rem); color:white; background:rgba(29,38,49,.12); border:1px solid rgba(25,32,40,.12); }
.note-dot.root { background:var(--red); border-color:var(--red); }
.note-dot.target { background:var(--blue); border-color:var(--blue); }
.fret-cell:hover .note-dot:not(.root):not(.target) { background:rgba(29,38,49,.24); }
.placeholder-screen { padding:calc(8px + env(safe-area-inset-top)) 18px; }
.placeholder-content { min-height:70svh; max-width:540px; margin:auto; display:flex; flex-direction:column; justify-content:center; text-align:center; }
.placeholder-content p:last-child { max-width:420px; margin:25px auto 0; color:var(--muted); line-height:1.55; }
.overlay { z-index:10; position:fixed; inset:0; padding:20px; display:grid; place-items:center; background:rgba(22,27,33,.31); backdrop-filter:blur(4px); }
.settings-card { width:min(100%,390px); background:#fff; padding:18px; border-radius:20px; box-shadow:0 25px 65px rgba(0,0,0,.22); }
.settings-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.settings-card h2 { margin:0; font-size:1.2rem; }
.settings-row { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-top:1px solid #ece8e2; color:var(--ink); font-size:.92rem; }
.settings-row select { border:1px solid var(--line); border-radius:8px; padding:7px; background:white; }
.toggle-row input { width:18px; height:18px; }
.done-button { width:100%; margin-top:12px; padding:12px; }
@media (min-width:760px) { .study-workspace{padding:16px;} .fretboard { grid-template-columns:48px repeat(var(--fret-count), minmax(0,1fr)); gap:6px; } .fret-cell,.string-label{height:42px;} .note-dot{width:min(30px,70%);} }

/* Keep dialogs hidden until JavaScript explicitly opens them. */
.overlay[hidden] { display: none !important; }