:root{--bg:#f5f7ed;--paper:#fffdf7;--ink:#203b2d;--muted:#6a7865;--line:#d6dfcf;--green:#5d8157;--soft:#e6efdb;--gold:#d4b956;--purple:#8a78a9;--danger:#a35e50;--sans:Arial,'Liberation Sans',sans-serif;--mono:'Liberation Mono',monospace}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.4 var(--sans);display:flex;flex-direction:column;overflow:hidden}button,input,textarea{font:inherit;color:inherit}.skip{position:fixed;top:-80px;left:12px;z-index:100;background:var(--ink);color:white;padding:10px 14px;border-radius:9px}.skip:focus{top:12px}.topbar{height:66px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 18px;gap:22px;background:rgba(245,247,237,.96)}.brand{display:flex;align-items:center;gap:7px;color:inherit;text-decoration:none;font-size:18px;font-weight:750}.title{display:flex;align-items:baseline;gap:9px;color:var(--muted);font-size:12px}.title b{color:var(--green);font:12px var(--mono)}nav{margin-left:auto;display:flex;align-items:center;gap:7px}nav button,.zoom button{border:1px solid var(--line);background:var(--paper);border-radius:9px;min-width:34px;height:34px}nav a{font-size:12px;color:var(--green);margin-left:8px;text-decoration:none}.export-wrap{position:relative}.export-wrap>#export{padding:0 11px;min-width:auto}.export-menu{position:absolute;right:0;top:40px;z-index:40;width:188px;padding:7px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(35,55,34,.14)}.export-menu button{display:block;width:100%;height:auto;min-height:36px;padding:8px 10px;border:0;background:transparent;text-align:left;border-radius:8px;font-size:12px}.export-menu button:hover,.export-menu button:focus-visible{background:var(--soft)}main{min-height:0;flex:1;display:grid;grid-template-columns:154px minmax(0,1fr) 300px}.palette,.inspector{background:var(--paper);overflow:auto}.palette{border-right:1px solid var(--line);padding:18px 13px}.inspector{border-left:1px solid var(--line)}.kicker{font:700 10px var(--mono);letter-spacing:.12em;color:var(--green);margin:0 0 9px}.emoji-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.emoji-grid button{border:1px solid var(--line);background:white;border-radius:12px;aspect-ratio:1;font-size:23px}.emoji-grid button.active{background:var(--soft);border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.wide,.tool{width:100%;border:1px solid var(--line);background:white;border-radius:10px;padding:9px 10px;margin-top:7px;text-align:left}.tool.active{background:var(--ink);border-color:var(--ink);color:white}.play{background:var(--green);color:white;border-color:var(--green);text-align:center;font-weight:650}.danger{color:var(--danger)}hr{border:0;border-top:1px solid var(--line);margin:18px 0}.workspace{min-width:0;display:flex;flex-direction:column;background:var(--bg)}.canvas-head{height:58px;flex:none;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.canvas-head>div:first-child{display:flex;gap:12px;align-items:baseline}.eyebrow{font:700 10px var(--mono);letter-spacing:.13em;color:var(--green)}.zoom{display:flex;gap:4px;align-items:center}.zoom span{min-width:46px;text-align:center;font:11px var(--mono);color:var(--muted)}.canvas-wrap{position:relative;flex:1;min-height:0;overflow:auto;background-color:#f7f8f0;background-image:radial-gradient(circle,#cad6c3 1px,transparent 1.2px);background-size:26px 26px}.canvas-wrap.connecting{cursor:crosshair}#canvas{display:block;width:1400px;height:850px;transform-origin:top left;touch-action:none}.edge{fill:none;stroke:#aebead;stroke-width:3.4;marker-end:url(#arrow);cursor:pointer}.edge.selected{stroke:var(--purple);stroke-width:6}.edge.path{stroke:var(--green);stroke-width:7}.edge-label{font:13px var(--sans);fill:var(--muted);paint-order:stroke;stroke:var(--bg);stroke-width:6;stroke-linejoin:round}.node{cursor:grab}.node:active{cursor:grabbing}.node .halo{fill:transparent;stroke:transparent;stroke-width:8}.node .body{fill:var(--paper);stroke:#c1d0ba;stroke-width:3}.node.selected .body{fill:var(--soft);stroke:var(--green);stroke-width:5}.node.path .body{stroke:var(--green);stroke-width:6}.node.active .body{fill:#fff0aa;stroke:#b6972d;stroke-width:7}.node text.emoji{font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif;font-size:37px;text-anchor:middle;dominant-baseline:central;pointer-events:none}.node text.label{font:12px var(--sans);fill:var(--ink);text-anchor:middle;pointer-events:none}.port{fill:var(--green);stroke:white;stroke-width:2;opacity:0}.node:hover .port,.connecting-node .port{opacity:1}.ghost{fill:none;stroke:var(--green);stroke-width:3;stroke-dasharray:8 7;marker-end:url(#arrow);pointer-events:none}.hint{position:absolute;left:16px;bottom:15px;background:rgba(255,253,247,.94);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:11px;color:var(--muted);box-shadow:0 7px 24px rgba(46,70,43,.08)}.timeline{height:76px;flex:none;border-top:1px solid var(--line);display:flex;align-items:center;padding:0 16px;gap:16px;background:var(--paper)}.timeline>span{font:700 10px var(--mono);color:var(--green);letter-spacing:.12em}.timeline>div{display:flex;align-items:center;gap:4px;overflow:auto;min-width:0}.timeline button{border:0;background:transparent;font-size:24px;padding:5px 7px;border-radius:9px}.timeline button.current{background:#fff0aa}.timeline i{font-style:normal;color:#9cab99}.tabs{height:48px;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.tab{border:0;background:transparent;font-size:12px}.tab.active{box-shadow:inset 0 -2px var(--green);font-weight:700}.panel{padding:18px}.empty{color:var(--muted);padding:18px 0}form label{display:block;font-size:11px;color:var(--muted);margin-bottom:13px}input,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 9px;margin-top:5px}#node-emoji{font-size:24px}form button,.code-actions button,.code-head button{border:1px solid var(--line);background:white;border-radius:9px;padding:8px 9px;margin:2px 4px 2px 0}.path-readout{margin-top:22px;border-top:1px solid var(--line);padding-top:15px}#path-summary{font-size:12px;color:var(--muted);word-break:break-word}.code-head{display:flex;justify-content:space-between;align-items:start}.code-head button{font-size:11px;margin-top:-5px}textarea{height:430px;resize:none;font:12px/1.5 var(--mono);white-space:pre}.code-actions{display:flex;margin-top:8px}.note{font-size:11px;color:var(--muted);line-height:1.5}.edge-readout{font:12px var(--mono);color:var(--muted);margin-top:8px}footer{height:34px;flex:none;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 14px;background:var(--paper);color:var(--muted);font:11px var(--mono)}button:focus-visible,input:focus-visible,textarea:focus-visible,.node:focus-visible{outline:3px solid #8a6d20;outline-offset:2px}@media(max-width:900px){main{grid-template-columns:130px minmax(0,1fr)}.inspector{position:fixed;right:0;top:66px;bottom:34px;width:300px;z-index:20;box-shadow:-10px 0 30px rgba(35,55,34,.11);transform:translateX(calc(100% - 40px));transition:transform .18s}.inspector:hover,.inspector:focus-within{transform:none}.title span{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}