/* Candidate r3.2: dedicated-root selectors; original design rules retained. */
@font-face {font-family:YotsubaTimerInter;src:local('Inter')}
#app, #app * {box-sizing:border-box}
#app, #yotsuba-timer-document {margin:0;min-height:100%;font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;color:#092f63;background:#eaf5fc}
#yotsuba-timer-document {background:radial-gradient(circle at 50% -10%,#d3ecff,#edf7fd 60%,#e4f3fa)}
#app button, #app input, #app select {font:inherit}
#app button {cursor:pointer;border:0}
#app button:focus-visible, #app input:focus-visible, #app select:focus-visible {outline:3px solid #69a8f2;outline-offset:2px}
#app {width:min(100%,760px);min-height:100dvh;margin:auto;padding:20px 18px 28px;background:linear-gradient(165deg,#e3f3ff,#f4faff 47%,#e6f5f8);box-shadow:0 0 55px #2672a21a}
#app.soroban {background:linear-gradient(160deg,#e1f5f5,#f3fbfa 65%,#eaf7ed)}
#app .page {max-width:600px;margin:auto}
#app .topline {display:flex;align-items:center;justify-content:space-between;min-height:42px}
#app .brand {font-size:13px;letter-spacing:.12em;font-weight:800}
#app .subtle {color:#5a7796}
#app .back, #app .icon-btn {border:1px solid #b6d5f6;background:#ffffffc9;color:#2762a2;padding:9px 15px;border-radius:12px}
#app .icon-btn {font-size:15px}
#app .hero {text-align:center;margin:25px 0 18px}
#app .hero h1 {font-size:clamp(30px,7vw,44px);margin:12px 0 8px;color:#0d4e9c;letter-spacing:.05em}
#app .hero p {margin:0;font-size:15px}
#app .sheep {display:block;width:120px;height:116px;margin:0 auto;object-fit:contain;filter:drop-shadow(0 4px 4px #395a7433)}
#app .home-sheep {width:155px;height:153px;margin-top:10px}
#app .cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:26px}
#app .choice, #app .menu-card {background:linear-gradient(#fff,#edf7ff);border:1px solid #9ccaff;border-radius:20px;padding:23px 12px;box-shadow:0 6px 12px #3773a22a;color:#073f88;text-align:center;min-height:172px}
#app .choice:hover, #app .menu-card:hover {transform:translateY(-2px);box-shadow:0 8px 18px #3773a23a}
#app .choice .emoji, #app .menu-card .emoji {display:block;font-size:38px;margin-bottom:8px}
#app .choice strong, #app .menu-card strong {display:block;font-size:27px;letter-spacing:.03em}
#app .choice small, #app .menu-card small {display:block;font-size:13px;margin-top:6px;line-height:1.4}
#app .choice.soroban-card {background:linear-gradient(#fff,#e9f6fb)}
#app .menu-card {min-height:150px}
#app .menu-card strong {font-size:23px}
#app .menu-card.test {background:linear-gradient(140deg,#fff5f5,#ffeded);border-color:#ffb3b3;color:#c03949}
#app .menu-card.timer {background:#ecf6ff}
#app .menu-card.stopwatch {background:#effcef;border-color:#a6dfa9;color:#217650}
#app .menu-card.pomodoro {background:#fff8ec;border-color:#ffd397;color:#a96619}
#app .menu-title {text-align:center;margin:14px 0;font-size:26px}
#app .switchline {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px}
#app .switchline input[type=checkbox] {appearance:none;width:48px;height:27px;flex:none;background:#b7cbdc;border-radius:20px;position:relative;cursor:pointer}
#app .switchline input[type=checkbox]:before {content:'';position:absolute;width:21px;height:21px;border-radius:50%;top:3px;left:3px;background:white;transition:transform .18s}
#app .switchline input:checked {background:#2c80e4}
#app .switchline input:checked:before {transform:translateX(21px)}
#app .menu-foot {margin-top:20px;font-size:13px;color:#486c93}
#app .panel {border:1px solid #d5eafa;background:#fffffff2;border-radius:21px;padding:20px;margin:13px 0;box-shadow:0 5px 17px #3c7aaa15}
#app .panel h2 {font-size:18px;margin:0 0 15px}
#app .field {margin:12px 0}
#app .field label, #app .field>span {display:block;font-weight:700;font-size:14px;margin-bottom:7px}
#app .field input, #app .field select {border:1px solid #bed7ed;border-radius:10px;background:#fff;color:#153d72;padding:10px;width:100%;min-height:43px}
#app .field input[type=number] {width:83px;text-align:center}
#app .inline {display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#app .chips {display:flex;flex-wrap:wrap;gap:8px}
#app .chip {border:1px solid #b5d2f0;border-radius:12px;background:#f5fbff;color:#205b9d;padding:10px 15px;font-weight:700}
#app .chip.active {background:#2d82e6;color:white;border-color:#2d82e6}
#app .primary, #app .secondary, #app .danger {padding:13px 22px;border-radius:12px;font-weight:800;min-height:48px}
#app .primary {background:linear-gradient(#62affc,#2b77d9);color:#fff;box-shadow:0 4px 9px #3678bb40}
#app .secondary {border:1px solid #afcff0;color:#205c9d;background:#f3faff}
#app .danger {border:1px solid #f6a6a6;color:#c5424a;background:#fff0f0}
#app .wide {width:100%}
#app .actions {display:flex;justify-content:center;gap:9px;margin:20px 0 8px}
#app .actions>* {flex:1}
#app .micro {font-size:12px;color:#67809a;line-height:1.6}
#app .runtime {height:min(860px,calc(100dvh - 44px));min-height:560px;display:flex;flex-direction:column}
#app .runtime .topline {flex:none}
#app .runtime-main {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;gap:14px}
#app .runtime-name {font-size:18px;font-weight:800;text-align:center}
#app .elapsed {font-family:YotsubaTimerInter,'Arial Rounded MT Bold',Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.035em;font-size:clamp(50px,12vw,100px);line-height:1.08;white-space:nowrap;color:#07356f}
#app .elapsed.abacus {font-family:'Courier New',monospace;font-weight:900;letter-spacing:-.07em;color:#141414}
#app .remaining-label {text-align:center;font-size:15px;font-weight:800}
#app .remaining {font-family:YotsubaTimerInter,Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:clamp(28px,7vw,52px);line-height:1;font-weight:800}
#app .progress {height:10px;border-radius:10px;background:#d9e8f3;width:100%;overflow:hidden}
#app .progress b {display:block;height:100%;background:linear-gradient(90deg,#58a8fa,#2072d3);border-radius:10px}
#app .runtime-bottom {flex:none}
#app .status {text-align:center;min-height:27px;color:#346ca7;font-size:14px;font-weight:700}
#app .hint {font-size:13px;text-align:center;color:#2864a7}
#app .clock-wrap {position:relative;width:min(76vw,460px,45dvh);height:min(76vw,460px,45dvh);border-radius:50%;background:#fff;box-shadow:0 8px 24px #174d8855,inset 0 0 0 8px #dce9f5,inset 0 0 0 11px #6385a7}
#app .clock-wrap svg {width:100%;height:100%}
#app .analog-scene {border-radius:20px;width:100%;padding:22px 0;display:flex;justify-content:center}
#app .scene-morning {background:linear-gradient(#c9e8ff,#e4f4da)}
#app .scene-day {background:linear-gradient(#c4eaff,#e3f8f7)}
#app .scene-evening {background:linear-gradient(#ffcfae,#eeddd4)}
#app .scene-night {background:linear-gradient(#173961,#6785a6)}
#app .scene-off {background:transparent}
#app .clock-face text {font:700 24px Arial,sans-serif;fill:#17325d;text-anchor:middle;dominant-baseline:middle}
#app .clock-face line.tick {stroke:#183e69}
#app .clock-face line.hand {stroke:#0d376d;stroke-linecap:round}
#app .notice-box {padding:13px;border:1px solid #acd4fc;background:#eaf6ff;border-radius:14px;text-align:center;font-weight:800}
#app .sheep-strip {display:flex;align-items:center;justify-content:center;gap:12px;margin:14px auto;color:#2871b1}
#app .sheep-strip .sheep {width:72px;height:72px;margin:0}
#app .finish {text-align:center;padding-top:12vh}
#app .finish h1 {font-size:29px}
#app .finish .sheep {width:180px;height:180px}
#app dialog {border:0;border-radius:18px;padding:22px;width:min(90vw,400px);color:#123d71;box-shadow:0 20px 70px #152b4b55}
#app dialog::backdrop {background:#102b4e88}
#app .tag {display:inline-block;padding:5px 10px;background:#e0f0fc;border-radius:20px;color:#2267ab;font-size:13px;font-weight:800}
#app .setting-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px}
#app .cue-row {display:flex;align-items:center;gap:8px;padding:7px 0}
#app .cue-row input[type=number] {width:75px}
#app .cue-row input[type=text] {flex:1;min-width:90px}
#app .countdown {font-size:clamp(40px,9vw,70px);font-weight:900}
#app.soroban .runtime-name {color:#216a86}
#app.soroban .elapsed {color:#141414}
@media(max-width:490px) {
  #app {padding:13px 12px}
  #app .cards {gap:10px}
  #app .choice, #app .menu-card {min-height:145px;padding:18px 7px}
  #app .choice strong {font-size:24px}
  #app .menu-card strong {font-size:19px}
  #app .menu-card .emoji {font-size:29px}
  #app .runtime {height:calc(100dvh - 26px)}
  #app .runtime .actions {margin-bottom:3px}
  #app .clock-wrap {width:min(82vw,39dvh);height:min(82vw,39dvh)}
  #app .setting-grid {grid-template-columns:1fr}
}
@media(max-width:350px) {
  #app .cards.study {grid-template-columns:1fr}
  #app .menu-card {min-height:110px}
  #app .menu-card .emoji {display:none}
}
:fullscreen #app {width:100%;max-width:none;height:100dvh;box-shadow:none}
#app :fullscreen .page {max-width:680px}
#app :fullscreen .runtime {height:calc(100dvh - 40px)}
#app.deep {background:linear-gradient(160deg,#cee6fa,#e6f3fd 48%,#d4e9f5)}
#app.deep .elapsed, #app.deep .remaining {color:#052d61}
/* 承認済みキャラクターの独立した透過 PNG */
#app .sheep {background:none!important;border-radius:0;object-fit:contain;object-position:center}
#app .sheep-strip .sheep {width:72px;height:72px}
#app .mode-icon {display:block;width:42px;height:42px;margin:0 auto 9px}
#app .menu-card .mode-icon {width:38px;height:38px}
#app .analog-scene {display:grid;grid-template-columns:auto 70px;align-items:end;gap:8px}
#app .analog-scene .clock-wrap {width:min(67vw,390px,40dvh);height:min(67vw,390px,40dvh)}
#app .analog-sheep {width:70px;height:82px;margin:0 0 4px;align-self:end}
#app .analog-runtime .runtime-main {gap:7px}
#app .analog-elapsed {font-size:clamp(38px,7vw,62px)}
#app .finish-actions {display:grid;grid-template-columns:1fr 1fr}
#app .keypad-input {cursor:pointer;background:#f8fcff!important}
#app .keypad-keys {display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#app .keypad-keys button {font-size:26px;font-weight:800;min-height:60px;border:1px solid #b4d1f0;border-radius:12px;background:#ecf6ff;color:#173e77}
#app .keypad-title {text-align:center;font-weight:800;font-size:18px}
#app .keypad-value {text-align:center;font-size:40px;font-variant-numeric:tabular-nums;font-weight:800;margin:16px 0}
#app .app-error {position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:min(90vw,540px);z-index:999;padding:14px 18px;background:#fff7e5;color:#793a20;border:2px solid #e8b871;border-radius:12px;box-shadow:0 8px 24px #29456b44;text-align:center;font-weight:700}
#app .app-error[hidden] {display:none}
@media(max-width:490px) {
  #app .analog-scene {grid-template-columns:auto 48px;gap:2px}
  #app .analog-scene .clock-wrap {width:min(66vw,38dvh);height:min(66vw,38dvh)}
  #app .analog-sheep {width:48px;height:59px}
  #app .analog-runtime .elapsed {font-size:clamp(36px,8vw,48px)}
}
#app {--accent:#2d82e6}
#app[data-accent=navy] {--accent:#254779}
#app[data-accent=green] {--accent:#28865f}
#app[data-accent=purple] {--accent:#7653ac}
#app[data-accent=orange] {--accent:#cf752b}
#app[data-accent=pink] {--accent:#c96991}
#app[data-accent=gray] {--accent:#687687}
#app[data-accent=black] {--accent:#282d34}
#app .chip.active {background:var(--accent);border-color:var(--accent)}
#app .primary {background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 69%,white),var(--accent))}
#app .progress b {background:var(--accent)}
#app .hero h1 {color:var(--accent)}
#app .field input.keypad-input, #app .inline input.keypad-input {width:85px;text-align:center;flex:none}
#app .field input.keypad-input[data-keypad=time] {width:120px}
#app .cue-row input.keypad-input {width:73px;flex:none;text-align:center}
/* candidate-r3: exact sheep assets, responsive illustrated scenery and numeric focus. */
#app {--sky-top:#d6edfb;--sky-bottom:#f3f8ef;width:min(100%,1000px);position:relative;isolation:isolate;background:#e5f2f8}
#app .page {position:relative;z-index:0;max-width:640px;min-height:calc(100dvh - 48px)}
#app .world-art {position:fixed;inset:0;width:100%;height:100dvh;z-index:-1;pointer-events:none}
#app[data-world=quiet] .world-art {opacity:.22}
#app[data-scene=morning] {--sky-top:#d5eafb;--sky-bottom:#fff6dc}
#app[data-scene=evening] {--sky-top:#c7dcef;--sky-bottom:#ffe1c5}
#app[data-scene=night] {--sky-top:#809abf;--sky-bottom:#cedbe7}
#app[data-scene=night] .world-art {filter:saturate(.65)}
#app[data-scene=off] .world-art {opacity:0}
#app[data-world=rich] .page:not(.analog-runtime)~* {--sky-top:#d6edfb}
#app .hero h1, #app .menu-title, #app .choice strong, #app .menu-card strong, #app .ready h1, #app .finish h1 {font-family:'Hiragino Maru Gothic ProN','Arial Rounded MT Bold',Meiryo,sans-serif;font-weight:900}
#app .hero {margin:clamp(20px,6dvh,62px) 0 24px}
#app .hero h1 {font-size:clamp(34px,8vw,64px);text-shadow:0 3px 0 #fff9;letter-spacing:.02em}
#app .hero p {font-size:clamp(14px,3vw,19px)}
#app .choice {border:2px solid #a9d2f2;background:linear-gradient(#ffffffed,#edf7ffe6);border-radius:28px;min-height:185px;box-shadow:0 7px 0 #bad9e566,0 15px 28px #6a9cc627;padding:28px 15px}
#app .choice strong {font-size:clamp(28px,5vw,38px)}
#app .choice small {font-size:14px}
#app .home-sheep {width:clamp(170px,27vw,245px);height:clamp(170px,27vw,245px);margin-top:18px}
#app .hero+.cards {margin-top:25px}
#app .panel {background:#ffffffeb;backdrop-filter:blur(3px)}
#app .ready {display:flex;flex-direction:column}
#app .ready-content {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:25px 0}
#app .ready .sheep {width:clamp(140px,22vw,230px);height:clamp(140px,22vw,230px)}
#app .ready h1 {font-size:clamp(26px,6vw,40px);margin:0}
#app .ready p {margin:0}
#app .start-button {width:min(100%,360px);font-size:clamp(28px,6vw,40px);padding:20px;border-radius:22px}
#app .time-pair {flex-wrap:nowrap!important;gap:6px}
#app .time-pair input.keypad-input {width:clamp(60px,19vw,90px);min-width:0}
#app .pace-result {text-align:center;font-size:18px;font-weight:800;color:#32638b}
#app .pace-result strong {display:block;font-size:clamp(28px,6vw,40px)}
#app [hidden] {display:none!important}
#app .keypad-input:focus {outline:3px solid #378be0;background:#e1f1ff!important}
#app .runtime {height:calc(100dvh - 48px);min-height:0;max-width:100%;width:100%}
#app .runtime-main {gap:clamp(7px,2dvh,20px)}
#app .runtime .topline {font-size:13px;gap:8px}
#app .runtime .topline button {padding:8px 10px;font-size:12px}
#app .digital-runtime .elapsed {font-size:clamp(60px,min(22vw,27dvh),230px);letter-spacing:-.06em;font-family:'Arial Rounded MT Bold','Hiragino Maru Gothic ProN',Arial,sans-serif;font-weight:900;line-height:1;max-width:100%}
#app .digital-runtime .elapsed.abacus {font-family:'Courier New',monospace;letter-spacing:-.09em}
#app .digital-runtime .remaining {font-size:clamp(36px,min(13vw,15dvh),135px);letter-spacing:-.035em}
#app .remaining-label {font-size:clamp(20px,4vw,32px)}
#app[data-digit-size=extra] .elapsed {font-size:clamp(52px,min(19vw,24dvh),195px)}
#app[data-digit-size=large] .elapsed {font-size:clamp(44px,min(16vw,20dvh),165px)}
#app .digital-runtime .elapsed[data-hours=true] {font-size:clamp(35px,min(15vw,23dvh),160px)}
#app[data-digit-size=extra] .elapsed[data-hours=true] {font-size:clamp(32px,min(13vw,20dvh),140px)}
#app[data-digit-size=large] .elapsed[data-hours=true] {font-size:clamp(28px,min(11vw,18dvh),120px)}
#app .digital-runtime .progress {max-width:560px;height:8px}
#app .digital-runtime .runtime-name {font-size:clamp(15px,3vw,22px)}
#app .digital-runtime .status {font-size:clamp(15px,3vw,24px)}
#app .runtime-bottom {width:min(100%,640px);align-self:center}
#app .analog-layout {display:grid;grid-template-columns:1fr;align-items:center;justify-items:center;width:100%;gap:18px}
#app .analog-scene, #app .analog-scene.scene-off, #app .analog-scene.scene-night, #app .analog-scene.scene-day, #app .analog-scene.scene-evening, #app .analog-scene.scene-morning {display:block;width:auto;padding:0;background:transparent}
#app .analog-scene .clock-wrap {width:min(88vw,57dvh,650px);height:min(88vw,57dvh,650px);box-shadow:0 12px 26px #3f668c26,inset 0 0 0 8px #eff5fa,inset 0 0 0 13px #80a2bb;border:2px solid #7296b4}
#app .clock-info {position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;padding-right:clamp(80px,18vw,130px);min-height:95px}
#app .clock-info>div {display:flex;flex-direction:column;gap:5px}
#app .clock-info span {font-size:14px;color:#355d80;font-weight:800}
#app .clock-info strong {font-size:clamp(23px,5vw,38px);font-variant-numeric:tabular-nums}
#app .clock-info .analog-sheep {position:absolute;right:0;bottom:-6px;width:clamp(85px,20vw,145px);height:clamp(85px,20vw,145px)}
#app .analog-runtime .runtime-main {gap:10px}
#app .analog-runtime .runtime-name {font-size:15px}
#app .analog-runtime .status:empty {display:none}
#app .finish {padding-top:clamp(35px,10dvh,110px)}
#app .finish .sheep {width:230px;height:230px}
#app :fullscreen .page {max-width:900px}
#app :fullscreen .runtime {max-width:1300px;height:calc(100dvh - 40px)}
#app :fullscreen .digital-runtime .elapsed {font-size:clamp(60px,min(25vw,32dvh),350px)}
#app :fullscreen .digital-runtime .elapsed[data-hours=true] {font-size:clamp(38px,min(16vw,26dvh),250px)}
:fullscreen #app[data-digit-size=extra] .elapsed {font-size:clamp(52px,min(22vw,28dvh),295px)}
:fullscreen #app[data-digit-size=large] .elapsed {font-size:clamp(44px,min(18vw,24dvh),245px)}
:fullscreen #app[data-digit-size=extra] .elapsed[data-hours=true] {font-size:clamp(32px,min(14vw,23dvh),215px)}
:fullscreen #app[data-digit-size=large] .elapsed[data-hours=true] {font-size:clamp(28px,min(12vw,20dvh),185px)}
@media(orientation:landscape) and (min-width:650px) {
  #app .analog-runtime .analog-layout {grid-template-columns:minmax(0,1.6fr) minmax(175px,1fr);gap:25px}
  #app .analog-scene .clock-wrap {width:min(58vw,73dvh,690px);height:min(58vw,73dvh,690px)}
  #app .clock-info {display:grid;gap:16px;padding:0 0 110px;justify-self:start}
  #app .clock-info .analog-sheep {right:auto;left:0;bottom:-25px;width:150px;height:150px}
  #app .analog-runtime .runtime-name {align-self:flex-start}
  #app .analog-runtime .runtime-main {justify-content:center}
  #app .analog-runtime .runtime-bottom {margin:0}
  #app .analog-runtime .actions {margin:6px 0}
  #app .analog-runtime .runtime-main .status {position:absolute;bottom:75px;right:15px}
}
@media(max-height:500px) and (orientation:landscape) {
  #app {padding:10px 16px}
  #app .runtime, #app :fullscreen .runtime {height:calc(100dvh - 20px)}
  #app .runtime-main {gap:5px}
  #app .runtime-name {font-size:13px}
  #app .runtime .status {font-size:14px;min-height:18px}
  #app .runtime .actions {margin:4px 0}
  #app .runtime .actions button {min-height:36px;padding:7px 12px}
  #app .remaining-label {font-size:18px}
  #app .ready-content {gap:6px;padding:10px}
  #app .ready .sheep {position:absolute;left:8%;bottom:15%;width:100px;height:100px}
  #app .ready h1 {font-size:24px}
  #app .start-button {padding:10px;font-size:28px}
  #app .clock-info {padding-bottom:65px;gap:8px}
  #app .clock-info .analog-sheep {height:90px;width:90px;bottom:-25px}
  #app .clock-info strong {font-size:26px}
}
@media(max-width:490px) {
  #app .runtime {height:calc(100dvh - 26px)}
  #app .hero {margin-top:22px}
  #app .choice {min-height:160px;padding:21px 8px}
  #app .choice small {font-size:11px}
  #app .home-sheep {width:185px;height:185px}
  #app .hero h1 {font-size:38px}
  #app .clock-info {gap:12px;padding-right:95px}
  #app .analog-scene .clock-wrap {width:min(88vw,54dvh);height:min(88vw,54dvh)}
  #app .panel {padding:16px}
  #app .time-pair {font-size:15px}
  #app .digital-runtime .elapsed {font-size:clamp(54px,min(22vw,27dvh),160px)}
  #app .topline>b {font-size:12px}
  #app .finish .sheep {width:180px;height:180px}
}
/* Keep the clock inside its grid column, including desktop without fullscreen. */
@media(orientation:landscape) and (min-width:650px) {
  #app .analog-layout .analog-scene {width:100%;min-width:0;display:flex;justify-content:center}
  #app .analog-layout .clock-wrap {width:min(100%,73dvh,690px);height:auto;aspect-ratio:1}
  #app .clock-info {min-width:0}
  #app .clock-info .analog-sheep {max-width:100%}
}
/* r3.1: formal transparent assets, illustrated world, stable per-screen choices. */
#app {max-width:none;width:100%;background:#eaf6f8;box-shadow:none;padding:22px 28px}
#app .page {max-width:720px}
#app .world-art {object-fit:cover;object-position:center center;opacity:1;filter:none!important}
#app[data-world=rich] .world-art {opacity:1}
#app[data-world=soft] .world-art {opacity:.65}
#app[data-world=quiet] .world-art {opacity:.15}
#app[data-world=break] .world-art {opacity:.4}
#app[data-scene=off] .world-art {opacity:0!important}
#app .home-page {min-height:calc(100dvh - 46px);display:flex;flex-direction:column}
#app .home-page .hero {margin:clamp(18px,5dvh,65px) 0 20px}
#app .hero h1 {font-family:ui-rounded,'Arial Rounded MT Bold','Hiragino Maru Gothic ProN',Meiryo,sans-serif;font-weight:900;color:#205c98!important;-webkit-text-stroke:1px #205c98;text-shadow:0 4px 0 #fff,3px 0 0 #fff,-3px 0 0 #fff;letter-spacing:.025em;font-size:clamp(35px,6vw,67px)}
#app .hero p {color:#224e6e;font-weight:600;text-shadow:0 1px 3px #fff}
#app .home-page .cards {width:100%;max-width:670px;align-self:center;gap:20px;margin-top:20px}
#app .choice {background:linear-gradient(#ffffffeb,#eff8ffd9);border:2px solid #b6d7ec;border-radius:27px;min-height:195px;box-shadow:0 5px 0 #82b5d636,0 14px 26px #507d9b20;backdrop-filter:blur(3px)}
#app .choice strong {font-family:ui-rounded,'Arial Rounded MT Bold','Hiragino Maru Gothic ProN',Meiryo,sans-serif;color:#205d94;font-size:clamp(29px,4vw,38px)}
#app .choice .mode-icon {width:52px;height:52px;color:#428cc9}
#app .home-sheep {width:clamp(195px,27vw,310px);height:clamp(195px,27vw,310px);margin:clamp(15px,4dvh,45px) auto 0;filter:drop-shadow(0 10px 5px #4b775d25);flex:none}
#app .home-page>.hint {margin:8px 0 0;font-weight:700;text-shadow:0 1px 4px white}
#app .sheep {filter:drop-shadow(0 5px 3px #46695626);image-rendering:auto}
#app .study-page .study-sheep {width:160px;height:160px;margin-top:20px}
#app .sheep-strip .sheep {width:110px;height:110px}
#app .panel {background:#fffffff0;box-shadow:0 6px 20px #4b799823}
#app .primary {border-radius:17px;box-shadow:0 4px 0 #1c52972b,0 8px 15px #4083be23;transition:transform .12s,box-shadow .12s}
#app .primary:active, #app .choice:active, #app .menu-card:active {transform:translateY(2px);box-shadow:0 2px 0 #7ea5bd33}
#app .menu-card {border-radius:24px}
#app .digital-runtime {max-width:1400px!important}
#app .digital-runtime .elapsed {font-family:ui-rounded,'Arial Rounded MT Bold','Hiragino Maru Gothic ProN',Arial,sans-serif;font-weight:900;font-size:clamp(60px,min(26vw,31dvh),360px);letter-spacing:-.055em}
#app .digital-runtime .elapsed.abacus {font-family:'Courier New',monospace;letter-spacing:-.09em}
#app .digital-runtime .remaining {font-size:clamp(38px,min(15vw,17dvh),180px)}
#app .digital-runtime .elapsed[data-hours=true] {font-size:clamp(36px,min(16vw,27dvh),260px)}
#app[data-digit-size=extra] .elapsed {font-size:clamp(52px,min(22vw,27dvh),300px)}
#app[data-digit-size=large] .elapsed {font-size:clamp(46px,min(18vw,23dvh),245px)}
#app .break-runtime .remaining {color:#28756a}
#app .break-runtime .break-sheep {width:min(20vw,15dvh,145px);height:min(20vw,15dvh,145px);margin:0}
#app .break-runtime .runtime-main {gap:8px}
#app .analog-runtime {max-width:1600px!important}
#app .analog-runtime .runtime-main {gap:12px}
#app .analog-runtime .clock-info {border:1px solid #c5d9e4;background:#ffffffbd;border-radius:24px;padding:22px 24px 190px;width:min(100%,320px);min-height:345px;box-shadow:0 7px 20px #28485815;gap:20px;backdrop-filter:blur(2px)}
#app .clock-info .analog-sheep {left:50%;right:auto;transform:translateX(-50%);width:210px;height:210px;max-width:none;bottom:-20px}
#app .clock-info span {font-size:17px}
#app .clock-info strong {font-size:clamp(30px,4vw,49px)}
#app .clock-info>div {gap:6px}
#app .analog-scene .clock-wrap {border:3px solid #779ab1;box-shadow:0 12px 35px #38556f2b,inset 0 0 0 9px #f0f6fa,inset 0 0 0 12px #b2cbd9}
#app .analog-runtime .clock-face text {font-family:ui-rounded,'Arial Rounded MT Bold',Arial,sans-serif;font-size:25px}
#app .analog-runtime .runtime-name {background:#ffffff9e;border-radius:14px;padding:7px 12px;color:#21486a}
#app[data-time-band=night] .runtime-name, #app[data-time-band=late_night] .runtime-name {background:#edf6ffde}
#app .finish .sheep {width:clamp(230px,30vw,340px);height:clamp(230px,30vw,340px)}
#app .finish {padding-top:clamp(20px,6dvh,65px)}
#app .finish h1 {color:#215c90;text-shadow:0 2px 4px white}
#app .finish .tag {background:#ffffffd9}
#app .finish-actions .secondary {background:#ffffffed}
@media(orientation:landscape) and (min-width:650px) {
  #app .analog-runtime .analog-layout {grid-template-columns:minmax(0,1.65fr) minmax(220px,1fr);gap:clamp(24px,4vw,65px)}
  #app .analog-layout .clock-wrap {width:min(100%,80dvh,850px);height:auto;aspect-ratio:1}
  #app .analog-runtime .runtime-main {position:relative}
  #app .analog-runtime .runtime-name {position:absolute;top:10px;right:5%;font-size:15px}
  #app .analog-runtime .clock-info {justify-self:center}
  #app .analog-runtime .status {right:0}
  #app .analog-runtime .runtime-bottom {align-self:center;max-width:640px}
}
@media(orientation:portrait),(max-width:649px) {
  #app {padding:14px 12px}
  #app .page {max-width:620px}
  #app .home-page .hero {margin:24px 0 12px}
  #app .home-page .cards {gap:12px;margin-top:22px}
  #app .choice {min-height:163px;padding:22px 9px}
  #app .home-page .home-sheep {width:clamp(215px,55vw,280px);height:clamp(215px,55vw,280px);margin-top:24px}
  #app .hero h1 {font-size:clamp(34px,8.5vw,56px)}
  #app .hero p {font-size:14px}
  #app .choice small {font-size:11px}
  #app .choice .mode-icon {width:42px;height:42px}
  #app .analog-scene .clock-wrap {width:min(94vw,58dvh);height:auto;aspect-ratio:1}
  #app .analog-runtime .analog-layout {gap:13px}
  #app .analog-runtime .clock-info {display:grid;grid-template-columns:1fr 1fr;width:100%;min-height:0;padding:12px 125px 12px 16px;border-radius:20px;gap:8px 14px}
  #app .clock-info>div {gap:3px}
  #app .clock-info>.clock-remaining {grid-column:1 / 3}
  #app .clock-info .analog-sheep {left:auto;right:-6px;transform:none;bottom:-9px;width:140px;height:140px}
  #app .clock-info span {font-size:13px}
  #app .clock-info strong {font-size:clamp(25px,7vw,36px)}
  #app .analog-runtime .runtime-name {font-size:13px}
  #app .analog-runtime .runtime-main {gap:7px}
  #app .digital-runtime .elapsed {font-size:clamp(57px,min(25vw,30dvh),220px)}
  #app .digital-runtime .remaining {font-size:clamp(38px,min(15vw,16dvh),130px)}
  #app .digital-runtime .elapsed[data-hours=true] {font-size:clamp(34px,min(16vw,24dvh),140px)}
  #app[data-digit-size=extra] .elapsed {font-size:clamp(52px,min(22vw,27dvh),190px)}
  #app[data-digit-size=large] .elapsed {font-size:clamp(45px,min(18vw,23dvh),160px)}
  #app .runtime {height:calc(100dvh - 28px)}
}
@media(max-height:520px) and (orientation:landscape) {
  #app {padding:8px 14px}
  #app .runtime {height:calc(100dvh - 16px)}
  #app .analog-runtime .runtime-name {top:0;right:2%}
  #app .analog-runtime .clock-info {padding:12px 120px 12px 16px;min-height:0;width:100%;gap:10px}
  #app .analog-runtime .clock-info .analog-sheep {left:auto;right:0;transform:none;width:120px;height:120px;bottom:-10px}
  #app .analog-runtime .clock-info strong {font-size:28px}
  #app .analog-runtime .clock-info span {font-size:12px}
  #app .analog-runtime .runtime-name {font-size:11px}
  #app .analog-layout .clock-wrap {width:min(100%,74dvh,850px)}
  #app .analog-runtime .analog-layout {grid-template-columns:minmax(0,1.5fr) minmax(225px,1fr);gap:18px}
  #app .digital-runtime .runtime-main {gap:3px}
  #app .digital-runtime .remaining {font-size:min(14vw,14dvh)}
  #app .break-runtime .break-sheep {display:none}
  #app .home-page {min-height:calc(100dvh - 16px)}
}

/* Candidate r3.2: viewport / notch safety without changing the approved artwork. */
#app {
  --frame-x: clamp(12px, 2vw, 28px);
  --frame-y: clamp(8px, 1.5vh, 22px);
  --safe-top: max(var(--frame-y), env(safe-area-inset-top, 0px));
  --safe-bottom: max(var(--frame-y), env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--safe-top) max(var(--frame-x), env(safe-area-inset-right, 0px)) var(--safe-bottom) max(var(--frame-x), env(safe-area-inset-left, 0px));
  overflow-wrap: break-word;
}
#app .page {min-width: 0; min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));}
#app .world-art {height: 100vh; height: 100dvh;}
#app .topline {min-width: 0; gap: 8px;}
#app .topline > b {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#app .topline > button, #app .topline > .back, #app .topline > .icon-btn {flex: none;}
#app button, #app input, #app select {max-width: 100%;}
#app button {touch-action: manipulation;}
#app button[data-hold] {touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;}
#app button:disabled {cursor: default; opacity: .65;}
#app .actions {min-width: 0;}
#app .actions > * {min-width: 0; overflow-wrap: anywhere;}
#app .time-pair {display: flex; flex-flow: row nowrap !important; min-width: 0;}
#app .time-pair input.keypad-input {flex: 0 1 90px; max-width: 28vw; min-width: 48px;}
#app .field input, #app .field select {font-size: max(16px, 1em);}
#app .field label, #app .field > span {overflow-wrap: anywhere;}
#app .switchline {min-height: 44px;}
#app .runtime,
:fullscreen #app .runtime,
#app:fullscreen .runtime {
  height: calc(100vh - var(--safe-top) - var(--safe-bottom));
  height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
  min-height: 0;
}
#app .runtime .runtime-main {min-width: 0; min-height: 0; gap: clamp(4px, 1.2dvh, 12px);}
#app .runtime .runtime-name {max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#app .runtime .elapsed, #app .runtime .remaining {flex: none; white-space: nowrap; font-variant-numeric: tabular-nums;}
#app .runtime .remaining[data-hours=true] {font-size: clamp(25px, min(11vw, 16dvh), 150px);}
#app .runtime .runtime-bottom {flex: none; position: relative; z-index: 1;}
#app .runtime .actions {margin: 10px 0 0;}
#app .runtime .actions button {min-height: 46px; padding: 11px 14px;}
#app .runtime .status:empty {display: none;}
#app .runtime .status {max-width: 100%; min-height: 0; line-height: 1.35;}
#app .digital-runtime .progress {flex: none;}
#app .digital-runtime .elapsed[data-digits="9"] {font-size: clamp(30px, min(14vw, 25dvh), 230px);}
#app .digital-runtime .elapsed[data-digits="10"] {font-size: clamp(28px, min(12vw, 25dvh), 210px);}
#app .digital-runtime .remaining[data-digits="9"], #app .digital-runtime .remaining[data-digits="10"] {font-size: clamp(24px, min(9vw, 15dvh), 130px);}
#app .analog-runtime .clock-info {min-width: 0;}
#app .analog-runtime .clock-info > div {min-width: 0;}
#app .analog-runtime .clock-info strong {white-space: nowrap;}
#app .ready-content {min-width: 0;}
#app .ready .audio-status {max-width: min(100%, 520px);}
#app .audio-status {border: 1px solid #bdd7e9; border-radius: 14px; background: #ffffffed; color: #285477; padding: 10px 13px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere;}
#app .audio-status[data-state="error"], #app .audio-status.error {border-color: #e3ba81; background: #fff7e9; color: #784619;}
#app .audio-status[data-state="success"] {border-color: #a8d7bb; background: #f0faf4; color: #286547;}
#app .audio-diagnostics {font-size: 13px; line-height: 1.6; overflow-wrap: anywhere;}
#app .audio-diagnostics summary {font-weight: 800; cursor: pointer; padding: 9px 0;}
#app .audio-diagnostics pre, #app .audio-diagnostics output {display: block; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-height: 18rem; overflow: auto; background: #edf6fc; border-radius: 10px; padding: 10px; font-size: 12px;}
#app .audio-diagnostics table {border-collapse: collapse; width: 100%; table-layout: fixed;}
#app .audio-diagnostics th, #app .audio-diagnostics td {padding: 5px 7px; border-bottom: 1px solid #d8e8f3; text-align: left; vertical-align: top;}
#app .audio-diagnostics .actions {flex-wrap: wrap;}
#app .audio-diagnostics .actions button {font-size: 13px; flex-basis: 140px; padding: 10px;}
#app .app-error {bottom: max(18px, env(safe-area-inset-bottom, 0px)); max-height: min(45dvh, 240px); overflow-y: auto; font-size: 14px;}
#app dialog {margin: auto; max-height: calc(100vh - 24px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); overflow-y: auto; overscroll-behavior: contain;}
#app #keypad {padding: 18px;}
#app #keypad .actions {margin: 14px 0 0;}
#app #keypad .keypad-value {overflow-wrap: anywhere;}
#app #intro p, #app #confirm p {line-height: 1.7;}
@media (max-width: 350px) {
  #app .home-page .cards {gap: 9px;}
  #app .choice {padding: 18px 5px; min-height: 155px;}
  #app .choice strong {font-size: 26px;}
  #app .choice small {font-size: 10px;}
  #app .panel {padding: 13px;}
  #app .chip {padding: 10px 12px;}
  #app .cue-row {gap: 5px; flex-wrap: wrap;}
  #app .cue-row input.keypad-input {width: 59px;}
  #app .analog-runtime .clock-info {padding: 10px 86px 10px 12px; gap: 7px 12px;}
  #app .analog-runtime .clock-info strong {font-size: 23px;}
  #app .analog-runtime .clock-info .analog-sheep {width: 100px; height: 100px; right: -8px; bottom: -3px;}
  #app .runtime .topline {gap: 5px;}
  #app .runtime .topline button {padding: 8px; font-size: 11px;}
}
@media (orientation: landscape) and (max-height: 520px) {
  #app {--frame-y: 6px; --frame-x: 12px;}
  #app .runtime .topline {min-height: 34px;}
  #app .runtime .topline button {padding: 7px 9px;}
  #app .runtime .runtime-main {gap: 3px;}
  #app .runtime .runtime-name {font-size: 12px; line-height: 1.3;}
  #app .runtime .status {font-size: 12px; line-height: 1.25;}
  #app .runtime .actions {margin-top: 5px;}
  #app .runtime .actions button {min-height: 40px; padding: 8px 12px; font-size: 14px;}
  #app .digital-runtime .elapsed {font-size: min(25vw, 27dvh);}
  #app[data-digit-size=extra] .digital-runtime .elapsed {font-size: min(22vw, 24dvh);}
  #app[data-digit-size=large] .digital-runtime .elapsed {font-size: min(19vw, 21dvh);}
  #app .digital-runtime .elapsed[data-hours=true] {font-size: min(15vw, 26dvh);}
  #app[data-digit-size=extra] .digital-runtime .elapsed[data-hours=true] {font-size: min(13vw, 23dvh);}
  #app[data-digit-size=large] .digital-runtime .elapsed[data-hours=true] {font-size: min(11vw, 20dvh);}
  #app .digital-runtime .remaining {font-size: min(14vw, 13dvh);}
  #app .digital-runtime .remaining[data-hours=true] {font-size: min(10vw, 13dvh);}
  #app .digital-runtime .remaining-label {font-size: 16px; line-height: 1.1;}
  #app .digital-runtime .progress {height: 5px;}
  #app[data-phase=breakDone] .digital-runtime .elapsed {font-size: min(20vw, 19dvh);}
  #app[data-phase=breakDone] .digital-runtime .remaining {font-size: min(12vw, 10dvh);}
  #app .runtime .notice-box {padding: 6px 10px; font-size: 12px;}
  #app .break-runtime .break-sheep {display: none;}
  #app .analog-runtime .runtime-name {top: 0; right: 0; font-size: 11px; padding: 4px 8px; max-width: 46%;}
  #app .analog-runtime .analog-layout {grid-template-columns: minmax(0, 1.5fr) minmax(175px, 1fr); gap: 12px;}
  #app .analog-runtime .analog-scene {width: 100%; min-width: 0; display: flex; justify-content: center;}
  #app .analog-runtime .analog-scene .clock-wrap {width: min(100%, calc(100dvh - 106px)); height: auto; aspect-ratio: 1;}
  #app .analog-runtime .clock-info {display: grid; grid-template-columns: 1fr; min-height: 0; width: 100%; padding: 10px 78px 10px 12px; gap: 8px;}
  #app .analog-runtime .clock-info > div {grid-column: 1; gap: 2px;}
  #app .analog-runtime .clock-info strong {font-size: clamp(21px, 4vw, 29px);}
  #app .analog-runtime .clock-info span {font-size: 11px;}
  #app .analog-runtime .clock-info .analog-sheep {width: 88px; height: 88px; right: -6px; bottom: 0; left: auto; transform: none;}
  #app .analog-runtime .runtime-main .status {position: static; font-size: 11px;}
  #app .ready {height: calc(100dvh - var(--safe-top) - var(--safe-bottom)); min-height: 0;}
  #app .ready-content {display: grid; grid-template-columns: minmax(80px, 1fr) minmax(240px, 2fr); grid-auto-rows: auto; align-content: center; justify-items: center; gap: 5px 12px; padding: 6px 0;}
  #app .ready .sheep {position: static; grid-column: 1; grid-row: 1 / span 5; align-self: center; width: min(24vw, 150px); height: min(24vw, 150px); margin: 0;}
  #app .ready-content > :not(.sheep) {grid-column: 2;}
  #app .ready h1 {font-size: 22px;}
  #app .ready p {font-size: 13px; line-height: 1.3;}
  #app .ready .start-button {max-width: 340px; min-height: 48px; font-size: 26px; padding: 9px 16px;}
  #app .ready .secondary {min-height: 36px; padding: 7px 16px; font-size: 13px;}
  #app .ready .audio-status {font-size: 11px; padding: 5px 8px; line-height: 1.35;}
  #app #keypad {padding: 12px; width: min(86vw, 370px);}
  #app #keypad .keypad-title {font-size: 15px;}
  #app #keypad .keypad-value {font-size: 27px; line-height: 1.1; margin: 6px 0;}
  #app #keypad .keypad-keys {gap: 5px;}
  #app #keypad .keypad-keys button {font-size: 21px; min-height: 35px; padding: 3px;}
  #app #keypad .actions {margin-top: 7px;}
  #app #keypad .actions button {min-height: 36px; padding: 6px 14px; font-size: 14px;}
}
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after {transition-duration: .01ms !important; animation-duration: .01ms !important;}
}
/* Compact portrait preparation: pending-audio controls also stay in view. */
@media (orientation:portrait) and (max-height:740px) {
  #app .ready {height:calc(100dvh - var(--safe-top) - var(--safe-bottom));min-height:0;}
  #app .ready-content {min-height:0;gap:7px;padding:7px 0;}
  #app .ready .sheep {width:clamp(80px,18dvh,128px);height:clamp(80px,18dvh,128px);flex:none;}
  #app .ready h1 {font-size:27px;line-height:1.25;}
  #app .ready p {font-size:13px;line-height:1.4;}
  #app .ready .audio-status {font-size:12px;line-height:1.35;padding:7px 9px;}
  #app .ready .start-button {min-height:56px;padding:10px 16px;font-size:29px;}
  #app .ready .secondary {min-height:44px;padding:8px 15px;font-size:14px;}
}
@media (orientation:landscape) and (max-height:540px) {
  #app .analog-runtime .runtime-main {position:relative;}
  #app .analog-runtime .runtime-name {position:absolute;top:0;right:0;flex:none;max-width:42%;padding:3px 6px;font-size:10px;line-height:1.3;}
}