:root{
  --bg:#f5f6f5;--canvas:#f7f9f9;--panel:#fff;--elev:#ecefee;
  --line:rgba(26,37,43,.08);--line-strong:rgba(26,37,43,.16);
  --text:#20282d;--muted:#55636b;--faint:#657178;
  --accent:#1d9bf0;--accent-soft:rgba(29,155,240,.12);
  --header-height:60px;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-family:var(--sans);color:var(--text);background:var(--bg);color-scheme:light
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,textarea,select{font:inherit}
button,a,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button,select{color:var(--text);background:var(--panel);border:1px solid var(--line-strong);border-radius:10px}
button:disabled{cursor:wait;opacity:.45}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
header{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,3.5vw,64px);border-bottom:1px solid var(--line)}
.wordmark{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:750;letter-spacing:-.065em}
.logo{width:25px;height:25px;flex-shrink:0}
.saved{font-size:12px;color:var(--faint);min-height:1em}
main{max-width:1680px;margin:auto;display:grid;grid-template-columns:minmax(0,39fr) minmax(0,61fr);min-height:calc(100dvh - var(--header-height))}
.chat{min-width:0;height:calc(100dvh - var(--header-height));padding:0 clamp(24px,3.5vw,64px);display:flex;flex-direction:column}
.conversation{overflow:auto;flex:1;min-height:0;padding:clamp(40px,7dvh,76px) 0 24px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.intro{margin:0 0 44px;max-width:34rem}
h1{margin:0;font-size:clamp(32px,2.65vw,40px);font-weight:600;line-height:1.48;letter-spacing:-.065em}
.message{display:flex;gap:12px;font-size:15px;line-height:1.85;margin:24px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.message>div{padding-top:2px;max-width:92%;color:#606c72}
.avatar{flex-shrink:0;width:26px;height:29px;display:grid;place-items:center;color:var(--muted)}
.message.user{justify-content:flex-end}
.message.user>div{padding:13px 18px;background:#e3e8e8;border-radius:18px 18px 4px 18px;color:var(--text)}
.message.pending>div::after{content:' ···';color:var(--accent);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.compose-area{flex-shrink:0;padding:16px 0 32px;display:flex;flex-direction:column;gap:16px}
.suggestions{display:flex;flex-wrap:wrap;gap:4px 12px;order:2;padding:0 3px}
.suggestions button{min-height:44px;padding:5px 0;border:0;border-radius:0;background:transparent;font-size:12px;color:var(--muted);text-align:left;transition:color .18s}
.suggestions button:hover{color:var(--text);text-decoration:underline;text-underline-offset:5px}
.composer-shell{padding:17px 18px 12px;background:var(--panel);border:1px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:0 16px 36px -20px rgba(28,42,48,.28),0 2px 6px rgba(28,42,48,.04),0 0 0 1px var(--line);transition:box-shadow .2s}
.composer-shell:focus-within{box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1px var(--accent),0 16px 36px -20px rgba(28,42,48,.2)}
textarea{display:block;width:100%;background:none;border:0;outline:none;color:var(--text);resize:vertical;max-height:200px;min-height:66px;font-size:15px;line-height:1.7}
textarea::placeholder{color:var(--faint)}
.composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
#chatStatus{font-size:12px;color:var(--faint);min-height:1em}
#send{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;padding:0;border:0;border-radius:14px;background:var(--text);color:#fff;box-shadow:0 3px 6px rgba(20,30,35,.12)}
#send:hover,#confirm:hover{background:#3c484f}
.stage{min-width:0;height:calc(100dvh - var(--header-height));padding:28px clamp(24px,3vw,48px) 24px 12px;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(120% 80% at 70% 18%,#e8eef2 0%,transparent 55%),radial-gradient(90% 70% at 30% 90%,#ece8e4 0%,transparent 50%),var(--bg)}
.stage-scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;padding:0 10px 24px;scrollbar-gutter:stable}
/* The product plate owns the strongest light, depth and uninterrupted area. */
.stage-plate{position:relative;border-radius:30px;background:var(--canvas);border:1px solid rgba(255,255,255,.95);box-shadow:0 28px 50px -32px rgba(34,48,56,.38),0 7px 18px -12px rgba(34,48,56,.2),inset 0 0 70px rgba(207,218,219,.24);overflow:hidden}
.stage-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:23px 26px 0;position:relative;z-index:1}
h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.035em}
.stage select{min-width:0;max-width:165px;min-height:44px;padding:8px 12px;font-size:13px;color:var(--muted);background:transparent;border-color:var(--line);border-radius:10px}
.stage-heading select{border:0;padding-right:2px;max-width:145px}
.preview{position:relative}
/* Transparent edge shading sits above the opaque WebGL canvas. */
.preview::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -26px 40px -30px rgba(93,116,124,.19);background:radial-gradient(ellipse at 50% 35%,transparent 45%,rgba(171,191,194,.07))}
#keycap3d{display:block;width:100%;height:clamp(300px,43dvh,510px);touch-action:pan-y}
.keymap-well{display:flex;align-items:center;gap:24px;margin:22px 10px 0;padding:0 0 22px;border-bottom:1px solid var(--line)}
#keyboard{width:46%;max-width:260px;flex-shrink:0;opacity:.65}
.key-row{display:flex;gap:2px;margin:2px 0}
.key{flex:var(--u);min-width:0;height:10px;background:var(--key-bg);color:var(--key-ink);border-radius:2px;display:grid;place-items:center;font-size:4px;overflow:hidden;box-shadow:inset 0 1px 0 #ffffff70,0 1px 1px #20282d12}
.coverage{display:flex;flex-wrap:wrap;gap:6px 12px}
.chip{font-size:12px;color:var(--muted);white-space:nowrap}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 26px;padding:18px 10px}
.field{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px}
.field label{font-size:12px;color:var(--muted);white-space:nowrap}
.field select{width:128px;background:#e9edec;border-color:transparent}
.field select:hover{background:#e0e6e5}
details{margin:0 10px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
summary{min-height:44px;display:flex;align-items:center;gap:5px;cursor:pointer;list-style:none}
summary::after{content:'+';margin-left:auto;font-size:18px;font-weight:300;color:var(--faint)}
details[open] summary::after{content:'−'}
summary::-webkit-details-marker{display:none}
details ul{padding-left:16px;line-height:1.8;margin:0 0 16px}
.official{display:flex;align-items:center;justify-content:space-between;margin:8px 10px 0;gap:16px}
.stills{display:flex;gap:8px}
.stills a{display:block;width:64px;aspect-ratio:1.25;overflow:hidden;border-radius:8px;background:#e9edec}
.stills img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.7);transition:filter .2s,transform .2s}
.stills a:hover img{filter:saturate(1);transform:scale(1.05)}
.source{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:var(--faint)}
.source:hover{color:var(--accent)}
.confirm-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 10px 0;border-top:1px solid var(--line);flex-shrink:0}
.confirm-row>div{min-width:0;display:grid;gap:5px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
#stateText{font-size:12px;color:var(--faint)}
#confirm{min-height:44px;padding:12px 22px;background:var(--text);border:0;color:#fff;white-space:nowrap;font-size:13px;font-weight:500;border-radius:12px}
#confirm.ready{box-shadow:0 0 0 3px var(--accent-soft)}
.gl-fallback{display:block;padding:64px 24px;font-size:13px;color:var(--muted)}
@media(min-width:1600px){.stage{padding-top:40px}.stage-scroll{padding-bottom:32px}}
@media(min-width:1024px) and (max-width:1199px){.chat{padding:0 28px}.stage{padding-right:20px}.stage-heading{padding:18px 18px 0}.fields{gap:8px 14px}.field select{width:108px;padding-left:7px;padding-right:7px}.keymap-well{gap:16px}}
@media(max-width:1023px){
 main{grid-template-columns:1fr}.chat{height:auto;padding:0 clamp(24px,6vw,64px)}
 .conversation{flex:none;max-height:48dvh;padding-top:40px}.intro{margin-bottom:28px}
 .compose-area{padding-bottom:28px}.stage{height:auto;overflow:visible;padding:12px clamp(14px,4vw,48px) 28px}
 .stage-scroll{overflow:visible;scrollbar-gutter:auto;padding-bottom:24px}
 #keycap3d{height:clamp(300px,45vw,440px)}
 .confirm-row{margin:0 10px}
}
@media(max-width:540px){
 :root{--header-height:54px}header{padding:0 24px}.wordmark{font-size:20px}.saved{max-width:55%;text-align:right}
 .chat{padding:0 24px}.conversation{padding-top:32px;max-height:48dvh}h1{font-size:32px;line-height:1.45}.intro{margin-bottom:24px}
 .message{font-size:15px;gap:9px}.compose-area{gap:10px;padding-top:8px;padding-bottom:20px}
 .composer-shell{border-radius:20px;padding:14px}textarea{font-size:16px;min-height:56px}
 .suggestions{gap:0 14px}
 .stage{padding:8px 6px 24px}.stage-plate{border-radius:24px}.stage-heading{padding:16px 18px 0;gap:8px}h2{font-size:14px}.stage-heading select{font-size:12px;max-width:128px}
 #keycap3d{height:285px}.keymap-well{gap:16px;margin-top:20px;padding-bottom:20px}#keyboard{width:49%}.key{height:8px;font-size:3px}.coverage{gap:6px 9px}
 .fields{gap:12px 18px;padding-top:16px;padding-bottom:16px}.field{display:grid;gap:6px}.field select{width:100%;max-width:none;font-size:16px;padding:9px}
 .stills a{width:55px}.confirm-row{gap:12px}.confirm-row>div{font-size:12px}#confirm{padding:12px 18px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.theme-field{flex-wrap:wrap}
.palette-swatches{display:flex;justify-content:flex-end;gap:8px;width:100%}
.palette-swatches input{width:32px;height:28px;padding:2px;border:1px solid var(--line-strong);border-radius:6px;background:var(--panel);cursor:pointer}
.palette-swatches input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}