:root { --prime-blue:#006b99; --prime-ink:#102532; --prime-sky:#dff3fa; --prime-yellow:#ffd84a; --prime-lime:#cbe942; --prime-red:#d64550; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { min-height:100%; }
body { margin:0; color:var(--prime-ink); background:#edf5f9; font-family:Arial,Helvetica,sans-serif; }
button,input { font:inherit; }
.app { min-height:100vh; display:grid; grid-template-rows:auto minmax(0,1fr); }
.topbar { min-height:72px; display:grid; grid-template-columns:minmax(260px,1fr) auto; align-items:center; gap:16px; padding:11px 18px; color:#fff; background:#071018; }
.brand { min-width:0; display:flex; align-items:center; gap:14px; }
.brand-logo { min-height:44px; display:inline-flex; align-items:center; border-radius:6px; }
.brand-logo img { width:142px; height:auto; display:block; }
.brand h1 { margin:0; color:#fff; font-size:clamp(1.35rem,2vw,2rem); line-height:1.05; }
.top-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.icon-button { width:48px; min-width:48px; min-height:48px; display:inline-grid; place-items:center; padding:0; border:2px solid #263d51; border-radius:8px; color:#fff; background:#122436; cursor:pointer; }
.icon-button:hover,.icon-button:focus-visible { border-color:#8fd8f3; color:#06111a; background:#149bd7; }
.icon { width:24px; height:24px; display:block; pointer-events:none; }
.home-button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 14px; border:2px solid #263d51; border-radius:8px; color:#fff; background:#122436; font-weight:800; text-decoration:none; }
.home-button:hover,.home-button:focus-visible { border-color:#8fd8f3; color:#06111a; background:#149bd7; }
.prime-tool { display:grid; gap:14px; padding:14px clamp(12px,2vw,24px) 18px; color:var(--prime-ink); }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.prime-toolbar { min-height:64px; display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:-14px calc(-1 * clamp(12px,2vw,24px)) 0; padding:8px 14px; border:0; border-bottom:1px solid #d8e2ea; border-radius:0; background:#fff; box-shadow:none; }
.prime-toolbar fieldset { min-width:0; margin:0; padding:0; border:0; }
.prime-toolbar legend { margin:0 0 4px; color:#526c7a; font-size:.78rem; font-weight:800; }
.prime-mode-control,.prime-range-control { display:flex; gap:4px; }
.prime-mode-control label,.prime-range-control label { position:relative; }
.prime-mode-control input,.prime-range-control input { position:absolute; opacity:0; }
.prime-mode-control span,.prime-range-control span,.prime-toolbar button,.prime-disclosure>summary { display:inline-flex; min-height:48px; align-items:center; justify-content:center; box-sizing:border-box; padding:0 15px; border:1px solid #b9c9d5; border-radius:8px; background:#fff; color:var(--prime-ink); font:inherit; font-weight:800; cursor:pointer; }
.prime-mode-control input:checked+span,.prime-range-control input:checked+span,.prime-toolbar button[aria-pressed="true"] { border-color:var(--prime-blue); background:var(--prime-sky); color:#004d70; }
.prime-mode-control input:focus-visible+span,.prime-range-control input:focus-visible+span,.prime-toolbar button:focus-visible,.prime-disclosure>summary:focus-visible,.prime-tool a:focus-visible,.prime-tool input:focus-visible { outline:3px solid var(--prime-yellow); outline-offset:2px; }
.prime-disclosure { position:relative; }
.prime-disclosure>summary { list-style:none; }
.prime-disclosure>summary::-webkit-details-marker { display:none; }
.prime-disclosure>summary::after { content:"▾"; margin-left:7px; }
.prime-disclosure[open]>summary { border-color:var(--prime-blue); background:var(--prime-sky); }
.prime-disclosure-panel { position:absolute; z-index:20; top:calc(100% + 6px); left:0; width:min(330px,calc(100vw - 34px)); padding:14px; border:1px solid #9cb6c2; border-radius:12px; background:#fff; box-shadow:0 12px 30px rgba(16,37,50,.2); }
.prime-disclosure-panel fieldset { display:grid; gap:8px; }
.prime-disclosure-panel label { display:flex; align-items:center; gap:8px; min-height:38px; font-weight:700; }
.prime-disclosure-actions { display:flex; gap:8px; margin-top:10px; }
.prime-number-entry { margin-top:10px; }
.prime-number-entry input,.prime-factor-inputs input { width:84px; min-height:44px; box-sizing:border-box; padding:7px 9px; border:2px solid #8aa5b1; border-radius:8px; font:inherit; font-weight:800; }
.prime-small-action { margin-top:8px; }
.prime-toolbar-actions { display:flex; gap:6px; margin-left:auto; }
.prime-toolbar .prime-primary { border-color:var(--prime-blue); background:var(--prime-blue); color:#fff; }
.prime-task-heading { display:block; }
.prime-task-heading h2 { margin:0; font-size:clamp(1.25rem,2.1vw,1.8rem); line-height:1.15; }
.prime-workspace { min-height:420px; border:1px solid #bfd3dc; border-radius:18px; background:#f7fbfd; padding:14px; overflow:hidden; }
.prime-definition-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; height:100%; }
.prime-definition-card { display:grid; grid-template-rows:auto minmax(180px,1fr) auto auto auto; gap:9px; min-width:0; padding:14px; border:1px solid #bfd3dc; border-radius:14px; background:#fff; }
.prime-definition-card header { display:flex; align-items:center; gap:10px; color:#526c7a; font-weight:800; }
.prime-number-badge { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:12px; background:var(--prime-yellow); color:var(--prime-ink); font-size:1.45rem; font-weight:900; }
.prime-array-host { display:grid; grid-template-columns:repeat(auto-fit,minmax(116px,1fr)); align-items:stretch; justify-items:stretch; gap:8px; min-height:170px; }
.prime-array-model { display:grid; place-items:stretch; min-width:0; min-height:0; width:100%; height:100%; overflow:hidden; }
.prime-array-host .question-visual { display:grid; grid-template-rows:minmax(0,1fr); min-height:0; width:100%; height:100%; max-width:none; margin:0; overflow:hidden; }
.prime-array-host .diagram-frame,.prime-array-host svg { width:100%; height:100%; min-width:0; min-height:0; }
.prime-array-host figcaption,.prime-array-host .model-number-sentence { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; white-space:nowrap; }
.prime-pair-list { min-height:1.5em; margin:0; text-align:center; font-size:1.05rem; font-weight:900; }
.prime-build-pair,.prime-tree-actions button,.prime-mark-controls button { min-height:44px; padding:8px 13px; border:2px solid var(--prime-blue); border-radius:9px; background:#fff; color:var(--prime-blue); font:inherit; font-weight:900; cursor:pointer; }
.prime-build-pair:disabled { opacity:.55; cursor:default; }
.prime-classification { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; margin:0; padding:10px; border:1px solid #d4e1e7; border-radius:10px; }
.prime-classification legend { padding:0 5px; font-weight:900; }
.prime-classification label { min-height:38px; display:flex; align-items:center; gap:5px; font-weight:800; text-transform:capitalize; }
.prime-grid-layout { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:10px 16px; height:100%; }
.prime-search-grid-layout { grid-template-rows:minmax(0,1fr); }
.prime-mark-controls { display:flex; flex-direction:column; gap:8px; align-self:start; }
.prime-mark-controls button[aria-pressed="true"] { background:var(--prime-sky); box-shadow:0 0 0 3px var(--prime-yellow); }
.prime-mark-controls button[data-grid-action="prime"] { border-color:#7b5600; background:var(--prime-yellow); color:var(--prime-ink); }
.prime-mark-controls button[data-grid-action="composite"] { border-color:#526c7a; background:#dbe8ee; color:var(--prime-ink); }
.prime-mark-controls button[data-sieve-action="base"] { border-color:#7b5600; background:var(--prime-yellow); color:var(--prime-ink); }
.prime-mark-controls button[data-sieve-action="composite"] { border-color:#526c7a; background:#dbe8ee; color:var(--prime-ink); }
.prime-mark-controls button[data-show-primes][aria-pressed="true"] { border-color:#7b5600; background:var(--prime-yellow); color:var(--prime-ink); }
.prime-mark-controls button:disabled { opacity:.55; cursor:default; }
.prime-grid-host { grid-column:2; grid-row:1 / span 2; display:grid; place-items:center; min-width:0; min-height:370px; }
.prime-search-grid-layout .prime-grid-host { grid-row:1; }
.prime-grid-host .question-visual { width:min(100%,680px); height:100%; max-height:520px; display:grid; grid-template-rows:minmax(0,1fr); margin:0; overflow:hidden; }
.prime-grid-host figcaption,.prime-grid-host .model-number-sentence { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; white-space:nowrap; }
.prime-grid-host .diagram-frame,.prime-grid-host svg { width:100%; height:100%; min-height:0; max-height:520px; }
.prime-stage-status { align-self:start; margin:4px 0; color:#526c7a; font-weight:900; }
.prime-grid-key { grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:center; gap:9px 18px; font-weight:800; }
.prime-grid-key b { display:inline-grid; place-items:center; width:28px; height:28px; margin-right:4px; border:1px solid #526c7a; border-radius:5px; }
.key-prime,.key-base { background:var(--prime-yellow); }.key-composite { background:#dbe8ee; }
.prime-tree-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr); gap:16px; min-height:390px; }
.prime-tree-host { display:grid; place-items:center; min-width:0; border-radius:13px; background:#fff; }
.prime-tree-host .question-visual { width:100%; height:100%; display:grid; grid-template-rows:minmax(0,1fr); margin:0; overflow:hidden; }
.prime-tree-host figcaption,.prime-tree-host .model-number-sentence { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; white-space:nowrap; }
.prime-tree-host .diagram-frame,.prime-tree-host svg { width:100%; height:100%; min-height:0; max-height:510px; }
.prime-tree-controls { align-self:center; padding:16px; border:1px solid #bfd3dc; border-radius:13px; background:#fff; }
.prime-tree-selection { margin-top:0; color:var(--prime-blue); font-size:1.08rem; font-weight:900; }
.prime-factor-inputs { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:8px; }
.prime-factor-inputs label { display:grid; gap:4px; font-weight:800; }
.prime-factor-inputs input { width:100%; }
.prime-factor-inputs span { padding-bottom:12px; font-size:1.3rem; font-weight:900; }
.prime-tree-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.prime-factorisation { padding:11px; border-radius:9px; background:#fff8d6; text-align:center; font-size:1.15rem; font-weight:900; }
.prime-factorisation span { display:block; }
.prime-factorisation span + span { margin-top:6px; }
.prime-hint,.prime-feedback { margin:0; min-height:1.4em; padding:10px 13px; border-radius:9px; font-weight:800; }
.prime-hint { border-left:5px solid var(--prime-yellow); background:#fff8d6; }
.prime-feedback:empty { padding:0; min-height:0; }
.prime-feedback[data-tone="success"] { background:#e6f6dc; color:#245510; }.prime-feedback[data-tone="error"] { background:#ffe8ea; color:#81202a; }.prime-feedback[data-tone="info"] { background:var(--prime-sky); color:#004d70; }
.prime-related { display:flex; flex-wrap:wrap; justify-content:center; gap:7px 14px; font-weight:800; }
.prime-related a { color:var(--prime-blue); }
.prime-instructions { width:min(680px,calc(100vw - 30px)); border:0; border-radius:16px; padding:24px; color:var(--prime-ink); box-shadow:0 18px 50px rgba(16,37,50,.3); }
.prime-instructions::backdrop { background:rgba(16,37,50,.62); }
.prime-dialog-close { float:right; width:44px; height:44px; border:0; border-radius:10px; background:#e9f3f7; font-size:1.6rem; cursor:pointer; }
.prime-instructions li+li { margin-top:8px; }

@media (max-width:760px) {
  .topbar { grid-template-columns:minmax(0,1fr) auto; gap:8px; padding-inline:8px; }
  .brand { gap:8px; }
  .brand-logo img { width:88px; }
  .brand h1 { font-size:1.1rem; }
  .top-actions { gap:4px; }
  .top-actions #annotationToggleButton,.top-actions #printButton,.top-actions #classroomToolsButton,.top-actions .home-button,.top-actions [aria-label="Annotate this page"],.top-actions [aria-label="Classroom tools"] { display:none; }
  .prime-toolbar { align-items:stretch; }
  .prime-mode-control { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .prime-mode-control span { width:100%; }
  .prime-range-control { flex:1; }
  .prime-toolbar-actions { width:100%; margin-left:0; }
  .prime-toolbar-actions button { flex:1; }
  .prime-workspace { min-height:0; padding:10px; overflow:visible; }
  .prime-definition-grid,.prime-tree-layout { grid-template-columns:1fr; }
  .prime-grid-layout { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .prime-mark-controls { flex-direction:row; flex-wrap:wrap; }
  .prime-grid-host { grid-column:1; grid-row:2; min-height:300px; }
  .prime-grid-key { grid-column:1; }
  .prime-tree-host { min-height:300px; }
  .prime-disclosure-panel { position:fixed; top:auto; left:12px; right:12px; bottom:12px; width:auto; }
}

@media (min-width:761px) and (max-height:800px) {
  .prime-tool { height:calc(100vh - 72px); grid-template-rows:auto auto minmax(0,1fr) auto auto; overflow:hidden; padding-block:10px; }
  .prime-toolbar { margin-top:-10px; }
  .prime-workspace { min-height:0; }
  .prime-definition-card { grid-template-rows:auto minmax(105px,1fr) auto auto auto; padding:10px; }
  .prime-array-host { min-height:105px; overflow:hidden; }
  .prime-array-model,.prime-array-host .question-visual,.prime-array-host .diagram-frame,.prime-array-host svg { max-height:150px; }
  .prime-grid-host { min-height:0; }
  .prime-tree-layout { min-height:0; height:100%; }
  .prime-related { font-size:.78rem; }
}

@media (prefers-reduced-motion:reduce) { .prime-tool * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

@media print {
  @page { size:A4 landscape; margin:9mm; }
  .prime-toolbar,.prime-related,.prime-instructions,.prime-hint,.top-actions { display:none!important; }
  .prime-tool { display:block; padding:0; }
  .prime-task-heading { margin-bottom:5mm; }
  .prime-workspace { min-height:0; max-height:145mm; padding:4mm; border-color:#78909c; overflow:hidden; break-inside:avoid; }
  .prime-definition-card { grid-template-rows:auto 65mm auto auto; padding:3mm; }
  .prime-build-pair,.prime-tree-actions,.prime-factor-inputs { display:none!important; }
  .prime-grid-host { min-height:120mm; max-height:130mm; }
  .prime-grid-host svg,.prime-tree-host svg { max-height:125mm; }
  .prime-feedback { margin-top:3mm; font-size:10pt; }
  .prime-tree-layout { min-height:120mm; }
}