/* One portrait canvas on every device, including wide desktop screens. */
html:root{background:#e9e7e3}
body{width:100%;max-width:540px;min-height:100vh;min-height:100dvh;margin:0 auto;background:var(--paper)}
.header,.home,.flow,footer{width:100%;max-width:none}
.preview-ribbon{padding:9px 16px;gap:10px;font-size:.65rem;flex-wrap:wrap;text-align:center}
.header{padding:20px 22px;gap:12px}
.brand{font-size:.95rem;gap:8px}.brand-mark{font-size:2.1rem}.brand-by{font-size:.65rem}
.language{gap:4px}.language select{min-height:44px;max-width:130px;font-size:.85rem}
.home{padding:30px 24px 0}.home h1{font-size:3rem}.title-logo{width:100%;max-height:115px}
.eyebrow{font-size:.7rem;letter-spacing:.1em;margin-bottom:16px}
.home .intro{font-size:1rem;max-width:340px;margin-top:22px}
.parade{width:100%;max-width:460px;margin:24px auto 20px}
.parade .pet-art{width:37%;margin:0 -3%}
.home .primary{min-width:240px}.steps-caption{gap:10px;font-size:.75rem;margin-top:30px;flex-wrap:wrap}
.flow{padding:12px 22px 28px}.flow-top{gap:12px;margin-bottom:22px;align-items:center}
.progress{gap:10px;font-size:.7rem}.progress span{gap:5px}.progress i{width:21px;height:21px;flex:none}
.flow-title{margin-bottom:20px;text-align:center}.flow-title h1,.center-page h1{font-size:2.15rem;line-height:1.15}
.flow-title p,.center-page>p{font-size:.9rem}
.studio{grid-template-columns:minmax(0,1fr);gap:16px}
.stage{min-height:0;height:310px;border-radius:20px}
#live-pet{width:100%;max-width:300px}#live-pet .pet-art,.stage .pet-art{max-width:none}
.stage-label{top:14px;left:16px;font-size:.65rem}.stage-bottom{bottom:12px;left:12px;right:12px;font-size:.7rem}
.tools{padding:18px;border-radius:20px}.tabs{gap:4px;padding-bottom:8px}
.tab{min-height:64px;padding:8px 4px;font-size:.8rem}.tab .glyph{height:30px}
.tools .options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:0;max-height:270px;flex:none;padding:4px;margin-top:8px;overscroll-behavior-y:contain}
.tools .option .pet-art{height:88px;max-width:118px}.option{font-size:.8rem}
.palette{gap:5px}.palette .swatch{width:44px;height:44px;flex:none;border:6px solid var(--white)}
.swatch.chosen:after{inset:0}.tone-controls{margin-top:0}
.tools input[type=range]{height:28px;margin:0;cursor:pointer}
.slider-label{margin-top:12px}.tools .tool-bottom{margin-top:18px;padding-top:14px}
.tool-bottom .button{min-height:48px}
.stack-flow{max-width:none}.stack-flow .stack-board{min-height:370px;padding:28px 18px}
.stack-interactive{width:min(250px,70%)}.stack-flow .add-outline{min-height:55px}
.center-page{width:100%;margin:10px auto}.center-page .actions{display:flex;gap:10px;margin-top:24px}
.center-page .actions .button{flex:1;min-width:0;padding:14px 16px;font-size:.95rem}
.game-photo{width:100%;max-width:410px;margin-top:24px}
.name-field{font-size:1.6rem}.name-helper{line-height:1.5}.name-helper>span:last-child{white-space:nowrap}
.result-links{gap:4px 16px;margin-top:16px}.result-links .small-link{font-size:.75rem}
.game-section,.flow .game-section{margin-top:38px;padding:25px 0;gap:16px;width:100%}
.game-copy h2{font-size:1.6rem}.game-copy p{font-size:.85rem;max-width:none}
.store-row{gap:6px}.store-badge img{height:40px}.store-badge.google img{height:58px}
.preview-spec{margin-top:28px;padding:16px}.preview-spec p{font-size:.8rem}
footer{padding:28px 20px 24px}.social{gap:8px;margin-bottom:20px}.footer-bottom{gap:12px;font-size:.75rem}
.toast{width:max-content;max-width:min(492px,calc(100% - 32px));bottom:max(18px,env(safe-area-inset-bottom))}
dialog{max-width:492px;max-height:calc(100dvh - 32px);overflow-y:auto;padding:24px}
@media(max-width:380px){
 .header{padding:14px 16px}.brand{font-size:.85rem}.brand-mark{font-size:1.8rem}.brand-by{font-size:.6rem}
 .home{padding:24px 18px 0}.flow{padding:10px 16px 24px}
 .flow-top{gap:8px}.progress{gap:7px;font-size:.65rem}.progress span{gap:4px}.progress i{width:19px;height:19px}
 .flow-title h1,.center-page h1{font-size:1.9rem}.stage{height:270px}#live-pet{max-width:260px}
 .tools{padding:12px}.tools .option .pet-art{height:72px}.tools .options{max-height:234px}
 .center-page .actions .button{font-size:.85rem;padding:13px 10px;gap:7px}
 .steps-caption{font-size:.68rem;gap:8px}.social{gap:3px}.store-badge img{height:36px}.store-badge.google img{height:52px}
}

/* Soft typography and compact, clearly interactive header controls. */
html:root{font-family:Mali,'Hiragino Maru Gothic ProN','Yu Gothic','PingFang TC','Microsoft YaHei',sans-serif}
h1,h2,h3,.display,.name-field{font-family:inherit;letter-spacing:0;font-weight:600}
.flow-title h1,.center-page h1{line-height:1.35;font-size:1.95rem}
.game-copy h2{line-height:1.4;font-size:1.5rem}
p{line-height:1.8}.button{font-weight:600}.eyebrow{letter-spacing:.04em}
.header{align-items:center;gap:12px}
.brand{min-height:48px;display:inline-flex;align-items:center;gap:9px;padding:8px 14px;background:var(--white);border:1px solid var(--line);border-radius:18px;font-size:.95rem;font-weight:600;letter-spacing:0}
.brand:hover{background:var(--soft);border-color:#c2ad78}.brand:active{transform:translateY(1px)}
.home-cube,.language-icon{flex:none;display:block}
.language{display:flex;align-items:center;gap:7px;min-height:48px;padding:0 10px 0 13px;background:var(--white);border:1px solid var(--line);border-radius:18px;font-size:.9rem;cursor:pointer}
.language:hover{background:#f8f3e9}.language:focus-within{outline:3px solid #9a6518;outline-offset:3px}
.language select{min-height:46px;max-width:126px;padding:8px 2px;border:0;background:transparent;font-family:inherit;font-size:.85rem;cursor:pointer}
.language select:focus-visible{outline:none}
/* Nine colors always occupy one row; small screens keep a 44px tall hit area. */
.palette{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;margin-top:8px}
.palette .swatch{width:100%;height:44px;border:0;background:transparent;position:relative}
.palette .swatch:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(32px,calc(100% - 6px));aspect-ratio:1;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #2b292512}
.palette .swatch.chosen:before{box-shadow:0 0 0 2px var(--white),0 0 0 3.5px var(--ink)}
.palette .swatch.chosen:after{content:none}
.game-section{text-align:center;justify-content:center}.game-copy{min-width:0}.game-copy p{margin:10px auto 0;max-width:440px}
.store-row{justify-content:center}.store-note{text-align:center}
@media(max-width:380px){
 .brand{font-size:.85rem;padding:8px 11px;gap:6px}.home-cube{width:25px;height:25px}
 .language{padding-left:10px;gap:4px}.language select{font-size:.8rem;max-width:112px}
 .flow-title h1,.center-page h1{font-size:1.7rem}.game-copy h2{font-size:1.35rem}
}

/* Full-width sliders with compact labels and no secondary pet preview. */
.tone-panel{margin:0;padding:0}
.tone-panel .tone-controls{min-width:0;margin:0}
.tone-panel .slider-label{margin:0;font-size:.75rem;gap:8px;align-items:center;line-height:1.2}
.tone-panel output{flex:none;font-variant-numeric:tabular-nums}
.tone-panel input[type=range]{display:block;margin:0;width:100%;height:28px;min-height:28px}

/* Final interaction and accessibility details. */
[hidden]{display:none!important}
.skip-link{position:fixed;top:8px;left:50%;transform:translate(-50%,-150%);z-index:40;padding:12px 18px;background:var(--ink);color:white;border-radius:12px}
.skip-link:focus{transform:translate(-50%,0)}
.noscript-note{padding:24px;text-align:center}
.dialog-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:22px}
#new-family-description{margin-top:16px}
#app:focus,h1:focus{outline:none}
button,a,input,select{-webkit-tap-highlight-color:transparent}
.button,.small-link,.text-button{touch-action:manipulation}
.small-link{min-height:32px}
.game-photo{background:#e9e2ed}
.tools input[type=range]{touch-action:pan-y}
@media(max-width:350px){.progress{gap:5px;font-size:.6rem}.progress i{width:18px;height:18px}.flow-top{gap:5px}.text-button{font-size:.8rem}.result-links{gap:0 12px}}