:root{color-scheme:dark;font-family:'Segoe UI',Arial,sans-serif;color:#e6e8e4;background:#080e15}
*{box-sizing:border-box}body{margin:0;min-height:100svh;isolation:isolate;display:flex;flex-direction:column;background:#080e15}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #d9c5a5;outline-offset:5px}[hidden]{display:none!important}
.city-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#080e15}.city-art{position:absolute;inset:-14px;background:url('./assets/sector-09-references.png') 76% center/cover no-repeat;animation:city-drift 34s ease-in-out infinite alternate}.city-shade{position:absolute;inset:0;background:linear-gradient(90deg,#050b13b5,transparent 65%),linear-gradient(0deg,#02070e7a,transparent 30%,#050a1444)}.city-halo{position:absolute;inset:0;background:radial-gradient(ellipse at 65% 27%,#8bc9de25,transparent 42%),radial-gradient(ellipse at 44% 76%,#d9975029,transparent 34%);mix-blend-mode:screen;animation:city-glow 19s ease-in-out infinite alternate}.city-mist{position:absolute;inset:35% -20% -20%;background:radial-gradient(ellipse at 70% 70%,#b8e2f318,transparent 50%);animation:city-mist 25s ease-in-out infinite alternate}.city-snow{position:absolute;inset:0;width:100%;height:100%;opacity:.9;pointer-events:none}.scene-suspended *{animation-play-state:paused!important}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:34px 4.6vw;background:linear-gradient(#060c1680,transparent)}.brand{display:flex;align-items:center;gap:12px;color:#e4dbcb;text-decoration:none;font:600 26px Georgia,serif;letter-spacing:2px;text-shadow:0 2px 12px #0008}.brand img{width:32px;height:38px;filter:grayscale(.25)}.motion-control{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 14px;border:1px solid #b7cbd52e;background:#07111bbb;border-radius:3px;font-size:11px;color:#c1cbd0}.status-dot{width:4px;height:4px;background:#9ebabe;border-radius:50%}.switch{width:25px;height:13px;border:1px solid #b39b7166;border-radius:10px;position:relative;background:#5c443344}.switch:after{content:'';position:absolute;left:3px;top:3px;width:5px;height:5px;border-radius:50%;background:#a3a8a5;transition:transform .2s,background .2s}.motion-on .switch:after{transform:translateX(11px);background:#dfbd91}.motion-on .status-dot{box-shadow:0 0 7px #abcbd2}
main{flex:1;display:flex;align-items:center;padding:5vh 7vw 11vh;min-height:360px}.intro{position:relative;width:min(420px,100%);padding:38px 34px 28px;background:linear-gradient(135deg,#07121bd6,#07121b77);border:1px solid #b6c7ca40;border-radius:3px;box-shadow:0 20px 70px #0002,inset 0 1px #e3f0ec0c}.intro:before,.intro:after{content:'';position:absolute;width:14px;height:14px;border:solid #d5bb9688;pointer-events:none}.intro:before{left:-1px;top:-1px;border-width:2px 0 0 2px}.intro:after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}.eyebrow{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#b3c1c7;margin:0 0 22px}h1{font:500 clamp(48px,6vw,76px)/1 Georgia,'Times New Roman',serif;letter-spacing:5px;color:#e6ddce;margin:0;text-shadow:0 3px 20px #0005}.intro-line{height:1px;background:linear-gradient(90deg,#cda77d77,transparent);margin:30px 0 24px}.copy-link{display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #c1d5d448;background:linear-gradient(#8bacb61a,#1d303d55);border-radius:3px;color:#cbd8d9;min-height:44px;padding:12px 16px;font-size:12px;transition:background .2s,border-color .2s}.copy-link:hover{background:#a2c7d027;border-color:#c9d8c999;color:#f0eee5}.copy-link svg{width:16px;height:16px}.copy-status{font-size:11px;color:#bfd7c8;min-height:16px;margin:12px 0 0}#copy-fallback{margin-top:16px}#copy-fallback label{display:block;font-size:11px;color:#b3c1c7;margin-bottom:8px}#site-link{width:100%;font:12px 'Segoe UI',sans-serif;padding:12px;color:#e2e7e5;background:#08121b;border:1px solid #b6c7ca55;border-radius:2px}
footer{display:flex;align-items:center;gap:16px;padding:25px 4.6vw;font-size:10px;letter-spacing:1px;color:#bdc8cc;background:linear-gradient(transparent,#02070e55)}.footer-line{height:1px;width:45px;background:#b2c5cc55}footer span:last-child{color:#9eafb8}
body.motion-off *{animation:none!important;transition:none!important}body.motion-off .city-snow{display:none}@keyframes city-drift{to{transform:scale(1.025) translateX(-6px)}}@keyframes city-glow{from{opacity:.5}to{opacity:1}}@keyframes city-mist{to{transform:translateX(5%);opacity:.6}}
@media(max-width:760px){.city-art{animation:none;background-position:78% center}.topbar{padding:23px 22px}.brand{font-size:23px;gap:9px}.brand img{width:28px;height:34px}.motion-control{font-size:10px;padding:10px;gap:8px}.status-dot{display:none}main{padding:13vh 22px 8vh;align-items:flex-start}.intro{width:330px;padding:30px 26px 22px}.eyebrow{font-size:9px;letter-spacing:2px}h1{font-size:57px;letter-spacing:3px}.city-shade{background:linear-gradient(90deg,#050b1366,transparent),linear-gradient(0deg,#02070e88,transparent 50%,#050a1444)}footer{padding:22px;font-size:9px;gap:12px}}
@media(max-width:360px){.topbar{padding-inline:16px}.brand{font-size:20px}.brand img{width:24px}.motion-control{gap:6px}main{padding-inline:16px}.intro{padding-inline:22px}h1{font-size:50px}}
@media(prefers-reduced-motion:reduce){body:not(.motion-on) *{animation:none!important;transition:none!important}body:not(.motion-on) .city-snow{display:none}}
