:root{--bg: #0f1923;--surface: #162030;--surface-raised: #1e2d3d;--border: #243447;--text: #f0ece4;--text-dim: #8a96a3;--text-faint: #4a5568;--accent: #c9a84c;--radius: 6px}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{max-width:480px;margin:0 auto;padding:28px 18px 60px}.app-header{margin-bottom:24px}.app-header .eyebrow{font-family:JetBrains Mono,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.app-header h1{font-family:Space Grotesk,sans-serif;font-size:26px;font-weight:700;margin:6px 0 8px;letter-spacing:-.01em}.app-header p{color:var(--text-dim);font-size:14px;margin:0;line-height:1.5}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:16px}.card-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}.card-head .num{font-family:JetBrains Mono,monospace;font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:1px 6px;line-height:1.4}.card-head h2{font-family:Space Grotesk,sans-serif;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0;color:var(--text-dim)}.file-btn{display:block;text-align:center;padding:14px;border:1px dashed var(--border);border-radius:var(--radius);color:var(--accent);font-family:JetBrains Mono,monospace;font-size:13px;letter-spacing:.04em;cursor:pointer;transition:border-color .15s ease}.file-btn:hover{border-color:var(--accent)}.preview{width:100%;border-radius:var(--radius);margin-top:12px;display:block}button{font-family:Space Grotesk,sans-serif;font-weight:600;font-size:14px;border-radius:4px;border:1px solid var(--border);background:var(--surface-raised);color:var(--text);padding:12px 16px;cursor:pointer;width:100%;letter-spacing:.02em;transition:background .15s ease,border-color .15s ease}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#0f1923}button.primary:hover:not(:disabled){background:#d4b668}.card-subtitle{margin:-8px 0 14px;font-size:13px;color:var(--text-dim);line-height:1.5}.compositor{position:relative;width:100%;aspect-ratio:854 / 902;overflow:hidden;border-radius:var(--radius);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;background:#000}.compositor:active{cursor:grabbing}.photo-layer{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:center;pointer-events:none;z-index:1}.board-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:fill;pointer-events:none;z-index:2;opacity:.7;filter:grayscale(100%)}.compositor-hint{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background:#0009;color:#fff;font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.06em;padding:5px 12px;border-radius:20px;pointer-events:none;white-space:nowrap;animation:hint-fade 2.5s ease forwards}@keyframes hint-fade{0%{opacity:1}70%{opacity:1}to{opacity:0}}.reset-btn{margin-top:10px;font-size:12px;padding:8px;color:var(--text-dim);background:transparent;border-color:var(--border)}.reset-btn:hover:not(:disabled){color:var(--text);border-color:var(--text-dim)}.result-img{width:100%;border-radius:var(--radius);display:block;margin-bottom:12px;border:1px solid var(--accent)}@media(prefers-reduced-motion:reduce){*{transition:none!important}}