/* The room's styles (from the room's build_precog.py, by tools/room_build.py) */
/* one round room: a full-bleed WebGL stage under a thin bar; the code view shifts the accent to violet */
:root{--ground:#04060a;--bar:rgba(4,6,10,.62);--panel:rgba(8,10,14,.84);--line:rgba(220,232,245,.14);--fg:#e3eefa;--dim:rgba(227,238,250,.55);--accent:#9fd4ff;
--display:'Big Shoulders Display','Arial Narrow',sans-serif;--dw:700;--dls:.03em;--dsz:1;--mono:'Martian Mono',ui-monospace,monospace;color-scheme:dark}
:root.code{--ground:#05040a;--bar:rgba(5,4,10,.62);--panel:rgba(10,8,16,.84);--accent:#b48cff;--fg:#ece3fa;--dim:rgba(236,227,250,.55)}
/* a light room: the bar and panel turn pale, type goes dark (no room uses it now) */
:root.paper{--bar:rgba(236,238,240,.72);--panel:rgba(244,245,246,.92);--line:rgba(20,26,32,.16);--fg:#151a1f;--dim:rgba(21,26,31,.55);color-scheme:light}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--fg);font-family:var(--mono);overflow:hidden}
.stage{position:relative;height:100%;overflow:hidden;background:var(--ground)}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bar{position:absolute;top:0;left:0;right:0;height:64px;box-sizing:border-box;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:3;background:var(--bar);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
button{appearance:none;border:0;background:none;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;padding:0;margin:0;min-height:44px}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wm{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dls);text-transform:uppercase;font-size:calc(19px*var(--dsz));white-space:nowrap}
.nav{display:flex;gap:28px}
.nav button,.seg button,.upl,.ctrl-btn{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.nav button{color:var(--dim)}.nav button.on{color:var(--accent)}
.right{display:flex;align-items:center;gap:22px}
.seg{display:flex;gap:2px}
.seg button{color:var(--dim);padding:0 8px}.seg button[aria-pressed="true"]{color:var(--accent)}
.upl{position:absolute;left:max(16px,env(safe-area-inset-left,0px));bottom:28px;z-index:3;color:var(--accent)}
.ctl{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:28px;z-index:3;display:flex;gap:4px}
.ctl button{width:44px;color:var(--accent)}

.ctrl-btn{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ctrl-btn[aria-expanded="true"]{color:var(--fg)}
.panel{position:absolute;top:72px;right:max(16px,env(safe-area-inset-right,0px));z-index:5;width:min(300px,calc(100vw - 32px));max-height:calc(100% - 96px);overflow-y:auto;box-sizing:border-box;padding:6px 16px 16px;background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--fg)}
.panel h3{margin:0;font:inherit}
.panel h3 button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:36px;padding:10px 0 8px;font:inherit;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--fg);text-align:left;border-top:1px solid var(--line)}
.panel h3:first-child button{border-top:0}
.panel h3 button::after{content:'+';font-size:13px;letter-spacing:0;color:var(--accent)}
.panel h3 button[aria-expanded="true"]::after{content:'\2212'}
.panel h3 button:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.panel .sec{padding:2px 0 8px}
.panel .sub{margin:10px 0 6px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;margin:0 0 8px}
.row label{text-transform:uppercase;letter-spacing:.12em}
.row output{color:var(--dim);font-variant-numeric:tabular-nums}
.row input[type=range]{grid-column:1/-1;width:100%;margin:0;accent-color:var(--accent)}
.row select{font:inherit;background:transparent;color:var(--fg);border:1px solid var(--line);padding:4px 6px;max-width:170px}
.row select option{background:#0b0d12;color:#e3eefa}
.row input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;margin:0}
.row input[type=color]{width:44px;height:24px;padding:0;border:1px solid var(--line);background:transparent;cursor:pointer}
.panel .reset{margin-top:10px;font:inherit;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);min-height:32px}
@media (min-width:760px){.panel{right:max(32px,env(safe-area-inset-right,0px))}}
.ptip{position:fixed;z-index:9;max-width:252px;box-sizing:border-box;padding:10px 12px 11px;background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);
  font-family:'Inter Tight',system-ui,sans-serif;font-size:12px;line-height:1.45;letter-spacing:.01em;text-transform:none;color:var(--fg);pointer-events:none}
.ptip b{display:block;margin-bottom:3px;font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (min-width:760px){.bar{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}.upl{left:max(32px,env(safe-area-inset-left,0px))}.ctl{right:max(32px,env(safe-area-inset-right,0px))}}
@media (max-width:760px){.nav{display:none}.bar{height:40px;background:rgba(4,6,10,.38)}.bar button{min-height:40px}.panel{top:48px;max-height:calc(100% - 72px)}}
/* the site: no Room or Code; Controls only for him, signed in (html.jm-ctl), with Export settings at their top; on a
   phone the name over the room with nothing behind it */
.right .seg{display:none!important}
html:not(.jm-ctl) .right{display:none!important}
.bar .right{margin-left:auto}
@media (min-width:760px){.bar .nav,.upl,.ctl{display:none!important}html:not(.nogl) .bar{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}html:not(.nogl) .bar .wm{color:transparent}.bar .wm,.bar .right{pointer-events:auto}}
.jm-exp{padding:10px 0 8px;margin-bottom:4px;border-bottom:1px solid var(--line)}.jm-exp .reset{margin:0;color:var(--accent)}
.jm-exp textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:6px;font:inherit;font-size:10px;letter-spacing:0;text-transform:none;background:transparent;color:var(--fg);border:1px solid var(--line);resize:vertical}
@media (max-width:760px){.bar{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none}.bar .wm,.bar .right{pointer-events:auto}}
@media (max-width:760px){html:not(.nogl) .bar .wm{position:absolute;left:50%;top:0;transform:translateX(-50%);min-height:0;height:34px;padding:0 16px;color:transparent}.upl,.ctl{bottom:max(4px,env(safe-area-inset-bottom,0px))}.upl,.ctl button{min-height:40px}}
@media (max-width:760px){html[data-pf="slim"] .upl,html[data-pf="slim"] .ctl{bottom:max(0px,env(safe-area-inset-bottom,0px))}html[data-pf="slim"] .upl,html[data-pf="slim"] .ctl button{min-height:30px;font-size:9px}html[data-pf="slim"] .ctl button{width:36px}html[data-pf="title"] .upl,html[data-pf="none"] .upl,html[data-pf="none"] .ctl{display:none!important}html[data-pf="title"] .ctl{left:max(4px,env(safe-area-inset-left,0px));right:max(4px,env(safe-area-inset-right,0px));bottom:auto;top:calc(var(--jm-fy,80vh) - 20px);justify-content:space-between;pointer-events:none}html[data-pf="title"] .ctl button{pointer-events:auto}html.jm-ctl .bar .right{position:fixed;left:50%;transform:translateX(-50%);top:auto;bottom:max(0px,env(safe-area-inset-bottom,0px))}html.jm-ctl .ctrl-btn{min-height:28px;opacity:.6}html.jm-psheet .panel{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;max-height:52vh;max-height:52dvh;box-sizing:border-box;padding:0 16px calc(18px + env(safe-area-inset-bottom,0px));border-width:1px 0 0;border-radius:16px 16px 0 0;font-size:11px;z-index:30;overscroll-behavior:contain;touch-action:pan-y;background:rgba(8,9,14,.84)}html.jm-psheet .panel.at-top{top:0;bottom:auto;border-width:0 0 1px;border-radius:0 0 16px 16px;padding-top:env(safe-area-inset-top,0px)}html.jm-psheet .jm-sh{position:sticky;top:0;z-index:2;display:flex;gap:6px;align-items:center;margin:0 -16px 4px;padding:10px 16px 9px;background:rgba(10,11,17,.97);border-bottom:1px solid var(--line)}html.jm-psheet .jm-sh .reset{margin:0;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:17px;font-size:9.5px;color:var(--dim)}html.jm-psheet .jm-sh .reset:first-child{color:var(--accent)}html.jm-psheet .jm-sh .jm-cl{margin-left:auto;color:var(--fg)}html.jm-psheet .jm-exp{padding:0;margin:0;border:0}html.jm-psheet .panel h3 button{min-height:46px;font-size:12px}html.jm-psheet .panel .sub{margin:16px 0 8px;font-size:10px}html.jm-psheet .row{grid-template-columns:1fr auto auto;gap:7px 10px;margin:0 0 15px}html.jm-psheet .row label{order:0;font-size:10.5px;line-height:1.3}html.jm-psheet .row output,html.jm-psheet .row select,html.jm-psheet .row input[type=checkbox],html.jm-psheet .row input[type=color]{order:1}html.jm-psheet .row .inf{order:2;box-sizing:border-box;width:28px;min-width:28px;height:28px;min-height:0;padding:0;align-self:center;border:1px solid var(--line);border-radius:14px;font:inherit;font-size:10px;line-height:26px;letter-spacing:0;text-align:center;color:var(--dim)}html.jm-psheet .row .inf[aria-expanded="true"]{color:var(--fg);border-color:var(--accent)}html.jm-psheet .row input[type=range]{order:3;grid-column:1/-1;height:30px}html.jm-psheet .row input[type=checkbox]{width:24px;height:24px}html.jm-psheet .row select{font-size:12px;min-height:34px;max-width:190px}html.jm-psheet .row select.jm-hid{display:none}html.jm-psheet .chips{order:3;grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}html.jm-psheet .chips button{min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:17px;font:inherit;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}html.jm-psheet .chips button.on{color:var(--fg);border-color:var(--accent);background:rgba(180,140,255,.14)}html.jm-psheet .row .desc{order:4;grid-column:1/-1;margin:0;font-family:"Inter Tight",system-ui,sans-serif;font-size:12.5px;line-height:1.45;letter-spacing:.01em;text-transform:none;color:var(--dim)}html.jm-psheet .ptip{display:none!important}html.jm-psheet .jm-dv{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line)}html.jm-psheet .bar .right{position:fixed;left:auto;right:4px;transform:none;bottom:auto;top:max(4px,env(safe-area-inset-top,0px))}html.jm-psheet .ctrl-btn{min-height:26px;padding:0 9px;border:1px solid var(--line);border-radius:13px;background:rgba(0,0,0,.4);font-size:8.5px;opacity:.6}html.jm-psheet.jm-sheet-open .bar .right{display:none!important}html:not(.nogl) .bar .wm{display:none!important}html:not([data-pl="classic"]) .upl,html:not([data-pl="classic"]) .ctl{display:none!important}}