/* ==========================================================================
   AF WoodWorker — 3D Design Studio
   Chrome only. The scene itself is studio.js.

   Retokenised onto the site palette so the studio reads as an AF page rather
   than a separate application. Fonts come from the site: Archivo for the
   display type, Source Sans 3 for everything read, Archivo width 72 for labels.
   ========================================================================== */

/* The studio keeps its own short aliases, but every one of them now points at a
   site token. They previously read `--bone: var(--st-fg)` — self-referential,
   which makes the property invalid, so the browser dropped it and inherited
   black. Aliases must never share a name with what they alias. */
.app,.studio-nojs{
  --st-bg:var(--sunk);
  --st-fg:var(--st-fg);
  --st-muted:var(--st-muted);
  --st-oak:var(--acc);
  --st-oak2:var(--acc-2);
  --st-line:rgba(239,234,225,.14);
  --st-panel:rgba(15,13,11,.82);
}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--sunk);color:var(--bone);
  font-family:var(--f-t);overflow:hidden}
button{font:inherit;color:inherit}.app{height:100%;display:grid;grid-template-rows:64px 1fr}
.top{display:flex;align-items:center;gap:18px;padding:0 clamp(1.2rem,4vw,2.4rem);
  border-bottom:1px solid var(--st-line);background:rgba(20,18,15,.92);
  backdrop-filter:blur(14px);z-index:20}
/* The site mark, masked over a solid fill — the same technique and the same
   file the main header uses, so one artwork serves every ground. */
.brand{display:flex;align-items:center;gap:11px;min-width:240px;color:var(--st-fg);
  text-decoration:none;transition:opacity 220ms}
.brand:hover,.brand:focus-visible{opacity:.82}
.mark{width:34px;height:34px;flex:none;display:block;background:var(--st-fg);
  forced-color-adjust:none;
  -webkit-mask:url("../brand/af-arc.svg") center/contain no-repeat;
  mask:url("../brand/af-arc.svg") center/contain no-repeat}
@supports not ((-webkit-mask-image:url("#m")) or (mask-image:url("#m"))){
  .mark{background:url("../logo-white.png") center/contain no-repeat}
}
.brand b{font-family:var(--f-d);font-variation-settings:"wdth" 105,"wght" 650;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase}.brand small{display:block;font-family:var(--f-m);font-stretch:72%;color:var(--st-muted);font-size:.55rem;letter-spacing:var(--ls);text-transform:uppercase;margin-top:3px}
.scene-tabs{display:flex;gap:6px;margin-left:auto}
.backlink{display:inline-flex;align-items:center;gap:.55rem;margin-left:1rem;
  min-height:38px;padding:0 .8rem;border:1px solid var(--st-line);
  font-family:var(--f-m);font-stretch:72%;font-size:.62rem;text-transform:uppercase;
  letter-spacing:var(--ls);color:var(--st-muted);
  transition:color 220ms,border-color 220ms,background 220ms}
.backlink:hover,.backlink:focus-visible{color:var(--st-fg);border-color:var(--st-oak);
  background:rgba(176,138,94,.12)}
@media(max-width:820px){.backlink span{display:none}.backlink{padding:0;width:38px;justify-content:center}}
.backlink svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}.tab,.btn{border:1px solid var(--st-line);background:transparent;height:38px;padding:0 14px;
  font-family:var(--f-m);font-stretch:72%;font-size:.64rem;letter-spacing:var(--ls);
  text-transform:uppercase;cursor:pointer;color:var(--st-fg);
  transition:border-color 220ms,color 220ms,background 220ms}
.tab:hover,.btn:hover{border-color:var(--st-oak);color:var(--st-oak2)}
.tab.active,.btn[aria-pressed="true"]{background:var(--st-oak);border-color:var(--st-oak);color:#14120F}
.stage{position:relative;min-height:0;background:radial-gradient(circle at 55% 42%,#2a241d 0,#12100d 55%,#0a0907 100%)}
#viewer{position:absolute;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}
/* Culling the near wall made the room far brighter, which left the copy and
   the tool rail sitting on a lit scene instead of a dark one. The scrim now
   carries its own corners rather than relying on the render being dim. */
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 0% 0%,rgba(8,7,6,.92),rgba(8,7,6,.42) 34%,transparent 62%),radial-gradient(80% 60% at 100% 0%,rgba(8,7,6,.80),transparent 55%),radial-gradient(90% 70% at 100% 100%,rgba(8,7,6,.78),transparent 58%),linear-gradient(0deg,rgba(8,7,6,.86),transparent 38%)}
.copy{position:absolute;left:24px;top:24px;z-index:5;max-width:430px;pointer-events:none}.eyebrow{font-family:var(--f-m);font-stretch:72%;font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:var(--st-oak);display:flex;gap:9px;align-items:center}.eyebrow:before{content:"";width:32px;height:1px;background:var(--st-oak)}
.copy h1{font-family:var(--f-d);font-variation-settings:"wdth" 80,"wght" 700;color:var(--bone);font-size:clamp(40px,5.2vw,74px);line-height:.9;letter-spacing:-.05em;margin:14px 0 13px}.copy p{max-width:33ch;color:#c2b7aa;font-size:12px;line-height:1.55;margin:0}
/* Three clusters with a hairline between them, so the eye reads "add" /
   "look" / "take away" instead of seven equal buttons. */
.tools{position:absolute;right:22px;top:20px;z-index:7;display:flex;gap:8px;
  flex-wrap:wrap;justify-content:flex-end;align-items:stretch;max-width:560px}
.tools__grp{display:flex;gap:5px}
.tools__sep{width:1px;align-self:stretch;background:var(--st-line);margin:2px 1px}
.views{position:absolute;right:22px;bottom:118px;z-index:6;display:grid;gap:6px}.view{min-width:118px;text-align:left;border:1px solid var(--st-line);background:var(--st-panel);padding:9px 11px;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.view:hover{border-color:var(--st-oak)}.panel{position:absolute;z-index:7;left:22px;bottom:20px;width:min(720px,calc(100% - 44px));border:1px solid var(--st-line);background:var(--st-panel);backdrop-filter:blur(14px);padding:13px}
.panel-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:9px;color:var(--st-muted);font-family:var(--f-m);font-stretch:72%;font-size:.62rem;letter-spacing:var(--ls);text-transform:uppercase}#finishName{color:var(--st-fg);font-size:10px}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.sw{border:1px solid var(--st-line);background:#15120f;padding:6px;min-height:56px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;cursor:pointer}.sw:hover,.sw.active{border-color:var(--st-oak);transform:translateY(-2px)}.chip{height:15px;background:var(--c);border:1px solid rgba(255,255,255,.08)}.sw span{font-size:.55rem;letter-spacing:.05em;white-space:nowrap}
.stats{position:absolute;right:22px;bottom:20px;z-index:6;border:1px solid var(--st-line);background:var(--st-panel);padding:10px 12px;min-width:190px}.stats div{display:flex;justify-content:space-between;gap:20px;padding:3px 0;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase}.stats span:first-child{color:var(--st-muted)}.stats span:last-child{color:var(--st-oak2)}
.loader{position:absolute;z-index:50;inset:0;background:#0d0c0a;display:grid;place-items:center;transition:.45s}.loader.done{opacity:0;visibility:hidden}.loadbox{width:min(320px,72vw);text-align:center}.loadmark{font-family:var(--f-d);font-variation-settings:"wdth" 100,"wght" 650;font-size:40px;letter-spacing:.06em;margin-bottom:16px;color:var(--bone)}.bar{height:1px;background:rgba(239,234,225,.15)}.bar i{display:block;height:100%;width:0;background:var(--st-oak);transition:.3s}.loader p{font-size:.62rem;color:var(--st-muted);letter-spacing:.14em;text-transform:uppercase}
@media(max-width:820px){.app{grid-template-rows:56px 1fr}.top{padding:0 10px;gap:7px}.brand{min-width:0}.brand small{display:none}.scene-tabs{overflow-x:auto}.tab{padding:0 8px;height:32px}.copy{left:14px;top:14px;max-width:280px}h1{font-size:44px}.copy p{font-size:10px;max-width:26ch}.tools{right:10px;top:10px;gap:4px}.tools .btn{height:32px;padding:0 8px;font-size:.55rem}.views,.stats{display:none}.panel{left:9px;bottom:9px;width:calc(100% - 18px);padding:9px}.swatches{grid-template-columns:repeat(5,minmax(92px,1fr));overflow-x:auto}}
@media(prefers-reduced-motion:reduce){.sw{transition:none}}

.btn--accent{border-color:rgba(176,138,94,.72);background:rgba(176,138,94,.10);color:var(--st-oak2)}
.library{position:absolute;z-index:16;right:22px;top:70px;width:310px;max-height:calc(100% - 218px);
overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--st-line);background:rgba(14,12,10,.94);
backdrop-filter:blur(18px);box-shadow:0 20px 65px rgba(0,0,0,.38);transform:translateX(calc(100% + 38px));
opacity:0;visibility:hidden;transition:transform .34s cubic-bezier(.16,.84,.32,1),opacity .24s}
.library.open{transform:none;opacity:1;visibility:visible}
.library__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 15px 12px;border-bottom:1px solid var(--st-line)}
.library__head>div{display:grid;gap:4px}.library__eyebrow{font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--st-oak)}
.library__head strong{font-size:13px}.iconbtn{width:31px;height:31px;border:1px solid var(--st-line);background:transparent;cursor:pointer;font-size:18px}
.library__intro{padding:11px 15px;color:var(--st-muted);font-size:9px;line-height:1.5;border-bottom:1px solid var(--st-line)}
.library__list{padding:8px;overflow:auto;display:grid;gap:6px}
.libitem{border:1px solid var(--st-line);background:#15120f;padding:10px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;cursor:pointer;text-align:left}
.libitem:hover{border-color:var(--st-oak);background:#19150f}.libitem__meta{display:grid;gap:4px}
.libitem__cat{font-size:6px;letter-spacing:.14em;text-transform:uppercase;color:var(--st-oak)}
.libitem__name{font-size:10px;color:var(--st-fg)}.libitem__add{font-size:16px;color:var(--st-oak2)}
.objectbar{position:absolute;z-index:18;left:50%;top:18px;transform:translateX(-50%);min-width:min(660px,calc(100% - 420px));
border:1px solid rgba(176,138,94,.45);background:rgba(12,10,8,.91);backdrop-filter:blur(16px);padding:8px 9px;display:flex;align-items:center;gap:16px}
.objectbar[hidden]{display:none}.objectbar__name{display:grid;gap:2px;min-width:118px}.objectbar__name span{font-size:6px;letter-spacing:.13em;text-transform:uppercase;color:var(--st-muted)}
.objectbar__name strong{font-size:10px}.objectbar__actions{display:flex;gap:5px;flex-wrap:wrap}
.mini{height:30px;border:1px solid var(--st-line);background:transparent;padding:0 9px;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.mini:hover,.mini.active{border-color:var(--st-oak);color:var(--st-oak2)}.mini--danger:hover{border-color:#ae7465;color:#d8a08f}
.toast{position:absolute;z-index:60;left:50%;bottom:104px;transform:translate(-50%,12px);padding:8px 12px;border:1px solid var(--st-line);
background:rgba(12,10,8,.92);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;opacity:0;pointer-events:none;transition:.22s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:820px){
 .library{right:8px;left:8px;top:auto;bottom:76px;width:auto;max-height:52%;transform:translateY(calc(100% + 88px))}
 .library.open{transform:none}.objectbar{top:auto;bottom:76px;left:8px;right:8px;transform:none;min-width:0;display:grid;gap:7px}
 .objectbar__actions{overflow-x:auto;flex-wrap:nowrap}.mini{flex:none}.toast{bottom:145px}
 .copy{pointer-events:none}.tools{max-width:76vw}.tools #saveDesign,.tools #capture{display:none}
}


/* ======================================================================
   V4.2 — ICON-FIRST CONTROL SYSTEM
   ====================================================================== */
svg{display:block}
.tab svg,.toolbtn svg,.mini svg,.iconbtn svg,.view svg,.libitem__icon svg{
 width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none
}
.scene-tabs .tab{display:flex;align-items:center;gap:7px;min-width:112px;justify-content:center}
.scene-tabs .tab svg{width:15px;height:15px}
.tools{gap:5px}
.toolbtn{
 position:relative;height:42px;min-width:54px;padding:0 10px;border:1px solid var(--st-line);
 background:rgba(13,12,10,.72);backdrop-filter:blur(14px);display:grid;grid-template-rows:18px auto;
 place-items:center;gap:2px;cursor:pointer;color:var(--st-fg);transition:border-color .2s,color .2s,background .2s,transform .2s
}
.toolbtn svg{width:16px;height:16px}
.toolbtn span{font-size:6px;letter-spacing:.11em;text-transform:uppercase;color:var(--st-muted)}
.toolbtn:hover,.toolbtn:focus-visible,.toolbtn[aria-pressed="true"]{
 border-color:var(--st-oak);color:var(--st-oak2);background:rgba(176,138,94,.11);transform:translateY(-1px);outline:none
}
.toolbtn:hover span,.toolbtn[aria-pressed="true"] span{color:var(--st-oak2)}
.toolbtn--accent{border-color:rgba(176,138,94,.72);background:rgba(176,138,94,.12);color:var(--st-oak2)}
[data-tip]{position:relative}
[data-tip]::after{
 content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);transform:translate(-50%,-3px);
 background:#0b0a08;border:1px solid var(--st-line);padding:6px 8px;color:var(--st-fg);font-size:.55rem;letter-spacing:.05em;
 text-transform:none;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:.16s;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:99
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.objectbar{border-radius:2px}
.objectbar__actions{align-items:center}
.mini{
 position:relative;height:34px;min-width:42px;display:flex;align-items:center;justify-content:center;gap:6px;
 padding:0 9px;border:1px solid var(--st-line);background:rgba(255,255,255,.015);color:var(--st-fg)
}
.mini svg{width:15px;height:15px}
.mini span{font-size:6px;letter-spacing:.08em;text-transform:uppercase}
.mini--icon{width:34px;min-width:34px;padding:0}
.mini--danger{color:#b78b7d}
.mini.active{background:rgba(176,138,94,.10)}
.iconbtn{display:grid;place-items:center;padding:0}
.iconbtn svg{width:15px;height:15px}
.libitem{grid-template-columns:36px 1fr auto;padding:9px;gap:10px}
.libitem__icon{
 width:36px;height:36px;border:1px solid var(--st-line);display:grid;place-items:center;color:var(--st-oak2);
 background:rgba(176,138,94,.05)
}
.libitem__icon svg{width:18px;height:18px}
.libitem:hover .libitem__icon{border-color:var(--st-oak);background:rgba(176,138,94,.10)}
.libitem__add{font-size:17px}
.view{
 display:flex;align-items:center;gap:8px;min-width:126px;text-align:left;
 border:1px solid var(--st-line);background:var(--st-panel);padding:9px 10px;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;cursor:pointer
}
.view svg{width:14px;height:14px;color:var(--st-oak)}
.view:hover{background:rgba(176,138,94,.08)}
@media(max-width:820px){
 .scene-tabs .tab{min-width:38px;width:38px;padding:0}
 .scene-tabs .tab span{display:none}.scene-tabs .tab svg{width:17px;height:17px}
 .tools{right:8px;top:8px;max-width:none;display:flex;flex-wrap:wrap;gap:6px;
   justify-content:flex-end}
 .tools__grp{gap:4px}
 .tools__sep{display:none}
 .toolbtn{width:42px;min-width:42px;height:40px;padding:0;grid-template-rows:1fr}
 .toolbtn span{display:none}.toolbtn svg{width:17px;height:17px}
 .tools #saveDesign,.tools #capture,.tools #download{display:grid}
 .objectbar{bottom:74px;padding:7px}
 .objectbar__name{display:none}
 .objectbar__actions{display:grid;grid-auto-flow:column;grid-auto-columns:42px;overflow-x:auto;gap:5px}
 .mini{width:42px;min-width:42px;height:40px;padding:0}.mini span{display:none}.mini svg{width:17px;height:17px}
 [data-tip]::after{display:none}
}

/* Shown only when a scene fails: the loader has to be escapable, not a wall. */
.loadretry{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  margin-top:14px;padding:0 16px;border:1px solid var(--st-oak);color:var(--st-oak2);
  font-family:var(--f-m);font-stretch:72%;font-size:.64rem;letter-spacing:var(--ls);
  text-transform:uppercase;text-decoration:none;transition:background 220ms,color 220ms}
.loadretry:hover,.loadretry:focus-visible{background:rgba(176,138,94,.16);color:var(--st-fg)}