@charset "UTF-8";
* { box-sizing: border-box; }
:root { --paper:#f7f6ef; --white:#fffefa; --ink:#203d35; --muted:#68766d; --green:#235745; --sage:#dfe9dd; --line:#d9dfd4; --orange:#be6138; --red:#a43d38; --red-bg:#fff1ec; --radius:20px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.55; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
a { color:inherit; }
button:disabled { cursor:default; opacity:.55; }
:focus-visible { outline:3px solid #bd672b; outline-offset:4px; }
.skip-link { position:fixed; top:-100px; left:20px; background:var(--green); color:white; padding:12px 18px; z-index:100; }
.skip-link:focus { top:8px; }
.shell { max-width:1240px; margin:auto; padding:0 48px; }
.site-header { min-height:100px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.brand { text-decoration:none; display:inline-flex; align-items:center; gap:12px; font-weight:800; font-size:20px; letter-spacing:2px; }
.brand-mark { width:32px; height:32px; display:grid; grid-template-columns:1fr 1fr; gap:3px; transform:rotate(-8deg); }
.brand-mark i { background:var(--green); border-radius:3px; }
.brand-mark i:last-child { background:#c2d4b9; }
.header-right { display:flex; align-items:center; gap:22px; }
.tiny-note { color:var(--muted); font-size:12px; letter-spacing:1px; text-transform:uppercase; }
.language-switch { display:inline-flex; padding:4px; border:1px solid var(--line); border-radius:99px; background:var(--white); gap:2px; }
.language-switch button { border:0; color:var(--muted); background:transparent; border-radius:99px; padding:6px 11px; font-size:12px; font-weight:800; }
.language-switch button[aria-pressed="true"] { color:white; background:var(--green); }
.hero { display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:center; padding:76px 0 72px; }
.eyebrow { font-size:11px; letter-spacing:2px; font-weight:800; text-transform:uppercase; color:var(--green); display:flex; gap:9px; align-items:center; }
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); }
h1,h2,h3,p { margin-top:0; }
.hero h1 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(42px,5.2vw,66px); font-weight:400; line-height:1.08; letter-spacing:-2.5px; margin:21px 0 23px; }
.hero h1 em { font-style:italic; color:#628560; }
.hero-description { max-width:440px; color:var(--muted); font-size:17px; line-height:1.8; }
.hero-facts { display:flex; gap:22px; flex-wrap:wrap; margin-top:28px; font-size:12px; font-weight:600; }
.hero-facts span { display:flex; gap:7px; align-items:center; }
.check-small { color:var(--green); font-size:16px; }
.hero-art { min-height:310px; position:relative; display:flex; align-items:center; justify-content:center; }
.art-orbit { position:absolute; border:1px solid #d6dfcd; width:330px; height:330px; border-radius:50%; }
.art-orbit::after { content:""; position:absolute; inset:24px; border:1px dashed #d6dfcd; border-radius:50%; }
.code-window { position:relative; width:340px; transform:rotate(-4deg); border:1px solid #cdd9c7; border-radius:15px; background:#e7eddf; box-shadow:0 20px 50px #244e3914; }
.window-bar { display:flex; gap:6px; padding:15px; border-bottom:1px solid #cbd8c4; }
.window-bar i { width:7px; height:7px; border-radius:50%; background:#9eae94; }
.art-code { padding:24px 26px 30px; font:18px/1.9 Consolas,monospace; color:#54714f; }
.art-code .indent { display:block; margin-left:24px; color:#203d35; }
.art-code .code-light { color:#708267; }
.art-chip { position:absolute; background:var(--white); border:1px solid var(--line); box-shadow:0 8px 22px #203d350c; border-radius:14px; padding:13px 18px; font-weight:700; }
.art-chip.html { left:0; top:13px; transform:rotate(-10deg); color:#ab5b3d; }
.art-chip.css { right:-4px; top:45px; transform:rotate(9deg); color:#426482; }
.art-chip.js { right:6px; bottom:2px; transform:rotate(-5deg); color:#847128; }
.art-chip.done { left:5px; bottom:6px; transform:rotate(6deg); font-size:12px; color:var(--green); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin:4px 0 23px; }
.section-heading h2 { font-family:Georgia,serif; font-size:29px; font-weight:400; margin:0; }
.section-heading p { margin:0; font-size:13px; color:var(--muted); }
.course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.course-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:27px; position:relative; display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s; }
.course-card:hover { transform:translateY(-4px); box-shadow:0 12px 25px #203d350b; }
.course-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:25px; }
.course-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; font:700 20px Consolas,monospace; }
.course-icon.html { background:#f5e9dd; color:#ac6139; }
.course-icon.css { background:#e6edf0; color:#3b6382; }
.course-icon.javascript { background:#f1edce; color:#8c762c; }
.course-label { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.course-card h3 { font-size:26px; letter-spacing:-.7px; line-height:1.2; margin:0 0 12px; }
.course-card p { color:var(--muted); font-size:13px; line-height:1.8; margin:0 0 24px; min-height:70px; }
.course-meta { display:flex; justify-content:space-between; gap:8px; font-size:11px; margin-top:auto; margin-bottom:9px; }
.course-meta strong { font-weight:600; }
.track { height:5px; border-radius:9px; background:#edf0e7; overflow:hidden; }
.track>span { display:block; height:100%; border-radius:9px; background:#77956d; }
.course-card .track { margin-bottom:21px; }
.btn { border:1px solid var(--green); background:var(--green); color:white; padding:12px 20px; border-radius:10px; font-size:13px; font-weight:700; display:inline-flex; justify-content:center; align-items:center; gap:11px; text-decoration:none; min-height:45px; }
.btn:hover:not(:disabled) { background:#174635; }
.btn.secondary { background:transparent; color:var(--green); border-color:#b7c6b5; }
.btn.secondary:hover:not(:disabled) { background:#e9efdf; }
.btn.soft { background:#edf1e6; color:var(--green); border-color:transparent; }
.btn.danger { background:var(--red); border-color:var(--red); }
.btn svg { width:15px; height:15px; }
.home-note { display:flex; justify-content:center; align-items:center; gap:10px; color:var(--muted); font-size:12px; margin:34px 0 49px; }
.home-note svg { width:15px; height:15px; flex:none; }
.site-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding:22px 0 27px; color:var(--muted); font-size:11px; gap:15px; }
.site-footer strong { font-size:11px; letter-spacing:1.4px; color:var(--ink); }
.storage-notice { margin:16px 0; padding:12px 16px; background:#fff0d5; border:1px solid #d9b873; border-radius:9px; font-size:13px; }
.quiz-header { min-height:85px; }
.restart-link { border:0; background:none; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px; padding:8px; }
.restart-link svg { width:15px; height:15px; }
.quiz-heading { padding:33px 0 23px; }
.breadcrumbs { font-size:11px; color:var(--muted); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.breadcrumbs a { text-decoration:none; }
.quiz-title-row { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.quiz-title { font:400 35px/1.2 Georgia,serif; letter-spacing:-.8px; margin:0 0 8px; }
.quiz-subtitle { color:var(--muted); font-size:13px; margin:0; }
.course-badge { display:flex; align-items:center; gap:10px; }
.stats-bar { display:flex; align-items:center; gap:25px; padding:17px 22px; border:1px solid var(--line); background:#edf1e7; border-radius:14px; margin-bottom:25px; }
.big-progress { min-width:155px; flex:1; }
.big-progress .progress-copy { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:12px; gap:8px; }
.stat { border-left:1px solid #d1dacb; padding-left:24px; min-width:80px; }
.stat strong { display:block; font-size:20px; line-height:1.2; font-weight:600; }
.stat small { color:var(--muted); font-size:10px; }
.quiz-layout { display:grid; grid-template-columns:255px minmax(0,1fr); gap:26px; align-items:start; margin-bottom:36px; }
.question-sidebar { background:var(--white); border:1px solid var(--line); border-radius:16px; padding:19px; position:sticky; top:18px; }
.map-toggle { padding:0; width:100%; display:flex; justify-content:space-between; align-items:center; border:0; background:none; font-size:13px; font-weight:750; color:var(--ink); }
.map-toggle svg { width:15px; height:15px; transition:transform .2s; }
.map-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.map-content { margin-top:17px; }
.map-content[hidden] { display:none; }
.topic-label { font-size:11px; color:var(--muted); display:block; margin-bottom:6px; }
.topic-select { width:100%; padding:8px; border:1px solid var(--line); background:white; color:var(--ink); border-radius:7px; font-size:11px; margin-bottom:16px; }
.question-map { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; }
.map-number { border:1px solid var(--line); background:#f6f7f1; color:var(--muted); border-radius:5px; height:24px; padding:0; font-size:9px; position:relative; }
.map-number.draft { background:#f0eddc; border-style:dashed; }
.map-number.correct { background:#dcebdc; border-color:#a5c4a0; color:#275430; }
.map-number.incorrect { background:#f8e7df; border-color:#d7aaa0; color:#9a4235; }
.map-number.revealed { background:#e4e9f4; border-color:#b9c8e2; color:#4e658c; }
.map-number[aria-current="step"] { outline:2px solid var(--green); outline-offset:1px; color:var(--green); font-weight:800; }
.map-number[data-mark]::after { content:attr(data-mark); font-size:7px; position:absolute; top:-4px; right:-2px; background:var(--white); border-radius:50%; line-height:9px; width:9px; }
.map-legend { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:18px; font-size:9px; color:var(--muted); }
.map-legend span { display:flex; align-items:center; gap:5px; }
.legend-dot { width:9px; height:9px; border:1px solid #c5cfbe; border-radius:3px; display:inline-block; flex:none; }
.legend-dot.correct { background:#dcebdc; }
.legend-dot.incorrect { background:#f8e7df; }
.legend-dot.revealed { background:#e4e9f4; }
.sidebar-tip { font-size:11px; color:var(--muted); line-height:1.6; border-top:1px solid var(--line); margin:18px 0 0; padding-top:13px; }
.question-card { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:29px; min-width:0; scroll-margin-top:20px; }
.question-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; }
.question-index { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1.3px; font-weight:700; }
.kind-tag { font-size:10px; padding:4px 8px; color:#5b6d57; background:#edf1e6; border-radius:5px; white-space:nowrap; }
.question-topic { color:#6b8462; font-size:11px; font-weight:700; margin-bottom:9px; }
.question-prompt { font-size:20px; line-height:1.5; font-weight:600; letter-spacing:-.3px; margin-bottom:14px; }
.question-code { color:#dce7da; background:#213d34; padding:19px 20px; border-radius:10px; font:12px/1.75 Consolas,"Courier New",monospace; overflow:auto; tab-size:2; margin:17px 0; white-space:pre; }
.answer-instructions { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:8px; margin:20px 0 11px; font-size:11px; }
.answer-count { font-weight:700; color:var(--green); background:#edf2e6; padding:5px 9px; border-radius:6px; }
.selection-count { color:var(--muted); }
.options { display:flex; flex-direction:column; gap:10px; margin:0; border:0; padding:0; min-width:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.option { display:block; border:1px solid var(--line); border-radius:10px; background:white; transition:background .15s,border-color .15s; overflow-wrap:anywhere; }
.option.selectable:hover { background:#f5f7f0; border-color:#a7b8a0; }
.option.selected { border-color:#75936c; background:#f1f5e9; }
.option-label { cursor:pointer; display:flex; align-items:flex-start; gap:12px; padding:15px; }
.option input { appearance:none; width:18px; height:18px; min-width:18px; margin:2px 0 0; border:1px solid #b7c3b1; border-radius:4px; display:grid; place-content:center; }
.option input:checked { background:var(--green); border-color:var(--green); }
.option input:checked::after { content:"✓"; color:white; font-size:13px; line-height:1; }
.option.wrong-selected input:checked { background:var(--red); border-color:var(--red); }
.option input:disabled { opacity:1; }
.option.locked .option-label { cursor:default; }
.option-letter { color:var(--muted); font-size:11px; font-weight:700; line-height:23px; min-width:13px; }
.option-text { font-size:13px; white-space:pre-wrap; flex:1; }
.option.correct-option { border-color:#9cba95; background:#f2f8ed; }
.option.wrong-selected { border-color:#d4a397; background:#fff3ee; }
.option-detail { margin:0 15px 15px 57px; border-top:1px solid #dde4d5; padding-top:12px; font-size:12px; color:#52634f; line-height:1.8; }
.option-detail p { margin:7px 0 0; }
.option.wrong-selected .option-detail { border-color:#e9ccc1; color:#80584d; }
.option-status { font-size:10px; font-weight:800; display:inline-block; }
.option-status.yes { color:#35663c; }
.option-status.no { color:#97493c; }
.feedback { border-radius:10px; padding:14px 17px; margin:0 0 17px; background:#e9f3e2; border:1px solid #c2d6b7; scroll-margin-top:25px; }
.feedback.incorrect { background:#fff0e7; border-color:#e7c6b5; }
.feedback.revealed { background:#edf1f8; border-color:#cbd5e7; }
.feedback strong { display:block; font-size:14px; }
.feedback p { font-size:12px; margin:4px 0 0; color:#5b6f56; }
.feedback.incorrect p { color:#82604e; }
.feedback.revealed p { color:#5b6d86; }
.inline-error { color:var(--red); font-size:12px; margin:12px 0 0; }
.question-actions { display:flex; gap:10px; flex-wrap:wrap; margin:22px 0 0; }
.answer-overview { margin-top:24px; padding-top:21px; border-top:1px solid var(--line); font-size:13px; line-height:1.85; }
.answer-overview h3 { font-size:14px; margin-bottom:8px; }
.answer-overview p { color:#52634f; }
.source-list { color:var(--muted); font-size:11px; margin:13px 0 0; }
.source-list summary { cursor:pointer; font-weight:600; }
.source-list ul { padding-left:17px; margin-bottom:0; }
.question-navigation { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; }
.save-status { color:var(--muted); font-size:10px; display:flex; justify-content:center; align-items:center; gap:5px; margin-top:14px; }
.save-status svg { width:12px; height:12px; }
.completion { background:#e8f0df; border:1px solid #bfcfb2; padding:19px 23px; border-radius:13px; margin-bottom:23px; }
.completion h2 { font:400 24px Georgia,serif; margin-bottom:7px; }
.completion p { font-size:13px; margin:0; }
dialog { border:1px solid var(--line); border-radius:18px; padding:29px; width:min(450px,calc(100% - 32px)); background:var(--white); color:var(--ink); }
dialog::backdrop { background:#122b2366; backdrop-filter:blur(3px); }
dialog h2 { font:400 27px/1.25 Georgia,serif; margin:0 0 12px; }
dialog p { color:var(--muted); font-size:14px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; }
@media(min-width:1100px) { .question-map { grid-template-columns:repeat(10,minmax(0,1fr)); } }
@media(max-width:1000px) { .shell { padding:0 28px; } .hero { gap:20px; } .hero-art { transform:scale(.9); } .course-card { padding:23px; } .course-grid { gap:15px; } .quiz-layout { grid-template-columns:220px minmax(0,1fr); gap:18px; } .question-card { padding:24px; } .question-map { grid-template-columns:repeat(8,minmax(0,1fr)); } .stat { min-width:65px; padding-left:17px; } .stats-bar { gap:17px; } }
@media(max-width:760px) { .site-header { min-height:80px; } .tiny-note { display:none; } .hero { padding:45px 0 37px; grid-template-columns:1fr; } .hero h1 { font-size:52px; max-width:500px; } .hero-description { max-width:100%; } .hero-art { display:none; } .hero-facts { gap:15px; font-size:11px; } .section-heading { align-items:start; flex-direction:column; gap:8px; } .section-heading h2 { font-size:27px; } .course-grid { grid-template-columns:1fr; } .course-card p { min-height:0; margin-bottom:20px; } .course-top { margin-bottom:18px; } .course-card { padding:24px; } .course-card h3 { font-size:25px; } .home-note { font-size:11px; margin:25px 0 35px; } .header-right { gap:10px; } .restart-link { font-size:0; gap:0; } .restart-link svg { width:20px; height:20px; } .quiz-title { font-size:30px; } .quiz-title-row>.course-icon { display:none; } .stats-bar { flex-wrap:wrap; padding:15px 17px; row-gap:15px; } .big-progress { flex-basis:100%; } .stat { border:0; padding-left:0; flex:1; } .quiz-layout { grid-template-columns:1fr; gap:18px; } .question-sidebar { position:static; padding:17px; } .question-map { grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; } .map-number { height:31px; font-size:11px; } .map-legend { grid-template-columns:repeat(4,1fr); font-size:10px; } .sidebar-tip { font-size:11px; } .question-card { padding:22px; } .question-prompt { font-size:18px; } .site-footer { font-size:10px; } }
@media(max-width:420px) { .shell { padding:0 18px; } .brand { font-size:17px; gap:9px; } .brand-mark { width:27px; height:27px; } .hero h1 { font-size:44px; letter-spacing:-1.8px; } .hero-facts { flex-direction:column; gap:8px; } .question-card { padding:18px; } .question-map { gap:4px; } .option-label { padding:12px; gap:9px; } .option-detail { margin-left:43px; margin-right:12px; } .question-actions .btn { flex:1; padding:11px 12px; } .map-legend { grid-template-columns:1fr 1fr; } .question-navigation .btn { padding:10px 12px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }

/* Learn Flow: palette taken from fogdd.com, with readable button contrast. */
:root { --paper:#f7fdf5; --white:#ffffff; --ink:#050d18; --muted:#626970; --green:#018713; --sage:#e7f5e4; --line:#dce5db; --nav:#040b14; --brand:#05a31a; }
body { color:#272829; }
.header-wrap { background:var(--nav); color:white; }
.site-header { min-height:86px; border:0; }
.brand { font-size:19px; letter-spacing:1.3px; color:white; }
.brand-logo { display:block; object-fit:contain; background:white; border-radius:7px; width:42px; height:42px; }
.header-right { gap:25px; }
.header-wrap .restart-link { color:#d9e4df; }
.header-wrap .language-switch { background:#13202c; border-color:#35424a; }
.header-wrap .language-switch button { color:#d3ddd7; }
.header-wrap .language-switch button[aria-pressed="true"] { background:var(--brand); color:#040b14; }
.course-intro { padding:53px 0 32px; }
.course-intro h1 { font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--ink); font-size:36px; line-height:1.3; letter-spacing:-1px; margin:0 0 12px; }
.course-intro p { color:var(--muted); font-size:15px; max-width:680px; margin:0; }
.course-card h2 { font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--ink); font-size:26px; letter-spacing:-.7px; line-height:1.2; margin:0 0 12px; }
.course-card p { font-size:14px; }
.course-label { color:#5f676d; }
.course-icon.html { background:#e7f5e4; color:#016b10; }
.course-icon.css { background:#e6edf5; color:#173b6c; }
.course-icon.javascript { background:#e8edf0; color:#040b14; }
.track { background:#e7eee4; }
.track>span { background:var(--brand); }
.btn { background:#018713; border-color:#018713; color:white; }
.btn:hover:not(:disabled) { background:#016f10; border-color:#016f10; }
.btn.secondary { color:#016f10; border-color:#a9bda6; }
.btn.secondary:hover:not(:disabled) { background:#e9f5e5; }
.btn.danger { color:white; background:var(--red); border-color:var(--red); }
.quiz-title { font-family:Inter,"Segoe UI",Arial,sans-serif; font-weight:650; color:var(--ink); font-size:33px; }
.stats-bar { background:#ecf7e8; }
.quiz-tools { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 25px; align-items:center; padding:0 0 22px; }
.size-label { display:inline-flex; gap:10px; align-items:center; font-size:12px; color:#46534b; }
.size-label select { border:1px solid var(--line); background:white; border-radius:7px; padding:7px 10px; color:var(--ink); min-width:68px; }
.shuffle-control { display:inline-flex; gap:9px; align-items:center; font-size:12px; cursor:pointer; }
.shuffle-control input { appearance:none; width:17px; height:17px; margin:0; border:1px solid #9db397; border-radius:4px; flex:none; }
.shuffle-control input:checked { border:4px solid white; background:var(--green); outline:1px solid var(--green); }
.range-label { font-size:11px; color:var(--muted); margin:0 0 11px; }
#question-panel,.questions-list,.question-sidebar { min-width:0; }
.questions-list { display:flex; flex-direction:column; gap:24px; }
.answer-toggle { color:#016e10; background:#f0f8ec; border:1px solid #c6dcbf; padding:7px 11px; border-radius:7px; font-size:11px; font-weight:650; }
.answer-toggle:hover { background:#e4f4de; }
.option input:checked::after { content:""; width:8px; height:8px; border-radius:1px; background:white; }
.option.selected { background:#f1f9ed; border-color:#6e9f60; }
.option.correct-option { background:#f1f9ed; border-color:#99c18d; }
.option.wrong-selected { background:#fff3ee; border-color:#d4a397; }
.question-code { background:#101e2a; color:#e5f0e2; }
.question-topic { color:#267333; }
.question-actions { align-items:center; justify-content:space-between; }
.answer-overview[hidden] { display:none; }
.feedback { background:#edf8e8; border-color:#bad5ad; }
.feedback p,.answer-overview p { color:#435742; }
.feedback.incorrect { background:#fff0e7; border-color:#e7c6b5; }
.feedback.revealed { background:#edf2f8; border-color:#cbd5e7; }
.completion h2 { font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:22px; }
.skip-link { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
.skip-link:focus { position:fixed; left:20px; top:8px; width:auto; height:auto; margin:0; padding:12px 18px; clip:auto; overflow:visible; }
@media(max-width:760px) { .quiz-layout { grid-template-columns:minmax(0,1fr); } .course-intro { padding:35px 0 25px; } .course-intro h1 { font-size:29px; } .course-intro p { font-size:14px; } .header-right { gap:12px; } .brand { font-size:17px; gap:9px; } .brand-logo { width:36px; height:36px; } .quiz-tools { flex-direction:column; align-items:flex-start; gap:14px; } .question-actions .btn { flex:initial; } .shuffle-control { font-size:11px; } }
@media(max-width:420px) { .brand { font-size:15px; letter-spacing:.9px; } .brand-logo { width:32px; height:32px; } .header-right { gap:8px; } .language-switch button { padding:6px 9px; } .question-actions { gap:10px; } .selection-count { font-size:10px; } }