:root{--rail-height:72px;--scene-white:#f6f5f8;--scene-red:#d72323}
.info-copy,.info-sub{white-space:pre-line;font-family:Arial,'Noto Sans Thai','Noto Sans Devanagari','Noto Sans Tamil','Noto Sans SC',sans-serif}
html,body{height:100%;overscroll-behavior:none}
body{overflow:hidden}
.shell{height:calc(100dvh - var(--rail-height));min-height:0;padding:7px 12px 2px;transition:background .35s}
.page{width:min(calc(100vw - 24px),calc((100dvh - var(--rail-height) - 10px)*.5625));height:auto;max-height:calc(100dvh - var(--rail-height) - 10px);aspect-ratio:9/16;flex:0 0 auto;box-shadow:0 0 42px rgba(0,0,0,.4)}
.page[data-layout="landscape"]{aspect-ratio:16/9;width:min(calc(100vw - 24px),calc((100dvh - var(--rail-height) - 10px)*1.7777778));max-width:100vw}
.page[data-portrait-framed="true"]{aspect-ratio:16/9;background:radial-gradient(ellipse at center,#181318 0%,#08070a 57%,#030305 100%)}
.page[data-portrait-framed="true"] .art-stage{width:31.640625%;left:34.1796875%}
.page[data-extra-landscape="true"] .page-art,
.page[data-extra-landscape="true"] .motion-scene,
.page[data-extra-landscape="true"] .interactive-outline,
.page[data-extra-landscape="true"] .brand-reletter-layer,
.page[data-extra-landscape="true"] .v-refraction-layer,
.page[data-extra-landscape="true"] .dynamic-motion,
.page[data-extra-landscape="true"] .subject-focus,
.page[data-extra-landscape="true"] .natural-part,
.page[data-extra-landscape="true"] .hotspots{display:none!important}
.page-art{object-fit:fill;transition:opacity .25s ease}
.page.is-loading .page-art{opacity:.48}
.art-stage{position:absolute;inset:0;overflow:hidden;isolation:isolate;container-type:size}
.extra-landscape-stage{position:absolute;inset:0;z-index:4;pointer-events:none}
.brand-reletter-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.brand-reletter{position:absolute;background:#050506;display:flex;align-items:center;justify-content:flex-start;white-space:nowrap;overflow:visible;letter-spacing:0;line-height:1;color:#e7e7ed}
.brand-reletter span{display:block;line-height:1;white-space:nowrap}
.brand-reletter--plain{font-family:Arial,Helvetica,sans-serif;font-weight:400}
.brand-reletter--plain span{font-weight:400;letter-spacing:.045em}
.brand-reletter--metal{justify-content:center;flex-direction:column;font-family:'Arial Black',Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at center,rgba(4,4,7,.98) 12%,rgba(7,6,10,.96) 66%,transparent 100%);-webkit-backdrop-filter:blur(18px) brightness(.22);backdrop-filter:blur(18px) brightness(.22);}
.brand-reletter--metal span{font-weight:900;font-style:italic;letter-spacing:-.08em;color:transparent;background:linear-gradient(180deg,#f8f9fc 0%,#b3b3bb 19%,#4f4c55 34%,#fefeff 47%,#8b8d95 62%,#d4d5d9 81%,#454750 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 1px rgba(255,255,255,.22))}
.brand-reletter--metal small{display:block;color:#c7c9d1;font-weight:500;letter-spacing:.39em;line-height:1.1}
.brand-art-mask,.brand-art{position:absolute;pointer-events:none}
.brand-art-mask{background:radial-gradient(ellipse at 50% 50%,#000 0%,#000 56%,rgba(0,0,0,.95) 72%,rgba(0,0,0,.3) 91%,transparent 100%);-webkit-backdrop-filter:blur(22px) brightness(.055);backdrop-filter:blur(22px) brightness(.055);-webkit-mask-image:radial-gradient(ellipse at center,#000 0%,#000 62%,rgba(0,0,0,.7) 83%,transparent 99%);mask-image:radial-gradient(ellipse at center,#000 0%,#000 62%,rgba(0,0,0,.7) 83%,transparent 99%)}
.brand-art-mask--pure-black{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
.brand-art-mask--spotlight{background:radial-gradient(ellipse 82% 112% at 50% 118%,#34373e 0%,#15171b 52%,#050608 95%);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:radial-gradient(ellipse 56% 72% at center,#000 0%,#000 64%,rgba(0,0,0,.97) 69%,transparent 100%);mask-image:radial-gradient(ellipse 56% 72% at center,#000 0%,#000 64%,rgba(0,0,0,.97) 69%,transparent 100%)}
.brand-art{overflow:hidden}
.brand-art img{display:block;max-width:none;position:absolute;pointer-events:none;mix-blend-mode:screen}
.brand-art--full img,.brand-art--emblem img{inset:0;width:100%;height:100%;object-fit:fill}
.brand-art--wordmark img{width:106%;height:auto;left:-2.5%;top:-267%;image-rendering:auto;clip-path:inset(60.3% 0 0 0)}
.brand-art--wordmark{clip-path:inset(0 0 0 0);filter:drop-shadow(0 1px 3px rgba(213,199,214,.15))}
.v-refraction-layer{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:normal}
.subject-focus{position:absolute;z-index:3;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .5s cubic-bezier(.18,.75,.25,1);-webkit-mask-image:radial-gradient(ellipse 68% 70% at 50% 49%,#000 44%,rgba(0,0,0,.86) 62%,transparent 94%);mask-image:radial-gradient(ellipse 68% 70% at 50% 49%,#000 44%,rgba(0,0,0,.86) 62%,transparent 94%)}
.subject-focus.visible{opacity:1}
.subject-focus-art{position:absolute;max-width:none!important;object-fit:fill;display:block;transform:scale(1);transition:transform .65s cubic-bezier(.18,.85,.2,1);will-change:transform}
.subject-focus.visible .subject-focus-art{transform:scale(1.035)}
.natural-part{position:absolute;z-index:1;pointer-events:none;overflow:hidden;isolation:isolate;-webkit-mask-image:radial-gradient(ellipse at 50% 46%,#000 46%,rgba(0,0,0,.8) 65%,transparent 97%);mask-image:radial-gradient(ellipse at 50% 46%,#000 46%,rgba(0,0,0,.8) 65%,transparent 97%);will-change:transform}
.natural-part-art{position:absolute;display:block;max-width:none!important;object-fit:fill}
.natural-wheat{animation:wheatBreeze 4.7s cubic-bezier(.42,.05,.56,.96) infinite}
.natural-cow-ear{animation:earTwitch 5.9s ease-in-out infinite}
.natural-cow-tail{animation:tailSwish 5.2s ease-in-out infinite}
@keyframes wheatBreeze{0%,100%{transform:rotate(-1.9deg) skewX(-.5deg)}21%{transform:rotate(.7deg) skewX(.25deg)}44%{transform:rotate(2.3deg) skewX(.8deg)}68%{transform:rotate(.15deg)}84%{transform:rotate(-1.35deg) skewX(-.3deg)}}
@keyframes earTwitch{0%,39%,58%,100%{transform:rotate(0)}43%{transform:rotate(-3.3deg)}47%{transform:rotate(1.8deg)}52%{transform:rotate(-1.3deg)}}
@keyframes tailSwish{0%,100%{transform:rotate(-1.8deg)}24%{transform:rotate(2deg)}38%{transform:rotate(4.1deg)}53%{transform:rotate(.5deg)}79%{transform:rotate(-3.2deg)}}
.page[data-paused="true"] .subject-focus-art{transition-duration:.12s;transform:scale(1)!important}
.page[data-paused="true"] .natural-part,.page[data-inactive="true"] .natural-part{animation-play-state:paused!important}
.page[data-paused="true"] .lit-dust,.page[data-inactive="true"] .lit-dust,.page[data-paused="true"] .pool-bar-pass,.page[data-inactive="true"] .pool-bar-pass{animation-play-state:paused!important}
.lit-dust{opacity:0;animation:litDustDrift var(--dust-time,8s) ease-in-out var(--dust-delay,0s) infinite;filter:drop-shadow(0 0 1.4px rgba(255,255,255,.16))}
@keyframes litDustDrift{0%,100%{opacity:0;transform:translate(0,9px)}22%{opacity:.12}55%{opacity:.25;transform:translate(4px,-7px)}83%{opacity:.06}}
.pool-bar-pass{animation:poolGlint 6.2s linear var(--bar-delay,0s) infinite;opacity:0}
@keyframes poolGlint{0%,7%{opacity:0;transform:translateX(0)}10%{opacity:.55}29%{opacity:.6}37%{opacity:0;transform:translateX(var(--bar-travel,180px))}100%{opacity:0;transform:translateX(var(--bar-travel,180px))}}
.motion-scene[data-custom="false"]{display:none}
.page:not([data-special="vault"]) .motion-scene[data-custom="true"],
.page:not([data-special="vault"]) .interactive-outline{display:none}
.page[data-special="vault"] .dynamic-motion{display:none}
.dynamic-motion{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.dynamic-motion .flow-glow{fill:none;stroke-width:var(--glow-width,12);stroke:var(--flow-color,#f4f4f6);stroke-linecap:round;opacity:.48;filter:url(#dynBlur)}
.dynamic-motion .flow-core{fill:none;stroke-width:var(--core-width,4);stroke:var(--flow-color,#f4f4f6);stroke-linecap:round;opacity:.92}
.dynamic-motion .flow-glow,.dynamic-motion .flow-core{stroke-dasharray:var(--dash,42) var(--gap,125);animation:semanticFlow var(--period-time,1.5s) linear infinite;animation-delay:var(--delay,0s)}
@keyframes semanticFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:var(--travel,-167)}}
.dynamic-motion .signal-node{fill:var(--node-color,#fcfbfe);opacity:.52;filter:url(#dynHalo);transform-box:fill-box;transform-origin:center;animation:signalBreathe var(--node-time,3s) ease-in-out infinite;animation-delay:var(--delay,0s)}
@keyframes signalBreathe{0%,100%{opacity:.18;transform:scale(.7)}45%{opacity:.82;transform:scale(1.28)}}
.dynamic-motion .hero-sheen{fill:url(#dynSheen);opacity:0;animation:heroSheen var(--sheen-time,8s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.dynamic-motion .logo-hero{mix-blend-mode:screen;opacity:.84}
.dynamic-motion .logo-silver-scan{opacity:.98}
.dynamic-motion .logo-red-scan{opacity:.65}
.dynamic-motion .logo-ambient-polish{opacity:.04;animation:logoAmbientPolish 5.8s cubic-bezier(.42,0,.58,1) infinite}
.dynamic-motion .logo-wordmark-polish{mix-blend-mode:screen;opacity:.83}
.dynamic-motion .logo-signature-polish{mix-blend-mode:screen}
.dynamic-motion .signature-hero{opacity:.94}
.dynamic-motion .signature-header{opacity:.78}
.dynamic-motion .signature-silver-pass{opacity:1}
.dynamic-motion .signature-red-pass{opacity:.63}
.dynamic-motion .signature-ambient{opacity:.07;animation:signatureSoftLight 6s cubic-bezier(.42,0,.58,1) infinite}
.dynamic-motion .chrome-noir-red-pass{opacity:.56;mix-blend-mode:screen}
@keyframes signatureSoftLight{0%,100%{opacity:.055}42%{opacity:.22}72%{opacity:.11}}
@keyframes logoAmbientPolish{0%,100%{opacity:.045}39%{opacity:.28}69%{opacity:.11}}
.page[data-paused="true"] .logo-hero,.page[data-inactive="true"] .logo-hero,.page[data-paused="true"] .logo-wordmark-polish,.page[data-inactive="true"] .logo-wordmark-polish,.page[data-paused="true"] .logo-signature-polish,.page[data-inactive="true"] .logo-signature-polish,.page[data-paused="true"] .chrome-noir-red-pass,.page[data-inactive="true"] .chrome-noir-red-pass{opacity:0}
@keyframes heroSheen{0%,8%,100%{opacity:0;transform:translateX(-80px)}25%{opacity:.16}53%{opacity:.4}74%{opacity:0;transform:translateX(250px)}}
.dynamic-motion .focal-halo{fill:url(#dynFocal);opacity:.4;animation:focalBreathe var(--sheen-time,7s) ease-in-out infinite}
@keyframes focalBreathe{0%,100%{opacity:.16}45%{opacity:.58}}
.dynamic-motion .hover-material{opacity:0;transition:opacity .22s ease}
.dynamic-motion .hover-material.active{opacity:1}
.dynamic-motion .hover-material-glow{fill:#f3f1f1;opacity:.18;filter:url(#dynHalo);animation:materialBreathe 2.7s ease-in-out infinite}
.dynamic-motion .hover-material-sweep{opacity:.9}
@keyframes materialBreathe{0%,100%{opacity:.18}50%{opacity:.39}}
@keyframes hoverEdgeFlow{to{stroke-dashoffset:-150}}
.page[data-special="vault"] .edge-line{stroke-dasharray:42 95;animation:hoverEdgeFlow 1.15s linear infinite}
.page[data-special="vault"] .edge-halo{animation:contourBreathe 1.75s ease-in-out infinite}
@keyframes contourBreathe{0%,100%{opacity:.26}50%{opacity:.77}}
.page .hotspots{z-index:4}
.diagram-hotspot{border:0!important;outline:none!important;background:transparent!important;padding:0;border-radius:0;isolation:isolate}
.diagram-hotspot.word{cursor:pointer}
/* All label rectangles are OCR-fitted to the glyphs. Hover belongs precisely
   beneath that heading, never to the bottom of an entire diagram or card. */
.diagram-hotspot.word::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:rgba(240,238,242,.32);opacity:0;transform:scaleX(.87);transform-origin:center;transition:opacity .3s ease,transform .46s cubic-bezier(.16,.8,.2,1);pointer-events:none}
.diagram-hotspot.word::after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(182,30,30,.42) 18%,#fff 50%,rgba(182,29,29,.48) 82%,transparent 100%);background-size:190% 100%;opacity:0;filter:drop-shadow(0 0 3px rgba(255,255,255,.42));pointer-events:none;transition:opacity .36s ease}
.diagram-hotspot.word:hover::before,.diagram-hotspot.word:focus-visible::before,.diagram-hotspot.word:active::before{opacity:1;transform:scaleX(1)}
.diagram-hotspot.word:hover::after,.diagram-hotspot.word:focus-visible::after,.diagram-hotspot.word:active::after{opacity:1;animation:wordUnderline 1.4s ease-in-out infinite alternate}
@keyframes wordGlint{from{transform:translateX(-95%)}to{transform:translateX(95%)}}
@keyframes wordUnderline{from{background-position:100% 0}to{background-position:-100% 0}}
.diagram-hotspot.hero::after{content:"";position:absolute;inset:5%;background:radial-gradient(ellipse,rgba(255,255,255,.085) 0%,rgba(220,220,225,.035) 35%,transparent 73%);opacity:0;transition:opacity .52s cubic-bezier(.16,.8,.24,1);pointer-events:none;filter:blur(9px)}
.diagram-hotspot.hero:hover::after,.diagram-hotspot.hero:focus-visible::after{opacity:1}
.page[data-dialog-open="true"] .dynamic-motion,
.page[data-dialog-open="true"] .v-refraction-layer,
.page[data-dialog-open="true"] .subject-focus,
.page[data-dialog-open="true"] .natural-part{opacity:0!important}
.control-rail{position:fixed;z-index:10;left:0;right:0;bottom:0;min-height:var(--rail-height);padding:10px clamp(12px,2.5vw,36px) max(10px,env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center;border-top:1px solid rgba(207,205,215,.16);background:linear-gradient(180deg,rgba(14,13,17,.94),rgba(3,3,5,.97));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.control-set{display:flex;align-items:center;gap:9px;min-width:0}
.deck-set{justify-self:start}.navigation-set{justify-self:center}.utilities-set{justify-self:end}
.control-set select,.control-button{appearance:none;-webkit-appearance:none;color:#d7d5db;border:1px solid rgba(214,212,222,.22);background:rgba(16,15,20,.55);font:500 10px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.08em;border-radius:3px;padding:10px 11px;white-space:nowrap;cursor:pointer;transition:border-color .2s,color .2s,box-shadow .2s}
.control-set select{max-width:162px;padding-right:17px}
.control-button:hover,.control-button:focus-visible,.control-set select:hover,.control-set select:focus-visible{border-color:rgba(246,238,245,.71);color:#fff;box-shadow:0 0 17px rgba(189,27,27,.2);outline-offset:2px}
.arrow-button{min-width:36px;font-size:16px;padding:5px 9px 8px}
.control-button:disabled{opacity:.22;cursor:default;box-shadow:none}
.navigation-set output{font:500 11px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.18em;color:#e9e7ec;min-width:70px;text-align:center;font-variant-numeric:tabular-nums}
.control-rail .motion-toggle{border-radius:3px;font:500 10px/1.2 Arial,sans-serif;letter-spacing:.08em;opacity:1}
.ratio-button{letter-spacing:.06em;min-width:43px}
.offline-button{color:#c5b4b9}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.toast{position:fixed;left:50%;bottom:calc(var(--rail-height) + 17px);z-index:30;transform:translateX(-50%) translateY(7px);opacity:0;pointer-events:none;padding:12px 18px;border:1px solid rgba(220,219,223,.27);background:rgba(12,11,16,.93);backdrop-filter:blur(15px);color:#d4d2d8;letter-spacing:.06em;line-height:1.5;font-size:12px;transition:opacity .2s,transform .2s;max-width:min(440px,90vw);text-align:center}
.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
body[data-dialog="open"] .control-rail{pointer-events:none;filter:brightness(.53)}
.info-overlay{z-index:15}
.info-panel{max-height:76%;padding:clamp(20px,5%,40px);padding-bottom:clamp(40px,7%,65px);border-bottom:1px solid rgba(182,30,30,.62)}
.info-panel::after{display:none!important}
.info-copy{line-height:1.63}
.info-sub{white-space:pre-line}
@media (max-width:950px){:root{--rail-height:92px}.control-rail{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;row-gap:8px;padding:8px 12px max(7px,env(safe-area-inset-bottom))}.deck-set{grid-column:1}.navigation-set{grid-column:2;justify-self:end}.utilities-set{grid-column:1/-1;justify-self:center}.control-set select,.control-button{font-size:9px;padding:7px 8px}.arrow-button{padding:3px 10px 6px}.control-rail .motion-toggle{font-size:9px}.navigation-set output{font-size:10px}}
@media (max-width:520px){:root{--rail-height:100px}.control-rail{gap:5px 7px;padding:7px 6px max(7px,env(safe-area-inset-bottom))}.control-set{gap:5px}.deck-set select{max-width:121px}.control-set select,.control-button{padding:7px 5px;font-size:8px;letter-spacing:.025em}.navigation-set output{min-width:54px;letter-spacing:.09em}.utilities-set{gap:7px}.control-rail .motion-toggle{font-size:8px}.info-heading{font-size:24px}.info-panel{max-height:82%}}
@media (prefers-reduced-motion:reduce){.dynamic-motion .flow-glow,.dynamic-motion .flow-core,.dynamic-motion .signal-node,.dynamic-motion .hero-sheen,.dynamic-motion .focal-halo{animation-play-state:paused!important}.dynamic-motion .logo-hero,.dynamic-motion .logo-wordmark-polish,.dynamic-motion .logo-signature-polish,.dynamic-motion .chrome-noir-red-pass,.v-refraction-layer,.lit-dust,.pool-bar-pass{opacity:0!important}.natural-part{animation:none!important;transform:none!important}.subject-focus-art{transform:none!important}.word::before,.word::after{animation:none!important}}