@font-face{font-family:Yojo;src:url('yojo-serif.woff') format('woff');font-weight:500;font-display:swap}
:root{--paper:#fffdf6;--page:#f3f3e7;--ink:#354537;--sub:#56634f;--accent:#728d4c;--soft:#edf0d8;--line:#d3d8bd;--serif:Yojo,'Yu Mincho',serif;--sans:system-ui,'Yu Gothic',sans-serif}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--page);font-family:var(--serif);font-weight:500;line-height:1.8;-webkit-text-size-adjust:100%}body.night{--paper:#f9faff;--page:#e5ebf3;--ink:#314465;--sub:#53647d;--accent:#5675a6;--soft:#e7edf6;--line:#ced8e7}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.65}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:4px}[hidden]{display:none!important}
.wrap{width:min(100%,500px);margin:24px auto}.paper{position:relative;background:var(--paper);padding:28px 28px 20px;box-shadow:0 8px 40px #3441340d;border:1px solid var(--line);border-radius:6px}header{text-align:center}.eyebrow{font-size:15px;letter-spacing:.16em;margin:0 0 4px}.headline{font-size:45px;line-height:1.45;letter-spacing:.1em;font-weight:500;margin:0}.headline-word{color:#b6743d;font-size:1.18em}.night .headline-word{color:#55759c}.subtitle{font-size:16px;margin:7px 0 0;color:var(--sub)}.date{font-family:var(--sans);font-size:12px;color:var(--sub);margin:8px 0 0}.date strong{font-weight:500}
.opening{margin-top:12px}.scene-holder{margin:0 -20px;height:250px}.scene{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.welcome{text-align:center}.lead{font-size:17px;line-height:1.9;margin:6px 0 16px}.tap{display:block;width:100%;min-height:54px;padding:12px 16px;border:1px solid var(--accent);border-radius:999px;background:var(--accent);color:#fff;font-size:18px;letter-spacing:.06em}.tap:hover{filter:brightness(.95)}.arrow{padding-left:8px}.intro-note{font-size:13px;line-height:1.8;color:var(--sub);text-align:center;background:var(--soft);border-radius:14px;padding:12px;margin:18px 0 0}
.result{margin-top:18px;text-align:center;animation:unfold .25s ease-out;outline:none}.result-mark{font-size:13px;color:var(--sub);margin:0 0 7px;letter-spacing:.12em}.fortune-name{font-size:clamp(29px,8vw,39px);letter-spacing:.035em;line-height:1.6;font-weight:500;margin:0;background:var(--soft);border-radius:48% 45% 32% 40% / 24% 33% 28% 35%;padding:3px 4px;overflow-wrap:anywhere}.fortune-image{display:block;width:100%;height:240px;object-fit:contain;mix-blend-mode:multiply;margin:8px auto}.fortune-line{font-size:20px;line-height:1.8;color:var(--accent);margin:9px 0 13px;text-wrap:balance}.fortune-message{font-size:17px;line-height:1.95;margin:0 auto 15px;text-align:left;max-width:360px;overflow-wrap:anywhere}.season-note{font-family:var(--sans);font-size:12px;color:var(--sub);margin:12px 0 17px}.again{background:transparent;color:var(--ink);border-color:var(--line);font-size:16px;min-height:48px}.result-actions{display:flex;gap:10px;margin-top:10px}.line-button{flex:1;min-width:0;min-height:48px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);padding:9px 6px;font-family:var(--sans);font-size:14px}.line-button.primary{background:var(--accent);color:white;border-color:var(--accent)}.status{font-family:var(--sans);font-size:13px;text-align:center;min-height:24px;margin:10px 0 0}.about{margin-top:5px;color:var(--sub);font-family:var(--sans);font-size:12px}.about summary{min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer}.about summary:after{content:' ＋'}.about[open] summary:after{content:' −'}.about p{margin:0 0 12px}.footnote{text-align:center;font-size:12px;margin:10px 0 0;color:var(--sub)}.footer{text-align:center;font:11px/1.8 var(--sans);color:var(--sub);padding:12px 10px}.footer span{display:inline-block}
dialog{width:min(calc(100% - 24px),440px);border:1px solid var(--line);border-radius:12px;padding:18px;color:var(--ink);background:var(--paper);max-height:90dvh;overflow:auto}dialog::backdrop{background:#14202f99}dialog img{display:block;width:100%;height:auto;margin:12px 0}dialog p{font:14px/1.8 var(--sans)}dialog button{margin-top:10px}dialog textarea{width:100%;height:150px;font:16px/1.8 var(--sans);padding:10px}.save-link{display:block;color:var(--ink);text-align:center;min-height:44px;padding:10px}
@keyframes unfold{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important}}
@media(max-width:500px){.wrap{margin:0 auto}.paper{border:0;border-radius:0;padding:calc(20px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 18px max(20px,env(safe-area-inset-left));box-shadow:none}.scene-holder{height:235px}.fortune-image{height:225px}.headline{font-size:41px}.footer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}
@media(max-width:350px){.paper{padding-left:16px;padding-right:16px}.scene-holder{margin:0 -10px;height:205px}.headline{font-size:37px}.fortune-image{height:205px}.fortune-line{font-size:19px}.subtitle{font-size:15px}.fortune-message{font-size:17px}.result-actions{gap:7px}.line-button{font-size:13px}}
@media(max-height:700px){.scene-holder{height:190px}.lead{margin:4px 0 12px}.opening{margin-top:8px}}