/* The film: a full-bleed WebGL stage, with its words, its clock and its controls laid over it. */
:root{color-scheme:dark;--ink:#05070d;--violet:#c07af5;--magenta:#f45fb0;--text:#f4f7fc;--soft:#a9b6c9;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block}
/* A soft frame, and a darker foot when words sit over a bright screen. */
#scrim{position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,#05070dcc 100%)}
#scrim::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(transparent,#05070dc7 46%,#05070df5);opacity:var(--foot,0)}

/* Words. Each cue fades up out of a blur and leaves the same way; film.js sets its opacity, blur and --r (the rise, in px) from the film's time, so a frame can be taken at any moment. */
#cues{position:fixed;inset:0;pointer-events:none}
.cue{position:absolute;opacity:0;filter:blur(10px);transform:translateY(var(--r,18px));text-wrap:balance}
.cue em{font-style:normal;color:transparent;background:linear-gradient(100deg,var(--violet),var(--magenta));-webkit-background-clip:text;background-clip:text}
.cue.big,.cue.mid{left:50%;top:50%;width:min(92vw,1100px);margin-left:calc(min(92vw,1100px)/-2);text-align:center;transform:translateY(calc(-50% + var(--r,18px)));text-shadow:0 2px 40px #05070d}
/* Behind large words, a soft darkening, so they read over whatever the stage is doing. */
.cue.big::before,.cue.mid::before,.cue.title::before{content:"";position:absolute;inset:-45% -6%;background:radial-gradient(closest-side,#05070db0,#05070d00);z-index:-1;pointer-events:none}
/* Words that sit inside the ring: as wide as the ring is clear. */
.cue.ringed{left:50%;top:50%;width:46vh;margin-left:-23vh;text-align:center;transform:translateY(calc(-50% + var(--r,18px)));font-size:clamp(20px,6vh,66px);font-weight:300;letter-spacing:-.035em;line-height:1.06}
.cue.big{font-size:clamp(34px,5.6vw,92px);font-weight:300;letter-spacing:-.035em;line-height:1.04}
.cue.mid{font-size:clamp(24px,3.5vw,56px);font-weight:300;letter-spacing:-.025em;line-height:1.14}
.cue.mid span{display:block;margin-top:.9em;font:500 clamp(11px,1.02vw,19px) var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#bcc8da}
.cue.low{top:auto;bottom:17vh}
.cue.title{left:50%;top:50%;width:min(92vw,1100px);margin-left:calc(min(92vw,1100px)/-2);text-align:center;transform:translateY(calc(-50% + var(--r,18px)))}
.cue.title small{display:block;font:500 clamp(12px,1.25vw,22px) var(--mono);letter-spacing:.36em;text-transform:uppercase;color:#dccdff;text-shadow:0 0 18px #05070d,0 0 4px #05070d}
/* The company's name on the last card: a name, not a label. */
.cue.title small.name{font:300 clamp(24px,3vw,54px) var(--sans);letter-spacing:-.035em;text-transform:none;color:#fff}
.cue.title h1{margin:.28em 0 .22em;font-size:clamp(38px,7vw,118px);font-weight:200;letter-spacing:-.045em;line-height:1}
.cue.title p{margin:0;font:400 clamp(14px,1.5vw,26px) var(--sans);color:#d5deec;letter-spacing:.01em;text-shadow:0 0 18px #05070d,0 0 4px #05070d}
.cue.fine{left:50%;bottom:7.2vh;width:min(90vw,820px);margin-left:calc(min(90vw,820px)/-2);text-align:center;font:500 clamp(9.5px,.82vw,12.5px) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
/* A caption: one sentence under the picture, when the picture is the subject. */
.cue.sub{left:50%;bottom:clamp(84px,14.5vh,170px);width:min(92vw,1180px);margin-left:calc(min(92vw,1180px)/-2);text-align:center;font-size:clamp(20px,2.75vw,46px);font-weight:300;letter-spacing:-.022em;line-height:1.16;text-shadow:0 2px 30px #05070d,0 0 3px #05070d}
.cue.sub span{display:block;margin-top:.7em;font:500 clamp(11px,1.02vw,19px) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#bcc8da}
/* A step of the walkthrough: its number, its name, what it does. */
.cue.step{left:clamp(20px,5vw,84px);bottom:clamp(86px,17vh,190px);width:min(34vw,520px);min-width:250px}
.cue.step b{display:block;font:500 clamp(11px,1.02vw,19px) var(--mono);letter-spacing:.3em;color:#d3c2ff}
.cue.step h2{margin:.22em 0 .32em;font-size:clamp(30px,3.6vw,60px);font-weight:250;letter-spacing:-.035em;line-height:1.02}
.cue.step p{margin:0;font-size:clamp(16px,1.6vw,31px);line-height:1.36;color:#e6ecf5}
.cue.step p+p{margin-top:.45em}
.cue.step i{font-style:normal;font:500 clamp(26px,2.8vw,46px) var(--sans);letter-spacing:-.03em;color:var(--magenta);display:block;margin-bottom:.1em}
/* An occasion, named: a label and its name, high in the frame. */
.cue.chip{left:50%;top:clamp(84px,13vh,150px);width:min(92vw,1100px);margin-left:calc(min(92vw,1100px)/-2);text-align:center;text-shadow:0 2px 30px #05070d,0 0 3px #05070d}
.cue.chip b{display:block;font:500 clamp(11px,1vw,14px) var(--mono);letter-spacing:.42em;text-transform:uppercase;color:var(--violet)}
.cue.chip h2{margin:.25em 0 0;font-size:clamp(24px,3.3vw,56px);font-weight:250;letter-spacing:-.03em;line-height:1.08}
/* A lower third, over the immersive view. */
.cue.third{left:clamp(20px,5vw,84px);right:clamp(20px,5vw,84px);bottom:clamp(74px,12vh,130px);font-size:clamp(20px,2.5vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.16;text-shadow:0 2px 30px #05070d,0 0 2px #05070d}
.cue.third em,.cue.sub em,.cue.chip em{background:none;color:#ffa6d5;-webkit-text-fill-color:currentColor}
/* How the figures are made, as one line of steps. */
.cue.pipe{left:50%;bottom:13vh;width:min(94vw,1180px);margin-left:calc(min(94vw,1180px)/-2);display:flex;justify-content:center;flex-wrap:wrap;gap:.5em 0;font:500 clamp(10px,.95vw,14px) var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#dbe4f1}
.cue.pipe span{padding:.7em 1.1em;border:1px solid #c07af555;border-radius:999px;background:#0b1020cc}
.cue.pipe span+span{margin-left:2.2em;position:relative}
.cue.pipe span+span::before{content:"→";position:absolute;left:-1.6em;top:50%;transform:translateY(-50%);color:var(--violet)}
.cta{display:inline-block;margin-top:1.4em;padding:.85em 1.7em;border-radius:999px;background:linear-gradient(100deg,#7b30c9,#c22d86);color:#fff;font:500 clamp(13px,1.15vw,22px) var(--sans);text-decoration:none;pointer-events:auto;box-shadow:0 10px 50px #c22d8655}
.cta:hover{filter:brightness(1.15)}

/* The clock of the simulated week. */
#clock{position:fixed;right:clamp(20px,4vw,64px);top:clamp(64px,10vh,110px);text-align:right;opacity:0;pointer-events:none}
#clock b{display:block;font:300 clamp(26px,3.2vw,54px) var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}
#clock span{font:500 clamp(10.5px,.74vw,14px) var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--soft)}

/* Brand, chapter, controls. They leave when the pointer rests. */
#brand{position:fixed;left:clamp(20px,4vw,64px);top:clamp(18px,3.4vh,34px);display:flex;align-items:baseline;gap:14px;pointer-events:none}
#brand .mark{font:200 26px var(--sans);letter-spacing:-.04em}
#brand .by{font:500 clamp(10px,.7vw,13px) var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--soft);padding-left:14px;border-left:1px solid #ffffff33}
#brand .chapter{font:500 clamp(10px,.7vw,13px) var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#d3b4ff;margin-left:10px;text-shadow:0 0 10px #05070d}
#hud{position:fixed;left:clamp(20px,4vw,64px);right:clamp(20px,4vw,64px);bottom:clamp(14px,2.6vh,26px);display:flex;align-items:center;gap:14px;transition:opacity .5s ease}
body.idle #hud,body.idle #note{opacity:0}
body.idle{cursor:none}
#hud button{border:1px solid #ffffff2e;border-radius:999px;background:#0b1020b3;color:var(--text);font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;cursor:pointer;backdrop-filter:blur(10px);white-space:nowrap}
#hud button:hover{border-color:var(--violet)}
#play{min-width:44px}
#track{position:relative;flex:1;height:22px;cursor:pointer;outline:none}
#track::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:#ffffff26;border-radius:2px}
#fill{position:absolute;left:0;top:10px;height:2px;width:0;background:linear-gradient(90deg,var(--violet),var(--magenta));border-radius:2px;box-shadow:0 0 12px var(--magenta)}
#ticks i{position:absolute;top:6px;width:1px;height:10px;background:#ffffff66}
#ticks i:hover::after,#ticks i.near::after{content:attr(data-name);position:absolute;bottom:16px;left:0;transform:translateX(-50%);white-space:nowrap;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:#0b1020e6;border:1px solid #ffffff22;border-radius:6px;padding:5px 8px}
#time{font:500 11px var(--mono);font-variant-numeric:tabular-nums;color:var(--soft);min-width:38px}
#note{position:fixed;left:0;right:0;bottom:2px;margin:0;text-align:center;font:400 9px var(--mono);letter-spacing:.06em;color:#6f7d92;pointer-events:none;transition:opacity .5s ease}

/* The opening card: the film starts when the viewer is ready for it. */
#gate{position:fixed;inset:0;display:grid;place-items:center;text-align:center;background:radial-gradient(80% 70% at 50% 40%,#1a1038 0,#05070d 70%);transition:opacity 1s ease;z-index:5}
#gate.gone{opacity:0;pointer-events:none}
#gate .kicker{font:500 12px var(--mono);letter-spacing:.42em;text-transform:uppercase;color:var(--violet);margin:0}
#gate h1{margin:.2em 0 .12em;font-size:clamp(40px,7vw,112px);font-weight:200;letter-spacing:-.045em;line-height:1}
#gate .sub{margin:0 0 2.2em;color:var(--soft);font-size:clamp(14px,1.4vw,20px)}
#start{border:0;border-radius:999px;padding:1.05em 2.4em;background:linear-gradient(100deg,#7b30c9,#c22d86);color:#fff;font:500 clamp(14px,1.2vw,18px) var(--sans);cursor:pointer;box-shadow:0 14px 60px #c22d8666;transition:transform .2s ease,filter .2s ease}
#start:hover{transform:translateY(-2px);filter:brightness(1.12)}
#start:disabled{opacity:.45;cursor:progress;transform:none}
/* The versions, side by side: the original, the original closing on the data layers, and the occasions-first cut. */
#gate .versions{display:flex;gap:clamp(12px,1.6vw,24px);justify-content:center;flex-wrap:wrap}
#gate .versions button{display:grid;gap:.35em;justify-items:center;width:min(86vw,340px);border-radius:22px;padding:1.2em 1.4em;text-align:center}
#gate .versions small{font:500 10.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;opacity:.85}
#gate .versions b{font:500 clamp(16px,1.4vw,21px) var(--sans);letter-spacing:-.01em}
#gate .versions span{font:400 12px var(--sans);opacity:.8}
#startOcc,#startLayers{border:1px solid #ff8cc8aa;background:#0b1020cc;color:#fff;cursor:pointer;box-shadow:0 14px 60px #7b30c933;transition:transform .2s ease,border-color .2s ease}
#startOcc:hover,#startLayers:hover{transform:translateY(-2px);border-color:#ff8cc8}
#gate .versions button[hidden]{display:none}
body.locked #startOcc,body.locked #startLayers{display:none}
#gate .keys{margin:2.4em 0 .6em;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#7d8aa0}
#gate .status{margin:0;font:400 11px var(--mono);color:#7d8aa0;min-height:1.4em}
@media(max-width:820px){.cue.step{width:auto;right:20px;bottom:96px}.cue.step h2{font-size:30px}#full{display:none}#brand .chapter{display:none}.cue.pipe span+span{margin-left:1.6em}}

/* The labels of the sheets: words laid over the stage where the sheets are, each in its sheet's colour. */
#tags,#leaders{position:fixed;inset:0;pointer-events:none}
#leaders{width:100%;height:100%}
.tag{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;font:500 clamp(10.5px,.94vw,18px)/1.45 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 14px #05070d,0 0 3px #05070d}
.tag b{display:block;font-weight:600;color:var(--c)}
.tag span{display:block;color:#bcc8da;letter-spacing:.16em;font-size:.84em}
/* The things that enter the model: their names a size up, each with a rule in its colour. */
.tag.thing b{font-size:1.28em;letter-spacing:.16em}
.tag.thing::after{content:"";display:block;width:2.2em;height:2px;margin-top:.55em;background:var(--c)}

/* One to four words filling the frame (film.js sets the size to the largest that fits). */
.cue.mega{left:50%;top:50%;width:92vw;margin-left:-46vw;text-align:center;transform:translateY(calc(-50% + var(--r,18px)));font-size:15vw;font-weight:650;letter-spacing:-.05em;line-height:.94;text-shadow:0 4px 60px #05070d,0 0 18px #05070dcc}
.cue.mega::before{content:"";position:absolute;inset:-20% -4%;background:radial-gradient(closest-side,#05070dc4,#05070d00);z-index:-1;pointer-events:none}
.cue.mega em{background:linear-gradient(100deg,#e2b3ff,#ff86c8);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .04em}

/* A render (render.py): no card, no controls, no cursor. The brand mark and the note stay. */
body.render{cursor:none}
body.render #gate,body.render #hud{display:none}
body.render #note{bottom:0;padding:10px 0 9px;font-size:clamp(11.5px,.72vw,14px);color:#9aa7bb;background:linear-gradient(transparent,#05070dd0 55%)}

/* The film as a deck (?deck=1) */
body.deck #play,body.deck #track,body.deck #sound{display:none}
body.deck #hud{justify-content:flex-end;gap:10px}
body.deck #back,body.deck #next{font-size:22px;line-height:1;width:44px;height:36px;padding:0}
body.deck #time{min-width:64px;text-align:center}
body.deck #stage{cursor:pointer}

/* The film as a video, in the page */
#video{display:block;margin:1.1em auto 0;border:1px solid #ffffff3a;border-radius:999px;padding:.8em 1.8em;background:#0b102080;color:var(--text);font:500 clamp(12px,1vw,15px) var(--sans);cursor:pointer;transition:border-color .2s ease}
#video:hover{border-color:var(--violet)}
#video[hidden],#videoHud[hidden]{display:none}
#gate .decks{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:.9em auto 0}
#gate .decks span{margin-right:.5em;font:500 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8d9ab0}
#gate .decks span[hidden],#presentOcc[hidden],#presentLayers[hidden]{display:none}
#present,#presentLayers,#presentOcc{border:1px solid #ffffff3a;border-radius:999px;padding:.8em 1.6em;background:#0b102080;color:var(--text);font:500 clamp(12px,1vw,15px) var(--sans);cursor:pointer;transition:border-color .2s ease}
#present:hover,#presentLayers:hover,#presentOcc:hover{border-color:var(--violet)}

/* The door: an email, before the film. While it is shut, the ways in are put away. */
#unlock{margin:0 auto 1.2em;width:min(88vw,460px)}
#unlock[hidden]{display:none}
#unlock label{display:block;margin-bottom:.8em;font:500 clamp(14px,1.2vw,18px) var(--sans);color:var(--text)}
#unlock .row{display:flex;gap:8px}
#unlock input[type=email]{flex:1;min-width:0;border:1px solid #ffffff3a;border-radius:999px;padding:.95em 1.3em;background:#0b1020cc;color:var(--text);font:400 16px var(--sans);outline:0}
#unlock input[type=email]:focus{border-color:var(--violet);box-shadow:0 0 0 3px #c07af533}
#unlock button{border:0;border-radius:999px;padding:.95em 1.7em;background:linear-gradient(100deg,#7b30c9,#c22d86);color:#fff;font:500 16px var(--sans);cursor:pointer;white-space:nowrap}
#unlock button:disabled{opacity:.5;cursor:progress}
#unlock #website{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#unlock .why{margin:1em 0 0;font-size:12.5px;line-height:1.5;color:#8d9ab0}
#unlock .err{margin:.7em 0 0;min-height:1.4em;font-size:13px;color:#ff9fc4}
body.locked #start,body.locked #video,body.locked #gate .decks,body.locked #gate .keys{display:none}
#cinema{position:fixed;inset:0;z-index:9;background:#000;display:grid;place-items:center}
#cinema[hidden]{display:none}
#cinema video{width:100%;height:100%;object-fit:contain;background:#000;outline:0}
#cinemaClose,#cinemaSave,#slidesClose,#slidesAt{position:absolute;top:clamp(12px,2.2vh,22px);border:1px solid #ffffff2e;border-radius:999px;background:#0b1020b3;color:var(--text);font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;cursor:pointer;backdrop-filter:blur(10px);text-decoration:none;opacity:.85;transition:opacity .3s ease,border-color .2s ease}
#cinemaClose{left:clamp(12px,2vw,26px)}#cinemaSave{right:clamp(12px,2vw,26px)}
/* The occasions-first film as slides: one picture at a time */
#slides{position:fixed;inset:0;z-index:9;background:#000;display:grid;place-items:center}
#slides[hidden]{display:none}
#slides img{width:100%;height:100%;object-fit:contain;cursor:pointer;user-select:none;-webkit-user-drag:none;touch-action:pan-y}
#slidesClose{left:clamp(12px,2vw,26px)}#slidesAt{right:clamp(12px,2vw,26px);cursor:default}
#slidesClose:hover{opacity:1;border-color:var(--violet)}
#slides .turn{position:absolute;right:clamp(12px,2vw,26px);bottom:clamp(12px,2.2vh,22px);display:flex;gap:8px}
#slides .turn button{width:44px;height:40px;border:1px solid #ffffff2e;border-radius:999px;background:#0b1020b3;color:var(--text);font:400 22px/1 var(--sans);cursor:pointer;opacity:.85;backdrop-filter:blur(10px)}
#slides .turn button:hover{opacity:1;border-color:var(--violet)}
#slides .turn button:disabled{opacity:.3;cursor:default}
#cinemaClose:hover,#cinemaSave:hover{opacity:1;border-color:var(--violet)}
body.deck #videoHud{display:none}

/* The mixed look (?look=mix): where the picture is ink on paper, film.js puts .paper on the body and the words over it are ink too. */
body.paper :is(.cue,#clock,#brand,.tag,#note){--text:#1c1730;--soft:#5d6478;--violet:#7a3fd0;--magenta:#d02f86;color:var(--text);text-shadow:none}
body.paper :is(.cue,#clock,#brand,.tag) *{text-shadow:none}
body.paper #scrim{background:none}
body.paper #scrim::after{background:linear-gradient(transparent,#f8f6f3c7 46%,#f8f6f3f5)}
body.paper .cue:is(.big,.mid,.title,.mega)::before{background:radial-gradient(closest-side,#f8f6f3c8,#f8f6f300)}
body.paper .cue:is(.mid,.sub) span,body.paper .tag span{color:#4f566b}
body.paper .cue.title small{color:#6a3fc0}
body.paper .cue.title small.name{color:#1c1730}
body.paper .cue.title p{color:#3b3550}
body.paper .cue.step b{color:#6a3fc0}
body.paper .cue.step p{color:#2a2440}
body.paper .cue:is(.third,.sub,.chip) em{color:#c8257c}
body.paper .cue.mega em{background:linear-gradient(100deg,#7a3fd0,#d02f86);-webkit-background-clip:text;background-clip:text}
body.paper .cue.pipe span{background:#ffffffcc;border-color:#7a3fd055}
body.paper .tag b{filter:brightness(.62) saturate(1.7)}
body.paper #brand .by{border-left-color:#00000033}
body.paper #brand .chapter{color:#7a3fd0}
body.paper #track::before{background:#00000026}
body.paper #ticks i{background:#00000066}
body.paper #time{color:#4f566b}
body.paper.render #note{color:#6b7385;background:linear-gradient(transparent,#f8f6f3d0 55%)}

/* A cut's calendar (build_cut.py): the year as 52 weeks, over the stage. */
/* What Ether Data sells, at the close: four layers, each lit (--on) as it is named */
.cue.layers{left:50%;top:11vh;width:min(80vw,1240px);margin-left:calc(min(80vw,1240px)/-2)}
.cue.layers b{display:block;margin-bottom:2.4vh;text-align:center;font:500 clamp(11px,1.02vw,19px) var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#dccdff;text-shadow:0 0 18px #05070d}
.cue.layers ol{display:grid;grid-template-columns:1fr 1fr;gap:1.6vh 1.2vw;margin:0;padding:0;list-style:none}
.cue.layers li{--on:0;position:relative;padding:2.3vh 1.7vw 2.4vh;border-radius:16px;background:#0b1020c4;box-shadow:inset 0 0 0 1px rgb(255 140 200/calc(.14 + .5*var(--on))),0 0 calc(48px*var(--on)) rgb(192 122 245/calc(.28*var(--on)));backdrop-filter:blur(8px);opacity:calc(.34 + .66*var(--on))}
.cue.layers li i{display:block;font:500 clamp(10px,.9vw,16px) var(--mono);font-style:normal;letter-spacing:.24em;color:#ff8cc8}
.cue.layers h3{margin:.45em 0 .3em;font-size:clamp(20px,2.2vw,38px);font-weight:400;letter-spacing:-.025em;line-height:1.05;color:#fff}
.cue.layers p{margin:0;font:400 clamp(12px,1.1vw,19px)/1.35 var(--sans);color:#c9d2e3}
@media (max-aspect-ratio:1/1){.cue.layers{top:9vh;width:90vw;margin-left:-45vw}.cue.layers ol{grid-template-columns:1fr}.cue.layers li{padding:1.4vh 4vw}}
.cue.cal{left:50%;top:16vh;width:min(68vw,1300px);margin-left:calc(min(68vw,1300px)/-2);font-family:var(--mono);text-transform:uppercase;color:#dccdff}
.cue.cal b{display:block;font:500 clamp(11px,1.02vw,19px) var(--mono);letter-spacing:.3em;text-align:center;margin-bottom:2.2vh;text-shadow:0 0 18px #05070d}
.cue.cal .weeks{display:flex;gap:.32vw}
.cue.cal .weeks i{flex:1;height:6.4vh;border-radius:.28vw;background:#7b5cff66;box-shadow:inset 0 0 0 1px #b9a6ff55}
.cue.cal .weeks i.s{background:#ff4fa866;box-shadow:inset 0 0 0 1px #ff8cc888}
.cue.cal .weeks i.h{background:#f4efffee;box-shadow:0 0 14px #e8dcffaa}
.cue.cal .months{display:flex;margin-top:1.2vh;font:500 clamp(9px,.78vw,14px) var(--mono);letter-spacing:.18em;color:#bcc8da}
.cue.cal .months span{flex:1;text-align:left}
.cue.cal .key{display:flex;justify-content:center;gap:2.4vw;margin-top:2.4vh;font:500 clamp(9px,.82vw,15px) var(--mono);letter-spacing:.16em;color:#d5deec}
.cue.cal .key span::before{content:"";display:inline-block;width:1.6vh;height:1.6vh;border-radius:.2vw;margin-right:.6vw;vertical-align:-.25vh;background:#7b5cffaa}
.cue.cal .key .s::before{background:#ff4fa8aa}
.cue.cal .key .h::before{background:#f4efff;box-shadow:0 0 10px #e8dcff}

/* Ether Data's brand (?brand=1, film.js puts .brand on the body): the type and the colours of etherdata.ai/design. Inter for structure, 400 and
   500 only, as on ink every heading drops to 500; Iowan Old Style in italic for the accent runs, on the ramp; SF Mono for labels and readouts,
   never weighted, white at half. Panels are the brand's dark glass, radius 22; the one button is its primary. The ramp is the only colour. */
body.brand{--ink:#0d1220;--blue:#7d8bff;--violet:#c07af5;--magenta:#f45fb0;--text:#fff;--soft:rgba(255,255,255,.68);--label:rgba(255,255,255,.52);--ramp:linear-gradient(100deg,#7d8bff,#c07af5 52%,#f45fb0);--mono:SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;--sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;--serif:ui-serif,"Iowan Old Style",Georgia,serif}
body.brand #scrim{background:radial-gradient(120% 90% at 50% 45%,transparent 55%,#0d1220cc 100%)}
body.brand #scrim::after{background:linear-gradient(transparent,#0d1220c7 46%,#0d1220f5)}
body.brand .cue:is(.big,.mid,.title)::before{background:radial-gradient(closest-side,#0d1220b8,#0d122000)}
body.brand .cue:is(.big,.mid,.sub,.third,.chip,.ringed){text-shadow:0 2px 30px #0d1220,0 0 3px #0d1220}
body.brand .cue:is(.big,.mid,.ringed){font-weight:500;letter-spacing:-.03em;line-height:1.04}
body.brand .cue.sub,body.brand .cue.third{font-weight:400;letter-spacing:-.018em;line-height:1.2}
body.brand .cue em,body.brand .cue:is(.third,.sub,.chip) em{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;padding:0 .08em 0 .02em;color:transparent;-webkit-text-fill-color:transparent;background:var(--ramp);-webkit-background-clip:text;background-clip:text;text-shadow:none;filter:drop-shadow(0 1px 2px #0d1220) drop-shadow(0 0 14px #0d1220aa)}
body.brand .cue:is(.mid,.sub) span,body.brand .tag span{font-family:var(--mono);font-weight:400;letter-spacing:.16em;color:var(--label)}
body.brand .cue.title small{font-family:var(--mono);font-weight:400;letter-spacing:.22em;color:var(--label);text-shadow:0 0 18px #0d1220}
body.brand .cue.title small.name{font:500 clamp(24px,2.6vw,46px) var(--sans);letter-spacing:-.02em;color:#fff}
body.brand .cue.title h1{font-weight:500;letter-spacing:-.03em;line-height:1.02}
body.brand .cue.title p{font-weight:400;color:var(--soft);text-shadow:0 0 18px #0d1220,0 0 4px #0d1220}
body.brand .cue.fine,body.brand #note{font-family:var(--mono);font-weight:400;letter-spacing:.16em;color:rgba(255,255,255,.42)}
body.brand .cue.step b,body.brand .cue.chip b,body.brand .cue.layers>b{font-family:var(--mono);font-weight:400;letter-spacing:.22em;color:var(--label)}
body.brand .cue.step h2,body.brand .cue.chip h2{font-weight:500;letter-spacing:-.025em}
body.brand .cue.step p{color:var(--soft)}
body.brand .cue.step i{font:italic 400 clamp(28px,3vw,50px) var(--serif);letter-spacing:0;color:transparent;-webkit-text-fill-color:transparent;background:var(--ramp);-webkit-background-clip:text;background-clip:text;display:inline-block;padding-right:.1em;text-shadow:none}
body.brand .cue.pipe{font-family:var(--mono);font-weight:400;color:#fff}
body.brand .cue.pipe span{background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.03)),#0d1220b0;border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);backdrop-filter:blur(20px) saturate(1.4)}
body.brand .cue.pipe span+span::before{color:var(--label)}
body.brand .cta{border-radius:8px;background:linear-gradient(95deg,#6b7cff,#b56cf0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),inset 0 1px 0 rgba(255,255,255,.5),0 10px 30px -10px rgba(140,110,255,.55);font-weight:500}
body.brand #clock b{font-family:var(--mono);font-weight:400;letter-spacing:.02em}
body.brand #clock span{font-family:var(--mono);font-weight:400;letter-spacing:.22em;color:var(--label)}
body.brand #brand .mark{font:500 24px var(--sans);letter-spacing:-.02em}
body.brand #brand :is(.by,.chapter){font-family:var(--mono);font-weight:400;letter-spacing:.22em;color:var(--label);border-color:rgba(255,255,255,.18);text-shadow:none}
body.brand .tag{font-family:var(--mono);font-weight:400;text-shadow:0 0 14px #0d1220,0 0 3px #0d1220}
body.brand .tag b{font-weight:400}
/* The four layers Ether Data makes: four cards of the brand's dark glass; the one named is lit along its top edge and carries the wash. */
body.brand .cue.layers li{border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.03)),#0d1220b8;box-shadow:inset 0 0 0 1px rgb(255 255 255/calc(.14 + .2*var(--on))),inset 0 1px 0 rgb(255 255 255/calc(.22 + .3*var(--on))),0 30px 70px -34px rgba(0,0,0,.8),0 0 calc(60px*var(--on)) rgb(125 139 255/calc(.22*var(--on)));backdrop-filter:blur(22px) saturate(1.4)}
body.brand .cue.layers li i{font-family:var(--mono);font-weight:400;letter-spacing:.22em;color:rgb(255 255 255/calc(.5 + .5*var(--on)))}
body.brand .cue.layers h3{font-weight:500;letter-spacing:-.022em}
body.brand .cue.layers p{color:var(--soft)}