*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0a1628;font-family:Inter,system-ui,sans-serif}#app{position:fixed;top:0;right:0;bottom:0;left:0}canvas{display:block;width:100%;height:100%}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:32px 36px 28px;z-index:10}#title{text-align:center;color:#ffffffeb;text-shadow:0 2px 20px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.4)}#title h1{font-family:Cormorant Garamond,serif;font-weight:300;letter-spacing:.42em;font-size:clamp(26px,3.2vw,40px);margin-left:.42em;line-height:1}#title p{font-family:Cormorant Garamond,serif;font-weight:300;font-style:italic;letter-spacing:.18em;font-size:11px;opacity:.72;margin-top:10px;text-transform:lowercase}#hint{position:absolute;left:50%;top:50%;transform:translate(-50%,42vh);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#ffffff9e;background:#0c162647;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);padding:9px 18px;border-radius:999px;text-shadow:0 1px 4px rgba(0,0,0,.35);white-space:nowrap}#hint .icon{opacity:.9;margin-right:6px}#hint .dot{margin:0 8px;opacity:.4}#time-bar{display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:auto}#time-track{position:relative;width:min(360px,64vw);height:2px;background:#ffffff29;border-radius:2px;overflow:visible}#time-thumb{position:absolute;top:50%;left:0%;width:10px;height:10px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px #ffffffe6,0 0 20px #ffbe788c;transition:left .12s linear}#time-label{position:absolute;top:-22px;left:50%;transform:translate(-50%);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#ffffffe6;background:#0a14246b;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:2px 8px;border-radius:999px;white-space:nowrap;border:1px solid rgba(255,255,255,.07)}#time-icons{display:flex;gap:76px;font-size:10px;letter-spacing:.1em;color:#ffffff61;width:min(360px,64vw);justify-content:space-between;padding:0 2px}#sound-toggle{position:absolute;right:36px;bottom:28px;pointer-events:auto;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fffc;font-size:14px;cursor:pointer;display:grid;place-items:center;transition:all .2s ease}#sound-toggle:hover{background:#ffffff29;transform:scale(1.05)}#sound-toggle.muted{opacity:.45;text-decoration:line-through}#loader{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 120% at 50% 100%,#1a3a52,#0d2137 38%,#070d1a 78%);display:grid;place-items:center;z-index:100;transition:opacity 1.1s ease,visibility 1.1s ease}#loader.hidden{opacity:0;visibility:hidden;pointer-events:none}.loader-inner{text-align:center;color:#ffffffc7}.loader-wave{width:44px;height:44px;margin:0 auto 18px;border:1.5px solid rgba(255,255,255,.22);border-top-color:#fffffff2;border-radius:50%;animation:spin .9s linear infinite}.loader-inner p{font-family:Cormorant Garamond,serif;font-style:italic;letter-spacing:.14em;font-size:13px;opacity:.85}@keyframes spin{to{transform:rotate(360deg)}}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(120% 80% at 50% 38%,transparent 58%,rgba(4,10,20,.28) 100%);z-index:5}@media (max-width: 640px){#ui{padding:20px 18px 18px}#hint{font-size:10px;padding:8px 12px;transform:translate(-50%,40vh)}#time-icons{gap:0}#sound-toggle{right:18px;bottom:18px}}