@import "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=JetBrains+Mono:wght@500;700&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#111718;--muted:#657477;--line:#aebbbc;--paper:#e7eded;--panel:#f4f6f4;--acid:#cfff61;--mint:#5cf0ac;--blue:#80bfff;--amber:#ffc85a;--red:#ff6c63;--shadow:0 28px 80px #20333436;--ease:cubic-bezier(.22, .75, .24, 1);background:var(--paper);color:var(--ink);font-family:Barlow,system-ui,sans-serif}*{box-sizing:border-box}html{background:#dfe7e7;min-width:320px}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button,input,textarea{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible{outline-offset:3px;outline:3px solid #167e63}.skip-link{z-index:100;background:var(--ink);color:#fff;padding:12px 16px;transition:top .2s;position:fixed;top:-60px;left:16px}.skip-link:focus{top:16px}.app-shell{background:radial-gradient(circle at 78% 16%,#78c3d857,#0000 28%),radial-gradient(circle at 15% 72%,#5cf0ac33,#0000 25%),repeating-linear-gradient(135deg,#17262706 0 1px,#0000 1px 8px),#e6ecec;min-height:100vh;padding:28px clamp(20px,4vw,68px) 18px;position:relative}.grain{pointer-events:none;z-index:10;opacity:.28;mix-blend-mode:multiply;background-image:radial-gradient(#00000038 .45px,#0000 .45px);background-size:4px 4px;position:fixed;inset:0}.topbar,.workspace,footer{z-index:1;position:relative}.topbar{border-bottom:1px solid #1117188c;justify-content:space-between;align-items:flex-end;margin-bottom:30px;padding-bottom:16px;display:flex}.brand-lockup{align-items:flex-start;gap:18px;display:flex}.brand-index{background:var(--ink);color:#fff;padding:7px 8px;font:700 10px/1 JetBrains Mono,monospace}.brand-lockup p{letter-spacing:.14em;color:#556568;margin:0 0 5px;font:800 9px/1 JetBrains Mono,monospace}.brand-lockup h1{letter-spacing:-.055em;margin:0;font:400 clamp(29px,3.5vw,48px)/.9 Archivo Black,sans-serif}.brand-lockup h1 span{color:#0000;-webkit-text-stroke:1.2px var(--ink);margin-left:8px}.connection{cursor:pointer;border:1px solid var(--ink);letter-spacing:.08em;background:0 0;border-radius:100px;align-items:center;gap:9px;padding:11px 16px;font:800 9px/1 JetBrains Mono,monospace;transition:background .22s,color .22s,transform .22s;display:flex}.connection:hover{transform:translateY(-2px)}.connection span{background:#8a9697;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 3px #8a96972b}.connection.online{background:var(--ink);color:#f6faf8}.connection.online span{background:var(--mint);box-shadow:0 0 12px var(--mint)}.workspace{grid-template-columns:minmax(520px,1.15fr) minmax(320px,.7fr);align-items:center;gap:clamp(26px,4vw,70px);max-width:1440px;margin:0 auto;display:grid}.device-wrap{width:min(100%,720px);animation:rise .55s var(--ease) both;justify-self:end;padding:22px;position:relative}.device-aura{filter:blur(28px);background:#5bf6b145;border-radius:90px;position:absolute;inset:5%}.device{box-shadow:inset 0 0 0 6px #ffffff4d, inset 0 -16px 28px #6d82842e, var(--shadow);background:linear-gradient(145deg,#f5f8f7f0,#cdd8d9e8);border:1px solid #fffffff0;border-radius:58px;padding:56px 68px 42px;position:relative;overflow:hidden}.device:before{content:"";pointer-events:none;border:1px solid #5e727552;border-radius:40px;position:absolute;inset:18px}.control-grid{z-index:2;grid-template-columns:repeat(4,minmax(72px,1fr));gap:10px;display:grid;position:relative}.screw{z-index:5;background:linear-gradient(135deg,#3d4648,#090c0d);border-radius:6px;width:21px;height:21px;position:absolute;box-shadow:inset 0 0 0 3px #111,0 2px 3px #00000059}.screw:after{content:"";background:#687376;position:absolute;inset:9px 3px;transform:rotate(45deg)}.screw-tl{top:28px;left:29px}.screw-tr{top:28px;right:29px}.screw-bl{bottom:28px;left:29px}.screw-br{bottom:28px;right:29px}.edge-label{z-index:3;letter-spacing:.08em;color:#5f7072;font:700 8px/1 JetBrains Mono,monospace;position:absolute}.edge-left{top:50%;left:-32px;transform:rotate(-90deg)}.edge-right{top:50%;right:-41px;transform:rotate(90deg)}.key{aspect-ratio:1;cursor:pointer;min-width:0;transition:transform .14s var(--ease), box-shadow .14s, filter .2s;background:#c8d1d2;border:0;border-radius:17px;padding:5px;position:relative;box-shadow:0 7px #aab5b6,0 10px 14px #18262738}.key:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 10px #aab5b6,0 15px 21px #18262733}.key:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px #aab5b6,0 5px 8px #18262733}.key:disabled{cursor:not-allowed;filter:grayscale(.5);opacity:.42}.key-cap{background:linear-gradient(145deg,#fcfdfc 5%,#e2e7e7 100%);border:1px solid #ffffffeb;border-radius:13px;place-items:center;width:100%;height:100%;display:grid;box-shadow:inset 0 -6px 12px #67797b1a,inset 0 2px 4px #fff}.agent-key .key-cap{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(145deg,#e7eeeeb8,#bcc9cac7)}.key.is-active{box-shadow:0 7px #8eb597,0 0 24px #57efaadb}.key.is-active .key-cap{background:linear-gradient(145deg,#f7ffde,#d8f3c0)}.wide-key{aspect-ratio:2.15;grid-column:span 2}.status-orb{aspect-ratio:1;background:#f7f9f8;border-radius:50%;width:33%;box-shadow:inset 0 0 8px #485b5d38,0 0 8px #ffffffbf}.status-thinking{background:var(--blue);box-shadow:0 0 18px var(--blue);animation:1.3s infinite pulse}.status-complete{background:var(--mint);box-shadow:0 0 18px var(--mint)}.status-waiting{background:var(--amber);box-shadow:0 0 18px var(--amber)}.status-error{background:var(--red);box-shadow:0 0 18px var(--red)}.dial{aspect-ratio:1;place-items:center;display:grid;position:relative}.dial-face{aspect-ratio:1;background:conic-gradient(from -35deg,#101415,#758083 10%,#dce2e2 22%,#6f7a7b 44%,#111 65%,#9ba4a5 82%,#151919);border-radius:50%;width:72%;position:relative;box-shadow:0 8px 12px #00000052}.dial-face span{transform-origin:2px 148%;width:4px;height:29%;transform:rotate(calc((var(--dial,2) - 2) * 22deg));background:#111;border-radius:3px;position:absolute;top:7%;left:calc(50% - 2px)}.dial-face b{display:none}.dial button{z-index:2;cursor:pointer;color:#617073;background:0 0;border:0;padding:6px;font:800 20px JetBrains Mono;position:absolute}.dial button:first-child{left:-3px}.dial button:nth-of-type(2){right:-3px}.dial small{letter-spacing:.06em;font:700 7px JetBrains Mono;position:absolute;bottom:-1px}.joystick{aspect-ratio:1;background:#d3dcdc9e;border-radius:19px;position:relative;box-shadow:inset 0 0 0 1px #5c6c6e3d}.joystick span{pointer-events:none;background:radial-gradient(circle at 35% 30%,#555f61,#080b0c 68%);border-radius:50%;position:absolute;inset:19%;box-shadow:0 7px 9px #0006}.joystick button{z-index:2;cursor:pointer;background:0 0;border:0;position:absolute}.joy-up{height:32%;top:0;left:30%;right:30%}.joy-down{height:32%;bottom:0;left:30%;right:30%}.joy-left{width:32%;top:30%;bottom:30%;left:0}.joy-right{width:32%;top:30%;bottom:30%;right:0}.sensor{cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;gap:4px;display:flex;position:relative}.sensor i{aspect-ratio:1;background:radial-gradient(circle,#050707 54%,#283032 56%,#c7d0d1 61%,#0000 63%);border-radius:50%;width:58%;display:block}.led{border-radius:1px;width:6px;height:7px;box-shadow:0 0 6px}.led-white{color:#fff;background:#fff}.led-green{background:var(--mint);color:var(--mint)}.led-amber{background:var(--amber);color:var(--amber)}.led-red{background:var(--red);color:var(--red)}.led-dim{color:#0000;background:#859092}.build-mark{z-index:2;text-align:center;letter-spacing:.12em;color:#536568;margin:18px 0 0;font:700 9px JetBrains Mono;position:relative}.command-panel{min-height:560px;animation:rise .55s .12s var(--ease) both;border-left:1px solid #1117188f;flex-direction:column;justify-content:center;align-self:stretch;padding:clamp(22px,3vw,42px);transition:opacity .3s,transform .3s;display:flex}.command-panel.is-collapsed{opacity:.3;transform:translate(16px)}.panel-head{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.panel-head span,.composer-label{letter-spacing:.11em;color:#67777a;font:700 9px JetBrains Mono}.panel-head h2{letter-spacing:-.045em;text-transform:uppercase;overflow-wrap:break-word;margin:8px 0 0;font:400 clamp(23px,2.55vw,39px)/.96 Archivo Black}.panel-head button{border:1px solid var(--ink);cursor:pointer;background:0 0;flex:none;place-items:center;width:42px;height:42px;display:grid}.panel-head button:hover{background:var(--acid)}.task-preview{color:#506164;overflow-wrap:anywhere;max-width:52ch;min-height:44px;margin:20px 0;font-weight:600;line-height:1.45}.metrics{flex-wrap:wrap;gap:8px;margin-bottom:28px;display:flex}.metrics span{text-transform:uppercase;border:1px solid #9eadb0;align-items:center;gap:7px;padding:7px 10px;font:700 9px JetBrains Mono;display:flex}.metric-dot{background:#e8eceb;border:1px solid #758285;border-radius:50%;width:7px;height:7px}.metric-dot.thinking{background:var(--blue)}.metric-dot.waiting{background:var(--amber)}.metric-dot.error{background:var(--red)}.metric-dot.complete{background:var(--mint)}.composer-label{margin-bottom:8px;display:block}textarea{resize:vertical;border:1px solid var(--ink);width:100%;min-height:135px;color:var(--ink);background:#f7f9f7bd;border-bottom:0;padding:16px;font-size:16px;line-height:1.45}.send-bar{border:1px solid var(--ink);background:var(--acid);cursor:pointer;letter-spacing:.08em;justify-content:space-between;width:100%;padding:15px 17px;font:800 10px JetBrains Mono;display:flex}.send-bar:hover:not(:disabled){background:var(--ink);color:#fff}.send-bar:disabled{cursor:not-allowed;opacity:.45}.notice{color:#415255;border-top:1px solid #9eadb0;border-bottom:1px solid #9eadb0;align-items:flex-start;gap:10px;min-height:48px;margin-top:16px;padding:12px 0;font-size:13px;font-weight:700;display:flex}.notice span{font:700 18px/1 JetBrains Mono}.notice.error{color:#9f2f28;border-color:#c8928e}.programmable-bank{z-index:2;background:#f1f5f38c;border:1px solid #1117188c;max-width:1440px;margin:48px auto 10px;padding:28px;position:relative;box-shadow:inset 0 0 0 5px #ffffff4d}.bank-heading{justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:24px;display:flex}.bank-heading span{letter-spacing:.12em;color:#66777a;font:700 9px JetBrains Mono}.bank-heading h2{letter-spacing:-.045em;margin:7px 0 0;font:400 clamp(24px,3vw,40px)/.95 Archivo Black}.bank-heading p{color:#536467;max-width:55ch;margin:0;font-size:13px;font-weight:600;line-height:1.45}.custom-key-grid{grid-template-columns:repeat(7,minmax(98px,1fr));gap:13px;display:grid}.custom-slot{min-width:0;padding-bottom:27px;position:relative}.custom-key{aspect-ratio:1;cursor:pointer;width:100%;transition:transform .15s var(--ease), box-shadow .15s;background:#c8d1d2;border:0;border-radius:18px;padding:6px;box-shadow:0 8px #aab5b6,0 12px 18px #18262730}.custom-key:hover{transform:translateY(-4px);box-shadow:0 12px #aab5b6,0 18px 24px #18262733}.custom-key:active{transform:translateY(5px);box-shadow:0 3px #aab5b6,0 6px 10px #1826272e}.custom-cap{background:linear-gradient(145deg,#fff 5%,#e3e8e7 100%);border:1px solid #fffffff2;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;height:100%;display:flex;box-shadow:inset 0 -8px 15px #67797b1a,inset 0 3px 5px #fff}.custom-cap b{place-items:center;min-height:28px;font:500 clamp(18px,2vw,29px)/1 JetBrains Mono;display:grid}.custom-cap small{letter-spacing:.035em;font:700 clamp(8px,.9vw,12px)/1 JetBrains Mono}.custom-slot.empty .custom-cap{color:#788587;background:#e2e8e7b3;border-style:dashed}.custom-slot.empty .custom-cap b{color:#9aa6a7;font-size:20px}.edit-key{cursor:pointer;color:#526366;letter-spacing:.12em;background:0 0;border:0;font:700 8px JetBrains Mono;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.edit-key:hover{color:#111718;text-decoration:underline}.keycap-backdrop{padding-block:3vh;overflow-y:auto}.keycap-editor{width:min(940px,100%);max-height:94vh;animation:modal-in .3s var(--ease) both;background:#f6f7f5;border:1px solid #fff;border-radius:28px;flex-direction:column;padding:30px;display:flex;overflow:hidden;box-shadow:0 36px 90px #090f1061}.keycap-editor>header{justify-content:space-between;align-items:flex-start;gap:20px;display:flex}.keycap-editor>header h2{letter-spacing:-.03em;margin:0;font-size:31px}.keycap-editor>header p{color:#657174;margin:7px 0 0;font-size:18px}.keycap-editor>header button{cursor:pointer;background:0 0;border:0;border-radius:50%;width:40px;height:40px;font-size:30px;line-height:1}.keycap-editor>header button:hover{background:#e4e9e7}.keycap-search{background:#fafbfa;border:1px solid #aeb8b7;border-radius:14px;flex:none;align-items:center;gap:12px;height:57px;margin:23px 0;padding:0 18px;display:flex}.keycap-search span{color:#5e6d70;font-size:27px}.keycap-search input{background:0 0;border:0;outline:0;flex:1;min-width:0;font-size:18px}.keycap-options{grid-template-columns:repeat(6,minmax(105px,1fr));gap:16px;padding:4px 5px 20px;display:grid;overflow-y:auto}.keycap-options button{cursor:pointer;background:linear-gradient(145deg,#fff,#efefea);border:1px solid #d2d7d4;border-radius:17px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:120px;padding:12px 7px 9px;transition:transform .14s,border-color .14s,background .14s;display:flex;box-shadow:0 4px #d4d6d2,0 7px 13px #1c272717}.keycap-options button:hover{border-color:#9ba8a6;transform:translateY(-3px)}.keycap-options button.selected{color:#5148b7;background:linear-gradient(145deg,#f7f6ff,#e8e7f5);border-color:#796ee8;box-shadow:0 0 0 2px #796ee82e,0 4px #c5c2de}.keycap-options b{min-height:24px;font:500 23px/1 JetBrains Mono}.keycap-options span{font:700 12px/1 JetBrains Mono}.keycap-options small{color:#6b7777;max-width:13ch;font-size:9px;line-height:1.2}.assigned-shortcut{background:#fff;border:1px solid #c7cecb;border-radius:17px;flex:none;justify-content:space-between;align-items:center;gap:18px;margin-top:4px;padding:17px 20px;display:flex}.assigned-shortcut div{flex-direction:column;gap:4px;display:flex}.assigned-shortcut strong{font-size:17px}.assigned-shortcut span{color:#677477;font-size:13px}.assigned-shortcut button{cursor:pointer;background:#f5f7f5;border:1px solid #b8c0be;border-radius:12px;padding:10px 13px;font:700 9px JetBrains Mono}.editor-actions{flex:none;justify-content:flex-end;gap:12px;padding-top:18px;display:flex}.editor-actions button{cursor:pointer;border:0;border-radius:13px;min-width:104px;padding:13px 18px;font-size:16px;font-weight:700}.editor-actions button:first-child{color:#5d686a;background:0 0}.editor-actions button:last-child{color:#fff;background:#111718}.editor-actions button:last-child:hover{background:#2c3738}.party-burst{z-index:80;pointer-events:none;position:fixed;inset:0;overflow:hidden}.party-burst i{--angle:calc(var(--i) * 15deg);background:hsl(calc(var(--i) * 43deg) 75% 55%);width:11px;height:24px;transform:translate(-50%, -50%) rotate(var(--angle));animation:1.4s ease-out forwards confetti;position:absolute;top:50%;left:50%}footer{letter-spacing:.1em;color:#67777a;border-top:1px solid #11171880;justify-content:flex-end;gap:24px;margin-top:22px;padding-top:12px;font:700 8px JetBrains Mono;display:flex}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);background:#0e16179e;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.connection-modal{width:min(100%,530px);max-height:calc(100vh - 30px);animation:modal-in .35s var(--ease) both;background:#f2f5f2;border:1px solid #fff;padding:clamp(28px,5vw,52px);overflow-y:auto;box-shadow:20px 20px #0a101147}.modal-index{letter-spacing:.12em;color:#607073;font:700 9px JetBrains Mono}.connection-modal h2{letter-spacing:-.055em;margin:18px 0;font:400 clamp(37px,6vw,64px)/.87 Archivo Black}.connection-modal p{color:#5b6a6d;max-width:45ch;margin:0 0 25px;font-weight:600;line-height:1.45}.connection-modal code{color:#263638;font:700 .9em JetBrains Mono,monospace}.connection-modal label{letter-spacing:.1em;margin:13px 0 7px;font:700 8px JetBrains Mono;display:block}.connection-modal input{border:1px solid var(--ink);background:#fff;border-radius:0;width:100%;padding:13px 14px;font:600 14px JetBrains Mono}.connection-modal button[type=submit]{border:1px solid var(--ink);background:var(--acid);cursor:pointer;letter-spacing:.08em;width:100%;margin-top:20px;padding:15px;font:800 10px JetBrains Mono}.connection-modal button[type=submit]:hover{background:var(--ink);color:#fff}.pairing-actions{grid-template-columns:1.35fr 1fr;gap:9px;margin-top:10px;display:grid}.pairing-actions button{border:1px solid var(--ink);background:var(--acid);cursor:pointer;letter-spacing:.06em;padding:13px 10px;font:800 9px JetBrains Mono}.pairing-actions button:last-child{background:#fff}.pairing-actions button:hover:not(:disabled){background:var(--ink);color:#fff}.pairing-actions button:disabled{opacity:.45;cursor:wait}.qr-video{aspect-ratio:4/3;object-fit:cover;background:#111;width:100%;margin-top:12px;display:block}.connection-divider{color:#718083;letter-spacing:.08em;align-items:center;gap:10px;margin:23px 0 4px;font:700 7px JetBrains Mono;display:flex}.connection-divider:before,.connection-divider:after{content:"";background:#b7c0c0;flex:1;height:1px}.connection-divider span{white-space:nowrap}.text-button{cursor:pointer;background:0 0;border:0;margin:14px auto 0;font:700 9px JetBrains Mono;text-decoration:underline;display:block}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes modal-in{0%{opacity:0;transform:translateY(22px)scale(.98)}to{opacity:1;transform:none}}@keyframes pulse{50%{opacity:.45;transform:scale(.82)}}@keyframes confetti{to{transform:translate(calc(cos(var(--angle)) * 46vw), calc(sin(var(--angle)) * 46vh)) rotate(calc(var(--angle) + 520deg));opacity:0}}@media (width<=980px){.workspace{grid-template-columns:1fr}.device-wrap{justify-self:center}.command-panel{border-top:1px solid #1117188f;border-left:0;min-height:0;padding-inline:0}.custom-key-grid{grid-template-columns:repeat(4,minmax(90px,1fr))}.keycap-options{grid-template-columns:repeat(4,minmax(100px,1fr))}}@media (width<=650px){.app-shell{padding:20px 12px}.topbar{align-items:flex-start;gap:16px}.brand-index,.brand-lockup p{display:none}.brand-lockup h1{font-size:26px}.connection{padding:9px 11px;font-size:7px}.device-wrap{padding:6px}.device{border-radius:34px;padding:40px 35px 31px}.device:before{border-radius:26px;inset:10px}.control-grid{gap:7px}.key{border-radius:11px;padding:3px;box-shadow:0 5px #aab5b6,0 8px 11px #18262733}.key-cap{border-radius:9px}.edge-label{display:none}.screw{width:15px;height:15px}.screw-tl{top:18px;left:18px}.screw-tr{top:18px;right:18px}.screw-bl{bottom:18px;left:18px}.screw-br{bottom:18px;right:18px}.dial button{font-size:13px}.dial small{font-size:5px}footer{justify-content:space-between;gap:8px}.programmable-bank{margin-top:30px;padding:18px 12px}.bank-heading{display:block}.bank-heading p{margin-top:12px}.custom-key-grid{grid-template-columns:repeat(2,minmax(100px,1fr))}.keycap-editor{border-radius:20px;padding:20px 14px}.keycap-editor>header h2{font-size:25px}.keycap-editor>header p{font-size:14px}.keycap-options{grid-template-columns:repeat(2,minmax(100px,1fr));gap:11px}.assigned-shortcut{flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
