@font-face{font-family:'Brewster Technical';src:url('/fonts/BrewsterTechnical-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Brewster Technical Mono';src:url('/fonts/BrewsterTechnicalMono-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:light;--gray:#c6c6c6;--light:#e8e8e8;--white:#fff;--ink:#101010;--rule:#666;--blue:#0000a8;--font:'Brewster Technical',sans-serif;--mono:'Brewster Technical Mono',monospace}
*{box-sizing:border-box}body{margin:0;background:var(--gray);color:var(--ink);font:20px/1.5 var(--font);font-synthesis:none}a{color:var(--blue)}button,input{font:inherit;border-radius:0}button,a{touch-action:manipulation}:focus-visible{outline:2px solid var(--blue);outline-offset:4px}::selection{background:var(--blue);color:white}[hidden]{display:none!important}
.skip{position:absolute;top:-100px;padding:12px;background:white;z-index:2}.skip:focus{top:0}.desktop{max-width:1400px;min-height:calc(100svh - 32px);margin:16px auto;border:1px solid var(--rule);display:flex;flex-direction:column;background:#f2f2f2;width:calc(100% - 32px)}.titlebar{display:flex;align-items:center;gap:28px;background:var(--blue);color:white;padding:9px 14px;font-size:17px}.brand{color:white;text-decoration:none;font-size:23px}.titlebar :focus-visible{outline-color:white}.state{margin-left:auto;font:13px/1.5 var(--mono)}.menubar{display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--rule);padding:5px 7px;background:var(--gray);font-size:16px}.selected{padding:4px 14px;background:white;border:1px solid var(--rule)}.menubar>span:last-child{color:#444}main{flex:1;padding:clamp(18px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:24px}.pane{border:1px solid var(--rule);background:white;min-width:0}.pane-title{display:flex;justify-content:space-between;gap:16px;background:var(--blue);color:white;padding:6px 12px;font:14px/1.5 var(--mono)}.pane-title h2{font:inherit;margin:0}.hero-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr)}.introduction{padding:clamp(26px,4vw,54px)}.kicker{font:13px/1.5 var(--mono);color:#666;margin:0 0 20px}h1{font:400 clamp(45px,5.4vw,76px)/1.05 var(--font);margin:0 0 24px}.introduction>p:last-child{margin:0;font-size:22px}.drawing{display:grid;place-items:center;min-height:340px;border-left:1px solid #9a9a9a;color:var(--blue);background-color:var(--light);background-image:linear-gradient(#d3d3d3 1px,transparent 1px),linear-gradient(90deg,#d3d3d3 1px,transparent 1px);background-size:24px 24px;padding:30px}.drawing svg{display:block;width:100%;max-width:290px;height:auto}.question-body{padding:28px clamp(26px,4vw,54px)}label{display:block;font-size:28px;margin-bottom:12px}.input-row{display:flex;gap:12px}input{min-width:0;flex:1;width:100%;background:#fff;color:var(--ink);border:1px solid var(--rule);padding:10px 12px;box-shadow:inset 1px 1px #aaa}button{display:flex;gap:32px;align-items:center;justify-content:space-between;padding:10px 20px;min-height:50px;border:1px solid var(--blue);background:var(--blue);color:white;cursor:pointer}button:hover{background:#000078}button:disabled{opacity:.65;cursor:wait}#draw-result{font-size:32px;margin:0}#draw-result.error{font-size:19px;margin-top:16px;color:#a00000}footer{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule);background:var(--gray);font:12px/1.5 var(--mono)}footer span{padding:7px 12px;border-right:1px solid var(--rule)}footer .footer-right{margin-left:auto;border:0}
@media(max-width:650px){.desktop{width:calc(100% - 16px);margin:8px;min-height:calc(100svh - 16px)}.titlebar{gap:12px;flex-wrap:wrap;padding:8px 10px}.brand{font-size:21px}.titlebar>span:not(.state){display:none}.state{font-size:10px}.menubar{font-size:14px;gap:12px}main{padding:16px;gap:16px}.pane-title{font-size:11px}.hero-grid{grid-template-columns:1fr}.introduction{padding:26px 22px}h1{font-size:clamp(40px,10vw,60px)}.introduction>p:last-child{font-size:18px}.drawing{display:none}.question-body{padding:24px 22px}label{font-size:25px}.input-row{gap:8px;flex-wrap:wrap}.input-row input{flex-basis:100%}.input-row button{width:100%}footer{font-size:10px}footer span{padding:6px 8px}.footer-right{display:none}}