/* Hallmark · theme: owner-approved YiPhase mountain theatre · genre: playful · redesign: restyle · surface: absolute · posture: restrained */
:root{
 --yp-paper:#FFFFFF;--yp-soft:#F3F7FB;--yp-stage:#E2EDF6;--yp-ink:#294B65;--yp-deep:#18394F;
 --yp-blue:#487FA8;--yp-peach:#F4A38B;--yp-peach-soft:#FFF0E9;--yp-muted:#536B7D;--yp-rule:#C9D8E4;
 --yp-focus:#294B65;--yp-clear:transparent;--yp-shadow-color:rgb(24 57 79 / .14);--yp-dim:rgb(24 57 79 / .08);
 --yp-backdrop:rgb(15 35 50 / .72);--yp-edge:#D7E4EF;--yp-error:#9A3540;--yp-white-edge:rgb(255 255 255 / .76);
 --yp-font:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
 --yp-brand-font:Georgia,"Times New Roman",serif;
 --yp-radius:24px;--yp-inner:16px;--yp-scene-radius:32px;--yp-pill:999px;
 --yp-shadow:0 2px 4px -2px var(--yp-dim),8px 16px 28px -18px var(--yp-shadow-color);
 --yp-scene-shadow:0 2px 4px -2px var(--yp-dim),14px 24px 36px -20px var(--yp-shadow-color);
 --yp-ease:cubic-bezier(.16,1,.3,1);--yp-fast:120ms;--yp-calm:220ms;
 --yp-container:1240px;--yp-gutter:40px;--yp-gap:28px;
}

/* Hallmark · shape: shared public shell, situation stage and real course browser · theme: YiPhase brand · genre: playful · redesign: restyle · surface: absolute
 * hero: scene beside the reading action on home, content-first on reference pages · nav: compact single brand bar · footer: original useful links
 * signature: wide teaching landscape and optional complete-image view · posture: restrained · v2.0.0 */
/* Hallmark · pre-emit critique: keep the reviewed entry hierarchy while extending it through existing public templates; text stays off important scenery */
/* Hallmark · waive 7b · approved white brand base and inverse controls · retain the selected Bay Blue palette */
html:has(body.yp-site),body.yp-site{overflow-x:clip}
body.yp-site{margin:0;background:var(--yp-paper);color:var(--yp-ink);font-family:var(--yp-font);font-size:16px;line-height:1.6;caret-color:var(--yp-ink)}
body.yp-site *,body.yp-site *::before,body.yp-site *::after{box-sizing:border-box}
body.yp-site ::selection{background:var(--yp-stage);color:var(--yp-ink)}
body.yp-site :focus-visible{outline:2px solid var(--yp-focus);outline-offset:3px;transition:none}
body.yp-site h1,body.yp-site h2,body.yp-site h3{font-family:var(--yp-font);font-style:normal;overflow-wrap:break-word;min-width:0;letter-spacing:-.02em}
body.yp-site h1{line-height:1.12}body.yp-site h2,body.yp-site h3{line-height:1.25}
body.yp-site img{max-width:100%}
body.yp-site [hidden]{display:none!important}
body.yp-site a{color:var(--yp-ink);text-underline-offset:3px}
body.yp-site input,body.yp-site textarea,body.yp-site select,body.yp-site button{font-family:var(--yp-font)}
body.yp-site .yp-utility-header{max-width:var(--yp-container);width:100%;margin:0 auto;padding:8px var(--yp-gutter);min-height:0;height:auto;display:flex;align-items:center;justify-content:flex-end;gap:16px;border:0;background:var(--yp-paper);box-shadow:none}
body.yp-site .yp-utility-header:empty{display:none}
body.yp-site .yp-utility-header>*{margin:0;font-size:13px}
body.yp-site .yp-site-nav[data-journey-nav]{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:var(--yp-container);margin:0 auto;padding:12px var(--yp-gutter);background:var(--yp-paper);color:var(--yp-ink);border:0;border-radius:0;box-shadow:none;position:relative;z-index:100;min-height:84px;font:500 14px/1.5 var(--yp-font)}
body.yp-site .yp-site-nav .journey-brand-lockup.journey-brand-lockup{display:inline-flex;align-items:center;gap:8px;padding:0;min-height:48px;background:var(--yp-clear);border:0;box-shadow:none;text-decoration:none;flex-shrink:0}
body.yp-site .yp-site-nav .journey-brand-mark{width:38px;height:38px;flex:none}
body.yp-site .yp-site-nav .journey-wordmark{font:400 28px/1.08 var(--yp-brand-font);letter-spacing:0}
body.yp-site .yp-site-nav .journey-brand-type small{font:400 10px/1.4 var(--yp-font);letter-spacing:0;margin:4px 0 0;color:var(--yp-muted)}
body.yp-site .yp-site-nav .journey-brand-seal,body.yp-site .yp-site-nav .journey-nav-label{display:none}
body.yp-site .yp-site-nav .journey-links{display:flex;align-items:center;gap:0px;flex-wrap:nowrap;order:1}
body.yp-site .yp-site-nav .journey-links>a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 8px;margin:0;white-space:nowrap;border:0;border-radius:var(--yp-pill);color:var(--yp-ink);background:var(--yp-clear);box-shadow:none;font:600 13px/1.4 var(--yp-font);text-decoration:none}
body.yp-site .yp-site-nav .journey-links>a[aria-current=page]{background:var(--yp-stage);box-shadow:none}
body.yp-site .yp-site-nav .journey-quick{order:2;min-height:44px;padding:8px 16px;background:var(--yp-ink);color:var(--yp-paper);border:0;border-radius:var(--yp-pill);font:600 13px/1.4 var(--yp-font);box-shadow:none;white-space:nowrap;text-decoration:none}
body.yp-site .yp-site-nav .customer-account-shortcut,body.yp-site .yp-site-nav .journey-menu{display:none}
body.yp-site .journey-skip{background:var(--yp-ink);color:var(--yp-paper);border-radius:var(--yp-inner)}
body.yp-site .customer-account-footer{border:0;margin:12px auto 0;padding:4px 0;color:var(--yp-ink)}
body.yp-site .customer-account-footer a{border-radius:var(--yp-pill)}
body.yp-site footer{font-family:var(--yp-font);background:var(--yp-soft);color:var(--yp-muted);border-color:var(--yp-rule);line-height:1.6}
body.yp-site footer a{display:inline-flex;align-items:center;min-height:44px;margin-inline:4px;font-size:14px;letter-spacing:0}
.yp-container{width:100%;max-width:var(--yp-container);padding-inline:var(--yp-gutter);margin-inline:auto}
.yp-btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:12px 24px;border:1px solid var(--yp-ink);border-radius:var(--yp-pill);background:var(--yp-ink);color:var(--yp-paper)!important;font:600 15px/1.4 var(--yp-font);text-decoration:none;cursor:pointer;transition:transform var(--yp-fast) var(--yp-ease),background-color var(--yp-calm) var(--yp-ease)}
.yp-btn.yp-quiet{background:var(--yp-paper);color:var(--yp-ink)!important;border-color:var(--yp-rule)}
.yp-btn:active,.yp-chip:active,.yp-scene-expand:active{transform:translateY(1px)}
.yp-text-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.yp-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.yp-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--yp-rule);border-radius:var(--yp-pill);background:var(--yp-paper);color:var(--yp-ink);font:600 13px/1.4 var(--yp-font);cursor:pointer;transition:transform var(--yp-fast) var(--yp-ease),background-color var(--yp-calm) var(--yp-ease)}
.yp-chip[aria-pressed=true]{background:var(--yp-ink);border-color:var(--yp-ink);color:var(--yp-paper)}
.yp-chip svg{width:13px;height:13px;display:none}.yp-chip[aria-pressed=true] svg{display:block}
.yp-home{background:linear-gradient(145deg,var(--yp-paper) 10%,var(--yp-soft) 36%,var(--yp-paper) 58%)}
.yp-site .yp-home .yp-home-hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px;align-items:center;padding-block:48px;isolation:isolate;min-height:0;padding-inline:0;max-width:none;margin:0;border:0;background:var(--yp-clear);overflow:visible}
.yp-home-hero h1{font-size:clamp(2.5rem,4.4vw,4.2rem);font-weight:650;max-width:11ch;margin:0 0 24px}
.yp-home-lead{font-size:clamp(1.125rem,.35vw + 1rem,1.375rem);line-height:1.45;color:var(--yp-muted);max-width:33ch;margin:0}
.yp-home-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.yp-fine{font-size:13px;line-height:1.6;color:var(--yp-muted);margin:16px 0 0}
.yp-situation{min-width:0}.yp-situation>h2{font-size:20px;font-weight:600;margin:0 0 12px}
.yp-scene-panel{margin-top:24px;position:relative;isolation:isolate}
.yp-scene-window{position:relative;border-radius:var(--yp-scene-radius);background:var(--yp-stage);box-shadow:var(--yp-scene-shadow)}
.yp-scene-window::before{content:"";position:absolute;inset:8px -8px -8px 8px;z-index:-1;border-radius:inherit;background:var(--yp-edge)}
.yp-scene-window img{display:block;width:100%;height:290px;object-fit:cover;object-position:center;border-radius:inherit}
.yp-scene-expand{position:absolute;inset:12px 12px auto auto;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border:0;border-radius:var(--yp-pill);background:var(--yp-paper);color:var(--yp-ink);font:600 13px/1.4 var(--yp-font);cursor:pointer;box-shadow:var(--yp-shadow);transition:transform var(--yp-fast) var(--yp-ease)}
.yp-scene-copy{margin:16px 12px 0;padding:16px 24px;border-radius:var(--yp-radius);background:var(--yp-paper);box-shadow:var(--yp-shadow)}
.yp-scene-copy h3{margin:0 0 8px;font-size:25px;font-weight:650;line-height:1.2}.yp-scene-copy p{margin:0;font-size:14px;line-height:1.5}
.yp-scene-copy .yp-case-meta{font-size:13px;margin-top:8px;font-weight:600}
.yp-scene-copy .yp-text-link{margin-top:4px;font-size:14px}
.yp-scene-panel.yp-changed{animation:yp-scene-fade var(--yp-calm) var(--yp-ease)}
@keyframes yp-scene-fade{from{opacity:.7}to{opacity:1}}
.yp-home-section{padding-block:40px}.yp-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.yp-section-head h2{font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:650;line-height:1.2;margin:0}.yp-section-head p{color:var(--yp-muted);max-width:45ch;font-size:15px;margin:12px 0 0}
.yp-featured{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--yp-gap)}
.yp-home-card{background:var(--yp-paper);border-radius:var(--yp-radius);overflow:clip;box-shadow:var(--yp-shadow)}
.yp-home-card>a{display:block}.yp-home-card img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.yp-home-card-info{padding:24px}.yp-home-card-info h3{margin:8px 0 8px;font-size:25px;line-height:1.25;font-weight:650}.yp-home-card-info h3 a{text-decoration:none}
.yp-home-card-info p{font-size:14px;color:var(--yp-muted);margin:0}.yp-card-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.yp-home-card [data-yp-save]{min-height:44px;padding:8px 16px;border:1px solid var(--yp-rule);border-radius:var(--yp-pill);color:var(--yp-ink);background:var(--yp-paper);cursor:pointer}
.yp-home-card [data-yp-save][aria-pressed=true]{background:var(--yp-peach-soft)}
.yp-world{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--yp-gap);align-items:center;margin-block:40px;padding:40px;border-radius:var(--yp-scene-radius);background:var(--yp-deep);color:var(--yp-soft);box-shadow:var(--yp-shadow)}
.yp-world-media{padding:8px;border-radius:var(--yp-radius);background:var(--yp-white-edge);box-shadow:var(--yp-scene-shadow)}
.yp-world-media img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:var(--yp-inner)}
.yp-world h2{font-size:clamp(1.8rem,3vw,2.6rem);margin:0 0 16px;line-height:1.15;color:var(--yp-soft)}
.yp-world p,.yp-world .yp-fine{color:var(--yp-soft)}.yp-world .yp-home-actions{margin-top:24px}
.yp-home-more{margin:32px auto;padding:24px;border-radius:var(--yp-radius);background:var(--yp-paper);box-shadow:var(--yp-shadow)}
.yp-home-more>summary{display:flex;align-items:center;min-height:44px;font-weight:600;cursor:pointer}
.yp-home-more>div{padding-top:24px}.yp-home-archive .home-section{max-width:none;margin:24px 0;padding:24px;background:var(--yp-soft);border:0;border-radius:var(--yp-radius);box-shadow:none}
.yp-home-archive .learning-hero{display:block;padding:24px;margin:0;background:var(--yp-soft);border-radius:var(--yp-radius);min-height:0}
.yp-home-archive .hero-words{max-width:none}.yp-home-archive .home-book-stage{max-width:500px;margin:24px auto}.yp-home-archive .home-nature-scene{display:none}
.yp-home-archive h2,.yp-home-archive h3,.yp-home-archive h4,.yp-home-archive p,.yp-home-archive a{font-family:var(--yp-font);font-style:normal;letter-spacing:0}
.yp-home-archive .home-eyebrow{font-size:14px}.yp-home-archive .hero-words h2{font-size:32px}.yp-home-archive .home-actions{display:flex;flex-wrap:wrap;gap:12px}
.yp-home-archive .home-button{border-radius:var(--yp-pill);min-height:44px}.yp-home-archive .home-lead,.yp-home-archive .future-promise{font-size:17px;line-height:1.6}
.yp-home-utility{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px}
.yp-home-utility .home-ambience-toggle{position:static;transform:none;min-width:44px;width:auto;min-height:44px;height:auto;padding:8px 16px;background:var(--yp-paper);color:var(--yp-ink);border:1px solid var(--yp-rule);border-radius:var(--yp-pill);box-shadow:none;font-size:13px;display:inline-flex;align-items:center;gap:8px}
.yp-home-utility .home-ambience-toggle svg{width:20px;height:20px}.yp-home-utility .home-ambience-label{position:static;display:inline;clip-path:none;width:auto;height:auto;white-space:normal;opacity:1;background:var(--yp-clear);color:inherit}
.yp-home-notes{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--yp-gap);padding-block:40px}
.yp-home-notes h2{font-size:30px;margin:0 0 16px}.yp-home-notes details{border-bottom:1px solid var(--yp-rule)}.yp-home-notes summary{min-height:56px;padding-block:16px;font-weight:600;cursor:pointer}.yp-home-notes details p{padding-bottom:20px;font-size:14px;color:var(--yp-muted)}
.yp-scene-dialog{width:min(1120px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:0;border-radius:var(--yp-radius);background:var(--yp-paper);color:var(--yp-ink);box-shadow:var(--yp-scene-shadow);overflow:auto}
.yp-scene-dialog::backdrop{background:var(--yp-backdrop)}.yp-scene-dialog header{display:flex;align-items:start;justify-content:space-between;gap:24px;margin:0;padding:0 0 16px;max-width:none;box-shadow:none;border:0;background:var(--yp-paper)}
.yp-scene-dialog h2{font-size:25px;line-height:1.2;margin:0}.yp-scene-dialog p{font-size:13px;color:var(--yp-muted);margin:8px 0 0}.yp-scene-dialog button{flex:none}.yp-scene-dialog img{display:block;width:100%;height:auto;max-height:calc(100dvh - 180px);object-fit:contain;border-radius:var(--yp-inner)}
@media(hover:hover){body.yp-site .yp-site-nav .journey-links>a:hover{background:var(--yp-soft)}.yp-btn:hover{background:var(--yp-deep)}.yp-btn.yp-quiet:hover,.yp-chip:not([aria-pressed=true]):hover,.yp-scene-expand:hover{background:var(--yp-stage)}}
@media(max-width:1200px){
 body.yp-site .yp-site-nav[data-journey-nav]{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:8px var(--yp-gutter);min-height:72px}
 body.yp-site .yp-site-nav .journey-brand-lockup{grid-column:1;grid-row:1;justify-self:start}
 body.yp-site .yp-site-nav .journey-quick{display:none}
 body.yp-site .yp-site-nav .customer-account-shortcut{display:inline-flex;grid-column:2;grid-row:1;min-height:44px;padding:8px 8px;border:0;border-radius:var(--yp-pill);background:var(--yp-soft);color:var(--yp-ink);font:600 13px/1.4 var(--yp-font);white-space:nowrap;text-decoration:none}
 body.yp-site .yp-site-nav .journey-menu{grid-column:3;grid-row:1;min-width:64px;min-height:44px;padding:8px 12px;border:1px solid var(--yp-rule);border-radius:var(--yp-pill);background:var(--yp-paper);color:var(--yp-ink);font:600 13px/1.4 var(--yp-font)}
 body.yp-site .yp-site-nav[data-enhanced] .journey-menu{display:inline-block}
 body.yp-site .yp-site-nav .journey-links{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px;padding:12px 0;background:var(--yp-paper);border-radius:var(--yp-inner)}
 body.yp-site .yp-site-nav[data-enhanced][data-open=false] .journey-links{display:none}
 body.yp-site .yp-site-nav .journey-links>a{text-align:left;justify-content:start;white-space:normal}
}
@media(max-width:980px){:root{--yp-gutter:24px}.yp-site .yp-home .yp-home-hero{gap:24px}.yp-scene-copy{padding:16px}.yp-scene-window img{height:260px}}
@media(max-width:640px){
 :root{--yp-gutter:16px;--yp-gap:16px}
 body.yp-site .yp-site-nav .journey-brand-mark{width:32px;height:32px}body.yp-site .yp-site-nav .journey-wordmark{font-size:24px}body.yp-site .yp-site-nav .journey-brand-type small{display:none}
 body.yp-site .yp-site-nav[data-journey-nav]{gap:8px}body.yp-site .yp-site-nav .journey-menu{min-width:54px;padding-inline:8px;font-size:12px}body.yp-site .yp-site-nav .customer-account-shortcut{padding-inline:8px;font-size:12px}
 body.yp-site .yp-utility-header{padding:4px 16px}
 .yp-site .yp-home .yp-home-hero{grid-template-columns:minmax(0,1fr);padding-block:24px;gap:24px}
 .yp-home-hero h1{font-size:2.5rem;max-width:12ch;margin-bottom:16px}.yp-home-lead{font-size:1.125rem}
 .yp-home-actions{margin-top:20px;gap:8px}.yp-home-actions .yp-btn{font-size:14px;padding-inline:16px}
 .yp-situation>h2{font-size:20px;max-width:23ch}.yp-chip{font-size:13px;padding-inline:12px}
 .yp-scene-window{border-radius:var(--yp-radius)}.yp-scene-window::before{inset:6px -5px -6px 5px}
 .yp-scene-window img{height:auto;aspect-ratio:3/2;object-fit:cover}.yp-scene-copy{margin:16px 4px 0}.yp-scene-copy h3{font-size:20px}
 .yp-home-section{padding-block:24px}.yp-section-head{display:block}.yp-section-head .yp-text-link{margin-top:8px}.yp-featured{grid-template-columns:minmax(0,1fr)}
 .yp-home-card-info{padding:20px}.yp-home-card-info h3{font-size:22px}
 .yp-world{grid-template-columns:minmax(0,1fr);padding:16px;margin-block:24px;border-radius:var(--yp-radius)}
 .yp-home-notes{grid-template-columns:minmax(0,1fr);padding-block:24px}.yp-home-more{padding:16px}.yp-home-archive .home-section,.yp-home-archive .learning-hero{padding:16px}
 .yp-scene-dialog{padding:12px}.yp-scene-dialog header{gap:12px}.yp-scene-dialog h2{font-size:20px}.yp-scene-dialog .yp-btn{padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){body.yp-site *,body.yp-site *::before,body.yp-site *::after{scroll-behavior:auto!important}.yp-scene-panel.yp-changed{animation:none}.yp-btn,.yp-chip,.yp-scene-expand{transition:none}}

/* The old duplicate homepage learning shortcut is available in the new utility row. */
body.yp-site[data-yp-page-kind="home"]>.yp-utility-header{display:none}
.yp-learning-resume{flex-basis:100%}
.yp-learning-resume .learning-resume-card{background:var(--yp-soft);border-color:var(--yp-rule);border-radius:var(--yp-radius);box-shadow:none;color:var(--yp-ink)}
.yp-learning-resume[data-learning-resume]{padding:16px 20px;background:var(--yp-soft);border:0;border-radius:var(--yp-radius);box-shadow:none;color:var(--yp-ink)}
/* The Oracle shell keeps its own existing menu and request handlers. */
body.yp-site[data-oracle-page]>.preview-ribbon{background:var(--yp-soft);color:var(--yp-muted);font:400 12px/1.5 var(--yp-font);letter-spacing:0;text-transform:none;padding:8px 16px}
body.yp-site[data-oracle-page]>header{width:100%;max-width:var(--yp-container);padding:12px var(--yp-gutter);margin:0 auto;background:var(--yp-paper);border:0;gap:12px;box-shadow:none}
body.yp-site[data-oracle-page]>header>.brand{display:inline-flex;align-items:center;gap:12px;min-width:0;font:400 28px/1.1 var(--yp-brand-font);letter-spacing:0;color:var(--yp-ink);text-decoration:none}
body.yp-site[data-oracle-page]>header>.brand>img:first-child{width:36px;height:36px;flex:none}
body.yp-site[data-oracle-page]>header>.brand>img:last-child{display:none}
body.yp-site[data-oracle-page]>header>.brand small{font:400 10px/1.4 var(--yp-font);color:var(--yp-muted);letter-spacing:0;margin-top:4px}
body.yp-site[data-oracle-page]>header nav a{min-height:44px;display:inline-flex;align-items:center;padding:12px;border:0;border-radius:var(--yp-pill);font:600 13px/1.4 var(--yp-font);color:var(--yp-ink);background:var(--yp-clear)}
body.yp-site[data-oracle-page]>header>.quiet{font-size:13px;line-height:1.5}
body.yp-site[data-oracle-page]>header .customer-oracle-shortcut{border:0;border-radius:var(--yp-pill);background:var(--yp-soft);color:var(--yp-ink);font-size:12px}
body.yp-site[data-oracle-page]>header .oracle-menu{border:1px solid var(--yp-rule);border-radius:var(--yp-pill);background:var(--yp-paper);color:var(--yp-ink);min-height:44px;font-size:12px;padding:8px 12px}
@media(max-width:950px){
 body.yp-site[data-oracle-page]>header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:12px var(--yp-gutter)}
 body.yp-site[data-oracle-page]>header>.brand{grid-column:1;grid-row:1;font-size:24px}
 body.yp-site[data-oracle-page]>header>.brand small{display:none}
 body.yp-site[data-oracle-page]>header>.brand>img:first-child{width:32px;height:32px}
 body.yp-site[data-oracle-page]>header .customer-oracle-shortcut{display:inline-flex;grid-column:2;grid-row:1;padding:8px}
 body.yp-site[data-oracle-page]>header .oracle-menu{grid-column:3;grid-row:1;min-width:54px}
 body.yp-site[data-oracle-page]>header>.oracle-shortcut{display:none}
 body.yp-site[data-oracle-page]>header>.quiet{grid-column:1/-1;grid-row:2;margin:0;padding:0;min-height:32px;display:inline-flex;align-items:center;justify-self:start}
 body.yp-site[data-oracle-page]>header nav{grid-column:1/-1;grid-row:3;gap:4px;border:0}
}

/* Hallmark v2.0.0 · theme: YiPhase mountain theatre (locked design.md) · genre: playful · redesign: restyle · scope: content families · copy: verbatim · hero: scene and text (hexagrams), working player (lessons), index first (guides), object gallery (collection) · signature: original teaching scenes and exact diagrams · built: 2026-11-10 */
/* Critique: replace warm stacked-paper surfaces and oversized entry gaps with shallow ice-blue frames, readable white pages and useful early actions. */
/* Waive 58: the complete classical text, translations, source notes and lesson transcripts are owner material and remain available. Visual integration QA belongs to the main site pass. */

/* Family tokens deliberately do not redefine legacy player or casting variables. */
[data-yp-page-kind="hexagram"],
[data-yp-page-kind="lesson"],
[data-yp-page-kind="guide"],
[data-yp-page-kind="collection"],
[data-yp-page-kind="general"] {
  --yp-content-width: 1180px;
  --yp-reading-width: 860px;
  --yp-content-gap: 24px;
  color: var(--yp-ink);
  background: var(--yp-soft);
  font-family: var(--yp-font);
  line-height: 1.7;
}

/* Outrank the historical body:has(...) warm background images. */
[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) {
  background: var(--yp-soft);
}

[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) :is(h1, h2, h3, h4) {
  min-width: 0;
  color: var(--yp-ink);
  font-family: var(--yp-font);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.16;
  overflow-wrap: break-word;
  text-wrap: balance;
}

[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) :is(h1, h2, h3) em {
  color: inherit;
  font-style: normal;
}

[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) :is(.eyebrow, .section-kicker, .original-label, .scene-kicker, .caption-label, .route-kicker, .beginner-label, .library-label, .everyday-card-label, .chapter-running, .card-material, .one-only, .preview, .preview-flag) {
  color: var(--yp-muted);
  font-family: var(--yp-font);
  font-size: .8125rem;
  font-weight: 600;
  font-variant: normal;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) :is(.guide-breadcrumb, .library-breadcrumb, .room-breadcrumb, .site-path, .source-note, .source-summary, .byline, .sources, figcaption) {
  color: var(--yp-muted);
  font-family: var(--yp-font);
  letter-spacing: 0;
}

[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) :is(button, select, input:not([type="checkbox"]):not([type="radio"]), summary) {
  min-height: 44px;
  font-family: var(--yp-font);
  touch-action: manipulation;
}

[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) button {
  min-width: 44px;
}

[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) summary {
  padding-block: 8px;
  color: var(--yp-ink);
  line-height: 1.6;
  cursor: pointer;
}

[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) :is(a, button, input, select, textarea, summary, video, [tabindex]):focus-visible {
  outline: 3px solid var(--yp-focus);
  outline-offset: 4px;
  transition: none;
}

[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) :is(.button, .primary, .primary-button, .submit-interest, .interest-shortcut) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid var(--yp-ink);
  border-radius: 999px;
  background: var(--yp-ink);
  color: var(--yp-paper);
  font: 600 .9375rem/1.45 var(--yp-font);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  transition: transform 120ms ease;
}

[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) :is(.button, .primary, .primary-button, .submit-interest, .interest-shortcut):not(:disabled):hover {
  background: var(--yp-deep);
  border-color: var(--yp-deep);
  color: var(--yp-paper);
  box-shadow: none;
  transform: none;
}

[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) :is(.button, .primary, .primary-button, .submit-interest):not(:disabled):active {
  transform: translateY(1px);
}

[data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) :is(button:disabled, button[aria-disabled="true"]) {
  border-color: var(--yp-rule);
  background: var(--yp-soft);
  color: var(--yp-muted);
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* 64 hexagram texts: a compact scene, then a comfortably measured reading. */
[data-yp-page-kind="hexagram"] .shell {
  width: min(var(--yp-content-width), calc(100% - 40px));
}

[data-yp-page-kind="hexagram"] header.hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 0;
  border: 1px solid var(--yp-rule);
  border-radius: var(--yp-scene-radius);
  background: var(--yp-paper);
  box-shadow: var(--yp-shadow);
}

[data-yp-page-kind="hexagram"] .hero-visual {
  min-height: 0;
  aspect-ratio: 1 / 1;
  background: var(--yp-stage);
}

[data-yp-page-kind="hexagram"] .hero-visual > img {
  object-fit: cover;
}

[data-yp-page-kind="hexagram"] .hero-copy {
  justify-content: center;
  min-width: 0;
  padding: clamp(24px, 3.3vw, 44px);
}

[data-yp-page-kind="hexagram"] .identity {
  gap: 16px;
  margin: 20px 0 0;
}

[data-yp-page-kind="hexagram"] .han {
  font-size: clamp(68px, 7vw, 96px);
}

[data-yp-page-kind="hexagram"] .pinyin {
  padding-bottom: 4px;
  color: var(--yp-muted);
  font-size: .9375rem;
  letter-spacing: 0;
}

[data-yp-page-kind="hexagram"] .hero h1 {
  margin: 20px 0 12px;
  font-size: clamp(32px, 3.6vw, 48px);
}

[data-yp-page-kind="hexagram"] :is(.summary-en, .summary-zh) {
  margin: 16px 0 0;
  color: var(--yp-ink);
  font-family: var(--yp-font);
  font-size: 1rem;
  line-height: 1.75;
  opacity: 1;
}

[data-yp-page-kind="hexagram"] .trigrams {
  color: var(--yp-muted);
  font-size: .875rem;
  letter-spacing: 0;
}

[data-yp-page-kind="hexagram"] .gua-mark {
  top: 20px;
  left: 20px;
  border-color: var(--yp-rule);
  border-radius: var(--yp-inner);
  background: var(--yp-paper);
  box-shadow: var(--yp-shadow);
}

[data-yp-page-kind="hexagram"] .visual-caption {
  left: 20px;
  right: 20px;
  bottom: 20px;
  width: fit-content;
  max-width: calc(100% - 40px);
  padding: 12px 16px;
  border-radius: var(--yp-inner);
  background: var(--yp-paper);
  color: var(--yp-ink);
}

[data-yp-page-kind="hexagram"] .visual-caption :is(b, span) {
  font-family: var(--yp-font);
  letter-spacing: 0;
  opacity: 1;
}

[data-yp-page-kind="hexagram"] .visual-caption b { font-size: .9375rem; }
[data-yp-page-kind="hexagram"] .visual-caption span { color: var(--yp-muted); }

[data-yp-page-kind="hexagram"] .contents {
  gap: 8px;
  margin-top: 24px;
}

[data-yp-page-kind="hexagram"] .contents a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border-color: var(--yp-rule);
  background: var(--yp-soft);
  color: var(--yp-ink);
  font-size: .8125rem;
}

[data-yp-page-kind="hexagram"] .contents a:hover { background: var(--yp-stage); }

[data-yp-page-kind="hexagram"] .lesson-callout {
  margin-top: 20px;
  padding: 24px 28px;
  border-color: var(--yp-rule);
  border-radius: var(--yp-radius);
  background: var(--yp-stage);
}

[data-yp-page-kind="hexagram"] .lesson-callout a {
  min-height: 44px;
  background: var(--yp-ink);
  color: var(--yp-paper);
  box-shadow: none;
}

[data-yp-page-kind="hexagram"] main.shell { padding-block: 20px 64px; }
[data-yp-page-kind="hexagram"] .section { margin-top: 44px; scroll-margin-top: 28px; }
[data-yp-page-kind="hexagram"] .section:first-child { margin-top: 20px; }

[data-yp-page-kind="hexagram"] .section-head {
  grid-template-columns: 132px minmax(0, 760px);
  gap: var(--yp-content-gap);
  margin-bottom: 20px;
}

[data-yp-page-kind="hexagram"] .section h2 { font-size: clamp(27px, 3.1vw, 38px); }
[data-yp-page-kind="hexagram"] .section-intro { color: var(--yp-muted); opacity: 1; }

[data-yp-page-kind="hexagram"] :is(.text-card, .line-card, .everyday-card, .phrase) {
  min-width: 0;
  border: 1px solid var(--yp-rule);
  border-radius: var(--yp-radius);
  background: var(--yp-paper);
  color: var(--yp-ink);
  box-shadow: none;
}

[data-yp-page-kind="hexagram"] :is(.text-card, .everyday-card) { padding: clamp(24px, 3.6vw, 40px); }
[data-yp-page-kind="hexagram"] .everyday-card { max-width: 100%; }
[data-yp-page-kind="hexagram"] .everyday-card::before { background: var(--yp-blue); }

[data-yp-page-kind="hexagram"] .everyday-story {
  max-width: 72ch;
  color: var(--yp-ink);
  font: 1.125rem/1.8 var(--yp-font);
}

[data-yp-page-kind="hexagram"] :is(.everyday-reflection, .explanation, .line-explanations, .everyday-line) { border-color: var(--yp-rule); }
[data-yp-page-kind="hexagram"] .everyday-reflection > span { color: var(--yp-muted); font-size: .8125rem; letter-spacing: 0; }
[data-yp-page-kind="hexagram"] .commentary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yp-content-gap); }
[data-yp-page-kind="hexagram"] .commentary-grid .text-card:last-child { background: var(--yp-stage); color: var(--yp-ink); }
[data-yp-page-kind="hexagram"] .commentary-grid .text-card:last-child :is(.original-label, .literal) { color: var(--yp-ink); }

[data-yp-page-kind="hexagram"] blockquote {
  max-width: 28em;
  font-size: clamp(25px, 3.2vw, 38px);
  line-height: 1.6;
  overflow-wrap: break-word;
}

[data-yp-page-kind="hexagram"] :is(.literal, .line-literal, .explanation.lang-en p, .phrase .en) { font-family: var(--yp-font); }
[data-yp-page-kind="hexagram"] :is(.literal, .line-literal, .special-note) { color: var(--yp-muted); }
[data-yp-page-kind="hexagram"] .explanation h3 { font-size: .875rem; letter-spacing: 0; text-transform: none; }
[data-yp-page-kind="hexagram"] :is(.explanation p, .line-explanations p, .everyday-line-body p) { font-size: 1rem; line-height: 1.8; }

[data-yp-page-kind="hexagram"] .line-card {
  grid-template-columns: 58px minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--yp-content-gap);
  padding: 24px;
}

[data-yp-page-kind="hexagram"] .line-card > * { min-width: 0; }
[data-yp-page-kind="hexagram"] .line-illustration { border-radius: var(--yp-inner); background: var(--yp-stage); }
[data-yp-page-kind="hexagram"] .line-explanations { grid-template-columns: minmax(0, 1fr); gap: 16px; }
[data-yp-page-kind="hexagram"] .line-position { color: var(--yp-muted); font-size: .8125rem; letter-spacing: 0; }
[data-yp-page-kind="hexagram"] .line-original { font-size: clamp(24px, 2.5vw, 30px); line-height: 1.65; letter-spacing: 0; }
[data-yp-page-kind="hexagram"] :is(.virtue, .phrase, .mini-hexagram, .everyday-line-body) { border-color: var(--yp-rule); background: var(--yp-soft); }
[data-yp-page-kind="hexagram"] .virtues { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-yp-page-kind="hexagram"] .phrase-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
[data-yp-page-kind="hexagram"] .phrase p { font-size: .9375rem; }
[data-yp-page-kind="hexagram"] .keyword { background: var(--yp-stage); color: var(--yp-ink); font-size: .8125rem; }
[data-yp-page-kind="hexagram"] #study-questions details { border-color: var(--yp-rule); border-radius: var(--yp-inner); background: var(--yp-paper); }

/* Spoken visual lessons: preserve the canvas, all scenes and native controls. */
[data-yp-page-kind="lesson"] main {
  max-width: calc(var(--yp-content-width) + 48px);
  padding: 28px 24px 64px;
}

[data-yp-page-kind="lesson"] .intro { max-width: 900px; margin-bottom: 24px; }
[data-yp-page-kind="lesson"] .intro h1 { margin: 12px 0 16px; font-size: clamp(32px, 4vw, 48px); }
[data-yp-page-kind="lesson"] .intro > p:last-child { color: var(--yp-muted); font-family: var(--yp-font); }
[data-yp-page-kind="lesson"] .player { border-color: var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); box-shadow: var(--yp-shadow); }
[data-yp-page-kind="lesson"] .canvas { min-height: 0; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); background: var(--yp-stage); }
[data-yp-page-kind="lesson"] .image-wrap { min-height: 460px; background: var(--yp-stage); }
[data-yp-page-kind="lesson"] .content-panel { min-width: 0; padding: 32px; background: var(--yp-soft); }
[data-yp-page-kind="lesson"] .content-panel h2 { font-size: clamp(28px, 3vw, 42px); margin-bottom: 20px; }
[data-yp-page-kind="lesson"] .six-lines { margin-bottom: 24px; }
[data-yp-page-kind="lesson"] .scene-number { color: var(--yp-ink); background: var(--yp-paper); letter-spacing: 0; }
[data-yp-page-kind="lesson"] .scene-translation { color: var(--yp-muted); font-family: var(--yp-font); font-style: normal; }
[data-yp-page-kind="lesson"] .scene-lesson { font-family: var(--yp-font); font-size: 1rem; }
[data-yp-page-kind="lesson"] .scene-position { color: var(--yp-muted); border-color: var(--yp-rule); font-family: var(--yp-font); }
[data-yp-page-kind="lesson"] .caption-band { min-height: 0; padding: 20px 24px; gap: 20px; border-color: var(--yp-rule); background: var(--yp-paper); }
[data-yp-page-kind="lesson"] .caption-band p { font-family: var(--yp-font); font-size: 1rem; line-height: 1.7; }
[data-yp-page-kind="lesson"] .controls { gap: 12px; background: var(--yp-soft); border-color: var(--yp-rule); }
[data-yp-page-kind="lesson"] :is(.controls button, .controls select) { min-height: 44px; font-family: var(--yp-font); }
[data-yp-page-kind="lesson"] :is(.plain-button, .lang-control select) { color: var(--yp-ink); background: var(--yp-paper); border: 1px solid var(--yp-rule); }
[data-yp-page-kind="lesson"] :is(.lang-control, .player-status, .pilot-note) { color: var(--yp-muted); font-family: var(--yp-font); }
[data-yp-page-kind="lesson"] .progress-track { background: var(--yp-stage); }
[data-yp-page-kind="lesson"] .progress-track > div { background: var(--yp-blue); transition: none; }
[data-yp-page-kind="lesson"] .image-play { min-height: 56px; border-color: var(--yp-rule); background: var(--yp-ink); color: var(--yp-paper); box-shadow: var(--yp-shadow); animation: none; transition: none; }
[data-yp-page-kind="lesson"] .image-play:hover { transform: translate(-50%, -50%); box-shadow: var(--yp-shadow); }
[data-yp-page-kind="lesson"] .play-disc { background: var(--yp-paper); color: var(--yp-ink); box-shadow: none; }
[data-yp-page-kind="lesson"] .play-words strong { font-family: var(--yp-font); letter-spacing: 0; }
[data-yp-page-kind="lesson"] .play-words small { color: var(--yp-paper); font-family: var(--yp-font); }
[data-yp-page-kind="lesson"] .transcript { max-width: 100%; padding: 20px 24px; border: 1px solid var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); font-family: var(--yp-font); }
[data-yp-page-kind="lesson"] .transcript article { max-width: 75ch; border-color: var(--yp-rule); }
[data-yp-page-kind="lesson"] .transcript .zh { color: var(--yp-muted); }

/* Published video watch pages occur in both the guide and lesson families. */
[data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) .video-watch-hero {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.7fr);
  gap: var(--yp-content-gap);
  align-items: start;
}

[data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) .video-watch-intro h1 {
  margin: 0 0 16px;
  font: 600 clamp(28px, 2.8vw, 38px)/1.17 var(--yp-font);
  letter-spacing: -.035em;
}

[data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) .presenter-watch {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--yp-rule);
  border-radius: var(--yp-radius);
  background: var(--yp-paper);
  box-shadow: var(--yp-shadow);
}

[data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) .video-watch-hero .presenter-watch > h2 { margin: 0 0 16px; font: 600 1.25rem/1.3 var(--yp-font); }
[data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) :is(.presenter-screen, .presenter-watch video) { border-radius: var(--yp-inner); background: var(--yp-stage); }
[data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) .presenter-formats button { min-height: 44px; border: 1px solid var(--yp-rule); border-radius: 999px; background: var(--yp-soft); color: var(--yp-ink); font-family: var(--yp-font); }
[data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) .presenter-formats button[aria-pressed="true"] { border-color: var(--yp-ink); background: var(--yp-ink); color: var(--yp-paper); }
[data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) #presenter-tall:not([aria-pressed="true"]) { border-color: var(--yp-rule); background: var(--yp-soft); color: var(--yp-ink); }
[data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) .presenter-screen #presenter-play { min-height: 44px; border: 1px solid var(--yp-rule); border-radius: 999px; background: var(--yp-ink); color: var(--yp-paper); font-family: var(--yp-font); box-shadow: var(--yp-shadow); }
[data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) .presenter-screen #presenter-play:hover { transform: translate(-50%, -50%); }
[data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) :is(.presenter-note, .presenter-downloads p) { color: var(--yp-muted); font-size: .875rem; }
[data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) main > .presenter-downloads { padding: 16px 24px; border-color: var(--yp-rule); border-radius: var(--yp-inner); background: var(--yp-paper); }

/* Guides and learning path: readable articles, compact chapter navigation. */
[data-yp-page-kind="guide"] main { max-width: var(--yp-reading-width); padding: 32px 24px 64px; }
[data-yp-page-kind="guide"] main:is(.learning-hub, .learning-route, .observation-guide:has(.video-watch-hero), .presenter-guide:has(.video-watch-hero)) { max-width: calc(var(--yp-content-width) + 48px); }
[data-yp-page-kind="guide"] main:has(> .guide-book) { max-width: calc(var(--yp-content-width) + 48px); }
[data-yp-page-kind="guide"] h1 { margin: 16px 0 20px; font-size: clamp(34px, 4.2vw, 52px); }
[data-yp-page-kind="guide"] h2 { margin: 40px 0 16px; font-size: clamp(27px, 3vw, 36px); }
[data-yp-page-kind="guide"] h3 { font-size: clamp(22px, 2.3vw, 27px); }
[data-yp-page-kind="guide"] :is(.lede, .hero-lead) { color: var(--yp-ink); font-size: 1.125rem; line-height: 1.75; }
[data-yp-page-kind="guide"] :is(.observation-guide > section, .transcript-scene) { margin-top: 32px; }
[data-yp-page-kind="guide"] :is(.observation-guide > section > p, .observation-guide > section > ul, .observation-guide > section > ol) { max-width: 76ch; }
[data-yp-page-kind="guide"] :is(figure img, .wisdom-scene img) { border-radius: var(--yp-inner); }
[data-yp-page-kind="guide"] :is(table, th, td, .sources) { border-color: var(--yp-rule); }
[data-yp-page-kind="guide"] th { color: var(--yp-ink); background: var(--yp-stage); font-family: var(--yp-font); letter-spacing: 0; text-transform: none; }
[data-yp-page-kind="guide"] :is(details, .next, .observation-contents, .observation-example, .observation-takeaway, .practice, .lesson-next-step) { padding: 20px 24px; border: 1px solid var(--yp-rule); border-radius: var(--yp-inner); background: var(--yp-paper); color: var(--yp-ink); }
[data-yp-page-kind="guide"] details details { padding: 12px 0; border-width: 1px 0 0; border-radius: 0; background: none; }
[data-yp-page-kind="guide"] :is(.observation-concepts, .pattern-stages, .relationship-list, .beginner-list, .route-topics, .route-media) { gap: var(--yp-content-gap); }
[data-yp-page-kind="guide"] :is(.observation-concepts article, .relationship-list article, .pattern-stages article, .beginner-list a, .route-topic, .route-media article) { min-width: 0; padding: 24px; border: 1px solid var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); color: var(--yp-ink); box-shadow: none; transition: none; }
[data-yp-page-kind="guide"] :is(.observation-concepts article, .relationship-list article, .pattern-stages article) h3 { font-family: var(--yp-font); }
[data-yp-page-kind="guide"] :is(.beginner-list h3, .route-topic h3) { margin-top: 12px; font-size: 1.5rem; }
[data-yp-page-kind="guide"] :is(.pattern-stages article > span, .guide-topic-heading > span, .route-topic .topic-zh, .route-note, .topic-status, .route-topic::before) { color: var(--yp-muted); font-family: var(--yp-font); letter-spacing: 0; }
[data-yp-page-kind="guide"] .route-topic[data-learning-state="in_progress"] { border-inline-start: 4px solid var(--yp-blue); }
[data-yp-page-kind="guide"] .route-topic[data-learning-state="explored"] { border-inline-start: 4px solid var(--yp-ink); }
[data-yp-page-kind="guide"] :is(.route-support, .route-resume, [data-learning-resume], .route-confirm, .learning-next, .learning-related, .library-connect, .presenter-qian-entry, .presenter-takeaway) { padding: 24px; border: 1px solid var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-stage); color: var(--yp-ink); box-shadow: none; }
[data-yp-page-kind="guide"] :is(.route-support, .route-resume, .route-confirm, .learning-next, .learning-related, .library-connect, .presenter-qian-entry, .presenter-takeaway) h2 { margin-top: 0; }
[data-yp-page-kind="guide"] .route-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-yp-page-kind="guide"] .route-media { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-yp-page-kind="guide"] .route-section { margin-block: 36px; }
[data-yp-page-kind="guide"] :is(.topic-marks button, .route-toolbar button, .route-confirm button, .learning-related button) { padding: 12px 16px; border: 1px solid var(--yp-rule); border-radius: 999px; background: var(--yp-paper); color: var(--yp-ink); font: 600 .8125rem/1.5 var(--yp-font); }
[data-yp-page-kind="guide"] .topic-marks button[aria-pressed="true"] { border-color: var(--yp-ink); background: var(--yp-ink); color: var(--yp-paper); }
[data-yp-page-kind="guide"] .learning-jumps { margin-top: 20px; }
[data-yp-page-kind="guide"] .learning-jumps a { display: inline-flex; align-items: center; min-height: 44px; border-color: var(--yp-rule); border-radius: 999px; background: var(--yp-paper); color: var(--yp-ink); font-family: var(--yp-font); }
[data-yp-page-kind="guide"] .guide-topic { margin-block: 32px 40px; }
[data-yp-page-kind="guide"] .guide-topic h2 { margin-top: 0; }
[data-yp-page-kind="guide"] .oracle-path-note { margin: 0 0 24px; padding: 20px 24px; border-color: var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-stage); box-shadow: none; }
[data-yp-page-kind="guide"] .oracle-path-note h2 { margin: 8px 0 12px; font-size: 1.5rem; }
[data-yp-page-kind="guide"] .oracle-path-note p { margin-block: 12px; font-size: .9375rem; line-height: 1.65; }
[data-yp-page-kind="guide"] .oracle-path-note details { margin-top: 12px; padding: 8px 0 0; border-width: 1px 0 0; border-radius: 0; background: none; }
[data-yp-page-kind="guide"] .guide-hero { align-items: center; gap: 32px; padding: 8px 0 28px; }
[data-yp-page-kind="guide"] .guide-hero h1 { margin-top: 0; }
[data-yp-page-kind="guide"] .tour-launch { flex-basis: 270px; }
[data-yp-page-kind="guide"] :is(.orientation-map, .guide-book) { padding: 24px; border: 1px solid var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); box-shadow: var(--yp-shadow); }
[data-yp-page-kind="guide"] .map-heading h2 { margin: 0 0 16px; font-size: 1.5rem; }
[data-yp-page-kind="guide"] .lens-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-yp-page-kind="guide"] .lens-map > a { min-width: 0; padding: 20px; border-color: var(--yp-rule); border-radius: var(--yp-inner); background: var(--yp-soft); transform: none; box-shadow: none; transition: none; }
[data-yp-page-kind="guide"] .lens-map > a:hover { background: var(--yp-stage); transform: none; box-shadow: none; }
[data-yp-page-kind="guide"] .lens-map strong { font: 600 1.5rem/1.3 var(--yp-font); }
[data-yp-page-kind="guide"] :is(.lens-map small, .journey-map small, .chapter-number, .chapter-running, .contents-foot, .lens-map span > span:last-child, .book-controls p) { color: var(--yp-muted); font-family: var(--yp-font); letter-spacing: 0; }
[data-yp-page-kind="guide"] .journey-map { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--yp-inner); background: var(--yp-soft); }
[data-yp-page-kind="guide"] .journey-map li { border-color: var(--yp-rule); }
[data-yp-page-kind="guide"] .journey-map li:not(:last-child) a::after { content: none; }
[data-yp-page-kind="guide"] .journey-map strong { font: 600 1rem/1.5 var(--yp-font); }
[data-yp-page-kind="guide"] .guide-book { grid-template-columns: 190px minmax(0, 1fr); margin-top: 28px; padding: 0; }
[data-yp-page-kind="guide"] .chapter-contents { border-color: var(--yp-rule); border-radius: var(--yp-radius) 0 0 var(--yp-radius); background: var(--yp-soft); }
[data-yp-page-kind="guide"] .chapter-contents button { border-color: var(--yp-rule); background: none; color: var(--yp-ink); }
[data-yp-page-kind="guide"] .chapter-contents button[aria-selected="true"] { border-inline-start-color: var(--yp-blue); background: var(--yp-stage); }
[data-yp-page-kind="guide"] :is(.chapter-running, .chapter-visual, .book-controls) { border-color: var(--yp-rule); }
[data-yp-page-kind="guide"] .chapter-spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
[data-yp-page-kind="guide"] .chapter-visual { min-height: 0; padding: 20px; background: var(--yp-stage); }
[data-yp-page-kind="guide"] .chapter-copy { min-width: 0; padding: 28px; }
[data-yp-page-kind="guide"] .chapter-copy h2 { margin-top: 0; font-size: clamp(26px, 2.6vw, 34px); }
[data-yp-page-kind="guide"] .chapter-copy p { color: var(--yp-ink); }
[data-yp-page-kind="guide"] :is(.chapter-note, .chapter-link-grid a) { border-color: var(--yp-rule); border-radius: var(--yp-inner); background: var(--yp-soft); }
[data-yp-page-kind="guide"] :is(.book-controls button, .lens-controls button, .coin-controls button, .demo-controls button) { border-color: var(--yp-rule); border-radius: 999px; background: var(--yp-paper); color: var(--yp-ink); }
[data-yp-page-kind="guide"] .lens-controls button[aria-pressed="true"] { border-color: var(--yp-ink); background: var(--yp-ink); color: var(--yp-paper); }
[data-yp-page-kind="guide"] .book-controls { flex-wrap: wrap; }
[data-yp-page-kind="guide"] .book-controls > div { flex-wrap: wrap; }
[data-yp-page-kind="guide"] dialog { border-color: var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); color: var(--yp-ink); box-shadow: var(--yp-shadow); }
[data-yp-page-kind="guide"] .tour-spread #tour-visual { background: var(--yp-stage); }
[data-yp-page-kind="guide"] :is(.tour-top, .tour-bottom) { border-color: var(--yp-rule); }
[data-yp-page-kind="guide"] .tour-top h2 { color: var(--yp-muted); font-family: var(--yp-font); letter-spacing: 0; text-transform: none; }

/* Knowledge landing pages: frame the existing teaching art, without recolouring it. */
[data-yp-page-kind="general"] main:has(> .module-intro) { max-width: calc(var(--yp-content-width) + 48px); margin-inline: auto; padding: 0 24px 56px; }
[data-yp-page-kind="general"] .module-intro { padding: 36px 0 28px; }
[data-yp-page-kind="general"] .module-intro h1 { margin: 12px 0 20px; max-width: 850px; font-size: clamp(34px, 4.2vw, 52px); }
[data-yp-page-kind="general"] .module-intro > p:last-child { max-width: 76ch; color: var(--yp-muted); font-size: 1.0625rem; }
[data-yp-page-kind="general"] main:has(> .module-intro) > .section { margin-top: 0; padding: 32px 0; border-color: var(--yp-rule); background: none; }
[data-yp-page-kind="general"] :is(.section-intro h2, .section-heading h2, .section-heading h2 em) { font-family: var(--yp-font); font-size: clamp(27px, 3vw, 38px); }
[data-yp-page-kind="general"] :is(.trigram-origin, .trigram-formula, .trigram-key) { border-color: var(--yp-rule); border-radius: var(--yp-inner); background: var(--yp-stage); }
[data-yp-page-kind="general"] .trigram-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yp-content-gap); }
[data-yp-page-kind="general"] .trigram-card { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: 170px auto; min-height: 0; border-color: var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); box-shadow: var(--yp-shadow); transition: none; }
[data-yp-page-kind="general"] .trigram-card:hover { transform: none; box-shadow: var(--yp-shadow); }
[data-yp-page-kind="general"] .trigram-identity { grid-column: 1; grid-row: 1; padding: 20px 16px; border-color: var(--yp-rule); background: var(--yp-soft); }
[data-yp-page-kind="general"] .trigram-lines { width: 76px; }
[data-yp-page-kind="general"] .trigram-vignette { grid-column: 2; grid-row: 1; min-width: 0; border-color: var(--yp-rule); background: var(--yp-stage); }
[data-yp-page-kind="general"] .trigram-vignette > :is(img, svg) { min-height: 0; height: 100%; padding: 12px; object-fit: contain; }
[data-yp-page-kind="general"] .trigram-copy { grid-column: 1 / -1; grid-row: 2; padding: 24px; border-top: 1px solid var(--yp-rule); }
[data-yp-page-kind="general"] .trigram-copy h3 { font-family: var(--yp-font); font-size: 1.5rem; }
[data-yp-page-kind="general"] .trigram-copy > p:not(.trigram-nature) { max-width: none; color: var(--yp-muted); font-size: 1rem; line-height: 1.7; }
[data-yp-page-kind="general"] .trigram-copy :is(.trigram-nature, .trigram-alt),
[data-yp-page-kind="general"] .trigram-identity small { color: var(--yp-muted); font-family: var(--yp-font); font-size: .8125rem; letter-spacing: 0; }
[data-yp-page-kind="general"] .trigram-key { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 16px 20px; }
[data-yp-page-kind="general"] .symbol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--yp-content-gap); border: 0; }
[data-yp-page-kind="general"] .symbol-card { min-width: 0; border: 1px solid var(--yp-rule); border-radius: var(--yp-radius); overflow: clip; background: var(--yp-paper); }
[data-yp-page-kind="general"] :is(.symbol-card .classic-mark, .english-mark, .chinese-mark) { border-color: var(--yp-rule); background: var(--yp-paper); }
[data-yp-page-kind="general"] .symbol-card .memory-mark { background: var(--yp-stage); }
[data-yp-page-kind="general"] .english-mark h3 { font-family: var(--yp-font); font-size: 1.75rem; }
[data-yp-page-kind="general"] :is(.learn-grid, .phase-cycles) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yp-content-gap); }
[data-yp-page-kind="general"] :is(.learn-grid article, .phase-cycles figure) { min-width: 0; margin: 0; padding: 24px; border: 1px solid var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); }
[data-yp-page-kind="general"] .phase-cycles figure > img { display: block; width: 100%; height: auto; }
[data-yp-page-kind="general"] .phase-strip > div { border-color: var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); }
[data-yp-page-kind="general"] .phase-strip strong { color: var(--yp-ink); font-family: var(--yp-font); }
[data-yp-page-kind="general"] .phase-strip span { color: var(--yp-muted); font-size: .9375rem; }
[data-yp-page-kind="general"] :is(.beginner-card, .hexagram-cards > a) { border-color: var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); box-shadow: none; }
[data-yp-page-kind="general"] :is(.beginner-card-art, .guide-visual) { border-color: var(--yp-rule); border-radius: var(--yp-inner); background: var(--yp-stage); }
[data-yp-page-kind="general"] :is(.beginner-card-copy h3, .learn-grid h3, .beginner-heading h2) { font-family: var(--yp-font); }
[data-yp-page-kind="general"] .beginner-guides { padding: 32px 0; }
[data-yp-page-kind="general"] .method { border-radius: var(--yp-radius); background: var(--yp-stage); }

/* Collection and object study: exact source crops remain in their existing scene wrappers. */
/* These windows use oversized source sheets with calibrated left/top offsets.
   A responsive max-width clamp moves the intended pane outside its window. */
[data-yp-page-kind="collection"] :is(.scene, .view-frame) > img { max-width: none; }
[data-yp-page-kind="collection"] main { max-width: calc(var(--yp-content-width) + 48px); margin-inline: auto; padding-inline: 24px; }
[data-yp-page-kind="collection"] .collection-intro { max-width: 900px; padding: 36px 0 28px; }
[data-yp-page-kind="collection"] .collection-intro h1 { margin: 16px 0 20px; font-size: clamp(34px, 4.2vw, 52px); }
[data-yp-page-kind="collection"] .collection-intro .lede { color: var(--yp-muted); font-size: 1.0625rem; line-height: 1.8; }
[data-yp-page-kind="collection"] .collection-viewing-entry { margin: 0 0 28px; }
[data-yp-page-kind="collection"] .viewing-bridge { padding: 20px 24px; border-color: var(--yp-rule); border-radius: var(--yp-inner); background: var(--yp-stage); box-shadow: none; }
[data-yp-page-kind="collection"] .viewing-bridge p { color: var(--yp-muted); }
[data-yp-page-kind="collection"] .collection-grid { padding: 0; gap: var(--yp-content-gap); }
[data-yp-page-kind="collection"] .collection-card { overflow: clip; border-color: var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); box-shadow: var(--yp-shadow); transition: transform 220ms ease; }
[data-yp-page-kind="collection"] .collection-card:hover { border-color: var(--yp-blue); box-shadow: var(--yp-shadow); transform: translateY(-2px); }
[data-yp-page-kind="collection"] .collection-card .card-text { padding: 24px; background: var(--yp-paper); }
[data-yp-page-kind="collection"] .card-text h2 { font-size: 1.75rem; }
[data-yp-page-kind="collection"] .card-text :is(.card-price, .card-price small) { font-family: var(--yp-font); }
[data-yp-page-kind="collection"] .card-material { background: var(--yp-soft); border-color: var(--yp-rule); color: var(--yp-ink); }
[data-yp-page-kind="collection"] :is(.card-origin, .material-origin, .small, .price-note, .gallery-note, figcaption) { color: var(--yp-muted); }
[data-yp-page-kind="collection"] .collection-end { max-width: 76ch; padding: 44px 0 56px; }
[data-yp-page-kind="collection"] .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; padding: 28px 0 0; }
[data-yp-page-kind="collection"] .hero > figure { min-width: 0; }
[data-yp-page-kind="collection"] :is(.hero .scene, .view-frame, .film-player, .neck-view) { border-radius: var(--yp-inner); background: var(--yp-stage); }
[data-yp-page-kind="collection"] .hero-copy { min-width: 0; padding: 12px 0 24px; }
[data-yp-page-kind="collection"] .hero-copy h1 { font-size: clamp(32px, 3.4vw, 46px); }
[data-yp-page-kind="collection"] .hero-copy .material { border-color: var(--yp-blue); background: var(--yp-soft); color: var(--yp-ink); letter-spacing: 0; }
[data-yp-page-kind="collection"] .hanzi { margin: 16px 0 12px; font-size: clamp(60px, 6vw, 84px); }
[data-yp-page-kind="collection"] .chapter-nav { flex-wrap: wrap; margin: 24px 0 0; padding: 12px 0; border-color: var(--yp-rule); letter-spacing: 0; }
[data-yp-page-kind="collection"] .chapter-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; }
[data-yp-page-kind="collection"] .chapter { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); margin-inline: 0; padding-block: 40px; gap: 36px; border-color: var(--yp-rule); }
[data-yp-page-kind="collection"] :is(.reading, .product-views) { margin: 28px 0 0; padding: 28px; border: 1px solid var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-soft); }
[data-yp-page-kind="collection"] .reading { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; }
[data-yp-page-kind="collection"] .pause { margin-top: 28px; padding: 40px 24px; border-radius: var(--yp-radius); background: var(--yp-stage); }
[data-yp-page-kind="collection"] .proposal-price { font-family: var(--yp-font); }
[data-yp-page-kind="collection"] .related { padding: 40px 0; }
[data-yp-page-kind="collection"] .related > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yp-content-gap); }
[data-yp-page-kind="collection"] .related a { border: 1px solid var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); box-shadow: none; }
[data-yp-page-kind="collection"] .material-story .natural-detail { border-color: var(--yp-blue); border-radius: var(--yp-inner); background: var(--yp-soft); color: var(--yp-ink); }
[data-yp-page-kind="collection"] :is(.interest input, .interest select, .interest textarea, .interest-panel input, .interest-panel select, .interest-panel textarea) { padding: 12px; border: 1px solid var(--yp-rule); border-radius: var(--yp-inner); background: var(--yp-paper); color: var(--yp-ink); font: 1rem/1.6 var(--yp-font); }

/* Optional viewing-room route uses its existing tabs, exact image and film player. */
[data-yp-page-kind="collection"] .introduction { grid-template-columns: minmax(0, 1fr) minmax(0, .42fr); padding: 28px 0; gap: 32px; }
[data-yp-page-kind="collection"] .introduction h1 { font-size: clamp(34px, 4.2vw, 52px); }
[data-yp-page-kind="collection"] :is(.piece-switch, .room-breadcrumb) { padding-inline: 0; }
[data-yp-page-kind="collection"] .piece-switch { grid-template-columns: repeat(3, minmax(0, 1fr)); perspective: none; }
[data-yp-page-kind="collection"] .piece-switch button { border-color: var(--yp-rule); border-radius: var(--yp-inner); background: var(--yp-paper); color: var(--yp-ink); box-shadow: none; transform: none; transition: none; }
[data-yp-page-kind="collection"] .piece-switch button::after { content: none; }
[data-yp-page-kind="collection"] .piece-switch button[aria-pressed="true"] { border-color: var(--yp-blue); background: var(--yp-stage); box-shadow: none; transform: none; }
[data-yp-page-kind="collection"] .piece-switch button :is(span, small) { font-family: var(--yp-font); letter-spacing: 0; }
[data-yp-page-kind="collection"] .room { overflow: clip; margin-inline: 0; border-color: var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); box-shadow: var(--yp-shadow); }
[data-yp-page-kind="collection"] .room-head { border-color: var(--yp-rule); background: var(--yp-paper); }
[data-yp-page-kind="collection"] .stage-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); border-color: var(--yp-rule); background: var(--yp-soft); }
[data-yp-page-kind="collection"] .stage-tabs button { border-color: var(--yp-rule); background: var(--yp-soft); color: var(--yp-ink); box-shadow: none; }
[data-yp-page-kind="collection"] .stage-tabs button[aria-selected="true"] { border-bottom-color: var(--yp-blue); background: var(--yp-paper); box-shadow: none; }
[data-yp-page-kind="collection"] .stage-tabs small { color: var(--yp-muted); letter-spacing: 0; }
[data-yp-page-kind="collection"] .panel-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
[data-yp-page-kind="collection"] :is(.stage-panels, .detail-frame, .record-panel) { background: var(--yp-stage); }
[data-yp-page-kind="collection"] .look-list button { border-color: var(--yp-rule); border-radius: var(--yp-inner); background: var(--yp-soft); color: var(--yp-ink); box-shadow: none; transform: none; transition: none; }
[data-yp-page-kind="collection"] .look-list button[aria-pressed="true"] { border-color: var(--yp-blue); background: var(--yp-stage); }
[data-yp-page-kind="collection"] .interest-panel { grid-template-columns: minmax(0, .86fr) minmax(0, 1fr); margin: 0 0 56px; padding: 28px; gap: 32px; border-color: var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-soft); box-shadow: none; }
[data-yp-page-kind="collection"] .interest-panel form { padding: 0; border: 0; background: none; box-shadow: none; }
[data-yp-page-kind="collection"] .interest-panel button[type="submit"] { min-height: 44px; border-radius: 999px; background: var(--yp-ink); color: var(--yp-paper); }

/* Trust, policy and contact pages retain a simple, printable reading measure. */
[data-yp-page-kind="general"] main:not(:has(> .module-intro)) { max-width: var(--yp-reading-width); margin-inline: auto; padding: 32px 24px 64px; }
[data-yp-page-kind="general"] main:not(:has(> .module-intro)) h1 { font-size: clamp(34px, 4.2vw, 48px); }
[data-yp-page-kind="general"] main:not(:has(> .module-intro)) h2 { margin-top: 36px; font-size: 1.75rem; }
[data-yp-page-kind="general"] .trust-index { border-color: var(--yp-rule); }
[data-yp-page-kind="general"] .trust-index a { display: inline-flex; align-items: center; min-height: 44px; }
[data-yp-page-kind="general"] .trust-section { margin-top: 28px; }

/* Family connection panels share a surface, with no changes to return handlers. */
[data-yp-page-kind="lesson"] :is(.presenter-qian-entry, .library-connect, .learning-related),
[data-yp-page-kind="hexagram"] .library-connect {
  padding: 24px 24px;
  border: 1px solid var(--yp-rule);
  border-radius: var(--yp-radius);
  background: var(--yp-stage);
  color: var(--yp-ink);
  font-family: var(--yp-font);
  box-shadow: none;
}

[data-yp-page-kind="lesson"] .topic-marks button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--yp-rule); border-radius: 999px; background: var(--yp-paper); color: var(--yp-ink); }
[data-yp-page-kind="lesson"] .topic-marks button[aria-pressed="true"] { background: var(--yp-ink); color: var(--yp-paper); border-color: var(--yp-ink); }

@media (max-width: 1000px) {
  [data-yp-page-kind="hexagram"] .hero-copy { padding: 24px; }
  [data-yp-page-kind="hexagram"] .hero-visual { aspect-ratio: auto; min-height: 450px; }
  [data-yp-page-kind="hexagram"] .line-card { grid-template-columns: 58px minmax(0, 1fr); }
  [data-yp-page-kind="hexagram"] .line-card > div:last-child { grid-column: 2; }
  [data-yp-page-kind="hexagram"] .line-explanations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-yp-page-kind="guide"] .chapter-spread { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="guide"] .chapter-visual { border-right: 0; border-bottom: 1px solid var(--yp-rule); }
  [data-yp-page-kind="general"] .symbol-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 850px) {
  [data-yp-page-kind="hexagram"] header.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  [data-yp-page-kind="hexagram"] .section-head { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  [data-yp-page-kind="lesson"] .canvas { display: grid; grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="lesson"] .image-wrap { min-height: 0; height: auto; max-height: none; aspect-ratio: 3 / 2; }
  [data-yp-page-kind="lesson"] .content-panel { min-height: 0; padding: 24px; }
  [data-yp-page-kind="lesson"] .content-panel h2 { max-width: none; }
  [data-yp-page-kind="lesson"] .caption-band { display: block; }
  [data-yp-page-kind="lesson"] .caption-label { display: block; margin-bottom: 8px; }
  [data-yp-page-kind]:is([data-yp-page-kind="lesson"], [data-yp-page-kind="guide"]) .video-watch-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  [data-yp-page-kind="guide"] .guide-hero { display: block; }
  [data-yp-page-kind="guide"] .tour-launch { margin-top: 20px; }
  [data-yp-page-kind="guide"] .route-media { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="general"] .trigram-grid { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="collection"] :is(.hero, .chapter, .reading, .panel-grid, .interest-panel, .introduction) { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="collection"] .reading-copy { grid-column: 1; }
}

@media (max-width: 600px) {
  [data-yp-page-kind="hexagram"] .shell { width: calc(100% - 32px); }
  [data-yp-page-kind="hexagram"] header.hero { display: flex; flex-direction: column; border-radius: var(--yp-radius); }
  [data-yp-page-kind="hexagram"] .hero-copy { order: -1; padding: 24px 24px; }
  [data-yp-page-kind="hexagram"] .hero-visual { min-height: 0; aspect-ratio: 4 / 3; }
  [data-yp-page-kind="hexagram"] .identity { margin-top: 12px; }
  [data-yp-page-kind="hexagram"] .hero h1 { margin-top: 16px; font-size: 2rem; }
  [data-yp-page-kind="hexagram"] :is(.summary-en, .summary-zh) { margin-top: 12px; }
  [data-yp-page-kind="hexagram"] .contents { margin-top: 20px; }
  [data-yp-page-kind="hexagram"] .section { margin-top: 32px; }
  [data-yp-page-kind="hexagram"] .commentary-grid { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="hexagram"] .line-card { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
  [data-yp-page-kind="hexagram"] .line-card > div:last-child { grid-column: 1; }
  [data-yp-page-kind="hexagram"] .line-index { flex-direction: row; justify-content: space-between; }
  [data-yp-page-kind="hexagram"] .line-explanations { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="hexagram"] .virtues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-yp-page-kind="lesson"] main { padding: 24px 16px 48px; }
  [data-yp-page-kind="lesson"] .controls { padding: 16px; }
  [data-yp-page-kind="lesson"] .lang-control { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  [data-yp-page-kind="lesson"] .transcript { padding: 16px 20px; }
  [data-yp-page-kind="guide"] main,
  [data-yp-page-kind="general"] main:has(> .module-intro),
  [data-yp-page-kind="general"] main:not(:has(> .module-intro)) { padding-inline: 16px; }
  [data-yp-page-kind="guide"] :is(.route-topics, .beginner-list, .observation-concepts, .relationship-list, .pattern-stages, .lens-map, .glossary-grid) { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="guide"] .relationship-list article:last-child { grid-column: auto; }
  [data-yp-page-kind="guide"] :is(details, .next, .observation-example, .observation-takeaway, .practice, .lesson-next-step, .orientation-map) { padding: 16px 20px; }
  [data-yp-page-kind="guide"] .guide-book { display: block; }
  [data-yp-page-kind="guide"] .chapter-contents { border-radius: var(--yp-radius) var(--yp-radius) 0 0; border-right: 0; }
  [data-yp-page-kind="guide"] .chapter-contents [role="tablist"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 12px 16px; overflow: visible; }
  [data-yp-page-kind="guide"] .chapter-contents button { width: auto; min-width: 0; padding: 12px; border: 1px solid var(--yp-rule); border-radius: var(--yp-inner); font-size: .875rem; }
  [data-yp-page-kind="guide"] .chapter-contents button[aria-selected="true"] { border-inline-start: 3px solid var(--yp-blue); padding-inline-start: 10px; }
  [data-yp-page-kind="guide"] .chapter-copy { padding: 24px 20px; }
  [data-yp-page-kind="guide"] .journey-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-yp-page-kind="guide"] .observation-hero { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="guide"] .observation-hero > img { width: 96px; justify-self: start; }
  [data-yp-page-kind="general"] :is(.learn-grid, .phase-cycles) { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="general"] .module-intro { padding-block: 28px 20px; }
  [data-yp-page-kind="collection"] main { padding-inline: 16px; }
  [data-yp-page-kind="collection"] .collection-grid { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="collection"] .collection-intro { padding-block: 28px 24px; }
  [data-yp-page-kind="collection"] :is(.hero, .chapter) { gap: 24px; }
  [data-yp-page-kind="collection"] .hero h1 { font-size: 2rem; }
  [data-yp-page-kind="collection"] :is(.reading, .product-views, .interest-panel) { padding: 20px; }
  [data-yp-page-kind="collection"] :is(.related > div, .piece-switch) { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="collection"] .stage-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-yp-page-kind="collection"] .stage-tabs button { padding: 12px; min-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]),
  [data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) *,
  [data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) *::before,
  [data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) *::after {
    scroll-behavior: auto;
    animation: none !important;
    transition: none !important;
  }
  [data-yp-page-kind="collection"] .collection-card:hover { transform: none; }
  [data-yp-page-kind="lesson"] .image-wrap img { transform: none !important; }
  [data-yp-page-kind]:is([data-yp-page-kind="hexagram"], [data-yp-page-kind="lesson"], [data-yp-page-kind="guide"], [data-yp-page-kind="collection"], [data-yp-page-kind="general"]) :is(.button, .primary, .primary-button, .submit-interest):active { transform: none; }
}

/* Mountain theatre: reading tools and the public game introduction.
   Presentation only. Calculation, coin faces, moving lines, hidden states,
   dialog behavior, player controls and /game/play/ remain with their owners.
   Screen-only styling preserves the existing reading/PDF print layouts. */
@media screen {
  [data-yp-page-kind="reading"],
  [data-yp-page-kind="game-intro"] {
    background: var(--yp-soft);
    color: var(--yp-ink);
    font-family: var(--yp-font);
  }

  [data-yp-page-kind="reading"] :is(h1, h2, h3, h4),
  [data-yp-page-kind="game-intro"] :is(h1, h2, h3) {
    color: var(--yp-deep);
    font-family: var(--yp-font);
    font-weight: 650;
    letter-spacing: -.025em;
    text-wrap: pretty;
  }

  [data-yp-page-kind="reading"] :is(.mei-result .moment-card h3, .mei-result .mei-ai-output h4, .answer-section h2, .cast-figure figcaption h2, .result-title-row h3, .result-copy h3) {
    font-family: var(--yp-font);
    font-weight: 650;
  }

  [data-yp-page-kind="reading"] :is(button, input, textarea, select),
  [data-yp-page-kind="game-intro"] button {
    font-family: var(--yp-font);
  }

  [data-yp-page-kind="reading"] :is(a, button, input, textarea, select, summary):focus-visible,
  [data-yp-page-kind="game-intro"] :is(a, button, summary):focus-visible {
    outline: 3px solid var(--yp-focus);
    outline-offset: 4px;
  }

  [data-yp-page-kind="reading"] :is(.eyebrow, .reading-kicker, .method-kicker, .report-section .number),
  [data-yp-page-kind="game-intro"] .eyebrow {
    color: var(--yp-muted);
    font-family: var(--yp-font);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    font-variant-caps: normal;
    line-height: 1.6;
  }

  [data-yp-page-kind="reading"] :is(.lead, .small, .quiet, .future-method, .casting-methods > p, .reading-lead, .moment-lead),
  [data-yp-page-kind="game-intro"] :is(.lead, .quiet, figcaption) {
    color: var(--yp-muted);
  }

  [data-yp-page-kind="reading"] :is(.small, .quiet) { font-size: .8125rem; }
  [data-yp-page-kind="reading"] :is(h1, h2, h3, h4) :is(em, span),
  [data-yp-page-kind="game-intro"] :is(h1, h2, h3) :is(em, span) {
    color: inherit;
    font-style: inherit;
    font-weight: inherit;
  }

  [data-yp-page-kind="reading"]:not(.reading-studio-page) > main {
    max-width: 1240px;
    padding: clamp(28px, 4vw, 56px) 32px 80px;
  }

  [data-yp-page-kind="reading"] .hero {
    gap: clamp(28px, 5vw, 64px);
    min-height: 440px;
    padding-block: 12px 32px;
  }

  [data-yp-page-kind="reading"] :is(.hero h1, .intro h1) {
    font-size: clamp(2.25rem, 4.7vw, 4.15rem);
    line-height: 1.08;
    letter-spacing: -.045em;
  }

  [data-yp-page-kind="reading"] .hero-art {
    min-height: 340px;
    padding: 28px;
    border: 1px solid var(--yp-rule);
    border-radius: var(--yp-scene-radius);
    background: var(--yp-stage);
    box-shadow: var(--yp-shadow);
    transform: none;
  }

  [data-yp-page-kind="reading"] .hero-art figcaption {
    color: var(--yp-ink);
    font-family: var(--yp-font);
    font-size: .9375rem;
    font-style: normal;
    line-height: 1.6;
    text-align: center;
  }

  [data-yp-page-kind="reading"] :is(.card, .result-card, .report, .studio-orientation, .studio-quick-methods, .cast-form, .mei-form, .moment-card, .question-answer, .cast-overview) {
    border: 1px solid var(--yp-rule);
    border-radius: var(--yp-radius);
    background: var(--yp-paper);
    color: var(--yp-ink);
    box-shadow: var(--yp-shadow);
  }

  [data-yp-page-kind="reading"] :is(.card.deep, .note, .question-guide, .studio-overview, .studio-learning, .reading-path, .worked-example, .worked-application, .practical-step, .interaction-intro, .clarification-card, .reading-snapshot) {
    background: var(--yp-stage);
    color: var(--yp-ink);
    border-color: var(--yp-rule);
    border-radius: var(--yp-radius);
    box-shadow: none;
  }

  [data-yp-page-kind="reading"] :is(.note, .question-guide) { padding: clamp(20px, 3vw, 32px); }
  [data-yp-page-kind="reading"] :is(.note, .studio-overview, .worked-application, .practical-step, .interaction-intro) {
    border-left: 3px solid var(--yp-blue);
  }

  [data-yp-page-kind="reading"] .route-strip {
    border-color: var(--yp-rule);
    border-radius: var(--yp-radius);
    background: var(--yp-stage);
    overflow: clip;
  }

  [data-yp-page-kind="reading"] .route-strip > div { border-color: var(--yp-rule); }
  [data-yp-page-kind="reading"] .route-strip > div:last-child { border-right: 0; }

  [data-yp-page-kind="reading"] :is(.casting-method-option, .studio-route a, .reading-lesson-card) {
    border: 1px solid var(--yp-rule);
    border-radius: var(--yp-radius);
    background: var(--yp-paper);
    color: var(--yp-ink);
    box-shadow: none;
    transition: transform 120ms ease;
  }

  [data-yp-page-kind="reading"] :is(.casting-method-option, .studio-route a, .reading-lesson-card):hover {
    background: var(--yp-soft);
    box-shadow: none;
    transform: translateY(-2px);
  }

  [data-yp-page-kind="reading"] .casting-method-option.is-selected {
    background: var(--yp-stage);
    border-color: var(--yp-ink);
    box-shadow: inset 0 0 0 1px var(--yp-ink);
  }

  [data-yp-page-kind="reading"] :is(.casting-method-option strong, .studio-route strong, .studio-overview strong) {
    font-family: var(--yp-font);
    font-weight: 650;
  }

  [data-yp-page-kind="reading"] .casting-method-option > span:not(.method-kicker) { color: var(--yp-muted); }
  [data-yp-page-kind="reading"] .reading-lesson-card b { color: var(--yp-ink); }
  [data-yp-page-kind="reading"] .studio-journey li { border-top-color: var(--yp-rule); }

  [data-yp-page-kind="reading"] :is(.button, .header-cta),
  [data-yp-page-kind="game-intro"] a.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid var(--yp-deep);
    border-radius: 999px;
    background: var(--yp-deep);
    color: var(--yp-paper);
    font-family: var(--yp-font);
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.45;
    text-decoration: none;
    white-space: normal;
    box-shadow: none;
    transition: transform 120ms ease;
  }

  [data-yp-page-kind="reading"] :is(.button, .header-cta):hover:not(:disabled),
  [data-yp-page-kind="game-intro"] a.primary:hover {
    background: var(--yp-ink);
    color: var(--yp-paper);
    box-shadow: none;
    transform: translateY(-1px);
  }

  [data-yp-page-kind="reading"] :is(.button.secondary, .button.outline) {
    border-color: var(--yp-rule);
    background: var(--yp-paper);
    color: var(--yp-ink);
  }

  [data-yp-page-kind="reading"] :is(.button.secondary, .button.outline):hover:not(:disabled) {
    background: var(--yp-stage);
    color: var(--yp-ink);
  }

  [data-yp-page-kind="reading"] :is(button, summary, .text-link, .back-to-chapters, .oracle-shortcut, .studio-learning a, .report-toc a, .reading-session-bar a, .oracle-return-bar a, .context-purpose-choice) {
    min-height: 44px;
  }

  [data-yp-page-kind="reading"] :is(summary, .text-link, .back-to-chapters, .report-toc a) {
    padding-block: 12px;
    line-height: 1.5;
  }

  [data-yp-page-kind="reading"] :is(.text-link, .back-to-chapters, .report-toc a) {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
  }

  [data-yp-page-kind="reading"] .report-toc a { display: flex; }
  [data-yp-page-kind="reading"] .text-link { padding-inline: 4px; }
  [data-yp-page-kind="reading"] :is(.oracle-menu, .journey-menu, .studio-view-controls button, .studio-quick-methods nav a, .prompt-row button) {
    min-height: 44px;
    border: 1px solid var(--yp-rule);
    border-radius: 999px;
    background: var(--yp-paper);
    color: var(--yp-ink);
    font-family: var(--yp-font);
  }

  [data-yp-page-kind="reading"] :is(.studio-view-controls button[aria-pressed="true"], .studio-quick-methods nav a[aria-current="page"]) {
    border-color: var(--yp-deep);
    background: var(--yp-deep);
    color: var(--yp-paper);
  }

  [data-yp-page-kind="reading"] :is(input:not([type="radio"]):not([type="checkbox"]), textarea, select) {
    box-sizing: border-box;
    min-width: 0;
    min-height: 48px;
    max-width: 100%;
    border: 1px solid var(--yp-muted);
    border-radius: var(--yp-inner);
    background: var(--yp-paper);
    color: var(--yp-ink);
    font-family: var(--yp-font);
    font-size: 1rem;
    line-height: 1.6;
  }

  [data-yp-page-kind="reading"] textarea { padding: 16px; }
  [data-yp-page-kind="reading"] :is(input[type="radio"], input[type="checkbox"]) { accent-color: var(--yp-ink); }
  [data-yp-page-kind="reading"] :is(.cast-form label, .mei-form label, .field-label) {
    font-size: .875rem;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.5;
  }

  [data-yp-page-kind="reading"] .choice {
    min-height: 64px;
    padding: 16px;
    border-color: var(--yp-rule);
    border-radius: var(--yp-inner);
    background: var(--yp-soft);
  }

  [data-yp-page-kind="reading"] .choice:has(input:checked) {
    border-color: var(--yp-ink);
    background: var(--yp-stage);
    box-shadow: inset 0 0 0 1px var(--yp-ink);
  }

  [data-yp-page-kind="reading"] :is(.scene, .studio-result-scene img) {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 8px;
    border: 1px solid var(--yp-rule);
    border-radius: var(--yp-scene-radius);
    background: var(--yp-soft);
    object-fit: contain;
  }

  [data-yp-page-kind="reading"] :is(.space-art, .cycle-illustration, .workspace-illustration) { max-width: 100%; height: auto; }
  [data-yp-page-kind="reading"] :is(.insight-grid article, .facts p, .moment-grid > div, .studio-relation-diagram, .studio-line-ladder, .coin-outcome-key span, .report-toc, .cast-direction, .result-summary, .verdict-pair, .cast-basic blockquote) {
    border-color: var(--yp-rule);
    border-radius: var(--yp-inner);
    background: var(--yp-soft);
    color: var(--yp-ink);
    box-shadow: none;
  }

  [data-yp-page-kind="reading"] :is(.reading-question p, .answer-question, .result-summary p, .reflection p, .mei-ai-output .reading-answer) {
    font-family: var(--yp-font);
  }

  [data-yp-page-kind="reading"] :is(.question-answer, .cast-overview) .reading-question { border-color: var(--yp-rule); }
  [data-yp-page-kind="reading"] .answer-answer {
    background: var(--yp-stage);
    border-left-color: var(--yp-blue);
    border-radius: var(--yp-inner);
  }

  [data-yp-page-kind="reading"] :is(.reading-chapters a, .report-detail, .studio-fold, .interaction-status, .interaction-basis) {
    border-color: var(--yp-rule);
    border-radius: var(--yp-inner);
    background: var(--yp-paper);
    color: var(--yp-ink);
    box-shadow: none;
  }

  [data-yp-page-kind="reading"] :is(.reading-chapters a:hover, .report-detail[open] > summary) {
    border-color: var(--yp-rule);
    background: var(--yp-stage);
  }

  [data-yp-page-kind="reading"] :is(.reading-chapters span, .direction-link span, .cast-change > span) { color: var(--yp-blue); }
  [data-yp-page-kind="reading"] .report-detail > summary { border-radius: var(--yp-inner); color: var(--yp-ink); }
  [data-yp-page-kind="reading"] :is(.report-cover, .report-section, .reading-chapter, .reading-sources, .cast-basic) { border-color: var(--yp-rule); }
  [data-yp-page-kind="reading"] .mei-verdict:not(.unfavourable) {
    border-color: var(--yp-rule);
    border-left-color: var(--yp-blue);
    border-radius: var(--yp-radius);
    background: var(--yp-stage);
  }

  /* Preserve the existing unfavourable verdict's distinct warm state. */
  [data-yp-page-kind="reading"] .mei-verdict.unfavourable {
    background: var(--yp-soft);
    border-radius: var(--yp-radius);
  }
  [data-yp-page-kind="reading"] .studio-relation-label { border-color: var(--yp-rule); }
  [data-yp-page-kind="reading"] .cast-section { background: var(--yp-stage); border-radius: var(--yp-scene-radius); }
  [data-yp-page-kind="reading"] .cast-build { background: var(--yp-stage); border-radius: var(--yp-inner); }
  [data-yp-page-kind="reading"] .coin-area .coin-stage {
    border-color: var(--yp-rule);
    border-radius: var(--yp-scene-radius);
    background: var(--yp-stage);
    box-shadow: none;
  }

  [data-yp-page-kind="reading"] .coin-stage::after { background: none; }
  [data-yp-page-kind="reading"] .breath-orbit span { animation: none; }
  [data-yp-page-kind="reading"] #reading-dialog {
    border: 1px solid var(--yp-rule);
    border-radius: var(--yp-radius);
    background: var(--yp-paper);
    color: var(--yp-ink);
    box-shadow: var(--yp-shadow);
  }

  [data-yp-page-kind="reading"] #reading-dialog::backdrop { background: color-mix(in srgb, var(--yp-deep) 64%, transparent); }
  [data-yp-page-kind="reading"] .dialog-close {
    width: 44px;
    min-height: 44px;
    border: 1px solid var(--yp-rule);
    border-radius: 50%;
    background: var(--yp-paper);
    color: var(--yp-ink);
  }

  [data-yp-page-kind="reading"] :is(.reading-session-bar, .oracle-return-bar) {
    border-color: var(--yp-rule);
    border-radius: var(--yp-radius);
    background: var(--yp-paper);
    color: var(--yp-ink);
    box-shadow: var(--yp-shadow);
    font-family: var(--yp-font);
  }

  [data-yp-page-kind="reading"] .oracle-return-bar a { display: inline-flex; align-items: center; }
  [data-yp-page-kind="reading"] .reading-session-bar button { border-radius: 999px; }

  /* The intro is an ordinary web page; the game runtime has no page-kind tag. */
  [data-yp-page-kind="game-intro"] > main { padding-bottom: 24px; }
  [data-yp-page-kind="game-intro"] > .preview {
    background: var(--yp-stage);
    border-color: var(--yp-rule);
    color: var(--yp-ink);
  }

  [data-yp-page-kind="game-intro"] .hero { gap: clamp(28px, 4vw, 56px); padding-block: 56px 64px; }
  [data-yp-page-kind="game-intro"] .hero h1 { font-size: clamp(2.4rem, 4.3vw, 3.8rem); line-height: 1.1; letter-spacing: -.04em; }
  [data-yp-page-kind="game-intro"] .hero figure {
    padding: 12px;
    border: 1px solid var(--yp-rule);
    border-radius: var(--yp-scene-radius);
    background: var(--yp-stage);
    box-shadow: var(--yp-shadow);
  }

  [data-yp-page-kind="game-intro"] .hero figure img { width: 100%; height: auto; border-radius: var(--yp-radius); }
  [data-yp-page-kind="game-intro"] .hero figcaption { padding: 12px 12px 4px; }
  [data-yp-page-kind="game-intro"] .actions > a { min-height: 48px; }
  [data-yp-page-kind="game-intro"] .game-discovery { color: var(--yp-ink); }
  [data-yp-page-kind="game-intro"] .game-discovery-steps { gap: 20px; }
  [data-yp-page-kind="game-intro"] .game-discovery-steps > li {
    padding: 24px;
    border: 1px solid var(--yp-rule);
    border-radius: var(--yp-radius);
    background: var(--yp-paper);
    box-shadow: var(--yp-shadow);
  }

  [data-yp-page-kind="game-intro"] .game-discovery-steps > li::before { color: var(--yp-muted); font-family: var(--yp-font); }
  [data-yp-page-kind="game-intro"] :is(.game-discovery-resources > li, .game-discovery-controls, .culture) {
    border: 1px solid var(--yp-rule);
    border-radius: var(--yp-radius);
    background: var(--yp-paper);
  }

  [data-yp-page-kind="game-intro"] :is(.game-discovery-controls, .culture) { background: var(--yp-stage); }
  [data-yp-page-kind="game-intro"] :is(.game-discovery-resources h3, .names strong) { font-family: var(--yp-font); }
  [data-yp-page-kind="game-intro"] .game-discovery-boundary {
    border-color: var(--yp-blue);
    border-radius: var(--yp-inner);
    background: var(--yp-stage);
  }

  [data-yp-page-kind="game-intro"] :is(.game-discovery a, .names p, details, .game-discovery-basis, .more) { border-color: var(--yp-rule); }
  [data-yp-page-kind="game-intro"] .game-discovery a { color: var(--yp-ink); }
  [data-yp-page-kind="game-intro"] .game-discovery a.primary { color: var(--yp-paper); }
  [data-yp-page-kind="game-intro"] .questions {
    max-width: 920px;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--yp-rule);
    border-radius: var(--yp-radius);
    background: var(--yp-paper);
  }

  [data-yp-page-kind="game-intro"] summary { min-height: 54px; color: var(--yp-ink); }
}

@media screen and (max-width: 950px) {
  [data-yp-page-kind="reading"] .hero { min-height: auto; }
  [data-yp-page-kind="reading"] .reading-layout { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="reading"] .orientation.card { display: block; }
  [data-yp-page-kind="reading"] .orientation img { max-height: 140px; }
  [data-yp-page-kind="game-intro"] .hero { grid-template-columns: minmax(0, 1fr); padding-block: 40px 44px; }
  [data-yp-page-kind="game-intro"] .hero figure { max-width: 820px; }
}

@media screen and (max-width: 700px) {
  [data-yp-page-kind="reading"] .casting-method-grid { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="reading"] .studio-route { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="reading"] .casting-method-option { padding: 20px; gap: 8px; }
  [data-yp-page-kind="reading"] .casting-method-option strong { font-size: 1.375rem; }
  [data-yp-page-kind="reading"] .studio-route strong { font-size: 1.375rem; }
  [data-yp-page-kind="reading"] .report-tools { gap: 12px; }
  [data-yp-page-kind="reading"] :is(.report-tools .button, .answer-actions .button) { flex: 1 1 220px; }
  [data-yp-page-kind="game-intro"] .game-discovery-steps > li { padding: 24px; }
}

@media screen and (max-width: 600px) {
  [data-yp-page-kind="reading"]:not(.reading-studio-page) > main { padding: 24px 20px 56px; }
  [data-yp-page-kind="reading"] .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 8px; }
  [data-yp-page-kind="reading"] :is(.hero h1, .intro h1) { font-size: clamp(2rem, 9vw, 2.8rem); }
  [data-yp-page-kind="reading"] .hero-art { min-height: 240px; padding: 20px; margin-top: 0; }
  [data-yp-page-kind="reading"] .hero-art img { height: 180px; }
  [data-yp-page-kind="reading"] :is(.card, .result-card, .report, .question-answer) { padding: 24px 20px; }
  [data-yp-page-kind="reading"] .route-strip { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="reading"] .route-strip > div { border-right: 0; border-bottom: 1px solid var(--yp-rule); }
  [data-yp-page-kind="reading"] .route-strip > div:last-child { border-bottom: 0; }
  [data-yp-page-kind="reading"] .result-heading { gap: 20px; }
  [data-yp-page-kind="reading"] :is(.insight-grid, .facts, .association-grid) { grid-template-columns: minmax(0, 1fr); }
  [data-yp-page-kind="reading"] .reading-step { padding-inline: 6%; }
  [data-yp-page-kind="reading"] .reading-step h2 { font-size: 1.9rem; }
  [data-yp-page-kind="reading"] .studio-view-controls button { flex: 1; }
  [data-yp-page-kind="reading"] .dialog-close { top: 8px; right: 8px; }
  [data-yp-page-kind="game-intro"] .hero { gap: 24px; padding-top: 32px; }
  [data-yp-page-kind="game-intro"] .hero h1 { font-size: clamp(2.15rem, 9vw, 3rem); }
  [data-yp-page-kind="game-intro"] .actions { align-items: stretch; }
  [data-yp-page-kind="game-intro"] .actions > a.primary { width: 100%; }
  [data-yp-page-kind="game-intro"] .game-discovery-resources { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (prefers-reduced-motion: reduce) {
  [data-yp-page-kind="reading"] :is(.button, .header-cta, .casting-method-option, .studio-route a, .reading-lesson-card),
  [data-yp-page-kind="game-intro"] a.primary { transition: none; }
  [data-yp-page-kind="reading"] :is(.button, .header-cta, .casting-method-option, .studio-route a, .reading-lesson-card):hover,
  [data-yp-page-kind="game-intro"] a.primary:hover { transform: none; }
}

/* Hallmark · v2.0.0 · theme: YiPhase mountain theatre (approved system) · shape: thumbnail-first course browser · genre: playful · signature: real teaching thumbnails · scope: catalog */
/* Critique: the directory leads with existing lessons, keeps controls compact and preserves the full original learning map below. */

body[data-yp-page-kind="catalog"] .yp-catalog {
  width: min(calc(100% - 32px), 1180px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 0 64px;
  color: var(--yp-ink);
  font-family: var(--yp-font);
}
.yp-catalog *, .yp-catalog *::before, .yp-catalog *::after { box-sizing: border-box; }
.yp-catalog [hidden] { display: none !important; }
.yp-catalog :is(h1, h2, h3) { color: var(--yp-ink); font-family: var(--yp-font); min-width: 0; overflow-wrap: break-word; }
.yp-catalog a { color: var(--yp-ink); }
.yp-catalog :is(a, button, input, select, summary):focus-visible { outline: 3px solid var(--yp-focus); outline-offset: 4px; }
.yp-catalog-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; max-width: none; padding: 0; margin: 0 0 24px; border: 0; background: var(--yp-clear); box-shadow: none; position: static; }
.yp-catalog-heading > div { min-width: 0; }
.yp-catalog-heading h1 { margin: 0 0 8px; max-width: 21ch; font-size: clamp(2rem, 4.3vw, 3.5rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 650; }
.yp-catalog-heading p { margin: 0; color: var(--yp-muted); max-width: 48ch; font-size: 1rem; line-height: 1.5; }
.yp-catalog-paths { display: flex; flex-wrap: wrap; column-gap: 20px; align-items: center; }
.yp-catalog-paths a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-thickness: 1px; text-underline-offset: 4px; font-size: .875rem; }
.yp-catalog-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.yp-catalog-tools label { display: grid; gap: 8px; min-width: 0; font-size: .8125rem; color: var(--yp-muted); }
.yp-catalog-search { grid-column: 1 / -1; }
.yp-catalog-tools :is(input, select) { width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--yp-muted); border-radius: var(--yp-inner); background: var(--yp-paper); color: var(--yp-ink); padding: 12px; font: inherit; font-size: .9375rem; }
.yp-catalog-tools input::placeholder { color: var(--yp-muted); opacity: 1; }
.yp-catalog-tools input[type="search"] { appearance: auto; }
.yp-catalog-toolbar { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.yp-catalog-toolbar p { margin: 0; flex: 1; font-size: .75rem; line-height: 1.4; color: var(--yp-muted); }
.yp-catalog :is(button, select, summary) { cursor: pointer; }
.yp-catalog button { font-family: var(--yp-font); font-size: .875rem; }
.yp-catalog-saved-filter { min-height: 44px; display: inline-flex; gap: 8px; align-items: center; border-radius: 999px; padding: 8px 16px; color: var(--yp-ink); background: var(--yp-paper); border: 1px solid var(--yp-rule); }
.yp-catalog-saved-filter[aria-pressed="true"] { background: var(--yp-ink); color: var(--yp-paper); border-color: var(--yp-ink); }
.yp-catalog-saved-filter span { font-variant-numeric: tabular-nums; }
.yp-catalog-reset { min-height: 44px; border: 0; padding: 8px 0 8px 8px; color: var(--yp-ink); background: none; text-decoration: underline; text-underline-offset: 4px; }
.yp-catalog-results { margin-block: 8px 16px; min-height: 20px; }
.yp-catalog-results p { margin: 0; color: var(--yp-muted); font-size: .8125rem; }
.yp-catalog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
.yp-catalog-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--yp-radius); background: var(--yp-paper); box-shadow: var(--yp-shadow); overflow: clip; border: 1px solid var(--yp-rule); }
.yp-catalog-card-link { display: flex; flex: 1; flex-direction: column; text-decoration: none; }
.yp-catalog-card-link:focus-visible { outline-offset: -4px; }
.yp-catalog-card-link > img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; background: var(--yp-stage); margin: 0; border-radius: 0; }
.yp-catalog-card-copy { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.yp-catalog-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; color: var(--yp-muted); font-size: .75rem; margin-bottom: 8px; }
.yp-catalog-duration { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.yp-catalog-card-copy h2 { font-size: 1.25rem; line-height: 1.25; font-weight: 650; letter-spacing: -.015em; margin: 0 0 12px; }
.yp-catalog-card-copy > p { margin: 0 0 16px; color: var(--yp-muted); font-size: .875rem; line-height: 1.55; }
.yp-catalog-card-copy > .yp-catalog-hexagram { margin: 0 0 8px; font-size: .75rem; color: var(--yp-ink); text-transform: none; }
.yp-catalog-open { display: inline-flex; align-items: center; min-height: 28px; align-self: flex-start; margin-top: auto; font-size: .875rem; color: var(--yp-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.yp-catalog-save { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; margin: 0 20px 20px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--yp-rule); color: var(--yp-ink); background: var(--yp-paper); }
.yp-catalog-save[aria-pressed="true"] { color: var(--yp-paper); background: var(--yp-ink); border-color: var(--yp-ink); }
.yp-catalog-save[aria-pressed="true"] svg path { fill: currentColor; }
.yp-catalog-more { display: flex; justify-content: center; margin-top: 28px; }
.yp-catalog :is(.yp-catalog-more button, .yp-catalog-empty button) { min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1px solid var(--yp-ink); color: var(--yp-paper); background: var(--yp-ink); }
.yp-catalog-empty { padding: 36px 24px; border: 1px solid var(--yp-rule); border-radius: var(--yp-radius); background: var(--yp-paper); }
.yp-catalog-empty h2 { margin: 0 0 12px; font-size: 1.5rem; }
.yp-catalog-empty p { max-width: 48ch; color: var(--yp-muted); margin: 0 0 20px; }
.yp-catalog-save-status { font-size: .8125rem; line-height: 1.5; color: var(--yp-muted); }
.yp-catalog-save-status:empty { margin: 0; }
.yp-catalog-collections { margin-top: 40px; border-block: 1px solid var(--yp-rule); }
.yp-catalog-collections > summary { position: relative; padding: 24px 36px 24px 0; min-height: 64px; color: var(--yp-ink); }
.yp-catalog-collections > summary > span:first-child { font-size: 1.125rem; font-weight: 600; }
.yp-catalog-collections > summary > span:last-child { display: block; margin-top: 8px; color: var(--yp-muted); font-size: .8125rem; }
.yp-catalog-original { padding-block: 12px 28px; }
.yp-catalog-original :is(.eyebrow, .library-label) { font-family: var(--yp-font); font-size: .75rem; letter-spacing: normal; text-transform: none; color: var(--yp-muted); }
.yp-catalog-original > h2 { font-size: 1.5rem; max-width: 30ch; }
.yp-catalog-original > .library-lede { font-size: 1rem; max-width: 68ch; }
.yp-catalog-original :is(.library-paths, .library-video-grid, .lesson-catalog-grid) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.yp-catalog-original .library-path { padding: 20px; border-radius: var(--yp-inner); border: 1px solid var(--yp-rule); box-shadow: none; background: var(--yp-paper); }
.yp-catalog-original .library-path h2 { font-size: 1.125rem; }
.yp-catalog-original .library-path p { font-size: .875rem; line-height: 1.5; }
.yp-catalog-original .library-section { margin-top: 32px; }
.yp-catalog-original .library-section-title { gap: 16px; flex-wrap: wrap; }
.yp-catalog-original .library-section-title h2 { font-size: 1.375rem; }
.yp-catalog-original .library-video-card { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: 12px; padding: 0; border-radius: 0; background: none; border: 0; box-shadow: none; }
.yp-catalog-original .library-video-card > img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: var(--yp-inner); }
.yp-catalog-original .library-video-card > div { padding: 0; }
.yp-catalog-original .library-video-card h3 { margin-top: 4px; font-size: 1rem; line-height: 1.3; }
.yp-catalog-original .library-video-card p { font-size: .8125rem; }
.yp-catalog-original .library-video-card :is(small, strong) { font-size: .75rem; line-height: 1.5; }
.yp-catalog-original :is(a.library-action, .library-original, .search-entry-actions a, .library-section-title > a, .source-note a, .note a) { display: inline-flex; align-items: center; min-height: 44px; }
.yp-catalog-original .lesson-catalog-card { border-radius: var(--yp-inner); background: var(--yp-paper); }
.yp-catalog-original .lesson-catalog-card h2 { font-size: 1.125rem; }
.yp-catalog-original :is(.note, .source-note) { padding: 20px 0; border: 0; border-top: 1px solid var(--yp-rule); border-radius: 0; background: none; }

@media (min-width: 620px) {
  .yp-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yp-catalog-original :is(.library-paths, .library-video-grid, .lesson-catalog-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  body[data-yp-page-kind="catalog"] .yp-catalog { width: min(calc(100% - 64px), 1180px); padding-top: 40px; }
  .yp-catalog-heading { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; margin-bottom: 28px; }
  .yp-catalog-tools { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .yp-catalog-search { grid-column: auto; }
  .yp-catalog-toolbar { padding-top: 1px; }
  .yp-catalog-toolbar p { font-size: .8125rem; }
  .yp-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yp-catalog-original .library-paths { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .yp-catalog-original .lesson-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (hover: hover) {
  .yp-catalog-card-link:hover .yp-catalog-open { text-decoration-thickness: 2px; }
  .yp-catalog :is(.yp-catalog-more button, .yp-catalog-empty button):hover { background: var(--yp-deep); }
  .yp-catalog-save:hover, .yp-catalog-saved-filter:hover { border-color: var(--yp-blue); }
}
@media (prefers-reduced-motion: reduce) {
  .yp-catalog *, .yp-catalog *::before, .yp-catalog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* YiPhase approved system · public navigation repair · persistent game/shop and one language control. */
body.yp-site :is(.yp-site-nav[data-journey-nav],header,.yp-game-navigation)[data-yp-global-navigation]{position:sticky;top:0;z-index:100;background:var(--yp-paper)}
html:has(body.yp-site){scroll-padding-top:var(--yp-nav-offset,128px)}
body.yp-site .yp-site-nav[data-journey-nav]{justify-content:initial;gap:16px}
body.yp-site .yp-site-nav .journey-links{margin-left:auto;flex:1;justify-content:center;min-width:0}
body.yp-site .yp-site-nav .journey-quick,body.yp-site [data-yp-account-menu]{display:none}
body.yp-site [data-yp-global-navigation] :is(.journey-links,[data-oracle-navigation])>a[data-yp-account-menu]{display:none}
body.yp-site .yp-global-shortcuts{display:flex;align-items:center;gap:4px;flex:none;order:2}
body.yp-site .yp-global-shortcuts :is(a,.customer-account-shortcut,.customer-oracle-shortcut){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;margin:0;border:0;border-radius:var(--yp-pill);background:var(--yp-soft);color:var(--yp-ink);font:600 13px/1.4 var(--yp-font);white-space:nowrap;text-decoration:none}
body.yp-site .yp-global-shortcuts [data-yp-destination="shop"]{background:var(--yp-ink);color:var(--yp-paper)}
body.yp-site .yp-language{display:inline-flex;align-items:center;flex:none;order:3;gap:0;padding:4px;border:1px solid var(--yp-rule);border-radius:var(--yp-pill);background:var(--yp-paper);font:600 12px/1.4 var(--yp-font)}
body.yp-site .yp-language :is(button,a){display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px;border:0;border-radius:var(--yp-pill);background:var(--yp-clear);color:var(--yp-ink);font:inherit;cursor:pointer;text-decoration:none}
body.yp-site .yp-language :is([aria-pressed="true"],[aria-current="page"]){background:var(--yp-stage);color:var(--yp-ink)}
body.yp-site .yp-utility-header :is(.language,.language-switch){display:none}
body.yp-site .yp-utility-header .top-actions{flex-wrap:wrap}
html[lang^="en"] body.yp-site .journey-link-zh{display:none!important}
html[lang^="zh"] body.yp-site .journey-link-en{display:none!important}
html[lang^="zh"] body.yp-site .journey-link-zh{display:inline!important;letter-spacing:0}
body.yp-site[data-oracle-page]>header[data-yp-global-navigation]{display:flex;align-items:center;gap:12px;min-height:84px;margin:0 auto}
body.yp-site[data-oracle-page]>header[data-yp-global-navigation]>.brand{order:0;flex:none}
body.yp-site[data-oracle-page]>header[data-yp-global-navigation]>nav{order:1;flex:1;justify-content:center;min-width:0;gap:0}
body.yp-site[data-oracle-page]>header[data-yp-global-navigation]>:is(.oracle-shortcut,.quiet){display:none}
body.yp-site .yp-game-navigation{display:flex;align-items:center;gap:16px;max-width:var(--yp-container);width:100%;padding:12px var(--yp-gutter);margin:0 auto;min-height:84px;box-sizing:border-box}
body.yp-site .yp-game-navigation>.brand{display:inline-flex;align-items:center;gap:8px;margin-right:auto;color:var(--yp-ink);font:400 28px/1.1 var(--yp-brand-font);text-decoration:none}
body.yp-site .yp-game-navigation .brand img{width:32px;height:32px}
body.yp-site .yp-game-navigation+.entry-header{margin-top:0}
body.yp-site[data-yp-page-kind="game-intro"]>header{width:100%;max-width:var(--yp-container);padding:12px var(--yp-gutter);margin:0 auto;min-height:0;display:flex;align-items:center;justify-content:flex-start;gap:16px}
body.yp-site[data-yp-page-kind="game-intro"]>header>.wordmark,body.yp-site[data-yp-page-kind="game-intro"]>header nav :is(a[hreflang],a[data-customer-account]){display:none}
body.yp-site[data-yp-page-kind="game-intro"]>header nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:0}
html[lang^="zh"] body.yp-site .casting-method-option strong>span[lang^="zh"]{display:none}
body.yp-site .yp-language-note{font:400 12px/1.5 var(--yp-font);color:var(--yp-muted);max-width:70ch;margin:12px auto;padding-inline:16px}
@media(max-width:1200px){
 body.yp-site .yp-site-nav[data-journey-nav]{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 8px;padding:8px var(--yp-gutter);min-height:0;border-bottom:1px solid var(--yp-rule)}
 body.yp-site .yp-site-nav .journey-brand-lockup{grid-column:1;grid-row:1}
 body.yp-site .yp-site-nav .yp-language{grid-column:2;grid-row:1}
 body.yp-site .yp-site-nav .journey-menu{grid-column:3;grid-row:1;order:4}
 body.yp-site .yp-site-nav .yp-global-shortcuts{grid-column:1/-1;grid-row:2;justify-content:center;gap:8px}
 body.yp-site .yp-site-nav .yp-global-shortcuts>a{flex:1;max-width:200px}
 body.yp-site .yp-site-nav .journey-links{grid-column:1/-1;grid-row:3;margin:0;justify-content:initial}
 body.yp-site .yp-site-nav .yp-global-shortcuts .customer-account-shortcut{display:inline-flex;grid-column:auto;grid-row:auto}
}
@media(max-width:950px){
 body.yp-site[data-oracle-page]>header[data-yp-global-navigation]{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 8px;min-height:0;padding:8px var(--yp-gutter);border-bottom:1px solid var(--yp-rule)}
 body.yp-site[data-oracle-page]>header[data-yp-global-navigation]>.brand{grid-column:1;grid-row:1}
 body.yp-site[data-oracle-page]>header[data-yp-global-navigation]>.yp-language{grid-column:2;grid-row:1}
 body.yp-site[data-oracle-page]>header[data-yp-global-navigation]>.oracle-menu{grid-column:3;grid-row:1}
 body.yp-site[data-oracle-page]>header[data-yp-global-navigation]>.yp-global-shortcuts{grid-column:1/-1;grid-row:2;justify-content:center;gap:8px}
 body.yp-site[data-oracle-page]>header[data-yp-global-navigation]>.yp-global-shortcuts>a{flex:1;max-width:200px}
 body.yp-site[data-oracle-page]>header[data-yp-global-navigation]>nav{grid-column:1/-1;grid-row:3}
 body.yp-site .yp-game-navigation{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:8px var(--yp-gutter);min-height:0;border-bottom:1px solid var(--yp-rule)}
 body.yp-site .yp-game-navigation>.brand{grid-column:1;grid-row:1}
 body.yp-site .yp-game-navigation>.yp-language{grid-column:2;grid-row:1}
 body.yp-site .yp-game-navigation>.yp-global-shortcuts{grid-column:1/-1;grid-row:2;justify-content:center;gap:8px}
 body.yp-site .yp-game-navigation>.yp-global-shortcuts>a{flex:1;max-width:200px}
}
@media(max-width:640px){
 body.yp-site [data-yp-global-navigation] .yp-global-shortcuts>a{font-size:12px;padding:8px}
 body.yp-site[data-oracle-page]>header[data-yp-global-navigation]>.brand{gap:8px;font-size:23px}
 body.yp-site[data-oracle-page]>header[data-yp-global-navigation]>.brand small{display:none}
 body.yp-site [data-yp-global-navigation] .yp-language{font-size:11px;padding:2px}
 body.yp-site [data-yp-global-navigation] .yp-language :is(button,a){min-height:44px;padding:8px}
 body.yp-site .yp-game-navigation>.brand{font-size:24px}
}