@font-face { font-family:Quicksand; font-weight:400; font-display:swap; src:url(/fonts/Quicksand_400Regular.ttf) format('truetype'); } @font-face { font-family:Quicksand; font-weight:700; font-display:swap; src:url(/fonts/Quicksand_700Bold.ttf) format('truetype'); } :root { --ink:#000000; --paper:#FFFFFF; --ground:#EDEDEA; --mark:#C2C2B8; --accent:#C0511D; --muted:#6B635A; } * { box-sizing:border-box; } html,body { margin:0; padding:0; } /* The gradient comes from the tint class — see tintsCSS in ground-tiles.js. Only the fallback colour lives here, for the instant before it applies. */ body { background:var(--ground); color:var(--ink); font:16px/1.55 Quicksand, 'URW Gothic', 'Century Gothic', sans-serif; } main { max-width:44rem; margin:0 auto; padding:1.2rem 1.2rem 4rem; } /* The app's Panel: white paper, a hard contour, square corners, no shadow. src/ui.tsx draws exactly this and the contour does all the work. */ .panel { background:var(--paper); border:2.5px solid var(--ink); padding:1.4rem 1.5rem; margin:1.2rem 0; } .panel.raised { box-shadow:6px 6px 0 var(--ink); } /* A heading, underlined — not a box. Boxed, the section labels read as buttons that did nothing (Wil, 2026-09-26). */ .tab { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border-bottom:2px solid var(--ink); padding:0 0 .2rem; margin-bottom:.9rem; } h1 { font-size:1.9rem; line-height:1.1; margin:0 0 .5rem; font-weight:700; } h2 { font-size:1.15rem; margin:1.8rem 0 .5rem; font-weight:700; } .lede { font-size:1.15rem; line-height:1.5; margin:.2rem 0 0; } p { margin:.7rem 0; } ul { padding-left:1.15rem; } li { margin:.4rem 0; } a { color:var(--ink); } .muted { color:var(--muted); font-size:.9rem; } /* Counts, in ruled boxes — the app states its numbers this way rather than in a sentence, because a number is the one thing worth being able to glance at. */ /* Text left, the pencil right, stacked on a phone — the drawing is the argument the heading makes, so it sits beside it rather than under. */ .hero { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; } .hero > div:first-child { flex:1 1 18rem; } .hero .anim { flex:0 1 15rem; max-width:15rem; } .stats { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem; } .stat { border:2px solid var(--ink); padding:.4rem .7rem; font-weight:700; font-size:.92rem; } .stat span { display:block; font-weight:400; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .btn { display:inline-block; border:2.5px solid var(--ink); background:var(--paper); color:var(--ink); text-decoration:none; font-weight:700; font-size:.85rem; letter-spacing:.09em; text-transform:uppercase; padding:.8rem 1.3rem; } .btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; } /* The 22 subject icons, in a ruled row — the app's own drawings, extracted rather than redrawn. See scripts/site-icons.js. */ .subjects { display:grid; grid-template-columns:repeat(auto-fill, minmax(4.6rem,1fr)); gap:0; margin-top:1.1rem; border:2px solid var(--ink); } .subj { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.75rem .3rem; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); } .subj span { font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); text-align:center; } /* * A SHEET, SCALED TO FIT, WITH ITS OWN MARGIN AROUND IT. * * The sheets bring their own screen styling: lib/sheet.js gives every one a * body padding of 0.4in on a #ddd background and a page fixed at 8.5in wide, * so a sheet in a browser is a real 816px page floating on grey. A * fixed-width page in a narrower frame does not reflow, it overflows — and * the body padding offsets it again. So the frame is the width of the BODY, * 8.5in plus both paddings, and the whole thing scales together. * * It is also one page tall and SCROLLS, because 225 of the 292 free sheets * run to three pages or more and one runs to twelve. * * The factor cannot be pure CSS — container width over 892.8px, and CSS * cannot divide a length by a length. Script sets it, a ResizeObserver keeps * it, and the default is sized for a typical column so that with no * JavaScript the preview is the wrong size rather than cropped. */ .paper { position:relative; width:100%; aspect-ratio:892.8/1132.8; border:2px solid var(--ink); background:#ddd; overflow:hidden; } .paper iframe { position:absolute; top:0; left:0; width:892.8px; height:1132.8px; border:0; transform-origin:top left; transform:scale(var(--k, .38)); } /* * The app's Row: a number or an icon, a title, a subtitle, and an arrow that * is telling the truth about going somewhere. src/ui.tsx draws this, and the * whole free section is built out of it. */ .rows { display:block; } .row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.2rem .8rem; padding:.85rem .2rem; border-top:1px solid var(--ink); text-decoration:none; color:var(--ink); } .row:first-child { border-top:0; } .row b { grid-column:2; } .row .muted { grid-column:2; font-size:.86rem; } .row .rowicon, .row .rownum { grid-row:1 / span 2; grid-column:1; } .row .rownum { font-weight:700; font-size:.9rem; min-width:1.6rem; } .row .arrow { grid-row:1 / span 2; grid-column:3; font-weight:700; } .row:hover { background:var(--ground); } /* Visually hidden, still read aloud — for the "opens in a new tab" that a sighted reader gets from the arrow. */ .vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* The amount is the label, the ages are the buttons — see ageTable. Chips are square and bordered like every other control here; a number is a bigger target and a shorter read than two words of link text. */ .pick { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-top:.9rem; } .pick > span { font-weight:700; font-size:.92rem; min-width:7.2rem; } .chips { display:flex; gap:.35rem; flex-wrap:wrap; } .age { display:inline-block; min-width:2.1rem; text-align:center; padding:.35rem .4rem; border:2px solid var(--ink); background:var(--paper); color:var(--ink); text-decoration:none; font-weight:700; font-size:.95rem; } .age:hover { background:var(--ink); color:var(--paper); } /* * NOTHING UNTIL SOMEBODY ASKS. The homepage opened on a week for a * nine-year-old, which was a page of real worksheets and also an answer to a * question nobody had put — and 125KB of iframe fetched on every visit for * it. Hidden until an age is chosen, and the frame's src is about:blank * until then, so the bundle is only fetched when it is wanted. * * IT ARRIVES RATHER THAN APPEARING. A block of that size snapping into * existence shoves the page down under the reader's hands; a short rise and * fade says where it came from. The hidden attribute comes off first and the * animation runs on the next frame — a display change and a transition in * the same tick would simply not animate. */ .picked { margin-top:1.2rem; padding-top:1.1rem; border-top:2px solid var(--ink); } .picked[hidden] { display:none; } .picked .paper { margin-top:.9rem; } .picked p { margin:.4rem 0; } .picked [hidden] { display:none; } .picked.coming { animation:pickIn .55s cubic-bezier(.22,.61,.36,1) both; } @keyframes pickIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce) { .picked.coming { animation:none; } } /* A grid of pages, each showing the real file rather than describing it — the same argument the sheet pages make, and here it is not even a screenshot. Lazy and click-through-proof so eight frames cost nothing. */ .cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:1rem; margin:1.2rem 0; } .card { display:block; background:var(--paper); border:2.5px solid var(--ink); padding:.9rem; text-decoration:none; color:var(--ink); } .card b { display:block; margin:.7rem 0 .2rem; } .card .thumb { display:block; position:relative; width:100%; aspect-ratio:8.5/11; border:1px solid var(--ink); overflow:hidden; background:#fff; } .card .thumb iframe { width:100%; height:100%; border:0; display:block; pointer-events:none; } /* The only form on the site — see make-namer.js. Inputs get the same hard contour as every button, because a rounded field would be the one control here from a different design. */ .form { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; margin-top:1rem; } .form label { display:flex; gap:.45rem; align-items:center; font-weight:700; font-size:.92rem; } .form input[type=text], .form input[type=number] { font:inherit; font-weight:400; padding:.45rem .5rem; border:2px solid var(--ink); background:var(--paper); color:var(--ink); border-radius:0; } .form input[type=text] { width:16rem; } .form input[type=number] { width:4.2rem; } .radios { display:flex; gap:.9rem; } .radios label { font-weight:400; } /* Script decides which of the two panels is real. */ .js-only { display:none; } .js .js-only { display:block; } .js .no-js { display:none; } .more { display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.92rem; margin-top:.8rem; } /* * THE HEADER STANDS ON PAPER, because it is the only thing on any page that * does not. Every other element is a panel; the wordmark was bare text over * a ruled or dotted pattern, and no ink colour fixes that — the pattern is * behind the letters, not around them. * * This was tried once, reverted because it changed more than the header, and * asked for again. So this time it is only the header: no hover invert, no * boxed footer, nothing else moved. */ /* * THE BUCKET IS A SIBLING OF THE PLATE, NOT INSIDE IT — Wil's ask. * * It reads better as its own thing and it is more honest: the plate is the * imprint, and a control that repaints the desk is not part of a wordmark. * They share a row because the header is the only furniture on every page, * and each keeps its own paper so both stay readable over a pattern. */ .top { display:flex; align-items:center; gap:.5rem; margin:1rem 0 .2rem; } .plate { background:var(--paper); border:2.5px solid var(--ink); padding:.4rem .5rem; min-width:0; } .mark { display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink); font-weight:700; font-size:1.05rem; } /* * THE PAINT BUCKET — Wil's ask: change the desk on click, not only per visit. * * It sits in the plate beside the wordmark because that is the one piece of * furniture on every page, and because a control for the background belongs * on the thing the background is behind. One tap rolls a new pattern and a * new colour, the same pair the app's "a different desk each time" rolls. * * It is a