:root{
  --studio:#191613;
  --studio-deep:#0e0c0a;
  --plate:#efe9dd;
  --plate-ink:#2a2520;
  --bar:#211d19;
  --bar-line:#3a342c;
  --txt:#d8d0c2;
  --txt-dim:#8a8174;
  --accent:#d8b13c;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html,body{height:100%;overflow:hidden;background:var(--studio-deep)}
body{
  height:100vh;height:100dvh;
  background:
    radial-gradient(120% 90% at 50% 0%, #221e19 0%, var(--studio) 45%, var(--studio-deep) 100%);
  font-family:'Zen Kaku Gothic New','Oswald',sans-serif;
  color:var(--txt);
  display:flex;flex-direction:column;
  user-select:none;-webkit-user-select:none;
}

/* ───── header ───── */
header{
  display:flex;align-items:baseline;gap:14px;
  padding:12px 20px 0;
  flex:0 0 auto;
}
header h1{
  font-family:'Oswald',sans-serif;font-weight:700;
  font-size:clamp(20px,3vw,26px);letter-spacing:.34em;
  color:var(--txt);line-height:1;
}
header h1 span{color:var(--accent)}
header p{font-size:11px;letter-spacing:.12em;color:var(--txt-dim)}
.hspacer{flex:1 1 auto}
.aboutBtn{
  align-self:center;flex:0 0 auto;
  font-family:'Oswald','Zen Kaku Gothic New',sans-serif;
  font-size:11px;font-weight:500;letter-spacing:.14em;
  color:var(--accent);text-decoration:none;white-space:nowrap;
  border:1px solid var(--bar-line);border-radius:999px;
  padding:7px 16px;transition:all .15s;
}
.aboutBtn:hover{color:var(--studio-deep);background:var(--accent);border-color:var(--accent)}
.aboutBtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:560px){
  header p{display:none}
}

/* ───── footer site links ───── */
#sitelinks{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:4px 10px;
  padding:0 20px 10px;
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:10.5px;letter-spacing:.06em;color:var(--txt-dim);
}
#sitelinks a{color:var(--txt-dim);text-decoration:none;transition:color .15s}
#sitelinks a:hover{color:var(--accent)}
#sitelinks .sep{color:var(--bar-line)}

/* ───── stage ───── */
#stage{
  flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:14px 20px 8px;
  position:relative;
}
#frame{
  position:relative;
  transition:transform .4s cubic-bezier(.35,.1,.25,1), width .4s ease, height .4s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 50px -12px rgba(0,0,0,.85),
    0 4px 14px rgba(0,0,0,.6);
}
#angle{width:220px}
#angleVal{
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.08em;color:var(--txt-dim);
  min-width:38px;text-align:right;font-variant-numeric:tabular-nums;
}
canvas#view{
  display:block;width:100%;height:100%;
  cursor:crosshair;touch-action:none;
}

/* ───── toolbar ───── */
#bar{
  flex:0 0 auto;
  display:flex;flex-direction:column;gap:8px;
  margin:12px 20px 14px;
  padding:10px 14px;
  background:var(--bar);
  border:1px solid var(--bar-line);
  border-radius:10px;
}
.row{display:flex;align-items:center;gap:14px;min-width:0;flex-wrap:wrap}
.group{display:flex;align-items:center;gap:8px;min-width:0}
.grow{flex:1 1 auto}
.glabel{
  font-family:'Oswald',sans-serif;font-size:9px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--txt-dim);
  white-space:nowrap;flex:0 0 auto;
}

/* chip strips (palette / tool / bg) — scroll instead of overflow */
.chips{
  display:flex;gap:5px;min-width:0;
  overflow-x:auto;scrollbar-width:none;
  padding:2px;
}
.chips::-webkit-scrollbar{display:none}
.chip{
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:10.5px;letter-spacing:.05em;
  background:transparent;color:var(--txt-dim);
  border:1px solid var(--bar-line);border-radius:999px;
  padding:4px 11px;cursor:pointer;white-space:nowrap;flex:0 0 auto;
  transition:all .15s;
}
.chip:hover{color:var(--txt);border-color:#564e42}
.chip.on{color:var(--studio-deep);background:var(--accent);border-color:var(--accent);font-weight:700}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* swatches */
#swatches{display:flex;gap:6px;flex:0 0 auto}
.sw{
  position:relative;
  width:26px;height:26px;border-radius:50%;
  border:2px solid transparent;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.5) inset, 0 1px 2px rgba(0,0,0,.4);
  transition:transform .12s;padding:0;overflow:hidden;
}
.sw:hover{transform:scale(1.12)}
.sw.on{border-color:var(--accent);transform:scale(1.12)}
.sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* native picker overlaid on a custom swatch — invisible but tappable */
.sw .swPick{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;border:none;background:transparent;
  opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;
}

/* slider */
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:110px;height:3px;border-radius:2px;
  background:#4a4337;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bar);
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bar);
}

/* buttons & selects */
.btn,select{
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-size:11.5px;font-weight:500;letter-spacing:.06em;
  background:#2c2722;color:var(--txt);
  border:1px solid var(--bar-line);border-radius:7px;
  padding:7px 13px;cursor:pointer;white-space:nowrap;
  transition:all .15s;
}
select{padding:6px 8px}
.btn:hover,select:hover{background:#37312a;border-color:#564e42}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{
  background:var(--accent);color:var(--studio-deep);
  border-color:var(--accent);font-weight:700;
}
.btn.primary:hover{background:#e6c258}
.btn.on{border-color:var(--accent);color:var(--accent)}
.btn.danger{background:#8e3a26;border-color:#a5492f;color:#f5e9e2;font-weight:700}
.btn.danger:hover{background:#a5492f}
.btn.icon{padding:5px 11px;font-size:15px;line-height:1.2}
.btn:disabled{opacity:.45;cursor:default}
/* export-in-progress spinner (used on #save) */
.btn.loading{position:relative;color:transparent!important;opacity:1;pointer-events:none}
.btn.loading::after{
  content:"";position:absolute;top:50%;left:50%;
  width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid rgba(14,12,10,.30);border-top-color:var(--studio-deep);
  animation:btnspin .6s linear infinite;
}
@keyframes btnspin{to{transform:rotate(360deg)}}
.spacer{flex:1 1 auto}

/* toast */
#toast{
  position:fixed;left:50%;bottom:90px;transform:translate(-50%,12px);
  background:var(--plate);color:var(--plate-ink);
  font-size:12px;font-weight:500;letter-spacing:.05em;
  padding:8px 18px;border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;z-index:60;
  transition:opacity .25s,transform .25s;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ───── save modal ───── */
#modal{
  position:fixed;inset:0;z-index:50;
  display:none;align-items:center;justify-content:center;
  background:rgba(10,8,6,.82);
  padding:20px;
}
#modal.show{display:flex}
#modal .box{
  background:var(--bar);border:1px solid var(--bar-line);
  border-radius:12px;padding:18px;
  max-width:min(92vw,640px);
  display:flex;flex-direction:column;gap:12px;align-items:center;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
#modal img{
  max-width:100%;max-height:55vh;display:block;
  border:1px solid var(--bar-line);
  background:
    conic-gradient(#3a352e 25%,#2c2823 0 50%,#3a352e 0 75%,#2c2823 0) 0 0/16px 16px;
  -webkit-user-select:auto;user-select:auto;
  -webkit-touch-callout:default;
}
#modal .hint{font-size:12px;letter-spacing:.05em;color:var(--txt-dim);text-align:center}
#modal .actions{display:flex;gap:10px}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}
@media (max-width:680px){
  /* the page scrolls — canvas on top, an unhurried toolbar below */
  html,body{overflow:auto;height:auto}
  body{min-height:100dvh}
  header{padding:12px 14px 0}
  header p{display:none}
  #stage{flex:none;height:56dvh;padding:14px 12px 6px}
  #bar{
    margin:8px 12px calc(18px + env(safe-area-inset-bottom));
    padding:2px 14px 14px;
    gap:0;
    max-height:none;overflow:visible;
  }
  .glabel{display:inline}            /* room to breathe — labels return */
  .row{flex-wrap:wrap;gap:8px 10px;padding-top:13px}
  .row + .row{border-top:1px solid #2b2620;margin-top:13px}
  .group{min-width:0;gap:8px}
  .group .chips{flex:1 1 auto}
  .chip{padding:5px 11px;font-size:11px}
  .sw{width:28px;height:28px}
  input[type=range]{width:90px}
  #angle{width:auto;flex:1 1 130px;min-width:130px}
  /* action row: buttons share the full width */
  #bar .row:last-child .group{flex:1 1 100%;flex-wrap:wrap}
  #bar .row:last-child .btn,
  #bar .row:last-child select{flex:1 1 auto;text-align:center;padding:10px 8px;font-size:11.5px}
  .spacer{display:none}
}