body[data-hero]:not([data-hero=""]){background:var(--hero-bg)}
#hero-change{display:flex;align-items:center;gap:8px;background:var(--hero-bg,#ecebdc);color:var(--ink);border:1px solid var(--line);padding:6px 10px;font-size:14px;white-space:nowrap;margin-left:auto;min-height:44px}
#hero-change svg{width:32px;height:32px;border-radius:8px}#hero-change+#sound{margin-left:0}
#hero-dialog{width:min(940px,calc(100% - 24px));max-width:940px;max-height:calc(100dvh - 24px);padding:30px;background:#fffefb;border:0;box-shadow:0 24px 90px #172e4b55}
#hero-dialog::backdrop{background:#152a45b8;backdrop-filter:blur(5px)}
.hero-picker-heading{text-align:center;color:#23364f}.hero-picker-heading h2{font:850 clamp(26px,4vw,38px)/1.15 system-ui;margin:8px 0}.hero-picker-heading p{font-size:17px;margin:12px 0 22px}.hero-picker-heading .eyebrow{color:#627088}
.hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hero-choice{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;margin:0!important;padding:12px!important;background:var(--choice-bg);color:#26364a;border:2px solid transparent;border-radius:24px;text-align:center;transition:transform .15s,border-color .15s}
.hero-choice:hover{transform:translateY(-4px);filter:none;border-color:var(--choice-color)}.hero-choice:focus-visible{outline:4px solid var(--choice-color)}
.hero-choice svg{width:100%;max-width:180px;margin-bottom:7px}.hero-choice strong{font:850 26px system-ui}.hero-choice>span{font-size:14px}.hero-choice small{font-size:12px;font-weight:500}.hero-choice b{background:var(--choice-color);color:white;width:100%;padding:10px 3px;border-radius:12px;margin-top:10px;font-size:15px}
.hero-picker-note{font-size:14px;text-align:center;color:#566477;margin:20px 0 8px}#hero-dialog>[data-hero-close]{display:block;margin:12px auto 0;font-size:14px;color:#46556b;background:#edf0f4}
.hero-companion{display:flex;align-items:center;gap:24px;max-width:790px}.hero-companion>svg{width:180px;min-width:180px;filter:drop-shadow(0 10px 0 #00000008)}.hero-companion h1{font-family:system-ui;font-weight:850}.hero-companion .secondary{font-size:13px;padding:8px 12px}.hero-companion .lead{margin:10px 0 14px}
.hero-mini{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding:10px 14px;border-radius:18px;background:var(--paper);border:1px solid var(--line)}.hero-mini svg{width:54px;flex:none}.hero-mini span{font-size:15px}.hero-mini small{display:block;font-size:12px;opacity:.75}
body[data-hero]:not([data-hero=""]) .village{background:linear-gradient(var(--hero-sky) 0%,var(--paper) 46%,var(--hero-ground) 46%,var(--hero-bg) 100%)}
body[data-hero]:not([data-hero=""]) .sky-label{font:800 24px system-ui}body[data-hero]:not([data-hero=""]) .open small{background:var(--green)}
body[data-hero=cubes] .house{border-radius:0;background:#c89767;border-color:#6e5035}body[data-hero=cubes] .open .house:before{border:0;left:-4px;top:-15px;width:140px;height:18px;background:#6ba63e;box-shadow:0 -8px 0 #95cd59}body[data-hero=cubes] .door,body[data-hero=cubes] .window{border-radius:0}body[data-hero=cubes] .sun{border-radius:0}body[data-hero=cubes] .button{border-radius:8px}
body[data-hero=creatures] .open .house:before{border-bottom-color:#e6a759}body[data-hero=creatures] .open .house{background:#fdf2d7;border-color:#8a6945}body[data-hero=creatures] .village:after{background:#bbebfc}
body[data-hero=cosmos] .house{border-radius:40px 40px 12px 12px;background:#ece7ff;border-color:#7968ad}body[data-hero=cosmos] .house:before{border-bottom-color:#9b85d8}body[data-hero=cosmos] .sun{background:#ffd293;box-shadow:0 0 0 12px #f3b76555}body[data-hero=cosmos] .village:after{background:#dfd5f4}
body[data-hero=foret] .open .house{background:#e8d5ab;border-color:#805d51}body[data-hero=foret] .open .house:before{border-bottom-color:#866fa1}body[data-hero=foret] .window{background:#ecd5ed}body[data-hero=foret] .village:after{background:#eddbef}
body[data-hero]:not([data-hero=""]) .mobile-category{background:var(--paper);border-color:var(--hero-ground);color:var(--ink)}body[data-hero]:not([data-hero=""]) .mobile-themes button,body[data-hero]:not([data-hero=""]) .mobile-choices button{color:var(--ink)}body[data-hero]:not([data-hero=""]) .progress-track span{background:var(--green)}
@media(max-width:760px){#hero-dialog{padding:20px 16px}.hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hero-choice svg{max-width:140px}.hero-choice strong{font-size:23px}.hero-choice b{padding:8px 0}.hero-companion{gap:14px}.hero-companion>svg{width:105px;min-width:105px}.hero-companion h1{font-size:29px}.hero-companion .lead{font-size:15px}.hero .score{display:none}body[data-hero=cubes] .open .house:before{width:120px}body[data-hero]:not([data-hero=""]) .sky-label{font-size:18px;max-width:75%}#hero-change{margin-left:auto}#hero-change span{display:none}body:has(#mobile-next) #hero-change{padding:3px;min-height:36px}body:has(#mobile-next) #hero-change svg{width:28px;height:28px}body:has(#mobile-next) #mobile-next{box-shadow:0 0 0 10px var(--hero-bg,#f7f4e8),0 8px 28px #233e3833}}
@media(max-height:750px) and (max-width:760px){#hero-dialog{padding:14px}.hero-picker-heading h2{font-size:25px}.hero-picker-heading p{font-size:14px;margin:8px 0 12px}.hero-choice svg{max-width:100px}.hero-choice{padding:8px!important;border-radius:18px}.hero-choice>span{font-size:12px}.hero-choice small{font-size:11px}.hero-picker-note{font-size:12px;margin:12px 0 6px}}
@media(prefers-reduced-motion:reduce){.hero-choice{transition:none}.hero-choice:hover{transform:none}}

.building-subject{display:block;font-size:13px;font-weight:800;margin:3px 0 7px}.hero-cheer{font-weight:700;color:var(--green)}