:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#1d252c;background:#ece7de;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,select,input{font:inherit}button{border:0;border-radius:6px;background:#1b6ca8;color:#fff;min-height:40px;padding:0 16px;cursor:pointer}button.secondary,button.mode-toggle{background:#fff;color:#26323d;border:1px solid #c8c0b5}button.mode-toggle.is-active{background:#1f4f64;color:#fff;border-color:#1f4f64}button:disabled{cursor:not-allowed;opacity:.48}.app{min-height:100vh;display:flex;flex-direction:column;padding:18px;gap:16px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.topbar h1,.topbar p,.photo-tray h2{margin:0}.topbar h1{font-size:clamp(1.4rem,3vw,2rem);line-height:1.1}.topbar p{margin-top:4px;color:#62707b}.mode-pill{flex:0 0 auto;border:1px solid #b9afa0;border-radius:999px;background:#fbf8f1;padding:8px 14px;font-weight:700}.workspace{min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:minmax(360px,1fr) auto;gap:16px}.canvas-shell{min-width:0;min-height:0;background:#d9d1c4;border:1px solid #c6baaa;border-radius:8px;padding:14px}.stage-host{width:100%;height:100%;min-height:360px;background:linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.25) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.25) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.25) 75%);background-size:28px 28px;background-position:0 0,0 14px,14px -14px,-14px 0;overflow:hidden;touch-action:none}.control-panel{grid-column:2;grid-row:1 / span 2;align-self:start;display:grid;gap:18px;background:#fbf8f1;border:1px solid #c6baaa;border-radius:8px;padding:16px}.control-panel.compact{align-self:end}.control-panel label{display:grid;gap:8px;color:#4d5963;font-weight:700}.control-panel strong{color:#1d252c}.control-panel select,.control-panel input[type=range]{width:100%}.button-row{display:grid;gap:10px}.file-button{min-height:42px;align-items:center;justify-items:center;border-radius:6px;background:#26323d;color:#fff!important;cursor:pointer}.file-button input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}.photo-tray{grid-column:1;grid-row:2;min-width:0;background:#fbf8f1;border:1px solid #c6baaa;border-radius:8px;padding:12px}.tray-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}.tray-header h2{font-size:1rem}.tray-header span{color:#62707b;font-size:.9rem}.tray-list{display:flex;gap:10px;overflow-x:auto;min-height:92px}.tray-photo{position:relative;flex:0 0 92px;display:grid;gap:6px;justify-items:stretch;min-height:86px;padding:6px;background:#fff;color:#27323a;border:1px solid #c8c0b5}.tray-pick{min-height:0;padding:0;background:transparent;border:0;color:inherit}.tray-pick:disabled{cursor:not-allowed}.tray-pick img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px}.tray-remove{position:absolute;top:2px;right:2px;display:grid;place-items:center;width:24px;height:24px;min-height:24px;padding:0;border-radius:999px;background:#1d252cd1;color:#fff;font-size:1rem;line-height:1}.tray-photo span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.76rem}.tray-photo[aria-disabled=true]{opacity:.72}.empty-tray{display:grid;place-items:center;min-width:220px;color:#6c766f;border:1px dashed #b8ad9b;border-radius:6px;padding:16px}.drop-overlay{position:fixed;inset:16px;display:grid;place-items:center;border:2px dashed #1b6ca8;border-radius:12px;background:#fbf8f1e6;color:#1b4d73;font-size:1.3rem;font-weight:800;pointer-events:none}@media(max-width:860px){.app{padding:12px}.workspace{grid-template-columns:1fr;grid-template-rows:minmax(340px,1fr) auto auto}.control-panel,.control-panel.compact,.photo-tray{grid-column:1;grid-row:auto}.button-row{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}.stage-host{min-height:340px}.topbar{align-items:flex-start}}@media(max-width:520px){.topbar{flex-direction:column}.mode-pill{align-self:flex-start}.canvas-shell{padding:8px}.tray-header{align-items:flex-start;flex-direction:column}}