/* CRT effect — ONE fixed overlay layer (pattern + vignette together, no blend modes, never scrolls) */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:var(--scan-int,.5);background:radial-gradient(ellipse at center,rgba(0,0,0,0) 80%,rgba(0,0,0,.1) 100%),repeating-linear-gradient(to right,rgba(255,0,0,.06) 0 1px,rgba(0,255,0,.06) 1px 2px,rgba(0,0,255,.06) 2px 3px),repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 3px,rgba(0,0,0,.04) 3px 4px)}
body[data-scan="grille"]::after{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 80%,rgba(0,0,0,.1) 100%),repeating-linear-gradient(to right,rgba(0,255,70,.05) 0 1px,rgba(255,0,220,.05) 1px 2px)}
body[data-scan="slotmask"]::after{background-image:radial-gradient(ellipse at center,rgba(0,0,0,0) 80%,rgba(0,0,0,.1) 100%),linear-gradient(rgba(0,0,0,.1) 1px,rgba(0,0,0,0) 1px),linear-gradient(90deg,rgba(0,0,0,.07) 1px,rgba(0,0,0,0) 1px),linear-gradient(rgba(0,0,0,.05) 1px,rgba(0,0,0,0) 1px);background-size:100% 100%,3px 6px,3px 6px,3px 6px;background-position:0 0,0 0,0 0,1.5px 3px}
body[data-scan="soft"]::after{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 80%,rgba(0,0,0,.1) 100%),repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.1) 2px,rgba(0,0,0,0) 4px)}
body[data-scan="lines"]::after{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 80%,rgba(0,0,0,.1) 100%),repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.14) 2px 3px,rgba(0,0,0,0) 3px 4px)}
body[data-scan="combo"]::after{background-image:radial-gradient(ellipse at center,rgba(0,0,0,0) 80%,rgba(0,0,0,.1) 100%),repeating-linear-gradient(to right,rgba(255,0,0,.05) 0 1px,rgba(0,255,0,.05) 1px 2px,rgba(0,0,255,.05) 2px 3px),linear-gradient(rgba(0,0,0,.07) 1px,rgba(0,0,0,0) 1px),linear-gradient(rgba(0,0,0,.04) 1px,rgba(0,0,0,0) 1px),repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.1) 2px 3px,rgba(0,0,0,0) 3px 4px);background-size:100% 100%,100% 100%,3px 6px,3px 6px,100% 100%;background-position:0 0,0 0,0 0,1.5px 3px,0 0}
body[data-scan="off"]::after{display:none}
/* browser-frame menus must stay chrome-colored regardless of site theme */
.browser-menu-panel a,.browser-menu-panel button,.browser-menu-panel .browser-menu-item{color:#1c1c1c !important;text-shadow:none !important;text-decoration:none !important;font-family:Verdana,Arial,sans-serif}
.browser-menu-panel a:visited{color:#1c1c1c !important}
.browser-menu-panel a:hover,.browser-menu-panel button:hover{color:#000 !important;background:#cee3f8}
/* ME|T|apestry Online dial-up window */
#aolwin{position:fixed;inset:0;display:none;z-index:70;place-items:center;pointer-events:none}
#aolwin.open{display:grid}
#aolwin .win{width:660px;background:#c0c0c0;border:2px outset #fff;box-shadow:6px 6px 0 rgba(0,0,0,.4);font:15px Tahoma,Verdana,sans-serif;color:#000}
/* TASK-1112[Q]: the light stop was #1084d0, and white on it measured 4.013:1 at
   the right-hand end of the gradient -- under the 4.5 floor with the wash off
   entirely, on the window's own name.  #0e73b5 is the same blue one shade down:
   5.075 unwashed and 4.827 at the shipped scan intensity of 35, both sampled
   off real pixels at this bar's real width.  Every Win95 title bar on the site
   carries the same two stops on purpose (.w95 .tb, #metTape .tbar,
   #mbLinkOk .tbar in the membership sheet, .browser-titlebar in
   browser-frame.css); section G of server/metaeden_net_scanline_contrast.test.js
   checks all of them against whatever the stops currently are. */
#aolwin .tbar{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,#000080,#0e73b5);color:#fff;padding:5px 8px;font:700 16px Tahoma,Verdana,sans-serif}
#aolwin .tbar .tri{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #fff}
#aolwin .tbar .wb{margin-left:auto;display:flex;gap:3px}
#aolwin .tbar .wb b{width:26px;height:22px;background:#c0c0c0;border:2px outset #fff;color:#000;font:700 13px Verdana,sans-serif;display:grid;place-items:center;cursor:pointer}
#aolwin .tbar .wb b.x{background:#cc2222;color:#fff}
/* TASK-1395[Q]: the close box is REACHABLE now (role/tabindex/aria-label on the
   <b> in the markup), so it needs somewhere to land visibly. White, not the
   #16247e the rest of the site uses for a ring, because this one sits on a navy
   title bar where navy is invisible. outline, so nothing in the bar moves.
   Scoped to #aolwin, which is also the shell #mbWarn and #mbPkOff sit inside. */
#aolwin .tbar .wb b.x:focus-visible{outline:2px solid #fff;outline-offset:1px}
#aolwin .body{display:grid;grid-template-columns:200px 1fr}
#aolwin .brand{background:#00807f;color:#fff;padding:20px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
#aolwin .logo{width:92px;height:84px;margin-bottom:8px}
#aolwin .logo svg{width:100%;height:100%;display:block}
/* TASK-1138[Q]: THE BOXED T.  The handoff (design-imports/eden-first-41 "MET
   Brand Handoff", wordmarks.html) gives two ways to draw it -- a SQUARE (solid
   patch, no border ridge) and a BRACKET (the same silhouette built from two
   half-strokes with gaps top and bottom).  SQUARE is what ships, everywhere,
   and the reason is size: every ME|T|apestry lockup on this site is set at
   15px, and the bracket's gaps and 3px strokes turn to mud at that scale.
   The pipes are gone because the box is what the pipes were drawing -- the
   handoff spells it METAPESTRY, the T shared and never doubled.
   Teal context, so the handoff's teal pairing: amber patch, dark-teal letter.
   The rest of the group sits in an open-left rectangle flush against the
   patch, coloured to match the text around it (white here).  align-items
   stretch plus the shared 22px minimum is what keeps the patch and the
   rectangle exactly one height, and the letter-spacing reset inside the patch
   stops the 2px tracking pushing the T off its own centre. */
#aolwin .bn{font:700 15px Verdana,sans-serif;letter-spacing:2px;display:flex;align-items:stretch;justify-content:center}
/* TASK-1139[Q]: ME NEEDS A BOX TOO.  It was a bare text node, and that is the
   whole bug the user photographed on their phone: .bn is align-items:stretch,
   so every child is pulled to the full 26px of the tallest one (the <u>, whose
   22px minimum plus 2px borders sets the line).  A stretched ELEMENT can
   re-centre its own text -- which is exactly what the <i> and <u> below do,
   and why they look right.  A stretched anonymous box (which is all a bare
   text node gets) cannot carry a rule, so ME painted at the TOP of the 26px
   while its neighbours sat centred, a few pixels high.  Wrapping it makes it
   the same kind of thing as its siblings; align-items:center is then the same
   fix they already had.  This is the identical reasoning TASK-1138[Q] wrote
   down one comment up when it promoted APESTRY out of a bare text node for
   its rectangle -- ME simply got missed at the time. */
#aolwin .bn b{display:flex;align-items:center}
#aolwin .bn i{font-style:normal;display:flex;align-items:center;justify-content:center;min-width:22px;margin-left:3px;background:#ffd400;color:#0a5c54;letter-spacing:0}
#aolwin .bn u{text-decoration:none;display:flex;align-items:center;min-height:22px;padding:0 5px;border:2px solid #fff;border-left:0}
#aolwin .scr{font:italic 700 36px Georgia,"Times New Roman",serif;margin-top:-4px;transform:rotate(-4deg)}
#aolwin .ver{margin-top:auto;font:12px Verdana,sans-serif;padding-top:16px}
#aolwin .form{padding:22px 28px 18px}
#aolwin .form label{display:block;font-weight:700;margin:14px 0 4px}
#aolwin .form label:first-child{margin-top:0}
#aolwin select{width:100%;font:15px Tahoma,Verdana,sans-serif;border:2px inset #fff;background:#fff;color:#000;padding:3px}
#aolwin select option{background:#fff;color:#000}
#aolwin .pw{margin:14px 0 2px}
/* TASK-1112[Q]: this line was #666 on the #c0c0c0 chrome, 3.156:1 -- the worst
   readable pair on the sign-on window and well under the floor before the wash
   touches it.  #444 is 5.353 unwashed and 4.942 at the shipped intensity of 35,
   both sampled.  It is also the shade the weaver's own version line already
   used two rules down, so this is one grey on this chrome rather than two. */
#aolwin .pw span{color:#444;font-size:13px}
#aolwin .aolbtns{display:flex;gap:14px;margin-top:18px}
#aolwin .aolbtn{background:#00807f;color:#fff;border:2px outset #7fd4d4;padding:7px 20px;font:700 13px Verdana,sans-serif;letter-spacing:1px;cursor:pointer}
#aolwin .aolbtn:active{border-style:inset}
/* TASK-1142[Q]: the modem speaker.  Deliberately quieter than SIGN ON, which is
   the button the visitor came for, but still white on a dark teal fill and well
   over the 4.5:1 floor, because a control nobody can read is not a control.
   order:-1 draws it first while it stays LAST in the markup, which is where the
   strings file's child-index paths need it to be (see the comment on the button
   in v4-metaeden.html).  margin-right:auto then pushes the three real actions
   over to the right so the toggle reads as chrome rather than a fourth verb. */
#aolwin .aolbtn.mute{background:#0a5b5a;border-color:#5fb3b3;letter-spacing:0;
 font-weight:400;padding:7px 12px;order:-1;margin-right:auto}
#aolwin .aolbtn.mute.off{background:#3a3a3a;border-color:#8a8a8a;color:#fff}
#aolstat{margin-top:14px;font:14px "Courier New",monospace;min-height:20px;color:#000080}
/* connection progress view */
#aolprog{display:none;padding:18px 26px 20px;background:#c8c4bc}
#aolwin.connecting .body{display:none}
#aolwin.connecting #aolprog{display:block}
#aolprog .phead{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px}
#aolprog .phead .plogo{width:52px;height:48px}
#aolprog .phead .plogo svg{width:100%;height:100%;display:block}
#aolprog .phead .pname{color:#3b3b8f;text-align:left}
/* TASK-1138[Q]: the same boxed T as the sign-on brand, in this screen's own
   ink.  The connecting view is monochrome #3b3b8f on the #c8c4bc chrome, and
   the loom beside it is drawn in that one colour too, so the patch inverts
   instead of introducing a second hue: solid #3b3b8f with the chrome showing
   through the letter.  The T is an <em>, not an <i>, for one specific reason
   -- .pname's OWN <i> is the 30px italic "Online" underneath, and its rule is
   a descendant selector, so an <i> in here would inherit 30px Georgia and
   break the line in half. */
#aolprog .phead .pname b{font:700 15px Verdana,sans-serif;letter-spacing:4px;display:flex;align-items:stretch}
/* TASK-1139[Q]: the same bare-text-node misalignment as the sign-on brand, and
   the same fix -- see the long note at #aolwin .bn b.  ME is wrapped in a
   <span> here rather than the <b> used there, for the mirror image of the
   reason the T next door is an <em>: the rule above is a DESCENDANT selector
   on .pname, so a <b> inside this <b> would match it too and inherit
   align-items:stretch -- re-creating the very bug being fixed, one level
   down.  A <span> is matched by nothing else in this window. */
#aolprog .phead .pname b span{display:flex;align-items:center}
#aolprog .phead .pname b em{font-style:normal;display:flex;align-items:center;justify-content:center;min-width:20px;margin-left:2px;background:#3b3b8f;color:#c8c4bc;letter-spacing:0}
#aolprog .phead .pname b u{text-decoration:none;display:flex;align-items:center;min-height:20px;padding:0 4px;border:2px solid #3b3b8f;border-left:0}
#aolprog .phead .pname i{display:block;font:italic 700 30px Georgia,serif;margin-top:-4px;transform:rotate(-3deg)}
#aolprog .pics{display:flex;gap:18px;justify-content:center}
#aolprog .pic{width:170px;height:120px;border:2px inset #fff;background:#0a0a3c}
#aolprog .pic svg .fg{opacity:.28;filter:saturate(.5) brightness(.75);transition:opacity .45s,filter .45s}
#aolprog .pic.on svg .fg{opacity:1;filter:none}
#aolprog .pic svg .bolt{opacity:0;transition:opacity .45s}
#aolprog .pic.on svg .bolt{opacity:1}
#aolprog .pic svg{width:100%;height:100%;display:block}
#aolprog .pstat{margin:16px 0 4px;text-align:center;font:16px Tahoma,Verdana,sans-serif;color:#111}
#aolprog hr{border:0;border-top:2px solid #555;margin:10px 30px}
#aolprog .pcancel{display:block;margin:12px auto 0;background:#8f8fc9;color:#fff;border:2px outset #c5c5ee;padding:7px 42px;font:700 16px Tahoma,Verdana,sans-serif;cursor:pointer}
#aolprog .pcancel:active{border-style:inset}
/* ME|T| Instant Weaver (AIM parody) */
.w95{background:#c0c0c0;border:2px outset #fff;box-shadow:5px 5px 0 rgba(0,0,0,.35);font:13px Tahoma,Verdana,sans-serif;color:#000}
/* touch-action:none on the drag handle -- without it a touchscreen's own pan/scroll
   gesture recognizer competes with the pointermove drag in metaeden-v4.js (which
   already uses Pointer Events + setPointerCapture, the touch-compatible primitive),
   and the drag reads as barely working: it starts, then stutters or drops mid-move
   as the browser decides the gesture is a page scroll instead. */
.w95 .tb{display:flex;align-items:center;gap:6px;background:linear-gradient(90deg,#000080,#0e73b5);color:#fff;padding:3px 6px;font:700 13px Tahoma,Verdana,sans-serif;touch-action:none}
.w95 .tb .bx{margin-left:auto;width:20px;height:18px;background:#c0c0c0;border:2px outset #fff;color:#000;font:700 12px Verdana,sans-serif;display:grid;place-items:center;cursor:pointer}
#aimwin{position:fixed;right:calc(var(--page-inset-right,0px) + 120px);top:calc(var(--page-inset-top,0px) + 120px);width:300px;display:none;z-index:72}
#aimwin.open{display:block}
#aimwin .bill{margin:8px;background:#16247e;position:relative;overflow:hidden;height:170px}
#aimwin .bill svg{width:100%;height:100%;display:block}
#aimwin .frow{display:flex;align-items:center;gap:8px;margin:8px 10px}
#aimwin .frow label{width:92px}
#aimwin .frow input,#aimwin .frow select{flex:1;font:13px Tahoma,Verdana,sans-serif;border:2px inset #fff;background:#fff;color:#000;padding:2px 4px}
#aimwin .cks{display:flex;gap:18px;margin:6px 12px;color:#444;font-size:12px}
#aimwin .btns{display:flex;align-items:flex-end;gap:16px;margin:10px 12px 4px}
#aimwin .btns .ib{display:grid;place-items:center;gap:2px;font-size:12px;cursor:pointer;text-align:center}
#aimwin .btns .ib b{width:34px;height:30px;background:#16247e;color:#ffd400;border:2px outset #8fa2e8;display:grid;place-items:center;font-size:16px}
#aimwin .btns .ib.go{margin-left:auto}
#aimwin .ver{text-align:center;font-size:12px;color:#444;padding:4px 0 8px}
#aimstat{text-align:center;font-size:12px;color:#000080;min-height:16px}
/* TASK-1355[Q]: the same EDGE metListPlace anchors from. This rule only paints
   where there is no .browser-viewport to measure (mobile-e, a bare page), so it
   cannot know where .side is and does not try -- it just agrees about which
   side of the screen this window lives on. The two disagreeing is how a
   fallback ends up being the one nobody checked. */
#buddywin{position:fixed;right:calc(var(--page-inset-right,0px) + 60px);top:calc(var(--page-inset-top,0px) + 90px);width:306px;display:none;z-index:71}
#buddywin .tb{cursor:move;user-select:none;touch-action:none}
#buddywin.open{display:block}
#buddywin .bill{margin:8px 8px 0;background:#16247e;color:#fff;padding:8px 10px;display:flex;align-items:center;gap:10px}
/* TASK-1139[Q]: THE MET LIST GETS THE REAL MARK.  What was here was a CSS
   border-triangle -- a down-pointing wedge in #9db8f0, standing in for the
   loom since long before there was a loom to draw.  TASK-1138[Q] wired the
   mark into four places and this window was not one of them; the user opened
   the MET List on their phone and it was the one surface still showing the
   placeholder.  Sized and structured like #aolprog .phead .plogo (a fixed box
   with the svg filling it), which is the closest thing already in this file.
   The mark carries no background plate of its own so the billboard's navy
   reads straight through it, and the warp threads inside it are drawn in
   exactly the #9db8f0 the triangle used to be -- the header keeps its colour
   and gains the drawing.
   #aimwin .bill IS STILL ON THE PLACEHOLDER and is deliberately untouched:
   that window bakes its wordmark into a bespoke 284x170 illustration with SVG
   <text>, so bringing it to v3 is a redraw of the illustration rather than an
   icon swap.  It is a known follow-up, not an oversight -- the same one the
   TASK-1138[Q] agent flagged when it first surfaced this gap. */
#buddywin .bill .loom{width:34px;height:34px;flex:none}
#buddywin .bill .loom svg{width:100%;height:100%;display:block}
#buddywin .bill b{font-size:18px}
#buddywin .bill i{font-size:12px;display:block}
#buddywin .tabs2{display:flex;margin:8px 8px 0;gap:2px}
#buddywin .tabs2 span{padding:3px 12px;border:1px solid #888;border-bottom:0;background:#b0b0b0;cursor:pointer}
/* TASK-1395[Q]: A SECOND CUE THAT IS NOT COLOUR.  This said background:#fff and
   nothing else, in all four skins, so "which roster am I looking at" was carried
   by one light-grey-to-white step -- gone in greyscale, gone on a dimmed panel.
   The main nav's house move is to change the selected item's border STYLE
   (.tabs .bbtn.on{border-style:inset}); a tab strip cannot borrow that verbatim,
   because a selected TAB is the raised one and inset would invert the metaphor
   -- and at this strip's 1px border a bevel is not a cue anybody can read. So it
   is the same idea in the shape this widget has: a navy bar along the top edge
   of the selected tab. inset box-shadow, so no state change moves anything. */
#buddywin .tabs2 span.on{background:#fff;box-shadow:inset 0 3px 0 #16247e}
#buddywin .tabs2 span:focus-visible{outline:2px solid #16247e;outline-offset:-2px}
#buddywin .list{margin:0 8px;background:#fff;border:2px inset #fff;height:230px;overflow:auto;padding:6px 8px;font:13px Tahoma,Verdana,sans-serif}
#buddywin .list .fold{font-weight:700;margin-top:6px}
#buddywin .list .fold::before{content:"\229f  ";font-weight:400}
#buddywin .list .bud{padding-left:26px}
#buddywin .list .bud.away{color:#888;font-style:italic}
/* TASK-1074[Q]: a FILED tutorial carries a note now, which is longer than a name
   and varies with how far the talk got.  The row was clipped at whatever width
   the list happened to be, with the whole of it on the anchor's title.
   TASK-1096[Q]: THE NOTE IS A POST-IT YOU HOVER, so the row is a NAME again and
   there is nothing left in it to clip.  What stays is white-space:nowrap, which
   is the half that actually kept the fixed frame: a row is one line, so the list
   can never wrap to a second one or change the window's size.  The clip itself
   is GONE ON PURPOSE and not as tidying -- overflow:hidden on the row would cut
   the post-it's focus ring off at the row's own edges, and a keyboard user who
   cannot see where they are is worse than a row that could theoretically run
   long.  It cannot run long: the two names are literals in refreshClosed and the
   variable part left with the note. */
#buddywin .list #budclosed .bud{white-space:nowrap}
/* THE POST-IT, drawn rather than typed.  A glyph would need a font this page has
   no business assuming -- it is dressed as 1996 and the memo characters all
   arrived long after -- and would leave the .js reaching for an escape sequence
   to say something CSS can just draw.  So: a yellow square, a dark edge, and a
   corner turned back.  The turn is one pseudo-element carrying four border
   colours: top and left are the flap's shaded underside, right and bottom are
   the list's own white showing through where the corner has lifted.
   NO LAYOUT JITTER, by construction.  The box is 13px inside a 13px-Tahoma line
   whose strut already reserves more than that, and vertical-align holds it
   inside the strut rather than pushing past it, so the row is exactly as tall
   with the post-it as it was without one.  Hover and focus change COLOUR and
   OUTLINE only; the outline sits outside the box model, so nothing reflows and
   the name beside it never moves. */
#buddywin .list #budclosed .note{position:relative;display:inline-block;vertical-align:-2px;width:13px;height:13px;margin:0 0 0 6px;padding:0;border:0;background:#ffe86b;box-shadow:inset 0 0 0 1px #7a6600,1px 1px 0 rgba(0,0,0,.25);font-size:0;line-height:0;color:transparent;cursor:help}
#buddywin .list #budclosed .note::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;border:4px solid transparent;border-top-color:#d4ab00;border-left-color:#d4ab00;border-right-color:#fff;border-bottom-color:#fff}
#buddywin .list #budclosed .note:hover{background:#fff6b0}
#buddywin .list #budclosed .note:focus-visible{outline:2px solid #16247e;outline-offset:2px}
/* TASK-1381[Q]: RESTART, and the strip that asks before it runs.
   THE BUTTON sits after the post-it on the same one-line row and is sized so it
   cannot push it wide: at 306px the window leaves about 160px after the longest
   name and its post-it, and "restart" at 12px costs a third of that.  12px is
   the floor for anything meant to be read and this is meant to be read; #16247e
   on #fff is about 13:1.  NO LAYOUT JITTER, by construction: the border is
   present and coloured in every state, so hover and active change background
   only, and focus uses an outline, which sits outside the box model.
   THE ASK IS A BLOCK, deliberately breaking the row's own nowrap for the one
   state where there is a sentence rather than a name to fit.  It appears only
   on a press, which is the user-initiated state change the fixed-frame rule
   exempts -- and the list around it is a fixed 230px scroll frame, so a row
   growing by one line moves nothing outside the window.  The tint is the
   period warning yellow the post-it and the info tip already use, at #000,
   which is about 19:1; the destructive answer is the one carrying the red. */
#buddywin .list #budclosed .rst{margin-left:8px;padding:0 6px;border:1px solid #7a86ad;background:#eceff8;color:#16247e;font:12px Tahoma,Verdana,sans-serif;line-height:16px;cursor:pointer}
#buddywin .list #budclosed .rst:hover{background:#fff}
#buddywin .list #budclosed .rst:focus-visible{outline:2px solid #16247e;outline-offset:1px}
#buddywin .list #budclosed .rstask{display:block;white-space:normal;margin:4px 0 2px;padding:5px 6px;background:#fff6b0;border:1px solid #7a6600;color:#000;font:12px Tahoma,Verdana,sans-serif;line-height:1.4}
#buddywin .list #budclosed .rstask .q{display:block;margin-bottom:4px}
#buddywin .list #budclosed .rstask button{padding:1px 7px;border:1px solid #7a6600;background:#fffce6;color:#000;font:12px Tahoma,Verdana,sans-serif;cursor:pointer}
#buddywin .list #budclosed .rstask .yes{margin-right:5px;border-color:#8c0000;color:#8c0000;font-weight:700}
#buddywin .list #budclosed .rstask button:hover{background:#fff}
#buddywin .list #budclosed .rstask button:focus-visible{outline:2px solid #16247e;outline-offset:1px}
/* ...and the tip it opens.  It lives on document.body and is position:fixed for
   one reason: the row sits inside .list, which is a 230px scroll frame with
   overflow:auto, and the filed rows sit near the bottom of it.  A tip parented
   anywhere inside that frame is clipped by it, which is the whole failure the
   native title tooltip did not have and the reason it was worth keeping until
   now.  Fixed positioning escapes an ancestor's overflow, and nothing above it
   carries a transform (the windows drag by left/top), so there is no containing
   block to be caught on.  Colours are the period info tip, which is also the
   only palette on this page that clears the contrast floor without inventing
   one: #000 on #ffffe1 is about 20:1, and 12px is the floor for anything meant
   to be read.  pointer-events:none so it can never eat the hover that opened it.
   z-index 95 clears every w95 window (70-75) and stays under the ghost cursor
   (99) and its ring (97), which are the two things that must always be on top. */
#budtip{position:fixed;left:0;top:0;display:none;z-index:95;max-width:230px;padding:5px 8px;background:#ffffe1;border:1px solid #000;color:#000;font:12px Tahoma,Verdana,sans-serif;line-height:1.4;box-shadow:2px 2px 3px rgba(0,0,0,.4);pointer-events:none}
/* TASK-1139[Q]: FIVE BUTTONS THAT NOW LINE UP.  The row across the bottom of
   the MET List was ragged, and each of its three rules owned a piece of why.
   align-items:center meant a taller button (a label that wraps to two lines,
   which is every narrow screen) was centred against its neighbours, lifting
   its icon box above theirs -- flex-start pins all five boxes to one top edge
   instead, so the wrapping happens BELOW the row of icons and cannot move
   them.  The .ib itself had no layout at all, so its icon and its label were
   an inline flow that only text-align:center approximately squared up; grid
   with place-items:center makes that exact.  And the icon box was centring
   its glyph with line-height:24px inside a 26px box, which is 2px of built-in
   lean no matter what the glyph is -- place-items:center centres it for real,
   so the line-height is gone rather than merely re-tuned.
   #aimwin .btns .ib two windows up already had the grid half of this and is
   the reference these now match; it keeps align-items:flex-end because its
   labels are all one word and it hangs a button off margin-left:auto. */
/* SPREAD EVENLY, NOW THAT THERE ARE FOUR (the fifth, Try ME|T|, is gone --
   see the strings file). gap:6px plus a lone margin-left:auto on one button
   read as "four clustered left, one shoved right"; justify-content:space-between
   is the literal ask, and with four boxes of nearly the same width it reads
   as genuinely even. */
#buddywin .brow{display:flex;margin:8px;align-items:flex-start;justify-content:space-between}
#buddywin .brow .ib{display:grid;place-items:center;gap:2px;font-size:12px;text-align:center;cursor:pointer}
#buddywin .brow .ib b{display:grid;place-items:center;width:32px;height:26px;background:#16247e;color:#ffd400;border:2px outset #8fa2e8;font-size:14px}
/* THE MNEMONIC UNDERLINE, matching the AOL reference (Help/Setup's own H/S).
   Scoped to .ibl specifically -- a dedicated wrapper around just the label
   word, added alongside the accesskey attribute in the markup -- rather than
   to .ib itself, so ::first-letter can never end up questioning whether the
   icon glyph in the sibling <b> counts as the "first letter" of the button.
   accesskey alone would get some browsers to underline it natively, but not
   consistently across all of them, so the visual is stated here rather than
   left to chance. */
#buddywin .brow .ib .ibl::first-letter{text-decoration:underline}
#buddywin .list a{color:#0000cc}
body.offline .shell{visibility:hidden}
/* instant message window */
/* TASK-1360[Q]: THE TWO TRANSCRIPTS OPEN AS A STACK, ON THE RIGHT.
   The user sent a shot of them cascaded down the right-hand side and asked
   for that to be where they land. They used to open at left:110/130 with a
   50px step -- a stack already, but at the TOP LEFT, straight over the
   page's own masthead and its first few entries.
   ANCHORED RIGHT, because that is the side they were asked to live on and a
   left offset cannot stay there when the window resizes. The step is down
   and LEFT rather than the usual down-right: at this end of the screen a
   down-right cascade walks the second window off the edge.
   The z-index numbers here are only the STARTING order now; met-windows.js
   reorders 71-74 among these four as they are touched. */
#imwin{position:fixed;right:calc(var(--page-inset-right,0px) + 557px);top:calc(var(--page-inset-top,0px) + 380px);width:380px;display:none;z-index:73}
#imwin.open{display:block}
#imwin .tb{cursor:move;user-select:none;touch-action:none}
#imlog{margin:8px;background:#fff;border:2px inset #fff;height:210px;overflow-y:auto;padding:6px 8px;font:13px Tahoma,Verdana,sans-serif;color:#000}
#imlog p{margin:0 0 5px}
#imlog .zn{color:#cc0000;font-weight:700}
#imlog .un{color:#0000cc;font-weight:700}
#imlog .typ{color:#767676;font-style:italic}
#imlog .sys{color:#767676;font-style:italic;text-align:center}
#imlog .imlink{color:#0000cc;text-decoration:underline;cursor:pointer}
/* TASK-1375[Q]: the answers live behind one button now.  The container keeps
   its margin and becomes the menu's positioning parent; the menu opens UPWARD
   because a docked chat sits on the bottom edge and downward has nowhere to
   go.  Readability floor: 12px, and the ink is the same #000 the old stacked
   buttons used. */
#imchoices,#pixchoices{position:relative}
#imchoices .rply,#pixchoices .rply{justify-self:start;min-width:96px}
#imchoices .rmenu,#pixchoices .rmenu{position:absolute;left:0;right:0;bottom:calc(100% + 4px);display:none;flex-direction:column;background:#e8e8e8;border:2px outset #fff;max-height:230px;overflow-y:auto;z-index:6;box-shadow:0 -3px 0 rgba(0,0,0,.25)}
#imchoices .rmenu.on,#pixchoices .rmenu.on{display:flex}
#imchoices .rmenu button,#pixchoices .rmenu button{border:0;border-bottom:1px solid #c3c3c3;background:transparent;text-align:left;font:12px Tahoma,Verdana,sans-serif;color:#000;padding:7px 9px;cursor:pointer}
#imchoices .rmenu button:last-child,#pixchoices .rmenu button:last-child{border-bottom:0}
#imchoices .rmenu button:hover,#pixchoices .rmenu button:hover{background:#16247e;color:#fff}
#imchoices .rmenu button:focus-visible,#pixchoices .rmenu button:focus-visible{outline:2px solid #16247e;outline-offset:-3px}
#imchoices{display:grid;gap:5px;margin:0 8px 10px}
#imchoices button{text-align:left;font:12px Tahoma,Verdana,sans-serif;background:#e8e8e8;border:2px outset #fff;padding:5px 9px;cursor:pointer;color:#000}
#imchoices button:active{border-style:inset}
#imform{display:none;margin:0 8px 10px}
#imform input{width:100%;box-sizing:border-box;font:13px Tahoma,Verdana,sans-serif;border:2px inset #fff;background:#fff;color:#000;padding:4px 6px}
#ghostcur{position:fixed;z-index:99;display:none;pointer-events:none;transition:left 1.1s ease,top 1.1s ease;filter:drop-shadow(1px 1px 0 #000)}
/* TASK-1066[Q]: the attention ring and its caption (ghostRing).  It marks a
   control in the browser CHROME from a conversation window inside the page, so
   it is an overlay on document.body -- pointer-events:none the whole way down,
   so the marked control keeps every click, and nothing here changes the layout
   or the box of the thing it rings.  It sits at 97, under #ghostcur (99) and
   the leash (98) so the pointer still reads over its own mark, and over every
   window (73-82) so it is never buried.
   Readable on BOTH backgrounds it can land on: the Win95 grey chrome and the
   site's near-black.  The ring carries its own black outline for the grey
   case; the caption paints its own dark plate rather than trusting whatever is
   behind it, at 13px/12px on #061218 (both well past 4.5:1) and with no
   opacity stacked on either. */
#ghostring{position:fixed;inset:0;z-index:97;display:none;pointer-events:none}
#ghostring .grbox{position:fixed;box-sizing:border-box;border:2px solid #5be7ff;border-radius:3px;box-shadow:0 0 0 2px rgba(0,0,0,.85),0 0 0 5px rgba(91,231,255,.3);animation:grpulse 1.7s ease-in-out infinite}
#ghostring .grtag{position:fixed;background:#061218;border:1px solid #5be7ff;padding:6px 10px;font-family:ui-monospace,Consolas,"Courier New",monospace;box-shadow:2px 2px 0 rgba(0,0,0,.55)}
#ghostring .grtag b{display:block;color:#d8fbff;font-size:13px;font-weight:700;letter-spacing:.5px}
#ghostring .grtag i{display:block;color:#9ec8cf;font-size:12px;font-style:normal;margin-top:3px}
@keyframes grpulse{0%,100%{box-shadow:0 0 0 2px rgba(0,0,0,.85),0 0 0 5px rgba(91,231,255,.3)}50%{box-shadow:0 0 0 2px rgba(0,0,0,.85),0 0 0 9px rgba(91,231,255,0)}}

body{margin:0;background:#ffffff;color:#222222;font:20px/1.6 Michroma,Verdana,Arial,sans-serif}
a{color:#0000cc}a:visited{color:#551a8b}a:hover{color:#ff6600}
.shell{width:min(100% - 48px,1760px);margin:16px auto 48px}
/* header */
.hd{border:1px solid #ff6600;background:#ff6600}
.hd-top{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:8px 14px;color:#000}
.logo{display:grid;min-width:64px;height:48px;padding:0 6px;box-sizing:border-box;place-items:center;border:2px solid #fff;background:#fff;color:#ff6600;font:32px/1 "Bebas Neue","Arial Narrow",Verdana,sans-serif;text-decoration:none}
/* The mark is drawn, not set: it takes its colour from .logo's own `color` in
   each theme below, so a theme keeps colouring the masthead by naming one
   value.  48x31.6 is the 126:83 artwork at the width that leaves the box the
   64px it already reserved.  #aolwin's own .logo svg above is a DIFFERENT mark
   and outranks this on specificity, which is what keeps them apart. */
.logo svg{width:48px;height:31.6px;display:block}
/* TASK-1139[Q]: THE BIG MARK ON `about`, and the base rule it never had.
   mobile-e.css has narrowed .biglogo since the mobile port -- but only
   narrowed it: there was no base rule to narrow and no element wearing the
   class, so the override sat over nothing and the about page opened on two
   bare paragraphs.  These are the mockup's own values
   (design-imports/eden-first-40, "MetaEden.net Mockup v1.html"), restored
   here rather than in mobile-e.css because the mark belongs on both widths;
   the mobile file's 84x63 then does what it was always written to do.
   Per-theme colours sit with the component rather than in the four theme
   blocks below, following .bbtn's group a few rules up.  Unlike the masthead
   the mark is unboxed here, so each theme names the colour it wants ON THE
   PAGE, which is not the colour it wants inside a white tile -- grey's teal
   rather than the reversed white, and a real value for dark, which leaves
   the masthead at its default orange. */
.biglogo{display:flex;align-items:center;gap:20px;margin:10px 0 20px}
.biglogo svg{width:120px;height:79px;flex:none}
.bl-name{font:700 42px/1 "Bebas Neue","Arial Narrow",Verdana,sans-serif;letter-spacing:2px}
.bl-tag{font-size:17px;color:#777;margin-top:6px}
body.grey .biglogo svg{color:#00807f}
body.grey .bl-name{font-family:"Times New Roman",Times,serif;letter-spacing:0;font-size:38px}
body.neon .biglogo svg{color:#f2c200}
body.dxhr .biglogo svg{color:#f0b13e}
body.dark .biglogo svg{color:#00ffff}
.hd-top strong{font:30px/1 "Bebas Neue","Arial Narrow",Verdana,sans-serif;letter-spacing:1px}
.hd-top .tag{color:#5a2500}
.hd-top .who{cursor:pointer;border-bottom:1px dotted #5a2500}
/* TASK-1361[Q]: dark mode and guest sit in one box, pushed right together.
   BASELINE, not centre, and that is the whole of the fix: .hd-top centres
   its items, and centring two runs of text at different sizes lines up
   their BOXES while leaving the letters sitting at different heights.
   Aligning the baselines is what makes them read as one row. The push
   right moves from the link to the box, or the box would not go anywhere. */
/* TASK-1376[Q]: THE TWO UNDERLINES SIT AT ONE HEIGHT, and guest is the one
   that does not move.  The user: "make the underline at the same height,
   slightly prefer the underline for guest if we can make the other line up
   like/with guest."

   THEY COULD NOT LINE UP, and it was not a matter of a pixel or two.  Two
   different mechanisms at two different sizes: guest is a BORDER on the bottom
   of its box at the inherited 20px, dark mode was a text-decoration underline
   at 17px, which the browser draws near the BASELINE.  Baseline-aligned, those
   land at different heights by construction.

   TWO CHANGES, AND THE SECOND IS WHAT AVOIDS A TRADE-OFF.  Both are borders
   now, so they are the same kind of line; and dark mode takes the size it was
   already sitting next to, so the two boxes are identical and their bottoms
   coincide.  That matters because AB3 pins align-items:baseline as the whole
   reason this pair reads as a pair -- at two sizes, aligning the underlines
   would have meant aligning the BOXES and leaving the letters at different
   heights, undoing TASK-1361[Q].  At one size, baseline alignment lines up the
   letters AND the borders, and nothing has to be given up.

   Guest is untouched, which is what "prefer the underline for guest" asks.
   Each keeps its own STYLE: solid still reads as a link, dotted as a hint. */
.hd-you{margin-left:auto;display:flex;align-items:baseline;gap:16px}
/* TASK-1402[Q]: DOTTED, to match .who. The user, on the header row: "the
   dotted underlines look better for some reason for the links up here." The
   reason is probably that guest is the one thing up here that was never a
   text-decoration -- it is a border, drawn at the border box rather than at
   the font baseline, so it sits at one height across three different type
   sizes. These now match it in weight AND in dash.

   currentColor stays: .who is re-coloured per theme on four separate lines
   below, and this follows its own link ink for free in every skin. */
.modeswap{cursor:pointer;text-decoration:none;border-bottom:1px dotted currentColor;color:inherit}
/* TASK-1381[Q]: the none above loses to the THEMES. body.grey a re-underlines
   every link at (0,1,2), and .modeswap alone is (0,1,0) -- so in the grey skin
   both lines drew: the text-decoration near the letters and the border below.
   .hd-you .modeswap is (0,2,0), which outranks every body.<theme> a rule, so
   the border is the ONE underline in every skin. */
.hd-you .modeswap{text-decoration:none}
.modeswap .dk{display:none}
body.grey .modeswap .dk{display:inline}body.grey .modeswap .lt{display:none}
body.neon .modeswap{color:#1a1204}
.tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid rgba(0,0,0,.22);background:#cee3f8}
.tabs .bbtn.on{border-style:inset}
.tabs a i{font:italic 700 17px Georgia,serif;letter-spacing:0;vertical-align:2px}
.bbtn{display:flex;align-items:center;gap:10px;background:#f2f7fc;border:2px outset #fff;padding:7px 24px 5px;font:24px/1 "Bebas Neue","Arial Narrow",Verdana,sans-serif;letter-spacing:2px;color:#222;cursor:pointer;text-decoration:none}
.bbtn:hover{color:#000}.bbtn:active{border-style:inset}
.bbtn .ic{font:400 18px/1 Verdana,sans-serif;letter-spacing:0}
/* themed bevel toolbar */
body.neon .bbtn{background:#12110a;border-color:#4a4526;color:#f2c200}
body.neon .bbtn:hover{color:#fff;background:#1c1a10}
body.neon .bbtn .ic{color:#f2c200 !important}
body.dxhr .bbtn{background:#141008;border-color:#4a3b1a;color:#e8c987}
body.dxhr .bbtn:hover{color:#ffd97a}
body.dxhr .bbtn .ic{color:#f0b13e !important}
body.dark .bbtn{background:#0a0f1a;border-color:#335577;color:#e0e0e0}
body.dark .bbtn:hover{color:#fff}
body.dark .bbtn .ic{color:#00ffff !important}
.newb{display:inline-block;background:#ffff66;color:#000;font:800 13px/1 Verdana,sans-serif;letter-spacing:1px;padding:2px 3px;border:1px solid #999;vertical-align:4px;margin-left:6px}
/* generic */
h2{font:36px/1.1 "Bebas Neue","Arial Narrow",Verdana,sans-serif;letter-spacing:2px;font-weight:400;margin:28px 0 10px;padding-bottom:6px;border-bottom:1px solid #cee3f8}
h2 .sub{font:400 18px Michroma,Verdana,sans-serif;letter-spacing:0;color:#777}
hr{border:0;border-top:1px solid #ddd;margin:24px 0}
.small{font-size:17px;color:#777}
table{border-collapse:collapse;width:100%;font-size:20px}
th{text-align:left;background:#cee3f8;border:1px solid #9db8d2;padding:6px 12px;font:20px/1.3 "Bebas Neue","Arial Narrow",Verdana,sans-serif;letter-spacing:2px}
td{border:1px solid #ddd;padding:8px 12px;vertical-align:top}
tr:nth-child(even) td{background:#f6f9fc}
/* TASK-1215[Q]: THE GAMES TABLE'S TITLE COLUMN, AND THE WHOLE ROW AS A LINK.

   THE COLUMN IS SIZED BY ITS CONTENT, NOT BY A NUMBER, and that is the whole
   decision.  The <th> carried width:110px and five of the fourteen titles wrapped
   under it; "Spam Clicker: Cookie Cleaner" took FOUR lines.  A measured px width
   was the obvious fix and it cannot be right, because the width this column
   needs depends on a font that is not decided here:

     Spam Clicker: Cookie Cleaner, 20px, the longest title we have
       261.6px  Times New Roman bold  -- what body.grey (the DEFAULT theme) sets
       328.7px  Verdana bold          -- the fallback when the CDN is unreachable
       366.2px  Michroma              -- dark / neon / dxhr, once the font lands
                                         (measured off the font's own hmtx table;
                                          synthetic bold widens it further still)

   One baked number is therefore either too narrow in a Michroma theme or ~130px
   of the blurb's width thrown away in the default one, and that width comes
   straight out of the column next to it.  white-space:nowrap hands the
   measurement to the layout engine, which does it per render in whatever font
   is actually live: the column ends up exactly max-content and the blurb keeps
   the rest.  At the width this page really renders at -- .shell caps at 1760px
   and body.browser-framed is min-width:1920px, so the desktop table is 1760px
   flat -- the title column lands at 285.6px in the default theme and the blurb
   still holds 1291px.  Gated at 769px because <=768px is mobile-e.css's, where
   these rows are re-laid as stacked grid cards and a nowrap title would run off
   the side of a phone.

   THE ROW IS CLICKABLE VIA THE REAL <a>, NOT VIA A HANDLER.  The ::after
   overlay is the link's own hit area stretched over the row, so what sits under
   the cursor anywhere in that row IS the anchor: ctrl-click and middle-click
   open a new tab natively, the anchor stays the one focusable, Enter-activatable
   control, and the row never becomes a tab stop.  The locked row is dead for
   free -- it has no anchor at all, so there is nothing to stretch and nothing
   to give it a pointer cursor.  :has() is what ties the cursor to exactly the
   condition the overlay has, rather than to a list of rows that could drift.
   The one thing this pattern does NOT cover is a drag: see rowDragGuard in
   metaeden-v4.js, which is the whole of the script side of this. */
@media (min-width:769px){
  #page-games td:nth-child(1){white-space:nowrap}
  #page-games tr:has(td a[href]){position:relative;cursor:pointer}
  #page-games td a[href]::after{content:"";position:absolute;inset:0}
}
/* TASK-1237[Q]: WHAT A PRESSED ROW LOOKS LIKE, while the game it names is on
   its way.  The report was that clicking a row does nothing visible until the
   game appears, so the visitor clicks again -- and the extra clicks abort the
   load and restart it, which is measured in metaeden-v4-rowpress.js's header.
   This is the seen half; that file is the behaviour.

   TWO SIGNALS, because they answer two different questions.  The OUTLINE says
   "that press landed, on this row" and has to read at a glance from anywhere in
   a 1760px row, so it is drawn on every cell rather than on one of them.  The
   LABEL says "the game is coming, and once was enough", which is the sentence
   the visitor could not get anywhere else.

   NEITHER MOVES ANYTHING.  outline sits outside the box model and
   outline-offset:-2px pulls it back inside the cell it belongs to, so a lit row
   is exactly the size of an unlit one -- the no-jitter rule in CLAUDE.md, and
   the reason this is not a border.  The label is taken out of flow on desktop
   against the blurb cell (the row is already position:relative up there for the
   click overlay, so the CELL takes the positioning and the overlay's own
   containing block is untouched).  Below 769px mobile-e.css re-lays these rows
   as stacked grid cards where there is room for it in the description area, so
   it simply flows, and the outline moves to the row because the cells there are
   grid items with their borders already off.

   THE YELLOW IS THEME-INDEPENDENT ON PURPOSE, the same call .newb already
   makes: black on #ffff66 clears 4.5:1 by a distance on every one of these
   backgrounds, so one rule says it.

   THE OUTLINE COULD NOT DO THE SAME, and two shortcuts were tried and measured
   before the four rules below were written.  `outline:2px solid` computes to
   BLACK, not to the text colour, so on the three themes whose rows are
   near-black it drew nothing at all.  Naming currentColor explicitly did not
   rescue it either: browser-frame.css puts `color:inherit` on the viewport
   these rows sit in, and what that resolves to inside the period chrome is
   black in all four themes, so currentColor was the same invisible line by a
   longer route.  Each theme therefore states its own, which is what every
   other coloured thing in this stylesheet already does.  The values are the
   accent each theme already uses for the links in these very rows.

   THE MARGIN RESET IS LOAD-BEARING, not tidiness.  The label is a <p>, and a
   <p>'s default 1em top margin is applied to an absolutely positioned box as
   well: with it, the label hangs 16px below the row it belongs to and reads as
   a flag on the row underneath.  pointer-events:none for the neighbouring
   reason -- the row's whole hit area is the play link's stretched ::after, and
   a label lying over part of that would put a dead patch in the middle of the
   one control this ticket exists to make answer.

   THE MAX-WIDTH IS THE NARROW-DESKTOP CASE, measured on the longest title we
   have: "opening Spam Clicker: Cookie Cleaner. one click was enough." wants
   593px, which the blurb column has to spare at the 1760px this page really
   renders at and does not at 800px.  Capped to the cell it is anchored in, it
   wraps there instead of sliding out over the title column.  Wrapping cannot
   move the table either, for the same reason the outline cannot: it is out of
   flow, so a second line grows the label and not the row. */
#page-games tr.opening .gload{display:inline-block;margin:0;pointer-events:none;background:#ffff66;color:#000;font:700 15px/1.5 Verdana,sans-serif;letter-spacing:1px;padding:1px 8px;border:1px solid #999}
#page-games .gloadsr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#page-games tr.opening td,#page-games tr.opening{outline-color:#c34a00}
body.grey #page-games tr.opening td,body.grey #page-games tr.opening{outline-color:#000}
body.dark #page-games tr.opening td,body.dark #page-games tr.opening{outline-color:#00ffff}
body.neon #page-games tr.opening td,body.neon #page-games tr.opening{outline-color:#f2c200}
body.dxhr #page-games tr.opening td,body.dxhr #page-games tr.opening{outline-color:#f0b13e}
@media (min-width:769px){
  #page-games tr.opening td{outline-style:solid;outline-width:2px;outline-offset:-2px}
  #page-games tr.opening td:nth-child(2){position:relative}
  #page-games tr.opening .gload{position:absolute;right:12px;top:50%;transform:translateY(-50%);max-width:calc(100% - 24px)}
}
@media (max-width:768px){
  #page-games tr.opening{outline-style:solid;outline-width:2px;outline-offset:-2px}
  #page-games tr.opening .gload{margin-top:4px}
}
.btn{font:18px Michroma,Verdana,sans-serif;background:#e8e8e8;border:2px outset #fff;padding:4px 16px;cursor:pointer}
.btn:active{border-style:inset}
input[type=text],input[type=search]{font:20px Michroma,Verdana,sans-serif;border:2px inset #fff;background:#fff;padding:4px 8px}
/* front page list */
.posts{list-style:none;margin:8px 0;padding:0;counter-reset:p}
.posts li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:6px 8px;border-bottom:1px solid #eee}
.posts li::before{counter-increment:p;content:counter(p) ".";color:#999;text-align:right}
.posts .meta{grid-column:2;font-size:17px;color:#777}
.posts .k{display:inline-block;font-size:16px;font-weight:700;padding:0 8px;border:1px solid;margin-right:8px;vertical-align:2px}
.k-game{color:#0b6b34;border-color:#0b6b34;background:#e9f7ee}
.k-tool{color:#8a4b00;border-color:#8a4b00;background:#fff3e0}
.k-doc{color:#333;border-color:#999;background:#f2f2f2}
/* two col */
.cols{display:grid;grid-template-columns:1fr 420px;gap:28px}
@media (max-width:640px){.cols{grid-template-columns:1fr}}
.side{border:1px solid #9db8d2;background:#f2f7fc;padding:16px 20px;font-size:17px;align-self:start}
.side h3{margin:0 0 12px;font:24px/1 "Bebas Neue","Arial Narrow",Verdana,sans-serif;letter-spacing:3px;font-weight:400;text-transform:uppercase;color:#33506b}
.side dl{margin:0}.side dt{float:left;clear:left;width:150px;color:#777}.side dd{margin:0 0 6px 158px}
.side hr{border-top:1px solid #c5d8ea;margin:16px 0}
/* documents */
.doclist{list-style:none;margin:8px 0;padding:0}
.doclist li{padding:8px;border-bottom:1px solid #eee;display:grid;grid-template-columns:1fr auto;gap:16px}
.docbody{display:none;border:1px solid #ccc;background:#fffef7;padding:24px 32px;margin:16px 0;font:26px/1.7 "Times New Roman",Times,serif}
.docbody.open{display:block}
/* TASK-1395[Q]: the four documents head at h3 now.  The page went h2
   ("documents") straight to h4 four times, skipping a level for no reason
   except that this rule was written against h4.  Checked before moving them:
   every h3 rule in this sheet is scoped to .side, so an h3 in here inherits
   nothing and this one declaration is the whole of a document heading's paint
   either way -- the four render byte-identically.  h4 stays in the selector
   because #doc-survey, a self-contained artifact with its own heading system,
   still uses it and keeps its own level scheme. */
.docbody h3,.docbody h4{margin:0 0 14px;font:700 28px "Courier New",monospace}
.docbody pre{font:24px/1.6 "Courier New",monospace;white-space:pre-wrap;margin:0}
/* footer */
.ft{margin-top:36px;border-top:1px solid #ccc;padding-top:12px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;font-size:17px;color:#777}
.counter{display:inline-flex;gap:2px;cursor:default}
.counter b{font:700 24px "Courier New",monospace;background:#000;color:#7dff9a;padding:2px 6px}
.counter b.odd{color:#ff6600}
.badge{width:176px;height:62px;border:1px solid #999;background:#f2f2f2;display:grid;place-items:center;font-size:16px;color:#999;cursor:pointer;image-rendering:pixelated}
.badge span{border:1px solid #bbb;padding:0 6px;background:#fff}
/* rabbit (pixel art via box-shadow) */
#rabbit{position:fixed;right:calc(var(--page-inset-right,0px) + 64px);bottom:calc(var(--page-inset-bottom,0px) + 96px);width:8px;height:8px;cursor:pointer;display:none;filter:drop-shadow(0 0 2px #000)}
#rabbit i{position:absolute;width:4px;height:4px;transform:scale(2);transform-origin:top left;background:#fff;box-shadow:4px 0 #fff,0 4px #fff,4px 4px #fff,8px 4px #fff,0 8px #fff,4px 8px #fff,8px 8px #fff,12px 8px #fff,-4px 12px #fff,0 12px #fff,4px 12px #fff,8px 12px #fff,12px 12px #fff,0 16px #fff,4px 16px #fff,8px 16px #fff,4px -4px #fff,8px -8px #fff,8px -4px #fff}
/* door overlay */
/* TASK-1364[Q]: A FULL-SCREEN TAKEOVER, FILED WITH THE OTHER ONES.
   The user: "the carrier detected has broken z-indexing at the moment", with
   a shot of the Sign On window and METAMP floating over the terminal.
   z-index:50 put this UNDER the page's own window family (70-82), under the
   player at 76, and under the METScape chrome at 1001-1005 -- so the one
   element on the site whose entire job is to replace the screen was the only
   thing on it that could be covered by a dialog.
   THE BAND IS ALREADY WRITTEN DOWN, in browser-frame.css: ordinary page
   content stays under 300, the chrome takes 1001-1005 "while staying BELOW
   the deliberate full-screen takeovers at 1000000+", and an open arcade
   cabinet sits at 1000001 with its backdrop at 1000000. This is that same
   class of thing and was simply filed outside it. 1000002 puts it just over
   the cabinet -- they cannot both be up, since a door opens from a click on
   a page an open cabinet is covering, but a tie would be resolved by document
   order and that is not a thing to leave to chance.
   The boss-key cover keeps the maximum and still hides this, which is the
   one thing entitled to sit above everything.
   OVERFLOW, in the same rule, because the shell now carries a long piece of
   prose as well as the six-line doors: a fixed box with no scroll simply
   spills its last lines off the bottom of the screen where nothing can reach
   them. Shared rather than special-cased -- the doors want it too on a short
   window, which is the whole point of one scaffold. */
/* THE TERMINAL SIZES TO THE WINDOW (TASK-1364[Q]). 28px flat was chosen for
   scenes of three short lines, and the entry transmission is a page of prose:
   measured at 1297px of content in an 898px window, which put GO FORTH -- the
   one control that has to be found, and the gesture that starts the music --
   below the fold on an ordinary laptop. clamp keeps 28px wherever there is
   room for it and scales down where there is not, so a tall monitor sees
   exactly what it saw before and a short one sees the whole scene.
   SHARED, NOT SPECIAL-CASED: the doors get it too, which is the point of one
   scaffold and what the user asked for in as many words. They were equally
   capable of overflowing a short window; nobody had tried one. */
#door{position:fixed;inset:0;background:#000;color:#7dff9a;font:clamp(15px,2.1vh,28px)/1.7 "Courier New",monospace;display:none;z-index:1000002;padding:6vh 8vw;box-sizing:border-box;overflow:auto}
#door.open{display:block}
#door .crt{max-width:1120px}
#door .dim,#door .dopt{color:#35894d}
#door a{color:#7dff9a}
/* The scene heading, so its size scales with the rest instead of being
   pinned inline at 36px in three separate builders. */
#door .dhead{font-size:1.3em;letter-spacing:4px}
#door .y{display:inline-block;margin-top:20px;border:1px solid #7dff9a;padding:4px 24px;text-decoration:none}
#door .y:hover,#door .y.on{background:#7dff9a;color:#000}
/* TASK-1353[Q]: THE CARET CONSOLE. Not one colour value of its own: the
   dim rows join the .dim rule above in every theme and the lit row takes
   whatever #door is currently painted, so a fourth theme needs no line
   here. The caret is ALWAYS in the markup and merely invisible -- writing
   the character in and out would take its width with it and shunt every
   label sideways on each keypress, which is the jitter the house rules
   forbid and is wrong for a console besides. */
#door .dsel{margin-top:16px}
#door .dopt{display:flex;align-items:baseline;gap:.55em;padding:1px 0;cursor:pointer}
#door .dopt.on{color:inherit}
#door .dopt .dcar{font-style:normal;visibility:hidden}
#door .dopt.on .dcar{visibility:visible}
/* TASK-1354[Q]: sized in em rather than left at the door's own 16x28, so it
   matches the row's type at any viewport (#door's font is a clamp) and in
   every theme. align-self because a flex item aligned on the BASELINE is
   aligned by its bottom edge when it holds no text, which stands a
   full-height block on top of the line rather than beside it. */
#door .dopt .cursor{width:.5em;height:1.05em;margin-left:.3em;align-self:center;vertical-align:0}
/* TASK-1357[Q]: the wait. pre so the runs of spaces that line the readout
   up survive, and its own three short lines rather than one long one so a
   phone does not have to scroll sideways to read a progress bar. */
#door .dwait{margin-top:16px}
#door .dbar{white-space:pre}
#door .dwleft{margin-top:2px}
#door .dstop{margin-top:10px;cursor:pointer;display:inline-block}
#door .dstop:hover{color:inherit}
/* TASK-1358[Q]: the toast. 1000003 because #door is 1000002 and is still
   open at the only moment this is ever shown; the boss key's cover stays far
   above both. Type sizes are the house floor rather than the 10px an
   achievement chip usually gets: the label is text somebody has to read.
   Colours are the door's own, so it belongs to the same terminal. */
#dtoast{position:fixed;right:calc(var(--page-inset-right,0px) + 18px);bottom:calc(var(--page-inset-bottom,0px) + 18px);z-index:1000003;
 background:#000;border:1px solid #7dff9a;color:#7dff9a;
 font:12px/1.45 "Courier New",monospace;padding:10px 16px 11px;
 box-shadow:4px 4px 0 rgba(0,0,0,.55);cursor:pointer;
 max-width:min(78vw,360px);opacity:0;transform:translateY(10px);
 transition:opacity .3s ease,transform .3s ease}
#dtoast.on{opacity:1;transform:none}
#dtoast .dtlabel{font-size:12px;letter-spacing:3px;color:#35894d}
#dtoast .dtname{font-size:17px;letter-spacing:1px;margin-top:3px}
body.neon #dtoast{border-color:#f2c200;color:#f2c200}
body.neon #dtoast .dtlabel{color:#8a835f}
body.dxhr #dtoast{border-color:#f0b13e;color:#f0b13e}
body.dxhr #dtoast .dtlabel{color:#9a7726}
#door .x{position:absolute;top:14px;right:20px;color:#35894d;text-decoration:none}
.cursor{display:inline-block;width:16px;height:28px;background:#7dff9a;vertical-align:-4px;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
.page{display:none}.page.on{display:block}
.locked td{color:#aaa}.locked a{color:#aaa;pointer-events:none;text-decoration:none}
.locked .hint{cursor:help;border-bottom:1px dotted #aaa}
/* identify window — period system-dialog style */
#idwin{position:fixed;inset:0;display:none;z-index:60;place-items:center;pointer-events:none}
#idwin.open{display:grid}
#idwin .win{width:640px;background:#e8e8e8;border:2px outset #fff;box-shadow:6px 6px 0 rgba(0,0,0,.4);font:18px Michroma,Verdana,sans-serif;color:#000}
#idwin .bar{display:flex;align-items:center;gap:10px;background:#000080;color:#fff;padding:6px 12px;font:24px/1 "Bebas Neue","Arial Narrow",Verdana,sans-serif;letter-spacing:2px}
#idwin .bar .bx{margin-left:auto;border:2px outset #fff;background:#e8e8e8;color:#000;width:32px;height:28px;font:700 18px Verdana,sans-serif;cursor:pointer;padding:0}
#idwin .body{padding:20px 22px}
#idwin .body label{display:block;margin-bottom:10px}
#idwin input{width:100%;box-sizing:border-box}
#idwin .row{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}
#idwin .msg{margin-top:12px;font-size:16px;color:#7a0000;min-height:24px}
body.dxhr #idwin .win{background:#241c0e;border-color:#4a3b1a;color:#d6cbb2}
body.dxhr #idwin .bar{background:#e8a33d;color:#1a1204}
body.dxhr #idwin .bar .bx{background:#241c0e;border-color:#4a3b1a;color:#d8b25a}
body.dxhr #idwin .msg{color:#d4794a}
body.dark #idwin .win{background:#111;border-color:#555;color:#c0c0c0}
body.dark #idwin .msg{color:#ff7777}
/* ad blocker */
.adblk{width:936px;box-sizing:border-box;margin:4px auto 6px;border:1px dashed #999;padding:18px 24px;font:16px "Courier New",monospace;color:#777;text-align:center}
.adblk b{letter-spacing:1px}
body.neon .adblk{border-color:#4a4526;color:#8a835f}
body.neon .adblk b{color:#f2c200}
body.dxhr .adblk{border-color:#4a3b1a;color:#8a7f68}
body.dxhr .adblk b{color:#d8b25a}
body.dark .adblk{border-color:#335577;color:#888}
body.dark .adblk b{color:#00ffff}
/* pseudo banner ads (468x60 @2x) */
.adrow{margin:20px 0 6px;text-align:center}
.adrow .adlbl{font-size:14px;color:#999;letter-spacing:3px;text-transform:uppercase}
.adslot{width:936px;height:120px;margin:4px auto 6px;position:relative;border:1px solid #999;background:#000;overflow:hidden}
.bnr{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:28px;text-decoration:none;cursor:pointer}
.bnr.on{display:flex}
.adslot a.bnr1{background:#000;color:#fff;font:italic 30px Georgia,"Times New Roman",serif}
.bnr1 .yw{font:22px Verdana,sans-serif;font-style:normal;font-weight:700;color:#000;background:linear-gradient(90deg,#ff0000,#ff9900,#ffff00,#00cc00,#0099ff,#9900ff);padding:8px 18px;border:2px outset #fff}
.adslot a.bnr2{background:#000080;color:#fff}
.bnr2 .n{font:64px/1 "Bebas Neue",sans-serif;letter-spacing:3px}
.bnr2 .burst{width:104px;height:104px;background:#ffff00;color:#cc0000;clip-path:polygon(50% 0,61% 20%,82% 8%,80% 32%,100% 35%,86% 52%,100% 68%,78% 68%,80% 92%,60% 80%,50% 100%,40% 80%,20% 92%,22% 68%,0 68%,14% 52%,0 35%,20% 32%,18% 8%,39% 20%);display:grid;place-items:center;font:800 20px Verdana,sans-serif;transform:rotate(-12deg)}
.adslot a.bnr3{background:repeating-linear-gradient(45deg,#ffff00 0 24px,#ff0000 24px 48px);}
.bnr3 .inner{background:#fff;border:3px dashed #ff0000;padding:8px 24px;font:800 26px Verdana,sans-serif;color:#cc0000}
.bnr3 .inner .ch{background:#00cc00;color:#fff;padding:4px 14px;border:2px outset #fff;font-size:22px;white-space:nowrap}
.adslot a.bnr4{background:linear-gradient(#003300,#001100);color:#7dff9a;font:24px "Courier New",monospace}
.bnr4 .q{border:1px solid #7dff9a;padding:6px 16px}
.adslot a.bnr5{background:#e8e8e8;color:#666;font:20px "Courier New",monospace;border:0}
/* TASK-1391[Q]: THE PER-BANNER HOVER ALREADY WINS, so these four copies were
   not needed and were doing harm. The rule existed to stop
   body.neon a:hover{background:#f2c200} flooding a banner with taxi yellow --
   but that selector is (0,2,1) and every .adslot a.bnrN:hover below is
   (0,3,1), so the per-banner background already beat it without help.

   What the themed copies actually did, at (0,4,2), was beat the per-banner
   rules themselves: background:inherit pulled .adslot{background:#000} and
   flattened all five banners to black on hover in neon, dxhr and dark, while
   the per-banner COLOR survived from the losing rule. On bnr5 that left #666
   on #000 -- 3.66:1, under the floor, in three skins out of four, on a
   surface that is meant to be hovered because clicking a banner is one of the
   doors. dxhr and dark never set a hover background at all, so they had
   nothing to guard against in the first place.

   A SIXTH BANNER MUST BRING ITS OWN :hover BACKGROUND. That is the pattern
   here, and it is what keeps the neon rule from reaching one. */
.adslot a.bnr:hover{text-shadow:none}
.adslot a.bnr1:hover{background:#000;color:#fff}.adslot a.bnr2:hover{background:#000080;color:#fff}.adslot a.bnr3:hover{background:repeating-linear-gradient(45deg,#ffff00 0 24px,#ff0000 24px 48px)}.adslot a.bnr4:hover{background:linear-gradient(#003300,#001100);color:#7dff9a}.adslot a.bnr5:hover{background:#e8e8e8;color:#666}
.addots{display:inline-flex;gap:10px}
.addots i{width:14px;height:14px;border:1px solid #999;cursor:pointer}
.addots i.on{background:#999}
/* micro badges (88x31 @2x) */
.badges{display:flex;gap:12px;align-items:center}
.mbadge{width:176px;height:62px;box-sizing:border-box;padding:4px 12px;display:grid;place-items:center;text-align:center;font:700 15px/1.15 Verdana,sans-serif;text-decoration:none;image-rendering:pixelated;border:2px outset #ddd}
.mb1{background:#000080;color:#fff}.mb1 b{color:#ffff00}
.mb2{background:#000;color:#0f0;font-family:"Courier New",monospace}
.mb3{background:linear-gradient(#666,#222);color:#fff}
/* marquee + blink */
.mq{border:1px solid #ddd;background:#f6f6f6;margin:14px 0 0;padding:4px 0;font-size:17px;color:#555}
.blink{animation:bl 1.2s steps(1) infinite}
/* webring */
.ring{margin-top:30px;border:1px solid #9db8d2;background:#f2f7fc;padding:14px 20px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font-size:17px}
.ring .rb{font:20px/1 "Bebas Neue","Arial Narrow",Verdana,sans-serif;letter-spacing:2px;border:2px solid;padding:6px 10px 4px}
.ring nav{display:flex;gap:18px;margin-left:auto}
/* guestbook */
.gb{list-style:none;margin:8px 0;padding:0}
.gb li{border:1px solid #ddd;padding:12px 16px;margin-bottom:12px}
.gb .h{display:flex;gap:16px;font-size:17px;color:#777;margin-bottom:4px}
.gb .h b{color:inherit;font-size:19px}
.gbform{border:1px solid #ddd;padding:14px 16px;margin-top:20px;display:grid;gap:10px;max-width:900px}
.gbform label{font-size:17px;color:#8a8a8a}
/* midi player */
.midi{margin-left:auto;display:flex;align-items:center;gap:10px;font:16px "Courier New",monospace;padding:2px 8px;cursor:pointer;user-select:none}
.midi .eq{display:inline-flex;gap:2px;align-items:flex-end;height:18px}
.midi .eq i{width:4px;background:currentColor;height:4px}
.midi.on .eq i{animation:eq .5s infinite alternate}
.midi.on .eq i:nth-child(2){animation-duration:.34s}.midi.on .eq i:nth-child(3){animation-duration:.42s}.midi.on .eq i:nth-child(4){animation-duration:.27s}
@keyframes eq{from{height:4px}to{height:16px}}
/* dark theme — classic netscape black: text silver, links cyan, visited magenta */
body.dark,body.dark .browser-viewport{background:#000;color:#c0c0c0}
body.dark a{color:#00ffff}body.dark a:visited{color:#ff00ff}body.dark a:hover{color:#ff6600}
body.dark .hd{border-color:#ff6600}
body.dark .tabs{background:#001c33;border-top-color:#000}
body.dark .tabs a.on{color:#fff}
body.dark h2{border-bottom-color:#333}
body.dark h2 .sub,body.dark .small,body.dark .posts .meta{color:#888}
body.dark hr{border-top-color:#333}
body.dark th{background:#001c33;border-color:#335577;color:#c0c0c0}
body.dark td{border-color:#333}
body.dark tr:nth-child(even) td{background:#0d0d0d}
body.dark .posts li{border-bottom-color:#222}
body.dark .posts li::before{color:#888}
body.dark .k-game{color:#33ff99;border-color:#33ff99;background:transparent}
body.dark .k-tool{color:#ffb347;border-color:#ffb347;background:transparent}
body.dark .k-doc{color:#aaa;border-color:#777;background:transparent}
body.dark .side{background:#0a0f1a;border-color:#335577}
body.dark .side h3{color:#7da7d9}
body.dark .side dt{color:#888}
body.dark .side hr{border-top-color:#223a52}
body.dark .doclist li{border-bottom-color:#222}
body.dark .docbody{background:#0d0d0d;border-color:#444;color:#ddd}
body.dark .ft{border-top-color:#333;color:#888}
body.dark .badge{background:#111;border-color:#555;color:#777}
body.dark .badge span{background:#000;border-color:#555}
body.dark .locked td{color:#888}body.dark .locked a{color:#888}
body.dark .locked .hint{border-bottom-color:#555}
body.dark input[type=text],body.dark input[type=search]{background:#111;color:#c0c0c0;border-color:#666}
body.dark .btn{background:#333;color:#c0c0c0;border-color:#666}
body.dark .mq{background:#0d0d0d;border-color:#333;color:#888}
body.dark .ring{background:#0a0f1a;border-color:#335577}
body.dark .gb li,body.dark .gbform{border-color:#333}
body.dark .gb .h{color:#888}
/* grey theme — 1995 web 1.0: silver page, Times New Roman, groove rules, default link colors */
body.grey,body.grey .browser-viewport{background:#cbcbcb;color:#000;font-family:"Times New Roman",Times,serif}
body.grey a{color:#0000ee;text-decoration:underline}body.grey a:visited{color:#551a8b}body.grey a:hover{color:#0000ee}
body.grey .hd{border:0;background:#cbcbcb}
body.grey .hd-top{color:#000}
body.grey .logo{background:#00807f;border:2px outset #9adfdf;color:#fff;font-family:"Times New Roman",Times,serif;font-weight:700}
body.grey .hd-top strong{font-family:"Times New Roman",Times,serif;letter-spacing:0;font-size:34px}
body.grey .hd-top .tag,body.grey .hd-top .who{color:#333;border-color:#333}
body.grey .tabs{background:#cbcbcb;border-top:0;justify-content:center;gap:4px}
body.grey .tabs a:first-child::before{content:"[";margin-right:10px}
body.grey .tabs a:last-of-type::after{content:"]";margin-left:10px}
body.grey .tabs a:first-child::before,body.grey .tabs a:last-of-type::after{color:#000;text-decoration:none;display:inline-block}
body.grey .bbtn .ic{display:none}
body.grey .midi .eq{display:none}
body.grey .midi.on .eq{display:inline-flex}
body.grey .bbtn{background:none;border:0;padding:4px 6px;color:#0000ee;text-decoration:underline;font-family:"Times New Roman",Times,serif;font-weight:700;letter-spacing:0;font-size:22px}
body.grey .bbtn+.bbtn,body.grey .tabs span+a.bbtn{position:relative;margin-left:18px}
body.grey .bbtn+.bbtn::before,body.grey .tabs span+a.bbtn::before{content:"|";color:#000;position:absolute;left:-13px;top:4px;text-decoration:none}
body.grey .tabs>span:not(.midi){display:none}
body.grey .tabs .bbtn.on{border:0;color:#000;text-decoration:none}
body.grey .tabs a i{color:#333}
/* TASK-1386[Q]: A HEADING IS NOT A LINK, and this one was wearing the whole
   costume: #0000ee is the default link blue exactly, and the underline was a
   text-decoration rather than the border-bottom every other theme keeps. Blue
   plus underlined on something unclickable is a false affordance -- the same
   complaint TASK-1365[Q] answered in the wiki, in a second place.

   AND IT SPREAD ACROSS THE WHOLE LINE FOR A REASON WORTH KNOWING: a
   text-decoration set on a BLOCK is drawn across every in-flow inline
   descendant, and a descendant CANNOT take it off -- text-decoration:none on
   a child is inert against an ancestor that declared it. The rule below tried
   exactly that on .sub and it silently did nothing, which is why the italic
   gloss was underlined too. (The spec escape is an atomic inline such as
   display:inline-block, not text-decoration:none.)

   So the heading gets back the border-bottom rule the other three themes
   never gave up -- a line UNDER a heading reads as a heading rule, not as a
   link -- and the text carries no decoration at all. */
/* TASK-1391[Q]: 1.76:1 in the skin that SHIPS BY DEFAULT. .adlbl is #999 and
   never re-themed, which is fine on the three dark grounds (6.9 to 8.4:1)
   and nearly invisible on this one. It is not decoration either: the
   [unblock] control lives inside it at color:inherit, and that control is
   the only way into the ad slot -- which is one of the eight doors. #4a4a4a
   measures 5.46:1 here and changes nothing in any other skin. */
body.grey .adrow .adlbl{color:#4a4a4a}
body.grey h2{font-family:"Times New Roman",Times,serif;letter-spacing:0;font-weight:700;font-variant:small-caps;text-decoration:none;border-bottom:1px solid #9a9a9a;color:#1b2a4a}
/* TASK-1391[Q]: ...and the COLOUR goes with the underline. #0000ee is the
   default link blue exactly -- byte for byte the same value body.grey a uses
   twenty lines up -- so removing the underline left a heading still wearing
   half the costume. The premise the old note gave for keeping it ("every h2
   heads a section you can click through to") is not true of this markup:
   <h2>games <span class="sub">...</span></h2> contains no anchor at all.

   Two other files were already patching around it rather than living with
   it -- metaeden-v4-game.css overrides it to inherit, quoting the user
   ("Make the game title not blue and highlighted (otherwise it looks like a
   link, and it's not)"), and metaeden-wud.js names it as the visible
   remainder still landing on the game. When two downstream files work around
   a value, the value is the bug.

   #1b2a4a is 8.77:1 on this theme ground against the old 5.79:1, so the
   heading is both more legible and no longer a promise the page cannot
   keep. */
/* ...and the inert text-decoration:none is GONE rather than left sitting
   there. A declaration that cannot do what it says is worse than no
   declaration: it reads as the problem being handled. */
body.grey h2 .sub{font-family:"Times New Roman",Times,serif;font-style:italic;font-variant:normal}
body.grey h2 .sub,body.grey .small,body.grey .posts .meta{color:#444}
body.grey hr{border:0;border-top:1px solid #888}
body.grey th{background:transparent;border:0;border-bottom:1px solid #888;color:#000;font-family:"Times New Roman",Times,serif;letter-spacing:0;font-weight:700;font-variant:small-caps;font-size:24px}
body.grey td{border:0;border-bottom:1px solid #aaa;background:transparent}
body.grey tr:nth-child(even) td{background:transparent}
body.grey .posts li{border-bottom:0}
body.grey .posts li::before{color:#555}
body.grey .k-game{color:#006600;border-color:#006600;background:transparent}
body.grey .k-tool{color:#883300;border-color:#883300;background:transparent}
body.grey .k-doc{color:#333;border-color:#555;background:transparent}
body.grey .side{background:#cbcbcb;border:0;border-top:1px solid #888;border-bottom:1px solid #888}
body.grey .side h3{color:#000;font-family:"Times New Roman",Times,serif;letter-spacing:0;font-weight:700;font-variant:small-caps;font-size:24px}
body.grey .side dt{color:#444}
body.grey .side hr{border-top:1px solid #aaa}
body.grey .doclist li{border-bottom:1px solid #aaa}
body.grey .docbody{background:#cbcbcb;border:0;border-top:1px solid #888;border-bottom:1px solid #888;color:#000}
body.grey .mq{background:transparent;border:0;color:#333;font-family:"Times New Roman",Times,serif;font-style:italic;text-align:center}
body.grey .ring{background:#cbcbcb;border:0;border-top:1px solid #888;border-bottom:1px solid #888}
body.grey .ring .rb{font-family:"Times New Roman",Times,serif;letter-spacing:0;font-weight:700;font-variant:small-caps;border:0;text-decoration:underline}
body.grey .gb li,body.grey .gbform{border:0;border-bottom:1px solid #aaa}
body.grey .gb .h{color:#444}
body.grey .ft{border-top:3px double #888;color:#444}
body.grey .badge{background:#c3c3c3;border-color:#888;color:#555}
body.grey .badge span{background:#cbcbcb;border-color:#888}
body.grey .adblk{border-color:#888;color:#444}body.grey .adblk b{color:#000}
body.grey .locked td{color:#525252}body.grey .locked a{color:#525252}
body.grey .locked .hint{border-bottom-color:#777}
body.grey input[type=text],body.grey input[type=search]{background:#fff;color:#000;border:2px inset #fff;font-family:"Times New Roman",Times,serif}
body.grey .btn{background:#c0c0c0;color:#000;border:2px outset #fff;font-family:"Times New Roman",Times,serif}
body.grey #idwin .win{background:#c0c0c0;border-color:#fff;color:#000;font-family:"Times New Roman",Times,serif}
body.grey #idwin .bar{background:#000080;color:#fff;font-family:"Times New Roman",Times,serif;letter-spacing:0;font-weight:700}
body.grey #idwin .bar .bx{background:#c0c0c0;border-color:#fff;color:#000}
body.grey .midi{color:#333}
/* neon theme — DXHR artbook: flat taxi-yellow blocks, black, olive-green, red laser accents */
body.neon,body.neon .browser-viewport{background:#0c0b07;color:#d9cfa8}
body.neon a{color:#f2c200}body.neon a:visited{color:#a68a1a}body.neon a:hover{color:#fff;background:#f2c200;color:#111}
body.neon .hd{border-color:#f2c200;background:#0c0b07}
body.neon .hd-top{background:#f2c200;color:#111}
body.neon .logo{background:#111;border-color:#111;color:#f2c200}
body.neon .hd-top .tag{color:#5a4a00}
body.neon .hd-top .who{color:#111;border-color:#5a4a00}
body.neon .tabs{background:#111;border-top-color:#000}
body.neon .tabs a{color:#f2c200}
body.neon .tabs a.on{color:#fff}
body.neon h2{border-bottom-color:#f2c200;color:#f2c200}
body.neon h2 .sub,body.neon .small,body.neon .posts .meta{color:#8a835f}
body.neon hr{border-top-color:#33301a}
body.neon th{background:#f2c200;border-color:#b89400;color:#111}
body.neon td{border-color:#33301a}
body.neon tr:nth-child(even) td{background:#12110a}
body.neon .posts li{border-bottom-color:#26240f}
body.neon .posts li::before{color:#8a835f}
body.neon .k-game{color:#9ab52e;border-color:#9ab52e;background:transparent}
body.neon .k-tool{color:#f2c200;border-color:#f2c200;background:transparent}
body.neon .k-doc{color:#8a835f;border-color:#5a5538;background:transparent}
body.neon .side{background:#12110a;border-color:#4a4526;border-left:4px solid #f2c200}
body.neon .side h3{color:#f2c200}
body.neon .side dt{color:#8a835f}
body.neon .side hr{border-top-color:#26240f}
body.neon .doclist li{border-bottom-color:#26240f}
body.neon .docbody{background:#12110a;border-color:#4a4526;color:#ddd3ab}
body.neon .ft{border-top-color:#33301a;color:#8a835f}
body.neon .counter b{background:#000;color:#f2c200}
body.neon .counter b.odd{color:#e03a1a}
body.neon .badge{background:#12110a;border-color:#5a5538;color:#8a835f}
body.neon .badge span{background:#0c0b07;border-color:#5a5538}
body.neon .locked td{color:#8a835f}body.neon .locked a{color:#8a835f}
body.neon .locked .hint{border-bottom-color:#4a4526}
body.neon input[type=text],body.neon input[type=search]{background:#12110a;color:#d9cfa8;border-color:#4a4526}
body.neon .btn{background:#f2c200;color:#111;border-color:#b89400}
body.neon #door{color:#f2c200}body.neon #door .dim,body.neon #door .dopt{color:#8a835f}body.neon #door a{color:#f2c200}
body.neon #door .y{border-color:#f2c200}body.neon #door .y:hover,body.neon #door .y.on{background:#f2c200;color:#000}
body.neon .cursor{background:#f2c200}
body.neon #idwin .win{background:#12110a;border-color:#4a4526;color:#d9cfa8}
body.neon #idwin .bar{background:#f2c200;color:#111}
body.neon #idwin .bar .bx{background:#111;border-color:#4a4526;color:#f2c200}
body.neon #idwin .msg{color:#ef5a34}
body.neon .mq{background:#12110a;border-color:#33301a;color:#8a835f}
body.neon .ring{background:#12110a;border-color:#4a4526;border-left:4px solid #f2c200}
body.neon .ring .rb{color:#f2c200}
body.neon .gb li,body.neon .gbform{border-color:#33301a}
body.neon .gb .h{color:#8a835f}
/* DXHR theme (default) — black & gold, warm renaissance-tech */
body.dxhr,body.dxhr .browser-viewport{background:#0d0b08;color:#cbc0a8}
body.dxhr a{color:#f0b13e}body.dxhr a:visited{color:#9c7626}body.dxhr a:hover{color:#ffd97a}
body.dxhr .hd{border-color:#e8a33d;background:#e8a33d}
body.dxhr .hd-top{color:#1a1204}
body.dxhr .logo{background:#0d0b08;border-color:#0d0b08;color:#f0b13e}
body.dxhr .hd-top .tag,body.dxhr .hd-top .who{color:#3a2a08;border-color:#3a2a08}
body.dxhr .tabs{background:#1a1508;border-top-color:rgba(0,0,0,.5)}
body.dxhr .tabs a{color:#d8b25a}
body.dxhr .tabs a.on{color:#ffd97a}
body.dxhr h2{border-bottom-color:#3a3020}
body.dxhr h2 .sub,body.dxhr .small,body.dxhr .posts .meta{color:#8a7f68}
body.dxhr hr{border-top-color:#3a3020}
body.dxhr th{background:#241c0e;border-color:#4a3b1a;color:#d8b25a}
body.dxhr td{border-color:#2a2418}
body.dxhr tr:nth-child(even) td{background:#16120c}
body.dxhr .posts li{border-bottom-color:#241e12}
body.dxhr .posts li::before{color:#8a7f68}
body.dxhr .k-game{color:#c8b06a;border-color:#c8b06a;background:transparent}
body.dxhr .k-tool{color:#f0b13e;border-color:#f0b13e;background:transparent}
body.dxhr .k-doc{color:#8a7f68;border-color:#6a6050;background:transparent}
body.dxhr .side{background:#141008;border-color:#4a3b1a}
body.dxhr .side h3{color:#d8b25a}
body.dxhr .side dt{color:#8a7f68}
body.dxhr .side hr{border-top-color:#2e2614}
body.dxhr .doclist li{border-bottom-color:#241e12}
body.dxhr .docbody{background:#12100a;border-color:#4a3b1a;color:#d6cbb2}
body.dxhr .ft{border-top-color:#3a3020;color:#8a7f68}
body.dxhr .counter b{background:#000;color:#f0b13e}
body.dxhr .counter b.odd{color:#fff}
body.dxhr .badge{background:#16120c;border-color:#4a3b1a;color:#8a7f68}
body.dxhr .badge span{background:#0d0b08;border-color:#4a3b1a}
body.dxhr .locked td{color:#8a7f68}body.dxhr .locked a{color:#8a7f68}
body.dxhr .locked .hint{border-bottom-color:#5a5040}
body.dxhr input[type=text],body.dxhr input[type=search]{background:#16120c;color:#d6cbb2;border-color:#4a3b1a}
body.dxhr .btn{background:#241c0e;color:#d8b25a;border-color:#4a3b1a}
body.dxhr .mq{background:#141008;border-color:#3a3020;color:#8a7f68}
body.dxhr .ring{background:#141008;border-color:#4a3b1a}
body.dxhr .gb li,body.dxhr .gbform{border-color:#2a2418}
body.dxhr .gb .h{color:#8a7f68}
body.dxhr #door{color:#f0b13e}
body.dxhr #door .dim,body.dxhr #door .dopt{color:#9a7726}
body.dxhr #door a{color:#f0b13e}
body.dxhr #door .y{border-color:#f0b13e}
body.dxhr #door .y:hover,body.dxhr #door .y.on{background:#f0b13e;color:#000}
body.dxhr .cursor{background:#f0b13e}


/* accessibility: prefers-reduced-motion (HANDOFF 4.4). the marquee is a
   real <marquee> element -- metaeden-v4.js zeroes its scrollamount, and the
   same file collapses the scramble, the typing effect, the ghost-cursor
   flight and the MET-list slide to instant state changes. */
@media (prefers-reduced-motion: reduce){
  .blink,.cursor,.counter b.odd,.midi.on .eq i{animation:none !important}
  .cursor{opacity:1}
  #ghostcur{transition:none !important}
  /* TASK-1358[Q]: it arrives rather than slides. */
  #dtoast{transition:none !important;transform:none !important}
  #ghostring .grbox{animation:none !important}
  #buddywin,#imwin,#pixwin{transition:none !important}
  #aolprog .pic svg .fg,#aolprog .pic svg .bolt{transition:none !important}
}
/* --- Pixel: welcoming-committee IM window + chain-letter survey (v4.3) --- */
/* TASK-1360[Q]: the second of the stack, one step down and left. */
#pixwin{position:fixed;right:calc(var(--page-inset-right,0px) + 607px);top:calc(var(--page-inset-top,0px) + 460px);width:380px;display:none;z-index:74}
#pixwin.open{display:block}
#pixwin .tb{cursor:move;user-select:none;touch-action:none}
#pixlog{margin:8px;background:#fff;border:2px inset #fff;height:200px;overflow-y:auto;padding:6px 8px;font:13px Tahoma,Verdana,sans-serif;color:#000}
#pixlog p{margin:0 0 5px}
#pixlog .pn{color:#cc2288;font-weight:700}
#pixlog .un{color:#0000cc;font-weight:700}
#pixlog .typ,#pixlog .sys{color:#767676;font-style:italic}
#pixlog .sys{text-align:center}
#pixchoices{display:grid;gap:5px;margin:0 8px 10px}
#pixchoices button{text-align:left;font:12px Tahoma,Verdana,sans-serif;background:#e8e8e8;border:2px outset #fff;padding:5px 9px;cursor:pointer;color:#000}
#pixchoices button:active{border-style:inset}
/* TASK-1068[Q]: her message box, value for value #imform's -- same hidden
   default, same 8px gutter, same sunken 13px field.  Two windows that offer
   the same thing must not offer it in two different sizes. */
#pixform{display:none;margin:0 8px 10px}
#pixform input{width:100%;box-sizing:border-box;font:13px Tahoma,Verdana,sans-serif;border:2px inset #fff;background:#fff;color:#000;padding:4px 6px}
/* --- TASK-1081[Q] + TASK-1085[Q]: THE MARK ---------------------------------
   The blanks in the survey that a profile cannot be built without, and how they
   say so.

   TASK-1085[Q] REDREW IT, and the redraw is the point rather than a polish.  It
   was a plain 5px rule down the left of the row, which is what a form validator
   draws.  This document is a chain letter whose own header says FWD: FWD: FWD:
   and whose own footer says it has been forwarded 4,217 times, and the mark a
   forwarded line wore in 1998 was the quote caret the mailer stacked in front
   of it.  So a required row now carries >>> in its margin: the same mark the
   title is made of, borrowed from the artifact instead of imported from a form.

   ONE ACCENT, ONE DECLARATION PER THEME.  --svacc is the survey's entire colour
   decision and every accented thing reads it -- the carets, the NEEDED tag, the
   refusal lines, the count, the loud counter's rule.  A theme sets it once, a
   sixth consumer added later needs no theme work at all, and the notepad skin
   at the foot of this file re-skins every one of them by setting ONE value.
   The hexes are TASK-1081's, unchanged, so its certification below still holds.

   NO JITTER, BY CONSTRUCTION, and more strongly than the stripe managed.  The
   carets are ::before content positioned ABSOLUTELY inside a gutter that every
   .svq reserves with the same padding-left, marked or not -- out of flow
   entirely, so they cannot move the row, its neighbours, or anything after them
   in any state.  (The stripe was a transparent border of equal width in both
   states: correct, but still a participant in the box model.)  The met/unmet
   swap is COLOUR ONLY, on the carets and on the tag, and .svtag is still an
   inline-block with a min-width wide enough for the longer of NEEDED / FILLED
   so even the proportional face cannot reflow the label around it.

   CONTRAST, CHECKED against each theme's own .docbody background: #8c0046 on
   the default #fffef7 is 9.4:1, #ff8ac4 on dark's #0d0d0d is 9.0:1, #7a0f45 on
   grey's #cbcbcb is 6.5:1, #f2c200 on neon's #12110a is 11.3:1 and #f0b13e on
   dxhr's #12100a is 10.0:1.  All well over the 4.5 floor, and no rgba() under
   an opacity anywhere in the block.
   NOTHING UNDER 12px: the carets are 20px, the tag 15px, the legend and the
   refusal lines 17px, and the select inherits the 20px the text inputs are
   already pinned at.
   The met state paints the tag AND the carets in the row's own text colour
   (inherit) rather than a sixth palette entry per theme: loud means still owed,
   quiet means done, and the carets stay on the row so a blank that mattered
   still reads as one after it is answered.
   COLOUR IS NEVER THE ONLY SIGNAL.  The carets are decoration on top of the
   word NEEDED, which sits inside the label and is what a reader who sees no
   colour at all is told; that split is why the carets may be generated content
   and the tag may not. */
/* TASK-1100[Q] round 4: `.docbody{--svacc:#8c0046}` WAS HERE and the accent now
   lives with every other survey token on #doc-survey itself, at the foot of
   THE FORWARDED LETTER below.  The value is unchanged; what changed is that it
   is declared on the one element that has a survey in it rather than on a class
   four theme blocks then argued with.  Nothing outside the survey ever read it
   -- .svtag, .svmsg, .svnum, .svtally and .svheld are survey classes -- so this
   is a move rather than a removal of reach.  Recover from git at 3b0002b26. */
/* TASK-1100[Q] round 3: FIVE RULES WERE HERE AND ALL FIVE ARE GONE.  The block
   above used to describe the mark as well as the accent: `.docbody .svq` held
   the gutter (`margin:10px 0;padding-left:48px;position:relative`) and three
   `::before` rules drew `>>>` in it, transparent by default, in --svacc on a
   required row and in the row's own ink once that row was answered.
   WHY IT COULD NOT SURVIVE THE USER'S THIRD REPORT.  They asked for forwarded-
   mail `>>` prefixes on EVERY line.  The moment every line carries the mark,
   the mark cannot also mean "this blank is owed" -- there is nothing left for
   it to contrast with.  So the gutter became THE QUOTE GUTTER (below, in the
   round-3 block), which draws two marks on every line of every block in the
   letter's body in both views, and the required signal moved to the pen, which
   is where the user asked to see it.  The word NEEDED inside the label is
   untouched and is still what a reader who sees no colour at all is told.
   The paragraph above this one still describes the ACCENT and is still true of
   it; only its sentences about the carets have been overtaken.  (Recover the
   five rules from git history at 141835c3c if a caret-per-required-row is ever
   wanted again.  It will not be: it cannot say anything on a page where every
   line already wears the same mark.)
   TASK-1100[Q] round 2: `.docbody .svq label{display:block;margin-bottom:2px}`
   was HERE and is deleted rather than left shadowed.  Both of its declarations
   had been dead since round 1 -- `#doc-survey .svq label` sets display and a
   full margin, .svq exists only inside the survey, and the survey is always
   #doc-survey -- so it changed nothing on any page.  What it did do was make
   "no view stacks the answer under its question" false as a statement about the
   file, which is the exact class of thing the notepad skin got away with for a
   whole round.  A rule that cannot win is not harmless if somebody later
   changes what wins.  (Recover from git history if a .svq is ever needed
   outside the survey; it never has been.) */
.docbody .svtag{display:inline-block;min-width:6.2em;font:700 15px Verdana,sans-serif;
  letter-spacing:1px;vertical-align:middle;color:var(--svacc)}
.docbody .svq.req.got .svtag{color:inherit}
/* TASK-1100[Q] round 4: the legend is BLACK, which was the white paper's own
   value before there was only one paper.  #5a5a5a was chosen against #fffef7,
   the paper this survey no longer has; on white it would still clear the floor
   at 7.0:1, but the view the user kept had already decided this line reads as
   ink rather than as a note, and there is no longer a second view to disagree.
   The family in the shorthand is overridden by the body rule further down --
   what this supplies is the SIZE and the leading. */
.docbody .svlegend{font:17px/1.5 Verdana,sans-serif;color:#000;margin:10px 0 0}
/* TASK-1100[Q] round 4: `.docbody .svskin{margin:10px 0 0}` WAS HERE.  It
   reserved the row for the view-toggle button, and the button is gone with the
   second view -- see svHTML, where the same deletion is argued from the markup
   side.  Deleted rather than left: a rule holding space for an element nothing
   emits is the same class of lie as a class nothing can remove.
   Recover from git at 3b0002b26. */
/* the refusal line keeps its two rows whether it is saying anything or not, so
   a refused KEEP GOING does not shove the section under it down the page. */
.docbody .svmsg{height:52px;overflow-y:auto;margin:8px 0 0;font:17px/1.5 Verdana,sans-serif;color:var(--svacc)}
/* TASK-1100[Q] round 3: the `font` SHORTHAND is gone from the three answer
   controls and only the two things it was really saying are left.  It named
   "Courier New" and the user has now asked for the whole body of the letter in
   the informal face, so a family declared here would be the one thing standing
   between them and that; the family is set once, for every element in the body
   at once, in THE HAND THAT WROTE IT below.  Size and slant stay exactly as
   they were -- 20px and italic -- because those are what the user asked to
   KEEP, and because a shorthand would also reset line-height to normal and the
   quote gutter's tile pitch is measured in the block's own ems. */
.docbody .svq select{font-size:20px;font-style:italic;max-width:100%}
/* the OPTIONS keep a real fill and real ink whatever the closed control is
   doing: the popup is drawn by the OS over its own surface, so a transparent
   background and a pale theme ink there is a list nobody can read. */
.docbody .svq select option{background:#fff;color:#000}
/* TASK-1100[Q] round 4: EIGHT RULES WERE HERE AND ALL EIGHT ARE GONE -- four
   per-theme accents (#ff8ac4 dark, #7a0f45 grey, #f2c200 neon, #f0b13e dxhr)
   and the four `body.x .docbody .svlegend{color:inherit}` lines that went with
   them.  The user: "the only view i care about now is the white background one
   that looks like a plain text old school email, you can get rid of any other
   views."  The survey has ONE paper now and it is white, so it has one accent,
   and a theme has nothing left to say to it.
   THE FIVE-WAY ARITHMETIC IS THE THING THAT WENT, not just four hex values.
   Every one of those existed to reconcile the survey against a paper that
   changed underneath it; with the paper fixed there is no reconciling left to
   do, which is why this deletion is larger than it looks and why the whole
   contrast argument in the blocks below shrank with it.
   The four themes still repaint every OTHER document on the shelf -- see
   `body.dark .docbody` and friends up in the theme blocks, which are untouched.
   Recover from git history at 3b0002b26. */
/* --- TASK-1083[Q]: THE TALLY -----------------------------------------------
   How many bare blanks are answered, at the top of the survey and again at the
   end.  Both are painted by one function from one scan, so nothing here has a
   second opinion to disagree with; this block only has to keep the number
   readable and stop it from shoving the page about while it changes.
   THE BOX IS A FIXED HEIGHT, never a min-height and never auto.  The sentence
   gains a clause at the floor and another past it, and a box that grew with
   them would push the whole survey down the page WHILE THE VISITOR IS TYPING
   INTO IT -- the one moment a layout shift is most expensive.
   52px is TWO lines at this type and the longest state measures ONE, using 678
   of the docbody's 1696px at 45 blanks answered.  The slack is deliberate and
   it is the cheap side of the trade: over-reserve and the cost is 26px of
   whitespace above a section heading, under-reserve and the cost is a visitor
   scrolling a counter to read the end of its own sentence.  .svmsg reserves its
   two rows for the refusal line for the same reason and at the same value.
   THE ONLY NUMBER THAT CAN REACH TWO DIGITS RESERVES ITS OWN WIDTH.  The count
   in the shared clause is capped at the floor, so it is one digit for its whole
   life and can reflow nothing; the surplus runs to 40 and sits in an
   inline-block wide enough for two, right-aligned so that its own digits grow
   leftwards into reserved space and nine going to ten moves nothing after it.
   THE ACCENT IS THE MARK'S, read through --svacc rather than restated as five
   fresh hex values down here: one accent decision for the survey, and no second
   palette to keep in step.  Measured live in a browser against each theme's own
   resolved background, the number reads 9.43:1 on the default, 8.96:1 on dark,
   6.53:1 on grey, 11.25:1 on neon and 10.02:1 on dxhr, which is TASK-1081's own
   certification confirmed rather than restated.  The sentence around it takes
   the docbody's own text colour, the page's primary readable one by definition,
   and lands at 20.77, 14.31, 12.94, 12.59 and 11.81 to one -- so it needs no
   per-theme entry at all.
   NOTHING UNDER 12px: the sentence is 17px, the number the same 17px in bold.
   No rgba, no opacity, nothing stacked.
   NO LIVE REGION, deliberately.  This repaints on every keystroke, and a polite
   one would read the whole sentence back after each letter typed into a blank
   it is not even about.  The count is plain text sitting in the page from first
   paint, which a reader reaches on their own terms instead of being read at.

   TASK-1085[Q]: AND ONE OF THEM IS LOUD.  The user asked for the progress to be
   more prominent and to stand at the top of the final section, so a third slot
   goes there wearing .big, and the two quiet ones stay exactly where they were.
   WHY BOTH OF THEM STAYED, since keeping them was a choice.  The top one is the
   only count on screen for the four pages before this one, so moving it would
   have hidden the number for most of the walk in the name of making it easier
   to see.  The end one is the number a visitor is about to be REFUSED over,
   standing directly above the button that does the refusing, which is a
   property TASK-1083 argued for one ticket ago and this ticket has no new
   reason to un-decide.  The loud one does not replace either job; it does the
   one neither could, which is to be unmissable at the moment the survey stops
   asking and starts filing.
   PROMINENCE IS ENTIRELY IN THIS BLOCK, and that is load-bearing.  The three
   slots hold the SAME STRING, which svFinish also nests inside its refusal, so
   anything that made the loud one say more would put those words in the refusal
   too.  Volume therefore has to be type, box and colour and may never be words:
   22px against 17, a dashed rule in the survey's own accent, and the top of the
   page the visitor will file from.
   IT DOES NOT MOVE EITHER, measured to the same standard as its quiet
   siblings and for the same reason -- it changes while being typed at.  The
   height is FIXED and border-box, so the rule, the padding and two lines of
   22px text are all inside one unchanging number: 2 x 33 + 28 + 4 = 98, and
   100px is that with the rounding left in.  Never a min-height, never auto.
   CONTRAST: the sentence is the docbody's own text colour at 22px, so it is
   the primary readable colour by definition and better placed than the 17px
   siblings already certified above.  The dashed rule is --svacc, the same value
   the carets are drawn in, and is a graphic rather than text. */
.docbody .svtally{height:52px;overflow-y:auto;margin:12px 0 0;font:17px/1.5 Verdana,sans-serif}
.docbody .svtally.big{height:100px;box-sizing:border-box;margin:14px 0 6px;
  padding:12px 16px;border:2px dashed var(--svacc);font:22px/1.5 Verdana,sans-serif}
.docbody .svnum{display:inline-block;min-width:1.4em;text-align:right;font-weight:700;color:var(--svacc)}
.docbody .svchk{margin:16px 0;padding:10px 14px;border:1px dashed #999;text-align:center}
/* --- TASK-1084[Q]: THE HELD-ANSWERS OFFER ----------------------------------
   The blanks somebody filled before a card arrived, held rather than filed onto
   whoever's card it turned out to be, with the two ways out.
   IT SITS BELOW .svchk RATHER THAN BESIDE THE COUNTER IT PAINTS UNDER, and that
   is deliberate: TASK-1083's block is read as one region by its own guards, so
   a second component's rules living inside it would be asserted against as
   though they were the counter's.  The markup order is what puts this at the
   head of the survey; the stylesheet order only has to keep the two blocks
   separately readable.
   NO RESERVED HEIGHT, WHICH IS THE OPPOSITE OF THE COUNTER'S RULE AND IS THE
   RIGHT CALL FOR THE OPPOSITE REASON.  The counter is on screen for every
   visitor on every visit and changes while being typed at, so it reserves its
   worst case and never moves.  This block is absent on essentially every visit
   ever made, appears once after a restore, and is gone the moment it is
   answered; reserving room for it would put a permanent gap at the head of the
   survey to hold a question nobody is being asked.  It is display:none until
   svHeldPaint has something, and the appearing IS the point rather than a
   jitter -- it is not a state change on existing furniture, it is furniture
   arriving.  Nothing it does can shift a field being typed into, because it
   sits above every one of them and only ever changes on a press.
   IT IS A NOTICE, SO IT LOOKS LIKE ONE: the survey's own accent as a solid rule
   rather than the dashed one the checkpoints and the loud counter wear, so it
   does not read as one more chain-letter flourish on a page full of them.
   CONTRAST: the paragraphs take the docbody's own text colour, which is the
   page's primary readable one by definition and is what the counter's own
   sentence was certified at (20.77:1 on the default and never below 11.81:1 in
   the four themes).  17px, matching .svtally and .svlegend.  No rgba and no
   opacity anywhere in the block, and no colour of its own at all: the rule is
   --svacc, and this block names no hex of its own.
   TASK-1100[Q] round 4: the rule is 4px rather than 6px, which is the value the
   view the user kept had been overriding it to, folded in here now that there
   is nothing to override.  The old five-themes-and-a-skin sentence went with
   the other four papers. */
.docbody .svheld{margin:12px 0 0;padding:10px 16px;border-left:4px solid var(--svacc);
  font:17px/1.5 Verdana,sans-serif}
.docbody .svheld p{margin:0 0 8px}
.docbody .svheld .svheldrow{margin:0}
/* the acknowledgement wears the same slot and the same rule, one line instead
   of three, so answering the question does not make the page jump twice. */
.docbody .svheld.said p{margin:0}
/* TASK-1100[Q] round 4: `#doc-survey.svpad .svheld{border-left-width:4px}` was
   HERE and its one surviving declaration is folded into the rule it was
   overriding, four lines up.  Round 3 had already emptied it of everything
   else.  Recover from git at 3b0002b26. */
.docbody .svinvite{border:2px dashed #999;padding:8px 20px 14px;margin-top:22px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* TASK-1100[Q]: the answer fields keep the SIZE they already had and the slant.
   ROUND 3 TOOK THE FACE, and the user's two instructions only look opposed.
   "Keep it the font we have now" was said in the same breath as "in black but
   in italics", so what it was distinguishing an answer BY is the colour and the
   slant; and "the body of the email should all be in comic sans" is a statement
   about the whole letter, of which an answer somebody typed is part.  Slant and
   ink still tell an answer from its question; the hand is now one hand.
   Everything about the BOX -- taking it off, the ink, and as of round 3 the
   fact that nothing is drawn under it in any state -- is ID-scoped in
   THE FORWARDED LETTER below, and that split is not tidiness.  Each theme
   already carries its own `body.dark input[type=text]` rule, which is two
   classes and two elements and therefore outranks a `.docbody .svq input`
   selector; written here, the fill and the border those rules set would come
   straight back on four of the five themes and put the box back on exactly the
   pages this ticket removed it from.  An ID beats all four. */
.docbody textarea{font-size:20px;font-style:italic;
  width:100%;box-sizing:border-box}
.docbody .svq input{font-size:20px;font-style:italic;max-width:100%}
/* --- TASK-1100[Q]: THE FORWARDED LETTER ------------------------------------
   The survey drawn as what it says it is: a chain letter somebody passed along
   in 2001, with the header their mail client stamped on it still attached.

   WHAT THE USER ASKED FOR, and it is four things.  Comic Sans and one pink for
   every title, question and label.  The answers left in the face they already
   had, in black, and italic.  The answer moved onto the same line as its
   question instead of under it.  And no box around a field when you are in it:
   "an inline edit as if you're editing a notepad", but with the questions still
   undeletable and tab still walking the blanks in order.

   WHY THAT IS STILL A FORM, which is the one decision here worth arguing.  The
   obvious way to get an inline edit is a contenteditable region, and it breaks
   both halves of that same sentence in one move: the questions become text a
   visitor can select and delete, and the [data-k] inputs svHTML emits and the
   serialiser walks stop existing, so nothing anybody typed would be saved at
   all.  Real inputs with the box styled off give the LOOK, the CONSTRAINT and
   the tab order together, and none of the three has to be re-implemented.

   ------------------------------------------------------------------ COLOUR --
   ONE PAPER, SO ONE OF EVERYTHING (TASK-1100[Q] round 4).  The user: "the only
   view i care about now is the white background one that looks like a plain
   text old school email, you can get rid of any other views."  The letter is on
   #ffffff under every theme now, and the whole of the argument that used to
   live in this paragraph -- five pinks, five inks, five accents, and the
   arithmetic proving no single value could serve them -- went with the four
   papers it existed to reconcile.  What is left is a list of values.

   --svqc is the letter's pink and --svacc is the colour a required mark is
   drawn in.  They hold the same value today and are still two tokens, because
   they answer different questions: --svacc means "this blank is owed" and
   --svqc means "this is the letter talking".  Collapsing them would make a
   future change to one silently move the other, and the focused row's marks
   read --svacc precisely so they CAN diverge from the resting ones later.

   THE CONTRAST TENSION IS RESOLVED BY THE PAPER, which is the part worth
   saying rather than quietly deleting.  The pink in the user's reference is
   about 1.9:1 on white, under half the floor this repo requires, and these are
   the questions rather than decoration.  #8c0046 is the deepest-hue pink that
   still reads as that reference, and on white it measures 9.53:1 -- against
   the 5.53:1 the old default paper could manage and the 4.85:1 grey could,
   both of which the census had breaking once the CRT wash is composited.  A
   collapse to one paper is therefore a contrast WIN and not merely a
   simplification, and it retires several rows of that census outright.

   AND "BLACK" NO LONGER HAS A LIMIT.  The answers are #000, full stop.  That
   sentence used to need a paragraph: on three near-black papers black ink was
   1.08:1, not dark but gone, so --svink had to become each theme's own prose
   colour.  There is one paper and it is white, so the user's original word for
   the answers is simply true.

   ------------------------------------------------------------------- TYPE ---
   Comic Sans cannot be shipped, only asked for, so --svface asks and then keeps
   asking: three more informal faces that ARE installed on the machines that
   lack it, and `cursive` last.  The generic is the load-bearing end of that
   list -- it is the one term that can never resolve to the document's own
   serif, so a machine with none of the four still draws something the reader
   can tell apart from the body text, which is the whole point of naming a face.

   NOTHING UNDER 12px: the header runs at 20px, its labels at 20px, the
   redaction chip at 15px.  No rgba and no opacity anywhere in this block.

   --------------------------------------------------------------- NO JITTER --
   Nothing here changes a box-model property on a state change.  There is no
   border on a field in any state, the label's margin is one constant value, and
   the header does not react to anything at all.  Focus is a mask swap and a
   colour on an out-of-flow box in the margin, plus the caret; there is no ring,
   no fill, no line and no border to appear, which is the whole of what "no
   border boxes when the input is selected" means mechanically.

   ------------------------------------------------------------------ PRIVACY --
   The addresses in the header are invented, the domains are all replaced by a
   chip, and neither of those is enforced HERE -- svAddr does it, in code, so
   this block only has to make the chip legible: #fff on #1a1a1a is 17.4:1.

   ---------------------------------------------------------------- THE PAPER --
   TASK-1100[Q] round 4: THE SURVEY'S TOKENS LIVE ON #doc-survey, NOT .docbody,
   and that move is what makes "no theme reaches the survey" structural rather
   than a list of overrides to maintain.  They were on .docbody with four
   `body.x .docbody` blocks correcting them per theme; an ID beats all four on
   specificity, so declaring them once here ends the argument -- there is no
   selector left in the file that can hand this document a different value.
   The other documents on the shelf are untouched: they never read a --sv token.
   The four theme corrections are deleted rather than left inert.  See the note
   where the accent used to be corrected, one block up, for why an inert rule is
   not harmless here specifically. */
#doc-survey{--svqc:#8c0046;--svacc:#8c0046;--svink:#000000;
  --svbar:#1a1a1a;--svbarink:#ffffff;
  --svhl1:#fff98c;--svhl2:#fff35b;--svpen:#8c0046;
  --svface:"Comic Sans MS","Comic Sans","Chalkboard SE","Comic Neue",cursive;
  --svlh:1.7em;--svgut:44px;--svmk:30px;
  --svqm:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2044'%3E%3Cpath%20d='M5,15L13,22L5,29M15,15L23,22L15,29'%20fill='none'%20stroke='black'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --svqmf:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%2044'%3E%3Cpath%20d='M4,13L14,22L4,31Z'/%3E%3Cpath%20d='M15,13L25,22L15,31Z'/%3E%3C/svg%3E");
  background:#fff;color:#000;border:1px solid #999;font-size:20px;line-height:1.7}
/* the titles: the letter's own subject line and every section heading under it.
   ID-scoped so the OTHER documents on the shelf keep the Courier heading they
   have always had -- this is the survey's look, not the shelf's.
   TASK-1100[Q] round 4: and the WEIGHT, SIZE and LEADING are here now, folded
   in from the view that used to restate them.  `.docbody h4` sets 700 28px
   through a `font` shorthand, which also resets line-height to normal and would
   put a heading out of step with the letter's own line rhythm; an id outranks
   it, so saying all three here is what makes the rhythm true for headings too.
   20px is the letter's own size, which is what the surviving view always was. */
#doc-survey h4{font-family:var(--svface);color:var(--svqc);
  font-weight:700;font-size:20px;line-height:1.7}
/* the questions, and the answer beside them.  display:inline is the whole of
   "immediately following the label": the label stops being a block, so the
   input flows on after the last word of the question and wraps with it. */
#doc-survey .svq label{display:inline;margin:0 .45em 0 0;
  font-family:var(--svface);color:var(--svqc)}
/* ------------------------------------------------- THE HAND THAT WROTE IT ---
   TASK-1100[Q] round 3.  The user, for the third time and now in one sentence:
   "the body of the email should all be in comic sans (but not the metadata
   section)".  Round 1 gave the face to the questions and left the answers in
   the page's own; round 2 gave the header back to the machine.  Both were half
   of this, and neither said the whole thing.
   THE EXCEPTION IS STRUCTURAL, NOT A LIST.  .svbody is everything the forwarded
   message contains and .svfwd is the block the mail client stamped on it, and
   they are siblings -- so "all of the body, none of the metadata" is one
   selector that starts at .svbody and a header that is not inside it.  A rule
   naming the parts would have to be added to every time a part is added, which
   is precisely how the header came to be in Comic Sans in the first place.
   AND IT IS SET ON EVERY ELEMENT, NOT INHERITED BY THEM, which is the whole
   reason this is one rule instead of nine.  Half the letter's parts declare
   their own family through a `font` shorthand (.svtally, .svmsg, .svlegend,
   .svtag, .btn, and the notepad skin's restatement of all of them), and a
   declaration on an ANCESTOR loses to a declaration on the element however
   specific the ancestor's selector is.  `.svbody *` declares it ON each one, at
   one id and one class, which outranks every class-only rule in this file and
   is outranked in turn by the id-scoped rules just below that have something
   more specific to say.  A tenth part added tomorrow is covered on arrival.
   IT IS ALSO WHAT MAKES THE NOTEPAD SKIN OBEY.  The skin used to redefine
   --svface to Courier and restate the face on five selectors by name; both are
   deleted, because "the body is in the informal face" is an instruction about
   THE SURVEY and the skin is a view of the survey rather than a second design.
   What the skin still is, is white paper under any theme. */
#doc-survey .svbody,#doc-survey .svbody *{font-family:var(--svface)}
/* ----------------------------------------------------- THE QUOTE GUTTER -----
   The user: "there should be forwarded email '>>' prefixes on EVERY line."
   WHAT WAS THERE, AND WHY IT WAS NOT THIS.  `.svq::before` put the string
   ">>>" -- three marks, not two -- absolutely at the top left of a QUESTION
   BLOCK, so it landed on the first line of a question and on nothing else: not
   on the second line of one that wrapped, not on a heading, and not on the
   blank line between two of them.  On a page whose questions are long enough
   to wrap constantly, most lines had no mark at all.
   EVERY LINE IS THE HARD WORD IN THAT SENTENCE.  A pseudo-element is ONE box
   and marks one line however many the text takes; there is no selector for "the
   second visual line of a wrapped paragraph".  What CAN cover every line is a
   background, because a background tiles the whole height of the box it is on
   whatever the text inside is doing.  So the mark is a picture of two marks
   drawn once and REPEATED DOWN A COLUMN, in a pseudo-element beside the text
   rather than behind it, at exactly one line of pitch.
   IT IS A MASK RATHER THAN A PICTURE OF PINK MARKS, so the ink is still the
   letter's own --svqc and follows all five themes and both views from the one
   place every other coloured thing here reads.  A data URI cannot see a custom
   property; a mask lets the element be a rectangle of the right colour and the
   picture decide which of it survives.  Both the prefixed and unprefixed forms
   are declared: the unprefixed one is what current browsers implement and the
   -webkit- one is what an older Safari needs, and neither alone covers both.
   THE PITCH IS IN EMS, WHICH IS WHY THIS SURVIVED THE SECOND VIEW FOR FREE.
   --svlh is 1.7em and the letter's line-height is 1.7, so the tile is one line
   in whatever type the block is set in: 44.2px in the default view's 26px body,
   34px in the notepad skin's 20px one, and correct in both without the skin
   saying anything.  A block that sets a DIFFERENT ratio restates --svlh (the
   1.5-line counters below do), and that is the only maintenance this has.
   The picture carries a viewBox and no intrinsic size, so it scales to the tile
   and the marks get smaller with the type rather than staying one fixed size.
   THE COLUMN IS CONTINUOUS, INCLUDING ACROSS THE BLANK LINES, which is the rest
   of what "every line" means in a forwarded message.  Every block's gap to the
   next is exactly one line (margin-bottom:var(--svlh)) and every block's mark
   column runs one line PAST its own bottom edge into that gap, so the marks
   never break rhythm and never double up.  :last-child closes both halves at
   the foot of a container so nothing hangs below a dashed box.
   NOT THE METADATA, and again structurally: these selectors start inside
   .svbody, and the header is not in it.  The reference the user sent has no
   marks on the header either.
   THE TWO SCROLLERS ARE IN, but they are the one place the column does NOT run
   into the gap, and the reason is mechanical rather than aesthetic: .svtally
   and .svmsg are fixed-height boxes with overflow-y:auto, and an absolutely
   positioned child TALLER than one of those extends its scrollable area and
   hands it a scrollbar it is not supposed to have.  Stopping their mark column
   at their own bottom edge costs one blank line of marks and keeps both boxes
   the exact height they reserve.  Leaving them out altogether was tried first
   and looked worse than the thing it avoided: an unmarked line, flush left,
   with the whole quoted letter indented past it.
   NOTHING HERE CAN MOVE A ROW.  The gutter is reserved by the same padding on
   every block whether it is marked, focused or neither, and the mark itself is
   a background on an out-of-flow box.  Contrast: the marks are a graphic and
   not text, at 5.53:1 on the default paper and never below 4.85:1 across the
   five themes -- both of which clear the 3:1 a non-text indicator owes. */
#doc-survey .svbody h4,#doc-survey .svbody p,#doc-survey .svbody .svq{
  position:relative;margin:0 0 var(--svlh);padding-left:var(--svgut)}
#doc-survey .svbody h4{line-height:1.7}
#doc-survey .svbody h4::before,#doc-survey .svbody p::before,#doc-survey .svbody .svq::before{
  content:"";position:absolute;left:0;top:0;bottom:calc(0px - var(--svlh));
  width:var(--svmk);background-color:var(--svqc);
  -webkit-mask:var(--svqm) repeat-y left top/var(--svmk) var(--svlh);
  mask:var(--svqm) repeat-y left top/var(--svmk) var(--svlh)}
#doc-survey .svbody h4:last-child,#doc-survey .svbody p:last-child,
#doc-survey .svbody .svq:last-child{margin-bottom:0}
#doc-survey .svbody h4:last-child::before,#doc-survey .svbody p:last-child::before,
#doc-survey .svbody .svq:last-child::before{bottom:0}
#doc-survey .svbody .svtally,#doc-survey .svbody .svmsg{--svlh:1.5em}
#doc-survey .svbody .svtally::before,#doc-survey .svbody .svmsg::before{bottom:0}
#doc-survey .svbody .svlegend{--svlh:1.5em}
/* ------------------------------------------------------- THE ANSWER FIELDS --
   The box, gone.  ID-scoped so it beats every theme's own
   `body.x input[type=text]` rule -- see the note beside the type declarations
   further up for why that is load-bearing rather than defensive.
   AND AS OF ROUND 3, NO RULE UNDER IT EITHER, IN ANY STATE.  The user: "there
   should be no line, like when it's ANSWERED and unfocused, there is no line.
   There should also be no line when it's focused and/or unanswered as well."
   Four rules put a border-bottom on a survey field and all four are deleted --
   the dotted one that marked an empty blank and the solid one that marked a
   focused one, in this view AND in the notepad skin, where round 2 had just
   ADDED the pair.  `border:0` now means what it says: there is no border on any
   side of any field in any state, so the reserved 2px is gone with them rather
   than left behind as a thing a later state could colour in.
   AN EMPTY BLANK THEREFORE SHOWS NOTHING, and that is the instruction rather
   than a cost of it.  What an unanswered line looks like in a chain letter is
   `12. favourite band:` with nothing after the colon, which is exactly this.
   The blanks are still reachable and still countable: the label carries `for`,
   so clicking the QUESTION puts the caret in its answer, tab still walks them
   in order, and the counter at the head and foot of the survey says how many
   are still empty.  `placeholder=" "` went with the rules that read it -- see
   svHTML, where the same deletion is explained from the markup side. */
#doc-survey .svq input,#doc-survey .svq select,#doc-survey textarea{
  border:0;background:transparent;
  color:var(--svink);padding:0;caret-color:var(--svqc)}
/* ...and FOCUS, which is the interesting half, because the user has now ruled
   out a line as well as the box -- and a ring, a fill and an outline were never
   available either.  What is left has to be something a person filling in a
   paper form actually sees, and on paper that is two things: the pen, and where
   on the page they are.
   THE PEN IS THE CARET, coloured in the letter's own ink two rules up, and it
   is genuinely most of the answer.  It is not ALL of it, for one mechanical
   reason: a <select> has no caret at all, so a keyboard user tabbing onto the
   sex/starsign dropdowns would land on a control showing nothing whatsoever.
   Caret-only was tried and rejected on exactly that, not on taste.
   SO THE SECOND HALF IS THE MARGIN, which this round has just filled with quote
   marks: the marks beside the row you are on go from OUTLINE to SOLID and from
   the letter's pink to the survey's accent.  It is the reader's finger on the
   line they are filling in, it is a shape change and not only a colour change,
   it works for a <select> exactly as well as for a text field, and being a mask
   swap on an absolutely positioned box it cannot move anything.  Marks and
   paper measure 9.4:1 on the default and never below 6.5:1 across the five
   themes, so the indicator clears 3:1 against what is next to it several times
   over.
   :focus-within RATHER THAN :focus, because the thing that changes is a sibling
   of the field, not the field.  It is on .svq, which is one row.
   The `outline:none` is still here and is still doing the same job: without it
   the browser draws its own ring and everything above is decoration on top of
   the box the user asked to be rid of. */
#doc-survey .svq input:focus,#doc-survey .svq select:focus,#doc-survey textarea:focus{
  outline:none}
#doc-survey .svbody .svq:focus-within::before{background-color:var(--svacc);
  -webkit-mask-image:var(--svqmf);mask-image:var(--svqmf)}
/* ------------------------------------------------------- THE HIGHLIGHTER ----
   The user: the required questions should look "like it was literally
   highlighted with a highlighter pen".
   IT IS A BACKGROUND ON THE LABEL, NOT A BOX BEHIND IT, and that choice makes
   three problems disappear at once.  A background on an INLINE element follows
   its line boxes, so a question that wraps gets a stroke on each line the way a
   real pass would, which a single positioned pseudo-element cannot do.  It sits
   under the element's own text by definition, so the letters stay fully legible
   without any blending. And a background cannot affect layout, so the "no
   jitter" rule is satisfied by construction rather than by care.
   WHY NOT mix-blend-mode:multiply, which is the obvious way to make ink read as
   ink: measured, it buys nothing here and costs the dark themes everything.
   Multiplying #fff35b over this paper (#fffef7) gives #fff258 -- the ink itself,
   to within a rounding step -- so on the two light themes it is indistinguish-
   able from painting the colour. Over the dark themes' #0d0d0d it gives
   #0d0c05: the stroke does not darken, it vanishes. Per-theme ink keeps one
   mechanism that works on all five and keeps every value measurable, which the
   contrast floor here actually needs.
   NOT A RECTANGLE, IN FOUR WAYS, all of them in the two gradients below: the
   pass is TALLER than the text and overshoots the baseline (vertical padding,
   which on an inline element extends the background box without moving a single
   line -- the leading at 1.7 line-height absorbs it); both ends fade rather
   than stop, over a few percent; the two layers run at 92 and 88 degrees, so
   neither the caps nor the seam is parallel to the baseline; and the stroke
   stops SHORT of the full width, the way a tip lifts early.
   UNEVEN, AND SAFELY SO: --svhl2 is a denser seam near the bottom of the pass,
   where a real overlap darkens (on the dark themes it is denser by being
   LIGHTER, because there more ink means more light on black paper).  Its colour
   is the constraint rather than the effect: a genuinely dark overlap looked
   right and measured 3.86:1 under the pink, so the step is deliberately gentle.
   MEASURED OFF PAINTED PIXELS, NOT OFF THESE DECLARATIONS, and the difference
   mattered.  This page draws a CRT scanline wash over everything (body::after,
   intensity --scan-int), so what a reader actually sees is a few percent darker
   than any value written here -- it takes the ink down too, but the stroke
   further, and a first pass at these tones certified 4.53:1 on paper and
   composited to 4.41:1 on screen, under the floor.  Sampling the real pixels
   out of a screenshot caught it; the arithmetic alone did not.  So every tone
   is chosen with the wash included: on the default paper #cc0066 composites to
   4.97:1 on the main pass and 4.71:1 on the seam, on grey #a3004f is higher
   again, and on the three dark themes #ff9ad0 composites to 5.20 and 4.78 over
   the olive the ink becomes there.  The NEEDED tag rides the same stroke at 8:1
   or better and the FILLED state, which takes the page's own ink, at 17 to one.
   COLOUR IS STILL NEVER THE ONLY SIGNAL: the word NEEDED inside the label is
   untouched, so this is a second cue on top of one that works without it, which
   is what lets it be decoration at all.  (Round 2 could count the margin carets
   as a third; round 3 puts quote marks on every line, so the margin no longer
   says anything about THIS row in particular and the pen has taken over the job
   it used to do.)
   ---------------------------------------------------- ROUND 3: IT IS YELLOW --
   The user: "the required questions should be highlighted in yellow (as if with
   a real highlighter pen)."  They were, on the two light themes.  On the three
   dark ones --svhl1/--svhl2 were #4a3d00 and #514200, a dark olive, which is
   what you get if you take a yellow and dim it until it clears a contrast floor
   against pale ink -- and what you have then is not a highlighter, it is a
   shadow behind a word.  And the notepad skin refused the pen outright.
   THE STROKE IS THE SAME YELLOW ON ALL FIVE THEMES AND IN BOTH VIEWS, so the
   three per-theme overrides are deleted rather than re-toned: a highlighter is
   a physical object and it does not know what colour the paper is.
   WHICH MEANS THE INK UNDER IT HAS TO BE DARK EVERYWHERE, and that is the same
   observation rather than a second decision.  A pen laid over a page leaves the
   letters showing through a yellow film; on a dark theme the letters ALSO have
   to survive being seen through it, and pale pink through yellow is two light
   things on top of each other.  So a highlighted question is drawn in --svpen
   (#8c0046), the value the survey's own accent already is, and its NEEDED tag
   in black, on every theme.  This is the physically coherent answer and it is
   also the one with headroom: measured on paper, #8c0046 is 8.3:1 on the dense
   seam and 8.8:1 on the main pass, against the 4.85 and 5.10 the old pink
   managed -- and the census (living_docs/SCANLINE_WASH_CONTRAST_CENSUS.md) had
   both of those failing once the wash is composited, at slider 40 and 64.  The
   tag is 18.2:1 and 19.2:1.  Nothing here is a value invented for it: #8c0046
   is --svacc's own default and #000 is --svink's.
   AND THE TAG GOES QUIET WHEN THE BLANK IS FILLED, exactly as it did before --
   it takes the question's own colour through `inherit`, so black means still
   owed and pink means done, both of them legible, and the pen stays on the page
   either way because a pen stroke is not undone by answering. */
/* TASK-1100[Q] round 4: `.docbody{--svhl1;--svhl2}` was HERE and both values
   now sit with every other survey token on #doc-survey.  Unchanged values, one
   home.  Recover from git at 3b0002b26. */
#doc-survey .svq.req label{color:var(--svpen);
  background-image:
    linear-gradient(88deg,transparent 0 6%,var(--svhl2) 12% 88%,transparent 97% 100%),
    linear-gradient(92deg,transparent 0 2%,var(--svhl1) 7% 93%,transparent 98% 100%);
  background-repeat:no-repeat,no-repeat;
  background-size:93% .30em,97.5% 1.12em;
  background-position:1.5% .95em,0 .06em;
  padding:.06em 0 .2em}
#doc-survey .svq.req .svtag{color:#000000}
#doc-survey .svq.req.got .svtag{color:inherit}
/* --------------------------------------------------------------- THE HEADER */
#doc-survey .svfwd{margin:0 0 20px;padding:0 0 14px;border-bottom:2px solid var(--svqc)}
#doc-survey .svfwdrule{margin:0 0 10px;font:20px "Courier New",Courier,monospace;color:var(--svqc)}
/* ONE grid rather than four rows, so the values line up in a column the way a
   mail client's did.  minmax(0,1fr) rather than 1fr is what lets a long To:
   list wrap inside its own cell instead of widening the whole document. */
#doc-survey .svfwdgrid{display:grid;grid-template-columns:max-content minmax(0,1fr);
  column-gap:.6em;row-gap:4px;align-items:baseline}
/* the field names, and they are NOT the letter's own hand.  TASK-1100[Q] round
   2, the user on prod: the metadata section (forwarded email and the rest) is
   in Comic Sans, and all of it should be in the period face instead.  (Their
   own words named the decade, which this file may not repeat -- see the copy
   rule about the site believing its own present.)  They are
   right, and the reason is worth stating rather than just complying: Comic Sans
   here is HANDWRITING.  It belongs to the questions, because a person typed
   those.  From, To, Sent and Subject were typed by nobody -- they are what the
   mail client stamped on the message on its way out -- and machine-printed
   header set in a face pretending to be handwriting is the one thing in this
   block that reads wrong.  This applies in BOTH views; it is not a skin fault.
   THE FACE IS THE ONE THIS BLOCK IS ALREADY MADE OF, rather than a third one
   introduced for it.  The rule above these keys, the values beside them and the
   redaction chip inside those values are all "Courier New" already; the keys
   were the only part that was not.  The user guessed "times?", which names the
   ERA rather than a family, and a serif would put a third face into a four-line
   block whose whole job is to look like something a machine printed.
   AND IT CLOSES THE SKIN LEAK IN THE SAME LINE.  This declaration was the last
   thing in the survey reading var(--svface) that the notepad skin did not
   already override, which is exactly how Comic Sans was reaching a Courier pad.
   Not reading the variable is a better fix than resetting it, because there is
   then nothing left to remember to reset.  (The pad resets it anyway, one line,
   for the NEXT consumer -- see its own block.)
   Still set the long way rather than through the `font` shorthand.  The reason
   changed but the form is still right: it used to be that a shorthand carrying
   a var() is invalid ALL AT ONCE if the var fails to resolve, and now it is
   that `font` also resets line-height to normal, while these keys sit in a
   baseline-aligned grid whose two columns line up only because both inherit the
   same one. */
#doc-survey .svfwdk{font-weight:700;font-size:20px;
  font-family:"Courier New",Courier,monospace;color:var(--svqc)}
#doc-survey .svfwdv{font:20px "Courier New",monospace;font-style:italic;
  color:var(--svink);overflow-wrap:break-word}
/* THE REDACTION CHIP, and it INVERTS on the dark themes rather than keeping one
   pair of colours.  A bar has to be darker than the page to read as a bar, and
   a near-black chip on a near-black page is not a redaction, it is a label with
   a slightly different background -- legible, and saying the wrong thing.
   Measured both ways: the ink is 17.4:1 on the dark chip and 15.4:1 on the
   light one, and the chip stands off its own paper by 17.2, 10.7, 15.9, 15.4
   and 15.5 to one across the five, so it reads as a struck-out block on every
   one of them.  The WORD inside it is the real guarantee either way -- somebody
   who cannot see the block at all is still told what happened. */
#doc-survey .svredact{background:var(--svbar);color:var(--svbarink);
  font:15px "Courier New",monospace;letter-spacing:1px;padding:0 6px;white-space:nowrap}

/* --- TASK-1085[Q]: THE NOTEPAD SKIN, RETIRED (TASK-1100[Q] round 4) --------
   132 lines and 10 rules stood here.  The user: "the only view i care about now
   is the white background one that looks like a plain text old school email,
   you can get rid of any other views."  The white one is THIS one -- checked
   rather than assumed: this block set `background:#fff` unconditionally while
   the document's own paper is #fffef7 unthemed and near-black or grey on the
   four themes, so on four of five it was the only white thing on screen.
   SO THIS VIEW WON AND STOPPED BEING A VIEW.  Its identity -- white paper under
   every theme, 20px density, the #8c0046 certified against white -- is now the
   survey's, declared on #doc-survey with every other survey token.  Nothing was
   lost in the move and nothing was kept "just in case": each of its ten rules
   was either folded into the rule it had been overriding (the paper and the
   tokens onto #doc-survey, the heading's weight and size onto `#doc-survey h4`,
   the legend's ink onto `.docbody .svlegend`, the notice's 4px rule onto
   `.docbody .svheld`, the buttons into the two rules directly below) or dropped
   as REDUNDANT once there was nothing to override: the field rule restated a
   size and a slant `.docbody .svq input` already sets and a colour --svink
   already is; the focus rule restated a `background:transparent` the resting
   rule already declares; and `.svchk`/`.svinvite` were given a #999 border that
   both already had, defensively, against a theme that never touched them.
   WHY .svpad IS NOT KEPT AS A NO-OP CLASS.  It would have to be applied by
   something, which means keeping a line of script whose only purpose is to
   satisfy a selector -- and a class nothing can ever remove is a statement
   about the DOM that is not true.  The alternative risk, that dropping the
   class costs specificity, does not arise: every one of these selectors beat
   `body.dark .docbody` and friends on the ID alone, and the four rules that
   made that necessary are themselves deleted this round.
   Recover the whole block from git at 3b0002b26. */
/* THE FINE PRINT, AND IT IS A REAL BREAK THE COLLAPSE CAUSED (TASK-1100[Q]
   round 4, caught by re-walking the wash census rather than by reading).
   `.small` is themed four ways -- #888 dark, #444 grey, #8a835f neon, #8a7f68
   dxhr -- and each of those was chosen against ITS OWN theme's paper.  The
   survey's paper is white under every theme now, so three of the four landed
   pale grey on white: measured at 3.54, 3.82 and 3.95 to one, all under the
   floor, on the blurb and on the invite block's own prose.
   THIS IS THE SHAPE OF THING A COLLAPSE HAS TO GO LOOKING FOR: not a rule that
   was deleted, but a rule elsewhere whose assumption about the paper stopped
   being true.  #444 is the grey theme's own value, already measured at 9.74:1
   on white, so it is a value the census has rather than a fresh one. */
#doc-survey .small{color:#444}
#doc-survey .btn{font-size:18px;background:#fff;
  border:1px solid #000;color:#000}
/* THE BUTTONS KEEP THEIR RING, and it is the one focus indicator in the survey
   that is still an outline.  A button is not a field: the user's reports named
   fields, and a .btn here has a real resting border that an outline sits
   outside of and cannot be confused with.  Taking it off would be removing an
   indicator with nothing put back. */
#doc-survey .btn:focus{outline:3px solid var(--svacc);outline-offset:2px}

/* --- TASK-1055[Q]: THE RECORDING WINDOW ------------------------------------
   The stored transcript, opened from the link the welcome-back beat offers,
   instead of streamed back into the conversation.
   THE CHROME IS RESTATED, and #mbLinkOk already learned why the hard way: .win
   / .tbar and their title-bar parts are declared SCOPED TO #aolwin above, so a
   window that is a SIBLING of the chat windows rather than a child of that one
   gets none of it and comes up with its title text bleeding over the body.
   These are that file's own six declarations, value for value.
   z-index 82 clears #mbLinkOk (80), #aolwin.mbtop (78) and #mbwin (75): it can
   be opened from a conversation standing over any of them.
   THE LOG IS A FIXED-HEIGHT SCROLLER (300px, ~14 lines), never a max-height:
   the window must be the same size whether the recording is two lines or two
   hundred.  Its type and colours are #imlog's, so a replayed line reads
   exactly as it did when it was said -- including .pn, because ONE window
   shows either character's tape.
   Contrast, checked: #000 on #fff is 21:1; the .sys grey #767676 on #fff is
   4.9:1, over the 4.5 floor, and is #imlog's own value.  Nothing under 12px. */
#metTape{position:fixed;inset:0;display:grid;z-index:82;place-items:center;pointer-events:none}
#metTape .win{background:#c0c0c0;border:2px outset #fff;box-shadow:6px 6px 0 rgba(0,0,0,.4);
  font:15px Tahoma,Verdana,sans-serif;color:#000}
#metTape .tbar{display:flex;align-items:center;gap:8px;color:#fff;padding:5px 8px;
  background:linear-gradient(90deg,#000080,#0e73b5);font:700 16px Tahoma,Verdana,sans-serif}
#metTape .tbar .tri{width:0;height:0;border-left:7px solid transparent;
  border-right:7px solid transparent;border-bottom:12px solid #fff}
#metTape .tbar .wb{margin-left:auto;display:flex;gap:3px}
#metTape .tbar .wb b{width:26px;height:22px;background:#c0c0c0;border:2px outset #fff;color:#000;
  font:700 13px Verdana,sans-serif;display:grid;place-items:center;cursor:pointer}
#metTape .tbar .wb b.x{background:#cc2222;color:#fff}
#metTape .tbar .wb b.x:focus-visible{outline:2px solid #fff;outline-offset:1px}
/* ...and the size, AFTER the chrome so it wins over the declaration it copies
   (same specificity, source order decides). */
#metTape .win{width:520px;max-width:calc(100vw - 32px);max-height:92vh;overflow-y:auto}
#metTape .tapebody{padding:14px 16px 12px;background:#c0c0c0;color:#1c1c1c;
  font:14px/1.55 Tahoma,Verdana,sans-serif}
#metTape .tapelead{margin:0 0 10px}
#metTape .tapelog{height:300px;overflow-y:auto;background:#fff;border:2px inset #fff;
  padding:6px 8px;font:13px Tahoma,Verdana,sans-serif;color:#000}
#metTape .tapelog p{margin:0 0 5px}
#metTape .tapelog .zn{color:#cc0000;font-weight:700}
#metTape .tapelog .pn{color:#cc2288;font-weight:700}
#metTape .tapelog .un{color:#0000cc;font-weight:700}
#metTape .tapelog .sys{color:#767676;font-style:italic;text-align:center}
#metTape .tapelog .imlink{color:#0000cc;text-decoration:underline;cursor:pointer}
/* the fold note keeps its row whether it has anything to say or not, so a
   recording with no duplicates in it does not draw a shorter window. */
#metTape .tapefold{height:20px;margin:8px 0 0;font:12px Verdana,sans-serif;color:#1c1c1c}
#metTape .tapebtns{display:flex;gap:12px;margin:8px 0 0}
#metTape .aolbtn{background:#c0c0c0;color:#1c1c1c;border:2px outset #fff;text-shadow:1px 1px 0 #fff;
  padding:8px 16px;font:700 13px Verdana,sans-serif;letter-spacing:1px;cursor:pointer}
#metTape .aolbtn:active{border-style:inset}
/* TASK-1306[Q]: NO MODAL BACKING, by design decision -- reported as "all the
   buttons seem like they were cut out of a modal screen and everything else is
   still screened by a modal background; just get rid of the modal backing both
   functional and visually in general."

   These dialogs are 1996 WINDOWS, not modern modals. A window does not dim the
   desktop behind it and does not stop you clicking what it is sitting on top
   of, so the dark rgba backdrop is gone from every one of them and the
   full-window layer they each stretch across no longer swallows pointer events.
   The dialog itself still takes clicks -- that is the `> *` rule -- so only the
   empty space around it becomes transparent to the mouse.

   Checked before landing: none of these seven relies on a backdrop click to
   close (METAMP's ask closes on its own X button, the rest on their own
   controls), so nothing loses a way out. What they DO lose is enforced
   modality: the page behind stays live while one is open. That is the point of
   the request rather than a side effect of it. */
#aolwin>*{pointer-events:auto}
#idwin>*{pointer-events:auto}
#metTape>*{pointer-events:auto}
/* TASK-1360[Q]: NARROW SCREENS KEEP THE OLD CORNER. A right offset of ~560px
   needs about 1200px of window before the box still starts on screen, and
   below that the stack would begin off the left edge -- worse than the
   position it replaced. The frame itself stops at 769px (mobile-e takes
   over), so this covers the band between the two: 769 to 1200 gets exactly
   what it had before this ticket. */
@media (max-width:1200px){
  #imwin{right:auto;left:calc(var(--page-inset-left,0px) + 110px);top:calc(var(--page-inset-top,0px) + 150px)}
  #pixwin{right:auto;left:calc(var(--page-inset-left,0px) + 130px);top:calc(var(--page-inset-top,0px) + 200px)}
}