@font-face{font-family:system-mono;src:local("SFMono-Regular"),local("Consolas"),local("Liberation Mono")}
:root{color-scheme:light;--paper:#f4f1e9;--white:#fffdf7;--ink:#282d26;--muted:#65685e;--line:#d4d3c5;--orange:#ef6b3c;--green:#235d49;--yellow:#e5c46c;--mono:system-mono,monospace;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit;color:inherit}button,select,a,summary{touch-action:manipulation}button,a,select,textarea,input{outline-offset:4px}button:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--green)}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}a{color:inherit}button,select,textarea{border:1px solid var(--line);border-radius:3px;background:var(--white)}button{min-height:42px;padding:8px 14px;font-weight:600}button:hover{border-color:var(--ink)}.topbar{height:78px;padding:0 36px;display:flex;align-items:center;gap:34px;border-bottom:2px solid var(--ink)}.brand{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:29px;font-weight:900;text-decoration:none;letter-spacing:-2px}.brand-dot{color:var(--orange);margin-left:-8px}.tagline,.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:1.7px;font-weight:600}.tagline{color:var(--muted)}.account{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:13px}.account button{font-size:12px;min-height:34px;padding:6px 12px;background:transparent}.skip{position:fixed;top:-60px;left:12px;background:var(--orange);padding:12px;z-index:10}.skip:focus{top:8px}#notice:not(:empty){border-bottom:1px solid var(--line);padding:12px 36px;background:#fff1d3;font-size:14px}main{min-height:calc(100vh - 138px)}.boot{padding:60px;text-align:center;font-family:var(--mono);font-size:14px}.welcome{max-width:1120px;margin:0 auto;min-height:calc(100vh - 148px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding:70px 32px}.welcome h1{font-size:clamp(42px,5vw,65px);letter-spacing:-3px;line-height:1.06;margin:22px 0}.welcome h1 span{background:var(--yellow);box-shadow:6px 0 var(--yellow),-4px 0 var(--yellow)}.welcome p{font-size:17px;line-height:1.7;color:var(--muted);max-width:370px;margin-bottom:28px}.chip{display:inline-block;font:12px var(--mono);background:#e6e9df;border:1px solid #c2cbb7;padding:8px 10px;letter-spacing:.7px}.mountain{position:relative;flex-direction:column;min-height:340px;background-image:linear-gradient(#d8d8ca55 1px,transparent 1px),linear-gradient(90deg,#d8d8ca55 1px,transparent 1px);background-size:24px 24px;display:flex;align-items:center;justify-content:center}.mountain svg{width:100%;image-rendering:pixelated}.mountain-label{position:static;align-self:stretch;background:var(--paper);padding:12px 0;font:12px/1.7 var(--mono);letter-spacing:.5px}.signin-space{min-height:48px}.signin-note{display:block;font-size:12px;color:var(--muted);margin-top:14px}.desk{display:grid;grid-template-columns:310px minmax(0,1fr);max-width:1500px;margin:auto}.library{border-right:1px solid var(--line);align-self:start}.library-head{padding:26px 22px 20px;border-bottom:1px solid var(--line)}.library h1{font-size:23px;letter-spacing:-.6px;margin:0 0 5px}.count{font:12px var(--mono);color:var(--muted)}.progressbar{height:5px;background:#dedfd4;margin-top:16px}.progressbar span{display:block;height:100%;background:var(--green)}.filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:21px}.filters label{font:12px var(--mono);letter-spacing:.7px;display:grid;gap:5px;text-transform:uppercase}.filters select{font:12px var(--mono);letter-spacing:0;width:100%;padding:9px 4px;text-transform:none;min-height:38px}.filters .hint-filter{display:flex;align-items:center;gap:7px;grid-column:1/-1;font-size:12px;min-height:30px;text-transform:none;letter-spacing:0}.filters input[type="checkbox"]{accent-color:var(--green);width:16px;height:16px}.grade-guide{margin-top:10px;font-size:12px;color:var(--muted);line-height:1.6}.grade-guide summary{cursor:pointer;width:fit-content}.grade-guide p{margin:8px 0}.grade-table{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;font:12px var(--mono);margin:10px 0}.grade-table span{padding:5px;background:#e8e8dc}.list-meta{padding:13px 22px;background:#eaeadd;font:12px var(--mono);display:flex;justify-content:space-between;letter-spacing:.6px}.question-list{height:calc(100vh - 455px);min-height:230px;overflow:auto;scrollbar-width:thin}.question-row{display:grid;grid-template-columns:36px 1fr 22px;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid #ddded1;text-decoration:none;position:relative}.question-row:hover{background:#eaeade}.question-row[aria-current=true]{background:#e6e9db}.question-row[aria-current=true]:before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;background:var(--green)}.grade{font:bold 16px var(--mono);background:#dbe3cf;display:inline-flex;align-items:center;justify-content:center;min-width:35px;height:35px;border:1px solid #c2cbb7}.grade[data-level="2"]{background:#ede0b5;border-color:#dbcc9c}.grade[data-level="3"]{background:#f1cebd;border-color:#dfb6a4}.grade.estimated{border-style:dashed}.row-title{font:600 12px var(--mono)}.row-sub{font-size:12px;color:var(--muted);margin-top:6px;min-height:14px}.hints-dot{color:var(--green)}.row-status{font:16px var(--mono);text-align:center}.empty{font-size:13px;padding:24px;color:var(--muted)}.workspace{padding:34px 42px 48px;min-width:0}.problem-top{display:flex;align-items:center;gap:16px;margin-bottom:24px}.problem-top .grade{height:46px;min-width:46px;font-size:21px;box-shadow:3px 3px 0 #282d2620}.problem-top h2{font-size:24px;letter-spacing:-.7px;margin:0}.problem-top p{font-size:12px;color:var(--muted);margin:6px 0 0}.paper{border:1px solid var(--line);background:white;padding:26px;box-shadow:4px 4px 0 #dddccf;margin:0 0 26px}.paper-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed var(--line);padding-bottom:15px;margin-bottom:24px;font:12px var(--mono);letter-spacing:1px}.paper-head a{letter-spacing:0;font-size:12px;color:var(--muted);text-underline-offset:3px}.problem-image{display:block;width:100%;height:auto;max-height:none;margin-bottom:12px}.statement{font-family:Georgia,serif;font-size:18px;line-height:1.7;overflow-x:auto}.statement p{margin:0 0 14px}.statement mjx-container{display:inline-block;max-width:100%;vertical-align:middle}.statement mjx-container[jax="SVG"][display="true"]{display:block;text-align:center;margin:16px 0;overflow-x:auto}.statement svg{overflow:visible}.statement svg a{fill:currentColor}.statement li{margin:7px 0}.statement ol{padding-left:25px}.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.section-title{font:600 12px var(--mono);letter-spacing:1px;margin:0 0 12px}.section-caption{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 15px}.hint{border:1px solid var(--line);background:var(--white);margin-bottom:8px}.hint button{width:100%;text-align:left;display:flex;justify-content:space-between;border:0;background:transparent;border-radius:0;font:12px var(--mono);padding:12px}.hint button span{color:var(--muted)}.hint p{font-size:14px;line-height:1.75;margin:0;padding:2px 14px 16px}.hint-empty{border:1px dashed #b8baaa;padding:17px;font:12px/1.7 var(--mono);color:var(--muted);background:#edede3}.notes label{display:block;font-size:12px;font-weight:600;margin-bottom:7px}.notes select{width:100%;padding:10px;font-size:13px;margin-bottom:14px;min-height:42px}.notes textarea{display:block;width:100%;min-height:150px;resize:vertical;padding:12px;font-size:14px;line-height:1.7}.notes-bottom{margin-top:10px;display:flex;gap:10px;align-items:center;justify-content:space-between}.primary{background:var(--green);color:white;border-color:var(--green);box-shadow:2px 2px 0 var(--ink);font-size:12px}.save-state{font:12px var(--mono);color:var(--muted)}.back{display:none;margin-bottom:20px;background:transparent;font:12px var(--mono)}footer{min-height:60px;flex-wrap:wrap;border-top:1px solid var(--line);padding:19px 36px;display:flex;justify-content:space-between;gap:16px;font:12px var(--mono);color:var(--muted);line-height:1.8}footer a{text-decoration:none}footer a:hover{text-decoration:underline}.hidden{display:none!important}
@media(min-width:1200px){.workspace{padding:38px 54px}.paper{padding:30px 36px}}
@media(max-width:1000px){.desk{grid-template-columns:270px minmax(0,1fr)}.workspace{padding:26px}.lower-grid{grid-template-columns:1fr}.tagline{display:none}.welcome{gap:20px}.paper{padding:20px}}
@media(max-width:650px){.topbar{height:67px;padding:0 20px}.brand{font-size:26px}.account{font-size:12px;gap:8px}.welcome{display:flex;flex-direction:column;align-items:stretch;gap:15px;padding:42px 24px}.welcome h1{font-size:45px}.welcome p{font-size:15px;margin-bottom:22px}.mountain{min-height:0;max-height:none;overflow:visible;order:-1}.mountain svg{height:auto;max-height:220px}.desk{display:block}.library{border-right:0}.question-list{height:auto;min-height:0;max-height:none}.library-head{padding:25px 22px}.filters{grid-template-columns:repeat(3,1fr)}.filters .hint-filter{grid-column:1/-1}.workspace{padding:24px 20px}.desk:not(.detail-open) .workspace{display:none}.desk.detail-open .library{display:none}.back{display:inline-block}.problem-top h2{font-size:22px}.paper{padding:18px 12px;box-shadow:3px 3px #dddccf}.paper-head{font-size:12px;gap:8px}.paper-head a{font-size:12px}.statement{font-size:16px}.lower-grid{gap:25px}footer{padding:18px 20px;flex-wrap:wrap;font-size:12px}#notice:not(:empty){padding:12px 20px}.question-row{padding:17px 22px}.grade-guide{max-width:430px}}
@media(prefers-reduced-motion:no-preference){button,a{transition:background-color .12s,border-color .12s}}
@media print{.topbar,.library,.back,.lower-grid,footer,#notice{display:none}.desk{display:block}.workspace{padding:0}.paper{box-shadow:none;border:0}.desk:not(.detail-open) .workspace{display:block}}

@media(max-width:650px){.statement:has(.problem-image){overflow-x:auto;overscroll-behavior-x:contain}.problem-image{min-width:560px}.paper:has(.problem-image) .paper-head:after{content:"Swipe to read →";font-size:12px;letter-spacing:0;color:var(--muted)}.paper:has(.problem-image) .paper-head{flex-wrap:wrap}}

/* Keep essential controls and inactive hint labels readable. */
button, select, textarea { border-color: #888c7e; }
.hint button:disabled { opacity: 1; color: var(--muted); background: #efefe6; cursor: not-allowed; }
footer a { max-width: 100%; overflow-wrap: anywhere; }
.paper-head { flex-wrap: wrap; gap: 10px; }
.paper-head > span, .paper-head a { white-space: nowrap; }
.account button { white-space: nowrap; flex-shrink: 0; }

/* Small, native-popover menus; native selects remain the form state. */
.select-field { display: grid; gap: 5px; min-width: 0; }
.select-label { font: 12px var(--mono); letter-spacing: .7px; text-transform: uppercase; }
.select-trigger { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 9px 10px; border-radius: 6px; background: var(--white); box-shadow: 0 2px 0 #d8d8cc; font: 13px/1.4 var(--mono); text-align: left; }
.select-trigger .select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger svg { flex-shrink: 0; color: var(--muted); }
.select-trigger[aria-expanded="true"] { border-color: var(--green); background: #f9faf3; }
.select-trigger:disabled { cursor: wait; }
.select-popover { position: fixed; margin: 0; padding: 5px; border: 1px solid #a9ad9f; border-radius: 9px; color: var(--ink); background: var(--white); box-shadow: 0 3px 0 #caccc1, 0 10px 28px #282d2624; overflow: auto; }
.select-search { display: block; width: 100%; min-height: 40px; padding: 9px 10px; margin-bottom: 5px; border: 1px solid #888c7e; border-radius: 5px; background: white; font-size: 14px; }
.select-options { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 2px; }
.select-options:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 4px; }
.select-option { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 8px 10px; border-radius: 4px; font: 13px/1.5 var(--mono); cursor: pointer; }
.select-option:hover, .select-option.is-active { background: #e7eddd; }
.select-option[aria-selected="true"] { font-weight: 700; }
.select-check { width: 15px; flex-shrink: 0; color: var(--green); }
.select-empty { padding: 10px; margin: 0; font-size: 13px; color: var(--muted); }
.notes .select-trigger { margin-bottom: 14px; font: 14px/1.5 ui-sans-serif, system-ui, sans-serif; }
.select-popover[hidden], .select-options[hidden], .select-empty[hidden] { display: none; }
.filters .select-field:has(#status) { grid-column: 1 / -1; }
@media (max-width: 650px) { .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Focused dialogs: a deliberate reveal, and a quick visual introduction. */
.app-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; border: 1px solid #888c7e; border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 #282d2640, 0 20px 80px #0003; overflow: auto; }
.app-dialog::backdrop { background: #20261fd1; }
.app-dialog h2 { margin: 16px 0 12px; font-size: 28px; line-height: 1.15; letter-spacing: -.8px; }
.app-dialog p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.dialog-symbol { display: grid; place-items: center; width: 42px; height: 42px; background: var(--yellow); border: 1px solid #a58e48; font: bold 26px var(--mono); box-shadow: 3px 3px 0 #d4cfb8; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.hint-confirm .dialog-actions button { flex: 1; white-space: nowrap; }
.introduction { width: min(760px, calc(100vw - 32px)); }
.intro-heading h2 { font-size: 36px; margin-top: 18px; }
.intro-heading p { margin: 8px 0 24px; }
.intro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.intro-grid section { min-width: 0; background: var(--white); padding: 18px; border: 1px solid var(--line); box-shadow: 3px 3px 0 #dfdfd1; }
.intro-grid h3 { font-size: 16px; margin: 16px 0 8px; letter-spacing: -.2px; }
.intro-grid p { font-size: 13px; margin: 0; }
.intro-art { height: 76px; display: flex; align-items: center; gap: 10px; font: bold 13px var(--mono); }
.intro-bank { position: relative; padding-left: 5px; }
.intro-bank span { padding: 12px 8px; background: #e6e9db; border: 1px solid #a6b396; transform: rotate(-6deg); }
.intro-bank span:nth-child(2) { transform: rotate(4deg); }
.intro-bank b { font: bold 28px var(--mono); color: var(--green); }
.intro-grades { align-items: flex-end; gap: 8px; }
.intro-grades span { display: grid; place-items: center; width: 60px; height: 36px; background: #dbe3cf; border: 1px solid #a6b396; }
.intro-grades span:nth-child(2) { height: 54px; background: #ede0b5; border-color: #b7a66e; }
.intro-grades span:nth-child(3) { height: 72px; background: #f1cebd; border-color: #bc947f; }
.intro-hints span { display: grid; place-items: center; min-width: 48px; height: 48px; border: 1px dashed #888c7e; background: #ededdf; }
.intro-hints span:nth-child(2) { background: #ede0b5; }
.intro-hints span:nth-child(3) { background: #f1cebd; }
.intro-notes { flex-wrap: wrap; gap: 6px; align-content: center; }
.intro-notes span { padding: 6px 8px; font-size: 12px; border: 1px solid #a6b396; background: #e6e9db; }
.intro-notes span:last-child { background: var(--green); color: white; }
.attempt-badge { display: inline-block; padding: 7px 10px; margin: 0 0 18px; font: 12px var(--mono); background: #e8e8dc; border: 1px solid #aaae9f; }
.attempt-badge.solved { color: white; background: var(--green); border-color: var(--green); }
.attempt-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; align-items: center; }
.quiet-button { background: transparent; border-color: transparent; font-size: 13px; color: var(--muted); }
.notes .save-state { display: block; min-height: 18px; margin-top: 12px; }
.notes .hint-record { margin-top: 10px; }
@media(max-width:650px) {
  .app-dialog { padding: 20px; }
  .intro-heading h2 { font-size: 30px; }
  .intro-grid { grid-template-columns: 1fr; gap: 14px; }
  .intro-grid section { padding: 16px; }
  .intro-art { height: 54px; }
  .intro-grades span:nth-child(3) { height: 54px; }
  .intro-grades span:nth-child(2) { height: 44px; }
  .intro-heading p { margin-bottom: 18px; }
}
.introduction { width: min(1040px, calc(100vw - 32px)); overflow: hidden; }
.introduction form { display: flex; flex-direction: column; max-height: calc(100dvh - 90px); }
.intro-heading, .introduction .dialog-actions { flex-shrink: 0; }
#intro-title:focus { outline: none; }
.intro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-y: auto; padding: 0 4px 5px 0; }
.intro-bank { gap: 5px; }
.intro-bank span { font-size: 12px; padding: 10px 5px; }
.intro-bank b { font-size: 24px; }
.intro-grades span { width: 50px; }
@media(max-width:900px) { .intro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:650px) {
  .introduction form { max-height: calc(100dvh - 74px); }
  .intro-grid { grid-template-columns: 1fr; }
  .introduction .dialog-actions { margin-top: 18px; }
  .introduction .dialog-actions button { width: 100%; }
}

.intro-preference { display: flex; align-items: center; gap: 9px; margin-right: auto; font-size: 13px; cursor: pointer; min-height: 42px; }
.intro-preference input { width: 17px; height: 17px; accent-color: var(--green); }
#intro-error { flex-shrink: 0; margin: 10px 0 0; color: #8b3022; }
#intro-error:empty { display: none; }