:root{--ink:#2c113e;--violet:#9700fb;--yellow:#fff000;--muted:#777080;--lilac:#eae2f1;--line:#ded8e1}*{box-sizing:border-box}html{font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:var(--ink);background:#fbf9fe}body{margin:0;background:linear-gradient(145deg,#fcf9ff,#f9f5fc)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ad8ee3;outline-offset:2px}[hidden]{display:none!important}.shell{max-width:1100px;margin:auto;padding:32px 20px}.header{display:flex;align-items:center;justify-content:space-between}.logo{font-size:32px;font-weight:900;letter-spacing:-2px}.ring{font-size:34px}.micro{font-size:11px;letter-spacing:.25em;color:#746c7b}.hero{text-align:center;padding:45px 0 23px}.hero .micro{font-size:13px}.hero h1{font-size:clamp(26px,5vw,38px);letter-spacing:-.06em;margin:21px 0 4px}.tabs{display:grid;grid-template-columns:1fr 1fr;padding:8px;background:#eae1f1;border:1px solid #e2d7e9;border-radius:24px;gap:6px;margin-bottom:24px}.tab{height:66px;background:none;border:0;border-radius:17px;color:#746b7f;font-size:18px;font-weight:800}.tab.active{color:white;background:var(--violet);box-shadow:0 5px 9px #37004b30}.interval-stage,.stopwatch-stage{border-radius:32px;overflow:hidden}.interval-stage{background:var(--yellow);padding:28px;color:var(--ink)}.stage-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.stage-top strong{font-size:21px;font-weight:850}.border-btn{background:transparent;border:1.5px solid currentColor;padding:13px 15px;border-radius:12px;font-weight:700}.interval-center{text-align:center;display:flex;flex-direction:column;align-items:center;min-height:310px;justify-content:space-evenly}.interval-center h2{font-size:32px;margin:18px 0 0;white-space:nowrap}.interval-clock{font-size:clamp(80px,17vw,168px);font-weight:900;letter-spacing:-.075em;font-variant-numeric:tabular-nums;line-height:1.05;white-space:nowrap}.interval-center p{color:#67585a;font-size:14px;margin:0}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;gap:7px}.metrics div{display:flex;flex-direction:column;gap:12px}.metrics small{color:#655c36;font-size:13px}.metrics strong{font-size:clamp(24px,5vw,36px);font-weight:900;white-space:nowrap}.next-strip{margin:24px 0 18px;padding:20px;border:0;border-radius:15px;background:#eddb00;display:flex;width:100%;justify-content:space-between;text-align:left;color:var(--ink);gap:10px}.next-strip b{font-size:16px}.interval-buttons{display:grid;grid-template-columns:67px minmax(0,1fr) 67px;gap:12px}.square{border:1.5px solid var(--ink);border-radius:13px;background:transparent;font-size:26px;min-height:78px}.primary{border:0;border-radius:14px;background:var(--violet);color:white;font-size:clamp(22px,4vw,30px);font-weight:900;min-height:78px;box-shadow:0 4px 0 #7800c7}.utilities{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:20px;margin-top:25px}.utilities button{border:0;background:none;color:var(--ink);padding:9px 0}.utilities label{display:flex;align-items:center;gap:6px}.utilities input{accent-color:var(--violet);width:20px;height:20px}.foot-note{text-align:center;color:#75642c;font-size:13px;margin:21px 0 4px}.panel{background:white;border:1px solid var(--line);border-radius:28px;margin-top:26px;padding:28px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel h2{font-size:22px;margin:0}.quiet-btn{background:white;border:1px solid #ded8e2;padding:12px;border-radius:12px;color:#8d03be}.quiet-btn:disabled{opacity:.35}.preset-list{display:grid;gap:12px;margin-top:22px}.preset{display:block;text-align:left;width:100%;background:white;border:1px solid #dfd9e2;border-radius:17px;padding:19px 20px;color:var(--ink)}.preset.selected{background:#f0e5fa;border-color:#9865bc}.preset small{font-size:10px;letter-spacing:.16em;color:#9a00c6}.preset h3{font-size:19px;margin:10px 0 11px}.preset p{color:#75707c;font-size:13px;line-height:1.5;margin:0}.storage-note{font-size:13px;color:#7b7681;margin-top:25px;line-height:1.8}.stopwatch-stage{background:var(--violet);color:white;padding:28px}.stop-label{letter-spacing:.2em;font-size:15px}.light-btn{background:transparent;color:inherit;border:1px solid #ffffff7b;border-radius:12px;padding:12px 14px}.stopwatch-center{text-align:center;padding:45px 0 56px}.stopwatch-center p{font-size:17px;margin:0 0 35px}.stopwatch-clock{font-size:clamp(65px,14vw,150px);font-weight:900;letter-spacing:-.07em;line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums}.stop-primary{background:var(--yellow);color:var(--ink);width:100%;border:none;border-radius:25px;box-shadow:0 10px 0 #c4b900;font-size:clamp(32px,7vw,56px);font-weight:900;min-height:155px}.stop-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:36px;font-size:14px}.record-stats{display:flex;gap:35px;flex-wrap:wrap;margin-top:46px}.record-stats div{display:flex;flex-direction:column;gap:12px}.record-stats span{color:#78717e}.record-stats strong{font-size:26px;color:var(--violet)}.record-list{padding-left:25px;max-height:300px;overflow:auto}.record-list li{padding:8px;border-bottom:1px solid #eee}.record-list li span{float:right}footer{text-align:center;color:#7a7480;padding:55px 8px 15px}footer p{font-size:13px}.modal-backdrop{position:fixed;inset:0;background:#21192e73;z-index:10;display:flex;justify-content:center;align-items:center;padding:20px}.modal{background:#fffefa;color:var(--ink);border-radius:25px;padding:28px;width:min(650px,100%);max-height:min(92dvh,850px);overflow-y:auto}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.modal-head h2{font-size:25px;margin:0}.link-btn{border:0;background:none;color:#9200c5}.field{margin-bottom:20px}.field>label,.field>strong{display:block;font-size:16px;font-weight:700;margin-bottom:8px}.field input:not([type=checkbox]),.field select{width:100%;padding:12px;border:1px solid #ded8e2;border-radius:9px;background:white;min-width:0}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:65px}.settings-row input[type=range]{max-width:45%;accent-color:var(--violet)}.settings-row input[type=checkbox]{appearance:none;background:#ded8e7;width:50px;height:28px;border-radius:18px;position:relative;flex-shrink:0}.settings-row input[type=checkbox]:checked{background:var(--violet)}.settings-row input[type=checkbox]:after{content:'';background:white;width:22px;height:22px;position:absolute;top:3px;left:3px;border-radius:50%;transition:transform .2s}.settings-row input[type=checkbox]:checked:after{transform:translateX(22px)}.helper{color:#77717f;line-height:1.7;font-size:13px;margin:16px 0 26px}.modal-action{background:var(--violet);border:0;color:white;font-size:17px;font-weight:800;border-radius:12px;padding:18px;width:100%;margin:14px 0}.modal-action.secondary{background:#eee2f7;color:var(--ink)}.modal-action.danger{background:#fff0f0;color:#9a1c1c}.modal-footer{display:flex;gap:10px}.modal-footer button{flex:1}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);border-radius:14px;background:var(--ink);color:white;padding:13px 20px;z-index:30;opacity:0;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}.fullscreen-mode .shell{max-width:none;padding:0}.fullscreen-mode .header,.fullscreen-mode .hero,.fullscreen-mode .tabs,.fullscreen-mode .panel,.fullscreen-mode footer{display:none}.fullscreen-mode #intervalStage,.fullscreen-mode #stopwatchStage{height:100dvh;border-radius:0;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}.fullscreen-mode .interval-center{flex:1;min-height:0}.fullscreen-mode .interval-clock{font-size:clamp(84px,21vw,260px)}.fullscreen-mode .stopwatch-center{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0}.fullscreen-mode .stopwatch-clock{font-size:clamp(67px,20vw,260px)}@media(max-width:580px){.shell{padding:24px 19px}.logo{font-size:28px}.header .micro{font-size:9px}.hero{padding:44px 0 24px}.hero h1{font-size:30px}.tabs{border-radius:23px}.tab{height:63px;font-size:17px}.interval-stage{padding:28px}.interval-center{min-height:290px}.interval-center h2{font-size:30px}.interval-clock{font-size:clamp(75px,18vw,112px)}.metrics strong{font-size:clamp(22px,6vw,32px)}.interval-buttons{grid-template-columns:60px minmax(0,1fr) 60px;gap:10px}.square,.primary{min-height:95px}.primary{font-size:25px}.stopwatch-stage{padding:28px}.stopwatch-center{padding:45px 0 60px}.stopwatch-clock{font-size:clamp(55px,13.9vw,100px)}.stop-primary{min-height:140px}.stop-footer{margin-top:26px}.panel{padding:28px}.modal{padding:24px}.fullscreen-mode #intervalStage,.fullscreen-mode #stopwatchStage{padding:20px}.fullscreen-mode .interval-center{min-height:0}.fullscreen-mode .interval-clock{font-size:clamp(65px,20vw,160px)}}@media(orientation:landscape) and (max-height:620px){.fullscreen-mode #intervalStage,.fullscreen-mode #stopwatchStage{padding:13px 24px}.fullscreen-mode .interval-center h2{font-size:clamp(19px,4vh,28px);margin:0}.fullscreen-mode .interval-clock{font-size:min(26vh,15vw,130px)}.fullscreen-mode .interval-center p{font-size:12px}.fullscreen-mode .interval-center{justify-content:center;gap:3px}.fullscreen-mode .metrics strong{font-size:clamp(19px,5vh,29px)}.fullscreen-mode .metrics div{gap:0}.fullscreen-mode .next-strip{padding:9px 15px;margin:6px 0}.fullscreen-mode .square,.fullscreen-mode .primary{min-height:45px}.fullscreen-mode .utilities{margin-top:2px}.fullscreen-mode .foot-note{margin:2px 0;font-size:11px}.fullscreen-mode .stopwatch-clock{font-size:min(31vh,17vw,150px)}.fullscreen-mode .stopwatch-center p{margin:0;font-size:13px}.fullscreen-mode .stop-primary{min-height:55px;font-size:28px}.fullscreen-mode .stop-footer{margin-top:10px}.fullscreen-mode .stage-top{font-size:13px}}
/* Fullscreen API: browser fullscreen applies to the stage element itself. */
#intervalStage:fullscreen,#stopwatchStage:fullscreen{width:100vw;height:100dvh;max-width:none;border-radius:0;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}#intervalStage:fullscreen .interval-center{flex:1;min-height:0}#intervalStage:fullscreen .interval-clock{font-size:clamp(85px,20vw,260px)}#stopwatchStage:fullscreen .stopwatch-center{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0}#stopwatchStage:fullscreen .stopwatch-clock{font-size:clamp(65px,19vw,260px)}@media(orientation:landscape) and (max-height:620px){#intervalStage:fullscreen,#stopwatchStage:fullscreen{padding:12px 22px}#intervalStage:fullscreen .interval-center{justify-content:center;gap:4px}#intervalStage:fullscreen .interval-center h2{font-size:clamp(18px,4vh,28px);margin:0}#intervalStage:fullscreen .interval-clock{font-size:min(26vh,15vw,130px)}#intervalStage:fullscreen .interval-center p{font-size:12px}#intervalStage:fullscreen .metrics div{gap:0}#intervalStage:fullscreen .metrics strong{font-size:clamp(19px,5vh,30px)}#intervalStage:fullscreen .next-strip{margin:6px 0;padding:9px}#intervalStage:fullscreen .square,#intervalStage:fullscreen .primary{min-height:43px}#intervalStage:fullscreen .utilities{margin-top:3px}#intervalStage:fullscreen .foot-note{margin:2px 0}#stopwatchStage:fullscreen .stopwatch-clock{font-size:min(30vh,17vw,150px)}#stopwatchStage:fullscreen .stopwatch-center p{margin:0;font-size:13px}#stopwatchStage:fullscreen .stop-primary{min-height:55px;font-size:28px}#stopwatchStage:fullscreen .stop-footer{margin-top:8px}}