:root{
 --ink:#2f444f; --deep:#486675; --deep2:#395a69; --paper:#fbf7ed; --paper2:#f6f0e4;
 --blue:#90aebb; --mint:#b7cdbf; --pink:#d8b4aa; --gold:#d3a954; --line:#d9cba9;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#d5e0e1;color:var(--ink)}
body{font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.7;background:linear-gradient(180deg,#c8d7da,#dfe6e3 48%,#cedbdc)}
button{font:inherit;color:inherit}.serif{font-family:"Yu Mincho","Hiragino Mincho ProN",serif}
.app{width:min(100%,480px);min-height:100svh;margin:auto;background:var(--paper);position:relative;overflow:hidden;box-shadow:0 0 55px #26414d22}
.app::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 10%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 82% 16%,#d3a95455 0 1px,transparent 1.6px);opacity:.55}
.top{height:54px;padding:15px 22px 0;display:flex;justify-content:space-between;align-items:flex-start;font-size:12px;letter-spacing:.06em;position:relative;z-index:5}.top span:last-child{opacity:.7}
.screen{display:none;min-height:calc(100svh - 54px);position:relative;padding:12px 24px 30px}.screen.active{display:block;animation:fade .28s ease-out}@keyframes fade{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
.primary{width:100%;border:0;border-radius:18px;background:linear-gradient(180deg,#3d5b69,#2e4a57);color:#fffaf0;font-weight:700;letter-spacing:.07em;padding:15px 18px;min-height:54px;box-shadow:0 6px 15px #233e4823;cursor:pointer}.primary:active{transform:translateY(1px)}
/* title */
.title-screen{background:linear-gradient(180deg,#5b7886 0,#4a6877 35%,#f8f3e8 35%,#fbf7ed 100%);color:#fffaf2;padding-top:10px}.title-screen::before{content:"";position:absolute;inset:0 0 auto;height:38%;background:radial-gradient(circle at 22% 22%,#fff6d344 0 1px,transparent 1.6px),radial-gradient(circle at 78% 18%,#fff4cf66 0 1.3px,transparent 1.8px);pointer-events:none}.title-screen .copy{color:var(--ink);text-align:center;margin-top:-16px;position:relative;z-index:3}.title-screen .hero-title{font-size:31px;line-height:1.48;font-weight:500;letter-spacing:.03em;margin:0 0 12px}.title-screen .lead{font-size:15px;margin:0 auto 20px;max-width:330px;color:#5c6a6f}.hero{height:325px;position:relative;display:grid;place-items:center}.hero .box{width:290px;position:relative;z-index:2;filter:drop-shadow(0 15px 18px #233c4542)}.hero .plant{position:absolute;width:165px;left:-25px;bottom:18px;transform:rotate(-17deg);z-index:1}.hero .ribbon{position:absolute;width:250px;right:-62px;top:20px;opacity:.9;transform:rotate(7deg)}.moon{position:absolute;right:30px;top:18px;font-size:48px;color:#f5d997;font-family:serif}.stars{position:absolute;inset:0;pointer-events:none}.stars i{position:absolute;color:#f6d487;font-style:normal}.stars i:nth-child(1){left:12%;top:13%;font-size:22px}.stars i:nth-child(2){right:18%;top:34%;font-size:15px}.stars i:nth-child(3){left:28%;top:45%;font-size:14px}.title-screen .primary{max-width:330px;margin:0 auto;display:block}
/* question */
.question-screen{background:var(--paper)}.orn-plant{position:absolute;width:135px;right:-34px;top:35px;opacity:.92;transform:rotate(18deg)}.orn-tag{position:absolute;width:88px;left:-26px;bottom:20px;opacity:.5;transform:rotate(-18deg)}.qhead{display:flex;align-items:center;justify-content:space-between;margin:5px 0 9px;font-size:13px;letter-spacing:.1em}.progress{height:5px;border-radius:8px;background:#d8d8d0;overflow:hidden;margin-bottom:20px}.progress span{display:block;width:14.3%;height:100%;background:var(--blue)}.qvisual{height:150px;position:relative;display:grid;place-items:center}.qvisual .envelope{width:145px;filter:drop-shadow(0 7px 9px #314b531c)}.qvisual:after{content:"✦";position:absolute;right:25%;top:10%;color:var(--gold);font-size:20px}.qtitle{text-align:center;font-size:27px;line-height:1.55;font-weight:500;margin:8px 0 3px}.qsub{text-align:center;font-size:14px;color:#708084;margin:0 0 20px}.options{display:grid;gap:11px;position:relative;z-index:2}.option{min-height:59px;border:1px solid #bdc3ba;background:#fffdfa;border-radius:15px;padding:10px 14px;display:grid;grid-template-columns:38px 1fr 18px;gap:9px;align-items:center;text-align:left;font-size:16px;cursor:pointer}.option .icon{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#f2eee2;font-size:17px}.option:hover{background:#f7faf5;border-color:#9eb9ae}.back{background:none;border:0;font-size:13px;margin-top:18px;padding:6px 0;cursor:pointer;color:#5f6d72}
/* result */
.result-screen{background:linear-gradient(180deg,#4f6e7c 0 17%,#f8f3e9 17% 100%);padding-top:16px}.result-card{background:#fffaf0;border:1px solid #dec99a;border-radius:26px;padding:23px 20px 22px;box-shadow:0 13px 35px #29465228;position:relative;overflow:hidden}.result-card:before{content:"";position:absolute;inset:10px;border:1px solid #d9b66f66;border-radius:19px;pointer-events:none}.result-card .cornerplant{position:absolute;width:128px;left:-38px;bottom:-23px;transform:rotate(-13deg);opacity:.78}.result-card .ribbon{position:absolute;width:170px;right:-55px;top:4px;opacity:.55;transform:rotate(21deg)}.opened{text-align:center;font-size:14px;letter-spacing:.14em;margin-bottom:4px}.result-art{height:245px;display:grid;place-items:center;position:relative}.result-art:before{content:"";position:absolute;width:210px;height:130px;background:radial-gradient(ellipse,#d7e3df 0,#e6d7bb66 43%,transparent 72%);filter:blur(4px)}.result-art img{width:225px;position:relative;z-index:2}.result-id{border:1px solid #a9b0a8;border-radius:999px;width:max-content;margin:-4px auto 12px;padding:4px 12px;font-size:11px;letter-spacing:.1em;background:#fbf8ef}.result-title{text-align:center;font-size:31px;line-height:1.5;font-weight:500;margin:0 0 12px;position:relative;z-index:2}.result-copy{text-align:center;font-size:16px;line-height:1.95;margin:0 6px 18px;color:#536267}.why{border:1px solid #bacbc0;background:#eef4ef;border-radius:15px;padding:14px 16px;font-size:15px;line-height:1.85;position:relative;z-index:2}.why strong{display:block;font-size:13px;margin-bottom:4px;color:#62757b}.result-screen .primary{margin-top:15px}.secondary-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}.secondary{border:1px solid #819299;background:#fffaf0;border-radius:13px;padding:11px;font-size:14px;min-height:46px}
@media(max-width:390px){.screen{padding-left:18px;padding-right:18px}.hero{height:305px}.hero .box{width:265px}.title-screen .hero-title{font-size:28px}.qtitle{font-size:25px}.option{font-size:15px}.result-title{font-size:28px}.result-copy,.why{font-size:14px}}

.result-copy,.why{font-size:16px!important}.result-title{overflow-wrap:anywhere}.result-art img{width:225px;height:225px;object-fit:contain}.option:focus-visible,.primary:focus-visible,.secondary:focus-visible,.back:focus-visible{outline:3px solid #86afa5;outline-offset:3px}.option.selected{background:#e6efe9;border-color:#86afa5}.secondary,.primary{cursor:pointer}.progress span{transition:width .2s}.screen[hidden]{display:none!important}.qvisual{height:125px}.qvisual .envelope{width:125px;height:125px;object-fit:contain}.qtitle{white-space:pre-line}button:disabled{cursor:wait}.save-dialog{width:min(95%,430px);padding:16px;border:1px solid #d3a954;border-radius:15px;background:#fbf7ed}.save-dialog img{width:100%;display:block}.save-dialog::backdrop{background:#2f444fcc}.save-dialog p{font-size:14px}.result-status{font-size:14px}.result-card{min-height:570px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
#opening{background:linear-gradient(180deg,#5b7886,#486675);color:#fffaf2;padding-top:65px}.opening-title{text-align:center;font-size:28px;line-height:1.7;font-weight:500}.opening-note{text-align:center;font-size:16px;line-height:1.9}#opening .hero{height:370px;animation:openlight 1.6s ease-in-out}@keyframes openlight{50%{filter:brightness(1.12)}}#status{margin:0;padding:0 20px;font-size:14px} .top{font-size:12px}