/* A finite, face-first playground. The original canvas is an optional view. */
.structured-face{transition:translate 190ms cubic-bezier(.2,.8,.2,1),transform 170ms,border-color 170ms!important}.landing-slot{position:fixed;pointer-events:none;z-index:8;border:2px dashed #708d8b;border-radius:30%;background:#96b9b522;transition:left 140ms,top 140ms;box-shadow:inset 0 0 0 7px #fff8}.is-dragging .structured-face.drag-source{opacity:0!important}.is-dragging #layoutModes,.is-dragging #structuredDock,.is-dragging #structuredMore,.is-dragging header{pointer-events:none;opacity:.35}.face-ghost{border-radius:50%!important;padding:3px!important;transform:rotate(4deg) scale(1.08)!important;background:#fffdf8!important}.is-dragging .stack .structured-face{transform:rotate(0deg)!important}.is-dragging #moveBar{visibility:hidden}
.batch-progress{font-size:12px;color:#8c9580;margin-left:auto;margin-right:16px}.manual-photo{padding:0;aspect-ratio:1;overflow:hidden;border-radius:14px;background:#e9ebdf}.manual-photo img{width:100%;height:100%;object-fit:cover}.import-actions .toggle-stickers{flex:0 0 45px;padding:8px}
body[data-layout=slalom] #structured{bottom:125px;overflow-x:auto;overflow-y:hidden;mask-image:linear-gradient(to right,transparent,black 12px,black calc(100% - 12px),transparent)}
body[data-layout=slalom] .arrangement.slalom:not(.blank){position:relative;display:block;max-width:none;padding:0;margin:0;min-width:100%}
body[data-layout=slalom] .slalom .structured-face{position:absolute;width:56px;height:56px;min-width:56px;margin:0!important;padding:3px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 3px 7px #40532920}
body[data-layout=slalom] .slalom .structured-face img{border-width:2px}
body[data-layout=slalom] .slalom .structured-face img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}
body[data-layout=slalom] .slalom .structured-face:hover{transform:translate(-50%,-50%) scale(1.09)}
body[data-layout=slalom] .slalom .structured-face.drop-target{transform:translate(-50%,-50%) scale(1.15)}
body[data-layout=slalom] .slalom-line{left:0;top:0;stroke:#aebb99;stroke-width:3;stroke-dasharray:none}
body[data-layout=slalom] .slalom-line .ribbon-under{stroke:#e3e9d7;stroke-width:13}
.grid .structured-face{min-width:0;min-height:0}.grid .structured-face img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.scanning{animation:breathe .8s infinite alternate}.manual-import svg{width:24px;height:24px}
body:not([data-layout=canvas]){background:#f7f4ec;color:#434b3c}body:not([data-layout=canvas]) #field,body:not([data-layout=canvas]) #empty,body:not([data-layout=canvas]) .dock,body:not([data-layout=canvas]) .zoom,body:not([data-layout=canvas]) #helpBtn,body:not([data-layout=canvas]) #boardsBtn{display:none!important}
body:not([data-layout=canvas]) header{justify-content:flex-end;top:max(23px,env(safe-area-inset-top));left:20px;right:20px}body:not([data-layout=canvas]) #accountBtn{background:#eeebdf;border:0;box-shadow:none}body:not([data-layout=canvas]) #sync{font-size:0;width:6px;height:6px;border-radius:50%;background:transparent}body:not([data-layout=canvas]) #sync[data-status=saved]{background:#a6b795}body:not([data-layout=canvas]) #sync[data-status=pending]{background:#d1b173;animation:breathe 1s infinite alternate}body:not([data-layout=canvas]) #sync[data-status=error]{background:#bb795c}
#layoutModes{position:absolute;left:20px;top:max(20px,env(safe-area-inset-top));padding:5px;display:flex;gap:5px;border-radius:22px;background:#eae8dd}#layoutModes button{width:45px;height:43px;border-radius:17px;display:grid;place-items:center;background:transparent;color:#949984}#layoutModes svg{width:21px;height:23px}body[data-layout=grid] [data-mode=grid],body[data-layout=stack] [data-mode=stack],body[data-layout=slalom] [data-mode=slalom]{background:#fffdf6;box-shadow:0 2px 4px #3445260a;color:#5c7050}
#structured{position:absolute;inset:91px 0 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d7d9c8 transparent;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to bottom,transparent,black 16px,black calc(100% - 14px),transparent)}
.arrangement{max-width:600px;margin:0 auto;padding:26px 24px 160px}.arrangement.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.structured-face,.empty-slot{position:relative;display:grid;place-items:center;border:2px solid transparent;aspect-ratio:1;border-radius:30%;padding:12px;background:#e9e9dc;user-select:none;-webkit-user-select:none;touch-action:none;transition:transform .2s,border-color .2s,box-shadow .2s;cursor:grab;box-shadow:inset 0 -3px 0 #43512805}.structured-face:nth-child(5n+2),.empty-slot:nth-child(5n+2){background:#ebdbce}.structured-face:nth-child(5n+3),.empty-slot:nth-child(5n+3){background:#dde3dd}.structured-face:nth-child(5n+4),.empty-slot:nth-child(5n+4){background:#e7e0c9}.structured-face:nth-child(5n+5),.empty-slot:nth-child(5n+5){background:#e0dfe8}.structured-face img{width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none;-webkit-user-drag:none;box-shadow:0 3px 8px #30372113;border:3px solid #fffdf5}.structured-face:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 7px 18px #5263420c}.structured-face.picked{border-color:#91a57a;box-shadow:0 0 0 4px #aab9921a}.structured-face.drag-source{opacity:.2;transform:scale(.92)}.structured-face.drop-target{border-color:#6a8258;transform:scale(1.05);box-shadow:0 0 0 6px #94ab721e}.empty-slot{background:#eeece2;cursor:pointer;touch-action:manipulation}.empty-slot i{width:62%;height:62%;border:1px dashed #c2c7b5;border-radius:50%;opacity:.7}.empty-slot span{width:64%;height:64%;border-radius:50%;background:#bbcc9d;color:#fffef8;display:grid;place-items:center;font-size:35px;box-shadow:0 7px 15px #8d9f7120}.arrangement.blank{padding-top:80px;max-width:420px;grid-template-columns:repeat(3,minmax(0,1fr));display:grid;gap:15px}
#structuredDock{position:absolute;bottom:max(27px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:18px;align-items:center;padding:8px 17px;background:#fffdf4eb;border:1px solid #e7e5d6;border-radius:40px;box-shadow:0 8px 28px #515c3510;backdrop-filter:blur(15px)}#structuredDock button{width:43px;height:43px;border-radius:50%;background:transparent;display:grid;place-items:center;color:#6c775e}#structuredDock #structuredAdd{width:56px;height:56px;background:#d69f7e;color:#fffdf7;font-size:32px;line-height:1;box-shadow:0 5px 12px #c88f6930;transition:transform .15s}#structuredAdd:active{transform:scale(.9)}#structuredDock svg{width:21px;height:23px}#structuredMore{position:absolute;bottom:45px;right:23px;width:35px;height:35px;border-radius:50%;background:transparent;color:#969c88;display:grid;place-items:center}#backToGrid{position:absolute;top:80px;left:24px;width:38px;height:38px}#moveBar{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);display:flex;padding:4px 9px;background:#fffdf3ed;box-shadow:0 3px 16px #51643c12;border-radius:25px;border:1px solid #e5e4d6;backdrop-filter:blur(10px)}#moveBar button{background:transparent;width:40px;height:36px;border-radius:18px;font-size:21px;color:#6c775e}.compact-options{display:flex;justify-content:center;gap:25px;padding:25px}.compact-options button{width:76px;height:76px;background:#e8eadc;border-radius:24px;display:grid;place-items:center;font-size:24px}.compact-options svg{width:30px;height:32px}.gesture-demo{display:flex;justify-content:center;align-items:center;gap:35px;padding:40px 10px;font-size:45px;color:#9db281}.gesture-demo span:first-child{animation:breathe 1s infinite alternate}
.arrangement.stack{display:flex;flex-direction:column;align-items:center;gap:0;padding-top:30px;max-width:500px}.stack .structured-face{flex:none;width:258px;height:154px;aspect-ratio:auto;border-radius:26px;margin-bottom:-17px;padding:20px;transform:rotate(var(--tilt));box-shadow:0 5px 12px #343f2820;border:3px solid #fffdf7}.stack .structured-face img{width:109px;height:109px;border:4px solid #fffdf6}.stack .structured-face:hover,.stack .structured-face.picked{transform:rotate(0deg) translateX(6px)}.stack .structured-face.drop-target{border-color:#7e9667;transform:rotate(0deg) translateX(10px)}.card-grip{position:absolute;right:21px;color:#838b7260;font-size:22px}.face-ghost{position:fixed;z-index:1000;pointer-events:none;border:4px solid #fffdf5;border-radius:30%;background:#e5ead7;box-shadow:0 15px 40px #35492f35;display:grid;place-items:center;padding:10px;opacity:.95;transform:rotate(5deg) scale(1.06)}.face-ghost img{width:100%;height:100%;object-fit:cover;border-radius:50%}.face-ghost .card-grip{display:none}
.arrangement.slalom{position:relative;max-width:408px;padding:0 24px 160px;display:flex;flex-direction:column;align-items:flex-start;gap:36px}.slalom .structured-face{flex:none;width:102px;height:102px;z-index:1;border-radius:50%;padding:7px;margin-left:calc(25% - 51px);margin-top:17px;margin-bottom:19px}.slalom .structured-face:nth-of-type(even){margin-left:calc(75% - 51px)}.slalom-line{position:absolute;left:24px;top:0;width:calc(100% - 48px);stroke:#cbd2b9;stroke-width:3;fill:none;stroke-dasharray:2 9;stroke-linecap:round;pointer-events:none}.slalom .structured-face:nth-of-type(3n){background:#d8dcc3}.slalom.blank{padding-top:80px;display:grid;gap:15px}
@keyframes breathe{from{opacity:.45}to{opacity:1}}@media(max-width:600px){.arrangement.grid{max-width:430px;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:25px 20px 160px}.structured-face{padding:9px}.arrangement.blank{padding-top:72px;max-width:380px}.stack .structured-face{width:242px;height:145px}.stack .structured-face img{width:103px;height:103px}.arrangement.slalom{max-width:390px}#layoutModes{left:18px}#structuredMore{right:17px;bottom:47px}#structuredDock{gap:14px;padding:8px 13px}}@media(prefers-reduced-motion:reduce){.structured-face,.face-ghost,#structuredAdd{transition:none!important;animation:none!important}*{scroll-behavior:auto!important}}

.slalom .structured-face{margin-top:17px;margin-bottom:19px}.arrangement.slalom{gap:0}.arrangement.stack.blank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:380px;padding-top:72px}