:root{
  /* layout: full-bleed shader canvas; top HUD = a row of dropdowns, a row of toggles, a row of music controls; start card centred */
  color-scheme: dark;
  --void:#05030b;
  --ink:#f3ecff;
  --ink-dim:rgba(243,236,255,.62);
  --glass:rgba(12,6,26,.5);
  --edge:rgba(243,236,255,.22);
  --hot:#ff5fd2;
  --cool:#5ff0ff;
  --display:"Unbounded","Trebuchet MS",system-ui,sans-serif;
  --body:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--void);color:var(--ink);font-family:var(--body);overflow:hidden;
  overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;background:var(--void)}
#hud{position:fixed;top:12px;left:16px;right:16px;display:flex;flex-direction:column;gap:8px;align-items:center;
  transition:opacity .6s;z-index:3;pointer-events:none}
#hud.hide{opacity:0}
#hud.hide *{pointer-events:none}
.row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;pointer-events:auto}
.row[hidden]{display:none}
button,select,.btn{font:500 12px/1 var(--body);letter-spacing:.04em;color:var(--ink);background-color:var(--glass);
  border:1px solid var(--edge);border-radius:999px;padding:11px 14px;cursor:pointer;margin:0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
select{-webkit-appearance:none;appearance:none;padding-right:30px;border-color:var(--hot);max-width:46vw;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f3ecff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
select option{color:#111;background:#fff}
button:focus-visible,select:focus-visible,.btn:focus-within{outline:2px solid var(--cool);outline-offset:2px}
button[aria-pressed="true"]{border-color:var(--cool);color:var(--cool)}
a.btn{text-decoration:none;display:inline-block}
#bTap{padding:14px 26px;border-color:var(--cool)}
.btn input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
#scrubWrap{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;font-variant-numeric:tabular-nums}
#scrubWrap[hidden]{display:none}
#rowJourney select{max-width:none}
#adv{position:fixed;inset:0;z-index:7;background:rgba(5,3,11,.93);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px}
#adv[hidden]{display:none}
.advIn{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px;padding-bottom:40px}
.advItem{font-size:13px;flex:1;min-width:120px}
/* the editor is a sheet along the bottom, so the picture stays in view above it while the controls move.
   On a phone held sideways it is a panel down the right side instead, because there is no height to spare. */
#ed{position:fixed;left:0;right:0;bottom:0;z-index:7;max-height:52vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:rgba(5,3,11,.86);border-top:1px solid var(--edge);padding:0 14px 12px;display:flex;flex-direction:column;gap:10px}
#ed[hidden],#ed [hidden]{display:none}
#edTop{position:sticky;top:0;z-index:1;background:rgb(5,3,11);margin:0 -14px;padding:10px 14px 8px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--edge)}
#ed label,#ed .edVal,#ed .edGroupName{font-size:12px;color:var(--ink-dim)}
#ed input[type=text]{flex:1;min-width:90px;width:90px;font:500 13px/1.3 var(--body);color:var(--ink);background:var(--glass);border:1px solid var(--edge);border-radius:10px;padding:7px 10px;
  -webkit-user-select:text;user-select:text}
#edSwatch{position:static;width:100%;height:26px;flex:none;border-radius:8px;display:block}
.edGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px 22px}
.edRow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px}
.edRow label{color:var(--ink)!important;font-size:13px!important}
.edRow input[type=range]{grid-column:1/3;width:100%;height:34px;margin:0;accent-color:var(--cool);touch-action:pan-y}
.edRed input[type=range]{accent-color:#ff6b6b}.edGreen input[type=range]{accent-color:#5fd97a}.edBlue input[type=range]{accent-color:#6ba8ff}
.edGroup{display:flex;flex-direction:column;gap:2px;border:1px solid var(--edge);border-radius:14px;padding:8px 12px}
#ed .edGroupName{font:600 12px/1.4 var(--display);color:var(--cool)}
.edPick{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:10px}
.edPick span{display:flex;align-items:center;gap:10px;white-space:nowrap}
.edPick label{color:var(--ink)!important;font-size:13px!important}
.edPick input[type=color]{width:56px;height:40px;padding:0;border:1px solid var(--edge);border-radius:10px;background:none;cursor:pointer}
#edFine{align-self:flex-start}
#edHelp{display:flex;flex-direction:column;gap:8px;border:1px solid var(--edge);border-radius:14px;padding:10px 12px}
#edHelp p{color:var(--ink)}#edHelp b{color:var(--cool);font-weight:600}
#ed:not([hidden])~#toast{bottom:auto;top:16%;z-index:8}
@media (orientation:landscape) and (max-height:520px){
#ed{left:auto;top:0;width:min(360px,48vw);max-height:none;border-top:0;border-left:1px solid var(--edge)}
#ed:not([hidden])~#toast{right:min(360px,48vw)}
}
#advMine{display:flex;flex-direction:column;gap:6px}
.advRow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.advHead{justify-content:space-between}
#adv h2{font:300 24px/1.1 var(--display);margin:0}
#adv h3{font:600 13px/1 var(--display);margin:14px 0 0;color:var(--cool);letter-spacing:.04em}
.advNote{font-size:12px;margin:0}
.advNote:empty{display:none}
#adv select{max-width:100%}
#adv label{font-size:12px;color:var(--ink-dim)}
#adv input,#adv textarea{font:500 13px/1.3 var(--body);color:var(--ink);background:var(--glass);border:1px solid var(--edge);border-radius:10px;padding:9px 10px;
  -webkit-user-select:text;user-select:text}
#adv input[type=number]{width:68px}
#adv input[type=text]{flex:1;min-width:140px}
#adv textarea{width:100%;resize:vertical}
#adv input:focus-visible,#adv textarea:focus-visible{outline:2px solid var(--cool);outline-offset:2px}
#adv fieldset{border:1px solid var(--edge);border-radius:14px;padding:10px 12px 12px;margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
#adv legend{font:600 12px/1 var(--display);padding:0 6px}
#advCats{display:flex;flex-direction:column;gap:16px}
#advSetBody{display:flex;flex-direction:column;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{padding:7px 10px;font-size:11px}
.chips.dim{opacity:.45}
#adv button:disabled,#adv select:disabled,#adv input:disabled{opacity:.45;cursor:default}
.advGo{background:var(--ink);color:var(--void);border-color:var(--ink)}
#scrubWrap{cursor:default}
#tLabel{display:inline-block;min-width:13ch;text-align:right;white-space:nowrap}
#scrub{position:relative;display:block;width:min(44vw,220px);height:32px;touch-action:none;cursor:pointer}
#scrub::before{content:"";position:absolute;left:0;right:0;top:14px;height:4px;border-radius:2px;background:var(--edge)}
#scrubFill{position:absolute;left:0;top:14px;height:4px;width:0;border-radius:2px;background:var(--cool)}
#scrubThumb{position:absolute;left:0;top:6px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--cool)}
#stats{position:fixed;left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));z-index:6;font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;color:#fff;background:rgba(0,0,0,.6);padding:6px 9px;border-radius:6px;white-space:pre;pointer-events:none}
#toast{position:fixed;left:16px;right:16px;bottom:18%;text-align:center;font-size:13px;color:var(--ink);pointer-events:none;
  opacity:0;transition:opacity .5s;z-index:4;text-shadow:0 0 12px var(--void),0 0 4px var(--void)}
#toast.on{opacity:1}
@media (max-width:480px){button,select,.btn{font-size:11px;padding:9px 11px}select{padding-right:26px;background-position:right 10px center}}
.btn{position:relative;display:inline-block}
#start{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px 16px;z-index:5;
  background:radial-gradient(ellipse at center,rgba(5,3,11,.3),rgba(5,3,11,.85));transition:opacity .9s}
#start.gone{opacity:0;pointer-events:none}
.card{max-width:420px;display:flex;flex-direction:column;gap:16px;text-align:left}
h1{font:300 clamp(34px,11vw,56px)/1 var(--display);margin:0;letter-spacing:-.02em;text-wrap:balance;
  background:linear-gradient(100deg,var(--cool),var(--ink) 45%,var(--hot));-webkit-background-clip:text;background-clip:text;color:transparent}
p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-dim)}
.go{display:flex;flex-wrap:wrap;gap:10px}
.go button{font:600 13px/1 var(--display);padding:16px 20px}
#enter{background:var(--ink);color:var(--void);border-color:var(--ink)}
#stick{position:fixed;width:120px;height:120px;margin:-60px 0 0 -60px;border:1px solid var(--edge);border-radius:50%;
  pointer-events:none;opacity:0;transition:opacity .25s;z-index:2}
#stick.on{opacity:1}
#knob{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  background:var(--glass);border:1px solid var(--cool)}
#err{position:fixed;inset:auto 16px 16px 16px;font-size:12px;color:var(--hot);z-index:6;white-space:pre-wrap}
/* the picture runs under the status bar, notch and home bar; keep controls and panels inside the safe area */
@supports(padding:max(0px)){
#hud{top:max(12px,calc(env(safe-area-inset-top) + 6px));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}
#ed{padding-bottom:max(12px,env(safe-area-inset-bottom));padding-right:max(14px,env(safe-area-inset-right))}
#adv{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
#start{padding:max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
#err{bottom:max(16px,env(safe-area-inset-bottom))}
}