:root{--color-bg: #f6f7f9;--color-surface: #ffffff;--color-text: #1c1e21;--color-text-dim: #5f6672;--color-border: #d3d8de;--color-accent: #2563eb;--color-accent-soft: #dbeafe;--radius: 10px}@media(prefers-color-scheme:dark){:root{--color-bg: #14171a;--color-surface: #1e2226;--color-text: #e8eaed;--color-text-dim: #9aa3ad;--color-border: #3a4046;--color-accent: #60a5fa;--color-accent-soft: #1e3a5f}}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.6}#app{max-width:720px;margin:0 auto;padding:0 16px 32px}.app-header{display:flex;align-items:center;gap:8px;padding:12px 0}.app-header h1{font-size:1.15rem;margin:0;flex:1}.repo-link{flex:none;color:var(--color-accent);font-size:.85rem;text-decoration:none;white-space:nowrap}.repo-link:hover,.repo-link:focus-visible{text-decoration:underline;text-underline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius);background:var(--color-surface);padding:40px 16px;text-align:center;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.drop-zone:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.drop-zone.is-dragover{border-color:var(--color-accent);background:var(--color-accent-soft)}.drop-zone-soft{padding:20px 16px;opacity:.6;cursor:default}.drop-zone-hint{margin:0;color:var(--color-text-dim)}.tiles-hint{margin:8px 0 0;font-size:.85rem;color:var(--color-text-dim);text-align:center}.tile-list{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}.tile-item{position:relative;aspect-ratio:1;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.tile-thumb{display:block;width:100%;height:100%;object-fit:cover}.tile-remove{position:absolute;top:2px;right:2px;width:20px;height:20px;padding:0;border:none;border-radius:50%;background:#0000008c;color:#fff;font-size:.8rem;line-height:20px;cursor:pointer}.tile-remove:hover,.tile-remove:focus-visible{background:#000c}.tile-memory{font-size:.8rem;color:var(--color-text-dim)}.tile-list-wrap{margin-top:8px}.tile-loading{margin:0 0 8px;font-size:.85rem;color:var(--color-text-dim);font-variant-numeric:tabular-nums}.tile-show-all{display:block;width:100%;margin-top:8px;font-size:.85rem;color:var(--color-text-dim)}.privacy-notice{font-size:.85rem;color:var(--color-text-dim);text-align:center}.error-notice{font-size:.85rem;color:#dc2626;text-align:center;margin:12px 0 0}#tile-section h3{font-size:.95rem;margin:20px 0 8px}.edit-toolbar{display:flex;align-items:center;gap:8px;padding:12px 0}.edit-title{font-size:1.05rem;margin:0;flex:1;text-align:center}.button{font:inherit;padding:8px 14px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text);cursor:pointer}.button:disabled{opacity:.45;cursor:not-allowed}.button-primary:not(:disabled){background:var(--color-accent);border-color:var(--color-accent);color:#fff}.button-small{font-size:.8rem;padding:4px 10px}.save-format{font:inherit;padding:8px 6px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);color:var(--color-text)}#preview-frame{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);padding:8px}#preview-canvas{display:block;width:100%;height:auto;border-radius:calc(var(--radius) - 4px);background:var(--color-bg)}.control-row{display:flex;align-items:center;gap:12px;margin-top:14px}.control-row label{flex-shrink:0}.control-row input[type=range]{flex:1}.control-row output{min-width:4.5em;text-align:right;font-variant-numeric:tabular-nums;color:var(--color-text-dim)}.control-note{margin:6px 0 0;font-size:.8rem;color:var(--color-text-dim)}#progress-section{margin-top:16px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);padding:10px 12px}.progress-header{display:flex;align-items:center;justify-content:space-between}#progress-title{font-size:.9rem;color:var(--color-text-dim)}#progress-body{display:flex;flex-direction:column;gap:6px;margin-top:8px}#progress-body[hidden]{display:none}#progress-bar{height:10px;border-radius:999px;background:var(--color-bg);border:1px solid var(--color-border);overflow:hidden}#progress-bar-fill{height:100%;width:0%;background:var(--color-accent);transition:width .2s ease}#progress-bar.is-indeterminate #progress-bar-fill{width:35%;animation:progress-indeterminate 1.2s ease-in-out infinite}@keyframes progress-indeterminate{0%{transform:translate(-100%)}50%{transform:translate(100%)}to{transform:translate(300%)}}@media(prefers-reduced-motion:reduce){#progress-bar.is-indeterminate #progress-bar-fill{width:100%;animation:none;opacity:.6}}.metrics-copy-status{flex:none;align-self:center;color:#9be59b;font-size:10px;white-space:nowrap}.metrics-copy{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;padding:0;border:0;border-radius:4px;background:transparent;color:#e6e6e6;cursor:pointer;pointer-events:auto}.metrics-copy:hover,.metrics-copy:focus-visible{background:#ffffff29}.metrics-copy:disabled{opacity:.4;cursor:default}#progress-label,#phase-label{font-size:.85rem;color:var(--color-text-dim);font-variant-numeric:tabular-nums}#tile-summary{color:var(--color-text-dim);font-size:.9rem}