@charset "UTF-8";
:root{color-scheme:light;--paper:#f5f2eb;--ink:#353c34;--muted:#7e8075;--line:#dddcd0;--accent:#68775c;--serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif}
html,body{overscroll-behavior:none}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button,a{touch-action:manipulation}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #9a7950;outline-offset:6px}button:disabled{cursor:default}button svg{display:block} .app-shell{max-width:1200px;margin:auto;padding:0 64px}.site-header{height:110px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;font-family:var(--serif);font-size:23px;letter-spacing:4px}.brand>svg{width:23px;height:33px}.brand-sub{display:block;font:8px/1.8 Arial,sans-serif;letter-spacing:2px;margin-top:4px}.header-note{font-size:11px;letter-spacing:2px;color:var(--muted)}main{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center;padding:46px 0 48px}.hourglass-stage{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;position:relative}.stage-heading{display:flex;justify-content:space-between;align-items:center;padding:0 16px;margin-bottom:6px}.eyebrow{font:11px/1.4 Georgia,serif;letter-spacing:3px}.material-label{font:8px/1.4 Arial,sans-serif;letter-spacing:1.5px;color:#98988a}.canvas-wrap{position:relative;width:100%;aspect-ratio:400/535;background:radial-gradient(ellipse at 50% 52%,#fffdf8 0%,#f8f5ed80 48%,transparent 72%)}canvas{display:block;width:100%;height:100%;object-fit:contain}.stage-caption{display:flex;justify-content:center;align-items:center;gap:18px;font-size:10px;color:#8b887b;letter-spacing:2px;margin-top:4px}.small-line{height:1px;width:24px;background:#c9c8b9}.controls{padding:8px 0 0;max-width:388px}.edition{font:9px/1.5 Arial,sans-serif;letter-spacing:2px;color:var(--accent);display:flex;gap:8px;align-items:center}.edition>span{width:5px;height:5px;border-radius:50%;background:#849178}h1{font-family:var(--serif);font-weight:400;font-size:49px;line-height:1.45;letter-spacing:5px;margin:19px 0 16px}.intro{font-size:11px;line-height:2.15;letter-spacing:1px;color:#7d8076;margin:0 0 25px}.timer-card{padding:21px 24px 16px;background:#eeede4;border:1px solid #e2e2d6;border-radius:4px}.timer-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:1px}.duration-tag{font:8px/1 Arial,sans-serif;letter-spacing:1.2px;border:1px solid #cfcebe;padding:5px 7px;border-radius:2px;color:#828571}.time-row{display:flex;align-items:center;justify-content:space-between;margin:11px 0 16px}.time-display{font:52px/1.1 Georgia,"Times New Roman",serif;letter-spacing:1px;font-variant-numeric:tabular-nums}.time-display>span{color:#999d8d;padding:0 3px}.phase{font:8px/1 Arial,sans-serif;letter-spacing:1.7px;color:#838875}.progress-track{height:2px;background:#d7d9cb;overflow:hidden}.progress-track>div{height:100%;width:0;background:#738364}.status{margin:12px 0 0;min-height:18px;font-size:10px;line-height:1.8;color:#7e8273;letter-spacing:.4px}.actions{display:flex;align-items:center;gap:17px;padding:23px 0}.flip-button{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;border:1px solid #637153;box-shadow:0 5px 12px #50603c1a;transition:background .2s,transform .2s;flex:none;display:grid;place-items:center}.flip-button:hover{background:#56664b;transform:rotate(12deg)}.flip-button:active{transform:scale(.95)}.flip-button:disabled{opacity:.65}.flip-button svg{width:30px;height:30px}.action-copy strong{font-size:12px;font-weight:500;letter-spacing:1px}.action-copy span{display:block;font-size:9px;margin-top:6px;color:#8d8e82;line-height:1.7}.reset-button{border:0;background:transparent;color:#95998a;margin-left:auto;padding:10px}.reset-button svg{width:19px;height:19px}.sensor-card{display:flex;align-items:flex-start;gap:14px;border-top:1px solid var(--line);padding-top:21px}.phone-icon{width:22px;height:29px;flex:none;color:#858c78;margin-top:3px}.sensor-content strong{font-size:11px;font-weight:500;letter-spacing:.7px}.sensor-content p{font-size:10px;line-height:1.9;color:#8b8d80;margin:6px 0 9px}.sensor-content button{border:0;border-bottom:1px solid #a1ab92;background:transparent;color:#637453;padding:0 0 4px;font-size:10px;letter-spacing:.5px}.sensor-content button span{margin-left:10px}.hint{font-size:9px;color:#96968a;line-height:1.8;margin-top:18px}footer{border-top:1px solid var(--line);padding:23px 0 28px;display:flex;justify-content:space-between;color:#96988b;font-size:9px;letter-spacing:1px}footer>span:first-child{font:8px/1.8 Arial,sans-serif;letter-spacing:1.7px}.footer-dot{padding:0 7px}
@media(min-width:1400px){.app-shell{padding:0 72px}main{padding-top:55px;padding-bottom:55px;gap:85px}}
@media(max-width:900px){.app-shell{padding:0 30px}main{gap:30px}.stage-heading{padding:0}.material-label{font-size:7px}h1{font-size:41px}.controls{max-width:none}.time-display{font-size:46px}.timer-card{padding:17px 19px}.action-copy span{font-size:8px}.actions{gap:12px}}
@media(max-width:650px){.app-shell{padding:0 23px}.site-header{height:77px}.brand{font-size:20px;gap:10px}.brand-sub{font-size:7px}.brand>svg{width:20px;height:29px}.header-note{font-size:9px;letter-spacing:.5px}main{display:flex;flex-direction:column;gap:19px;padding:24px 0 28px}.hourglass-stage{width:100%;max-width:380px;align-self:center}.stage-heading{padding:0 8px}.eyebrow{font-size:9px;letter-spacing:2px}.material-label{font-size:7px}.canvas-wrap{height:355px;aspect-ratio:auto}.stage-caption{font-size:9px;margin-top:1px;gap:14px}.controls{width:100%;max-width:380px;padding:0}.edition,h1,.intro{display:none}.timer-card{padding:14px 20px 12px}.timer-meta{font-size:10px}.time-row{margin:7px 0 12px}.time-display{font-size:43px}.status{margin-top:9px;font-size:9px}.actions{padding:18px 0;gap:15px}.flip-button{width:59px;height:59px}.action-copy span{font-size:9px}.sensor-card{padding-top:17px}.hint{font-size:8px;margin-bottom:0}footer{padding:19px 0;gap:15px;font-size:8px}footer>span:first-child{font-size:7px;letter-spacing:1px}}
@media(max-width:360px){.app-shell{padding:0 17px}.canvas-wrap{height:300px}.header-note{font-size:8px}.action-copy span{font-size:8px}.stage-caption{font-size:8px}.timer-card{padding:12px 17px}.time-display{font-size:39px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.mode-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0 0 13px}.mode-option{min-width:0;border:1px solid #d9d8cc;background:#f7f5ef;color:#73776c;border-radius:5px;padding:8px 3px 7px;line-height:1;transition:.18s ease}.mode-option b{font:19px/1 Georgia,serif;font-weight:400}.mode-option span{font-size:8px;margin-left:1px}.mode-option small{display:block;margin-top:5px;font:6px/1 Arial,sans-serif;letter-spacing:.7px}.mode-option:hover{border-color:#9aa38e;transform:translateY(-1px)}.mode-option.active{background:#66765b;color:#fff;border-color:#66765b;box-shadow:0 4px 10px #51604424}.mode-option.oil-option.active{background:linear-gradient(135deg,#a52072,#ed704b);border-color:#c33a76}body[data-mode="future"]{--accent:#3c7181}body[data-mode="oil"]{--accent:#a72c73}
@media(max-width:650px){.mode-picker{margin-bottom:11px;gap:4px}.mode-option{padding:7px 2px 6px}.mode-option b{font-size:17px}.mode-option small{font-size:5.5px}.canvas-wrap{height:330px}}