:root{font-family:'Malgun Gothic',sans-serif;font-size:12px;color:#e8eaee;background:#1e1f26;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header{height:42px;display:flex;gap:20px;align-items:center;padding:0 14px;background:#1a1b21;border-bottom:1px solid #3c4250}header strong{font-size:16px;color:#4fc3f7}header span{color:#8a919c}header a{margin-left:auto;color:#9fd3ff;text-decoration:none}.toolbar{display:flex;align-items:center;gap:7px;padding:7px;background:#22242c;flex-wrap:wrap}button,select,input[type=search]{font:inherit;padding:6px 9px;color:#e8eaee;border:1px solid #3c4250;border-radius:4px;background:#2b2e38}button{cursor:pointer}button:hover{background:#343845}button:disabled{opacity:.4;cursor:default}button.active{background:#2d6ea3;border-color:#4fc3f7}.toolbar label{margin-left:12px}.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(350px,1fr);height:calc(100vh - 116px)}.workspace.no-map{grid-template-columns:1fr}.analysis{overflow:auto;min-width:0}nav{display:flex;flex-wrap:wrap;background:#22242c;border-bottom:1px solid #3c4250}nav button{border:0;border-radius:0;padding:10px 12px;background:transparent;color:#b7bec9}nav button.active{background:#1e1f26;color:white;border-bottom:2px solid #4fc3f7}#empty{padding:45px 25px}.drop{border:2px dashed #3c4250;border-radius:12px;padding:55px 20px;text-align:center;color:#8a919c}.drop b{font-size:20px;color:#b7bec9}.drop p{margin:20px}.migration{color:#8a919c;line-height:2;text-align:center;margin:30px 0}aside{display:flex;flex-direction:column;border-left:4px solid #2b2e38;min-height:0}aside h2{font-size:12px;background:#252730;padding:8px;margin:0}.map-tools{display:flex;align-items:center;gap:8px;padding:5px}.map-tools span{font-size:10px;color:#8a919c}.map-tools select{min-width:0;flex:1}iframe{width:100%;border:0;flex:1;background:#172230;min-height:260px}.playback{display:flex;align-items:center;gap:7px;padding:8px}.playback input{min-width:30px;flex:1}.playback output{white-space:nowrap}.map-note{font-size:10px;color:#8a919c;line-height:1.6;padding:0 10px}footer{display:flex;justify-content:space-between;background:#22242c;padding:7px;color:#9fd3ff;position:fixed;bottom:0;width:100%;height:27px}#content{padding:14px}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.metric{background:#252730;border:1px solid #3c4250;padding:20px}.metric b{display:block;color:#4fc3f7;font-size:23px;margin-bottom:8px}.selectors{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}.selectors select{max-width:300px}.plot{background:#1a1b21;border:1px solid #3c4250;margin:12px 0;padding:12px}.plot h3{font-size:12px;margin:0 0 6px;color:#9fd3ff}.plot canvas{width:100%;height:220px;display:block;touch-action:none}.plot p{color:#8a919c;font-size:10px}table{width:100%;border-collapse:collapse}td,th{padding:8px;border-bottom:1px solid #3c4250;text-align:left;overflow-wrap:anywhere}th{background:#2b2e38;position:sticky;top:0}tr:nth-child(even){background:#252730}.help{color:#b7bec9;line-height:1.9;padding:20px;background:#252730}.warning{color:#ffd594;line-height:1.8}button:focus-visible,a:focus-visible{outline:2px solid #4fc3f7}@media(max-width:900px){.workspace{display:block;height:auto}.analysis{min-height:500px}aside{height:650px}.toolbar label{margin-left:0}header span{display:none}.summary{grid-template-columns:1fr 1fr}footer{position:sticky}.selectors select{max-width:100%}}
[hidden]{display:none!important}
@media(max-width:720px){header{height:auto;min-height:50px;padding:10px 12px;gap:12px;flex-wrap:wrap}header strong{font-size:15px}header a{margin-left:0;font-size:12px;padding:8px 0}header a:first-of-type{margin-left:auto}.toolbar{gap:6px;padding:8px}.toolbar button,.toolbar select{min-height:42px}.toolbar label{font-size:11px}nav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain}nav button{white-space:nowrap;flex-shrink:0;min-height:44px}.workspace{height:auto}.analysis{min-height:360px}#empty{padding:22px 16px}.drop{padding:32px 14px}.drop b{font-size:17px}.drop p{line-height:1.8;margin:15px 0}.migration{font-size:11px}.map-tools select,.map-tools button{min-height:42px}.selectors select,.selectors button{min-height:44px;max-width:100%}.playback{gap:6px}.playback button,.playback select{min-height:44px}.playback input{min-height:44px}.summary{grid-template-columns:1fr 1fr}.metric{padding:14px}.metric b{font-size:20px}table{font-size:11px}td,th{padding:7px}footer{font-size:10px;height:auto;min-height:30px;gap:12px}#status{min-width:0;overflow-wrap:anywhere}}
.graph-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px}.graph-menu{display:flex;flex-direction:column;gap:5px;align-self:start;position:sticky;top:0}.graph-menu button{text-align:left;min-height:38px;white-space:normal}.graph-area{min-width:0}.plot-legend{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.plot-legend button{font-size:11px;background:transparent}.plot canvas{height:250px}@media(max-width:720px){.graph-layout{grid-template-columns:1fr}.graph-menu{position:static;flex-direction:row;overflow:auto}.graph-menu button{white-space:nowrap;flex-shrink:0;min-height:44px}}
.review-controls{display:flex;align-items:end;flex-wrap:wrap;gap:10px;padding:12px;background:#252730;border:1px solid #3c4250}.review-controls label{display:flex;flex-direction:column;gap:6px}.review-controls input{color:inherit;background:#1e1f26;border:1px solid #51596b;padding:8px;width:130px}.review-controls select{max-width:270px}.review-controls button{min-height:38px} .plot-legend{min-height:25px}@media(max-width:720px){.review-controls input{width:130px}.review-controls select{max-width:100%;min-height:44px}}
/* Explain PID analysis settings where the user chooses them. */
.pid-intro{padding:18px 20px;border:1px solid #425e74;border-radius:10px;background:#22323f;margin-bottom:14px;line-height:1.8}.pid-intro h2{font-size:19px;color:#a8dbff;margin:0 0 8px}.pid-intro p{margin:8px 0}.pid-intro p:last-child{color:#a8d9bf}
.pid-panel .review-controls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;border-radius:10px;align-items:start;padding:18px;margin-top:14px}.pid-panel .review-controls>label{grid-column:span 2;min-width:0;font-size:13px;line-height:1.7}.pid-panel .review-controls>label:nth-child(-n+2){grid-column:span 3}.pid-panel .review-controls>label:last-of-type{grid-column:1/-1}.pid-panel .review-controls input,.pid-panel .review-controls select{width:100%;max-width:100%;min-height:44px;font-size:14px;border:1px solid #61758a;outline-offset:2px}.pid-panel .review-controls>label:last-of-type input{max-width:200px}.pid-panel small{font-size:12px;line-height:1.8;color:#afbece}.pid-interval-help{grid-column:1/-1;margin:0;color:#afbece;line-height:1.8;font-size:12px}
.pid-run-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}.pid-run-actions button{min-height:46px;padding:10px 16px;font-size:13px}.pid-run-actions button:first-child{background:#315d7a;border-color:#6eb4e4}.pid-run-actions p{flex:1 0 100%;margin:0;line-height:1.8;color:#aebdce}.pid-run-actions .pid-change-state{padding:10px 12px;background:#26382e;color:#b8dbbe;border-radius:6px}.pid-run-actions .is-stale{background:#493b26;color:#ffe0a3}
.pid-reading,.pid-method{border:1px solid #465567;border-radius:8px;padding:12px 16px;margin:12px 0;line-height:1.9}.pid-reading summary,.pid-method summary{cursor:pointer;font-size:13px;color:#a8d5f5;min-height:28px}.pid-reading p{margin:12px 0;color:#c0cbd6}.pid-reading a{color:#a8d5f5}.pid-method .help{padding:10px;margin-bottom:0}.pid-result{min-width:0;overflow-x:auto}.pid-panel input:focus-visible,.pid-panel select:focus-visible,.pid-panel summary:focus-visible{outline:2px solid #4fc3f7;outline-offset:3px}
@media(max-width:720px){.pid-intro{padding:14px}.pid-intro h2{font-size:17px}.pid-panel .review-controls{display:flex;flex-direction:column;padding:14px;gap:16px}.pid-panel .review-controls>label{width:100%}.pid-panel .review-controls input,.pid-panel .review-controls select{font-size:16px;min-height:48px}.pid-panel .review-controls>label:last-of-type input{max-width:100%}.pid-run-actions button{flex:1 0 100%;min-height:48px}.pid-reading,.pid-method{padding:12px}.pid-reading summary,.pid-method summary{min-height:36px}}
.pid-guide-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.pid-guide-links a,.toolbar .pid-guide-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 14px;border:1px solid #719fb3;border-radius:7px;background:#2a4659;color:#c9edff;text-decoration:none;font-size:13px;line-height:1.6}.pid-guide-links a:last-child{background:transparent}.pid-guide-links a:focus-visible,.toolbar .pid-guide-link:focus-visible{outline:2px solid #4fc3f7;outline-offset:3px}@media(max-width:720px){.pid-guide-links a{flex:1 0 100%;min-height:48px;text-align:center}.toolbar .pid-guide-link{flex:1 0 100%;min-height:44px}}

.plot canvas{cursor:grab}.plot canvas.panning{cursor:grabbing}
/* Five navigation groups; only the current group's pages are shown. */
#tabs{display:block;overflow:visible;background:#202630;border-bottom:1px solid #435365}
#tabs .viewer-main-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-bottom:1px solid #3b4a5b}
#tabs .viewer-main-tabs button{min-height:48px;padding:10px 8px;white-space:normal;overflow-wrap:anywhere;color:#a8bbcf;border-bottom:3px solid transparent;font-size:13px;line-height:1.5;background:transparent}
#tabs .viewer-main-tabs button.active{color:#c4e9ff;background:#2a3d50;border-bottom-color:#6fc4f2;font-weight:700}
#tabs .viewer-sub-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;background:#1b222c}
#tabs .viewer-sub-tabs button{min-height:42px;padding:8px 14px;border:1px solid transparent;border-radius:7px;background:transparent;color:#9eafc1;white-space:normal;line-height:1.5}
#tabs .viewer-sub-tabs button.active{border-color:#62869d;background:#2b3b4b;color:#d7efff}
#tabs button:focus-visible{outline:2px solid #83d0fa;outline-offset:-4px}
@media(max-width:720px){#tabs .viewer-main-tabs button{font-size:12px;min-height:54px;padding:8px 3px}#tabs .viewer-sub-tabs{padding:8px;gap:6px}#tabs .viewer-sub-tabs button{min-height:46px;padding:8px 10px;font-size:12px;flex:1 1 35%}}
@media(max-width:720px){#tabs .viewer-sub-tabs{flex-wrap:nowrap}#tabs .viewer-sub-tabs button{flex:1 1 0;min-width:0;padding:8px 4px;overflow-wrap:anywhere}}

.vibration-result>section{border-top:1px solid #405267;padding:22px 0;margin-top:20px;scroll-margin-top:100px}.vibration-result>section>p{font-size:12px;line-height:1.8;color:#bdcbd9;overflow-wrap:anywhere}.vibration-jumps{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.vibration-jumps button{font-size:11px;padding:8px}.vibration-colorbar{display:flex;align-items:center;gap:12px;padding:6px 10px;color:#c4d3e1;font-size:12px}.vibration-colorbar i{display:block;flex:1;height:14px;background:linear-gradient(90deg,#440154,#414487,#2a788e,#22a884,#7ad151,#fde725);border:1px solid #708096}.vibration-inspect{display:block;color:#80ddcd;font-size:12px;padding:8px 0}.vibration-notes,.vibration-missing{padding:14px;border:1px solid #43566b;border-radius:8px;font-size:12px;line-height:1.9;margin-top:20px}.vibration-missing p{overflow-wrap:anywhere}.vibration-panel .review-controls{flex-wrap:wrap;gap:12px}.vibration-panel .review-controls label{min-width:130px}.vibration-panel .review-controls select{max-width:250px}.vibration-panel .review-controls button{min-height:42px}@media(max-width:720px){.vibration-colorbar{gap:7px;font-size:10px}.vibration-panel .review-controls label{flex:1 1 45%;min-width:0}.vibration-panel .review-controls select,.vibration-panel .review-controls input{width:100%;min-width:0;max-width:100%}.vibration-jumps button{min-height:40px}.vibration-panel .plot-legend{flex-wrap:wrap}}

#tabs .viewer-main-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.graph-layout{grid-template-columns:185px minmax(0,1fr);align-items:start}.graph-main{min-width:0}.graph-menu{display:flex;flex-direction:column;flex-wrap:nowrap;max-height:calc(100vh - 280px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border:1px solid #3c4e60;border-radius:8px;padding:8px;background:#1b222c}.graph-menu h3{margin:14px 4px 4px;color:#91b0c9;font-size:11px;border-top:1px solid #374758;padding-top:12px}.graph-menu h3:first-child{border:0;margin-top:0;padding-top:4px}.graph-menu button{width:100%;text-align:left;white-space:normal;line-height:1.5;padding:9px 8px;flex-shrink:0;border-radius:5px;border-left:3px solid transparent;background:transparent}.graph-menu button.active{background:#29425a;border-left-color:#7ed0ff}.graph-menu button:focus-visible{outline:2px solid #83d0fa;outline-offset:-2px}.graph-area>h2{font-size:17px;margin:18px 0}.graph-main .pid-panel,.graph-main .vibration-panel{min-width:0}
.graph-event-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border:1px solid #42566c;background:#202d3b;border-radius:7px;padding:10px}.graph-event-controls label{display:flex;gap:5px;align-items:center;font-size:12px}.graph-event-controls input[type=search]{width:200px;min-width:0;flex:1 1 150px}.graph-event-controls select{min-width:110px}.graph-event-key{display:flex;flex-wrap:wrap;gap:8px 15px;width:100%;font-size:11px;color:#bfcede}.graph-event-key span:before{content:'';display:inline-block;width:9px;height:9px;margin-right:5px;background:var(--event-color);border-radius:2px}
.graph-event-timeline{margin:18px 0;border:1px solid #42566c;border-radius:7px;background:#19222d;padding:12px;min-width:0}.graph-event-timeline h3{font-size:14px;color:#b8ddf5;margin:0 0 7px}.graph-event-timeline>p{font-size:11px;line-height:1.7;color:#aabdd0;margin:7px 0 12px}.graph-event-list{display:grid;gap:5px;max-height:300px;overflow:auto;overscroll-behavior:contain}.graph-event-row{display:grid;grid-template-columns:76px 54px minmax(0,1fr);gap:8px;width:100%;text-align:left;align-items:start;font-size:12px;line-height:1.65;background:#202c3a;border:1px solid transparent;border-left:3px solid var(--event-color);padding:8px}.graph-event-row time{white-space:nowrap;color:var(--event-color);font-variant-numeric:tabular-nums}.graph-event-row .event-severity{color:var(--event-color);font-size:11px}.graph-event-row>span:last-child{overflow-wrap:anywhere;white-space:pre-wrap}.graph-event-row[aria-pressed=true]{border-color:var(--event-color);background:#2c4054}.graph-event-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px}.graph-event-pager span{font-size:11px;color:#b4c7dc}
@media(max-width:900px){.graph-menu{max-height:65vh}}@media(max-width:720px){.graph-layout{grid-template-columns:1fr}.graph-menu{position:static;display:flex;flex-direction:row;flex-wrap:wrap;max-height:190px;gap:5px;overflow:auto;padding:8px}.graph-menu h3{flex:1 0 100%;margin:6px 0 2px;padding:6px 0 0}.graph-menu button{width:auto;max-width:100%;min-height:40px;white-space:normal;flex:0 1 auto;font-size:11px;padding:7px 8px}.graph-event-controls{padding:9px;gap:9px}.graph-event-controls label{font-size:11px}.graph-event-controls select{max-width:100%}.graph-event-row{grid-template-columns:70px minmax(0,1fr);gap:3px 8px;font-size:11px}.graph-event-row>span:last-child{grid-column:1 / -1}.graph-event-row .event-severity{justify-self:start}.graph-event-timeline{padding:10px}.graph-event-list{max-height:280px}}

.plot .graph-context-note{color:#bfd0df;font-size:12px;line-height:1.8;padding:9px 11px;background:#253141;border-left:3px solid #6d9ab9;border-radius:3px;overflow-wrap:anywhere}

.graph-guide{border-top:1px solid #3b4d60;margin-top:14px;padding-top:8px;font-size:12px;line-height:1.8}.graph-guide>p{color:#d0dfec;font-size:12px}.graph-guide summary{color:#a4d9f9;cursor:pointer;padding:9px 0;font-size:12px}.graph-guide dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px}.graph-guide dt{font-weight:bold;color:#a4c8df}.graph-guide dd{margin:0;overflow-wrap:anywhere;color:#c8d9e6}.graph-criteria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.graph-criteria>div{background:#202c38;border:1px solid #3f566b;border-top:3px solid #69c19d;border-radius:5px;padding:9px}.graph-criteria>[data-level=normal]{border-top-color:#e7ba6b}.graph-criteria>[data-level=bad]{border-top-color:#ec8a97}.graph-criteria h4{font-size:12px;margin:0;color:#d6e5ee}.graph-criteria p,.graph-guide details>p{color:#c2d3e1;font-size:12px;overflow-wrap:anywhere}.graph-guide .graph-guide-scope{color:#a9c1d4;font-size:11px}.graph-guide a,.recording-profiles a{color:#a2d4f6}.graph-guide details>button{margin:12px 0}.graph-evidence-row{border-left:3px solid #7796af;background:#202c39;padding:8px 10px;margin:7px 0}.graph-evidence-row strong,.graph-evidence-row span{display:block}.graph-evidence-row span{color:#b4c9db}.graph-evidence-row[data-state=good]{border-color:#69c19d}.graph-evidence-row[data-state=caution]{border-color:#e7ba6b}.graph-evidence-row[data-state=bad]{border-color:#ec8a97}.graph-evidence-row p{font-size:11px;color:#b8cbdc}.log-inventory,.recording-profiles{padding:12px;margin:12px 0;background:#202c39;border:1px solid #41586e;border-radius:7px;font-size:12px;line-height:1.8}.log-inventory>summary,.recording-profiles>summary{cursor:pointer;color:#b8e2fb}.log-inventory table{table-layout:fixed;width:100%;font-size:11px}.log-inventory td,.graph-admin-dialog td{overflow-wrap:anywhere}.inventory-pager{display:flex;justify-content:space-between;padding-top:10px}.log-inventory .selectors{margin:14px 0}.log-inventory input[type=search]{width:250px;max-width:100%}.recording-profiles table{table-layout:fixed}.recording-profiles th:first-child{width:40px}.graph-admin-dialog{background:#1d2733;color:#d7e5f0;border:1px solid #5a7996;border-radius:10px;width:min(1100px,96vw);max-height:90vh;overflow:auto;font-size:12px;line-height:1.8}.graph-admin-dialog::backdrop{background:#0009}.graph-admin-dialog>button{margin:0 8px 12px 0}.graph-admin-dialog input{max-width:100%;margin:8px}.graph-admin-dialog table{table-layout:fixed}.graph-admin-dialog section{margin-top:18px}.graph-admin-dialog [data-recording=missing] td:nth-child(3){color:#f0bb7d}
@media(max-width:720px){.graph-criteria{grid-template-columns:1fr}.graph-guide dl{grid-template-columns:1fr;gap:2px}.graph-guide dd{margin-bottom:9px}.log-inventory{padding:8px}.log-inventory table{font-size:10px}.log-inventory td,.log-inventory th{padding:6px 4px}.log-inventory .selectors>*{max-width:100%;min-width:0}.log-inventory button,.graph-guide button{min-height:40px;white-space:normal}.graph-admin-dialog{padding:10px}.graph-admin-dialog td,.graph-admin-dialog th{padding:6px 3px;font-size:10px}.graph-admin-dialog button{white-space:normal}.recording-profiles th:first-child{width:28px}}