:root { --ink:#151b27; --muted:#657083; --paper:#f4f1ea; --panel:#fff; --line:#dcd8cf; --navy:#172641; --navy-soft:#e9edf3; --orange:#e76f32; --orange-soft:#fff0e7; --green:#28765e; --red:#b94d48; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,Helvetica,sans-serif; line-height:1.5; }
button,input { font:inherit; } button,label { -webkit-tap-highlight-color:transparent; } [hidden] { display:none!important; }
.site-header { position:sticky; z-index:10; top:0; display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:10px clamp(18px,5vw,72px); background:rgba(244,241,234,.92); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }.brand-mark,.mini-mark { display:grid; place-items:center; width:41px; height:41px; color:white; background:var(--orange); border-radius:50%; font-family:"Source Serif 4",serif; font-size:1.2rem; font-weight:800; font-style:italic; }.brand>span:last-child { display:flex; flex-direction:column; }.brand strong{font-size:.94rem}.brand small{color:var(--muted);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
nav{display:flex;align-items:center;gap:8px}.nav-link{padding:8px 11px;color:var(--muted);background:none;border:0;font-weight:700;text-decoration:none;cursor:pointer}.nav-link:hover,.nav-link.is-active{color:var(--navy)}
.setup-view { width:min(1120px,calc(100% - 40px)); margin:auto; padding:64px 0 80px; }.hero { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:70px; align-items:center; margin-bottom:62px; }.eyebrow{margin:0 0 10px;color:var(--orange);font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.hero h1,.results-card h1{margin:0;font-family:"Source Serif 4",Georgia,serif;font-size:clamp(2.8rem,6.2vw,5.4rem);line-height:.94;letter-spacing:-.035em}.hero h1 em{color:var(--orange);font-weight:600}.hero-copy>p:last-child{max-width:620px;margin:22px 0 0;color:var(--muted);font-size:1.05rem}.formula-card{position:relative;min-height:220px;padding:29px;color:white;background:var(--navy);border-radius:3px;box-shadow:18px 18px 0 var(--orange-soft)}.formula-card>span:first-child{font:500 .68rem "DM Mono",monospace;color:#aab5c7}.formula-card>div{margin-top:34px;font-family:"Source Serif 4",serif;font-size:3.2rem;font-style:italic}.formula-card small{display:block;color:#b8c1cf}.formula-orbit{position:absolute;right:24px;bottom:18px;color:#f39a69!important;font:500 .85rem "DM Mono",monospace!important}
.builder{max-width:880px}fieldset{margin:0 0 45px;padding:0;border:0}legend{margin:0 0 8px;font-size:1rem;font-weight:800}.legend-row{display:flex;justify-content:space-between;align-items:start}.legend-row legend{width:auto}legend>span{margin-right:9px;color:var(--orange);font:500 .72rem "DM Mono",monospace}.field-hint{margin:0 0 17px;color:var(--muted);font-size:.79rem}.selection-actions{display:flex;gap:6px}.selection-actions button{padding:4px 8px;color:var(--muted);background:transparent;border:0;font-size:.7rem;font-weight:700;cursor:pointer}.selection-actions button:hover{color:var(--orange)}
.topic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.topic-card{position:relative;display:flex;align-items:center;gap:11px;min-height:82px;padding:13px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:4px;cursor:pointer;transition:.16s}.topic-card:hover{transform:translateY(-1px);border-color:#abb3c0}.topic-card:has(input:checked){background:white;border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}.topic-card input,.difficulty-card input{position:absolute;opacity:0}.topic-symbol{display:grid;place-items:center;flex:0 0 auto;width:35px;height:35px;color:var(--orange);background:var(--orange-soft);font:500 .75rem "DM Mono",monospace}.topic-card>span:nth-child(3){display:flex;min-width:0;flex-direction:column}.topic-card strong{font-size:.76rem}.topic-card small{margin-top:2px;color:var(--muted);font-size:.6rem}.topic-card i{display:none;position:absolute;top:6px;right:7px;color:var(--navy);font-size:.68rem;font-style:normal}.topic-card input:checked~i{display:block}
.difficulty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.difficulty-card{position:relative;display:flex;justify-content:space-between;align-items:center;min-height:82px;padding:15px 17px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:4px;cursor:pointer}.difficulty-card:has(input:checked){color:white;background:var(--navy);border-color:var(--navy)}.difficulty-card span{display:flex;flex-direction:column}.difficulty-card strong{font-size:.85rem}.difficulty-card small{margin-top:3px;color:var(--muted);font-size:.68rem}.difficulty-card:has(input:checked) small{color:#b8c1cf}.difficulty-card i{color:#a1a8b3;font:500 .72rem "DM Mono",monospace;font-style:normal}.difficulty-card:has(input:checked) i{color:#f39a69}
.length-row{display:flex;align-items:center;justify-content:space-between;min-height:70px;padding:0 17px;background:white;border:1px solid var(--line);border-radius:4px}.length-row>div:first-child{display:flex;flex-direction:column}.length-row strong{font-size:.84rem}.length-row small{color:var(--muted);font-size:.68rem}.stepper{display:flex;height:38px;overflow:hidden;border:1px solid var(--line);border-radius:3px}.stepper button{width:38px;color:var(--navy);background:#f5f6f7;border:0;cursor:pointer}.stepper input{width:44px;padding:0;text-align:center;border:0;border-inline:1px solid var(--line);appearance:textfield}.stepper input::-webkit-inner-spin-button{appearance:none}.generate-button,.check-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:0 22px;border-radius:3px;font-weight:800;cursor:pointer}.generate-button,.check-button{color:white;background:var(--orange);border:1px solid var(--orange)}.generate-button:hover,.check-button:hover{background:#ce5923}.builder>.generate-button{width:100%;justify-content:space-between}.generator-note{margin:10px 0 0;color:var(--muted);font-size:.66rem;text-align:center}.form-error{min-height:18px;margin:7px 0 0;color:var(--red);font-size:.75rem;font-weight:700}
.practice-view{min-height:100vh;background:#eef0f3}.practice-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:74px;padding:10px clamp(16px,4vw,58px);background:white}.icon-button{width:37px;height:37px;padding:0;color:var(--muted);background:white;border:1px solid var(--line);border-radius:3px;font-size:1.3rem;cursor:pointer}.practice-title{display:flex;align-items:center;gap:10px}.mini-mark{width:35px;height:35px;font-size:1rem}.practice-title div{display:flex;flex-direction:column}.practice-title small{color:var(--muted);font-size:.63rem}.practice-meta{display:flex;justify-content:flex-end;gap:20px;color:var(--muted);font:500 .72rem "DM Mono",monospace}.progress-track{height:4px;background:#d7dce4}.progress-track span{display:block;height:100%;background:var(--orange);transition:width .25s}.problem-panel{width:min(780px,calc(100% - 36px));margin:58px auto;padding:clamp(25px,5vw,52px);background:white;border:1px solid var(--line);box-shadow:0 20px 60px rgba(23,38,65,.09)}.problem-topline{display:flex;justify-content:space-between;color:var(--orange);font:500 .68rem "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.problem-panel h2{margin:23px 0 27px;font-family:Arial,Helvetica,sans-serif;font-size:clamp(1.25rem,3vw,1.75rem);font-weight:400;line-height:1.45}.answer-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.answer-option{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border:1px solid var(--line);border-radius:3px;cursor:pointer}.answer-option:has(input:checked){background:var(--navy-soft);border-color:var(--navy)}.answer-option input{position:absolute;opacity:0}.option-letter{display:grid;place-items:center;width:29px;height:29px;color:var(--navy);background:#edf0f4;font:500 .72rem "DM Mono",monospace}.check-button{margin-top:9px}.solution{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}.solution-heading{display:flex;align-items:center;gap:11px}.solution-heading>span{display:grid;place-items:center;width:28px;height:28px;color:white;background:var(--green);border-radius:50%;font-weight:800}.solution.is-wrong .solution-heading>span{background:var(--red)}.solution-heading div{display:flex;flex-direction:column}.solution-heading small{color:var(--muted);font-size:.7rem}.solution-work{margin:20px 0;padding:16px 18px;background:#f6f4ef;border-left:3px solid var(--orange)}.solution-work span{color:var(--orange);font:500 .65rem "DM Mono",monospace;text-transform:uppercase}.solution-work p{margin:6px 0 0;color:#4e5868;font-size:.88rem;white-space:pre-line}.science-fraction{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;margin:0 .12em;vertical-align:-.35em;line-height:1.05}.science-fraction>span:first-child{width:100%;padding:0 .16em .08em;border-bottom:1px solid currentColor;text-align:center}.science-fraction>span:last-child{padding:.08em .16em 0;text-align:center}.science-radical{display:inline-flex;align-items:flex-start;white-space:nowrap}.science-radical>span:first-child{font-size:1.22em;line-height:1}.science-radical>span:last-child{padding:0 .12em;border-top:1px solid currentColor;line-height:1.05}sup,sub{font-size:.7em;line-height:0}
.question-history-nav{min-height:38px;margin-top:12px}.question-history-nav .secondary-button{min-height:36px;padding:0 12px;font-size:.78rem}
.results-view{display:grid;place-items:center;min-height:calc(100vh - 72px);padding:50px 18px}.results-card{width:min(690px,100%);text-align:center}.score{color:var(--orange);font-family:"Source Serif 4",serif;font-size:6rem;font-weight:700;line-height:1}.score span{font-size:2.4rem}.results-card h1{font-size:3.6rem}.results-card>p:not(.eyebrow){color:var(--muted)}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:30px 0 20px;border-block:1px solid var(--line)}.result-stats div{display:flex;flex-direction:column;padding:16px 8px}.result-stats div+div{border-left:1px solid var(--line)}.result-stats span{color:var(--muted);font-size:.67rem}.topic-breakdown{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:28px}.topic-breakdown span{padding:5px 8px;background:white;border:1px solid var(--line);font-size:.67rem;font-weight:700}.results-actions{display:flex;justify-content:center;gap:9px}.secondary-button{color:var(--navy);background:white;border:1px solid var(--line)}
.similar-family-action{width:min(780px,calc(100% - 36px));margin:-36px auto 58px;padding:18px 22px;background:#f8f5ef;border:1px solid var(--line);border-top:3px solid var(--orange)}.similar-family-action>div{display:flex;flex-direction:column;gap:3px}.similar-family-action>div span{color:var(--muted);font-size:.75rem}.similar-family-action .secondary-button{margin-top:13px;min-height:44px}
@media(max-width:800px){.hero{grid-template-columns:1fr}.formula-card{display:none}.topic-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.site-header{min-height:62px;padding-inline:14px}.brand-mark{width:35px;height:35px}.brand small{display:none}.nav-link{padding:7px;font-size:.78rem}.setup-view{width:calc(100% - 28px);padding-top:39px}.hero{margin-bottom:44px}.topic-grid,.difficulty-grid,.answer-options{grid-template-columns:1fr}.difficulty-card{min-height:67px}.practice-toolbar{grid-template-columns:auto 1fr auto;gap:9px;padding-inline:11px}.practice-title{justify-self:center}.practice-meta>span:first-child{display:none}.problem-panel{margin-block:25px;padding:24px 18px}.result-stats strong{font-size:.85rem}.results-actions{flex-direction:column}}
.difficulty-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:800px) and (min-width:561px){.difficulty-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.difficulty-grid{grid-template-columns:1fr}}