/* Scene navigation: quiet type, drawn illustrations, clear reading order. */
.scene-home{padding:0 0 8px}
.home-heading{position:relative;display:flex;align-items:center;justify-content:space-between;gap:40px;min-height:215px;padding:23px 10px 34px 0}
.home-copy{min-width:0}
.home-heading h1{font-family:var(--display,var(--sans));font-size:52px;font-weight:500;line-height:1.38;letter-spacing:0;color:var(--ink)}
.home-heading h1 em{font:inherit;color:#74577f;white-space:nowrap}
.home-heading h1:focus,.scene-heading h1:focus{outline:none}
.home-art{display:block;flex:0 0 310px;width:310px;height:185px;margin-right:15px;pointer-events:none}
.home-art svg{display:block;width:100%;height:100%;overflow:visible}

.scene-board{display:grid;align-items:stretch;gap:18px}
.scene-board-primary{grid-template-columns:repeat(3,minmax(0,1fr))}
.scene-board-play{grid-template-columns:repeat(4,minmax(0,1fr))}
.scene-tile{--scene-bg:#ebe4ed;--scene-line:#ded2e2;position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:202px;padding:20px 21px 23px;border:1px solid var(--scene-line);border-radius:12px;background:var(--scene-bg);color:var(--ink);text-align:left;isolation:isolate;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}
.scene-tile:hover{transform:translateY(-3px);border-color:#b9a5c0;box-shadow:0 7px 18px #5748610a}
.scene-tile:active{transform:translateY(-1px)}
.scene-tile:focus-visible{outline:3px solid #876594;outline-offset:4px}
.scene-art{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:122px;height:94px;margin:0 auto 17px;pointer-events:none}
.scene-art svg{display:block;width:100%;height:100%;overflow:visible;transition:transform .25s ease}
.scene-tile:hover .scene-art svg{transform:translateY(-2px) rotate(-2deg)}
.scene-copy{position:relative;display:flex;flex:1;flex-direction:column;justify-content:flex-end;min-width:0}
.scene-title{display:block;font-family:var(--display,var(--sans));font-size:23px;font-weight:600;line-height:1.45;letter-spacing:0;white-space:nowrap}
.scene-caption{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:baseline;gap:2px 11px;min-height:22px;margin-top:7px;padding-right:23px;color:#796c7d;font-size:13px;font-weight:400;line-height:1.65;letter-spacing:0}
.scene-caption>span{display:inline-block;white-space:nowrap}
.scene-arrow{position:absolute;right:18px;bottom:23px;display:grid;place-items:center;width:22px;height:22px;color:#7b6782;font-size:20px;font-weight:400;line-height:1;transition:transform .2s,color .2s}
.scene-arrow .icon{width:17px;height:17px}
.scene-tile:hover .scene-arrow{color:#563c62;transform:translate(2px,-2px)}

.primary-scene{display:grid;grid-template-columns:minmax(0,1fr) 130px;grid-template-rows:1fr;align-items:center;gap:12px;min-height:190px;padding:26px 22px}
.primary-scene .scene-art{grid-column:2;grid-row:1;width:130px;height:119px;margin:0}
.primary-scene .scene-copy{grid-column:1;grid-row:1;align-self:center;justify-content:center}
.primary-scene .scene-title{font-size:26px;font-weight:600}
.primary-scene .scene-caption{max-width:154px;min-height:46px;margin-top:8px;padding-right:0;gap:1px 10px}
.primary-scene .scene-arrow{right:21px;bottom:18px}
.scene-baby{--scene-bg:#f1e4dc;--scene-line:#e5d4c9}
.scene-pet{--scene-bg:#e6eadb;--scene-line:#d4dec9}
.scene-foreign{--scene-bg:#e0e9e7;--scene-line:#cbdcd8}
.scene-handle{--scene-bg:#eee7f2;--scene-line:#e0d5e5}
.scene-together{--scene-bg:#e9eacd;--scene-line:#dce0bb}
.scene-fandom{--scene-bg:#ece3ed;--scene-line:#dfd0e2}
.scene-character{--scene-bg:#efe7dc;--scene-line:#e0d6c8}

.play-section{margin-top:34px}
.play-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px}
.play-heading h2{font-family:var(--display,var(--sans));font-size:21px;font-weight:500;line-height:1.5;letter-spacing:0;white-space:nowrap}
.surprise-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 13px;border:1px solid #cdbed1;border-radius:22px;background:#faf7ee;color:#796282;font-size:13px;font-weight:500;line-height:1.5;white-space:nowrap}
.surprise-button:hover{background:#e8eccf;border-color:#b9c38a;color:#5c683e}
.surprise-button .icon{width:16px;height:16px}
.surprise-button>span:first-child{font-size:19px;line-height:1}

/* The scene label keeps its illustration without competing with the form. */
.scene-heading{display:grid;grid-template-columns:minmax(0,1fr) 108px;grid-template-rows:auto auto;align-items:center;gap:6px 26px;min-height:184px;padding:12px 0 23px;border-bottom:1px solid #dcd2d7}
.back-scenes{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-bottom:3px;color:#826e87;font-size:13px;font-weight:400;white-space:nowrap}
.back-scenes .icon{width:16px;height:16px}
.back-scenes:hover{color:#60476b}
.scene-heading>div{min-width:0}
.scene-heading h1{font-family:var(--display,var(--sans));font-size:36px;font-weight:500;line-height:1.5;letter-spacing:0;text-wrap:balance;word-break:keep-all;overflow-wrap:normal}
.scene-heading .heading-phrase{display:inline-block;white-space:nowrap}
.scene-heading-art{display:flex;align-items:center;justify-content:center;width:108px;height:96px;pointer-events:none}
.scene-heading-art svg{display:block;width:100%;height:100%;overflow:visible}
.surprise-note{display:flex;align-items:center;flex-wrap:wrap;gap:5px 10px;min-height:44px;margin:16px 0 0;padding:10px 13px;border:1px solid #d7debf;border-radius:6px;background:#e9edd9;color:#687548;font-size:13px;line-height:1.65}
.surprise-note>.text-button{margin-left:auto;flex-shrink:0;min-height:32px;color:#6f7951;font-size:13px}

/* Scene-specific form controls. */
.purpose-options{display:flex;flex-wrap:wrap;gap:7px}
.purpose-chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid #d5c8d9;border-radius:6px;background:#faf7f0;color:#806c88;font-size:13px;font-weight:400;line-height:1.5;white-space:nowrap}
.purpose-chip.selected{border-color:#b59bc0;background:#e8dded;color:#61476d}
.purpose-chip:hover:not(.selected){background:#efe7f2;border-color:#c3afcb}
.context-field{margin-top:3px}
.context-field textarea{min-height:89px;font-size:16px;line-height:1.75}
.member-fields{display:grid;gap:13px;margin-top:7px}
.member-fields .text-input{font-size:16px}
.member-fields .field-label{color:#7d6884;font-size:13px}

@media(max-width:1100px){
  .home-heading{min-height:203px;padding-top:18px;padding-bottom:28px}
  .home-heading h1{font-size:47px}
  .home-art{flex-basis:280px;width:280px;height:170px;margin-right:0}
  .scene-board{gap:15px}
  .primary-scene{grid-template-columns:minmax(0,1fr) 109px;gap:8px;padding:23px 20px;min-height:180px}
  .primary-scene .scene-art{width:109px;height:105px}
  .primary-scene .scene-title{font-size:24px}
  .scene-title{font-size:22px}
  .scene-tile:not(.primary-scene){padding-left:18px;padding-right:18px}
}
@media(max-width:900px){
  .home-heading{gap:22px;min-height:199px}
  .home-heading h1{font-size:43px}
  .home-art{flex-basis:225px;width:225px;height:150px}
  .scene-board{gap:13px}
  .primary-scene{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:226px;padding:16px 20px 21px}
  .primary-scene .scene-art{width:135px;height:111px;margin:0 auto 13px}
  .primary-scene .scene-copy{align-self:stretch;justify-content:flex-end}
  .primary-scene .scene-caption{max-width:none;min-height:43px;margin-top:6px;padding-right:15px;gap:0 9px}
  .primary-scene .scene-arrow{right:15px;bottom:23px}
  .scene-board-play .scene-tile{min-height:207px;padding:15px 15px 20px}
  .scene-board-play .scene-art{width:110px;height:85px;margin-bottom:16px}
  .scene-board-play .scene-title{font-size:20px}
  .scene-board-play .scene-caption{min-height:43px;padding-right:14px;gap:0 8px}
  .scene-arrow{right:12px;bottom:20px}
  .play-heading h2{font-size:20px}
  .scene-heading{grid-template-columns:minmax(0,1fr) 94px;gap:5px 20px}
  .scene-heading h1{font-size:32px}
  .scene-heading-art{width:94px;height:86px}
}
@media(max-width:680px){
  .scene-home{padding-bottom:0}
  .home-heading{display:block;min-height:161px;padding:19px 0 28px}
  .home-heading h1{font-size:clamp(30px,8.7vw,40px);line-height:1.4;font-weight:500}
  .home-art{position:absolute;right:4px;top:15px;width:102px;height:87px;margin:0}
  .scene-board-primary{grid-template-columns:1fr;gap:11px}
  .primary-scene{display:grid;grid-template-columns:minmax(0,1fr) 118px;grid-template-rows:1fr;align-items:center;gap:17px;min-height:128px;padding:18px 24px}
  .primary-scene .scene-copy{grid-column:1;grid-row:1;align-self:center;justify-content:center}
  .primary-scene .scene-art{grid-column:2;grid-row:1;width:118px;height:91px;margin:0}
  .primary-scene .scene-title{font-size:25px;font-weight:500}
  .primary-scene .scene-caption{max-width:none;min-height:22px;margin-top:7px;padding-right:0;gap:1px 12px;font-size:13px}
  .primary-scene .scene-arrow{right:13px;bottom:16px;width:18px;height:18px;font-size:18px}
  .play-section{margin-top:25px}
  .play-heading{gap:12px;margin-bottom:12px}
  .play-heading h2{font-size:19px}
  .surprise-button{min-height:44px;padding:8px 11px;gap:6px;font-size:13px}
  .surprise-button>span:first-child{font-size:17px}
  .surprise-button .icon{width:14px;height:14px}
  .scene-board-play{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .scene-board-play .scene-tile{min-height:199px;padding:15px 17px 18px}
  .scene-board-play .scene-art{width:113px;height:86px;margin-bottom:13px}
  .scene-board-play .scene-title{font-size:22px;font-weight:500}
  .scene-board-play .scene-caption{min-height:43px;margin-top:6px;padding-right:16px;gap:1px 9px;font-size:13px}
  .scene-board-play .scene-arrow{right:12px;bottom:20px;font-size:18px}
  .scene-heading{grid-template-columns:minmax(0,1fr) 82px;gap:3px 16px;min-height:157px;padding:8px 0 19px}
  .back-scenes{margin-bottom:3px}
  .scene-heading h1{font-size:29px;line-height:1.48}
  .scene-heading-art{width:82px;height:80px}
  .surprise-note{margin-top:13px;padding:8px 11px}
  .purpose-options{gap:6px}
  .context-field{grid-column:1/-1}
  .member-fields{grid-template-columns:repeat(2,minmax(0,1fr));grid-column:1/-1;gap:13px;margin-top:0}
}
@media(max-width:440px){
  .home-heading{min-height:151px;padding-top:15px;padding-bottom:23px}
  .home-art{right:0;top:15px;width:79px;height:69px}
  .primary-scene{grid-template-columns:minmax(0,1fr) 101px;min-height:120px;padding:16px 20px;gap:14px;border-radius:10px}
  .primary-scene .scene-art{width:101px;height:86px}
  .primary-scene .scene-title{font-size:24px}
  .primary-scene .scene-caption{gap:0 10px}
  .play-heading h2{font-size:18px}
  .surprise-button{padding-left:10px;padding-right:10px}
  .surprise-button .icon{display:none}
  .scene-board-play{gap:11px}
  .scene-board-play .scene-tile{min-height:195px;padding:14px 14px 18px;border-radius:10px}
  .scene-board-play .scene-art{width:101px;height:81px;margin-bottom:13px}
  .scene-board-play .scene-title{font-size:21px}
  .scene-board-play .scene-caption{padding-right:11px;gap:0 8px}
  .scene-board-play .scene-arrow{right:10px;bottom:19px;width:18px;height:18px}
  .scene-heading{grid-template-columns:minmax(0,1fr) 78px;gap:3px 14px}
  .scene-heading h1{font-size:26px}
  .scene-heading-art{width:78px;height:76px}
  .member-fields{gap:11px}
}
@media(max-width:359px){
  .home-heading{min-height:145px}
  .home-art{top:17px;width:60px;height:58px}
  .primary-scene{grid-template-columns:minmax(0,1fr) 81px;gap:9px;padding-left:17px;padding-right:17px}
  .primary-scene .scene-art{width:81px;height:78px}
  .primary-scene .scene-caption{font-size:13px;gap:0 8px}
  .play-heading{gap:8px}
  .play-heading h2{font-size:16px}
  .surprise-button{padding:8px 9px;gap:4px;font-size:12px}
  .surprise-button>span:first-child{font-size:15px}
  .scene-board-play .scene-tile{padding-left:12px;padding-right:12px;min-height:192px}
  .scene-board-play .scene-title{font-size:20px}
  .scene-board-play .scene-art{width:96px;height:79px}
  .scene-board-play .scene-caption{gap:0 5px;padding-right:8px;font-size:12px}
  .scene-heading{grid-template-columns:minmax(0,1fr) 66px;gap:3px 12px}
  .scene-heading h1{font-size:23px}
  .scene-heading-art{width:66px;height:69px}
}
@media(prefers-reduced-motion:reduce){
  .scene-tile,.scene-art svg,.scene-arrow,.surprise-button{transition:none!important}
  .scene-tile:hover,.scene-tile:hover .scene-art svg,.scene-tile:hover .scene-arrow{transform:none}
}

.play-prompt{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 20px;padding:24px 28px;background:#eae3ed;border:1px solid #c8b8cf;border-radius:12px}
.play-prompt-title{margin:0;max-width:720px;font-size:23px;font-weight:500;line-height:1.6;text-wrap:pretty;color:#493852}
.play-prompt-actions{display:flex;align-items:center;gap:18px;flex-shrink:0}
.play-prompt-actions .primary-button,.play-prompt-actions .secondary-button{width:auto;min-height:46px;padding:11px 18px;font-size:14px;white-space:nowrap}
.play-prompt-actions .text-button{min-height:44px;white-space:nowrap}
.scene-prompt{grid-column:1/-1;margin:0 0 4px;max-width:780px;color:#745d80;font-size:16px;font-weight:500;line-height:1.65;text-wrap:pretty}
.culture-pagination{display:flex;justify-content:flex-end;margin-top:15px}
.culture-pagination .text-button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 2px;color:#63505f;font-size:14px}
.culture-pagination .icon{width:16px;height:16px}
@media(max-width:760px){
  .play-prompt{align-items:flex-start;flex-direction:column;gap:15px;margin-bottom:16px;padding:20px}
  .play-prompt-title{font-size:21px}
  .play-prompt-actions{width:100%;justify-content:flex-end;gap:18px}
  .scene-prompt{font-size:15px;margin-bottom:0}
}
@media(max-width:359px){.play-prompt{padding:16px}.play-prompt-title{font-size:19px}.play-prompt-actions .primary-button,.play-prompt-actions .secondary-button{padding-inline:14px}}

/* Scene-specific, two-step brief. */
.scene-workspace{display:block;max-width:920px;margin:0 auto}
.step-form{display:block;padding:0;overflow:visible;border:0;background:transparent}
.brief-steps{display:flex;align-items:center;gap:14px;margin:8px 0 32px;padding-bottom:20px;border-bottom:1px solid var(--line,#ddd5e0)}
.brief-step{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;color:var(--muted,#817587);background:none;border:0;padding:0;line-height:1.5}
.brief-step>span{display:grid;place-items:center;width:25px;height:25px;border:1px solid #d6cbdc;border-radius:50%;font-size:12px}
.brief-step.current{color:var(--ink);font-weight:600}.brief-step.current>span{background:#70567e;color:#fff;border-color:#70567e}
.step-line{height:1px;flex:1;background:#ddd4e1;max-width:110px}
.basic-step,.direction-step{max-width:820px;margin:0 auto}
.basic-step>h2,.direction-intro h2{font-size:23px;font-weight:500;line-height:1.5;margin:0 0 22px}
.basic-step .purpose-options{margin:0 0 28px;display:flex;flex-wrap:wrap;gap:9px}
.basic-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px}
.basic-fields>.context-field,.basic-fields>.member-fields,.basic-fields>.together-paths{grid-column:1/-1}
.basic-fields>.field:has(textarea){grid-column:1/-1}
.basic-fields .field{margin:0;min-width:0}.basic-fields .field-label{margin-bottom:10px}
.basic-fields .member-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.basic-fields textarea{min-height:84px;resize:vertical}
.basic-fields select{width:100%}
.together-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.path-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:20px 42px 20px 20px;text-align:left;background:#f7f4f8;border:1px solid #ddd3e3;border-radius:10px}
.path-card strong{font-size:18px;font-weight:500}.path-card>span{font-size:13px;color:#7e7085}.path-card>.icon{position:absolute;right:17px;top:22px;width:17px;height:17px}
.path-card.selected{background:#eee6f2;border-color:#8b709b}
.brief-summary{display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;margin:0 0 28px;font-size:14px;color:#75627d}
.brief-summary>span{overflow-wrap:anywhere}.brief-summary>.text-button{margin-left:auto}
.direction-intro{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:18px}.direction-intro h2{margin:0}.direction-intro .optional{font-size:12px}
.direction-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 24px}
.direction-card{position:relative;display:flex;flex-direction:column;gap:17px;min-width:0;min-height:140px;padding:22px 18px 30px;text-align:left;background:#f7f3f8;border:1px solid #ddd3e3;border-radius:10px}
.direction-card strong{font-size:17px;font-weight:500;line-height:1.5}.direction-card.selected{background:#eee5f2;border-color:#8b6a99}
.direction-samples{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:17px;color:#786382;line-height:1.5}
.direction-samples>span{white-space:nowrap}.direction-samples i{font-size:13px;font-style:normal;color:#b5a7bc}
.direction-mark{position:absolute;right:15px;bottom:10px;color:#8a6f98;font-size:20px}
.direction-content{margin:0 0 28px;padding:24px 0 0;border-top:1px solid #e1d8e5}
.direction-content .culture-shelf{margin-top:0}.direction-step .selection-strip{margin:0 0 20px}
.direction-step .extra-preferences{margin:24px 0 20px;border-top:1px solid #e1d8e5}
.direction-step .bazi-section{margin:24px 0 0}.direction-step>.wishes-field{margin:24px 0}
.direction-step .inspiration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.reference-name-field{max-width:460px}
.step-footer{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;gap:18px;padding:20px 0;margin:32px 0 0;border-top:1px solid #e1d8e5;background:var(--paper,#fcf9fc);box-shadow:0 -12px 18px var(--paper,#fcf9fc)}
.step-footer .start-button{margin-left:auto;min-width:180px}.step-footer .text-button{white-space:nowrap}
@media(max-width:680px){
 .brief-steps{gap:7px;margin:0 0 26px;padding-bottom:16px}.brief-step{font-size:12px;gap:5px}.brief-step>span{width:21px;height:21px;font-size:11px}.step-line{min-width:9px}
 .basic-step>h2,.direction-intro h2{font-size:21px}.basic-fields{grid-template-columns:1fr;gap:23px}.basic-fields>.field{grid-column:1/-1}
 .basic-fields .member-fields{gap:14px}.basic-step .purpose-options{margin-bottom:23px}
 .direction-options{grid-template-columns:1fr;gap:10px;margin-bottom:20px}.direction-card{min-height:82px;padding:16px 40px 16px 16px;gap:6px}.direction-card strong{font-size:16px}.direction-samples{font-size:16px}.direction-mark{bottom:auto;top:25px}
 .direction-content{padding-top:20px}.direction-step .inspiration-grid{gap:10px}.direction-step .inspiration-card{padding:18px 12px}.direction-step .example-names{font-size:22px}
 .together-paths{gap:10px}.path-card{padding:16px 28px 16px 12px;gap:8px}.path-card strong{font-size:16px}.path-card>span{font-size:11px}.path-card>.icon{right:9px;top:18px;width:15px}
 .step-footer{gap:12px;margin-top:24px;padding:15px 0}.step-footer .start-button{min-width:0;padding:14px 19px;white-space:nowrap}.step-footer .text-button{font-size:12px}
 .brief-summary{gap:7px 12px;margin-bottom:22px}
}
.step-footer .start-button{position:static;left:auto;right:auto;bottom:auto;width:auto;box-shadow:none}
@media(max-width:760px){.step-footer{flex-direction:row;align-items:center}.scene-workspace .step-footer .start-button{position:static;width:auto}.shell:has(.step-form){padding-bottom:20px}}
/* Keep the first, short step fully in view before showing optional choices. */
.main:has(.scene-workspace)>.scene-heading{min-height:0;grid-template-columns:minmax(0,1fr) 78px;gap:0 22px;padding:0 0 14px}
.main:has(.scene-workspace) .scene-heading-art{width:78px;height:58px}
.main:has(.scene-workspace) .scene-heading h1{font-size:32px;line-height:1.4}
.scene-workspace{padding-top:14px}
.scene-workspace .brief-steps{margin:0 0 24px;padding-bottom:12px}
.basic-step{padding-bottom:14px}
.step-footer{box-shadow:none}
@media(max-width:680px){.main:has(.scene-workspace)>.scene-heading{grid-template-columns:minmax(0,1fr) 64px;gap:0 12px;padding-bottom:13px}.main:has(.scene-workspace) .scene-heading-art{width:64px;height:54px}.main:has(.scene-workspace) .scene-heading h1{font-size:25px}.scene-workspace{padding-top:13px}.scene-workspace .brief-steps{margin-bottom:22px}.basic-step{padding-bottom:18px}}
@media(max-width:360px){.main:has(.scene-workspace) .scene-heading h1{font-size:23px}.main:has(.scene-workspace)>.scene-heading{grid-template-columns:minmax(0,1fr) 50px}.main:has(.scene-workspace) .scene-heading-art{width:50px}}

.service-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 24px;padding:14px 18px;border:1px solid #ded5e5;border-radius:14px;background:#f1ebf5;font-size:14px;line-height:1.5}.service-notice .text-button{white-space:nowrap}.service-notice.request-status{position:static;box-shadow:none}@media(max-width:680px){.service-notice{align-items:flex-start;flex-direction:column;padding:12px 14px;gap:7px;font-size:13px}}