/* PDS — Product Design Studio. Layout: three floating glass panels (tools · stage · inspector) over a quiet ground. */
:root{
  --bg:#f2f2f5; --surface:#ffffff; --surface2:#f5f5f8; --fill:rgba(120,120,128,.12); --fill2:rgba(120,120,128,.2);
  --glass:rgba(255,255,255,.72); --glass-strong:rgba(255,255,255,.86); --hair:rgba(0,0,0,.08); --line:rgba(0,0,0,.1);
  --fg:#1d1d1f; --muted:#6e6e73; --accent:#0071e3; --accent-fg:#ffffff; --accent-soft:rgba(0,113,227,.12);
  --good:#248a3d; --warn:#b25000; --thumb:#ffffff;
  --stage1:#fbfbfd; --stage2:#d7dae3;
  --shadow:0 0 0 .5px rgba(0,0,0,.06),0 8px 30px rgba(0,0,0,.08); --shadow-sm:0 1px 2px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.06);
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --spring:cubic-bezier(.32,.72,0,1); --r-lg:20px; --r-md:12px; --r-sm:9px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000; --surface:#1c1c1e; --surface2:#2c2c2e; --fill:rgba(120,120,128,.24); --fill2:rgba(120,120,128,.36);
  --glass:rgba(34,34,37,.72); --glass-strong:rgba(34,34,37,.9); --hair:rgba(255,255,255,.1); --line:rgba(255,255,255,.14);
  --fg:#f5f5f7; --muted:#a1a1a6; --accent:#0a84ff; --accent-soft:rgba(10,132,255,.2); --good:#30d158; --warn:#ff9f0a; --thumb:#636366;
  --stage1:#3a3a40; --stage2:#111113;
  --shadow:0 0 0 .5px rgba(255,255,255,.08),0 10px 36px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.08); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#1c1c1e; --surface2:#2c2c2e; --fill:rgba(120,120,128,.24); --fill2:rgba(120,120,128,.36);
  --glass:rgba(34,34,37,.72); --glass-strong:rgba(34,34,37,.9); --hair:rgba(255,255,255,.1); --line:rgba(255,255,255,.14);
  --fg:#f5f5f7; --muted:#a1a1a6; --accent:#0a84ff; --accent-soft:rgba(10,132,255,.2); --good:#30d158; --warn:#ff9f0a; --thumb:#636366;
  --stage1:#3a3a40; --stage2:#111113;
  --shadow:0 0 0 .5px rgba(255,255,255,.08),0 10px 36px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.08); color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
canvas{letter-spacing:normal;word-spacing:normal}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 13px/1.5 var(--body);letter-spacing:.005em;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .4s ease,color .4s ease}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;-webkit-user-select:none;user-select:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#app{display:grid;height:100%;grid-template-columns:304px minmax(0,1fr) 320px;grid-template-rows:56px minmax(0,1fr);gap:12px;padding:0 max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}

/* header: a translucent layer, not an opaque strip */
header.top{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;min-width:0;padding-right:8px}
.brand svg{flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
.brand b{font:700 21px/1 var(--display);letter-spacing:-.02em}
.brand span{color:var(--muted);font-size:12px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .sp{flex:1}

/* controls: respond on press, not on release */
.btn{border:0;background:var(--fill);border-radius:var(--r-sm);padding:7px 13px;font-weight:600;font-size:13px;letter-spacing:.005em;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:background-color .15s ease,transform 120ms ease-out,opacity .2s ease}
.btn:hover{background:var(--fill2)}
.btn:active{transform:scale(.97);transition-duration:60ms}
.btn.pri{background:var(--accent);color:var(--accent-fg)}
.btn.pri:hover{filter:brightness(1.08);background:var(--accent)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:8px}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--fill)}
.btn:disabled{opacity:.35;cursor:default;transform:none}
.menu{position:relative}
.menu .pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:240px;background:var(--glass-strong);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border-radius:14px;box-shadow:var(--shadow);padding:6px;transform-origin:top right;animation:materialize .28s var(--spring)}
.menu .pop button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 11px;border-radius:8px;font-weight:500}
.menu .pop button:hover{background:var(--accent);color:var(--accent-fg)}
@keyframes materialize{from{opacity:0;transform:scale(.94);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* panels: glass, hairline edge, bright top edge */
aside{background:var(--glass);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);border-radius:var(--r-lg);min-height:0;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden;position:relative}
aside::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);pointer-events:none;opacity:.6}
.tabs{display:flex;gap:2px;padding:10px 10px 0;overflow-x:auto;flex:none;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:none;padding:7px 10px;font-weight:600;font-size:12.5px;color:var(--muted);border-radius:8px;white-space:nowrap;transition:color .2s ease,background-color .2s ease}
.tabs button:hover{color:var(--fg)}
.tabs button[aria-selected="true"]{color:var(--fg);background:var(--fill)}
.scroll{overflow:auto;min-height:0;flex:1;padding:14px 16px 32px;-webkit-mask-image:linear-gradient(#0000,#000 14px);mask-image:linear-gradient(#0000,#000 14px);overscroll-behavior:contain}
.scroll.in>*{animation:rise .38s var(--spring) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h3{font:700 22px/1.12 var(--display);letter-spacing:-.022em;margin:0 0 10px}
h3 small{font-size:12px;letter-spacing:.01em;font-weight:500;color:var(--muted)}
h4{margin:20px 0 8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
h4:first-child{margin-top:0}
.muted{color:var(--muted)} .small{font-size:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pcard{border:0;background:var(--fill);border-radius:var(--r-md);padding:12px 6px 9px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-weight:600;font-size:11.5px;line-height:1.25;min-width:0;transition:background-color .2s ease,transform 120ms ease-out,box-shadow .2s ease}
.pcard svg{width:42px;height:42px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.pcard:hover{background:var(--fill2)}
.pcard:active{transform:scale(.96);transition-duration:60ms}
.pcard[aria-pressed="true"]{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.row{display:flex;align-items:center;gap:8px;min-width:0}
.row.wrap{flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:11px;min-width:0}
.field label,.lbl{font-size:12px;color:var(--muted);font-weight:500}
input[type=text],input[type=number],select,textarea{width:100%;border:0;background:var(--fill);border-radius:var(--r-sm);padding:8px 10px;min-width:0;transition:box-shadow .15s ease}
input[type=text]:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 2px var(--accent)}
textarea{resize:vertical;min-height:88px;line-height:1.45}
input[type=range]{width:100%;accent-color:var(--accent);min-width:0;height:22px;margin:0}
input[type=color]{width:38px;height:32px;padding:3px;border:0;border-radius:var(--r-sm);background:var(--fill);flex:none;cursor:pointer}
.hex{width:92px!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase;font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:0;background:var(--fill);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;transition:background-color .2s ease,color .2s ease,transform 120ms ease-out}
.chip:hover{background:var(--fill2)}
.chip:active{transform:scale(.96);transition-duration:60ms}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
.sw{width:26px;height:26px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);padding:0;flex:none;transition:transform .2s var(--spring)}
.sw:hover{transform:scale(1.15)}
.sw:active{transform:scale(.94);transition-duration:60ms}
.pats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pat{border:0;border-radius:var(--r-sm);background:var(--fill);padding:4px 4px 5px;font-size:10.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);transition:background-color .2s ease,transform 120ms ease-out}
.pat canvas{width:100%;aspect-ratio:1;border-radius:6px;display:block}
.pat:hover{background:var(--fill2)}
.pat:active{transform:scale(.96);transition-duration:60ms}
.pat[aria-pressed="true"]{color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--accent);background:var(--accent-soft)}
.plist{display:flex;flex-direction:column;gap:3px}
.prow{display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:var(--r-sm);padding:6px 8px;text-align:left;width:100%;min-width:0;transition:background-color .15s ease}
.prow:hover{background:var(--fill)}
.prow[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
.prow[aria-pressed="true"] small{color:inherit;opacity:.8}
.prow canvas{width:28px;height:28px;border-radius:7px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.prow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.prow small{color:var(--muted)}
.gname{margin:16px 0 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.gname:first-child{margin-top:0}
.shapes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.shapes button{aspect-ratio:1;border:0;border-radius:var(--r-sm);background:var(--fill);display:grid;place-items:center;padding:8px;transition:background-color .2s ease,transform 120ms ease-out}
.shapes button:hover{background:var(--fill2)}
.shapes button:active{transform:scale(.94);transition-duration:60ms}
.shapes svg{width:100%;height:100%;fill:currentColor}
.drop{border:0;border-radius:var(--r-md);padding:16px;text-align:center;background:var(--fill);color:var(--muted);box-shadow:inset 0 0 0 1px var(--hair);transition:background-color .2s ease,transform 120ms ease-out}
.drop:hover{background:var(--fill2);color:var(--fg)}
.drop:active{transform:scale(.985)}
.note{background:var(--accent-soft);border-radius:var(--r-md);padding:9px 12px;font-size:12px;line-height:1.45}
.pal{display:flex;border-radius:9px;overflow:hidden;border:0;cursor:pointer;background:none;padding:0;width:100%;height:30px;box-shadow:inset 0 0 0 1px var(--hair);transition:transform .2s var(--spring)}
.pal i{flex:1}
.pal:hover{transform:scale(1.015)}
.pal:active{transform:scale(.985);transition-duration:60ms}
.refprev{width:100%;border-radius:var(--r-md);display:block;background:var(--fill)}
.dlist{display:flex;flex-direction:column;gap:6px}
.saved{display:flex;gap:10px;align-items:center;border-radius:var(--r-md);padding:8px;background:var(--fill)}
.saved img{width:54px;height:54px;object-fit:cover;border-radius:8px;background:var(--surface);flex:none}
.saved div{flex:1;min-width:0}
.saved b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* stage */
#stage{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:var(--r-lg);background:radial-gradient(120% 90% at 50% 36%,var(--stage1),var(--stage2));box-shadow:var(--shadow);touch-action:none}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bar{position:absolute;z-index:5;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bar.tl{top:12px;left:12px;right:12px;justify-content:space-between}
.bar.bl{left:12px;bottom:12px;max-width:calc(100% - 200px)}
.bar.br{right:12px;bottom:12px}
.bar.bc{left:12px;right:12px;bottom:56px;justify-content:center;pointer-events:none}
.bar.bc>*{pointer-events:auto}
.seg{position:relative;display:inline-flex;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-radius:11px;padding:3px;box-shadow:var(--shadow-sm)}
.seg .thumb{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:8px;background:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .45s var(--spring),width .45s var(--spring);pointer-events:none}
.seg button{position:relative;z-index:1;border:0;background:none;padding:6px 14px;border-radius:8px;font-weight:600;font-size:12.5px;color:var(--muted);transition:color .25s ease,transform 120ms ease-out}
.seg button:active{transform:scale(.96);transition-duration:60ms}
.seg button[aria-pressed="true"]{color:var(--accent-fg)}
.seg button:disabled{opacity:.4}
.tool{background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:0;border-radius:11px;padding:6px 11px;box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:12.5px;transition:transform 120ms ease-out,background-color .2s ease}
button.tool:active{transform:scale(.96);transition-duration:60ms}
.tool[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
.tool select{width:auto;padding:3px 24px 3px 8px;background-color:var(--fill)}
.models{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-radius:14px;padding:5px;box-shadow:var(--shadow-sm);animation:materialize .4s var(--spring)}
.models button{border:0;background:transparent;border-radius:9px;padding:5px 11px;font-weight:600;font-size:12px;transition:background-color .2s ease,transform 120ms ease-out}
.models button:hover{background:var(--fill)}
.models button:active{transform:scale(.95);transition-duration:60ms}
.models button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
.hint{font-size:12px;font-weight:500;color:var(--muted);background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-radius:10px;padding:5px 10px;box-shadow:var(--shadow-sm)}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--glass-strong);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);color:var(--fg);padding:10px 18px;border-radius:14px;font-weight:600;z-index:80;box-shadow:var(--shadow);max-width:90vw;animation:toastin .45s var(--spring)}
@keyframes toastin{from{opacity:0;transform:translateX(-50%) scale(.92);filter:blur(8px)}to{opacity:1;transform:translateX(-50%);filter:none}}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:70;display:grid;place-items:center;padding:20px;animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
#modal .box{background:var(--glass-strong);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);border-radius:22px;padding:20px;max-width:min(92vw,760px);max-height:92vh;overflow:auto;box-shadow:var(--shadow);animation:materialize .4s var(--spring)}
#modal img{max-width:100%;max-height:66vh;display:block;margin:0 auto 14px;border-radius:12px}
.dec{display:flex;align-items:center;gap:8px;border:0;background:var(--fill);border-radius:var(--r-sm);padding:7px 10px;width:100%;text-align:left;transition:background-color .15s ease}
.dec:hover{background:var(--fill2)}
.dec[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
.dec[aria-pressed="true"] small{color:inherit}
.dec span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.kv{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.kv b{color:var(--fg);font-weight:600}
.sep{height:1px;background:var(--hair);margin:16px 0}
.pulse{animation:pl 1.1s ease-in-out infinite}
@keyframes pl{50%{opacity:.5}}
output{font-variant-numeric:tabular-nums}

@media (max-width:1040px){
  html,body{height:auto}
  #app{height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:56px 64vh auto auto}
  #stage{grid-row:2}
  #left{grid-row:3}
  #right{grid-row:4}
  .scroll{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .brand span{display:none}
  .bar.bl{max-width:calc(100% - 24px);bottom:56px}
}
@media (max-width:520px){.top .hide-s{display:none}.seg button{padding:6px 9px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .menu .pop,#modal .box,#toast,.models{animation:fade .2s ease!important}
}
@media (prefers-reduced-transparency:reduce){
  aside,.seg,.tool,.models,.hint,.menu .pop,#toast,#modal .box{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}
}
@media (prefers-contrast:more){
  :root{--hair:rgba(0,0,0,.5);--muted:#3a3a3d}
  aside,#stage,.seg,.tool{box-shadow:0 0 0 1px var(--fg)}
}