/* home-v2: enlarge the accepted art; recolor only the surround, never the image. */
:root{color:#c3cfe0;background:#06182c}
main{width:min(1600px,calc(100% - 48px));max-width:1600px;padding:24px 0 18px;gap:12px}
h1{color:#a9b9d0;margin:0}
.hero{width:min(100%,calc(max(200px,100svh - 165px)*1672/940));margin:auto}
.scene{background:radial-gradient(ellipse,#102d50 0%,#06182c 74%)}
.ambient__light{background:radial-gradient(ellipse at 50% 46%,rgba(28,64,108,.66) 0%,rgba(18,43,80,.52) 24%,rgba(9,28,56,.34) 43%,rgba(6,24,44,0) 70%)}
.sound-controls{position:fixed;z-index:10;right:max(24px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));min-height:0;max-width:min(320px,calc(100% - 48px));display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
main{padding-bottom:94px}
#sound-toggle{position:relative;display:inline-grid;place-items:center;width:60px;min-width:60px;height:60px;padding:4px;border:1px solid #304667;border-radius:50%;background:#07162a;box-shadow:0 5px 18px #020c1d66;vertical-align:middle}
#sound-toggle:hover:enabled{border-color:#8a9bb4;background:#07162a;box-shadow:0 4px 20px #1c3e6155}
.record{display:block;width:50px;height:50px;border-radius:50%;border:1px solid #4a5d77;background:radial-gradient(circle,#071426 0 2px,#c5a467 2.5px 9px,#152640 9.5px 11px,transparent 11.5px),repeating-radial-gradient(circle,transparent 0 3px,rgba(130,153,184,.23) 3px 4px,transparent 4px 6px),conic-gradient(from 25deg,#07101e,#2b4260 22%,#080f1d 40%,#162c47 58%,#080f1d 78%,#2b4260 90%,#07101e);animation:record-spin 4s linear infinite;animation-play-state:paused}
body[data-sound-state="playing"] .record{animation-play-state:running}
.record-action{position:absolute;right:-2px;bottom:-1px;width:18px;height:18px;border:1px solid #566d89;border-radius:50%;background:#0b213e;display:grid;place-items:center}
.record-action::before{content:"";width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid #d2bb8b;margin-left:2px}
#sound-toggle[aria-pressed="true"] .record-action::before{width:6px;height:7px;border:0;border-inline:2px solid #d2bb8b;margin:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes record-spin{to{transform:rotate(360deg)}}
p{color:#91a6bf}footer{color:#788fae}.home-footer{flex-direction:column;align-items:center;text-align:center;gap:4px;overflow-wrap:anywhere;padding:10px 0 0}.footer-mark{display:flex;align-items:center;gap:12px;width:min(320px,100%);margin-bottom:4px;color:#b5a47d;font-size:9px;letter-spacing:.24em;text-transform:uppercase}.footer-mark::before,.footer-mark::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#526074)}.footer-mark::after{transform:scaleX(-1)}.footer-company{color:#abbacf;font-size:12px;letter-spacing:.08em}.footer-address{color:#7f94ad;font-size:11px;letter-spacing:.03em}.footer-icp{margin-top:3px;color:#788fae;font-size:10px;letter-spacing:.04em}.credits .back{color:#92a8c2}
@media(min-width:1200px){main{width:min(1840px,calc(100% - 48px));max-width:1840px}.hero{width:min(100%,calc(max(200px,100svh - 80px)*1672/940))}}
@media(max-width:800px){main{width:calc(100% - 24px);padding:20px 0 94px;gap:12px}.hero{width:100%}.sound-controls{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.record{animation:none}}