/* Approved Figma desktop layout; chess rendering and Analysis styling stay in the trainer. */
body:not(.analysis-mode) { --page:#fff; --surface:#f7f6f3; --surface-raised:#fff; --line:#e8e6e1; --text:#292824; --muted:#78766f; --accent:#292824; --accent-ink:#fff; --good:#42634d; --bad:#b4473c; color-scheme:light; color:var(--text); background:#fff; }
body:not(.analysis-mode) .app-shell { width:100%; padding:0; max-width:none; }
[hidden] { display:none !important; }
.design-icon { display:inline-block; flex-shrink:0; vertical-align:middle; }
.site-header { height:80px; border-bottom:1px solid #e8e6e1; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,5.55vw); gap:20px; }
.site-brand { display:flex; align-items:center; gap:9px; font-weight:600; font-size:17px; color:#292824; text-decoration:none; }
.site-mark { display:grid; place-items:center; width:27px; height:29px; background:#292824; border-radius:3px; }
.site-links { display:flex; align-items:center; gap:32px; font-size:13px; }
.site-links a { text-decoration:none; color:#78766f; }
body:not(.analysis-mode) button, body:not(.analysis-mode) input { font-family:inherit; }
body:not(.analysis-mode) .btn, body:not(.analysis-mode) .continue-button, body:not(.analysis-mode) .action-button { border:1px solid var(--line); border-radius:6px; background:white; color:var(--text); box-shadow:none; text-transform:none; letter-spacing:0; font-weight:500; font-size:13px; padding:10px 14px; cursor:pointer; }
body:not(.analysis-mode) .continue-button { background:#292824; border-color:#292824; color:white; }
body:not(.analysis-mode) .btn:hover:not(:disabled), body:not(.analysis-mode) .action-button:hover:not(:disabled) { background:#f7f6f3; border-color:#b8b5ad; transform:none; }
body:not(.analysis-mode) .continue-button:hover:not(:disabled) { background:#45433d; transform:none; }
body:not(.analysis-mode) button:disabled { cursor:not-allowed; opacity:.4; }
body:not(.analysis-mode) input { accent-color:#292824; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline:2px solid #78766f; outline-offset:3px; }
#empty-state { width:100%; margin:0; padding:0; border:0; background:white; border-radius:0; box-shadow:none; text-align:left; font-size:14px; }
.landing-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.07fr); gap:clamp(28px,5.55vw,80px); max-width:1200px; padding:96px 0 80px; margin:auto; align-items:center; }
.landing-intro { display:grid; gap:28px; }
.landing-overline { display:flex; align-items:center; gap:8px; color:#78766f; font-size:12px; }
.landing-intro h1 { font-size:clamp(36px,3.75vw,54px); line-height:1.08; letter-spacing:-.035em; margin:0; color:#292824; }
.hero-word-group { display:inline-block; white-space:nowrap; }
.hero-word-pill { --hero-pill-bg:#F8D7DA; --hero-pill-dot:#E74C3C; display:inline-block; position:relative; padding:0 .34em 0 1em; border-radius:9999px; background:var(--hero-pill-bg); color:inherit; font-size:.75em; line-height:1.44; letter-spacing:-.035em; vertical-align:-.18em; }
.hero-word-pill[data-word="learned"] { --hero-pill-bg:#DCEBFF; --hero-pill-dot:#2F80ED; }
.hero-word-pill[data-word="found"] { --hero-pill-bg:#CFEFD6; --hero-pill-dot:#22B24C; }
.hero-word-pill::before { content:""; position:absolute; left:.32em; top:50%; translate:0 -50%; width:.44em; height:.44em; border-radius:50%; background:var(--hero-pill-dot); }
.hero-word-label { display:block; inline-size:var(--hero-word-width,auto); overflow:hidden; transition:inline-size 300ms cubic-bezier(.86,0,.07,1); }
.hero-word-measure { display:block; inline-size:max-content; margin-inline:auto; }
.hero-word-sizer { position:absolute; visibility:hidden; inline-size:max-content; }
@media(max-width:390px) { .hero-word-pill { font-size:.7em; line-height:1.542857; vertical-align:-.19em; padding-inline:.84em .2em; } .hero-word-pill::before { left:.24em; } }
@media(prefers-reduced-motion:reduce) { .hero-word-label { transition:none !important; } }
.landing-intro > p { font-size:17px; line-height:1.65; color:#78766f; margin:0; max-width:485px; }
.username-label { display:block; font-size:12px; font-weight:500; margin-bottom:10px; }
#empty-state .username-form { display:flex; flex-wrap:nowrap; gap:8px; margin:0; }
#empty-state .username-form input { min-width:0; flex:1; border:1px solid #e8e6e1; background:white url('redesign/landing-user.svg') no-repeat 12px center; color:#292824; border-radius:6px; height:44px; padding:12px 12px 12px 38px; font-size:14px; }
#empty-state .username-form button { min-height:40px; white-space:nowrap; }
.entry-note { margin:10px 0 0; color:#78766f; font-size:11px; }
#search-status { margin:12px 0 0; font-size:13px; }
.hero-preview { background:#f7f6f3; border-radius:8px; padding:20px; color:#292824; }
.preview-crumb { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#78766f; font-size:11px; padding-bottom:16px; border-bottom:1px solid #e8e6e1; }
.preview-content { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:18px; align-items:center; padding:16px 0; }
.preview-board { display:grid; grid-template-columns:repeat(8,1fr); aspect-ratio:1; }
.preview-square { background:var(--light); display:grid; place-items:center; }
.preview-square.dark { background:var(--dark); }
.preview-square .piece { width:100%; height:100%; }
.preview-note small { font-size:9px; color:#78766f; }
.preview-note h3 { font-size:17px; line-height:1.35; margin:14px 0; }
.preview-source { color:#78766f; font-size:11px; line-height:1.6; }
.preview-caption { display:flex; align-items:center; gap:8px; background:white; border-radius:4px; padding:12px; color:#78766f; font-size:11px; }
.landing-section { padding:72px max(24px,calc((100% - 1080px)/2)); }
.landing-section h2 { font-size:32px; letter-spacing:-.025em; margin:0 0 40px; }
.landing-section h2, .landing-section h3, .landing-final h2, .landing-faq summary { color:#292824; }
.landing-how, .landing-faq { background:#f7f6f3; }
.landing-three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; }
.landing-step-top { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e8e6e1; padding-bottom:16px; color:#a4a19a; font-size:11px; }
.landing-three h3 { font-size:18px; font-weight:600; margin:16px 0; }
.landing-three p { color:#78766f; font-size:14px; line-height:1.7; margin:0; }
.landing-themes h2 { margin-bottom:14px; }
.landing-themes > p { font-size:15px; color:#78766f; margin:0 0 40px; }
.landing-themes .landing-three { gap:20px; }
.landing-theme { padding:24px; border:1px solid #e8e6e1; border-radius:6px; }
.landing-theme h3 { font-size:20px; font-weight:400; margin:18px 0; }
.landing-theme p { font-size:13px; }
.landing-faq { display:grid; grid-template-columns:300px minmax(0,1fr); gap:100px; border-top:1px solid #e8e6e1; }
.landing-faq details { border-bottom:1px solid #e8e6e1; padding-bottom:16px; margin-bottom:22px; }
.landing-faq summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; font-weight:600; }
.landing-faq summary::-webkit-details-marker { display:none; }
.landing-faq details p { color:#78766f; font-size:13px; line-height:1.7; margin:10px 0 0; }
.landing-final { text-align:center; padding:80px 24px; }
.landing-final h2 { font-size:36px; margin:24px 0; letter-spacing:-.025em; }
.landing-final > p { color:#78766f; font-size:15px; margin:24px 0; }
.landing-final .username-entry { max-width:470px; margin:24px auto 0; text-align:left; }
body:not(.analysis-mode) .site-footer { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; padding:36px max(24px,5.55vw); color:#78766f; font-size:11px; opacity:1; }
body:not(.analysis-mode) .site-footer a { border:0; text-decoration:none; color:inherit; opacity:1; }
.footer-links { display:flex; gap:24px; }
.workspace-sidebar { background:#f7f6f3; width:220px; position:fixed; top:0; left:0; bottom:0; z-index:15; padding:24px 16px; display:flex; flex-direction:column; gap:28px; color:#292824; }
.sidebar-account { padding:8px; display:flex; flex-direction:column; gap:5px; font-size:12px; overflow-wrap:anywhere; }
.sidebar-account small, .sidebar-stats { font-size:11px; color:#78766f; }
.sidebar-stats { display:grid; gap:10px; padding:10px; }
body.app-mode:not(.analysis-mode) .app-shell { padding-left:220px; }
body.app-mode:not(.analysis-mode) .topbar { display:none; }
body.app-mode:not(.analysis-mode) .main-nav { display:flex; flex-direction:column; gap:4px; padding:0; margin:0; background:none; border:0; position:static; }
body.app-mode:not(.analysis-mode) .main-nav button { font-size:12px; font-weight:400; border:0; border-radius:4px; color:#78766f; background:none; padding:10px; text-align:left; width:100%; }
body.app-mode:not(.analysis-mode) #main-nav-puzzles[aria-current=page], body.app-mode:not(.analysis-mode) #main-nav-training[aria-current=page] { color:#292824; background:#eeede9; font-weight:600; }
.workspace-bar { height:56px; display:flex; align-items:center; gap:9px; border-bottom:1px solid #e8e6e1; padding:0 32px; font-size:12px; color:#78766f; }
body.app-mode:not(.analysis-mode) #themes-view.navigation-view { width:100%; max-width:1200px; margin:0 auto; padding:42px clamp(24px,5vw,72px) 56px; }
body:not(.analysis-mode) #themes-view .breadcrumbs { display:none; }
body:not(.analysis-mode) .themes-title-row { display:block; border-bottom:1px solid #e8e6e1; padding:0 0 32px; margin:0 0 32px; }
body:not(.analysis-mode) #themes-view h2 { font-size:34px; margin:12px 0; line-height:1.25; }
body:not(.analysis-mode) .theme-description { color:#78766f; font-size:14px; margin:0; }
.setup-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start; }
.setup-choices { display:grid; gap:14px; min-width:0; }
body:not(.analysis-mode) .games-scope { display:block; position:relative; margin:0 0 18px; width:fit-content; }
body:not(.analysis-mode) .games-scope label { display:none; }
body:not(.analysis-mode) .games-scope-toggle { background:#f7f6f3; border:1px solid #b8b5ad; border-radius:6px; padding:12px 14px; font-size:12px; color:#292824; width:auto; min-width:220px; min-height:40px; }
body:not(.analysis-mode) .games-scope-toggle::before { content:'Games: '; }
body:not(.analysis-mode) .games-scope-menu { background:white; border:1px solid #e8e6e1; color:#292824; z-index:5; width:260px; }
body:not(.analysis-mode) .games-scope-option { color:#292824; background:white; font-size:13px; }
body:not(.analysis-mode) .games-scope-option:hover { background:#f7f6f3; }
body:not(.analysis-mode) .theme-group-title { display:none; }
body:not(.analysis-mode) .theme-choice, body:not(.analysis-mode) .mate-selection-row { margin:0; padding:18px; border:1px solid #e8e6e1; border-radius:6px; background:white; box-shadow:none; color:#292824; min-height:70px; }
body:not(.analysis-mode) .theme-choice { display:flex; align-items:center; gap:10px; width:100%; }
body:not(.analysis-mode) .theme-choice::before, body:not(.analysis-mode) .theme-choice::after { display:none; }
body:not(.analysis-mode) .theme-choice[aria-pressed=true], body:not(.analysis-mode) .mate-selection-row.selected { background:#f7f6f3; border-color:#b8b5ad; }
body:not(.analysis-mode) .theme-choice:hover { transform:none; border-color:#b8b5ad; background:#f7f6f3; }
body:not(.analysis-mode) .theme-icon, body:not(.analysis-mode) .theme-card-arrow, body:not(.analysis-mode) .beginner-tag { display:none; }
body:not(.analysis-mode) .theme-choice-check { order:-1; width:16px; height:16px; flex:0 0 16px; border:1px solid #cfccc5; background:white; border-radius:3px; color:transparent; font-size:12px; display:grid; place-items:center; margin:0; }
body:not(.analysis-mode) .theme-choice[aria-pressed=true] .theme-choice-check { background:#292824; border-color:#292824; color:white; }
body:not(.analysis-mode) .theme-choice-copy { display:grid; gap:5px; flex:1; }
body:not(.analysis-mode) #themes-view .theme-choice .theme-choice-copy strong { font-size:14px; font-weight:500; color:#292824; }
body:not(.analysis-mode) #themes-view .theme-choice .theme-choice-copy small { font-size:12px; color:#78766f; line-height:1.5; margin:0; }
body:not(.analysis-mode) #themes-view .theme-choice { min-height:80px; gap:12px; }
body:not(.analysis-mode) .theme-choice-count { font-size:11px; white-space:nowrap; color:#78766f; }
body:not(.analysis-mode) .mate-selection-row { display:flex; position:relative; padding:0; }
body:not(.analysis-mode) .mate-selection-row .theme-choice { border:0; background:transparent; padding-right:140px; }
body:not(.analysis-mode) .mate-row-actions { position:absolute; right:12px; top:12px; padding:0; background:none; border:0; }
body:not(.analysis-mode) .mate-row-actions .btn { width:auto; min-width:0; min-height:24px; }
body:not(.analysis-mode) #customize-mates { border:0; padding:6px; font-size:10px; background:transparent; color:#292824; }
.plan-card { border-radius:6px; padding:24px; display:grid; gap:20px; background:#f7f6f3; }
.plan-heading { display:flex; align-items:center; gap:9px; font-weight:600; font-size:16px; padding-bottom:20px; border-bottom:1px solid #e8e6e1; }
.plan-themes { font-size:13px; line-height:1.7; padding-bottom:20px; border-bottom:1px solid #e8e6e1; }
.plan-themes small { display:block; color:#78766f; font-size:10px; margin-bottom:7px; }
.plan-count { font-size:40px; line-height:1.1; font-weight:400; }
.plan-card > small { font-size:12px; }
body:not(.analysis-mode) .theme-actions { display:block; margin:0; border:0; padding:0; }
body:not(.analysis-mode) .theme-start-group { display:block; }
body:not(.analysis-mode) #theme-start { width:100%; }
body:not(.analysis-mode) #theme-selection-count, body:not(.analysis-mode) #theme-customize-toggle, body:not(.analysis-mode) .theme-start-inline-count { display:none; }
body:not(.analysis-mode) .filter-empty { font-size:12px; line-height:1.6; color:#78766f; border:0; background:none; padding:0; margin:0; }
body:not(.analysis-mode) .game-drawer-backdrop, body:not(.analysis-mode) .mate-dialog-backdrop { background:#0003; position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:24px; }
body:not(.analysis-mode) .game-drawer { width:min(824px,100%); max-width:none; height:auto; max-height:calc(100dvh - 48px); border:0; border-radius:8px; background:white; color:#292824; box-shadow:0 20px 80px #0002; display:flex; flex-direction:column; position:relative; }
body:not(.analysis-mode) .game-drawer-header { padding:28px; border-bottom:1px solid #e8e6e1; }
body:not(.analysis-mode) .game-drawer-header h3 { font-size:24px; margin:0; }
body:not(.analysis-mode) .game-drawer-header p { font-size:12px; color:#78766f; margin:16px 0; line-height:1.5; }
.game-top-summary { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:#78766f; }
.game-search-row { display:flex; gap:14px; padding:18px 28px; align-items:center; }
.game-search-row input { width:100%; min-width:0; border:1px solid #e8e6e1; border-radius:4px; padding:10px; background:white; color:#292824; }
.game-search-row input { background:white url('redesign/picker-search.svg') no-repeat 10px center; padding-left:32px; }
.game-search-row small { white-space:nowrap; font-size:12px; }
.game-table-heading, body:not(.analysis-mode) .game-selection-card { display:grid; grid-template-columns:20px minmax(0,1fr) 116px 70px 116px; gap:10px; align-items:center; }
.game-table-heading { margin:0 28px; padding:12px; font-size:10px; color:#78766f; background:#f7f6f3; }
body:not(.analysis-mode) .game-drawer-list { padding:0 28px; overflow:auto; min-height:80px; max-height:48dvh; }
body:not(.analysis-mode) .game-selection-card { padding:20px 12px; margin:0; border:0; border-bottom:1px solid #eeede9; border-radius:0; background:white; width:100%; cursor:pointer; color:#292824; font-size:12px; }
body:not(.analysis-mode) .game-selection-card.selected { background:#f7f6f3; }
.game-selection-card input { margin:0; width:16px; height:16px; }
body:not(.analysis-mode) .game-selection-info strong { font-size:13px; font-weight:500; }
body:not(.analysis-mode) .game-selection-info small { font-size:10px; line-height:1.6; color:#78766f; margin-top:5px; }
.game-inventory { font-size:11px; line-height:1.6; }
.game-date { font-size:11px; color:#78766f; }
body:not(.analysis-mode) .game-selection-info .game-date-mobile { display:none; }
body:not(.analysis-mode) .game-result { background:none; padding:0; border:0; border-radius:0; color:#292824; font-size:11px; }
.game-list-meta { padding:18px 28px; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#78766f; }
.game-current-themes { padding:0 28px 18px; color:#78766f; font-size:11px; }
body:not(.analysis-mode) .game-drawer-footer { padding:20px 28px; border-top:1px solid #e8e6e1; background:#f7f6f3; gap:10px; display:flex; align-items:center; }
#game-selection-count { flex:1; font-size:12px; }
body:not(.analysis-mode) .mate-dialog { background:white; color:#292824; border:1px solid #e8e6e1; border-radius:8px; width:min(460px,100%); }
body:not(.analysis-mode) .mate-dialog-option { background:#f7f6f3; border:1px solid #e8e6e1; color:#292824; }
body:not(.analysis-mode) #workspace { max-width:1240px; width:100%; margin:0 auto; padding:80px clamp(24px,4vw,64px) 48px; grid-template-columns:minmax(0,1fr) minmax(290px,360px); gap:40px; background:white; border:0; box-shadow:none; border-radius:0; }
body:not(.analysis-mode) #workspace .board-column { --board-size:min(650px,100%); }
body:not(.analysis-mode) #workspace .goal-banner { background:var(--surface); border-color:var(--line); color:var(--text); }
body:not(.analysis-mode) #workspace .board-frame { border:0; border-radius:0; padding:0; background:none; box-shadow:none; }
#workspace.inline-analysis .board-area { width:min(680px,100%); margin-inline:auto; align-items:stretch; gap:8px; }
#workspace.inline-analysis .board-area .board-frame { flex:1; min-width:0; position:relative; }
#workspace.inline-analysis #eval-bar { width:22px; border:1px solid #dedcd6; border-radius:3px; background:#353530; }
#workspace.inline-analysis #eval-fill { background:#f7f6f3; }
#workspace.inline-analysis #eval-text { font-size:9px; font-weight:500; }
#workspace.inline-analysis #eval-bar.black-bottom, #workspace.inline-analysis #eval-bar.black-bottom #eval-text { transform:rotate(180deg); }
#workspace.inline-analysis .action-row, #workspace.inline-analysis #mobile-action-bar,
#workspace.inline-analysis #goal-toggle, #workspace.inline-analysis #resolved-next { display:none !important; }
#workspace.inline-analysis #line-card [aria-pressed="true"] { background:#eeede8; border-color:#ccc9c0; }
body:not(.analysis-mode) #workspace #training-analysis { padding:16px; }
#training-analysis .card-head { align-items:center; gap:8px; flex-wrap:wrap; }
#training-analysis #engine-status { font-size:11px; font-weight:400; color:#78766f; }
#training-analysis .engine-lines { min-height:0; padding:0; }
#training-analysis .engine-line { grid-template-columns:50px minmax(0,1fr); font-size:12px; }
#training-analysis .engine-eval, #training-analysis .engine-eval.black { color:#292824; background:#eeede8; border:0; font-weight:500; }
#training-analysis .engine-pv, #training-analysis .engine-principal-variation,
#training-analysis .engine-note, #training-analysis .engine-license { color:#78766f; }
#training-analysis .engine-pv b, #training-analysis .engine-best-label { color:#292824; }
#training-analysis .engine-best-label { text-transform:none; letter-spacing:0; font-weight:500; }
#training-analysis .engine-license { font-size:10px; margin-top:16px; padding:0; }
#training-analysis .engine-license a { color:inherit; }
@media(max-width:650px) { #workspace.inline-analysis .board-area { gap:6px; } #workspace.inline-analysis #eval-bar { width:18px; } }
body:not(.analysis-mode) #workspace .board { border-radius:0; }
body:not(.analysis-mode) #workspace .board-heading { font-size:12px; color:#78766f; margin-bottom:16px; }
body:not(.analysis-mode) #workspace .board-heading strong { font-size:12px; font-weight:400; }
body:not(.analysis-mode) #workspace .board-turn-piece { display:none; }
body:not(.analysis-mode) #workspace .board-caption { font-size:11px; color:#78766f; padding-top:24px; align-items:center; flex-wrap:wrap; }
body:not(.analysis-mode) #workspace .board-caption > span:last-of-type { display:none; }
.end-session { position:absolute; top:30px; right:clamp(24px,4vw,64px); }
#workspace { position:relative; }
body:not(.analysis-mode) #workspace .side-column { display:flex; flex-direction:column; gap:24px; min-width:0; }
body:not(.analysis-mode) #workspace .card { border:0; border-radius:6px; background:#f7f6f3; box-shadow:none; }
body:not(.analysis-mode) #workspace .solve-card { background:white; overflow:visible; }
body:not(.analysis-mode) #workspace .analysis-single-cta { display:none; }
body:not(.analysis-mode) #workspace.resolved .feedback-card { margin-bottom:0; }
body:not(.analysis-mode) #workspace .card-head { padding:0 0 18px; border:0; font-size:12px; }
body:not(.analysis-mode) #workspace .card-title { font-size:13px; letter-spacing:0; text-transform:none; font-weight:600; }
body:not(.analysis-mode) #workspace .solve-card .card-title { display:none; }
body:not(.analysis-mode) #workspace .meta-strip, body:not(.analysis-mode) #workspace .opportunity-badge { display:none; }
body:not(.analysis-mode) #workspace .turn-bar { padding:0; border:0; background:none; }
body:not(.analysis-mode) #workspace .turn-piece { display:none; }
body:not(.analysis-mode) #workspace .turn-copy { font-size:26px; font-weight:600; color:#292824; }
body:not(.analysis-mode) #workspace .turn-copy small { font-size:14px; font-weight:400; color:#78766f; line-height:1.6; margin-top:12px; }
body:not(.analysis-mode) #workspace .status { padding:20px; border-radius:6px; background:#f7f6f3; color:#292824; min-height:70px; font-size:14px; line-height:1.6; margin:24px 0; }
body:not(.analysis-mode) #workspace.resolved .status { background:#eff4ef; color:#42634d; }
body:not(.analysis-mode) #workspace .status.bad { color:#b4473c; }
body:not(.analysis-mode) #workspace #puzzle-number { color:#78766f; font-size:12px; }
body:not(.analysis-mode) #workspace #hint, body:not(.analysis-mode) #workspace #next-move { background:white; color:#292824; border-color:#e8e6e1; }
.feedback-card { padding:20px; border-radius:6px; margin:24px 0; background:#f7f6f3; }
.feedback-heading { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; margin-bottom:12px; }
body:not(.analysis-mode) #workspace .feedback-card .status { padding:0; margin:0; min-height:0; background:transparent; }
body:not(.analysis-mode) #workspace.resolved .feedback-card { background:#eff4ef; }
#feedback-solution { display:block; font-size:28px; line-height:1.4; font-weight:600; margin-top:14px; }
#feedback-summary { font-size:12px; line-height:1.7; }
#feedback-original { display:block; border-top:1px solid #e8e6e1; padding-top:14px; margin-top:14px; color:#78766f; font-size:11px; }
body:not(.analysis-mode) .tools-panel { background:white; border:1px solid #e8e6e1; }
body:not(.analysis-mode) .tools-item { background:white; color:#292824; }
body:not(.analysis-mode) #workspace .action-row { padding:0; gap:8px; }
body:not(.analysis-mode) #workspace.resolved .action-row { display:none; }
body:not(.analysis-mode) #line-card { padding:16px; }
body:not(.analysis-mode) #line-card .card-head { padding-bottom:10px; }
body:not(.analysis-mode) #line-card .line-moves { padding:0 0 10px; font-size:12px; background:none; gap:8px; }
body:not(.analysis-mode) #line-card .line-move { color:#292824; background:none; border:0; padding:4px; font-size:12px; }
body:not(.analysis-mode) #line-card .line-move.current { background:#eeede9; }
body:not(.analysis-mode) #line-card .line-nav { padding:0 0 10px; gap:8px; justify-content:start; display:flex; }
body:not(.analysis-mode) #line-card .line-nav .btn { padding:4px 8px; font-size:12px; }
body:not(.analysis-mode) #line-card .analysis-cta { padding:0; border:0; }
body:not(.analysis-mode) #line-card .analysis-cta button { background:transparent; color:#292824; border:1px solid #e8e6e1; width:100%; }
body:not(.analysis-mode) #line-card #retry { display:none; }
.puzzle-type { color:#78766f; font-size:11px; border-radius:4px; background:#f7f6f3; padding:4px 8px; }
.source-card { border-top:1px solid #e8e6e1; padding-top:24px; font-size:13px; line-height:1.7; }
.source-card small { display:block; font-size:10px; color:#78766f; }
.source-card p { margin:8px 0 0; }
.source-card a { color:#292824; font-size:11px; text-decoration:none; }
.session-progress { font-size:12px; }
.session-progress > div:first-child { display:flex; justify-content:space-between; gap:12px; }
.session-progress small { color:#78766f; font-size:11px; }
.session-progress progress { width:100%; height:6px; appearance:none; border:0; display:block; margin:12px 0; }
.session-progress progress::-webkit-progress-bar { background:#eeede9; border-radius:2px; }
.session-progress progress::-webkit-progress-value { background:#292824; border-radius:2px; }
.session-progress progress::-moz-progress-bar { background:#292824; }
body:not(.analysis-mode) #played-move-card { order:5; background:white; }
body:not(.analysis-mode) #played-move-card .moves-list { max-height:120px; background:#f7f6f3; }
body:not(.analysis-mode) #played-move-card .move-row { color:#292824; }
body:not(.analysis-mode) #played-move-card .game-label { color:#78766f; }
body:not(.analysis-mode) #workspace #bottom-controls { margin:16px auto 0; }
body:not(.analysis-mode) #workspace #bottom-controls #continue { display:none; }
body.analysis-mode .workspace-sidebar { display:none; }
body.analysis-mode .site-header, body.analysis-mode .workspace-bar { display:none; }
body.analysis-mode .main-nav { display:flex; }
body.analysis-mode .analysis-nav { margin-bottom:18px; }
body:not(.app-mode):not(.analysis-mode) .topbar, body:not(.app-mode):not(.analysis-mode) .main-nav { display:none; }
body:not(.analysis-mode) .top-actions .load-button { display:none; }
body.dev-mode .dev-import { display:block !important; }
.dev-import { position:fixed; bottom:12px; left:12px; z-index:90; padding:8px; background:#fff; color:#292824; border:1px dashed #78766f; font-size:12px; }
@media(min-width:1600px) { body:not(.analysis-mode) #workspace { max-width:1300px; grid-template-columns:minmax(0,1fr) 360px; gap:56px; } }
@media(max-width:1300px) { .landing-hero { margin:0 48px; } .workspace-sidebar { width:190px; } body.app-mode:not(.analysis-mode) .app-shell { padding-left:190px; } .setup-grid { grid-template-columns:minmax(0,1fr) 270px; gap:24px; } body:not(.analysis-mode) #workspace { gap:24px; padding-left:24px; padding-right:24px; } }
@media(max-width:1000px) { .landing-hero { padding:64px 0; gap:32px; margin:0 32px; } .landing-faq { grid-template-columns:240px 1fr; gap:40px; } .workspace-sidebar { width:170px; padding:24px 12px; } body.app-mode:not(.analysis-mode) .app-shell { padding-left:170px; } .setup-grid { grid-template-columns:1fr; } .plan-card { max-width:none; } body:not(.analysis-mode) #workspace { grid-template-columns:minmax(0,1fr); } body:not(.analysis-mode) #workspace .side-column { width:min(650px,100%); margin:auto; } }
@media(max-width:650px) { .site-header { height:64px; padding:0 20px; } .site-links { gap:12px; } .site-links a:not(:last-child) { display:none; } .landing-hero { grid-template-columns:1fr; margin:0 20px; padding:48px 0; } .landing-intro h1 { font-size:40px; } .landing-intro > p { font-size:16px; } .landing-section { padding:48px 20px; } .landing-three { grid-template-columns:1fr; gap:32px; } .landing-faq { grid-template-columns:1fr; gap:0; } .landing-section h2 { font-size:28px; } .landing-final h2 { font-size:30px; } .workspace-sidebar { position:static; width:100%; padding:16px; gap:14px; } .sidebar-account, .sidebar-stats { display:none; } body.app-mode:not(.analysis-mode) .app-shell { padding-left:0; } body.app-mode:not(.analysis-mode) .main-nav { flex-direction:row; align-items:center; flex-wrap:wrap; } .workspace-sidebar .site-brand { font-size:16px; } .workspace-bar { padding:16px; font-size:11px; height:auto; } body.app-mode:not(.analysis-mode) .navigation-view { padding:32px 16px; } body:not(.analysis-mode) #themes-view h2 { font-size:30px; } body:not(.analysis-mode) .mate-selection-row .theme-choice { padding-right:110px; } body:not(.analysis-mode) #customize-mates { font-size:10px; } body:not(.analysis-mode) .game-drawer-backdrop { padding:12px; } body:not(.analysis-mode) .game-drawer { max-height:calc(100dvh - 24px); } body:not(.analysis-mode) .game-drawer-header { padding:20px; } .game-search-row { padding:14px 20px; gap:8px; } .game-search-row small { font-size:10px; } body:not(.analysis-mode) .game-drawer-list { padding:0 12px; } .game-table-heading { margin:0 12px; } .game-table-heading, body:not(.analysis-mode) .game-selection-card { grid-template-columns:16px minmax(0,1fr) 75px; gap:8px; } .game-date, .game-result, .game-table-heading .played-col, .game-table-heading .result-col { display:none; } .game-date-mobile { display:block; } .game-list-meta, .game-current-themes { padding-left:20px; padding-right:20px; } body:not(.analysis-mode) .game-drawer-footer { padding:16px; flex-wrap:wrap; } body:not(.analysis-mode) #workspace { padding:80px 16px 32px; display:grid; grid-template-columns:1fr; gap:28px; } body:not(.analysis-mode) #workspace .board-column { --board-size:100%; } body:not(.analysis-mode) #workspace .side-column { grid-row:auto; gap:24px; } body:not(.analysis-mode) #workspace .action-row { display:grid; } body:not(.analysis-mode) #workspace .mobile-action-bar { display:none; } body:not(.analysis-mode) #workspace .side-column #line-card { order:0; } body:not(.analysis-mode) #workspace .board-caption { padding-top:16px; } body:not(.analysis-mode) #workspace .turn-copy { font-size:24px; } body:not(.analysis-mode) #workspace .goal-toggle { font-size:11px; } }
@media(max-width:650px) { body:not(.analysis-mode) #workspace .action-button, body:not(.analysis-mode) #workspace .btn, body:not(.analysis-mode) #theme-start { min-height:44px; } body:not(.analysis-mode) #line-card .line-nav .btn { min-height:44px; } body:not(.analysis-mode) #workspace .mobile-action-bar { display:grid; } body:not(.analysis-mode) #workspace .side-column .action-row, body:not(.analysis-mode) #workspace.resolved .mobile-action-bar { display:none; } body:not(.analysis-mode) #workspace .mobile-action-button { color:#292824; background:white; border:1px solid #e8e6e1; } }
@media(max-width:650px) { body:not(.analysis-mode) .game-selection-info .game-date-mobile { display:block; } }