:root{--ink:#4c5145;--cream:#faf6eb;--leaf:#55714c;--line:rgba(219,203,169,.56)}
body{background:linear-gradient(180deg,#f6eedc 0,#faf6eb 36rem,#fbf8f0 100%)}
.page-shell{padding-top:0;overflow:clip}
.scene-hero{position:relative;width:100vw;min-height:265px;margin:0 0 12px calc(50% - 50vw);padding: max(13px,env(safe-area-inset-top)) max(18px,calc((100vw - 1040px)/2 + 18px)) 28px;isolation:isolate;background-image:linear-gradient(180deg,rgba(255,251,239,.05) 0%,rgba(255,250,235,.12) 50%,rgba(250,246,235,.72) 83%,#faf6eb 100%),url("../../assets/BG-01.png");background-size:100% 100%,cover;background-position:center,center 38%;background-repeat:no-repeat}
.scene-hero::after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 78% 45%,rgba(250,218,142,.28),transparent 35%),linear-gradient(90deg,rgba(255,253,246,.52),transparent 78%);pointer-events:none}
.scene-hero .topbar{position:relative;z-index:3;max-width:1040px;margin:0 auto}
.scene-hero .brand-mark{background:rgba(235,243,223,.9);box-shadow:0 3px 12px rgba(104,121,82,.12)}
.scene-hero .brand-copy h1{color:#485f42;text-shadow:0 1px 8px rgba(255,255,255,.86)}
.scene-hero .brand-copy p{color:#84795f;text-shadow:0 1px 7px rgba(255,255,255,.8)}
.scene-hero .edition{background:rgba(255,252,243,.76);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.scene-hero .intro{position:relative;z-index:1;min-height:174px;max-width:1040px;margin:0 auto;padding:19px 8px 8px;align-items:center}
.hero-copy{position:relative;z-index:2;width:min(65%,560px);padding:12px 15px 14px 12px;border:1px solid rgba(255,255,255,.43);border-radius:20px;background:linear-gradient(100deg,rgba(255,252,243,.65),rgba(255,252,243,.2));box-shadow:0 8px 24px rgba(116,96,62,.045);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.hero-copy h2{color:#485343;text-shadow:0 1px 8px rgba(255,255,255,.8)}
.hero-copy p{color:#736c5a}
.scene-cat{position:absolute;z-index:1;right:1.5%;bottom:7px;width:clamp(112px,18vw,206px);height:auto;max-height:94%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 10px rgba(79,65,55,.16));pointer-events:none;user-select:none;-webkit-user-drag:none}
.material-test-switch{position:relative;display:flex;align-items:center;gap:7px;flex-wrap:nowrap;margin:0 0 11px;padding:7px 9px;border:1px solid rgba(227,215,191,.86);border-radius:16px;background:rgba(255,253,247,.72);box-shadow:0 5px 14px rgba(111,96,69,.045)}
.material-test-switch .switch-copy{display:flex;flex-direction:column;min-width:0;margin-right:auto;color:#657858}
.material-test-switch strong{font-size:11px}.material-test-switch small{color:#9b9079;font-size:9px;font-weight:700}
.material-test-switch button{min-height:42px;padding:0 11px;border:1px solid #e8dfcd;border-radius:12px;background:rgba(255,255,251,.88);color:#766d5a;font-size:10px;font-weight:900;cursor:pointer;touch-action:manipulation}
.material-test-switch button.active{border-color:#c4d2ac;background:#eaf1e2;color:#59734e;box-shadow:0 2px 8px rgba(97,122,77,.1)}
.mode-tabs{margin-bottom:9px}.mode-tab,.group-tab{min-height:44px;background:rgba(255,253,248,.78)}
.group-tabs{gap:5px;margin-bottom:9px;overflow-x:auto}
.group-tab{min-width:45px;padding:0 8px;border-radius:13px}
.bubble-trays{gap:14px;align-items:stretch}
.tray{min-width:0;min-height:236px;border-color:rgba(255,255,255,.86);border-radius:22px;background-color:rgba(255,255,255,.62);box-shadow:0 10px 24px rgba(106,91,66,.075);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.initial-tray{background:linear-gradient(145deg,rgba(237,246,226,.82),rgba(255,255,255,.6))}
.final-tray{background:linear-gradient(145deg,rgba(239,247,248,.82),rgba(255,255,255,.62))}
.final-tray[data-category="all"]{background:linear-gradient(145deg,rgba(250,248,237,.87),rgba(255,255,255,.64))}
.final-tray[data-category="simple"]{background:linear-gradient(145deg,rgba(251,245,219,.83),rgba(255,253,245,.64))}
.final-tray[data-category="compound"]{background:linear-gradient(145deg,rgba(251,230,220,.83),rgba(255,250,246,.64))}
.final-tray[data-category="front-nasal"]{background:linear-gradient(145deg,rgba(226,242,231,.84),rgba(248,255,250,.65))}
.final-tray[data-category="back-nasal"]{background:linear-gradient(145deg,rgba(225,234,243,.84),rgba(249,251,255,.65))}
.tray-heading h2,.whole-heading h2{color:#53604d}
.initial-list{display:grid;grid-template-columns:repeat(3,58px);justify-content:center;align-content:center;gap:9px;min-height:124px;padding:8px 0}
.bubble{width:58px;height:58px;min-width:48px;min-height:48px;flex:0 0 58px;color:#526b49;touch-action:manipulation}
.initial-bubble{--bubble-tint:#B9D9A8;color:#4f6948}
.final-tray .tray-heading{position:relative;padding-right:2px}
.final-tray .tray-heading>div{flex:1;min-width:0}
.final-tray .tray-heading .tray-count{margin-left:5px}
.final-bowl{display:block;min-height:0;margin-top:9px;padding:8px 2px 10px;border:1px solid color-mix(in srgb,var(--category-solid),white 30%);border-radius:18px;background:color-mix(in srgb,var(--category-soft),white 29%);box-shadow:inset 0 2px 9px rgba(255,255,255,.62),inset 0 -4px 10px rgba(85,90,92,.025)}
.final-list{display:grid;width:100%;min-height:0;grid-template-columns:repeat(auto-fit,minmax(58px,58px));justify-content:center;align-content:center;gap:8px 7px;padding:1px 0}
.final-bubble{--bubble-tint:#E9E4D9;width:58px;height:58px;min-width:48px;min-height:48px;flex:none;color:#4f5f4f;touch-action:manipulation}
.final-tray>.category-tabs{display:none!important}
.initial-category-host{display:block;margin:4px 0 0;padding:9px 7px 7px;border-top:1px solid rgba(216,208,186,.78);border-radius:14px;background:linear-gradient(145deg,rgba(246,246,235,.79),rgba(255,253,248,.72))}
.category-host-heading{display:flex;align-items:center;gap:7px;margin:0 0 7px;color:#5e7552}
.category-mark{display:grid;place-items:center;width:25px;height:25px;border-radius:9px;background:#e8f0df;color:#82976c;font-size:13px}
.category-host-heading strong{display:block;font-size:11px;font-weight:900}.category-host-heading small{display:block;margin-top:1px;color:#948e7a;font-size:9px;font-weight:700}
.initial-category-host .category-tabs{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:5px;margin:0;overflow:visible}
.initial-category-host .category-tab{flex:1 1 calc(50% - 5px);min-width:0;min-height:44px;padding:0 5px;border-radius:11px;font-size:9px;line-height:1.12;white-space:normal;text-align:center}
.tray-controls{display:flex;align-items:center;justify-content:space-between;min-height:36px;margin-top:4px}
.final-count-proxy{visibility:hidden}.tray-controls .pager{position:static;gap:7px}
.tray-controls .pager button{width:44px;height:44px;border-radius:12px}
.medial-picker{border-color:rgba(224,207,157,.78);background:linear-gradient(145deg,rgba(250,244,224,.9),rgba(255,253,246,.82));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.medial-bubble,.direct-two-part{--bubble-tint:#F2D18D;color:#856c37}
.direct-two-part{min-height:48px;border-radius:14px;background:rgba(255,249,228,.86);touch-action:manipulation}
.whole-panel{background:linear-gradient(145deg,rgba(244,249,239,.87),rgba(255,255,255,.67));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.reading-stage{border-color:rgba(231,208,164,.86);background:linear-gradient(150deg,rgba(248,238,214,.92),rgba(240,222,185,.88));box-shadow:0 5px 0 rgba(196,171,130,.19),0 15px 30px rgba(111,96,69,.075)}
.reading-stage::after{content:"✦";position:absolute;top:31px;right:24px;color:rgba(189,151,78,.31);font-size:19px;pointer-events:none}
.combination{display:grid;grid-template-columns:1fr;gap:0;min-height:0;padding:12px 0 2px}
.phoneme-line{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1.4vw,15px);min-width:0;min-height:90px}
.phoneme-line .slot{width:clamp(52px,7.2vw,72px);height:clamp(52px,7.2vw,72px);flex:0 0 auto}
.phoneme-line .slot-letter{font-size:clamp(22px,2.8vw,29px)}
.phoneme-line .plus-sign{flex:0 0 auto}
.reading-result-line{display:flex;align-items:center;justify-content:center;gap:10px;min-height:74px}
.reading-result-line .equals-sign{color:#bd9b58;font-size:19px}
#resultBubble.result-bubble{position:relative;display:grid;place-items:center;width:auto;min-width:0;height:auto;min-height:0;padding:2px 12px;border:0;border-radius:0;background:radial-gradient(ellipse at center,rgba(255,255,239,.72) 0,rgba(248,231,180,.25) 45%,transparent 72%);box-shadow:none;color:#53644b;font-size:clamp(42px,10vw,64px);line-height:1.05;letter-spacing:.015em;text-shadow:0 2px 0 rgba(255,255,255,.72),0 5px 17px rgba(138,117,66,.16);transition:transform .22s ease}
#resultBubble.result-bubble::before{content:none}
#resultBubble.result-bubble::after{content:"✦";position:absolute;right:-4px;top:-9px;width:auto;height:auto;border-radius:0;background:none;color:#d4ad5f;font-size:14px;transform:none;opacity:.78;pointer-events:none}
#resultBubble.result-bubble.has-result{color:#526947}
#resultBubble.result-bubble.is-merging{animation:result-reveal .48s cubic-bezier(.2,.8,.25,1)}
@keyframes result-reveal{0%{opacity:.55;transform:translateY(4px) scale(.92)}60%{opacity:1;transform:translateY(-2px) scale(1.04)}100%{transform:translateY(0) scale(1)}}
.result-info,.tone-area{position:relative;z-index:1}
.stage-actions button{min-height:46px}
footer{color:#8e866f}
/* Keep the actual hit target at 48px throughout the inherited bubble-in transition. */
@keyframes bubble-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
  .page-shell{width:calc(100% - 24px);padding-top:0;padding-bottom:16px}
  .scene-hero{min-height:246px;margin-bottom:9px;padding: max(12px,env(safe-area-inset-top)) 12px 24px;background-position:center,center 33%}
  .scene-hero .topbar{gap:7px}.scene-hero .brand-mark{width:37px;height:37px;flex:0 0 37px;font-size:22px}
  .scene-hero .brand-copy{min-width:0}.scene-hero .brand-copy p{font-size:7px;letter-spacing:.07em}.scene-hero .brand-copy h1{font-size:17px}
  .scene-hero .edition{max-width:103px;padding:6px 7px;font-size:8px;line-height:1.15;text-align:center}
  .scene-hero .intro{min-height:166px;padding:8px 0 3px;align-items:center}
  .hero-copy{width:68%;padding:8px 7px;border-radius:15px;background:linear-gradient(100deg,rgba(255,252,243,.55),rgba(255,252,243,.13));box-shadow:none}
  .hero-copy .eyebrow{font-size:10px}.hero-copy h2{max-width:225px;margin:4px 0;font-size:22px;line-height:1.2}.hero-copy p{max-width:212px;margin-top:5px;font-size:10px;line-height:1.43}
  .scene-cat{right:0;bottom:4px;width:clamp(108px,32vw,132px);max-height:92%}
  .material-test-switch{gap:5px;margin-bottom:9px;padding:6px;border-radius:14px}
  .material-test-switch .switch-copy{max-width:86px}.material-test-switch strong{font-size:10px}.material-test-switch small{font-size:8px;line-height:1.2}
  .material-test-switch button{flex:1;min-width:0;min-height:42px;padding:0 5px;font-size:9px}
  .mode-tabs{gap:6px;margin-bottom:8px}.mode-tab{min-height:42px;padding:0 11px;font-size:11px}
  .group-tabs{gap:4px;margin-bottom:8px}.group-tab{min-width:44px;min-height:44px;padding:0 6px;border-radius:11px}.group-tab small{margin-left:2px;font-size:8px}
  .bubble-trays{gap:8px}.tray{min-height:0;padding:11px 7px 9px;border-radius:18px}
  .tray-heading>div{gap:5px}.step-number{width:24px;height:24px;font-size:8px}.tray-heading h2{font-size:12px}.tray-heading p{max-width:110px;font-size:8px}.tray-count{padding:4px 6px;font-size:8px}
  .initial-list{grid-template-columns:repeat(3,48px);gap:7px 4px;min-height:108px;padding:8px 0}
  .bubble{width:48px;height:48px;min-width:48px;min-height:48px;flex:0 0 48px;font-size:21px}
  .bubble::after{left:19%;top:12%}
  .initial-category-host{margin-top:3px;padding:7px 5px 5px;border-radius:12px}
  .category-host-heading{gap:5px;margin-bottom:6px}.category-mark{width:22px;height:22px;font-size:12px}.category-host-heading strong{font-size:10px}.category-host-heading small{font-size:8px}
  .initial-category-host .category-tabs{gap:4px}.initial-category-host .category-tab{flex:1 1 calc(50% - 4px);min-height:42px;min-width:0;padding:0 4px;font-size:9px}
  .final-bowl{margin-top:7px;padding:7px 1px 8px;border-radius:15px}
  .final-list{grid-template-columns:repeat(3,48px);gap:6px 3px;padding:1px 0}
  .final-bubble{width:48px;height:48px;min-width:48px;min-height:48px;font-size:19px}
  .final-bubble[aria-pressed="true"]{transform:scale(1.035)}
  .empty-hint{top:50%;transform:translateY(-50%)}
  .tray-controls{min-height:39px;margin-top:3px}.tray-controls .pager{gap:5px}.tray-controls .pager button{width:44px;height:44px}
  .medial-picker{margin-top:9px;padding:10px 9px;border-radius:17px}.medial-heading{gap:7px}.medial-heading h2{font-size:13px}.medial-heading p{font-size:9px}.medial-bubbles{gap:7px;min-height:58px}.medial-bubble{width:48px;height:48px;min-width:48px;min-height:48px;font-size:20px}.direct-two-part{min-height:44px;padding:0 10px;font-size:11px}
  .whole-panel{padding:11px 9px;border-radius:18px}.whole-bubbles{grid-template-columns:repeat(4,minmax(48px,1fr));gap:6px}
  .reading-stage{margin-top:10px;padding:13px 8px 10px;border-radius:20px}.stage-heading{font-size:9px}.stage-heading span:last-child{font-size:8px}
  .combination{padding-top:7px}.phoneme-line{min-height:74px;gap:5px}.phoneme-line .slot{width:clamp(48px,14vw,56px);height:clamp(48px,14vw,56px)}.phoneme-line .slot-letter{font-size:22px}.phoneme-line .slot-label{font-size:7px}.phoneme-line .plus-sign{font-size:14px}
  .reading-result-line{min-height:67px;gap:7px}.reading-result-line .equals-sign{font-size:16px}#resultBubble.result-bubble{padding:2px 9px;font-size:clamp(40px,12vw,54px)}
  .drag-hint{margin:1px 0 8px;font-size:8px}.stage-actions{gap:7px}.stage-actions button{min-height:44px;padding:0 11px;font-size:11px}.listen-button small{font-size:7px}
  .variant-tray{margin-top:9px;padding:9px 8px}.variant-heading h3{font-size:11px}.variant-heading p{font-size:8px}.variant-choice{min-width:75px;min-height:48px;padding:5px 7px}.variant-choice strong{font-size:16px}
  .result-info{gap:4px}.info-chip{padding:6px 6px;font-size:8px}.tone-button{min-width:46px;min-height:42px}
  footer{flex-direction:column;align-items:center;gap:5px;margin-top:10px;font-size:8px}
}
@media(max-width:365px){
  .page-shell{width:calc(100% - 20px)}.scene-hero{padding-inline:10px}.hero-copy{width:69%}.scene-cat{width:110px}
  .group-tab{min-width:44px;padding:0 5px}.bubble-trays{gap:6px}.tray{padding-inline:6px}
  .initial-list{grid-template-columns:repeat(3,46px);gap:6px 2px}.bubble{width:46px;height:46px;min-width:46px;min-height:46px;flex-basis:46px}
  .final-list{grid-template-columns:repeat(2,48px);gap:6px 7px}.final-bubble{width:48px;height:48px;min-width:48px;min-height:48px}
  .initial-category-host .category-tab{font-size:8px}.phoneme-line{gap:4px}.phoneme-line .slot{width:47px;height:47px}.phoneme-line .slot-letter{font-size:20px}.phoneme-line .plus-sign{font-size:13px}
}
@media(min-width:701px){
  .scene-hero{min-height:255px;background-image:radial-gradient(ellipse at 82% 48%,rgba(245,215,145,.29),transparent 28%),linear-gradient(110deg,#f8f0de,#fbf7ed 48%,#f4eddc)}
  .scene-hero::after{background:radial-gradient(ellipse at 78% 50%,rgba(213,224,192,.34),transparent 32%)}
  .scene-hero .intro{min-height:174px}.hero-copy{max-width:640px}.scene-cat{width:clamp(180px,20vw,226px);right:3%;bottom:2px}
  .final-tray{min-height:270px}.final-list{min-height:130px}
}
@media(prefers-reduced-motion:reduce){.scene-cat,.bubble,.medial-bubble,#resultBubble{animation:none!important;transition:none!important}}

/* V1.1 mobile-first hero: place the transparent CHAR-02 asset on the right. */
.scene-hero{
  min-height:220px;
  padding:18px max(18px,calc((100vw - 1040px)/2 + 18px)) 16px;
  background-image:
    linear-gradient(90deg,rgba(255,250,235,.66) 0%,rgba(255,250,235,.28) 48%,rgba(255,250,235,.02) 100%),
    linear-gradient(180deg,rgba(255,251,239,.02) 0%,rgba(250,246,235,.3) 78%,#faf6eb 100%),
    url("../../assets/BG-01.png");
  background-size:100% 100%,100% 100%,cover;
  background-position:center,center,center 28%;
}
.scene-hero::after{background:radial-gradient(ellipse at 77% 52%,rgba(250,218,142,.2),transparent 38%);}
.hero-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(140px,.92fr);
  align-items:center;
  gap:10px;
  width:100%;
  max-width:1040px;
  min-height:184px;
  margin:0 auto;
}
.hero-lockup{position:relative;z-index:2;min-width:0;padding:8px 0 8px 2px;}
.hero-title-en{margin:0 0 6px;color:#88795f;font-size:clamp(10px,1.4vw,14px);font-weight:900;letter-spacing:.12em;line-height:1.2;text-shadow:0 1px 8px rgba(255,255,255,.9);}
.hero-lockup h1{margin:0;color:#375447;font-size:clamp(30px,5vw,46px);font-weight:950;letter-spacing:.02em;line-height:1.08;text-shadow:0 2px 12px rgba(255,255,255,.94);}
.hero-tagline{margin:8px 0 0;color:#655d4b;font-size:clamp(13px,1.8vw,17px);font-weight:800;letter-spacing:.08em;text-shadow:0 1px 8px rgba(255,255,255,.95);}
.hero-character-slot{position:relative;z-index:1;justify-self:stretch;align-self:stretch;min-width:0;min-height:150px;pointer-events:none;}
.hero-character-slot::before{content:"";position:absolute;inset:12% 4% 5%;border-radius:48% 52% 38% 44%;background:radial-gradient(ellipse at 48% 58%,rgba(251,225,169,.35),rgba(230,234,205,.18) 48%,transparent 73%);filter:blur(5px);}
.hero-character-slot img{position:absolute;inset:auto 0 0;width:100%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:none;}
.material-test-switch{margin-top:12px;}
@media(max-width:700px){
  .page-shell{width:calc(100% - 24px);padding-top:0;}
  .scene-hero{min-height:0;height:151px;margin-bottom:7px;padding:max(10px,env(safe-area-inset-top)) 12px 11px;background-position:center,center,center 23%;}
  .scene-hero::after{background:radial-gradient(ellipse at 76% 52%,rgba(250,218,142,.22),transparent 42%),linear-gradient(90deg,rgba(255,251,240,.38),transparent 76%);}
  .hero-layout{grid-template-columns:minmax(0,1fr) minmax(122px,.82fr);gap:4px;min-height:0;height:100%;}
  .hero-lockup{padding:2px 0 3px 1px;}
  .hero-title-en{margin-bottom:5px;font-size:9px;letter-spacing:.105em;white-space:nowrap;}
  .hero-lockup h1{font-size:clamp(26px,7.4vw,32px);letter-spacing:0;white-space:nowrap;}
  .hero-tagline{margin-top:7px;font-size:12px;letter-spacing:.06em;white-space:nowrap;}
  .hero-character-slot{min-height:0;height:100%;}
  .hero-character-slot::before{inset:14% 1% 3%;filter:blur(3px);}
  .material-test-switch{margin-top:11px;}
  .mode-tabs{margin:0 0 7px;}
  .group-tabs{margin-bottom:7px;}
}
@media(max-width:390px){
  .scene-hero{height:145px;padding-inline:10px;}
  .hero-layout{grid-template-columns:minmax(0,1fr) minmax(112px,.78fr);}
  .hero-title-en{font-size:8px;letter-spacing:.09em;}
  .hero-lockup h1{font-size:27px;}
  .hero-tagline{font-size:11px;}
}
@media(min-width:701px){
  .scene-hero{min-height:236px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:12px;background-position:center,center,center 30%;}
  .hero-layout{min-height:208px;}
}