:root{--hypno-black:oklch(0% 0 0)}html,body{background:var(--color-paper);width:100%;height:100%;overflow:hidden}body{font-family:var(--font-body);color:var(--color-ink);-webkit-font-smoothing:antialiased}canvas{cursor:grab;touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}canvas.dragging{cursor:grabbing}body.cursor-hidden,body.cursor-hidden canvas{cursor:none}#tog{bottom:calc(20px + env(safe-area-inset-bottom));left:calc(16px + env(safe-area-inset-left));color:var(--color-muted);font-family:var(--font-body);cursor:pointer;transition:color var(--dur-fast) var(--ease-out);user-select:none;z-index:11;background:0 0;border:none;padding:6px;font-size:18px;line-height:1;position:fixed}#tog:hover{color:var(--color-ink)}#tog:active{transform:translateY(1px)}body:has(#ui.open) #tog{opacity:0;pointer-events:none}#hint{top:calc(20px + env(safe-area-inset-top));font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;text-align:center;width:max-content;max-width:calc(100vw - 32px);color:var(--color-muted);pointer-events:none;animation:6s forwards hfade;position:fixed;left:50%;transform:translate(-50%)}body:has(#presession:not(.gone)) #hint{visibility:hidden}@keyframes hfade{0%,55%{opacity:1}to{opacity:0}}#pause-bar{z-index:40;bottom:calc(20px + env(safe-area-inset-bottom));right:calc(16px + env(safe-area-inset-right));align-items:center;gap:var(--space-sm);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-pill);white-space:nowrap;padding:6px 6px 6px 16px;display:none;position:fixed}body:has(#ui.open) #pause-bar,.k-coarse{display:none}#stop-screen{z-index:60;background:var(--color-paper);flex-direction:column;justify-content:center;align-items:center;gap:16px;display:none;position:fixed;inset:0}#stop-screen.active{display:flex}#stop-resume{color:var(--color-ink);padding:14px 36px}#fade-screen{z-index:45;background:var(--hypno-black);opacity:0;pointer-events:none;transition:opacity 3s var(--ease-in-out);position:fixed;inset:0}#fade-screen.active{opacity:1}#tip{z-index:200;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:var(--text-xs);color:var(--color-ink-2);pointer-events:none;opacity:0;max-width:240px;transition:opacity var(--dur-fast);-webkit-backdrop-filter:blur(12px);padding:8px 12px;line-height:1.5;position:fixed}#tip.show{opacity:1}@media (pointer:coarse){#tog{padding:10px;font-size:24px}#pause-bar.show{display:flex}.k-fine{display:none}.k-coarse{display:inline}#hint{letter-spacing:.08em}}@media (prefers-reduced-motion:reduce){#tip{transition:none}#fade-screen{transition:opacity var(--dur-fast) linear}}:root{--ps-paper:oklch(15% .012 290/.94);--ps-ring-ink:oklch(97% .005 300/.035);--ps-dur-gone:calc(var(--dur-base) * 2.8);--ps-w:min(var(--max), 100vw - 2 * var(--margin));--ps-gap:var(--space-xl);--ps-col:calc((var(--ps-w) - var(--ps-gap)) / 2);--ps-shift:calc((var(--ps-w) + var(--ps-gap)) / 4);--ps-port:min(380px, var(--ps-col), 64vh)}@property --ps-slide{syntax:"<length>";inherits:true;initial-value:0}body{transition:--ps-slide var(--ps-dur-gone) var(--ease-in-out)}body:has(#presession:not(.gone)){--ps-slide:var(--ps-shift)}#presession{z-index:50;padding:var(--space-lg) max(var(--margin), env(safe-area-inset-right)) var(--space-lg) max(var(--margin), env(safe-area-inset-left));transition:opacity var(--ps-dur-gone) var(--ease-out);justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow:hidden auto}#presession.gone{opacity:0;pointer-events:none}.ps-veil{background:repeating-radial-gradient(circle at calc(50% + var(--ps-shift)) 50%, var(--ps-ring-ink) 0px, var(--ps-ring-ink) 1px, transparent 1px, transparent 36px), var(--bg-nebula), var(--ps-paper);-webkit-backdrop-filter:blur(7px);--hole:radial-gradient(circle at calc(50% + var(--ps-shift)) 50%, transparent calc(var(--ps-port) / 2), #000 calc(var(--ps-port) / 2 + 1px));-webkit-mask-image:var(--hole);mask-image:var(--hole);pointer-events:none;position:fixed;inset:0}.ps-port{z-index:1;left:calc(50% + var(--ps-shift));width:var(--ps-port);height:var(--ps-port);box-shadow:0 0 0 7px var(--color-paper-2), 0 0 0 8px var(--color-rule), 0 26px 72px color-mix(in oklch, var(--color-pink) 22%, transparent);pointer-events:none;animation:rise var(--dur-base) var(--ease-out) 90ms both;border-radius:50%;position:fixed;top:50%;translate:-50% -50%}.ps-port:before{content:"";background:color-mix(in oklch, var(--color-pink) 16%, transparent);border:1px dashed color-mix(in oklch, var(--color-pink) 50%, transparent);border-radius:2px;width:84px;height:26px;margin-left:-42px;position:absolute;top:-14px;left:50%;transform:rotate(-5deg)}.ps-port-cap{font-family:var(--font-mono);font-weight:700;font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;background:var(--color-paper);border:1px solid var(--color-pink);color:var(--color-pink);padding:.3rem .6rem;position:absolute;bottom:12%;left:-14px;transform:rotate(-3deg)}.ps-poster{z-index:2;width:100%;max-width:var(--max);animation:rise var(--dur-base) var(--ease-out) both;margin-block:auto;position:relative}.ps-poster>*{max-width:var(--ps-col)}.ps-coords{flex-wrap:nowrap;align-items:center;column-gap:1.6ch;line-height:1.5}.ps-coords a{color:inherit;text-decoration:none}.ps-coords a:hover,.ps-coords b a{color:var(--color-pink)}.ps-coords .on{color:var(--color-pink);align-items:center;gap:.6ch;display:inline-flex}.ps-home .paw{vertical-align:0;width:1.6rem;height:1.6rem;fill:var(--color-pink);margin:0}.ps-title{width:fit-content;margin-top:var(--space-sm);flex-direction:column;font-size:clamp(3.2rem,10vw,7.5rem);display:flex}.ps-mark{display:block}.ps-sub{font-family:var(--font-display);letter-spacing:.51em;text-transform:uppercase;color:var(--color-ink);margin-top:.14em;margin-right:-.51em;font-size:.56em;font-weight:700;line-height:.9}.ps-lede{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);margin-top:var(--space-md);color:var(--color-ink);line-height:1.12}.ps-lede em{color:var(--color-pink);font-style:normal}.ps-go{margin-top:var(--space-lg)}#begin-btn{background:var(--grad-nebula);color:var(--color-accent-ink);font-family:var(--font-mono);font-weight:700;font-size:var(--text-sm);letter-spacing:.16em;text-transform:uppercase;border-radius:var(--radius-pill);cursor:pointer;transition:box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);border:none;align-items:center;gap:.5ch;padding:.9rem 1.4rem;display:inline-flex}#begin-btn span{transition:transform var(--dur-fast) var(--ease-out)}#begin-btn:hover{box-shadow:var(--glow-pink);transform:translateY(-1px)}#begin-btn:hover span{transform:translate(3px)}#begin-btn:active{transform:translateY(0)}#begin-btn:disabled{opacity:.5;box-shadow:none;cursor:not-allowed;transform:none}.ps-warn{margin-bottom:var(--space-md);font-size:var(--text-sm);color:var(--color-ink);text-wrap:pretty;line-height:1.55}.ps-warn-stamp{width:fit-content;margin-bottom:var(--space-xs);color:var(--color-red);opacity:1;padding:.2rem .55rem;font-size:.66rem;display:block;position:static;transform:rotate(-3deg)}.ps-secondary{gap:var(--space-xs);margin-top:var(--space-md);flex-wrap:wrap;display:flex}#install-btn,#vr-btn,#cardboard-btn{padding:.6rem 1rem;display:none}#install-btn.revealed,#vr-btn.revealed,#cardboard-btn.revealed{display:inline-flex}#install-btn svg,#vr-btn svg{opacity:.9}.ps-treat{padding:.6rem 1rem;text-decoration:none}#ios-install{margin-top:var(--space-sm);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);flex-wrap:wrap;align-items:center;gap:.5ch;display:none}#ios-install.revealed{display:flex}#ios-install svg{opacity:.85;vertical-align:middle}body:has(#presession:not(.gone)) #tog{z-index:51}body:has(#presession:not(.gone)) #ui{z-index:52}@media (width<=860px){:root{--ps-shift:0px;--ps-port:0px}.ps-port{display:none}.ps-poster>*,.ps-poster{max-width:36rem}}@media (width<=520px){#presession{padding-inline:max(var(--space-md), env(safe-area-inset-left)) max(var(--space-md), env(safe-area-inset-right))}.ps-title{font-size:clamp(2.6rem,19vw,4.6rem)}}@media (prefers-reduced-motion:reduce){#presession{transition-duration:var(--dur-fast)}body{transition:none}.ps-poster,.ps-port{animation:none}}:root{--hypno-panel-bg:color-mix(in oklch, var(--color-paper) 92%, transparent);--hypno-label-shadow:0 1px 4px oklch(0% 0 0/.9)}#ui{scrollbar-width:thin;scrollbar-color:transparent transparent;width:min(320px,88vw);height:100%;padding:0 0 calc(40px + env(safe-area-inset-bottom));background:var(--hypno-panel-bg);border-right:1px solid var(--color-rule);-webkit-backdrop-filter:blur(24px);font-family:var(--font-body);font-size:var(--text-xs);color:var(--color-ink-2);transition:transform var(--dur-base) var(--ease-out);will-change:transform;z-index:10;flex-direction:column;line-height:1.4;display:flex;position:fixed;top:0;left:0;overflow-y:auto;transform:translate(-100%)}#ui:hover{scrollbar-color:var(--color-rule) transparent}#ui>*{flex-shrink:0}#ui.open{transform:translate(0)}.sidebar-head{border-bottom:1px solid var(--color-rule);flex-shrink:0;justify-content:space-between;align-items:center;padding:18px 16px 14px;display:flex}.sb-lockup{transition:opacity var(--dur-fast) var(--ease-out);align-items:baseline;gap:.6ch;text-decoration:none;display:inline-flex}.sb-lockup:hover{opacity:.85}.sb-lockup:active{opacity:.7}.sb-app{font-family:var(--font-mono);font-weight:700;font-size:var(--text-xs);letter-spacing:.32em;text-transform:uppercase;color:var(--color-ink-2)}#close-btn{color:var(--color-muted);font-family:var(--font-body);cursor:pointer;transition:color var(--dur-fast) var(--ease-out);background:0 0;border:none;padding:2px 6px;font-size:20px;line-height:1}#close-btn:hover{color:var(--color-pink)}#close-btn:active{transform:translateY(1px)}.sec{align-items:center;gap:10px;padding:12px 16px 7px;display:flex}.sec:after{content:"";background:var(--color-rule);flex:1;height:1px}.sec:first-of-type{padding-top:10px}.ctrl,.sess-row{transition:background var(--dur-fast) var(--ease-out);align-items:center;gap:8px;padding:6px 16px;display:flex}.ctrl:hover,.sess-row:hover{background:var(--color-paper-2)}.ctrl label,.sess-row label{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);white-space:nowrap;flex-shrink:0;width:58px;font-size:.6875rem}label[data-tip]{cursor:help}.ctrl input[type=range]:not(#hue),.sess-row input[type=range]{-webkit-appearance:none;appearance:none;cursor:pointer;background:linear-gradient(to right, var(--color-pink) calc(var(--val,.5) * 100%), var(--color-rule) calc(var(--val,.5) * 100%));border-radius:2px;outline:none;flex:1;height:3px}.ctrl input[type=range]:not(#hue)::-webkit-slider-thumb,.sess-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-ink);border:1px solid var(--color-paper);cursor:pointer;border-radius:50%;width:12px;height:12px}.ctrl input[type=range]:not(#hue):focus-visible,.sess-row input[type=range]:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.ctrl .v{font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--color-ink);text-align:right;min-width:38px}#hue{-webkit-appearance:none;appearance:none;cursor:pointer;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:2px;outline:none;flex:1;height:3px}#hue::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-ink);border:1px solid var(--color-paper);cursor:pointer;border-radius:50%;width:12px;height:12px}#hue:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.prow{gap:4px;padding:0 16px 4px;display:flex}.pbtn{background:linear-gradient(135deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);border:1px solid var(--color-rule);border-radius:var(--radius-sm);color:var(--color-ink);font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;text-shadow:var(--hypno-label-shadow);text-align:center;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;padding:9px 0;font-size:.66rem;font-weight:700;overflow:hidden}.pbtn:hover{border-color:var(--color-ink-2);transform:translateY(-1px)}.pbtn:active{transform:translateY(0)}.pbtn.active{outline:2px solid var(--color-pink);outline-offset:1px;box-shadow:var(--glow-pink)}.pbtn:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}.tog,.shape-grid{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-sm);flex:1;gap:1px;padding:2px;display:flex}.shape-grid{grid-template-columns:1fr 1fr;gap:2px;display:grid}.tog .tbtn{flex:1}.tbtn{color:var(--color-muted);font-family:var(--font-mono);letter-spacing:.04em;white-space:nowrap;text-transform:uppercase;cursor:pointer;transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);background:0 0;border:none;border-radius:4px;padding:4px;font-size:.66rem}.tbtn:hover{color:var(--color-ink)}.tbtn.active{background:var(--color-paper-3);color:var(--color-pink)}.greek{text-transform:none;font-family:var(--font-body);font-size:1.2em;line-height:1}.tbtn:active{transform:translateY(1px)}.session-card{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-sm);margin:2px 16px 4px;overflow:hidden}.session-card .sess-row{padding-left:10px;padding-right:10px}.sess-row+.sess-row{border-top:1px solid var(--color-rule)}.timer-input{background:var(--color-paper-3);border:1px solid var(--color-rule);border-radius:var(--radius-sm);width:44px;color:var(--color-ink);font-family:var(--font-mono);font-size:var(--text-xs);text-align:center;-moz-appearance:textfield;transition:border-color var(--dur-fast) var(--ease-out);outline:none;padding:3px 6px}.timer-input::-webkit-inner-spin-button{display:none}.timer-input:focus-visible{border-color:var(--color-pink);outline:2px solid var(--color-focus);outline-offset:3px}.sidebar-footer{flex-direction:column;gap:14px;margin-top:auto;padding:20px 16px 0;display:flex}.keys-compact{border-top:1px solid var(--color-rule);grid-template-columns:1fr 1fr;gap:6px 12px;padding-top:14px;display:grid}.keys-compact div{font-family:var(--font-mono);color:var(--color-muted);align-items:center;gap:8px;font-size:.66rem;display:flex}.key{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-sm);font-family:var(--font-mono);color:var(--color-ink-2);text-align:center;flex-shrink:0;min-width:52px;padding:2px 6px;font-size:.66rem;line-height:1.5;display:inline-block}.sidebar-links{border-top:1px solid var(--color-rule);justify-content:space-between;align-items:center;gap:12px;padding-top:14px;display:flex}#copy-link{flex-shrink:0}.sb-meta{font-family:var(--font-mono);flex-direction:column;align-items:flex-end;gap:4px;font-size:.66rem;display:flex}.sb-meta a{color:var(--color-muted);transition:color var(--dur-fast) var(--ease-out);text-decoration:none}.sb-meta a:hover{color:var(--color-pink)}@media (prefers-reduced-motion:reduce){#ui{transition:opacity var(--dur-fast) linear;opacity:0;pointer-events:none;transform:none}#ui.open{opacity:1;pointer-events:auto}}@media (pointer:coarse){.ctrl input[type=range]:not(#hue)::-webkit-slider-thumb,.sess-row input[type=range]::-webkit-slider-thumb,#hue::-webkit-slider-thumb{width:20px;height:20px}.ctrl,.sess-row{padding-top:9px;padding-bottom:9px}.tbtn{padding:6px 8px}.pbtn{padding:11px 0}#close-btn{padding:4px 8px;font-size:24px}#ui{background:var(--color-paper);-webkit-backdrop-filter:none}.keys-compact{display:none}}
