@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{--font-body: "IBM Plex Sans", system-ui, Helvetica, Arial, sans-serif;--font-mono: "IBM Plex Mono", "Courier New", monospace;font-family:var(--font-body);line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{margin:0;padding:0;height:auto;min-height:100vh;overflow-x:auto;overflow-y:auto}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:block;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.component-visual{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;pointer-events:none}.component-visual svg{width:100%;height:100%;overflow:visible}.component-visual.selected{filter:drop-shadow(0 0 5px rgba(255,255,255,.45))}.workspace-component{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.15rem;width:64px;box-sizing:border-box;padding:4px 0;background:#0a0e14e0;border:1px solid rgba(255,255,255,.12);border-radius:9px;cursor:grab;transition:background var(--transition-fast, .15s) ease,border-color var(--transition-fast, .15s) ease,box-shadow var(--transition-fast, .15s) ease,opacity var(--transition-fast, .15s) ease,filter var(--transition-fast, .15s) ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-user-select:none;user-select:none;z-index:10;box-shadow:0 4px 12px #00000047,0 1px 3px #0000002e}.component-frame{position:relative;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:7px;border:1px solid rgba(255,255,255,.1);background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.09),transparent 55%),linear-gradient(180deg,#fff1,#ffffff05);box-shadow:inset 0 1px #ffffff12}.workspace-component:hover{background:#0e141cf5;border-color:#ffffff38;box-shadow:0 8px 20px #00000052,0 1px 3px #0003}.workspace-component.selected{border-color:#38bdf8d9;box-shadow:0 0 0 1px #38bdf84d,0 10px 22px #0000004d;background:#38bdf81a}.workspace-component.connected{border-color:#10b98152;background:#10b9810f}.workspace-component.connected.selected{border-color:#38bdf8d9;background:#38bdf81c}.workspace-component.active-path{border-color:#38bdf899;box-shadow:0 0 0 1px #38bdf82e,0 10px 22px #00000047}.workspace-component.haul-line-target{border-color:#f59e0bcc;background:#f59e0b1f;box-shadow:0 0 0 1px #f59e0b4d,0 0 18px #f59e0b33,0 8px 18px #00000047}.workspace-component.haul-line-target .component-frame{box-shadow:inset 0 1px #ffffff12,0 0 12px #f59e0b47}.workspace-component.path-dimmed{opacity:.55;filter:saturate(.75)}.workspace-component.path-dimmed.selected{opacity:1;filter:none}.workspace-component.dragging{cursor:grabbing;opacity:.75;z-index:1000}.component-icon{display:flex;align-items:center;justify-content:center}.component-label{width:62px;padding:0 2px;color:#e2e8f0;font-family:var(--font-display, "Space Grotesk", sans-serif);font-size:.64rem;font-weight:600;letter-spacing:.01em;line-height:1.1;min-height:1.9em;max-height:1.9em;display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;overflow:hidden;overflow-wrap:anywhere;text-shadow:0 1px 3px rgba(0,0,0,.5)}.workspace-component.textile-component .component-label{margin-top:.2rem}.delete-button{position:absolute;top:-7px;right:-7px;width:18px;height:18px;min-width:0;padding:0;border:1.5px solid rgba(255,255,255,.6);background:var(--danger-color, #f87171);color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform var(--transition-fast, .15s) ease,background var(--transition-fast, .15s) ease;box-shadow:0 2px 8px #0006;font-size:0;z-index:160}.delete-button:hover{background:#fb7185;transform:scale(1.1)}.connection-points{position:absolute;inset:0;pointer-events:none;opacity:.72;transition:opacity var(--transition-fast, .15s) ease}.workspace-component:hover .connection-points,.workspace-component.selected .connection-points,.workspace-component.haul-line-target .connection-points{opacity:1}.connection-points.drag-mode{opacity:inherit}.connection-points.manual-mode{opacity:1}.connection-btn{--port-color: #38bdf8;position:absolute;width:13px;height:13px;min-width:0;padding:0;border:2px solid rgba(6,10,14,.95);background:var(--port-color);color:var(--port-color);cursor:pointer;pointer-events:all;z-index:120;box-shadow:0 0 0 1px #ffffff61,0 0 0 3px #060a0ea6,0 2px 6px #0006;transition:transform var(--transition-fast, .15s) ease,box-shadow var(--transition-fast, .15s) ease,opacity var(--transition-fast, .15s) ease,background var(--transition-fast, .15s) ease,filter var(--transition-fast, .15s) ease}.connection-btn:before{content:"";position:absolute;inset:-8px;border-radius:50%}.connection-btn:after{content:"";position:absolute;inset:3px;border-radius:inherit;background:#ffffffb3;opacity:.7}.connection-btn:hover{transform:translateY(-50%) scale(1.3);z-index:130}.connection-btn.active{box-shadow:0 0 0 1px #fff9,0 0 0 5px #060a0eb3,0 0 14px var(--port-color)}.connection-btn.compatible-target{--port-color: #10b981 !important;background:#10b981!important;animation:port-pulse .9s ease-in-out infinite;box-shadow:0 0 0 1px #fff9,0 0 0 4px #10b98140,0 0 12px #10b981b3;transform:translateY(-50%) scale(1.4)}.connection-btn.input.compatible-target{transform:translateY(-50%) scale(1.4)}.connection-btn.output.compatible-target{transform:translateY(-50%) rotate(45deg) scale(1.4)}.connection-btn.anchor.compatible-target{transform:translate(-50%) scale(1.4)}.connection-btn.incompatible{opacity:.18;filter:grayscale(1)}@keyframes port-pulse{0%,to{box-shadow:0 0 0 1px #fff9,0 0 0 3px #10b98133,0 0 10px #10b98180}50%{box-shadow:0 0 0 1px #ffffffbf,0 0 0 6px #10b9811f,0 0 18px #10b981d9}}.connection-btn.input{--port-color: var(--port-input, #06b6d4);top:50%;left:-6.5px;transform:translateY(-50%);border-radius:50%}.connection-btn.input:hover{transform:translateY(-50%) scale(1.3);box-shadow:0 0 0 1px #fff9,0 0 0 4px #06b6d433,0 0 10px #06b6d4b3}.connection-btn.output{--port-color: var(--port-output, #f59e0b);top:50%;right:-6.5px;transform:translateY(-50%) rotate(45deg);border-radius:3px}.connection-btn.output:hover{transform:translateY(-50%) rotate(45deg) scale(1.3);box-shadow:0 0 0 1px #fff9,0 0 0 4px #f59e0b33,0 0 10px #f59e0bb3}.connection-btn.anchor{--port-color: var(--port-anchor, #60a5fa);top:-6.5px;left:50%;transform:translate(-50%);border-radius:50%}.connection-btn.anchor:hover{transform:translate(-50%) scale(1.3);box-shadow:0 0 0 1px #fff9,0 0 0 4px #60a5fa33,0 0 10px #60a5fab3}.connection-btn.anchor.single-point{--port-color: var(--port-single, #fbbf24)}.connection-btn.anchor.single-point:hover{box-shadow:0 0 0 1px #fff9,0 0 0 5px #fbbf2433,0 0 12px #fbbf24b3}.connection-btn.textile-port{--port-color: #c0392b;background:repeating-linear-gradient(135deg,#fffdf6 0 3px,#c0392b 3px 6px);border-radius:50%}.connection-btn.textile-port:after,.connection-btn.anchor.textile-anchor:after{inset:3px;border-radius:50%;background:#fffdf6}.connection-btn.anchor.textile-anchor{--port-color: #c0392b;top:auto;bottom:-6.5px;left:50%;transform:translate(-50%);background:repeating-linear-gradient(135deg,#fffdf6 0 3px,#c0392b 3px 6px)}.connection-btn.anchor.textile-anchor:hover{transform:translate(-50%) scale(1.3);box-shadow:0 0 0 1px #fff9,0 0 0 4px #c0392b33,0 0 10px #c0392bb3}.workspace-canvas.connecting,.workspace-canvas.connecting .workspace-component{cursor:crosshair}.tractor-indicator{position:absolute;top:-7px;right:-7px;width:18px;height:18px;background:var(--tractor-color, #f97316);color:#fff;border:1.5px solid rgba(255,255,255,.65);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0;animation:tractor-pulse 2s ease-in-out infinite;z-index:150;box-shadow:0 2px 8px #0006}@keyframes tractor-pulse{0%{box-shadow:0 2px 8px #0006,0 0 #f9731699}70%{box-shadow:0 2px 8px #0006,0 0 0 10px #f9731600}to{box-shadow:0 2px 8px #0006,0 0 #f9731600}}.rope-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.rope-connection{transition:opacity .18s ease}.rope-line-outer{filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}.rope-click-area{pointer-events:all}.tractor-target-rope .rope-line-outer{filter:drop-shadow(0 0 6px rgba(245,158,11,.55))}.component-link{transition:opacity .18s ease}.link-line{opacity:.85}.tractor-connection{transition:opacity .18s ease}.tractor-grip-line{animation:tractor-march 1s linear infinite}@keyframes tractor-march{to{stroke-dashoffset:-14}}.haul-line{pointer-events:all}.haul-rope-outline{filter:drop-shadow(0 3px 8px rgba(0,0,0,.4))}.haul-rope-pull-glow{filter:blur(.4px)}.haul-rope-pull-accent{filter:drop-shadow(0 0 7px rgba(245,158,11,.45))}.haul-rope-main{filter:drop-shadow(0 2px 5px rgba(0,0,0,.28))}.haul-end-hit-area{pointer-events:all;cursor:grab}.haul-end-hit-area:active{cursor:grabbing}.haul-line-label{font-family:Space Grotesk,sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.5);letter-spacing:.06em}.haul-hand-marker{filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}.pull-vector{filter:drop-shadow(0 2px 6px rgba(248,113,113,.3))}.drag-connection{pointer-events:none}.textile-link{pointer-events:all}.textile-link-border{filter:drop-shadow(0 1px 3px rgba(0,0,0,.24))}.textile-link-core{filter:drop-shadow(0 1px 2px rgba(255,253,246,.4))}.capture-link-line{opacity:.9}.lesson-panel{position:absolute;bottom:1.25rem;left:1.25rem;width:320px;max-width:calc(100vw - 2.5rem);z-index:100;display:flex;flex-direction:column;gap:0;border:1px solid var(--glass-border, rgba(255, 255, 255, .09));border-radius:14px;background:var(--panel-bg, rgba(8, 11, 15, .92));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 12px 32px #00000059,0 0 0 1px #f59e0b1f;overflow:hidden}.lesson-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;padding:.85rem 1rem .65rem;border-bottom:1px solid var(--glass-border, rgba(255, 255, 255, .07))}.lesson-panel-meta{display:flex;flex-direction:column;gap:.1rem;min-width:0}.lesson-eyebrow{color:var(--amber, #f59e0b);font-family:var(--font-display, sans-serif);font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.lesson-title{color:var(--text-primary, #fff);font-family:var(--font-display, sans-serif);font-size:.88rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-exit-btn{flex-shrink:0;background:none;border:none;color:var(--text-muted, rgba(255, 255, 255, .4));font-size:.85rem;cursor:pointer;padding:.1rem .25rem;border-radius:4px;line-height:1;transition:color .12s ease}.lesson-exit-btn:hover{color:var(--text-primary, #fff)}.lesson-progress{display:flex;align-items:center;gap:.3rem;padding:.5rem 1rem;background:#ffffff06;border-bottom:1px solid var(--glass-border, rgba(255, 255, 255, .05))}.lesson-dot{width:6px;height:6px;border-radius:50%;background:#ffffff26;transition:background .2s ease;flex-shrink:0}.lesson-dot.done{background:#f59e0b8c}.lesson-dot.active{background:var(--amber, #f59e0b);box-shadow:0 0 6px #f59e0b80}.lesson-step-count{margin-left:auto;color:var(--text-muted, rgba(255, 255, 255, .4));font-size:.68rem;font-family:var(--font-display, sans-serif);font-weight:600;letter-spacing:.08em}.lesson-body{padding:.9rem 1rem;display:flex;flex-direction:column;gap:.6rem;max-height:260px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}.lesson-step-title{margin:0;color:var(--text-primary, #fff);font-family:var(--font-display, sans-serif);font-size:.98rem;font-weight:700;letter-spacing:.01em;line-height:1.25}.lesson-step-body p{margin:0;color:var(--text-secondary, rgba(255, 255, 255, .72));font-size:.82rem;line-height:1.6}.lesson-hint{padding:.55rem .7rem;border-radius:8px;background:#f59e0b14;border:1px solid rgba(245,158,11,.2)}.lesson-hint-label{display:block;color:var(--amber, #f59e0b);font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.2rem}.lesson-hint p{margin:0;color:#fffc;font-size:.8rem;line-height:1.5}.lesson-validation{padding:.5rem .7rem;border-radius:8px;font-size:.8rem;font-weight:600}.lesson-validation.pass{background:#22c55e1a;border:1px solid rgba(34,197,94,.25);color:#4ade80}.lesson-validation.fail{background:#ef44441a;border:1px solid rgba(239,68,68,.25);color:#f87171}.lesson-controls{padding:.65rem 1rem;border-top:1px solid var(--glass-border, rgba(255, 255, 255, .07));display:flex;flex-direction:column;gap:.45rem}.lesson-nav,.lesson-aux{display:flex;gap:.5rem}.lesson-btn{flex:1;padding:.45rem .75rem;border-radius:8px;border:none;font-family:var(--font-display, sans-serif);font-size:.78rem;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:opacity .12s ease,background .12s ease}.lesson-btn:disabled{opacity:.35;cursor:not-allowed}.lesson-btn.primary{background:var(--amber, #f59e0b);color:#0a0c10}.lesson-btn.primary:hover:not(:disabled){background:#fbbf24}.lesson-btn.secondary{background:#ffffff12;color:var(--text-secondary, rgba(255, 255, 255, .72))}.lesson-btn.secondary:hover:not(:disabled){background:#ffffff1f}.lesson-btn.ghost{background:none;color:var(--text-muted, rgba(255, 255, 255, .45));border:1px solid rgba(255,255,255,.1)}.lesson-btn.ghost:hover:not(:disabled){color:var(--text-secondary, rgba(255, 255, 255, .72));border-color:#fff3}.lesson-btn.accent{background:#22c55e26;color:#4ade80;border:1px solid rgba(34,197,94,.3)}.lesson-btn.accent:hover:not(:disabled){background:#22c55e40}.game-workspace{display:flex;flex-direction:column;gap:.75rem;min-height:0}.workspace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:var(--panel-bg, rgba(8, 11, 15, .85));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border, rgba(255, 255, 255, .09));border-radius:12px;box-shadow:var(--shadow-sm, 0 8px 20px rgba(0, 0, 0, .2))}.workspace-status{display:flex;flex-direction:column;gap:.1rem;min-width:0}.workspace-eyebrow{color:var(--text-muted, rgba(255, 255, 255, .46));font-family:var(--font-display, sans-serif);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.workspace-status strong{color:var(--text-primary, #fff);font-size:.94rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-substatus{color:#f4f7fbb8;font-size:.76rem;line-height:1.45;max-width:58ch}.workspace-controls{display:flex;gap:.45rem;flex-wrap:wrap}.workspace-controls button{padding:.44rem .78rem;border:1px solid var(--glass-border, rgba(255, 255, 255, .09));background:#ffffff0a;color:var(--text-primary, #f1f5f9);border-radius:6px;cursor:pointer;font-family:var(--font-display, "Space Grotesk", sans-serif);font-size:.78rem;font-weight:600;letter-spacing:.01em;transition:transform var(--transition-fast, .15s) ease,border-color var(--transition-fast, .15s) ease,background var(--transition-fast, .15s) ease}.workspace-controls button:hover:not(:disabled){transform:translateY(-1px);border-color:#38bdf84d;background:#ffffff12}.workspace-controls button:disabled{opacity:.35;cursor:not-allowed}.workspace-controls button.active{background:#10b98126;border-color:#10b98166;color:#6ee7b7}.template-btn{border-color:#f59e0b47!important;color:#fcd34d!important}.validation-errors{padding:.75rem 1rem;border:1px solid rgba(248,113,113,.32);border-radius:10px;background:#f8717114}.validation-errors h4{margin:0 0 .4rem;color:#fca5a5;font-family:var(--font-display, "Space Grotesk", sans-serif);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.validation-errors.validation-ok{background:#6ee7b714;border-color:#6ee7b752}.validation-errors.validation-ok h4{color:#6ee7b7}.validation-error{color:#f4f7fbe0;font-size:.84rem;line-height:1.45}.validation-error+.validation-error{margin-top:.2rem}.workspace-canvas{position:relative;min-height:640px;border:1px solid var(--glass-border, rgba(255, 255, 255, .09));border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,rgba(56,189,248,.05),transparent 50%),#06090de0;box-shadow:var(--shadow-lg, 0 28px 56px rgba(0, 0, 0, .36));transition:border-color var(--transition-normal, .25s) ease,box-shadow var(--transition-normal, .25s) ease}.workspace-canvas:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.28) 1.2px,transparent 1.2px);background-size:32px 32px;opacity:.5;pointer-events:none}.workspace-canvas.drop-active{border-color:#38bdf866;box-shadow:0 0 0 1px #38bdf82e,var(--shadow-lg)}.workspace-canvas.connecting{border-color:#f59e0b80;box-shadow:0 0 0 1px #f59e0b26,var(--shadow-lg)}.workspace-canvas.has-focus-path:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(56,189,248,.03),transparent 60%);pointer-events:none}.workspace-placeholder-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}.workspace-placeholder{width:min(420px,calc(100% - 3rem));padding:1.5rem;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:#080c10b8;text-align:center;color:var(--text-secondary, rgba(255, 255, 255, .72))}.workspace-placeholder h4{margin:0;color:var(--text-primary, #fff);font-size:1.15rem;font-weight:600;letter-spacing:-.02em}.workspace-placeholder p{margin:.55rem 0 0;line-height:1.5}.placeholder-tags{display:flex;justify-content:center;flex-wrap:wrap;gap:.45rem;margin-top:1rem}.placeholder-tags span{padding:.34rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--text-secondary, rgba(255, 255, 255, .72));font-size:.74rem}.grid-pattern{width:160px;height:160px;margin:1.2rem auto 0;background-image:radial-gradient(circle,rgba(255,255,255,.28) 1px,transparent 1px);background-size:20px 20px;border-radius:18px;opacity:.42}@media (max-width: 980px){.workspace-toolbar{flex-direction:column;align-items:flex-start}.workspace-status strong{white-space:normal}.workspace-canvas{min-height:520px}}.component-palette{position:sticky;top:.75rem;align-self:start;max-height:calc(100vh - 1.5rem);overflow-y:auto;padding:.95rem;background:var(--panel-bg, rgba(12, 18, 24, .7));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--glass-border, rgba(255, 255, 255, .12));border-radius:12px;box-shadow:var(--shadow-md, 0 16px 36px rgba(0, 0, 0, .3))}.palette-header{margin-bottom:.75rem}.palette-eyebrow{display:inline-block;margin-bottom:.45rem;color:var(--text-muted, rgba(255, 255, 255, .5));font-family:var(--font-display, sans-serif);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.palette-header h2{margin:0;font-family:var(--font-display, sans-serif);font-size:1.25rem;font-weight:700;color:var(--text-primary, #fff);letter-spacing:.04em;text-transform:uppercase}.palette-header p{margin:.45rem 0 0;font-size:.8rem;line-height:1.35;color:var(--text-secondary, rgba(255, 255, 255, .72))}.palette-sections{display:flex;flex-direction:column;gap:.8rem}.palette-section{display:flex;flex-direction:column;gap:.45rem}.palette-section-label{padding-bottom:.3rem;border-bottom:1px solid rgba(255,255,255,.07);color:#38bdf8a6;font-family:var(--font-display, sans-serif);font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.palette-list{display:flex;flex-direction:column;gap:.45rem}.palette-item{display:grid;grid-template-columns:36px 1fr;gap:.4rem;align-items:center;width:100%;min-height:50px;padding:.38rem .42rem;background:#ffffff09;border:1px solid rgba(255,255,255,.08);border-left:2px solid transparent;border-radius:10px;color:inherit;text-align:left;cursor:grab;transition:transform var(--transition-fast, .15s) ease,border-color var(--transition-fast, .15s) ease,background var(--transition-fast, .15s) ease,box-shadow var(--transition-fast, .15s) ease}.palette-item:hover{transform:translate(2px);background:#8fb9cb12;border-color:#8cb8c947;border-left-color:#8fb9cbb8;box-shadow:0 8px 20px #00000029}.palette-item:active{cursor:grabbing;transform:translate(1px) scale(.99)}.palette-preview{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.palette-preview .component-visual{transform:scale(.68)}.palette-copy{min-width:0;display:flex;flex-direction:column;gap:.14rem}.palette-name{color:var(--text-primary, #fff);font-size:.8rem;font-weight:600;letter-spacing:-.01em;line-height:1.1}.palette-role{color:var(--text-secondary, rgba(255, 255, 255, .72));font-size:.68rem;line-height:1.15}.palette-help{margin-top:.8rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.08)}.palette-help summary{cursor:pointer;color:var(--text-secondary, rgba(255, 255, 255, .72));font-size:.82rem;font-weight:600;list-style:none}.palette-help summary::-webkit-details-marker{display:none}.palette-help summary:after{content:"+";float:right;color:var(--text-muted, rgba(255, 255, 255, .5))}.palette-help[open] summary:after{content:"−"}.palette-help ul{margin:.75rem 0 0;padding-left:1rem;color:var(--text-secondary, rgba(255, 255, 255, .72));font-size:.8rem;line-height:1.5}.palette-help li+li{margin-top:.35rem}@media (max-width: 980px){.palette-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 640px){.palette-list{grid-template-columns:1fr}}.info-panel{position:sticky;top:.75rem;align-self:start;display:flex;flex-direction:column;gap:.75rem;max-height:calc(100vh - 1.5rem);overflow-y:auto}.panel-section{padding:.9rem 1rem;border:1px solid var(--glass-border, rgba(255, 255, 255, .09));border-radius:12px;background:var(--panel-bg, rgba(8, 11, 15, .85));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-sm, 0 8px 20px rgba(0, 0, 0, .2))}.panel-heading{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.95rem}.panel-heading.compact{margin-bottom:.75rem}.panel-eyebrow{color:var(--text-muted, rgba(255, 255, 255, .46));font-family:var(--font-display, sans-serif);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.panel-heading h2{margin:0;font-family:var(--font-display, sans-serif);color:var(--text-primary, #fff);font-size:1.2rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}.panel-heading p{margin:0;color:var(--text-secondary, rgba(255, 255, 255, .72));font-size:.84rem;line-height:1.5}.analysis-results{display:flex;flex-direction:column;gap:.9rem}.analysis-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.stat-card{display:flex;flex-direction:column;gap:.2rem;padding:.75rem;border-radius:8px;border:1px solid rgba(255,255,255,.07);background:#ffffff08}.stat-card.primary{border-color:#8fb9cb47;background:#8fb9cb1a}.stat-label,.stat-note,.analysis-chip span,.detail-row span,.t-system-stage-metric,.t-system-note,.guide-item p,.example-system p{color:var(--text-secondary, rgba(255, 255, 255, .72))}.stat-label{font-family:var(--font-display, sans-serif);font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.stat-card strong{color:var(--text-primary, #fff);font-family:var(--font-mono, monospace);font-size:1.28rem;font-weight:600;letter-spacing:-.02em}.stat-note{font-size:.76rem;line-height:1.4}.analysis-chip-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}.analysis-chip{display:flex;flex-direction:column;gap:.16rem;padding:.7rem .78rem;border-radius:14px;border:1px solid rgba(255,255,255,.07);background:#ffffff08}.analysis-chip span{font-family:var(--font-display, sans-serif);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.analysis-chip strong{color:var(--text-primary, #fff);font-family:var(--font-mono, monospace);font-size:.9rem;font-weight:600}.panel-disclosure{overflow:hidden}.panel-disclosure summary{cursor:pointer;color:var(--text-primary, #fff);font-size:.88rem;font-weight:600;list-style:none}.panel-disclosure summary::-webkit-details-marker{display:none}.panel-disclosure summary:after{content:"+";float:right;color:var(--text-muted, rgba(255, 255, 255, .46))}.panel-disclosure[open] summary:after{content:"−"}.analysis-disclosure{padding:.25rem 0 0;border:none;background:transparent;box-shadow:none}.analysis-disclosure summary{padding:.3rem 0 0}.detail-stack{display:flex;flex-direction:column;gap:.7rem;margin-top:.8rem}.detail-card{padding:.85rem;border-radius:15px;border:1px solid rgba(255,255,255,.07);background:#ffffff08}.detail-card h3{margin:0 0 .65rem;color:var(--text-primary, #fff);font-size:.88rem;font-weight:600}.detail-list{display:flex;flex-direction:column;gap:.35rem}.detail-row{display:flex;justify-content:space-between;gap:.75rem;font-size:.82rem}.detail-row strong{color:var(--text-primary, #fff)}.detail-row.total{margin-top:.3rem;padding-top:.45rem;border-top:1px solid rgba(255,255,255,.08)}.t-system-summary{margin:0 0 .7rem;font-size:.82rem;line-height:1.5;color:var(--text-secondary, rgba(255, 255, 255, .72))}.t-system-stages{display:flex;flex-direction:column;gap:.6rem}.t-system-stage{padding:.75rem;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:#ffffff06}.t-system-stage-header{display:flex;justify-content:space-between;gap:.6rem;margin-bottom:.4rem;color:var(--text-primary, #fff);font-size:.82rem}.t-system-stage-header span{color:var(--primary-color, #8fb9cb);font-family:var(--font-mono, monospace);font-weight:600}.t-system-notes{display:flex;flex-direction:column;gap:.28rem}.t-system-note{font-size:.78rem;line-height:1.42}.guide-content{display:flex;flex-direction:column;gap:.7rem;margin-top:.8rem}.guide-item{padding:.8rem;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:#ffffff08}.guide-item strong,.example-system strong{display:block;margin-bottom:.22rem;color:var(--text-primary, #fff);font-size:.88rem;font-weight:600}.guide-item p,.example-system p{margin:0;font-size:.8rem;line-height:1.45}.system-source{display:block;margin-top:.45rem;color:var(--text-muted, rgba(255, 255, 255, .46));font-family:var(--font-display, sans-serif);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.system-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.example-system{width:100%;min-height:148px;padding:.75rem;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#ffffff09;text-align:left;cursor:pointer;transition:transform var(--transition-fast, .15s) ease,border-color var(--transition-fast, .15s) ease,background var(--transition-fast, .15s) ease}.example-system:hover{transform:translateY(-1px);border-color:#8fb9cb57;background:#8fb9cb17}.system-diagram{margin-top:.55rem;padding:.38rem .5rem;border-radius:999px;background:#ffffff0b;color:var(--primary-color, #8fb9cb);font-family:var(--font-mono, "IBM Plex Mono", monospace);font-size:.72rem;text-align:center}.no-analysis{display:flex;flex-direction:column;gap:.8rem}.info-panel::-webkit-scrollbar{width:6px}.info-panel::-webkit-scrollbar-track{background:#ffffff0d;border-radius:999px}.info-panel::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:999px}.detail-card-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.detail-card-header h3{margin:0}.overlay-toggle-btn{padding:.28rem .65rem;border-radius:6px;border:1px solid rgba(245,158,11,.3);background:#f59e0b12;color:#f59e0bcc;font-family:var(--font-display, sans-serif);font-size:.65rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:background .12s ease,color .12s ease;white-space:nowrap}.overlay-toggle-btn:hover{background:#f59e0b26;color:#f59e0b}.overlay-toggle-btn.active{background:#f59e0b33;border-color:#f59e0b8c;color:#f59e0b}.lesson-cards{display:flex;flex-direction:column;gap:.5rem}.lesson-card{display:flex;align-items:flex-start;gap:.75rem;padding:.65rem .75rem;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:#ffffff08}.lesson-card-meta{flex:1;min-width:0}.lesson-card-meta strong{display:block;color:var(--text-primary, #fff);font-family:var(--font-display, sans-serif);font-size:.82rem;font-weight:700;margin-bottom:.15rem}.lesson-card-meta p{margin:0;color:var(--text-muted, rgba(255, 255, 255, .46));font-size:.73rem;line-height:1.45}.lesson-card-btn{flex-shrink:0;padding:.38rem .75rem;border-radius:7px;border:none;background:var(--amber, #f59e0b);color:#0a0c10;font-family:var(--font-display, sans-serif);font-size:.72rem;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:background .12s ease;white-space:nowrap}.lesson-card-btn:hover{background:#fbbf24}.lesson-card-btn.active{background:#ffffff1a;color:#fff9}.lesson-card-btn.active:hover{background:#ffffff26;color:#fffc}@media (max-width: 980px){.info-panel{position:static;max-height:none}}@media (max-width: 640px){.analysis-stat-grid,.analysis-chip-row,.system-examples{grid-template-columns:1fr}}:root{--primary-color: #38bdf8;--primary-hover: #7dd3fc;--secondary-color: #f59e0b;--success-color: #10b981;--warning-color: #f59e0b;--danger-color: #f87171;--background-gradient-start: #080b0e;--background-gradient-end: #0d1117;--glass-bg: rgba(255, 255, 255, .04);--glass-border: rgba(255, 255, 255, .09);--glass-hover: rgba(255, 255, 255, .07);--panel-bg: rgba(8, 11, 15, .85);--panel-soft: rgba(255, 255, 255, .035);--text-primary: #f1f5f9;--text-secondary: rgba(241, 245, 249, .72);--text-muted: rgba(241, 245, 249, .42);--shadow-sm: 0 8px 20px rgba(0, 0, 0, .2);--shadow-md: 0 16px 36px rgba(0, 0, 0, .3);--shadow-lg: 0 28px 56px rgba(0, 0, 0, .36);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 16px;--port-input: #06b6d4;--port-output: #f59e0b;--port-anchor: #60a5fa;--port-single: #fbbf24;--rope-color: #92400e;--rope-core: #fde68a;--component-link: #475569;--tractor-color: #f97316;--font-display: "Space Grotesk", "IBM Plex Sans", sans-serif;--font-body: "IBM Plex Sans", "Space Grotesk", sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0}.app{width:100%;min-height:100vh;display:flex;flex-direction:column;gap:.85rem;padding:.75rem;background:radial-gradient(circle at 18% 18%,rgba(143,185,203,.13),transparent 28%),radial-gradient(circle at 82% 10%,rgba(213,191,150,.08),transparent 26%),linear-gradient(145deg,var(--background-gradient-start) 0%,var(--background-gradient-end) 100%);color:var(--text-primary);font-family:var(--font-body, "IBM Plex Sans", sans-serif)}.app:before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(circle at center,black 45%,transparent 90%);mask-image:radial-gradient(circle at center,black 45%,transparent 90%);pointer-events:none;opacity:.35}.app-toolbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1rem;border:1px solid var(--glass-border);border-bottom:1px solid rgba(255,255,255,.06);border-radius:12px;background:#06090de6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-sm)}.app-brand{display:flex;align-items:center;gap:.65rem}.app-brand-logo{flex-shrink:0;opacity:.88}.app-brand-text{display:flex;flex-direction:column;gap:.05rem}.app-kicker{color:var(--text-muted);font-family:var(--font-display, sans-serif);font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;line-height:1}.app-brand strong{color:var(--text-primary);font-family:var(--font-display, sans-serif);font-size:1.22rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1}.header-controls{display:flex;gap:.4rem}.history-btn{width:32px;height:32px;min-width:0;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--glass-border);background:#ffffff0a;color:var(--text-secondary);border-radius:6px;cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast),color var(--transition-fast)}.history-btn:hover:not(:disabled){transform:translateY(-1px);background:#ffffff14;border-color:#38bdf859;color:var(--text-primary)}.history-btn:disabled{opacity:.32;cursor:not-allowed}.app-content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(220px,240px) minmax(0,1fr) minmax(280px,320px);gap:1rem;align-items:start;flex:1;min-height:0}.app-content.lesson-active{grid-template-columns:minmax(0,1fr)}.app-content.lesson-active.lesson-build-step{grid-template-columns:minmax(220px,240px) minmax(0,1fr)}.app-content.lesson-active .workspace-canvas{min-height:calc(100vh - 6.5rem)}@media (max-width: 1280px){.app-content{grid-template-columns:220px minmax(0,1fr) 290px}.app-content.lesson-active{grid-template-columns:minmax(0,1fr)}.app-content.lesson-active.lesson-build-step{grid-template-columns:220px minmax(0,1fr)}}@media (max-width: 980px){.app{padding:.6rem}.app-content{grid-template-columns:1fr}.app-toolbar{position:static}}