:root{--bg-primary:#323437;--bg-secondary:#2c2e31;--text-primary:#d1d0c5;--text-secondary:#646669;--accent:#e2b714;--error:#ca4754;--correct:#4ca754;--success:#4ca754}
[x-cloak]{display:none!important}
body{margin:0;padding:0;font-family:'Monaco','Consolas',monospace;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;display:flex;flex-direction:column;transition:all .3s}
body.light-mode{--bg-primary:#fff;--bg-secondary:#f5f5f5;--text-primary:#323437;--text-secondary:#999;--accent:#d4a017;--error:#dc3545;--correct:#28a745;--success:#28a745}
.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:var(--bg-secondary)}
.controls{display:flex;gap:1rem;align-items:center}
.header-title{text-align:center;flex:1}
.header-title h1{color:var(--accent);font-size:1.8rem;margin:0;font-weight:700}
.header-title p{color:var(--text-secondary);font-size:.9rem;margin:0;margin-top:.25rem}
.icon-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:.25rem;transition:all .2s;font-size:1.2rem}
.icon-btn:hover{color:var(--text-primary);background:rgba(255,255,255,.1)}
.main-container{flex:1;display:flex;flex-direction:column;align-items:center;padding:2rem;max-width:1200px;margin:0 auto;width:100%}
.session-controls{display:flex;gap:1rem;margin-bottom:2rem;align-items:center;flex-wrap:wrap;justify-content:center}
.control-btn{background:var(--bg-secondary);border:2px solid var(--text-secondary);color:var(--text-primary);padding:.75rem 1.5rem;font-size:1rem;font-family:inherit;border-radius:.5rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.5rem}
.control-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.control-btn:disabled{opacity:.5;cursor:not-allowed}
.pause-settings{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.pause-settings label{color:var(--text-secondary)}
.pause-settings select{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--text-secondary);border-radius:.25rem;padding:.25rem .5rem;font-family:inherit;font-size:.9rem}
.input-section{width:100%;max-width:800px;margin-bottom:2rem}
.text-input{width:100%;min-height:200px;background:var(--bg-secondary);border:2px solid var(--text-secondary);border-radius:.5rem;padding:1rem;font-family:inherit;font-size:1rem;color:var(--text-primary);resize:vertical;transition:border-color .2s}
.text-input:focus{outline:none;border-color:var(--accent)}
.text-input::placeholder{color:var(--text-secondary)}
.metrics-panel{width:100%;margin-bottom:3rem}
.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;max-width:1000px;margin:0 auto}
.metric-tile{background:var(--bg-secondary);padding:1.5rem;border-radius:.75rem;text-align:center;transition:all .2s;cursor:help;border:2px solid transparent;position:relative}
.metric-tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.metric-tile.highlighted{border-color:var(--accent);box-shadow:0 0 10px rgba(226,183,20,.3);background:linear-gradient(135deg,var(--bg-secondary),rgba(226,183,20,.08))}
.metric-tile.highlighted:hover{box-shadow:0 0 15px rgba(226,183,20,.5);transform:translateY(-3px)}
.metric-value{font-size:2rem;font-weight:700;color:var(--accent);margin-bottom:.5rem}
.metric-label{color:var(--text-secondary);font-size:.9rem}
.pause-indicator{position:absolute;top:.5rem;right:.5rem;font-size:1rem;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.digraph-section{width:100%;max-width:800px;margin-bottom:2rem}
.digraph-panel{background:var(--bg-secondary);border-radius:.75rem;padding:1.5rem}
.panel-title{color:var(--accent);font-size:1.3rem;margin:0 0 1rem 0;text-align:center}
.digraph-table{display:flex;flex-direction:column;gap:.5rem}
.table-header{display:grid;grid-template-columns:1fr 1fr 2fr;gap:.5rem;padding:.75rem;background:var(--bg-primary);border-radius:.5rem;font-weight:700;color:var(--accent)}
.table-row{display:grid;grid-template-columns:1fr 1fr 2fr;gap:.5rem;padding:.5rem;border-radius:.25rem;transition:background .2s}
.table-row:hover{background:rgba(255,255,255,.05)}
.header-cell,.table-cell{text-align:center;font-size:.9rem}
.header-cell.sortable{cursor:pointer;transition:color .2s;user-select:none}
.header-cell.sortable:hover{color:var(--text-primary)}
.header-cell.sortable.sorted{color:var(--text-primary)}
.sort-arrow{font-size:.8rem;margin-left:.3rem;opacity:.6}
.header-cell.sortable.sorted .sort-arrow{opacity:1}
.header-cell.sortable.sorted.desc .sort-arrow:after{content:'↓'}
.header-cell.sortable.sorted:not(.desc) .sort-arrow:after{content:'↑'}
.header-cell.sortable .sort-arrow{color:var(--text-secondary)}
.header-cell.sortable.sorted .sort-arrow{color:var(--accent)}
.timing-notice{background:var(--error);color:#fff;padding:.75rem 1rem;border-radius:.5rem;font-size:.9rem;text-align:center;margin-top:1rem}
.status-indicator{text-align:center;margin-top:1rem;font-size:.9rem}
.status-active{color:var(--success);font-weight:600}
.status-paused{color:var(--text-secondary);font-weight:600}
.tooltip{position:absolute;background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--accent);border-radius:.4rem;padding:.75rem 1rem;font-size:.9rem;box-shadow:0 2px 8px rgba(0,0,0,.15);pointer-events:none;max-width:300px;white-space:pre-line;z-index:1000;transition:opacity .15s}
body.light-mode .tooltip{background:#fffbe6;color:#323437;border-color:#d4a017}
body.light-mode .metric-tile.highlighted{box-shadow:0 0 10px rgba(212,160,23,.3);background:linear-gradient(135deg,var(--bg-secondary),rgba(212,160,23,.08))}
body.light-mode .metric-tile.highlighted:hover{box-shadow:0 0 15px rgba(212,160,23,.5)}
.version{position:fixed;bottom:1rem;right:1rem;color:var(--text-secondary);font-size:.8rem}
@media (max-width:768px){.metrics-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem}.metric-tile{padding:1rem}.metric-value{font-size:1.5rem}.session-controls{flex-direction:column;align-items:center}.control-btn{width:100%;max-width:200px;justify-content:center}}
@media (max-width:480px){.main-container{padding:1rem}.title{font-size:2rem}.subtitle{font-size:1rem}.metrics-grid{grid-template-columns:repeat(2,1fr)}.metric-value{font-size:1.3rem}.digraph-panel{padding:1rem}}