:root { color-scheme: dark; font-family: 'DM Sans', sans-serif; color: #cfcdc8; background: #08090a; }
* { box-sizing: border-box; }
body { margin: 0; }
body:has(.intro:not([hidden])) { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 1px solid #ddd9ce; outline-offset: 6px; }
[hidden] { display: none !important; }
.experience { position: relative; width: 100%; height: 100svh; min-height: 480px; overflow: hidden; isolation: isolate; }
#space { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.light-hit { position: absolute; width: 44px; height: 44px; padding: 0; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; touch-action: manipulation; }
.light-hit[aria-disabled="true"] { cursor: default; }
.portal-hit:focus-visible { outline-color: #ff3048; }
.portal-coordinates { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none; font-family: ui-monospace, Consolas, monospace; font-size: 10px; font-weight: 400; letter-spacing: .04em; color: #d8a4a8; text-shadow: 0 0 7px #ff304850; }
.blackout { position: fixed; inset: 0; z-index: 10; background: #000; opacity: 0; pointer-events: none; }
.crt-switch { position: fixed; z-index: 11; width: 44px; height: 44px; padding: 0; transform: translate(-50%, -50%); border: 0; border-radius: 8px; background: transparent; touch-action: manipulation; }
.crt-switch:focus-visible { outline-color: #ff9c38; outline-offset: 2px; }
.crt-switch:disabled { cursor: default; }
.crt-status { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.experience.is-entering .masthead, .experience.is-entering .toolbar, .experience.is-entering .control-dock { opacity: 0; transition: opacity .65s; }
.masthead { position: absolute; inset: 30px 40px auto; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.wordmark { font-family: 'Instrument Serif', Georgia, serif; font-size: 42px; line-height: 1; letter-spacing: -.04em; transition: color .7s; }
.is-watercolor .wordmark, .is-graph-paper .wordmark { color: #394e58; }
.is-astronomy .wordmark { color: #513923; }
.is-astronomy .interaction-hint .hint-letter { background: none; color: #725635; text-shadow: none; }
.is-astronomy .interaction-hint::before { display: none; }
.is-watercolor .interaction-hint, .is-graph-paper .interaction-hint { filter: brightness(.4); }
.is-watercolor .portal-coordinates, .is-graph-paper .portal-coordinates, .is-anime .portal-coordinates { color: #85414c; text-shadow: none; }
.is-astronomy .portal-coordinates { color: #85414c; text-shadow: none; }
.wordmark-period { color: #868a86; }
.toolbar { position: absolute; inset: auto 24px 64px; text-align: center; pointer-events: none; }
.interaction-hint { position: relative; display: inline-block; max-width: 100%; white-space: nowrap; font-family: 'Instrument Serif', Georgia, serif; font-size: 18px; font-style: italic; line-height: 1.3; color: #c8c9bd; letter-spacing: .012em; opacity: .85; transition: opacity .65s ease, filter .7s; }
.interaction-hint.is-fading { opacity: 0; }
.interaction-hint::before { content: ''; position: absolute; left: 50%; top: calc(100% - 60px); width: min(620px, 90vw); height: 160px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 75%, #eee7d570 0%, #eee7d538 26%, #eee7d512 48%, transparent 74%); filter: blur(20px); }
.interaction-hint:not(.is-fading)::before { animation: hint-uplight 3.2s ease both; }
.hint-letter { display: inline-block; white-space: pre; color: transparent; background: linear-gradient(180deg, #969b94 8%, #c8c9bd 65%, #efeada 100%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 2px 9px #ece5c51a; }
.hint-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.interaction-hint:not(.is-fading) .hint-letter { animation: hint-emerge var(--reveal-duration) cubic-bezier(.22, .61, .36, 1) var(--reveal-delay) both; }
@keyframes hint-emerge {
  0% { opacity: 0; filter: blur(6px); transform: translateY(2px); }
  28% { opacity: .08; filter: blur(4px); }
  60% { opacity: .55; filter: blur(1.4px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes hint-uplight { from { opacity: 0; } to { opacity: 1; } }
.control-dock { position: absolute; bottom: 8.5svh; right: 0; display: flex; align-items: stretch; overflow: hidden; border: 1px solid #ffffff20; border-right: 0; border-radius: 14px 0 0 14px; background: linear-gradient(145deg, #171a20b8, #0a0c10c7); -webkit-backdrop-filter: blur(22px) saturate(.85); backdrop-filter: blur(22px) saturate(.85); box-shadow: inset 0 1px 0 #ffffff06, 0 8px 30px #00000024; transform: translateX(calc(100% - 36px)); transition: transform .65s cubic-bezier(.22, 1, .36, 1); }
.control-dock.is-open { transform: translateX(0); }
.edge-tab { flex: 0 0 36px; width: 36px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 0; border-right: 1px solid #ffffff18; background: transparent; color: #a9a79d; transition: color .2s, background .2s; }
.edge-tab span { writing-mode: vertical-rl; font-size: 9px; letter-spacing: .1em; }
.edge-tab svg { width: 14px; height: 14px; transition: transform .4s; }
.edge-tab:hover, .edge-tab[aria-expanded="true"] { color: #e1ded5; background: #ffffff04; }
.edge-tab[aria-expanded="true"] svg { transform: rotate(180deg); }
.control-dock button:focus { outline: none; }
.edge-tab:focus-visible { color: #ece8df; background: #ffffff08; }
.control-dock .icon-button:focus-visible, .control-dock .settings-button:focus-visible { background: #ffffff0a; box-shadow: 0 0 14px #ffffff18; }
.control-dock input:focus-visible { outline: none; filter: drop-shadow(0 0 4px #ffffff50); }
.control-dock #reset:focus-visible { color: #f0ece2; text-shadow: 0 0 8px #ffffff60; }
.control-panel { width: min(328px, calc(100vw - 52px)); padding: 18px; visibility: hidden; opacity: 0; transition: opacity .4s, visibility .65s; }
.control-dock.is-open .control-panel { visibility: visible; opacity: 1; }
.actions { display: flex; align-items: center; gap: 12px; }
.studio-link { flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; display: grid; place-items: center; color: #cfcdc8; border-radius: 8px; transform: translateX(-16px); transition: filter .25s; }
.studio-mark { width: 40px; height: 20px; background: currentColor; -webkit-mask: url('./assets/pl-workshop-logo.webp') center / contain no-repeat; mask: url('./assets/pl-workshop-logo.webp') center / contain no-repeat; }
.studio-link:hover, .studio-link:focus-visible { filter: drop-shadow(0 0 6px #cfcdc840); }
.studio-link:focus { outline: none; }
.icon-button, .settings-button { background: #15171b70; border: 1px solid #ffffff1a; display: inline-flex; align-items: center; justify-content: center; height: 40px; transition: background .2s, border-color .2s; }
.icon-button { flex: 0 0 40px; width: 40px; border-radius: 50%; }
.settings-button { gap: 10px; border-radius: 24px; padding: 0 16px; font-size: 13px; }
.icon-button:hover, .settings-button:hover, .settings-button[aria-expanded="true"] { background: #24272d80; border-color: #ffffff35; }
button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.slider-knobs { stroke-width: 3; }
#play-icon { fill: currentColor; stroke: none; width: 14px; }
.settings { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .5s cubic-bezier(.22, 1, .36, 1), opacity .35s, visibility .5s; }
.settings.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.settings-content { overflow: hidden; min-height: 0; }
.settings-inner { max-height: calc(91.5svh - 170px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3c4046 transparent; }
.settings-inner { margin-top: 18px; padding-top: 20px; border-top: 1px solid #ffffff18; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; font-size: 12px; letter-spacing: .09em; }
.settings-heading button { border: 0; padding: 5px 0 5px 10px; background: transparent; color: #92969b; font-size: 12px; letter-spacing: 0; }
.settings-heading button:hover { color: #f0ece2; }
.settings label { display: flex; justify-content: space-between; font-size: 14px; }
.settings output { color: #92969c; font-size: 12px; font-variant-numeric: tabular-nums; }
.settings .thermal-control { position: relative; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid #ffffff18; cursor: pointer; }
.thermal-control input { position: absolute; right: 0; bottom: 0; width: 40px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.thermal-switch { width: 40px; height: 24px; border: 1px solid #ffffff24; border-radius: 14px; background: #202328; transition: background .35s, border-color .35s, box-shadow .35s; }
.thermal-switch::after { content: ''; display: block; width: 16px; height: 16px; margin: 3px; border-radius: 50%; background: #a9adb3; transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .35s; }
.thermal-control input:checked + .thermal-switch { background: #57341d; border-color: #e6ad7580; box-shadow: 0 0 12px #e7934d18; }
.thermal-control input:checked + .thermal-switch::after { transform: translateX(16px); background: #f0cb9b; }
.thermal-control input:focus-visible + .thermal-switch { box-shadow: 0 0 0 2px #e6b78460, 0 0 14px #e7934d25; }
.watercolor-control input:checked + .thermal-switch { background: #293e46; border-color: #a2bec880; box-shadow: 0 0 12px #a2bec818; }
.watercolor-control input:checked + .thermal-switch::after { background: #c7d7d9; }
.astronomy-control input:checked + .thermal-switch { background: #4c3a25; border-color: #c7aa7580; box-shadow: 0 0 12px #c7aa7518; }
.astronomy-control input:checked + .thermal-switch::after { background: #e0c796; }
.view-modes { min-width: 0; padding: 0; margin: 0; border: 0; }
.view-modes .thermal-control { transition: opacity .7s; }
.view-modes:disabled .thermal-control { opacity: .4; cursor: default; }
.view-modes:disabled input { cursor: default; }
.views-locked { margin: 16px 0 0; color: #92969b; font-size: 11px; line-height: 1.5; }
.night-control input:checked + .thermal-switch { background: #24422e; border-color: #9bc9a380; box-shadow: 0 0 12px #84c59618; }
.night-control input:checked + .thermal-switch::after { background: #c1e5bc; }
input[type="range"] { display: block; appearance: none; width: 100%; height: 24px; margin: 8px 0 16px; background: transparent; cursor: pointer; accent-color: #d3d0c4; }
input[type="range"]:last-child { margin-bottom: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: #3c4046; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 10px; height: 10px; margin-top: -4px; border-radius: 50%; background: #d3d0c4; }
input[type="range"]::-moz-range-track { height: 2px; background: #3c4046; }
input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #d3d0c4; }
.unavailable { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 440px; width: 80%; text-align: center; line-height: 1.6; font-size: 16px; }
.intro { position: fixed; inset: 0; z-index: 20; overflow: hidden; color: #cfcdc8; background: linear-gradient(145deg, #171a20a3, #0a0c10b3); -webkit-backdrop-filter: blur(22px) saturate(.85); backdrop-filter: blur(22px) saturate(.85); transition: opacity .9s; }
.intro::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.intro::before { background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22192%22%20height%3D%22192%22%20viewBox%3D%220%200%20192%20192%22%3E%3Cfilter%20id%3D%22frost%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.82%22%20numOctaves%3D%223%22%20seed%3D%2217%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22192%22%20height%3D%22192%22%20filter%3D%22url(%23frost)%22%2F%3E%3C%2Fsvg%3E") repeat; background-size: 192px 192px; mix-blend-mode: soft-light; opacity: .28; }
.intro.is-leaving { opacity: 0; pointer-events: none; }
.intro:not(.is-leaving):not([hidden]) ~ .experience .masthead, .intro:not(.is-leaving):not([hidden]) ~ .experience .toolbar, .intro:not(.is-leaving):not([hidden]) ~ .experience .control-dock { visibility: hidden; }
.intro-core { position: absolute; z-index: 1; top: 50%; left: 50%; width: min(260px, calc(100% - 64px)); height: 48px; transform: translate(-50%, -50%); text-align: center; }
.intro-core h1 { position: absolute; bottom: calc(100% + 40px); left: calc(50% - 7px); width: max-content; padding-right: .045em; margin: 0; transform: translateX(-50%); font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(74px, 9vw, 104px); font-weight: 400; line-height: 1; letter-spacing: -.045em; animation: intro-logo 1s cubic-bezier(.22, 1, .36, 1) .1s both; }
.intro-loader { display: grid; place-items: center; height: 100%; transition: opacity .4s; }
.intro[data-state="ready"] .intro-loader, .intro[data-state="error"] .intro-loader { opacity: 0; }
.intro-progress { width: 100%; height: 2px; border-radius: 3px; background: #ffffff30; }
#load-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: #cfcdc8; transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.intro-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.intro[data-state="error"] .intro-status { top: calc(100% + 22px); width: 100%; height: auto; margin: 0; clip: auto; white-space: normal; font-size: 12px; line-height: 1.6; color: #aaa; }
.intro-enter { position: absolute; inset: 0 auto 0 50%; width: 174px; transform: translateX(-50%); border: 1px solid #ffffffb3; border-top-color: #ffffffd9; border-bottom-color: #ffffff70; border-radius: 28px; background: linear-gradient(160deg, #ffffff18, #ffffff03 52%, #ffffff09), #15171b40; -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); color: #f0efeb; font-size: 13px; letter-spacing: .025em; text-shadow: 0 0 8px #ffffff30; box-shadow: inset 0 1px 0 #ffffff30, inset 0 -1px 0 #ffffff10, 0 0 4px #ffffff90, 0 0 16px #ffffff35, 0 0 36px #ffffff18; transition: background-color .25s, border-color .25s, box-shadow .25s; animation: intro-ready .45s .2s both; }
.intro-enter:hover, .intro-enter:focus-visible { border-color: #ffffffe6; background-color: #24272d60; box-shadow: inset 0 1px 0 #ffffff50, inset 0 -1px 0 #ffffff18, 0 0 5px #ffffffb0, 0 0 20px #ffffff48, 0 0 44px #ffffff24; }
.intro-enter::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid #ffffff90; box-shadow: 0 0 5px #ffffffa0, 0 0 22px #ffffff48, 0 0 42px #ffffff24; pointer-events: none; opacity: .55; animation: intro-light-flicker 6.8s ease-in-out .7s infinite; }
.intro-enter::after { content: ''; position: absolute; inset: 2px; border-radius: inherit; background: linear-gradient(118deg, #ffffff14, #ffffff04 32%, transparent 55%, #ffffff05); box-shadow: inset 0 1px 0 #ffffff18; pointer-events: none; }
.intro.is-leaving .intro-enter::before { animation-play-state: paused; }
.intro-enter:focus-visible { outline: none; }
.intro-enter:active { background-color: #ffffff15; }
@keyframes intro-ready { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes intro-logo { from { opacity: 0; transform: translate(-50%, -18px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes intro-light-flicker { 0%, 100% { opacity: .4; } 14% { opacity: .85; } 22% { opacity: .5; } 27% { opacity: .9; } 31% { opacity: .35; } 35% { opacity: .68; } 54% { opacity: .48; } 68% { opacity: 1; } 72% { opacity: .65; } 76% { opacity: .92; } 89% { opacity: .4; } }
@media (max-width: 800px) {
  .masthead { inset: 24px 24px auto; }
  .toolbar { inset: auto 24px 60px; }
}
@media (max-width: 480px) {
  .wordmark { font-size: 38px; }
  .actions { gap: 8px; }
  .settings-button { padding: 0 12px; font-size: 12px; gap: 7px; }
  .interaction-hint { font-size: 17px; }
}
@media (max-width: 360px) {
  .settings-button { width: 40px; padding: 0; }
  .settings-button span { display: none; }
}
@media (max-height: 560px) and (min-width: 600px) {
  .experience { min-height: 360px; }
  .masthead { top: 20px; }
}
@media (max-height: 440px) { .intro-core h1 { bottom: calc(100% + 24px); font-size: 64px; } }
@media (prefers-reduced-motion: reduce) { button, .intro, #load-fill, .intro-loader, .wordmark, .interaction-hint, .control-dock, .control-panel, .edge-tab svg, .settings, .studio-link, .thermal-switch, .thermal-switch::after { transition: none !important; } .intro-enter, .intro-enter::before, .intro-core h1, .interaction-hint .hint-letter, .interaction-hint::before { animation: none !important; } }