
:root{--ink:#14284d;--blue:#078fca;--line:#b5e1f2;--pink:#e85268}*{box-sizing:border-box}body{margin:0;font:16px/1.6 system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;background:linear-gradient(180deg,#f0fbff,#fff 40%,#f5fcf8);color:var(--ink)}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #e8834d;outline-offset:3px}.page{width:min(100%,960px);margin:auto;padding:18px 18px 42px}.brand{font-size:13px;font-weight:800;letter-spacing:.06em;margin:0 0 13px}.frame{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(148deg,#effaff,#fff 40%,#fcfffa);border:2px solid var(--line);border-radius:28px;padding:24px 18px 28px;box-shadow:0 9px 30px #87c4d51c}.screen[hidden]{display:none!important}.eyebrow{font-size:13px;color:#047fab;font-weight:800;margin:0 0 8px}.title{text-align:center;font-size:26px;line-height:1.35;margin:0 0 10px;font-weight:900}.rainbow{background:linear-gradient(105deg,#37bef0 3%,#767be7 42%,#f48da4 70%,#ffc955);background-clip:text;-webkit-background-clip:text;color:transparent}.chip{display:table;margin:10px auto 0;background:#fff0a7;padding:5px 15px;border-radius:50px;font-size:13px;font-weight:800}.hero-art{height:232px;position:relative;margin:5px 0}.robot{width:220px;height:220px;object-fit:contain;display:block;margin:auto;position:relative;z-index:2}.leaf{position:absolute;width:58px;bottom:0;z-index:1}.leaf.left{left:1px;transform:rotate(-15deg)}.leaf.right{right:1px;transform:scaleX(-1) rotate(-15deg)}.cloud{position:absolute;width:110px;bottom:0;opacity:.65}.cloud.left{left:-20px}.cloud.right{right:-20px}.intro-copy{text-align:center;font-weight:700;font-size:15px;margin:3px 0 18px}.primary{display:block;width:100%;min-height:56px;background:linear-gradient(#f78a97,#e95269);color:white;border:2px solid #d94c65;border-radius:40px;box-shadow:inset 0 0 0 3px #ffc4ca;font-size:19px;font-weight:900;padding:10px 18px}.secondary{border:2px solid #7ac7e6;background:white;color:#087cab;border-radius:30px;padding:11px 20px;font-weight:800;min-height:46px}.muted{color:#536d80;font-size:12px}.center{text-align:center}.screenhead{display:flex;align-items:center;gap:12px;margin-bottom:14px}.mini-robot{width:112px;height:112px;object-fit:contain;flex:none}.progress{font-weight:800;font-size:13px;color:#0a89b9}.bar{height:9px;border-radius:20px;background:#e5f1f3;overflow:hidden;margin-top:8px}.bar>div{height:100%;border-radius:20px;background:linear-gradient(90deg,#76d7c4,#35b7e3);transition:width .2s}.question{font-size:23px;font-weight:900;line-height:1.45;margin:16px 0 7px}.options{display:grid;gap:12px;margin:16px 0}.option{display:flex;align-items:center;gap:14px;text-align:left;min-height:66px;width:100%;border-radius:19px;border:2px solid var(--border,#a6d9ed);background:var(--bg,#f3fbff);color:#143452;padding:12px 15px;font-weight:800}.option:nth-child(5n+2){--border:#8bdbb3;--bg:#f0fff7}.option:nth-child(5n+3){--border:#cfb0f8;--bg:#fbf5ff}.option:nth-child(5n+4){--border:#ffc18b;--bg:#fff7ee}.option:nth-child(5n+5){--border:#f4adc5;--bg:#fff3f8}.option .ico{width:39px;height:39px;flex:none;display:grid;place-items:center;border-radius:13px;background:white;font-size:22px}.navrow{display:flex;align-items:center;justify-content:space-between;gap:10px}.result-top{display:grid;grid-template-columns:105px 1fr;align-items:center;gap:12px}.result-top img{width:110px}.result-name{font-size:31px;line-height:1.2;font-weight:950;color:#087cab;overflow-wrap:anywhere}.result-reason{background:#fff9dc;border:1.5px solid #efdba0;border-radius:18px;padding:14px 16px;margin:14px 0}.detail{display:grid;gap:10px;margin:14px 0}.detail-card{border:1.5px solid #cce5e8;border-radius:16px;padding:12px;background:#fff}.detail-card b{display:block;font-size:12px;color:#35708a;margin-bottom:2px}.subhead{font-size:18px;margin:23px 0 12px}.altlist{display:grid;gap:10px}.alt{background:#fff;border:1.5px solid #d5e9ed;border-radius:15px;padding:12px 14px}.alt b{display:block}.actions{display:grid;gap:9px;margin-top:23px}.catalog-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.filters{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.filter{border:1.5px solid #afdcdf;border-radius:30px;background:#fff;padding:7px 12px;font-size:13px;font-weight:800;color:#2f6076}.filter[aria-pressed=true]{background:#138bb6;color:white;border-color:#138bb6}.catalog{display:grid;gap:10px}.service{border:1.5px solid #dae9ef;background:white;border-radius:18px;padding:13px 14px}.service b{font-size:17px}.service p{margin:4px 0;font-size:14px}.price{font-weight:800;color:#247e8e}.service a{font-size:13px;color:#087cab}.notice{margin-top:18px;padding:12px;background:#f4f8fa;border-radius:14px;font-size:12px;color:#506879}.decor{position:absolute;width:60px;right:-17px;bottom:-12px;opacity:.5;pointer-events:none}.footer{text-align:center;margin-top:16px;font-size:12px;color:#56728b}@media(min-width:700px){.page{padding:34px}.frame{padding:36px 42px}.hero-art{height:280px}.robot{width:270px;height:270px}.screenhead .mini-robot{width:135px;height:135px}.options{grid-template-columns:repeat(2,minmax(0,1fr))}.detail,.altlist,.catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.actions{grid-template-columns:repeat(2,minmax(0,1fr))}.result-top{grid-template-columns:150px 1fr}.result-top img{width:150px}}@media(max-width:350px){.page{padding:12px}.frame{padding:19px 13px}.title{font-size:23px}.question{font-size:20px}}

/* v0.2: subtle colorful line-work details, reusable existing assets */
.frame:before{content:"✦  ◇  ✧";position:absolute;right:17px;top:12px;letter-spacing:9px;color:#edc35d;font-size:18px;opacity:.75;pointer-events:none}
.option:hover{transform:translateY(-2px);box-shadow:0 5px 16px #84c3d02b;transition:transform .15s,box-shadow .15s}
.result-reason{position:relative;box-shadow:0 4px 15px #efdba027}
.result-reason:before{content:"✦";position:absolute;right:14px;top:6px;color:#edb751}
.service{box-shadow:0 3px 14px #86b7ca13}
.bar>div{box-shadow:0 0 8px #85dcdb}
@media(prefers-reduced-motion:reduce){.option:hover{transform:none;transition:none}.bar>div{transition:none}}

/* v0.3: results clarity and subtle celebration; no new image assets */
.why-points{display:grid;gap:8px;margin:12px 0}.why-point{background:#f2fbff;border-left:3px solid #70c9dd;border-radius:10px;padding:9px 11px;font-size:14px}.why-point::before{content:'✓  ';color:#098e9f;font-weight:900}.budget-note{background:#fff6ed;border:1.5px solid #f5c691;border-radius:13px;padding:12px 14px;margin:12px 0;font-size:13px}.result-link{display:grid;place-items:center;text-decoration:none;text-align:center}.alt .altreason{display:block;font-size:13px;color:#52728a;margin-top:3px}.option:active{transform:scale(.985)}.result-top img{animation:hello .65s ease-out both}.result-name{animation:reveal .5s ease-out both}.confetti{position:absolute;pointer-events:none;left:0;right:0;top:4px;text-align:center;color:#edaf43;font-size:25px;letter-spacing:12px;animation:fadeConfetti 1.8s ease-out forwards}@keyframes hello{0%{transform:translateY(14px) rotate(-6deg);opacity:0}70%{transform:translateY(-5px) rotate(3deg)}100%{transform:none;opacity:1}}@keyframes reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes fadeConfetti{0%{opacity:0;transform:translateY(8px)}25%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}@media(prefers-reduced-motion:reduce){.result-top img,.result-name,.confetti{animation:none}}

/* v0.4: approved artwork and palette retained; reserve space for decorations. */
[hidden]{display:none!important}
.frame{overflow:clip;padding-top:44px;padding-bottom:70px}
.frame:before{top:6px;font-size:16px;line-height:22px}
.decor{width:42px;height:42px;object-fit:contain;right:8px;bottom:8px;opacity:.5;z-index:-1}
.confetti{top:4px;line-height:24px;font-size:20px;letter-spacing:10px}
.filter{min-height:44px}
.option[aria-pressed=true]{outline:3px solid #1786aa;outline-offset:2px;box-shadow:inset 0 0 0 1px #1786aa}
.result-reason h3{margin:0 0 8px;font-size:16px}
.result-reason p{margin:0;font-size:15px;line-height:1.8}
.result-reason:before{display:none}
.why-points{grid-template-columns:1fr;margin:10px 0}
.why-point{font-size:13px}
.why-point::before{content:''}
.why-point b{display:block;color:#35708a;font-size:12px}
.altreason{line-height:1.7}
.alt a,.service a{display:inline-flex;align-items:center;min-height:44px;color:#087cab;font-size:13px}
.equal-badge{font-size:12px;color:#087cab;font-weight:800}
#shareText{width:100%;min-height:132px;resize:vertical;margin-top:14px;padding:12px;border:1.5px solid #afdcdf;border-radius:12px;font:14px/1.7 inherit;color:var(--ink);background:#fff}
.notice a{color:#087cab}
.screen h1:focus,.screen h2:focus{outline:none}
.service p{overflow-wrap:anywhere}
.result-top>div{min-width:0}
.rate-note{display:block;margin:6px 0}
@media(min-width:700px){.frame{padding-top:50px;padding-bottom:76px}.why-points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:350px){.frame{padding-top:40px;padding-bottom:66px}.result-top{grid-template-columns:75px minmax(0,1fr);gap:8px}.result-top img{width:75px}.result-name{font-size:26px}.catalog-top{align-items:flex-start}.catalog-top img{width:70px;height:70px}.catalog-top h2{font-size:22px!important}.frame:before{letter-spacing:6px}.why-point{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}.option:active{transform:none}.option,.bar>div{transition:none!important}.result-top img,.result-name{animation:none}}
.answer-summary{margin:10px 0 14px;font-size:13px}
.answer-summary summary{min-height:44px;display:flex;align-items:center;padding:8px 12px;cursor:pointer;border:1px solid #cce5e8;border-radius:12px;background:white;color:#35708a;font-weight:700}
.answer-summary summary::before{content:'▸';margin-right:8px}
.answer-summary[open] summary::before{content:'▾'}
.answer-summary summary:focus-visible{outline:3px solid #e8834d;outline-offset:2px}

/* v0.5: improve result reasoning only; preserve all other screen typography. */
.result-reason h3{font-size:20px;line-height:1.5;margin-bottom:10px}
.result-reason p{font-size:19px;line-height:1.65;line-break:strict;overflow-wrap:anywhere}
#result .answer-summary,#result .why-point{font-size:14px}
#result .why-point b{font-size:14px}
#result .budget-note{font-size:15px;line-height:1.65}
