:root{color-scheme:light;--paper:#f5f4f0;--ink:#252620;--line:#d9d8d0;--muted:#77786e;--stage-hi:#eeede7;--tile:#ecebe5;--hover:#e8e7df;--layer:#e8e7de;--tile-on:#e1e2d5;--ink-hover:#45463f}:root[data-theme=dark]{color-scheme:dark;--paper:#171814;--ink:#ecebe3;--line:#33342d;--muted:#8d8e82;--stage-hi:#1f201b;--tile:#23241e;--hover:#2d2e27;--layer:#2a2b24;--tile-on:#33352b;--ink-hover:#cfcec4}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:13px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;background:transparent;border:1px solid var(--line);border-radius:3px;padding:9px 12px}button:hover{background:var(--hover)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #78844b;outline-offset:3px}button:disabled{opacity:.3;cursor:default}header{height:74px;display:flex;align-items:center;padding:0 30px;border-bottom:1px solid var(--line);gap:24px}.brand{font-size:25px;font-weight:700;letter-spacing:-1.3px;color:inherit;text-decoration:none}.edition{color:var(--muted);font-size:11px;margin:auto}.badge{border:1px solid var(--line);border-radius:20px;padding:5px 10px;font-size:10px}main{display:grid;grid-template-columns:282px minmax(300px,1fr) 250px;height:calc(100dvh - 74px);min-height:560px}.library{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.panel-heading{padding:28px 22px 19px}h1{font-size:29px;line-height:1;letter-spacing:-1.4px;margin:0;font-weight:500}h1 span{display:block;font-size:13px;letter-spacing:0;margin-top:12px}.intro{line-height:1.5;color:var(--muted);font-size:12px;margin:23px 0 0}.library-label{display:flex;justify-content:space-between;padding:0 22px 12px;font-size:10px;color:var(--muted)}#stickers{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;overflow:auto;padding:0 14px 16px;align-content:start;scrollbar-width:thin}.sticker{position:relative;border:1px solid transparent;background:var(--tile);padding:10px 5px 16px;min-height:94px;display:flex;align-items:center;justify-content:center}.sticker img{width:100%;height:66px;object-fit:contain;transition:transform .2s;pointer-events:none}.sticker:hover img{transform:scale(1.12)}.sticker.active{border-color:var(--ink);background:var(--tile-on)}.source-note{padding:12px 22px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.stage{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,var(--stage-hi) 0%,var(--paper) 70%)}.stage-top{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;z-index:2}.stage-top>span{font-size:14px}.stage-top small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.segmented{display:flex;border:1px solid var(--line);border-radius:20px;padding:3px}.segmented button{border:0;border-radius:20px;padding:7px 14px;font-size:11px}.segmented .active{background:var(--ink);color:var(--paper)}#viewport{flex:1;min-height:200px;position:relative;touch-action:none;cursor:crosshair}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}#loading{position:absolute;top:50%;width:100%;text-align:center;font-size:13px;color:var(--muted);pointer-events:none}#toast{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:24px;opacity:0;transition:opacity .2s;white-space:nowrap;pointer-events:none}.stage-bottom{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;color:var(--muted);font-size:10px;gap:12px}.stage-bottom button{border:0;padding:0;font-size:10px;white-space:nowrap}.object-caption{text-align:center;padding:5px 0 26px;font-size:38px;letter-spacing:-2px}.object-caption span{font-size:24px;font-weight:300;color:var(--muted);margin:0 9px}.inspector{padding:25px 20px 16px;border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.inspector-heading{display:flex;justify-content:space-between;font-size:10px;gap:5px}.inspector-heading>span+span{color:var(--muted);font-size:9px}#selection{display:flex;gap:13px;align-items:center;margin:25px 0}#selection img{width:62px;height:68px;object-fit:contain}#selection small{display:block;color:var(--muted);font-size:10px;margin-top:7px}label{display:flex;justify-content:space-between;font-size:11px}output{color:var(--muted)}input[type=range]{width:100%;margin:15px 0 24px;accent-color:var(--ink);height:3px}.edit-buttons{display:flex;gap:6px}.edit-buttons button{font-size:11px;flex:1;padding:8px 2px}.divider{border-top:1px solid var(--line);margin:24px 0}#layers{flex:1;overflow:auto;margin-top:12px;min-height:60px;scrollbar-width:thin}.empty{color:var(--muted);font-size:12px;line-height:1.7;margin:16px 0}.layer{width:100%;display:flex;gap:10px;align-items:center;border-color:transparent;text-align:left;padding:6px}.layer img{width:32px;height:32px;object-fit:contain}.layer.active{border-color:var(--line);background:var(--layer)}.layer span{font-size:10px}.history{display:flex;justify-content:space-between;margin:14px 0}.history button{border:0;padding:7px 0;font-size:10px}.primary{background:var(--ink);color:var(--paper);width:100%;border-color:var(--ink)}.primary:hover{background:var(--ink-hover)}.file-actions{display:flex;justify-content:space-between;margin-top:10px}.file-actions button{font-size:9px;padding:5px 0;border:0}#save-state{font-size:9px;color:var(--muted);text-align:center;line-height:1.5;margin-bottom:0}@media(min-width:1500px){main{grid-template-columns:320px 1fr 280px}#stickers{grid-template-columns:repeat(3,1fr)}.sticker{min-height:112px}.sticker img{height:84px}}@media(max-width:1000px){main{grid-template-columns:210px 1fr 210px}.panel-heading{padding:23px 16px}h1{font-size:26px}#stickers{grid-template-columns:repeat(2,1fr)}.inspector{padding:23px 14px}.stage-top{padding:16px}.edition{font-size:9px}.stage-bottom{padding:12px 16px;align-items:start}}@media(max-width:700px){header{height:55px;padding:0 16px}.brand{font-size:21px}.edition{display:none}.badge{margin-left:auto}main{height:auto;min-height:0;display:flex;flex-direction:column}.stage{order:0;height:57dvh;min-height:350px}.library{order:1;border-right:0;border-top:1px solid var(--line)}.panel-heading{display:none}.library-label{padding:13px 16px 8px}#stickers{display:flex;overflow-x:auto;padding:0 12px 12px;gap:7px}.sticker{min-width:78px;min-height:86px}.sticker img{width:66px;height:60px}.source-note{display:none}.inspector{order:2;border-top:1px solid var(--line);border-left:0;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.inspector-heading{grid-column:1/-1}#selection{margin:0;grid-row:span 2}#selection img{height:56px}input[type=range]{margin:0 0 12px}label{align-self:end}.edit-buttons{grid-column:1/-1}.divider{display:none}#layers{grid-column:1/-1;max-height:140px;margin:0}.inspector-footer{grid-column:1/-1}.history{margin:0 0 10px}.object-caption{font-size:27px;padding:0 0 12px}.stage-bottom{font-size:9px;padding:8px 16px}.stage-top{padding:12px 16px}.empty{margin:0}.file-actions{justify-content:space-around}}

/* Keep scrolling along the palette axis; drag toward the sculpture to place. */
.sticker{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}.sticker img{-webkit-user-drag:none}.sticker.dragging{opacity:.45}.sticker-drag-image{position:fixed;left:0;top:0;width:82px;height:82px;object-fit:contain;pointer-events:none;z-index:1000;filter:drop-shadow(0 4px 5px #0003)}body.dragging-sticker,body.dragging-sticker *{cursor:grabbing!important;user-select:none!important}#viewport.drop-ready{box-shadow:inset 0 0 0 1px #7d886e66}@media(max-width:700px){.sticker{touch-action:pan-x}}

.object-picker{display:flex;flex-direction:column;align-items:start;gap:5px}.object-picker select{font:inherit;font-size:14px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:4px 18px 4px 0;cursor:pointer;max-width:160px}.object-picker small{font-size:9px;color:var(--muted)}.object-caption strong{font:inherit}.object-caption small{display:block;font-size:9px;letter-spacing:0;margin-top:8px}.object-caption a{color:var(--muted);text-decoration:none}.object-caption a:hover{text-decoration:underline}.object-caption [hidden]{display:none}

/* A moving pile of real cutout stickers. */
.library-label{align-items:center;gap:8px}#shuffle-stickers{border:0;padding:0;font-size:10px;color:var(--muted);white-space:nowrap}#shuffle-stickers:hover{background:none;color:var(--ink)}
#stickers{display:block;position:relative;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;padding:0;isolation:isolate;overscroll-behavior:contain;scrollbar-width:thin}
.sticker-cluster{position:relative;min-width:100%;}
.sticker{position:absolute;display:block;left:50%;top:50%;width:var(--sticker-size,96px);height:var(--sticker-size,96px);min-width:0;min-height:0;padding:0;border:0;background:transparent;transform:translate(-50%,-50%) perspective(380px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) rotate(var(--angle,0deg));z-index:var(--stack,1);animation:sticker-float var(--duration,10s) var(--delay,0s) ease-in-out infinite;transition:left .65s ease,top .65s ease,scale .2s ease,opacity .2s;will-change:translate;}
.sticker img{width:100%;height:100%;display:block;object-fit:contain;transform:none;filter:drop-shadow(0 2px 2px #26271e22);transition:filter .2s}
.sticker:hover,.sticker.active{background:transparent;border:0}.sticker:hover img{transform:none}
.sticker.active{z-index:80}.sticker.active img{filter:drop-shadow(0 0 2px #657045aa) drop-shadow(0 3px 3px #26271e33)}
.sticker:hover,.sticker:focus-visible{z-index:100;scale:1.16}.sticker:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:8px}


.sticker.dragging{opacity:.2;scale:1.05}body.dragging-sticker .sticker{animation-play-state:paused}
@keyframes sticker-float{0%,100%{translate:calc(var(--float-x)*-1) var(--float-y)}50%{translate:var(--float-x) calc(var(--float-y)*-1)}}
@media(max-width:700px){#stickers{flex:none;height:258px;overflow-x:auto;overflow-y:hidden}.library-label{justify-content:flex-start}.library-label #loaded{margin-left:auto}#shuffle-stickers{margin-left:10px}.sticker{touch-action:pan-x}.sticker:hover{scale:1.08}}
@media(prefers-reduced-motion:reduce){.sticker{animation:none;transition:none}}
.theme{position:relative;flex:none;width:12px;height:12px;padding:0;border-radius:50%;border:1px solid currentColor;color:var(--ink);cursor:pointer;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}.theme::after{content:"";position:absolute;inset:-12px}:root[data-theme=dark] .theme{background:linear-gradient(90deg,transparent 50%,currentColor 50%)}::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}.sticker,.sticker img{-webkit-touch-callout:none}

/* ---- option 2: sticker pile split ---- */
body{overflow:hidden}
main.pile-layout{display:grid;grid-template-columns:30% 1fr;height:100dvh;min-height:0}
.pile-layout .library{background:var(--tile);border:0;position:relative;min-height:0}
.pile-layout #stickers{position:absolute;inset:0;overflow:hidden}
.pile-layout #shuffle-stickers{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;margin:0;padding:0;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink);background:color-mix(in srgb,var(--paper) 70%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}.pile-layout #shuffle-stickers:hover{background:var(--paper);color:var(--ink)}.pile-layout #shuffle-stickers svg{display:block}
.pile-layout .stage{background:var(--paper);display:flex;flex-direction:column}
.pile-layout .stage-top{display:flex;justify-content:space-between;align-items:center;padding:28px 36px}
.pile-layout .brand{font-size:24px;font-weight:700;letter-spacing:-1.3px;color:inherit;text-decoration:none}
.picker{display:flex;align-items:center;gap:14px}
.txt{border:0;background:none;padding:4px 0;font-size:12px;color:var(--ink)}.txt:hover{background:none;text-decoration:underline}.txt:disabled{opacity:.3}
.pile-layout .stage-bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 36px 32px;gap:24px;color:var(--ink)}
.sliders{display:flex;gap:28px;align-items:center}
.sl{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}
.sl input[type=range]{-webkit-appearance:none;appearance:none;width:150px;height:14px;margin:0;background:transparent;cursor:pointer}
.sl input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--line)}
.sl input[type=range]::-moz-range-track{height:1px;background:var(--line)}
.sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--ink);margin-top:-5.5px;border:0;box-shadow:none}
.sl input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:0}
.actions{display:flex;gap:22px}
@media(max-width:700px){
 body{overflow:auto}
 main.pile-layout{display:flex;flex-direction:column;height:auto}
 .pile-layout .stage{order:0;height:auto}
 .pile-layout .stage-top{padding:14px 16px}.pile-layout .brand{font-size:19px}
 .pile-layout #viewport{height:52dvh;min-height:320px;flex:none}
 .pile-layout .stage-bottom{flex-direction:column;align-items:stretch;padding:8px 16px 14px;gap:12px}
 .sliders{justify-content:space-between;gap:18px}.sl{flex:1}.sl input[type=range]{width:100%}
 .actions{justify-content:space-between}
 .pile-layout .library{order:1;height:300px;flex:none}
 .pile-layout #stickers{overflow-x:auto;overflow-y:hidden}
}

/* the sculpture is drawn over everything (on a wide screen the whole window, so it can lean over the sticker pile; on a
   phone the whole column, past the controls and over the pile); the pile stays tappable through it and its stickers move
   out from under it (avoid() in app.js). The top bar and the controls float over it, see-through with a faint grain. */
.pile-layout .stage-top,.pile-layout .stage-bottom{position:relative;z-index:4;background:none}
/* the bars are clear; their buttons carry a faint, blurred backing of the page colour so they read over the sculpture */
.pile-layout .stage-top .txt,.pile-layout .stage-top .segmented,.pile-layout .stage-top .theme-wrap,.pile-layout .stage-bottom .txt,.pile-layout .stage-bottom .sl{background:color-mix(in srgb,var(--paper) 62%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px}
.pile-layout .stage-top .txt,.pile-layout .stage-bottom .txt{padding:6px 12px}
.pile-layout .stage-bottom .sl{padding:4px 14px}
.pile-layout .stage-top .theme{box-shadow:0 0 0 6px color-mix(in srgb,var(--paper) 62%,transparent)}

.pile-layout #loading,.pile-layout #toast{z-index:5}
@media(min-width:701px){
 .pile-layout .stage{overflow:visible;padding-top:var(--bar-h,88px)}
 .pile-layout .stage-top{position:fixed;left:0;right:0;top:0;height:var(--bar-h,88px);box-sizing:border-box}
 .pile-layout #stickers{top:var(--bar-h,88px)}
 .pile-layout #canvas{position:fixed;left:0;top:0;width:100vw;height:100dvh;pointer-events:none;z-index:3}
}
@media(max-width:700px){
 main.pile-layout{position:relative}
 .pile-layout .stage{position:static;overflow:visible}
 .pile-layout #canvas{position:absolute;left:0;top:calc(-1 * var(--canvas-up,0px));width:100%;height:var(--canvas-h,100%);pointer-events:none;z-index:3}
}

/* the stickers lean toward the pointer (up to 22 degrees, set in app.js). Each one has its own perspective and the pile is
   not a shared 3D space (no preserve-3d), so leaning stickers never cut into one another: they stay drawn whole, in stack order */
.sticker-cluster{transform-style:flat}

/* the sticker being placed / edited, next to the sliders */
#sel-thumb{width:30px;height:30px;object-fit:contain;flex:none;opacity:.55;filter:drop-shadow(0 1px 1px #26271e22);transition:opacity .2s}#sel-thumb.placed{opacity:1}
/* bigger touch targets for size / rotate: the whole row is the hit area, the track stays a hairline */
.sl{cursor:pointer}
.sl input[type=range]{height:36px;touch-action:none}




/* the pile never scrolls: stickers are dragged around in it, or out onto the model */
.pile-layout #stickers{overflow:hidden!important;touch-action:none}
.sticker{touch-action:none!important}
@media(max-width:700px){
 .sl input[type=range]{height:48px}


 .pile-layout .stage-bottom .sl{padding:0 14px}
 .sliders{gap:12px}#sel-thumb{width:34px;height:34px}
}
/* phones: the whole app fits one screen (no page scroll), so the pile can take every drag */
@media(max-width:700px){
 body{overflow:hidden}
 main.pile-layout{height:100dvh;overflow:hidden}
 .pile-layout .stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
 .pile-layout #viewport{height:auto;min-height:0;flex:1 1 auto}
 .pile-layout .stage-bottom{padding:2px 16px 6px;gap:0}
 .pile-layout .library{height:36dvh;flex:none}
}

/* the pile fills its pane to the bottom: no strip under it */
@media(max-width:700px){.pile-layout #stickers{height:auto;bottom:0}}
/* the size and rotate boxes are low; each slider's touch strip stays tall, reaching past the box above and below */
.pile-layout .stage-bottom .sl{height:28px;box-sizing:border-box;padding-top:0;padding-bottom:0}
.pile-layout .stage-bottom .sl input[type=range]{margin:-4px 0}
@media(max-width:700px){.pile-layout .stage-bottom .sl{height:30px}.pile-layout .stage-bottom .sl input[type=range]{margin:-9px 0}}
/* touch screens: no focus or selection boxes around the sliders and buttons */
@media(pointer:coarse){*{-webkit-tap-highlight-color:transparent}.sl,.sl input,.actions button,#shuffle-stickers,.sticker{outline:none!important;-webkit-user-select:none;user-select:none}.sticker:focus-visible{outline:none;scale:1}}