@charset "utf-8";
:root{--bg:#1d2029;--panel:#252a35;--subtle:#353b49;--stroke:#48505d;--ink:#e9e7e5;--mute:#a6a9b1;--accent:#e6a1ae;--focus:#fdcfaa}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
button,input,select{font:inherit}button{cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
button:disabled{cursor:default;opacity:.4}
h1,h2,p{margin:0}h1{font-size:22px;line-height:1.3}h2{font-size:13px}
.top{height:68px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 24px;border-bottom:1px solid var(--stroke);background:#242832}
.identity{display:flex;align-items:center;gap:11px}.mark{width:38px;height:38px;background:#a85a71;color:white;display:grid;place-items:center;border-radius:7px;font-weight:900;letter-spacing:-.08em}
.identity strong{display:block;font-size:14px;letter-spacing:.11em}.identity small{display:block;color:#a9a6b0;font-size:10px;margin-top:3px}
.head-actions{display:flex;align-items:center;gap:10px}.saving{font-size:11px;color:#b1abb4;white-space:nowrap}
.outline,.primary{min-height:39px;padding:9px 15px;border-radius:6px;font-size:12px;font-weight:750}
.outline{border:1px solid #686776;background:#30333f}.primary{border:1px solid #d08b9e;background:#af667d;color:#fff}
.workspace{display:grid;grid-template-columns:245px minmax(0,1fr) 288px;max-width:1700px;min-height:calc(100vh - 102px);margin:auto}
.sidebar,.preview{padding:22px 18px;background:#242832}.sidebar{border-right:1px solid #414653}.preview{border-left:1px solid #414653}
.sidebar section+section{margin-top:24px;padding-top:24px;border-top:1px solid #3f4551}
.label-row{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:13px}.label-row span{font-size:10px;color:#a5a2ae}.label-row h2{font-size:13px;letter-spacing:.01em}
.emotion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.emotion-grid button{border:1px solid #535665;background:#2d323e;padding:9px 4px;min-height:40px;border-radius:5px;font-size:12px;font-weight:650}
.emotion-grid button[aria-pressed=true]{background:#673c4e;color:#ffe8ed;border-color:#d391a5}
.layers{display:grid;gap:5px}.layers button{display:flex;align-items:center;min-height:38px;background:transparent;border:1px solid transparent;padding:7px 9px;border-radius:5px;gap:9px;font-size:12px;text-align:left}
.layers button[aria-pressed=true]{border-color:#66525d;background:#4e3341}.layer-icon{font-size:15px;color:#e8b2b7;min-width:21px;text-align:center}.layer-count{margin-left:auto;color:#a8a5b0;font-variant-numeric:tabular-nums}
.caption{font-size:11px;color:#aaa9b3;line-height:1.7;margin-top:10px}
.tools{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tools button{font-size:11px;min-height:42px;text-align:left;background:#2b303b;border:1px solid #535867;border-radius:5px;padding:7px}
.tools button[aria-pressed=true]{background:#51404d;border-color:#bb8598}
kbd{font-family:inherit;float:right;font-size:10px;color:#a4a5ad;font-weight:500}
.settings{display:flex;justify-content:space-between;gap:6px;margin:15px 0 13px}
.settings label{display:flex;align-items:center;gap:6px;font-size:11px;color:#adadb8}
.settings select{background:#323746;color:#fff;border:1px solid #5a616e;padding:6px;border-radius:5px;font-size:12px}
.settings input{background:transparent;border:0;padding:0;width:35px;height:33px;cursor:pointer}
.palette{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.palette button{width:100%;aspect-ratio:1;border:1px solid #6f6771;border-radius:4px;background:var(--swatch)}
.palette button[aria-pressed=true]{outline:2px solid white;outline-offset:2px}
.utilities{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:15px}
.utilities button{padding:8px 6px;background:transparent;border:1px solid #575c68;border-radius:5px;font-size:11px;text-align:left}
.center{min-width:0;padding:27px 28px;display:flex;flex-direction:column}
.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.section-index{display:block;font-weight:800;font-size:10px;letter-spacing:.15em;color:#d5a1af;margin-bottom:7px}
.view-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.zoom-buttons{display:inline-flex;gap:2px;padding:2px;border:1px solid #555c69;border-radius:6px;background:#2a303b}.zoom-buttons button{border:0;background:transparent;color:#c3c4cd;border-radius:4px;padding:7px 10px;font-size:11px;min-height:30px}.zoom-buttons button[aria-pressed=true]{background:#795064;color:#fff}.compare{padding:8px 12px;white-space:nowrap;border:1px solid #585e6b;background:transparent;border-radius:5px;font-size:11px;touch-action:manipulation}
.compare:active{background:#88576a}
.drawing-surface{background:#242934;border:1px solid #4a515f;overflow:hidden}
.draw-container{width:100%;max-height:min(72vh,900px);overflow:auto;background:#cba9a3;padding:6px}
#face-canvas{display:block;width:100%;height:auto;max-width:none;margin:0 auto;image-rendering:pixelated;touch-action:none;cursor:crosshair;aspect-ratio:300/168}
.canvas-footer{display:flex;gap:10px;justify-content:space-between;padding:11px 13px;color:#bbb8be;font-size:10px}
.instructions{margin:16px 0;color:#bfbcc6;font-size:12px;line-height:1.85;min-height:48px}
.detail-actions{display:flex;gap:9px;flex-wrap:wrap}
.detail-actions button{background:#343946;border:1px solid #5b6070;border-radius:5px;padding:10px 12px;font-size:12px}
.detail-actions .danger{background:transparent;color:#dea6b4;border-color:#775366}
.character-stage{display:grid;place-items:center;background:linear-gradient(#cfaba4,#b99597);padding:12px 10px;min-height:290px}
#body-canvas{max-height:430px;width:auto;max-width:100%;height:auto;image-rendering:pixelated;aspect-ratio:1041/1510}
.ref-heading{display:flex;gap:10px;justify-content:space-between;align-items:center;border-top:1px solid #414653;padding-top:22px;margin-top:24px}.ref-heading span{color:#a4a4ae;font-size:10px}
.reference{margin-top:13px;background:#303039;border:1px solid #504f5a}
.reference img{display:block;width:100%;height:auto;image-rendering:pixelated}
.reference p{font-size:10px;color:#bbb6bf;line-height:1.7;padding:12px}
.note{font-size:11px;color:#bbb9c3;line-height:1.9;margin-top:18px}
footer{border-top:1px solid #424957;color:#aaaab4;font-size:10px;text-align:center;padding:12px}
@media(max-width:1100px){.workspace{grid-template-columns:210px minmax(0,1fr)}.preview{grid-column:2;border-left:0;border-top:1px solid #414653;display:grid;grid-template-columns:190px 1fr;gap:12px}.preview .label-row{grid-column:1/3}.preview .ref-heading{margin:0;padding:0;border:0;grid-column:2;grid-row:2;align-self:start}.character-stage{grid-column:1;grid-row:2/5}.reference{grid-column:2;grid-row:3;margin:0;max-width:320px}.note{grid-column:2;grid-row:4;margin:0}}
@media(max-width:650px){.top{height:auto;min-height:65px;padding:12px;flex-wrap:wrap}.head-actions{width:100%;justify-content:flex-end}.saving{margin-right:auto}.workspace{display:flex;flex-direction:column}.center{order:0;padding:20px 12px}.sidebar{order:1;border-right:0;border-top:1px solid #414653}.preview{order:2;display:block;padding:18px;border-top:1px solid #414653}.character-stage{min-height:0}.reference{margin-top:11px}.ref-heading{margin-top:20px;padding-top:20px;border-top:1px solid #414653}.note{margin-top:15px}.section-title{align-items:flex-end}h1{font-size:18px}.view-actions{gap:6px}.compare{white-space:normal;max-width:115px;font-size:10px}.zoom-buttons button{font-size:10px;padding:5px 7px}.canvas-footer{font-size:9px}.emotion-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.emotion-grid button{min-height:42px;font-size:10px}.sidebar section+section{margin-top:16px;padding-top:17px}.sidebar .tools{grid-template-columns:repeat(4,1fr)}.tools button{font-size:10px}.detail-actions button{flex:1} }