/* Controls and play. Everything here floats above the three layers and can be moved. */
#tags, #dock { position:fixed; inset:0; z-index:5; pointer-events:none; }
#tags { z-index:4; }
.tag, .orb { pointer-events:auto; }
.mover { position:fixed; left:0; top:0; }
body.pulling, body.pulling * { cursor:grabbing !important; }
body.notwist #back, body.notwist #front, body.notwist #near { display:none; }
body.nowords #words, body.nowords #wordstop { display:none; }
body.nointro #ui { display:none; }
body.noicons #dock .orb, body.noicons #peepbtn { display:none; }
body.tagdots .tag:not(:focus-visible) { font-size:0; padding:.42rem; min-width:.95rem; }
.orb.child { transition:transform .38s cubic-bezier(.2,.8,.2,1), opacity .22s ease, box-shadow .25s ease, background .8s ease; opacity:0; visibility:hidden; }
.orb.child.out { opacity:1; visibility:visible; }
.orb.child em { left:calc(100% + .5rem); bottom:auto; top:50%; transform:translateY(-50%); opacity:1; }
.orb[aria-expanded=true] { outline:2px solid var(--ink); outline-offset:2px; }
#homeorb { opacity:0; visibility:hidden; transition:opacity .4s ease; }
#homeorb.show { opacity:1; visibility:visible; }
.note .fold { font:700 .75rem/1 var(--mono); color:inherit; background:none; border:0; padding:.25rem .4rem; margin-left:.3rem; cursor:pointer; border-radius:.4rem; vertical-align:middle; }
.who b button.home { all:unset; cursor:pointer; }
.who b button.home:focus-visible { outline:2px solid currentColor; outline-offset:2px; }

/* The menu. Headings are words, not buttons. Anything that can be pressed has an edge and shows when it is on. */
#menupanel { position:fixed; z-index:9; left:0; top:0; width:min(21rem,calc(100vw - 24px)); max-height:min(78vh,44rem); display:none; flex-direction:column; color:var(--ink); font:500 .8125rem/1.3 "Helvetica Neue",Helvetica,Arial,sans-serif; background:color-mix(in srgb, var(--ground) 68%, transparent); -webkit-backdrop-filter:blur(26px) saturate(1.5); backdrop-filter:blur(26px) saturate(1.5); border:1px solid rgba(255,255,255,.45); border-radius:1.25rem; box-shadow:0 18px 60px rgba(12,8,24,.28); cursor:default; }
#menupanel.open { display:flex; }
#menuhead { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.7rem .85rem .35rem; cursor:grab; touch-action:none; }
#menuhead strong { font-size:1rem; font-weight:800; letter-spacing:-.02em; }
#menustatus { padding:0 .85rem .55rem; font:500 .6875rem/1.35 var(--mono); opacity:.86; }
#menubody { overflow:auto; padding:0 .85rem .85rem; display:grid; gap:.5rem; overscroll-behavior:contain; }
#menupanel details { border-top:1px solid color-mix(in srgb, var(--ink) 22%, transparent); padding-top:.5rem; }
#menupanel summary { cursor:pointer; font-weight:800; letter-spacing:-.01em; list-style:none; display:flex; justify-content:space-between; padding:.15rem 0; }
#menupanel summary::-webkit-details-marker { display:none; }
#menupanel summary::after { content:'+'; font-weight:500; }
#menupanel details[open] summary::after { content:'\2212'; }
.group { margin:.55rem 0; }
.group > .name { display:block; font:600 .6875rem/1.2 var(--mono); opacity:.8; margin-bottom:.3rem; }
.group > .hint { display:block; font-size:.6875rem; opacity:.76; margin-top:.3rem; }
.opts { display:flex; flex-wrap:wrap; gap:.3rem; }
.ctl { font:600 .75rem/1 "Helvetica Neue",Helvetica,Arial,sans-serif; color:inherit; background:color-mix(in srgb, var(--ground) 40%, transparent); border:1px solid color-mix(in srgb, var(--ink) 34%, transparent); border-radius:999px; padding:.42rem .68rem; min-height:1.75rem; cursor:pointer; }
.ctl:hover { border-color:var(--ink); }
.ctl[aria-checked=true], .ctl[aria-pressed=true] { background:var(--ink); color:var(--ground); border-color:var(--ink); }
.slide { display:grid; grid-template-columns:4.2rem 1fr 2.4rem; align-items:center; gap:.4rem; font-size:.75rem; font-weight:600; margin:.3rem 0; }
.slide input { width:100%; accent-color:var(--ink); }
.slide output { font:500 .6875rem/1 var(--mono); text-align:right; }
.swatches { display:flex; gap:.35rem; align-items:center; margin-top:.4rem; }
.swatches input[type=color] { width:1.9rem; height:1.9rem; padding:0; border:1px solid color-mix(in srgb, var(--ink) 34%, transparent); border-radius:50%; background:none; overflow:hidden; cursor:pointer; }
.swatches input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.swatches input[type=color]::-webkit-color-swatch { border:0; border-radius:50%; }

/* Pane content */
.pane { display:flex; flex-direction:column; }
.pane .draft { align-self:flex-start; font:700 .6875rem/1 var(--mono); border:1px solid currentColor; border-radius:999px; padding:.3rem .55rem; margin-bottom:.8rem; opacity:.8; }
#panebody { display:grid; gap:1rem; font-size:clamp(15px,1.2vw,1.25rem); line-height:1.42; }
#panebody h3 { margin:.6rem 0 0; font-size:1.2em; font-weight:800; letter-spacing:-.02em; }
#panebody .row { display:grid; gap:.15rem; padding:.7rem 0; border-top:1px solid color-mix(in srgb, var(--ink) 28%, transparent); }
#panebody .row b { font-weight:800; letter-spacing:-.01em; }
#panebody .row span { font:500 .8em/1.3 var(--mono); opacity:.8; }
#panebody a { color:inherit; font-weight:700; }
#panebody figure { margin:0; }
#panebody img { width:100%; border-radius:1rem; display:block; }
#panebody figcaption { font-size:.85em; opacity:.8; margin-top:.35rem; }

/* Loose Parts */
body.loose, body.loose * { cursor:move !important; }
body.loose .note, body.loose .tag, body.loose .big span { outline:1px dashed color-mix(in srgb, var(--ink) 45%, transparent); outline-offset:3px; }
body.loose .note { pointer-events:auto; }
#back, #front, #lines { translate:var(--sx,0) var(--sy,0); }
#playbar { position:fixed; z-index:10; left:50%; top:1rem; transform:translateX(-50%); display:none; gap:.4rem; align-items:center; padding:.4rem .5rem .4rem .9rem; border-radius:999px; font:600 .8125rem/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif; color:var(--ink); background:color-mix(in srgb, var(--ground) 70%, transparent); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid rgba(255,255,255,.45); box-shadow:0 10px 30px rgba(12,8,24,.2); max-width:calc(100vw - 24px); flex-wrap:wrap; justify-content:center; }
#playbar.on { display:flex; }

/* View Layers */
body.layers { perspective:2400px; perspective-origin:50% 45%; background:#0b0a0d !important; }
body.layers #tags *, body.layers #dock .orb:not(#menubtn), body.layers #ui * { pointer-events:none; }
.ly { transition:transform 1.3s cubic-bezier(.2,.8,.2,1), opacity .8s ease; }
#groundcard { position:fixed; inset:0; z-index:-1; background:var(--ground); opacity:0; pointer-events:none; }
body.layers #groundcard { opacity:1; }
.frame { position:fixed; inset:0; pointer-events:none; background:transparent; border:1px solid rgba(255,255,255,.5); box-shadow:inset 0 0 0 1px rgba(12,8,24,.25); opacity:0; }
body.layers .frame { opacity:1; }
.frame span { position:absolute; left:.8rem; top:.7rem; font:700 1.5rem/1 var(--mono); color:#fff; background:#171019; padding:.5rem .8rem; border-radius:.6rem; }
#menubtn { z-index:35; }
#menupanel { z-index:36; }

/* Collapse Everything */
body.abyss { background:#000 !important; overflow:hidden; }
#abyss { position:fixed; inset:0; z-index:30; display:none; place-content:center; text-align:center; background:radial-gradient(circle at 50% 46%, #09080c 0, #000 62%); color:#efeadf; opacity:0; transition:opacity 1.4s ease 1.1s; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }
body.abyss #abyss { display:grid; }
#abyss.show { opacity:1; }
#abyss h2 { font-size:min(26vw,44vh); line-height:.84; letter-spacing:-.06em; font-weight:800; margin:0; }
#abyss p { margin:.8em 0 1.6em; font:400 1rem/1.4 var(--mono); opacity:.8; }
#abyss button { font:700 .875rem/1 var(--mono); color:#000; background:#efeadf; border:0; border-radius:999px; padding:.8rem 1.2rem; cursor:pointer; justify-self:center; }

/* Peep */
#peel { position:fixed; inset:0; z-index:12; pointer-events:none; }
#peel iframe { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; visibility:hidden; }
#flapwrap { position:absolute; inset:0; pointer-events:none; filter:drop-shadow(-14px -14px 26px rgba(0,0,0,.42)); }
#flap { position:absolute; inset:0; clip-path:polygon(0 0,0 0,0 0); background:linear-gradient(315deg, #fff, var(--ground) 40%, color-mix(in srgb, var(--ground) 76%, #000)); }
#peepbtn { z-index:13; }
#peepname { position:fixed; z-index:13; left:50%; bottom:1rem; transform:translateX(-50%); font:700 .75rem/1 var(--mono); color:#fff; background:rgba(12,8,24,.66); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); padding:.5rem .8rem; border-radius:999px; opacity:0; transition:opacity .4s ease; pointer-events:none; white-space:nowrap; }
#peepname.show { opacity:1; }
@media (prefers-reduced-motion: reduce) { .ly, .orb.child, #abyss { transition:none; } }
body.notwist .tag { background:linear-gradient(140deg, color-mix(in srgb, var(--tint) 62%, transparent), color-mix(in srgb, var(--tint) 34%, transparent)); }
.pane .draft { align-self:auto; justify-self:start; width:fit-content; }
body.layers .frame { background:color-mix(in srgb, var(--ground) 34%, transparent); }
#plain .row { margin:0 0 1rem; } #plain .row b, #plain .row span { display:block; } #plain .row span { font-size:.875rem; opacity:.8; }
#peepbtn { position:fixed; z-index:14; }
#worldback { position:fixed; z-index:14; right:calc(20px + 3.4rem); top:calc(20px + .55rem); font:700 .75rem/1 var(--mono); color:#fff; background:rgba(12,8,24,.66); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:.55rem .8rem; cursor:pointer; }
#worldback[hidden] { display:none; }
body.layers #peepbtn, body.abyss #peepbtn, body.plain #peepbtn { display:none; }
/* The ground plate: the light falloff from the approved still, baked in Blender and painted once. */
body { background-image:url(./assets/grain.png), url(./assets/ground-plate.jpg); background-size:128px 128px, 100% 100%; background-blend-mode:multiply, multiply; }
body.layers, body.abyss, body.plain { background-image:none; }
.soft { position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; }
#softnear { z-index:2; }
body.notwist .soft { display:none; }
.note .fold { border:1px solid color-mix(in srgb, var(--ink) 34%, transparent); border-radius:999px; padding:.2rem .5rem; min-height:1.5rem; }
#peepname { top:1rem; bottom:auto; }

/* Access */
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#skip { position:fixed; z-index:40; left:.5rem; top:.5rem; transform:translateY(-200%); background:var(--ink); color:var(--ground); font:700 .875rem/1 var(--mono); padding:.8rem 1rem; border-radius:.6rem; }
#skip:focus { transform:none; }
#plain button { min-height:2.75rem; }
#lines polyline.halo { stroke:var(--ground); stroke-width:calc(var(--hair,1) * 2.6); opacity:.3; }
body.empty #lines polyline.halo { opacity:.3; stroke:var(--ground); }
body.calm .ly, body.calm .orb.child, body.calm #abyss, body.calm .tag, body.calm #glass { transition:none; }
body.tagdots .tag:not(:focus-visible) { min-width:1.5rem; min-height:1.5rem; padding:0; }
.group > .name, .group > .hint, #menustatus { opacity:1; }
#panehold { position:absolute; top:clamp(14px,2vw,26px); right:calc(clamp(14px,2vw,26px) + 4.6rem); font:700 .75rem/1 var(--mono); color:var(--ink); background:none; border:1px solid currentColor; border-radius:999px; padding:9px 13px; cursor:pointer; }
#panehold[aria-pressed=true] { background:var(--ink); color:var(--ground); }
.pane h2 { padding-right:2.2em; }
@media (max-width:640px) { .pane h2 { padding-right:0; margin-top:2.6rem; } }
@media (hover:none) { .orb.child em { opacity:1; } }

/* Menu first */
body.closed #dock .orb:not(#menubtn), body.closed #peepbtn:not(.inworld) { display:none !important; }
.dab { width:1.5rem; height:1.5rem; padding:0; border:1px solid rgba(255,255,255,.6); border-radius:50%; cursor:pointer; }
/* Glass words: no colour in the letters, only their edge and the light on them. */
body.glasswords .big span { color:transparent; -webkit-text-stroke:calc(var(--hair,1) * 1.5px) color-mix(in srgb, var(--ink) 32%, transparent); background:linear-gradient(165deg, rgba(255,255,255,.6), rgba(255,255,255,.06) 52%, color-mix(in srgb, var(--ink) 7%, transparent)); -webkit-background-clip:text; background-clip:text; }
body.glasswords .high span { filter:drop-shadow(0 10px 16px rgba(12,8,24,.12)); }
body.allglass .big span { -webkit-text-stroke-color:color-mix(in srgb, var(--t0) 46%, color-mix(in srgb, var(--ink) 30%, transparent)); }
body.allglass .note { color:var(--ink); }
body.pouring, body.pouring * { cursor:cell; }
body.pouring #menupanel, body.pouring #menupanel *, body.pouring .orb { cursor:pointer; }

/* The name is on screen from the first moment, before any script has run. */
#words .big[data-c="0"] { opacity:1; }

/* A clicked label is always readable, on every ground and in every glass. */
body .tag[aria-pressed=true], body.frosted .tag[aria-pressed=true], body.empty .tag[aria-pressed=true], body.notwist .tag[aria-pressed=true] { background:var(--ink); color:var(--ground); border-color:var(--ink); }
/* Type for machines without Helvetica Neue. It only downloads for them. */
@font-face { font-family:"Hub Display"; src:url(./assets/hub-display.woff2) format("woff2"); font-weight:800; font-display:swap; }
/* All off */
#offnote { z-index:3; opacity:0; visibility:hidden; pointer-events:none; color:var(--ink); }
body.alloff #offnote, body.breathing #offnote { opacity:1; visibility:visible; }
body.nolabels #tags, body.nolabels #lines { display:none; }
body.alloff .soft, body.alloff #peepbtn, body.alloff #dock .orb:not(#menubtn) { display:none !important; }
body.alloff .note { display:none; }
body.breathing #dock, body.breathing #tags, body.breathing #lines, body.breathing #ui, body.breathing #words, body.breathing #wordstop, body.breathing #peepbtn { visibility:hidden; }
body.breathing #offnote .big, #offnote span { display:block; }
/* Wash */
#wash { position:fixed; inset:0; width:100vw; height:100vh; z-index:7; opacity:0; visibility:hidden; transition:opacity .9s ease; cursor:crosshair; touch-action:none; pointer-events:auto; }
#wash.on { opacity:1; visibility:visible; }
.washknob { display:inline-flex; gap:.3rem; align-items:center; font-size:.75rem; }
.washknob input { width:5.5rem; accent-color:var(--ink); }
/* Command line */
#abyss h2 { margin-bottom:0; }
#cmdline { font:400 1rem/1.4 var(--mono); display:flex; gap:.5rem; justify-content:center; align-items:baseline; color:#efeadf; }
#cmd { background:none; border:0; border-bottom:1px solid #efeadf66; color:#efeadf; font:inherit; outline:none; min-width:11ch; width:16ch; caret-color:#efeadf; }
#cmd:focus { border-bottom-color:#efeadf; }
#cmdout { font:400 .875rem/1.5 var(--mono); opacity:.72; margin-bottom:.5rem; }
#cmdhint { font:400 .75rem/1.4 var(--mono); opacity:0; transition:opacity 2.4s ease; margin-top:1rem; }
#cmdhint.show { opacity:.42; }
/* Layers you can hold */
.frame span { pointer-events:auto; cursor:grab; display:inline-flex; gap:.6rem; align-items:center; touch-action:none; }
.minim { font:700 .875rem/1 var(--mono); color:#fff; background:none; border:1px solid #fff9; border-radius:999px; padding:.3rem .6rem; cursor:pointer; }
body.layers .frame.small { background:none; border:0; box-shadow:none; }
.minimised, .minimised * { visibility:hidden !important; pointer-events:none !important; }
/* Player */
.player { margin:0; display:grid; gap:.6rem; }
.player .stage { aspect-ratio:16/9; border-radius:1rem; overflow:hidden; background:#07060a; }
.player video, .player iframe { width:100%; height:100%; border:0; display:block; }
.player .poster { height:100%; display:grid; place-items:center; padding:1.5rem; text-align:center; color:#f5f0e6; font-weight:800; letter-spacing:-.03em; font-size:1.4em; line-height:1.05; }
.player .tools { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.player .tools button { font:700 .8125rem/1 var(--mono); color:var(--ground); background:var(--ink); border:0; border-radius:999px; padding:.55rem .9rem; cursor:pointer; min-width:4.6rem; }
.player .tools input[type=range] { flex:1 1 8rem; accent-color:var(--ink); }
.player .tools label { display:inline-flex; gap:.35rem; align-items:center; font-size:.8125rem; }
.player .tools label input { width:5rem; flex:none; }
#peepname { white-space:normal; max-width:min(36rem,calc(100vw - 2rem)); text-align:center; line-height:1.35; }
#flapwrap { filter:drop-shadow(-10px -12px 22px rgba(0,0,0,.34)) drop-shadow(-2px -2px 3px rgba(0,0,0,.28)); }
#stream { position:fixed; inset:0; width:100vw; height:100vh; z-index:3; pointer-events:none; }
body.layers #stream, body.abyss #stream { display:none; }
#abyss #cmdhint { opacity:0; }
#abyss #cmdhint.show { opacity:.42; }
.frame { visibility:hidden; }
body.layers .frame { visibility:visible; }
.minim { min-height:3rem; min-width:3rem; padding:.4rem .9rem; }

body.frosted .tag, body.empty .tag { background:linear-gradient(140deg, color-mix(in srgb, var(--ground) 86%, transparent), color-mix(in srgb, var(--ground) 72%, transparent)); }
body .tag[aria-pressed=true], body.frosted .tag[aria-pressed=true], body.empty .tag[aria-pressed=true], body.notwist .tag[aria-pressed=true] { background:var(--ink); color:var(--ground); border-color:var(--ink); }

body.tagdots .tag:not(:focus-visible) { visibility:hidden; }
body.loose #lines circle { pointer-events:all; }
body.loose #lines polyline:not(.halo) { pointer-events:stroke; stroke-width:6; }
body.alloff #stream, body.notwist #stream { display:none !important; }

/* Keep the tint, with enough ground in the glass to protect its type. */
body .tag, body.frosted .tag, body.empty .tag, body.notwist .tag {
  --labelglass:color-mix(in srgb, var(--ground) 88%, var(--tint));
  background:linear-gradient(140deg, color-mix(in srgb, var(--labelglass) 96%, transparent), color-mix(in srgb, var(--labelglass) 92%, transparent));
}
body .tag[aria-pressed=true] { background:var(--ink); color:var(--ground); border-color:var(--ink); }
body.solid .tag[aria-pressed=true], body.strong .tag[aria-pressed=true] { color:var(--ink); }
#menupanel { background:color-mix(in srgb, var(--ground) 94%, transparent); }
#menupanel .hint { opacity:1 !important; }
.note { font-size:clamp(14px,1.2vw,1.3rem); }
body.strong .note { background:none; padding:0; }
/* Clear space follows the small words, without a box. */
#back, #front, .soft, #words, #wordstop, #lines, #stream {
  -webkit-mask-image:var(--reading-space,none); mask-image:var(--reading-space,none);
}
body.nointro, body.layers, body.abyss { --reading-space:none !important; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { body .tag[aria-pressed=true] { color:var(--ink); } }

#plain .work-piece { border:0; margin:0; padding:0; border-radius:0; }
#glass.portfolio .pane { background:color-mix(in srgb, var(--ground) 94%, transparent); }
#glass.portfolio figcaption { opacity:1; }
/* Breathe: nothing behind the word but the rope. The word sits alone in a frosted pop-up that swells with the breath. */
body.breathing #words .big, body.breathing #wordstop .big { visibility:hidden !important; }
body.breathing #offnote { inset:auto; left:50%; top:50%; translate:-50% -50%; display:grid; place-items:center; width:min(52vmin,24rem); aspect-ratio:1; padding:0; border-radius:50%; font-size:min(14vmin,6.5rem); background:linear-gradient(140deg, color-mix(in srgb, var(--ground) 80%, transparent), color-mix(in srgb, var(--ground) 52%, transparent)); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4); border:1px solid rgba(255,255,255,.55); box-shadow:0 24px 70px rgba(12,8,24,.2), inset 0 1px 1px rgba(255,255,255,.6); }
body.breathing #offnote span:empty { display:none; }
/* Pom, keeping you company in the corner when you have asked for it. Gone in the modes that take the page apart. */
body.layers #companion, body.abyss #companion, body.breathing #companion { display:none; }
/* What the companion says: a small glass bubble above it, only when it has something to say. */
#friendsay { position:fixed; left:max(10px, env(safe-area-inset-left)); bottom:calc(5.4rem + 116px); z-index:31; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; max-width:min(22rem, calc(100vw - 20px)); padding:.6rem .8rem; border-radius:1rem; font:600 .85rem/1.35 var(--mono); color:var(--ink); background:color-mix(in srgb, var(--ground) 86%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid color-mix(in srgb, var(--ink) 22%, transparent); opacity:0; translate:0 6px; pointer-events:none; transition:opacity .35s, translate .35s; }
#friendsay.on { opacity:1; translate:0 0; pointer-events:auto; }
#friendsay span { flex:1 1 100%; }
/* Everything turned off with Pom beside you: an empty white page, and only Pom on it. */
html:has(body.alone), body.alone { background:#fff !important; }
body.alone > *:not(#companion):not(.companion-say):not(script) { opacity:0 !important; pointer-events:none !important; transition:opacity .7s ease; }
body.alone #menubtn:focus-visible { opacity:1 !important; pointer-events:auto !important; }
.companion-say .ctl { font:inherit; font-size:.8rem; padding:.35rem .7rem; border-radius:999px; border:1px solid rgba(23,16,25,.3); background:rgba(255,255,255,.6); color:#171019; cursor:pointer; text-decoration:none; }