/* Alice -- glass as a window onto light. * * The night direction, and the argument that a dark glass skin should take its * colour from *behind* the pane rather than mix it into the pane. The glass is * a near-neutral cool tint carrying no hue of its own; every colour in the room * is an aurora of magenta, cyan and violet drifting across the page and * arriving through blur(20px) saturate(170%), which is what stops a dark frost * from silting up into grey. * * The washes stay smooth and a fine grain carries the frost. Blur applied to a * smooth gradient returns the same gradient, so a page of pure washes leaves * the filter real but invisible -- the panes read as translucent tint rather * than as glass. An earlier draft put a 28px grid under the aurora, which * worked and looked like graph paper. The grain does the same job at pixel * scale instead of panel scale, so the aurora keeps its softness and the tell * survives: grain on the open page, clean gradient the moment it passes under * a pane. * * The grain is black rather than grey, and that is a contract decision rather * than a taste one. contrast_test cannot see inside an image layer, so a * lightening grain would raise the page by an amount no assertion can measure * and could quietly push muted ink under its floor. A layer that can only * darken cannot -- it is safe by construction rather than by measurement. * * Rims are deliberately not white. On a dark surface a pure-white 1px edge * reads as a drawn outline rather than a lit one, so the top catches a cool * white at 26% and the bottom carries a violet at 18% -- one light source, * above and slightly behind. * * Four values are chosen rather than derived: * * --surface-panel a *lighter* tint than the page, not a darker one. * The obvious dark-glass recipe -- navy at 55% over a * near-black page -- composites to within 1.03:1 of the * well cut into it, so the search field and the queue * lost their depth entirely. Frosted glass scatters * light; over a night sky it has to lighten. * --readout-bg opaque #05070f. The display is the one thing in the * room that is not glass, because the room's QR code * has to survive whatever the aurora is doing behind it. * --ink-on-accent near-black on the cyan. White on #22d3ee is 1.81:1; * the accent is the brightest thing here and has to be * written on, not through. * --surface-row-active a violet tint rather than the cyan, so "playing now" * and "press this" stay different colours. Only the * violet is reserved: --accent is placed by the system, * not by the skin, so the cyan also lands on panel * titles, the people chip and the join code. A skin * chooses what the accent *is*, never where it goes. * * The aurora is also why the page is as dim as it is: muted ink on the page is * the first casualty of a bright stop, and at the 0.42 the washes started at it * was failing at 3.81:1 inside the cyan. * * That ceiling is now split rather than spent. --bg-page-texture holds the half * of the aurora that stays put (0.13-0.16) and --bg-page-lights holds the half * that drifts, and the drifting half is the brighter one because it has work to * do: a light nobody can see move is just a gradient. Which is also why its * three stops are not the same three colours. contrast_test composites each * light over each wash, so the budget is luminance rather than colour, and the * pale #7df3ff cyan the readout uses would eat all of it at 0.10 -- the moving * lights are the deep end of the same palette (0.22 magenta, 0.25 indigo) with * only a thin cyan, which buys twice the visible movement at the same ratio. */ [data-skin="alice"] { /* page -- three lights behind the glass, and nothing else */ --bg-page: #070a18; --bg-page-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E"), radial-gradient(65% 55% at 15% 0%, rgba(217, 70, 239, 0.15) 0%, rgba(217, 70, 239, 0) 100%), radial-gradient(55% 50% at 85% 18%, rgba(34, 211, 238, 0.13) 0%, rgba(34, 211, 238, 0) 100%), radial-gradient(75% 65% at 45% 105%, rgba(99, 102, 241, 0.16) 0%, rgba(99, 102, 241, 0) 100%); --bg-page-lights: radial-gradient(26% 22% at 32% 28%, rgba(217, 70, 239, 0.22) 0%, rgba(217, 70, 239, 0) 100%), radial-gradient(24% 20% at 72% 58%, rgba(125, 243, 255, 0.12) 0%, rgba(125, 243, 255, 0) 100%), radial-gradient(30% 18% at 48% 80%, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0) 100%); --surface-blur: blur(20px) saturate(170%); --surface-panel: rgba(148, 163, 214, 0.13); --surface-raised: rgba(148, 163, 214, 0.16); --surface-sunken: rgba(3, 5, 14, 0.52); --surface-row: rgba(148, 163, 214, 0.08); --surface-row-active: rgba(99, 102, 241, 0.55); --ink-on-row: #e7ecff; --ink-on-row-dim: #b0bbe1; /* ink */ --ink-primary: #eef1ff; --ink-secondary: #b9c2e6; --ink-muted: #b0bbe1; --ink-on-accent: #04131a; --ink-on-active-row: #f2f3ff; /* accent -- the cyan light, brought to the front of the pane */ --accent: #22d3ee; --focus-shadow: 0 0 0 3px rgba(34, 211, 238, 0.35); --accent-secondary: #f0abfc; --danger: #fb7185; --positive: #4ade80; /* readout -- the one opaque surface, so the QR code has a field to sit on */ --readout-bg: #05070f; --readout-ink: #7df3ff; --readout-ink-dim: #7f8bb8; --readout-glow: 0 0 22px rgba(125, 243, 255, 0.55); --readout-texture: none; /* chrome -- a lighter band of the same glass, wordmark centred */ --chrome-bg: rgba(148, 163, 214, 0.10); --chrome-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); --chrome-ink: #dbe2ff; --chrome-height: 42px; --chrome-font: "Sora", system-ui, sans-serif; --chrome-size: 12px; --chrome-tracking: 0.22em; --chrome-transform: uppercase; --chrome-text-align: center; --chrome-buttons: flex; --chrome-close-display: none; --chrome-button-size: 18px; --chrome-button-pad: var(--space-3); --chrome-button-bg: transparent; --chrome-rail: none; --chrome-rail-display: none; --chrome-title-bg: transparent; --chrome-title-border: 0 solid transparent; --chrome-title-padding: 0; --chrome-title-radius: 0; --chrome-button-border-width: 0px; --chrome-button-minimize-image: none; --chrome-button-maximize-image: none; --chrome-button-close-image: none; --chrome-button-ink: #dbe2ff; --chrome-close-bg: transparent; /* edge -- lit from above and slightly behind, never with white */ --edge-width: 1px; --edge-radius: 16px; --edge-radius-sm: 12px; --edge-radius-pill: 999px; --edge-top: rgba(226, 232, 255, 0.26); --edge-left: rgba(226, 232, 255, 0.14); --edge-right: rgba(129, 140, 248, 0.14); --edge-bottom: rgba(129, 140, 248, 0.18); --edge-inset-top: rgba(3, 5, 14, 0.70); --edge-inset-left: rgba(3, 5, 14, 0.55); --edge-inset-right: rgba(226, 232, 255, 0.10); --edge-inset-bottom: rgba(226, 232, 255, 0.14); --edge-hairline: rgba(148, 163, 214, 0.22); --device-radius: 46px; --edge-shadow: inset 0 1px 0 rgba(226, 232, 255, 0.16), 0 24px 60px rgba(2, 3, 12, 0.55); --edge-shadow-float: inset 0 1px 0 rgba(226, 232, 255, 0.22), 0 40px 90px rgba(2, 3, 12, 0.70); /* control -- a brighter shard of the same pane */ --control-height: 50px; --control-radius: 16px; --control-face: rgba(148, 163, 214, 0.16); --control-texture: none; --control-frame-image: none; --control-frame-image-active: none; --control-frame-slice: 100%; --control-frame-width: 1; --control-frame-outset: 0; --control-face-active: rgba(3, 5, 14, 0.45); --control-ghost-hover-face: rgba(148, 163, 214, 0.12); --control-border-width: 1px; --control-icon-border-width: 1px; --control-decrement-icon: url("/llama/icons/remove.svg"); --control-increment-icon: url("/llama/icons/add.svg"); --control-ink: #eef1ff; --control-font: "Sora", system-ui, sans-serif; --control-size: 14px; --control-tracking: 0.02em; --control-transform: none; --control-light: rgba(226, 232, 255, 0.28); --control-dark: rgba(129, 140, 248, 0.16); --control-shadow: inset 0 1px 0 rgba(226, 232, 255, 0.18), 0 8px 20px rgba(2, 3, 12, 0.40); --control-shadow-hover: inset 0 1px 0 rgba(226, 232, 255, 0.28), 0 12px 28px rgba(2, 3, 12, 0.50); --control-shadow-active: inset 0 2px 8px rgba(2, 3, 12, 0.65); --control-icon-shadow: inset 0 1px 0 rgba(226, 232, 255, 0.18); --control-icon-shadow-active: inset 0 2px 8px rgba(2, 3, 12, 0.65); --control-content-shadow: 0 1px 2px rgba(2, 3, 12, 0.55); --control-content-shadow-active: 0 1px 2px rgba(2, 3, 12, 0.75); --control-hover-filter: none; --control-pad: var(--space-4); /* room actions -- the pause/skip row under the player, and the rule that closes it off from the search field below */ --action-lift: var(--space-2); --action-icon-display: block; --action-divider-width: var(--edge-width); --action-divider-gap: var(--space-4); /* meter -- the aurora run end to end */ --meter-track: rgba(3, 5, 14, 0.55); --meter-fill: linear-gradient(90deg, #22d3ee, #818cf8, #e879f9); --meter-height: 8px; --meter-radius: 999px; --meter-thumb: #e7ecff; --meter-thumb-width: 16px; --meter-thumb-height: 16px; /* visualizer -- the same three lights, stood upright */ --viz-gradient: linear-gradient(#e879f9, #22d3ee); --viz-gap: 4px; --viz-radius: 999px; --viz-floor: 0.16; /* art -- a record again: this direction is the loud one. Both the label and the spindle are dark, because .rk-art__label paints over .rk-art__spindle: the selection code is read against whichever of the two sits under each glyph, so a bright centre breaks the middle of the code even when the ring around it is fine. The colour is spent on the pinhole instead. */ --art-radius: 999px; --art-bg: #0a0d1e; --art-ink: #e7ecff; --art-texture: repeating-radial-gradient(circle at 50% 50%, rgba(226, 232, 255, 0.10) 0 2px, rgba(226, 232, 255, 0) 2px 6px); --art-label: #0d4b5e; --art-spindle: #05070f; --art-hole: #e879f9; --art-spin: rk-spin 4.5s linear infinite; /* type */ --font-display: "Sora", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-readout: "IBM Plex Mono", ui-monospace, monospace; --font-label: "IBM Plex Mono", ui-monospace, monospace; --label-size: 11px; --label-tracking: 0.18em; --label-transform: uppercase; --label-weight: 500; --title-tracking: -0.03em; --title-transform: none; --title-weight: 700; --body-line: 1.5; /* motion */ --viz-period: 760ms; --marquee-duration: 28s; --bg-lights-drift: rk-drift 26s var(--ease) infinite alternate; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); }