:root{--background:#f7f8fc;--surface:#fff;--text:#25263a;--muted:#85889e;--primary:#7774e8;--primary-dark:#625fd0;--border:#ececf5}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--background);color:var(--text);font-family:Arial,Noto Sans JP,sans-serif}button,input{font:inherit}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #aaa8ff}button:disabled{cursor:not-allowed;opacity:.55}.app{width:min(100% - 40px,1100px);margin:0 auto;padding:30px 0 40px}.header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:30px;display:flex}.brand{align-items:center;gap:12px;font-size:24px;font-weight:800;display:flex}.brand-icon{background:var(--primary);color:#fff;border-radius:14px;place-items:center;width:44px;height:44px;font-size:29px;display:grid}.header-label{color:var(--muted);letter-spacing:1.7px;font-size:12px;font-weight:700}.timer-card{border:1px solid var(--border);background:var(--surface);text-align:center;border-radius:36px;flex-direction:column;justify-content:center;align-items:center;min-height:820px;padding:75px 40px;display:flex;box-shadow:0 20px 60px #32336412}.mode-switch{background:#f3f3fa;border-radius:16px;gap:8px;padding:7px;display:inline-flex}.mode{min-width:150px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:12px;padding:17px 30px;font-size:19px;font-weight:600}.mode.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px #7774e840}.timer-caption{color:var(--muted);margin:55px 0 18px;font-size:22px}.timer{font-variant-numeric:tabular-nums;letter-spacing:-9px;font-size:clamp(120px,21vw,210px);font-weight:700;line-height:1.2}.progress-track{background:#eeeef8;border-radius:99px;width:min(100%,700px);height:15px;margin:40px auto 0;overflow:hidden}.progress-bar{border-radius:inherit;background:linear-gradient(90deg,#8b88f3,#b5a4fa);height:100%;transition:width .25s linear}.timer-description{color:var(--muted);margin:32px 0 42px;font-size:18px}.controls{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.start-button,.reset-button,.bgm-button{cursor:pointer;border-radius:17px;justify-content:center;align-items:center;gap:10px;min-height:68px;padding:0 36px;font-size:18px;font-weight:700;transition:transform .2s,background .2s;display:inline-flex}.start-button{background:var(--primary);color:#fff;border:0;min-width:230px;box-shadow:0 5px 15px #7774e840}.start-button:hover,.bgm-button:hover{background:var(--primary-dark);transform:translateY(-1px)}.reset-button{border:1px solid var(--border);color:#666980;background:#fff}.reset-button:hover,.settings-reset-button:hover{background:#f8f8fd}.settings-section,.bgm-section{border:1px solid var(--border);background:var(--surface);border-radius:25px;margin-top:28px;padding:30px}.section-eyebrow{color:var(--primary);letter-spacing:1.7px;margin:0 0 9px;font-size:11px;font-weight:800}.settings-section h2,.bgm-section h2{margin:0;font-size:22px}.settings-description,.bgm-description{color:var(--muted);margin:12px 0 24px;font-size:14px;line-height:1.8}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.setting-item{flex-direction:column;gap:10px;display:flex}.setting-item label{font-size:14px;font-weight:700}.setting-item input{border:1px solid var(--border);width:100%;min-height:52px;color:var(--text);background:#fafaff;border-radius:12px;padding:12px;font-size:18px}.setting-item p{color:var(--muted);margin:0;font-size:12px}.settings-actions{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.settings-save-button,.settings-reset-button{border:1px solid var(--border);cursor:pointer;border-radius:12px;min-height:48px;padding:12px 18px;font-weight:700}.settings-save-button{border-color:var(--primary);background:var(--primary);color:#fff}.settings-save-button:hover{background:var(--primary-dark)}.settings-reset-button{color:var(--text);background:#fff}.settings-message{color:var(--primary-dark);margin:16px 0 0;font-size:14px;line-height:1.7}.bgm-controls{flex-direction:column;align-items:flex-start;gap:16px;display:flex}.bgm-button{background:var(--primary);color:#fff;border:0;min-height:54px}.volume-label{color:var(--muted);font-size:14px}.volume-slider{width:100%;max-width:420px;accent-color:var(--primary);cursor:pointer}.bgm-status{color:var(--muted);align-items:center;gap:9px;margin:0;font-size:13px;display:flex}.status-dot{background:#b6b8c8;border-radius:50%;flex-shrink:0;width:9px;height:9px}.status-dot.on{background:#45bd91}.youtube-player{aspect-ratio:16/9;background:#171725;border-radius:16px;width:100%;max-width:800px;margin:28px auto 0;overflow:hidden}.youtube-player iframe{border:0;width:100%;height:100%;display:block}.footer{color:var(--muted);text-align:center;padding:28px 0 0;font-size:13px}@media (max-width:600px){.app{width:min(100% - 20px,1100px);padding-top:18px}.header{margin-bottom:20px}.brand{font-size:19px}.brand-icon{width:38px;height:38px;font-size:25px}.header-label{letter-spacing:1px;font-size:9px}.timer-card{border-radius:26px;min-height:650px;padding:45px 14px}.mode{min-width:115px;padding:14px 20px;font-size:16px}.timer-caption{margin-top:45px;font-size:18px}.timer{letter-spacing:-4px;font-size:clamp(82px,18vw,125px)}.progress-track{height:10px;margin-top:30px}.timer-description{margin:26px 0 32px;font-size:14px}.controls{gap:12px;width:100%}.start-button,.reset-button{width:100%;min-height:58px;font-size:16px}.settings-section,.bgm-section{padding:22px}.settings-grid{grid-template-columns:1fr}.settings-actions{flex-direction:column}.settings-save-button,.settings-reset-button{width:100%}.youtube-player{border-radius:12px}}