:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:#07101a;color:#d9e4e8;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 10% 0%,#123247 0%,transparent 40%),linear-gradient(130deg,#07131e,#07101a 58%)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #55d6cc;outline-offset:3px}.shell{max-width:1900px;margin:auto;padding:0 22px}.masthead{height:91px;display:flex;align-items:center;gap:30px;border-bottom:1px solid #244153}.brand{display:flex;align-items:center;gap:16px;min-width:300px}.brand-symbol{display:grid;place-items:center;width:43px;height:43px;border:1px solid #3f8d9f;border-radius:10px;color:#69e6dc;font-size:30px}.eyebrow{font-size:10px;letter-spacing:2.3px;color:#7babb9;font-weight:800}.brand strong{display:block;margin-top:7px;font-size:23px;letter-spacing:2px;color:#e7f7f8}.brand-muted{color:#65c5c4}.header-stat{margin-left:auto;color:#93bdca;font-size:11px;letter-spacing:1.4px;font-weight:bold;white-space:nowrap}.live-dot,.radar-dot{display:inline-block;background:#4dd5c6;border-radius:50%;width:8px;height:8px;box-shadow:0 0 16px #31bcbf;margin-right:9px}.seo-link{border:1px solid #345363;padding:12px 16px;text-decoration:none;color:#b2cfd5;letter-spacing:1px;font-size:11px;border-radius:7px}.seo-link:hover{border-color:#62b7bd}.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:18px;margin-top:20px}.stage,.inspector{min-width:0}.stage-head{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 4px}.stage-head h1{font-size:33px;letter-spacing:-1px;font-weight:620;margin:5px 0}.small-spark{color:#48bfb7;font-size:17px;vertical-align:top;margin-left:12px}.stage-count{display:flex;align-items:flex-end;gap:12px;color:#92b4c0}.stage-count b{font-size:32px;font-weight:500;color:#dcecf2}.stage-count span{font-size:10px;letter-spacing:1.6px;padding-bottom:7px}.viewport{position:relative;height:min(61vh,660px);min-height:420px;background:radial-gradient(ellipse at 56% 60%,#16354a 0,#0c2232 42%,#071522 79%);overflow:hidden;border:1px solid #244557;border-radius:14px;isolation:isolate}.viewport:before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#3762780f 1px,transparent 1px),linear-gradient(90deg,#3762780f 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent,#000 65%);z-index:1}.viewport canvas{width:100%;height:100%;display:block;position:absolute;inset:0;cursor:grab}.viewport canvas:active{cursor:grabbing}.viewport-gradient{pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 80px #07101a8a;z-index:2}.viewport-label,.viewport-corner,.axis-marker,.view-hint{pointer-events:none;position:absolute;z-index:3;font-size:10px;font-weight:800;letter-spacing:1.6px;color:#a0c4cc}.viewport-label{top:20px;left:23px;background:#071522c9;padding:12px 14px;border:1px solid #294859;border-radius:7px}.viewport-corner{bottom:22px;right:20px;color:#618fa2}.axis-marker{right:23px;top:22px;opacity:.8}.axis-marker span{color:#62e5c1;padding:0 8px}.view-hint{bottom:21px;left:23px;color:#719fac}.hover-label{position:absolute;z-index:5;background:#0c2635ed;color:#e7f7f8;border:1px solid #4cb2b9;border-radius:5px;padding:8px 10px;font-size:12px;pointer-events:none;max-width:300px}.modebar{margin-top:12px;border:1px solid #294557;border-radius:10px;background:#0b1d2a;display:flex;padding:6px;gap:4px}.modebar button{border:0;color:#8eafba;background:transparent;flex:1;min-height:39px;border-radius:7px;letter-spacing:1.1px;font-size:10px;font-weight:900}.modebar button.selected,.modebar button:hover{background:#24525a;color:#dcffff}.playback{border:1px solid #294557;background:#0b1b29;border-radius:11px;margin-top:13px;padding:16px 19px 14px}.playback-row{display:flex;align-items:center;gap:9px}.action{white-space:nowrap;background:#142d3b;border:1px solid #36576a;border-radius:7px;color:#abcad1;padding:12px 16px;font-size:11px;font-weight:bold;letter-spacing:1px}.action:hover{border-color:#69cbc8}.action.primary{background:#55d2c0;color:#08262c;border-color:#55d2c0}.speed-wrap{margin-left:auto;min-width:145px}.speed-wrap label{display:flex;justify-content:space-between;font-size:10px;color:#94b6c0;letter-spacing:1px}.speed-wrap label span{font-weight:800;color:#70e0d3}.speed-wrap input{width:100%;accent-color:#53cfc1;margin-top:10px}.timeline{padding-top:17px}.timeline label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;font-weight:750;color:#acd1d7}.timeline input{display:block;width:100%;accent-color:#53cfc1;margin:13px 0 8px;cursor:pointer}.timeline-phases{display:flex;justify-content:space-between;color:#597f8d;font-size:9px;letter-spacing:1.5px}.metrics{margin:12px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.metrics>div{border:1px solid #284455;background:#0c1c2a;border-radius:10px;padding:15px}.metrics span{display:block;color:#7fa6b3;letter-spacing:1.2px;font-size:9px;font-weight:700}.metrics b{display:block;margin:10px 0;font-weight:520;font-size:23px;white-space:nowrap}.mini-track{height:3px;background:#263b48;border-radius:4px}.mini-track i{display:block;width:0%;height:100%;background:#48d8c6;transition:width .2s}.inspector{border:1px solid #294454;background:#0b1b29;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;max-height:calc(min(61vh,660px) + 84px + 227px)}.aside-heading{padding:28px 23px 17px}.aside-heading h2{font-size:22px;font-weight:600;letter-spacing:-.5px;margin:9px 0}.aside-heading p{color:#779ca8;font-size:13px;line-height:1.6;margin:0}.search-wrap{margin:0 21px;position:relative}.search-wrap input{width:100%;height:43px;padding:0 41px 0 14px;background:#061520;border:1px solid #294b5a;border-radius:6px;color:#e6f4f3;outline:none;font-size:12px}.search-wrap span{position:absolute;right:16px;top:6px;font-size:23px;color:#6e9cac}.filter-row{display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin;padding:14px 20px}.filter-row button{flex:none;white-space:nowrap;background:#122837;border:1px solid #2c4b5a;color:#84a5af;border-radius:6px;padding:9px 11px;font-size:10px}.filter-row button.active{background:#215457;color:#d4f4f1;border-color:#3daea9}.part-list{overflow:auto;min-height:150px;flex:1;border-top:1px solid #223e4b;border-bottom:1px solid #223e4b;scrollbar-color:#27505d transparent}.part-item{width:100%;text-align:left;border:0;border-bottom:1px solid #1d3442;display:flex;align-items:center;gap:12px;padding:13px 21px;background:none;color:#d5e4e9}.part-item:hover,.part-item.active{background:#183746}.part-symbol{width:34px;height:34px;background:#1a3645;display:grid;place-items:center;border:1px solid #345869;border-radius:6px;color:#63d8d0;flex:none;font-size:19px}.part-item strong{display:block;font-size:12px;font-weight:650}.part-item small{display:block;margin-top:5px;color:#789eab;font-size:10px}.part-item .part-arrow{margin-left:auto;color:#547a89}.part-detail{padding:20px 23px;background:linear-gradient(160deg,#0e2d3d,#0b1d2b);min-height:189px}.detail-tag{font-size:9px;color:#55d6c7;letter-spacing:1.8px;font-weight:900}.part-detail h3{margin:8px 0 7px;font-size:17px}.part-detail p{font-size:12px;line-height:1.6;color:#98b5bf;margin:0 0 12px}.detail-meta{display:flex;justify-content:space-between;border-top:1px solid #315060;padding:8px 0;color:#92b0ba;font-size:11px}.detail-meta b{color:#d9e9eb;font-weight:550}.legend{display:flex;justify-content:space-between;padding:14px 20px;color:#789da9;font-size:10px}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px}.legend-dot.blue{background:#44b7ec}.legend-dot.orange{background:#eaaa4b}.legend-dot.teal{background:#52d7c6}footer{display:flex;justify-content:space-between;margin:22px 2px;padding:22px 0;border-top:1px solid #213847;color:#547f8d;font-size:9px;letter-spacing:1.6px}@media(max-width:1100px){.layout{grid-template-columns:1fr}.inspector{max-height:600px}.viewport{height:58vh}.header-stat{display:none}}@media(max-width:620px){.shell{padding:0 10px}.masthead{height:78px}.brand{min-width:0}.brand strong{font-size:16px}.brand .eyebrow{font-size:7px;letter-spacing:1px}.seo-link{display:none}.stage-head h1{font-size:24px}.stage-count span{display:none}.viewport{height:53vh;min-height:325px}.modebar button{font-size:8px;letter-spacing:0;padding:5px 1px;min-height:41px}.playback{padding:12px 10px}.playback-row{flex-wrap:wrap}.action{padding:11px;font-size:10px}.speed-wrap{flex:1 1 100%;margin:5px 4px}.metrics{gap:5px}.metrics>div{padding:9px 7px}.metrics span{font-size:8px}.metrics b{font-size:16px}.viewport-label{font-size:8px;left:8px;top:8px;padding:9px}.view-hint{font-size:8px;left:10px}.aside-heading{padding:18px}footer{flex-direction:column;gap:8px}}
@media(max-width:620px){.viewport-corner{bottom:40px;right:10px;font-size:8px}.view-hint{max-width:95%;font-size:7px;line-height:1.3}}