:root{--bg: #0a0a0b;--bg-raised: #121214;--border: #26262a;--text: #e8e8ea;--text-dim: #9a9aa3;--text-faint: #5c5c66;--accent: #d97757;--mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;--sans: -apple-system, "Segoe UI", Inter, Roboto, sans-serif;--display: "Space Grotesk", -apple-system, "Segoe UI", sans-serif;--ease-out: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}.container{max-width:1080px;margin:0 auto;padding:0 24px}.site-header{border-bottom:1px solid var(--border);padding:20px 0}.site-header .container{display:flex;align-items:baseline;justify-content:space-between}.logo{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--text);text-decoration:none;letter-spacing:-.02em}.logo span{color:var(--accent)}.header-nav a{font-family:var(--mono);font-size:13px;color:var(--text-dim);text-decoration:none;margin-left:24px}.header-nav a:hover{color:var(--text)}.hero{position:relative;padding:96px 0 72px;border-bottom:1px solid var(--border);overflow:hidden}.hero>.container{position:relative;z-index:1}#graph{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none}.hero h1{font-family:var(--display);font-size:clamp(38px,6.5vw,64px);font-weight:700;letter-spacing:-.045em;line-height:1.02;margin:0 0 20px;max-width:16ch}.hero p{color:var(--text-dim);font-size:18px;max-width:56ch;margin:0 0 32px}.hero-install{display:inline-flex;align-items:center;gap:12px;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:12px 16px;font-family:var(--mono);font-size:13.5px;color:var(--text)}.hero-install .prompt{color:var(--accent);user-select:none}.hero-stats{display:flex;gap:32px;margin-top:40px;font-family:var(--mono);font-size:13px;color:var(--text-faint)}.hero-stats b{color:var(--text);font-weight:600}.controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:28px 0;position:sticky;top:0;background:var(--bg);z-index:10;border-bottom:1px solid var(--border)}.search{flex:1;min-width:220px;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-family:var(--mono);font-size:13px;color:var(--text);outline:none}.search:focus{border-color:var(--accent)}.search::placeholder{color:var(--text-faint)}.chip{font-family:var(--mono);font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer}.chip:hover{border-color:var(--text-dim);color:var(--text)}.chip{transition:color .2s,border-color .2s,background .2s}.chip.active{background:var(--text);border-color:var(--text);color:var(--bg)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:28px 0 80px}.card{position:relative;background:var(--bg);padding:24px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:background .2s var(--ease-out)}.card:before{content:"";position:absolute;inset:0;background:radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),rgba(217,119,87,.09),transparent 65%);opacity:0;transition:opacity .25s;pointer-events:none}.card:hover{background:var(--bg-raised)}.card:hover:before{opacity:1}.card:hover .card-name{color:var(--accent)}.card-name{transition:color .2s}.card-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.card-name{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--text)}.card-cat{font-family:var(--mono);font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}.card-desc{font-size:13.5px;color:var(--text-dim);margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}.card-meta{font-family:var(--mono);font-size:11.5px;color:var(--text-faint);display:flex;gap:16px}.skill-head{padding:56px 0 32px;border-bottom:1px solid var(--border)}.skill-head .back{font-family:var(--mono);font-size:12px;color:var(--text-faint);text-decoration:none}.skill-head .back:hover{color:var(--text)}.skill-title{font-size:40px;font-weight:700;letter-spacing:-.03em;margin:20px 0 12px;font-family:var(--mono)}.skill-desc{color:var(--text-dim);font-size:16px;max-width:70ch;margin:0 0 24px}.meta-row{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:12px;margin-bottom:24px}.meta-pill{border:1px solid var(--border);border-radius:999px;padding:4px 12px;color:var(--text-dim)}.meta-pill.accent{color:var(--accent);border-color:var(--accent)}.install-box{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:14px 16px;font-family:var(--mono);font-size:13px;margin-bottom:40px;overflow-x:auto}.copy-btn{font-family:var(--mono);font-size:11px;padding:6px 14px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;white-space:nowrap;flex-shrink:0}.copy-btn:hover{border-color:var(--text-dim);color:var(--text)}.copy-btn.done{color:#5cb87a;border-color:#5cb87a}.component-lab{--lab-line: #303035;--lab-panel: #101012;--lab-panel-raised: #151518;--lab-green: #87c99b;--lab-red: #e58b75;position:relative;isolation:isolate;overflow:hidden;margin:28px 0 58px;padding:28px;border:1px solid #353238;border-radius:12px;background:radial-gradient(280px circle at 100% 0%,rgba(217,119,87,.09),transparent 72%),linear-gradient(135deg,rgba(255,255,255,.018) 25%,transparent 25%) 0 0 / 8px 8px,#0d0d0f}.component-lab:before,.component-lab:after{position:absolute;z-index:-1;width:200px;height:1px;background:linear-gradient(90deg,transparent,rgba(217,119,87,.3),transparent);content:"";pointer-events:none}.component-lab:before{top:92px;right:-24px;transform:rotate(-31deg)}.component-lab:after{bottom:54px;left:-42px;transform:rotate(-31deg)}.lab-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:3px 2px 22px}.lab-kicker,.lab-ref,.lab-state,.lab-track,.lab-tile-foot,.lab-status{font-family:var(--mono)}.lab-kicker{display:flex;align-items:center;gap:9px;margin:0 0 10px;color:var(--accent);font-size:10px;font-weight:600;letter-spacing:.09em}.lab-live-dot,.lab-state i{display:inline-block;width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--lab-green);box-shadow:0 0 9px #87c99b59}.lab-kicker-code{color:var(--text-faint)}.lab-heading h2{margin:0 0 7px;font-family:var(--display);font-size:clamp(22px,3vw,29px);font-weight:600;letter-spacing:-.035em}.lab-intro{max-width:56ch;margin:0;color:var(--text-dim);font-size:13px}.lab-signal-map{width:196px;min-width:140px;height:72px;overflow:visible;opacity:.62}.lab-signal-map path{fill:none;stroke:#8a5846;stroke-width:1}.lab-signal-map circle{fill:var(--bg);stroke:var(--accent);stroke-width:1.4}.lab-track{display:flex;align-items:center;gap:10px;min-height:35px;margin:0 0 12px;padding:0 12px;border:1px solid #29292d;border-radius:5px;background:#ffffff05;color:var(--text-faint);font-size:9px;letter-spacing:.06em}.lab-track-node{white-space:nowrap}.lab-track-node b{margin-right:5px;color:var(--accent);font-weight:500}.lab-track>i{width:100%;max-width:42px;height:1px;background:#464047}.lab-track-note{margin-left:auto;color:#77747d;white-space:nowrap}.lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.lab-tile{position:relative;display:flex;min-width:0;flex-direction:column;overflow:hidden;border:1px solid var(--lab-line);border-radius:7px;background:var(--lab-panel)}.lab-tile:before,.lab-tile:after{position:absolute;z-index:1;width:9px;height:9px;border-color:#d9775785;border-style:solid;content:"";pointer-events:none}.lab-tile:before{top:-1px;left:-1px;border-width:1px 0 0 1px}.lab-tile:after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}.lab-tile-top{display:flex;min-height:36px;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;border-bottom:1px solid #27272b;background:var(--lab-panel-raised)}.lab-ref,.lab-state{font-size:8px;letter-spacing:.045em;white-space:nowrap}.lab-ref{overflow:hidden;color:var(--text-dim);text-overflow:ellipsis}.lab-ref b{margin-right:5px;color:var(--accent);font-weight:600}.lab-state{display:inline-flex;align-items:center;gap:5px;color:var(--lab-green)}.lab-state i{width:5px;height:5px;box-shadow:none}.lab-state-idle{color:var(--text-faint)}.lab-state-idle i{background:#68656e}.lab-state-error{color:var(--lab-red)}.lab-state-error i{background:var(--lab-red)}.lab-state-success{color:var(--lab-green)}.lab-tile-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:17px 16px 15px}.lab-glyph{position:relative;display:grid;width:32px;height:32px;place-items:center;margin-bottom:13px;border:1px solid #49362f;border-radius:6px;color:var(--accent);background:#1c1513;font-family:var(--mono);font-size:15px}.lab-glyph svg{width:17px;height:17px}.lab-glyph:after{position:absolute;right:-4px;bottom:-4px;width:5px;height:5px;border:1px solid var(--accent);background:var(--lab-panel);content:""}.lab-glyph-input{color:#8fc6da;border-color:#30414a;background:#11191d}.lab-glyph-input:after{border-color:#8fc6da}.lab-glyph-dialog{color:#c2a7df;border-color:#40334c;background:#17131d}.lab-glyph-dialog:after{border-color:#c2a7df}.lab-tile-body h3{margin:0 0 6px;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.02em}.lab-tile-body>p:not(.lab-status):not(.lab-error):not(.lab-field-hint){min-height:40px;margin:0 0 13px;color:var(--text-dim);font-size:11.5px;line-height:1.55}.lab-button{display:inline-flex;min-height:38px;align-items:center;justify-content:center;gap:10px;padding:8px 11px;border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.25;text-decoration:none;cursor:pointer;transition:transform .12s var(--ease-out),background-color .12s ease,border-color .12s ease,color .12s ease}.lab-button-primary{border-color:#dd947a #dd947a #954f3e #954f3e;background:#a85e47;color:#fff}.lab-button-primary:hover:not(:disabled){border-color:#f1b09a;background:#bd7058}.lab-button-primary:active:not(:disabled){transform:translateY(1px);border-color:#7f4032}.lab-button-secondary{background:#17171a;color:var(--text)}.lab-button-secondary:hover{border-color:#77717a;background:#202024}.lab-button:disabled{border-color:#4d554f;background:#303a33;color:#b2c5b7;cursor:wait}.lab-button:focus-visible,.lab-tile input:focus-visible{outline:2px solid #f2a286;outline-offset:3px}.lab-button>svg{width:13px;height:13px;flex:0 0 auto}.lab-status{min-height:16px;margin:9px 0 0;color:var(--text-faint);font-size:9px;line-height:1.5}.lab-action-tile .lab-status{color:var(--lab-green)}.lab-tile-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px 10px;min-height:29px;padding:8px 11px;border-top:1px solid #27272b;color:#77747d;font-size:7px;letter-spacing:.045em}.lab-input-tile .lab-tile-body{padding-top:17px}.lab-input-tile .lab-glyph{margin-bottom:13px}.lab-input-tile label{margin:0 0 4px;color:var(--text);font-size:10px;font-weight:600}.lab-field-hint{margin:0 0 8px;color:var(--text-faint);font-size:9px;line-height:1.4}.lab-input-tile label:after{margin-left:7px;color:var(--text-faint);content:"REQUIRED";font:8px var(--mono);letter-spacing:.06em}.lab-tile input{width:100%;min-width:0;min-height:36px;padding:8px 9px;border:1px solid #3c3c42;border-radius:4px;color:var(--text);background:#0b0b0d;font-family:var(--mono);font-size:10px}.lab-tile input::placeholder{color:#696871}.lab-tile input[aria-invalid=true]{border-color:var(--lab-red)}.lab-tile input.lab-shake{animation:lab-invalid-shake .3s ease-in-out}.lab-error{min-height:14px;margin:5px 0 7px;color:var(--lab-red);font-size:9px;line-height:1.4}.lab-input-tile .lab-button{width:100%}.lab-input-tile .lab-status{margin-top:7px}.lab-dialog{width:min(440px,calc(100vw - 32px));max-width:none;padding:26px;border:1px solid #48434a;border-radius:9px;color:var(--text);background:#121214;box-shadow:0 24px 90px #0009;opacity:0;transform:translateY(9px) scale(.985);transition:opacity .18s ease,transform .18s var(--ease-out),display .18s allow-discrete,overlay .18s allow-discrete}.lab-dialog[open]{opacity:1;transform:translateY(0) scale(1)}.lab-dialog::backdrop{background:#050507c2;opacity:0;transition:opacity .18s ease,display .18s allow-discrete,overlay .18s allow-discrete}.lab-dialog[open]::backdrop{opacity:1}@starting-style{.lab-dialog[open]{opacity:0;transform:translateY(9px) scale(.985)}.lab-dialog[open]::backdrop{opacity:0}}@keyframes lab-invalid-shake{0%,to{transform:translate(0)}25%,75%{transform:translate(-3px)}50%{transform:translate(3px)}}.lab-dialog-mark{display:grid;width:30px;height:30px;place-items:center;margin-bottom:17px;border:1px solid #40334c;border-radius:6px;color:#c2a7df;background:#17131d;font:10px var(--mono)}.lab-dialog .lab-kicker{font-size:9px}.lab-dialog h3{margin:0 0 10px;font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.025em}.lab-dialog>p:not(.lab-kicker){color:var(--text-dim);font-size:12px}.lab-dialog-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px;margin-top:22px}.lab-corner{position:absolute;z-index:-1;width:13px;height:13px;border-color:#d9775799;border-style:solid}.lab-corner-tl{top:8px;left:8px;border-width:1px 0 0 1px}.lab-corner-br{right:8px;bottom:8px;border-width:0 1px 1px 0}.component-lab :focus-visible{outline:2px solid #f2a286;outline-offset:3px}@media(max-width:900px){.component-lab{padding:23px}.lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-dialog-tile{grid-column:1 / -1}.lab-dialog-tile .lab-tile-body{min-height:190px}}@media(max-width:600px){.component-lab{margin:20px 0 44px;padding:18px 14px}.lab-heading{align-items:flex-start;padding-bottom:18px}.lab-signal-map{width:100px;min-width:80px;height:52px;margin-top:4px}.lab-track{gap:6px;padding-inline:8px;font-size:8px}.lab-track>i{max-width:12px}.lab-track-note{display:none}.lab-grid{grid-template-columns:1fr}.lab-dialog-tile{grid-column:auto}.lab-dialog-tile .lab-tile-body{min-height:0}.lab-tile-body{padding:17px}.lab-tile-body>p:not(.lab-status):not(.lab-error):not(.lab-field-hint){min-height:0}}@media(prefers-reduced-motion:reduce){.lab-button,.lab-dialog,.lab-dialog::backdrop{transition:none}.lab-tile input.lab-shake{animation:none}}.skill-body{padding-bottom:80px;font-size:15px}.skill-body h1{font-size:30px;letter-spacing:-.02em;margin:48px 0 16px}.skill-body h2{font-size:22px;letter-spacing:-.02em;margin:44px 0 14px;border-top:1px solid var(--border);padding-top:32px}.skill-body h3{font-size:17px;margin:32px 0 10px}.skill-body p,.skill-body li{color:var(--text-dim)}.skill-body strong{color:var(--text)}.skill-body a{color:var(--accent)}.skill-body code{font-family:var(--mono);font-size:.88em;background:var(--bg-raised);border:1px solid var(--border);border-radius:4px;padding:2px 6px}.skill-body pre{background:var(--bg-raised);border:1px solid var(--border);border-radius:8px;padding:16px;overflow-x:auto}.skill-body pre code{background:none;border:none;padding:0;font-size:13px}.skill-body table{width:100%;border-collapse:collapse;font-size:13.5px;margin:16px 0}.skill-body th,.skill-body td{text-align:left;padding:10px 14px;border:1px solid var(--border);vertical-align:top}.skill-body th{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);background:var(--bg-raised)}.skill-body td{color:var(--text-dim)}.skill-body blockquote{border-left:2px solid var(--accent);margin:16px 0;padding:4px 0 4px 16px;color:var(--text-faint)}.skill-body hr{border:none;border-top:1px solid var(--border);margin:32px 0}.site-footer{border-top:1px solid var(--border);padding:28px 0;font-family:var(--mono);font-size:12px;color:var(--text-faint)}.site-footer a{color:var(--text-dim);text-decoration:none;margin-left:20px}.site-footer a:hover{color:var(--text)}.site-footer .container{display:flex;justify-content:space-between}.bundles{margin:0 0 48px}.bundles h2{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin:0 0 16px}.bundle-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);font-size:14px}.bundle-row:last-child{border-bottom:none}.bundle-row .bundle-name{font-family:var(--mono);font-weight:600}.bundle-row .bundle-desc{color:var(--text-dim);flex:1;font-size:13px}.bundle-row .bundle-cmd{font-family:var(--mono);font-size:11.5px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes hero-in{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.hero h1{animation:hero-in .9s var(--ease-out) both}.hero p{animation:hero-in .9s var(--ease-out) .08s both}.hero-install{animation:hero-in .9s var(--ease-out) .16s both}.hero-stats{animation:hero-in .9s var(--ease-out) .24s both}.reveal{animation:rise .55s var(--ease-out) both;animation-delay:var(--d, 0s)}.skill-head,.install-box{animation:hero-in .7s var(--ease-out) both}.skill-body{animation:rise .7s var(--ease-out) .1s both}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1}#graph{display:none}}
