:root{color-scheme:dark;--mint:#00ffbc;--ink:#edfff7;--muted:#9cb8ac;--line:rgba(157,255,205,.2)}
*{box-sizing:border-box}body{min-width:320px;margin:0;background:radial-gradient(circle at 25% 0,#15503b 0,#07231b 38%,#020b09 100%);color:var(--ink);font:15px/1.5 'DM Sans',sans-serif}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,62px);border-bottom:1px solid var(--line);background:rgba(2,14,11,.6);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font:700 18px 'Space Grotesk',sans-serif;letter-spacing:.08em}.brand>span{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--mint);color:var(--mint);transform:rotate(45deg)}.brand b span{color:var(--mint)}.topbar p{margin:0;color:#91b4a4;font:10px 'DM Mono',monospace;letter-spacing:.11em}.topbar button{width:33px;height:33px;border:1px solid var(--line);border-radius:8px;background:transparent;color:#d7efe4;cursor:pointer}main{max-width:1380px;margin:auto;padding:clamp(30px,5vw,64px)}.intro{display:flex;justify-content:space-between;gap:30px;margin-bottom:30px}.intro span{color:var(--mint);font:10px 'DM Mono',monospace;letter-spacing:.14em}.intro h1{margin:9px 0 0;font:700 clamp(34px,4.5vw,58px)/1 'Space Grotesk',sans-serif;letter-spacing:-.05em}.intro em{color:#6be2ae;font-style:normal}.intro p{margin:14px 0 0;color:var(--muted)}.intro>b{align-self:end;color:#d1f7e6;font:500 18px 'DM Mono',monospace}.board-card{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(10,37,28,.84),rgba(2,16,12,.76));box-shadow:0 26px 75px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.05)}.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;border-bottom:1px solid var(--line)}.board-toolbar>div:first-child{display:grid;gap:4px}.board-toolbar span{color:#8fb4a3;font:9px 'DM Mono',monospace;letter-spacing:.12em}.board-toolbar strong{max-width:390px;overflow:hidden;color:#dfffee;font:600 11px 'DM Mono',monospace;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap}.toolbar-actions{display:flex;align-items:center;gap:9px}.flip-view,.key-intro-button,.zoom-controls button,.calibration-actions button{border:1px solid rgba(0,255,188,.3);border-radius:7px;background:rgba(0,255,188,.07);color:#dbfff0;cursor:pointer;transition:.2s ease}.flip-view,.key-intro-button{padding:7px 11px;font:600 10px 'DM Mono',monospace;letter-spacing:.08em}.flip-view:hover,.key-intro-button:hover,.calibration-actions button:hover,.calibration-actions button.is-active{border-color:var(--mint);background:rgba(0,255,188,.17)}.zoom-controls{display:flex;align-items:center;overflow:hidden;border:1px solid rgba(157,255,205,.2);border-radius:7px}.zoom-controls button{width:29px;height:29px;border:0;border-radius:0;background:transparent;font-size:18px}.zoom-controls output{min-width:44px;text-align:center;color:#b8d5c7;font:10px 'DM Mono',monospace}.board-stage{position:relative;min-height:680px;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 42%,rgba(45,170,111,.17),transparent 45%),linear-gradient(145deg,#0b3025,#031711 70%,#01100d)}.board-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(142,255,204,.08),transparent 32%,rgba(0,0,0,.18));pointer-events:none}.ambient-light{position:absolute;width:62%;height:65%;border-radius:50%;background:radial-gradient(ellipse,rgba(34,242,154,.16),transparent 70%);filter:blur(28px)}
.key-animation{position:absolute;z-index:2;width:214px;height:372px;opacity:0;pointer-events:none;transform:translateY(28px) scale(.74) rotateZ(-8deg);transition:opacity .52s ease,transform .72s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}.animated-key-fob{position:relative;width:100%;height:100%;border:2px solid #9aa8ad;border-radius:29% 29% 25% 25%/16% 16% 12% 12%;background:linear-gradient(120deg,#98a5a8 0,#353f43 13%,#1a2327 42%,#4d5a5e 74%,#141d20 100%);box-shadow:inset 6px 5px 8px rgba(255,255,255,.18),inset -9px -8px 15px #05090b,0 31px 36px rgba(0,0,0,.58);overflow:hidden}.animated-key-fob:before{content:'';position:absolute;inset:10px;border:1px solid rgba(231,247,247,.35);border-radius:25% 25% 22% 22%/15% 15% 11% 11%;box-shadow:inset 0 0 0 6px rgba(0,0,0,.17)}.key-top-chrome,.key-bottom-chrome{position:absolute;z-index:2;left:50%;width:43%;height:7px;transform:translateX(-50%) skewX(-16deg);border-radius:99px;background:linear-gradient(#f4fcff,#718187 40%,#f1ffff 67%,#172126);box-shadow:0 1px 3px #000}.key-top-chrome{top:26px}.key-bottom-chrome{bottom:26px}.key-badge{position:absolute;z-index:4;top:51px;left:50%;display:grid;place-items:center;width:37px;height:34px;transform:translateX(-50%);border:1px solid #dbe9ed;border-radius:8px;background:linear-gradient(135deg,#ecf8fb,#465259 46%,#ecfafd);box-shadow:0 2px 4px #000}.honda-h{display:grid;place-items:center;width:22px;height:22px;border:1.5px solid #0e171b;border-radius:8px 8px 7px 7px;color:#10191e;font:700 17px/1 Arial,sans-serif;letter-spacing:-.18em;padding-right:3px;box-shadow:inset 0 1px rgba(255,255,255,.6)}.key-buttons{position:absolute;top:109px;bottom:75px;left:27px;right:27px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;border-radius:21px;background:linear-gradient(125deg,#0a1013,#263135 48%,#050b0d);box-shadow:inset 3px 3px 8px #000,inset -2px -2px 4px rgba(255,255,255,.08)}.key-buttons i{position:relative;display:block;width:83px;height:42px;border:1px solid #202e33;border-radius:17px;background:linear-gradient(145deg,#57656a,#101719 48%,#000);box-shadow:inset 2px 2px 4px rgba(255,255,255,.16),inset -3px -3px 4px #000,0 3px 4px rgba(0,0,0,.55)}.key-buttons i:after{position:absolute;inset:0;display:grid;place-items:center;color:#ecf8f8;font:700 16px/1 Arial,sans-serif;text-shadow:0 1px 1px #000}.key-lock:after{content:'⌑'}.key-unlock:after{content:'↪'}.key-trunk:after{content:'⌄';font-size:24px!important}.key-id{position:absolute;z-index:3;bottom:46px;left:50%;width:100%;transform:translateX(-50%);color:rgba(227,244,245,.65);font:600 7px 'DM Mono',monospace;letter-spacing:.06em;text-align:center}.key-perspective-container{position:relative;z-index:1;width:min(70%,610px);aspect-ratio:1114/1411;perspective:1500px;transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1)}.key-card-flipper{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,0,.2,1),scale .42s cubic-bezier(.25,1,.5,1);scale:var(--board-scale,.96);will-change:transform,scale}.key-card-flipper.is-flipped{transform:rotateY(180deg)}.front-side-pcb,.back-side-pcb{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}.back-side-pcb{transform:rotateY(180deg)}.board-canvas{position:relative;width:100%;height:100%;isolation:isolate;filter:drop-shadow(0 25px 25px rgba(0,0,0,.45))}.board-image{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;background:transparent!important;user-select:none;pointer-events:none}.front-image{mix-blend-mode:screen;filter:saturate(1.1) contrast(1.07) drop-shadow(0 0 12px rgba(0,255,160,.13))}.back-image{object-fit:contain;mix-blend-mode:normal;filter:saturate(1.05) contrast(1.04);transform:scale(.91)}.board-engraving,.back-engraving{position:absolute;z-index:3;left:8%;bottom:4%;max-width:56%;padding:4px 6px;border:1px solid rgba(226,255,245,.18);border-radius:3px;background:rgba(3,18,13,.34);color:rgba(232,255,247,.74);font:600 7px 'DM Mono',monospace;letter-spacing:.06em;text-shadow:0 1px 2px #000;white-space:nowrap}.back-engraving{left:50%;bottom:5%;transform:translateX(-50%);max-width:none;color:rgba(231,255,247,.67)}.target-layer{position:absolute;inset:0;z-index:5}.interactive-target-node{position:absolute;display:grid;place-items:center;border:1.5px solid transparent;border-radius:5px;background:transparent;cursor:pointer;padding:0;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,transform .16s ease}.interactive-target-node:hover,.interactive-target-node:focus-visible,.interactive-target-node.is-active{border-color:var(--target,#00ffcc);background:color-mix(in srgb,var(--target,#00ffcc) 10%,transparent);box-shadow:0 0 13px color-mix(in srgb,var(--target,#00ffcc) 75%,transparent);transform:scale(1.04)}.tone-red{--target:#ff594c}.tone-orange{--target:#ffae3d}.tone-blue{--target:#4d85ff}.tone-mint{--target:#00ffcc}.button-decal{border-color:rgba(232,250,255,.25)}.button-decal svg{width:46%;height:46%;filter:drop-shadow(0 1px 2px #000)}.button-decal svg path,.button-decal svg rect{fill:none;stroke:#f6ffff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.connection-overlay{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}.connection-overlay path{fill:none;stroke:#176bff;stroke-width:.85;stroke-linecap:round;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 2px #176bff);transition:.2s ease}.connection-overlay path.is-active{opacity:1;stroke:#00ffcc;stroke-width:1.35;stroke-dasharray:5;animation:signalFlow .65s linear infinite;filter:drop-shadow(0 0 5px #00ffcc)}@keyframes signalFlow{to{stroke-dashoffset:-20}}.board-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;color:#86ab9a;font:9px 'DM Mono',monospace;letter-spacing:.09em}.board-footer i{color:var(--mint);font-style:normal;padding:0 5px}.calibration-actions{display:flex;gap:8px}.calibration-actions button{padding:7px 10px;font:600 10px 'DM Mono',monospace;letter-spacing:.07em}.calibration-overlay{position:absolute;inset:0;z-index:20;display:none;cursor:crosshair;touch-action:none}.calibration-overlay.is-active{display:block}.calibration-selection{position:absolute;border:1.5px solid #00ffcc;border-radius:3px;pointer-events:none}.board-canvas.is-calibrating .target-layer{pointer-events:none}.toast{position:fixed;z-index:30;bottom:24px;left:50%;opacity:0;transform:translate(-50%,14px);padding:9px 12px;border:1px solid rgba(0,255,188,.35);border-radius:7px;background:rgba(3,20,15,.94);color:#dfffee;font:10px 'DM Mono',monospace;pointer-events:none;transition:.24s ease}.toast.is-visible{opacity:1;transform:translate(-50%,0)}.board-stage.is-macro .key-card-flipper{scale:min(var(--board-scale,.96),.98)}.board-stage.is-macro .key-card-flipper.is-flipped{scale:.84}.board-stage.is-key-view .key-animation{opacity:1;transform:translateY(0) scale(1) rotateZ(-2deg)}.board-stage.is-key-view .key-perspective-container{opacity:0;pointer-events:none;transform:translateY(-32px) scale(.82)}.board-stage.is-key-view .ambient-light{background:radial-gradient(ellipse,rgba(142,255,204,.3),transparent 70%)}
@media(max-width:760px){.topbar p{display:none}main{padding:28px 16px}.intro>b{display:none}.board-toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{width:100%;justify-content:space-between;flex-wrap:wrap}.board-stage{min-height:510px}.key-perspective-container{width:84%}.board-footer{align-items:flex-start;flex-direction:column}.board-engraving,.back-engraving{font-size:5px}.back-engraving{bottom:3%}.key-animation{scale:.82}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}