:root{
  color-scheme:dark;
  --bg:#141715;
  --panel:#1b1e1b;
  --line:#30362f;
  --text:#eceee8;
  --muted:#979f92;
  --accent:#c5d7ac;
  --ink:#20281c;
  font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-synthesis:none
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text)
}
button,input,select{
  font:inherit
}
button,select{
  cursor:pointer
}
button{
  color:inherit;
  border:0;
  background:none
}
a{
  color:inherit;
  text-decoration:none
}
button:disabled{
  opacity:.45;
  cursor:wait
}
button:hover:not(:disabled),a:hover{
  filter:brightness(1.15)
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,label[role=button]:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px
}
[hidden]{
  display:none!important
}
.site-header{
  height:80px;
  border-bottom:1px solid var(--line);
  padding:0 3.5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.brand{
  display:flex;
  gap:12px;
  align-items:center
}
.brand-symbol{
  font-size:38px;
  line-height:1;
  font-weight:700;
  color:var(--accent);
  letter-spacing:-5px;
  padding-right:5px
}
.brand strong{
  font-size:20px;
  letter-spacing:-.5px
}
.brand strong span{
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  letter-spacing:.2px;
  margin-left:10px
}
.site-header nav{
  display:flex;
  align-items:center;
  height:100%;
  gap:34px
}
.site-header nav a{
  color:var(--muted);
  height:100%;
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  font-size:12px
}
.site-header nav .active{
  color:var(--text)
}
.site-header nav .active:after{
  content:"";
  position:absolute;
  bottom:0;
  height:2px;
  background:var(--accent);
  width:100%
}
.local-badge{
  font-size:11px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px
}
.local-badge i,.live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  display:inline-block
}
.page{
  max-width:1720px;
  margin:auto;
  padding:0 3.5%
}
.intro{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:38px 0 31px;
  gap:20px
}
.eyebrow{
  font-size:10px;
  letter-spacing:2.3px;
  color:var(--accent);
  display:flex;
  gap:26px
}
.eyebrow span{
  color:#626f60;
  letter-spacing:1px
}
h1{
  font-size:clamp(25px,2.5vw,38px);
  letter-spacing:1px;
  line-height:1.3;
  font-weight:550;
  margin:12px 0 9px
}
h1 span{
  color:var(--accent)
}
.intro p{
  color:var(--muted);
  font-size:12px;
  margin:0
}
.intro-note{
  display:flex;
  align-items:center;
  gap:15px;
  font-size:12px
}
.intro-note small{
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:4px
}
.outline-icon{
  width:44px;
  height:44px;
  border:1px solid #45533d;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--accent);
  font-size:26px
}
.workbench{
  display:grid;
  grid-template-columns:260px minmax(320px,1fr) 255px;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--panel)
}
.panel{
  padding:22px 20px
}
.input-panel{
  border-right:1px solid var(--line)
}
.settings-panel{
  border-left:1px solid var(--line)
}
.panel-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px
}
.panel-title>span:first-child{
  font:10px ui-monospace,monospace;
  color:#849578
}
.panel-title h2{
  font-size:13px;
  font-weight:550;
  margin:0
}
.panel-title .text-button{
  margin-left:auto
}
.text-button{
  font-size:10px;
  color:var(--accent);
  padding:3px 0
}
.tiny-label{
  font:9px ui-monospace,monospace;
  letter-spacing:2px;
  margin-left:auto;
  color:var(--muted)
}
.segmented{
  display:flex;
  border:1px solid #343a32;
  background:#161916;
  border-radius:6px;
  padding:3px;
  gap:2px
}
.segmented button{
  border-radius:4px;
  padding:6px 12px;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap
}
.segmented button.active{
  background:#353e30;
  color:#e5edda
}
.input-modes button{
  flex:1
}
.hint{
  font-size:10px;
  line-height:1.7;
  color:var(--muted);
  min-height:18px;
  margin:9px 0 12px
}
.upload-area{
  display:block;
  position:relative;
  border:1px solid #49513f;
  border-radius:6px;
  overflow:hidden;
  cursor:pointer;
  background:#252b23;
  aspect-ratio:4/3
}
.upload-area.dragging{
  outline:2px solid var(--accent)
}
#sourceThumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.upload-overlay{
  position:absolute;
  bottom:8px;
  right:8px;
  background:#12180fe8;
  border:1px solid #67745977;
  padding:4px 8px;
  border-radius:4px;
  font-size:10px
}
.sample-tag{
  position:absolute;
  left:8px;
  top:8px;
  background:#141a11c9;
  font-size:9px;
  color:#d3d9c8;
  border-radius:3px;
  padding:3px 6px
}
.file-row{
  display:flex;
  justify-content:space-between;
  gap:6px;
  font-size:9px;
  color:var(--muted);
  margin:9px 0 13px
}
.file-row span:first-child{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:130px
}
.file-row span:last-child{
  white-space:nowrap
}
.outline{
  border:1px solid #424b3b;
  border-radius:5px;
  padding:8px 12px;
  font-size:11px;
  color:#c3ccba;
  background:#232920
}
.full{
  width:100%
}
.divider{
  height:1px;
  background:var(--line);
  margin:20px 0
}
.field{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  margin:14px 0;
  color:#c1c8ba;
  gap:8px
}
select{
  max-width:100%;
  background:#252b23;
  color:#cbd3c2;
  border:1px solid #3c4536;
  border-radius:5px;
  padding:7px 24px 7px 9px;
  font-size:10px
}
.field select{
  width:135px
}
.toggle-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  margin:21px 0;
  font-size:11px;
  cursor:pointer
}
.toggle-row small{
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:3px
}
.toggle-row input{
  position:absolute;
  right:0;
  opacity:0;
  width:30px;
  height:22px;
  cursor:pointer
}
.toggle{
  margin-left:auto;
  width:28px;
  height:16px;
  border-radius:20px;
  background:#454c40;
  pointer-events:none
}
.toggle:after{
  content:"";
  display:block;
  width:10px;
  height:10px;
  border-radius:100%;
  background:#858e7d;
  margin:3px
}
.toggle-row input:checked+.toggle{
  background:var(--accent)
}
.toggle-row input:checked+.toggle:after{
  transform:translateX(12px);
  background:#3d4c32
}
.toggle-row input:focus-visible+.toggle{
  outline:2px solid white;
  outline-offset:4px
}
.primary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:5px;
  background:var(--accent);
  color:var(--ink);
  padding:12px 15px;
  font-weight:600;
  font-size:12px;
  letter-spacing:.3px
}
.footnote{
  font-size:9px;
  line-height:1.8;
  color:#8c9685;
  margin:9px 0 0
}
.preview-panel{
  background:#1c211c;
  display:flex;
  flex-direction:column;
  min-width:0
}
.preview-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 20px;
  border-bottom:1px solid var(--line);
  height:55px
}
.preview-heading>div{
  display:flex;
  align-items:center;
  gap:8px
}
.preview-heading strong{
  font-size:11px;
  font-weight:500
}
.status-tag{
  font-size:9px;
  color:#a8b89a;
  border:1px solid #43503b;
  border-radius:3px;
  padding:2px 5px;
  margin-left:6px
}
.status-tag.stale{
  color:#ecc98c;
  border-color:#66553a
}
.icon-button{
  font-size:20px;
  color:var(--muted);
  padding:0 4px;
  line-height:1
}
.stage{
  position:relative;
  flex:1;
  min-height:450px;
  background:radial-gradient(ellipse at 50% 45%,#3b4538 0%,#252d24 45%,#1d241d 80%);
  overflow:hidden
}
.stage-grid{
  position:absolute;
  inset:55% -40% -80%;
  background-image:linear-gradient(#8c9f7d0c 1px,transparent 1px),linear-gradient(90deg,#8c9f7d0c 1px,transparent 1px);
  background-size:44px 44px;
  transform:perspective(180px) rotateX(45deg);
  pointer-events:none
}
#materialCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  touch-action:none;
  cursor:grab
}
#materialCanvas:active{
  cursor:grabbing
}
#mapCanvas{
  position:absolute;
  inset:12% 12% 18%;
  width:76%;
  height:70%;
  object-fit:contain
}
.stage-corner{
  position:absolute;
  top:19px;
  font:8px ui-monospace,monospace;
  letter-spacing:1.2px;
  color:#b0bea077;
  pointer-events:none
}
.top-left{
  left:20px
}
.top-right{
  right:20px
}
.stage-caption{
  position:absolute;
  left:20px;
  right:20px;
  bottom:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  pointer-events:none
}
.stage-caption span{
  font:9px ui-monospace,monospace;
  letter-spacing:1.5px;
  color:#c1cbb1
}
.stage-caption small{
  font-size:9px;
  color:#a3af95
}
.preview-toolbar{
  padding:13px 16px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
  border-top:1px solid var(--line)
}
.preview-toolbar .segmented{
  padding:2px
}
.preview-toolbar .segmented button{
  padding:5px 9px;
  font-size:10px
}
.preview-toolbar select{
  font-size:10px;
  padding:7px;
  max-width:120px
}
.section-label{
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#c7d1bd;
  margin-bottom:18px
}
.section-label small{
  font-size:8px;
  color:var(--muted)
}
.range-field{
  display:block;
  margin:17px 0
}
.range-field>span{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#bfc9b4;
  margin-bottom:9px
}
.range-field output{
  font:10px ui-monospace,monospace;
  color:var(--accent)
}
.range-field small{
  font-size:9px;
  color:var(--muted)
}
input[type=range]{
  width:100%;
  height:3px;
  accent-color:var(--accent);
  display:block;
  margin:12px 0 8px;
  cursor:pointer
}
.method-note{
  font-size:10px;
  line-height:1.8;
  color:var(--muted);
  border:1px solid var(--line);
  padding:10px;
  border-radius:5px;
  margin-top:20px
}
.method-note summary{
  cursor:pointer;
  color:#b1bda7
}
.method-note p{
  margin:10px 0 0
}
.maps-panel{
  grid-column:1/3;
  border-top:1px solid var(--line);
  padding:20px;
  background:#191d18
}
.maps-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px
}
.maps-heading .panel-title{
  margin:0
}
.panel-title small{
  font-size:9px;
  color:var(--muted);
  margin-left:8px
}
.map-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px
}
.map-card{
  padding:0;
  text-align:left;
  min-width:0;
  border-radius:5px;
  border:1px solid #343c2f;
  overflow:hidden;
  background:#22291f
}
.map-card.active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent)
}
.map-card canvas{
  display:block;
  width:100%;
  aspect-ratio:1.5;
  object-fit:cover;
  background:#2b3126
}
.map-card>span{
  display:flex;
  justify-content:space-between;
  padding:8px 8px 0;
  font-size:10px
}
.map-card small{
  display:block;
  padding:1px 8px 8px;
  font:8px ui-monospace,monospace;
  color:#8e9b82;
  letter-spacing:.8px
}
.export-panel{
  grid-column:3;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  background:#22291e
}
.export-panel h2{
  font-size:13px;
  font-weight:500;
  margin:0
}
.export-panel p{
  font-size:9px;
  color:var(--muted);
  margin:3px 0
}
.export-format{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  gap:8px
}
.export-format select{
  font-size:9px;
  padding:5px;
  max-width:152px
}
.workspace-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:#8e9b82;
  padding:15px 0
}
.workspace-footer>span:last-child{
  font:8px ui-monospace,monospace;
  white-space:nowrap;
  letter-spacing:1px
}
.workspace-footer i{
  font-style:normal;
  padding:0 8px;
  color:var(--accent)
}
.site-footer{
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:21px 0 26px;
  margin-top:16px;
  font-size:10px;
  color:var(--muted)
}
.site-footer>span{
  font:8px ui-monospace,monospace;
  letter-spacing:1.5px;
  color:#75806d
}
.stage-loading{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:#1c241cf0;
  z-index:4
}
.stage-loading strong{
  font-size:13px;
  font-weight:500
}
.stage-loading small{
  font-size:10px;
  color:var(--muted)
}
.spinner{
  width:30px;
  height:30px;
  border:1px solid #526147;
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 1s linear infinite
}
@keyframes spin{
  to{
    transform:rotate(360deg)
  }
}
.webgl-fallback{
  position:absolute;
  bottom:60px;
  left:15%;
  right:15%;
  padding:12px;
  background:#1b2118d9;
  font-size:11px;
  text-align:center;
  color:#d7ddca
}
dialog{
  width:min(960px,94vw);
  max-height:94vh;
  padding:22px;
  border:1px solid #536047;
  border-radius:10px;
  background:#1a2019;
  color:var(--text);
  box-shadow:0 20px 100px #0008
}
dialog::backdrop{
  background:#090e09cc;
  backdrop-filter:blur(6px)
}
.crop-header{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px
}
.crop-header h2{
  font-size:16px;
  font-weight:500;
  margin:0
}
.crop-header p{
  font-size:11px;
  color:var(--muted);
  margin:6px 0
}
.crop-canvas-wrap{
  background:#11160f;
  text-align:center;
  border-radius:5px;
  padding:12px
}
#cropCanvas{
  display:block;
  max-width:100%;
  max-height:54vh;
  margin:auto;
  touch-action:none;
  cursor:crosshair
}
.crop-footer{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px
}
.crop-footer>span{
  margin-right:auto;
  color:var(--muted);
  font-size:10px
}
.corner-controls{
  display:flex;
  gap:16px;
  margin-top:12px;
  flex-wrap:wrap
}
.corner-controls label{
  font-size:10px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:4px
}
.corner-controls input{
  width:48px;
  background:#252e20;
  border:1px solid #46553b;
  color:var(--text);
  padding:4px;
  border-radius:3px
}
@media(min-width:1600px){
  .workbench{
    grid-template-columns:280px minmax(320px,1fr) 285px
  }
  .panel{
    padding:25px
  }
  .stage{
    min-height:500px
  }
  .intro{
    padding:44px 0 36px
  }
}
@media(max-width:1200px){
  .site-header{
    padding:0 24px
  }
  .brand strong span{
    display:none
  }
  .page{
    padding:0 24px
  }
  .workbench{
    grid-template-columns:225px minmax(290px,1fr) 220px
  }
  .panel{
    padding:18px 14px
  }
  .intro-note{
    display:none
  }
  .preview-toolbar{
    flex-wrap:wrap
  }
  .map-grid{
    gap:7px
  }
  .panel-title small{
    display:none
  }
  .stage{
    min-height:440px
  }
  .stage-caption{
    flex-direction:column;
    align-items:flex-start
  }
  .export-panel{
    padding:16px
  }
  .export-format{
    flex-direction:column;
    align-items:flex-start
  }
  .section-label small{
    font-size:7px
  }
}
@media(max-width:960px){
  .workbench{
    grid-template-columns:235px minmax(280px,1fr)
  }
  .settings-panel{
    grid-column:1/3;
    border-left:0;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px 24px
  }
  .settings-panel .panel-title,.settings-panel .method-note{
    grid-column:1/-1
  }
  .settings-panel .panel-title{
    margin-bottom:0
  }
  .settings-panel .divider{
    display:none
  }
  .settings-panel .section-label{
    grid-column:1/-1;
    margin:5px 0
  }
  .range-field{
    margin:6px 0
  }
  .settings-panel .method-note{
    margin-top:4px
  }
  .maps-panel{
    grid-column:1/3
  }
  .export-panel{
    grid-column:1/3;
    border-left:0;
    flex-direction:row;
    align-items:center;
    gap:20px
  }
  .export-panel .primary{
    width:190px
  }
  .export-format{
    flex-direction:row
  }
  .local-badge{
    display:none
  }
  .stage{
    min-height:420px
  }
  .section-label small{
    font-size:9px
  }
}
@media(max-width:620px){
  .site-header{
    height:auto;
    min-height:70px;
    padding:12px 16px;
    flex-wrap:wrap;
    gap:10px
  }
  .brand-symbol{
    font-size:30px
  }
  .brand strong{
    font-size:18px
  }
  .site-header nav{
    gap:17px;
    height:30px
  }
  .site-header nav a{
    font-size:10px
  }
  .page{
    padding:0 14px
  }
  .intro{
    padding:25px 0
  }
  .eyebrow{
    font-size:8px
  }
  .intro p{
    font-size:11px
  }
  .workbench{
    display:flex;
    flex-direction:column
  }
  .input-panel{
    border-right:0
  }
  .upload-area{
    aspect-ratio:2.3
  }
  .file-row span:first-child{
    max-width:240px
  }
  .input-panel .divider{
    margin:16px 0
  }
  .input-panel .field{
    display:inline-flex;
    width:calc(50% - 7px);
    font-size:10px;
    margin:7px 0
  }
  .field select{
    width:auto;
    max-width:110px;
    font-size:9px
  }
  .toggle-row{
    margin:16px 0
  }
  .preview-panel{
    border-top:1px solid var(--line)
  }
  .stage{
    flex:none;
    min-height:350px;
    height:350px
  }
  .stage-caption{
    flex-direction:row
  }
  .stage-caption small{
    font-size:8px
  }
  .settings-panel{
    display:grid;
    grid-template-columns:1fr 1fr;
    padding:18px
  }
  .map-grid{
    grid-template-columns:repeat(3,1fr);
    gap:10px
  }
  .maps-panel{
    padding:18px
  }
  .map-card canvas{
    aspect-ratio:1.5
  }
  .export-panel{
    flex-wrap:wrap;
    padding:18px
  }
  .export-panel .primary{
    width:100%
  }
  .export-format{
    margin-left:auto;
    flex-direction:column;
    align-items:flex-start
  }
  .workspace-footer>span:last-child{
    display:none
  }
  .workspace-footer{
    min-height:48px;
    font-size:10px
  }
  .site-footer>span{
    display:none
  }
  .site-footer{
    margin-top:5px
  }
  .preview-toolbar{
    flex-wrap:nowrap;
    padding:10px
  }
  .preview-toolbar .segmented button{
    font-size:9px;
    padding:5px 7px
  }
  .preview-toolbar select{
    max-width:100px;
    font-size:9px
  }
  .crop-footer{
    flex-wrap:wrap
  }
  .crop-footer>span{
    width:100%;
    margin-bottom:6px
  }
  .crop-footer button{
    flex:1;
    justify-content:center
  }
  .crop-header p{
    font-size:10px
  }
}
@media(prefers-reduced-motion:reduce){
  .spinner{
    animation:none
  }
}

/* Material inspection controls. These stay independent of the LUT workbench. */
.preview-heading { gap:12px; min-height:55px; height:auto; flex-wrap:wrap; }
.preview-heading>div:first-child { min-width:0; flex-wrap:wrap; }
.preview-actions { margin-left:auto; display:flex; align-items:center; gap:14px; }
.preview-toolbar { justify-content:center; padding:11px 14px; }
.shape-switcher { width:100%; justify-content:center; flex-wrap:wrap; }
.shape-switcher button { flex:1; }
.inspection-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:0 14px 12px; flex-wrap:wrap; }
.inspection-toolbar .segmented button { padding:5px 9px; font-size:10px; }
.tile-options { display:flex; align-items:center; flex-wrap:wrap; gap:9px; font-size:9px; color:var(--muted); }
.tile-options select { padding:5px; }
.tile-options label { white-space:nowrap; display:flex; align-items:center; gap:3px; cursor:pointer; }
.tile-options input { accent-color:var(--accent); margin:0; }
.map-inspector { display:flex; align-items:center; gap:14px; padding:0 16px 12px; font-size:9px; color:var(--muted); flex-wrap:wrap; }
.map-inspector>label { display:flex; align-items:center; gap:10px; }
.map-inspector input { width:90px; margin:0; }
.map-inspector output { min-width:26px; color:var(--accent); }
#mapCanvas { touch-action:none; cursor:grab; transform-origin:center; }
#mapCanvas:active { cursor:grabbing; }
.compare-controls { padding:0 16px 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:9px; color:var(--muted); }
.compare-controls input { flex:1; width:70px; margin:0; }
.compare-controls span { white-space:nowrap; }
.lighting-controls { padding:13px 16px; border-top:1px solid var(--line); background:#1a2018; }
.lighting-controls>summary { font-size:11px; color:#bdcbb1; cursor:pointer; }
.lighting-controls>summary span { font-size:9px; margin-left:8px; color:var(--muted); }
.lighting-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 22px; margin-top:12px; }
.lighting-grid .field { display:block; margin:0 0 4px; font-size:10px; }
.lighting-grid .field select { display:block; width:100%; margin-top:8px; padding:7px; }
.lighting-grid .range-field { margin:0; }
.lighting-grid .range-field>span { font-size:10px; }
.lighting-grid input { margin:11px 0 6px; }
.lighting-grid small { font-size:8px; }
.lighting-controls .footnote { margin-top:10px; }
.diagnostics-strip { padding:11px 16px; border-top:1px solid var(--line); font-size:9px; line-height:1.7; color:#95a489; }
.seamless-width { margin:12px 0; }
.seamless-width small { font-size:8px; }
.seamless-field { align-items:flex-start; }
.seamless-field select { max-width:142px; }
.preview-normal-toggle { margin:14px 0; }
.map-card { position:relative; }
.map-select { display:block; padding:0; width:100%; text-align:left; }
.map-select>span { display:block; padding:8px 30px 0 8px; font-size:10px; }
.map-card small { font-size:8px; padding-right:26px; }
.download-one { position:absolute; right:3px; bottom:7px; width:26px; height:30px; color:var(--accent); font-size:17px; border-radius:4px; background:#333f2d; }
.download-one:hover { background:#425239; }
.lighting-grid :disabled { opacity:.45; cursor:default; }
.live-edit-label { color:var(--accent); }
.live-edit-label small { color:#a4ba90; }
.generation-settings { padding:11px; border:1px solid var(--line); border-radius:5px; margin-top:18px; }
.generation-settings>summary { font-size:11px; color:#bac8ac; cursor:pointer; }
.generation-settings .range-field { margin:15px 0 5px; }
.auto-update { display:flex; align-items:center; gap:6px; margin:12px 0; color:var(--muted); font-size:9px; }
.auto-update input { accent-color:var(--accent); }
.studio-shortcuts { display:flex; align-items:center; gap:10px; margin:-8px 0 20px; flex-wrap:wrap; }
.studio-shortcuts button { padding:8px 12px; font-size:11px; border:1px solid #45523d; border-radius:5px; background:#242c20; color:#cddcbc; }
.model-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:0 14px 12px; }
.model-file-label { display:inline-block; cursor:pointer; }
.model-toolbar>span { font-size:9px; line-height:1.7; color:var(--muted); flex:1; min-width:120px; }
.model-controls { padding:12px 14px; margin:0 14px 12px; border:1px solid #48513d; border-radius:5px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:10px; background:#242b20; }
.model-controls>label { display:flex; align-items:center; gap:6px; }
.model-controls #modelSlot { max-width:210px; }
.model-controls p { width:100%; color:var(--muted); font-size:9px; margin:0; line-height:1.7; }
.model-controls input[type=checkbox] { accent-color:var(--accent); }
#uvCanvas { position:absolute; inset:12% 12% 18%; width:76%; height:70%; object-fit:contain; pointer-events:none; transform-origin:center; }
.brush-toolbar { margin:0 14px 12px; padding:12px; background:#293222; border:1px solid #697953; border-radius:5px; }
.brush-title { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.brush-title strong { font-size:12px; color:var(--accent); }
.brush-title>span { color:#b4c3a2; font-size:9px; flex:1; min-width:150px; }
.brush-controls { display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; }
.brush-controls label { display:flex; align-items:center; gap:6px; font-size:9px; color:#bdcbb0; }
.brush-controls select { padding:5px; max-width:130px; }
.brush-controls input[type=range] { width:65px; margin:0; }
.brush-controls input[type=checkbox] { accent-color:var(--accent); margin:0; }
.brush-controls input[type=color] { padding:0; height:24px; width:30px; border:0; background:none; }
.brush-controls input[type=number] { width:48px; background:#1b2417; color:var(--text); border:1px solid #536445; border-radius:3px; padding:3px; }
.brush-controls output { min-width:25px; }
.brush-controls .outline { padding:5px 10px; font-size:10px; }
.brush-secondary { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:12px; padding-top:10px; border-top:1px solid #435039; }
.brush-secondary select { font-size:9px; padding:5px; max-width:160px; }
.brush-secondary>span { font-size:9px; color:var(--muted); }
.brush-toolbar>small { display:block; margin-top:10px; color:#a9bb98; font-size:8px; line-height:1.7; }
.production-tools { display:grid; gap:16px; margin-top:24px; }
.production-tools>details { padding:20px; background:#1b2118; border:1px solid var(--line); border-radius:8px; scroll-margin-top:20px; }
.production-tools>details>summary { font-size:14px; color:#d5dfca; cursor:pointer; }
.production-tools summary span { font-size:10px; color:var(--muted); margin-left:10px; }
.tool-description { font-size:11px; color:var(--muted); line-height:1.8; margin:12px 0; }
.preset-cards { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:12px; margin-top:18px; }
.preset-card { overflow:hidden; border:1px solid #3d4935; border-radius:6px; background:#222a1d; padding-bottom:10px; display:flex; flex-direction:column; }
.preset-card img { width:100%; aspect-ratio:1; object-fit:cover; }
.preset-card strong { font-size:12px; font-weight:500; padding:10px 9px 0; }
.preset-card small { font-size:8px; color:var(--muted); padding:3px 9px 9px; }
.preset-card button { margin:0 9px 7px; padding:6px; font-size:10px; }
.preset-card a { padding:0 9px; color:var(--accent); font-size:8px; }
.delivery-grid { display:grid; grid-template-columns:1fr 1fr; gap:35px; margin-top:15px; }
.delivery-grid h3 { margin:0 0 12px; font-size:12px; font-weight:500; color:#d2dfc3; }
.delivery-grid label { display:inline-flex; align-items:center; gap:10px; font-size:11px; margin:0 12px 12px 0; }
.delivery-grid .outline { margin:0 10px 12px 0; }
.delivery-grid .primary { display:inline-flex; padding:9px 14px; }
.delivery-grid p[role=status] { font-size:10px; color:var(--accent); }
@media(max-width:1200px) { .preset-cards { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:620px) { .studio-shortcuts { gap:7px; }.studio-shortcuts button { font-size:10px; padding:7px 9px; }.brush-toolbar { margin:0 10px 10px; }.brush-title>span { width:100%; }.brush-controls { gap:10px; }.brush-controls input[type=range] { width:70px; }.preset-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.delivery-grid { grid-template-columns:1fr; gap:24px; }.production-tools>details { padding:15px; }.production-tools summary span { display:block; margin:5px 0; }.model-controls { margin:0 10px 10px; } }
@media(max-width:960px) { .settings-panel .generation-settings { grid-column:1/-1; } }
.workflow-guide { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; color:var(--muted); font-size:12px; margin:0 0 16px; }
.workflow-guide strong { color:var(--accent); font-weight:500; margin-right:5px; }
.workflow-guide i { font-style:normal; color:#65745a; }
.studio-shortcuts { margin:0 0 22px; }
.inspection-toolbar { padding:13px 14px 10px; border-top:1px solid var(--line); }
.inspection-toolbar .segmented button { padding:8px 10px; font-size:11px; white-space:nowrap; }
.import-model-button { padding:8px 11px; font-size:12px; color:var(--accent); border-color:#71835e; background:#2b3823; white-space:nowrap; }
.workspace-status { padding:0 14px 12px; min-height:30px; color:#b9cba8; font-size:11px; line-height:1.7; }
.model-status { margin:0; padding:0 14px 12px; color:var(--muted); font-size:11px; line-height:1.7; }
.model-controls { font-size:11px; scroll-margin-top:100px; }
.model-controls p { font-size:11px; }
.model-controls select { max-width:100%; }
.brush-toolbar { scroll-margin-top:100px; }
.stage.brush-active { height:400px; min-height:400px; }
.brush-title>span,.brush-controls label,.brush-secondary select,.brush-secondary>span { font-size:11px; }
.brush-controls select { max-width:150px; }
.brush-controls .outline { padding:6px 9px; font-size:11px; }
.brush-advanced { margin-top:12px; color:#c0d0b1; font-size:11px; }
.brush-advanced summary { cursor:pointer; }
.brush-secondary { margin-top:9px; }
.brush-toolbar>small { font-size:10px; }
.brush-controls [aria-pressed=true] { color:var(--ink); background:var(--accent); }
@media(max-width:620px) {
  .workflow-guide { font-size:10px; gap:7px; }.workflow-guide strong { width:100%; }
  .inspection-toolbar .import-model-button { width:100%; padding:10px; }
  .inspection-toolbar .segmented button { font-size:11px; padding:8px 4px; }
  .workspace-status { padding:0 10px 12px; }
  .brush-controls label { font-size:11px; }.brush-title>span { font-size:11px; }
}
@media(max-width:1200px) {
  .shape-switcher button { padding:5px 7px!important; font-size:10px!important; }
  .inspection-toolbar { justify-content:center; }
  .lighting-grid { gap:10px 14px; }
  .preview-actions { gap:10px; }
}
@media(max-width:620px) {
  .preview-toolbar { padding:10px; }
  .inspection-toolbar { padding:0 10px 10px; justify-content:flex-start; }
  .inspection-toolbar .segmented { flex:1; }
  .inspection-toolbar .segmented button { flex:1; padding:5px; }
  .tile-options { width:100%; justify-content:space-between; }
  .lighting-controls { padding:14px; }
  .stage { height:370px; min-height:370px; }
  .preview-heading { padding:13px 14px; }
  .preview-actions { gap:10px; }
  .seamless-field { display:flex!important; width:100%!important; margin:14px 0 7px!important; align-items:center; }
  .seamless-field select { width:170px; max-width:170px!important; }
  .input-panel .seamless-width { margin:14px 0; }
  .download-one { right:4px; }
}
/* Independent viewports keep camera navigation and texture editing separate. */
.stage { display:grid; grid-template-columns:minmax(0,1fr); }
.scene-viewport,.texture-viewport { position:relative; min-width:0; min-height:0; overflow:hidden; }
.scene-viewport { background:radial-gradient(ellipse at 50% 45%,#3b4538,#1d241d 80%); }
.texture-viewport { background:#181d1b; background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px); background-size:24px 24px; }
.stage.split-view { grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:470px; height:470px; }
.stage.split-view .texture-viewport { border-left:1px solid #4c5745; }
.stage.brush-active { min-height:470px; height:470px; }
.viewport-heading { position:absolute; z-index:3; top:15px; left:14px; right:14px; font-size:11px; color:#c5d4b5; pointer-events:none; }
.viewport-heading small { display:block; margin-top:4px; font-size:9px; color:#8d9d85; }
#mapCanvas,#uvCanvas { position:absolute; inset:14% 5% 16%; width:90%; height:70%; object-fit:contain; transform-origin:center; }
.brush-cursor { position:absolute; pointer-events:none; z-index:8; border:1px solid #fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 1px #000c; }
.brush-cursor>span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px dashed #fff9; border-radius:50%; box-shadow:0 0 0 1px #0006; }
.brush-cursor>i { position:absolute; width:3px; height:3px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:white; box-shadow:0 0 0 1px #000b; }
.brush-cursor>small { position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%); color:white; background:#111d; padding:2px 5px; border-radius:3px; font:10px ui-monospace,monospace; white-space:nowrap; }
.brush-cursor.sampling { border-style:dashed; border-color:#ffd878; }
.brush-cursor.sampling>i { width:11px; height:1px; border-radius:0; background:#ffd878; }
.brush-cursor.sampling>i::after { content:""; position:absolute; left:5px; top:-5px; height:11px; width:1px; background:#ffd878; }
.stage.split-view .stage-caption { gap:12px; font-size:9px; }
.stage.split-view .stage-caption small { max-width:48%; text-align:right; }
.inspection-toolbar .segmented { flex-wrap:wrap; }
@media(min-width:961px) and (max-width:1599px) { .workbench { grid-template-columns:220px minmax(320px,1fr) 220px; }.panel { padding:20px 16px; } }
@media(max-width:620px) {
  .stage.split-view,.stage.brush-active.split-view { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr); height:680px; min-height:680px; }
  .stage.split-view .texture-viewport { border-left:0; border-top:1px solid #4c5745; }
  .stage.split-view .stage-caption { display:none; }
  .viewport-heading { top:10px; left:12px; }
}
.brush-shelf { padding:13px 14px; background:#20271e; border-top:1px solid #48563d; border-bottom:1px solid #36402f; }
.brush-shelf-heading { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-bottom:10px; }
.brush-shelf-heading strong { font-size:12px; color:var(--accent); }
.brush-shelf-heading>span { font-size:10px; color:#9bac90; }
.brush-presets { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(72px,1fr); gap:7px; overflow-x:auto; padding:1px 1px 6px; }
.brush-preset { border:1px solid #3d4a35; border-radius:5px; padding:7px 4px; background:#182015; display:flex; flex-direction:column; align-items:center; gap:6px; min-height:62px; }
.brush-preset>span { font-size:10px; color:#b7c6a9; white-space:nowrap; }
.brush-preset>i { width:25px; height:25px; display:block; border-radius:50%; background:#ccd9bb; }
.brush-preset-soft>i,.brush-preset-smooth>i,.brush-preset-smudge>i { background:radial-gradient(circle,#e3edd6 10%,#b2c39a77 40%,transparent 70%); }
.brush-preset-square>i { border-radius:1px; }
.brush-preset-spray>i { background-color:transparent; background-image:radial-gradient(#c7d9af 1px,transparent 1px); background-size:5px 5px; }
.brush-preset-clone>i { border:2px solid #b2c797; background:transparent; box-shadow:6px -3px 0 -2px #182015,6px -3px 0 0 #b2c797; }
.brush-preset-restore>i { background:conic-gradient(#b5ca9c 0deg 210deg,transparent 210deg); mask:radial-gradient(circle,transparent 45%,black 48%); }
.brush-preset-material>i { border-radius:3px; background:linear-gradient(135deg,#c7d4b5 48%,#59684d 49%); }
.brush-preset.active { border-color:#a9c18e; background:#34402a; box-shadow:inset 0 0 0 1px #a9c18e33; }
.brush-preset.active>span { color:#e1edcf; }
.brush-shelf-options { display:flex; flex-wrap:wrap; gap:9px 13px; align-items:center; margin-top:8px; }
.brush-shelf-options label { display:flex; align-items:center; gap:6px; color:#bbc9ad; font-size:11px; }
.brush-shelf-options select { padding:5px; font-size:11px; max-width:145px; }
.brush-shelf-options .outline { padding:6px 10px; font-size:11px; }
.brush-shelf-options [aria-pressed=true] { background:#abc3bf; color:#162424; }
.brush-shelf-options input[type=range] { width:70px; margin:0; }
.brush-palette { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:11px; }
.brush-palette>span { font-size:10px; color:#adbd9f; }
#brushColors { display:flex; gap:6px; }
#brushColors button { width:20px; height:20px; border:1px solid #b4c4a866; border-radius:3px; }
.brush-palette>small { color:#8e9e80; font-size:9px; flex:1; min-width:180px; }
.brush-cursor.square,.brush-cursor.square>span { border-radius:1px; }
.symmetry-guides { position:absolute; pointer-events:none; z-index:4; }
#symmetryGuideX { position:absolute; top:0; left:50%; height:100%; border-left:1px dashed #e5bd6d99; }
#symmetryGuideY { position:absolute; top:50%; left:0; width:100%; border-top:1px dashed #e5bd6d99; }
.stage.brush-active { height:400px; min-height:400px; }
@media(max-width:620px) { .brush-shelf { padding:12px 10px; }.brush-shelf-heading>span { line-height:1.6; }.brush-presets { grid-auto-columns:78px; }.stage.brush-active.split-view { height:640px; min-height:640px; } }

/* Two workspaces: generate a base, then edit its layers. */
.workspace-modes { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 20px; }
.workspace-mode-switch { display:flex; gap:6px; padding:5px; background:#1b201a; border:1px solid #35402f; border-radius:9px; }
.workspace-mode-switch>button { display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:200px; padding:11px 17px; border-radius:5px; text-align:left; }
.workspace-mode-switch strong { font-size:14px; font-weight:600; }
.workspace-mode-switch small { font-size:10px; color:#8f9b86; }
.workspace-mode-switch>button.active { background:#37432e; color:#e0edcf; box-shadow:inset 0 0 0 1px #637750; }
.workspace-mode-switch>button.active small { color:#afc29c; }
.workspace-resources { display:flex; flex-wrap:wrap; gap:9px 18px; color:#aab79f; font-size:11px; }
.workspace-resources button { padding:5px 0; border-bottom:1px solid #3d4835; }
.workbench.mode-generate { grid-template-columns:260px minmax(0,1fr); }
.workbench.mode-edit { grid-template-columns:minmax(0,1fr) 268px; }
.mode-generate .settings-panel,.mode-generate .editor-only,.mode-generate .layout-switcher,.mode-edit .input-panel,.mode-edit .maps-panel { display:none!important; }
.mode-generate>.input-panel { grid-column:1; grid-row:1; }
.mode-generate>.preview-panel { grid-column:2; grid-row:1; }
.mode-edit>.preview-panel { grid-column:1; grid-row:1; }
.mode-edit>.settings-panel { display:block; grid-column:2; grid-row:1; padding:20px 16px; }
.workbench>.maps-panel { grid-column:1/-1; }
.workbench>.export-panel { grid-column:1/-1; border-left:0; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:24px; padding:15px 20px; }
.export-panel>.export-format { margin-left:auto; flex-direction:row; align-items:center; }
.export-panel>.primary { width:auto; min-width:190px; }
.input-panel>.generation-settings { margin:16px 0; }
.mode-generate .stage { min-height:510px; height:510px; }
.mode-edit .stage,.mode-edit .stage.brush-active { min-height:460px; height:460px; }
.mode-edit .inspection-toolbar { justify-content:flex-start; }
.editor-draw-actions { margin-left:auto; }
.editor-draw-actions .outline { font-size:11px; padding:7px 11px; }
.editor-draw-actions .active { background:#3b492f; color:#d6e8c1; }
.mode-generate .inspection-toolbar { display:none; }
.preview-auxiliary { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; padding:10px 14px; border-top:1px solid #323d2c; }
.preview-auxiliary button { padding:5px 0; font-size:11px; }
.preview-auxiliary button.active { color:#e4c68d; border-bottom:1px solid #b6a174; }
.preview-auxiliary>span { color:#839479; font-size:10px; margin-left:auto; }
.layer-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.layer-panel-heading h2 { margin:0; font-size:13px; font-weight:600; }
.layer-panel-heading>.outline { padding:5px 9px; font-size:11px; }
.layer-intro { font-size:10px; line-height:1.8; color:#95a38a; margin:10px 0; }
.layer-list { display:flex; flex-direction:column; gap:5px; margin:16px 0 10px; }
.layer-row { display:flex; align-items:stretch; border:1px solid #3b4633; border-radius:5px; background:#20271c; min-width:0; }
.layer-row.active { border-color:#92aa78; background:#34432a; box-shadow:inset 0 0 0 1px #a6c18322; }
.layer-row.muted { background:#1b2018; }
.layer-row.muted strong { opacity:.5; }
.layer-visibility { padding:0 8px; color:#b5c99f; font-size:16px; min-width:32px; }
.layer-select { padding:10px 6px; flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; }
.layer-select strong { font-size:11px; font-weight:500; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-select small { font-size:9px; color:#90a180; }
.layer-select:disabled,.layer-visibility:disabled { cursor:default; opacity:.75; }
.layer-actions { display:flex; gap:10px; justify-content:space-between; margin:10px 0 20px; }
.layer-actions button { font-size:10px; padding:4px 0; }
.layer-name-field { display:flex; flex-direction:column; gap:7px; font-size:10px; color:#a5b59a; }
.layer-name-field input { min-width:0; width:100%; border:1px solid #44513b; color:var(--text); border-radius:4px; background:#171e14; padding:7px 8px; }
.layer-panel>.range-field { margin:17px 0 12px; }
.layer-panel .range-field>span { font-size:10px; }
.layer-history-actions { display:flex; gap:8px; margin:14px 0; }
.layer-history-actions button { flex:1; padding:6px; font-size:11px; }
.global-adjustments { margin-top:25px; padding-top:16px; border-top:1px solid var(--line); }
.global-adjustments>summary { color:#aab99d; font-size:11px; cursor:pointer; }
.global-adjustments>.panel-title { margin:20px 0; }
.global-adjustments .panel-title>span:first-child { display:none; }
.global-adjustments .range-field>span { font-size:10px; }
.surface-brush-cursor { z-index:8; }
@media(max-width:960px) {
  .workbench.mode-generate { grid-template-columns:230px minmax(0,1fr); }
  .workbench.mode-edit { grid-template-columns:minmax(0,1fr) 230px; }
  .mode-edit>.settings-panel { border-top:0; border-left:1px solid var(--line); }
  .workspace-modes { flex-wrap:wrap; gap:12px; }
  .workspace-resources { margin-left:auto; }
  .mode-edit .brush-presets { grid-auto-columns:78px; }
}
@media(max-width:620px) {
  .workspace-mode-switch { width:100%; }
  .workspace-mode-switch>button { min-width:0; flex:1; padding:10px; }
  .workspace-mode-switch strong { font-size:12px; }
  .workspace-mode-switch small { font-size:9px; }
  .workspace-resources { gap:20px; margin:0; }
  .mode-edit>.settings-panel { border-top:1px solid var(--line); border-left:0; }
  .mode-generate .stage { min-height:390px; height:390px; }
  .mode-edit .stage.split-view,.mode-edit .stage.brush-active.split-view { min-height:680px; height:680px; }
  .mode-edit .stage:not(.split-view) { min-height:380px; height:380px; }
  .workbench>.export-panel { flex-wrap:wrap; padding:15px; gap:15px; }
  .export-panel>.primary { width:100%; }
  .export-panel>.export-format { flex-direction:column; align-items:flex-start; }
  .preview-auxiliary>span { margin-left:0; width:100%; font-size:9px; }
}

/* Viewport-local inspection stays next to the model in either workspace. */
.scene-viewport { container-type:inline-size; }
.scene-viewport>.viewport-heading { right:265px; }
.viewport-tools { position:absolute; top:13px; right:13px; z-index:9; padding:7px 9px 6px; border:1px solid #75836c66; border-radius:6px; background:#1b231aeb; box-shadow:0 3px 12px #0002; color:#dce6d2; }
.viewport-tools-row { display:flex; align-items:center; gap:11px; }
.viewport-light-toggle { min-width:68px; padding:5px 7px; border:1px solid #5b6d4c; border-radius:4px; font-size:11px; color:#d7e6c6; background:#34442a; white-space:nowrap; }
.viewport-light-toggle[aria-pressed=false] { background:#242a23; color:#b8c3b0; border-color:#485342; }
.viewport-light-toggle:disabled { opacity:.6; cursor:default; }
.viewport-tools label { display:flex; align-items:center; gap:7px; font-size:10px; color:#abb9a0; }
.viewport-tools select { width:112px; padding:5px 7px; background:#252e21; border-color:#5b694f; font-size:11px; color:#dce6d2; }
.viewport-tools-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:5px; color:#92a486; }
.viewport-tools-meta small { font-size:9px; }
.viewport-resolution { font:9px ui-monospace,monospace; letter-spacing:.5px; opacity:.7; }
@container(max-width:420px) {
  .scene-viewport>.viewport-heading { top:82px; right:14px; }
  .viewport-tools { top:10px; right:10px; padding:6px 8px; }
}

/* Keep brush color selection beside the editable layers. */
.brush-color-panel { padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.brush-color-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.brush-color-heading h2 { margin:0; font-size:13px; font-weight:600; }
.brush-color-heading>span { color:var(--muted); font:10px ui-monospace,monospace; letter-spacing:.08em; }
.brush-color-wheel { position:relative; width:164px; height:164px; margin:0 auto 14px; border-radius:50%; touch-action:none; cursor:crosshair; background:radial-gradient(circle closest-side,#fff 0%,rgba(255,255,255,0) 100%),conic-gradient(from 90deg,#f00 0deg,#ff0 60deg,#0f0 120deg,#0ff 180deg,#00f 240deg,#f0f 300deg,#f00 360deg); box-shadow:0 0 0 1px #ffffff26,0 4px 18px #0003; }
.brush-color-wheel::before { content:""; position:absolute; inset:0; border-radius:inherit; background:#000; opacity:calc(1 - var(--wheel-value,1)); pointer-events:none; }
.brush-color-wheel:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.brush-color-marker { position:absolute; z-index:1; width:12px; height:12px; border:2px solid #fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 1px #000c; pointer-events:none; }
.brush-color-wheel[aria-disabled=true] { opacity:.4; cursor:default; }
.brush-brightness { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:11px; white-space:nowrap; }
.brush-brightness input { flex:1; width:0; min-width:0; height:12px; margin:0; border:1px solid #ffffff24; border-radius:6px; appearance:none; background:linear-gradient(to right,#000,var(--wheel-color,#fff)); }
.brush-brightness input::-webkit-slider-thumb { appearance:none; width:10px; height:18px; background:#eef2e9; border:1px solid #151820; border-radius:3px; box-shadow:0 0 0 1px #ffffff66; }
.brush-brightness input::-moz-range-thumb { width:8px; height:16px; background:#eef2e9; border:1px solid #151820; border-radius:3px; }
.brush-color-hex { display:flex; align-items:center; gap:9px; margin-top:12px; color:var(--muted); font-size:10px; }
.brush-color-swatch { width:29px; height:29px; border:1px solid #ffffff40; border-radius:6px; flex-shrink:0; }
.brush-color-hex input { width:100%; min-width:0; padding:6px 8px; font:12px ui-monospace,monospace; }
.brush-color-hex input[aria-invalid=true] { border-color:#ec8f67; }
.brush-color-panel>p { margin:9px 0 0; font-size:10px; color:var(--muted); line-height:1.5; }
@media(max-width:620px) { .brush-color-panel { max-width:300px; margin-inline:auto; } }