@import url('../specimen-theme.css');
*{box-sizing:border-box}html,body{margin:0;background:#020609;color:#bdd4df;font-family:Menlo,Consolas,monospace;height:100%}canvas{display:block;width:100vw;height:100dvh;cursor:crosshair}header{position:fixed;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:27px 36px;pointer-events:none}header a{display:flex;gap:12px;align-items:center;color:#d9eef3;text-decoration:none;pointer-events:auto;font-size:14px;letter-spacing:3px}header img{width:38px;height:38px}small{display:block;font-size:7px;letter-spacing:1.5px;color:#526b79;margin-top:7px}.live{font-size:8px;letter-spacing:1.5px;color:#628c9e}.intro{position:fixed;top:155px;left:38px;pointer-events:none}.eyebrow{font-size:8px;letter-spacing:2px;color:#628897}h1{font:400 clamp(29px,3.2vw,45px)/1.3 Georgia,serif;letter-spacing:-.7px;color:#c6e1ec;margin:20px 0}p{font:11px/1.9 sans-serif;color:#617f8d}.spec{display:flex;flex-direction:column;gap:9px;margin-top:28px;font-size:7px;color:#476372;letter-spacing:1.5px}.spec span:first-child{color:#80aaba}.dock{position:fixed;bottom:57px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;background:#08131be8;border:1px solid #72b5cb28;border-radius:15px;padding:13px 16px;backdrop-filter:blur(18px);white-space:nowrap}button,select{font:10px sans-serif;color:#8fbdcd;background:none;border:0;padding:10px;cursor:pointer}button.primary{background:#9bcedd;color:#102e3a;border-radius:8px;padding:12px 18px}button:hover{color:#fff}button.primary:hover{background:#c8f1f4;color:#102e3a}label{font-size:7px;color:#5b8194;display:flex;align-items:center;gap:9px}input{width:75px;accent-color:#9bcedd;height:3px}select{background:#08131b;border:1px solid #72b5cb28;border-radius:6px;max-width:120px}footer{position:fixed;left:36px;right:36px;bottom:22px;display:flex;justify-content:space-between;font-size:7px;letter-spacing:1px;color:#304e5f;pointer-events:none}.hint{position:fixed;bottom:145px;left:50%;transform:translateX(-50%);font-size:7px;letter-spacing:1.5px;color:#395c6b;white-space:nowrap;pointer-events:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #9bcedd;outline-offset:4px}@media(max-width:700px){header{padding:22px}.live{font-size:6px}.intro{left:23px;top:120px}h1{font-size:30px}.intro p{font-size:10px}.dock{gap:5px;padding:11px;width:calc(100% - 32px);justify-content:space-between}.dock button{font-size:9px;padding:9px}.dock button.primary{padding:11px 12px}label{gap:4px}input{width:48px}select{font-size:8px;padding:8px;max-width:91px}.hint{font-size:6px;letter-spacing:.6px}footer{left:22px;right:22px;font-size:6px;letter-spacing:0}footer span:last-child{display:none}}@media(max-width:420px){.intro{top:105px}h1{font-size:27px}.live{display:none}.dock label{font-size:0}input{width:44px}}
.intro{top:130px}.intro h1{font-size:clamp(28px,3vw,42px)}canvas{cursor:default}@media(max-width:700px){.intro{top:105px}.intro h1{font-size:28px}.intro p{font-size:9px}.dock{gap:5px}#slow{font-size:8px}.intro .spec{margin-top:18px}}@media(max-height:600px){.intro{top:100px}.intro p,.intro .spec{display:none}}