:root{--paper: #ffffff;--ink: #33363c;--ink-soft: #6f7278;--line: #e2e4e9;--sun: #fffc6f;--earth: #4a98ff;--shadow: #64656b;--font-main: "Hina Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-main);-webkit-font-smoothing:antialiased}.app{height:100vh;height:100dvh;max-width:1000px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 20px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:clamp(6px,1.6vh,18px);overflow:hidden}.title{flex:0 0 auto;margin:0;font-size:.95rem;font-weight:500;letter-spacing:.18em;color:var(--ink-soft);text-align:center}.stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.panel{min-height:0;display:flex;align-items:center;justify-content:center}.panel-phase{flex:1.15 1 0}.panel-orbit{flex:1 1 0;border-top:1px solid var(--line);padding-top:6px}.phase-svg,.orbit-svg{width:100%;height:100%;display:block}.orbit-svg{max-width:460px}.phase-name{flex:0 0 auto;margin:0;text-align:center;font-size:clamp(1.2rem,5.6vw,1.75rem);font-weight:400;letter-spacing:.16em;color:var(--ink)}.slider-block{flex:0 0 auto;display:grid;gap:6px}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:32px;background:transparent;margin:0;cursor:pointer}.slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--line)}.slider::-moz-range-track{height:6px;border-radius:3px;background:var(--line)}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:var(--earth);border:3px solid #fff;box-shadow:0 1px 4px #28324659}.slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--earth);border:3px solid #fff;box-shadow:0 1px 4px #28324659}.slider:focus-visible{outline:2px solid var(--earth);outline-offset:4px;border-radius:6px}.scale{display:flex;justify-content:space-between;font-size:.88rem;color:var(--ink-soft);letter-spacing:.04em}.readout{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}.readout-age{font-size:1rem;color:var(--ink-soft);letter-spacing:.06em}.readout-age strong{font-size:1.5rem;font-weight:500;color:var(--ink);margin:0 2px}.readout button{min-height:44px;padding:0 18px;font-family:inherit;font-size:.95rem;letter-spacing:.06em;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:22px;cursor:pointer}.readout button:hover:not(:disabled){background:#f4f6f9}.readout button:disabled{opacity:.45;cursor:default}.note{display:none;flex:0 0 auto;margin:0;text-align:center;font-size:.88rem;color:var(--ink-soft)}@media (max-height: 600px){.title{display:none}.scale{font-size:.78rem}.readout-age strong{font-size:1.25rem}}@media (max-height: 460px){.scale{display:none}}@media (min-width: 760px){.app{gap:clamp(10px,2vh,22px);padding-top:20px}.stage{flex-direction:row-reverse;align-items:stretch}.panel-orbit{flex:1.7 1 0;border-top:none;padding-top:0}.panel-phase{flex:1 1 0;border-left:1px solid var(--line)}.note{display:block}}