/* The Enchanted Workshop — Mesh Polishing Bench (v65)
   Presentation only. Original model-processing JavaScript is untouched. */
:root, :root[data-theme="dark"] {
  color-scheme: light;
  --bg:#f3e4c9; --panel:#fff0d3; --ink:#432348; --muted:#795a71; --line:#c6985e;
  --view:#332038; --grid:#705676; --accent:#68256f; --accent-ink:#fff1d2; --accent-soft:#f5e6d2;
  --warn:#8c5709; --warn-soft:#fff0cf; --bad:#9e2836; --bad-soft:#f8dcdc; --ok:#386b47;
  --display:Georgia,'Times New Roman',serif; --body:Georgia,'Times New Roman',serif;
}
html,body{height:auto;min-height:100%;}
body{background:radial-gradient(ellipse at 50% 0%,#603363 0%,#3a193d 50%,#2b1031 100%);color:var(--ink);font:15px/1.5 Georgia,serif;}
.enchanted-mesh-banner{height:162px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  isolation:isolate;background:radial-gradient(ellipse at center,#623366 0%,#3b1b43 69%,#2c1131 100%);
  border-bottom:3px solid #b87b33;box-shadow:0 4px 18px #1a0b27;padding:12px 26px;}
.enchanted-mesh-banner:after{content:'';position:absolute;bottom:5px;left:5%;right:5%;border-bottom:1px solid #af7446;opacity:.58;}
.mesh-banner-illustration{position:absolute;top:4px;height:150px;width:auto;max-width:35%;object-fit:contain;pointer-events:none;z-index:-1;}
.mesh-banner-left{left:1.5%;}.mesh-banner-right{right:1.5%;}
.mesh-banner-center{text-align:center;z-index:2;background:radial-gradient(ellipse at center,rgba(56,20,61,.92),rgba(56,20,61,.44) 65%,transparent 100%);padding:12px 58px;}
.mesh-banner-eyebrow{font-family:Georgia,serif!important;color:#efd29c!important;letter-spacing:.18em;font-size:11px;font-weight:700;margin:0 0 4px;}
.mesh-banner-title{font:italic 700 clamp(32px,4vw,62px)/1.1 Georgia,serif;color:#fae4a9;letter-spacing:-.035em;
  text-shadow:0 2px 0 #5a265a,0 3px 7px #1b0828,0 0 16px #be7f7c;}
.mesh-banner-subtitle{margin:6px 0 0;color:#f6d8ae;font:italic 16px Georgia,serif;letter-spacing:.02em;}
.app{display:grid;grid-template-columns:minmax(300px,350px) minmax(380px,1fr) minmax(280px,330px);
  gap:14px;max-width:1760px;margin:18px auto 30px;padding:0 14px;min-height:calc(100vh - 214px);align-items:stretch;}
.app > aside:first-child{padding:20px 20px 28px;background:linear-gradient(#fff1d8,#f3d8a9);border:3px solid #b78241;
  outline:1px solid #f9e5b7;outline-offset:-9px;border-radius:20px;box-shadow:0 8px 22px #210b2699,inset 0 0 0 4px #f7dca7;
  max-height:calc(100vh - 205px);min-height:540px;gap:15px;overflow:auto;scrollbar-color:#b4814f #f6e7cb;}
.app > aside:first-child header{padding-bottom:6px;border-bottom:1px solid #c59a66;}
.app > aside:first-child header h1{font:bold 26px/1.2 Georgia,serif;color:#5b225f;letter-spacing:-.01em;}
.app > aside:first-child header p{color:#6c4d65;line-height:1.4;font:14px/1.48 Georgia,serif;}
.app > aside:first-child section{padding:14px 13px;gap:9px;background:linear-gradient(165deg,#fff7e7,#f7e1b9);
  border:1px solid #d7aa67;border-radius:14px;box-shadow:0 3px 0 #d1a26777,inset 0 0 0 2px #fff1d4;}
.app > aside:first-child h2{color:#67296d;font:bold 18px/1.2 Georgia,serif;letter-spacing:0;text-transform:none;
  padding-bottom:8px;border-bottom:1px solid #d8b686;}
.app > aside:first-child .note{font:12.5px/1.48 Georgia,serif;color:#735772;}
.app > aside:first-child label{font-size:13.5px;color:#4d3453;}
.app > aside:first-child input[type="text"], .app > aside:first-child input[type="number"],
.app > aside:first-child select{background:#fff9ef;border:1px solid #c69a66;color:#48244d;border-radius:8px;}
.drop{background:linear-gradient(140deg,#f6e6ec,#faedda);border:2px dashed #9864a0;min-height:90px;display:flex;flex-direction:column;justify-content:center;}
.drop strong{font:bold 15px Georgia,serif;color:#612569;}.drop span{font:12px/1.45 Georgia,serif;}
.drop.over{background:#f1deed;border-color:#742779;}
.btn{font:600 14px Georgia,serif;border-color:#ba8949;background:linear-gradient(#fff7e7,#f2d4a8);color:#542858;
 box-shadow:0 3px 0 #bc8d51;transition:transform .12s,filter .12s;}
.btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px);}
.btn.primary,.ew-mesh-back{background:linear-gradient(180deg,#91559a,#57245f 60%,#42154e);border:2px solid #bf8b43;
 color:#fff0d6;box-shadow:inset 0 1px 0 #e4b2ce,0 3px 0 #936132,0 6px 10px #4c1a4850;}
.btn.primary{font:bold 17px Georgia,serif;padding:13px 10px;}
.ew-mesh-back{border-radius:30px;padding:9px 13px;font:bold 13px Georgia,serif;box-sizing:border-box;}
.ew-mesh-back:hover{color:#fff7df;filter:brightness(1.08);}
.lod{grid-template-columns:64px minmax(0,1fr) 70px;gap:8px;}
.lod b{font-size:13px}.lod .lodnum{width:70px;font-size:12px}.lod small{font-size:11.5px}
.seg{border:1px solid #ba8a51;}.seg button[aria-pressed="true"]{background:#eac9e7;color:#672366;}
input[type="range"]{accent-color:#8c3b90;}
main{border:3px solid #ba8649;border-radius:20px;overflow:hidden;background:#f6e2bc;
 box-shadow:0 8px 24px #1f0b2aa1,inset 0 0 0 3px #f8e0b6;min-height:580px;}
.bar{background:linear-gradient(#fff1d5,#edd3ac);border-bottom:2px solid #b88b54;gap:10px;}
.tab{font:600 12px Georgia,serif;border:1px solid transparent;color:#6b4670;}
.tab[aria-selected="true"]{border-color:#ae814e;color:#582460;background:#fff3df;box-shadow:0 2px 0 #d0a675;}
.tab[aria-selected="true"] span{color:#91458f;}
.toggles{font:12px Georgia,serif;}
#view{min-height:470px;background:radial-gradient(ellipse at 47% 20%,#4f3957 0%,#281b32 100%);}
#view canvas{max-width:none;}
.badge{background:#ffe8c1;color:#744483;border:1px solid #c39557;}
.hud{font-family:ui-monospace,monospace;color:#ebd4ed;text-shadow:0 1px 4px #170b25;}
.hud strong{color:#ffefc9;}
.checks{background:linear-gradient(#fff1d8,#f5dfb8);color:#583451;border-top:2px solid #c69a60;}
.check{font:13px/1.4 Georgia,serif;}
.check.ok i{border-color:#6d8e65;}
.mesh-help{background:linear-gradient(145deg,#fff3dc,#f2d6aa);border:3px solid #b88247;border-radius:22px;
  outline:1px solid #fce5bf;outline-offset:-9px;box-shadow:0 8px 22px #210b2688,inset 0 0 0 4px #f5dbac;
  max-height:calc(100vh - 205px);overflow-y:auto;padding:15px 17px 20px;display:flex;flex-direction:column;gap:16px;scrollbar-color:#ad855f #f5dfbe;}
.mesh-guide summary{font:bold 29px/1.2 Georgia,serif;text-align:center;color:#61275f;cursor:pointer;list-style:none;padding:12px 0 6px;}
.mesh-guide summary::-webkit-details-marker{display:none;}
.mesh-help-sparkle{font-size:16px;color:#c88d34;vertical-align:middle;}
.mesh-guide-chevron{display:none;}
.mesh-guide-flourish{width:min(230px,100%);height:44px;object-fit:contain;display:block;margin:0 auto 9px;}
.mesh-guide-steps{padding:0;margin:6px 0 0;list-style:none;counter-reset:step;display:grid;gap:15px;}
.mesh-guide-steps li{counter-increment:step;display:grid;grid-template-columns:36px 1fr;gap:4px 10px;align-items:start;}
.mesh-guide-steps li::before{content:counter(step);grid-row:1 / span 2;border:2px solid #bb8245;border-radius:50%;
 display:flex;align-items:center;justify-content:center;width:35px;height:35px;color:#fff1d0;background:linear-gradient(145deg,#924b91,#5c206a);
 font:bold 17px Georgia,serif;box-shadow:0 2px 0 #986d3b;}
.mesh-guide-steps strong{font:bold 16px/1.25 Georgia,serif;color:#57255b;}
.mesh-guide-steps span{font:13px/1.48 Georgia,serif;color:#654963;}
.mesh-help-tip{margin-top:16px;padding:12px;background:#fae9d1;border:1px solid #cda064;border-radius:12px;}
.mesh-help-tip strong{font:bold italic 16px Georgia,serif;color:#762c70;}
.mesh-help-tip p{font:12.5px/1.5 Georgia,serif;color:#74596c;margin:5px 0 0;}
.mesh-best-for{padding:14px 13px;background:linear-gradient(165deg,#fff6e5,#efd2a5);border:1px solid #c59b65;
 border-radius:16px;box-shadow:inset 0 0 0 3px #fff1d7;}
.mesh-best-for h2{font:bold italic 24px Georgia,serif;text-align:center;color:#672665;letter-spacing:0;margin:0 0 10px;padding:0 0 7px;border-bottom:1px solid #c9a16e;text-transform:none;}
.mesh-best-for ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;}
.mesh-best-for li{position:relative;padding-left:23px;font:13px/1.45 Georgia,serif;color:#5a3f5c;}
.mesh-best-for li:before{content:'✓';position:absolute;left:4px;color:#853e7c;font-weight:900;}
.mesh-aside-ornament{max-width:100%;width:250px;max-height:70px;object-fit:contain;margin:auto auto 0;}
:focus-visible{outline:3px solid #ac63a7;outline-offset:2px;}
@media(max-width:1220px){
  .app{grid-template-columns:minmax(280px,340px) minmax(420px,1fr);}
  .mesh-help{grid-column:1/-1;max-height:none;display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);align-items:start;}
  .mesh-aside-ornament{grid-column:1 / -1;margin:auto;}
  .mesh-guide-body{max-width:790px;margin:auto;}
  .mesh-guide-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 22px;}
}
@media(max-width:900px){
 .enchanted-mesh-banner{height:145px;}.mesh-banner-title{font-size:clamp(27px,5vw,48px)}
 .mesh-banner-illustration{opacity:.65;max-width:40%;}
 .mesh-banner-center{padding:12px 12px;}
 .app{display:flex;flex-direction:column;padding:0 12px;gap:14px;}
 .app > main{order:0;min-height:0;}
 .app > aside:first-child{order:1;max-height:none;min-height:0;overflow:visible;}
 .app > .mesh-help{order:2;max-height:none;display:flex;}
 .mesh-guide summary{font-size:24px;text-align:left;display:flex;gap:9px;align-items:center;justify-content:center;}
 .mesh-guide-chevron{display:inline-block;margin-left:auto;font-size:25px;}
 .mesh-guide[open] .mesh-guide-chevron{transform:rotate(180deg);}
 .mesh-guide-steps{grid-template-columns:1fr;}
 #view{height:clamp(280px,62vw,500px);min-height:0;max-height:500px;flex:none;}
 .bar,.checks{padding:11px 14px;}
}
@media(max-width:540px){
 .enchanted-mesh-banner{height:128px;}
 .mesh-banner-left{left:-110px}.mesh-banner-right{right:-110px}
 .mesh-banner-title{font-size:28px;}.mesh-banner-eyebrow{font-size:9px;}.mesh-banner-subtitle{font-size:12px;}
 .app{padding:0 8px;}.app > aside:first-child{padding:14px;}
 .app > aside:first-child section{padding:11px;}
 main{border-radius:14px;}
 .tabs{gap:2px;}.tab{font-size:11px;padding:5px 7px;}
 .tab span{font-size:10px;}
 .mesh-guide-steps span{font-size:13px;}
}
/* Last mobile spacing adjustment: help panels span the full phone width. */
@media (max-width:900px) {
  .app > .mesh-help {width:100%;align-items:stretch;min-width:0;}
  .app > .mesh-help > * {width:100%;min-width:0;}
  .mesh-best-for {box-sizing:border-box;width:100%;}
  .mesh-guide-body {width:100%;}
}

/* Version 66: true illustrated title artwork, not CSS text. */
.enchanted-mesh-banner { height:218px; padding:0 18px; }
.mesh-banner-illustration { height:185px; max-width:32%; }
.mesh-banner-center { width:min(740px,78vw); max-width:100%; padding:0; background:none; display:flex;justify-content:center;align-items:center; }
.mesh-banner-graphic-heading { margin:0; width:100%; line-height:0; }
.mesh-banner-title-art { display:block;width:100%;height:auto;object-fit:contain;max-height:216px;filter:drop-shadow(0 4px 9px rgba(26,7,29,.48)); }
@media (max-width:900px) {
 .enchanted-mesh-banner {height:174px;}
 .mesh-banner-center{width:min(640px,86vw);}
 .mesh-banner-title-art{max-height:170px;}
 .mesh-banner-illustration{height:148px;max-width:34%;opacity:.48;}
}
@media (max-width:540px) {
 .enchanted-mesh-banner{height:125px;padding:0 6px;}
 .mesh-banner-center{width:min(100%,490px);}
 .mesh-banner-title-art{max-height:123px;}
 .mesh-banner-illustration{opacity:.21;max-width:38%;}
}


/* v67: a single, seamless plum background behind the title artwork.
   The redundant cat-and-wing crop is removed from the markup.
   Decorative side pieces are never enlarged past the size of their source files. */
.enchanted-mesh-banner {
  height: 233px;
  min-height:0;
  overflow: hidden;
  padding: 0 16px;
  border:0;
  border-bottom:1px solid rgba(199,135,74,.38);
  box-shadow: 0 10px 20px rgba(31,10,35,.22);
  background: radial-gradient(ellipse 42% 88% at 50% 47%, #56305b 0%, #421e49 66%, transparent 100%),
    radial-gradient(ellipse 130% 95% at center, #4a2250 0%, #351537 78%, #2a112f 100%);
}
.enchanted-mesh-banner::after {display:none;}
.mesh-banner-center {
  position:relative;
  z-index:3;
  width:min(735px,57vw);
  max-width:100%;
  padding:0;
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mesh-banner-title-art{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(27,10,32,.33));
}
.mesh-banner-illustration.mesh-banner-left {
  position:absolute;
  left:max(14px,calc((100vw - 1560px)/2));
  top:50%;
  transform:translateY(-50%);
  width:min(373px,26vw);
  height:auto;
  max-width:none;
  object-fit:contain;
  opacity:.92;
  z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 78%,transparent 100%),
    linear-gradient(180deg,transparent 0%,#000 20%,#000 76%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 66% at 50% 50%,#000 68%,transparent 100%);
}
.mesh-banner-side-flourish {
  position:absolute;
  right: max(25px,calc((100vw - 1480px)/2));
  top:50%;
  transform:translateY(-50%);
  z-index:1;
  display:block;
  width:min(390px,28vw);
  height:auto;
  max-height:116px;
  object-fit:contain;
  pointer-events:none;
  opacity:.84;
  filter:drop-shadow(0 2px 5px rgba(24,8,30,.25));
  -webkit-mask-image:radial-gradient(ellipse 76% 75% at center, #000 68%,transparent 100%);
  mask-image:radial-gradient(ellipse 76% 75% at center, #000 68%,transparent 100%);
}
@media(max-width:1100px) {
  .enchanted-mesh-banner{height:auto; min-height:170px;}
  .mesh-banner-center{width:min(735px,77vw);}
  .mesh-banner-illustration.mesh-banner-left{opacity:.38; width:27vw;}
  .mesh-banner-side-flourish{width:22vw;opacity:.38;}
}
@media(max-width:680px) {
  .enchanted-mesh-banner{height:auto;min-height:0;padding:8px 0 5px;}
  .mesh-banner-center{width:min(100%,520px);}
  .mesh-banner-illustration.mesh-banner-left,.mesh-banner-side-flourish{display:none;}
  .mesh-banner-title-art{width:100%;height:auto;max-height:none;}
}

/* v68: seamless illustrated header. This replaces the stretched 3-part composition
   with one single raster image and respects the original aspect ratio. */
.enchanted-mesh-banner{
  display:block!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:#321038!important;
  box-shadow:0 7px 18px rgba(33,11,38,.25)!important;
  line-height:0;
  overflow:hidden;
}
.enchanted-mesh-banner::before,.enchanted-mesh-banner::after{content:none!important;display:none!important;}
.mesh-single-banner-title {padding:0!important; margin:0!important; width:100%; height:auto; line-height:0;}
.mesh-banner-full {
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:2172 / 355;
  object-fit:contain;
  border:0;
}
@media (max-width:900px) {
  .enchanted-mesh-banner{height:clamp(126px,18vw,173px)!important;}
  .mesh-single-banner-title{position:relative;height:100%;}
  .mesh-banner-full{
    position:absolute;
    left:50%;top:0;
    width:auto!important;
    max-width:none!important;
    height:100%!important;
    transform:translateX(-50%);
    aspect-ratio:2172 / 355;
  }
}
@media(max-width:540px){
  .enchanted-mesh-banner{height:132px!important;}
}

/* v69 — approved second full-width artwork; never stretches.
   Mobile uses a centered crop of the same image to retain legibility. */
.mesh-banner-full{aspect-ratio:3318 / 474!important;object-fit:contain!important;width:100%!important;height:auto!important;max-width:none!important;position:static!important;transform:none!important;}
.enchanted-mesh-banner{height:auto!important;min-height:0!important;}
.mesh-single-banner-title, .mesh-single-banner-title picture{display:block!important;position:static!important;width:100%!important;height:auto!important;line-height:0;}
@media(max-width:900px){.enchanted-mesh-banner{height:auto!important;min-height:0!important;}.mesh-banner-full{height:auto!important;width:100%!important;position:static!important;transform:none!important;aspect-ratio:auto!important;}}
@media(max-width:540px){.enchanted-mesh-banner{height:auto!important;padding:0!important;}.mesh-banner-full{height:auto!important;}}

/* V73: corrected grey tabby artwork — preserve image geometry on all screens.
   No stretching, clipping or CSS crop of the kitten's paws, border or wording. */
.enchanted-mesh-banner {width:100%!important;height:auto!important;min-height:0!important;overflow:hidden!important;padding:0!important;background:#321038!important;}
.mesh-single-banner-title, .mesh-single-banner-title picture {display:block!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;line-height:0!important;}
.mesh-banner-full {display:block!important;position:static!important;left:auto!important;top:auto!important;transform:none!important;width:100%!important;height:auto!important;max-height:none!important;max-width:none!important;aspect-ratio:2172 / 724!important;object-fit:contain!important;}
@media (max-width:900px) {
  .enchanted-mesh-banner {height:auto!important;min-height:0!important;}
  .mesh-banner-full {width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:2172 / 724!important;object-fit:contain!important;}
}