/* Enhanced CRT Effects with Realistic Physics Simulation */ /* Base styles and CSS variables */ :root { --vh: 1vh; --font-ui: 'JetBrains Mono', 'Hack', 'Hack Nerd Font Mono', monospace; --bg: #0a0a0a; --fg: #e8e3d8; --cyan: #00ffc8; --vhs-warm: #ffdc80; --fade-dur: 2s; --period: 7s; --ui-bottom-pad: 72px; /* ========================================================================== * TYPE SCALE AND SPACING SCALE * * AUDITED BEFORE WRITING THIS, because "the typography needs work" is not actionable and * restyling by eye is how a page ends up with eleven sizes that are all nearly the same. * Measured at 390 / 1440 / 2560px, the page had: * * - NO type scale at all. The whole stylesheet contained four font-size declarations -- * the title letters, the nav, a loading indicator and one media query. `h2` at 24px and * body at 16px were BROWSER DEFAULTS, which is why neither moved between a phone and a * 2560px display. A 16px body in a 70ch column reads as unfinished on a large screen * because nothing ever told it otherwise. * - Ratios of 1.006, 1.325, 1.429, 1.050, 1.111, 1.125 between adjacent sizes. A 1.006 * step is two sizes that are visually identical; that is the signature of ad-hoc values * rather than a scale. * - Block gaps of 16, 20 and 40/54/64px. 16 and 20 are close enough to read as the same * gap, so there were effectively two levels of separation doing three jobs. * * ONE FLUID SOURCE, DERIVED STEPS. --step-0 is the only value with a clamp in it; every * other step is a multiplication by the ratio. That makes the ratio exact by construction * and means a change to the base moves the whole scale together, which is the property a * scale has and a pile of independent clamps does not. * * 1.25 (a major third) rather than something more dramatic: the body face is monospace and * already visually heavy, and large ratio jumps on a mono face read as shouting. * ========================================================================== */ --type-ratio: 1.25; /* 16px at 390, ~17.5px at 1440, capped at 18px. The cap matters: without it a 2560px * display gets 19-20px body text, which is not "generous", it is a large-print edition. */ --step-0: clamp(1rem, 0.93rem + 0.18vw, 1.125rem); --step-1: calc(var(--step-0) * var(--type-ratio)); --step-2: calc(var(--step-1) * var(--type-ratio)); --step-3: calc(var(--step-2) * var(--type-ratio)); /* * SPACING. Steps of 8 / 16 / 24 / 40 / 64 -- roughly Fibonacci rather than doubling, because * pure doubling leaves a hole between 16 and 32 that every layout then fills with an ad-hoc * 24. Having the 24 in the scale is what stops it being invented later. */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --bg-current: none; /* * The picture, as a LUMINANCE MASK for the emissive layers. * * Phosphor emits in proportion to beam current, and beam current is the video signal. So * every layer on this page that models emitted light -- the three gun layers, the phosphor * beam -- has to be zero wherever the picture is black, because an unlit phosphor emits * nothing. They were all screen-blended over the picture with no such gating, which over a * black field is pure addition: measured at 8.08 luma for the guns and 7.05 for the beam, * out of a 36.76 total that should have been 0. * * WHY THIS IS NOT JUST --bg-current. It carries the same URL, which normally would be a * second copy of the truth and therefore a defect. The two cannot be merged because their * SAFE DEFAULTS are opposites: as a paint source an unpublished picture must resolve to * `none` (paint nothing), and as a luminance mask it must resolve to white (mask nothing). * Collapsing them either paints a white floor under the page or blanks every emissive layer * the moment bg-loader is slow. Different types, different failure directions, two names. * * White is deliberately the default rather than black: if bg-loader never publishes, this * degrades to exactly the ungated behaviour that shipped before, rather than silently * deleting three layers and leaving nothing to notice. */ --crt-emission-mask: linear-gradient(#fff, #fff); /* * HALATION, the shared constants -- read by the picture layer AND by the text. * * Radius is DERIVED: a 14-inch tube has about 285mm of visible width and the halo runs to * roughly 3mm, so it is 1.05% of picture width. Against 100vw it tracks the viewport the way * the mask magnification and the moire period already do. * * Gain is a STATED exaggeration, the same pattern as VISIBILITY_GAIN (convergence, 4) and * PERSISTENCE_GAIN (phosphor, 20). True halation is a couple of percent of peak, which on a * web page is indistinguishable from nothing. The MECHANISM and the RADIUS are physical; * only the amplitude is lifted, and it is named rather than buried in an opacity. */ /* ONE owner for the halo size. The shader needs a number and CSS needs a length, so the * percentage is the source and the length is derived from it rather than the two being * written separately and drifting. */ --crt-halation-pct: 1.05; --crt-halation-radius: calc(100vw * var(--crt-halation-pct) / 100); /* * BEAM PROFILE, read by the WebGL tube. * * SPOT GAIN: the electron spot is Gaussian across the scan line and gets WIDER as drive * rises, because a harder-driven beam is a physically bigger spot. That is why a bright line * on a tube is fatter than a dim one, why highlights bleed into their neighbours, and why * bright text loses its scan structure before dark text does. Nothing in the CSS stack could * express it: a blur radius that depends on local luminance is not a thing CSS has. * * EDGE DEFOCUS: the beam travels further to the corners and lands at an angle, so the spot * arrives as a smeared ellipse rather than a dot. Uniform corner-to-corner sharpness is one * of the loudest tells that a picture is not coming off a tube. */ /* * FACEPLATE REFLECTION. A tube front is a sheet of glass, and glass is a mirror. Even in a * dim room a switched-off CRT shows the room back to you, so its black is a reflective grey * and never nothing. The compositing work earlier today drove black to absolute zero, which * is cleaner than any tube has ever been and is part of why the result still reads as a flat * panel rather than as glass. * * Small on purpose: this is the one term that legitimately lifts the black floor, and the * whole point of the operator work was that nothing else may. */ --crt-faceplate-reflection: 0.006; --crt-spot-gain: 0.22; /* * THE TAPE TRANSPORT. Read by the GPU tube; see crt-webgl-tube.js for what each one is. * * FLAGGING is the top-of-frame lean from tape tension, recovering over the next few lines -- * the artifact that makes a picture read as a TAPE before any other tell does, and the page had * none of it. TIME-BASE ERROR is the residual per-line wobble the servo does not catch. CHROMA * LAG is colour arriving LATE, which is a horizontal offset and is NOT the same defect as * --crt-chroma-bleed, a symmetric blur: an edge that trails its colour and an edge with soft * colour look nothing alike, and a tape does both. * * Restrained on purpose. Turned up these read as a broken tape rather than as a tape, and the * target is a picture that looks recorded. */ --crt-flagging: 0.004; --crt-flagging-recovery: 4; --crt-time-base-error: 0.0006; --crt-chroma-lag: 1.4; /* * HORIZONTAL LUMA RESOLUTION IN TV LINES, which is how a format is actually specified. * VHS about 240, broadcast NTSC about 330, S-VHS about 400, Betamax about 250. 0 = no limit. * * TVL counts alternating light and dark vertical lines resolvable across a horizontal distance * equal to the picture HEIGHT, so the shader derives the finest carryable period from it and * the aspect ratio. This is the right way round: --crt-luma-bleed is a radius in PIXELS, which * is a consequence rather than a property -- it needs re-tuning at every viewport and says * nothing about which format is being modelled. A TVL figure survives a resize and can be * looked up. * * Default 0 because the tube itself imposes no such limit; it is the recording format that * does. The vhs-playback preset sets it. */ --crt-luma-tvl: 0; /* * THE VISIBLE APERTURE, as a MULTIPLIER of the corner radius the mask family implies -- * grille 2% of the short edge, slot 6%, delta 12%, because the family names a tube * generation and its glass mould. The radius itself lives in the shader beside the mask it * is derived from; a number here would be a second copy of it. * * 1 is the era-typical corner and 0 is square. Declared here so the shader has the value * before the panel initialises, and so the panel's own default has something to agree with. */ --crt-aperture: 1; /* * CROSS-COLOUR: luma detail at the subcarrier, decoded as colour that is not in the picture. * Dot crawl is the subcarrier leaking into luma; this is the reverse, and it is what puts a * shimmering rainbow over fine stripes on a composite feed. Needs --crt-subcarrier-cycles, * which crt-color-system publishes from NTSC_CONSTANTS. */ --crt-cross-colour: 0.35; /* * HEAD SWITCHING: the last few lines of every field, torn sideways and carrying hash, where a * helical-scan deck swaps between its two heads. Permanent on tape rather than an event -- it * is a property of the format. On a tube it sits in the overscan, which is why broadcast * monitors never showed it and every un-cropped digitised tape does. */ --crt-head-switch: 0.01; --crt-head-switch-lines: 6; /* * DROPOUT: a short run of a line lost to worn oxide or a head losing contact. What is drawn is * the PREVIOUS LINE, verbatim, because that is what a dropout compensator substitutes from its * delay line -- which is why a tape dropout reads as a streak of repeated content rather than * as speckle. Modelling it as white noise, which most VHS filters do, is modelling the defect * without the machinery built to hide it. * * EDGE NOISE: inter-track crosstalk, which shows at high-contrast vertical edges because that * is where the neighbouring track disagrees most. Keyed on the picture gradient, so flat areas * stay clean -- that is what separates it from grain. */ --crt-dropout-rate: 0.004; --crt-dropout-length: 0.06; --crt-edge-noise: 0.05; /* * MISTRACKING: a localised horizontal band, displaced, noisy and desaturated, that TRAVELS * vertically -- the head sweep missing the centre of the recorded stripe. Default 0 because a * well-tracked tape does not show it; this is the control you would reach for to make a tape * look badly adjusted, and it is off until asked for. */ --crt-tracking-error: 0; --crt-tracking-band: 14; --crt-tracking-speed: 0.07; /* * RF GHOSTING from multipath: the signal arriving twice, once direct and once off a building * or a hillside. Specified in MICROSECONDS of delay because that is what a path-length * difference converts into -- 11.2us is a reflector 1.6km away -- and the shader derives the * screen offset from the active line length. A post-ghost trails right and is the common case; * a pre-ghost leads left and only happens when the receiver has locked to the reflection. * * HUM BAR: mains leaking into the supply. It crawls at the BEAT between 60Hz mains and the * 59.94Hz field rate -- 0.06Hz, one pass every 16.7 seconds -- computed from V_FREQ. * * All off by default. These are reception faults, not properties of the display. * * THE LEVELS ARE THE ENABLES; THE DELAYS ARE NEVER ZERO. A multipath reflection with zero * excess delay IS the direct signal, so a ghost at 0us is not a faint ghost, it is the * picture added to itself -- a 60% brightness lift with no displaced copy anywhere. Both * delays used to sit at 0 alongside their levels, which made the pair mutually dead: raising * the level alone brightened the picture, and raising the delay alone was gated off by * `uGhostLevel > 0.001`. The delays now carry a physical value and the control minimums * forbid zero, so turning a level up produces an actual ghost. * * 11.2us is a reflector 1.6km away, which is the figure the shader's own derivation uses. * 1.6us is about a 240m path difference and sits under the 2us the same note gives as the * practical ceiling for a pre-ghost. * * THESE MUST MATCH THE PANEL SCHEMA. They are a second copy of the same defaults -- needed, * because the stylesheet has to stand alone before any JS runs and on the ?tube=css path -- * and they were kept in step by hand until 2026-09-26, when changing one silently left the * other behind and the ghost stayed dead while the slider read 11.2. Enforced now by * tests/dependency-state-contract.test.js. */ --crt-ghost-delay-us: 11.2; --crt-ghost-level: 0; --crt-pre-ghost-delay-us: 1.6; --crt-pre-ghost-level: 0; --crt-hum-bar: 0; /* * THE DIGITAL FAULTS. Everything above is analogue -- a beam, a tape, an aerial. These are what * breaks when the picture has been through a CODEC, and they look nothing like the analogue * set, which is the point of having both. * * DATAMOSH a missing keyframe, so the decoder keeps applying old motion to new content * BLOCK DCT quantisation collapsing to the block average, on a grid fixed to the frame * PIXEL SORT a glitch-art technique rather than a fault: runs reordered by brightness * HUE BANDS the hex-edited-JPEG tell -- bands whose colour rotates but whose brightness does not * * All zero. This page is a tube; these are for when the signal reaching it came through a * codec instead of a cable, and that is a choice rather than a default. */ --crt-datamosh: 0; --crt-block-corruption: 0; --crt-block-size: 8; --crt-pixel-sort: 0; --crt-pixel-sort-threshold: 0.55; --crt-hue-bands: 0; /* * PLASMA. A different display technology, not a variant of the tube. * * Its texture is physical glass BARRIER RIBS, and the lattice is ANISOTROPIC: the rib between * one pixel and the next is much wider than the ribs between the R, G and B subpixels inside * it, with black matrix on both. Reported by owners as horizontal ribs about three times the * vertical ones, visible at two metres. A black egg-crate with heavy rows and fine columns -- * which none of the three shadow-mask geometries can produce. * * FALSE CONTOUR is the signature plasma artifact: a cell is only ever on or off, so grey comes * from pulse-width modulation across weighted subfields, and at a carry boundary the emission * pattern changes completely for a one-step change in level. An eye tracking motion integrates * the wrong thing and sees a band that is not in the signal. It vanishes when motion stops. * * DITHER is the other half: error diffusion hiding the banding, trading a contour for noise. * * All off. This page is a tube. */ --plasma-cells: 0; --plasma-rib-v: 1; --plasma-rib-h: 3; --plasma-pitch: 9; --plasma-false-contour: 0; --plasma-dither: 0; --crt-edge-defocus: 0.07; --crt-halation-gain: 0.16; /* * TEXT HALATION. * * #bg-container::before blooms the PICTURE, because it is the picture blurred and screened. * It cannot reach the text, which is a separate DOM layer and not part of that image -- so * the brightest thing on the page, the title, was the one thing with no halo at all. * * On a tube there is no such distinction: text is drawn by the same beam, its light scatters * in the same faceplate, and the halo radius is a property of the GLASS rather than of the * feature being drawn. So the text halo uses the same radius, which is why it is a variable * and not a second number. * * THREE STOPS, NOT ONE. A halo is a falloff. A single wide shadow is a flat disc of glow and * reads as a drop shadow; sampling the falloff at 0.15 / 0.5 / 1.0 of the radius, with alpha * decreasing as the area grows, is a cheap approximation of the Gaussian. The alphas are all * expressed against --crt-halation-gain so the picture and the text cannot drift apart. * * A CUSTOM PROPERTY holding a shadow list, so it composes: every consumer writes its own * legibility stops first and appends this. That keeps one owner for the halo and lets each * element keep the contrast treatment it needs. */ --crt-text-halation: 0 0 calc(var(--crt-halation-radius) * 0.15 + var(--crt-luma-bleed, 0px)) rgba(255, 255, 255, calc(var(--crt-halation-gain) * 1.6)), 0 0 calc(var(--crt-halation-radius) * 0.5 + var(--crt-luma-bleed, 0px)) rgba(255, 255, 255, calc(var(--crt-halation-gain) * 0.75)), 0 0 calc(var(--crt-halation-radius) + var(--crt-luma-bleed, 0px)) rgba(255, 255, 255, calc(var(--crt-halation-gain) * 0.3)); /* How long the retrace bar takes to cross the screen. Was 25s, which is not a sweep -- * at that speed the bar is on screen for most of the interval between background changes * and reads as a stain rather than as a scan. A rolling bar crosses in a couple of * seconds. See .scanline-sweep. */ --sweep-dur: 2.6s; /* * The scan-line structure, expressed as a LINE COUNT and a derived period. * * It used to be two literals inside .scanlines-interlaced's gradient. That was fine while * nothing else needed to know it, and stopped being fine the moment moire had to be * derived: moire is the BEAT between this period and the shadow mask's row period, so a * second copy of either number is a beat that silently describes the wrong tube. * * The COUNT is the physical quantity, not the period. A fixed 4px meant a taller window * showed more scan lines, and a tube has the number of lines it has whatever size its face * is. crt-interlacing-engine.js publishes --crt-scanline-lines from * CRTPhysics.getVisibleLines() -- NTSC's 486, halved by a stated visibility divisor * because 486 over a 900px viewport is a sub-device-pixel line that aliases to grey. * 243 lands at 3.70px on a 900px viewport, which is where the hand-picked 4px already was. * * The fallback count, 225, is what the old 4px literal worked out to at 900px -- so with * no JS the picture is unchanged rather than merely plausible. */ --crt-scanline-lines: 225; --crt-scanline-period: calc(100vh / var(--crt-scanline-lines, 225)); } * { -webkit-tap-highlight-color: transparent; box-sizing: border-box; } /* Dark loading screen instead of white */ body[data-loading] { background: #0a0a0a !important; /* Dark loading background */ color: #00ffc8 !important; /* Cyan loading text */ } body[data-loading]::before { content: 'LOADING SYSTEM...'; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-ui); color: #00ffc8; font-size: clamp(1rem, 4vw, 1.5rem); letter-spacing: 0.2em; text-shadow: 0 0 10px rgba(0, 255, 200, 0.5); animation: loadingPulse calc(2s * var(--animation-scale, 1)) ease-in-out infinite alternate; z-index: 9999; } @keyframes loadingPulse { from { opacity: 0.5; text-shadow: 0 0 10px rgba(0, 255, 200, 0.3); } to { opacity: 1; text-shadow: 0 0 20px rgba(0, 255, 200, 0.8); } } html, body { height: 100%; margin: 0; padding: 0; } /* * THE PAGE DOES NOT SCROLL, AND THAT IS THE DESIGN. Do not "fix" it. * * Travis, 2026-10-01: "The site isn't supposed to scroll... No content should be below the fold." * * `overflow: hidden` on propagates to the viewport whenever the root element's overflow is * `visible`, which it is. That is what makes this page one fixed screen: a full-viewport hero with * the tube filling it, and the MINI WINDOWS as the route to every piece of content. The * declaration is load-bearing, and `width: 100vw` depends on the horizontal half of it too. * * I BROKE THIS ON 2026-10-01 AND SHIPPED IT TO PRODUCTION BEFORE ASKING. The measurement was * right and the conclusion was not mine to draw: a wheel gesture moves scrollY by 0 against * 2771px of `main` content below the fold, and from that I concluded "every piece of content on * this site is unreachable", called it the largest defect in the repo's history, split * overflow-x/overflow-y and relaxed the height in all three copies. * * Every number in that measurement was correct. The inference was a DESIGN DECISION wearing a bug * report, which is the exact failure the behavioural rules name: rigor is not authorization, and * being right about a mechanism is not standing to change what it does. * * The tell I walked past: a nine-month-old declaration, duplicated across three synchronised * copies, sitting next to `width: 100vw`, is far more likely to be deliberate than forgotten. * `main` carrying content nothing scrolls to is a QUESTION for Travis, not a conclusion. * * Guarded by tests/page-scroll-contract.test.js, which asserts the page does NOT scroll in all * three copies and was verified red against my own change. */ body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; width: 100vw; height: 100vh; height: 100dvh; position: relative; } /* =========================================================================== * CONTENT TYPOGRAPHY * * There was NO `main` rule in this stylesheet at all, at any width, so the prose below the * hero inherited nothing and rendered as an unstyled document dropped under a finished * page. Measured in Firefox before this existed: * * width measure * 1280px 133 characters per line * 1440px 150 * 1920px 200 * 2560px 267 * * The comfortable band is 45-75. At 2560 the eye has to track a quarter-metre of text and * find the start of the next line unaided, which is the single biggest reason the content * area read as unfinished next to the hero. * * `ch` is the right unit and it is exact here rather than approximate: the body face is * JetBrains Mono, so every glyph is one `ch` wide and `70ch` is seventy characters, not an * estimate of seventy. * * box-sizing is content-box ON PURPOSE, against the border-box default set at the top of * this file. With border-box the padding would come out of the measure, so the text column * would narrow as the padding grew and the one number this rule exists to control would * depend on the viewport. content-box keeps the measure at exactly 70ch and lets the * padding sit outside it. * =========================================================================== */ main { max-width: 70ch; margin-inline: auto; /* Same value as the scrim's inline feather, written once. The ramp has to end exactly where * the text box begins; two independent clamps would let one move without the other and put * the fade back under the first and last words of every line. */ padding-inline: var(--scrim-fade-x); box-sizing: content-box; /* * THE SCRIM, and it is an accessibility fix rather than a styling choice. * * Measured against all 31 background photographs, sampling the real composited backdrop -- * photograph plus vignette plus mask plus scan lines -- inside the box the body copy * actually occupies, and computing the WCAG contrast ratio of the text colour against every * pixel of it: * * treatment worst median backgrounds failing AA mean area below 4.5:1 * none 3.00:1 4 of 31 19.8% * flat 35% 4.03:1 2 of 31 9.8% * flat 55% 6.59:1 0 of 31 1.1% * feathered 50% 4.79:1 0 of 31 2.2% * * So four of the backgrounds put the median below the 4.5:1 AA floor outright, and a fifth * of the text area was under it on average. The text-shadow below genuinely helps and WCAG * cannot account for it, so those numbers are the pessimistic bound -- but a bound that says * "four images are unreadable" is not one to argue with. * * FLAT 55% rather than the feathered gradient. Both reach 0 of 31, and the feather looks * softer, but its worst case leaves 46.5% of the area below AA against the flat panel's * 10.8% -- the fade puts its thinnest part exactly where the first and last words of each * line sit. Better contrast at the edges is worth more than a softer edge. * * padding-block is part of the fix, not decoration: without it the first and last lines sit * on the scrim's boundary, which is the one place the protection stops. */ /* * ALL FOUR EDGES ARE FEATHERED, and none of the feather touches a glyph. * * This used to feather the top only, and the note here said the left and right boundaries * "read as a panel" on desktop -- accepting a hard-edged translucent rectangle sitting over * a photograph. Travis reported it as "a black square showing that obviously wasn't supposed * to be, translucent", which is precisely what it is. Accepting it was the wrong call. * * WHY THE MEASURED TRADE-OFF ABOVE DOES NOT APPLY. That table rejected the feathered variant * because its worst case left 46.5% of the text area under AA: a fade drawn across the whole * box puts its thinnest part exactly where the first and last words of each line sit. The * ramps below are drawn only within the PADDING -- 1-2rem inline, and the block padding at * top and bottom -- and the text box begins where the padding ends. So the scrim is still at * its full measured 55% underneath every glyph, and the flat-55% row of that table is still * the one in force. Contrast is unchanged; only the boundary is gone. * * ON A PSEUDO-ELEMENT rather than on `main` itself, because the feather is done with * mask-image and masking `main` would fade the TEXT out at the edges along with the scrim -- * turning a contrast fix into a contrast bug at exactly the pixels it was added to protect. * * The inline ramp is var(--scrim-fade-x), tied to the same clamp as padding-inline rather * than written twice, so the ramp cannot drift outside the padding and start eating text if * one of them is later retuned. */ --scrim: rgba(0, 0, 0, 0.55); --scrim-fade: 2.5rem; --scrim-fade-x: clamp(1rem, 4vw, 2rem); --scrim-fade-b: clamp(1.25rem, 3vh, 2rem); padding-block-start: calc(var(--scrim-fade) + 0.5rem); padding-block-end: var(--scrim-fade-b); position: relative; } main::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--scrim); border-radius: 4px; mask-image: linear-gradient( to bottom, transparent 0, #000 var(--scrim-fade), #000 calc(100% - var(--scrim-fade-b)), transparent 100% ), linear-gradient( to right, transparent 0, #000 var(--scrim-fade-x), #000 calc(100% - var(--scrim-fade-x)), transparent 100% ); mask-composite: intersect; } /* * Anchors must not land a heading under the fixed chrome. * * .transport and #tube-panel-handle are position: fixed at the top of the viewport. Tapping * About, Portfolio or Contact scrolls that section to y=0, which is exactly where those two * controls are -- measured on an iPhone 13, the word "About" rendered directly behind the * effects key this transport replaced. The nav worked and the destination was unreadable. * * scroll-margin-top rather than padding, so it costs nothing in layout and only applies to the * thing it is about: where a scroll comes to rest. */ main section { scroll-margin-top: 5rem; } /* * THE TRANSPORT. Travis, 2026-09-30: "Changed the Effects on/off button to a transport panel, * play = active, pause = active but still image, and stop button is whatever the site loads * with but still image." * * ONE KEY BECAME THREE BECAUSE "OFF" WAS NEVER WHAT IT DID. Both WebGL contexts are created * with preserveDrawingBuffer: true, so when the tube's rAF loop stops the canvas keeps its last * frame -- measured, two captures a second apart are byte-identical while the playing control * differs. So the only two states the control ever had were a moving picture and a still one, * and calling the still one "Effects: Off" described a third state that does not exist. * * It keeps everything the key had, which was the earlier instruction and still stands -- * Travis, 2026-09-27: "The effects button does need to remain visible and stay in its current * location, but it's not fitting with the design of the site." * * It did not fit because it was the only control on the page made of nothing. The panel is a * plasma OSD -- a near-black substrate with an egg-crate lattice on a 9px cell, hairline * ribs, flat steps and no radius -- and this was a 1px rgba rectangle with rounded-off web * defaults sitting next to it. Two controls, two materials. * * It is now cut from the same chassis: the panel's substrate colour, the panel's lattice on * the panel's own frozen pitch, and a bevel instead of a border -- light on the top and left, * dark on the bottom and right, with a seated shadow under it. Four flat 1px steps and no * gradient, because a gradient here would be faking a curved surface, which is the one thing * the chassis rules already forbid. * * IT STAYS TOP-LEFT AND IT STAYS VISIBLE, which was the rest of his instruction. Nothing * here moves it or hides it, and the 44px minimum target is unchanged. * * THE VALUES ARE var() WITH LITERAL FALLBACKS because the --osd-* set is published by the * panel's injected stylesheet, which does not exist until the panel initialises. A key that * is unstyled for the first second is worse than one that never reads the variables at all, * and the fallbacks are the panel's own frozen defaults rather than numbers invented here. * * DUPLICATED IN index.html AND src/_includes/critical-css.njk, deliberately and identically. * Those copies are emitted AFTER this stylesheet, so they win; a divergence is invisible in * the source and obvious on screen. tests/root-variable-contract.test.js compares them. */ .transport { position: fixed; /* * IN OFF THE CORNER, 2026-09-29. Travis: chrome jammed 16px into a corner reads as browser * UI rather than as part of a set -- and the tube gained a rounded aperture the same day, so * a control at 16px now sits in the dark outside the glass instead of on the lit picture. * * 4.5vh is DERIVED from the aperture rather than chosen. The largest family radius is 12% of * the short edge, and the inset at which a corner-anchored box first clears a radius R is * R(1 - 1/sqrt(2)) = 0.293R, which is 3.52vh; 4.5 gives visible clearance rather than * tangency. In vh because the radius is, so the two track each other at any window height. * * The floor keeps it sane on a short window, where 4.5vh would put it against the edge again. * Past an Aperture setting of about 1.2 the radius outgrows this and the key starts to sit in * the dark corner -- that is a control for looking, and it is visible when it happens. */ right: max(18px, 4.5vh); top: max(18px, 4.5vh); z-index: 47; display: inline-flex; align-items: stretch; border: none; border-radius: 0; /* * A 2px GUTTER so the frame below survives. The frame is an inset box-shadow on this element, * which paints on its own background -- and a key is a CHILD, so a lit key painted straight * over it and the frame vanished along that edge. Visible in a capture as a box with three * sides. Padding keeps the keys off it without a second element to draw it with. */ padding: 2px; /* * THE MENU'S OWN BOX AT A SMALLER SIZE, 2026-09-29. It was cell-textured and bevelled, * which was right while the panel was too; the OSD redesign made the panel one flat plane * inside a hard 2px frame, and this is the only other piece of chrome on the page, so it * has to be the same object rather than a second design. */ background-color: var(--osd-off, #0c0805); background-image: none; box-shadow: inset 0 0 0 2px var(--osd-lit, #cdc0a8); } /* * 44px MINIMUM ON BOTH AXES, which is the WCAG 2.5.5 target and Apple's HIG floor. The key this * replaces got there through a mobile-only min-height rule; three keys side by side have to * carry it at every width, because the thing that was wide enough was a word and these are * 12px glyphs. */ .transport-key { position: relative; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: none; border-radius: 0; background: transparent; color: var(--osd-lit, #cdc0a8); cursor: pointer; transition: color 120ms steps(3, end), background-color 120ms steps(3, end); } /* A hairline between keys rather than three boxes. One object with three keys in it. */ .transport-key + .transport-key { box-shadow: inset 1px 0 0 var(--osd-rule, #6d6151); } /* * INVERTED FOR THE CURRENT STATE, which is the panel's own vocabulary -- .stage-head.open is a * solid --osd-readout bar with the ground knocked out of it. Using it here rather than a second * idea of "selected" is the whole reason the chrome and the menu read as one instrument. * * It keys off aria-pressed, so the lit key and the screen reader cannot disagree. A light wired * to a second copy of the state is how a control tells one story to the eye and another to * assistive tech, and that is what the pilot lamp this replaces was carefully avoiding. */ .transport-key[aria-pressed='true'] { background-color: var(--osd-readout, #d89b45); color: var(--osd-off, #0c0805); } .transport-key:hover { color: var(--osd-readout, #d89b45); } .transport-key[aria-pressed='true']:hover { color: var(--osd-off, #0c0805); } .transport-key:focus-visible { outline: 2px solid var(--osd-lit, #cdc0a8); outline-offset: -4px; } /* * THE GLYPHS ARE DRAWN, NOT TYPED. The panel draws its select chevron as two lit cells rather * than a character, on the stated grounds that a glyph would be the only text on the surface * that is not a legend. The same applies here, and more so: the Unicode transport characters * render in whatever fallback face has them, at whatever size that face decides, which is * exactly the native-widget problem the panel's