/* Dither Lab — unified studio UI. Visual-only layer: no runtime behavior changes. */
:root{
  --studio-bg:#080808;
  --studio-panel:#0c0c0d;
  --studio-panel-2:#101011;
  --studio-panel-3:#151516;
  --studio-line:rgba(255,255,255,.075);
  --studio-line-2:rgba(255,255,255,.13);
  --studio-text:#f2f0ed;
  --studio-muted:#8b8782;
  --studio-dim:#5e5a56;
  --studio-orange:#ff7a18;
  --studio-orange-2:#ff9a45;
  --studio-orange-soft:rgba(255,122,24,.105);
  --studio-orange-line:rgba(255,122,24,.32);
  --studio-mono:ui-monospace,"SFMono-Regular","Cascadia Code",Consolas,monospace;
  --studio-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
html{background:var(--studio-bg)}
body.lab-ui{
  background:
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),
    var(--studio-bg)!important;
  background-size:40px 40px!important;
  color:var(--studio-text);
  font-family:var(--studio-sans);
}
body.lab-ui::before{
  content:"";position:fixed;inset:0 0 auto 0;height:180px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,122,24,.045),transparent 72%);
}
body.lab-ui .app-shell{position:relative;z-index:1}
body.lab-ui a{text-decoration:none}

/* top chrome */
body.lab-ui .topbar{
  height:54px!important;min-height:54px;padding:0 16px!important;
  border-bottom:1px solid var(--studio-line)!important;
  background:rgba(8,8,8,.88)!important;backdrop-filter:blur(16px)!important;
  box-shadow:none!important;
  display:grid!important;grid-template-columns:minmax(210px,1fr) auto minmax(210px,1fr)!important;
  gap:16px;align-items:center;
}
body.lab-ui .brand{gap:10px!important;min-width:0}
body.lab-ui .brand-mark{
  width:25px!important;height:25px!important;border-radius:6px!important;
  background:#151515!important;border:1px solid var(--studio-line-2)!important;
  box-shadow:none!important;position:relative;overflow:hidden;flex:none;
}
body.lab-ui .brand-mark::before{
  content:"";position:absolute;width:4px;height:4px;left:5px;top:5px;background:var(--studio-orange);
  box-shadow:7px 0 0 rgba(255,122,24,.8),14px 0 0 rgba(255,122,24,.32),0 7px 0 rgba(255,122,24,.55),7px 7px 0 var(--studio-orange),14px 7px 0 rgba(255,122,24,.5),0 14px 0 rgba(255,122,24,.25),7px 14px 0 rgba(255,122,24,.6),14px 14px 0 var(--studio-orange-2)!important;
  border-radius:1px;
}
body.lab-ui .brand-mark::after{display:none!important}
body.lab-ui .brand-mark svg{display:none!important}
body.lab-ui .brand strong,body.lab-ui .brand-name{
  display:block;font:650 12px/1.1 var(--studio-sans)!important;letter-spacing:-.015em!important;color:var(--studio-text)!important;
}
body.lab-ui .brand span,body.lab-ui .brand-version{
  display:block;margin-top:3px!important;font:8px/1.1 var(--studio-mono)!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--studio-dim)!important;
}
.lab-switcher{
  display:flex;align-items:center;justify-content:center;height:32px;padding:3px;
  border:1px solid var(--studio-line);background:#0b0b0c;border-radius:8px;gap:2px;
}
.lab-switcher a{
  height:24px;padding:0 11px;display:flex;align-items:center;justify-content:center;position:relative;
  border-radius:5px;color:#6f6b67;font:8px var(--studio-mono);letter-spacing:.06em;text-transform:uppercase;
  transition:color .15s ease,background .15s ease;
}
.lab-switcher a:hover{color:#c9c4be;background:#121213}
.lab-switcher a.active{color:#f5efe9;background:#161515}
.lab-switcher a.active::after{content:"";position:absolute;left:9px;right:9px;bottom:-4px;height:1px;background:var(--studio-orange)}
body.lab-ui .top-actions,body.lab-ui .topbar-actions{justify-self:end;display:flex!important;align-items:center;gap:6px!important}
body.lab-ui .button,body.lab-ui .btn{
  min-height:30px!important;height:30px;padding:0 10px!important;border-radius:6px!important;
  border:1px solid var(--studio-line)!important;background:#111112!important;color:#aaa59f!important;
  box-shadow:none!important;font:9px var(--studio-mono)!important;transition:background .14s,border-color .14s,color .14s!important;
}
body.lab-ui .button:hover,body.lab-ui .btn:hover{transform:none!important;background:#161617!important;border-color:var(--studio-line-2)!important;color:#e8e3dd!important}
body.lab-ui .button.primary,body.lab-ui .btn.primary{
  background:var(--studio-orange)!important;border-color:var(--studio-orange)!important;color:#160b03!important;font-weight:700!important;
}
body.lab-ui .engine{
  height:30px!important;border-radius:6px!important;border:1px solid var(--studio-line)!important;background:#0d0d0e!important;
  padding:0 9px!important;font:8px var(--studio-mono)!important;color:#77726d!important;gap:7px!important;
}
body.lab-ui .engine-dot,body.lab-ui .live-dot{background:var(--studio-orange)!important;box-shadow:none!important}

/* studio layout */
body.lab-ui .workspace{min-height:calc(100vh - 54px)!important}
body.lab-ui.lab-motion .workspace,body.lab-ui.lab-icon-motion .workspace{
  grid-template-columns:292px minmax(0,1fr)!important;
}
body.lab-ui .sidebar{
  top:54px!important;max-height:calc(100vh - 54px)!important;padding:0 16px 24px!important;
  border-right:1px solid var(--studio-line)!important;background:rgba(9,9,10,.94)!important;
  scrollbar-width:thin;scrollbar-color:#2a2826 transparent;
}
body.lab-ui .control-group{
  margin:0!important;padding:17px 0 18px!important;border-bottom:1px solid rgba(255,255,255,.055);
}
body.lab-ui .control-group:last-child{border-bottom:0}
body.lab-ui .group-title{
  margin-bottom:11px!important;font:8px var(--studio-mono)!important;letter-spacing:.14em!important;text-transform:uppercase;color:#6b6661!important;
}
body.lab-ui .group-title>span:first-child{color:#b7b1aa!important}
body.lab-ui .group-title>span:last-child{color:#514d49!important;letter-spacing:.08em}
body.lab-ui .preset-grid,body.lab-ui .palette-grid,body.lab-ui .motion-grid{gap:5px!important}
body.lab-ui .chip,body.lab-ui .palette,body.lab-ui .motion-chip{
  border-radius:6px!important;border:1px solid var(--studio-line)!important;background:#101011!important;color:#77726d!important;
  font:8.5px var(--studio-mono)!important;box-shadow:none!important;transform:none!important;
}
body.lab-ui .chip:hover,body.lab-ui .palette:hover,body.lab-ui .motion-chip:hover{background:#151516!important;color:#c9c3bd!important;border-color:var(--studio-line-2)!important}
body.lab-ui .chip.active,body.lab-ui .palette.active,body.lab-ui .motion-chip.active{
  background:var(--studio-orange-soft)!important;border-color:var(--studio-orange-line)!important;color:#ffc18e!important;
}
body.lab-ui .control{margin-bottom:13px!important}
body.lab-ui .control-top{margin-bottom:8px!important}
body.lab-ui .control-top label,body.lab-ui .color-head,body.lab-ui .toggle{
  font:9px var(--studio-mono)!important;color:#8c8781!important;
}
body.lab-ui .control-value,body.lab-ui #colorValue{font:9px var(--studio-mono)!important;color:#c9c2bb!important}
body.lab-ui input[type=range]{height:2px!important;background:#282625!important}
body.lab-ui input[type=range]::-webkit-slider-thumb{
  width:11px!important;height:11px!important;border-radius:50%!important;background:#f7ede5!important;border:2px solid var(--studio-orange)!important;box-shadow:none!important;
}
body.lab-ui input[type=range]::-moz-range-thumb{
  width:9px!important;height:9px!important;border-radius:50%!important;background:#f7ede5!important;border:2px solid var(--studio-orange)!important;
}
body.lab-ui .select{height:31px!important;border-radius:6px!important;border-color:var(--studio-line)!important;background:#101011!important;color:#c5c0bb!important;font:8.5px var(--studio-mono)!important}
body.lab-ui .toggle{height:31px!important;border-radius:6px!important;background:#101011!important;border-color:var(--studio-line)!important}
body.lab-ui input[type=color]{border-radius:6px!important;background:#101011!important;border-color:var(--studio-line)!important}
body.lab-ui #colorHex,body.lab-ui .hex-input{border-radius:6px!important;background:#101011!important;border-color:var(--studio-line)!important;color:#d0cac4!important}
body.lab-ui .upload{border-radius:8px!important;background:#0e0e0f!important;border-color:#302d2a!important}

/* main canvas / stage */
body.lab-ui .main{padding:14px!important;overflow:hidden!important}
body.lab-ui .preview{
  height:min(72vh,760px)!important;min-height:520px!important;border-radius:10px!important;
  border:1px solid var(--studio-line)!important;background:#090909!important;box-shadow:none!important;
}
body.lab-ui .preview-grid{
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px)!important;
  background-size:32px 32px!important;mask-image:none!important;opacity:.75;
}
body.lab-ui .preview::before{
  content:"";position:absolute;inset:12px;z-index:5;pointer-events:none;border:1px solid rgba(255,255,255,.028);border-radius:5px;
  clip-path:polygon(0 0,26px 0,26px 1px,1px 1px,1px 26px,0 26px,0 0,100% 0,100% 26px,99% 26px,99% 1px,calc(100% - 26px) 1px,calc(100% - 26px) 0,100% 0,100% 100%,calc(100% - 26px) 100%,calc(100% - 26px) 99%,99% 99%,99% calc(100% - 26px),100% calc(100% - 26px),100% 100%,0 100%,0 calc(100% - 26px),1px calc(100% - 26px),1px 99%,26px 99%,26px 100%,0 100%);
}
body.lab-ui .hud{right:14px!important;top:14px!important;bottom:auto!important;gap:5px!important}
body.lab-ui .hud-pill{
  height:25px!important;border-radius:5px!important;background:rgba(10,10,10,.82)!important;border-color:var(--studio-line)!important;
  color:#77726d!important;font:7.5px var(--studio-mono)!important;padding:0 8px!important;backdrop-filter:blur(10px)!important;
}
body.lab-ui.lab-motion .preview-content{
  top:auto!important;left:18px!important;bottom:17px!important;max-width:420px!important;
}
body.lab-ui.lab-motion .preview-content .eyebrow{font:8px var(--studio-mono)!important;color:#ad744a!important;letter-spacing:.12em!important}
body.lab-ui.lab-motion .hero-compact-title{
  margin:6px 0 0!important;font-size:18px!important;line-height:1.1!important;letter-spacing:-.025em!important;font-weight:620!important;text-shadow:none!important;
}
body.lab-ui.lab-motion .hero-credit{margin:5px 0 0!important;font-size:9px!important;line-height:1.3!important;color:#756f69!important;text-shadow:none!important}
body.lab-ui.lab-motion .hero-footnote{margin-top:4px!important;font:7px var(--studio-mono)!important;color:#5c5752!important;letter-spacing:.08em!important;text-shadow:none!important}
body.lab-ui.lab-motion .hero-heart{width:.72em;height:.72em;filter:none!important}
body.lab-ui.lab-icon-motion .drop-note{
  top:14px!important;left:14px!important;border-radius:5px!important;background:rgba(10,10,10,.82)!important;border-color:var(--studio-line)!important;color:#625e59!important;font:8px var(--studio-mono)!important;
}
body.lab-ui.lab-icon-motion .icon-shell{
  width:min(34vw,370px)!important;border-radius:22%!important;border-color:rgba(255,255,255,.1)!important;
  background:#101011!important;box-shadow:0 20px 60px rgba(0,0,0,.28)!important;
}
body.lab-ui.lab-icon-motion .icon-shell::before{background:none!important}
body.lab-ui.lab-icon-motion .preview-copy{left:18px!important;bottom:17px!important;max-width:360px!important}
body.lab-ui.lab-icon-motion .preview-copy .eyebrow{font:8px var(--studio-mono)!important;color:#ad744a!important;letter-spacing:.12em!important}
body.lab-ui.lab-icon-motion .preview-copy h1{font-size:20px!important;letter-spacing:-.025em!important;margin:6px 0 4px!important;font-weight:620!important}
body.lab-ui.lab-icon-motion .preview-copy p{font-size:9px!important;line-height:1.45!important;color:#6c6762!important}

/* bottom data panels */
body.lab-ui .bottom-grid{gap:8px!important;margin-top:8px!important;grid-template-columns:1.15fr .85fr!important}
body.lab-ui .panel{padding:0!important;border-radius:8px!important;background:#0b0b0c!important;border-color:var(--studio-line)!important;overflow:hidden!important}
body.lab-ui .panel-head{height:38px!important;margin:0!important;padding:0 11px!important;border-bottom:1px solid var(--studio-line)!important}
body.lab-ui .panel-head h2{font-size:9px!important;font-weight:570!important;color:#bcb6b0!important}
body.lab-ui .panel-head span{font:7px var(--studio-mono)!important;color:#55514d!important}
body.lab-ui .code{border:0!important;border-radius:0!important;background:#090909!important;min-height:126px!important;max-height:160px!important;padding:11px!important;font:8.5px/1.55 var(--studio-mono)!important;color:#8f8983!important}
body.lab-ui .stats{grid-template-columns:repeat(4,1fr)!important;gap:0!important;padding:0!important}
body.lab-ui .stat{padding:14px 11px!important;border:0!important;border-right:1px solid var(--studio-line)!important;border-radius:0!important;background:transparent!important}
body.lab-ui .stat:last-child{border-right:0!important}
body.lab-ui .stat b{font:12px var(--studio-mono)!important;color:#d8d1cb!important}
body.lab-ui .stat span{margin-top:5px!important;font:7px var(--studio-mono)!important;color:#5b5652!important}
body.lab-ui .help{margin:0!important;padding:10px 11px 12px!important;border-top:1px solid var(--studio-line);font-size:8.5px!important;line-height:1.5!important;color:#66615c!important}

/* GIF export — intentionally restrained */
body.lab-ui .gif-export-card{margin-top:0!important;padding:0!important}
body.lab-ui .gif-row{min-height:35px!important;border-bottom:1px solid rgba(255,255,255,.045)!important;color:#8e8882!important;font:9px var(--studio-mono)!important}
body.lab-ui .gif-select{height:27px!important;min-width:84px!important;border-radius:6px!important;border-color:var(--studio-line)!important;background:#121213!important;color:#d2cbc4!important;font:8.5px var(--studio-mono)!important}
body.lab-ui .gif-toggle-row i{width:28px!important;height:16px!important;background:#232222!important;border-color:var(--studio-line)!important}
body.lab-ui .gif-toggle-row i::after{width:10px!important;height:10px!important;top:2px!important;left:2px!important;background:#6d6863!important}
body.lab-ui .gif-toggle-row input:checked+i,body.lab-ui .gif-toggle-row .switch:checked+i,body.lab-ui .gif-toggle-row .gif-switch:checked+i{background:#eee8e2!important;border-color:#eee8e2!important}
body.lab-ui .gif-toggle-row input:checked+i::after,body.lab-ui .gif-toggle-row .switch:checked+i::after,body.lab-ui .gif-toggle-row .gif-switch:checked+i::after{transform:translateX(12px)!important;background:#181512!important}
body.lab-ui .gif-download{
  height:37px!important;margin-top:11px!important;border-radius:7px!important;background:#eeeae6!important;border:1px solid #f5f1ed!important;
  color:#171412!important;font:650 10px var(--studio-sans)!important;box-shadow:none!important;
}
body.lab-ui .gif-download:hover{transform:none!important;background:white!important}
body.lab-ui .gif-progress{height:22px!important;margin-top:6px!important;border-radius:5px!important;background:#0d0d0e!important;border-color:rgba(255,255,255,.045)!important}
body.lab-ui .gif-progress i{background:rgba(255,122,24,.14)!important}
body.lab-ui .gif-progress span{font:7px var(--studio-mono)!important;color:#57524e!important}

/* showcase */
body.lab-ui .showcase,body.lab-ui .use-cases{margin-top:34px!important;padding-top:18px!important;border-top:1px solid rgba(255,255,255,.06)!important}
body.lab-ui .showcase-head{margin-bottom:14px!important}
body.lab-ui .showcase-kicker{font:7px var(--studio-mono)!important;color:#aa7248!important;letter-spacing:.14em!important}
body.lab-ui .showcase-head h2{font-size:18px!important;letter-spacing:-.025em!important;margin:5px 0 4px!important;font-weight:620!important}
body.lab-ui .showcase-head p{font-size:9px!important;color:#67625e!important}
body.lab-ui .showcase-performance{border-radius:5px!important;background:#0c0c0d!important;border-color:var(--studio-line)!important;color:#5e5955!important}
body.lab-ui .use-card{border-radius:8px!important;background:#0d0d0e!important;border-color:var(--studio-line)!important}

@media(max-width:1100px){
  body.lab-ui .topbar{grid-template-columns:1fr auto!important}
  body.lab-ui .lab-switcher{display:none}
  body.lab-ui.lab-motion .workspace,body.lab-ui.lab-icon-motion .workspace{grid-template-columns:270px minmax(0,1fr)!important}
}
@media(max-width:800px){
  body.lab-ui .topbar{height:52px!important;min-height:52px!important;padding:0 10px!important}
  body.lab-ui.lab-motion .workspace,body.lab-ui.lab-icon-motion .workspace{display:block!important}
  body.lab-ui .sidebar{position:relative!important;top:auto!important;max-height:none!important;border-right:0!important;border-bottom:1px solid var(--studio-line)!important;padding:0 14px 16px!important}
  body.lab-ui .main{padding:10px!important}
  body.lab-ui .preview{height:62vh!important;min-height:470px!important}
  body.lab-ui .bottom-grid{grid-template-columns:1fr!important}
  body.lab-ui .top-actions .button:nth-of-type(2),body.lab-ui .top-actions .button:nth-of-type(3){display:none!important}
}
@media(max-width:560px){
  body.lab-ui .brand span,body.lab-ui .brand-version{display:none!important}
  body.lab-ui .engine{display:none!important}
  body.lab-ui .stats{grid-template-columns:1fr 1fr!important}
  body.lab-ui .stat:nth-child(2){border-right:0!important}
  body.lab-ui .stat:nth-child(-n+2){border-bottom:1px solid var(--studio-line)!important}
}

/* Fire lab specimen library — keep examples useful without turning the page into a dashboard template. */
body.lab-ui.lab-motion .showcase{padding-bottom:26px!important}
body.lab-ui.lab-motion .specimen-section{
  margin:0!important;padding:16px 0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.055)!important;background:transparent!important;
}
body.lab-ui.lab-motion .specimen-section:last-child{border-bottom:0!important}
body.lab-ui.lab-motion .specimen-head{margin-bottom:10px!important;align-items:center!important}
body.lab-ui.lab-motion .specimen-head h3{font-size:10px!important;font-weight:580!important;letter-spacing:-.01em!important;color:#aaa49e!important}
body.lab-ui.lab-motion .specimen-head p{font-size:8px!important;color:#5d5854!important;margin-top:3px!important}
body.lab-ui.lab-motion .specimen-rule{display:none!important}
body.lab-ui.lab-motion .spec-copy{
  height:27px!important;border-radius:5px!important;border-color:var(--studio-line)!important;background:#0e0e0f!important;color:#69645f!important;font:7.5px var(--studio-mono)!important;box-shadow:none!important;
}
body.lab-ui.lab-motion .spec-copy:hover{border-color:var(--studio-line-2)!important;color:#aaa49e!important;background:#121213!important;transform:none!important}
body.lab-ui.lab-motion .specimen-stage{
  border-radius:8px!important;border:1px solid var(--studio-line)!important;background:#090909!important;padding:18px!important;box-shadow:none!important;
}
body.lab-ui.lab-motion .demo-toolbar,body.lab-ui.lab-motion .demo-stat-card,body.lab-ui.lab-motion .demo-nav-item,body.lab-ui.lab-motion .progress-demo,
body.lab-ui.lab-motion .demo-toast,body.lab-ui.lab-motion .demo-alert-card,body.lab-ui.lab-motion .demo-action-card,
body.lab-ui.lab-motion .demo-switch,body.lab-ui.lab-motion .demo-badge,body.lab-ui.lab-motion .demo-chip{
  border-radius:7px!important;border-color:var(--studio-line)!important;background-color:#0f0f10!important;box-shadow:none!important;
}
body.lab-ui.lab-motion .demo-fire-button,body.lab-ui.lab-motion .demo-icon-button{border-radius:6px!important;box-shadow:none!important}
body.lab-ui.lab-motion .demo-progress-track{border-radius:4px!important;background:#151516!important}
body.lab-ui.lab-motion .demo-progress-fill{border-radius:4px!important}

/* custom palette editor */
body.lab-ui .custom-palette-editor{margin-top:7px!important;padding:9px!important;border-radius:7px!important;border-color:var(--studio-line)!important;background:#0e0e0f!important;box-shadow:none!important}
body.lab-ui .custom-palette-editor.active{border-color:var(--studio-orange-line)!important;box-shadow:none!important}
body.lab-ui .custom-palette-head{font:8px var(--studio-mono)!important;color:#77716c!important}
body.lab-ui .custom-palette-head span:last-child{color:#aaa49e!important}
body.lab-ui .color-well{border-radius:6px!important;border-color:var(--studio-line)!important;background:#121213!important}
body.lab-ui .color-well-preview{border-radius:4px!important;box-shadow:none!important}
body.lab-ui .custom-color-apply{border-radius:6px!important;border-color:var(--studio-line)!important;background:#131314!important;color:#8e8882!important;font:8px var(--studio-mono)!important}
body.lab-ui .custom-color-apply:hover{border-color:var(--studio-orange-line)!important;background:var(--studio-orange-soft)!important;color:#ffc18e!important}
body.lab-ui .custom-ramp-preview{border-radius:4px!important;border-color:var(--studio-line)!important}
body.lab-ui .custom-palette-help{font:7px/1.45 var(--studio-mono)!important;color:#504c48!important}