@import url("./viewport-fit.css?v=20260901-sprit-web-r1");
/* Sprit3Runn3r // stage-safe contextual instrument deck.
   Forge participates in the existing preview/right stack on larger viewports and
   owns a reserved bottom row on compact viewports. It never overlays the stage. */

:root{
  --s3-instrument-stack-h:260px;
  --s3-instrument-open-h:220px;
  --s3-instrument-rail:48px;
  --s3-instrument-mobile-nav:38px;
  --s3-instrument-row:var(--s3-instrument-rail);
  --s3-instrument-bottom-row:var(--s3-instrument-rail);
  --s3-instrument-group-size:46px;
}
html[data-sprit-instrument-open="true"]{--s3-instrument-row:var(--s3-instrument-stack-h);--s3-instrument-bottom-row:var(--s3-instrument-open-h)}

/* Reclaim the old standalone tool column. The source stage gains that space. */
body.sprit-instrument-ready .console{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:var(--s3-fit-header) minmax(0,1fr) var(--s3-fit-status)!important;
}
body.sprit-instrument-ready .console-header{grid-column:1!important;grid-row:1!important;grid-template-columns:minmax(0,1fr) auto!important}
body.sprit-instrument-ready .console-header>.quick-actions{display:none!important}
body.sprit-instrument-ready .workspace{grid-column:1!important;grid-row:2!important;min-width:0!important;min-height:0!important;transition:none!important}
body.sprit-instrument-ready .status-bar{grid-column:1!important;grid-row:3!important}
body.sprit-instrument-ready .mobile-nav{display:none}
body.sprit-instrument-ready #sourceScreen .stage-header{justify-content:flex-start!important}
body.sprit-instrument-ready .timeline .screen-header{justify-content:flex-start!important}

/* Desktop/tablet: preview and Forge share the pre-existing right stack only. */
html[data-sprit-instrument-dock="stack"] body.sprit-instrument-ready .right-stack{
  display:grid!important;
  grid-template-rows:minmax(110px,1fr) var(--s3-instrument-row)!important;
  gap:var(--s3-gap)!important;
  min-width:0!important;
  min-height:0!important;
  transition:grid-template-rows .16s cubic-bezier(.2,.75,.2,1);
}
html[data-sprit-instrument-dock="stack"] body.sprit-instrument-ready #previewScreen{grid-row:1!important;min-height:0!important}
html[data-sprit-instrument-dock="stack"] body.sprit-instrument-ready .forge-panel{grid-row:2!important}

.forge-panel.sprit-instrument-console{
  --forge-active-color:#55efff;
  position:relative!important;inset:auto!important;z-index:30!important;
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;
  max-width:none!important;max-height:none!important;
  display:grid!important;grid-template-rows:38px 45px minmax(0,1fr)!important;
  overflow:hidden!important;pointer-events:auto!important;opacity:1!important;transform:none!important;
  border:1px solid rgba(112,220,242,.22);border-radius:12px;
  background:linear-gradient(150deg,rgba(12,31,40,.985),rgba(3,9,13,.995) 52%,rgba(12,8,27,.98));
  box-shadow:inset 0 1px rgba(220,252,255,.07),0 10px 28px rgba(0,0,0,.22);
  isolation:isolate;contain:layout paint style;
}
.forge-panel.sprit-instrument-console::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(112deg,transparent 0 45%,rgba(112,237,255,.025) 50%,transparent 55% 100%),radial-gradient(circle at 100% 0,rgba(168,140,255,.07),transparent 34%)}
.instrument-head{display:flex;align-items:center;gap:7px;min-width:0;padding:4px 6px;border-bottom:1px solid rgba(112,220,242,.14);background:linear-gradient(90deg,rgba(89,219,244,.08),rgba(7,15,20,.94) 58%,rgba(72,49,119,.08))}
.instrument-head .forge-mark{display:grid;place-items:center;width:27px;height:27px;flex:none;border:1px solid rgba(112,237,255,.36);border-radius:8px;color:var(--s3-cyan);background:linear-gradient(180deg,rgba(26,74,87,.7),rgba(6,21,28,.9));box-shadow:inset 0 0 12px rgba(112,237,255,.06)}
.instrument-head .forge-title{display:flex;min-width:0;flex:1;flex-direction:column;line-height:1.02}.instrument-head .forge-title b{font-size:8.5px;letter-spacing:.14em}.instrument-head .forge-title small{margin-top:3px;color:var(--s3-muted);font-size:5.8px;letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.instrument-active,.instrument-density{flex:none;padding:4px 6px;border:1px solid rgba(112,237,255,.14);border-radius:6px;background:#040c10;color:#8ab6bf;font:750 6px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.09em}
.instrument-active{color:#b8f4fb;border-color:rgba(112,237,255,.24)}
#instrumentCollapse{width:29px;height:29px;flex:none;border:1px solid rgba(112,220,242,.2);border-radius:8px;background:linear-gradient(180deg,#0d252e,#061117);color:#c0edf3;font-size:14px}
#instrumentCollapse:hover{border-color:rgba(112,237,255,.48);color:#fff}

.instrument-shell{display:contents}
.instrument-groups{grid-row:2;display:flex;align-items:stretch;gap:3px;min-width:0;min-height:0;padding:4px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:none;border-bottom:1px solid rgba(112,220,242,.12);background:linear-gradient(90deg,#030b0f,rgba(7,21,28,.94),#040b10)}
.instrument-groups::-webkit-scrollbar{display:none}
.instrument-group-button{--forge-active-color:var(--s3-cyan);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;gap:5px;flex:1 0 var(--s3-instrument-group-size);min-width:var(--s3-instrument-group-size);min-height:36px;padding:4px 7px;border:1px solid transparent!important;border-radius:8px!important;background:transparent!important;color:#668991!important;font-weight:850!important;letter-spacing:.055em!important;overflow:hidden}
.instrument-group-button:hover{border-color:rgba(112,220,242,.19)!important;color:#c8f0f5!important;background:rgba(24,65,77,.22)!important}
.instrument-group-button.active,.instrument-group-button[aria-selected="true"]{border-color:rgba(112,237,255,.38)!important;color:#f0feff!important;background:linear-gradient(180deg,rgba(35,116,135,.3),rgba(5,20,27,.9))!important;box-shadow:inset 0 -2px var(--s3-cyan)!important}
.instrument-group-button[data-instrument-group="forge"].active{border-color:color-mix(in srgb,var(--forge-active-color) 62%,rgba(112,237,255,.35))!important;box-shadow:inset 0 -2px var(--forge-active-color)!important}
.instrument-icon{display:block;color:#92bbc3;font-size:15px;line-height:1}.instrument-group-button.active .instrument-icon{color:var(--s3-cyan);text-shadow:0 0 8px rgba(112,237,255,.5)}
.instrument-group-button[data-instrument-group="forge"].active .instrument-icon{color:var(--forge-active-color);text-shadow:0 0 9px var(--forge-active-color)}
.instrument-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:inherit;font-size:6px;white-space:nowrap}
.instrument-state-dot{position:absolute;right:4px;top:4px;width:3px;height:3px;border-radius:50%;background:#36535a}.instrument-group-button.active .instrument-state-dot{background:var(--s3-cyan);box-shadow:0 0 6px var(--s3-cyan)}
.instrument-content{grid-row:3;min-width:0;min-height:0;overflow:hidden;background:linear-gradient(150deg,rgba(12,30,38,.74),rgba(3,9,13,.96))}
.instrument-pane{width:100%;height:100%;min-width:0;min-height:0;padding:8px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(88,174,190,.45) transparent}
.instrument-pane[hidden]{display:none!important}
.instrument-pane:not([hidden])>.tab-panel{display:block!important;width:100%!important;height:auto!important;min-height:100%!important;padding:0!important;overflow:visible!important;background:transparent!important}

/* Closed mode is a true rail. No hidden slab continues to consume the preview stack. */
.forge-panel[data-open="false"]{grid-template-rows:minmax(0,1fr)!important;border-radius:10px}
.forge-panel[data-open="false"] .instrument-head,.forge-panel[data-open="false"] .instrument-content{display:none!important}
.forge-panel[data-open="false"] .instrument-groups{grid-row:1!important;border-bottom:0!important;padding:4px!important}
.forge-panel[data-open="false"] .instrument-group-button{grid-template-columns:1fr;justify-items:center;flex:1 0 38px;min-width:38px;padding:3px}
.forge-panel[data-open="false"] .instrument-label{display:none!important}
.forge-panel[data-open="false"] .instrument-state-dot{right:5px;top:5px}

/* File/history */
.instrument-pane[data-instrument-pane="file"] .quick-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:6px;width:100%;max-width:none!important;overflow:visible!important}
.instrument-pane[data-instrument-pane="file"] .quick-actions .key{display:block!important;width:100%!important;min-width:0!important;height:34px!important;padding:0 6px!important;font-size:7px!important;overflow:hidden;text-overflow:ellipsis}
.instrument-pane[data-instrument-pane="file"] .quick-actions input[hidden]{display:none!important}

/* Editor tools */
body.sprit-instrument-ready .instrument-pane .tool-rail{position:static!important;display:grid!important;grid-template-columns:repeat(auto-fit,minmax(64px,1fr))!important;gap:5px!important;width:100%!important;height:auto!important;max-height:none!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
body.sprit-instrument-ready .instrument-pane .tool-rail>.tool{min-width:0!important;min-height:46px!important;height:auto!important;padding:5px 3px!important;font-size:6.5px!important;line-height:1!important}
body.sprit-instrument-ready .instrument-pane .tool-rail>.tool span{font-size:16px!important}
body.sprit-instrument-ready .instrument-pane .tool-rail>.tool-separator{display:none!important}

/* Forge color instrument */
.forge-color-bay{display:grid;grid-template-columns:68px minmax(0,1fr);gap:8px;padding:0;margin:0;background:transparent;border:0}
.instrument-section-head{grid-column:1/-1;display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:7px;border-bottom:1px solid var(--s3-line)}
.instrument-section-head b{color:#d9f9fd;font-size:9px;letter-spacing:.12em}.instrument-section-head small{color:var(--s3-muted);font-size:6px;letter-spacing:.1em}
.forge-color-well{display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:5px}.forge-color-well>span{color:#779aa3;font-size:6px;letter-spacing:.1em}
.forge-live-swatch{display:block;width:42px;height:8px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:var(--forge-active-color);box-shadow:0 0 11px color-mix(in srgb,var(--forge-active-color) 38%,transparent)}
.forge-native-color{display:grid!important;place-items:center!important;gap:4px!important;margin:0!important;color:#7498a1!important;font-size:0!important}.forge-native-color input[type="color"]{width:54px!important;height:54px!important;padding:2px!important;border-radius:12px!important}
.forge-rgb{display:grid;grid-template-columns:14px minmax(0,1fr) 28px;gap:5px 6px;align-items:center;min-width:0;color:#789ca5;font-size:7px}.forge-rgb input{min-width:0}.forge-rgb output{text-align:right;color:#a9d3da;font-variant-numeric:tabular-nums}
.forge-color-bay .palette-module{grid-column:1/-1;margin:2px 0 0!important;padding:7px!important}.forge-color-bay .palette-list{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.forge-color-bay .tool[data-tool="eyedropper"]{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:35px!important}.forge-color-bay .tool[data-tool="eyedropper"] span{margin:0;font-size:14px}

/* Stage / playback / timeline instruments */
.instrument-pane[data-instrument-pane="view"] .mode-deck{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:7px;width:100%}
.instrument-pane[data-instrument-pane="view"] .mode-deck button{height:34px!important;min-width:0!important}
.instrument-pane[data-instrument-pane="view"] .screen-actions{display:grid!important;grid-template-columns:1fr;gap:6px;width:100%}
.instrument-pane[data-instrument-pane="view"] .stage-native-controls{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%}
.instrument-pane[data-instrument-pane="view"] .screen-actions>button{width:100%;height:32px!important}
.instrument-pane[data-instrument-pane="play"] .preview-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:7px;width:100%}
.instrument-pane[data-instrument-pane="play"] .preview-actions button{height:32px!important}
.instrument-pane[data-instrument-pane="play"] .transport{display:grid!important;grid-template-columns:34px 44px 34px minmax(44px,1fr);gap:5px;padding:7px;border:1px solid var(--s3-line);border-radius:8px;background:#061015}
.instrument-pane[data-instrument-pane="play"] .transport button{width:100%!important}
.instrument-pane[data-instrument-pane="play"] .inline-slider{display:grid!important;grid-template-columns:28px minmax(0,1fr) 30px;gap:6px;margin-top:7px;padding:8px;border:1px solid var(--s3-line);border-radius:8px;background:#061015}
.instrument-pane[data-instrument-pane="timeline"] .timeline-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%}
.instrument-pane[data-instrument-pane="timeline"] .timeline-actions span{grid-column:1/-1;display:block!important;white-space:normal!important;color:var(--s3-muted);font-size:7px}
.instrument-pane[data-instrument-pane="timeline"] .timeline-actions .module-button{min-width:0}.instrument-pane[data-instrument-pane="timeline"] #newFrameButton{grid-column:1/-1}

/* Density is visual compression only. It never changes stage ownership. */
.forge-panel[data-density="full"] .instrument-group-button{min-width:68px}.forge-panel[data-density="full"] .instrument-label{font-size:6.2px}
.forge-panel[data-density="compact"] .instrument-group-button{min-width:50px}
.forge-panel[data-density="squish"] .instrument-head .forge-title small,.forge-panel[data-density="squish"] .instrument-density{display:none}.forge-panel[data-density="squish"] .instrument-pane{padding:6px}.forge-panel[data-density="squish"] .instrument-label{display:none}.forge-panel[data-density="squish"] .instrument-group-button{grid-template-columns:1fr;justify-items:center;min-width:40px;padding-inline:4px}
.forge-panel[data-density="rail"] .instrument-label,.forge-panel[data-density="rail"] .instrument-density{display:none}

/* Compact viewports get dedicated rows. Neither navigation nor Forge floats over canvas. */
html[data-sprit-instrument-dock="bottom"] body.sprit-instrument-ready .console{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:var(--s3-fit-header) minmax(0,1fr) var(--s3-instrument-mobile-nav) var(--s3-instrument-bottom-row)!important}
html[data-sprit-instrument-dock="bottom"] body.sprit-instrument-ready .console-header{grid-column:1!important;grid-row:1!important}
html[data-sprit-instrument-dock="bottom"] body.sprit-instrument-ready .workspace{grid-column:1!important;grid-row:2!important}
html[data-sprit-instrument-dock="bottom"] body.sprit-instrument-ready .mobile-nav{position:static!important;inset:auto!important;grid-column:1!important;grid-row:3!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:3px;border:1px solid rgba(113,215,236,.18);border-radius:9px;background:#041016;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-sprit-instrument-dock="bottom"] body.sprit-instrument-ready .mobile-nav button{min-height:30px;border:0;background:transparent;color:#668991;font-size:6.5px;font-weight:850}
html[data-sprit-instrument-dock="bottom"] body.sprit-instrument-ready .mobile-nav button.active{color:#e8fcff;background:rgba(37,119,139,.22);box-shadow:inset 0 -2px var(--s3-cyan)}
html[data-sprit-instrument-dock="bottom"] body.sprit-instrument-ready .mobile-guide-button{color:#b9a8f1!important}
html[data-sprit-instrument-dock="bottom"] body.sprit-instrument-ready .forge-panel{grid-column:1!important;grid-row:4!important;min-height:0!important}
html[data-sprit-instrument-dock="bottom"] body.sprit-instrument-ready .status-bar{display:none!important}
html[data-sprit-instrument-dock="bottom"] .forge-panel[data-open="true"]{grid-template-rows:34px 43px minmax(0,1fr)!important}
html[data-sprit-instrument-dock="bottom"] .forge-panel .instrument-head{padding:3px 5px}
html[data-sprit-instrument-dock="bottom"] .forge-panel .instrument-head .forge-title small,html[data-sprit-instrument-dock="bottom"] .forge-panel .instrument-density{display:none}
html[data-sprit-instrument-dock="bottom"] .forge-panel .instrument-groups{padding:3px}
html[data-sprit-instrument-dock="bottom"] .forge-panel .instrument-group-button{flex:1 0 42px;min-width:42px;min-height:34px;padding:3px}
html[data-sprit-instrument-dock="bottom"] .forge-panel .instrument-label{display:none}
html[data-sprit-instrument-dock="bottom"] .forge-panel .instrument-pane{padding:6px}
html[data-sprit-instrument-dock="bottom"] .forge-panel .instrument-pane .tool-rail{grid-template-columns:repeat(auto-fit,minmax(52px,1fr))!important}
html[data-sprit-instrument-dock="bottom"] .forge-color-bay{grid-template-columns:58px minmax(0,1fr)}
html[data-sprit-instrument-dock="bottom"] .forge-native-color input[type="color"]{width:48px!important;height:48px!important}
html[data-sprit-instrument-dock="bottom"] .instrument-pane[data-instrument-pane="file"] .quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-sprit-instrument-dock="bottom"] .instrument-pane[data-instrument-pane="file"] .quick-actions .key{height:30px!important;font-size:6px!important}
html[data-sprit-instrument-dock="bottom"] .instrument-pane[data-instrument-pane="timeline"] .timeline-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html[data-sprit-instrument-dock="bottom"] .instrument-pane[data-instrument-pane="timeline"] #newFrameButton{grid-column:auto}

.forge-summon{display:none!important}

@media(max-width:760px){
  body.sprit-instrument-ready .console{padding:calc(5px + var(--s3-safe-top)) calc(5px + var(--s3-safe-right)) calc(5px + var(--s3-safe-bottom)) calc(5px + var(--s3-safe-left))!important;gap:5px!important}
  body.sprit-instrument-ready .workspace{display:block!important;position:relative!important;min-height:0!important;overflow:hidden!important}
  body.sprit-instrument-ready #sourceScreen .stage-header,body.sprit-instrument-ready #previewScreen .screen-header,body.sprit-instrument-ready .timeline .screen-header{min-height:28px!important;height:28px!important;flex-wrap:nowrap!important;padding:0 6px!important}
  body.sprit-instrument-ready #sourceScreen{grid-template-rows:28px minmax(0,1fr) 20px!important}
  body.sprit-instrument-ready #previewScreen{grid-template-rows:28px minmax(0,1fr)!important}
  body.sprit-instrument-ready .timeline{grid-template-rows:28px minmax(0,1fr)!important}
}
@media(max-width:520px){
  html[data-sprit-instrument-dock="bottom"] .instrument-pane[data-instrument-pane="file"] .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-sprit-instrument-dock="bottom"] .forge-panel .instrument-pane .tool-rail{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html[data-sprit-instrument-dock="bottom"] .forge-color-bay .palette-list{grid-template-columns:repeat(8,minmax(0,1fr))!important}
}
@media(prefers-reduced-motion:reduce){html[data-sprit-instrument-dock="stack"] body.sprit-instrument-ready .right-stack{transition:none!important}}