/* Editor styles, all scoped under #editor-root. Copied from the standalone editor. */
#editor-root, #editor-root * { margin:0; padding:0; box-sizing:border-box; }
#editor-root { background:#131722; font-family:'Courier New',monospace; height:100%; overflow:hidden; }
#editor-root #canvas-wrap { position:fixed; left:0; right:0; top:0; bottom:0; overflow:hidden; }
#editor-root #canvas-wrap { display:flex; flex-direction:column; }
#editor-root #c { display:block; width:100%; flex:1 1 0; min-height:0; cursor:crosshair; }
/* step 41: the grip hint, its own band directly above the grip strip; wraps instead of clipping; the help button sits below it, in the grip strip */
#editor-root #grip-hint { flex:none; box-sizing:border-box; padding:3px 10px; background:#0d1220; color:#6f8db8; font:10px/12px 'Courier New',monospace; white-space:normal; overflow-wrap:anywhere; }
#editor-root button.btn { font-family:'Courier New',monospace; font-size:12px; color:#e8f4ff; background:linear-gradient(#232b40,#1a2033); border:1px solid #3a4a6a; border-radius:5px; padding:7px 10px; cursor:pointer; box-shadow: 0 2px 0 #0d1120, inset 0 1px 0 rgba(255,255,255,0.06); transition: all 0.08s; text-align:center; white-space:nowrap; }
#editor-root button.btn:hover { border-color:#5a7ab0; color:#fff; }
#editor-root button.btn:active, #editor-root button.btn.active { background:linear-gradient(#1a2033,#232b40); box-shadow: inset 0 2px 4px rgba(0,0,0,0.6); transform: translateY(1px); border-color:#4488ff; color:#7fc4ff; }
#editor-root .row2 { display:flex; gap:4px; }
#editor-root .row2 button.btn { flex:1; }
#editor-root #bottombar { --acc-border:#3a4a6a; --acc-hover:#5a7ab0; --acc-icon:#e8f4ff; --acc-line:#2a3550; position:fixed; left:50%; transform:translateX(-50%); bottom:10px; height:56px; background:#181d2b; border:1px solid var(--acc-line); border-radius:12px; display:flex; align-items:center; gap:0; padding:0 10px; white-space:nowrap; z-index:30; box-shadow:0 8px 26px rgba(0,0,0,0.6); }
#editor-root .tb-cluster { display:flex; align-items:center; gap:3px; }
#editor-root .tb-gap { width:15px; flex:0 0 15px; }
#editor-root .tb-bigsep { width:44px; flex:0 0 44px; }
#editor-root .tb-item { position:relative; display:flex; align-items:center; }
#editor-root button.btn.tb-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:5px 8px; font-size:10px; line-height:1; min-width:50px; height:44px; }
#editor-root button.btn.tb-btn svg { width:18px; height:18px; display:block; }
#editor-root #bottombar button.btn { border-color:var(--acc-border); }
#editor-root #bottombar button.btn svg { color:var(--acc-icon); }
#editor-root #bottombar button.btn:hover { border-color:var(--acc-hover); }
#editor-root #bottombar button.btn:active, #editor-root #bottombar button.btn.active { border-color:var(--acc-hover); color:var(--acc-icon); }
#editor-root #size-readout, #editor-root #candle-count-readout, #editor-root #cursor-readout { font-size:10px; color:#8fb4d8; padding:0 8px 0 4px; white-space:nowrap; letter-spacing:0.3px; }
#editor-root .popout { position:absolute; bottom:calc(100% + 12px); left:0; background:#12172a; border:1px solid #3a4a6a; border-radius:7px; padding:8px; display:none; flex-direction:column; gap:5px; min-width:180px; max-height:220px; overflow:auto; box-shadow:0 6px 18px rgba(0,0,0,0.55); z-index:40; }
#editor-root .popout.right-align { left:auto; right:0; }
#editor-root .popout.open { display:flex; }
#editor-root .popout button.btn { text-align:left; }
#editor-root #curve-actions { position:fixed; display:none; gap:6px; z-index:35; background:rgba(10,14,26,0.85); border:1px solid #3a4a6a; border-radius:7px; padding:4px; box-shadow:0 6px 18px rgba(0,0,0,0.6); }
#editor-root #curve-actions.open { display:flex; }
#editor-root #curve-actions button.btn { padding:5px 10px; }
#editor-root #layersbar { position:fixed; left:50%; transform:translateX(-50%); top:42px; background:#181d2b; border:1px solid #2a3550; border-radius:12px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:7px 10px; white-space:nowrap; z-index:30; box-shadow:0 8px 26px rgba(0,0,0,0.6); }
#editor-root .lb-row { display:flex; align-items:center; justify-content:center; gap:5px; }
#editor-root .lb-item { display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:0; padding:2px; margin:0; cursor:pointer; user-select:none; font-family:'Courier New',monospace; transition:opacity 0.1s; }
#editor-root .lb-sw { width:22px; height:22px; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.45); }
#editor-root .lb-key { font-size:10px; line-height:1; color:#8fb4d8; }
#editor-root .lb-item.unset { opacity:0.26; }
#editor-root .lb-item.set { opacity:0.55; }
#editor-root .lb-item:hover { opacity:0.85; }
#editor-root .lb-item.sel, #editor-root .lb-item.sel:hover { opacity:1; }
#editor-root .lb-item.sel .lb-sw { box-shadow:0 0 0 2px #ffffff, 0 0 9px rgba(255,255,255,0.55), inset 0 0 0 1px rgba(0,0,0,0.45); }
#editor-root .lb-item.sel .lb-key { color:#ffffff; }
#editor-root .lb-tooltip { position:fixed; z-index:40; display:none; pointer-events:none; background:#12172a; border:1px solid #3a4a6a; border-radius:6px; padding:6px 9px; font-size:11px; font-family:'Courier New',monospace; color:#cfe0f0; line-height:1.4; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,0.55); }
#editor-root .lb-tooltip.show { display:block; }
#editor-root .lb-tooltip .dot { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:middle; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.45); }
#editor-root #layer-draft { position:fixed; top:98px; left:50%; transform:translateX(-50%); width:250px; z-index:29; }
#editor-root .draft-box { background:#12172a; border:1px solid #3a4a6a; border-radius:7px; padding:8px; display:flex; flex-direction:column; gap:6px; box-shadow:0 6px 18px rgba(0,0,0,0.55); }
#editor-root .draft-box .dz-hint { font-size:11px; color:#9fc4e8; line-height:1.35; }
#editor-root .dz-stepper { display:flex; align-items:center; gap:6px; font-size:11px; color:#cfe0f0; }
#editor-root .dz-stepper .dz-lbl { width:24px; }
#editor-root .dz-stepper .dz-val { min-width:22px; text-align:center; font-weight:bold; }
#editor-root .dz-stepper button.btn { padding:2px 8px; }
#editor-root .tg-wrap { display:flex; align-items:center; gap:6px; }
#editor-root button.btn.tg-btn { font-size:12px; padding:7px 14px; letter-spacing:0.4px; display:flex; align-items:center; gap:6px; }
#editor-root button.btn.tg-btn.on { background:linear-gradient(#2b5c48,#1d3f31); border-color:#3fd39a; color:#bdf5dd; box-shadow:0 0 0 1px rgba(63,211,154,0.35), 0 0 10px rgba(63,211,154,0.25); }
#editor-root button.btn.tg-btn.on#toggle-wicks-btn { background:linear-gradient(#2a4a6e,#1c3049); border-color:#5fa8ff; color:#cfe8ff; box-shadow:0 0 0 1px rgba(95,168,255,0.35), 0 0 10px rgba(95,168,255,0.25); }
#editor-root #lb-layers { display:none; }
#editor-root #layersbar.wicks-on #lb-layers { display:flex; }
#editor-root .kk { font-style:normal; font-size:9px; line-height:1; color:#6f8fb4; border:1px solid #33415e; border-radius:3px; padding:2px 3px; margin-left:6px; opacity:0.85; }
#editor-root button.btn.tb-btn .kk { margin-left:4px; }
#editor-root .popout button.btn { display:flex; align-items:center; justify-content:space-between; }
#editor-root .popout button.btn .kk { margin-left:10px; }
#editor-root #help-btn { position:fixed; top:44px; right:12px; z-index:60; width:30px; height:30px; border-radius:50%; background:#181d2b; border:1px solid #3a4a6a; color:#9fc4e8; font-family:'Courier New',monospace; font-size:15px; font-weight:bold; cursor:pointer; line-height:1; padding:0; box-shadow:0 4px 14px rgba(0,0,0,0.5); }
#editor-root #help-btn:hover { border-color:#5fa8ff; color:#fff; }
#editor-root #help-panel { position:fixed; top:82px; right:12px; z-index:60; width:330px; max-height:calc(100vh - 102px); overflow:auto; background:#12172a; border:1px solid #3a4a6a; border-radius:9px; padding:12px; display:none; box-shadow:0 10px 30px rgba(0,0,0,0.65); color:#cfe0f0; font-size:11px; line-height:1.5; }
#editor-root #help-panel.open { display:block; }
#editor-root #help-panel h3 { font-size:11px; color:#7fc4ff; letter-spacing:1px; text-transform:uppercase; margin:12px 0 5px; font-weight:bold; }
#editor-root #help-panel h3:first-child { margin-top:0; }
#editor-root #help-panel p { margin:0 0 6px; color:#9fb8d0; }
#editor-root #help-panel .hp-line { display:flex; gap:8px; margin:2px 0; }
#editor-root #help-panel .hp-line b { color:#e8f4ff; min-width:74px; font-weight:bold; }
#editor-root #help-panel table { width:100%; border-collapse:collapse; }
#editor-root #help-panel td { padding:2px 4px; vertical-align:top; }
#editor-root #help-panel td.k { width:86px; color:#ffd76a; white-space:nowrap; font-weight:bold; }
#editor-root #help-panel .hp-big { margin-top:10px; padding:8px; border-radius:6px; background:rgba(63,211,154,0.09); border:1px solid rgba(63,211,154,0.3); color:#bdf5dd; }
#editor-root #help-panel button.btn { width:100%; }
#editor-root #tut { position:fixed; inset:0; z-index:80; display:none; }
#editor-root #tut.open { display:block; }
#editor-root .tut-mask { position:fixed; background:rgba(4,7,14,0.80); cursor:pointer; }
#editor-root #tut-ring { position:fixed; border-radius:10px; pointer-events:none; box-shadow:0 0 0 3px rgba(127,196,255,0.9), 0 0 26px 6px rgba(127,196,255,0.45); display:none; }
#editor-root #tut-card { position:fixed; width:290px; display:none; background:#12172a; border:1px solid #4a6a9a; border-radius:9px; padding:13px; color:#dce9f6; font-size:12px; line-height:1.5; box-shadow:0 12px 34px rgba(0,0,0,0.7); }
#editor-root #tut-card.wide { width:360px; }
#editor-root #tut-card h4 { font-size:13px; color:#7fc4ff; margin-bottom:6px; letter-spacing:0.5px; }
#editor-root #tut-card .tut-body { margin-bottom:11px; color:#c3d6e8; }
#editor-root #tut-card .tut-foot { display:flex; align-items:center; gap:6px; }
#editor-root #tut-card .tut-count { font-size:10px; color:#7a97b5; margin-right:auto; }
#editor-root #tut-welcome { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:400px; max-width:calc(100vw - 32px); background:#12172a; border:1px solid #4a6a9a; border-radius:11px; padding:22px; color:#dce9f6; text-align:center; display:none; box-shadow:0 16px 46px rgba(0,0,0,0.75); }
#editor-root #tut-welcome h2 { font-size:26px; color:#7fc4ff; letter-spacing:3px; margin-bottom:12px; }
#editor-root #tut-welcome p { font-size:12.5px; line-height:1.6; color:#c3d6e8; margin-bottom:18px; }
#editor-root #tut-welcome .row2 { justify-content:center; }
#editor-root #tut-welcome .row2 button.btn { flex:0 0 auto; padding:9px 18px; font-size:12px; }
#editor-root #hint { position:fixed; bottom:74px; left:10px; color:#6a9abb; font-size:11px; background:rgba(10,14,24,0.72); padding:5px 9px; border-radius:5px; pointer-events:none; z-index:25; max-width:70vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#editor-root #hint.flash { color:#ffd76a; background:rgba(60,40,10,0.9); }
#editor-root .onb-bubble { position:fixed; z-index:50; display:none; pointer-events:none; background:rgba(10,14,24,0.95); border:1px solid #2a3a4f; border-radius:6px; color:#c3d6e8; font-size:11.5px; line-height:1.55; padding:9px 12px; max-width:240px; box-shadow:0 4px 14px rgba(0,0,0,0.5); }
#editor-root .onb-bubble.onb-open { display:block; }
#editor-root .onb-bubble.onb-above::after, #editor-root .onb-bubble.onb-below::after { content:''; position:absolute; width:0; height:0; left:var(--onb-arrow-left, 50%); margin-left:-7px; }
#editor-root .onb-bubble.onb-above::after { top:100%; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #10192a; }
#editor-root .onb-bubble.onb-below::after { bottom:100%; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:7px solid #10192a; }
#editor-root .onb-bubble.onb-final { text-align:center; }
#editor-root .onb-bubble .onb-foot { margin-top:8px; }
#editor-root .onb-bubble .onb-gotit-btn { pointer-events:auto; font-size:11px; padding:4px 10px; }
/* Intro coach mark (step 23): the first message, blocks the canvas until its button is clicked. Bordered and bright, not a dialog that owns the screen. z-index 29 sits under the toolbar (30) so an open Chop popout draws over it; only its button takes clicks. */
#editor-root .onb-bubble.onb-intro { z-index:29; width:300px; max-width:calc(100vw - 16px); border:2px solid #7fc4ff; border-radius:9px; background:#10192a; color:#eaf4ff; font-size:13.5px; font-weight:bold; padding:12px 14px; box-shadow:0 0 0 4px rgba(127,196,255,0.18), 0 8px 24px rgba(0,0,0,0.6); }
#editor-root .onb-bubble.onb-intro.onb-above::after { margin-left:-9px; border-left-width:9px; border-right-width:9px; border-top:10px solid #7fc4ff; }
#editor-root .onb-bubble.onb-intro .onb-foot { text-align:right; }
#editor-root .onb-bubble .onb-intro-btn::before { content:'Got it'; }
/* Placement inside the site shell. Fixed elements stay viewport-based so the editor's own pointer maths is untouched; they are shifted past the sidebar here. */
#editor-root { --ed-left: var(--side); position: relative; flex: 1 1 auto; min-width: 0; height: 100vh; }
#editor-root #canvas-wrap { left: var(--ed-left); }
/* Surround (step 22, step 43): the pane is inset by --ed-gap and has no frame; the custom properties come from .ed-shell (css/surround.css). The wrap is transparent so the sky and clouds show around the canvas; the canvas alone keeps the dark grid fill. A band of sky under the canvas (--ed-tb-room) holds the bottom toolbar. The canvas maps pointers from its own bounding rect, so the inset needs no change to the drawing code. */
#editor-root { z-index: 21; background: transparent; }
#editor-root #canvas-wrap { top: var(--ed-gap, 0px); right: var(--ed-gap, 0px); bottom: calc(var(--ed-gap, 0px) + var(--ed-tb-room, 0px)); left: calc(var(--ed-left) + var(--ed-gap, 0px)); background: transparent; border: 0; gap: 6px; }
#editor-root #c { background: #131722; border-radius: 10px; box-shadow: 0 6px 22px rgba(20, 40, 70, .18); }
#editor-root #grip-hint { align-self: flex-start; max-width: 100%; background: var(--ed-glass); color: var(--ed-glass-ink); border-radius: 6px; font-weight: bold; }
#editor-root #bottombar { bottom: calc(var(--ed-gap, 0px) + 10px); background: var(--ed-glass); border-color: rgba(255, 255, 255, .6); box-shadow: 0 4px 16px rgba(20, 40, 70, .12); }
#editor-root #bottombar #size-readout, #editor-root #bottombar #candle-count-readout, #editor-root #bottombar #cursor-readout { color: var(--ed-glass-ink); font-weight: bold; }
/* editor.js colours #size-readout inline (#8fb4d8 for all candles, #7fc4ff when some are chosen), light blue meant for a dark bar. Over the light backing both become dark ink; the chosen state stays a distinct blue. */
#editor-root #bottombar #size-readout { color: var(--ed-glass-ink) !important; }
#editor-root #bottombar #size-readout[style*="7fc4ff"] { color: #0b4aa8 !important; }
/* step 41: below the hint band and the 32px grip strip, so it covers neither */
#editor-root #layersbar { top: calc(var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + 32px + 8px); }
#editor-root #layer-draft { top: calc(var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + 32px + 64px); }
#editor-root #help-btn { top: calc(var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + 1px); right: calc(var(--ed-gap, 0px) + 12px); }
#editor-root #help-panel { top: calc(var(--ed-gap, 0px) + var(--grip-hint-h, 18px) + 6px + 38px); right: calc(var(--ed-gap, 0px) + 12px); }
#editor-root #bottombar, #editor-root #layersbar, #editor-root #layer-draft { left: calc(50% + var(--ed-left) / 2); }
#editor-root #hint { left: calc(var(--ed-left) + var(--ed-gap, 0px) + 10px); bottom: calc(var(--ed-gap, 0px) + var(--ed-tb-room, 0px) + 10px); }
#editor-root button.btn { font-weight: 400; }
@media (max-width: 820px) {
  #editor-root { --ed-left: 0px; }
  #editor-root #canvas-wrap { bottom: calc(62px + var(--ed-gap, 0px) + var(--ed-tb-room, 0px)); }
  #editor-root #bottombar { bottom: calc(72px + var(--ed-gap, 0px)); }
  #editor-root #hint { bottom: calc(62px + var(--ed-gap, 0px) + var(--ed-tb-room, 0px) + 10px); }
}

/* fix2: the bottom bar is ~750px wide and nowrap; on narrow viewports it scrolls sideways so every button stays reachable */
@media (max-width: 900px) {
  #editor-root #bottombar { max-width: calc(100vw - 16px); box-sizing: border-box; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
  #editor-root #bottombar > * { flex: none; }
}