:root{--blaze: #f26722;--blaze-hover: #d9531a;--snow: #f7f7f7;--dust: #d1d1d1;--taupe: #8b7e66;--charcoal: #4a4a4a;--ink: #2a2a2a;--paper: #ffffff;--line: #e6e6e6;--focus: 0 0 0 3px rgba(242, 103, 34, .35);--shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);--radius: 12px;--rail-h: 128px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--snow)}#app{display:flex;flex-direction:column;height:100vh;min-height:0}.topbar{display:flex;align-items:baseline;gap:16px;padding:14px 22px;background:var(--paper);border-bottom:1px solid var(--line);flex:0 0 auto}.brand{display:flex;align-items:center;gap:7px;font-weight:700;font-size:19px;letter-spacing:-.01em}.brand-mark{width:18px;height:18px;border-radius:5px;background:var(--blaze);box-shadow:inset 0 0 0 2px #ffffff80}.brand-name{color:var(--ink)}.tm{font-size:.5em;font-weight:600;vertical-align:super;margin-left:1px;color:var(--taupe)}.brand-sep{color:var(--dust)}.brand-try{color:var(--blaze);font-weight:600}.tagline{margin:0;color:var(--charcoal);font-size:13px}.restart-btn{margin-left:auto;flex:0 0 auto;border:1px solid var(--dust);background:var(--paper);color:var(--charcoal);font-size:12px;font-weight:600;padding:6px 12px;border-radius:8px;cursor:pointer;transition:border-color .15s,color .15s}.restart-btn:hover{border-color:var(--blaze);color:var(--blaze)}.restart-btn:focus-visible{outline:none;box-shadow:var(--focus)}.stage{flex:1 1 auto;display:grid;grid-template-columns:.85fr 1fr 1.15fr;gap:16px;padding:16px;min-height:0;overflow:hidden}.panel{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);min-height:0;overflow:hidden;transition:box-shadow .25s,opacity .25s,transform .25s}.panel.dim{opacity:.62}.panel.focus{box-shadow:0 0 0 2px var(--blaze),var(--shadow)}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid var(--line);flex:0 0 auto}.panel-title{font-weight:650;font-size:13px;display:flex;align-items:center;gap:7px}.sorb-mark{width:14px;height:14px;border-radius:4px;background:var(--blaze);box-shadow:inset 0 0 0 1.5px #ffffff80;flex:0 0 auto}.panel-title{display:inline-flex;align-items:center;gap:7px}.gh-mark{width:14px;height:14px;flex:0 0 auto;fill:#1f2328}.figma-mark{height:14px;width:auto;flex:0 0 auto;display:block}.panel-note{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--taupe);padding:2px 7px;border-radius:999px;background:#8b7e661a}.panel-note.live{color:#1f7a3d;background:#1f7a3d1a}.app-head-right{display:flex;align-items:center;gap:6px}.panel-ctl{border:1px solid var(--line);background:var(--paper);color:var(--charcoal);width:24px;height:22px;border-radius:6px;font-size:13px;line-height:1;cursor:pointer;transition:border-color .15s,color .15s}.panel-ctl:hover{border-color:var(--blaze);color:var(--blaze)}.panel-ctl:focus-visible{outline:none;box-shadow:var(--focus)}#app-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#1414148c;z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}#app-backdrop.on{opacity:1;pointer-events:auto}.panel.expanded{position:fixed;top:3vh;right:3vw;bottom:3vh;left:3vw;z-index:60;box-shadow:0 20px 60px #00000059}.panel.expanded.dim{opacity:1}.panel-body{flex:1 1 auto;min-height:0;position:relative;overflow:hidden}.panel-body iframe{border:0;display:block;background:var(--paper)}.frame-scale{position:absolute;top:0;left:0;transform-origin:top left}.rail{flex:0 0 var(--rail-h);display:flex;align-items:center;gap:18px;padding:16px 24px;background:var(--paper);border-top:1px solid var(--line)}.rail-copy{flex:1 1 auto;min-width:0}.rail-meta{display:flex;align-items:center;gap:12px;margin-bottom:4px}#step-num{font-weight:700;color:var(--blaze);font-size:13px}#step-num:before{content:"Step ";color:var(--taupe);font-weight:500}.rail-dots{display:flex;gap:6px}.rail-dots .dot{width:8px;height:8px;border-radius:999px;background:var(--dust);transition:background .2s,transform .2s}.rail-dots .dot.on{background:var(--blaze);transform:scale(1.15)}.rail-dots .dot.done{background:var(--taupe)}.rail-title{margin:0 0 3px;font-size:17px;letter-spacing:-.01em}.rail-body{margin:0;color:var(--charcoal);font-size:13.5px;line-height:1.45;max-width:62ch}.rail-btn{flex:0 0 auto;border:1px solid var(--dust);background:var(--paper);color:var(--ink);font-size:14px;font-weight:600;padding:10px 16px;border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s}.rail-btn:hover{border-color:var(--taupe)}.rail-btn:focus-visible{outline:none;box-shadow:var(--focus)}.rail-btn.primary{background:var(--blaze);border-color:var(--blaze);color:#fff}.rail-btn.primary:hover{background:var(--blaze-hover);border-color:var(--blaze-hover)}.rail-btn:disabled{opacity:.4;cursor:default}.freeplay-bar{display:flex;align-items:center;gap:16px;flex:1 1 auto}.freeplay-bar[hidden]{display:none}body.freeplay-active #plugin-body,body.freeplay-active #app-body{pointer-events:none}body.freeplay-active #app-head-right{pointer-events:auto}.fp-copy{flex:1 1 auto;color:var(--charcoal);font-size:13px;line-height:1.45;max-width:62ch}.fp-copy strong{color:var(--blaze)}.fp-copy em{font-style:normal;font-weight:600;color:var(--ink)}.legal{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 16px;background:var(--paper);border-top:1px solid var(--line);color:var(--taupe);font-size:11px}.legal .tm{color:var(--taupe)}.legal-sep{color:var(--dust)}@media (max-width: 900px){.legal{flex-wrap:wrap;text-align:center}}.boot-veil{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--snow);color:var(--charcoal);z-index:50;transition:opacity .4s}.boot-veil.gone{opacity:0;pointer-events:none}.boot-spinner{width:34px;height:34px;border:3px solid var(--dust);border-top-color:var(--blaze);border-radius:999px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 900px){#app{height:auto;min-height:100vh}.stage{grid-template-columns:1fr;overflow:visible;height:auto}.panel{min-height:340px}.panel.dim{opacity:1}.rail{position:sticky;bottom:0;flex-wrap:wrap;height:auto;flex:0 0 auto}.rail-copy{order:-1;flex-basis:100%}}