:root{font-family:"Hiragino Maru Gothic ProN","Yu Gothic",system-ui,sans-serif;color:#44314f;background:#fbf7ef;font-synthesis:none;--accent:#927047;--soft:#f1e4ce;--shadow:0 12px 35px #57402312}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 5%,#f6e6d680,transparent 50%),#fbf7ef}button,input{font:inherit}button{border:1.5px solid #e3d9e8;border-radius:14px;background:#fffdf9;color:inherit;min-height:44px;padding:10px 17px;cursor:pointer;touch-action:manipulation}button:hover{background:var(--soft)}button:focus-visible,input:focus-visible{outline:3px solid #9070b3;outline-offset:3px}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true]{background:var(--soft);border-color:var(--accent)}#app{max-width:1100px;margin:auto;padding:22px 26px 35px}header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:23px}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:26px;font-weight:750;letter-spacing:.03em}.brand small{font-size:13px;font-weight:500;color:#8b7b93}.brand-icon{display:grid;place-items:center;width:43px;height:43px;background:#6c4b82;border-radius:15px;color:#fff6d5;font-size:34px;box-shadow:0 5px 12px #654d7e22}.utilities{display:flex;gap:8px}.utilities button{font-size:13px}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:650px;margin:0 auto 10px}.tabs button{border-color:transparent;background:#eee7df90;color:#938394;min-height:58px;font-weight:650}.tabs button[aria-selected=true]{background:#fffdf9;border-color:var(--accent);color:var(--accent);box-shadow:0 5px 15px #654d7e0e}.tabs span{margin-right:8px}.clock-row{display:flex;align-items:center;justify-content:center;gap:25px;margin:12px 0 8px}#theme-label{font-size:11px;letter-spacing:.16em;margin:0;text-align:center;color:var(--accent);font-weight:700}#clock{font-size:clamp(68px,10vw,112px);line-height:1.15;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.065em;color:#553975}#clock.overtime{color:var(--accent)}#status{padding:9px 16px;border-radius:30px;background:var(--soft);font-size:13px;white-space:nowrap}.scene-wrap{position:relative;overflow:hidden;border-radius:25px;border:1px solid #e5dacd;box-shadow:var(--shadow);background:#f4e5c9}canvas{display:block;width:100%;height:auto;aspect-ratio:12/7}.scene-caption{position:absolute;bottom:18px;left:20px;max-width:80%;background:#fffaf4ed;border:1px solid #fff8e5;border-radius:16px;padding:11px 17px;backdrop-filter:blur(8px);pointer-events:none;box-shadow:0 6px 15px #34261c12}#chapter-label{display:block;font-weight:650;font-size:16px;color:var(--accent)}#scene-copy{display:block;font-size:12px;margin-top:4px;line-height:1.6}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#fbf7efeb;font-size:15px}#loading[hidden]{display:none}.progress-row{display:flex;justify-content:space-between;font-size:12px;color:#897a8d;margin:14px 8px 5px}progress{appearance:none;width:100%;height:9px;border:none;border-radius:12px;overflow:hidden;display:block;background:#e9e0e8}progress::-webkit-progress-bar{background:#e9e0e8;border-radius:12px}progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),#e8b868);border-radius:12px}progress::-moz-progress-bar{background:var(--accent)}.bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:19px}#settings{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.time-input{display:flex;align-items:center;gap:5px}.time-input label{display:flex;flex-direction:column;gap:3px;font-size:10px;color:#897a8d;text-align:center}input[type=number]{width:65px;padding:8px 5px;background:#fffdf9;border:1.5px solid #dfd4df;border-radius:11px;text-align:center;color:#553975;font-size:23px;font-variant-numeric:tabular-nums;appearance:textfield}input::-webkit-inner-spin-button{appearance:none}.steps{display:flex;gap:6px}.steps>div{display:flex;flex-direction:column;gap:4px}.steps button{font-size:12px;min-height:31px;padding:5px 12px;touch-action:none;user-select:none;-webkit-user-select:none}.presets{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.presets button{font-size:11px;min-height:31px;padding:5px 12px}.actions{display:flex;gap:9px;flex:1;max-width:430px}.actions button{flex:1;min-height:59px;font-size:16px}.primary{background:#68458a;color:white;border-color:#68458a;box-shadow:0 8px 20px #68458a22}.primary:hover{background:#573778}footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:25px;font-size:11px;color:#9b8c9d}footer button{font-size:11px;background:transparent;border:none;color:#897a8d}#preview-panel{background:#fffdf9;border:1px solid #e4d9e6;border-radius:18px;padding:16px;margin-top:12px}#preview-panel[hidden]{display:none}.preview-heading{display:flex;justify-content:space-between;align-items:center;font-size:14px}#preview-buttons{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}#preview-buttons button{font-size:11px;min-height:34px;padding:6px 10px}.scrub-label{display:flex;align-items:center;gap:12px;font-size:12px;flex-wrap:wrap}.scrub-label input{flex:1;min-width:180px;accent-color:#68458a}#preview-panel p{font-size:10px;color:#998b9b}#notice{min-height:18px;font-size:12px;text-align:center;color:#8f5e55}body[data-mode=paint]{--accent:#b36647;--soft:#f4e2d5}body[data-mode=pumpkin]{--accent:#794b93;--soft:#eadcf0;background:radial-gradient(ellipse at 85% 0,#e7dcee,transparent 50%),#fbf7ef}@media(max-width:760px){#app{padding:15px 16px 25px}header{margin-bottom:17px}.brand{font-size:23px}.utilities button{padding:8px 9px;font-size:11px}.tabs button{padding:10px 5px;min-height:49px;font-size:13px}.tabs span{margin-right:3px}.clock-row{gap:17px}.bottom{flex-direction:column;gap:15px}.actions{width:100%;max-width:none}#settings{width:100%;justify-content:center}.scene-caption{bottom:12px;left:12px;padding:8px 12px}#chapter-label{font-size:13px}#scene-copy{font-size:10px}.scene-wrap{border-radius:19px}footer span{max-width:64%}}@media(max-width:430px){.brand small{display:block}.utilities{gap:4px}.utilities button{font-size:10px;padding:7px}.tabs{gap:5px}#theme-label{font-size:9px}.scene-caption{max-width:90%;bottom:8px}.time-input input{width:55px}.steps button{padding:5px 9px}#settings{gap:10px}.presets button{padding:5px 9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}