:root{font-family:system-ui,sans-serif;color:#25313b;background:#f4f7f6}*{box-sizing:border-box}body{margin:0}main{max-width:1120px;margin:auto;padding:28px 20px 60px}header{margin-bottom:22px}.eyebrow{font-size:12px;letter-spacing:.16em;color:#597572}h1{font-size:clamp(24px,4vw,36px);margin:8px 0}h2{font-size:19px;margin:0}h3{font-size:17px;margin:0}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.95fr);gap:22px;align-items:start}.stage{position:relative;aspect-ratio:1024/700;overflow:hidden;border-radius:20px;background:radial-gradient(ellipse at 50% 30%,#fffaf4,#f0dfcf);border:1px solid #e7d6c7}.stage img,.thumbnail img{position:absolute;top:0;left:0;width:100%;height:auto}.preview p,.controls p{font-size:14px;line-height:1.6;color:#586b6c}.controls{background:#fff;border:1px solid #e0e9e7;border-radius:18px;padding:22px}.categories{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 20px}.category{font:inherit;border:1px solid #b8cbc8;background:#fff;border-radius:999px;padding:7px 12px;color:#285956;cursor:pointer}.category[aria-pressed=true]{background:#236c67;border-color:#236c67;color:#fff;font-weight:700}.list-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.list-heading span,.scroll-hint{font-size:12px;color:#647775}.scroll-hint{margin:5px 0 10px!important}.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;max-height:470px;overflow-y:auto;padding:2px 4px 5px 2px}.part{min-width:0;padding:6px;border:2px solid #dbe6e3;border-radius:12px;background:#fff;color:#25313b;text-align:left;cursor:pointer;font:inherit}.part:hover{border-color:#74a7a0}.part[aria-pressed=true]{border-color:#23776d;background:#ecf7f3}.thumbnail{display:block;position:relative;aspect-ratio:1024/700;overflow:hidden;border-radius:7px;background:#f7e9de}.thumbnail.none{display:grid;place-items:center;font-size:24px;color:#6c7b79;background:#eef3f1}.part-name{display:block;font-size:12px;line-height:1.35;overflow-wrap:anywhere;padding:5px 2px 2px}.part-state{display:block;min-height:1.3em;font-size:11px;color:#1a6b5e;font-weight:700;padding:0 2px}.save{margin-top:18px;background:#236c67;color:white;border:0;border-radius:8px;padding:12px 18px;font:inherit;cursor:pointer}.save:disabled{opacity:.55;cursor:not-allowed}a{color:#236c67}button:focus-visible,a:focus-visible{outline:3px solid #dd9e36;outline-offset:2px}@media(max-width:700px){main{padding:18px 16px 45px}.layout{grid-template-columns:1fr;gap:12px}.controls{padding:18px}.parts{grid-template-columns:repeat(3,minmax(0,1fr));max-height:360px}.category{padding:8px 11px}}
.adjust{border-top:1px solid #e0e9e7;margin-top:18px;padding-top:16px}.adjust label{display:grid;grid-template-columns:100px 1fr 46px;align-items:center;gap:8px;font-size:13px;margin:10px 0}.adjust input{width:100%;accent-color:#236c67}.adjust output{text-align:right;font-variant-numeric:tabular-nums}.reset{background:white;border:1px solid #8baaa5;border-radius:8px;padding:8px 12px;color:#285956;cursor:pointer}
.view-mode{display:flex;gap:8px;margin-bottom:10px}.view-mode button{font:inherit;border:1px solid #b8cbc8;background:white;border-radius:999px;padding:7px 12px;color:#285956;cursor:pointer}.view-mode button[aria-pressed=true]{background:#236c67;border-color:#236c67;color:white}.stage.full{aspect-ratio:1024/1536}.stage.face{aspect-ratio:1024/700}
.mobile-hint{display:none}@media(max-width:700px){.mobile-hint{display:block;font-size:12px;color:#586b6c;margin:6px 0}.stage.full{max-width:230px;margin-inline:auto}}