/* Maison is the shared interface system. This final layer changes chrome and
   menu surfaces; functional region pigments, board geometry and frame rewards
   are deliberately outside its selectors. Load after the older feature sheets. */
:root{
 --house-soft:color-mix(in srgb,var(--house-paper) 66%,var(--house-bg));
 --house-tint:color-mix(in srgb,var(--house-sage) 10%,var(--house-paper));
 --house-warm:color-mix(in srgb,var(--house-apricot) 11%,var(--house-paper));
 --house-lilac-soft:color-mix(in srgb,#ba9fd0 12%,var(--house-paper));
 --house-lilac-ink:#d8c1e8;--house-danger:#efb3a6;--house-danger-soft:#563b36;
 --house-ring:var(--house-sage);--house-radius:22px;
 background:var(--house-bg);
}
:root[data-theme=light]{--house-lilac-ink:#735284;--house-danger:#943f35;--house-danger-soft:#f6e4dc;}
:root[data-theme=pastel]{--house-lilac-ink:#715a83;--house-danger:#8f3d43;--house-danger-soft:#f8e2e5;}

/* Alias the old component vocabulary at the surface boundary, including the
   overlays mounted outside #hub. No global --tile/--color/--play-* mutation. */
:root[data-theme] :is(.club-header,#hub,#modal,#toast,#session-gate,.session-information,
 .pwa-connectivity,.pwa-update-notice,.companion-cheer,.cloud-banner,.sync-choice){
 --club-bg:var(--house-bg);--surface:var(--house-paper);--text:var(--house-ink);
 --sub:var(--house-muted);--mint:var(--house-sage);--orange:var(--house-apricot);
 --club-line:var(--house-line);--club-title-font:var(--house-title);
 --club-soft-shadow:0 8px 26px var(--house-shadow);--menu-focus:var(--house-ring);
 --menu-muted:var(--house-muted);color:var(--house-ink);
}
:root[data-theme] .club-header{background:var(--house-bg);border-color:var(--house-line)}
:root[data-theme] .club-header .brand{color:var(--house-ink)}
:root[data-theme] .club-header :is(.brand svg,.brand-dot){color:var(--house-apricot)}
:root[data-theme] .club-header .user-pill{background:var(--house-paper);border-color:var(--house-line);color:var(--house-ink)}
:root[data-theme] .club-header .user-pill small{color:var(--house-muted)}
:root[data-theme] .club-header :is(nav button,.header-settings,.help-top){color:var(--house-muted)}
:root[data-theme] .club-header nav button.active{color:var(--house-sage);background:var(--house-tint)}
:root[data-theme] .club-header :is(.header-settings.active,.help-top.active){color:var(--house-sage);background:var(--house-tint)}
:root[data-theme] .club-header .user-pill:is(.active,:hover){border-color:var(--house-sage)}
:root[data-theme] .club-header :is(nav button,.header-settings,.help-top):hover{color:var(--house-sage);background:var(--house-tint)}
:root[data-theme] .club-header :is(button,a):focus-visible{outline-color:var(--house-ring)}

/* A single type hierarchy for all inner pages, including admin and result
   headings that previously selected an unrelated rounded/system family. */
#hub,#modal,.session-gate-card,.pwa-connectivity,.pwa-update-notice,#toast,.companion-cheer{
 font-family:var(--house-body);line-height:1.6;
}
#hub :is(h1,h2,h3,h4,h5,h6,.gov-stat b,.gov-section-heading h2,.collection-summary-copy>b),
#modal :is(h1,h2,h3,h4,h5,h6,.result-stats strong,.result-reward>strong),
.session-gate-card h1{font-family:var(--house-title);font-weight:700;letter-spacing:-.025em}
#hub :is(button,input,select,textarea),#modal :is(button,input,select,textarea),
.session-gate-card :is(button,a,input),.pwa-update-notice button{font-family:var(--house-body)}
#hub :is(button,summary){min-height:44px}
#hub :is(button,a,input,select,textarea,summary):focus-visible,
#modal :is(button,a,input,select,textarea,summary):focus-visible{
 outline:3px solid var(--house-ring);outline-offset:3px;
}
#hub :is(input,select,textarea),#modal :is(input,select,textarea){
 color:var(--house-ink);background-color:var(--house-bg);border-color:var(--house-line);
 accent-color:var(--house-sage);
}
:root[data-theme=dark] :is(#hub,#modal,.session-gate-card) :is(input,select,textarea){color-scheme:dark}
:root:is([data-theme=light],[data-theme=pastel]) :is(#hub,#modal,.session-gate-card) :is(input,select,textarea){color-scheme:light}
#hub :is(.field-note,.subtle,.gov-card small,.gov-list-row small,.gov-filter label,.gov-feedback){color:var(--house-muted)}
#hub :is(.panel,.feature,.rank-stop,.world,.gov-card,.gov-stat,.gov-list-row,.comparison,
 .profile-preview,.profile-editor,.player-stats article,.friend-card,.duel-card,.settings-card,
 .collection-panel,.sync-card,.loading,.menu-state){
 background-color:var(--house-paper);border-color:var(--house-line);color:var(--house-ink);
 box-shadow:0 6px 20px var(--house-shadow);
}
#hub :is(.social-tabs,.duel-filters,.profile-local-nav,.menu-section-nav,.gov-tabs){
 background:var(--house-soft);border-color:var(--house-line);
}
#hub :is(.social-tabs,.duel-filters,.profile-local-nav,.menu-section-nav,.gov-tabs)
 :is(.active,[aria-current=page],[aria-selected=true],[aria-pressed=true]){
 color:var(--house-sage);background:var(--house-paper);border-color:var(--house-line);
 box-shadow:0 2px 6px var(--house-shadow);
}
#hub :is(.previous-season,.league-ranking .league-row.mine,.league-permanent,.duel-summary>.panel,
 .gov-owner-strip,.gov-feedback-success,.setting-switch input:checked){background:var(--house-tint)}
#hub .profile-numbers{background:transparent;border-color:var(--house-line)}
#hub .profile-numbers small{color:var(--house-muted)}
#hub .xp-track{background:var(--house-line)}
#hub .collection-panel>.panel-heading>span{color:var(--house-muted);font-size:12px;line-height:1.5}
#hub :is(.tag,.rank-badge,.duel-comparison>div,.player-stats article,.gov-change-list,.collection-disclosure){
 background:var(--house-soft);border-color:var(--house-line);color:var(--house-ink);
}
/* These are quiet inline annotations, not panel or badge surfaces. Keep the
   shared card/tag palette from painting rectangles behind the home copy. */
#hub .lobby-journey .tag,#hub .home-save-status.sync-card{
 background:transparent;border:0;box-shadow:none;
}
:root[data-theme] :is(#hub,#modal,.club-header) .avatar{background:var(--house-soft)}
:root[data-theme] :is(#hub,#modal,.club-header) .avatar.frame-basic{
 border-color:var(--house-line);box-shadow:0 3px 10px var(--house-shadow);
}
/* The chooser tile is interface chrome; the earned frame sample inside keeps
   its own colors, animation and unlock state. */
#hub .frame-picker>button[data-frame]{background:var(--house-soft);border-color:var(--house-line);color:var(--house-ink)}
#hub .frame-picker>button[data-frame][aria-pressed=true]{background:var(--house-tint);border-color:var(--house-sage)}
#hub .frame-picker>button[data-frame]:not(:disabled):hover{border-color:var(--house-sage)}
#hub .frame-picker>button[data-frame] small{color:var(--house-muted)}
#hub .theme-preview-dark i{background:#382d29}
#hub .theme-preview-dark b{background:#acc295}
#hub .theme-preview-dark em{background:#ecad80}
#hub .theme-preview-light i{background:#fff9ef}
#hub .theme-preview-light b{background:#c3c5a1}
#hub .theme-preview-light em{background:#df875c}
#hub .theme-preview-pastel i{background:#fffaf6}
#hub .theme-preview-pastel b{background:#dce8d7}
#hub .theme-preview-pastel em{background:#edba9e}
#hub .setting-switch input{background:color-mix(in srgb,var(--house-muted) 30%,var(--house-paper))}
#hub .setting-switch input:checked{background:var(--house-sage)}
#hub :is(.zone-relegation,.gov-danger-button){color:var(--house-danger)!important}
#hub :is(.gov-danger,.gov-card.gov-danger,.gov-danger-button){border-color:color-mix(in srgb,var(--house-danger) 60%,var(--house-line));background:var(--house-danger-soft)}
#hub .gov-danger-button:focus-visible{outline-color:var(--house-danger)}
#hub :is(.gov-confirm,.gov-stat-grid,.gov-editor-layout,.duel-format-fields,.profile-layout,.player-stats){min-width:0}
#hub :is(.gov-card,.gov-list-row,.profile-preview,.profile-editor,.friend-card,.duel-card,.menu-state){overflow-wrap:anywhere}
#hub .gov-owner-strip button,#hub .gov-paws-presets>button,#hub .gov-disclosure>summary{min-height:44px}

/* Buttons retain their existing actions. Their emphasis no longer depends on
   which page supplied the component. Danger and earned frame pigments remain. */
#hub :is(.primary,.social-primary),#modal :is(.primary,.result-primary),
.session-gate-card :is(.primary,#session-signin){
 background:var(--house-apricot);color:var(--house-button-ink);border-color:transparent;
 box-shadow:0 4px 0 color-mix(in srgb,var(--house-apricot) 72%,var(--house-ink));
}
#hub :is(.secondary,.social-outline,.sync-actions button),#modal :is(.secondary,.sync-actions button){
 background:var(--house-soft);color:var(--house-ink);border-color:var(--house-line);
}
#hub :is(.primary,.social-primary):hover,#modal :is(.primary,.result-primary):hover{
 background:color-mix(in srgb,var(--house-apricot) 92%,var(--house-paper));
}
#hub :is(.secondary,.social-outline,.sync-actions button):hover,#modal :is(.secondary,.sync-actions button):hover{
 background:var(--house-tint);border-color:var(--house-sage);
}
#modal :is(.result-menu,.result-secondary>button,.result-details>summary,.guide-nav button,
 .companion-back,.companion-rules,.guide-practice-button){min-height:44px}
/* The result-category ranking shares the menu palette in all three themes.
   These selectors change presentation only; the timed/untimed query stays put. */
#modal .ranking-filters button{min-height:44px;color:var(--house-ink);background:var(--house-soft);border:1px solid var(--house-line)}
#modal .ranking-filters button.active{color:var(--house-bg);background:var(--house-sage);border-color:var(--house-sage)}
#modal .ranking-filters button:not(.active):hover{background:var(--house-tint);border-color:var(--house-sage)}
#modal #rank-content{color:var(--house-muted)}
#modal .rank-note{color:var(--house-muted);font-size:12px;line-height:1.65}
#modal .rank-table{color:var(--house-ink)}
#modal .rank-table :is(td,th){border-color:var(--house-line)}
#modal .rank-table th{color:var(--house-muted)}
#modal .rank-table .mine{background:var(--house-tint)}
#modal #rank-content .ranking-button{min-height:44px;color:var(--house-sage)}
#modal::backdrop{background:color-mix(in srgb,var(--house-bg) 70%,transparent);backdrop-filter:blur(8px)}

/* About and Studio are part of the same house. Paper keeps a warm light ink
   treatment where it is a literal object, rather than a second application. */
#hub .about-club{--joy-ink:var(--house-ink)}
#hub .about-party-hero{
 color:var(--house-ink);border:1px solid var(--house-line);
 background:radial-gradient(ellipse at 92% 10%,var(--house-warm),transparent 70%),
 radial-gradient(ellipse at 12% 90%,var(--house-tint),transparent 65%),var(--house-paper);
 box-shadow:0 8px 26px var(--house-shadow);
}
#hub .about-party-copy :is(h1,h1 em){color:var(--house-ink)!important}
#hub .about-party-copy h1 em{color:var(--house-sage)!important}
#hub .about-party-copy>p,#hub .joy-rule p,#hub .joy-status{color:var(--house-muted)!important}
#hub .about-party-hero .joy-kicker,#hub .joy-facts b{color:var(--house-sage)}
#hub :is(.joy-facts,.joy-party-button){color:var(--house-muted);border-color:var(--house-line)}
#hub .about-party-copy .primary{background:var(--house-apricot);color:var(--house-button-ink);box-shadow:0 4px 0 color-mix(in srgb,var(--house-apricot) 72%,var(--house-ink))}
#hub .joy-rule{color:var(--house-ink);border:1px solid var(--house-line)}
#hub .joy-rule-0{background:var(--house-warm)}
#hub .joy-rule-1{background:var(--house-tint)}
#hub .joy-rule-2{background:var(--house-lilac-soft)}
#hub .joy-rule h3{color:var(--house-ink)!important}
#hub .joy-rule-number{color:color-mix(in srgb,var(--house-ink) 25%,transparent)}
#hub .joy-party-button:focus-visible,#hub .joy-yarn:focus-visible{outline-color:var(--house-ring)}
#hub :is(.joy-progress-cards article,.joy-outro){border-color:var(--house-line);background:var(--house-paper)}
#hub .studio-page{--studio-peach:var(--house-apricot);--studio-green:var(--house-sage);--studio-lilac:var(--house-lilac-ink);--studio-card-shadow:var(--house-shadow)}
#hub .studio-project-miaou .studio-project-visual{background:radial-gradient(ellipse at 80% 10%,var(--house-warm),transparent 65%),var(--house-tint)}
#hub .studio-project-sticker{background:var(--house-paper);color:var(--house-muted);border-color:var(--house-line);box-shadow:0 3px 8px var(--house-shadow)}
#hub .studio-paper{border-color:color-mix(in srgb,var(--house-line) 70%,var(--house-paper));box-shadow:0 5px 12px var(--house-shadow)}
/* Printed paper has its own stable walnut ink. The surrounding dialog and its
   close action keep the selected game theme. */
#modal .postcard-paper{
 --postcard-paper:#fff6e7;--postcard-ink:#514036;--postcard-muted:#715d4e;
 --text:var(--postcard-ink);--sub:var(--postcard-muted);
 background:var(--postcard-paper);color:var(--postcard-ink);
}
#modal .postcard-paper :is(p,h2){color:var(--postcard-ink)}
#modal .postcard-paper :is(.postcard-overline,.postcard-signature>span,.postcard-address>span,.postcard-address>small,.postcard-stamp){color:var(--postcard-muted)}

/* Overlays live outside the content root, so they need explicit inherited
   aliases. Their state machines and account/synchronisation controls stay put. */
#session-gate{background:var(--house-bg);font-family:var(--house-body)}
.session-gate-card{background:var(--house-paper);color:var(--house-ink);border-color:var(--house-line);box-shadow:0 9px 28px var(--house-shadow)}
.session-gate-card p{color:var(--house-muted)}
.session-brand{display:block;width:64px;height:64px;color:var(--house-apricot);margin:0 0 12px}
.session-brand>svg{display:block;width:100%;height:100%}
.session-gate-card :is(button,a,input){border-color:var(--house-line)}
.session-information button{background:var(--house-paper);color:var(--house-ink);border-color:var(--house-line)}
#toast,.pwa-connectivity,.pwa-update-notice,.companion-cheer{
 background:var(--house-paper);color:var(--house-ink);border-color:var(--house-line);
 box-shadow:0 8px 28px var(--house-shadow);
}
.pwa-update-notice button{background:var(--house-tint);color:var(--house-sage);min-height:44px}
.pwa-update-notice button:focus-visible,.session-information button:focus-visible{outline-color:var(--house-ring)}
.cloud-banner,.sync-choice{font-family:var(--house-body)}
.board-wrap>.cloud-banner{background:color-mix(in srgb,var(--house-paper) 97%,transparent);border-color:var(--house-line)}
.board-wrap>.cloud-banner>b,.board-wrap>.cloud-banner>span:not(.cloud-cat){color:var(--house-ink)}
.cloud-banner .sync-actions button{background:var(--house-bg);color:var(--house-ink);border-color:var(--house-line)}
.cloud-banner .sync-actions button.primary{background:var(--house-apricot);color:var(--house-button-ink);border-color:transparent}
.sync-dot.saving,.sync-dot.loading{background:var(--house-lilac-ink)}
.sync-choice .primary{color:var(--house-button-ink)}
/* Only neutral frame variables reach the board gutter. Each cell still owns
   its JavaScript-provided --color/--tile region pigments. */
#game-screen .game-card{--surface:var(--house-paper);--club-line:var(--house-line)}
#game-screen .hypothesis-panel{
 --surface:var(--house-paper);--club-bg:var(--house-bg);--club-line:var(--house-line);
 --text:var(--house-ink);--sub:var(--house-muted);
 background:var(--house-paper);border-color:var(--house-line);font-family:var(--house-body);
}
#game-screen .hypothesis-panel>span{color:var(--house-muted);font-size:12px;line-height:1.5}
#game-screen .hypothesis-panel button{background:var(--house-soft);border-color:var(--house-line);color:var(--house-ink);font-family:var(--house-body);min-height:44px}
#game-screen .hypothesis-panel button.active{background:var(--house-lilac-soft);border-color:var(--house-lilac-ink);color:var(--house-lilac-ink)}
#game-screen .hypothesis-panel button:focus-visible{outline:3px solid var(--house-lilac-ink);outline-offset:2px}
/* Pause covers the board with opaque interface paper. It changes neither
   region pigments nor the existing pause/resume request lifecycle. */
#pause-overlay{background:var(--house-paper);color:var(--house-ink);font-family:var(--house-body);backdrop-filter:none}
#pause-overlay h2{font-family:var(--house-title);font-weight:700;letter-spacing:-.025em;color:var(--house-ink)}
#pause-overlay button{
 font-family:var(--house-body);font-size:14px;font-weight:700;min-height:48px;
 padding:14px 20px;border-radius:16px;border-color:transparent;
 background:var(--house-apricot);color:var(--house-button-ink);
 box-shadow:0 4px 0 color-mix(in srgb,var(--house-apricot) 72%,var(--house-ink));
}
#pause-overlay button:focus-visible{outline:3px solid var(--house-sage);outline-offset:4px}
body:has(#pause-overlay:not([hidden])) #fx-layer .yarn-greeting{display:none}

/* Raster and motion renderers share the old component boxes. These rules adapt
   the parent slots formerly restricted to >svg, without changing art internals. */
.social-heading-cats>.maison-art{width:88px;height:114px;flex:none}
.social-heading-cats>.maison-art+.maison-art{margin-left:-8px;width:76px;height:100px}
.collection-preview-art>.maison-art{width:73px;height:94px;flex:none}
#hub .exp-companion>.maison-art{width:90px;height:98px;flex:none;opacity:.72}
#hub .exp-companion.exp-unlocked>.maison-art{opacity:1}
#hub [data-companion-teaser]>.maison-art{display:block;width:82px;height:74px;max-height:74px}
#hub .pilot-companion-illustration>.maison-art{position:absolute;inset:0;width:100%;height:var(--pilot-companion-art-height);max-width:100%;max-height:100%;min-height:0}
#hub [data-companion-state=locked] .pilot-companion-illustration>.maison-art{filter:saturate(.78);opacity:.88}
.home-progress-art>.maison-art{width:100%;height:100%}
.postcard-host>.maison-art{display:block;width:100%;height:auto;aspect-ratio:1}
.studio-cat>.maison-art,.studio-project-cat>.maison-art{display:block;width:100%;height:auto;aspect-ratio:1}
.gov-cat>.maison-art,.duel-empty-cat>.maison-art,.league-companion>div:first-child>.maison-art{width:100%;height:100%}
.social-empty>span>.maison-art{width:100%;height:100%}
#hub .social-companions .maison-art-avatar{width:58px;height:58px;padding:3px;border:1px solid var(--house-line);border-radius:50%;background:var(--house-paper);overflow:hidden}
.scene-host>.maison-art,.scene-friend>.maison-art{display:block;width:100%;height:100%}
.result-panel .exp-chapter-reward>.maison-art{width:53px;height:58px;flex:none}
.joy-outro-cats>.maison-art{width:61px;height:70px;position:relative;margin:0 -2px;flex:none}
.joy-outro-cats>.maison-art:nth-child(2){transform:translateY(-8px)}
.flying-cat>.maison-art{width:100%;height:100%}
.about-party-art>.maison-art,.about-party-art>.mascot-living,.about-party-art>.maison-about-character{width:min(100%,440px);height:100%;max-width:100%}
.mascot-living>.maison-art{width:100%;height:100%}
.session-gate-card>.maison-art{display:block;width:96px;height:96px;margin:0 0 10px}
.cloud-cat>.maison-art{width:100%;height:100%}

@media(max-width:650px){
 #hub :is(.gov-card,.gov-list-row,.duel-card,.friend-card,.profile-editor,.profile-preview){border-radius:20px}
 #hub :is(.gov-section-heading>button,.gov-actions>button,.gov-player-controls>button,.duel-card-actions>button){min-height:48px}
 #hub :is(input:not([type=checkbox]):not([type=radio]),select,textarea){font-size:16px}
 #modal :is(.result-menu,.result-secondary>button,.result-details>summary){min-height:44px}
 .social-heading-cats>.maison-art{width:58px;height:78px}
 .social-heading-cats>.maison-art+.maison-art{width:43px;height:60px;margin-left:-7px}
 .collection-preview-art>.maison-art{width:58px;height:75px}
 #hub .exp-companion>.maison-art{width:81px;height:88px}
 #hub [data-companion-teaser]>.maison-art{width:76px;height:74px;max-height:74px}
 .joy-outro-cats>.maison-art{width:54px;height:60px}
 .pwa-update-notice,.pwa-connectivity{bottom:calc(84px + env(safe-area-inset-bottom))}
 #toast{bottom:calc(82px + env(safe-area-inset-bottom))}
 body[data-screen=game] #toast{bottom:calc(18px + env(safe-area-inset-bottom))}
 .session-gate-card{padding:24px 20px;border-radius:23px}
}
@media(prefers-reduced-motion:reduce){
 #hub :is(button,a,summary),#modal :is(button,a,summary),.pwa-update-notice button{transition:none!important}
}
:root[data-motion=reduced] #hub :is(button,a,summary),
:root[data-motion=reduced] #modal :is(button,a,summary){transition:none!important}

/*27October corrections: illustration slots have explicit bounds. The SVG
  motion viewport preserves the square source inside every rectangular slot. */
#hub .daily-present{grid-template-columns:96px minmax(0,1fr) auto}
.present-art{width:96px;height:96px;flex:none}
.present-art>.maison-art{display:block;width:96px;height:96px}
#hub .social-empty>span{width:112px;height:112px;max-width:100%}
#hub .exp-host{width:200px;min-width:0;flex:0 0 200px;align-self:center}
#hub .exp-host>.maison-art{width:180px;height:180px;max-width:100%;flex:none}
#hub .exp-host>.exp-host-trait{max-width:200px;font-size:12px;line-height:1.5}
#hub .exp-host>span:last-child{font-size:12px;line-height:1.5;max-width:200px}
#hub .exp-host>b{font-size:24px}
#hub .lobby-journey .hero-copy>.tag[hidden]{display:none}
#hub .lobby-journey .hero-copy>h2{font-variant-numeric:lining-nums}
/* Numbered level cards: states are words, never a font-dependent box glyph. */
#hub .exp-world-title{min-height:76px;gap:16px}
#hub .exp-world-title h3{font-size:21px;line-height:1.3}
#hub .exp-world-title>small{font-size:13px;line-height:1.5}
#hub .exp-world-title>span:first-child{font-size:11px}
#hub .exp-route{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;padding:16px 20px 22px}
#hub .exp-stage,#hub .exp-stage:nth-of-type(even){display:grid;grid-template-columns:52px minmax(0,1fr);grid-auto-rows:auto;align-content:center;align-items:center;justify-items:start;gap:5px 13px;min-height:128px;width:100%;max-width:none;padding:17px;text-align:left;transform:none;border:1px solid var(--house-line);border-radius:20px;background:var(--house-paper);opacity:1}
#hub .exp-stage::before,#hub .exp-stage-pin,#hub .exp-road{display:none}
#hub .exp-stage .exp-node{grid-column:1;grid-row:1/5;width:52px;height:56px;min-width:52px;margin:0;display:grid;place-items:center;border:1px solid var(--house-line);border-radius:17px;background:var(--house-soft);color:var(--house-ink);font-size:23px;font-weight:750;animation:none;box-shadow:none}
#hub .exp-stage>b{grid-column:2;font-size:16px;line-height:1.35;margin:0;max-width:none;color:var(--house-ink)}
#hub .exp-stage>small{grid-column:2;font-size:12px;line-height:1.5;color:var(--house-muted)}
#hub .exp-stage>.exp-stage-rhythm{grid-column:2;min-height:0;font-size:12px;line-height:1.4;color:var(--house-muted)}
#hub .exp-stage>em{grid-column:2;font-size:13px;line-height:1.5;font-style:normal;color:var(--house-muted)}
#hub .exp-stage.exp-current{border:2px solid var(--house-apricot);background:var(--house-tint);padding:16px}
#hub .exp-current .exp-node{background:var(--house-apricot);border-color:transparent;color:var(--house-button-ink)}
#hub .exp-current>em{color:var(--house-ink);font-weight:750}
#hub .exp-complete .exp-node{color:var(--house-sage);border-color:var(--house-sage)}
#hub .exp-stage:disabled{background:var(--house-soft);cursor:default}
#hub .exp-stage:disabled>:is(b,.exp-node,small,em){color:var(--house-muted)}
#hub .exp-stage:disabled>*{opacity:1}
#hub .exp-stage:enabled:hover{border-color:var(--house-sage);background:var(--house-tint)}
#hub .exp-stage:focus-visible{outline:3px solid var(--house-sage);outline-offset:3px}
#hub .exp-travel-note{font-size:13px;gap:18px;padding:20px 2px}
#hub .exp-travel-note>small{font-size:13px;line-height:1.5}
@media(max-width:700px){
 #hub .exp-hero{flex-direction:column;align-items:stretch;padding:22px;gap:14px}
 #hub .exp-hero-copy{width:100%;min-width:0}
 #hub .exp-hero h2{font-size:27px;line-height:1.2}
 #hub .exp-host{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;align-content:center;gap:3px 14px;width:100%;flex:none;text-align:left}
 #hub .exp-host>.maison-art{grid-column:1;grid-row:1/4;width:92px;height:92px}
 #hub .exp-host>b{grid-column:2;font-size:20px;text-align:left;margin:0}
 #hub .exp-host>:is(.exp-host-trait,span:last-child){grid-column:2;font-size:11px;max-width:none;text-align:left;margin:0}
 #hub .exp-route{grid-template-columns:minmax(0,1fr);padding:12px;gap:10px}
 #hub .exp-stage,#hub .exp-stage:nth-of-type(even){min-height:116px;padding:15px;grid-template-columns:52px minmax(0,1fr);gap:4px 14px}
 #hub .exp-stage.exp-current{padding:14px}
 #hub .exp-world-title h3{font-size:18px}
 #hub .exp-world-title>small{font-size:12px}
 #hub .exp-travel-note{gap:12px;font-size:12px}
 #hub .exp-travel-note>small{font-size:12px}
}
@media(max-width:650px){
 #hub .daily-present{grid-template-columns:64px minmax(0,1fr) auto}
 .present-art,.present-art>.maison-art{width:64px;height:64px}
 .present-art .present-yarn{width:27px;height:27px;right:-2px;bottom:-2px}
}