.flow-practice{--fp-bg:color-mix(in srgb, var(--text) 4%, var(--card));--fp-panel:color-mix(in srgb, var(--text) 8%, var(--card));--fp-border:var(--border);--fp-if:#f97316;--fp-elif:#a855f7;--fp-else:#22c55e;--fp-action:#3b82f6;--fp-start:#ef4444;--fp-loop:#eab308;--fp-process:#64748b;--fp-oclass:#6366f1;--fp-oobject:#0ea5e9;--fp-omethod:#8b5cf6;--fp-oattr:#14b8a6;border:1px solid var(--fp-border);background:var(--fp-bg);border-radius:14px;margin-top:.5rem;overflow:hidden}.flow-practice--oop{--fp-bg:color-mix(in srgb, var(--fp-oclass) 5%, var(--card))}.flow-practice--oop .flow-practice__header{background:linear-gradient(135deg, color-mix(in srgb, var(--fp-oclass) 14%, var(--fp-panel)) 0%, color-mix(in srgb, var(--fp-oobject) 10%, var(--fp-panel)) 55%, var(--fp-panel) 100%)}.flow-practice__header{border-bottom:1px solid var(--fp-border);background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--fp-panel)) 0%, var(--fp-panel) 100%);flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.85rem 1.25rem;padding:.95rem 1.1rem;display:flex}.flow-practice__walk{border-bottom:1px solid var(--fp-border);background:linear-gradient(90deg, color-mix(in srgb, var(--fp-omethod) 10%, var(--card)) 0%, var(--card) 100%);padding:.85rem 1.1rem}.flow-practice__walk-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.65rem;margin-bottom:.55rem;display:flex}.flow-practice__walk-step{letter-spacing:.06em;text-transform:uppercase;color:var(--fp-omethod);font-size:.72rem;font-weight:800}.flow-practice__walk-actions{flex-wrap:wrap;gap:.3rem;display:inline-flex}.flow-practice__walk-text{color:var(--text);max-width:72ch;margin:0;font-size:.92rem;line-height:1.5}.flow-practice__heading{flex-direction:column;flex:360px;gap:.45rem;min-width:0;display:flex}.flow-practice__title{color:var(--text);letter-spacing:-.005em;margin:0;font-size:1.08rem;font-weight:700}.flow-practice__tips{color:var(--muted);flex-wrap:wrap;gap:.35rem .55rem;margin:0;padding:0;font-size:.74rem;list-style:none;display:flex}.flow-practice__tips li{white-space:nowrap;align-items:center;gap:.32rem;display:inline-flex}.flow-practice__tips kbd{border:1px solid var(--fp-border);background:var(--card);color:var(--text);box-shadow:0 1px 0 0 var(--fp-border);letter-spacing:.02em;border-radius:5px;align-items:center;padding:.06rem .42rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:.68rem;font-weight:700;display:inline-flex}.flow-practice__focus{background:color-mix(in srgb, var(--accent) 12%, var(--card));border:1px solid color-mix(in srgb, var(--accent) 35%, var(--fp-border));max-width:100%;color:var(--text);border-radius:999px;align-items:center;gap:.45rem;min-width:0;margin:.1rem 0 0;padding:.32rem .65rem .32rem .42rem;font-size:.76rem;line-height:1.35;display:inline-flex}.flow-practice__focus-label{background:color-mix(in srgb, var(--accent) 28%, var(--card));letter-spacing:.08em;text-transform:uppercase;color:var(--text);border-radius:999px;flex:none;padding:.05rem .48rem;font-size:.62rem;font-weight:800}.flow-practice__focus-text{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--muted);font-weight:500;overflow:hidden}.flow-practice__toolbar{flex-wrap:wrap;flex:none;align-items:center;gap:.6rem;display:flex}.flow-practice__btn-group{background:color-mix(in srgb, var(--text) 4%, var(--card));border:1px solid var(--fp-border);border-radius:10px;flex-wrap:wrap;gap:.3rem;padding:.28rem;display:inline-flex}.flow-practice__btn{color:var(--text);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;align-items:center;gap:.35rem;padding:.36rem .62rem;font-size:.76rem;font-weight:600;transition:background .12s,border-color .12s,color .12s,transform .12s;display:inline-flex}.flow-practice__btn:hover{background:var(--card);border-color:var(--fp-border)}.flow-practice__btn:active{transform:translateY(.5px)}.flow-practice__btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.flow-practice__btn-icon{color:currentColor;opacity:.78;flex:none;width:14px;height:14px}.flow-practice__btn:hover .flow-practice__btn-icon{opacity:1}.flow-practice__btn--primary{background:var(--card);border-color:var(--fp-border)}.flow-practice__btn--primary[data-active=true]{background:color-mix(in srgb, var(--accent) 22%, var(--card));border-color:var(--accent);color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}.flow-practice__btn[data-active=true]:not(.flow-practice__btn--primary){background:color-mix(in srgb, var(--fp-omethod) 16%, var(--card));border-color:var(--fp-omethod);box-shadow:0 0 0 3px color-mix(in srgb, var(--fp-omethod) 14%, transparent)}.flow-practice__btn--primary[data-active=true] .flow-practice__btn-icon{opacity:1}.flow-practice__toolbar-divider{background:var(--fp-border);width:1px;height:1.4rem;margin:0 .15rem}.flow-practice__file-input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.flow-practice__body{grid-template-columns:minmax(148px,190px) 1fr;min-height:420px;display:grid}.flow-practice__palette{border-right:1px solid var(--fp-border);background:color-mix(in srgb, var(--text) 6%, var(--card));padding:.75rem .65rem}.flow-practice__palette-label{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .55rem;font-size:.68rem;font-weight:800}.flow-practice__palette-item{background:var(--card);cursor:grab;text-align:left;width:100%;color:var(--text);border:2px solid #0000;border-radius:8px;align-items:center;gap:.45rem;margin-bottom:.45rem;padding:.45rem .5rem;font-size:.72rem;font-weight:700;display:flex}.flow-practice__palette-item:active{cursor:grabbing}.flow-practice__palette-item[data-kind=if],.flow-practice__palette-item[data-kind=elif],.flow-practice__palette-item[data-kind=loop]{border-color:var(--fp-if)}.flow-practice__palette-item[data-kind=elif]{border-color:var(--fp-elif)}.flow-practice__palette-item[data-kind=else]{border-color:var(--fp-else)}.flow-practice__palette-item[data-kind=action]{border-color:var(--fp-action)}.flow-practice__palette-item[data-kind=start],.flow-practice__palette-item[data-kind=end]{border-color:var(--fp-start)}.flow-practice__palette-item[data-kind=process]{border-color:var(--fp-process)}.flow-practice__palette-item[data-kind=loop]{border-color:var(--fp-loop)}.flow-practice__palette-item[data-kind=oclass]{border-color:var(--fp-oclass)}.flow-practice__palette-item[data-kind=oobject]{border-color:var(--fp-oobject)}.flow-practice__palette-item[data-kind=omethod]{border-color:var(--fp-omethod)}.flow-practice__palette-item[data-kind=oattr]{border-color:var(--fp-oattr)}.flow-practice__shape-icon{opacity:.9;border:2px solid;flex-shrink:0;width:18px;height:18px}.flow-practice__shape-icon[data-shape=pill]{border-radius:999px}.flow-practice__shape-icon[data-shape=rect]{border-radius:3px}.flow-practice__shape-icon[data-shape=diamond]{border-radius:2px;transform:rotate(45deg)scale(.78)}.flow-practice__shape-icon[data-shape=oop-class]{border-radius:4px;box-shadow:inset 0 0 0 2px}.flow-practice__shape-icon[data-shape=oop-object]{border-radius:999px}.flow-practice__canvas-wrap--oop{background:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--fp-oclass) 22%, transparent) 1px, transparent 0) 0 0 / 22px 22px, radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--fp-oobject) 8%, transparent), transparent)}.flow-practice__canvas-wrap{background:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--muted) 35%, transparent) 1px, transparent 0) 0 0 / 22px 22px;min-height:420px;position:relative;overflow:auto}.flow-practice__canvas{min-width:100%;min-height:480px;position:relative}.flow-practice__edges{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.flow-practice__edge-label-bg{fill:var(--card);stroke:color-mix(in srgb, var(--border) 55%, transparent);stroke-width:1px}.flow-practice__edge-label{fill:var(--muted);font-size:10px;font-weight:700}.flow-practice__node{text-align:center;color:var(--text);cursor:grab;-webkit-user-select:none;user-select:none;box-sizing:border-box;z-index:2;justify-content:center;align-items:center;padding:.35rem .5rem;font-size:.72rem;font-weight:600;line-height:1.25;display:flex;position:absolute}.flow-practice__node:active{cursor:grabbing}.flow-practice__node[data-selected=true]{outline:2px solid var(--accent);outline-offset:2px;z-index:3}.flow-practice__node[data-walk-active=true]{outline:3px solid var(--fp-omethod);outline-offset:3px;box-shadow:0 0 0 6px color-mix(in srgb, var(--fp-omethod) 22%, transparent), 0 12px 28px color-mix(in srgb, var(--fp-omethod) 25%, transparent);z-index:4;animation:1.4s ease-in-out infinite flowWalkPulse}@keyframes flowWalkPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.flow-practice__node[data-kind=oclass]{border:2px solid var(--fp-oclass);background:color-mix(in srgb, var(--fp-oclass) 14%, var(--card));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--fp-oclass) 35%, var(--card));border-radius:8px}.flow-practice__node[data-kind=oobject]{border:2px solid var(--fp-oobject);background:linear-gradient(180deg, color-mix(in srgb, var(--fp-oobject) 18%, var(--card)) 0%, color-mix(in srgb, var(--fp-oobject) 8%, var(--card)) 100%);border-radius:999px}.flow-practice__node[data-kind=omethod]{border:2px solid var(--fp-omethod);background:color-mix(in srgb, var(--fp-omethod) 14%, var(--card));border-radius:8px}.flow-practice__node[data-kind=oattr]{border:2px dashed var(--fp-oattr);background:color-mix(in srgb, var(--fp-oattr) 12%, var(--card));border-radius:6px}.flow-practice__node[data-kind=start],.flow-practice__node[data-kind=end]{border:2px solid var(--fp-start);background:color-mix(in srgb, var(--fp-start) 12%, var(--card));border-radius:999px}.flow-practice__node[data-kind=action],.flow-practice__node[data-kind=process]{border:2px solid var(--fp-action);background:color-mix(in srgb, var(--fp-action) 12%, var(--card));border-radius:6px}.flow-practice__node[data-kind=process]{border-color:var(--fp-process);background:color-mix(in srgb, var(--fp-process) 12%, var(--card))}.flow-practice__node[data-kind=else]{border:2px solid var(--fp-else);background:color-mix(in srgb, var(--fp-else) 12%, var(--card));border-radius:6px}.flow-practice__node[data-kind=if]{border:2px solid var(--fp-if);background:color-mix(in srgb, var(--fp-if) 14%, var(--card));transform:rotate(45deg)}.flow-practice__node[data-kind=elif]{border:2px solid var(--fp-elif);background:color-mix(in srgb, var(--fp-elif) 14%, var(--card));transform:rotate(45deg)}.flow-practice__node[data-kind=loop]{border:2px solid var(--fp-loop);background:color-mix(in srgb, var(--fp-loop) 14%, var(--card));transform:rotate(45deg)}.flow-practice__node-label{text-overflow:ellipsis;max-width:100%;display:block;overflow:hidden}.flow-practice__node[data-kind=if] .flow-practice__node-label,.flow-practice__node[data-kind=elif] .flow-practice__node-label,.flow-practice__node[data-kind=loop] .flow-practice__node-label{max-width:88px;transform:rotate(-45deg)}.flow-practice__legend{border-top:1px solid var(--fp-border);color:var(--muted);flex-wrap:wrap;gap:.65rem 1rem;padding:.55rem 1rem;font-size:.72rem;display:flex}.flow-practice__status{color:var(--muted);padding:0 1rem .65rem;font-size:.75rem}@media (max-width:720px){.flow-practice__body{grid-template-columns:1fr}.flow-practice__palette{border-right:0;border-bottom:1px solid var(--fp-border);flex-wrap:wrap;align-items:center;gap:.35rem;display:flex}.flow-practice__palette-label{width:100%}.flow-practice__palette-item{width:auto;margin:0}.flow-practice__toolbar{width:100%}.flow-practice__btn-group{flex:auto}.flow-practice__focus{width:100%}}
.diagram-widget{--diagram-key-soft:color-mix(in srgb, var(--accent) 14%, var(--card));--diagram-key-strong:color-mix(in srgb, var(--accent) 32%, var(--card));--diagram-value-soft:color-mix(in srgb, var(--text) 6%, var(--card));--diagram-value-strong:color-mix(in srgb, var(--text) 14%, var(--card));--diagram-stroke:var(--border);--diagram-arrow:var(--muted);flex-direction:column;align-items:stretch;width:100%;margin:0;padding:0;display:flex}.diagram-widget[data-size=sm]{max-width:480px}.diagram-widget[data-size=md]{max-width:760px}.diagram-widget[data-size=lg]{max-width:960px}.diagram-widget svg{background:var(--card);border:1px solid var(--border);border-radius:12px;width:100%;height:auto;padding:0;display:block}.diagram-widget figcaption{color:var(--muted);letter-spacing:.01em;margin-top:.55rem;font-size:.85rem;font-weight:600}.diagram-widget .diagram-regen-btn{align-self:flex-start;align-items:center;gap:.45rem;min-width:auto;margin-top:.6rem;padding:.45rem .9rem;font-size:.85rem;display:inline-flex}.diagram-widget .diagram-regen-btn svg{background:0 0;border:0;border-radius:0;flex:none;width:14px;height:14px;padding:0}.lesson-diagrams{flex-direction:column;gap:1.6rem;margin-top:1.4rem;display:flex}.lesson-diagrams-heading{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .2rem;font-size:.78rem;font-weight:700}