@font-face{font-family:Gothic;src:url(assets/fonts/UnifrakturMaguntia.woff2) format("woff2");font-display:swap}@font-face{font-family:Michroma;src:url(assets/fonts/Michroma.woff2) format("woff2");font-display:swap}:root{color-scheme:dark;--accent:#d6cbd4;--ink:#eee9e5;--muted:#b8b0bc;--line:#d7cad82c;--title:Gothic,Georgia,serif;--panel-top:#141018b8;--panel-bottom:#09090dbf}*{box-sizing:border-box}body{margin:0;background:#050506;color:var(--ink);font:14px/1.5 Segoe UI,Arial,sans-serif}button,input{font:inherit}button,a,input{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{border:0}::selection{background:var(--accent);color:#09070a}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.scene,.scene>video,#bg-image,.scene-shade,.grain{position:fixed;inset:0;pointer-events:none}.scene{z-index:-2;overflow:hidden;background:#050506}#bg-image{background:url(assets/goth-scene.png) center/cover no-repeat;transition:opacity .8s}.scene>video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s}.scene>video.visible{opacity:1}.scene-shade{background:linear-gradient(0deg,#030307dd,transparent 65%),#03030730;z-index:2}.grain{z-index:4;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E");mix-blend-mode:screen}.fog{position:absolute;width:150vw;height:50vh;left:-25vw;top:55vh;background:radial-gradient(ellipse at 30% 50%,#b6b2c019,transparent 60%),radial-gradient(ellipse at 75% 50%,#aab2bd17,transparent 45%);filter:blur(38px);animation:fog-drift 24s ease-in-out infinite alternate;z-index:3}.fog-two{top:25vh;opacity:.55;animation-duration:35s;animation-direction:alternate-reverse}@keyframes fog-drift{0%{transform:translate(-8%)}to{transform:translate(12%)}}#experience{min-height:100svh;opacity:0;transition:opacity .7s .1s}.entered #experience{opacity:1}.topbar{position:absolute;left:32px;top:22px;display:flex;align-items:center;gap:22px;height:32px}.wordmark{font:italic 30px/1 Georgia,serif;letter-spacing:-4px}.wordmark span{color:var(--accent);padding:0 4px}.top-note{color:var(--muted);font-size:11px;letter-spacing:.025em}#stage{display:flex;align-items:center;justify-content:center;min-height:100svh;padding:80px 24px 40px;outline:none}.profile-stack{position:relative;z-index:5;width:min(540px,100%);display:flex;flex-direction:column;align-items:center;gap:12px}.profile,.player{width:100%;background:linear-gradient(135deg,var(--panel-top),var(--panel-bottom));border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 100px #0005;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background .45s,border-color .45s}.profile{padding:28px 30px 16px}.identity{display:flex;align-items:center;gap:22px}.avatar-wrap{width:76px;height:76px;flex:0 0 76px;border-radius:50%;overflow:hidden}.avatar-wrap img{display:block;width:100%;height:100%}.identity-copy{min-width:0}h1{font:normal 60px/1.12 var(--title);letter-spacing:-.04em;margin:0 0 6px;text-shadow:0 0 35px #dfd3e51a}#mood{color:var(--accent);font-size:12px;line-height:1.5;margin:0;min-height:18px}.quote-block{margin:24px 0 14px;padding:0 0 0 14px;border-left:2px solid var(--line)}blockquote{font:italic 14px/1.5 Georgia,serif;margin:0}#quote-credit{color:var(--muted);font-size:10px;margin:5px 0 0}.socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:12px;border-top:1px solid var(--line)}.social{display:flex;position:relative;gap:10px;align-items:center;justify-content:center;min-height:52px;min-width:0;padding:8px;background:transparent;border-radius:10px;transition:background .18s,color .18s}.social:hover{background:#eee4f310;color:var(--accent)}.social-icon{height:23px;width:23px;flex:0 0 23px}.social-icon svg{width:100%;height:100%;fill:currentColor}.social-label{font-size:11px;letter-spacing:.02em}.player{padding:12px 18px 7px;border-radius:16px}.player-head{display:flex;align-items:center;gap:12px}.track-info{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}#track-name{font-size:13px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#track-artist{font-size:11px;color:var(--muted);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.volume-controls{display:flex;align-items:center;gap:1px;flex:0 0 120px}.icon-button{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;padding:0;background:none;border:0;border-radius:50%;color:#ded8e2;transition:color .18s,background .18s}.icon-button:hover{background:#ded3df12;color:#fff}.icon-button:active{background:#ded3df22}.icon-button svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.icon-button.play{background:#ded3df0b;border:1px solid var(--line);color:var(--accent)}#play-toggle svg{width:24px;height:24px}.mute[aria-pressed=true]{color:var(--accent)}#volume,#seek{appearance:none;-webkit-appearance:none;background:transparent;height:44px;min-width:0;width:100%;margin:0;cursor:pointer}#volume{--volume-level:25%;flex:1}#seek{--seek-level:0%;flex:1}#volume::-webkit-slider-runnable-track,#seek::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--accent) var(--level),#d6cbd42e var(--level));border-radius:8px}#volume{--level:var(--volume-level)}#seek{--level:var(--seek-level)}#volume::-webkit-slider-thumb,#seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;margin-top:-4.5px;width:12px;height:12px;background:var(--accent);border:2px solid #17121d;border-radius:50%;box-shadow:0 0 0 1px #d6cbd438}#volume::-moz-range-track,#seek::-moz-range-track{height:3px;background:#d6cbd42e;border-radius:8px}#volume::-moz-range-progress,#seek::-moz-range-progress{height:3px;background:var(--accent)}#volume::-moz-range-thumb,#seek::-moz-range-thumb{width:9px;height:9px;background:var(--accent);border:2px solid #17121d;border-radius:50%}#seek:disabled{opacity:.4;cursor:default}.seek-row{display:flex;align-items:center;gap:10px;height:38px}.seek-row>span{font:10px/1 Consolas,monospace;color:var(--muted);min-width:28px}#duration{text-align:right}.audio-message{color:var(--muted);font-size:11px;margin:0}.audio-message:not(:empty){margin:2px 0 8px}.mood-picker{width:min(660px,calc(100vw - 48px));margin-top:10px}.mood-picker>p{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--muted);font-size:10px;letter-spacing:.1em;margin:0 0 10px}#theme-count{font:10px/1 Consolas,monospace;border:1px solid var(--line);padding:3px 5px;border-radius:4px}.themes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.theme-button{display:flex;justify-content:center;align-items:center;gap:7px;min-height:48px;min-width:0;padding:10px 8px;border:1px solid #d7cad830;border-radius:10px;background:#08080edb;color:#d4cdd7;font-size:11px;transition:background .2s,border-color .2s}.theme-button:hover{border-color:#e5dbe282;background:#25212bcf}.theme-button[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 -2px var(--accent);background:#25212bea;color:var(--ink)}.theme-check{visibility:hidden;width:8px;font-size:10px}.theme-button[aria-pressed=true] .theme-check{visibility:visible}.enter-screen{position:fixed;inset:0;width:100%;height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#040406b3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:30;transition:opacity .7s,backdrop-filter .7s;padding:20px}.enter-cross{font-size:34px;color:var(--accent)}.enter-name{font:90px/1.4 Gothic,Georgia,serif;margin:9px 0 0}.enter-copy{font:italic 16px Georgia,serif;color:#b8afb8;text-align:center}.enter-action{font-size:11px;letter-spacing:.08em;margin-top:42px;padding-bottom:9px;border-bottom:1px solid #b8adb655}.enter-action>span{margin-left:15px;font-size:17px}.entered .enter-screen{opacity:0;pointer-events:none;backdrop-filter:blur(0)}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,10px);z-index:40;padding:13px 22px;max-width:90vw;width:max-content;text-align:center;background:#141016;border:1px solid var(--accent);border-radius:8px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%);pointer-events:auto;user-select:text}.noscript{position:fixed;z-index:100;inset:0;background:#09070b;padding:10vw}.noscript a{text-decoration:underline}.deko-art{position:absolute;inset:0;opacity:0;transition:opacity .7s;pointer-events:none;z-index:1}.deko-portrait{position:absolute;right:2vw;bottom:10%;width:min(42vw,570px);height:75%;object-fit:contain;object-position:center bottom;filter:grayscale(1) contrast(1.07);mask-image:linear-gradient(#000 65%,transparent);opacity:.7}.deko-type{position:absolute;right:3%;top:10%;font:900 min(24vw,340px)/1 "Arial Black",Impact,sans-serif;font-style:italic;letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px #ff79442b;transform:rotate(-9deg)}html[data-theme=deko]{--accent:#ff8b52;--muted:#b6a39b;--title:Michroma,"Segoe UI",sans-serif;--line:#ff945e30;--panel-top:#130d09c7;--panel-bottom:#0c0b0aa8}html[data-theme=deko] h1{font-size:34px;line-height:1.5;letter-spacing:-.055em}html[data-theme=deko] .scene>video,html[data-theme=deko] #bg-image{filter:brightness(.35) sepia(.4)}html[data-theme=deko] .deko-art{opacity:1}html[data-theme=deko] .fog{display:none}html[data-theme=elo]{--accent:#f16980;--muted:#c1a6af;--title:Georgia,serif;--line:#df567230;--panel-top:#1a080dc9;--panel-bottom:#0d050aba}html[data-theme=elo] h1{font-style:italic;font-size:54px;letter-spacing:-.07em}html[data-theme=elo] .scene>video{object-position:right center}html[data-theme=elo] #bg-image{background-position:right center}html[data-theme=elo] .fog{opacity:.3;filter:blur(55px);background:radial-gradient(ellipse,#ff334522,transparent 60%)}html[data-theme=lostsignal]{--accent:#c5d0da;--muted:#a8b1b8;--title:"Segoe UI",Arial,sans-serif;--line:#c7d4de29;--panel-top:#0b0e12ba;--panel-bottom:#080a0dd9}html[data-theme=lostsignal] h1{font-size:50px;font-weight:300;letter-spacing:-.075em}html[data-theme=lostsignal] #mood{font-size:11px;letter-spacing:.04em}html[data-theme=lostsignal] .fog{display:none}html[data-theme=lostsignal] .grain{opacity:.11}html[data-theme=lostsignal] .scene-shade{background:linear-gradient(0deg,#030405bd,transparent 65%),linear-gradient(90deg,#03040533,transparent 80%)}.signal-texture,.signal-sweep{display:none;position:absolute;inset:0;z-index:3;pointer-events:none}.signal-texture{background:repeating-linear-gradient(0deg,transparent,transparent 3px,#030405 4px);opacity:.18}.signal-sweep{inset:-18vh 0 auto;height:18vh;background:linear-gradient(transparent,#d9e5f606,transparent);animation:signal-sweep 22s linear infinite}html[data-theme=lostsignal] .signal-texture,html[data-theme=lostsignal] .signal-sweep{display:block}@keyframes signal-sweep{0%{transform:translateY(0)}to{transform:translateY(130vh)}}html[data-theme=matchroom]{--accent:#d7df89;--muted:#aeb5a4;--title:Michroma,"Segoe UI",sans-serif;--line:#d7df8933;--panel-top:#10170fe8;--panel-bottom:#090e0bec}html[data-theme=matchroom] h1{font-size:34px;line-height:1.5;letter-spacing:-.055em}html[data-theme=matchroom] .fog{display:none}html[data-theme=matchroom] .profile{border-radius:6px;box-shadow:inset 3px 0 #d7df89,0 24px 100px #0005}html[data-theme=matchroom] #bg-image{background-position:center}html[data-theme=matchroom] .scene-shade{background:radial-gradient(ellipse at center,#03070318,#03070380)}html[data-theme=matchroom] blockquote{font:12px/1.5 Consolas,monospace;letter-spacing:.04em}@media(max-width:700px){.topbar{position:relative;top:auto;left:auto;height:44px;margin:0 18px;gap:16px}.wordmark{font-size:27px}.top-note{font-size:10px}#stage{min-height:calc(100svh - 44px);padding:20px 16px 28px}.profile-stack{gap:10px}.profile{padding:23px 21px 14px}.identity{gap:16px}.avatar-wrap{width:64px;height:64px;flex-basis:64px}h1{font-size:52px}html[data-theme=deko] h1,html[data-theme=matchroom] h1{font-size:28px}html[data-theme=elo] h1{font-size:49px}html[data-theme=lostsignal] h1{font-size:46px}#mood{font-size:11px}.quote-block{margin-top:22px}blockquote{font-size:13px}.socials{gap:4px}.social{gap:7px;padding:6px;min-height:52px}.social-icon{width:21px;height:21px;flex-basis:21px}.social-label{font-size:10px}.player{padding:11px 13px 5px}.player-head{gap:9px}.volume-controls{flex-basis:90px}.icon-button{flex-basis:44px;width:44px;height:48px}#track-name{font-size:12px}#track-artist{font-size:10px}.mood-picker{width:100%;margin-top:8px}.themes{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.theme-button{grid-column:span 2;min-height:48px;font-size:10px;padding:8px 5px;gap:4px}.theme-button:nth-child(n+4){grid-column:span 3}.deko-portrait{right:-16%;width:95vw;bottom:18%;height:69%;opacity:.4}.deko-type,.fog{display:none}#bg-image{background-position:65% center}.scene>video{object-position:70% center}html[data-theme=elo] .scene>video,html[data-theme=elo] #bg-image{object-position:72% center;background-position:72% center}html[data-theme=lostsignal] #bg-image{background-position:76% center}.enter-name{font-size:78px}.enter-copy{font-size:14px}.toast{bottom:16px}}@media(max-width:350px){.profile{padding:20px 16px 12px}.avatar-wrap{width:56px;height:56px;flex-basis:56px}.identity{gap:12px}h1{font-size:48px}html[data-theme=deko] h1,html[data-theme=matchroom] h1{font-size:25px}html[data-theme=lostsignal] h1{font-size:42px}.volume-controls{flex-basis:90px}.player-head{gap:7px}.theme-button{font-size:9px}.theme-check{width:6px}.social{gap:5px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.fog,.signal-sweep{display:none!important}}.page-hidden *{animation-play-state:paused!important}
