/* Each activity stays inside one viewport; details open in their own reading drawer. */
:root{--screen-top:76px;--screen-bottom:66px;--screen-h:calc(100dvh - 142px)}
#stage>.chapter:not(#ch-intro):not(#ch-phoenix){inset:var(--screen-top) 0 var(--screen-bottom);padding:18px 5vw;overflow:hidden;overflow:clip;justify-content:center;min-height:0;touch-action:pinch-zoom;overscroll-behavior:none}
#stage>.chapter:not(#ch-intro):not(#ch-phoenix) .chapter-head{margin:0 0 16px;max-width:100%;flex:none}
#stage>.chapter:not(#ch-intro):not(#ch-phoenix) .chapter-head h2{font-size:clamp(22px,2.5vw,34px);line-height:1.35}
#stage>.chapter:not(#ch-intro):not(#ch-phoenix) .chapter-head p{margin-top:8px;font-size:11px;line-height:1.7}
#stage>.chapter:not(#ch-intro):not(#ch-phoenix) .chapter-head::after{margin:12px auto 0}
.fixed-chapter .journey-guide{display:none!important}
#ch-phoenix{overflow:hidden;overflow:clip;touch-action:pinch-zoom;overscroll-behavior:none}
.ethnic-intro{width:min(1180px,100%);display:grid;grid-template-columns:210px 1fr auto;align-items:center;gap:26px;padding:17px 22px;margin-bottom:20px;border:1px solid #c8ac7b38;background:linear-gradient(115deg,#b8914a0d,transparent);flex:none}
.ethnic-name>span{font-size:8px;letter-spacing:.18em;color:#947b57}.ethnic-name h3{font:34px var(--serif);letter-spacing:.18em;color:#e2c7a0;line-height:1.5}.ethnic-name h3 small{font:10px var(--sans);letter-spacing:.08em;color:#96856e}.ethnic-name>b{font-size:10px;letter-spacing:.12em;color:#b8a48a;font-weight:400}
.ethnic-summary p{font-size:12px;line-height:1.9;color:#c4b8a7}.ethnic-summary .ethnic-project{font-size:10px;color:#8e806c;margin-top:5px}.ethnic-intro>button{border-bottom:1px solid #b49a7055;padding:10px 0;color:#d9bc8e;font-size:11px;white-space:nowrap}.ethnic-intro>button span{margin-left:15px}
#ch-source .source-grid{width:min(1180px,100%);grid-template-columns:repeat(4,1fr);gap:18px;min-height:0;flex:none}
#ch-source .source-card{padding:0 0 13px;overflow:hidden}
#ch-source .source-card .sc-fig{height:clamp(100px,calc(var(--screen-h)*.31),220px);margin:0;overflow:hidden}
#ch-source .source-card h3{margin:12px 14px 3px;font-size:17px;line-height:1.4}
#ch-source .source-card p{margin:0 14px;font-size:10px;line-height:1.5}
#ch-source>.chapter-foot{margin-top:20px}
.source-pair{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));position:relative;height:100%;width:100%;gap:2px;background:#050505;overflow:hidden}
.source-pair img{display:block;width:100%;height:100%;max-height:100%;object-fit:cover;min-width:0;min-height:0}
.source-pair>span{position:absolute;top:calc(50% - 26px);left:0;width:100%;padding:10px 4px 5px;background:linear-gradient(transparent,#000b);text-align:center;font-size:9px;color:#eee0c9;letter-spacing:.12em}
.source-pair>span:last-child{top:auto;bottom:0}
.ip-feather-crop{height:100%;width:100%;overflow:hidden;position:relative;background:radial-gradient(ellipse at 60% 20%,#62392930,transparent 75%),#101011}
.source-card .sc-fig .ip-feather-crop svg,.dw-fig .ip-feather-crop svg{display:block;width:100%;height:100%;max-height:none;overflow:hidden;padding:7px}
.dw-fig .source-pair,.dw-fig .ip-feather-crop{height:280px}
.dw-source a{display:block;margin:8px 0;color:#c9af83;text-decoration:underline;text-underline-offset:3px;font-size:11px}.ethnic-kicker{font-size:10px;color:#a98b61;letter-spacing:.18em;margin-bottom:12px}
#ch-form .form-layout,#ch-silver .silver-layout{width:min(1100px,100%);grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,42px);min-height:0}
.form-panel,.silver-side{min-width:0}
#ch-form .translate-stage{height:clamp(160px,calc(var(--screen-h)*.53),340px)}
#formFeather svg{width:clamp(80px,13vh,150px)}
#ch-form .shape-picker{gap:8px;flex-wrap:nowrap;margin-top:12px}
#ch-form .shape-opt{width:82px;padding:8px 6px}.shape-opt svg{height:70px;width:35px}
#ch-form .feather-side .chapter-foot,#ch-silver .chapter-foot{margin-top:12px}
#ch-form #formHint{margin-top:8px;min-height:30px}
#ch-silver .silver-stage{height:clamp(170px,calc(var(--screen-h)*.6),350px)}
#ch-silver #silverFeather svg{width:75px;max-height:125px}
#ch-silver .node-cards{gap:6px}
#ch-silver .node-card{padding:7px 10px}
#ch-silver .hint{margin-top:9px;font-size:11px;line-height:1.6}
#ch-pattern .pattern-layout{width:min(1180px,100%);min-height:0;grid-template-columns:.9fr 1fr 1fr;gap:24px}
#ch-pattern .pat-card{padding:9px 8px}#ch-pattern .pat-card svg{max-width:115px;margin-bottom:6px;padding:5px}
#ch-pattern .pattern-lib{gap:9px}
#ch-pattern #patternFeather svg{width:clamp(90px,18vh,210px)}
#ch-pattern .ctrl-chip{padding:8px 13px;font-size:11px}#ch-pattern .pattern-ctrl{gap:13px}
#ch-color .color-layout{width:min(1000px,100%);grid-template-columns:.8fr 1.2fr;gap:28px;min-height:0}
#ch-color #colorFeather svg{width:clamp(110px,24vh,230px)}
#ch-color .swatch{padding:10px 8px}#ch-color .swatch span{font-size:11px}
#ch-result .result-layout{width:min(1060px,100%);grid-template-columns:.75fr 1fr;gap:30px;min-height:0}
#ch-result #resultFeather svg{width:clamp(110px,25vh,260px)}
#ch-result .result-info h2{font-size:clamp(18px,2.2vw,28px);line-height:1.6}
#ch-card .card-layout{width:min(900px,100%);grid-template-columns:auto 1fr;gap:35px;min-height:0}
#ch-card .card-preview canvas{width:auto;height:clamp(180px,calc(var(--screen-h) - 145px),430px);max-width:44vw;object-fit:contain}
#ch-card .card-ctrl{gap:12px}#ch-card .hint{font-size:11px;line-height:1.6}
#ch-prologue .prologue-stage{height:clamp(110px,calc(var(--screen-h)*.4),240px);margin:0 0 12px;flex:none}
#ch-prologue .pg-avatar{height:clamp(90px,calc(var(--screen-h)*.32),200px);width:auto}
#ch-prologue .prologue-text{min-height:100px;gap:6px}
#ch-prologue .pg-line{font-size:clamp(12px,1.4vw,16px)}
#ch-prologue .prologue-skip{top:5px;right:5vw}
#ch-prologue .prologue-ctrl{margin-top:14px}
#ch-ext .ext-scroll{width:min(1080px,100%);overflow:clip;max-height:none;flex:none;display:block;padding:0}
#ch-ext .ext-scroll>[hidden]{display:none!important}
#ch-ext .ext-block{grid-template-columns:220px 1fr;gap:24px;padding:20px;margin:0;min-height:220px}
#ch-ext .ext-fig{height:clamp(120px,calc(var(--screen-h)*.38),230px);min-height:0}
#ch-ext .ext-fig img{max-height:100%}
#ch-ext .ext-body p{font-size:12px;line-height:1.85}#ch-ext .ext-body h3{font-size:22px}
#ch-ext .board-gallery{margin:0}#ch-ext .board-gallery img{height:clamp(100px,calc(var(--screen-h)*.38),260px);object-fit:contain}
.screen-pager{display:flex;gap:22px;align-items:center;justify-content:center;margin-top:18px;width:100%}
.screen-pager button{padding:10px 14px;border:1px solid #a99a792d;color:#c5b293;font-size:11px}.screen-pager button:disabled{opacity:.25;cursor:default}.screen-pager output{color:#948773;font-size:10px;font-variant-numeric:tabular-nums}
#ch-ext>.chapter-foot{margin-top:6px}
@media(max-width:900px){
  .ethnic-intro{grid-template-columns:160px 1fr auto;gap:14px;padding:12px 16px}.ethnic-name h3{font-size:30px}.ethnic-summary p{font-size:11px}
  #ch-source .source-grid{gap:12px}#ch-source .source-card h3{font-size:14px;margin-left:10px}#ch-source .source-card p{font-size:9px;margin-left:10px;margin-right:8px}
  #ch-form .shape-opt{width:66px}#ch-form #formFeather svg{width:110px}
  #ch-pattern .pattern-layout{gap:15px;grid-template-columns:1fr .75fr 1fr}#ch-pattern .pat-card .pat-note{display:none}
  #ch-color .swatch-row{gap:6px}#ch-color .swatch{padding:8px 5px}#ch-color .swatch span{font-size:10px;letter-spacing:0}
}
@media(max-width:600px){
  #stage>.chapter:not(#ch-intro):not(#ch-phoenix){padding:12px 5vw}
  #stage>.chapter:not(#ch-intro):not(#ch-phoenix) .chapter-head{margin-bottom:12px}
  #stage>.chapter:not(#ch-intro):not(#ch-phoenix) .chapter-head h2{font-size:23px;letter-spacing:.1em}
  #stage>.chapter:not(#ch-intro):not(#ch-phoenix) .chapter-head p{font-size:10px;margin-top:6px;padding:0}
  #stage>.chapter:not(#ch-intro):not(#ch-phoenix) .chapter-head::after{margin-top:9px}
  .ethnic-intro{grid-template-columns:95px 1fr;gap:8px 12px;padding:12px;margin-bottom:12px;position:relative;padding-bottom:34px}
  .ethnic-name>span{font-size:6px;letter-spacing:.03em}.ethnic-name h3{font-size:27px;letter-spacing:.1em}.ethnic-name h3 small{font-size:8px}.ethnic-name>b{font-size:8px;line-height:1.6;display:block}
  .ethnic-summary p{font-size:10px;line-height:1.7}.ethnic-summary .ethnic-project{display:none}.ethnic-intro>button{position:absolute;right:12px;bottom:5px;font-size:10px;padding:3px 0}
  #ch-source .source-grid{grid-template-columns:1fr 1fr;gap:10px}
  #ch-source .source-card .sc-fig{height:clamp(66px,calc(var(--screen-h)*.16),120px)}
  #ch-source .source-card h3{font-size:13px;margin:8px 9px 3px}#ch-source .source-card p{font-size:8px;margin:0 9px}
  #ch-source .source-card{padding-bottom:9px}#ch-source>.chapter-foot{margin-top:12px}
  #stage>.chapter:not(#ch-intro):not(#ch-phoenix) .btn{font-size:11px;padding:11px 15px;letter-spacing:.05em}
  #ch-form .form-layout,#ch-silver .silver-layout{grid-template-columns:1fr 1fr;gap:12px;width:100%}
  #ch-form .shape-picker{gap:5px;margin-top:8px}#ch-form .shape-opt{width:46px;padding:5px 2px}#ch-form .shape-opt svg{width:27px;height:56px}.shape-opt span{font-size:9px;letter-spacing:0}
  #ch-form #formFeather svg{width:80px}#ch-form #formHint{font-size:9px;line-height:1.6;min-height:30px}
  #ch-form .ts-label{font-size:9px;left:8px;top:13px;letter-spacing:0}.ts-label b{font-size:8px;margin-left:2px}
  #ch-form .ts-steps{left:8px;right:8px;gap:3px;font-size:6px;bottom:27px}.ts-meter{left:8px;right:8px;bottom:14px}
  #ch-form .feather-side::before,#ch-pattern .pattern-main::before{width:120px;height:120px}
  #ch-silver #silverFeather svg{width:55px;max-height:95px}#ch-silver .node-card{padding:6px 7px}#ch-silver .node-card b{font-size:10px;letter-spacing:0}#ch-silver .node-card span{font-size:9px;line-height:1.5;display:block}#ch-silver .hint{font-size:9px;line-height:1.6}
  #ch-pattern .pattern-layout{grid-template-columns:1.15fr .85fr;gap:14px;align-items:center}
  #ch-pattern .pattern-ctrl{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #ch-pattern .pattern-ctrl>.chapter-foot{grid-column:1/-1;margin-top:4px;text-align:center}
  #ch-pattern .ctrl-group{gap:5px}#ch-pattern .ctrl-chip{font-size:9px;padding:7px 8px;letter-spacing:0}
  #ch-pattern .pat-card{padding:7px 5px}#ch-pattern .pat-card svg{width:100%;height:auto;max-width:78px;margin-bottom:4px}#ch-pattern .pat-name{font-size:11px;letter-spacing:.1em}
  #ch-pattern #patternFeather svg{width:110px}#ch-pattern .pattern-lib{gap:7px}
  #ch-color .color-layout{grid-template-columns:.75fr 1.25fr;gap:15px}#ch-color #colorFeather svg{width:110px}
  #ch-color .color-ctrl{gap:6px}#ch-color .swatch-row{flex-wrap:nowrap;gap:5px}#ch-color .swatch{min-width:0;padding:7px 3px;border-radius:4px}#ch-color .swatch span{font-size:8px;letter-spacing:0}#ch-color .sw-colors{height:26px;margin-bottom:5px}#ch-color .ctrl-title{font-size:12px;margin:6px 0 0}
  #ch-result .result-layout{grid-template-columns:.65fr 1fr;gap:15px;text-align:left}#ch-result #resultFeather svg{width:100px}#ch-result .result-info h2{font-size:16px;line-height:1.65;letter-spacing:.04em}#ch-result .result-kicker{font-size:10px}#ch-result .feather-id{font-size:13px;margin:12px 0 4px;padding:5px 10px}#ch-result .result-summary{gap:5px;margin-top:8px}#ch-result .rs-chip{font-size:9px;padding:4px 7px}#ch-result .result-actions{gap:8px;margin-top:13px}#ch-result .locked-tip{font-size:10px;line-height:1.6;margin-top:9px}
  #ch-card .card-layout{grid-template-columns:1.1fr 1fr;gap:16px;text-align:left}#ch-card .card-preview canvas{max-width:44vw;max-height:calc(var(--screen-h) - 140px);height:auto;width:100%}#ch-card .card-ctrl{gap:10px;align-items:stretch}#ch-card .hint{font-size:9px;line-height:1.7;margin:0 0 4px}
  #ch-prologue .pg-role{width:96px}#ch-prologue .pg-phoenix{width:130px}#ch-prologue .pg-line{font-size:12px;letter-spacing:.04em}#ch-prologue .prologue-text{min-height:110px}#ch-prologue .prologue-skip{font-size:9px}
  #ch-ext .ext-block{grid-template-columns:1fr;padding:15px;gap:12px;min-height:0}#ch-ext .ext-fig{height:clamp(90px,calc(var(--screen-h)*.27),180px)}#ch-ext .ext-body h3{font-size:18px}#ch-ext .ext-body p{font-size:11px;line-height:1.75}#ch-ext .ext-tags{margin-top:10px}#ch-ext .rs-chip{font-size:9px;padding:4px 7px}.screen-pager{gap:14px;margin-top:12px}.screen-pager button{font-size:10px;padding:8px 12px}
  #ch-ext .board-gallery h3{font-size:19px}#ch-ext .board-gallery>div{gap:8px}#ch-ext .board-gallery span{font-size:8px}
}
@media(max-height:600px) and (min-width:601px){
  #stage>.chapter:not(#ch-intro):not(#ch-phoenix){padding-top:8px;padding-bottom:8px}
  #stage>.chapter:not(#ch-intro):not(#ch-phoenix) .chapter-head{margin-bottom:8px}
  #stage>.chapter:not(#ch-intro):not(#ch-phoenix) .chapter-head h2{font-size:21px}
  #stage>.chapter:not(#ch-intro):not(#ch-phoenix) .chapter-head p{margin-top:3px;font-size:10px}
  #stage>.chapter:not(#ch-intro):not(#ch-phoenix) .chapter-head::after{display:none}
  .ethnic-intro{padding:9px 14px;margin-bottom:9px;grid-template-columns:160px 1fr auto}.ethnic-name h3{font-size:25px}.ethnic-summary .ethnic-project{display:none}
  #ch-source .source-card .sc-fig{height:clamp(55px,calc(var(--screen-h)*.27),125px)}#ch-source .source-card h3{font-size:13px;margin-top:7px}#ch-source .source-card p{font-size:8px}#ch-source .source-card{padding-bottom:7px}#ch-source>.chapter-foot{margin-top:10px}
  #ch-form .translate-stage{height:clamp(125px,calc(var(--screen-h)*.53),230px)}#ch-form #formFeather svg{width:65px}#ch-form .shape-opt svg{height:40px;width:25px}#ch-form .shape-opt{padding:4px;width:60px}#ch-form .shape-picker{margin-top:6px}#ch-form #formHint{font-size:9px;min-height:20px;margin-top:5px}#ch-form .chapter-foot{margin-top:6px}
  #ch-silver #silverFeather{display:none}#ch-silver .silver-stage{height:clamp(120px,calc(var(--screen-h)*.65),240px)}#ch-silver .node-card{padding:4px 8px}#ch-silver .node-card b{font-size:10px}#ch-silver .node-card span{font-size:9px}
  #ch-pattern #patternFeather svg,#ch-color #colorFeather svg{width:85px}#ch-pattern .pat-card{padding:4px}#ch-pattern .pat-card svg{max-width:70px;padding:3px;margin-bottom:3px}#ch-pattern .pat-name{font-size:11px}#ch-pattern .pat-note{display:none}#ch-pattern .ctrl-chip{padding:5px 8px;font-size:9px}
  #ch-color .swatch{padding:6px}.swatch .sw-colors{height:22px;margin-bottom:4px}#ch-color .color-ctrl{gap:3px}#ch-color .swatch span{font-size:9px}#ch-color .ctrl-title{margin:0;font-size:12px}
  #ch-result #resultFeather svg{width:95px}#ch-result .result-info h2{font-size:18px}#ch-result .feather-id{margin:6px 0 0;padding:4px 10px;font-size:12px}#ch-result .rs-chip{font-size:9px;padding:3px 7px}#ch-result .result-summary{margin:5px 0;gap:5px}#ch-result .result-actions{margin-top:8px;gap:8px}#ch-result .locked-tip{margin-top:5px;font-size:9px}
  #ch-ext .ext-block{padding:12px;grid-template-columns:150px 1fr;gap:15px;min-height:0}#ch-ext .ext-fig{height:120px}#ch-ext .ext-body h3{font-size:18px}#ch-ext .ext-body p{font-size:10px}#ch-ext .ext-tags{margin-top:6px}#ch-ext .rs-chip{font-size:8px;padding:3px 6px}.screen-pager{margin-top:8px}.screen-pager button{padding:6px 10px}#ch-ext>.chapter-foot{margin-top:0}
  #stage>.chapter:not(#ch-intro):not(#ch-phoenix) .btn{padding:8px 14px;font-size:10px}
}
@media(max-width:600px) and (max-height:720px){
  #ch-source .ethnic-intro{grid-template-columns:1fr auto;gap:5px 8px;padding:9px 11px;margin-bottom:9px}
  #ch-source .ethnic-name{display:flex;align-items:center;gap:8px;min-width:0}#ch-source .ethnic-name>span,#ch-source .ethnic-name h3 small{display:none}#ch-source .ethnic-name h3{font-size:23px;line-height:1.3;white-space:nowrap}#ch-source .ethnic-name b{font-size:8px;letter-spacing:0}
  #ch-source .ethnic-summary{grid-column:1/-1}#ch-source .ethnic-summary p{font-size:9px;line-height:1.65}#ch-source .ethnic-summary p>span{display:none}
  #ch-source .ethnic-intro>button{position:static;grid-column:2;grid-row:1;font-size:9px;padding:3px 0}#ch-source .ethnic-intro>button span{margin-left:5px}
  #ch-source .source-card .sc-fig{height:clamp(64px,calc(var(--screen-h)*.14),86px)}#ch-source .source-card h3{font-size:12px;margin-top:6px}#ch-source .source-card{padding-bottom:7px}
  #ch-ext .ext-block{grid-template-columns:80px 1fr;gap:12px;padding:12px}#ch-ext .ext-fig{height:130px}#ch-ext .ext-body h3{font-size:16px}#ch-ext .ext-body p{font-size:10px;line-height:1.7}
}
@media(max-height:600px) and (min-width:601px){
  #ch-source{display:grid;grid-template-columns:170px 1fr;grid-template-rows:auto auto auto;gap:8px 15px;align-content:center}
  #ch-source>.chapter-head{grid-column:1/-1;margin-bottom:0!important}
  #ch-source .ethnic-intro{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr;padding:8px 10px;gap:4px;margin:0}
  #ch-source .ethnic-name>span,#ch-source .ethnic-summary p>span{display:none}#ch-source .ethnic-name h3{font-size:23px;line-height:1.35}#ch-source .ethnic-name>b{font-size:8px}
  #ch-source .ethnic-summary p{font-size:9px;line-height:1.5}#ch-source .ethnic-intro>button{padding:3px 0;font-size:9px;text-align:left}
  #ch-source .source-grid{grid-column:2;grid-row:2;gap:8px}#ch-source>.chapter-foot{grid-column:1/-1;grid-row:3;margin-top:0;text-align:center}
  #ch-source .source-card .sc-fig{height:clamp(55px,calc(var(--screen-h)*.27),85px)}#ch-source .source-card h3{font-size:11px;margin:6px 7px 3px}#ch-source .source-card p{font-size:8px;margin:0 7px}
  #ch-form #formFeather svg{height:45px;width:auto}#ch-form #formHint{min-height:0;font-size:9px;line-height:1.5}#ch-form .shape-opt span{font-size:9px}#ch-form .shape-opt svg{height:29px}#ch-form .feather-side>.chapter-foot{margin-top:6px}#ch-form .feather-side::before{width:120px;height:120px}
  #ch-pattern #patternFeather svg{max-height:145px;width:auto}#ch-pattern .pattern-main::before{width:130px;height:130px}
  #ch-color .chapter-foot{margin-top:8px}#ch-color .swatch{padding:4px}#ch-color .swatch .sw-colors{height:16px;margin-bottom:2px}
  #ch-ext .screen-pager{margin-top:6px}#ch-ext .screen-pager button{padding:4px 10px}#ch-ext #restartBtn{padding:4px 10px;font-size:9px}
  #ch-ext .ext-fig{height:96px}#ch-ext .ext-block{padding:10px}
  #ch-silver .node-card{padding:4px 6px}#ch-silver .node-card b{line-height:1.4}#ch-silver .node-card span{display:block;font-size:9px;line-height:1.4}#ch-silver .node-cards{gap:4px}#ch-silver .hint{font-size:9px;line-height:1.4;margin-top:6px}#ch-silver .chapter-foot{margin-top:6px}
  #ch-ext .board-gallery h3{font-size:15px;line-height:1.4}#ch-ext .board-gallery>p{font-size:8px;line-height:1.4;margin:4px 0 6px}#ch-ext .board-gallery img{height:65px}#ch-ext .board-gallery span{font-size:8px;line-height:1.3;margin-top:5px}
}