:root{--bg: #fafaf6;--fg: #1a1a1a;--muted-1: #999;--muted-2: #b0b0b0;--line: #d0d0d0;--hint: #f5f5f0;--accent-warning: #aa3333;--font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Inter", sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box;margin:0;padding:0}html{height:100vh;height:100dvh}body{background:var(--bg);color:var(--fg);font-family:var(--font-sans);display:flex;flex-direction:column;height:100%;overflow:hidden}a{color:inherit;text-decoration:none}button{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:1px solid var(--fg);outline-offset:2px}@keyframes wordmarkPulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}.wordmark.loading{animation:wordmarkPulse 1.5s ease-in-out infinite}.topbar{display:flex;justify-content:space-between;align-items:baseline;padding:28px}.wordmark{font-size:12px;color:var(--fg);font-weight:600;text-transform:lowercase}.modes{display:flex;gap:22px}.mode{font-size:12px;color:var(--muted-1);text-decoration:underline 1px transparent;text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}.mode:hover{color:var(--fg)}.mode.active{color:var(--fg);text-decoration-color:var(--fg)}.stage{flex:1;display:flex;align-items:stretch;justify-content:stretch;padding:0 28px;position:relative;min-height:0}.meta{display:flex;justify-content:space-between;align-items:center;padding:28px;font-size:12px;color:var(--muted-2);letter-spacing:.04em;gap:24px}.meta-left{flex:0 1 auto;color:var(--muted-2)}.splash{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px;z-index:1000;cursor:none;transition:opacity .4s ease-out}@media (pointer: coarse){.splash{cursor:pointer}}#splash-cursor{position:fixed;pointer-events:none;z-index:1001;image-rendering:pixelated;transform:translate(-50%,-50%);transition:opacity .15s ease-out;opacity:0}.splash.fading{opacity:0;pointer-events:none}.splash-title{font-size:36px;font-weight:400;color:var(--fg);letter-spacing:.02em;line-height:1;text-transform:lowercase;margin:0}.splash-body{font-size:12px;line-height:1.5;color:var(--fg);max-width:760px;text-align:center;margin:0}.splash-a11y{color:var(--accent-warning)}.splash-hint{font-size:12px;line-height:1.5;color:var(--fg);font-weight:500;margin:0}.splash-hint .hint-label{font-weight:400}.meta-center{flex:1 1 auto;display:flex;justify-content:center;align-items:center;gap:10px}.meta-right{flex:0 0 auto;color:var(--fg)}.meta-right.hidden{display:none}.dropzone{flex:1;border:1px dashed var(--fg);border-radius:24px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;cursor:pointer;transition:background-color .15s}.dropzone:hover,.dropzone.over{background:var(--hint)}.dropzone .hint{font-size:12px;color:var(--muted-1);margin-bottom:4px}.dropzone .sub{font-size:12px;color:var(--muted-2)}.dropzone canvas{display:block;image-rendering:pixelated;width:100%;height:100%}.canvas-zone{flex:1;display:flex;align-items:center;justify-content:center}.canvas-zone.replaceable{cursor:pointer}.canvas-zone.replaceable.over canvas{opacity:.7}.canvas-zone canvas{display:block;image-rendering:pixelated;background:var(--bg);transition:opacity .15s}.snap-control{display:flex;align-items:center;gap:10px;color:var(--muted-1)}.snap-control input[type=range]{-webkit-appearance:none;appearance:none;width:110px;height:1px;background:var(--line);outline:none;cursor:pointer;padding:0;border:none}.snap-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:9px;height:9px;border-radius:50%;background:var(--fg);border:none;cursor:pointer}.snap-control input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:var(--fg);border:none;cursor:pointer}.snap-control .val{min-width:28px;text-align:left;font-variant-numeric:tabular-nums}.method-toggle{display:flex;gap:6px;align-items:center;color:var(--muted-1)}.method-toggle button{color:var(--muted-1);border-bottom:1px solid transparent;padding-bottom:1px}.method-toggle button.active{color:var(--fg);border-bottom-color:var(--fg)}.save-link{cursor:pointer;border-bottom:1px solid transparent;transition:border-color .15s}.save-link:hover{border-bottom-color:var(--fg)}.save-link.disabled{color:var(--muted-2);cursor:not-allowed}.inline-error{font-size:12px;color:var(--muted-1);text-align:center;padding:24px}.how{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto}.how-inner{max-width:60ch;display:flex;flex-direction:column;gap:14px;font-size:13px;line-height:1.6;color:var(--fg)}.how-inner em{font-style:normal;font-weight:600}.how-inner a{text-decoration:underline;text-decoration-color:var(--muted-2);text-underline-offset:3px;transition:text-decoration-color .15s}.how-inner a:hover{text-decoration-color:var(--fg)}.save-link.saving{color:var(--fg);cursor:default}.save-link.saving:hover{border-bottom-color:transparent}.save-link.save-error{color:var(--accent-warning);cursor:default}.save-link.save-error:hover{border-bottom-color:transparent}.save-link.quota-blocked{cursor:not-allowed}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;align-content:start;flex:1}.gallery-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted-1);font-size:12px}.tile{display:flex;flex-direction:column;background:transparent}.tile-canvas{aspect-ratio:16/9;background:var(--bg);cursor:pointer}.tile-canvas canvas{display:block;image-rendering:pixelated;width:100%;height:100%}.tile-caption{display:flex;justify-content:space-between;align-items:center;padding:6px 2px 0;font-size:12px;color:var(--muted-2);letter-spacing:.04em}.tile-meta{color:var(--muted-2)}.tile-delete{font-size:12px;color:var(--muted-2);letter-spacing:.04em;background:none;border:none;padding:0;cursor:pointer;font-family:inherit}.tile-delete:hover{color:var(--fg)}.tile-delete.confirming{color:var(--accent-warning)}.tile.fading{opacity:0;transition:opacity .3s}.fullscreen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:100}.fullscreen canvas{display:block;image-rendering:pixelated;width:100%;height:100%}.fullscreen .fs-chrome{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:baseline;padding:24px 28px;pointer-events:none;opacity:0;transition:opacity .25s}.fullscreen .fs-chrome.visible{opacity:1}.fullscreen .fs-chrome>*{pointer-events:auto}.fullscreen .fs-back,.fullscreen .fs-export,.fullscreen .fs-meta{padding:6px 12px;background:#fafaf6d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.fullscreen .fs-back,.fullscreen .fs-export,.fullscreen .fs-meta{font-size:12px;color:var(--fg)}@media (min-width: 640px) and (max-width: 1023px){.topbar{padding:24px 22px}.modes{gap:18px}.stage{padding:0 22px}.meta{padding:24px 22px}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.snap-control input[type=range]{width:90px}}@media (max-width: 639px){.topbar{padding:20px 16px}.modes{gap:12px}.mode{padding:4px 0 1px}.stage{padding:0 16px}.meta{padding:20px 16px;gap:12px}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.snap-control input[type=range]{width:70px}.snap-control{gap:6px}.splash-body{max-width:100%}}@media (pointer: coarse){.mode{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}.save-link{padding:12px 0}.snap-control input[type=range]::-webkit-slider-thumb{width:16px;height:16px}.snap-control input[type=range]::-moz-range-thumb{width:16px;height:16px}.tile-delete{padding:8px 4px}}@media (prefers-contrast: more){:root{--muted-1: #444;--muted-2: #555;--line: #888}}@media (prefers-reduced-motion: reduce){.wordmark.loading{animation:none;opacity:.7}.save-link,.tile.fading{transition:none}}