:root{--ink-deep: #0a0a0f;--ink-raised: #13131c;--ink-overlay: #1c1c28;--border-quiet: #2e2e40;--border-focus: #4e4e6e;--text-bright: #ededf4;--text-body: #d0d0de;--text-muted: #808092;--indigo: #7c6cf0;--indigo-dim: #5a4ec0;--indigo-line: rgba(124, 108, 240, .25);--indigo-soft: rgba(124, 108, 240, .1);--signal-success: #4ade80;--signal-warning: #fbbf24;--signal-error: #f87171;--sans: "Inter", system-ui, -apple-system, sans-serif;--mono: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, monospace;--ds-spacing-xs: 4px;--ds-spacing-sm: 8px;--ds-spacing-md: 12px;--ds-spacing-lg: 16px;--ds-spacing-xl: 24px;--ds-spacing-2xl: 32px;--radius-sm: 4px;--radius-md: 6px}[data-theme=light]{--ink-deep: #f5f5f7;--ink-raised: #ffffff;--ink-overlay: #eaeaef;--border-quiet: #d0d0da;--border-focus: #a4a4b8;--text-bright: #0a0a12;--text-body: #2a2a35;--text-muted: #6a6a7a;--indigo: #6c5ce7;--indigo-dim: #4d40b0;--indigo-line: rgba(108, 92, 231, .3);--indigo-soft: rgba(108, 92, 231, .1)}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}*{box-sizing:border-box}html,body,#root{height:100%}html,body{margin:0;padding:0}body{background:var(--ink-deep);color:var(--text-body);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}a{color:var(--indigo);text-decoration:none}a:hover{color:var(--indigo-dim)}.boot{font-family:var(--mono);color:var(--text-muted);padding:40px;font-size:13px}.workspace-bar{height:40px;background:var(--ink-raised);border-bottom:1px solid var(--border-quiet);display:flex;align-items:center;padding:0 var(--ds-spacing-lg);gap:var(--ds-spacing-md);font-family:var(--mono);font-size:13px}.workspace-bar .brand{font-family:var(--mono);font-weight:600;color:var(--indigo)}.workspace-bar .name{color:var(--text-muted);font-family:var(--sans);font-weight:500}.workspace-bar .spacer{flex:1}.workspace-bar .me{color:var(--text-bright);font-size:12px}.app{display:grid;grid-template-columns:60px 1fr;grid-template-rows:40px 1fr;grid-template-areas:"topbar topbar" "rail   main";height:100vh}.app>.workspace-bar{grid-area:topbar}.app>.nav-rail{grid-area:rail}.app>main{grid-area:main;overflow-y:auto}.nav-rail{background:var(--ink-raised);border-right:1px solid var(--border-quiet);display:flex;flex-direction:column;padding:var(--ds-spacing-md) 0;gap:4px}.nav-rail .item{display:block;padding:var(--ds-spacing-sm) 0;font-family:var(--mono);font-size:11px;color:var(--text-muted);text-align:center;cursor:pointer;border-left:2px solid transparent;text-decoration:none}.nav-rail .item:hover{color:var(--text-bright)}.nav-rail .item.active{color:var(--indigo);background:var(--indigo-soft);border-left-color:var(--indigo)}main{padding:var(--ds-spacing-2xl) var(--ds-spacing-2xl);max-width:100%}.title{font-size:16px;font-weight:500;color:var(--text-bright);margin:0 0 var(--ds-spacing-lg)}.block{margin:0 0 var(--ds-spacing-2xl)}.block-header{display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:13px;color:var(--text-muted);border-bottom:1px solid var(--border-quiet);padding-bottom:var(--ds-spacing-sm);margin-bottom:var(--ds-spacing-md)}.block-header .label:before{content:"─── "}input[type=text],input[type=email],input[type=password],input[type=url],textarea,select{width:100%;padding:10px 12px;background:var(--ink-overlay);border:1px solid var(--border-quiet);border-radius:var(--radius-md);color:var(--text-bright);font:inherit;font-family:var(--mono);font-size:14px}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--border-focus)}textarea{resize:vertical;min-height:80px}label.field{display:block;margin-bottom:var(--ds-spacing-md)}label.field>span{display:block;font-family:var(--mono);font-size:11px;color:var(--text-muted);margin-bottom:var(--ds-spacing-xs)}button{padding:10px 18px;font-family:var(--mono);font-size:13px;font-weight:500;border-radius:var(--radius-md);cursor:pointer;border:1px solid transparent;transition:background .15s ease}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--indigo);color:var(--text-bright);border-color:var(--indigo)}button.primary:hover:not(:disabled){background:var(--indigo-dim)}button.ghost{background:transparent;color:var(--text-bright);border-color:var(--border-quiet)}button.ghost:hover:not(:disabled){background:var(--ink-overlay)}button.ghost-indigo{background:transparent;color:var(--indigo);border-color:var(--indigo-line)}button.danger{background:transparent;color:var(--signal-error);border-color:#f871714d}table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px}table th{font-family:var(--mono);font-size:11px;color:var(--text-muted);text-align:left;padding:var(--ds-spacing-sm) var(--ds-spacing-md);border-bottom:1px solid var(--border-quiet);font-weight:400}table td{padding:var(--ds-spacing-md);border-bottom:1px solid var(--border-quiet);color:var(--text-bright)}table tbody tr:hover{background:var(--ink-overlay)}table .muted{color:var(--text-muted)}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;vertical-align:middle}.dot-success{background:var(--signal-success)}.dot-warning{background:var(--signal-warning)}.dot-error{background:var(--signal-error)}.dot-muted{background:var(--text-muted)}.login{min-height:100vh;display:grid;place-items:center;background:var(--ink-deep)}.login-card{width:100%;max-width:400px;padding:var(--ds-spacing-2xl)}.login-card h1{font-family:var(--mono);font-size:24px;font-weight:600;color:var(--indigo);margin:0 0 var(--ds-spacing-xs)}.login-card .subtitle{font-family:var(--mono);font-size:12px;color:var(--text-muted);margin:0 0 var(--ds-spacing-2xl)}.login-card .row{display:flex;gap:var(--ds-spacing-sm)}.login-card .row>input{flex:1}.login-card .dev-bypass{margin-top:var(--ds-spacing-2xl);padding-top:var(--ds-spacing-lg);border-top:1px dashed var(--border-quiet);font-family:var(--mono);font-size:11px;color:var(--text-muted)}.login-card .status{margin-top:var(--ds-spacing-md);font-family:var(--mono);font-size:11px;color:var(--text-muted)}.login-card .status.ok{color:var(--signal-success)}.login-card .status.err{color:var(--signal-error)}.muted{color:var(--text-muted)}.mono{font-family:var(--mono)}.row{display:flex;gap:var(--ds-spacing-sm);align-items:center}.col{display:flex;flex-direction:column;gap:var(--ds-spacing-md)}.toolbar{display:flex;gap:var(--ds-spacing-sm);margin-bottom:var(--ds-spacing-lg)}.empty{font-family:var(--mono);font-size:13px;color:var(--text-muted);padding:var(--ds-spacing-2xl) 0;text-align:center}.callout{background:var(--indigo-soft);border:1px solid var(--indigo-line);padding:var(--ds-spacing-md) var(--ds-spacing-lg);border-radius:var(--radius-md);margin:var(--ds-spacing-md) 0;font-size:13px}.callout.warn{background:#fbbf2414;border-color:#fbbf244d;color:var(--signal-warning)}.kbd{font-family:var(--mono);font-size:11px;padding:2px 6px;border-radius:3px;background:var(--ink-overlay);border:1px solid var(--border-quiet)}html,body,#root{height:auto;min-height:100%}.app{display:block;height:auto;min-height:100vh}.app>.workspace-bar{position:sticky;top:0;z-index:10}.app>main{overflow:visible}.workspace-bar .nav{display:flex;gap:var(--ds-spacing-md);font-family:var(--mono);font-size:12px}.workspace-bar .nav a{color:var(--text-muted);padding:4px 8px;border-radius:var(--radius-sm)}.workspace-bar .nav a:hover{color:var(--text-bright);background:var(--ink-overlay)}.workspace-bar .nav a.active{color:var(--indigo);background:var(--indigo-soft)}main{max-width:920px;margin:0 auto}.album-meta{display:flex;gap:var(--ds-spacing-xl);margin-bottom:var(--ds-spacing-xl);align-items:baseline}.album-meta .title-album{font-family:var(--sans);font-size:22px;color:var(--text-bright);margin:0}.album-meta .artists{color:var(--text-muted);font-size:14px}.album-meta .release{color:var(--text-muted);font-family:var(--mono);font-size:11px}.tracklist{width:100%;border-collapse:collapse}.tracklist th,.tracklist td{padding:10px 12px;border-bottom:1px solid var(--border-quiet);font-family:var(--mono);font-size:13px;text-align:left}.tracklist th{font-size:11px;color:var(--text-muted);font-weight:400}.tracklist td.title{color:var(--text-bright);font-family:var(--sans)}.tracklist td.num{color:var(--text-muted);width:40px;text-align:right}.tracklist td.dur{color:var(--text-muted);width:60px;text-align:right}.tracklist td.action{width:80px;text-align:right}.tracklist tr.playing td{background:var(--indigo-soft)}.tracklist tr:hover{background:var(--ink-overlay)}.tracklist .play-btn{background:transparent;color:var(--indigo);border:1px solid var(--indigo-line);padding:4px 10px;font-size:11px}.tracklist .play-btn:hover{background:var(--indigo-soft)}.player-bar{position:fixed;left:0;right:0;bottom:0;background:var(--ink-raised);border-top:1px solid var(--border-quiet);padding:var(--ds-spacing-md) var(--ds-spacing-lg);display:flex;align-items:center;gap:var(--ds-spacing-lg);z-index:20;min-height:80px}.player-bar.empty .now-playing{color:var(--text-muted);font-style:italic}.player-bar .cover{width:56px;height:56px;border-radius:var(--radius-sm);background:var(--ink-deep);border:1px solid var(--border-quiet);flex-shrink:0;background-size:cover;background-position:center}.player-bar .now-playing{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.player-bar .np-title{font-family:var(--sans);font-size:14px;color:var(--text-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-bar .np-meta{font-family:var(--mono);font-size:11px;color:var(--text-muted)}.player-bar .np-status{font-family:var(--mono);font-size:11px;color:var(--signal-success)}.player-bar .np-status.err{color:var(--signal-error)}.player-bar audio{width:360px;flex-shrink:0}.has-player main{padding-bottom:120px}.steps{display:flex;flex-direction:column;gap:var(--ds-spacing-md);margin-bottom:var(--ds-spacing-xl)}.step{background:var(--ink-raised);border:1px solid var(--border-quiet);border-radius:var(--radius-md);padding:var(--ds-spacing-lg);position:relative}.step.active{border-color:var(--indigo);background:var(--indigo-soft)}.step.done{border-color:var(--signal-success)}.step-num{font-family:var(--mono);font-size:11px;color:var(--indigo);margin-bottom:4px}.step h3{margin:0 0 var(--ds-spacing-xs);font-size:14px;color:var(--text-bright)}.step p{margin:0 0 var(--ds-spacing-md);color:var(--text-body);font-size:13px}.step pre{background:var(--ink-deep);border:1px solid var(--border-quiet);border-radius:var(--radius-sm);padding:var(--ds-spacing-md);font-family:var(--mono);font-size:11px;color:var(--text-body);overflow-x:auto;margin:0;white-space:pre-wrap;word-break:break-all}.step .out{margin-top:var(--ds-spacing-md);font-family:var(--mono);font-size:11px;color:var(--signal-success);white-space:pre-wrap;word-break:break-all}.step .out.err{color:var(--signal-error)}.step .meta-line{font-family:var(--mono);font-size:11px;color:var(--text-muted);margin-top:var(--ds-spacing-xs)}.seq-diagram{background:var(--ink-raised);border:1px solid var(--border-quiet);border-radius:var(--radius-md);padding:var(--ds-spacing-lg);margin-bottom:var(--ds-spacing-xl)}.seq-controls{display:flex;align-items:center;gap:var(--ds-spacing-md);padding-bottom:var(--ds-spacing-md);border-bottom:1px solid var(--border-quiet);margin-bottom:var(--ds-spacing-md)}.seq-controls .play-pause{background:var(--indigo);color:var(--text-bright);border:1px solid var(--indigo);padding:6px 14px;font-family:var(--mono);font-size:12px;border-radius:var(--radius-sm);cursor:pointer;width:76px;text-align:center}.seq-controls .play-pause.paused{background:transparent;color:var(--indigo)}.seq-controls .step-badge{font-family:var(--mono);font-size:11px;color:var(--indigo);background:var(--indigo-soft);border:1px solid var(--indigo-line);padding:4px 10px;border-radius:var(--radius-sm);white-space:nowrap}.seq-controls .step-title{font-family:var(--sans);font-size:13px;color:var(--text-bright);flex:1}.seq-controls .progress-track{width:120px;height:4px;background:var(--border-quiet);border-radius:2px;overflow:hidden;flex-shrink:0}.seq-controls .progress-fill{height:100%;background:var(--indigo);width:0%;transition:width .1s linear}.seq-diagram svg{width:100%;height:auto;display:block;font-family:var(--mono)}.seq-diagram .actor-box{fill:var(--ink-overlay);stroke:var(--border-quiet)}.seq-diagram .actor-box.partner{stroke:var(--indigo)}.seq-diagram .actor-label{fill:var(--text-bright);font-size:11px;font-weight:500}.seq-diagram .actor-sub{fill:var(--text-muted);font-size:9px}.seq-diagram .lifeline{stroke:var(--border-quiet);stroke-dasharray:3 3;stroke-width:1}.seq-diagram .msg{opacity:0;transition:opacity .2s ease}.seq-diagram .msg.active,.seq-diagram .msg.done{opacity:1}.seq-diagram .msg-line{fill:none;stroke:var(--text-muted);stroke-width:1.5;stroke-dasharray:800;stroke-dashoffset:800;transition:stroke-dashoffset .5s ease}.seq-diagram .msg.active .msg-line,.seq-diagram .msg.done .msg-line{stroke-dashoffset:0}.seq-diagram .msg.active .msg-line{stroke:var(--indigo)}.seq-diagram .msg.active .msg-label{fill:var(--indigo)}.seq-diagram .msg.done .msg-line{stroke:var(--signal-success)}.seq-diagram .msg.done .msg-label{fill:var(--text-body)}.seq-diagram .msg-label{fill:var(--text-muted);font-size:10px;font-family:var(--mono);text-anchor:middle}.seq-diagram .msg-arrow{fill:var(--text-muted);transition:fill .2s ease}.seq-diagram .msg.active .msg-arrow{fill:var(--indigo)}.seq-diagram .msg.done .msg-arrow{fill:var(--signal-success)}.seq-diagram .step-band{fill:var(--indigo-soft);opacity:0;transition:opacity .2s ease}.seq-diagram .step-band.active{opacity:1}@keyframes seqPulse{0%{stroke-width:1.5}50%{stroke-width:3}to{stroke-width:1.5}}.seq-diagram .msg.active .msg-line{animation:seqPulse 1s ease-in-out infinite}.seq-diagram .msg.done .msg-line{animation:none}