:root{--bg: #0f1115;--panel: #171a21;--panel-2: #1f242e;--text: #e7e9ee;--muted: #9aa3b2;--accent: #f4b740;--accent-2: #6aa9ff;--good: #36c08a;--bad: #e5604d;--border: #2a3038;--radius: 14px;--shadow: 0 10px 30px rgba(0, 0, 0, .45)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#1a1f2b 0%,var(--bg) 55%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}.home{max-width:1100px;margin:0 auto;padding:56px 24px 80px}.home-head{text-align:center;margin-bottom:40px}.home-head h1{font-size:52px;margin:0 0 12px;letter-spacing:-1px}.accent{color:var(--accent)}.subtitle{color:var(--muted);max-width:620px;margin:0 auto;line-height:1.6;font-size:16px}.section-title{font-size:15px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);margin:0 0 18px}.grade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.grade-card{text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;color:var(--text);display:flex;flex-direction:column;gap:6px;transition:transform .15s,border-color .15s,box-shadow .15s}.grade-card:not(.locked):hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow)}.grade-card.locked{opacity:.5;cursor:not-allowed}.grade-badge{font-size:13px;font-weight:700;color:var(--accent)}.grade-artwork{font-size:18px;font-weight:600}.grade-artist{font-size:13px;color:var(--muted)}.grade-subjects{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}.grade-soon{margin-top:8px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.app{max-width:1100px;margin:0 auto;padding:24px}.topbar{display:flex;align-items:center;gap:18px;margin-bottom:22px}.back-btn{background:var(--panel);border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:10px}.back-btn:hover{border-color:var(--accent)}.topbar-title{font-size:18px;font-weight:600}.muted{color:var(--muted);font-weight:400}.board{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}@media (max-width: 860px){.board{grid-template-columns:1fr}}.board-left{position:relative}.puzzle{position:relative;width:100%;background-size:cover;background-position:center;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border)}.tiles{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;gap:2px;background:#0003}.tile{background:#0b0d11;transition:opacity .8s ease,transform .8s ease}.tile.open{opacity:0;pointer-events:none}.finale-cta{position:absolute;left:50%;bottom:18px;transform:translate(-50%);background:var(--accent);color:#2a1c00;border:none;font-weight:700;padding:12px 18px;border-radius:999px;box-shadow:var(--shadow);animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.04)}}.progress-row{display:flex;align-items:center;gap:12px;margin-top:14px}.progress-bar{flex:1;height:10px;background:var(--panel-2);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .5s}.progress-label{font-size:13px;color:var(--muted);white-space:nowrap}.board-right{display:flex;flex-direction:column;gap:14px}.subject{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px}.subject-name{font-weight:600;margin-bottom:10px}.level-row{display:flex;gap:8px}.level-chip{flex:1;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:10px 6px;color:var(--text);display:flex;flex-direction:column;gap:4px;align-items:center;transition:border-color .15s,transform .1s}.level-chip:not(:disabled):hover{border-color:var(--accent);transform:translateY(-2px)}.level-chip .chip-top{font-size:13px;font-weight:600}.level-chip .chip-points{font-size:11px;color:var(--muted)}.level-chip.solved{border-color:var(--good)}.level-chip.solved .chip-top{color:var(--good)}.level-chip.locked{opacity:.5;cursor:not-allowed}.reset-link{align-self:flex-start;background:none;border:none;color:var(--muted);font-size:12px;text-decoration:underline;padding:4px 0}.reset-link:hover{color:var(--bad)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#05070bb8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}.modal{background:var(--panel);border:1px solid var(--border);border-radius:18px;width:min(680px,100%);max-height:88vh;overflow-y:auto;padding:24px;box-shadow:var(--shadow)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.modal-subject{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--accent)}.modal-title{margin:4px 0 0;font-size:24px}.icon-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);width:36px;height:36px;border-radius:10px}.icon-btn:hover{border-color:var(--bad)}.modal-meta{display:flex;gap:16px;color:var(--muted);font-size:13px;margin:12px 0 16px}.prompt{white-space:pre-wrap;line-height:1.65;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:16px 18px;font-size:15px}.hints{margin:16px 0;display:flex;flex-direction:column;gap:8px}.hint{background:#6aa9ff14;border:1px solid rgba(106,169,255,.25);border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.5}.hint-btn{align-self:flex-start;background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:8px 14px;border-radius:999px;font-size:13px}.hint-btn:hover{border-color:var(--accent-2)}.hint-locked{display:flex;flex-direction:column;gap:2px;background:var(--panel-2);border:1px dashed var(--border);border-radius:12px;padding:10px 14px;font-size:14px;color:var(--muted)}.hint-locked strong{color:var(--accent);font-variant-numeric:tabular-nums}.hint-note{font-size:12px;color:var(--muted)}.answer-area{margin-top:12px}.answer-row{display:flex;gap:10px}.answer-input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text);font-size:15px}.answer-input:focus{outline:none;border-color:var(--accent-2)}.answer-input.wrong{border-color:var(--bad)}.answer-input.correct{border-color:var(--good)}.primary-btn{background:var(--accent);color:#2a1c00;border:none;font-weight:700;padding:12px 20px;border-radius:10px}.primary-btn:hover{filter:brightness(1.05)}.feedback{margin-top:12px;font-size:14px}.feedback.bad{color:var(--bad)}.feedback.good{color:var(--good)}.success-box{display:flex;flex-direction:column}.solution-reward{margin-top:10px;background:#36c08a14;border:1px solid rgba(54,192,138,.35);border-radius:12px;padding:14px 16px;line-height:1.6;font-size:15px;color:var(--text)}.self-note{color:var(--muted);font-size:14px;line-height:1.6}.solution-box{background:var(--panel-2);border:1px solid var(--good);border-radius:12px;padding:14px 16px;line-height:1.6;font-size:15px}.self-actions{display:flex;gap:10px;margin-top:14px}.good-btn{background:var(--good);color:#05210f;border:none;font-weight:700;padding:12px 18px;border-radius:10px}.ghost-btn{background:var(--panel-2);border:1px solid var(--border);color:var(--text);padding:12px 18px;border-radius:10px}.finale-modal{width:min(760px,100%);padding:0;position:relative}.finale-image{height:240px;background-size:cover;background-position:center;border-radius:18px 18px 0 0}.finale-close{position:absolute;top:14px;right:14px}.finale-body{padding:8px 28px 32px}.finale-body h1{font-size:28px}.finale-body h2{font-size:20px;margin-top:24px;color:var(--accent)}.finale-body p,.finale-body li{line-height:1.75;font-size:15px}.finale-body blockquote{border-left:3px solid var(--accent);margin:16px 0;padding:6px 16px;color:var(--muted);background:var(--panel-2);border-radius:0 8px 8px 0}.finale-body hr{border:none;border-top:1px solid var(--border);margin:24px 0}.finale-body code{background:var(--panel-2);padding:2px 6px;border-radius:6px;font-size:13px}