/* Sabi Glass Studio: the same panels, swatches, sliders and switches. */
:root,body.dark{--ui:#536472;--ui-bg:#ffffffd9;--ui-line:#d9e1e6}
#rail.glass-studio{position:fixed;inset:20px 20px 88px auto;width:312px;max-height:none;padding:0;border:0;border-radius:0;overflow:visible;background:none;backdrop-filter:none;box-shadow:none;z-index:70;transform:none}
#rail .gs-panel{height:100%;max-height:none;width:100%;margin:0;pointer-events:none}
#rail.is-open .gs-panel{pointer-events:auto}
#rail .gs-body{min-height:0;flex:1}
#rail [hidden]{display:none!important}
#rail .gs-header{padding:20px 20px 15px}
.studio-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 20px 18px;padding:4px;background:#eaf0f3;border:1px solid #e1e8ec;border-radius:12px;flex:none}
.studio-tabs button{min-height:32px;border:0;border-radius:8px;background:none;color:#7a8790;font-size:12px}
.studio-tabs button[aria-pressed=true]{background:#fff;color:#253848;box-shadow:0 1px 4px #283a4b10}
#rig-controls .grp{border-top:1px solid #dde3e7;margin:0;padding:14px 0 17px}
#rig-controls .grp>h4{margin:0 0 14px;color:#87919a;font:500 10px/1.2 Selecta,Arial,sans-serif;letter-spacing:.12em;opacity:1}
.chip{border:1px solid #dce4e9;border-radius:10px;background:transparent;color:#74818a;font:400 12px/1.1 Selecta,Arial,sans-serif;padding:8px 10px;letter-spacing:0}
.chip:hover{background:#e9eef2;border-color:#c6d3dc}
.chip[aria-pressed=true],.pk-kinds .chip[aria-pressed=true],body.dark .pk-kinds .chip[aria-pressed=true]{color:#263d4d;background:#e8eff3;border-color:#abc0ce}
.chips{gap:6px}
.glass-entry{width:100%;display:flex;align-items:center;gap:11px;padding:12px;margin-bottom:18px;border:1px solid #d4dfe6;border-radius:14px;color:#283b48;background:#fff9;text-align:left;cursor:pointer}
.glass-entry>span:nth-child(2){flex:1;font-size:13px}
.glass-entry small{display:block;font-size:11px;color:#89949c;margin-top:3px}
.glass-entry>span:last-child{font-size:22px;color:#8c9ca6}
.glass-enable{padding-bottom:16px;border-bottom:1px solid #dde3e7;font-size:13px;margin-bottom:16px}
.glass-settings-content>.gs-footer{margin:0 -20px -8px;position:sticky;bottom:-8px;background:#f5f8fa;z-index:2}
#railBtn.gs-trigger{display:flex;position:fixed;top:auto;bottom:20px;right:20px;left:auto;z-index:72;height:48px;padding:0 16px 0 11px;font:400 13px/1.4 Selecta,sans-serif;letter-spacing:0}
body.rail-open #railBtn.gs-trigger{background:#ffffffd9;color:#283039;border-color:#fff}
body.rail-open #railBtn .gs-trigger-plus{transform:rotate(45deg)}
#dock{left:20px;right:352px;bottom:20px;max-width:none;width:auto;transform:none;border:1px solid #fff;border-radius:24px;padding:6px;background:#ffffffd9;backdrop-filter:blur(24px) saturate(1.3);box-shadow:0 5px 24px #24344313,0 1px 3px #24344317;z-index:65}
#dock .chip{border-radius:16px;border:1px solid transparent;padding:10px 12px;flex:none}
#dock .chip[aria-pressed=true]{background:#fff;border-color:#c6d3dc;color:#253848;box-shadow:0 2px 5px #283a4b09}
body:not(.rail-open) #dock{right:220px}
#playBtn{min-height:42px;border:1px solid #fff;background:#ffffffd9;backdrop-filter:blur(24px) saturate(1.3);color:#283039;font:400 13px/1 Selecta,sans-serif;box-shadow:0 5px 24px #24344313,0 1px 3px #24344317;letter-spacing:0}
#playBtn[aria-pressed=true],body.dark #playBtn[aria-pressed=true]{background:#e8eff3;color:#263d4d;border-color:#abc0ce}
#readout{color:#7f8a94;opacity:1;font-size:11px}
.note{color:#98a1a8;opacity:1;font-size:11px}
#picker{z-index:100;inset:20px;border-radius:24px;border:1px solid #ffffffeb;padding:20px;background:#fbfcfdef;backdrop-filter:blur(32px) saturate(1.1);box-shadow:0 20px 65px #283a4b24,0 2px 10px #283a4b12;color:#22282d;font:400 13px/1.4 Selecta,sans-serif}
.pk-bar input{background:#fff9;border:1px solid #d9e1e6;border-radius:12px;min-height:40px;color:#536472}
.pk-x{background:#e9edf0;border:0;color:#6a747c;min-height:36px}
.pk-n{color:#7f8a94;opacity:1}
.pk-grid{gap:18px 12px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));padding-top:8px}
.pk-cell{padding:8px;border:1px solid transparent;border-radius:16px;gap:6px}
.pk-cell[aria-pressed=true]{background:#fff;border-color:#c6d3dc}
.pk-cell cite{color:#253848;font-size:12px;opacity:1}
.pk-cell small{color:#89929a;font-size:11px;opacity:1}
.pk-cell[aria-pressed=true] .pk-hold{box-shadow:0 0 0 1px #abc0ce,0 3px 8px #283a4b10}
.pk-hold .field{container-type:inline-size;container-name:tile}
:is(#dock,#picker,#playBtn,#railBtn) :focus-visible,button#playBtn:focus-visible,button#railBtn:focus-visible{outline:2px solid #547e9d;outline-offset:3px}
body.bare #railBtn{display:none}
@media(max-width:860px){
  #rail.glass-studio{inset:auto 12px 138px auto;width:min(340px,calc(100vw - 24px));height:min(52dvh,520px);transform:none}
  #rail .gs-panel{max-height:none;border-radius:20px}
  #railBtn.gs-trigger{bottom:80px;right:12px;height:42px;font-size:12px}
  #dock,body:not(.rail-open) #dock{left:12px;right:12px;bottom:16px;width:auto;max-width:none;transform:none}
  body.rail-open #dock{opacity:1;pointer-events:auto}
  #picker{inset:12px;padding:14px;border-radius:20px}
  .pk-grid{grid-template-columns:repeat(auto-fill,minmax(94px,1fr))}
  .gs-control input[type=range]{height:26px}
}
@media(prefers-reduced-transparency:reduce){#rail .gs-panel,#picker,#dock,#playBtn,#railBtn.gs-trigger{background:#fbfcfd;backdrop-filter:none}}

/* Optical caps remain in the existing closed volume; no added 3D planes. */
.slab-glass-optics,.slab-glass-fallback{display:none;position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;backface-visibility:hidden;pointer-events:none;transform:translateZ(.18px);opacity:var(--op,1)}
.glass-framed .slab-glass-optics{display:block}
.glass-framed .slab-face{transform:translateZ(.24px);background:transparent}
.glass-framed .slab-rim,.glass-framed .slab-glaze,.glass-framed .slab-gloss,.glass-framed .slab-grain,.glass-framed .slab-bloom{display:none}
.glass-framed .slab-side{background:linear-gradient(165deg,#f7fcff,var(--glass-tint),#a0b0be);box-shadow:inset 0 .4px #fff8}
.glass-framed .slab-glass-fallback{padding:var(--glass-rail);background:conic-gradient(from 155deg,#f4fcffb0,#506a8070 11%,#fff 19%,#d8f0ff60 25%,#efcfae80 45%,#fff 48%,#637c9470 53%,#e4f3ff40 65%,#fff 84%,#f4fcffb0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;backdrop-filter:blur(var(--glass-frost))}
.glass-framed:not([data-glass-renderer=webgl]) .slab-glass-fallback{display:block}
#glass-backdrop{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#glass-backdrop[hidden]{display:none}
/* One composited front cap avoids depth fighting at small projected sizes. */
.slab-surface{position:absolute;inset:0;border-radius:inherit;transform:translateZ(.24px);backface-visibility:hidden;transform-style:flat}
.slab-surface>.slab-face,.slab-surface>.slab-glass-optics,.slab-surface>.slab-glass-fallback,.slab-surface>.slab-rim,.slab-surface>.slab-gloss,.slab-surface>.slab-glaze,.slab-surface>.slab-grain{transform:none}
.slab-surface>.slab-face{z-index:1}
.slab-surface>.slab-glaze{z-index:2}
.slab-surface>.slab-grain{z-index:3}
.slab-surface>.slab-rim{z-index:4}
.slab-surface>.slab-gloss{z-index:5}

.pk-hold .pk-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:inherit;pointer-events:none}