@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{font-family:DM Sans,sans-serif;color:#e8f1f5;background:#071019;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}.app{min-height:100vh;display:flex;flex-direction:column}header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #243746;background:#0a1720}.brand{display:flex;align-items:center;gap:12px;color:#eaf8fb;font-family:Space Grotesk,sans-serif;font-weight:700;letter-spacing:.17em;font-size:15px}.brand small{display:block;color:#6d8b9a;font-size:8px;letter-spacing:.3em}.brand-mark{width:31px;height:31px;display:grid;place-items:center;border:1px solid #3ee0d6;color:#3ee0d6;transform:rotate(45deg);font-size:20px}.brand-mark:first-letter{transform:rotate(-45deg)}.header-title{text-align:center}.eyebrow,.section-label,.panel-title,.viewport-top,.viewport-footer,.detail-kicker,.fact span,.detail-bottom span{font-size:10px;font-weight:700;letter-spacing:.18em;color:#7292a1}.header-title h1{font-family:Space Grotesk;font-size:21px;letter-spacing:-.025em;margin:4px 0 0}.header-title h1 span{font-weight:400;color:#b1c4ce}.status{font-size:10px;letter-spacing:.14em;color:#59d9c7;font-weight:700}.status.pending{color:#e3b45c}.status.pending i{background:#e3b45c;box-shadow:0 0 10px #e3b45c}.status i,.viewport-top i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4fe0c9;margin-right:8px;box-shadow:0 0 10px #4fe0c9}main{display:grid;grid-template-columns:244px minmax(0,1fr) 280px;min-height:min(760px,calc(100vh - 84px));flex:1}.panel{background:#0b1923;padding:23px 20px;min-width:0}.controls{border-right:1px solid #243746}.details{border-left:1px solid #243746;position:relative}.panel-title{display:flex;justify-content:space-between;color:#86a6b3;padding-bottom:19px;border-bottom:1px solid #233846}.panel-title span:last-child{font-size:17px;color:#3bd8ce}.aside-intro{font-size:12px;line-height:1.7;color:#8da5b1;margin:24px 0 30px}.section-label{margin:26px 0 10px;color:#587584}.controls button,.details button,.inspector button{border:1px solid transparent;background:transparent;color:#cadbe2;min-height:37px;padding:9px 11px;text-align:left;border-radius:5px;display:flex;align-items:center;gap:11px;width:100%;font-size:12px}.controls button:hover,.details button:hover,.inspector button:hover{background:#17323c;color:#fff}.controls button span{flex:1}.controls button em{font-style:normal;background:#1d3b43;padding:2px 7px;border-radius:20px;color:#62ddd2}.controls button.primary,.controls button.active,.modal .primary{background:#3ad6c9;color:#06232a;font-weight:700}.controls button.active{background:#ccece8}.controls button:disabled{color:#54707d;opacity:.6}.limitation{border-left:2px solid #416371;padding-left:11px;color:#72909c;font-size:10px;line-height:1.55;margin-top:12px}.viewport{position:relative;min-height:520px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#14303c,#08131c 65%)}.viewport.placement{cursor:crosshair}.viewport canvas{position:absolute!important;inset:0}.viewport-top,.viewport-footer{position:absolute;left:22px;right:22px;z-index:2;display:flex;justify-content:space-between;pointer-events:none}.viewport-top{top:22px;color:#9eb8c1}.viewport-footer{bottom:22px;justify-content:flex-start;gap:24px;color:#74939f;font-size:9px}.loading{white-space:nowrap;background:#0e2731;border:1px solid #3c6370;padding:14px 18px;border-radius:8px;font-size:12px;color:#d7f2f1;display:flex;gap:12px;align-items:center}.spinner{width:14px;height:14px;border:2px solid #3bd9cc;border-right-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.placement-banner{position:absolute;z-index:3;top:65px;left:50%;transform:translate(-50%);background:#3bdacb;color:#08252b;padding:10px 16px;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:.1em;white-space:nowrap;pointer-events:none}.hotspot{background:#092a33;border:1px solid #58e5d7;border-radius:20px;color:#e8ffff;padding:5px 10px;white-space:nowrap;font-size:11px;font-weight:700;box-shadow:0 4px 16px #0009}.hotspot.selected{background:#3ad6c9;color:#04242a}.detail-kicker{margin-top:31px;color:#4cdecf}.details h2,.modal h2,.inspector h2{font-family:Space Grotesk;font-size:22px;line-height:1.15;margin:10px 0 16px}.pill{display:inline-block;border:1px solid #346a6d;color:#7be8da;border-radius:3px;padding:5px 9px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.description{font-size:12px;line-height:1.7;color:#a9bec7;margin:24px 0}.fact{display:flex;flex-direction:column;gap:7px;padding:14px 0;border-bottom:1px solid #223944}.fact strong{font-size:12px;font-weight:500;overflow-wrap:anywhere;color:#d9e6eb}.details .danger{color:#fb9292;margin-top:20px;border:1px solid #6a343a;justify-content:center}.details button:not(.danger){margin-top:19px;border:1px solid #355363;justify-content:center}.empty{text-align:center;margin-top:90px;padding:0 15px}.empty-icon{color:#3de0d1;font-size:46px}.empty h2{font-size:18px}.empty p{font-size:12px;line-height:1.7;color:#7e9ca8}.detail-bottom{position:absolute;left:20px;right:20px;bottom:25px;border-top:1px solid #233846;padding-top:19px;display:flex;justify-content:space-between;align-items:center}.detail-bottom strong{font:600 24px Space Grotesk;color:#4ee1d4}.inspector{border-top:1px solid #31505b;background:#0d1d27;padding:24px 30px}.inspector-head{display:flex;justify-content:space-between;align-items:center}.inspector h2{margin:5px 0 20px}.inspector-head button{width:auto;border:1px solid #355363}.inspector-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.inspector h3{font-size:10px;letter-spacing:.15em;color:#5cdecf;margin:26px 0 11px}.inspector .fact{display:grid;grid-template-columns:150px 1fr;align-items:center}.chips{display:flex;flex-wrap:wrap;gap:7px}.chips span{padding:7px 9px;background:#17313a;border:1px solid #335763;border-radius:3px;color:#b7d3db;font-size:11px}.tree{border:1px solid #294651;border-radius:5px;max-height:250px;overflow:auto}.tree button{border-bottom:1px solid #1e3740;border-radius:0;min-height:33px}.tree small{margin-left:auto;color:#698a98}.modal-backdrop{position:fixed;inset:0;background:#031016cc;display:grid;place-items:center;z-index:20;padding:15px}.modal{width:min(420px,100%);background:#10232d;border:1px solid #40616b;border-radius:8px;padding:27px;box-shadow:0 20px 60px #000a}.modal p{color:#7e9fab;font-size:11px}.modal label{display:block;color:#b6ccd4;font-size:11px;font-weight:700;margin-top:18px}.modal input,.modal textarea{display:block;width:100%;margin-top:8px;border:1px solid #36525e;background:#091922;color:#effbfe;border-radius:4px;padding:10px;outline:none}.modal input:focus,.modal textarea:focus{border-color:#43d9cd}.modal textarea{min-height:80px;resize:vertical}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.modal button{border:1px solid #486773;background:transparent;color:#d9e8ec;border-radius:4px;padding:10px 14px}.toast{position:fixed;right:20px;bottom:20px;z-index:30;background:#16323b;color:#e8f7f7;border:1px solid #55beb8;padding:12px 16px;border-radius:5px;font-size:12px;max-width:330px;display:flex;gap:12px}.toast button{background:none;border:0;color:#dff;font-size:17px}@media(max-width:1050px){main{grid-template-columns:205px minmax(0,1fr)}.details{grid-column:1/-1;border-left:0;border-top:1px solid #243746;min-height:210px}.detail-bottom{position:static;margin-top:30px}.empty{margin:20px 0}}@media(max-width:700px){header{height:auto;min-height:76px;padding:15px}.brand{font-size:12px}.header-title{display:none}.status{font-size:8px}main{display:flex;flex-direction:column}.viewport{order:0;height:70vh;min-height:420px}.controls{order:2;border-right:0;border-top:1px solid #243746}.details{order:1;border-top:1px solid #243746}.controls .browser,.controls .select-row{grid-column:1/-1}.viewport-footer{flex-wrap:wrap;gap:7px 15px;font-size:8px}.viewport-top{font-size:8px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px}.controls .panel-title,.controls .aside-intro,.controls .section-label,.controls .limitation{grid-column:1/-1}.controls .section-label{margin:14px 0 5px}.inspector-grid{grid-template-columns:1fr;gap:10px}.inspector{padding:20px}.placement-banner{white-space:normal;width:80%;text-align:center;line-height:1.4}}.label-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.label3d{position:absolute;left:0;top:0;padding:0;border:0;background:none;cursor:pointer;visibility:hidden;opacity:0;transition:opacity .18s;display:flex;flex-direction:column;align-items:center;translate:-50% -100%;font:inherit}.label3d.shown{visibility:visible;opacity:1;pointer-events:auto}.label3d .pill{background:#0b2530e6;border:1px solid #4fd9cc;color:#e8ffff;border-radius:14px;padding:4px 10px;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 3px 12px #0008;letter-spacing:.01em;text-transform:none}.label3d.tier2 .pill{font-weight:600;font-size:10.5px;border-color:#5f8e9a;color:#d5e9ee}.label3d .leader{display:block;position:relative;width:1px;height:26px;background:linear-gradient(#4fd9cc,#4fd9cc99)}.label3d .leader:after{content:"";position:absolute;left:-2.5px;bottom:-3px;width:6px;height:6px;border-radius:50%;background:#4fd9cc;box-shadow:0 0 6px #4fd9cc}.label3d:hover .pill,.label3d:focus-visible .pill{background:#14404b}.label3d.selected .pill{background:#3ad6c9;color:#04242a;border-color:#3ad6c9}.label3d.selected{z-index:3}@media(prefers-reduced-motion:reduce){.label3d{transition:none}}.browser input{width:100%;border:1px solid #36525e;background:#091922;color:#effbfe;border-radius:5px;padding:9px 10px;font-size:12px;outline:none}.browser input:focus{border-color:#43d9cd}.browser-list{margin-top:8px;max-height:280px;overflow:auto;border:1px solid #1f3743;border-radius:5px}.browser-group{position:sticky;top:0;background:#0d2029;color:#5cdecf;font-size:9px;font-weight:700;letter-spacing:.16em;padding:7px 10px;text-transform:uppercase;z-index:1}.controls .browser-list button{min-height:31px;padding:6px 10px;border-radius:0;font-size:12px}.controls .browser-list button small{margin-left:auto;color:#5d7f8c;font-size:9.5px;letter-spacing:.06em}.controls .browser-list button.on{background:#173f47;color:#fff}.browser-empty{font-size:11px;color:#7e9ca8;padding:10px;margin:0}.select-row{display:flex;flex-direction:column;gap:6px;font-size:10px;color:#7292a1;font-weight:700;letter-spacing:.08em;margin-top:6px}.select-row select{background:#091922;color:#e8f1f5;border:1px solid #36525e;border-radius:5px;padding:8px;font:inherit;font-size:12px;letter-spacing:0;font-weight:500}.component-details .chips-row{display:flex;gap:6px;flex-wrap:wrap}.pill.draft{border-color:#7a6431;color:#e3b45c}.component-details .summary{font-size:13px;line-height:1.65;color:#d9e6eb;margin:16px 0 14px}.level-tabs{display:flex;gap:4px;border-bottom:1px solid #223944}.details .level-tabs button,.details .level-tabs button:not(.danger){margin:0;border:0;border-bottom:2px solid transparent;border-radius:0;justify-content:center;font-size:11px;padding:8px 6px;min-height:0;color:#8da5b1;flex:1}.details .level-tabs button.on{color:#4ee1d4;border-bottom-color:#4ee1d4}.component-details .description{margin:14px 0 6px}.facts{margin:10px 0 0}.facts dt{font-size:9.5px;font-weight:700;letter-spacing:.16em;color:#7292a1;text-transform:uppercase;margin-top:12px}.facts dd{margin:5px 0 0;font-size:12px;line-height:1.6;color:#b8cbd3}.did-you-know{margin-top:16px;background:#10303a;border-left:2px solid #4ee1d4;padding:10px 12px;border-radius:0 5px 5px 0}.did-you-know span,.related span{font-size:9.5px;font-weight:700;letter-spacing:.16em;color:#5cdecf}.did-you-know p{margin:6px 0 0;font-size:12px;line-height:1.55;color:#cfe3e9}.model-note{font-size:11px;line-height:1.55;color:#93aab5;margin:14px 0 0;border:1px dashed #33505b;border-radius:5px;padding:8px 10px}.related{margin-top:16px}.related div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.details .related button,.details .related button:not(.danger){width:auto;margin:0;min-height:0;padding:5px 9px;border:1px solid #2f5260;border-radius:14px;font-size:11px;justify-content:center}.component-id{margin-top:16px;font-size:10px;color:#58737f;font-family:ui-monospace,Consolas,monospace}.credits{font-size:9.5px;line-height:1.5;color:#58737f;margin-top:28px;border-top:1px solid #223944;padding-top:12px}.details{overflow:auto}.button-row{display:flex;gap:6px;margin-top:8px}.controls .button-row button{justify-content:center}.select-row input[type=range]{width:100%;accent-color:#3ad6c9}.details .explode-btn,.details .explode-btn:not(.danger){margin:0 0 14px;border:1px solid #3a7b80;color:#bff3ee;font-size:11.5px;min-height:32px;padding:6px 10px}@media(max-width:700px){.controls .button-row{grid-column:1/-1}}