: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;--topbar-h: 52px;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}.beta-link{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;color:var(--blaze);font-size:13px;font-weight:600;text-decoration:none;padding:6px 4px;border-radius:8px}.beta-link:hover{text-decoration:underline}.beta-link:focus-visible{outline:none;box-shadow:var(--focus)}.restart-btn{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);position:relative;z-index:40}.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}}.scroll-hint-fade{position:absolute;left:0;right:0;height:56px;pointer-events:none;background:linear-gradient(to bottom,#fff0,#ffffffeb);opacity:0;transition:opacity .25s;z-index:2}.scroll-hint{position:absolute;left:50%;transform:translate(-50%,6px);display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1px solid var(--dust);border-radius:999px;background:var(--paper);color:var(--charcoal);font-family:inherit;font-size:12px;font-weight:600;line-height:1;box-shadow:0 2px 10px #0000001a;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:3}.scroll-hint-fade.on,.scroll-hint.on{opacity:1}.scroll-hint.on{pointer-events:auto;transform:translate(-50%)}.scroll-hint:focus-visible{outline:none;box-shadow:var(--focus)}.scroll-hint .chev{display:inline-block;animation:hint-bob 1.4s ease-in-out infinite}@keyframes hint-bob{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.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}.topbar{flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px}.tagline{order:3;flex-basis:100%;font-size:12.5px;line-height:1.4}.beta-link{min-height:44px;padding:0 8px}.restart-btn{min-height:44px;padding:6px 14px;font-size:13px}.stage{grid-template-columns:1fr;overflow:visible;height:auto;padding-bottom:8px}.panel{min-height:min(60vh,520px)}#panel-plugin{min-height:70vh;max-height:calc(100dvh - var(--topbar-h) - var(--rail-h) - 24px)}#panel-app{min-height:65vh}#panel-figma{min-height:min(52vh,440px)}.panel.dim{opacity:1}.panel.focus .panel-head{background:#f2672212;border-bottom-color:#f2672240}.panel-ctl{min-width:44px;min-height:44px;width:auto;height:auto;font-size:16px}.panel-head{padding:4px 8px 4px 13px;min-height:44px}.rail-btn{min-height:44px}.panel.expanded,#panel-plugin.expanded{top:0;right:0;bottom:0;left:0;border-radius:0;min-height:0;max-height:none;padding-bottom:env(safe-area-inset-bottom)}#panel-app.pr-open{min-height:0;max-height:none}#panel-app.pr-open .panel-body{overflow:visible}#panel-app.pr-open #jj-frame{display:none}#panel-app.pr-open .pr-panel{position:static!important;overflow:visible!important}#panel-app.pr-open .pr-cta{display:inline-flex;align-items:center;min-height:44px}#panel-app.pr-open .pr-panel :is(a,button,[tabindex]){scroll-margin-bottom:calc(var(--rail-h) + 12px)}.rail{position:sticky;bottom:0;flex-wrap:wrap;height:auto;flex:0 0 auto;gap:12px 14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.rail-copy{order:-1;flex-basis:100%}.rail-title{font-size:16px}.rail-body{font-size:13px}.rail-btn{padding:10px 18px}#next,#freeplay-cta{flex:1 1 auto}.legal{padding-bottom:calc(7px + env(safe-area-inset-bottom))}}@media (max-width: 480px){.restart-label{display:none}.restart-btn{min-width:44px;padding:6px 10px;font-size:15px}}@media (max-width: 360px){.tagline{display:none}}@media (max-width: 900px) and (max-height: 500px){.panel,#panel-app,#panel-plugin{min-height:320px}}@media (prefers-reduced-motion: reduce){.panel,.rail-dots .dot,.scroll-hint,.scroll-hint-fade,#app-backdrop,.boot-veil{transition:none}.scroll-hint .chev{animation:none}html{scroll-behavior:auto}}