:root{--card-h:58px;--ease:cubic-bezier(.22, .61, .36, 1);--radius:10px;--gutter:16px;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}*{box-sizing:border-box;margin:0;padding:0}html{overscroll-behavior:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;height:100%;overflow:hidden}body{overscroll-behavior:none;background:var(--bg);background:radial-gradient(120% 100% at 50% 8%, var(--bg-top) 0%, var(--bg) 58%, var(--bg-bot) 100%);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:background-color .22s var(--ease), color .22s var(--ease);font:400 14px/1.4 -apple-system,BlinkMacSystemFont,SF Pro Text,system-ui,sans-serif;position:fixed;inset:0;overflow:hidden}button,a{font:inherit;color:inherit;touch-action:manipulation}.app{height:100%;padding-left:var(--safe-left);padding-right:var(--safe-right);flex-direction:column;display:flex;position:relative}.topbar{padding:calc(var(--safe-top) + 12px) calc(var(--gutter) - 2px) 0 var(--gutter);flex:none;justify-content:flex-end;display:flex}.icon-button{border:1px solid var(--line);background:var(--surface);width:38px;height:38px;color:var(--ink);cursor:pointer;transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);border-radius:50%;place-items:center;display:grid}.icon-button:hover{background:var(--surface-hover);border-color:var(--line-strong)}.icon-button:active{transform:scale(.94)}.icon-button .icon{width:19px;height:19px;transition:opacity .2s var(--ease), transform .26s var(--ease);grid-area:1/1}.icon--sun{opacity:0;transform:rotate(-70deg)scale(.6)}:root[data-theme=dark] .icon--sun{opacity:1;transform:none}:root[data-theme=dark] .icon--moon{opacity:0;transform:rotate(70deg)scale(.6)}.stage{flex:auto;min-height:0;position:relative}.stage canvas{pointer-events:none;touch-action:none;display:block;position:absolute;inset:0}.controls{padding:8px var(--gutter) 0;flex-direction:column;flex:none;align-items:center;gap:14px;display:flex}.slider{touch-action:none;cursor:grab;outline:none;align-items:center;width:clamp(200px,38vw,380px);max-width:100%;height:30px;display:flex;position:relative}.slider.is-dragging{cursor:grabbing}.slider__track{background:var(--track);border-radius:999px;height:4px;position:absolute;inset:50% 0 auto;overflow:hidden;translate:0 -50%}.slider__fill{transform-origin:0;border-radius:inherit;background:var(--accent);width:100%;height:100%;display:block}.slider__thumb{background:var(--accent);width:20px;height:20px;box-shadow:0 1px 3px var(--shadow-lift);will-change:transform;border-radius:50%;position:relative}.slider.is-stuck .slider__thumb{box-shadow:0 1px 3px var(--shadow-lift), 0 0 0 7px var(--halo)}.slider:focus-visible .slider__thumb{box-shadow:0 1px 3px var(--shadow-lift), 0 0 0 3px var(--ring)}.rail{--mag:0;align-items:center;gap:8px;max-width:100%;padding:2px 10px;display:flex}@property --fade-left{syntax:"<length>";inherits:false;initial-value:0}@property --fade-right{syntax:"<length>";inherits:false;initial-value:0}.rail__scroll{--fade-left:0px;--fade-right:0px;scrollbar-width:none;scroll-snap-type:x proximity;touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;min-width:0;-webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);mask-image:linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);transition:--fade-left .18s var(--ease), --fade-right .18s var(--ease);margin-block:-8px;margin-inline:-10px;padding-block:8px;overflow-x:auto}.rail__scroll::-webkit-scrollbar{display:none}.rail__cards{align-items:center;gap:8px;padding-inline:10px;display:flex}.card{height:var(--card-h);aspect-ratio:1;background:var(--card) center / cover no-repeat;width:auto;box-shadow:0 1px 2px var(--shadow), inset 0 0 0 1px var(--line);cursor:pointer;scroll-snap-align:center;opacity:.62;transition:opacity .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);border:0;border-radius:8px;flex:none;padding:0}.card:hover{opacity:.85}.card[aria-selected=true]{opacity:1;box-shadow:0 4px 12px var(--shadow-lift), inset 0 0 0 1px var(--line), 0 0 0 2px var(--accent);transform:translateY(-3px)scale(1.06)}.card.is-incoming{opacity:calc(.62 + .38 * var(--mag));transform:translateY(calc(-3px * var(--mag))) scale(calc(1 + .06 * var(--mag)))}.card.is-outgoing{opacity:calc(1 - .38 * var(--mag));transform:translateY(calc(-3px * (1 - var(--mag)))) scale(calc(1.06 - .06 * var(--mag)))}.card.is-blank{background-image:linear-gradient(160deg,#9db9d8 0%,#d9c3a4 58%,#c8a878 100%)}.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.rail__add{height:var(--card-h);aspect-ratio:1;border:1px dashed var(--line-strong);color:var(--muted);cursor:pointer;transition:color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);background:0 0;border-radius:8px;flex:none;place-items:center;display:grid}.rail__add:hover{color:var(--ink);border-color:var(--ink);background:var(--surface)}.rail__add svg{width:18px;height:18px}.rail__add:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.rail__cards.is-busy{pointer-events:none}.toolbar{border:1px solid var(--line);background:var(--surface);border-radius:999px;align-items:center;gap:3px;max-width:100%;padding:3px;display:inline-flex}.toolbar__group{align-items:center;gap:2px;min-width:0;display:inline-flex}.toolbar__option,.toolbar__save{cursor:pointer;white-space:nowrap;height:32px;transition:background .16s var(--ease), color .16s var(--ease), opacity .16s var(--ease), transform .16s var(--ease);border:0;border-radius:999px;align-items:center;gap:6px;padding:0 13px;display:inline-flex}.toolbar__option svg,.toolbar__save svg{flex:none;width:16px;height:16px}.toolbar__option{color:var(--muted);background:0 0}.toolbar__option:hover{color:var(--ink)}.toolbar__option[aria-checked=true]{background:var(--bg-top);color:var(--ink);box-shadow:0 1px 2px var(--shadow)}.toolbar__save{background:var(--accent);color:var(--on-accent)}.toolbar__save:hover{opacity:.86}.toolbar__save:active{transform:scale(.97)}.toolbar__save:disabled{opacity:.45;cursor:not-allowed;transform:none}.toolbar__option:focus-visible,.toolbar__save:focus-visible{outline:2px solid var(--ring);outline-offset:1px}.button{border:1px solid var(--line);background:var(--surface);height:38px;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background .16s var(--ease), border-color .16s var(--ease), opacity .16s var(--ease), transform .16s var(--ease);border-radius:999px;align-items:center;gap:7px;padding:0 16px;display:inline-flex}.button svg{width:17px;height:17px}.button:hover{background:var(--surface-hover);border-color:var(--line-strong)}.button:active{transform:scale(.97)}.button:disabled{opacity:.45;cursor:not-allowed;transform:none}.button:focus-visible,.icon-button:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.credits{padding:10px var(--gutter) calc(var(--safe-bottom) + 10px);color:var(--muted);flex:none;justify-content:space-between;align-items:center;gap:12px;font-size:12px;display:flex}.credits a{color:inherit;transition:color .16s var(--ease), border-color .16s var(--ease);text-decoration:none}.credits a:hover{color:var(--ink)}.credits a:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:2px}.credits__icon{display:inline-flex}.credits__icon svg{width:17px;height:17px}.credits__link{border-bottom:1px solid #0000}.credits__link:hover{border-bottom-color:var(--line-strong)}.drop{padding:calc(var(--safe-top) + var(--gutter)) calc(var(--safe-right) + var(--gutter)) calc(var(--safe-bottom) + var(--gutter)) calc(var(--safe-left) + var(--gutter));background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .16s var(--ease);z-index:20;place-items:center;font-size:17px;display:grid;position:fixed;inset:0}.drop span{border:1px dashed var(--line-strong);border-radius:16px;padding:20px 30px}body.is-dropping .drop{opacity:1}.render[hidden]{display:none}.render{padding:calc(var(--safe-top) + var(--gutter)) calc(var(--safe-right) + var(--gutter)) calc(var(--safe-bottom) + var(--gutter)) calc(var(--safe-left) + var(--gutter));background:var(--scrim);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:25;place-items:center;display:grid;position:fixed;inset:0}.render__panel{flex-direction:column;align-items:center;gap:14px;width:min(320px,100%);display:flex}.render__preview{place-items:center;max-width:100%;display:grid}.render__preview canvas{border-radius:var(--radius);width:auto;max-width:min(220px,60vw);height:auto;max-height:40dvh;box-shadow:0 10px 30px var(--shadow-lift);display:block}.render__label{color:var(--muted)}.render__bar{background:var(--track);border-radius:999px;width:100%;height:4px;overflow:hidden}.render__bar span{border-radius:inherit;background:var(--accent);transform-origin:0;width:100%;height:100%;display:block;transform:scaleX(0)}.render__actions{align-items:center;gap:8px;display:flex}.render:not(.is-done) .render__save{display:none}.render__save{background:var(--accent);color:var(--on-accent);border-color:#0000}.render__save:hover{background:var(--accent);opacity:.86;border-color:#0000}.render.is-done .render__bar{visibility:hidden}.lost[hidden]{display:none}.lost{padding:calc(var(--safe-top) + var(--gutter)) calc(var(--safe-right) + var(--gutter)) calc(var(--safe-bottom) + var(--gutter)) calc(var(--safe-left) + var(--gutter));background:var(--bg);text-align:center;z-index:40;align-content:center;place-items:center;gap:14px;display:grid;position:fixed;inset:0}.lost p{max-width:30ch;color:var(--muted)}.boot{background:var(--bg);z-index:30;transition:opacity .5s var(--ease);place-items:center;display:grid;position:fixed;inset:0}.boot__spinner{border:2px solid var(--track);border-top-color:var(--accent);border-radius:50%;width:22px;height:22px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(1turn)}}body.is-ready .boot{opacity:0;pointer-events:none}@media (max-width:700px){:root{--gutter:12px;--card-h:50px}.controls{gap:10px}.slider{width:min(300px,78vw)}.toolbar__option,.toolbar__save{padding:0 11px}}@media (max-width:400px){.toolbar__option span{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.toolbar__option{padding:0 12px}.toolbar__save,.button{padding:0 13px}}@media (max-height:520px) and (orientation:landscape){:root{--card-h:44px}.topbar{z-index:10;padding:calc(var(--safe-top) + 8px) 8px 0 0;position:absolute;top:0;right:0}.controls{gap:8px;padding-top:4px}.rail{padding:6px 10px}.credits{padding-block:4px calc(var(--safe-bottom) + 6px)}}@media (hover:none){.card:hover{opacity:.62}.card[aria-selected=true]:hover{opacity:1}.rail__add:hover{color:var(--muted);border-color:var(--line-strong);background:0 0}.button:hover,.icon-button:hover{background:var(--surface);border-color:var(--line)}.render__save:hover{background:var(--accent);opacity:1;border-color:#0000}.toolbar__save:hover{opacity:1}.toolbar__option:hover{color:var(--muted)}.toolbar__option[aria-checked=true]:hover{color:var(--ink)}.credits a:hover{color:var(--muted);border-bottom-color:#0000}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}