:root{color-scheme:dark;--bg:#080b12;--panel:#121722;--line:#293142;--text:#f7f8fb;--muted:#9ca6b8;--accent:#6ee7b7;--accent2:#34d399;--danger:#fb7185;font-family:Inter,"Noto Sans JP",system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -10%,#1e293b 0,transparent 40%),var(--bg);color:var(--text);min-height:100dvh}.app{width:min(980px,100%);margin:auto;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.eyebrow{color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.12em}h1{font-size:clamp(1.45rem,4vw,2rem);margin:.2rem 0 0}button,label{font:inherit}.ghost{border:1px solid var(--line);background:#151b27;color:#d7dce5;border-radius:12px;padding:10px 14px;cursor:pointer}.start-panel{min-height:65dvh;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,#171d29,#0f131c);display:grid;place-content:center;text-align:center;padding:28px;box-shadow:0 28px 80px #0008}.intro-icon{margin:auto;width:82px;height:82px;display:grid;place-items:center;border-radius:24px;background:#1e293b;color:var(--accent);font-size:2.8rem;border:1px solid #354158}.start-panel h2{font-size:1.45rem;margin:20px 0 7px}.start-panel p,.help,.status,.progress-box p{color:var(--muted);line-height:1.6}.start-actions{display:grid;gap:12px;margin-top:25px}.primary,.secondary,.export{display:flex;justify-content:center;align-items:center;min-height:54px;border-radius:15px;font-weight:800;cursor:pointer}.primary,.export{border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#052e24;box-shadow:0 10px 30px #34d3992b}.secondary{border:1px solid #3b465c;background:#1c2432;color:var(--text)}input[type=file]{display:none}.hidden{display:none!important}.editor{display:grid;gap:14px}.drag-guide{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border:2px solid #fbbf24;border-radius:14px;background:#3b2f0c;color:#fff7d6;text-align:center}.drag-guide strong{white-space:nowrap;color:#fbbf24}.drag-guide span{font-size:.9rem}.stage-wrap{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:#030406;min-height:260px;display:grid;place-items:center;touch-action:none}canvas{display:block;max-width:100%;max-height:62dvh;width:auto;height:auto;touch-action:none}.hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:#080b12dc;border:1px solid #374151;border-radius:999px;padding:8px 13px;font-size:.84rem;white-space:nowrap;pointer-events:none}.video-controls{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:10px}.round{width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:#052e24}.video-controls input{width:100%}#timeLabel{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}.toolbar{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px}.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool{border:1px solid #354057;background:#1a2130;color:#e5e7eb;border-radius:11px;min-height:44px}.tool.active{border-color:var(--accent);color:var(--accent)}.tool.danger{color:#fda4af}.strength{display:grid;grid-template-columns:auto 1fr 32px;align-items:center;gap:12px;margin-top:17px}.strength span{font-size:.9rem;font-weight:700}.strength input{accent-color:var(--accent);width:100%}.strength output{color:var(--accent);font-variant-numeric:tabular-nums}.help{font-size:.82rem;margin:10px 0 0}.export{width:100%;font-size:1rem}.progress-box{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:14px}.progress-head{display:flex;justify-content:space-between;font-weight:700}.progress-box progress{width:100%;height:10px;margin-top:10px;accent-color:var(--accent)}.progress-box p{font-size:.8rem;margin:6px 0 0}.status{text-align:center;min-height:1.4em;margin:0;font-size:.9rem}@media(max-width:480px){.drag-guide{align-items:flex-start;flex-direction:column;gap:2px;text-align:left}}@media(min-width:720px){.start-actions{grid-template-columns:1fr 1fr}.stage-wrap{min-height:440px}.toolbar{padding:18px}.app{padding-top:26px}}

.manual-panel{padding:14px;border:1px solid #d1d5db;border-radius:14px}.manual-panel summary{font-weight:700;margin-bottom:12px}.manual-panel label{display:block;margin:10px 0}.manual-panel select{display:block;width:100%;font:inherit;padding:10px;border:1px solid #94a3b8;border-radius:8px;min-height:44px}.manual-panel .help{line-height:1.7}#trackWarnings{color:#b45309}select{max-width:100%}

/* Simple three-step workflow */
.step-heading small,.start-panel h2 small{display:block;color:var(--accent);font-size:.75rem;letter-spacing:.12em;margin-bottom:6px}.step-heading h2{margin:0;font-size:1.3rem}.step-heading p{color:var(--muted);margin:6px 0;font-size:.9rem}.advanced{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--panel)}summary{cursor:pointer;min-height:32px;align-content:center;font-weight:700}.advanced select{width:100%;padding:12px;margin:8px 0}.toolbar{display:grid;gap:14px}.strength{grid-template-columns:1fr;margin-top:0}.strength output{font-size:.85rem}.review-check{display:flex;gap:10px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:12px;line-height:1.6}.review-check input{width:22px;height:22px;flex-shrink:0;accent-color:var(--accent)}button:disabled{opacity:.45;cursor:wait}#autoBtn{font-size:1.15rem;min-height:62px}#exportBtn{position:sticky;bottom:12px;z-index:5;min-height:60px;font-size:1.15rem}.start-panel{min-height:55dvh;padding:24px 18px}.start-actions{margin-top:14px}.stage-wrap{min-height:180px}canvas{max-height:52dvh}.manual-panel{border-color:var(--line)}

canvas{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}.stage-wrap:has(canvas.holding){outline:2px solid #fbbf24;outline-offset:2px}.stage-wrap:has(canvas.drawing){outline:3px solid var(--accent);outline-offset:2px}