:root{color-scheme:dark;font-family:"Avenir Next","Helvetica Neue",Arial,sans-serif;background:#080c12;color:#efeee8;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;overflow:hidden}canvas,.shade{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}.shade{background:linear-gradient(90deg,rgba(6,10,15,.82),rgba(6,10,15,.2) 40%,transparent 67%);transition:opacity 3s}header{position:fixed;top:44px;left:48px;right:48px;display:flex;justify-content:space-between;align-items:flex-start}.wordmark{font-size:15px;letter-spacing:.37em;transition:opacity 2s}.emblem{width:46px;height:51px;background:#efeee8;mask:url('./assets/babiczstyle.png') center/contain no-repeat;opacity:.12}main{position:fixed;left:48px;top:50%;transform:translateY(-45%);transition:opacity 2.5s,visibility 2.5s}h1{font-size:clamp(52px,5.2vw,80px);font-weight:300;letter-spacing:-.045em;line-height:1.08;margin:0 0 20px}main p{max-width:440px;line-height:1.45;font-weight:300;font-size:clamp(17px,1.6vw,24px);color:#c5c8ca;margin:0 0 38px;letter-spacing:.01em}button{font:inherit;font-size:15px;color:inherit;background:rgba(8,12,18,.22);border:1px solid #bfc7c9;border-radius:5px;padding:16px 28px;cursor:pointer;letter-spacing:.02em;transition:background .3s,opacity .5s}button:hover{background:rgba(181,218,225,.12)}button:focus-visible{outline:2px solid #a5e7f3;outline-offset:6px}button:disabled{opacity:.5;cursor:wait}#status{font-size:13px;max-width:320px;line-height:1.5;margin:18px 0 0;min-height:2em}footer{position:fixed;bottom:32px;left:48px;right:48px;display:flex;align-items:center;justify-content:space-between}.credit{font-size:12px;letter-spacing:.20em;transition:opacity 2s}.controls{display:flex;gap:14px;align-items:center;transition:opacity .8s}.controls button{border-color:transparent;padding:12px;background:rgba(8,12,18,.4)}#fullscreen{width:48px;height:48px}svg{display:block;width:24px;height:24px}.playing main{opacity:0;visibility:hidden;pointer-events:none}.playing .shade{opacity:0}.playing .wordmark,.playing .credit{opacity:0}.playing.idle .controls{opacity:0;pointer-events:none}.playing .controls:focus-within{opacity:1;pointer-events:auto}.playing.idle{cursor:none}[hidden]{display:none!important}@media(max-width:600px){header{top:25px;left:24px;right:24px}.wordmark{font-size:12px}.emblem{width:32px;height:36px}main{left:24px;right:24px;top:auto;bottom:20%;transform:none}h1{font-size:54px;max-width:300px}main p{font-size:17px;margin-bottom:28px}footer{left:24px;right:20px;bottom:22px}.shade{background:linear-gradient(0deg,rgba(6,10,15,.9),rgba(6,10,15,.2) 75%,transparent)}}@media(prefers-reduced-motion:reduce){*{transition-duration:.2s!important}}

#about{width:44px;height:44px;padding:10px;color:#bcc6cc}dialog{color:#e9ecec;background:rgba(9,16,23,.80);border:1px solid #34434d;border-radius:10px;max-width:560px;width:calc(100% - 36px);max-height:80svh;padding:36px;overflow:auto;box-shadow:0 24px 90px #0008}dialog::backdrop{background:rgba(0,4,8,.28);backdrop-filter:blur(2px)}dialog h2{font-size:28px;font-weight:300;letter-spacing:-.02em;margin:0 28px 24px 0}dialog p{font-size:16px;line-height:1.65;font-weight:300;color:#bcc8ce;margin:0 0 18px}dialog .about-credit{color:#e9ecec;font-size:14px;margin-top:26px}dialog .about-note{font-size:13px;color:#94a6b1;margin-bottom:0}#close-about{position:sticky;float:right;top:0;margin:-16px -12px 0 8px;padding:10px;border:0;background:rgba(9,16,23,.92);z-index:1}.playing.idle:has(dialog[open]){cursor:auto}@media(max-width:600px){dialog{padding:28px 24px}dialog h2{font-size:25px}dialog p{font-size:15px}}

dialog[open]{animation:explanation-in .8s ease both}dialog[open]::backdrop{animation:backdrop-in .8s ease both}dialog.closing{animation:explanation-out .5s ease both}dialog.closing::backdrop{animation:backdrop-out .5s ease both}@keyframes explanation-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes explanation-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}@keyframes backdrop-in{from{opacity:0}to{opacity:1}}@keyframes backdrop-out{from{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){dialog,dialog::backdrop{animation-duration:.01ms!important}}

.volume-control{display:flex;align-items:center;gap:10px;padding:0 12px;background:rgba(8,12,18,.4);border-radius:5px;height:48px;font-size:12px;color:#d1dadd}.volume-control input{width:100px;min-width:0;height:44px;margin:0;accent-color:#b7e4e9;cursor:pointer}.volume-control output{width:32px;font-variant-numeric:tabular-nums;text-align:right}.volume-control input:focus-visible{outline:2px solid #a5e7f3;outline-offset:2px;border-radius:4px}@media(max-width:600px){footer .credit{display:none}.controls{margin-left:auto;width:min(100%,340px);max-width:100%;gap:4px;flex-wrap:wrap;justify-content:flex-end}.volume-control{flex:1 1 100%;gap:6px;padding:0 8px}.volume-control input{width:60px;flex:1}.controls button{padding:10px}footer{bottom:max(18px,env(safe-area-inset-bottom))}}@media(pointer:coarse){.playing.idle .controls{opacity:.65;pointer-events:auto}.playing.idle{cursor:auto}}

@media(max-width:350px){.volume-control{flex-basis:100%}.controls{width:100%}}

main p.genre{font-size:14px;line-height:1.5;color:#b9c8cc;margin:-20px 0 28px;max-width:320px}

.start-note{display:block;font-size:12px;color:#b9c8cc;margin-top:12px}#sound-help{font-size:12px;white-space:nowrap}#audio-help{border-top:1px solid #34434d;padding-top:22px}.audio-actions{display:flex;flex-wrap:wrap;gap:10px}.audio-actions button{padding:12px 16px;font-size:14px}#audio-test-result{font-size:13px;margin-top:16px}#audio-diagnostics{display:block;font-size:11px;line-height:1.6;color:#94a6b1;overflow-wrap:anywhere;user-select:text}