.graph-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;margin:20px 0 30px}.graph-workspace>*{min-width:0;margin:0!important}.graph-history{background:var(--surface,#1a1d27);border:1px solid var(--border,#2e3248);border-radius:12px;padding:16px}.graph-history-title{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#8b90b8);margin-bottom:10px}.graph-current .log-box{margin:0 0 14px!important}.graph-history-wrap{max-height:600px;overflow:auto;border:1px solid var(--border,#2e3248);border-radius:9px}.graph-step-table{width:100%;border-collapse:collapse;font-family:var(--mono,'Fira Code',Consolas,monospace);font-size:11px}.graph-step-table th{position:sticky;top:0;z-index:1;background:var(--surface2,#22263a);color:var(--accent,#8ea2ff);text-align:left;text-transform:uppercase;letter-spacing:.06em}.graph-step-table th,.graph-step-table td{padding:9px 10px;border-bottom:1px solid var(--border,#2e3248);vertical-align:top}.graph-step-table td{color:var(--muted,#aeb4d6)}.graph-step-table td:first-child,.graph-step-table td:nth-child(4){color:var(--green,#68bd88);font-weight:700}.graph-step-table td:last-child{min-width:230px;color:var(--text,#e8eaf6);line-height:1.45}.graph-step-table tr.active td{background:var(--accent-bg,#1a2140);color:#fff}.graph-step-table tr:last-child td{border-bottom:0}
.graph-presets{background:var(--surface,#1a1d27);border:1px solid var(--border,#2e3248);border-radius:12px;padding:15px;margin:18px 0}.graph-presets-title{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#8b90b8);margin-bottom:9px}.graph-presets-row{display:flex;gap:7px;flex-wrap:wrap}.graph-preset{appearance:none;background:var(--surface2,#22263a);color:var(--text,#e8eaf6);border:1px solid var(--border2,#3d4266);border-radius:999px;padding:7px 11px;font-size:11px;cursor:pointer}.graph-preset:hover{border-color:var(--accent,#7784c8);transform:translateY(-1px)}
@media(max-width:980px){.graph-workspace{grid-template-columns:1fr}}
.wrap{max-width:1300px!important;padding:26px 28px!important}.wrap>header{padding:24px 0 26px!important}.wrap>header h1{font-size:clamp(30px,4vw,44px)!important;line-height:1.15!important}.wrap>header .subtitle{font-size:17px!important;max-width:900px!important}.wrap>section{margin-top:28px!important}.practice{margin-top:0!important}.concept-grid{gap:18px!important}.concept-card{padding:20px!important}.panel{padding:20px!important}.stage svg{max-height:390px!important}.graph-workspace .panel{position:static!important}
.graph-custom,.graph-notes{background:var(--surface,#1a1d27);border:1px solid var(--border,#2e3248);border-radius:12px;padding:16px;margin:20px 0}.graph-custom-row{display:flex;gap:8px}.graph-custom-row input,.graph-notes textarea{width:100%;background:var(--bg,#0f1117);color:var(--text,#e8eaf6);border:1px solid var(--border2,#3d4266);border-radius:8px;padding:11px;font-family:var(--mono,Consolas,monospace)}.graph-custom-row button,.graph-lang-tab,.graph-complete{background:var(--surface2,#22263a);color:var(--text,#e8eaf6);border:1px solid var(--border2,#3d4266);border-radius:8px;padding:9px 14px;cursor:pointer}.graph-custom-row button:hover,.graph-lang-tab:hover,.graph-complete:hover{border-color:var(--accent,#7784c8)}.graph-custom-status,.graph-note-meta{display:flex;justify-content:space-between;color:var(--muted,#8b90b8);font-size:11px;margin-top:8px}.graph-lang-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;background:var(--surface2,#22263a);border-bottom:1px solid var(--border,#2e3248)}.graph-lang-tab.active{background:var(--accent-bg,#1a2140);border-color:var(--accent,#7784c8);color:#a9b8ff}.graph-lang-panel{display:none}.graph-lang-panel.active{display:block}.graph-lang-panel pre{white-space:pre-wrap!important;overflow-wrap:anywhere!important;line-height:1.7!important;max-height:620px;overflow:auto}.graph-notes textarea{min-height:150px;resize:vertical}.graph-complete{width:100%;margin-top:12px;font-weight:700}.graph-complete.done{color:var(--green,#68bd88);border-color:var(--green,#68bd88)}
.graph-complete-widget{position:fixed;right:24px;bottom:24px;z-index:50;width:min(330px,calc(100vw - 32px));background:var(--surface,#171a24);border:1px solid var(--border,#2e3248);border-radius:16px;padding:15px;box-shadow:0 18px 48px rgba(0,0,0,.35)}.graph-complete-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}.graph-complete-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--green-bg,#0d2318);border:1px solid rgba(74,222,128,.35);font-size:18px}.graph-complete-copy{min-width:0}.graph-complete-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.graph-complete-state{font-size:11px;color:var(--muted,#8b90b8);margin-top:2px}.graph-complete-widget .graph-complete{margin-top:0}.graph-complete.done{color:var(--green,#68bd88);border-color:var(--green,#68bd88)}@media(max-width:700px){.graph-complete-widget{position:static;width:auto;margin:18px 16px}}