/* Direction A: Audi's personal sky, with finance as the first doorway.
   The portrait, routes and guides each have a reserved area. */
body.home-astra{--a-ink:#142f49;--a-copy:#3d546c;--a-line:#9eb4c9;--a-sky:#eaf3fa;--a-accent:#16744e;--a-primary:#e6bf6f;--orb-ink:var(--a-ink);--orb-copy:var(--a-copy);--orb-line:var(--a-line);--orb-sky:var(--a-sky);background:linear-gradient(#d6eafb 0,#f5f8f9 750px,#eaf1f8 100%);color:var(--a-ink);font-family:'AK Thai','Google Sans',Sarabun,sans-serif}
html[data-theme=dark] body.home-astra{--a-ink:#f4f6fc;--a-copy:#bdcde2;--a-line:#455e7e;--a-sky:#0c1b32;--a-accent:#91dfba;background:linear-gradient(#09172d,#10233f 750px,#081326);--orb-ink:var(--a-ink);--orb-copy:var(--a-copy);--orb-line:var(--a-line);--orb-sky:var(--a-sky)}
.home-astra :is(a,button,summary):focus-visible{outline:3px solid var(--a-accent);outline-offset:5px}
.home-astra .cosmos-backdrop{background:none!important}
html:not([data-theme=dark]) .home-astra .cosmos-backdrop>*{display:none}
.home-astra .playground{max-width:1280px;padding:0 40px 40px}
.home-astra .hero-track{height:440px!important}
.home-astra .stage{position:relative!important;top:auto!important;height:440px!important;min-height:0!important;overflow:visible;isolation:isolate}
.home-astra #field{display:none}
.home-astra .stage-caption{top:18px;left:0;right:0;font-size:15px;color:var(--a-ink)}
.home-astra .caption-right{font-size:14px;color:var(--a-copy)}
.home-astra .wordmark{position:absolute;top:62px;left:50%;width:max-content;max-width:100%;font:800 clamp(56px,8vw,96px)/1 'AK Thai','Google Sans',Outfit,Sarabun,sans-serif!important;letter-spacing:-.04em!important;transform:translateX(-50%)!important;translate:0 0!important;z-index:1;opacity:1}
.home-astra .wordmark-front{color:var(--a-ink)!important;text-shadow:none!important;transform:none!important;filter:none!important;opacity:1!important}
.home-astra .letter-k{color:var(--a-accent)!important}
.home-astra .disc{width:310px!important;height:310px!important;top:auto!important;bottom:15px;left:50%;transform:translateX(-50%)!important;z-index:0;opacity:1;background:linear-gradient(145deg,#d0e5d8,#a5cfbd)!important;box-shadow:none!important;border-radius:50%}
html[data-theme=dark] .home-astra .disc{background:linear-gradient(145deg,#244b54,#163345)!important}
.home-astra .disc-inner{border:0!important}
.home-astra .portrait-wrap{position:absolute;width:335px!important;height:335px!important;bottom:0!important;left:50%;transform:translateX(-50%)!important;translate:0 0!important;scale:1!important;z-index:2;pointer-events:none}
.home-astra .portrait{width:100%;height:100%;object-fit:contain;transform:none!important;filter:drop-shadow(0 9px 6px #07152b20)}
.home-astra .astra-intro{position:absolute;left:2%;bottom:70px;width:230px;z-index:3}
.home-astra .astra-intro p{font:400 22px/1.65 'AK Thai','Google Sans',Sarabun,sans-serif;margin:0 0 15px;color:var(--a-copy)}
.home-astra .astra-intro strong{font-weight:500;color:var(--a-ink)}
.home-astra .astra-intro a{display:inline-flex;align-items:center;gap:30px;min-height:44px;font-size:16px;color:var(--a-ink);border-bottom:1px solid var(--a-line);text-decoration:none}
.home-astra .astra-intro a:hover{color:var(--a-accent)}
.home-astra .astra-guides{position:absolute!important;left:auto!important;right:0;top:auto!important;bottom:26px!important;width:246px!important;z-index:3;display:flex;flex-direction:column;align-items:center}
.home-astra .guide-caption{font:400 14px/1.5 'AK Thai','Google Sans',Sarabun,sans-serif;color:var(--a-copy);text-align:center;min-height:42px;margin:0;max-width:240px}
.home-astra .guide-cast{display:flex;align-items:end;height:160px;width:240px}
.home-astra .guide-character{background:transparent;border:0;padding:0;width:120px;height:156px;cursor:pointer;display:grid;place-items:center;border-radius:8px;transition:transform .25s}
.home-astra .guide-character img{width:145px;height:156px;object-fit:contain;max-width:none;pointer-events:none}
.home-astra .guide-character:first-child img{width:123px}
.home-astra .guide-character:hover{transform:translateY(-5px) rotate(-3deg)}
.home-astra .guide-character:last-child:hover{transform:translateY(-5px) rotate(3deg)}
.home-astra .guide-style:not(.aku-control){border:1px solid var(--a-line);border-radius:99px;padding:0 16px;min-height:44px;background:transparent;color:var(--a-ink);font:400 14px 'AK Thai','Google Sans',Sarabun,sans-serif;cursor:pointer;transition:background .2s}
.home-astra .guide-style:not(.aku-control):hover{background:var(--orb-halo)}
.home-astra .astra-guides[data-style=pixel] img{image-rendering:pixelated}
.home-astra .astra-weather{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.home-astra .astra-sun{position:absolute;width:64px;height:64px;border-radius:50%;background:#f4cd71;top:61px;left:5%;box-shadow:0 0 0 14px #f4cd7120}
.home-astra .astra-cloud{position:absolute;width:125px;height:28px;top:120px;left:9%;border-radius:50%;background:#ffffffa8;box-shadow:28px -12px 0 -2px #ffffffa8,-18px -8px 0 -4px #ffffffa8}
.home-astra .cloud-two{left:auto;right:9%;top:100px;scale:.65}
.home-astra .astra-star{display:none}
html[data-theme=dark] .home-astra :is(.astra-sun,.astra-cloud){display:none}
html[data-theme=dark] .home-astra .astra-star{display:block;position:absolute;top:110px;left:8%;font-size:22px;color:#e6bf6f}
.home-astra .celestial-northstar{top:58px!important;right:7%!important;scale:.6;z-index:4}
html:not([data-theme=dark]) .home-astra .celestial-northstar{display:none}
.home-astra .worlds{display:grid!important;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:18px;padding:0!important;margin:0!important;border-top:1px solid var(--a-line);align-items:stretch}
.home-astra .world{margin:0!important;padding:24px 8px!important;min-height:124px!important;justify-content:flex-start!important;gap:0;translate:0 0!important;transition:background .25s!important}
.home-astra .world::before,.home-astra .world::after{display:none!important}
.home-astra .world-title{font:500 18px/1.4 'AK Thai','Google Sans',Sarabun,sans-serif!important;padding:0 24px 0 0!important;color:var(--a-ink)!important;white-space:normal!important}
.home-astra .world-sub{font:400 14px/1.65 'AK Thai','Google Sans',Sarabun,sans-serif!important;margin-top:8px!important;color:var(--a-copy)!important}
.home-astra .world-arrow{position:absolute;right:0!important;top:24px!important;bottom:auto;width:24px!important;height:24px!important;font-size:22px!important;border:0!important;background:none!important;color:var(--a-ink)!important}
.home-astra .world-finance{padding:20px 22px!important;background:#e6bf6f!important;border-radius:0 0 14px 14px!important;box-shadow:0 4px 0 #af8644!important}
.home-astra .world-finance :is(.world-title,.world-sub,.world-arrow){color:#172d39!important}
.home-astra .world-finance .world-title{font-size:22px!important}
.home-astra .world-finance .world-arrow{right:18px!important;top:23px!important}
.home-astra .finance-enter{font-size:14px;color:#172d39;border-bottom:1px solid #806737;margin-top:10px;width:max-content}
.home-astra .world:not(.world-finance):hover{background:color-mix(in srgb,var(--orb-halo) 40%,transparent)!important}
.home-astra .world-finance:hover{background:#f0cf8a!important}
.home-astra .world:active{translate:0 2px!important}
.home-astra .astra-reading{padding:60px 32px 70px;background:transparent!important}
.home-astra .start-layout{max-width:1080px;grid-template-columns:.9fr 1.3fr;padding-top:35px;gap:70px;align-items:center}
.home-astra .start-intro{position:relative;min-height:245px;padding-right:120px}
.home-astra .start-intro h2{font:500 clamp(28px,3.2vw,42px)/1.35 'AK Thai','Google Sans',Sarabun,sans-serif;color:var(--a-ink);margin:15px 0}
.home-astra .start-intro p{font:400 16px/1.8 'AK Thai','Google Sans',Sarabun,sans-serif;color:var(--a-copy);margin:0}
.home-astra .ex-note{color:var(--a-copy);font-size:14px}
.home-astra .reading-guide{position:absolute;right:-18px;bottom:0;width:160px;height:180px;object-fit:contain;rotate:5deg}
.home-astra .route-path{padding:22px 0;color:var(--a-ink);gap:18px}
.home-astra .route-path h3{color:var(--a-ink);font:500 20px/1.4 'AK Thai','Google Sans',Sarabun,sans-serif}
.home-astra .route-path p{color:var(--a-copy);font:400 15px/1.7 'AK Thai','Google Sans',Sarabun,sans-serif}
.home-astra .route-stamp{background:transparent!important;box-shadow:none!important;border:0!important;font-size:26px;min-width:44px}
.home-astra .home-shelf{padding-top:45px;padding-bottom:55px}
.home-astra :is(.home-shelf,.ex-lab,.ex-participate,.home-connect,.home-community,.coffee-support){--ex-ink:var(--a-ink);--ex-copy:var(--a-copy)}
.home-astra .ex-lab{padding-block:60px 75px}
.home-astra .lab-intro{grid-template-columns:1fr 150px;max-width:800px}
.home-astra .lab-intro h2{font-size:clamp(28px,3.4vw,42px)}
.home-astra .lab-mascot{width:150px;height:165px}
.home-astra .lab-layout{gap:25px}
.home-astra .lab-tool summary{min-height:190px}
.home-astra .ex-participate{padding-block:65px}
.home-astra .home-connect{padding-block:55px}
.home-astra .coffee-support{margin-block:35px 60px;padding-block:30px}
.home-astra .coffee-qr{max-width:150px}
.home-astra .coffee-copy h2{font-size:28px}
.home-astra .coffee-copy p{font-size:16px}
.home-astra .deepdive-heading{margin-top:55px}
.home-astra :is(.shelf-heading h2,.community-title){color:var(--a-ink)}
.home-astra .home-community{padding-block:45px}
.home-astra .community-dock-card{max-width:260px;margin:auto}
.home-astra :is(.guide-character,.world,.route-path){-webkit-tap-highlight-color:transparent}
@media(min-width:1500px){.home-astra .hero-track,.home-astra .stage{height:480px!important}.home-astra .portrait-wrap{width:375px!important;height:375px!important}.home-astra .disc{width:350px!important;height:350px!important}}
@media(max-width:1000px){.home-astra .playground{padding-inline:24px}.home-astra .astra-intro{left:0;width:190px}.home-astra .astra-intro p{font-size:18px}.home-astra .astra-guides{width:200px!important;right:-10px}.home-astra .guide-cast{width:200px}.home-astra .guide-character{width:100px}.home-astra .guide-character img{width:122px;height:145px}.home-astra .guide-character:first-child img{width:105px}.home-astra .worlds{gap:12px;grid-template-columns:1.45fr 1fr 1fr 1fr}.home-astra .world-title{font-size:16px!important}.home-astra .world-finance .world-title{font-size:19px!important}.home-astra .world-sub{font-size:13px!important}.home-astra .start-layout{gap:35px}.home-astra .start-intro{padding-right:70px}.home-astra .reading-guide{width:125px;right:-30px}}
@media(max-width:700px){
 .home-astra .playground{padding:0 20px 25px}
 .home-astra .hero-track,.home-astra .stage{height:345px!important}
 .home-astra .stage-caption{top:14px;font-size:14px;justify-content:center}.home-astra .caption-right{display:none}
 .home-astra .wordmark{top:53px;font-size:clamp(39px,10.7vw,65px)!important;letter-spacing:-.04em!important}
 .home-astra .portrait-wrap{height:224px!important;width:224px!important;bottom:35px!important}
 .home-astra .disc{width:204px!important;height:204px!important;bottom:42px!important}
 .home-astra .astra-intro{left:0;bottom:0;width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px}
 .home-astra .astra-intro p{font-size:13px;line-height:1.5;margin:0}.home-astra .astra-intro p br{display:none}.home-astra .astra-intro strong{display:block;font-size:14px}
 .home-astra .astra-intro a{font-size:14px;gap:8px;flex-shrink:0}
 .home-astra .astra-guides{bottom:66px!important;right:-12px;width:84px!important}
 .home-astra .guide-caption{position:absolute;right:6px;bottom:155px;max-width:105px;width:105px;min-height:0;font-size:11px;line-height:1.5;text-align:center}
 .home-astra .guide-cast{width:85px;height:142px;flex-direction:column;align-items:center}
 .home-astra .guide-character{width:72px;height:76px}.home-astra .guide-character img,.home-astra .guide-character:first-child img{width:84px;height:80px}
 .home-astra .guide-style:not(.aku-control){font-size:11px;padding:0 8px;min-height:44px;white-space:nowrap}
 .home-astra .astra-sun{width:35px;height:35px;top:112px;left:3%;box-shadow:0 0 0 8px #f4cd7120}.home-astra .astra-cloud{top:160px;left:-35px;scale:.6}.home-astra .cloud-two{display:none}
 .home-astra .celestial-northstar{top:96px!important;right:auto!important;left:3%;scale:.5}
 html[data-theme=dark] .home-astra .astra-star{display:none}
 .home-astra .worlds{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px;margin-top:12px!important;border:0}
 .home-astra .world-finance{grid-column:1/-1;min-height:99px!important;padding:16px 20px!important;border-radius:12px!important;display:grid!important;grid-template-columns:1fr auto;align-content:center}
 .home-astra .world-finance .world-title{font-size:21px!important;grid-column:1}.home-astra .world-finance .world-sub{font-size:13px!important;margin-top:5px!important;grid-column:1}.home-astra .world-finance .world-arrow{right:16px!important;top:18px!important}
 .home-astra .finance-enter{display:none}
 .home-astra .world:not(.world-finance){min-height:100px!important;padding:24px 0 12px!important;border-bottom:1px solid var(--a-line)!important}
 .home-astra .world:not(.world-finance) .world-title{font-size:14px!important;line-height:1.5;padding:0!important}
 .home-astra .world:not(.world-finance) .world-sub{display:none}
 .home-astra .world:not(.world-finance) .world-arrow{top:auto!important;bottom:6px!important;right:0!important;font-size:18px!important}
 .home-astra .astra-reading{padding:30px 22px 40px}.home-astra .start-layout{grid-template-columns:1fr;gap:20px;padding-top:30px}
 .home-astra .start-intro{min-height:150px;padding-right:110px}.home-astra .start-intro h2{font-size:29px;margin:12px 0}.home-astra .start-intro p{font-size:14px}.home-astra .reading-guide{width:130px;height:150px;right:-12px;bottom:0}
 .home-astra .route-path{padding:20px 0;gap:12px}.home-astra .route-path h3{font-size:18px}.home-astra .route-path p{font-size:14px}.home-astra .route-stamp{font-size:24px}
 .home-astra .home-shelf{padding-top:30px;padding-bottom:35px}.home-astra .deepdive-heading{margin-top:35px}
 .home-astra .ex-lab{padding-block:40px 50px}.home-astra .lab-intro{grid-template-columns:1fr 90px;gap:10px}.home-astra .lab-mascot{width:95px;height:125px}.home-astra .lab-intro h2{font-size:28px}.home-astra .lab-tool summary{min-height:160px}
 .home-astra .ex-participate{padding-block:40px}.home-astra .home-connect{padding-block:35px}.home-astra .coffee-support{margin-block:25px 40px}.home-astra .coffee-qr{max-width:130px}.home-astra .coffee-copy h2{font-size:24px}
}
@media(max-width:360px){.home-astra .playground{padding-inline:16px}.home-astra .portrait-wrap{width:202px!important;height:202px!important}.home-astra .disc{width:190px!important;height:190px!important}.home-astra .astra-guides{right:-15px}.home-astra .guide-caption{font-size:10px;right:0}.home-astra .worlds{gap:0 9px}.home-astra .world:not(.world-finance) .world-title{font-size:13px!important}}
@media(prefers-reduced-motion:reduce){.home-astra *, .home-astra *::before,.home-astra *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.home-astra.paused *,html[data-motion=paused] .home-astra *{animation-play-state:paused!important;transition:none!important}
/* Ambient art stays in the first scene; reading areas have no crossing trails. */
body.home-astra .cosmos-backdrop{position:absolute!important;inset:0 0 auto!important;height:500px;overflow:hidden}
body.home-astra .cosmos-shooting-star{display:none!important}
.astra-guide-feedback{display:none}
/* Reset structural values inherited from pre-A Home generations. */
html[data-theme] body.home-astra .stage{background:transparent!important;border:0!important;box-shadow:none!important}
html[data-theme] body.home-astra .worlds .world{position:relative;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--a-ink)!important;overflow:visible!important;transform:none!important;align-items:flex-start!important;margin:0!important}
html[data-theme] body.home-astra .worlds .world :is(.world-title,.world-sub){width:100%!important;max-width:none!important;min-width:0!important;color:var(--a-ink)!important;white-space:normal!important;text-wrap:pretty!important}
html[data-theme] body.home-astra .worlds .world .world-sub{color:var(--a-copy)!important}
html[data-theme] body.home-astra :is(.ex-lab,.home-shelf,.ex-conversation,.lab-workbench){background:transparent!important;box-shadow:none!important;border-radius:0!important}
html[data-theme] body.home-astra .lab-workbench{border:0!important;padding:0!important;rotate:0deg!important;color:var(--a-ink)!important}
html[data-theme] body.home-astra .lab-workbench-top{color:var(--a-copy)!important}
body.home-astra .worlds{min-height:0!important;background:transparent!important}
body.home-astra .worlds .world{grid-column:auto;min-height:136px!important}
html[data-theme] body.home-astra .worlds .world.world-finance{background:#c9ead8!important;box-shadow:0 4px 0 #6d9f85!important;border-radius:0 0 14px 14px!important}
html[data-theme=dark] body.home-astra .worlds .world.world-finance{background:#183e35!important;box-shadow:0 4px 0 #396a58!important}
html[data-theme=dark] body.home-astra .worlds .world-finance :is(.world-title,.world-sub,.world-arrow,.finance-enter){color:#e6f8ee!important}
html[data-theme] body.home-astra .worlds .world.world-finance:hover{background:#b3dfc9!important}
html[data-theme=dark] body.home-astra .worlds .world.world-finance:hover{background:#235142!important}
body.home-astra .astra-guides{inset:auto 0 26px auto!important}
body.home-astra .start-intro{display:block}
body.home-astra{--a-disc:#b6d9c7}
body.home-astra[data-world=knowledge]{--a-disc:#b6d2ef}
body.home-astra[data-world=focus]{--a-disc:#bce0d9}
body.home-astra[data-world=interests]{--a-disc:#e1c5dc}
body.home-astra[data-world=about]{--a-disc:#d4c7e8}
html[data-theme=dark] body.home-astra{--a-disc:#204c46}
html[data-theme=dark] body.home-astra[data-world=knowledge]{--a-disc:#224d7c}
html[data-theme=dark] body.home-astra[data-world=focus]{--a-disc:#235353}
html[data-theme=dark] body.home-astra[data-world=interests]{--a-disc:#583754}
html[data-theme=dark] body.home-astra[data-world=about]{--a-disc:#443c6d}
html[data-theme] body.home-astra .disc{background-color:var(--a-disc)!important;background-image:linear-gradient(145deg,#ffffff16,transparent)!important;transition:background-color 350ms ease-out}
html[data-motion=paused] body.home-astra .disc,body.home-astra.paused .disc{transition:none}
@media(prefers-reduced-motion:reduce){html[data-theme] body.home-astra .disc{transition:none}}
@media(max-width:700px){
 body.home-astra .cosmos-backdrop{height:350px}
 .astra-guide-feedback:not([hidden]){display:block;position:fixed;bottom:18px;left:18px;right:18px;z-index:100;background:var(--a-sky);color:var(--a-ink);border:1px solid var(--a-line);border-radius:12px;padding:13px 16px;font:400 14px/1.6 'AK Thai','Google Sans',Sarabun,sans-serif;pointer-events:none}
 html[data-theme] body.home-astra .worlds .world.world-finance{grid-column:1/-1!important;min-height:99px!important;border-radius:12px!important}
 body.home-astra .worlds .world:not(.world-finance){grid-column:auto!important;min-height:90px!important}
 body.home-astra .astra-guides{inset:auto -9px 91px -9px!important;width:auto!important;height:93px;pointer-events:none}
 body.home-astra .guide-cast{width:100%;height:90px;flex-direction:row;justify-content:space-between;align-items:center}
 body.home-astra .guide-character{width:76px;height:90px;pointer-events:auto}
 body.home-astra .guide-character img,body.home-astra .guide-character:first-child img{width:84px;height:91px}
 body.home-astra .guide-caption{display:none}
 body.home-astra .guide-style:not(.aku-control){position:absolute;right:0;bottom:-31px;font-size:11px;min-height:44px;pointer-events:auto}
 body.home-astra .astra-intro{bottom:0}
 body.home-astra .astra-intro a{margin-right:0}
 body.home-astra .portrait-wrap{bottom:55px!important}
 body.home-astra .disc{bottom:62px!important}
}
/* Orbit repair: the portrait masks the rings; no trail enters reading sections. */
body.home-astra .playground{position:relative}
.home-astra .astra-orbits{position:absolute;left:50%;bottom:15px;width:360px;height:310px;transform:translateX(-50%);z-index:1;pointer-events:none;color:color-mix(in srgb,var(--a-disc) 65%,var(--a-ink))}
.home-astra .astra-orbit{position:absolute;inset:70px -26px;border:1px solid currentColor;border-radius:50%;opacity:.52;transform:rotate(-24deg)}
.home-astra .astra-ring-two{inset:14px 74px;transform:rotate(32deg);opacity:.34}
.home-astra .astra-ring-three{inset:26px 38px;transform:rotate(-38deg);opacity:.23}
.home-astra .astra-orbit i{position:absolute;left:12%;top:8%;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor;animation:astra-comet 16s linear infinite;offset-path:ellipse(50% 50%);offset-distance:0%;offset-anchor:center;inset:0 auto auto 0}
.home-astra .astra-ring-two i{animation-duration:23s;animation-delay:-9s;width:5px;height:5px}
@keyframes astra-comet{to{offset-distance:100%}}
.home-astra .guide-character{overflow:hidden;align-self:end}
.home-astra .astra-guides[data-style=chibi] .guide-character{height:132px;position:relative;mask-image:linear-gradient(#000 0 88%,transparent 100%)}
.home-astra .astra-guides[data-style=chibi] .guide-character img{position:absolute;width:150px;height:158px;top:-4px;left:50%;transform:translateX(-50%);object-fit:contain}
.home-astra .astra-guides[data-style=chibi] [data-character=poojang] img{width:205px;height:205px;top:-8px}
.home-astra .astra-guides[data-style=pixel] .guide-character img{width:140px;height:156px;object-fit:contain}
.home-astra .astra-guides[data-style=pixel] [data-character=poojang] img{width:155px;height:162px}
.home-astra .preview-controls[hidden],.home-astra .world-preview[hidden],.home-astra .preview-unavailable[hidden]{display:none!important}
.home-astra .preview-controls{display:none}
.home-astra .world-preview{position:absolute;left:58px;top:180px;width:300px;margin:0;z-index:4;color:var(--a-ink);background:var(--a-sky);border:1px solid var(--a-line);border-radius:12px;overflow:hidden}
.home-astra .preview-image-wrap{position:relative;aspect-ratio:1.6;background:var(--a-sky)}
.home-astra .preview-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;aspect-ratio:1.6}
.home-astra .preview-unavailable{padding:24px 18px;font:400 14px/1.6 'AK Thai','Google Sans',Sarabun,sans-serif}
.home-astra .world-preview figcaption{display:flex;align-items:center;gap:12px;padding:12px 14px;position:relative}
.home-astra .world-preview strong{font:500 16px/1.5 'AK Thai','Google Sans',Sarabun,sans-serif;display:block}
.home-astra .preview-note{font:400 11px/1.5 'AK Thai','Google Sans',Sarabun,sans-serif;color:var(--a-copy);display:block}
.home-astra .preview-enter{font:400 14px 'AK Thai','Google Sans',Sarabun,sans-serif;color:var(--a-ink);margin-left:auto;white-space:nowrap;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:4px}
.home-astra .preview-close{position:absolute;top:6px;right:6px;min-width:44px;min-height:44px;border:0;border-radius:50%;background:var(--a-sky);color:var(--a-ink);cursor:pointer;transform:translateY(-100%)}
.home-astra[data-preview-open=true] .astra-intro{visibility:hidden}
.home-astra[data-orbit-paused=true] .astra-orbit i{animation-play-state:paused}
@media(max-width:1100px) and (min-width:701px){.home-astra .world-preview{left:36px;top:190px;width:230px}.home-astra .preview-note{font-size:10px}.home-astra .world-preview figcaption{gap:5px;padding:8px}.home-astra .world-preview strong{font-size:14px}}
@media(max-width:700px){
 .home-astra .astra-orbits{bottom:62px;width:240px;height:204px}.home-astra .astra-orbit{inset:44px -5px}.home-astra .astra-ring-two{inset:4px 52px}.home-astra .astra-ring-three{inset:18px 27px}
 .home-astra .astra-guides[data-style=chibi] .guide-character{height:83px}
 .home-astra .astra-guides[data-style=chibi] .guide-character img{width:98px;height:104px;top:-2px}
 .home-astra .astra-guides[data-style=chibi] [data-character=poojang] img{width:132px;height:132px;top:-5px}
 .home-astra .astra-guides[data-style=pixel] .guide-character img{width:84px;height:91px}.home-astra .astra-guides[data-style=pixel] [data-character=poojang] img{width:94px;height:98px}
 .home-astra .preview-controls{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;padding-top:8px;font:400 12px 'AK Thai','Google Sans',Sarabun,sans-serif;color:var(--a-copy)}
 .home-astra .preview-controls>span{flex-basis:100%;padding-top:4px}
 .home-astra .preview-controls button:not(.aku-control){border:0;border-bottom:1px solid transparent;padding:0 2px;min-height:44px;background:none;color:var(--a-ink);font:400 13px 'AK Thai','Google Sans',Sarabun,sans-serif;cursor:pointer}
 .home-astra .preview-controls button:not(.aku-control)[aria-expanded=true]{border-bottom-color:var(--a-accent);color:var(--a-accent)}
 .home-astra .world-preview{position:relative;left:auto;top:auto;width:100%;margin:10px 0 0}
 .home-astra[data-preview-open=true] .astra-intro{visibility:visible}
}
@media(prefers-reduced-motion:reduce){.home-astra .astra-orbit i{animation:none!important}}
/* Preserve antennae and hands outside each optical body box. Only the lower
   Poojang torso fades in sticker mode to match Kungki's existing bust framing. */
.home-astra .guide-character{overflow:visible}
.home-astra .astra-guides[data-style=chibi] .guide-character{mask-image:none}
.home-astra .astra-guides[data-style=chibi] [data-character=poojang] img{mask-image:linear-gradient(#000 0 58%,transparent 66%)}
.home-astra .preview-image{object-fit:contain}

/* Audi's authored Home restored, 18 Oct 2026: two crossing ellipses,
   parody ticket, individual worlds, and matching cast windows. */
html[data-theme] body.home-astra .astra-orbits{inset:0; width:auto;height:auto;transform:none;z-index:0;overflow:visible}
html[data-theme] body.home-astra .astra-orbit{inset:auto;left:50%;top:45%;width:600px;height:600px;aspect-ratio:1;border:1px solid var(--a-line);transform:translate(-50%,-39%) rotate(-25deg) scaleY(.38);opacity:.85}
html[data-theme] body.home-astra .astra-ring-two{width:650px;height:650px;transform:translate(-50%,-35%) rotate(55deg) scaleY(.42);opacity:.6}
html[data-theme] body.home-astra .astra-orbit i{width:12px;height:12px;background:var(--a-accent);box-shadow:0 0 8px var(--a-accent)}
html[data-theme] body.home-astra .astra-ring-two i{background:#da8a9b;animation-duration:22s}
html[data-theme] body.home-astra .chrollo-card{display:flex!important;position:absolute!important;left:auto!important;right:0!important;top:190px!important;bottom:auto!important;width:245px!important;min-height:162px;z-index:3;transform:none!important;rotate:-4deg;opacity:1!important;visibility:visible;padding:16px!important}
html[data-theme] body.home-astra .astra-guides{left:0!important;right:auto!important;bottom:25px!important;top:auto!important;width:246px!important;height:auto;pointer-events:auto;gap:10px}
html[data-theme] body.home-astra .guide-cast{width:234px;height:112px;gap:10px;align-items:center;justify-content:center}
html[data-theme] body.home-astra .guide-character{position:relative!important;width:112px!important;height:112px!important;min-width:0;overflow:hidden!important;mask-image:none!important;flex:none;border:2px solid var(--a-line);border-radius:50%;background:color-mix(in srgb,var(--a-disc) 45%,var(--a-sky));align-self:center}
html[data-theme] body.home-astra .astra-guides[data-style=chibi] .guide-character img{position:absolute;width:132px!important;height:143px!important;top:-4px!important;left:50%!important;transform:translateX(-50%)!important;mask-image:none!important;object-fit:contain}
html[data-theme] body.home-astra .astra-guides[data-style=chibi] [data-character=poojang] img{width:177px!important;height:177px!important;top:-8px!important}
html[data-theme] body.home-astra .astra-guides[data-style=pixel] .guide-character img{position:static!important;transform:none!important;width:100px!important;height:108px!important;mask-image:none!important;object-fit:contain}
html[data-theme] body.home-astra .guide-style:not(.aku-control){position:static!important;min-height:44px;flex:none;margin:0;transform:none;pointer-events:auto}
html[data-theme] body.home-astra .guide-caption{display:block;font-size:13px;min-height:20px;margin:0}
html[data-theme] body.home-astra .worlds .world:not(.world-finance){border-top:4px solid var(--world-edge)!important;border-radius:0 0 12px 12px!important;padding:20px 14px!important;background:var(--world-bg)!important}
.home-astra .world-knowledge{--world-edge:#477fc1;--world-bg:#deebfa}
.home-astra .world-focus{--world-edge:#3b948b;--world-bg:#ddf0e9}
.home-astra .world-interests{--world-edge:#b9699b;--world-bg:#f1e1ed}
html[data-theme=dark] .home-astra .world-knowledge{--world-edge:#82b3f0;--world-bg:#19324e}
html[data-theme=dark] .home-astra .world-focus{--world-edge:#7cc8b9;--world-bg:#163b3b}
html[data-theme=dark] .home-astra .world-interests{--world-edge:#d99bc4;--world-bg:#3c2845}
html[data-theme] body.home-astra .worlds .world:not(.world-finance) .world-arrow{right:8px!important}
html[data-theme] body.home-astra .start-intro{display:block;min-height:0;padding:0}
html[data-theme] body.home-astra .route-preview{display:block;width:100%!important;max-width:380px;margin:22px 0 0}
html[data-theme] body.home-astra .route-preview .preview-body{min-height:190px;color:#21374d}
html[data-theme=dark] body.home-astra .route-preview .preview-body{background:#20334f;color:#eef4ff}
html[data-theme=dark] body.home-astra .route-preview :is(.preview-title,.preview-soon){color:#d7e5f5}
html[data-theme=dark] body.home-astra .lab-tool{background:#182b40!important;border-color:#52647a!important;box-shadow:0 4px 0 #071222!important;color:var(--a-ink)}
html[data-theme=dark] body.home-astra .lab-tool::before{background:#263d55!important;border-color:#52647a!important}
html[data-theme=dark] body.home-astra .lab-tool :is(summary,strong,small,.tool-detail,.tool-detail p,.tool-detail>span){color:var(--a-ink)!important}
html[data-theme=dark] body.home-astra .lab-tool small{color:var(--a-copy)!important}
@media(max-width:1100px) and (min-width:701px){
 html[data-theme] body.home-astra .astra-orbit{width:510px;height:510px}
 html[data-theme] body.home-astra .astra-ring-two{width:560px;height:560px}
 html[data-theme] body.home-astra .chrollo-card{width:205px!important;right:-8px!important;padding:10px!important}
 html[data-theme] body.home-astra .astra-guides{left:-12px!important;width:210px!important}
 html[data-theme] body.home-astra .guide-cast{width:196px;height:94px;gap:8px}
 html[data-theme] body.home-astra .guide-character{width:94px!important;height:94px!important}
}
@media(max-width:1024px){
 body.home-astra .ak-shell .ak-global .ak-controls .aknav-burger{display:inline-flex!important;visibility:visible!important;opacity:1!important;min-width:44px;min-height:44px}
 body.home-astra .ak-shell .ak-worlds{display:none!important}
 body.home-astra{--ak-shell-height:66px}
}
/* The current-route star has its own space after the label. */
html[data-theme] body.home-astra .ak-shell .ak-worlds .aknav-link[aria-current=page]{padding-right:30px!important}
@media(max-width:700px){
 html[data-theme] body.home-astra .hero-track,html[data-theme] body.home-astra .stage{height:450px!important}
 html[data-theme] body.home-astra .portrait-wrap{bottom:151px!important;width:224px!important;height:224px!important}
 html[data-theme] body.home-astra .disc{bottom:158px!important}
 html[data-theme] body.home-astra .astra-orbit{top:30%;width:350px;height:350px}
 html[data-theme] body.home-astra .astra-ring-two{width:380px;height:380px}
 html[data-theme] body.home-astra .chrollo-card{top:auto!important;bottom:17px!important;left:0!important;right:auto!important;width:47%!important;min-height:112px;max-height:126px;padding:9px!important;gap:5px;rotate:-3deg}
 html[data-theme] body.home-astra .chrollo-card .ticket-visual{width:42px;flex:0 0 42px}
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame{width:42px;height:70px}
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait{width:42px;height:70px;object-fit:cover}
 html[data-theme] body.home-astra .chrollo-card .ticket-book-prop{display:none}
 html[data-theme] body.home-astra .chrollo-card strong{font-size:15px!important}
 html[data-theme] body.home-astra .chrollo-card :is(small,.mini-caption){font-size:10px!important}
 html[data-theme] body.home-astra .chrollo-badge{font-size:7px!important}
 html[data-theme] body.home-astra .chrollo-card .profile-arrow{display:none}
 html[data-theme] body.home-astra .astra-guides{left:auto!important;right:0!important;bottom:8px!important;width:50%!important;gap:7px;height:auto}
 html[data-theme] body.home-astra .guide-cast{width:100%;height:78px;gap:5px}
 html[data-theme] body.home-astra .guide-character{width:75px!important;height:75px!important}
 html[data-theme] body.home-astra .astra-guides[data-style=chibi] .guide-character img{width:88px!important;height:95px!important;top:-3px!important}
 html[data-theme] body.home-astra .astra-guides[data-style=chibi] [data-character=poojang] img{width:118px!important;height:118px!important;top:-5px!important}
 html[data-theme] body.home-astra .astra-guides[data-style=pixel] .guide-character img{width:66px!important;height:72px!important}
 html[data-theme] body.home-astra .guide-caption{font-size:10px;line-height:1.3;min-height:13px}
 html[data-theme] body.home-astra .guide-style:not(.aku-control){font-size:11px;padding-inline:10px;min-height:44px}
 html[data-theme] body.home-astra .worlds .world:not(.world-finance){padding:13px 8px!important;min-height:86px!important}
 html[data-theme] body.home-astra .worlds .world:not(.world-finance) .world-title{font-size:13px!important;padding-right:0!important}
 html[data-theme] body.home-astra .worlds .world:not(.world-finance) .world-arrow{display:none}
 html[data-theme] body.home-astra .start-layout{gap:20px;padding-top:0}
 html[data-theme] body.home-astra .route-preview{max-width:none;margin-top:15px}
 html[data-theme] body.home-astra .route-preview .preview-body{min-height:135px}
 html[data-theme] body.home-astra .route-preview .guide-label{font-size:12px}
 html[data-theme] body.home-astra .conversation-layout{gap:24px;padding-inline:16px}
 html[data-theme] body.home-astra .ex-conversation{padding-block:32px!important}
 html[data-theme] body.home-astra .conversation-choice h2{font-size:25px;line-height:1.45;margin:12px 0}
 html[data-theme] body.home-astra .poll-kicker [data-ak-px]{width:28px!important;height:28px!important}
 html[data-theme] body.home-astra .poll-options{gap:7px}
 html[data-theme] body.home-astra .poll-option{min-height:48px;padding:9px 11px!important;font-size:14px}
 html[data-theme] body.home-astra .participation-actions{gap:7px;margin-block:10px;flex-wrap:wrap}
 html[data-theme] body.home-astra .participation-actions button:not(.aku-control){min-height:44px;padding:7px 10px;font-size:13px}
 html[data-theme] body.home-astra .poll-meta{margin-top:8px!important;font-size:12px}
 html[data-theme] body.home-astra #poll-help{font-size:13px;margin:8px 0}
 html[data-theme] body.home-astra .idea-letter{padding:20px 17px!important;rotate:0deg!important;margin-top:8px!important}
 html[data-theme] body.home-astra .idea-mascot{width:70px!important;height:80px!important;top:5px!important;right:9px!important}
 html[data-theme] body.home-astra .idea-letter h3{font-size:23px;max-width:calc(100% - 65px);margin:0 0 7px}
 html[data-theme] body.home-astra .idea-letter>p:first-of-type{font-size:13px;max-width:calc(100% - 65px);margin:0 0 10px}
 html[data-theme] body.home-astra #home-idea-message{min-height:86px;height:86px}
 html[data-theme] body.home-astra .idea-letter :is(.idea-limit,.participation-note){font-size:11px;margin-block:7px}
 html[data-theme] body.home-astra .lab-tool summary{min-height:125px!important;padding-bottom:18px!important}
}

/* Narrow screens use one measured row and the complete menu drawer. */
@media(max-width:1024px){
 html[data-theme] body.home-astra .ak-shell{--ak-global-height:66px!important;height:66px!important}
 html[data-theme] body.home-astra .ak-shell .ak-global{display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-rows:66px;gap:0 8px;height:66px!important;min-height:66px!important;padding:0 12px!important;align-items:center}
 html[data-theme] body.home-astra .ak-shell .aknav-logo{grid-column:1;grid-row:1}
 html[data-theme] body.home-astra .ak-shell .ak-controls{grid-column:2;grid-row:1;justify-self:end;min-width:0;gap:4px}
 html[data-theme] body.home-astra .ak-shell .ak-global .ak-controls :is(.ak-theme,.ak-motion,.aknav-burger){min-height:44px!important;height:44px!important}
}
@media(max-width:700px){
 html[data-theme] body.home-astra .chrollo-card :is(.mini-caption,.chrollo-badge){display:none!important}
 html[data-theme] body.home-astra .chrollo-card small{font-size:12px!important;line-height:1.6!important;display:block;white-space:normal}
}

html[data-theme] body.home-astra .guide-caption{position:static!important;inset:auto!important;width:auto;max-width:100%}
html[data-theme=dark] body.home-astra .lab-tool .tool-expand{color:var(--a-ink)!important;border-color:var(--a-line)!important}
html[data-theme=dark] body.home-astra .route-path{background:#152a42!important;border-color:#50637a!important}
html[data-theme=dark] body.home-astra .route-path:is(:hover,:focus-visible){background:#203a56!important}
html[data-theme=dark] body.home-astra .route-path h3{color:var(--a-ink)!important}
html[data-theme=dark] body.home-astra .route-path p{color:var(--a-copy)!important}
html[data-theme=dark] body.home-astra .route-preview .preview-window{background:#20334f;border-color:#50637a}
html[data-theme=dark] body.home-astra .route-preview .preview-bar{background:#13253a;border-color:#50637a}
html[data-theme=dark] body.home-astra .route-preview .preview-url{background:#29415d;color:#d8e4f3}

.home-astra .preview-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--a-copy);font:400 14px 'AK Thai','Google Sans',Sarabun,sans-serif}
.home-astra :is(.preview-image,.preview-loading)[hidden]{display:none!important}

/* Complete approved sticker silhouettes, with eye-line spacing and a real
   control row. Never crop antennae, mouths, claws, outline or pixel bodies. */
html[data-theme] body.home-astra .guide-cast{height:184px;width:246px;gap:6px;align-items:start}
html[data-theme] body.home-astra .guide-character{width:120px!important;height:184px!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;mask-image:none!important;align-self:start}
html[data-theme] body.home-astra .astra-guides[data-style=chibi] .guide-character img{width:140px!important;height:156px!important;top:0!important;left:50%!important;mask-image:none!important}
html[data-theme] body.home-astra .astra-guides[data-style=chibi] [data-character=poojang] img{width:155px!important;height:155px!important;top:26px!important}
html[data-theme] body.home-astra .astra-guides[data-style=pixel] .guide-character img{width:130px!important;height:160px!important;object-fit:contain}
html[data-theme] body.home-astra .guide-style:not(.aku-control){margin-top:4px!important}
@media(max-width:1100px) and (min-width:701px){
 html[data-theme] body.home-astra .guide-cast{width:210px;gap:2px}
 html[data-theme] body.home-astra .guide-character{width:104px!important}
}
@media(max-width:700px){
 html[data-theme] body.home-astra .hero-track,html[data-theme] body.home-astra .stage{height:520px!important}
 html[data-theme] body.home-astra .portrait-wrap{bottom:221px!important}
 html[data-theme] body.home-astra .disc{bottom:228px!important}
 html[data-theme] body.home-astra .astra-orbit{top:26%}
 html[data-theme] body.home-astra .chrollo-card{bottom:40px!important}
 html[data-theme] body.home-astra .guide-cast{height:128px;width:100%;gap:4px}
 html[data-theme] body.home-astra .guide-character{width:76px!important;height:128px!important}
 html[data-theme] body.home-astra .astra-guides[data-style=chibi] .guide-character img{width:96px!important;height:107px!important;top:0!important}
 html[data-theme] body.home-astra .astra-guides[data-style=chibi] [data-character=poojang] img{width:105px!important;height:105px!important;top:19px!important}
 html[data-theme] body.home-astra .astra-guides[data-style=pixel] .guide-character img{width:86px!important;height:115px!important}
}

@media(max-width:700px){
 html[data-theme] body.home-astra .chrollo-card{max-width:none!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;height:116px!important;min-height:116px!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-body{flex:1 1 0;min-width:0;width:auto!important;max-width:none!important;padding:0!important;text-align:left}
 html[data-theme] body.home-astra .chrollo-card .ticket-visual{min-width:42px;max-width:42px;align-self:center}
 html[data-theme] body.home-astra .chrollo-card strong{white-space:nowrap!important;font-size:14px!important}
 html[data-theme] body.home-astra .chrollo-card small{font-size:12px!important;line-height:1.5!important}
}

@media(max-width:700px){
 html[data-theme] body.home-astra .conversation-choice #poll-title,html[data-theme] body.home-astra .poll-more-title{font:500 25px/1.4 'AK Thai','Google Sans',Sarabun,sans-serif!important;min-height:0!important;margin:10px 0!important}
 html[data-theme] body.home-astra :is(#home-poll-form,.poll-more-form){margin-top:22px!important;padding:34px 12px 8px!important}
 html[data-theme] body.home-astra :is(#home-poll-form,.poll-more-form)::before{top:12px;height:7px}
 html[data-theme] body.home-astra :is(#home-poll-form,.poll-more-form) .poll-option{min-height:44px!important;padding:8px 9px!important;gap:8px;grid-template-columns:22px minmax(0,1fr) auto}
 html[data-theme] body.home-astra .poll-option strong{font:500 14px/1.45 'AK Thai','Google Sans',Sarabun,sans-serif!important}
 html[data-theme] body.home-astra .poll-option small{font-size:13px!important}
 html[data-theme] body.home-astra :is(#home-poll-form,.poll-more-form) .poll-option input{width:20px!important;height:20px!important}
 html[data-theme] body.home-astra .poll-more-item{margin-top:22px!important;padding-top:16px!important}
 html[data-theme] body.home-astra .conversation-choice>.poll-num{margin:12px 0 3px!important}
 html[data-theme] body.home-astra :is(#poll-status,#idea-status,[id^=poll-more-status]):empty,html[data-theme] body.home-astra .poll-more-item [role=status]:empty{margin:0!important;padding:0!important;min-height:0!important;height:0!important}
 html[data-theme] body.home-astra .idea-letter h3{padding-right:0!important;font:500 23px/1.35 'AK Thai','Google Sans',Sarabun,sans-serif!important;min-height:0!important}
 html[data-theme] body.home-astra .idea-letter>p:first-of-type{padding-right:0!important}
 html[data-theme] body.home-astra #home-idea-form{margin-top:12px!important}
 html[data-theme] body.home-astra #home-idea-form label{margin:0 0 6px!important;font-size:14px!important;line-height:1.5}
 html[data-theme] body.home-astra #home-idea-message{height:86px!important;min-height:86px!important;padding:10px!important;font-size:14px!important}
 html[data-theme] body.home-astra .idea-actions{margin:8px 0!important;gap:7px}
 html[data-theme] body.home-astra .idea-actions button:not(.aku-control){min-height:44px!important;padding:7px 10px!important;font-size:13px!important}
 html[data-theme] body.home-astra #idea-history{margin-top:8px!important;padding-top:5px!important}
 html[data-theme] body.home-astra #idea-history summary{min-height:44px;display:flex;align-items:center;padding:0!important;font-size:13px!important}
 html[data-theme] body.home-astra .idea-ig:not(.aku-control){margin-top:8px!important;min-height:44px}
}

@media(max-width:700px){
 html[data-theme] body.home-astra .idea-letter{padding-top:66px!important}
 html[data-theme] body.home-astra .idea-letter::before{height:40px!important}
 html[data-theme] body.home-astra .idea-letter::after{top:25px!important;width:28px!important;height:28px!important;font-size:14px!important}
 html[data-theme] body.home-astra .idea-letter .idea-mascot{top:3px!important;right:12px!important;width:60px!important;height:65px!important}
}

@media(min-width:701px){html[data-theme] body.home-astra .chrollo-card{top:140px!important}}

/* A7: authored open oval entrances, not rectangular category slabs. */
html[data-theme] body.home-astra .worlds{grid-template-columns:1.22fr 1fr 1fr 1fr;gap:26px;border:0!important;padding-top:18px!important;align-items:start}
html[data-theme] body.home-astra .worlds .world,html[data-theme] body.home-astra .worlds .world.world-finance,html[data-theme] body.home-astra .worlds .world:not(.world-finance),html[data-theme] body.home-astra .worlds .world:hover{display:flex!important;flex-direction:column!important;gap:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0 2px 18px!important;min-height:250px!important;overflow:visible!important}
html[data-theme] body.home-astra .world-finance{--world-edge:#4d9673;--world-bg:#b6dfc7}
html[data-theme=dark] body.home-astra .world-finance{--world-edge:#71b392;--world-bg:#173f35}
.home-astra .portal-visual{position:relative;display:block;width:100%;height:170px;margin:0 0 18px;pointer-events:none}
.home-astra .world-finance .portal-visual{height:190px}
.home-astra .portal-window{position:absolute;inset:24px 0 10px;border:1px solid var(--world-edge);border-radius:50%;background:var(--world-bg);transform:rotate(-17deg) scaleY(.78);overflow:hidden;transition:transform 260ms ease-out,box-shadow 260ms ease-out}
.home-astra .portal-art{position:absolute;left:50%;bottom:15px;width:155px;height:170px;object-fit:contain;transform:translateX(-50%);opacity:1;transition:opacity 180ms ease-out,translate 260ms ease-out,scale 260ms ease-out;filter:drop-shadow(0 3px 2px #07172a30)}
.home-astra .world-finance .portal-art{width:175px;height:190px}
.home-astra .portal-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.home-astra .world-interests .portal-photo{object-fit:contain;padding:12px}
.home-astra .portal-photo[hidden]{display:none!important}
.home-astra .portal-snapshot-label{position:absolute;bottom:-12px;left:0;right:0;text-align:center;color:var(--a-copy);font:400 10px/1.4 'AK Thai','Google Sans',Sarabun,sans-serif;opacity:0}
.home-astra .world[data-preview-state] .portal-window{transform:rotate(0deg) scaleY(1);box-shadow:0 8px 24px color-mix(in srgb,var(--world-edge) 24%,transparent)}
.home-astra .world[data-preview-state] .portal-art{opacity:0;translate:0 -12px;scale:.88}
.home-astra .world[data-preview-state=ready] .portal-snapshot-label{opacity:1}
.home-astra .world[data-preview-state=loading] .portal-window::after,.home-astra .world[data-preview-state=error] .portal-window::after{content:'กำลังโหลดภาพ…';position:absolute;inset:0;display:grid;place-items:center;color:var(--a-ink);font:400 12px 'AK Thai','Google Sans',Sarabun,sans-serif}
.home-astra .world[data-preview-state=error] .portal-window::after{content:'เปิดหน้าจริงได้เลย ↗'}
html[data-theme] body.home-astra .worlds .world .world-title{font:500 20px/1.4 'AK Thai','Google Sans',Sarabun,sans-serif!important;padding:0 38px 0 0!important}
html[data-theme] body.home-astra .worlds .world.world-finance .world-title{font-size:24px!important}
html[data-theme] body.home-astra .worlds .world .world-sub{font-size:14px!important;margin-top:7px!important}
html[data-theme] body.home-astra .worlds .world .world-arrow{top:195px!important;right:0!important;width:34px!important;height:34px!important;border:1px solid var(--world-edge)!important;border-radius:50%;display:grid!important;place-items:center;color:var(--world-edge)!important;font-size:20px!important}
html[data-theme] body.home-astra .worlds .world.world-finance .world-arrow{top:215px!important}
html[data-theme] body.home-astra .finance-enter{color:var(--a-accent)!important;border-color:var(--world-edge);font-size:13px;margin-top:9px}
html[data-theme] body.home-astra .world-preview .preview-image-wrap{display:none}
@media(min-width:701px){html[data-theme] body.home-astra .world-preview{display:none!important}}
/* The original ticket is a small horizontal keepsake next to the portrait. */
@media(min-width:701px){
 html[data-theme] body.home-astra .chrollo-card{top:235px!important;bottom:auto!important;width:270px!important;max-width:none!important;height:145px!important;min-height:145px!important;max-height:145px!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:11px!important;padding:12px!important;rotate:-3deg}
 html[data-theme] body.home-astra .chrollo-card .ticket-visual{position:relative;flex:0 0 92px;width:92px!important;min-width:92px;max-width:92px;height:112px!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame{width:68px!important;height:100px!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait{width:68px!important;height:100px!important;object-fit:cover}
 html[data-theme] body.home-astra .chrollo-card .ticket-body{flex:1;min-width:0;width:auto!important;max-width:none!important;padding:0!important;text-align:left}
 html[data-theme] body.home-astra .chrollo-card strong{font-size:20px!important;white-space:nowrap}
 html[data-theme] body.home-astra .chrollo-card small{font-size:12px!important;line-height:1.5}
 html[data-theme] body.home-astra .chrollo-card .mini-caption{font-size:11px!important}
 html[data-theme] body.home-astra .chrollo-card .chrollo-badge{font-size:8px!important;max-width:102px;margin-top:6px}
 html[data-theme] body.home-astra .chrollo-card .profile-arrow{position:absolute;right:8px;bottom:9px;width:30px;height:30px;font-size:17px}
 html[data-theme] body.home-astra .chrollo-card .ticket-book-prop{position:absolute;right:-3px;bottom:0;width:39px;height:62px}
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-img{width:39px;height:62px;object-fit:contain}
}
@media(max-width:1100px) and (min-width:701px){
 html[data-theme] body.home-astra .chrollo-card{width:235px!important;gap:8px!important;right:-6px!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-visual{flex-basis:72px;min-width:72px;max-width:72px}
 html[data-theme] body.home-astra .chrollo-card strong{font-size:18px!important}
 html[data-theme] body.home-astra .worlds{gap:16px}
 html[data-theme] body.home-astra .worlds .world .world-title{font-size:17px!important}
}
@media(max-width:700px){
 html[data-theme] body.home-astra .hero-track,html[data-theme] body.home-astra .stage{height:494px!important}
 html[data-theme] body.home-astra .portrait-wrap{bottom:195px!important}
 html[data-theme] body.home-astra .disc{bottom:202px!important}
 html[data-theme] body.home-astra .worlds{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important;padding-top:0!important}
 html[data-theme] body.home-astra .worlds .world,html[data-theme] body.home-astra .worlds .world:not(.world-finance){min-height:150px!important;padding:0 0 8px!important}
 html[data-theme] body.home-astra .worlds .world.world-finance{grid-column:1/-1!important;display:grid!important;grid-template-columns:46% minmax(0,1fr)!important;grid-template-rows:auto auto;align-content:center;gap:0 12px!important;min-height:156px!important;padding:0 0 10px!important}
 .home-astra .portal-visual{height:100px;margin-bottom:10px}
 .home-astra .portal-window{inset:16px 0 6px}
 .home-astra .portal-art{width:91px;height:105px;bottom:3px}
 .home-astra .world-finance .portal-visual{height:145px;grid-column:1;grid-row:1/3;margin:0}
 .home-astra .world-finance .portal-art{width:125px;height:145px;bottom:3px}
 html[data-theme] body.home-astra .worlds .world .world-title{font-size:13px!important;padding:0!important;text-align:center}
 html[data-theme] body.home-astra .worlds .world.world-finance .world-title{grid-column:2;grid-row:1;font-size:20px!important;text-align:left;align-self:end}
 html[data-theme] body.home-astra .worlds .world.world-finance .world-sub{display:block!important;grid-column:2;grid-row:2;font-size:12px!important;line-height:1.6;align-self:start;margin-top:6px!important}
 html[data-theme] body.home-astra .worlds .world .world-arrow{display:none!important}
 .home-astra .portal-snapshot-label{font-size:8px;bottom:-3px}
 .home-astra .world-finance .portal-snapshot-label{font-size:9px;bottom:0}
 .home-astra .world-interests .portal-photo{padding:7px}
 .home-astra .world-preview{background:transparent!important;border:0!important;border-radius:0;margin-top:0!important}
 .home-astra .world-preview figcaption{padding:5px 0}
 .home-astra .world-preview .preview-close{position:static;transform:none;margin-left:4px;border:1px solid var(--a-line)}
 .home-astra .world-preview .preview-note{font-size:10px}
}

/* Matched bust pair: complete source silhouettes, common baseline and control row. */
html[data-theme] body.home-astra .guide-cast{height:160px!important}
html[data-theme] body.home-astra .guide-character{height:160px!important}
html[data-theme] body.home-astra .astra-guides[data-style=chibi] [data-character=poojang] img{width:140px!important;height:156px!important;top:0!important}
html[data-theme] body.home-astra .community-visual::after{content:none!important;display:none!important}
@media(max-width:700px){
 html[data-theme] body.home-astra .guide-cast,html[data-theme] body.home-astra .guide-character{height:112px!important}
 html[data-theme] body.home-astra .astra-guides[data-style=chibi] [data-character=poojang] img{width:96px!important;height:107px!important;top:0!important}
}

@media(min-width:701px){
 html[data-theme] body.home-astra .portal-visual{height:190px}
 html[data-theme] body.home-astra .worlds .world .world-arrow{top:215px!important}
 .home-astra .world-knowledge .portal-art{width:205px;height:210px;bottom:10px}
}
@media(max-width:700px){.home-astra .world-knowledge .portal-art{width:118px;height:128px;bottom:0}}
@media(min-width:701px) and (max-width:1050px){
 html[data-theme] body.home-astra .worlds .world.world-finance .world-title{font-size:20px!important;padding-right:28px!important}
 html[data-theme] body.home-astra .worlds .world.world-finance .world-arrow{width:26px!important;height:26px!important}
}

/* A8: one category palette across the scene, entrances and Home navigation. */
html[data-theme] body.home-astra [data-world=finance]{--world-bg:#d0eadc}
html[data-theme=dark] body.home-astra [data-world=finance]{--world-bg:#173f32}
body.home-astra,body.home-astra [data-world=finance]{--world-edge:#26835c;--world-bg:#d0eadc;--w:#26835c;--w-ink-l:#145c3e;--w-ink-d:#99e8bd}
body.home-astra [data-world=knowledge],body.home-astra[data-world=knowledge]{--world-edge:#367bc1;--world-bg:#dbeafa;--w:#367bc1;--w-ink-l:#24528c;--w-ink-d:#a9d3ff}
body.home-astra [data-world=focus],body.home-astra[data-world=focus]{--world-edge:#b47a22;--world-bg:#f6e6bc;--w:#b47a22;--w-ink-l:#6b440b;--w-ink-d:#fff3c4}
body.home-astra [data-world=interests],body.home-astra[data-world=interests]{--world-edge:#c86551;--world-bg:#f7ded6;--w:#c86551;--w-ink-l:#7f3121;--w-ink-d:#ffe4de}
body.home-astra [data-world=about],body.home-astra[data-world=about]{--world-edge:#8b65be;--world-bg:#e8dcf6;--w:#8b65be;--w-ink-l:#583282;--w-ink-d:#efe2ff}
html[data-theme=dark] body.home-astra,html[data-theme=dark] body.home-astra [data-world=finance]{--world-edge:#77c69d;--world-bg:#14362b}
html[data-theme=dark] body.home-astra [data-world=knowledge],html[data-theme=dark] body.home-astra[data-world=knowledge]{--world-edge:#8ebdee;--world-bg:#193252}
html[data-theme=dark] body.home-astra [data-world=focus],html[data-theme=dark] body.home-astra[data-world=focus]{--world-edge:#e0b45f;--world-bg:#332711}
html[data-theme=dark] body.home-astra [data-world=interests],html[data-theme=dark] body.home-astra[data-world=interests]{--world-edge:#ec9b85;--world-bg:#3b1d1b}
html[data-theme=dark] body.home-astra [data-world=about],html[data-theme=dark] body.home-astra[data-world=about]{--world-edge:#be99ec;--world-bg:#2e1f47}
html[data-theme] body.home-astra{--a-disc:var(--world-bg)}
html[data-theme] body.home-astra[data-world]{--a-disc:var(--world-bg)}
html[data-theme] body.home-astra .worlds .world{--world-edge:var(--w);color:var(--a-ink)!important}
html[data-theme=dark] body.home-astra .worlds .world{--world-edge:var(--w-ink-d)}
html[data-theme] body.home-astra .worlds .world:is(:hover,:focus,:focus-visible,[data-preview-state]),html[data-theme] body.home-astra .worlds .world.world-finance:is(:hover,:focus,:focus-visible,[data-preview-state]){background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html[data-theme] body.home-astra .worlds .world::before,html[data-theme] body.home-astra .worlds .world::after{content:none!important}
html[data-theme] body.home-astra .worlds .portal-window{border-radius:50%!important;clip-path:ellipse(50% 50% at 50% 50%)!important;overflow:hidden!important;background:var(--world-bg)!important}
html[data-theme] body.home-astra .worlds .portal-photo{border-radius:50%!important}
html[data-theme] body.home-astra .worlds .world-finance .portal-window{box-shadow:0 0 25px color-mix(in srgb,var(--world-edge) 20%,transparent)}
@media(min-width:701px){html[data-theme] body.home-astra .worlds{grid-template-columns:1.1fr 1fr 1fr 1fr}html[data-theme] body.home-astra .worlds .world.world-finance .world-title{font-size:21px!important}.home-astra .world-finance .portal-art{width:164px;height:180px}}
@media(min-width:701px) and (max-width:1050px){html[data-theme] body.home-astra .worlds .world.world-finance .world-title{font-size:18px!important}}
html[data-theme] body.home-astra .ak-shell .aknav-link[data-world]{--w:var(--world-edge)}
html[data-theme] body.home-astra .ak-shell .aknav-link[data-world]:is(:hover,:focus-visible,[aria-current=page]){color:var(--w-ink-l)!important;background:var(--world-bg)!important}
html[data-theme=dark] body.home-astra .ak-shell .aknav-link[data-world]:is(:hover,:focus-visible,[aria-current=page]){color:var(--w-ink-d)!important}
body.home-astra .ak-shell .aknav-link[data-world=home]{--w-ink-l:#6b4c0e;--w-ink-d:#fef08a;--world-edge:#d4af37;--world-bg:#f8eed1}
html[data-theme=dark] body.home-astra .ak-shell .aknav-link[data-world=home]{--world-edge:#e5c586;--world-bg:#2e2514}
body.home-astra .ak-shell .aknav-link[data-world=finance],body.home-astra [data-preview=finance]{--w-ink-l:#145c3e;--w-ink-d:#b8f5d4;--world-edge:#26835c}
body.home-astra .ak-shell .aknav-link[data-world=knowledge],body.home-astra [data-preview=knowledge]{--w-ink-l:#1e467a;--w-ink-d:#cfe6ff;--world-edge:#367bc1}
body.home-astra .ak-shell .aknav-link[data-world=focus],body.home-astra [data-preview=focus]{--w-ink-l:#6b440b;--w-ink-d:#fff3c4;--world-edge:#b47a22}
body.home-astra .ak-shell .aknav-link[data-world=interests],body.home-astra [data-preview=interests]{--w-ink-l:#7f3121;--w-ink-d:#ffe4de;--world-edge:#c86551}
body.home-astra .ak-shell .aknav-link[data-world=about]{--w-ink-l:#583282;--w-ink-d:#efe2ff;--world-edge:#8b65be}
html[data-theme] body.home-astra .preview-controls button:not(.aku-control)[aria-expanded=true]{color:var(--w-ink-l)!important;border-color:var(--world-edge)!important;background:color-mix(in srgb,var(--world-edge) 14%,white)!important}
html[data-theme=dark] body.home-astra .preview-controls button:not(.aku-control)[aria-expanded=true]{color:var(--w-ink-d)!important;background:color-mix(in srgb,var(--world-edge) 26%,#101d30)!important}

/* Restore the original continuous depth exchange inside a reserved art column. */
html[data-theme] body.home-astra .chrollo-card{--ticket-slot:106px;--ticket-face:62px;--ticket-face-h:96px;--ticket-book:38px;--ticket-book-h:59px;--face-travel:34px;--book-travel:-56px;gap:12px!important;scale:1!important;translate:none!important;overflow:visible}
html[data-theme] body.home-astra .chrollo-card .ticket-visual{flex:0 0 var(--ticket-slot)!important;width:var(--ticket-slot)!important;min-width:var(--ticket-slot)!important;max-width:var(--ticket-slot)!important;height:112px!important;perspective:600px;transform-style:preserve-3d}
html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame{left:4px;top:5px;width:var(--ticket-face)!important;height:var(--ticket-face-h)!important;transform:translate3d(0,0,0) rotate(-3deg)!important;transition:transform 420ms cubic-bezier(.22,.7,.2,1)}
html[data-theme] body.home-astra .chrollo-card .ticket-portrait{width:100%!important;height:100%!important;transform:none!important}
html[data-theme] body.home-astra .chrollo-card .ticket-book-prop{display:block!important;right:4px;bottom:5px;width:var(--ticket-book)!important;height:var(--ticket-book-h)!important;transform:translate3d(0,0,22px) rotate(3deg)!important;transition:transform 420ms cubic-bezier(.22,.7,.2,1)}
html[data-theme] body.home-astra .chrollo-card :is(.chrollo-book-3d,.chrollo-book-img){width:var(--ticket-book)!important;height:var(--ticket-book-h)!important}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-portrait-frame{transform:translate3d(var(--face-travel),-1px,24px) rotate(3deg)!important}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-book-prop{transform:translate3d(var(--book-travel),-16px,0) rotate(-8deg)!important}
html[data-theme] body.home-astra .chrollo-card .chrollo-ghost-backdrop{inset:8px auto 8px 8px;width:var(--ticket-slot);overflow:hidden;border-radius:9px;opacity:.15!important}
html[data-theme] body.home-astra .chrollo-card .chrollo-ghost-img{width:100%;height:100%;right:0;bottom:0;object-fit:contain;transform:none!important;opacity:1!important;mask-image:none;filter:none}
html[data-theme] body.home-astra .chrollo-card .ticket-body{background:none!important;z-index:3}
html[data-theme] body.home-astra .chrollo-card strong{font-size:18px!important}
@media(min-width:701px) and (max-width:1100px){html[data-theme] body.home-astra .chrollo-card{--ticket-slot:92px;--ticket-face:56px;--face-travel:26px;--book-travel:-42px;--ticket-book:36px;gap:10px!important}}
@media(max-width:700px){
 html[data-theme] body.home-astra .chrollo-card{--ticket-slot:48px;--ticket-face:32px;--ticket-face-h:65px;--ticket-book:22px;--ticket-book-h:36px;--face-travel:8px;--book-travel:-16px;gap:7px!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-visual{height:78px!important}
 html[data-theme] body.home-astra .chrollo-card strong{font-size:14px!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-book-prop{right:2px;bottom:0}
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-book-prop{transform:translate3d(var(--book-travel),-9px,0) rotate(-8deg)!important}
 html[data-theme] body.home-astra .connect-item{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;translate:none!important}
 html[data-theme] body.home-astra .connect-item .connect-cue{justify-self:start;margin:0 0 0 60px;max-width:calc(100% - 60px);min-height:44px;justify-content:center;box-sizing:border-box}
}
html[data-motion=paused] body.home-astra .chrollo-card :is(.ticket-portrait-frame,.ticket-book-prop),body.home-astra.paused .chrollo-card :is(.ticket-portrait-frame,.ticket-book-prop){transition:none!important}
@media(prefers-reduced-motion:reduce){html[data-theme] body.home-astra .chrollo-card :is(.ticket-portrait-frame,.ticket-book-prop){transition:none!important}}

/* Phones use the existing route dialog, not a half-visible duplicate rail. */
@media(max-width:700px){
 html[data-theme] body.home-astra .ak-shell{--ak-global-height:70px!important;height:70px!important}
 html[data-theme] body.home-astra .ak-shell .ak-global{grid-template-rows:70px;grid-template-columns:auto minmax(0,1fr);height:70px!important;min-height:70px!important;padding-inline:10px!important}
 html[data-theme] body.home-astra .ak-shell .ak-worlds{display:none!important}
 html[data-theme] body.home-astra .ak-shell .ak-global .ak-controls>button{min-width:44px!important;min-height:44px!important}
 html[data-theme] body.home-astra .ak-shell .ak-mobile-worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 html[data-theme] body.home-astra .ak-shell .ak-mobile-worlds .aknav-link{min-width:0;width:100%;height:auto;min-height:64px;padding:12px 10px;font-size:14px;line-height:1.5;white-space:normal;box-sizing:border-box}
 html[data-theme] body.home-astra .ak-shell .ak-menu-close{min-width:44px;min-height:44px}
}
@media(max-width:380px){html[data-theme] body.home-astra .ak-shell .ak-brand-name{display:none}}

/* Wrapped Thai labels keep the same readable rhythm at the narrowest view. */
html[data-theme] body.home-astra .worlds .world .world-title,
html[data-theme] body.home-astra :is(#idea-title,#wall-title,.wall-go),
html[data-theme] body.home-astra .deepdive-primary-btn :is(span,strong){line-height:1.5!important}

/* A9: aura lives outside the photograph's complete ellipse. */
html[data-theme] body.home-astra .world-finance .portal-visual::before{content:'';position:absolute;inset:21px -6px 7px;border-radius:50%;background:radial-gradient(ellipse,#78e7b866 0%,#47c99238 45%,transparent 74%);filter:blur(13px);transform:rotate(-17deg);opacity:.85;pointer-events:none;transition:opacity 260ms ease-out,transform 260ms ease-out}
html[data-theme=light] body.home-astra .world-finance .portal-visual::before{background:radial-gradient(ellipse,#32b98070 0%,#44c99542 46%,transparent 74%)}
html[data-theme] body.home-astra .world-finance:is(:hover,:focus-visible,[data-preview-state]) .portal-visual::before{opacity:1;transform:rotate(0deg) scale(1.06)}

/* The cameo rises into clear sky, never through the ticket's copy column. */
html[data-theme] body.home-astra .chrollo-card .chrollo-ghost-backdrop{inset:auto 10px calc(100% - 8px) auto;width:112px;height:146px;overflow:visible;border-radius:0;opacity:0!important;transform:translateY(12px);transition:opacity 280ms ease-out,transform 420ms cubic-bezier(.22,.7,.2,1);pointer-events:none;z-index:0}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .chrollo-ghost-backdrop{opacity:.94!important;transform:translateY(0)}
html[data-theme] body.home-astra .chrollo-card .chrollo-ghost-img{filter:drop-shadow(0 0 10px #a879df70)}
@media(min-width:701px) and (max-width:1100px){html[data-theme] body.home-astra .chrollo-card .chrollo-ghost-backdrop{width:88px;height:112px;right:6px}}
@media(max-width:700px){html[data-theme] body.home-astra .chrollo-card .chrollo-ghost-backdrop{left:0;right:auto;width:52px;height:78px;bottom:calc(100% - 12px)}}

/* Local light on the existing lantern and water; the native sign is the link. */
html[data-theme] body.home-astra .community-dock-card::before{content:'';position:absolute;left:72%;top:28%;width:30%;height:30%;border-radius:50%;background:radial-gradient(ellipse,#ffd88fa8 0%,#ffc76b44 35%,transparent 70%);mix-blend-mode:screen;pointer-events:none;z-index:1;animation:astra-lantern 4.8s ease-in-out infinite alternate}
html[data-theme] body.home-astra .community-dock-card::after{content:'';position:absolute;left:12%;right:8%;bottom:4%;height:15%;background:linear-gradient(100deg,transparent 15%,#aee8ff50 45%,transparent 70%);filter:blur(3px);pointer-events:none;animation:astra-water 7s ease-in-out infinite alternate}
html[data-theme=light] body.home-astra .community-dock-card::before{opacity:.55}
html[data-theme] body.home-astra .community-dock-pill{z-index:2}
@keyframes astra-lantern{from{scale:.94;opacity:.6}to{scale:1.04;opacity:.95}}
@keyframes astra-water{from{translate:-7px 0;opacity:.25}to{translate:7px 0;opacity:.6}}
body.home-astra[data-dock-paused=true] .community-dock-card::before,body.home-astra[data-dock-paused=true] .community-dock-card::after{animation:none!important}
html[data-motion=paused] body.home-astra .chrollo-ghost-backdrop,html[data-motion=paused] body.home-astra .portal-visual::before,body.home-astra.paused .chrollo-ghost-backdrop,body.home-astra.paused .portal-visual::before{transition:none!important}
@media(prefers-reduced-motion:reduce){html[data-theme] body.home-astra .chrollo-ghost-backdrop,html[data-theme] body.home-astra .portal-visual::before{transition:none!important}html[data-theme] body.home-astra .community-dock-card::before,html[data-theme] body.home-astra .community-dock-card::after{animation:none!important}}

/* A10 Golden Standard: Rich Light Mode sky & sun, 4-portal Kungki/Poojang cast balance,
   first-viewport breathing room, real Recommended Route previews, compact participation,
   and warm Simply Dock framing in Light Mode. */
html[data-theme=light] body.home-astra{
 --a-sky:#eef4fb;
 --a-line:#b9cbe0;
 background:
  radial-gradient(560px 320px at 84% 7%,rgba(255,216,122,.42),rgba(255,233,176,.16) 54%,transparent 76%),
  radial-gradient(680px 360px at 18% 14%,rgba(138,192,248,.22),transparent 72%),
  linear-gradient(180deg,#d8e9fa 0%,#eaf2fb 36%,#f6f3ec 76%,#eef3f9 100%)!important;
}
html[data-theme=light] body.home-astra .astra-sun{
 width:62px;height:62px;top:52px;left:auto;right:7%;
 background:radial-gradient(circle at 38% 38%,#fffef7 0%,#ffe596 42%,#f6bd4f 78%,#eb9f28 100%);
 box-shadow:0 0 0 12px rgba(255,223,132,.26),0 0 42px 16px rgba(255,198,82,.32),0 0 88px 28px rgba(255,214,118,.2);
}
@media(max-width:700px){
 html[data-theme=light] body.home-astra .astra-sun{width:38px;height:38px;top:92px;left:4%;right:auto;box-shadow:0 0 0 8px rgba(255,223,132,.24),0 0 24px 8px rgba(255,198,82,.28)}
}
html[data-theme=light] body.home-astra .astra-cloud{
 background:#ffffffeb;
 border:0;
 box-shadow:28px -12px 0 -2px #ffffffeb,-18px -8px 0 -4px #ffffffeb,0 10px 22px rgba(72,114,162,.14);
 opacity:.95;
}
html[data-theme=light] body.home-astra .astra-orbit{border-color:#9bb6d4;opacity:.92}
html[data-theme=light] body.home-astra .astra-ring-two{border-color:#c6a9be;opacity:.75}
html[data-theme=light] body.home-astra .worlds .portal-window{
 box-shadow:0 10px 24px -8px color-mix(in srgb,var(--world-edge) 28%,rgba(24,52,86,.14)),inset 0 1px 0 rgba(255,255,255,.72);
}

/* First-viewport vertical fit on desktop so all 4 portal titles & subtitles breathe at 900px height */
@media(min-width:701px){
 html[data-theme] body.home-astra .hero-track,html[data-theme] body.home-astra .stage{height:418px!important}
 html[data-theme] body.home-astra .portrait-wrap{bottom:6px!important}
 html[data-theme] body.home-astra .disc{bottom:18px!important}
 html[data-theme] body.home-astra .chrollo-card{top:218px!important}
 html[data-theme] body.home-astra .astra-guides{bottom:16px!important}
 html[data-theme] body.home-astra .worlds{padding-top:8px!important}
 html[data-theme] body.home-astra .worlds .world,html[data-theme] body.home-astra .worlds .world.world-finance,html[data-theme] body.home-astra .worlds .world:not(.world-finance){min-height:236px!important;padding-bottom:12px!important}
 html[data-theme] body.home-astra .portal-visual,html[data-theme] body.home-astra .world-finance .portal-visual{height:178px!important;margin-bottom:14px!important}
 html[data-theme] body.home-astra .worlds .world .world-arrow,html[data-theme] body.home-astra .worlds .world.world-finance .world-arrow{top:200px!important}
}

/* Optical balance for Poojang inside Focus & Interests oval portals */
.home-astra :is(.world-focus,.world-interests) .portal-art{width:154px;height:166px;bottom:12px}
@media(max-width:700px){
 .home-astra :is(.world-focus,.world-interests) .portal-art{width:92px;height:102px;bottom:4px}
}

/* Real theme-aware screenshot display inside #start-here .route-preview */
html[data-theme] body.home-astra .route-preview.has-shot .preview-body{padding:0!important;position:relative;overflow:hidden;min-height:204px;display:block}
html[data-theme] body.home-astra .route-preview.has-shot .preview-shot{display:block!important;width:100%;height:204px;object-fit:cover;object-position:top center;border-radius:0 0 12px 12px}
html[data-theme] body.home-astra .route-preview.has-shot :is(.preview-emoji,.preview-soon){display:none!important}
html[data-theme] body.home-astra .route-preview.has-shot .preview-title{
 position:absolute;left:10px;right:10px;bottom:8px;margin:0;padding:6px 10px;
 border-radius:8px;background:rgba(15,29,46,.82);color:#f4f8ff!important;
 font:500 13px/1.35 'AK Thai','Google Sans',Sarabun,sans-serif;backdrop-filter:blur(6px);
 box-shadow:0 4px 12px rgba(0,0,0,.22);text-align:left;
}
html[data-theme=light] body.home-astra .route-preview.has-shot .preview-title{
 background:rgba(255,252,245,.9);color:#172b42!important;border:1px solid rgba(44,82,126,.18);
}

/* Compact desktop participation (#community-poll) to save ~260px vertical scroll */
@media(min-width:701px){
 html[data-theme] body.home-astra .ex-conversation{padding-block:44px!important}
 html[data-theme] body.home-astra .conversation-layout{gap:28px!important;align-items:start}
 html[data-theme] body.home-astra .conversation-choice #poll-title,html[data-theme] body.home-astra .poll-more-title{font-size:28px!important;line-height:1.32!important;margin:8px 0!important}
 html[data-theme] body.home-astra :is(#home-poll-form,.poll-more-form){margin-top:16px!important;padding:28px 18px 14px!important}
 html[data-theme] body.home-astra .poll-options{gap:8px!important}
 html[data-theme] body.home-astra .poll-option{min-height:48px!important;padding:9px 14px!important}
 html[data-theme] body.home-astra .poll-more-item{margin-top:18px!important;padding-top:14px!important}
 html[data-theme] body.home-astra .idea-letter{padding:54px 22px 18px!important}
 html[data-theme] body.home-astra #home-idea-message{min-height:84px!important;height:84px!important}
 html[data-theme] body.home-astra .wall-board{margin-top:14px!important;padding:18px 18px 16px!important}
}

/* Simply Dock card framing in Light Mode so the night harbor sign sits like a framed window */
html[data-theme=light] body.home-astra .community-dock-card{
 border:3px solid #f5efe2!important;
 outline:1px solid #cdb996;
 box-shadow:0 16px 34px -12px rgba(24,46,74,.26),0 4px 12px rgba(24,46,74,.1)!important;
}
html[data-theme=light] body.home-astra .community-dock-card::after{
 background:linear-gradient(100deg,transparent 15%,rgba(174,232,255,.42) 45%,transparent 70%);
}

/* ==========================================================================
   A11 Craft Upgrade (Audi 2026-10-20):
   1. world-interests (🎧 สิ่งที่ชอบ) hover preview fills 100% of the oval portal
   2. .chrollo-card (รู้จักออดี้) uses Audi's own Chrollo Sun & Moon cutout popping
      out of the card in 3D (replacing tiny boxed portrait + manga ghost)
   3. #start-here (เริ่มจาก 4 เรื่องนี้ก่อน) spans full 1180px width with an edge-to-edge
      16:10 preview stage and an open constellation journey path (zero AI-slop boxes)
   4. .ak-shell navigator bar has synchronized category glow, complete contact hue,
      and quieted secondary utility pills so world links & gold บัญชี CTA lead
   ========================================================================== */

/* 1. 🎧 สิ่งที่ชอบ oval preview: full-bleed cover inside the ellipse, centered on Audi's face & 6 personal orbs */
html[data-theme] body.home-astra .worlds .world-interests .portal-photo{
 object-fit:cover!important;
 object-position:center 50%!important;
 padding:0!important;
 width:100%!important;
 height:100%!important;
 border-radius:50%!important;
 transform:scale(1.03);
}

/* 2. รู้จักออดี้ (.chrollo-card): Surgical 3D Pop-Out Cutout of Audi + Conjured Open Grimoire (Zero Fuzzy Aura) */
html[data-theme] body.home-astra .chrollo-card .chrollo-ghost-backdrop,
html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame::before,
html[data-theme] body.home-astra .chrollo-card .portrait-nen-rim,
html[data-theme] body.home-astra .chrollo-card .ticket-glow,
html[data-theme] body.home-astra .chrollo-card .chrollo-nen-aura,
html[data-theme] body.home-astra .chrollo-card .chrollo-nen-wisp,
html[data-theme] body.home-astra .chrollo-card .chrollo-book-spine,
html[data-theme] body.home-astra .chrollo-card .chrollo-book-pages{
 display:none!important;
}
@media(min-width:701px){
 html[data-theme] body.home-astra .chrollo-card{
  --ticket-slot:122px;
  top:222px!important;
  width:302px!important;
  height:144px!important;
  min-height:144px!important;
  max-height:144px!important;
  padding:12px 14px 12px 10px!important;
  gap:12px!important;
  overflow:visible!important;
  border:1.5px solid rgba(192,132,252,.52)!important;
  box-shadow:0 18px 40px rgba(5,9,20,.62),inset 0 1px 0 rgba(255,255,255,.14)!important;
 }
 html[data-theme] body.home-astra .chrollo-card .ticket-visual{
  position:relative!important;
  align-self:stretch!important;
  flex:0 0 120px!important;
  width:120px!important;
  min-width:120px!important;
  max-width:120px!important;
  height:auto!important;
  margin-top:-12px!important;
  margin-bottom:-12px!important;
  overflow:visible!important;
 }
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame{
  left:-6px!important;
  top:auto!important;
  bottom:0!important;
  width:130px!important;
  height:168px!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  z-index:5!important;
  clip-path:inset(-80px -40px 1px -40px)!important;
  transform:translate3d(0,0,0) rotate(0deg)!important;
  transition:transform 380ms cubic-bezier(.22,1,.36,1),filter 300ms ease!important;
  filter:drop-shadow(0 10px 16px rgba(4,8,18,.78))!important;
 }
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
 }
 html[data-theme] body.home-astra .chrollo-card .ticket-book-prop{
  left:32px!important;
  right:auto!important;
  bottom:3px!important;
  width:56px!important;
  height:52px!important;
  z-index:7!important;
  transform:translate3d(0,0,0) rotate(-4deg)!important;
  transition:transform 380ms cubic-bezier(.22,1,.36,1)!important;
 }
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-3d{
  width:56px!important;
  height:52px!important;
  transform:none!important;
  filter:drop-shadow(0 8px 14px rgba(4,8,18,.82))!important;
 }
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-img{
  width:56px!important;
  height:52px!important;
  object-fit:contain!important;
 }
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible){
  border-color:rgba(216,180,254,.85)!important;
  box-shadow:0 24px 52px rgba(4,8,18,.76),0 0 22px rgba(147,51,234,.28),inset 0 1px 0 rgba(255,255,255,.2)!important;
 }
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-portrait-frame{
  transform:translate3d(0,-6px,26px) scale(1.05) rotate(0deg)!important;
  filter:drop-shadow(0 14px 22px rgba(4,8,18,.88))!important;
 }
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-book-prop{
  transform:translate3d(0,-10px,36px) rotate(2deg) scale(1.12)!important;
 }
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .chrollo-book-3d{
  transform:none!important;
  filter:drop-shadow(0 12px 18px rgba(4,8,18,.9))!important;
 }
}
@media(min-width:701px) and (max-width:1100px){
 html[data-theme] body.home-astra .chrollo-card{width:258px!important;--ticket-slot:98px}
 html[data-theme] body.home-astra .chrollo-card .ticket-visual{flex:0 0 96px!important;width:96px!important;min-width:96px!important;max-width:96px!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame{width:104px!important;height:136px!important;top:auto!important;bottom:0!important;left:-6px!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-book-prop{left:22px!important;right:auto!important;bottom:2px!important;width:44px!important;height:41px!important}
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-3d,
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-img{width:44px!important;height:41px!important}
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-book-prop{transform:translate3d(0,-8px,32px) rotate(2deg) scale(1.1)!important}
}
@media(max-width:700px){
 html[data-theme] body.home-astra .chrollo-card .ticket-visual{
  flex:0 0 62px!important;
  width:62px!important;
  min-width:62px!important;
  max-width:62px!important;
  height:88px!important;
  overflow:visible!important;
 }
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame{
  left:-4px!important;
  top:auto!important;
  bottom:0!important;
  width:68px!important;
  height:94px!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:inset(-50px -20px 0px -20px)!important;
  filter:drop-shadow(0 6px 12px rgba(4,8,18,.75))!important;
 }
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
 }
 html[data-theme] body.home-astra .chrollo-card .ticket-book-prop{
  left:14px!important;
  right:auto!important;
  bottom:0px!important;
  width:32px!important;
  height:30px!important;
  transform:rotate(-4deg)!important;
 }
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-3d,
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-img{
  width:32px!important;
  height:30px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 4px 8px rgba(4,8,18,.8))!important;
 }
}

/* 3. #start-here (เริ่มจาก 4 เรื่องนี้ก่อน): Full-width 1180px stage, edge-to-edge 16:10 preview,
      and Open Constellation Journey Path (replaces stacked rectangular AI-slop boxes) */
html[data-theme] body.home-astra #start-here.astra-reading{
 max-width:1180px!important;
 width:min(1180px,calc(100% - 64px))!important;
 margin-inline:auto!important;
 padding-inline:0!important;
}
html[data-theme] body.home-astra #start-here .ex-wrap.start-layout{
 max-width:1180px!important;
 width:100%!important;
 margin-inline:auto!important;
 padding-inline:0!important;
 grid-template-columns:minmax(420px,1.04fr) minmax(440px,1.16fr)!important;
 gap:64px!important;
 align-items:center!important;
}
html[data-theme] body.home-astra #start-here .start-intro{
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 width:100%;
}
html[data-theme] body.home-astra #start-here .route-preview{
 max-width:510px!important;
 width:100%!important;
 margin-top:20px!important;
}
html[data-theme] body.home-astra #start-here .route-preview .preview-window{
 width:100%!important;
 border-radius:18px!important;
 overflow:hidden!important;
 border:1px solid rgba(138,176,224,.32)!important;
 box-shadow:0 22px 48px -14px rgba(4,10,24,.58),0 0 28px rgba(56,189,248,.1)!important;
}
html[data-theme=light] body.home-astra #start-here .route-preview .preview-window{
 background:#ffffff!important;
 border-color:#bfd0e4!important;
 box-shadow:0 20px 44px -14px rgba(24,52,86,.18),0 2px 10px rgba(24,52,86,.06)!important;
}
html[data-theme] body.home-astra #start-here .route-preview.has-shot .preview-body{
 padding:0!important;
 margin:0!important;
 width:100%!important;
 aspect-ratio:16/10!important;
 min-height:268px!important;
 height:auto!important;
 position:relative!important;
 overflow:hidden!important;
 display:block!important;
 background:#0b1526!important;
}
html[data-theme=light] body.home-astra #start-here .route-preview.has-shot .preview-body{
 background:#eef4fb!important;
}
html[data-theme] body.home-astra #start-here .route-preview.has-shot .preview-shot{
 display:block!important;
 width:100%!important;
 height:100%!important;
 min-height:268px!important;
 object-fit:cover!important;
 object-position:top center!important;
 border-radius:0!important;
 margin:0!important;
}
html[data-theme] body.home-astra #start-here .route-preview.has-shot .preview-title{
 left:12px!important;
 right:12px!important;
 bottom:10px!important;
 padding:8px 14px!important;
 border-radius:10px!important;
 font:500 13.5px/1.35 'AK Thai','Google Sans',Sarabun,sans-serif!important;
}

/* Open Constellation Journey Path for .route-paths (no rectangular slabs!) */
html[data-theme] body.home-astra #start-here .route-paths{
 position:relative!important;
 display:flex!important;
 flex-direction:column!important;
 gap:0!important;
 padding-left:4px!important;
}
html[data-theme] body.home-astra #start-here .route-paths::before{
 content:'';
 position:absolute;
 left:30px;
 top:34px;
 bottom:34px;
 width:2px;
 background:linear-gradient(180deg,#34d399 0%,#f5d285 36%,#60a5fa 70%,#c084fc 100%);
 opacity:.55;
 pointer-events:none;
 z-index:0;
}
html[data-theme] body.home-astra #start-here .route-path[data-route-preview=finance]{--route-accent:#34d399;--route-ink-l:#0f6e4b;--route-bg:rgba(52,211,153,.16);--route-step:'01'}
html[data-theme] body.home-astra #start-here .route-path[data-route-preview=thesis]{--route-accent:#f5d285;--route-ink-l:#9a6412;--route-bg:rgba(245,210,133,.16);--route-step:'02'}
html[data-theme] body.home-astra #start-here .route-path[data-route-preview=ai]{--route-accent:#60a5fa;--route-ink-l:#1d58b8;--route-bg:rgba(96,165,250,.16);--route-step:'03'}
html[data-theme] body.home-astra #start-here .route-path[data-route-preview=watchlist]{--route-accent:#c084fc;--route-ink-l:#6d35b5;--route-bg:rgba(192,132,252,.16);--route-step:'04'}
html[data-theme=light] body.home-astra #start-here .route-path[data-route-preview=finance]{--route-accent:#15803d;--route-bg:rgba(21,128,61,.12)}
html[data-theme=light] body.home-astra #start-here .route-path[data-route-preview=thesis]{--route-accent:#b45309;--route-bg:rgba(180,83,9,.12)}
html[data-theme=light] body.home-astra #start-here .route-path[data-route-preview=ai]{--route-accent:#1d4ed8;--route-bg:rgba(29,78,216,.12)}
html[data-theme=light] body.home-astra #start-here .route-path[data-route-preview=watchlist]{--route-accent:#6d28d9;--route-bg:rgba(109,40,217,.12)}

html[data-theme] body.home-astra #start-here .route-path,
html[data-theme=dark] body.home-astra #start-here .route-path{
 position:relative!important;
 display:grid!important;
 grid-template-columns:54px minmax(0,1fr) auto!important;
 align-items:center!important;
 gap:18px!important;
 padding:20px 14px 20px 0!important;
 margin:0!important;
 background:transparent!important;
 border:0!important;
 border-bottom:1px solid color-mix(in srgb,var(--route-accent) 24%,var(--a-line))!important;
 border-radius:0!important;
 box-shadow:none!important;
 transition:transform 240ms cubic-bezier(.22,1,.36,1),background 240ms ease,border-color 240ms ease!important;
}
html[data-theme] body.home-astra #start-here .route-path::after{
 content:'';
 position:absolute;
 left:54px;
 right:0;
 bottom:-1px;
 height:2px;
 background:linear-gradient(90deg,var(--route-accent) 0%,transparent 85%);
 transform:scaleX(0);
 transform-origin:left center;
 transition:transform 280ms cubic-bezier(.22,1,.36,1);
 pointer-events:none;
}
html[data-theme] body.home-astra #start-here .route-path .route-stamp{
 position:relative!important;
 z-index:1!important;
 width:52px!important;
 height:52px!important;
 border-radius:50%!important;
 display:grid!important;
 place-items:center!important;
 font-size:23px!important;
 background:radial-gradient(circle at 32% 28%,var(--route-bg),rgba(13,25,43,.92))!important;
 border:1.5px solid color-mix(in srgb,var(--route-accent) 68%,transparent)!important;
 box-shadow:0 6px 18px rgba(0,0,0,.28),0 0 0 4px rgba(11,22,38,.75)!important;
 transition:transform 260ms cubic-bezier(.22,1,.36,1),box-shadow 260ms ease,border-color 260ms ease!important;
}
html[data-theme=light] body.home-astra #start-here .route-path .route-stamp{
 background:radial-gradient(circle at 32% 28%,#ffffff 0%,color-mix(in srgb,var(--route-accent) 16%,#eef4fb) 100%)!important;
 box-shadow:0 6px 16px rgba(24,52,86,.1),0 0 0 4px #eef4fb!important;
}
html[data-theme] body.home-astra #start-here .route-path .route-stamp::after{
 content:var(--route-step);
 position:absolute;
 top:-5px;
 right:-5px;
 padding:1px 5px;
 border-radius:999px;
 font:700 9.5px/1.2 'AK Thai','Google Sans','Plus Jakarta Sans',sans-serif;
 letter-spacing:.04em;
 background:var(--route-accent);
 color:#07111f;
 box-shadow:0 2px 6px rgba(0,0,0,.35);
}
html[data-theme=light] body.home-astra #start-here .route-path .route-stamp::after{
 color:#ffffff;
}
html[data-theme] body.home-astra #start-here .route-path h3{
 font:600 20px/1.32 'AK Thai','Google Sans',Sarabun,sans-serif!important;
 margin:0 0 3px!important;
 transition:transform 240ms cubic-bezier(.22,1,.36,1),color 220ms ease!important;
}
html[data-theme] body.home-astra #start-here .route-path p{
 font-size:14.5px!important;
 line-height:1.5!important;
 margin:0!important;
}
html[data-theme] body.home-astra #start-here .route-path .route-arrow{
 width:36px!important;
 height:36px!important;
 border-radius:999px!important;
 display:grid!important;
 place-items:center!important;
 font-size:17px!important;
 font-weight:700!important;
 color:var(--route-accent)!important;
 border:1px solid color-mix(in srgb,var(--route-accent) 48%,transparent)!important;
 background:color-mix(in srgb,var(--route-accent) 10%,transparent)!important;
 transition:transform 240ms cubic-bezier(.22,1,.36,1),background 220ms ease,color 220ms ease,box-shadow 220ms ease!important;
}
html[data-theme] body.home-astra #start-here .route-path:is(:hover,:focus-visible,[data-route-active]){
 background:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--route-accent) 11%,transparent) 18%,transparent 96%)!important;
 border-bottom-color:var(--route-accent)!important;
}
html[data-theme] body.home-astra #start-here .route-path:is(:hover,:focus-visible,[data-route-active])::after{
 transform:scaleX(1);
}
html[data-theme] body.home-astra #start-here .route-path:is(:hover,:focus-visible,[data-route-active]) .route-stamp{
 transform:scale(1.08) translateY(-1px);
 border-color:var(--route-accent)!important;
 box-shadow:0 0 22px color-mix(in srgb,var(--route-accent) 48%,transparent),0 0 0 4px rgba(11,22,38,.8)!important;
}
html[data-theme=light] body.home-astra #start-here .route-path:is(:hover,:focus-visible,[data-route-active]) .route-stamp{
 box-shadow:0 8px 20px color-mix(in srgb,var(--route-accent) 28%,transparent),0 0 0 4px #eef4fb!important;
}
html[data-theme] body.home-astra #start-here .route-path:is(:hover,:focus-visible,[data-route-active]) h3{
 transform:translateX(4px);
 color:var(--route-accent)!important;
}
html[data-theme=light] body.home-astra #start-here .route-path:is(:hover,:focus-visible,[data-route-active]) h3{
 color:var(--route-ink-l)!important;
}
html[data-theme] body.home-astra #start-here .route-path:is(:hover,:focus-visible,[data-route-active]) .route-arrow{
 background:var(--route-accent)!important;
 color:#07111f!important;
 border-color:var(--route-accent)!important;
 transform:translate(3px,-2px);
 box-shadow:0 4px 14px color-mix(in srgb,var(--route-accent) 38%,transparent);
}
html[data-theme=light] body.home-astra #start-here .route-path:is(:hover,:focus-visible,[data-route-active]) .route-arrow{
 color:#ffffff!important;
}
/* The two columns need 924px plus section gutters and the browser scrollbar. */
@media(max-width:1024px){
 html[data-theme] body.home-astra #start-here .ex-wrap.start-layout{
  grid-template-columns:1fr!important;
  width:calc(100% - 32px)!important;
  gap:28px!important;
 }
 html[data-theme] body.home-astra #start-here .route-preview{
  max-width:none!important;
 }
 html[data-theme] body.home-astra #start-here .route-preview.has-shot .preview-body,
 html[data-theme] body.home-astra #start-here .route-preview.has-shot .preview-shot{
  min-height:196px!important;
 }
}

/* 4. Navigator Bar (.ak-shell) Luxury Craft:
      - Brand pill with warm starlight ring
      - Complete 6-world category palette (including contact LINE emerald)
      - Synchronized glow when hovering corresponding Home portal
      - Quieted translucent utility controls so world links & gold บัญชี CTA lead */
body.home-astra [data-world=contact],
body.home-astra .ak-shell .aknav-link[data-world=contact]{
 --world-edge:#22c55e;
 --world-bg:#d6f5e3;
 --w:#22c55e;
 --w-ink-l:#0f6e38;
 --w-ink-d:#9ef5be;
}
html[data-theme=dark] body.home-astra [data-world=contact],
html[data-theme=dark] body.home-astra .ak-shell .aknav-link[data-world=contact]{
 --world-edge:#57d98a;
 --world-bg:#143d29;
}
html[data-theme] body.home-astra .ak-shell .aknav-logo .ak-brand-face{
 box-shadow:0 0 0 2px rgba(212,175,92,.65),0 0 14px rgba(212,175,92,.28)!important;
 transition:transform 220ms ease,box-shadow 220ms ease!important;
}
html[data-theme] body.home-astra .ak-shell .aknav-logo:is(:hover,:focus-visible) .ak-brand-face{
 transform:scale(1.06);
 box-shadow:0 0 0 2px #f5d285,0 0 18px rgba(245,210,133,.5)!important;
}
html[data-theme=dark] body.home-astra .ak-shell .ak-worlds{
 background:linear-gradient(180deg,rgba(18,32,54,.84) 0%,rgba(10,19,35,.9) 100%)!important;
 border:1px solid rgba(154,186,230,.24)!important;
 box-shadow:0 10px 28px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
html[data-theme=light] body.home-astra .ak-shell .ak-worlds{
 background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(240,246,253,.92) 100%)!important;
 border:1px solid rgba(114,148,190,.28)!important;
 box-shadow:0 10px 24px -12px rgba(24,52,86,.16),inset 0 1px 0 #ffffff!important;
}
html[data-theme] body.home-astra .ak-shell .aknav-link[data-world]{
 position:relative;
 transition:transform 180ms cubic-bezier(.22,1,.36,1),background 180ms ease,color 180ms ease,box-shadow 180ms ease!important;
}
/* Primary Finance subtle dot indicator in navbar */
html[data-theme] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=finance]::after{
 content:'';
 width:5px;
 height:5px;
 border-radius:50%;
 background:var(--world-edge);
 box-shadow:0 0 6px var(--world-edge);
 margin-left:2px;
 flex-shrink:0;
}
html[data-theme] body.home-astra .ak-shell .aknav-link[data-world]:is(:hover,:focus-visible,[aria-current=page]),
html[data-theme] body.home-astra[data-world=about] .ak-shell .ak-worlds .aknav-link[data-world=about],
html[data-theme] body.home-astra[data-world=finance] .ak-shell .ak-worlds .aknav-link[data-world=finance],
html[data-theme] body.home-astra[data-world=knowledge] .ak-shell .ak-worlds .aknav-link[data-world=knowledge],
html[data-theme] body.home-astra[data-world=focus] .ak-shell .ak-worlds .aknav-link[data-world=focus],
html[data-theme] body.home-astra[data-world=interests] .ak-shell .ak-worlds .aknav-link[data-world=interests]{
 transform:translateY(-1px);
 color:var(--w-ink-l)!important;
 background:var(--world-bg)!important;
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--world-edge) 55%,transparent),0 4px 12px color-mix(in srgb,var(--world-edge) 22%,transparent)!important;
}
html[data-theme=dark] body.home-astra .ak-shell .aknav-link[data-world]:is(:hover,:focus-visible,[aria-current=page]),
html[data-theme=dark] body.home-astra[data-world=about] .ak-shell .ak-worlds .aknav-link[data-world=about],
html[data-theme=dark] body.home-astra[data-world=finance] .ak-shell .ak-worlds .aknav-link[data-world=finance],
html[data-theme=dark] body.home-astra[data-world=knowledge] .ak-shell .ak-worlds .aknav-link[data-world=knowledge],
html[data-theme=dark] body.home-astra[data-world=focus] .ak-shell .ak-worlds .aknav-link[data-world=focus],
html[data-theme=dark] body.home-astra[data-world=interests] .ak-shell .ak-worlds .aknav-link[data-world=interests]{
 color:var(--w-ink-d)!important;
}
/* Quiet the 3 utility toggles (.ak-theme, .ak-motion, .ak-sound) so gold บัญชี CTA stands out */
@media(min-width:1025px){
 html[data-theme=dark] body.home-astra .ak-shell .ak-controls :is(.ak-theme,.ak-motion,.ak-sound){
  height:36px!important;
  min-height:36px!important;
  padding:0 11px!important;
  font-size:12px!important;
  background:rgba(15,28,48,.58)!important;
  border:1px solid rgba(158,188,228,.2)!important;
  color:#d7e3f4!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
 }
 html[data-theme=dark] body.home-astra .ak-shell .ak-controls :is(.ak-theme,.ak-motion,.ak-sound):hover{
  background:rgba(28,48,78,.78)!important;
  border-color:rgba(226,201,143,.45)!important;
  color:#ffffff!important;
 }
 html[data-theme=light] body.home-astra .ak-shell .ak-controls :is(.ak-theme,.ak-motion,.ak-sound){
  height:36px!important;
  min-height:36px!important;
  padding:0 11px!important;
  font-size:12px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(100,134,176,.24)!important;
  color:#1d3552!important;
 }
 html[data-theme=light] body.home-astra .ak-shell .ak-controls :is(.ak-theme,.ak-motion,.ak-sound):hover{
  background:#ffffff!important;
  border-color:#2b5486!important;
 }
 html[data-theme] body.home-astra .ak-shell .ak-controls .auth-nav-btn{
  box-shadow:0 4px 14px rgba(214,172,78,.32),inset 0 1px 0 rgba(255,255,255,.65)!important;
  transition:transform 180ms ease,box-shadow 180ms ease!important;
 }
 html[data-theme] body.home-astra .ak-shell .ak-controls .auth-nav-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(214,172,78,.48),inset 0 1px 0 rgba(255,255,255,.8)!important;
 }
}

/* ==========================================================================
   A12 Simply Dock Harbor Diorama & Page-Wide Hover Playfulness (Audi 2026-10-20):
   "ที่logo simply dockมันยังดูโล่งๆไหม แล้วจำกฎskillด้วยว่าตอนhoverพยายามทำให้มันมีลูกเล่นเสมอ"
   ========================================================================== */

/* 1. Simply Dock Harbor Diorama (#community):
      Replaces the lonely 260px sticker with a full 356px Harbor Arch stage,
      warm lantern aura, water reflection ring, Kungki & Poojang pier companions,
      and 3 floating Discord room beacons that fan out in 3D on hover. */
html[data-theme] body.home-astra .home-community{
 max-width:1180px!important;
 width:min(1180px,calc(100% - 64px))!important;
 margin-inline:auto!important;
 padding:64px 0!important;
 grid-template-columns:minmax(360px,1fr) minmax(460px,1.15fr)!important;
 gap:56px!important;
 align-items:center!important;
}
html[data-theme] body.home-astra .community-visual{
 position:relative!important;
 min-height:430px!important;
 display:grid!important;
 place-items:center!important;
 isolation:isolate;
}
html[data-theme] body.home-astra .dock-harbor-stage{
 position:relative;
 width:min(440px,100%);
 min-height:420px;
 display:grid;
 place-items:center;
 perspective:960px;
 transform-style:preserve-3d;
}
/* Outer ambient lantern & lake-sky aura behind the arch */
html[data-theme] body.home-astra .dock-harbor-aura{
 position:absolute;
 inset:4px 0 22px;
 border-radius:50%;
 background:
  radial-gradient(circle at 72% 32%,rgba(255,212,118,.48) 0%,rgba(251,180,68,.22) 34%,transparent 66%),
  radial-gradient(circle at 38% 58%,rgba(56,189,248,.24) 0%,rgba(88,101,242,.18) 46%,transparent 74%);
 filter:blur(22px);
 z-index:0;
 pointer-events:none;
 transition:transform 460ms cubic-bezier(.22,1,.36,1),opacity 380ms ease,filter 380ms ease;
}
html[data-theme=light] body.home-astra .dock-harbor-aura{
 background:
  radial-gradient(circle at 72% 32%,rgba(245,176,66,.42) 0%,rgba(245,208,125,.22) 36%,transparent 68%),
  radial-gradient(circle at 38% 58%,rgba(59,130,246,.22) 0%,rgba(56,189,248,.14) 48%,transparent 74%);
}
/* Subtle golden/cyan harbor arch halo ring outside the frame — never covers the sign */
html[data-theme] body.home-astra .dock-orbit-ring{
 position:absolute;
 width:398px;
 height:398px;
 max-width:calc(100% - 8px);
 border-radius:50% 50% 28px 28px;
 border:1px dashed rgba(245,210,133,.32);
 box-shadow:0 0 32px rgba(245,210,133,.12),inset 0 0 28px rgba(56,189,248,.1);
 transform:rotate(-6deg);
 z-index:0;
 pointer-events:none;
 transition:transform 520ms cubic-bezier(.22,1,.36,1),border-color 360ms ease,box-shadow 360ms ease;
}
html[data-theme=light] body.home-astra .dock-orbit-ring{
 border-color:rgba(196,148,66,.38);
 box-shadow:0 0 28px rgba(245,184,75,.18),inset 0 0 24px rgba(59,130,246,.1);
}
/* Ambient firefly / harbor light motes floating strictly outside the arch */
html[data-theme] body.home-astra .dock-fireflies{
 position:absolute;
 inset:0;
 z-index:1;
 pointer-events:none;
}
html[data-theme] body.home-astra .dock-mote{
 position:absolute;
 border-radius:50%;
 background:#ffe49e;
 box-shadow:0 0 10px 2px rgba(255,216,120,.85),0 0 20px 4px rgba(251,191,36,.45);
 opacity:.78;
 animation:dockMoteFloat 4.6s ease-in-out infinite alternate;
 transition:transform 460ms cubic-bezier(.22,1,.36,1),opacity 320ms ease,box-shadow 320ms ease;
}
html[data-theme=light] body.home-astra .dock-mote{
 background:#f59e0b;
 box-shadow:0 0 10px 2px rgba(245,158,11,.65),0 0 18px 4px rgba(251,191,36,.38);
}
html[data-theme] body.home-astra .dock-mote.mote-1{width:7px;height:7px;top:16%;right:4%;animation-delay:0s}
html[data-theme] body.home-astra .dock-mote.mote-2{width:5px;height:5px;top:34%;right:0%;animation-delay:-1.2s}
html[data-theme] body.home-astra .dock-mote.mote-3{width:6px;height:6px;top:14%;left:8%;background:#7dd3fc;box-shadow:0 0 10px 2px rgba(125,211,252,.82),0 0 18px 4px rgba(56,189,248,.4);animation-delay:-2.1s}
html[data-theme] body.home-astra .dock-mote.mote-4{width:5px;height:5px;bottom:24%;left:2%;animation-delay:-3.1s}
html[data-theme] body.home-astra .dock-mote.mote-5{width:6px;height:6px;bottom:20%;right:3%;background:#7dd3fc;box-shadow:0 0 10px 2px rgba(125,211,252,.82),0 0 18px 4px rgba(56,189,248,.4);animation-delay:-1.7s}
@keyframes dockMoteFloat{
 0%{transform:translate3d(0,0,0) scale(.92);opacity:.55}
 100%{transform:translate3d(0,-10px,0) scale(1.18);opacity:.96}
}
/* Concentric harbor water ripple rings below the pier */
html[data-theme] body.home-astra .dock-water-ring{
 position:absolute;
 bottom:6px;
 left:5%;
 right:5%;
 height:66px;
 border-radius:50%;
 border:1.5px solid rgba(125,211,252,.36);
 background:
  radial-gradient(ellipse at 50% 50%,rgba(56,189,248,.2) 0%,rgba(251,191,36,.1) 42%,transparent 74%);
 box-shadow:0 0 32px rgba(56,189,248,.2),inset 0 0 20px rgba(255,216,128,.16);
 transform:rotate(-3.5deg);
 z-index:0;
 pointer-events:none;
 transition:transform 460ms cubic-bezier(.22,1,.36,1),border-color 340ms ease,box-shadow 340ms ease;
}
html[data-theme] body.home-astra .dock-water-ring::after{
 content:'';
 position:absolute;
 inset:10px 14%;
 border-radius:50%;
 border:1px solid rgba(245,210,133,.32);
 pointer-events:none;
 transition:transform 460ms cubic-bezier(.22,1,.36,1),border-color 340ms ease;
}
html[data-theme=light] body.home-astra .dock-water-ring{
 border-color:rgba(59,130,246,.38);
 background:radial-gradient(ellipse at 50% 50%,rgba(96,165,250,.22) 0%,rgba(251,191,36,.12) 52%,transparent 78%);
}
/* Clean, generously sized Simply Dock arch card with zero obstruction */
html[data-theme] body.home-astra .community-dock-card{
 position:relative!important;
 z-index:2!important;
 max-width:372px!important;
 width:100%!important;
 margin:0 auto!important;
 border-radius:50% 50% 18px 18px!important;
 border:2px solid rgba(245,210,133,.52)!important;
 box-shadow:
  0 26px 56px -12px rgba(3,9,23,.72),
  0 0 38px rgba(251,191,36,.2),
  0 0 0 6px rgba(15,29,50,.55)!important;
 transform:rotate(-3.5deg) translateZ(0)!important;
 translate:none!important;
 rotate:none!important;
 transition:transform 440ms cubic-bezier(.22,1,.36,1),box-shadow 360ms ease,border-color 320ms ease!important;
}
html[data-theme=light] body.home-astra .community-dock-card{
 border:3px solid #fff8ea!important;
 box-shadow:
  0 24px 48px -12px rgba(24,46,74,.28),
  0 0 0 2px rgba(205,168,102,.58),
  0 0 34px rgba(245,184,75,.24)!important;
}
html[data-theme] body.home-astra .community-dock-card img{
 transition:transform 500ms cubic-bezier(.22,1,.36,1),filter 360ms ease!important;
}
/* Warm golden lantern beam radiating from the hanging lantern on the right of the sign */
html[data-theme] body.home-astra .dock-lantern-beam{
 position:absolute;
 right:6%;
 top:22%;
 width:42%;
 height:44%;
 border-radius:50%;
 background:radial-gradient(circle at 52% 48%,rgba(255,232,162,.62) 0%,rgba(255,194,88,.3) 38%,transparent 72%);
 mix-blend-mode:screen;
 pointer-events:none;
 z-index:2;
 opacity:.72;
 transition:transform 440ms cubic-bezier(.22,1,.36,1),opacity 340ms ease;
}
/* Glass rim light sweep on hover */
html[data-theme] body.home-astra .dock-sheen{
 position:absolute;
 inset:0;
 background:linear-gradient(118deg,transparent 24%,rgba(255,244,214,.22) 46%,rgba(125,211,252,.14) 54%,transparent 74%);
 transform:translateX(-120%);
 pointer-events:none;
 z-index:3;
 transition:transform 680ms cubic-bezier(.22,1,.36,1);
}
html[data-theme] body.home-astra .community-dock-pill{
 z-index:5!important;
 bottom:16px!important;
 left:0!important;
 right:0!important;
 width:max-content!important;
 max-width:calc(100% - 40px)!important;
 margin-inline:auto!important;
 justify-content:center!important;
 gap:8px!important;
 padding:8px 18px!important;
 border-radius:999px!important;
 background:rgba(12,24,42,.92)!important;
 border:1px solid rgba(148,184,234,.4)!important;
 box-shadow:0 10px 24px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.16)!important;
 transition:transform 300ms cubic-bezier(.22,1,.36,1),background 260ms ease,border-color 260ms ease,box-shadow 260ms ease!important;
}
html[data-theme] body.home-astra .community-dock-pill .dock-arr{
 display:inline-block;
 transition:transform 260ms cubic-bezier(.22,1,.36,1);
}

/* Simply Dock Hover Effects: Arch straightens & lifts, lantern flares warmly,
   glass sheen sweeps across, outer orbit & water ripples expand, fireflies rise */
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .dock-harbor-aura{
 transform:scale(1.14);
 filter:blur(16px);
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .dock-orbit-ring{
 transform:rotate(2deg) scale(1.045);
 border-color:rgba(245,210,133,.68);
 box-shadow:0 0 42px rgba(245,210,133,.26),inset 0 0 32px rgba(56,189,248,.18);
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .dock-mote{
 transform:translate3d(0,-16px,0) scale(1.35);
 opacity:1;
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .dock-water-ring{
 transform:rotate(0deg) scaleX(1.08);
 border-color:rgba(245,210,133,.66);
 box-shadow:0 0 38px rgba(245,210,133,.3),0 0 26px rgba(56,189,248,.26);
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .dock-water-ring::after{
 transform:scaleX(1.06);
 border-color:rgba(125,211,252,.58);
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .community-dock-card,
html[data-theme] body.home-astra .community-dock-card:is(:hover,:focus-visible){
 transform:translate3d(0,-10px,20px) rotate(0deg) scale(1.035)!important;
 border-color:#f5d285!important;
 box-shadow:
  0 30px 64px -12px rgba(3,9,23,.78),
  0 0 46px rgba(251,191,36,.36),
  0 0 0 6px rgba(245,210,133,.22)!important;
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .community-dock-card img{
 transform:scale(1.05);
 filter:saturate(1.08) brightness(1.05);
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .dock-lantern-beam{
 transform:scale(1.28);
 opacity:1;
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .dock-sheen{
 transform:translateX(120%);
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .community-dock-pill{
 background:rgba(20,38,66,.96)!important;
 border-color:#77c69d!important;
 transform:translateY(-3px);
 box-shadow:0 12px 28px rgba(0,0,0,.5),0 0 18px rgba(52,211,153,.34)!important;
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .community-dock-pill .dock-arr{
 transform:translate(4px,-2px);
 color:#77c69d;
}

/* Left-side Simply Dock chips & Discord CTA button hover playfulness */
html[data-theme] body.home-astra .community-chips{
 gap:12px!important;
}
html[data-theme] body.home-astra .community-chip{
 padding:8px 15px!important;
 border-radius:999px!important;
 background:rgba(20,38,64,.62)!important;
 border:1px solid rgba(148,184,234,.26)!important;
 color:var(--a-ink)!important;
 transition:transform 240ms cubic-bezier(.22,1,.36,1),border-color 220ms ease,box-shadow 220ms ease,background 220ms ease!important;
 cursor:default;
}
html[data-theme=light] body.home-astra .community-chip{
 background:rgba(255,255,255,.82)!important;
 border-color:rgba(100,138,184,.3)!important;
}

html[data-theme] body.home-astra .community-discord-btn{
 position:relative;
 overflow:hidden;
 padding:12px 22px!important;
 border-radius:12px!important;
 background:linear-gradient(135deg,#5865f2 0%,#4752c4 100%)!important;
 box-shadow:0 6px 0 #2c3589,0 12px 28px rgba(88,101,242,.36)!important;
 transition:transform 240ms cubic-bezier(.22,1,.36,1),box-shadow 240ms ease,filter 240ms ease!important;
}
html[data-theme] body.home-astra .community-discord-btn svg,
html[data-theme] body.home-astra .community-discord-btn .btn-arr{
 transition:transform 260ms cubic-bezier(.22,1,.36,1);
}
html[data-theme] body.home-astra .community-discord-btn:is(:hover,:focus-visible){
 transform:translateY(-4px)!important;
 translate:none!important;
 filter:brightness(1.07);
 box-shadow:0 9px 0 #2c3589,0 18px 36px rgba(88,101,242,.52),0 0 22px rgba(125,211,252,.32)!important;
}
html[data-theme] body.home-astra .community-discord-btn:is(:hover,:focus-visible) svg{
 transform:rotate(-10deg) scale(1.16);
}
html[data-theme] body.home-astra .community-discord-btn:is(:hover,:focus-visible) .btn-arr{
 transform:translate(4px,-2px);
}

@media(max-width:900px){
 html[data-theme] body.home-astra .home-community{
  grid-template-columns:1fr!important;
  width:calc(100% - 32px)!important;
  gap:36px!important;
 }
 html[data-theme] body.home-astra .dock-harbor-stage{
  min-height:350px;
 }
 html[data-theme] body.home-astra .dock-orbit-ring{
  width:328px;
  height:328px;
 }
 html[data-theme] body.home-astra .community-dock-card{
  max-width:316px!important;
 }
}

/* ==========================================================================
   2. Page-Wide Signature Hover Playfulness ("ตอน hover พยายามทำให้มันมีลูกเล่นเสมอ")
   ========================================================================== */

/* 2A. Hero Guides (Kungki & Poojang) + 16-bit Toggle Pill */
html[data-theme] body.home-astra .guide-character{
 transition:transform 280ms cubic-bezier(.22,1,.36,1),filter 260ms ease!important;
}
html[data-theme] body.home-astra .guide-character:first-child:is(:hover,:focus-visible){
 transform:translateY(-9px) rotate(-5deg) scale(1.08)!important;
 filter:drop-shadow(0 12px 18px rgba(4,10,24,.45)) drop-shadow(0 0 16px rgba(245,210,133,.55));
}
html[data-theme] body.home-astra .guide-character:last-child:is(:hover,:focus-visible){
 transform:translateY(-9px) rotate(5deg) scale(1.08)!important;
 filter:drop-shadow(0 12px 18px rgba(4,10,24,.45)) drop-shadow(0 0 16px rgba(125,211,252,.55));
}
html[data-theme] body.home-astra .guide-style:not(.aku-control){
 transition:transform 220ms cubic-bezier(.22,1,.36,1),background 220ms ease,border-color 220ms ease,box-shadow 220ms ease!important;
}
html[data-theme=dark] body.home-astra .guide-style:not(.aku-control){
 background:var(--aku-paper)!important;
 color:var(--aku-ink)!important;
 border:1.5px solid var(--aku-paper-line)!important;
 box-shadow:0 4px 12px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
html[data-theme=dark] body.home-astra .guide-style:not(.aku-control):is(:hover,:focus-visible){
 background:var(--aku-paper-2)!important;
 color:var(--aku-ink)!important;
 border-color:var(--aku-accent)!important;
}
html[data-theme] body.home-astra .guide-style:not(.aku-control):is(:hover,:focus-visible){
 transform:translateY(-2px) scale(1.04);
 border-color:#f5d285!important;
 box-shadow:0 6px 16px rgba(0,0,0,.25),0 0 14px rgba(245,210,133,.32);
}

/* 2B. 4 World Portals (.worlds .world): Oval lift, category title tint, and launching arrow circle */
html[data-theme] body.home-astra .worlds .portal-window{
 transition:transform 340ms cubic-bezier(.22,1,.36,1),box-shadow 320ms ease,border-color 280ms ease!important;
}
html[data-theme] body.home-astra .worlds .world .world-title{
 transition:transform 240ms cubic-bezier(.22,1,.36,1),color 220ms ease!important;
}
html[data-theme] body.home-astra .worlds .world .world-arrow{
 border-radius:999px!important;
 display:grid!important;
 place-items:center!important;
 transition:transform 260ms cubic-bezier(.22,1,.36,1),background 220ms ease,color 220ms ease,box-shadow 220ms ease!important;
}
html[data-theme] body.home-astra .worlds .world:is(:hover,:focus-visible,[data-preview-state]) .portal-window{
 transform:translateY(-6px) scale(1.035);
 box-shadow:0 18px 36px -10px rgba(4,10,24,.52),0 0 28px color-mix(in srgb,var(--world-edge) 45%,transparent)!important;
}
html[data-theme] body.home-astra .worlds .world:is(:hover,:focus-visible,[data-preview-state]) .world-title{
 transform:translateX(3px);
 color:var(--world-edge)!important;
}
html[data-theme=light] body.home-astra .worlds .world:is(:hover,:focus-visible,[data-preview-state]) .world-title{
 color:var(--w-ink-l)!important;
}
html[data-theme] body.home-astra .worlds .world:is(:hover,:focus-visible,[data-preview-state]) .world-arrow{
 transform:translate(3px,-3px) scale(1.12);
 background:var(--world-edge)!important;
 color:#07111f!important;
 box-shadow:0 4px 12px color-mix(in srgb,var(--world-edge) 42%,transparent)!important;
}
html[data-theme=light] body.home-astra .worlds .world:is(:hover,:focus-visible,[data-preview-state]) .world-arrow{
 background:#142f49!important;
 color:#ffffff!important;
 border-color:#142f49!important;
 box-shadow:0 6px 14px rgba(20,47,73,.28)!important;
}

/* 2C. Latest Videos (.shelf-video) & Stock Hub Boarding Passes (.deepdive-card NFLX / PLTR) */
html[data-theme] body.home-astra .shelf-video{
 transition:transform 320ms cubic-bezier(.22,1,.36,1),box-shadow 300ms ease!important;
}
html[data-theme] body.home-astra .shelf-video .latest-cover img{
 transition:transform 420ms cubic-bezier(.22,1,.36,1),filter 300ms ease!important;
}
html[data-theme] body.home-astra .shelf-video:is(:hover,:focus-within){
 transform:translateY(-7px) rotate(-.8deg)!important;
}
html[data-theme] body.home-astra .shelf-video:is(:hover,:focus-within) .latest-cover img{
 transform:scale(1.05);
 filter:saturate(1.08);
}

/* Stock Hub folios: static reading material with interactive EP links */
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-card{
 transition:transform 340ms cubic-bezier(.22,1,.36,1),box-shadow 320ms ease!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-card .deepdive-logo-box{
 transition:transform 340ms cubic-bezier(.22,1,.36,1),box-shadow 300ms ease!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-card .ticker-badge{
 transition:transform 260ms cubic-bezier(.22,1,.36,1),background 240ms ease,box-shadow 240ms ease!important;
}




html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-primary-btn{
 transition:transform 240ms cubic-bezier(.22,1,.36,1),box-shadow 240ms ease,background 240ms ease,color 220ms ease,border-color 220ms ease!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-primary-btn .btn-arr{
 display:inline-block;
 transition:transform 240ms cubic-bezier(.22,1,.36,1),color 220ms ease;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-primary-btn:is(:hover,:focus-visible){
 transform:translateY(-3px) scale(1.02);
 background:#1a3360!important;
 color:#fff8ea!important;
 border-color:#f5d285!important;
 box-shadow:0 10px 22px rgba(11,24,44,.42),0 0 0 2px #f5d285!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-primary-btn:is(:hover,:focus-visible) :is(span,.btn-arr){
 color:#fff8ea!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-primary-btn:is(:hover,:focus-visible) .btn-arr{
 transform:translate(4px,-2px);
}
/* High-Contrast Hover Lock for .series-ep-btn (Audi 2026-10-22:
   "ตอนhoverดูเรื่อง สีด้วย อย่างอันนี้ชี้แล้วสีตอนhover มันไปทำให้อ่านtextไม่ออกเลย จำเข้าสกิลด้วย")
   Keep EP pills bright ivory (#ffffff) with deep navy ink (#0f172a, 17.8:1) and vivid amber ▶ (#b45309, 5.02:1)
   so neither text nor ::before play icon ever collides with a dark background on the gold stub. */
html[data-theme] body.home-astra .shelf-deepdives-grid .series-ep-btn{
 background:rgba(255,253,246,.82)!important;
 color:#1e293b!important;
 border:1px solid rgba(120,83,28,.44)!important;
 transition:transform 220ms cubic-bezier(.22,1,.36,1),background 220ms ease,color 220ms ease,box-shadow 220ms ease,border-color 220ms ease!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .series-ep-btn::before{
 color:#b45309!important;
 opacity:1!important;
 transition:transform 220ms ease,color 220ms ease,opacity 220ms ease!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .series-ep-btn:is(:hover,:focus-visible){
 transform:translateY(-3px) scale(1.06);
 background:#ffffff!important;
 color:#0f172a!important;
 border-color:#b45309!important;
 box-shadow:0 8px 18px rgba(42,31,11,.24),0 0 0 2px rgba(245,210,133,.82)!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .series-ep-btn:is(:hover,:focus-visible)::before{
 color:#b45309!important;
 opacity:1!important;
 transform:translateX(1.5px) scale(1.18);
}

/* 2D. #start-here Preview Window hover zoom & lift */
html[data-theme] body.home-astra #start-here .route-preview .preview-window{
 transition:transform 340ms cubic-bezier(.22,1,.36,1),box-shadow 320ms ease,border-color 280ms ease!important;
}
html[data-theme] body.home-astra #start-here .route-preview .preview-shot{
 transition:transform 480ms cubic-bezier(.22,1,.36,1)!important;
}
html[data-theme] body.home-astra #start-here:is(:hover,:focus-within) .route-preview .preview-window{
 transform:translateY(-5px);
 border-color:rgba(245,210,133,.52)!important;
 box-shadow:0 26px 54px -14px rgba(4,10,24,.64),0 0 32px rgba(56,189,248,.16)!important;
}
html[data-theme] body.home-astra #start-here .route-preview:hover .preview-shot{
 transform:scale(1.04);
}

/* 2E. Beta Lab (#members): Kungki lab bounce + Padlock wiggle + Symbol 3D pop + Spinning + button */
html[data-theme] body.home-astra .lab-mascot{
 transition:transform 360ms cubic-bezier(.22,1,.36,1),filter 320ms ease!important;
}
html[data-theme] body.home-astra .lab-intro:hover .lab-mascot{
 transform:translateY(-8px) rotate(-5deg) scale(1.06);
 filter:drop-shadow(0 14px 22px rgba(4,10,24,.5)) drop-shadow(0 0 18px rgba(96,165,250,.45));
}
html[data-theme] body.home-astra .lab-tool summary{
 transition:transform 260ms cubic-bezier(.22,1,.36,1),background 240ms ease!important;
}
html[data-theme] body.home-astra .lab-tool .tool-symbol,
html[data-theme] body.home-astra .lab-tool .lab-chain b,
html[data-theme] body.home-astra .lab-tool .tool-expand{
 display:inline-grid;
 place-items:center;
 transition:transform 280ms cubic-bezier(.22,1,.36,1),color 220ms ease,background 220ms ease,box-shadow 220ms ease!important;
}
html[data-theme] body.home-astra .lab-tool summary:is(:hover,:focus-visible){
 transform:translateX(6px);
}
html[data-theme] body.home-astra .lab-tool summary:is(:hover,:focus-visible) .tool-symbol{
 transform:scale(1.2) rotate(-8deg);
 filter:drop-shadow(0 0 12px rgba(96,165,250,.55));
}
html[data-theme] body.home-astra .lab-tool summary:is(:hover,:focus-visible) .lab-chain b{
 transform:rotate(-14deg) scale(1.12);
}
html[data-theme] body.home-astra .lab-tool summary:is(:hover,:focus-visible) .tool-expand{
 transform:rotate(90deg) scale(1.12);
 color:#f5d285!important;
}
html[data-theme=light] body.home-astra .lab-tool summary:is(:hover,:focus-visible) .tool-expand{
 color:#0f172a!important;
 border-color:#2563eb!important;
 background:rgba(37,99,235,.12)!important;
}

/* 2F. Community Poll, Idea Letter & Community Wall (#community-poll) */
html[data-theme] body.home-astra .poll-option{
 transition:transform 220ms cubic-bezier(.22,1,.36,1),border-color 220ms ease,box-shadow 220ms ease!important;
}
html[data-theme] body.home-astra .poll-option:hover{
 transform:translateX(5px);
 border-color:#f5d285!important;
 box-shadow:0 6px 16px rgba(0,0,0,.18);
}
html[data-theme] body.home-astra .idea-letter{
 transition:transform 320ms cubic-bezier(.22,1,.36,1),box-shadow 300ms ease!important;
}
html[data-theme] body.home-astra .idea-letter .idea-mascot{
 transition:transform 360ms cubic-bezier(.22,1,.36,1),filter 300ms ease!important;
}

html[data-theme] body.home-astra .idea-letter:is(:hover,:focus-within) .idea-mascot{
 transform:translateY(-8px) rotate(6deg) scale(1.07);
 filter:drop-shadow(0 10px 18px rgba(4,10,24,.42)) drop-shadow(0 0 14px rgba(245,210,133,.45));
}
html[data-theme] body.home-astra .wall-board .wn{
 transition:transform 320ms cubic-bezier(.22,1,.36,1),box-shadow 280ms ease!important;
}
html[data-theme] body.home-astra .wall-board:is(:hover,:focus-visible) .wn1{
 transform:translate(-6px,-7px) rotate(-11deg) scale(1.06)!important;
}
html[data-theme] body.home-astra .wall-board:is(:hover,:focus-visible) .wn2{
 transform:translate(0,-10px) rotate(5deg) scale(1.08)!important;
}
html[data-theme] body.home-astra .wall-board:is(:hover,:focus-visible) .wn3{
 transform:translate(7px,-6px) rotate(12deg) scale(1.06)!important;
}

/* 2G. Connect Directory (.connect-item — LINE, Facebook, TikTok, Instagram) */
html[data-theme] body.home-astra .connect-item.connect-line{--connect-accent:#06c755}
html[data-theme] body.home-astra .connect-item.connect-fb{--connect-accent:#1877f2}
html[data-theme] body.home-astra .connect-item.connect-tiktok{--connect-accent:#00f2fe}
html[data-theme] body.home-astra .connect-item.connect-ig{--connect-accent:#e1306c}
html[data-theme] body.home-astra .connect-item{
 position:relative;
 transition:transform 260ms cubic-bezier(.22,1,.36,1),background 260ms ease,border-color 260ms ease!important;
}
html[data-theme] body.home-astra .connect-item .connect-icon-box{
 transition:transform 280ms cubic-bezier(.22,1,.36,1),box-shadow 260ms ease!important;
}
html[data-theme] body.home-astra .connect-item .connect-cue{
 transition:transform 260ms cubic-bezier(.22,1,.36,1),background 240ms ease,color 240ms ease,border-color 240ms ease,box-shadow 240ms ease!important;
}
html[data-theme] body.home-astra .connect-item:is(:hover,:focus-visible){
 transform:translateX(6px);
 background:linear-gradient(90deg,color-mix(in srgb,var(--connect-accent) 12%,transparent) 0%,transparent 92%)!important;
}
html[data-theme] body.home-astra .connect-item:is(:hover,:focus-visible) .connect-icon-box{
 transform:translateY(-3px) scale(1.14) rotate(-7deg)!important;
 box-shadow:0 8px 20px color-mix(in srgb,var(--connect-accent) 42%,transparent)!important;
}
html[data-theme] body.home-astra .connect-item:is(:hover,:focus-visible) .connect-cue{
 transform:translate(3px,-2px);
 border-color:var(--connect-accent)!important;
 box-shadow:0 6px 16px color-mix(in srgb,var(--connect-accent) 28%,transparent)!important;
}

/* 2H. Coffee Support (#support — .coffee-qr receipt lift & tilt) */
html[data-theme] body.home-astra .coffee-qr{
 transition:transform 360ms cubic-bezier(.22,1,.36,1),box-shadow 320ms ease!important;
}
html[data-theme] body.home-astra .coffee-qr:is(:hover,:focus-visible){
 transform:translateY(-8px) rotate(2.5deg) scale(1.04)!important;
 box-shadow:0 24px 48px -10px rgba(4,10,24,.58),0 0 28px rgba(245,210,133,.32)!important;
}
html[data-theme] body.home-astra .coffee-copy a{
 display:inline-flex;
 align-items:center;
 gap:6px;
 transition:transform 220ms cubic-bezier(.22,1,.36,1),color 200ms ease!important;
}
html[data-theme] body.home-astra .coffee-copy a:is(:hover,:focus-visible){
 transform:translateX(4px) translateY(-1px);
 color:var(--a-primary)!important;
}

/* Respect paused motion, dockPaused, and prefers-reduced-motion */
body.home-astra[data-dock-paused=true] .dock-mote{animation:none!important}
html[data-motion=paused] body.home-astra :is(.dock-harbor-aura,.dock-orbit-ring,.dock-mote,.dock-water-ring,.dock-water-ring::after,.community-dock-card,.community-dock-card img,.dock-lantern-beam,.dock-sheen,.community-chip,.community-discord-btn,.guide-character,.guide-style:not(.aku-control),.shelf-video,.deepdive-card,.deepdive-logo-box,.lab-mascot,.lab-tool summary,.idea-letter,.idea-mascot,.wall-board .wn,.connect-item,.coffee-qr),
body.home-astra.paused :is(.dock-harbor-aura,.dock-orbit-ring,.dock-mote,.dock-water-ring,.dock-water-ring::after,.community-dock-card,.community-dock-card img,.dock-lantern-beam,.dock-sheen,.community-chip,.community-discord-btn,.guide-character,.guide-style:not(.aku-control),.shelf-video,.deepdive-card,.deepdive-logo-box,.lab-mascot,.lab-tool summary,.idea-letter,.idea-mascot,.wall-board .wn,.connect-item,.coffee-qr){
 transition:none!important;
 animation:none!important;
}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.home-astra :is(.dock-harbor-aura,.dock-orbit-ring,.dock-mote,.dock-water-ring,.dock-water-ring::after,.community-dock-card,.community-dock-card img,.dock-lantern-beam,.dock-sheen,.community-chip,.community-discord-btn,.guide-character,.guide-style:not(.aku-control),.shelf-video,.deepdive-card,.deepdive-logo-box,.lab-mascot,.lab-tool summary,.idea-letter,.idea-mascot,.wall-board .wn,.connect-item,.coffee-qr){
  transition:none!important;
  animation:none!important;
 }
}




/* ==========================================================================
   A14 Full-Page Wow Audit & Coffee Receipt Fix (Audi 2026-10-20):
   "เช็คหน้านี้ทั้งหน้าว่าโอเครรึยัง คนเข้ามาใช้จะว้าวรึยังว่าเว็ปเราdesignมาดี แล้วส่วน นี้ดียังหรือเล็กไปไหม"
   1. #support (สนับสนุนค่ากาแฟ): Expand .coffee-qr from 150px -> 264px so the
      printed receipt ("AUDIKUNG CAFÉ / 1 × ☕ กาแฟ ···· ใจล้วนๆ / สแกนจ่าย · ขอบคุณครับ")
      never clips on the right, and frame #support as a warm Café Counter showcase
      (eliminating the 750px empty gap) with a tactile gold "บันทึก QR ↗" button.
   2. #members (โซนสมาชิก): Keep Kungki & intro copy 100% razor-sharp (no scroll-reveal
      blur hold), enlarge Kungki lab companion, and give the 3 chained folders rich
      per-tool accent identity & tactile depth.
   3. #community-poll (มาช่วยตัดสินใจหน่อย / ฝากไอเดีย / กำแพงชุมชน): Fix the
      envelope wax seal overlapping "💌 ฝากไอเดีย" and align left & right columns
      so they end together with zero dead void.
   4. .home-connect (ติดตาม & ติดต่องาน): Elevate the 4 social rows into tactile
      platform-accented cards in Dark & Light modes.
   ========================================================================== */

/* 1. #support — Frameless on Sky (Audi 2026-10-20: "เอากล่องออกดีกว่าไหม") + Full Unclipped 264px Receipt Slip */
html[data-theme] body.home-astra #support.coffee-support{
 position:relative;
 max-width:960px!important;
 width:min(960px,calc(100% - 48px))!important;
 margin:28px auto 72px!important;
 padding:38px 12px 12px!important;
 display:grid!important;
 grid-template-columns:minmax(0,1fr) 264px!important;
 align-items:center!important;
 gap:48px!important;
 border-radius:0!important;
 border:0!important;
 border-top:1px solid var(--orb-line)!important;
 background:transparent!important;
 box-shadow:none!important;
 overflow:visible!important;
}
html[data-theme=light] body.home-astra #support.coffee-support{
 border:0!important;
 border-top:1px solid var(--orb-line)!important;
 background:transparent!important;
 box-shadow:none!important;
}
html[data-theme] body.home-astra .coffee-copy{
 display:flex;
 flex-direction:column;
 align-items:flex-start;
 gap:12px;
 max-width:480px;
}
html[data-theme] body.home-astra .coffee-copy>span{
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:5px 14px;
 border-radius:999px;
 font:600 13.5px/1.4 'AK Thai','Google Sans',Sarabun,sans-serif!important;
 color:#f5d285!important;
 background:rgba(245,210,133,.14);
 border:1px solid rgba(245,210,133,.34);
}
html[data-theme=light] body.home-astra .coffee-copy>span{
 color:#7c4d12!important;
 background:#faecc8;
 border-color:#dfc07c;
}
html[data-theme] body.home-astra .coffee-copy h2{
 font:600 clamp(30px,3.5vw,40px)/1.28 'AK Thai','Google Sans',Sarabun,sans-serif!important;
 color:var(--a-ink)!important;
 margin:2px 0 4px!important;
 letter-spacing:-.02em;
}
html[data-theme] body.home-astra .coffee-copy p{
 font:400 17px/1.7 'AK Thai','Google Sans',Sarabun,sans-serif!important;
 color:var(--a-copy)!important;
 margin:0 0 8px!important;
}
html[data-theme] body.home-astra .coffee-copy a{
 display:inline-flex!important;
 align-items:center!important;
 justify-content:center!important;
 gap:8px!important;
 min-height:46px!important;
 padding:10px 22px!important;
 border-radius:12px!important;
 font:600 15.5px/1.3 'AK Thai','Google Sans',Sarabun,sans-serif!important;
 text-decoration:none!important;
 color:#231a0b!important;
 background:linear-gradient(180deg,#f5dfa6 0%,#d4af5a 100%)!important;
 border:1px solid #f9e8bc!important;
 box-shadow:0 4px 0 #8c6b25,0 10px 22px rgba(212,175,90,.28)!important;
 transition:transform 220ms cubic-bezier(.22,1,.36,1),color 200ms ease,box-shadow 220ms ease,background 220ms ease!important;
}
html[data-theme] body.home-astra .coffee-copy a:is(:hover,:focus-visible){
 transform:translateY(-3px) scale(1.03)!important;
 color:#140e04!important;
 background:linear-gradient(180deg,#faecc4 0%,#deb965 100%)!important;
 box-shadow:0 6px 0 #8c6b25,0 14px 28px rgba(212,175,90,.42)!important;
}
/* Full-width 264px receipt slip so all 4 lines of monospace café receipt print cleanly */
html[data-theme] body.home-astra .coffee-qr{
 width:264px!important;
 max-width:264px!important;
 min-width:264px!important;
 padding:108px 20px 26px!important;
 margin:0 auto!important;
 box-sizing:border-box!important;
 rotate:2deg;
 box-shadow:0 22px 44px -14px rgba(4,10,24,.62)!important;
}
html[data-theme] body.home-astra .coffee-qr::before{
 left:14px!important;
 right:14px!important;
 top:18px!important;
 font-size:11.5px!important;
 line-height:1.55!important;
 letter-spacing:.01em!important;
 overflow:hidden;
}
html[data-theme] body.home-astra .coffee-qr img{
 display:block!important;
 width:100%!important;
 height:auto!important;
 padding:10px!important;
 border-radius:12px!important;
 background:#ffffff!important;
 box-shadow:inset 0 0 0 1px rgba(42,33,24,.1),0 4px 12px rgba(42,33,24,.08)!important;
 box-sizing:border-box!important;
}
@media(max-width:760px){
 html[data-theme] body.home-astra #support.coffee-support{
  grid-template-columns:1fr!important;
  padding:32px 24px!important;
  gap:28px!important;
  text-align:center;
 }
 html[data-theme] body.home-astra .coffee-copy{
  align-items:center;
  max-width:none;
 }
 html[data-theme] body.home-astra .coffee-qr{
  width:244px!important;
  max-width:244px!important;
  min-width:244px!important;
  rotate:0deg;
 }
}

/* 2. #members — Zero-Blur Lab Intro + Rich Tactile Chained Folders */
html[data-theme] body.home-astra #members :is(.lab-intro,.lab-intro>*,.lab-workbench,.lab-workbench>*){
 filter:none!important;
 opacity:1!important;
}
html[data-theme] body.home-astra #members .lab-mascot{
 filter:drop-shadow(0 10px 18px rgba(4,10,24,.36))!important;
}
html[data-theme] body.home-astra #members .lab-intro:hover .lab-mascot{
 filter:drop-shadow(0 14px 22px rgba(4,10,24,.5)) drop-shadow(0 0 18px rgba(96,165,250,.45))!important;
}
@media(min-width:721px){
 html[data-theme] body.home-astra #members .lab-intro{
  max-width:1040px!important;
  grid-template-columns:minmax(0,1fr) 190px!important;
  column-gap:36px!important;
 }
 html[data-theme] body.home-astra #members .lab-mascot{
  width:185px!important;
  height:195px!important;
 }
}
html[data-theme] body.home-astra #tool-stock-radar{--tool-accent:#34d399}
html[data-theme] body.home-astra #tool-stock-screener{--tool-accent:#60a5fa}
html[data-theme] body.home-astra #tool-0dte{--tool-accent:#f5d285}
html[data-theme=dark] body.home-astra .lab-tool{
 background:linear-gradient(160deg,#1d334e 0%,#132338 100%)!important;
 border:1.5px solid color-mix(in srgb,var(--tool-accent,#60a5fa) 38%,#475d78)!important;
 border-bottom:5px solid color-mix(in srgb,var(--tool-accent,#60a5fa) 48%,#0a1524)!important;
 box-shadow:0 18px 36px -16px rgba(3,9,22,.72),inset 0 1px 0 rgba(255,255,255,.1)!important;
 transition:transform 280ms cubic-bezier(.22,1,.36,1),border-color 240ms ease,box-shadow 260ms ease!important;
}
html[data-theme=dark] body.home-astra .lab-tool::before{
 background:linear-gradient(180deg,color-mix(in srgb,var(--tool-accent,#60a5fa) 22%,#263f5f),#1d334e)!important;
 border-color:color-mix(in srgb,var(--tool-accent,#60a5fa) 42%,#475d78)!important;
}
html[data-theme] body.home-astra .lab-tool:is(:hover,:focus-within,[open]){
 transform:translateY(-6px)!important;
 border-color:var(--tool-accent,#f5d285)!important;
 box-shadow:0 24px 44px -14px rgba(3,9,22,.65),0 0 24px color-mix(in srgb,var(--tool-accent,#f5d285) 24%,transparent)!important;
}

/* 3. #community-poll — Envelope Wax Seal Clearance & Balanced Column Bottoms */
@media(min-width:701px){
 html[data-theme] body.home-astra .conversation-layout{
  align-items:stretch!important;
 }
 html[data-theme] body.home-astra .conversation-side{
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:28px!important;
  height:100%!important;
 }
 html[data-theme] body.home-astra .idea-letter{
  padding:114px 26px 24px!important;
  margin-top:0!important;
 }
 html[data-theme] body.home-astra .idea-letter::before{
  height:78px!important;
 }
 html[data-theme] body.home-astra .idea-letter::after{
  top:48px!important;
  width:48px!important;
  height:48px!important;
  font-size:1.3rem!important;
 }
 html[data-theme] body.home-astra .idea-letter .idea-mascot{
  top:6px!important;
  right:14px!important;
  width:112px!important;
  height:126px!important;
 }
 html[data-theme] body.home-astra .wall-board{
  flex:1 1 auto!important;
  min-height:210px!important;
  padding:26px 24px!important;
  margin-top:0!important;
  align-content:center!important;
 }
}

/* 4. .home-connect — Tactile Social Directory Cards in Dark & Light Modes */
html[data-theme] body.home-astra .connect-directory{
 display:flex!important;
 flex-direction:column!important;
 gap:12px!important;
}
html[data-theme=dark] body.home-astra .connect-item{
 padding:16px 20px!important;
 border-radius:16px!important;
 border:1px solid rgba(148,184,234,.22)!important;
 background:linear-gradient(145deg,rgba(20,36,62,.72) 0%,rgba(12,23,41,.82) 100%)!important;
 box-shadow:0 12px 28px -16px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
html[data-theme=light] body.home-astra .connect-item{
 padding:16px 20px!important;
 border-radius:16px!important;
 border:1px solid rgba(114,148,190,.28)!important;
 background:linear-gradient(145deg,#ffffff 0%,#f3f7fc 100%)!important;
 box-shadow:0 10px 24px -16px rgba(24,52,86,.16),inset 0 1px 0 #ffffff!important;
}
html[data-theme] body.home-astra .connect-item:is(:hover,:focus-visible){
 transform:translateX(6px) translateY(-2px)!important;
 border-color:color-mix(in srgb,var(--connect-accent) 62%,transparent)!important;
 background:linear-gradient(90deg,color-mix(in srgb,var(--connect-accent) 15%,rgba(20,36,62,.85)) 0%,rgba(15,28,48,.9) 100%)!important;
 box-shadow:0 16px 32px -14px rgba(0,0,0,.5),0 0 22px color-mix(in srgb,var(--connect-accent) 22%,transparent)!important;
}
html[data-theme=light] body.home-astra .connect-item:is(:hover,:focus-visible){
 background:linear-gradient(90deg,color-mix(in srgb,var(--connect-accent) 12%,#ffffff) 0%,#ffffff 100%)!important;
 box-shadow:0 14px 28px -12px rgba(24,52,86,.2),0 0 18px color-mix(in srgb,var(--connect-accent) 18%,transparent)!important;
}


/* ==========================================================================
   A18 Craft Upgrade (Audi 2026-10-20):
   1. Fix rectangular border/box artifact around `👤 บัญชี` (.auth-nav-btn):
      "ตรง บัญชี มันมีขอบอะไรก็ไม่รู็อยู่ด้วยป่ะ"
   2. Flagship Emerald-Gold Aura on `📈 การเงิน · ลงทุน` (Navbar + Hero Portal):
      "แล้วที่ 📈 การเงิน · ลงทุน อันนี้ทำให้มันเด่นกว่าอันอื่นหน่อยไหม อาจจะมีออร่าหรืออะไรไหม เพระาเป็นfeatureหลัก"
   3. Authentic Hunter × Hunter Specialist Nen Aura (เน็นสายพิเศษแบบคุโรโร่) on
      `👋 สวัสดีครับ รู้จักออดี้` (.chrollo-card):
      "แล้วที่สวัสดีครับ รู้จักออดี้ ทำให้ฉันมีออร่าหรืออะไรหน่อยสิเหมือนผู้ใช้nen จากhunter x hunter คนล้อเป็นคุโรโร่"
   ========================================================================== */

/* 1. Zero Rectangular Box on `👤 บัญชี` Wrapper (.auth-nav-btn) — Move Gold Pill Glow to Inner Pill */
html[data-theme] body.home-astra .ak-shell .ak-controls .auth-nav-btn,
html[data-theme] body.home-astra .ak-shell .ak-controls .auth-nav-btn:hover,
html[data-theme] body.home-astra .ak-shell .ak-controls .auth-nav-btn:focus-visible{
 background:transparent!important;
 border:0!important;
 box-shadow:none!important;
 outline:none!important;
 padding:0!important;
 border-radius:999px!important;
}
html[data-theme] body.home-astra .ak-shell .ak-controls :is(.auth-nav-login,.auth-nav-account){
 border-radius:999px!important;
 box-shadow:0 4px 14px rgba(214,172,78,.28),inset 0 1px 0 rgba(255,255,255,.55)!important;
 transition:transform 180ms cubic-bezier(.22,1,.36,1),box-shadow 180ms ease,background 180ms ease,border-color 180ms ease!important;
}
html[data-theme] body.home-astra .ak-shell .ak-controls .auth-nav-btn:is(:hover,:focus-visible) :is(.auth-nav-login,.auth-nav-account){
 transform:translateY(-1px);
 box-shadow:0 6px 18px rgba(214,172,78,.46),inset 0 1px 0 rgba(255,255,255,.78)!important;
}

/* 2. Flagship Emerald-Gold Aura for `📈 การเงิน · ลงทุน` (Navbar + Hero World Portal) */
@keyframes astraFinanceNavAura{
 0%,100%{
  box-shadow:
   inset 0 0 0 1.5px rgba(52,211,153,.72),
   0 0 16px rgba(16,185,129,.36),
   0 0 28px rgba(245,210,133,.18);
 }
 50%{
  box-shadow:
   inset 0 0 0 1.5px rgba(167,243,208,.95),
   0 0 24px rgba(16,185,129,.58),
   0 0 38px rgba(245,210,133,.32);
 }
}
@keyframes astraFinancePortalAura{
 0%,100%{
  transform:rotate(-17deg) scale(1);
  opacity:.88;
 }
 50%{
  transform:rotate(-14deg) scale(1.06);
  opacity:1;
 }
}
html[data-theme=dark] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=finance]{
 font-weight:600!important;
 color:#c6f9df!important;
 background:linear-gradient(135deg,rgba(16,185,129,.26) 0%,rgba(245,210,133,.15) 100%)!important;
 box-shadow:
  inset 0 0 0 1.5px rgba(52,211,153,.72),
  0 0 18px rgba(16,185,129,.38),
  0 0 30px rgba(245,210,133,.2)!important;
 animation:astraFinanceNavAura 3.4s ease-in-out infinite;
}
html[data-theme=light] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=finance]{
 font-weight:600!important;
 color:#065f46!important;
 background:linear-gradient(135deg,rgba(16,185,129,.2) 0%,rgba(245,210,133,.28) 100%)!important;
 box-shadow:
  inset 0 0 0 1.5px rgba(16,185,129,.64),
  0 4px 16px rgba(16,185,129,.26),
  0 0 20px rgba(212,175,55,.24)!important;
}
html[data-theme] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=finance]::after{
 width:6.5px!important;
 height:6.5px!important;
 background:radial-gradient(circle,#fef08a 0%,#34d399 70%)!important;
 box-shadow:0 0 8px #34d399,0 0 14px rgba(245,210,133,.75)!important;
 margin-left:4px!important;
}
html[data-theme=light] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=finance]::after{
 background:radial-gradient(circle,#10b981 0%,#047857 78%)!important;
 box-shadow:0 0 8px rgba(16,185,129,.65)!important;
}
html[data-theme=dark] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=finance]:is(:hover,:focus-visible){
 color:#ecfdf5!important;
 background:linear-gradient(135deg,rgba(16,185,129,.42) 0%,rgba(245,210,133,.26) 100%)!important;
 box-shadow:
  inset 0 0 0 1.5px #a7f3d0,
  0 0 26px rgba(16,185,129,.62),
  0 0 42px rgba(245,210,133,.36)!important;
 transform:translateY(-2px);
}
html[data-theme=light] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=finance]:is(:hover,:focus-visible){
 color:#044e3a!important;
 background:linear-gradient(135deg,rgba(16,185,129,.3) 0%,rgba(245,210,133,.38) 100%)!important;
 box-shadow:
  inset 0 0 0 1.5px #059669,
  0 6px 20px rgba(16,185,129,.36),
  0 0 24px rgba(212,175,55,.32)!important;
 transform:translateY(-2px);
}

/* Hero Portal #1 (`#worlds .world.world-finance`): Flagship Emerald-Gold Aura + Crafted Luxury CTA Pill */
html[data-theme] body.home-astra .world-finance .portal-visual::before{
 content:''!important;
 display:block!important;
 position:absolute!important;
 inset:14px -10px 0!important;
 border-radius:50%!important;
 background:radial-gradient(ellipse at 50% 50%,rgba(52,211,153,.52) 0%,rgba(245,210,133,.28) 44%,rgba(16,185,129,.14) 66%,transparent 80%)!important;
 filter:blur(15px)!important;
 transform:rotate(-17deg)!important;
 opacity:.9!important;
 pointer-events:none!important;
 z-index:0!important;
 animation:astraFinancePortalAura 3.8s ease-in-out infinite!important;
}
html[data-theme=light] body.home-astra .world-finance .portal-visual::before{
 background:radial-gradient(ellipse at 50% 50%,rgba(16,185,129,.42) 0%,rgba(245,184,75,.28) 46%,rgba(16,185,129,.12) 68%,transparent 82%)!important;
}
html[data-theme] body.home-astra .world-finance .portal-visual::after{
 display:none!important;
 content:none!important;
}
html[data-theme=dark] body.home-astra .worlds .world-finance .portal-window{
 z-index:2!important;
 border:2px solid #6ee7b7!important;
 box-shadow:
  0 0 0 3px rgba(245,210,133,.22),
  0 14px 34px -8px rgba(4,12,24,.65),
  0 0 32px rgba(52,211,153,.38),
  inset 0 0 22px rgba(52,211,153,.2)!important;
}
html[data-theme=light] body.home-astra .worlds .world-finance .portal-window{
 z-index:2!important;
 border:2px solid #10b981!important;
 box-shadow:
  0 0 0 3px rgba(245,194,88,.3),
  0 14px 32px -8px rgba(16,105,74,.24),
  0 0 28px rgba(16,185,129,.26),
  inset 0 1px 0 rgba(255,255,255,.85)!important;
}
html[data-theme] body.home-astra .worlds .world-finance .portal-art{
 z-index:3!important;
 filter:drop-shadow(0 6px 12px rgba(4,12,24,.38)) drop-shadow(0 0 14px rgba(52,211,153,.32))!important;
}
html[data-theme] body.home-astra .worlds .world-finance .portal-snapshot-label{
 bottom:-16px!important;
}
/* Unify CTA on .world-finance: hide the duplicate floating .world-arrow circle so the crafted .finance-enter pill is the single unmistakable focal action */
html[data-theme] body.home-astra .worlds .world.world-finance .world-arrow{
 display:none!important;
}
html[data-theme] body.home-astra .worlds .world.world-finance .world-title{
 display:inline-flex!important;
 align-items:center!important;
 gap:6px!important;
 padding-right:0!important;
 font-weight:600!important;
 text-shadow:0 0 18px rgba(52,211,153,.24);
}
html[data-theme=light] body.home-astra .worlds .world.world-finance .world-title{
 color:#064e3b!important;
 text-shadow:none;
}
@keyframes astraFinancePortalJiggle{
 0%,28%,100%{
  transform:translate3d(0,0,0);
 }
 7%{
  transform:translate3d(0,-3px,0);
 }
 14%{
  transform:translate3d(0,0,0);
 }
 21%{
  transform:translate3d(0,-1.5px,0);
 }
}
@keyframes astraFinanceCtaTwitch{
 0%,28%,100%{
  transform:translate3d(0,0,0) scale3d(1,1,1);
 }
 6%{
  transform:translate3d(2px,-1.5px,0) scale3d(1.03,1.03,1);
 }
 12%{
  transform:translate3d(-1.5px,-1px,0) scale3d(1.02,1.02,1);
 }
 18%{
  transform:translate3d(1.5px,-.5px,0) scale3d(1.015,1.015,1);
 }
}
@keyframes astraFingerPoint{
 0%{
  transform:translate3d(-1.5px,0,0);
 }
 100%{
  transform:translate3d(2.5px,-1px,0);
 }
}
html[data-theme] body.home-astra .worlds .world-finance:not(:hover):not(:focus-visible):not([data-preview-state]){
 transform-origin:50% 65%!important;
 will-change:transform!important;
 backface-visibility:hidden!important;
 animation:astraFinancePortalJiggle 3.8s cubic-bezier(.22,1,.36,1) infinite!important;
}
html[data-theme] body.home-astra .worlds .world-finance .finance-enter{
 display:inline-flex!important;
 align-items:center!important;
 align-self:flex-start!important;
 width:fit-content!important;
 gap:9px!important;
 margin-top:11px!important;
 padding:6px 8px 6px 15px!important;
 border-radius:999px!important;
 font:500 13px/1.35 'AK Thai','Google Sans',Sarabun,sans-serif!important;
 letter-spacing:.01em!important;
 color:#ecfdf5!important;
 background:linear-gradient(135deg,rgba(6,78,59,.94) 0%,rgba(4,47,46,.98) 58%,rgba(17,94,89,.9) 100%)!important;
 border:1px solid rgba(110,231,183,.56)!important;
 box-shadow:
  0 10px 24px -6px rgba(4,12,24,.72),
  0 0 18px rgba(16,185,129,.24),
  inset 0 1px 0 rgba(245,210,133,.36)!important;
 will-change:transform!important;
 backface-visibility:hidden!important;
 animation:astraFinanceCtaTwitch 3.8s cubic-bezier(.22,1,.36,1) .12s infinite!important;
 transition:transform 240ms cubic-bezier(.22,1,.36,1),box-shadow 240ms ease,border-color 240ms ease,background 240ms ease!important;
}
html[data-theme=light] body.home-astra .worlds .world-finance .finance-enter{
 color:#ffffff!important;
 background:linear-gradient(135deg,#065f46 0%,#047857 62%,#0d9488 100%)!important;
 border:1px solid rgba(245,210,133,.72)!important;
 box-shadow:
  0 10px 22px -6px rgba(6,95,70,.36),
  0 0 0 1px rgba(6,95,70,.16),
  inset 0 1px 0 rgba(255,255,255,.32)!important;
}
html[data-theme] body.home-astra .worlds .world-finance .finance-enter::before{
 content:none!important;
 display:none!important;
}
/* Single unified champagne-gold circular launch badge at the right end of .finance-enter (zero duplicate arrows) */
html[data-theme] body.home-astra .worlds .world-finance .finance-enter::after{
 content:'↗';
 display:inline-grid;
 place-items:center;
 width:22px;
 height:22px;
 flex:0 0 22px;
 border-radius:50%;
 font-size:12.5px;
 font-weight:700;
 line-height:1;
 color:#06281e;
 background:linear-gradient(135deg,#fde68a 0%,#f5d285 100%);
 box-shadow:0 2px 8px rgba(245,210,133,.42),inset 0 1px 0 rgba(255,255,255,.75);
 will-change:transform;
 animation:astraFingerPoint .85s cubic-bezier(.22,1,.36,1) infinite alternate;
 transition:transform 220ms cubic-bezier(.22,1,.36,1),box-shadow 220ms ease;
}
html[data-theme] body.home-astra .worlds .world-finance:is(:hover,:focus-visible) .finance-enter{
 animation:none!important;
 transform:translate3d(0,-3px,0) scale3d(1.04,1.04,1)!important;
 border-color:#f5d285!important;
 box-shadow:
  0 14px 28px -6px rgba(4,12,24,.78),
  0 0 24px rgba(52,211,153,.42),
  0 0 0 1px rgba(245,210,133,.45),
  inset 0 1px 0 rgba(255,255,255,.45)!important;
}
html[data-theme] body.home-astra .worlds .world-finance:is(:hover,:focus-visible) .finance-enter::after{
 transform:translate3d(2px,-2px,0) scale(1.08);
 box-shadow:0 4px 12px rgba(245,210,133,.65),inset 0 1px 0 #ffffff;
}

/* ==========================================================================
   3. Authentic Chrollo Sun & Moon Hand-Blade Nen (`ของขวัญจากสุริยันและจันทรา`)
      on `.chrollo-card` (`👋 สวัสดีครับ รู้จักออดี้`) — A21 Reference-Matched Craft (Audi 2026-10-20):
      Matched directly to Audi's Chrollo reference image (`media_1792488333752_add6620c.jpg`):
      - ZERO pink lotus fan behind Audi's head (head and hair stay 100% clean).
      - Continuous, unbroken rounded card border (`1.5px solid`).
      - TWO tall, razor-sharp vertical blades of stark white core (`#ffffff`) +
        electric cobalt-indigo (`#60a5fa` -> `#818cf8` -> `#4f46e5`) + dark-indigo anime contour
        rising directly from Audi's LEFT hand (Moon `☾`) and RIGHT hand (Sun `⊕`)!
      - Simmers low around his palms/wrists at rest (`Ten`) and shoots sharply upward
        into tall vertical spears on `:hover` / `:focus-visible` (`Ren`), while the closed
        Bandit's Secret grimoire flips open between his hands.
   ========================================================================== */
@keyframes hxhNenAuraBreathe{
 0%{
  transform:translate3d(0,8px,0) scale3d(.94,.52,1);
  opacity:.74;
 }
 50%{
  transform:translate3d(0,5px,0) scale3d(.97,.6,1);
  opacity:.86;
 }
 100%{
  transform:translate3d(0,3px,0) scale3d(.99,.65,1);
  opacity:.8;
 }
}
@keyframes hxhRenFlameErupt{
 0%{
  transform:translate3d(-.5px,-2px,0) scale3d(1.01,1.02,1);
  opacity:.96;
 }
 50%{
  transform:translate3d(.5px,-6px,0) scale3d(1.05,1.1,1);
  opacity:1;
 }
 100%{
  transform:translate3d(0,-4px,0) scale3d(1.03,1.06,1);
  opacity:.98;
 }
}
@keyframes hxhNenPlumeFloat{
 0%{
  transform:translate3d(0,7px,0) scale3d(.95,.54,1);
  opacity:.72;
 }
 50%{
  transform:translate3d(0,4px,0) scale3d(.98,.62,1);
  opacity:.84;
 }
 100%{
  transform:translate3d(0,2px,0) scale3d(1,.66,1);
  opacity:.78;
 }
}
@keyframes hxhRenCrownBurst{
 0%{
  transform:translate3d(.5px,-3px,0) scale3d(1.02,1.04,1);
  opacity:.96;
 }
 50%{
  transform:translate3d(-.5px,-7px,0) scale3d(1.06,1.12,1);
  opacity:1;
 }
 100%{
  transform:translate3d(0,-5px,0) scale3d(1.04,1.08,1);
  opacity:.98;
 }
}
@keyframes hxhRenWispSurge{
 0%{
  transform:translate3d(0,6px,0) scale3d(.78,.78,1);
  opacity:0;
 }
 35%{
  opacity:.92;
 }
 100%{
  transform:translate3d(0,-22px,0) scale3d(1.24,1.34,1);
  opacity:0;
 }
}
@keyframes hxhGrimoireFloat{
 0%{
  transform:translate3d(0,1.5px,0);
 }
 100%{
  transform:translate3d(0,-3px,0);
 }
}

/* Re-enable the Nen hand-blades, wisps & book elements inside .chrollo-card */
html[data-theme] body.home-astra .chrollo-card .chrollo-ghost-backdrop{
 display:none!important;
}
html[data-theme] body.home-astra .chrollo-card .ticket-glow,
html[data-theme] body.home-astra .chrollo-card .portrait-nen-rim,
html[data-theme] body.home-astra .chrollo-card .chrollo-nen-aura,
html[data-theme] body.home-astra .chrollo-card .chrollo-nen-wisp{
 display:block!important;
 pointer-events:none!important;
 border:0!important;
 outline:0!important;
 box-shadow:none!important;
 background-color:transparent!important;
}
html[data-theme] body.home-astra .chrollo-card .chrollo-nen-aura{
 border-radius:50%!important;
}
html[data-theme] body.home-astra .chrollo-card .ticket-glow,
html[data-theme] body.home-astra .chrollo-card .portrait-nen-rim{
 border-radius:0!important;
 filter:none!important;
 -webkit-mask-image:none!important;
 mask-image:none!important;
}

/* Closed Book (default) -> Open Book (hover) shared 3D stage */
html[data-theme] body.home-astra .chrollo-card .chrollo-book-3d{
 position:relative!important;
 display:grid!important;
 place-items:center!important;
 transform-style:preserve-3d!important;
 will-change:transform!important;
 animation:hxhGrimoireFloat 2.6s cubic-bezier(.45,.05,.55,.95) infinite alternate!important;
 filter:drop-shadow(0 6px 12px rgba(4,8,18,.82)) drop-shadow(0 0 8px rgba(99,102,241,.52))!important;
}
html[data-theme] body.home-astra .chrollo-card .chrollo-book-closed-wrap{
 position:relative!important;
 grid-area:1/1!important;
 width:38px!important;
 height:52px!important;
 display:block!important;
 transform-origin:left center!important;
 transform:translate3d(0,0,0) rotate(-6deg) scale3d(1,1,1)!important;
 opacity:1!important;
 will-change:transform,opacity!important;
 backface-visibility:hidden!important;
 transition:
  transform 420ms cubic-bezier(.22,1,.36,1),
  opacity 260ms cubic-bezier(.22,1,.36,1)!important;
 z-index:3!important;
}
html[data-theme] body.home-astra .chrollo-card .chrollo-book-closed-wrap .chrollo-book-closed{
 width:100%!important;
 height:100%!important;
 object-fit:cover!important;
 border-radius:3px 4px 4px 3px!important;
 display:block!important;
 position:relative!important;
 z-index:3!important;
 box-shadow:inset 0 0 0 1px rgba(245,210,133,.38)!important;
}
html[data-theme] body.home-astra .chrollo-card .chrollo-book-closed-wrap .chrollo-book-spine{
 display:block!important;
 position:absolute!important;
 left:-3px!important;
 top:1px!important;
 bottom:1px!important;
 width:4px!important;
 border-radius:3px 0 0 3px!important;
 background:linear-gradient(90deg,#12091c 0%,#312e81 65%,#1e1b4b 100%)!important;
 box-shadow:-1px 0 3px rgba(0,0,0,.65),inset 0 0 0 .5px rgba(199,210,254,.35)!important;
 z-index:2!important;
}
html[data-theme] body.home-astra .chrollo-card .chrollo-book-closed-wrap .chrollo-book-pages{
 display:block!important;
 position:absolute!important;
 right:-3px!important;
 top:2px!important;
 bottom:2px!important;
 width:4px!important;
 border-radius:0 2px 2px 0!important;
 background:repeating-linear-gradient(180deg,#f5ecd7 0px,#f5ecd7 2px,#cbb994 2px,#cbb994 3px)!important;
 box-shadow:1px 0 3px rgba(0,0,0,.45)!important;
 z-index:2!important;
}
html[data-theme] body.home-astra .chrollo-card .chrollo-book-open{
 grid-area:1/1!important;
 width:60px!important;
 height:54px!important;
 max-width:none!important;
 object-fit:contain!important;
 display:block!important;
 transform-origin:center bottom!important;
 transform:translate3d(0,5px,0) rotate(-14deg) scale3d(.58,.78,1)!important;
 opacity:0!important;
 will-change:transform,opacity!important;
 backface-visibility:hidden!important;
 transition:
  transform 440ms cubic-bezier(.22,1,.36,1),
  opacity 280ms cubic-bezier(.22,1,.36,1)!important;
 z-index:4!important;
 pointer-events:none!important;
}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .chrollo-book-closed-wrap{
 transform:translate3d(-4px,-4px,0) rotate(12deg) scale3d(.42,.88,1)!important;
 opacity:0!important;
}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .chrollo-book-open{
 transform:translate3d(2px,-4px,0) rotate(2deg) scale3d(1.08,1.08,1)!important;
 opacity:1!important;
}

/* Rising Electric Blue-Indigo Nen Sparks around the Open Book on Hover (.chrollo-nen-wisp) */
html[data-theme] body.home-astra .chrollo-card .chrollo-nen-wisp{
 position:absolute!important;
 inset:-14px -18px -4px -18px!important;
 border-radius:50%!important;
 opacity:0!important;
 z-index:2!important;
 will-change:transform,opacity!important;
 backface-visibility:hidden!important;
}
html[data-theme] body.home-astra .chrollo-card .chrollo-nen-wisp.wisp-1{
 background:
  radial-gradient(circle 3.5px at 16% 42%,#ffffff 0%,#60a5fa 62%,transparent 100%),
  radial-gradient(circle 3.5px at 84% 36%,#ffffff 0%,#818cf8 62%,transparent 100%),
  radial-gradient(ellipse 68% 40% at 50% 62%,transparent 56%,rgba(147,197,253,.72) 72%,rgba(99,102,241,.34) 86%,transparent 96%)!important;
}
html[data-theme] body.home-astra .chrollo-card .chrollo-nen-wisp.wisp-2{
 background:
  radial-gradient(circle 3px at 28% 22%,#ffffff 0%,#93c5fd 62%,transparent 100%),
  radial-gradient(circle 3.5px at 74% 20%,#ffffff 0%,#818cf8 62%,transparent 100%),
  radial-gradient(ellipse 74% 46% at 50% 56%,transparent 52%,rgba(165,180,252,.64) 70%,transparent 94%)!important;
}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .chrollo-nen-wisp.wisp-1{
 animation:hxhRenWispSurge .92s cubic-bezier(.16,1,.3,1) infinite!important;
}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .chrollo-nen-wisp.wisp-2{
 animation:hxhRenWispSurge .92s cubic-bezier(.16,1,.3,1) .46s infinite!important;
}

@media(min-width:701px){
 /* Continuous, unbroken 1.5px rounded card border + clean dark obsidian right copy zone */
 html[data-theme] body.home-astra .chrollo-card{
  rotate:none!important;
  translate:none!important;
  transform:translate3d(0,0,0) rotate(-3deg)!important;
  border:1.5px solid rgba(165,180,252,.56)!important;
  will-change:transform,box-shadow,border-color!important;
  transition:
   transform 420ms cubic-bezier(.22,1,.36,1),
   box-shadow 420ms cubic-bezier(.22,1,.36,1),
   border-color 340ms ease!important;
 }
 html[data-theme] body.home-astra .chrollo-card::before{
  display:none!important;
  content:none!important;
 }
 html[data-theme=dark] body.home-astra .chrollo-card{
  background:
   radial-gradient(96px 86px at 20% 60%,rgba(99,102,241,.34) 0%,rgba(124,58,237,.16) 58%,transparent 88%),
   linear-gradient(135deg,rgba(17,12,36,.96) 0%,rgba(11,9,24,.98) 58%,rgba(20,14,42,.96) 100%)!important;
  box-shadow:
   0 18px 42px rgba(4,8,18,.74),
   0 0 24px rgba(99,102,241,.26),
   inset 0 1px 0 rgba(224,231,255,.22)!important;
 }
 html[data-theme=light] body.home-astra .chrollo-card{
  background:
   radial-gradient(96px 86px at 20% 60%,rgba(99,102,241,.32) 0%,rgba(124,58,237,.14) 58%,transparent 88%),
   linear-gradient(135deg,#1d1438 0%,#130d26 58%,#221642 100%)!important;
  box-shadow:
   0 18px 38px rgba(30,18,68,.32),
   0 0 22px rgba(99,102,241,.24),
   inset 0 1px 0 rgba(224,231,255,.24)!important;
 }
 html[data-theme=light] body.home-astra .chrollo-card .mini-caption{color:#e0e7ff!important}
 html[data-theme=light] body.home-astra .chrollo-card strong{color:#ffffff!important;text-shadow:0 0 14px rgba(129,140,248,.48)!important}
 html[data-theme=light] body.home-astra .chrollo-card small{color:#c7d2fe!important}

 html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame,
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-portrait-frame{
  clip-path:none!important;
  filter:none!important;
  transform-origin:50% 100%!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
  transition:transform 420ms cubic-bezier(.22,1,.36,1)!important;
 }

 /* Layer 1: Crisp Cutout of Audi with Tight Electric Blue-Indigo Contour (Head stays 100% clean) */
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait{
  position:relative!important;
  z-index:4!important;
  filter:
   drop-shadow(0 -1px 2px rgba(255,255,255,.85))
   drop-shadow(0 -2px 7px rgba(99,102,241,.72))
   drop-shadow(0 6px 12px rgba(4,8,18,.75))!important;
  transition:transform 420ms cubic-bezier(.22,1,.36,1)!important;
 }

 /* Layer 2A (.ticket-glow, z-index: 2 — behind Audi's hands):
    Chrollo's TWO tall, organic S-curved vertical Sun & Moon Nen Flame Plumes (`media_1792488333752_add6620c.jpg`)
    rising directly from behind Left Hand (Moon `x: 6..52, y: 18..168`) and Right Hand (Sun `x: 108..154, y: 8..168`).
    Zero petals behind Audi's head (`x: 56..104`) and zero cartoon strokes covering his hands! */
 html[data-theme] body.home-astra .chrollo-card .ticket-glow{
  position:absolute!important;
  inset:-34px -18px 0 -18px!important;
  z-index:2!important;
  transform-origin:50% 84%!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 166 202'%3E%3Cdefs%3E%3Cfilter id='bOuter' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeGaussianBlur stdDeviation='4.2'/%3E%3C/filter%3E%3Cfilter id='bMid' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3Cfilter id='bCore' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='0.55'/%3E%3C/filter%3E%3ClinearGradient id='gIndigo' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0%25' stop-color='%23312e81' stop-opacity='0'/%3E%3Cstop offset='18%25' stop-color='%234f46e5' stop-opacity='0.92'/%3E%3Cstop offset='64%25' stop-color='%236366f1' stop-opacity='0.98'/%3E%3Cstop offset='100%25' stop-color='%2393c5fd' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='gCobalt' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0%25' stop-color='%234338ca' stop-opacity='0'/%3E%3Cstop offset='22%25' stop-color='%2360a5fa' stop-opacity='0.95'/%3E%3Cstop offset='68%25' stop-color='%2393c5fd' stop-opacity='0.98'/%3E%3Cstop offset='100%25' stop-color='%23e0f2fe' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='gWhite' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0%25' stop-color='%2393c5fd' stop-opacity='0'/%3E%3Cstop offset='26%25' stop-color='%23ffffff' stop-opacity='0.96'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(2,16)'%3E%3Cg filter='url(%23bOuter)'%3E%3Cpath fill='url(%23gIndigo)' d='M26,170 C12,154 6,134 10,110 C6,118 4,124 4,130 C2,102 10,76 18,52 C14,62 12,70 12,78 C14,54 20,34 24,18 C28,38 30,56 28,74 C32,62 36,52 38,44 C36,68 34,90 38,110 C42,96 46,86 48,78 C46,104 44,132 50,158 Z'/%3E%3Cpath fill='url(%23gIndigo)' d='M112,160 C118,134 116,106 114,80 C116,88 120,98 124,112 C128,90 126,66 124,42 C126,50 130,60 134,72 C132,52 136,30 142,10 C146,28 150,50 150,74 C150,66 148,58 144,48 C152,72 158,100 156,128 C156,122 154,116 150,108 C154,132 148,154 136,170 Z'/%3E%3C/g%3E%3Cg filter='url(%23bMid)'%3E%3Cpath fill='url(%23gCobalt)' d='M27,166 C14,150 10,130 13,108 C9,115 7,121 7,126 C6,100 13,76 20,54 C16,63 15,70 15,77 C17,55 21,36 24,22 C27,40 29,57 27,74 C31,63 34,54 36,47 C34,69 33,90 36,108 C40,96 43,87 45,80 C43,104 42,130 47,154 Z'/%3E%3Cpath fill='url(%23gCobalt)' d='M115,156 C120,132 119,106 117,82 C119,89 122,98 126,110 C129,90 127,68 126,45 C128,53 131,62 135,73 C133,54 137,34 142,14 C145,31 148,52 148,74 C148,67 146,59 143,50 C150,73 155,99 153,125 C153,119 151,114 148,106 C151,129 145,150 135,166 Z'/%3E%3C/g%3E%3Cg filter='url(%23bCore)'%3E%3Cpath fill='url(%23gWhite)' d='M28,158 C18,142 15,122 18,98 C15,78 19,54 24,28 C26,48 26,68 25,84 C29,72 32,62 33,54 C31,78 31,102 36,124 C38,112 40,102 42,94 C40,116 39,138 42,152 Z'/%3E%3Cpath fill='url(%23gWhite)' d='M120,152 C123,136 122,114 120,92 C122,100 124,110 127,122 C131,100 131,76 129,52 C130,60 133,70 137,82 C136,64 138,42 141,20 C144,44 147,68 144,92 C147,114 144,136 134,156 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  opacity:.74!important;
  will-change:transform,opacity!important;
  backface-visibility:hidden!important;
  animation:hxhNenAuraBreathe 2.4s cubic-bezier(.45,.05,.55,.95) infinite alternate!important;
 }

 /* Layer 2B (.portrait-nen-rim, z-index: 3 — secondary counter-dancing inner hand-flame tongues behind Audi):
    Adds secondary high-frequency white-blue flame licks rising from both palms without covering Audi's hands! */
 html[data-theme] body.home-astra .chrollo-card .portrait-nen-rim{
  position:absolute!important;
  inset:-34px -18px 0 -18px!important;
  z-index:3!important;
  transform-origin:50% 84%!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 166 202'%3E%3Cdefs%3E%3Cfilter id='bRim' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3ClinearGradient id='gRim' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0%25' stop-color='%234f46e5' stop-opacity='0'/%3E%3Cstop offset='28%25' stop-color='%23818cf8' stop-opacity='0.92'/%3E%3Cstop offset='72%25' stop-color='%23bae6fd' stop-opacity='0.98'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(2,16)' filter='url(%23bRim)'%3E%3Cpath fill='url(%23gRim)' d='M22,162 C10,144 6,120 12,92 C8,100 6,108 5,116 C6,88 14,60 22,34 C24,54 24,72 22,88 C28,72 32,56 35,40 C33,68 32,96 38,122 C41,108 44,96 46,86 C44,112 42,138 46,156 Z'/%3E%3Cpath fill='url(%23gRim)' d='M116,156 C120,138 118,112 116,86 C118,96 121,108 124,122 C130,96 129,68 127,40 C130,56 134,72 140,88 C138,72 138,54 140,26 C148,54 156,84 157,114 C156,106 154,98 150,90 C156,118 152,144 140,162 Z'/%3E%3C/g%3E%3C/svg%3E")!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  opacity:.68!important;
  will-change:transform,opacity!important;
  backface-visibility:hidden!important;
  animation:hxhNenPlumeFloat 1.95s cubic-bezier(.45,.05,.55,.95) -.6s infinite alternate!important;
 }

 /* Layer 3: Conjured Bandit's Secret Grimoire Nen Aura (.chrollo-nen-aura) */
 html[data-theme] body.home-astra .chrollo-card .ticket-book-prop{
  left:34px!important;
  right:auto!important;
  bottom:2px!important;
  width:60px!important;
  height:54px!important;
  z-index:7!important;
  transform:translate3d(0,0,0) rotate(-3deg)!important;
  will-change:transform!important;
  transition:transform 420ms cubic-bezier(.22,1,.36,1)!important;
 }
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-3d{
  width:60px!important;
  height:54px!important;
 }
 html[data-theme] body.home-astra .chrollo-card .chrollo-nen-aura{
  position:absolute!important;
  inset:-10px -12px -6px -12px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,rgba(255,255,255,.82) 0%,rgba(96,165,250,.56) 42%,rgba(99,102,241,.28) 72%,transparent 94%)!important;
  filter:blur(5px)!important;
  z-index:1!important;
  will-change:transform,opacity!important;
  animation:hxhNenAuraBreathe 2.2s cubic-bezier(.45,.05,.55,.95) infinite alternate!important;
 }

 /* Hover / Focus-Visible: Sun & Moon Hand-Blade Spears Erupt Vertically + Book Conjuration */
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible){
  transform:translate3d(0,-7px,0) rotate(0deg) scale3d(1.025,1.025,1)!important;
  border-color:#c7d2fe!important;
  box-shadow:
   0 24px 54px rgba(4,8,18,.84),
   0 0 36px rgba(99,102,241,.52),
   0 0 68px rgba(79,70,229,.32),
   inset 0 1px 0 rgba(255,255,255,.42)!important;
 }
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-portrait-frame{
  transform:translate3d(0,-3px,0) scale3d(1.05,1.05,1)!important;
 }
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-glow{
  animation:hxhRenFlameErupt .42s cubic-bezier(.22,1,.36,1) infinite alternate!important;
 }
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .portrait-nen-rim{
  animation:hxhRenCrownBurst .36s cubic-bezier(.22,1,.36,1) infinite alternate!important;
 }
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .chrollo-nen-aura{
  animation:hxhRenFlameErupt .48s cubic-bezier(.22,1,.36,1) infinite alternate!important;
 }
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-book-prop{
  transform:translate3d(2px,-9px,0) rotate(2deg) scale3d(1.1,1.1,1)!important;
 }
}

@media(min-width:701px) and (max-width:1100px){
 html[data-theme] body.home-astra .chrollo-card .ticket-book-prop{
  left:24px!important;
  width:48px!important;
  height:44px!important;
 }
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-3d{
  width:48px!important;
  height:44px!important;
 }
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-closed-wrap{
  width:32px!important;
  height:44px!important;
 }
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-open{
  width:48px!important;
  height:44px!important;
 }
}

/* Tablet & Mobile Nen Aura & Closed->Open Book Scaling */
@media(max-width:700px){
 html[data-theme] body.home-astra .worlds .world.world-finance .finance-enter{
  grid-column:2!important;
  margin-top:8px!important;
  padding:5px 12px 5px 7px!important;
  font-size:12px!important;
 }
 html[data-theme] body.home-astra .chrollo-card{
  border:1.5px solid rgba(165,180,252,.64)!important;
  box-shadow:0 12px 28px rgba(4,8,18,.64),0 0 20px rgba(99,102,241,.32)!important;
 }
 html[data-theme] body.home-astra .chrollo-card::before{
  display:none!important;
 }
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame,
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-portrait-frame{
  clip-path:none!important;
  filter:none!important;
  transform-origin:50% 100%!important;
 }
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait{
  position:relative!important;
  z-index:4!important;
  filter:
   drop-shadow(0 -1px 2px rgba(255,255,255,.85))
   drop-shadow(0 -2px 6px rgba(99,102,241,.7))!important;
 }
 html[data-theme] body.home-astra .chrollo-card .ticket-glow{
  position:absolute!important;
  inset:-10px -8px 0 -8px!important;
  z-index:3!important;
  transform-origin:50% 82%!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 184'%3E%3Cpath fill='%2360a5fa' stroke='%23312e81' stroke-width='1.2' d='M22,166 L8,158 L17,149 L6,138 L16,126 L10,106 L18,92 L14,70 L21,54 L19,24 L27,52 L25,70 L33,88 L31,108 L42,124 L38,144 L48,158 Z M112,158 L120,142 L116,122 L126,104 L124,82 L131,60 L129,38 L143,10 L141,42 L146,60 L139,82 L146,100 L140,118 L151,134 L142,147 L153,157 L137,166 Z'/%3E%3Cpath fill='%23ffffff' d='M23,160 L13,152 L20,144 L12,134 L19,122 L15,104 L21,90 L18,70 L23,54 L20,32 L25,56 L23,74 L29,92 L27,110 L35,126 L32,144 L39,154 Z M118,152 L124,138 L120,120 L128,102 L126,82 L133,60 L132,40 L142,18 L139,46 L143,62 L136,84 L142,102 L136,118 L145,132 L137,144 L146,153 L134,160 Z'/%3E%3C/svg%3E")!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:none!important;
  will-change:transform,opacity!important;
  animation:hxhNenAuraBreathe 2.6s cubic-bezier(.45,.05,.55,.95) infinite alternate!important;
 }
 html[data-theme] body.home-astra .chrollo-card .portrait-nen-rim{
  display:none!important;
 }
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-closed-wrap{
  width:24px!important;
  height:32px!important;
 }
 html[data-theme] body.home-astra .chrollo-card .chrollo-book-open{
  width:34px!important;
  height:30px!important;
 }
}

/* ==========================================================================
   4. Unanswered Community Poll Left-Right Rock (Audi 2026-10-20):
      "จำกฎเข้าskillด้วยเรื่องanimation ขยับนิดๆ เมื่อกระตุ้นความอยากกด
       อย่างตรง กล่องคำถาม ตอนนี้ทุกคนลงทุนกันแบบไหนอยู่ครับ? ควรทำให้มันโยกซ้ายขวาหน่อยไหม สำหรับคนที่ยังไม่ตอบ"
      - Rocks `.conversation-choice.is-unanswered` and `.poll-more-item.is-unanswered` gently
        left and right (`astraPollUnansweredRock`) ONLY while unanswered (`!p?.selected`) and
        while the user is NOT hovering, focusing, or selecting an option.
      - Stops immediately on `:hover`, `:focus-within`, `:has(input[type=radio]:checked)`, or `.is-answered`.
   ========================================================================== */
@keyframes astraPollUnansweredRock{
 0%,34%,100%{
  transform:translate3d(0,0,0) rotate(0deg);
 }
 6%{
  transform:translate3d(-5px,-1px,0) rotate(-1.5deg);
 }
 12%{
  transform:translate3d(5px,-1px,0) rotate(1.5deg);
 }
 18%{
  transform:translate3d(-3px,0,0) rotate(-.95deg);
 }
 24%{
  transform:translate3d(2px,0,0) rotate(.6deg);
 }
 29%{
  transform:translate3d(-1px,0,0) rotate(-.25deg);
 }
}
@keyframes astraPollKickerWave{
 0%,34%,100%{
  transform:translate3d(0,0,0) scale3d(1,1,1);
 }
 8%{
  transform:translate3d(0,-2px,0) scale3d(1.04,1.04,1);
 }
 16%{
  transform:translate3d(0,0,0) scale3d(1.02,1.02,1);
 }
}
@media(prefers-reduced-motion:no-preference){
html[data-theme]:not([data-motion=paused]) body.home-astra #community-poll .conversation-choice.is-unanswered:not(:hover):not(:focus-within):not(:has(#home-poll-form input[type=radio]:checked)) :is(#poll-title,#home-poll-form),
html[data-theme]:not([data-motion=paused]) body.home-astra #community-poll .poll-more-item.is-unanswered:not(:hover):not(:focus-within):not(:has(input[type=radio]:checked)) :is(.poll-more-title,.poll-more-form){
 transform-origin:50% 65%!important;
 will-change:transform!important;
 backface-visibility:hidden!important;
 animation:astraPollUnansweredRock 3.4s cubic-bezier(.36,.07,.19,.97) infinite!important;
}
html[data-theme]:not([data-motion=paused]) body.home-astra #community-poll .conversation-choice.is-unanswered:not(:hover):not(:focus-within):not(:has(#home-poll-form input[type=radio]:checked)) .poll-kicker{
 display:inline-flex!important;
 align-items:center!important;
 will-change:transform!important;
 animation:astraPollKickerWave 3.4s cubic-bezier(.36,.07,.19,.97) infinite!important;
}
html[data-theme]:not([data-motion=paused]) body.home-astra #community-poll :is(.conversation-choice,.poll-more-item):is(:hover,:focus-within,.is-answered,:has(input[type=radio]:checked)) :is(#poll-title,#home-poll-form,.poll-more-title,.poll-more-form){
 animation:none!important;
 transform:translate3d(0,0,0) rotate(0deg)!important;
}

}

/* Respect paused motion & prefers-reduced-motion for A18/A19/A20 Nen, Finance & Unanswered Poll animations */
html[data-motion=paused] body.home-astra :is(.aknav-link[data-world=finance],.aknav-link[data-world=finance]::after,.world-finance,.world-finance .portal-visual::before,.world-finance .finance-enter,.world-finance .finance-enter::before,.chrollo-card .chrollo-ghost-backdrop,.chrollo-card .ticket-glow,.chrollo-card .portrait-nen-rim,.chrollo-card .chrollo-nen-aura,.chrollo-card .chrollo-nen-wisp,.chrollo-card .chrollo-book-3d,#community-poll #poll-title,#community-poll #home-poll-form,#community-poll .poll-more-title,#community-poll .poll-more-form,#community-poll .poll-kicker),
body.home-astra.paused :is(.aknav-link[data-world=finance],.aknav-link[data-world=finance]::after,.world-finance,.world-finance .portal-visual::before,.world-finance .finance-enter,.world-finance .finance-enter::before,.chrollo-card .chrollo-ghost-backdrop,.chrollo-card .ticket-glow,.chrollo-card .portrait-nen-rim,.chrollo-card .chrollo-nen-aura,.chrollo-card .chrollo-nen-wisp,.chrollo-card .chrollo-book-3d,#community-poll #poll-title,#community-poll #home-poll-form,#community-poll .poll-more-title,#community-poll .poll-more-form,#community-poll .poll-kicker){
 animation:none!important;
}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.home-astra :is(.aknav-link[data-world=finance],.aknav-link[data-world=finance]::after,.world-finance,.world-finance .portal-visual::before,.world-finance .finance-enter,.world-finance .finance-enter::before,.chrollo-card .chrollo-ghost-backdrop,.chrollo-card .ticket-glow,.chrollo-card .portrait-nen-rim,.chrollo-card .chrollo-nen-aura,.chrollo-card .chrollo-nen-wisp,.chrollo-card .chrollo-book-3d,#community-poll #poll-title,#community-poll #home-poll-form,#community-poll .poll-more-title,#community-poll .poll-more-form,#community-poll .poll-kicker){
  animation:none!important;
 }
}

/* 2026-10-20: A21 refinement. Preserve the authored character and closed/open
   Grimoire; reserve separate media/copy lanes throughout the hover journey. */
html[data-theme] body.home-astra{font-family:var(--font-body,'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif)!important}
html[data-theme] body.home-astra :is(button,input,textarea,select,.stage-caption,.world-sub,.guide-caption,.mini-caption,.chrollo-card small,.finance-enter){font-family:var(--font-body,'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif)!important}
html[data-theme] body.home-astra :is(h1,h2,h3,h4,.world-title,.chrollo-card strong){font-family:var(--font-head,'AK Thai','Google Sans','Outfit', 'Sarabun',sans-serif)!important}
html[data-theme] body.home-astra .chrollo-card{
 --ticket-slot:134px; width:322px!important;gap:16px!important;rotate:-2deg!important;
 padding:12px 16px 12px 8px!important;box-shadow:0 8px 14px -8px #06091870!important;
 transform:translate3d(0,0,0)!important;transition:transform 380ms cubic-bezier(.22,1,.36,1),rotate 380ms cubic-bezier(.22,1,.36,1)!important;
}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible){transform:translate3d(0,-4px,0)!important;rotate:0deg!important;box-shadow:0 8px 14px -8px #06091870!important}
html[data-theme] body.home-astra .chrollo-card::before{display:none!important}
html[data-theme] body.home-astra .chrollo-card .ticket-visual{flex:0 0 132px!important;width:132px!important;min-width:132px!important;max-width:132px!important;isolation:isolate}
html[data-theme] body.home-astra .chrollo-card .ticket-body{position:relative;z-index:10;min-width:0;flex:1;padding:0!important}
html[data-theme] body.home-astra .chrollo-card strong{font-size:21px!important;line-height:1.45!important;text-shadow:none!important}
html[data-theme] body.home-astra .chrollo-card :is(small,.mini-caption){font-size:14px!important;line-height:1.7!important;white-space:normal!important;text-shadow:none!important}
html[data-theme] body.home-astra .chrollo-card .chrollo-badge{margin-top:8px!important;font-size:9px!important}
html[data-theme=light] body.home-astra .chrollo-card{background:linear-gradient(125deg,#e4ddf5,#faf8ff 70%)!important;border-color:#a596c5!important;color:#322449!important}
html[data-theme=light] body.home-astra .chrollo-card strong{color:#30213f!important}
html[data-theme=light] body.home-astra .chrollo-card :is(small,.mini-caption){color:#514260!important}
html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame{width:132px!important;height:170px!important;left:0!important;bottom:0!important;transform:none!important;filter:none!important;clip-path:none!important}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-portrait-frame{transform:translate3d(0,-4px,0)!important}
html[data-theme] body.home-astra .chrollo-card .ticket-portrait{filter:drop-shadow(0 -1px 1px #b5bfff70)!important;transform:none!important}
html[data-theme] body.home-astra .chrollo-card :is(.chrollo-ghost-backdrop,.portrait-nen-rim,.chrollo-nen-wisp,.chrollo-nen-aura){display:none!important}
/* Separate procedural Nen field: soft air behind the body, never blur the portrait. */
html[data-theme] body.home-astra .chrollo-card .ticket-glow{
 inset:-13% -6% -3%!important;z-index:2!important;pointer-events:none!important;
 background:none!important;mask:none!important;filter:none!important;animation:none!important;
 opacity:.62!important;transform:translate3d(0,3px,0) scale(.96)!important;transform-origin:50% 95%!important;
 transition:opacity 480ms ease-out,transform 580ms cubic-bezier(.22,1,.36,1)!important;
}
html[data-theme] body.home-astra .chrollo-card .nen-body-field{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
html[data-theme] body.home-astra .chrollo-card .nen-cloud{fill:#ab83d9;filter:blur(9px);opacity:.48}
html[data-theme] body.home-astra .chrollo-card .nen-smoke{fill:#c1a3e7;filter:blur(4.5px);opacity:.7}
html[data-theme] body.home-astra .chrollo-card .nen-smoke>g{transform-box:fill-box;transform-origin:50% 65%;animation:astraNenSmoke 7.2s ease-in-out infinite;will-change:transform,opacity}
html[data-theme] body.home-astra .chrollo-card .nen-smoke-left{--smoke-x:-5px;--smoke-y:-5px;--smoke-turn:-6deg;animation-delay:-1.8s!important}
html[data-theme] body.home-astra .chrollo-card .nen-smoke-crown{--smoke-x:3px;--smoke-y:-7px;--smoke-turn:5deg;animation-delay:-4.4s!important;animation-duration:8.6s!important}
html[data-theme] body.home-astra .chrollo-card .nen-smoke-right{--smoke-x:5px;--smoke-y:-3px;--smoke-turn:7deg;animation-delay:-.2s!important;animation-duration:6.8s!important}
html[data-theme=light] body.home-astra .chrollo-card .nen-cloud{fill:#8556b8;opacity:.54}
html[data-theme=light] body.home-astra .chrollo-card .nen-smoke{fill:#9c75c8;opacity:.74}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-glow{animation:none!important;opacity:1!important;transform:translate3d(-2px,-3px,0) scale(1.14,1.07)!important}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .nen-smoke{opacity:1}
@keyframes astraNenSmoke{
 0%,100%{transform:translate3d(0,3px,0) rotate(0deg) scale(.93);opacity:.28}
 38%{transform:translate3d(var(--smoke-x),var(--smoke-y),0) rotate(var(--smoke-turn)) scale(1.07);opacity:.68}
 76%{transform:translate3d(var(--smoke-x),calc(var(--smoke-y) - 3px),0) rotate(var(--smoke-turn)) scale(1.12);opacity:.16}
}
html[data-theme] body.home-astra .chrollo-card .ticket-book-prop{display:block!important;z-index:8!important;left:36px!important;bottom:3px!important;width:60px!important;height:54px!important;transform:rotate(-5deg)!important}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-book-prop{transform:translate3d(0,-7px,0) rotate(2deg)!important}
html[data-theme] body.home-astra .chrollo-card .chrollo-book-3d{width:60px!important;height:54px!important;animation:none!important;filter:drop-shadow(0 3px 3px #08081860)!important}
html[data-theme] body.home-astra .chrollo-card .chrollo-book-closed-wrap{width:38px!important;height:52px!important}
html[data-theme] body.home-astra .chrollo-card .chrollo-book-open{width:60px!important;height:54px!important}
html[data-theme] body.home-astra .world-finance .portal-visual::before{inset:6px -10px -1px!important;background:radial-gradient(ellipse,#6de9b13b 10%,#47d39b24 44%,transparent 74%)!important;filter:blur(10px)!important;opacity:.9!important;pointer-events:none}
@media(min-width:701px){
 html[data-theme] body.home-astra .worlds{grid-template-columns:1.16fr 1fr 1fr 1fr!important}
 html[data-theme] body.home-astra .world-knowledge .portal-art{width:218px!important;height:220px!important;bottom:-10px!important}
 html[data-theme] body.home-astra .world-finance .portal-art{width:172px!important;height:188px!important}
}
@media(min-width:701px) and (max-width:1100px){
 html[data-theme] body.home-astra .chrollo-card{width:270px!important;--ticket-slot:108px;gap:12px!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-visual{flex-basis:106px!important;width:106px!important;min-width:106px!important;max-width:106px!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame{width:106px!important;height:138px!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-book-prop{left:23px!important}
 html[data-theme] body.home-astra .chrollo-card strong{font-size:18px!important}
 html[data-theme] body.home-astra .world-knowledge .portal-art{width:190px!important;height:196px!important;bottom:-8px!important}
}
@media(max-width:700px){
 html[data-theme] body.home-astra .hero-track,html[data-theme] body.home-astra .stage{height:584px!important}
 html[data-theme] body.home-astra .portrait-wrap{bottom:298px!important;width:214px!important;height:214px!important}
 html[data-theme] body.home-astra .disc{bottom:305px!important;width:196px!important;height:196px!important}
 html[data-theme] body.home-astra .astra-guides{left:50%!important;right:auto!important;top:auto!important;bottom:123px!important;width:228px!important;height:auto!important;transform:translateX(-50%)!important;gap:0!important;display:flex!important;flex-direction:column!important;align-items:center!important}
 html[data-theme] body.home-astra .guide-caption{margin:0 0 6px!important;font-size:13.5px!important;line-height:1.4!important;min-height:20px!important}
 html[data-theme] body.home-astra .guide-cast{height:78px!important;width:196px!important;gap:10px!important;align-items:flex-end!important;justify-content:center!important;margin:0!important}
 html[data-theme] body.home-astra .guide-character{width:90px!important;height:78px!important;align-self:flex-end!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;overflow:visible!important}
 html[data-theme] body.home-astra .astra-guides[data-style=chibi] .guide-character img,
 html[data-theme] body.home-astra .astra-guides[data-style=chibi] [data-character=poojang] img{position:relative!important;top:0!important;left:auto!important;transform:none!important;width:72px!important;height:78px!important;object-fit:contain!important}
 html[data-theme] body.home-astra .astra-guides[data-style=pixel] .guide-character img,
 html[data-theme] body.home-astra .astra-guides[data-style=pixel] [data-character=poojang] img{position:relative!important;top:0!important;left:auto!important;transform:none!important;width:70px!important;height:78px!important;object-fit:contain!important}
 html[data-theme] body.home-astra .guide-style:not(.aku-control){position:relative!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;margin:10px 0 0!important;min-height:44px!important;height:44px!important;padding:0 16px!important;font-size:12.5px!important;z-index:4!important}
 html[data-theme] body.home-astra .chrollo-card{left:0!important;right:0!important;top:auto!important;bottom:8px!important;width:100%!important;height:104px!important;min-height:104px!important;max-height:104px!important;rotate:0deg!important;--ticket-slot:104px;gap:18px!important;padding:8px 18px 8px 10px!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-visual{flex:0 0 102px!important;width:102px!important;min-width:102px!important;max-width:102px!important;height:104px!important;margin:0!important;align-self:end!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame{width:80px!important;height:104px!important;bottom:0!important}
 html[data-theme] body.home-astra .chrollo-card .ticket-book-prop{left:22px!important;bottom:1px!important}
 html[data-theme] body.home-astra .chrollo-card .chrollo-badge{display:none!important}
 html[data-theme] body.home-astra .chrollo-card .profile-arrow{display:grid!important;right:10px!important;bottom:10px!important;width:30px!important;height:30px!important}
 html[data-theme] body.home-astra .world-knowledge .portal-art{width:132px!important;max-width:none!important;height:142px!important;bottom:-8px!important}
}
/* Tablet: reserve a separate companion row until the floating card has hover clearance. */
@media(min-width:701px) and (max-width:984px){
 html[data-theme] body.home-astra .hero-track,
 html[data-theme] body.home-astra .stage{height:620px!important}
 html[data-theme] body.home-astra .stage-caption .caption-right{display:none!important}
 html[data-theme] body.home-astra .wordmark{top:44px!important;font-size:clamp(56px,7.8vw,72px)!important}
 html[data-theme] body.home-astra .portrait-wrap{top:96px!important;bottom:auto!important;width:280px!important;height:280px!important}
 html[data-theme] body.home-astra .disc{top:102px!important;bottom:auto!important;width:266px!important;height:266px!important}
 html[data-theme] body.home-astra .astra-guides{left:0!important;right:auto!important;top:400px!important;bottom:auto!important;gap:8px!important;width:210px!important;height:auto!important}
 html[data-theme] body.home-astra .guide-cast{height:100px!important;width:210px!important;gap:8px!important;justify-content:center!important}
 html[data-theme] body.home-astra .guide-character{width:96px!important;height:100px!important}
 html[data-theme] body.home-astra .astra-guides[data-style] .guide-character img{position:relative!important;inset:auto!important;width:92px!important;height:100px!important;transform:none!important;object-fit:contain!important}
 html[data-theme] body.home-astra .guide-style:not(.aku-control){margin:6px 0 0!important;min-height:44px!important}
 html[data-theme] body.home-astra .chrollo-card{left:auto!important;right:0!important;top:416px!important;bottom:auto!important}
}
html[data-motion=paused] body.home-astra .chrollo-card *,body.home-astra.paused .chrollo-card *{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){html[data-theme] body.home-astra .chrollo-card,html[data-theme] body.home-astra .chrollo-card *{transition:none!important;animation:none!important}}

html[data-theme=light] body.home-astra .chrollo-card .chrollo-badge{color:#514260!important;text-shadow:none!important}

@media(max-width:700px){html[data-theme] body.home-astra .guide-caption{font-size:14px!important;line-height:1.5!important;min-height:21px!important}}
/* Final native-state verification: freeze the complete book response, not just ambient layers. */
html[data-theme][data-motion=paused] body.home-astra .chrollo-card,
html[data-theme] body.home-astra.paused .chrollo-card,
html[data-theme][data-motion=paused] body.home-astra .chrollo-card :is(.ticket-portrait-frame,.ticket-portrait,.ticket-glow,.ticket-book-prop,.chrollo-book-3d,.chrollo-book-closed-wrap,.chrollo-book-open),
html[data-theme] body.home-astra.paused .chrollo-card :is(.ticket-portrait-frame,.ticket-portrait,.ticket-glow,.ticket-book-prop,.chrollo-book-3d,.chrollo-book-closed-wrap,.chrollo-book-open){transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.home-astra .chrollo-card,
 html[data-theme] body.home-astra .chrollo-card :is(.ticket-portrait-frame,.ticket-portrait,.ticket-glow,.ticket-book-prop,.chrollo-book-3d,.chrollo-book-closed-wrap,.chrollo-book-open){transition:none!important;animation:none!important}
}
@media(max-width:700px){html[data-theme] body.home-astra #worlds .world:not(.world-finance) .world-arrow{display:none!important}}

/* Card rests slightly smaller and tilted, then scales up and straightens as one object; art pointer tilt stays separate. */
html[data-theme] body.home-astra .chrollo-card,
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible){scale:1!important;rotate:0deg!important;translate:none!important;transform:none!important}
@media(min-width:701px) and (hover:hover) and (pointer:fine){
 html[data-theme] body.home-astra .chrollo-card{
  scale:.90!important;
  rotate:-2.5deg!important;
  translate:0 2px!important;
  transform-origin:52% 58%!important;
  transition:
   scale 380ms cubic-bezier(.22,1,.36,1),
   rotate 380ms cubic-bezier(.22,1,.36,1),
   translate 380ms cubic-bezier(.22,1,.36,1),
   box-shadow 380ms cubic-bezier(.22,1,.36,1),
   border-color 320ms ease!important;
 }
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible){
  scale:1.05!important;
  rotate:0deg!important;
  translate:0 -5px!important;
 }
}
html[data-theme][data-motion=paused] body.home-astra .chrollo-card,
html[data-theme] body.home-astra.paused .chrollo-card{scale:1!important;rotate:0deg!important;translate:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse),(max-width:700px){
 html[data-theme] body.home-astra .chrollo-card{scale:1!important;rotate:0deg!important;translate:none!important;transition:none!important}
}
html[data-theme] body.home-astra .chrollo-card .ticket-visual{
 transform:perspective(650px) rotateX(var(--about-tilt-x,0deg)) rotateY(var(--about-tilt-y,0deg))!important;
 transform-origin:50% 60%;transition:transform 130ms cubic-bezier(.25,1,.5,1)!important;
}
html[data-theme][data-motion=paused] body.home-astra .chrollo-card .ticket-visual,
html[data-theme] body.home-astra.paused .chrollo-card .ticket-visual{transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse),(max-width:700px){
 html[data-theme] body.home-astra .chrollo-card .ticket-visual{transform:none!important;transition:none!important}
}

/* A paused/reduced Nen remains visible as a static soft field, including focused links. */
/* Pop the portrait higher & larger within its art lane on hover, without separate copy movement. */
@media(min-width:701px) and (hover:hover) and (pointer:fine){
 html[data-theme] body.home-astra .chrollo-card .ticket-portrait-frame{transform-origin:50% 100%!important;transition:transform 380ms cubic-bezier(.22,1,.36,1)!important}
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-portrait-frame{transform:translate3d(0,-11px,0) scale(1.12)!important}
}
html[data-theme][data-motion=paused] body.home-astra .chrollo-card .ticket-portrait-frame,
html[data-theme] body.home-astra.paused .chrollo-card:is(:hover,:focus-visible) .ticket-portrait-frame{transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse),(max-width:700px){
 html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-portrait-frame{transform:none!important;transition:none!important}
}
html[data-theme][data-motion=paused] body.home-astra .chrollo-card .ticket-glow,
html[data-theme] body.home-astra.paused .chrollo-card .ticket-glow{opacity:.62!important;transform:none!important;transition:none!important;animation:none!important}
html[data-theme][data-motion=paused] body.home-astra .chrollo-card .nen-smoke,
html[data-theme] body.home-astra.paused .chrollo-card .nen-smoke{opacity:.6!important}
html[data-theme][data-motion=paused] body.home-astra .chrollo-card .nen-smoke>g,
html[data-theme] body.home-astra.paused .chrollo-card .nen-smoke>g{animation:none!important;transform:none!important;opacity:.5!important}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.home-astra .chrollo-card .ticket-glow{opacity:.62!important;transform:none!important;transition:none!important;animation:none!important}
 html[data-theme] body.home-astra .chrollo-card .nen-smoke{opacity:.6!important}
 html[data-theme] body.home-astra .chrollo-card .nen-smoke>g{animation:none!important;transform:none!important;opacity:.5!important}
}

/* Procedural flow replaces the animated SVG; a quiet static fallback survives
   unavailable Canvas, Pause, reduced motion and hidden/offscreen lifecycle. */
html[data-theme] body.home-astra .chrollo-card .nen-flow{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:blur(2px)}
html[data-theme] body.home-astra .chrollo-card .ticket-glow[data-flow=running] .nen-flow{display:block}
html[data-theme] body.home-astra .chrollo-card .ticket-glow[data-flow=running] .nen-body-field{display:none}
html[data-theme] body.home-astra .chrollo-card .nen-smoke>g{animation:none!important;transform:none!important;opacity:.35!important}

/* ==========================================================================
   A22 Flagship Golden Aura Breathing on `📈 การเงิน · ลงทุน` + Subtle Peer Glow
   (Audi 2026-10-21):
   "โอเครต่อไปที่หน้าhttps://audikung-site.vercel.app/# ตรง 📈 การเงิน · ลงทุน
    ทำให้มันเรืองเเสงเข้าออกๆ เด่นๆกว่าอันอื่นหน่อยไหม อาจจะออร่าแสงสีทองอะไรงี้ อันอื่นอาจะมีเบาๆ"
   - Primary (`📈 การเงิน · ลงทุน` in both `.ak-worlds .aknav-link[data-world=finance]`
     and `#worlds .world.world-finance`): Prominent breathing Champagne-Gold aura
     (`astraFinanceGoldAuraPulse`, `astraFinanceWindowGoldPulse`, `astraFinanceNavGoldPulse`)
     that inhales and exhales warmly (`เรืองแสงเข้าออกๆ เด่นๆกว่าอันอื่น · ออร่าแสงสีทอง`).
   - Peers (`🤖 ความรู้ + AI`, `🌿 พัก & โฟกัส`, `🎧 สิ่งที่ชอบ`, `👤 รู้จักออดี้`):
     Soft, gentle breathing ambient glow (`astraPeerPortalSubtlePulse`,
     `astraPeerWindowSubtlePulse`, `astraPeerNavSubtlePulse`) in each world's accent hue
     (`อันอื่นอาจะมีเบาๆ`).
   ========================================================================== */

@keyframes astraFinanceGoldAuraPulse{
 0%,100%{
  transform:rotate(-17deg) scale3d(.86,.84,1);
  opacity:.32;
 }
 50%{
  transform:rotate(-15deg) scale3d(1.18,1.22,1);
  opacity:1;
 }
}
@keyframes astraFinanceGoldRingPulse{
 0%,100%{
  transform:rotate(-17deg) scale3d(.9,.88,1);
  opacity:.24;
 }
 50%{
  transform:rotate(-17deg) scale3d(1.12,1.14,1);
  opacity:.92;
 }
}
@keyframes astraFinanceWindowGoldPulseDark{
 0%,100%{
  transform:scale3d(1,1,1);
 }
 50%{
  transform:scale3d(1.018,1.018,1);
 }
}
@keyframes astraFinanceWindowGoldPulseLight{
 0%,100%{
  transform:scale3d(1,1,1);
 }
 50%{
  transform:scale3d(1.018,1.018,1);
 }
}
@keyframes astraFinanceNavGoldPulseDark{
 0%,100%{
  transform:translate3d(0,0,0) scale3d(1,1,1);
 }
 50%{
  transform:translate3d(0,-.5px,0) scale3d(1.02,1.02,1);
 }
}
@keyframes astraFinanceNavGoldPulseLight{
 0%,100%{
  transform:translate3d(0,0,0) scale3d(1,1,1);
 }
 50%{
  transform:translate3d(0,-.5px,0) scale3d(1.02,1.02,1);
 }
}
@keyframes astraFinanceDotGoldPulse{
 0%,100%{
  transform:scale(.85);
  opacity:.72;
 }
 50%{
  transform:scale(1.32);
  opacity:1;
 }
}
@keyframes astraPeerPortalSubtlePulse{
 0%,100%{
  transform:rotate(-17deg) scale3d(.94,.92,1);
  opacity:.16;
 }
 50%{
  transform:rotate(-16deg) scale3d(1.05,1.06,1);
  opacity:.44;
 }
}
@keyframes astraPeerWindowSubtlePulse{
 0%,100%{
  transform:scale3d(1,1,1);
 }
 50%{
  transform:scale3d(1.01,1.01,1);
 }
}
@keyframes astraPeerNavSubtlePulse{
 0%,100%{
  opacity:.92;
 }
 50%{
  opacity:1;
 }
}

/* Remove clip-path on .portal-window so outer breathing box-shadows aren't clipped (`border-radius:50% + overflow:hidden` already clips child photos) */
html[data-theme] body.home-astra .worlds .portal-window{
 clip-path:none!important;
 isolation:isolate;
}

/* 1. Top Navbar: finance = the same green glow as every other page, still breathing (Audi 2026-10-24: "📈 การเงิน · ลงทุนทำไมตอนอยู่หน้าแรกยังเห็นไม่เป็นสีเขียวอยู่เลย" — the A22 gold nav pill is retired; the gold aura stays only on the Home finance window) */
html[data-theme=dark] body.home-astra .ak-shell :is(.ak-worlds,.ak-mobile-worlds) .aknav-link[data-world=finance]{
 font-weight:600!important;
 color:#b6f8d6!important;
 background:linear-gradient(135deg,rgba(16,185,129,.22) 0%,rgba(229,197,134,.12) 100%)!important;
 box-shadow:inset 0 0 0 1.25px rgba(52,211,153,.62),0 0 16px rgba(16,185,129,.32),0 0 28px rgba(229,197,134,.16)!important;
 will-change:transform;
 animation:astraFinanceNavGoldPulseDark 2.6s ease-in-out infinite!important;
}
html[data-theme=light] body.home-astra .ak-shell :is(.ak-worlds,.ak-mobile-worlds) .aknav-link[data-world=finance]{
 font-weight:600!important;
 color:#065f46!important;
 background:linear-gradient(135deg,rgba(16,185,129,.18) 0%,rgba(245,210,133,.26) 100%)!important;
 box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.58),0 4px 16px rgba(16,185,129,.24),0 0 18px rgba(212,175,55,.22)!important;
 will-change:transform;
 animation:astraFinanceNavGoldPulseLight 2.6s ease-in-out infinite!important;
}
html[data-theme] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=finance]::after{
 width:7px!important;
 height:7px!important;
 background:radial-gradient(circle,#fef08a 0%,#34d399 68%)!important;
 box-shadow:0 0 8px #34d399,0 0 14px rgba(245,210,133,.65)!important;
 will-change:transform,opacity;
 animation:astraFinanceDotGoldPulse 2.6s ease-in-out infinite!important;
}
html[data-theme=light] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=finance]::after{
 background:radial-gradient(circle,#10b981 0%,#047857 75%)!important;
}
/* Peer navbar pills (`🤖 ความรู้ + AI`, `🌿 พัก & โฟกัส`, `🎧 สิ่งที่ชอบ`, `👤 รู้จักออดี้`): subtle breathing glow */
html[data-theme] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world]:not([data-world=finance]):not([data-world=home]):not(:hover):not(:focus-visible){
 box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--world-edge) 28%,transparent),0 0 10px color-mix(in srgb,var(--world-edge) 14%,transparent)!important;
 animation:astraPeerNavSubtlePulse 4.2s ease-in-out infinite!important;
}
html[data-theme] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=knowledge]{animation-delay:-.8s!important}
html[data-theme] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=focus]{animation-delay:-1.9s!important}
html[data-theme] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=interests]{animation-delay:-3.1s!important}
html[data-theme] body.home-astra .ak-shell .ak-worlds .aknav-link[data-world=about]{animation-delay:-2.4s!important}

/* 2. Hero World Portal #1 (`#worlds .world.world-finance`): Prominent Breathing Champagne-Gold Aura */
html[data-theme] body.home-astra .world-finance .portal-visual::before{
 content:''!important;
 display:block!important;
 position:absolute!important;
 inset:-6px -26px -14px!important;
 border-radius:50%!important;
 background:
  radial-gradient(ellipse at 50% 50%,rgba(254,240,138,.86) 0%,rgba(251,191,36,.58) 34%,rgba(245,158,11,.28) 58%,transparent 78%)!important;
 filter:blur(16px)!important;
 transform:rotate(-17deg)!important;
 pointer-events:none!important;
 z-index:0!important;
 will-change:transform,opacity!important;
 animation:astraFinanceGoldAuraPulse 2.6s ease-in-out infinite!important;
}
html[data-theme=light] body.home-astra .world-finance .portal-visual::before{
 background:
  radial-gradient(ellipse at 50% 50%,rgba(251,191,36,.78) 0%,rgba(245,158,11,.5) 38%,rgba(217,119,6,.22) 62%,transparent 80%)!important;
 filter:blur(16px)!important;
}
html[data-theme] body.home-astra .world-finance:not([data-preview-state]) .portal-visual::after{
 content:''!important;
 display:block!important;
 position:absolute!important;
 inset:10px -14px -2px!important;
 border-radius:50%!important;
 border:0!important;
 box-shadow:none!important;
 background:
  radial-gradient(ellipse at 50% 50%,rgba(255,251,235,.65) 0%,rgba(253,230,138,.44) 42%,transparent 72%)!important;
 filter:blur(9px)!important;
 pointer-events:none!important;
 z-index:1!important;
 will-change:transform,opacity!important;
 animation:astraFinanceGoldRingPulse 2.6s ease-in-out infinite!important;
}
html[data-theme=light] body.home-astra .world-finance:not([data-preview-state]) .portal-visual::after{
 background:
  radial-gradient(ellipse at 50% 50%,rgba(254,240,138,.72) 0%,rgba(251,191,36,.42) 44%,transparent 72%)!important;
}
html[data-theme=dark] body.home-astra .worlds .world-finance:not(:hover):not(:focus-visible):not([data-preview-state]) .portal-window{
 border:2.5px solid #f5d285!important;
 box-shadow:
  0 0 0 2px rgba(254,240,138,.3),
  0 14px 32px -8px rgba(4,12,24,.72),
  0 0 28px rgba(251,191,36,.54),
  0 0 54px rgba(245,210,133,.34),
  inset 0 0 22px rgba(254,240,138,.24)!important;
 will-change:transform;
 animation:astraFinanceWindowGoldPulseDark 2.6s ease-in-out infinite!important;
}
html[data-theme=light] body.home-astra .worlds .world-finance:not(:hover):not(:focus-visible):not([data-preview-state]) .portal-window{
 border:2.5px solid #d99b26!important;
 box-shadow:
  0 0 0 2.5px rgba(251,191,36,.34),
  0 14px 28px -8px rgba(146,92,18,.26),
  0 0 26px rgba(245,158,11,.44),
  0 0 48px rgba(251,191,36,.3),
  inset 0 0 18px rgba(254,240,138,.38)!important;
 will-change:transform;
 animation:astraFinanceWindowGoldPulseLight 2.6s ease-in-out infinite!important;
}
html[data-theme=dark] body.home-astra .worlds .world-finance:is(:hover,:focus-visible,[data-preview-state]) .portal-window{
 border:2.5px solid #fef08a!important;
 box-shadow:
  0 0 0 4px rgba(253,230,138,.42),
  0 20px 42px -8px rgba(4,12,24,.78),
  0 0 46px rgba(251,191,36,.78),
  0 0 80px rgba(245,210,133,.46),
  inset 0 0 28px rgba(253,230,138,.32)!important;
}
html[data-theme=light] body.home-astra .worlds .world-finance:is(:hover,:focus-visible,[data-preview-state]) .portal-window{
 border:2.5px solid #b4690e!important;
 box-shadow:
  0 0 0 4px rgba(245,184,65,.48),
  0 18px 36px -8px rgba(146,92,18,.34),
  0 0 40px rgba(245,158,11,.58),
  inset 0 1px 0 rgba(255,255,255,.92)!important;
}
html[data-theme=dark] body.home-astra .worlds .world.world-finance .world-title{
 color:#fef9c3!important;
 text-shadow:0 0 18px rgba(245,210,133,.46),0 0 32px rgba(251,191,36,.24)!important;
}
html[data-theme=light] body.home-astra .worlds .world.world-finance .world-title{
 color:#78350f!important;
 text-shadow:0 1px 0 rgba(255,255,255,.8),0 0 14px rgba(245,184,65,.28)!important;
}
html[data-theme=dark] body.home-astra .worlds .world-finance .finance-enter{
 border:1px solid rgba(245,210,133,.78)!important;
 box-shadow:
  0 10px 24px -6px rgba(4,12,24,.72),
  0 0 22px rgba(245,210,133,.34),
  0 0 14px rgba(16,185,129,.22),
  inset 0 1px 0 rgba(254,240,138,.48)!important;
}

/* 3. Peer Hero World Portals (`🤖 ความรู้ + AI`, `🌿 พัก & โฟกัส`, `🎧 สิ่งที่ชอบ`):
      Subtle, gentle breathing ambient glow (`อันอื่นอาจะมีเบาๆ`) */
html[data-theme] body.home-astra .worlds .world:not(.world-finance) .portal-visual::before{
 content:''!important;
 display:block!important;
 position:absolute!important;
 inset:18px -6px 6px!important;
 border-radius:50%!important;
 background:
  radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--world-edge) 46%,transparent) 0%,color-mix(in srgb,var(--world-edge) 22%,transparent) 48%,transparent 76%)!important;
 filter:blur(12px)!important;
 transform:rotate(-17deg)!important;
 pointer-events:none!important;
 z-index:0!important;
 will-change:transform,opacity!important;
 animation:astraPeerPortalSubtlePulse 4.4s ease-in-out infinite!important;
}
html[data-theme] body.home-astra .worlds .world-knowledge .portal-visual::before{animation-delay:-.9s!important}
html[data-theme] body.home-astra .worlds .world-focus .portal-visual::before{animation-delay:-2.1s!important}
html[data-theme] body.home-astra .worlds .world-interests .portal-visual::before{animation-delay:-3.3s!important}

html[data-theme] body.home-astra .worlds .world:not(.world-finance):not(:hover):not(:focus-visible):not([data-preview-state]) .portal-window{
 animation:astraPeerWindowSubtlePulse 4.4s ease-in-out infinite!important;
}
html[data-theme] body.home-astra .worlds .world-knowledge:not(:hover):not(:focus-visible):not([data-preview-state]) .portal-window{animation-delay:-.9s!important}
html[data-theme] body.home-astra .worlds .world-focus:not(:hover):not(:focus-visible):not([data-preview-state]) .portal-window{animation-delay:-2.1s!important}
html[data-theme] body.home-astra .worlds .world-interests:not(:hover):not(:focus-visible):not([data-preview-state]) .portal-window{animation-delay:-3.3s!important}

html[data-theme] body.home-astra .worlds .world:not(.world-finance):is(:hover,:focus-visible,[data-preview-state]) .portal-visual::before{
 animation:none!important;
 opacity:.72!important;
 transform:rotate(0deg) scale(1.06)!important;
}

/* 4. Respect Pause & prefers-reduced-motion for all A22 Golden & Peer Aura animations */
html[data-theme][data-motion=paused] body.home-astra :is(.aknav-link[data-world],.aknav-link[data-world]::after,#worlds .world .portal-visual::before,#worlds .world .portal-visual::after,#worlds .world .portal-window,.disc),
html[data-theme] body.home-astra.paused :is(.aknav-link[data-world],.aknav-link[data-world]::after,#worlds .world .portal-visual::before,#worlds .world .portal-visual::after,#worlds .world .portal-window,.disc){
 animation:none!important;
}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.home-astra :is(.aknav-link[data-world],.aknav-link[data-world]::after,#worlds .world .portal-visual::before,#worlds .world .portal-visual::after,#worlds .world .portal-window,.disc){
  animation:none!important;
 }
}

/* ==========================================================================
   A23 Solid Hero Disc (`.disc`) + Stronger Expansive Outer Breathing Aura + Wordmark `K` Sync
   (Audi 2026-10-21: "คุณคิดว่าตรงนี้มันโอเครรึยัง ไอวงกลมข้างหลังเรามันเคยมีสีรูปแบบอื่นไหม
    มันดูมีออร่าหรือเรื่องแสงด้วย จะสวยกว่าไหม" → "และขอลองออร่าข้างหลังฟุ้งแรงขึ้นอีก")
   - Keeps the disc body 100% solid/opaque (`ทึบๆ` — NO `.disc-inner` wire ring cutting
     across Audi's head, NO hollow dark center).
   - Dual-layer expansive outer breathing aura (`.disc::before` wide `-62px / blur(36px)` bloom +
     `.disc::after` intense `-26px / blur(14px)` corona + multi-layer outer `box-shadow`)
     that radiates *behind* the solid disc in sync with `📈 การเงิน · ลงทุน` (Radiant Emerald + Champagne Gold)
     and smoothly shifts both solid fill and outer aura when hovering `knowledge`, `focus`, `interests`, or `about`.
   ========================================================================== */
@keyframes astraDiscSoftAuraPulse{
 0%,100%{
  opacity:.78;
  transform:scale(.95);
 }
 50%{
  opacity:1;
  transform:scale(1.13);
 }
}
@keyframes astraDiscInnerCoronaPulse{
 0%,100%{
  opacity:.74;
  transform:scale(.98);
 }
 50%{
  opacity:1;
  transform:scale(1.07);
 }
}

body.home-astra,
body.home-astra[data-world=home],
body.home-astra[data-world=finance]{
 --a-disc:#bde6d0;
 --disc-sheen:rgba(245,194,91,.42);
 --disc-highlight:rgba(255,252,235,.88);
 --disc-rim:rgba(217,155,38,.64);
 --disc-aura-glow:rgba(38,166,115,.52);
 --disc-aura-outer:rgba(245,184,65,.58);
 --disc-aura-ambient:rgba(52,211,153,.32);
}
body.home-astra[data-world=knowledge]{
 --a-disc:#c7e0fb;
 --disc-sheen:rgba(142,189,238,.44);
 --disc-highlight:rgba(255,255,255,.88);
 --disc-rim:rgba(54,123,193,.58);
 --disc-aura-glow:rgba(59,130,246,.52);
 --disc-aura-outer:rgba(56,189,248,.48);
 --disc-aura-ambient:rgba(96,165,250,.30);
}
body.home-astra[data-world=focus]{
 --a-disc:#f5e2b3;
 --disc-sheen:rgba(253,224,71,.46);
 --disc-highlight:rgba(255,253,240,.90);
 --disc-rim:rgba(180,122,34,.62);
 --disc-aura-glow:rgba(245,158,11,.54);
 --disc-aura-outer:rgba(251,191,36,.52);
 --disc-aura-ambient:rgba(253,224,71,.32);
}
body.home-astra[data-world=interests]{
 --a-disc:#f6d5cb;
 --disc-sheen:rgba(251,146,120,.42);
 --disc-highlight:rgba(255,248,245,.88);
 --disc-rim:rgba(200,101,81,.58);
 --disc-aura-glow:rgba(239,68,68,.46);
 --disc-aura-outer:rgba(244,114,182,.44);
 --disc-aura-ambient:rgba(251,146,120,.28);
}
body.home-astra[data-world=about]{
 --a-disc:#e3d2f6;
 --disc-sheen:rgba(192,132,252,.42);
 --disc-highlight:rgba(252,248,255,.88);
 --disc-rim:rgba(139,101,190,.58);
 --disc-aura-glow:rgba(168,85,247,.48);
 --disc-aura-outer:rgba(192,132,252,.44);
 --disc-aura-ambient:rgba(139,92,246,.28);
}

html[data-theme=dark] body.home-astra,
html[data-theme=dark] body.home-astra[data-world=home],
html[data-theme=dark] body.home-astra[data-world=finance]{
 --a-disc:#1e5240;
 --disc-sheen:rgba(245,210,133,.34);
 --disc-highlight:rgba(254,240,138,.62);
 --disc-rim:rgba(245,210,133,.72);
 --disc-aura-glow:rgba(52,211,153,.68);
 --disc-aura-outer:rgba(245,210,133,.62);
 --disc-aura-ambient:rgba(16,185,129,.42);
}
html[data-theme=dark] body.home-astra[data-world=knowledge]{
 --a-disc:#224975;
 --disc-sheen:rgba(147,197,253,.36);
 --disc-highlight:rgba(191,219,254,.64);
 --disc-rim:rgba(147,197,253,.72);
 --disc-aura-glow:rgba(96,165,250,.70);
 --disc-aura-outer:rgba(56,189,248,.58);
 --disc-aura-ambient:rgba(37,99,235,.42);
}
html[data-theme=dark] body.home-astra[data-world=focus]{
 --a-disc:#5c4620;
 --disc-sheen:rgba(253,224,71,.36);
 --disc-highlight:rgba(254,240,138,.68);
 --disc-rim:rgba(254,240,138,.76);
 --disc-aura-glow:rgba(251,191,36,.70);
 --disc-aura-outer:rgba(245,210,133,.60);
 --disc-aura-ambient:rgba(217,119,6,.42);
}
html[data-theme=dark] body.home-astra[data-world=interests]{
 --a-disc:#643430;
 --disc-sheen:rgba(253,164,143,.34);
 --disc-highlight:rgba(254,205,211,.62);
 --disc-rim:rgba(251,146,120,.72);
 --disc-aura-glow:rgba(248,113,113,.66);
 --disc-aura-outer:rgba(244,114,182,.56);
 --disc-aura-ambient:rgba(225,29,72,.38);
}
html[data-theme=dark] body.home-astra[data-world=about]{
 --a-disc:#4c3470;
 --disc-sheen:rgba(216,180,254,.36);
 --disc-highlight:rgba(233,213,255,.64);
 --disc-rim:rgba(216,180,254,.72);
 --disc-aura-glow:rgba(192,132,252,.68);
 --disc-aura-outer:rgba(168,85,247,.58);
 --disc-aura-ambient:rgba(124,58,237,.40);
}

html[data-theme] body.home-astra .disc{
 background-color:var(--a-disc)!important;
 background-image:
  radial-gradient(circle at 30% 24%,var(--disc-sheen) 0%,transparent 60%),
  linear-gradient(145deg,rgba(255,255,255,.16) 0%,transparent 58%,rgba(6,16,28,.18) 100%)!important;
 border:1.5px solid var(--disc-rim)!important;
 box-shadow:
  0 0 44px 6px var(--disc-aura-glow),
  0 0 92px 18px var(--disc-aura-outer),
  0 0 148px 28px var(--disc-aura-ambient),
  inset 0 1.5px 0 var(--disc-highlight)!important;
 animation:none!important;
 transition:background-color 380ms ease-out,border-color 380ms ease-out,box-shadow 380ms ease-out!important;
}
html[data-theme] body.home-astra .disc::before{
 content:''!important;
 display:block!important;
 position:absolute!important;
 inset:-62px!important;
 border-radius:50%!important;
 background:
  radial-gradient(circle at 50% 45%,var(--disc-aura-outer) 0%,var(--disc-aura-glow) 38%,var(--disc-aura-ambient) 58%,transparent 76%)!important;
 filter:blur(34px)!important;
 pointer-events:none!important;
 z-index:-1!important;
 will-change:transform,opacity!important;
 animation:astraDiscSoftAuraPulse 3.4s ease-in-out infinite!important;
 transition:background 380ms ease-out!important;
}
html[data-theme] body.home-astra .disc::after{
 content:''!important;
 display:block!important;
 position:absolute!important;
 inset:-26px!important;
 border-radius:50%!important;
 background:
  radial-gradient(circle at 46% 42%,var(--disc-aura-outer) 0%,var(--disc-aura-glow) 52%,transparent 74%)!important;
 filter:blur(14px)!important;
 pointer-events:none!important;
 z-index:-1!important;
 will-change:transform,opacity!important;
 animation:astraDiscInnerCoronaPulse 3.4s ease-in-out infinite!important;
 transition:background 380ms ease-out!important;
}
html[data-theme] body.home-astra .disc-inner{
 border:0!important;
 box-shadow:none!important;
 background:transparent!important;
}
html[data-theme] body.home-astra .letter-k{
 color:var(--world-edge,var(--a-accent))!important;
 text-shadow:0 0 24px color-mix(in srgb,var(--world-edge,var(--a-accent)) 48%,transparent)!important;
 transition:color 350ms ease-out,text-shadow 350ms ease-out!important;
}
html[data-motion=paused] body.home-astra :is(.disc,.disc::before,.disc::after,.letter-k),
body.home-astra.paused :is(.disc,.disc::before,.disc::after,.letter-k){
 animation:none!important;
 transition:none!important;
}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.home-astra :is(.disc,.disc::before,.disc::after,.letter-k){
  animation:none!important;
  transition:none!important;
 }
}

/* ==========================================================================
   A24 Personal Builder & AI Agents Note Before Latest Clips (`#builder-note`)
   (Audi 2026-10-21: "แล้วที่หน้า 🏠 หน้าแรก ก่อนส่วนคลิปล่าสุดเนี่ย เราไม่มีโซนที่บอกว่าเว็บนี้เป็นเว็บไซต์.
    ผมไม่ได้ตั้งใจให้มันเป็นเว็บไซต์การเงินแบบ 100% แต่จะเป็นเว็บไซต์ของผมเองนี่แหละที่อยากจะมาแชร์
    เครื่องมือและความรู้ต่างๆ ให้ทุกคนได้เข้ามาใช้กันได้เลย อะไรอย่างเงี้ย.
    บางหน้าอาจจะมี bug อยู่ อะไรบ้าง เพราะว่าผมทำคนเดียวแล้วก็ผมทำคนเดียวกับ AI agents.
    ทีมงานผมอะไรเงี้ย ก็อย่าถือสากัน. อะไรงี้ดีไหม แล้วทำให้มันสวย หารูปหรือว่า 16 bit หรือว่าอะไรก็ได้มาใส่อ่ะ")
   - Single crafted editorial panel (`.bn-stage`, zero nested sub-boxes / zero pill clouds).
   - 16-bit Pixel Duo (`mascot-16bit-study.webp` + `poojang-pixel16-wave.webp`) +
     Solo Builder (`audi-brand.jpg`) + bare official AI Agent vector logos (`claude.svg`, `codex.svg`, `antigravity.svg`).
   ========================================================================== */
@keyframes astraBnPixelBob{
 0%,100%{transform:translate3d(0,0,0)}
 50%{transform:translate3d(0,-4px,0)}
}
@keyframes astraBnDotPulse{
 0%,100%{transform:scale(1);opacity:.85;box-shadow:0 0 0 0 rgba(52,211,153,.55)}
 50%{transform:scale(1.16);opacity:1;box-shadow:0 0 0 6px rgba(52,211,153,0)}
}

html[data-theme] body.home-astra .home-builder-note{
 max-width:1180px;
 margin:8px auto 0;
 padding:22px 0 8px;
}
@media(max-width:1240px){
 html[data-theme] body.home-astra .home-builder-note{
  width:calc(100% - 80px);
 }
}
@media(max-width:820px){
 html[data-theme] body.home-astra .home-builder-note{
  width:calc(100% - 40px);
 }
}

html[data-theme] body.home-astra .bn-stage{
 position:relative;
 display:grid;
 grid-template-columns:238px minmax(0,1fr);
 gap:28px;
 align-items:center;
 padding:26px 30px;
 border-radius:20px;
 overflow:hidden;
 background:
  radial-gradient(120% 140% at 0% 0%,rgba(245,210,133,.13) 0%,rgba(119,198,157,.09) 42%,transparent 74%),
  linear-gradient(165deg,rgba(15,28,48,.86) 0%,rgba(9,18,34,.92) 100%);
 border:1px solid rgba(245,210,133,.28);
 box-shadow:
  0 18px 42px -18px rgba(3,8,20,.62),
  inset 0 1px 0 rgba(255,248,220,.14);
}
html[data-theme=light] body.home-astra .bn-stage{
 background:
  radial-gradient(120% 140% at 0% 0%,rgba(245,194,91,.18) 0%,rgba(77,150,115,.10) 44%,transparent 76%),
  linear-gradient(165deg,#fffdf7 0%,#f6efe0 100%);
 border:1px solid rgba(180,132,44,.32);
 box-shadow:
  0 14px 32px -16px rgba(24,42,68,.14),
  0 3px 0 rgba(180,132,44,.18),
  inset 0 1px 0 rgba(255,255,255,.92);
}

/* Glowing top accent hairline */
html[data-theme] body.home-astra .bn-stage::before{
 content:'';
 position:absolute;
 top:0;
 left:24px;
 right:24px;
 height:2px;
 background:linear-gradient(90deg,transparent 0%,#f5d285 24%,#77c69d 58%,#8ebdee 82%,transparent 100%);
 opacity:.88;
 pointer-events:none;
}

/* Left Column: 16-bit Pixel Workshop + Solo & AI Crew (100% frameless inside .bn-stage) */
html[data-theme] body.home-astra .bn-art-stage{
 position:relative;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:10px;
 padding-right:24px;
 border-right:1px solid rgba(148,163,184,.18);
 background:radial-gradient(circle at 50% 46%,rgba(245,210,133,.11) 0%,transparent 70%);
}
html[data-theme=light] body.home-astra .bn-art-stage{
 border-right-color:rgba(120,92,38,.18);
 background:radial-gradient(circle at 50% 46%,rgba(245,194,91,.16) 0%,transparent 70%);
}

html[data-theme] body.home-astra .bn-pixel-badges{
 display:inline-flex;
 align-items:center;
 gap:6px;
 font:600 11px/1 'AK Thai','Google Sans','Outfit', 'Sarabun',sans-serif;
 letter-spacing:.08em;
 text-transform:uppercase;
 color:#f5d285;
}
html[data-theme=light] body.home-astra .bn-pixel-badges{
 color:#8a5a10;
}
html[data-theme] body.home-astra .bn-pixel-badges [data-ak-px]{
 margin-right:0;
}

html[data-theme] body.home-astra .bn-pixel-duo{
 position:relative;
 display:flex;
 align-items:flex-end;
 justify-content:center;
 gap:2px;
 min-height:112px;
}
html[data-theme] body.home-astra .bn-px-mascot{
 width:104px;
 height:104px;
 object-fit:contain;
 image-rendering:pixelated;
 filter:drop-shadow(0 8px 14px rgba(4,10,24,.36));
 animation:astraBnPixelBob 2.4s steps(2,end) infinite;
}
html[data-theme] body.home-astra .bn-px-poojang{
 width:96px;
 height:96px;
 margin-left:-8px;
 animation-delay:-1.2s;
}

html[data-theme] body.home-astra .bn-crew-strip{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:6px;
 width:100%;
 padding-top:8px;
 border-top:1px dashed rgba(148,163,184,.22);
}
html[data-theme=light] body.home-astra .bn-crew-strip{
 border-top-color:rgba(120,92,38,.22);
}
html[data-theme] body.home-astra .bn-crew-icons{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:8px;
}
html[data-theme] body.home-astra .bn-crew-human{
 width:28px;
 height:28px;
 border-radius:50%;
 object-fit:cover;
 border:1.5px solid #f5d285;
}
html[data-theme=light] body.home-astra .bn-crew-human{
 border-color:#b47a22;
}
html[data-theme] body.home-astra .bn-crew-plus{
 font:700 13px/1 'AK Thai','Google Sans','Outfit',sans-serif;
 color:#f5d285;
}
html[data-theme=light] body.home-astra .bn-crew-plus{
 color:#9a6715;
}
html[data-theme] body.home-astra .bn-crew-ai{
 width:21px;
 height:21px;
 object-fit:contain;
 filter:drop-shadow(0 2px 4px rgba(0,0,0,.24));
}
html[data-theme] body.home-astra .bn-crew-caption{
 font:500 12px/1.35 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--a-copy);
 text-align:center;
}

/* Right Column: Editorial Note Copy */
html[data-theme] body.home-astra .bn-copy{
 display:flex;
 flex-direction:column;
 gap:14px;
 min-width:0;
}
html[data-theme] body.home-astra .bn-kicker{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:6px;
 font:600 13px/1.35 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 letter-spacing:.03em;
 color:#f5d285;
}
html[data-theme=light] body.home-astra .bn-kicker{
 color:#8a5a10;
}
html[data-theme] body.home-astra .bn-kicker [data-ak-px]{
 margin-right:2px;
}
html[data-theme] body.home-astra .bn-kicker-sep{
 opacity:.55;
}

html[data-theme] body.home-astra #builder-note-title{
 margin:0;
 font:500 clamp(18.5px,2vw,23px)/1.45 'AK Thai','Google Sans','Outfit', 'Sarabun',sans-serif;
 letter-spacing:-.01em;
 color:var(--a-ink);
 text-wrap:pretty;
}

html[data-theme] body.home-astra .bn-points{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:22px;
 padding-top:12px;
 border-top:1px solid rgba(148,163,184,.16);
}
html[data-theme=light] body.home-astra .bn-points{
 border-top-color:rgba(120,92,38,.16);
}
html[data-theme] body.home-astra .bn-point{
 display:flex;
 flex-direction:column;
 gap:5px;
 min-width:0;
}
html[data-theme] body.home-astra .bn-point + .bn-point{
 padding-left:22px;
 border-left:1px solid rgba(148,163,184,.16);
}
html[data-theme=light] body.home-astra .bn-point + .bn-point{
 border-left-color:rgba(120,92,38,.16);
}
html[data-theme] body.home-astra .bn-point strong{
 display:flex;
 align-items:center;
 gap:4px;
 font:500 15px/1.4 'AK Thai','Google Sans','Outfit', 'Sarabun',sans-serif;
 color:var(--a-ink);
}
html[data-theme] body.home-astra .bn-point p{
 margin:0;
 font:400 14.2px/1.68 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--a-copy);
 text-wrap:pretty;
}

html[data-theme] body.home-astra .bn-footer{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:space-between;
 gap:10px 18px;
 padding-top:11px;
 border-top:1px solid rgba(148,163,184,.14);
 font:500 13px/1.4 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
}
html[data-theme=light] body.home-astra .bn-footer{
 border-top-color:rgba(120,92,38,.14);
}
html[data-theme] body.home-astra .bn-status{
 display:inline-flex;
 align-items:center;
 gap:8px;
 color:var(--a-copy);
}
html[data-theme] body.home-astra .bn-live-dot{
 width:8px;
 height:8px;
 border-radius:50%;
 background:#34d399;
 flex-shrink:0;
 animation:astraBnDotPulse 2.4s ease-in-out infinite;
}
html[data-theme=light] body.home-astra .bn-live-dot{
 background:#10b981;
}
html[data-theme] body.home-astra .bn-feedback-link:not(.aku-control){
 color:#f5d285;
 text-decoration:none;
 font-weight:600;
 transition:color 180ms ease,transform 180ms ease;
}
html[data-theme=light] body.home-astra .bn-feedback-link:not(.aku-control){
 color:#145c3e;
}
html[data-theme] body.home-astra .bn-feedback-link:not(.aku-control):is(:hover,:focus-visible){
 text-decoration:underline;
 text-underline-offset:4px;
 transform:translateX(2px);
}

@media(max-width:920px){
 html[data-theme] body.home-astra .bn-stage{
  grid-template-columns:1fr;
  gap:18px;
  padding:22px 20px;
 }
 html[data-theme] body.home-astra .bn-art-stage{
  padding-right:0;
  padding-bottom:14px;
  border-right:0;
  border-bottom:1px solid rgba(148,163,184,.18);
 }
 html[data-theme=light] body.home-astra .bn-art-stage{
  border-bottom-color:rgba(120,92,38,.18);
 }
 html[data-theme] body.home-astra .bn-points{
  grid-template-columns:1fr;
  gap:14px;
 }
 html[data-theme] body.home-astra .bn-point + .bn-point{
  padding-left:0;
  padding-top:14px;
  border-left:0;
  border-top:1px solid rgba(148,163,184,.16);
 }
 html[data-theme=light] body.home-astra .bn-point + .bn-point{
  border-top-color:rgba(120,92,38,.16);
 }
}

html[data-motion=paused] body.home-astra :is(.bn-px-mascot,.bn-live-dot),
body.home-astra.paused :is(.bn-px-mascot,.bn-live-dot){
 animation:none!important;
}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.home-astra :is(.bn-px-mascot,.bn-live-dot){
  animation:none!important;
 }
}

/* ==========================================================================
   A25 Chrollo Card Right-Side HxH Nen Mist + Bandit's Secret Arcane Seal Gimmick
   & 4 World Sticker Portals Subtle Symbolic Motifs
   (Audi 2026-10-21:
    1. "ตอนแรกทำให้ log มันเล็กกว่านี้หน่อยไหม แต่ตอน hover ก็ทำให้ log มันใหญ่ขึ้นด้วย
        ตัวฉันที่ pop up ใหญ่ขึ้นด้วยนิดนึง แล้ว log ก็จากเอียงกลับมาตรง"
    2. "คุณคิดว่าตอน hover มันควรมีอะไรหน่อยไหม เพราะว่าไอ้ด้านขวาตรงส่วนหลัง text มันดำมืดแบบว่าเป็น plain black เลย
        มันควรจะมีสีแบบว่าเป็น gradient หรือว่ามัว ๆ หรือว่ามี gimmick อะไรหน่อยไหม ให้เข้ากับธีม Hunter x Hunter"
    3. "ข้างหลัง Sticker ทั้ง 4 อันเนี่ย (การเงิน, การลงทุน, ความรู้บวก AI, พักผ่อน) โฟกัสสิ่งที่ชอบเนี่ย
        มันควรมีลวดลายหรือว่าอะไรหน่อยไหม หรือว่าจะปล่อยให้มันเป็นวงรีแบบว่าสี Plain color เลย?")
   ========================================================================== */

/* 1. Hunter x Hunter Right-Side Smoky Nen Gradient + St. Peter's Cross & Sun/Moon Arcane Seal Gimmick */
html[data-theme=dark] body.home-astra .chrollo-card{
 background:
  radial-gradient(124px 104px at 22% 56%,rgba(147,51,234,.42) 0%,rgba(99,102,241,.22) 58%,transparent 90%),
  radial-gradient(190px 132px at 78% 36%,rgba(139,92,246,.30) 0%,rgba(79,70,229,.18) 56%,transparent 88%),
  radial-gradient(140px 100px at 90% 88%,rgba(245,158,11,.20) 0%,rgba(168,85,247,.18) 54%,transparent 86%),
  linear-gradient(132deg,#160f2e 0%,#1f133d 48%,#2b1752 78%,#1a1033 100%)!important;
 border:1.5px solid rgba(192,132,252,.58)!important;
 box-shadow:
  0 16px 36px -8px rgba(4,8,18,.78),
  0 0 24px rgba(139,92,246,.28),
  inset 0 1px 0 rgba(233,213,255,.24)!important;
}
html[data-theme=dark] body.home-astra .chrollo-card:is(:hover,:focus-visible){
 background:
  radial-gradient(138px 118px at 22% 54%,rgba(168,85,247,.56) 0%,rgba(99,102,241,.32) 60%,transparent 92%),
  radial-gradient(220px 148px at 76% 42%,rgba(168,85,247,.46) 0%,rgba(99,102,241,.28) 54%,transparent 88%),
  radial-gradient(156px 116px at 92% 86%,rgba(251,191,36,.32) 0%,rgba(192,132,252,.24) 56%,transparent 88%),
  linear-gradient(132deg,#1d123c 0%,#2b1854 46%,#3b1d6e 76%,#241346 100%)!important;
 border-color:rgba(245,210,133,.82)!important;
 box-shadow:
  0 26px 56px -8px rgba(4,8,18,.88),
  0 0 38px rgba(168,85,247,.58),
  0 0 72px rgba(99,102,241,.34),
  inset 0 0 24px rgba(192,132,252,.22),
  inset 0 1px 0 rgba(254,240,138,.48)!important;
}
html[data-theme=light] body.home-astra .chrollo-card{
 background:
  radial-gradient(124px 104px at 22% 56%,rgba(168,85,247,.26) 0%,rgba(99,102,241,.12) 60%,transparent 90%),
  radial-gradient(190px 132px at 78% 36%,rgba(168,85,247,.22) 0%,rgba(129,140,248,.14) 56%,transparent 88%),
  radial-gradient(140px 100px at 90% 88%,rgba(245,158,11,.18) 0%,rgba(192,132,252,.14) 54%,transparent 86%),
  linear-gradient(132deg,#e6ddf8 0%,#efe8fc 48%,#f6f1ff 78%,#eae1fa 100%)!important;
 border:1.5px solid rgba(139,92,246,.48)!important;
 box-shadow:
  0 14px 32px -8px rgba(58,34,104,.24),
  0 0 20px rgba(139,92,246,.18),
  inset 0 1px 0 rgba(255,255,255,.88)!important;
}
html[data-theme=light] body.home-astra .chrollo-card:is(:hover,:focus-visible){
 background:
  radial-gradient(138px 118px at 22% 54%,rgba(168,85,247,.36) 0%,rgba(99,102,241,.18) 60%,transparent 92%),
  radial-gradient(220px 148px at 76% 42%,rgba(168,85,247,.32) 0%,rgba(129,140,248,.22) 54%,transparent 88%),
  radial-gradient(156px 116px at 92% 86%,rgba(245,158,11,.26) 0%,rgba(192,132,252,.20) 56%,transparent 88%),
  linear-gradient(132deg,#ddd0f6 0%,#eadff9 46%,#f3ebff 76%,#e3d5f8 100%)!important;
 border-color:rgba(124,58,237,.78)!important;
 box-shadow:
  0 22px 48px -8px rgba(58,34,104,.34),
  0 0 32px rgba(139,92,246,.34),
  inset 0 1px 0 #ffffff!important;
}

/* Soft misty Nen cloud & HxH St. Peter's Cross + Sun/Moon Arcane Seal behind .ticket-body */
html[data-theme] body.home-astra .chrollo-card .ticket-body{
 position:relative!important;
 isolation:isolate!important;
}
html[data-theme] body.home-astra .chrollo-card .ticket-body::before{
 content:''!important;
 position:absolute!important;
 inset:-16px -14px -16px -18px!important;
 border-radius:16px!important;
 background:
  radial-gradient(ellipse 84% 72% at 62% 46%,rgba(192,132,252,.28) 0%,rgba(129,140,248,.16) 48%,transparent 78%),
  radial-gradient(circle 48px at 84% 78%,rgba(251,191,36,.24) 0%,transparent 76%)!important;
 filter:blur(10px)!important;
 opacity:.55!important;
 transform:scale(.94)!important;
 transition:opacity 380ms ease,transform 420ms cubic-bezier(.22,1,.36,1)!important;
 pointer-events:none!important;
 z-index:-2!important;
}
html[data-theme=light] body.home-astra .chrollo-card .ticket-body::before{
 background:
  radial-gradient(ellipse 84% 72% at 62% 46%,rgba(147,51,234,.22) 0%,rgba(99,102,241,.12) 48%,transparent 78%),
  radial-gradient(circle 48px at 84% 78%,rgba(245,158,11,.22) 0%,transparent 76%)!important;
}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-body::before{
 opacity:1!important;
 transform:scale(1.08)!important;
}

/* HxH Gimmick: Chrollo's St. Peter's Cross + 12-Star Troupe Ring + Sun (+) & Moon (-) Seal Watermark */
html[data-theme] body.home-astra .chrollo-card .ticket-body::after{
 content:''!important;
 position:absolute!important;
 right:-4px!important;
 top:50%!important;
 width:112px!important;
 height:112px!important;
 translate:0 -50%!important;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' fill='none'%3E%3Cdefs%3E%3CradialGradient id='hxhGlow' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23f5d285' stop-opacity='0.45'/%3E%3Cstop offset='52%25' stop-color='%23c084fc' stop-opacity='0.28'/%3E%3Cstop offset='100%25' stop-color='%236366f1' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='hxhGold' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23fef08a'/%3E%3Cstop offset='50%25' stop-color='%23d8b4fe'/%3E%3Cstop offset='100%25' stop-color='%23818cf8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='70' cy='70' r='62' fill='url(%23hxhGlow)'/%3E%3Ccircle cx='70' cy='70' r='56' stroke='url(%23hxhGold)' stroke-width='1.1' stroke-dasharray='3 4' opacity='0.75'/%3E%3Ccircle cx='70' cy='70' r='46' stroke='url(%23hxhGold)' stroke-width='1.2' opacity='0.85'/%3E%3Ccircle cx='70' cy='70' r='31' stroke='url(%23hxhGold)' stroke-width='0.9' stroke-dasharray='6 3' opacity='0.65'/%3E%3Cg stroke='url(%23hxhGold)' stroke-width='1.8' stroke-linecap='round' opacity='0.92'%3E%3Cpath d='M70 16 L70 124 M16 70 L124 70'/%3E%3Cpath d='M70 12 L65 22 L70 19 L75 22 Z' fill='url(%23hxhGold)'/%3E%3Cpath d='M70 128 L65 118 L70 121 L75 118 Z' fill='url(%23hxhGold)'/%3E%3Cpath d='M12 70 L22 65 L19 70 L22 75 Z' fill='url(%23hxhGold)'/%3E%3Cpath d='M128 70 L118 65 L121 70 L118 75 Z' fill='url(%23hxhGold)'/%3E%3C/g%3E%3Ccircle cx='70' cy='70' r='11' stroke='url(%23hxhGold)' stroke-width='1.5' fill='rgba(24,14,48,0.45)'/%3E%3Cpath d='M70 63 L72 68 L77 70 L72 72 L70 77 L68 72 L63 70 L68 68 Z' fill='%23fef08a'/%3E%3Cg fill='%23fef08a' opacity='0.85'%3E%3Ccircle cx='70' cy='6' r='1.8'/%3E%3Ccircle cx='102' cy='14.6' r='1.5'/%3E%3Ccircle cx='125.4' cy='38' r='1.5'/%3E%3Ccircle cx='134' cy='70' r='1.8'/%3E%3Ccircle cx='125.4' cy='102' r='1.5'/%3E%3Ccircle cx='102' cy='125.4' r='1.5'/%3E%3Ccircle cx='70' cy='134' r='1.8'/%3E%3Ccircle cx='38' cy='125.4' r='1.5'/%3E%3Ccircle cx='14.6' cy='102' r='1.5'/%3E%3Ccircle cx='6' cy='70' r='1.8'/%3E%3Ccircle cx='14.6' cy='38' r='1.5'/%3E%3Ccircle cx='38' cy='14.6' r='1.5'/%3E%3C/g%3E%3C/svg%3E")!important;
 background-size:contain!important;
 background-repeat:no-repeat!important;
 opacity:.28!important;
 transform:rotate(-14deg) scale(.90)!important;
 transition:opacity 380ms ease,transform 460ms cubic-bezier(.22,1,.36,1),filter 380ms ease!important;
 pointer-events:none!important;
 z-index:-1!important;
}
@media(max-width:700px){
 html[data-theme] body.home-astra .chrollo-card .ticket-body::after{
  width:84px!important;
  height:84px!important;
  right:4px!important;
  top:50%!important;
  translate:0 -50%!important;
 }
}
html[data-theme=light] body.home-astra .chrollo-card .ticket-body::after{
 opacity:.24!important;
 filter:hue-rotate(-8deg) saturate(1.25) brightness(.82)!important;
}
html[data-theme] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-body::after{
 opacity:.68!important;
 transform:rotate(0deg) scale(1.08)!important;
 filter:drop-shadow(0 0 10px rgba(245,210,133,.45)) drop-shadow(0 0 18px rgba(168,85,247,.52))!important;
}
html[data-theme=light] body.home-astra .chrollo-card:is(:hover,:focus-visible) .ticket-body::after{
 opacity:.52!important;
 filter:hue-rotate(-8deg) saturate(1.35) brightness(.78) drop-shadow(0 0 10px rgba(147,51,234,.28))!important;
}

/* SKILL HUNTER ✦ Badge & Arrow Awakening on Hover */
html[data-theme] body.home-astra .chrollo-card .chrollo-badge{
 transition:border-color 280ms ease,box-shadow 280ms ease,background 280ms ease,color 280ms ease,transform 280ms ease!important;
}
html[data-theme=dark] body.home-astra .chrollo-card:is(:hover,:focus-visible) .chrollo-badge{
 border-color:rgba(245,210,133,.82)!important;
 background:linear-gradient(135deg,rgba(124,58,237,.62) 0%,rgba(79,70,229,.52) 60%,rgba(217,119,6,.36) 100%)!important;
 color:#fef9c3!important;
 box-shadow:0 0 16px rgba(168,85,247,.62),inset 0 0 8px rgba(254,240,138,.28)!important;
 transform:translateX(2px)!important;
}
html[data-theme=light] body.home-astra .chrollo-card:is(:hover,:focus-visible) .chrollo-badge{
 border-color:rgba(124,58,237,.75)!important;
 background:linear-gradient(135deg,rgba(139,92,246,.26) 0%,rgba(245,158,11,.22) 100%)!important;
 color:#3b0764!important;
 box-shadow:0 0 14px rgba(139,92,246,.32)!important;
 transform:translateX(2px)!important;
}

/* 2. 4 World Sticker Portals (`#worlds .world .portal-window`):
      Luminous Portal Core + Subtle World-Specific Symbolic Motifs (Never flat plain ovals) */
html[data-theme=dark] body.home-astra .worlds .world-finance .portal-window{
 background:
  radial-gradient(ellipse 68% 62% at 52% 44%,rgba(52,211,153,.34) 0%,rgba(245,210,133,.16) 44%,rgba(16,64,50,.94) 88%),
  linear-gradient(145deg,#1d5240 0%,#123328 100%)!important;
}
html[data-theme=dark] body.home-astra .worlds .world-knowledge .portal-window{
 background:
  radial-gradient(ellipse 68% 62% at 52% 44%,rgba(96,165,250,.36) 0%,rgba(56,189,248,.16) 46%,rgba(24,49,82,.95) 88%),
  linear-gradient(145deg,#254b78 0%,#172f4d 100%)!important;
}
html[data-theme=dark] body.home-astra .worlds .world-focus .portal-window{
 background:
  radial-gradient(ellipse 68% 62% at 52% 44%,rgba(251,191,36,.34) 0%,rgba(245,158,11,.16) 46%,rgba(68,52,24,.95) 88%),
  linear-gradient(145deg,#614b22 0%,#3d2f14 100%)!important;
}
html[data-theme=dark] body.home-astra .worlds .world-interests .portal-window{
 background:
  radial-gradient(ellipse 68% 62% at 52% 44%,rgba(251,113,133,.34) 0%,rgba(244,114,182,.16) 46%,rgba(74,38,35,.95) 88%),
  linear-gradient(145deg,#6b3732 0%,#42211e 100%)!important;
}

html[data-theme=light] body.home-astra .worlds .world-finance .portal-window{
 background:
  radial-gradient(ellipse 70% 64% at 50% 42%,rgba(255,253,240,.78) 0%,rgba(167,243,208,.56) 48%,#bce6d0 100%)!important;
}
html[data-theme=light] body.home-astra .worlds .world-knowledge .portal-window{
 background:
  radial-gradient(ellipse 70% 64% at 50% 42%,rgba(255,255,255,.80) 0%,rgba(191,219,254,.58) 48%,#cbe1fb 100%)!important;
}
html[data-theme=light] body.home-astra .worlds .world-focus .portal-window{
 background:
  radial-gradient(ellipse 70% 64% at 50% 42%,rgba(255,254,245,.82) 0%,rgba(253,230,138,.56) 48%,#f4e0b0 100%)!important;
}
html[data-theme=light] body.home-astra .worlds .world-interests .portal-window{
 background:
  radial-gradient(ellipse 70% 64% at 50% 42%,rgba(255,250,248,.80) 0%,rgba(254,205,211,.56) 48%,#f5d4ca 100%)!important;
}

/* Shared Motif Layer inside each oval (.portal-window::before) */
html[data-theme] body.home-astra .worlds .world .portal-window::before{
 content:''!important;
 display:block!important;
 position:absolute!important;
 inset:0!important;
 border-radius:50%!important;
 background-size:100% 100%!important;
 background-repeat:no-repeat!important;
 background-position:center!important;
 opacity:.58!important;
 pointer-events:none!important;
 z-index:0!important;
 transition:opacity 280ms ease,transform 360ms cubic-bezier(.22,1,.36,1)!important;
}
html[data-theme=light] body.home-astra .worlds .world .portal-window::before{
 opacity:.46!important;
 mix-blend-mode:multiply!important;
}
html[data-theme] body.home-astra .worlds .world:is(:hover,:focus-visible) .portal-window::before{
 opacity:.82!important;
 transform:scale(1.06)!important;
}
html[data-theme] body.home-astra .worlds .world[data-preview-state=ready] .portal-window::before{
 opacity:0!important;
}
html[data-theme] body.home-astra .worlds .world .portal-photo{
 position:relative!important;
 z-index:2!important;
}

/* Portal #1 Motif: 📈 การเงิน · ลงทุน — Ascending Bull Trend Line + Candlesticks + Compass Grid + Gold Stars */
html[data-theme] body.home-astra .worlds .world-finance .portal-window::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 180' fill='none'%3E%3Cellipse cx='130' cy='90' rx='112' ry='72' stroke='%23f5d285' stroke-width='1' stroke-dasharray='4 5' opacity='0.55'/%3E%3Cellipse cx='130' cy='90' rx='86' ry='54' stroke='%236ee7b7' stroke-width='0.9' opacity='0.45'/%3E%3Cpath d='M22 126 L238 126 M22 90 L238 90 M22 54 L238 54 M70 20 L70 160 M130 20 L130 160 M190 20 L190 160' stroke='%236ee7b7' stroke-width='0.6' opacity='0.28'/%3E%3Cg stroke='%23f5d285' stroke-width='1.5' stroke-linecap='round' opacity='0.78'%3E%3Cline x1='42' y1='124' x2='42' y2='96'/%3E%3Crect x='38' y='104' width='8' height='14' rx='1.5' fill='%2334d399' fill-opacity='0.55'/%3E%3Cline x1='66' y1='116' x2='66' y2='84'/%3E%3Crect x='62' y='92' width='8' height='16' rx='1.5' fill='%23f5d285' fill-opacity='0.6'/%3E%3Cline x1='194' y1='96' x2='194' y2='62'/%3E%3Crect x='190' y='68' width='8' height='18' rx='1.5' fill='%2334d399' fill-opacity='0.6'/%3E%3Cline x1='218' y1='78' x2='218' y2='42'/%3E%3Crect x='214' y='48' width='8' height='20' rx='1.5' fill='%23fef08a' fill-opacity='0.75'/%3E%3C/g%3E%3Cpath d='M26 132 Q64 114 92 98 T158 76 T230 40' stroke='%23fef08a' stroke-width='2.2' stroke-linecap='round' opacity='0.88'/%3E%3Cpath d='M222 38 L232 38 L230 48' stroke='%23fef08a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.88'/%3E%3Cpath d='M48 48 L50 54 L56 56 L50 58 L48 64 L46 58 L40 56 L46 54 Z' fill='%23fef08a' opacity='0.85'/%3E%3Cpath d='M206 118 L207.5 122.5 L212 124 L207.5 125.5 L206 130 L204.5 125.5 L200 124 L204.5 122.5 Z' fill='%236ee7b7' opacity='0.85'/%3E%3C/svg%3E")!important;
}

/* Portal #2 Motif: 🤖 ความรู้ + AI — Neural Constellation Circuit Nodes & Synaptic Hex Mesh */
html[data-theme] body.home-astra .worlds .world-knowledge .portal-window::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 180' fill='none'%3E%3Cellipse cx='130' cy='90' rx='110' ry='70' stroke='%2393c5fd' stroke-width='1' stroke-dasharray='3 5' opacity='0.52'/%3E%3Cg stroke='%2360a5fa' stroke-width='1.3' opacity='0.72'%3E%3Cpath d='M32 112 L58 84 L86 96 L64 52 L98 40'/%3E%3Cpath d='M228 110 L200 82 L172 94 L194 50 L162 38'/%3E%3Cpath d='M58 84 L42 56 M200 82 L218 54 M46 128 L78 122 M214 126 L182 120'/%3E%3C/g%3E%3Cg fill='%23e0f2fe' stroke='%2338bdf8' stroke-width='1.5' opacity='0.9'%3E%3Ccircle cx='32' cy='112' r='3.5'/%3E%3Ccircle cx='58' cy='84' r='4.2'/%3E%3Ccircle cx='42' cy='56' r='3'/%3E%3Ccircle cx='64' cy='52' r='3.5'/%3E%3Ccircle cx='46' cy='128' r='3'/%3E%3Ccircle cx='228' cy='110' r='3.5'/%3E%3Ccircle cx='200' cy='82' r='4.2'/%3E%3Ccircle cx='218' cy='54' r='3'/%3E%3Ccircle cx='194' cy='50' r='3.5'/%3E%3Ccircle cx='214' cy='126' r='3'/%3E%3C/g%3E%3Cpath d='M210 34 L212 39 L217 41 L212 43 L210 48 L208 43 L203 41 L208 39 Z' fill='%23bae6fd' opacity='0.85'/%3E%3Cpath d='M48 34 L49.5 38 L53.5 39.5 L49.5 41 L48 45 L46.5 41 L42.5 39.5 L46.5 38 Z' fill='%2393c5fd' opacity='0.85'/%3E%3C/svg%3E")!important;
}

/* Portal #3 Motif: 🌿 พัก & โฟกัส — Zen Concentric Mindfulness Ripples & Warm Sunbeam Arcs */
html[data-theme] body.home-astra .worlds .world-focus .portal-window::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 180' fill='none'%3E%3Cellipse cx='130' cy='96' rx='112' ry='68' stroke='%23fde68a' stroke-width='1.1' opacity='0.52'/%3E%3Cellipse cx='130' cy='96' rx='90' ry='54' stroke='%23fcd34d' stroke-width='1.1' stroke-dasharray='8 5' opacity='0.58'/%3E%3Cellipse cx='130' cy='96' rx='68' ry='40' stroke='%23fef08a' stroke-width='1.2' opacity='0.64'/%3E%3Cpath d='M36 68 Q56 48 82 56 Q62 74 36 68 Z' stroke='%23fde68a' stroke-width='1.3' fill='%23fbbf24' fill-opacity='0.22' opacity='0.78'/%3E%3Cpath d='M224 68 Q204 48 178 56 Q198 74 224 68 Z' stroke='%23fde68a' stroke-width='1.3' fill='%23fbbf24' fill-opacity='0.22' opacity='0.78'/%3E%3Ccircle cx='48' cy='112' r='3' fill='%23fef08a' opacity='0.75'/%3E%3Ccircle cx='212' cy='112' r='3' fill='%23fef08a' opacity='0.75'/%3E%3Cpath d='M64 36 L66 41 L71 43 L66 45 L64 50 L62 45 L57 43 L62 41 Z' fill='%23fef08a' opacity='0.82'/%3E%3Cpath d='M198 38 L199.5 42 L203.5 43.5 L199.5 45 L198 49 L196.5 45 L192.5 43.5 L196.5 42 Z' fill='%23fde68a' opacity='0.82'/%3E%3C/svg%3E")!important;
}

/* Portal #4 Motif: 🎧 สิ่งที่ชอบ — Vinyl Record Grooves + Audio Equalizer Wave Arcs & Cinema Sparkles */
html[data-theme] body.home-astra .worlds .world-interests .portal-window::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 180' fill='none'%3E%3Cellipse cx='130' cy='90' rx='112' ry='70' stroke='%23fda4af' stroke-width='1' opacity='0.5'/%3E%3Cellipse cx='130' cy='90' rx='96' ry='59' stroke='%23fb7185' stroke-width='0.9' stroke-dasharray='12 4 3 4' opacity='0.58'/%3E%3Cellipse cx='130' cy='90' rx='80' ry='48' stroke='%23fecdd3' stroke-width='1' stroke-dasharray='18 6' opacity='0.52'/%3E%3Cg stroke='%23fecdd3' stroke-width='2.2' stroke-linecap='round' opacity='0.78'%3E%3Cline x1='34' y1='98' x2='34' y2='82'/%3E%3Cline x1='43' y1='106' x2='43' y2='74'/%3E%3Cline x1='52' y1='114' x2='52' y2='66'/%3E%3Cline x1='61' y1='102' x2='61' y2='78'/%3E%3Cline x1='199' y1='102' x2='199' y2='78'/%3E%3Cline x1='208' y1='114' x2='208' y2='66'/%3E%3Cline x1='217' y1='106' x2='217' y2='74'/%3E%3Cline x1='226' y1='98' x2='226' y2='82'/%3E%3C/g%3E%3Cpath d='M56 44 L58 49 L63 51 L58 53 L56 58 L54 53 L49 51 L54 49 Z' fill='%23ffe4e6' opacity='0.85'/%3E%3Cpath d='M204 42 L206 47 L211 49 L206 51 L204 56 L202 51 L197 49 L202 47 Z' fill='%23fda4af' opacity='0.85'/%3E%3C/svg%3E")!important;
}

html[data-motion=paused] body.home-astra :is(.chrollo-card .ticket-body::before,.chrollo-card .ticket-body::after,.chrollo-card .chrollo-badge,#worlds .world .portal-window::before),
body.home-astra.paused :is(.chrollo-card .ticket-body::before,.chrollo-card .ticket-body::after,.chrollo-card .chrollo-badge,#worlds .world .portal-window::before){
 transition:none!important;
 animation:none!important;
}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.home-astra :is(.chrollo-card .ticket-body::before,.chrollo-card .ticket-body::after,.chrollo-card .chrollo-badge,#worlds .world .portal-window::before){
  transition:none!important;
  animation:none!important;
 }
}

/* ==========================================================================
   A26 Full-Page Exemplar Audit Polish (Audi 2026-10-21):
   1. #start-here .route-preview.has-shot: Show 100% of the wide 2:1 destination
      preview screenshots (NVDA/AAPL heatmap + sector bars) with zero left/right
      edge cropping (override legacy 170px .route-guide img and object-fit: cover).
   2. #community-poll (#home-poll-options:empty): Provide a clean, intentional
      ballot-slot loading/offline placeholder via CSS ::before so the ballot card
      never collapses into a thin empty bar while waiting for snapshot data.
   ========================================================================== */
html[data-theme] body.home-astra #start-here .route-preview{
 display:block!important;
 max-width:520px!important;
 width:100%!important;
 min-height:0!important;
}
html[data-theme] body.home-astra #start-here .route-preview.has-shot .preview-body{
 aspect-ratio:auto!important;
 min-height:0!important;
 height:auto!important;
 padding:0!important;
}
html[data-theme] body.home-astra #start-here .route-preview.has-shot .preview-shot{
 position:relative!important;
 inset:auto!important;
 display:block!important;
 width:100%!important;
 height:auto!important;
 min-height:0!important;
 max-width:none!important;
 object-fit:contain!important;
 object-position:center!important;
 rotate:0deg!important;
}
html[data-theme] body.home-astra #home-poll-options .poll-placeholder{
 margin:0;
 display:flex;
 align-items:center;
 justify-content:center;
 min-height:68px;
 padding:14px 18px;
 border-radius:12px;
 border:1px dashed rgba(148,184,234,.42);
 background:rgba(15,28,48,.12);
 color:#3d546c;
 font:500 14.5px/1.55 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 text-align:center;
}
html[data-theme=light] body.home-astra #home-poll-options .poll-placeholder{
 border-color:rgba(100,138,184,.42);
 background:rgba(238,244,251,.72);
 color:#3d546c;
}

/* ==========================================================================
   A27 Option A — Desk Dispatch & Announcement Board inside #builder-note
   (Audi 2026-10-21: Upgrade FROM AUDI'S DESK with 3-slot live announcements:
    🚀 ฟีเจอร์ใหม่ · 📖 บทความใหม่ · 💬 ข้อความจากออดี้ + Owner Inline Edit,
    Zero Box-in-Box, Zero Capsule-in-Box, paired Dark/Light AAA contrast)
   ========================================================================== */
html[data-theme] body.home-astra .bn-dispatch{
 display:flex;
 flex-direction:column;
 gap:10px;
 padding-top:14px;
 border-top:1px solid rgba(148,163,184,.16);
 min-width:0;
}
html[data-theme=light] body.home-astra .bn-dispatch{
 border-top-color:rgba(120,92,38,.16);
}
html[data-theme] body.home-astra .bn-dispatch-head{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:space-between;
 gap:8px 16px;
}
html[data-theme] body.home-astra .bn-dispatch-heading{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:7px;
 min-width:0;
}
html[data-theme] body.home-astra #dispatch-title{
 margin:0;
 display:inline-flex;
 align-items:center;
 gap:6px;
 font:700 15.5px/1.38 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif!important;
 color:var(--a-ink);
}
html[data-theme] body.home-astra .bn-dispatch-sep{
 color:var(--a-copy);
 opacity:.65;
}
html[data-theme] body.home-astra .bn-dispatch-updated{
 font:500 12.5px/1.35 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--a-copy);
 font-variant-numeric:tabular-nums;
}
html[data-theme] body.home-astra .bn-dispatch-actions{
 display:inline-flex;
 flex-wrap:wrap;
 align-items:center;
 gap:8px;
}
html[data-theme] body.home-astra .bn-dispatch-actions[hidden],
html[data-theme] body.home-astra .bn-dispatch-editor[hidden],
html[data-theme] body.home-astra .bn-dispatch-status[hidden]{
 display:none!important;
}
html[data-theme] body.home-astra .bn-dispatch-actions .owner-edit:not(.aku-control){
 min-height:36px;
 padding:5px 12px;
 border-radius:999px;
 border:1px solid rgba(245,210,133,.45);
 background:rgba(245,210,133,.10);
 color:#f5d285;
 font:600 12.5px/1.2 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 cursor:pointer;
 transition:background 180ms ease,border-color 180ms ease,transform 180ms ease;
}
html[data-theme=light] body.home-astra .bn-dispatch-actions .owner-edit:not(.aku-control){
 border-color:rgba(138,90,16,.38);
 background:rgba(245,194,91,.16);
 color:#784b08;
}
html[data-theme] body.home-astra .bn-dispatch-actions .owner-edit:not(.aku-control):is(:hover,:focus-visible){
 transform:translateY(-1px);
 border-color:#f5d285;
 background:rgba(245,210,133,.20);
}
html[data-theme=light] body.home-astra .bn-dispatch-actions .owner-edit:not(.aku-control):is(:hover,:focus-visible){
 border-color:#8a5a10;
 background:rgba(245,194,91,.28);
}
html[data-theme] body.home-astra .bn-dispatch-status{
 margin:0;
 font:600 13px/1.45 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:#4dd2a0;
}
html[data-theme=light] body.home-astra .bn-dispatch-status{
 color:#0f6e4b;
}
html[data-theme] body.home-astra .bn-dispatch-status.participation-error{
 color:#ff7b7b;
}
html[data-theme=light] body.home-astra .bn-dispatch-status.participation-error{
 color:#b91c1c;
}

/* 3-Slot Pinned Paper Notice Slips ("ป้ายกระดาษติดโต๊ะออดี้" — Audi 2026-10-22:
   "ตรง ประกาศจากโต๊ะออดี้ ... ทำให้มันเหมือนป้ายกระดาษมากกว่านี้หน่อยไหม") */
html[data-theme] body.home-astra .bn-dispatch-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:14px;
 padding:12px 2px 6px;
 border-top:0;
}
html[data-theme] body.home-astra .bn-dispatch-item{
 --dp-accent:#0b5d3e;
 --dp-ink:#0c291e;
 --dp-copy:#234235;
 --dp-date-ink:#355949;
 --dp-paper-top:#f7fff9;
 --dp-paper-bot:#e8f8ee;
 --dp-paper-border:#8ad0ab;
 --dp-paper-edge:#5fb88a;
 --dp-paper-line:rgba(15,110,75,.075);
 --dp-tape-bg:rgba(194,243,217,.88);
 --dp-tape-rot:-2.2deg;
 --dp-pin-core:#a7f3d0;
 --dp-dogear-flap:#cdeed9;
 position:relative;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 gap:7px;
 padding:15px 14px 13px;
 min-width:0;
 border-radius:4px 4px 14px 4px;
 border:1.5px solid var(--dp-paper-border);
 color:var(--dp-ink);
 text-decoration:none;
 background:
  repeating-linear-gradient(180deg,transparent 0 23px,var(--dp-paper-line) 23px 24px),
  linear-gradient(180deg,var(--dp-paper-top) 0%,var(--dp-paper-bot) 100%);
 box-shadow:
  0 3px 0 var(--dp-paper-edge),
  0 12px 22px -10px rgba(6,12,24,.48),
  inset 0 1px 0 rgba(255,255,255,.94);
 transition:
  transform 260ms cubic-bezier(.22,1,.36,1),
  box-shadow 260ms cubic-bezier(.22,1,.36,1),
  border-color 220ms ease;
 isolation:isolate;
}
html[data-theme=light] body.home-astra .bn-dispatch-item{
 box-shadow:
  0 3px 0 var(--dp-paper-edge),
  0 10px 20px -10px rgba(52,38,14,.24),
  inset 0 1px 0 #ffffff;
}
html[data-theme] body.home-astra .bn-dispatch-item.dp-feature{
 --dp-accent:#0b5d3e;
 --dp-ink:#0c291e;
 --dp-copy:#234235;
 --dp-date-ink:#355949;
 --dp-paper-top:#f7fff9;
 --dp-paper-bot:#e8f8ee;
 --dp-paper-border:#8ad0ab;
 --dp-paper-edge:#5fb88a;
 --dp-paper-line:rgba(15,110,75,.075);
 --dp-tape-bg:rgba(194,243,217,.90);
 --dp-tape-rot:-2.2deg;
 --dp-pin-core:#a7f3d0;
 --dp-dogear-flap:#cdeed9;
}
html[data-theme] body.home-astra .bn-dispatch-item.dp-article{
 --dp-accent:#1646b8;
 --dp-ink:#102542;
 --dp-copy:#263e61;
 --dp-date-ink:#3b5378;
 --dp-paper-top:#f8fbff;
 --dp-paper-bot:#eaf2ff;
 --dp-paper-border:#93baf0;
 --dp-paper-edge:#6599e0;
 --dp-paper-line:rgba(29,78,216,.075);
 --dp-tape-bg:rgba(198,223,255,.90);
 --dp-tape-rot:1.8deg;
 --dp-pin-core:#bfdbfe;
 --dp-dogear-flap:#d2e4fc;
}
html[data-theme] body.home-astra .bn-dispatch-item.dp-message{
 --dp-accent:#784806;
 --dp-ink:#291b06;
 --dp-copy:#473314;
 --dp-date-ink:#5e451e;
 --dp-paper-top:#fffef6;
 --dp-paper-bot:#fcf0c8;
 --dp-paper-border:#ddb660;
 --dp-paper-edge:#bf9336;
 --dp-paper-line:rgba(138,90,16,.08);
 --dp-tape-bg:rgba(253,230,162,.92);
 --dp-tape-rot:-1.5deg;
 --dp-pin-core:#fef08a;
 --dp-dogear-flap:#f3dc99;
}

/* Top Translucent Washi / Masking Tape Strip + Brass Push-Pin Dot */
html[data-theme] body.home-astra .bn-dispatch-item::before{
 content:'';
 position:absolute;
 top:-7px;
 left:50%;
 width:56px;
 height:15px;
 transform:translateX(-50%) rotate(var(--dp-tape-rot,-2deg));
 background:
  radial-gradient(circle at 50% 50%,var(--dp-pin-core) 0 2.4px,var(--dp-accent) 2.5px 4.6px,rgba(15,23,42,.22) 4.7px 5.6px,transparent 5.7px),
  linear-gradient(90deg,rgba(255,250,235,.72) 0%,var(--dp-tape-bg) 16%,var(--dp-tape-bg) 84%,rgba(255,250,235,.72) 100%);
 border-top:1px solid rgba(255,255,255,.78);
 border-bottom:1px solid rgba(100,82,46,.22);
 border-left:2px dotted rgba(100,82,46,.32);
 border-right:2px dotted rgba(100,82,46,.32);
 border-radius:2px;
 box-shadow:0 2px 5px rgba(15,23,42,.18);
 transition:transform 260ms cubic-bezier(.22,1,.36,1),box-shadow 220ms ease;
 pointer-events:none;
 z-index:2;
}

/* Folded Dog-Ear Paper Corner at Bottom-Right */
html[data-theme] body.home-astra .bn-dispatch-item::after{
 content:'';
 position:absolute;
 right:0;
 bottom:0;
 width:16px;
 height:16px;
 background:linear-gradient(135deg,var(--dp-dogear-flap) 0%,var(--dp-dogear-flap) 50%,rgba(15,23,42,.12) 52%,transparent 56%);
 border-top-left-radius:4px;
 box-shadow:-2px -2px 3px rgba(15,23,42,.08);
 pointer-events:none;
 z-index:1;
}

@media(min-width:921px) and (hover:hover) and (pointer:fine){
 html[data-theme] body.home-astra .bn-dispatch-item.dp-feature{
  transform:rotate(-1.1deg);
 }
 html[data-theme] body.home-astra .bn-dispatch-item.dp-article{
  transform:rotate(.85deg) translateY(2px);
 }
 html[data-theme] body.home-astra .bn-dispatch-item.dp-message{
  transform:rotate(-.75deg);
 }
}

html[data-theme] body.home-astra .bn-dispatch-item:is(:hover,:focus-visible){
 transform:translateY(-5px) rotate(0deg) scale(1.018);
 border-color:var(--dp-accent);
 box-shadow:
  0 4px 0 var(--dp-paper-edge),
  0 18px 30px -10px rgba(6,12,24,.58),
  inset 0 1px 0 #ffffff;
 z-index:3;
}
html[data-theme=light] body.home-astra .bn-dispatch-item:is(:hover,:focus-visible){
 box-shadow:
  0 4px 0 var(--dp-paper-edge),
  0 16px 28px -10px rgba(52,38,14,.32),
  inset 0 1px 0 #ffffff;
}
html[data-theme] body.home-astra .bn-dispatch-item:is(:hover,:focus-visible)::before{
 transform:translateX(-50%) rotate(0deg) scale(1.05);
 box-shadow:0 3px 7px rgba(15,23,42,.24);
}
html[data-theme] body.home-astra .dp-meta{
 display:inline-flex;
 flex-wrap:wrap;
 align-items:center;
 gap:5px;
 padding-bottom:6px;
 margin-bottom:1px;
 border-bottom:1px dashed color-mix(in srgb,var(--dp-accent) 28%,transparent);
 font:700 11.8px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--dp-accent);
}
html[data-theme] body.home-astra .dp-dot{
 width:6px;
 height:6px;
 border-radius:50%;
 background:var(--dp-accent);
 flex-shrink:0;
}
html[data-theme] body.home-astra .bn-dispatch-item[data-dispatch-latest=true] .dp-dot{
 box-shadow:0 0 0 3px color-mix(in srgb,var(--dp-accent) 24%,transparent);
}
html[data-theme] body.home-astra .dp-sep{
 opacity:.65;
}
html[data-theme] body.home-astra .dp-date{
 font-weight:600;
 color:var(--dp-date-ink);
 font-variant-numeric:tabular-nums;
}
html[data-theme] body.home-astra .dp-headline{
 display:flex;
 align-items:flex-start;
 gap:6px;
 font:700 15px/1.42 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--dp-ink);
 text-wrap:pretty;
}
html[data-theme] body.home-astra .dp-emoji{
 display:inline-block;
 flex-shrink:0;
 transition:transform 220ms cubic-bezier(.22,1,.36,1);
}
html[data-theme] body.home-astra .bn-dispatch-item:is(:hover,:focus-visible) .dp-emoji{
 transform:rotate(-9deg) scale(1.15);
}
html[data-theme] body.home-astra .dp-summary{
 margin:0;
 font:400 13.3px/1.58 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--dp-copy);
 text-wrap:pretty;
}
html[data-theme] body.home-astra .dp-cta{
 display:inline-flex;
 align-items:center;
 gap:5px;
 margin-top:3px;
 padding-top:5px;
 border-top:1px dotted color-mix(in srgb,var(--dp-accent) 24%,transparent);
 font:700 12.6px/1.35 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--dp-accent);
}
html[data-theme] body.home-astra .dp-arr{
 font-style:normal;
 transition:transform 180ms ease;
}
html[data-theme] body.home-astra .bn-dispatch-item:is(:hover,:focus-visible) .dp-arr{
 transform:translate(3px,-2px);
}
html[data-theme] body.home-astra .bn-dispatch-item:is(:hover,:focus-visible) .dp-cta-text{
 text-decoration:underline;
 text-underline-offset:3px;
}

/* Warm Stationery Inline Editor Sheet for Owner */
html[data-theme] body.home-astra .bn-dispatch-editor{
 display:flex;
 flex-direction:column;
 gap:14px;
 padding:18px;
 border-radius:14px;
 border:1.5px solid #c8a96e;
 background:linear-gradient(180deg,#fffdf7 0%,#f7f0e2 100%);
 color:#142f49;
}
html[data-theme] body.home-astra .dp-editor-top{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:space-between;
 gap:10px 16px;
 padding-bottom:10px;
 border-bottom:1px dashed rgba(120,92,38,.28);
}
html[data-theme] body.home-astra .dp-editor-heading{
 font:700 15px/1.4 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:#142f49;
}
html[data-theme] body.home-astra .dp-editor-stamp{
 display:inline-flex;
 align-items:center;
 gap:8px;
 font:600 12.5px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:#3d546c;
}
html[data-theme] body.home-astra .dp-editor-slots{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:14px;
}
html[data-theme] body.home-astra .dp-editor-slot{
 margin:0;
 padding:12px;
 border-radius:10px;
 border:1px solid rgba(120,92,38,.24);
 background:rgba(255,255,255,.72);
 display:flex;
 flex-direction:column;
 gap:8px;
 min-width:0;
}
html[data-theme] body.home-astra .dp-editor-slot legend{
 padding:0 6px;
 font:700 13px/1.35 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:#784b08;
}
html[data-theme] body.home-astra .dp-editor-row{
 display:grid;
 grid-template-columns:1fr;
 gap:8px;
}
html[data-theme] body.home-astra .bn-dispatch-editor label{
 display:flex;
 flex-direction:column;
 gap:4px;
 font:600 12px/1.35 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:#334155;
 min-width:0;
}
html[data-theme] body.home-astra .bn-dispatch-editor input{
 width:100%;
 min-height:38px;
 padding:6px 10px;
 border-radius:8px;
 border:1px solid rgba(100,116,139,.38);
 background:#ffffff;
 color:#0f172a;
 font:500 13px/1.4 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
}
html[data-theme] body.home-astra .dp-editor-actions{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:10px;
}
html[data-theme] body.home-astra .dp-editor-actions button{
 min-height:40px;
 padding:8px 16px;
 border-radius:999px;
 font:600 13px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 cursor:pointer;
}
html[data-theme] body.home-astra #dispatch-save-btn{
 border:1px solid #0f5132;
 background:#16744e;
 color:#ffffff;
}
html[data-theme] body.home-astra #dispatch-cancel-btn{
 border:1px solid rgba(100,116,139,.45);
 background:#ffffff;
 color:#1e293b;
}

@media(max-width:920px){
 html[data-theme] body.home-astra .bn-dispatch-grid{
  grid-template-columns:1fr;
  gap:18px;
  padding:10px 0 4px;
 }
 html[data-theme] body.home-astra .bn-dispatch-item{
  padding:15px 14px 13px;
  transform:none;
 }
 html[data-theme] body.home-astra .dp-editor-slots,
 html[data-theme] body.home-astra .dp-editor-row{
  grid-template-columns:1fr;
 }
}

html[data-motion=paused] body.home-astra :is(.bn-dispatch-item,.dp-emoji,.dp-arr),
body.home-astra.paused :is(.bn-dispatch-item,.dp-emoji,.dp-arr){
 transition:none!important;
 transform:none!important;
}
html[data-motion=paused] body.home-astra .bn-dispatch-item::before,
body.home-astra.paused .bn-dispatch-item::before{
 transition:none!important;
 transform:translateX(-50%)!important;
}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.home-astra :is(.bn-dispatch-item,.dp-emoji,.dp-arr){
  transition:none!important;
  transform:none!important;
 }
 html[data-theme] body.home-astra .bn-dispatch-item::before{
  transition:none!important;
  transform:translateX(-50%)!important;
 }
}

/* ==========================================================================
   4-Zone Full-Page Visual Craft Upgrade (Audi 2026-10-22):
   1. #members (🔒 โซนสมาชิก): Blueprint folders with clean top folder tab,
      architectural grid, domain SVG schematics, middot spec line, and brass padlocks.
   2. .home-connect (📬 ติดตาม & ติดต่องาน): Left-column Kungki & Poojang Studio
      Card (Plus Jakarta Sans / Sarabun readable typography) + 4 Brand Social Cards.
   3. #research (🎫 บนชั้นงานวิเคราะห์): Category switcher (คู่เอกล่าสุด / อวกาศ & AI /
      โครงสร้างพื้นฐาน AI) + clean Thai key-points summary line (zero FLIGHT/GATE codes).
   4. #clips (🎞️ คลิปล่าสุด): Glowing Gold-Rose glass play medallion and tactile CTA pill.
   ========================================================================== */

/* --- 1. #members: Blueprint Folders --- */
html[data-theme] body.home-astra #members .lab-workbench{
 gap:26px!important;
 padding-top:12px!important;
}
html[data-theme] body.home-astra #members .lab-tool{
 position:relative;
 overflow:visible!important;
 border-radius:0 16px 16px 16px!important;
}
html[data-theme=dark] body.home-astra #members .lab-tool{
 background:
  repeating-linear-gradient(0deg,rgba(148,184,234,.055) 0 1px,transparent 1px 22px),
  repeating-linear-gradient(90deg,rgba(148,184,234,.055) 0 1px,transparent 1px 22px),
  radial-gradient(120% 90% at 88% 24%,color-mix(in srgb,var(--tool-accent,#60a5fa) 22%,transparent) 0%,transparent 65%),
  linear-gradient(160deg,#1a304c 0%,#0e1d31 100%)!important;
 border:1.5px solid color-mix(in srgb,var(--tool-accent,#60a5fa) 46%,#3d5573)!important;
 border-bottom:5px solid color-mix(in srgb,var(--tool-accent,#60a5fa) 58%,#091322)!important;
 box-shadow:0 20px 38px -16px rgba(2,8,20,.78),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
html[data-theme=light] body.home-astra #members .lab-tool{
 background:
  repeating-linear-gradient(0deg,rgba(37,75,135,.045) 0 1px,transparent 1px 22px),
  repeating-linear-gradient(90deg,rgba(37,75,135,.045) 0 1px,transparent 1px 22px),
  radial-gradient(120% 90% at 88% 24%,color-mix(in srgb,var(--tool-accent,#60a5fa) 18%,transparent) 0%,transparent 65%),
  linear-gradient(160deg,#ffffff 0%,#eef4fc 100%)!important;
 border:1.5px solid color-mix(in srgb,var(--tool-accent,#60a5fa) 48%,#b5c5dc)!important;
 border-bottom:5px solid color-mix(in srgb,var(--tool-accent,#60a5fa) 62%,#8aa2c2)!important;
 box-shadow:0 18px 34px -18px rgba(20,42,74,.22),inset 0 1px 0 #ffffff!important;
}
/* Clean Physical File-Folder Tab (::before — zero English code text colliding with chain) */
html[data-theme] body.home-astra #members .lab-tool::before{
 content:""!important;
 top:-16px!important;
 left:-1.5px!important;
 width:116px!important;
 height:16px!important;
 border-radius:9px 11px 0 0!important;
 pointer-events:none;
 z-index:0;
}
html[data-theme=dark] body.home-astra #members .lab-tool::before{
 background:linear-gradient(180deg,color-mix(in srgb,var(--tool-accent,#60a5fa) 26%,#223b5b) 0%,#1a304c 100%)!important;
 border:1.5px solid color-mix(in srgb,var(--tool-accent,#60a5fa) 48%,#3d5573)!important;
 border-bottom:0!important;
}
html[data-theme=light] body.home-astra #members .lab-tool::before{
 background:linear-gradient(180deg,color-mix(in srgb,var(--tool-accent,#60a5fa) 22%,#ffffff) 0%,#f7faff 100%)!important;
 border:1.5px solid color-mix(in srgb,var(--tool-accent,#60a5fa) 48%,#b5c5dc)!important;
 border-bottom:0!important;
}

/* Domain Schematic Blueprint Watermark (::after) */
html[data-theme] body.home-astra #members .lab-tool::after{
 content:"";
 position:absolute;
 top:48px;
 right:18px;
 width:112px;
 height:74px;
 pointer-events:none;
 z-index:0;
 opacity:.38;
 background-repeat:no-repeat;
 background-position:center;
 background-size:contain;
 transition:transform 320ms cubic-bezier(.22,1,.36,1),opacity 280ms ease;
}
html[data-theme=light] body.home-astra #members .lab-tool::after{
 opacity:.28;
}
html[data-theme] body.home-astra #tool-stock-radar::after{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 74' fill='none'%3E%3Ccircle cx='72' cy='37' r='28' stroke='%2334d399' stroke-width='1.4' stroke-dasharray='3 3'/%3E%3Ccircle cx='72' cy='37' r='17' stroke='%2334d399' stroke-width='1.2' opacity='.75'/%3E%3Cpath d='M72 6v62M41 37h62' stroke='%2334d399' stroke-width='1' opacity='.45'/%3E%3Cpath d='M72 37L92 19' stroke='%2334d399' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='83' cy='25' r='3.2' fill='%2334d399'/%3E%3Ccircle cx='61' cy='46' r='2.5' fill='%2334d399' opacity='.8'/%3E%3Cpath d='M6 58L20 49L33 52L48 36' stroke='%2334d399' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-theme] body.home-astra #tool-stock-screener::after{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 74' fill='none'%3E%3Crect x='14' y='44' width='12' height='22' rx='3' fill='%2360a5fa' opacity='.45'/%3E%3Crect x='32' y='32' width='12' height='34' rx='3' fill='%2360a5fa' opacity='.65'/%3E%3Crect x='50' y='20' width='12' height='46' rx='3' fill='%2360a5fa' opacity='.85'/%3E%3Crect x='68' y='10' width='12' height='56' rx='3' fill='%2360a5fa'/%3E%3Cpath d='M86 16h20l-7 10v14l-6 4V26l-7-10z' stroke='%2360a5fa' stroke-width='1.8' stroke-linejoin='round' fill='%2360a5fa' fill-opacity='.2'/%3E%3C/svg%3E");
}
html[data-theme] body.home-astra #tool-0dte::after{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 74' fill='none'%3E%3Cpath d='M8 14h96' stroke='%2334d399' stroke-width='1.5' stroke-dasharray='4 3'/%3E%3Cpath d='M8 60h96' stroke='%23f87171' stroke-width='1.5' stroke-dasharray='4 3'/%3E%3Cline x1='24' y1='34' x2='24' y2='56' stroke='%23f5d285' stroke-width='1.6'/%3E%3Crect x='19' y='40' width='10' height='11' rx='2' fill='%23f5d285' opacity='.7'/%3E%3Cline x1='46' y1='24' x2='46' y2='48' stroke='%2334d399' stroke-width='1.6'/%3E%3Crect x='41' y='29' width='10' height='14' rx='2' fill='%2334d399' opacity='.85'/%3E%3Cline x1='68' y1='20' x2='68' y2='44' stroke='%23f87171' stroke-width='1.6'/%3E%3Crect x='63' y='25' width='10' height='12' rx='2' fill='%23f87171' opacity='.85'/%3E%3Cline x1='90' y1='14' x2='90' y2='38' stroke='%2334d399' stroke-width='1.8'/%3E%3Crect x='85' y='18' width='10' height='15' rx='2' fill='%2334d399'/%3E%3C/svg%3E");
}
html[data-theme] body.home-astra #members .lab-tool:is(:hover,:focus-within,[open])::after{
 opacity:.72;
 transform:scale(1.07) translateY(-2px);
}
html[data-theme] body.home-astra #members .lab-tool:is(:hover,:focus-within,[open]){
 box-shadow:0 24px 46px -14px rgba(3,9,22,.68),0 0 26px color-mix(in srgb,var(--tool-accent,#f5d285) 26%,transparent),inset 0 3px 18px color-mix(in srgb,var(--tool-accent,#f5d285) 24%,transparent)!important;
}
html[data-theme] body.home-astra #members .lab-tool summary>:not(.lab-chain):not(.tool-expand){
 position:relative;
 z-index:1;
}
html[data-theme] body.home-astra #members .lab-tool summary{
 display:flex!important;
 flex-direction:column!important;
 align-items:flex-start!important;
 justify-content:flex-end!important;
}
html[data-theme] body.home-astra #members .lab-chain b{
 left:64%!important;
 background:radial-gradient(circle at 32% 28%,#fff3c4 0%,#eab957 58%,#9c7221 100%)!important;
 border:2px solid #6e4e10!important;
 box-shadow:0 3px 0 #593e0b,0 0 16px rgba(245,210,133,.42)!important;
}
html[data-theme] body.home-astra #members .tool-chips{
 display:block;
 margin-top:8px;
 padding-top:8px;
 border-top:1px dashed color-mix(in srgb,var(--tool-accent,#60a5fa) 34%,transparent);
 font:500 13.5px/1.45 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:#cde0f7;
}
html[data-theme=light] body.home-astra #members .tool-chips{
 border-top-color:color-mix(in srgb,var(--tool-accent,#60a5fa) 42%,#94a3b8);
 color:#2c4362;
}

/* --- 2. .home-connect: Left Companion Stage & Brand Social Cards --- */
html[data-theme] body.home-astra .connect-copy{
 display:flex;
 flex-direction:column;
 align-items:flex-start;
}
html[data-theme] body.home-astra .connect-studio-card{
 margin-top:20px;
 padding:16px 18px;
 border-radius:18px;
 display:grid;
 grid-template-columns:auto minmax(0,1fr);
 align-items:center;
 gap:16px;
 width:100%;
 max-width:450px;
 box-sizing:border-box;
 position:relative;
 transition:transform 280ms cubic-bezier(.22,1,.36,1),box-shadow 280ms ease;
}
html[data-theme=dark] body.home-astra .connect-studio-card{
 background:
  radial-gradient(120% 90% at 15% 20%,rgba(52,211,153,.14),transparent 60%),
  radial-gradient(120% 90% at 88% 85%,rgba(245,210,133,.14),transparent 60%),
  linear-gradient(150deg,rgba(20,36,62,.86) 0%,rgba(11,22,40,.94) 100%);
 border:1.5px dashed rgba(245,210,133,.38);
 box-shadow:0 18px 36px -18px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme=light] body.home-astra .connect-studio-card{
 background:
  radial-gradient(120% 90% at 15% 20%,rgba(16,185,129,.1),transparent 60%),
  radial-gradient(120% 90% at 88% 85%,rgba(217,170,78,.14),transparent 60%),
  linear-gradient(150deg,#ffffff 0%,#f2f7fd 100%);
 border:1.5px dashed rgba(168,131,58,.48);
 box-shadow:0 16px 32px -18px rgba(24,52,86,.18),inset 0 1px 0 #ffffff;
}

html[data-theme] body.home-astra .connect-studio-duo{
 display:flex;
 align-items:flex-end;
 position:relative;
 padding-right:4px;
}
html[data-theme] body.home-astra .connect-mascot-kungki{
 width:76px;
 height:84px;
 object-fit:contain;
 filter:drop-shadow(0 6px 12px rgba(4,10,24,.32));
 transition:transform 300ms cubic-bezier(.22,1,.36,1);
}
html[data-theme] body.home-astra .connect-mascot-poojang{
 width:68px;
 height:68px;
 object-fit:contain;
 margin-left:-14px;
 filter:drop-shadow(0 6px 12px rgba(4,10,24,.32));
 transition:transform 300ms cubic-bezier(.22,1,.36,1);
}
html[data-theme] body.home-astra .connect-studio-card:hover .connect-mascot-kungki{
 transform:translateY(-5px) rotate(-5deg) scale(1.05);
}
html[data-theme] body.home-astra .connect-studio-card:hover .connect-mascot-poojang{
 transform:translateY(-4px) rotate(6deg) scale(1.05);
}
html[data-theme] body.home-astra .connect-studio-info{
 display:flex;
 flex-direction:column;
 gap:6px;
 min-width:0;
}
html[data-theme] body.home-astra .connect-studio-status{
 display:inline-flex;
 align-items:center;
 gap:6px;
 align-self:flex-start;
 padding:3px 10px;
 border-radius:999px;
 font:600 12.5px/1.35 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 background:rgba(16,185,129,.16);
 border:1px solid rgba(52,211,153,.42);
 color:#34d399;
}
html[data-theme=light] body.home-astra .connect-studio-status{
 background:#dcfce7;
 border-color:#86efac;
 color:#065f46;
}
html[data-theme] body.home-astra .connect-live-dot{
 width:7px;
 height:7px;
 border-radius:50%;
 background:#10b981;
 box-shadow:0 0 0 3px rgba(16,185,129,.25);
}
/* Use Plus Jakarta Sans / Sarabun at 17.5px/600 so Thai text is crisp & open (never small fat Sarabun 700) */
html[data-theme] body.home-astra .connect-studio-title{
 font:600 17.5px/1.4 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif!important;
 letter-spacing:-.01em;
 color:var(--a-ink);
}
/* Canonical Small/Medium UI Typography Lock (Audi 2026-10-22: "เลิกใช้ฟอร์ตตัวเล็กๆอ้วนๆอ่านยยากแบบนั้น"):
   Never let small badges, kickers, card subheadings, or pills (<=18px) render in Sarabun 600/700. */
html[data-theme] body.home-astra :is(
 #dispatch-title,
 .deepdive-date-pill,
 .deepdive-card-headline,
 .series-ep-btn,
 .deepdive-all-btn:not(.aku-control),
 .deepdive-all-label,
 .status-tag,
 .ex-note,
 .poll-kicker,
 .poll-num,
 .wall-go,
 .coffee-copy > span,
 .coffee-support a,
 .aknav-link,
 .auth-nav-login,
 .pd-name,
 .pd-group-head,
 .pd-tile
){
 font-family:'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif!important;
}
html[data-theme] body.home-astra .connect-studio-tags{
 margin:0;
 font:400 14px/1.55 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif!important;
 color:var(--a-copy);
}

/* Right Column: 4 Brand Social Cards (.connect-item) */
html[data-theme] body.home-astra .connect-item{
 position:relative;
 overflow:hidden;
 border-left:4px solid var(--connect-accent,#60a5fa)!important;
 padding:16px 20px!important;
}
html[data-theme=dark] body.home-astra .connect-item{
 background:
  radial-gradient(180px 110px at 32px 50%,color-mix(in srgb,var(--connect-accent) 20%,transparent) 0%,transparent 72%),
  linear-gradient(145deg,rgba(20,36,62,.86) 0%,rgba(11,22,40,.94) 100%)!important;
}
html[data-theme=light] body.home-astra .connect-item{
 background:
  radial-gradient(180px 110px at 32px 50%,color-mix(in srgb,var(--connect-accent) 14%,transparent) 0%,transparent 72%),
  linear-gradient(145deg,#ffffff 0%,#f3f7fc 100%)!important;
}
html[data-theme=dark] body.home-astra .connect-item:is(:hover,:focus-visible){
 background:
  radial-gradient(200px 120px at 32px 50%,color-mix(in srgb,var(--connect-accent) 28%,transparent) 0%,transparent 74%),
  linear-gradient(145deg,rgba(24,44,76,.94) 0%,rgba(13,26,48,.96) 100%)!important;
}
html[data-theme=light] body.home-astra .connect-item:is(:hover,:focus-visible){
 background:
  radial-gradient(200px 120px at 32px 50%,color-mix(in srgb,var(--connect-accent) 18%,transparent) 0%,transparent 74%),
  linear-gradient(145deg,#ffffff 0%,#eef5fc 100%)!important;
}
html[data-theme] body.home-astra .connect-item .connect-cue{
 position:relative;
 padding:7px 14px!important;
 border-radius:999px!important;
 border:1px solid color-mix(in srgb,var(--connect-accent) 48%,transparent)!important;
 background:color-mix(in srgb,var(--connect-accent) 16%,#0c182c)!important;
 color:#f8fafc!important;
 font:600 14px/1.35 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif!important;
}
html[data-theme=light] body.home-astra .connect-item .connect-cue{
 background:color-mix(in srgb,var(--connect-accent) 12%,#ffffff)!important;
 border-color:color-mix(in srgb,var(--connect-accent) 48%,#94a3b8)!important;
 color:#0f172a!important;
}
html[data-theme=dark] body.home-astra .connect-item:is(:hover,:focus-visible) .connect-cue{
 background:color-mix(in srgb,var(--connect-accent) 28%,#0b1628)!important;
 border-color:var(--connect-accent)!important;
 color:#ffffff!important;
}
html[data-theme=light] body.home-astra .connect-item:is(:hover,:focus-visible) .connect-cue{
 background:color-mix(in srgb,var(--connect-accent) 18%,#ffffff)!important;
 border-color:var(--connect-accent)!important;
 color:#0f172a!important;
}

/* --- 3. #research: Latest Analyzed Pair, 5-Company Logo Stack in Library CTA & Clean Key-Points Line --- */
html[data-theme] body.home-astra .shelf-heading a:not(.aku-control).deepdive-all-btn:not(.aku-control),
html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control){
 display:inline-flex!important;
 align-items:center!important;
 gap:10px!important;
 min-height:44px!important;
 height:auto!important;
 padding:6px 14px 6px 10px!important;
 border-radius:999px!important;
 font:600 14px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif!important;
 background:var(--aku-paper)!important;
 color:var(--aku-ink)!important;
 border:1.5px solid var(--aku-paper-line)!important;
 box-shadow:0 8px 20px -8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14)!important;
 transition:transform 240ms cubic-bezier(.22,1,.36,1),background 220ms ease,color 220ms ease,border-color 220ms ease,box-shadow 220ms ease!important;
}
html[data-theme=light] body.home-astra .shelf-heading a:not(.aku-control).deepdive-all-btn:not(.aku-control),
html[data-theme=light] body.home-astra .deepdive-all-btn:not(.aku-control){
 background:#ffffff!important;
 color:#0f172a!important;
 border:1.5px solid #cbd5e1!important;
 box-shadow:0 6px 18px -8px rgba(15,23,42,.14),inset 0 1px 0 #ffffff!important;
}
html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control) .deepdive-all-label{
 color:inherit!important;
 font:600 14px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif!important;
}
html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control) .deepdive-all-logos{
 display:inline-flex!important;
 align-items:center!important;
 flex-shrink:0;
}
html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control) .deepdive-all-logos img{
 width:24px!important;
 height:24px!important;
 border-radius:50%!important;
 object-fit:contain!important;
 padding:3px!important;
 box-sizing:border-box!important;
 background:#0d1729!important;
 border:1.5px solid rgba(245,210,133,.68)!important;
 box-shadow:0 2px 6px rgba(0,0,0,.38)!important;
 transition:transform 240ms cubic-bezier(.22,1,.36,1),margin 240ms cubic-bezier(.22,1,.36,1),border-color 220ms ease!important;
}
html[data-theme=light] body.home-astra .deepdive-all-btn:not(.aku-control) .deepdive-all-logos img{
 border-color:#e2e8f0!important;
 box-shadow:0 2px 5px rgba(15,23,42,.18)!important;
}
html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control) .deepdive-all-logos img + img{
 margin-left:-7px!important;
}
html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control) .all-btn-arr{
 background:rgba(245,210,133,.2)!important;
 color:#fde68a!important;
 transition:transform 220ms cubic-bezier(.22,1,.36,1),background 220ms ease,color 220ms ease!important;
}
html[data-theme=light] body.home-astra .deepdive-all-btn:not(.aku-control) .all-btn-arr{
 background:#f1f5f9!important;
 color:#0f172a!important;
}
html[data-theme] body.home-astra .shelf-heading a:not(.aku-control).deepdive-all-btn:not(.aku-control):is(:hover,:focus-visible),
html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control):is(:hover,:focus-visible){
 transform:translateY(-2px)!important;
 background:var(--aku-paper-2)!important;
 color:var(--aku-ink)!important;
 border-color:var(--aku-accent)!important;
 box-shadow:0 12px 26px -8px rgba(0,0,0,.65),0 0 18px rgba(245,210,133,.36)!important;
}
html[data-theme=light] body.home-astra .shelf-heading a:not(.aku-control).deepdive-all-btn:not(.aku-control):is(:hover,:focus-visible),
html[data-theme=light] body.home-astra .deepdive-all-btn:not(.aku-control):is(:hover,:focus-visible){
 background:#142032!important;
 color:#ffffff!important;
 border-color:#142032!important;
 box-shadow:0 10px 24px -8px rgba(20,32,50,.28)!important;
}
html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control):is(:hover,:focus-visible) .deepdive-all-label{
 color:#ffffff!important;
}
html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control):is(:hover,:focus-visible) .deepdive-all-logos img{
 transform:translateY(-1.5px) scale(1.06);
 border-color:#f5d285!important;
}
html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control):is(:hover,:focus-visible) .deepdive-all-logos img + img{
 margin-left:-3px!important;
}
html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control):is(:hover,:focus-visible) .all-btn-arr{
 background:#f5d285!important;
 color:#0f172a!important;
 transform:translate(2px,-1px)!important;
}
html[data-theme] body.home-astra .deepdive-card-content{
 display:flex;
 flex-direction:column;
}
html[data-theme] body.home-astra .deepdive-key-points{
 margin:auto 0 0!important;
 padding-top:12px;
 border-top:1px dashed rgba(90,65,32,.24);
 font:500 13.8px/1.55 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif!important;
 color:#36291a!important;
}
html[data-theme] body.home-astra .deepdive-card-bottom .series-pills{
 display:flex;
 flex-wrap:nowrap;
 gap:6px;
}
html[data-theme] body.home-astra .deepdive-card-bottom .series-ep-btn{
 padding:5px 10px!important;
 font-size:13.5px!important;
 white-space:nowrap;
}

/* --- 4. #clips: Glowing Glass Play Medallion + Ticket Stub CTA --- */
html[data-theme] body.home-astra .shelf-video .play-dot{
 width:50px!important;
 height:50px!important;
 border-radius:50%!important;
 background:radial-gradient(circle at 30% 28%,#fff8df 0%,#f5c469 48%,#e1306c 100%)!important;
 color:#170d1e!important;
 border:2px solid #fff6d6!important;
 box-shadow:0 0 0 5px rgba(245,210,133,.24),0 12px 26px rgba(0,0,0,.65)!important;
 font-size:1.1rem!important;
 transition:transform 280ms cubic-bezier(.22,1,.36,1),box-shadow 260ms ease!important;
}
html[data-theme] body.home-astra .shelf-video:is(:hover,:focus-within) .play-dot{
 transform:scale(1.14) rotate(-4deg)!important;
 box-shadow:0 0 0 8px rgba(245,210,133,.36),0 14px 30px rgba(225,48,108,.52)!important;
}
html[data-theme] body.home-astra .shelf-video .shelf-play{
 display:inline-flex!important;
 align-items:center;
 gap:6px;
 margin-top:10px!important;
 padding:6px 14px!important;
 border-radius:999px!important;
 font:600 14px/1.35 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif!important;
 border:1px solid rgba(245,210,133,.42)!important;
 background:rgba(245,210,133,.13)!important;
 color:#f5d285!important;
 transition:transform 240ms cubic-bezier(.22,1,.36,1),background 220ms ease,color 220ms ease,box-shadow 220ms ease!important;
}
html[data-theme=light] body.home-astra .shelf-video .shelf-play{
 background:#faecc8!important;
 border-color:#cfa651!important;
 color:#5c3906!important;
}
html[data-theme] body.home-astra .shelf-video:is(:hover,:focus-within) .shelf-play{
 transform:translateX(4px) translateY(-2px);
 background:linear-gradient(180deg,#faecc4 0%,#deb965 100%)!important;
 color:#181105!important;
 border-color:#f5d285!important;
 box-shadow:0 6px 16px rgba(212,175,90,.32)!important;
}

@media(max-width:700px){
 html[data-theme] body.home-astra #members .lab-tool::after{
  width:84px;
  height:56px;
  top:46px;
  right:12px;
  opacity:.24;
 }
 html[data-theme] body.home-astra .connect-studio-card{
  grid-template-columns:1fr;
  text-align:left;
 }
 html[data-theme] body.home-astra .shelf-heading a:not(.aku-control).deepdive-all-btn:not(.aku-control),
 html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control){
  padding:6px 12px 6px 8px!important;
  gap:8px!important;
 }
 html[data-theme] body.home-astra .deepdive-all-btn:not(.aku-control) .deepdive-all-logos img{
  width:21px!important;
  height:21px!important;
 }
}


/* ==========================================================================
   A28 Dribbble-Grade Info Visualization & Choreographed Transitions on home.html
   (Audi 2026-10-22: "https://dribbble.com/tags/web-design ได้ไปดูanimation infographic ,
    transition และwebdesignจากหน้าพวกนี้มาพัฒนาสกิลการทำเว็ปของเราบ้างยัง ... ลองดูหน้าหลักของเราได้ไหม
    ว่ามีส่วนไหนที่ควรปรับจากสกิลพวกนี้ ที่หน้า https://audikung-site.vercel.app/ ก่อนก็ได้")
   Upgrades 4 text-only / flat zones on home.html:
   1. #builder-note: SVG Cubic Bezier Co-Builder Conduit + Proportional 4-World Mix Bar + 3-Step Pipeline
   2. #research (NFLX & PLTR): Sourced 4-Pillar Proportional Scorecard Telemetry + SEC/IR KPI Chips
   3. #start-here: Live Step HUD (`STEP 01 / 04`) + Route Scope Telemetry Chips + Smooth Preview Morph
   4. #members (.tool-detail): Proportional 40/35/25 Stacked Bar, 4-Stage Filter Funnel & 0DTE Force Chamber
   ========================================================================== */

@keyframes astraBnBezierPulse{
 0%{stroke-dashoffset:48}
 100%{stroke-dashoffset:0}
}

/* --- 1. #builder-note: Interactive SVG Cubic Bezier Co-Builder Circuit --- */
/* Desktop-only: an unscoped copy here overrode the ≤920px single-column rule and crushed the text column on phones. */
@media(min-width:921px){
 html[data-theme] body.home-astra .bn-stage{
  grid-template-columns:256px minmax(0,1fr);
 }
}
html[data-theme] body.home-astra .bn-crew-strip.bn-bezier-circuit{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:4px;
 width:100%;
 padding-top:10px;
 border-top:1px dashed rgba(148,163,184,.24);
}
html[data-theme=light] body.home-astra .bn-crew-strip.bn-bezier-circuit{
 border-top-color:rgba(120,92,38,.24);
}
html[data-theme] body.home-astra .bn-circuit-hub{
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:4px 10px 4px 5px;
 border-radius:999px;
 background:rgba(245,210,133,.12);
 border:1px solid rgba(245,210,133,.42);
 box-shadow:0 4px 12px rgba(0,0,0,.22);
}
html[data-theme=light] body.home-astra .bn-circuit-hub{
 background:rgba(245,194,91,.18);
 border-color:rgba(180,122,28,.45);
 box-shadow:0 4px 10px rgba(120,82,24,.10);
}
html[data-theme] body.home-astra .bn-hub-meta{
 display:flex;
 flex-direction:column;
 line-height:1.15;
}
html[data-theme] body.home-astra .bn-hub-meta strong{
 font:700 11px/1.15 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 letter-spacing:.05em;
 color:#fde68a;
}
html[data-theme=light] body.home-astra .bn-hub-meta strong{
 color:#78350f;
}
html[data-theme] body.home-astra .bn-hub-meta span{
 font:500 10.5px/1.2 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--a-copy);
}
html[data-theme] body.home-astra .bn-bezier-svg{
 display:block;
 width:100%;
 max-width:216px;
 height:42px;
 overflow:visible;
}
html[data-theme] body.home-astra .bn-conduit-pulse{
 stroke-dasharray:10 38;
 animation:astraBnBezierPulse 2.4s linear infinite;
}
html[data-theme] body.home-astra .bn-conduit-pulse.is-codex{
 animation-delay:-.8s;
}
html[data-theme] body.home-astra .bn-conduit-pulse.is-agy{
 animation-delay:-1.6s;
}
html[data-theme] body.home-astra .bn-crew-nodes{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:5px;
 /* Same 216px box as .bn-bezier-svg so its line ends (36/108/180) land on each node's centre at every width (Audi 2026-10-23 screenshot: lines stopped short of Claude/Antigravity at ~780px). */
 width:100%;
 max-width:216px;
 margin-inline:auto;
}
html[data-theme] body.home-astra .bn-agent-node{
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 gap:2px;
 padding:6px 3px 5px;
 border-radius:10px;
 background:rgba(15,28,48,.58);
 border:1px solid rgba(148,184,234,.22);
 transition:transform 220ms cubic-bezier(.22,1,.36,1),border-color 220ms ease,box-shadow 220ms ease;
}
html[data-theme=light] body.home-astra .bn-agent-node{
 background:rgba(255,255,255,.82);
 border-color:rgba(120,92,38,.22);
}

html[data-theme] body.home-astra .bn-agent-node strong{
 font:700 10.5px/1.2 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--a-ink);
}
html[data-theme] body.home-astra .bn-agent-node small{
 font:500 9.8px/1.2 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--a-copy);
}

/* Proportional 4-World Content Mix Bar & 3-Step Pipeline inside .bn-points */
html[data-theme] body.home-astra .bn-world-mix{
 display:flex;
 flex-direction:column;
 gap:6px;
 margin-top:6px;
 padding-top:8px;
 border-top:1px dashed rgba(148,163,184,.2);
}
html[data-theme=light] body.home-astra .bn-world-mix{
 border-top-color:rgba(120,92,38,.2);
}
html[data-theme] body.home-astra .bn-mix-bar{
 display:flex;
 width:100%;
 height:8px;
 border-radius:999px;
 overflow:hidden;
 gap:2px;
 background:rgba(15,23,42,.35);
}
html[data-theme=light] body.home-astra .bn-mix-bar{
 background:rgba(148,163,184,.25);
}
html[data-theme] body.home-astra .bn-mix-seg{
 width:var(--w,25%);
 height:100%;
 border-radius:999px;
 transition:filter 220ms ease;
}
html[data-theme] body.home-astra .bn-mix-seg.is-fin{background:linear-gradient(90deg,#10b981,#34d399)}
html[data-theme] body.home-astra .bn-mix-seg.is-ai{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
html[data-theme] body.home-astra .bn-mix-seg.is-focus{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
html[data-theme] body.home-astra .bn-mix-seg.is-pers{background:linear-gradient(90deg,#ec4899,#fb7185)}
html[data-theme] body.home-astra .bn-mix-legend{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:6px 12px;
 font:600 11.5px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--a-copy);
 font-variant-numeric:tabular-nums;
}
html[data-theme] body.home-astra .bn-mix-item{
 display:inline-flex;
 align-items:center;
 gap:5px;
}
html[data-theme] body.home-astra .bn-mix-item i{
 width:7px;
 height:7px;
 border-radius:50%;
 display:inline-block;
}
html[data-theme] body.home-astra .bn-mix-item.is-fin i{background:#34d399}
html[data-theme] body.home-astra .bn-mix-item.is-ai i{background:#60a5fa}
html[data-theme] body.home-astra .bn-mix-item.is-focus i{background:#fbbf24}
html[data-theme] body.home-astra .bn-mix-item.is-pers i{background:#fb7185}

html[data-theme] body.home-astra .bn-pipeline-strip{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:6px;
 margin-top:6px;
 padding-top:8px;
 border-top:1px dashed rgba(148,163,184,.2);
 font:600 11.8px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
}
html[data-theme=light] body.home-astra .bn-pipeline-strip{
 border-top-color:rgba(120,92,38,.2);
}
html[data-theme] body.home-astra .bn-pipe-step{
 display:inline-flex;
 align-items:center;
 gap:5px;
 padding:3px 9px;
 border-radius:999px;
 background:rgba(15,28,48,.56);
 border:1px solid rgba(148,184,234,.24);
 color:var(--a-ink);
}
html[data-theme=light] body.home-astra .bn-pipe-step{
 background:rgba(255,255,255,.84);
 border-color:rgba(120,92,38,.26);
 color:#1e293b;
}
html[data-theme] body.home-astra .bn-pipe-step em{
 font-style:normal;
 font:700 10.5px/1 'JetBrains Mono',monospace;
 color:#f5d285;
}
html[data-theme=light] body.home-astra .bn-pipe-step em{
 color:#b45309;
}
html[data-theme] body.home-astra .bn-pipe-step.is-live{
 border-color:rgba(52,211,153,.45);
 background:rgba(16,185,129,.14);
}
html[data-theme=light] body.home-astra .bn-pipe-step.is-live{
 border-color:rgba(16,185,129,.45);
 background:#ecfdf5;
 color:#065f46;
}
html[data-theme] body.home-astra .bn-pipe-arr{
 font-style:normal;
 font-size:11px;
 color:var(--a-copy);
 opacity:.75;
}

/* --- 2. #research: Sourced 4-Pillar Proportional Scorecard Telemetry inside NFLX & PLTR Folios --- */
html[data-theme] body.home-astra .deepdive-telemetry{
 display:flex;
 flex-direction:column;
 gap:9px;
 margin:10px 0 12px;
 padding:12px 14px;
 border-radius:12px;
 background:rgba(180,142,84,.10);
 border:1px solid rgba(138,100,42,.26);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
html[data-theme] body.home-astra .dd-tele-head{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:space-between;
 gap:6px 10px;
 padding-bottom:7px;
 border-bottom:1px dashed rgba(120,86,36,.22);
}
html[data-theme] body.home-astra .dd-score-badge{
 display:inline-flex;
 align-items:baseline;
 gap:4px;
 padding:2px 9px;
 border-radius:999px;
 background:#065f46;
 color:#ffffff;
 font:700 13.5px/1.25 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 font-variant-numeric:tabular-nums;
}
html[data-theme] body.home-astra .dd-score-badge small{
 font-size:11px;
 font-weight:600;
 opacity:.92;
}
html[data-theme] body.home-astra .dd-stance-tag{
 font:600 12px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:#5c3d10;
}
html[data-theme] body.home-astra .dd-tele-bars{
 display:flex;
 flex-direction:column;
 gap:6px;
}
html[data-theme] body.home-astra .dd-tele-row{
 display:grid;
 grid-template-columns:96px minmax(0,1fr) 28px;
 align-items:center;
 gap:8px;
 font:600 12.2px/1.25 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:#2b1f11;
}
html[data-theme] body.home-astra .dd-tele-track{
 position:relative;
 display:block;
 height:8px;
 border-radius:999px;
 background:rgba(92,66,30,.15);
 overflow:hidden;
}
html[data-theme] body.home-astra .dd-tele-fill{
 display:block;
 width:var(--score,50%);
 height:100%;
 border-radius:999px;
 transition:width 420ms cubic-bezier(.22,1,.36,1),filter 240ms ease;
}
html[data-theme] body.home-astra .dd-tele-fill.is-high{
 background:linear-gradient(90deg,#059669 0%,#10b981 100%);
}
html[data-theme] body.home-astra .dd-tele-fill.is-mid{
 background:linear-gradient(90deg,#d97706 0%,#f59e0b 100%);
}
html[data-theme] body.home-astra .dd-tele-fill.is-low{
 background:linear-gradient(90deg,#dc2626 0%,#f97316 100%);
}
html[data-theme] body.home-astra .deepdive-card:is(:hover,:focus-within) .dd-tele-fill{
 filter:brightness(1.08) saturate(1.1);
}
html[data-theme] body.home-astra .dd-tele-val{
 text-align:right;
 font:700 12px/1 'JetBrains Mono',monospace;
 color:#1e293b;
 font-variant-numeric:tabular-nums;
}
html[data-theme] body.home-astra .dd-kpi-row{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:6px;
 padding-top:6px;
 border-top:1px dotted rgba(120,86,36,.22);
}
html[data-theme] body.home-astra .dd-kpi-chip{
 display:inline-flex;
 align-items:center;
 gap:4px;
 padding:3px 8px;
 border-radius:6px;
 background:rgba(255,253,247,.86);
 border:1px solid rgba(138,100,42,.28);
 font:500 11.8px/1.25 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:#36291a;
 font-variant-numeric:tabular-nums;
}
html[data-theme] body.home-astra .dd-kpi-chip b{
 font-weight:700;
 color:#0f172a;
}

/* --- 3. #start-here: Step HUD (`STEP 01 / 04`) & Route Telemetry Chips --- */
html[data-theme] body.home-astra #start-here .preview-bar{
 display:flex!important;
 align-items:center!important;
 gap:6px!important;
}
html[data-theme] body.home-astra #start-here .preview-step-hud{
 margin-left:auto;
 padding:2px 8px;
 border-radius:999px;
 font:700 10.5px/1.2 'JetBrains Mono',monospace;
 letter-spacing:.04em;
 background:rgba(52,211,153,.18);
 border:1px solid rgba(52,211,153,.45);
 color:#6ee7b7;
}
html[data-theme=light] body.home-astra #start-here .preview-step-hud{
 background:#dcfce7;
 border-color:#86efac;
 color:#065f46;
}
html[data-theme] body.home-astra #start-here .route-tele-chip{
 display:inline-flex;
 align-items:center;
 gap:4px;
 margin-top:6px;
 padding:2px 9px;
 border-radius:999px;
 font:600 11.8px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 background:color-mix(in srgb,var(--route-accent,#34d399) 14%,transparent);
 border:1px solid color-mix(in srgb,var(--route-accent,#34d399) 38%,transparent);
 color:var(--a-ink);
 transition:transform 220ms ease,background 220ms ease,border-color 220ms ease;
}
html[data-theme=light] body.home-astra #start-here .route-tele-chip{
 background:color-mix(in srgb,var(--route-accent,#15803d) 10%,#ffffff);
 border-color:color-mix(in srgb,var(--route-accent,#15803d) 34%,transparent);
 color:var(--route-ink-l,#0f172a);
}
html[data-theme] body.home-astra #start-here .route-path:is(:hover,:focus-visible,[data-route-active]) .route-tele-chip{
 border-color:var(--route-accent);
 background:color-mix(in srgb,var(--route-accent) 22%,transparent);
}

/* --- 4. #members: Proportional Breakdown Infographics inside .tool-detail --- */
html[data-theme] body.home-astra #members .tool-infographic{
 display:flex;
 flex-direction:column;
 gap:8px;
 margin:12px 0;
 padding:12px 14px;
 border-radius:12px;
 background:rgba(9,19,35,.56);
 border:1px solid color-mix(in srgb,var(--tool-accent,#60a5fa) 36%,transparent);
}
html[data-theme=light] body.home-astra #members .tool-infographic{
 background:rgba(241,246,253,.92);
 border-color:color-mix(in srgb,var(--tool-accent,#2563eb) 38%,#cbd5e1);
}
html[data-theme] body.home-astra #members .ti-head{
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:space-between;
 gap:6px;
 font:600 12px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--a-copy);
}
html[data-theme] body.home-astra #members .ti-head b{
 font:700 11.5px/1.2 'JetBrains Mono',monospace;
 color:var(--a-ink);
}
/* 4A. Stock Radar 40% / 35% / 25% Stacked Bar */
html[data-theme] body.home-astra #members .ti-weight-bar{
 display:flex;
 width:100%;
 height:26px;
 border-radius:8px;
 overflow:hidden;
 gap:2px;
}
html[data-theme] body.home-astra #members .ti-seg{
 width:var(--w,33%);
 display:flex;
 align-items:center;
 justify-content:center;
 gap:4px;
 padding:0 6px;
 font:600 11.2px/1 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:#061320;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
html[data-theme] body.home-astra #members .ti-seg.is-fin{background:linear-gradient(90deg,#34d399,#6ee7b7)}
html[data-theme] body.home-astra #members .ti-seg.is-fcf{background:linear-gradient(90deg,#fbbf24,#fde68a)}
html[data-theme] body.home-astra #members .ti-seg.is-tech{background:linear-gradient(90deg,#60a5fa,#93c5fd)}
html[data-theme] body.home-astra #members .ti-legend{
 display:flex;
 flex-wrap:wrap;
 gap:6px 12px;
 font:500 11.5px/1.35 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--a-copy);
}
html[data-theme] body.home-astra #members .ti-legend span{
 display:inline-flex;
 align-items:center;
 gap:5px;
}
html[data-theme] body.home-astra #members .ti-legend span:nth-child(1) i{background:#34d399}
html[data-theme] body.home-astra #members .ti-legend span:nth-child(2) i{background:#fbbf24}
html[data-theme] body.home-astra #members .ti-legend span:nth-child(3) i{background:#60a5fa}
html[data-theme] body.home-astra #members .ti-legend i{
 width:7px;
 height:7px;
 border-radius:50%;
 display:inline-block;
}
/* 4B. Stock Screener 4-Stage Proportional Funnel */
html[data-theme] body.home-astra #members .ti-funnel{
 display:flex;
 flex-direction:column;
 gap:6px;
}
html[data-theme] body.home-astra #members .ti-funnel-step{
 display:grid;
 grid-template-columns:minmax(130px,1.1fr) minmax(80px,1.2fr) 54px;
 align-items:center;
 gap:8px;
 font:500 12px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--a-ink);
}
html[data-theme] body.home-astra #members .ti-f-bar{
 display:block;
 height:8px;
 border-radius:999px;
 background:rgba(148,163,184,.2);
 overflow:hidden;
}
html[data-theme] body.home-astra #members .ti-f-bar i{
 display:block;
 width:var(--f,50%);
 height:100%;
 border-radius:999px;
 background:linear-gradient(90deg,#3b82f6,#38bdf8);
}
html[data-theme] body.home-astra #members .ti-funnel-step.is-final .ti-f-bar i{
 background:linear-gradient(90deg,#10b981,#34d399);
}
html[data-theme] body.home-astra #members .ti-f-val{
 text-align:right;
 font:700 11.5px/1.2 'JetBrains Mono','Plus Jakarta Sans',sans-serif;
 color:#93c5fd;
 font-variant-numeric:tabular-nums;
}
html[data-theme=light] body.home-astra #members .ti-f-val{
 color:#1d4ed8;
}
/* 4C. 0DTE Setup Support–Resistance Force Chamber */
html[data-theme] body.home-astra #members .ti-force-chamber{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:6px;
}
html[data-theme] body.home-astra #members .ti-zone{
 display:flex;
 flex-direction:column;
 gap:3px;
 padding:8px 9px;
 border-radius:8px;
 border:1px solid rgba(148,163,184,.24);
 background:rgba(15,28,48,.52);
}
html[data-theme=light] body.home-astra #members .ti-zone{
 background:#ffffff;
 border-color:#cbd5e1;
}
html[data-theme] body.home-astra #members .ti-zone.is-call{border-top:3px solid #10b981}
html[data-theme] body.home-astra #members .ti-zone.is-mid{border-top:3px solid #f59e0b}
html[data-theme] body.home-astra #members .ti-zone.is-put{border-top:3px solid #ef4444}
html[data-theme] body.home-astra #members .ti-zone strong{
 font:700 12px/1.25 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--a-ink);
}
html[data-theme] body.home-astra #members .ti-zone small{
 font:400 11.2px/1.35 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 color:var(--a-copy);
}

@media(max-width:700px){
 html[data-theme] body.home-astra .dd-tele-row{
  grid-template-columns:86px minmax(0,1fr) 26px;
 }
 html[data-theme] body.home-astra #members .ti-funnel-step{
  grid-template-columns:1fr;
  gap:3px;
 }
 html[data-theme] body.home-astra #members .ti-f-val{
  text-align:left;
 }
 html[data-theme] body.home-astra #members .ti-force-chamber{
  grid-template-columns:1fr;
 }
}

html[data-motion=paused] body.home-astra .bn-conduit-pulse,
body.home-astra.paused .bn-conduit-pulse{
 animation:none!important;
}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.home-astra .bn-conduit-pulse{
  animation:none!important;
 }
}

/* --- A28.1 Frameless Zero-Box-in-Box Polish & Lab Workbench Start Alignment --- */
html[data-theme] body.home-astra .bn-agent-node{
 background:transparent!important;
 border:0!important;
 box-shadow:none!important;
 padding:2px 2px 0!important;
}

html[data-theme] body.home-astra .bn-pipe-step{
 background:transparent!important;
 border:0!important;
 padding:0!important;
}
html[data-theme] body.home-astra .bn-pipe-step.is-live{
 color:#34d399!important;
}
html[data-theme=light] body.home-astra .bn-pipe-step.is-live{
 color:#059669!important;
}
html[data-theme] body.home-astra .deepdive-telemetry{
 background:transparent!important;
 border:0!important;
 border-top:1px dashed rgba(120,86,36,.26)!important;
 border-radius:0!important;
 box-shadow:none!important;
 padding:10px 0 2px!important;
 margin:8px 0 10px!important;
}
html[data-theme] body.home-astra .dd-kpi-chip{
 background:transparent!important;
 border:0!important;
 padding:0!important;
}
html[data-theme] body.home-astra .dd-kpi-sep{
 color:rgba(90,65,32,.48);
 font-weight:700;
}
html[data-theme] body.home-astra #start-here .route-path :is(div,p,h3)::before,
html[data-theme] body.home-astra #start-here .route-path :is(div,p,h3)::after{
 display:none!important;
 content:none!important;
}
html[data-theme] body.home-astra #start-here .route-tele-chip{
 background:transparent!important;
 border:0!important;
 padding:0!important;
 margin-top:4px!important;
 color:var(--route-accent,#34d399)!important;
}
html[data-theme=light] body.home-astra #start-here .route-tele-chip{
 color:var(--route-ink-l,#0f6e4b)!important;
}
html[data-theme] body.home-astra #members .lab-workbench{
 align-items:start!important;
}
html[data-theme] body.home-astra #members .tool-infographic{
 background:transparent!important;
 border:0!important;
 border-top:1px dashed color-mix(in srgb,var(--tool-accent,#60a5fa) 38%,transparent)!important;
 border-radius:0!important;
 padding:10px 0 4px!important;
 margin:10px 0 8px!important;
}
html[data-theme] body.home-astra #members .ti-zone{
 background:rgba(15,28,48,.32)!important;
 border:0!important;
 border-left:3px solid #10b981!important;
 border-radius:0 6px 6px 0!important;
}
html[data-theme=light] body.home-astra #members .ti-zone{
 background:rgba(241,246,253,.65)!important;
}
html[data-theme] body.home-astra #members .ti-zone.is-mid{border-left-color:#f59e0b!important}
html[data-theme] body.home-astra #members .ti-zone.is-put{border-left-color:#ef4444!important}

html[data-theme] body.home-astra #start-here .route-tele-chip{
 display:inline!important;
 font-style:normal!important;
 font-weight:600!important;
 margin:0!important;
}

/* ==========================================================================
   A28.2 Simply Dock Right-Side Companion Sticker + Invite Speech Bubble
   (Audi 2026-10-22: "แล้วที่แวะมาคุยที่Simply Dock ... ตรงข้างlogoด้านขวา
   หาstickerมาใส่เเล้วบอกว่าเข้ามาคุยกันเยอะๆน้าา อะไรแบบนี้ดีไหม")
   ========================================================================== */
html[data-theme] body.home-astra .dock-harbor-stage{
 width:344px!important;
 max-width:calc(100% - 116px)!important;
 margin:0 108px 0 auto!important;
 justify-items:center!important;
 padding-left:0;
 transform-style:flat!important;
}
html[data-theme] body.home-astra .dock-orbit-ring{
 left:-14px!important;
 width:372px!important;
 height:372px!important;
}
html[data-theme] body.home-astra .dock-water-ring{
 left:0%!important;
 right:0%!important;
}
html[data-theme] body.home-astra .community-dock-card{
 max-width:344px!important;
 margin:0!important;
 z-index:2!important;
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .community-dock-card,
html[data-theme] body.home-astra .community-dock-card:is(:hover,:focus-visible){
 transform:translateY(-10px) rotate(0deg) scale(1.03)!important;
}
html[data-theme] body.home-astra .community-dock-card .community-dock-pill{
 left:18px!important;
 right:auto!important;
 margin-inline:0!important;
}
html[data-theme] body.home-astra .dock-greeter-sticker{
 position:absolute;
 right:-122px;
 bottom:8px;
 z-index:12!important;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:6px;
 text-decoration:none;
 pointer-events:auto;
 transform:translateZ(0);
 transition:transform 360ms cubic-bezier(.22,1,.36,1);
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .dock-greeter-sticker{
 transform:translate3d(14px,-4px,0);
}
html[data-theme] body.home-astra .dock-greeter-bubble{
 position:relative;
 display:inline-flex;
 align-items:center;
 gap:4px;
 padding:7px 14px;
 border-radius:999px;
 background:#fff9eb;
 color:#17253b;
 border:1.5px solid #e5b85c;
 font:600 13.5px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 white-space:nowrap;
 box-shadow:0 12px 24px rgba(4,10,24,.4),0 0 18px rgba(245,210,133,.32);
 transform:rotate(-2.5deg);
 transition:transform 300ms cubic-bezier(.22,1,.36,1),box-shadow 260ms ease,border-color 240ms ease,background 240ms ease;
}
html[data-theme] body.home-astra .dock-greeter-bubble::after{
 content:'';
 position:absolute;
 bottom:-6px;
 left:54%;
 width:10px;
 height:10px;
 background:#fff9eb;
 border-right:1.5px solid #e5b85c;
 border-bottom:1.5px solid #e5b85c;
 transform:rotate(45deg);
}
html[data-theme=light] body.home-astra .dock-greeter-bubble{
 background:#ffffff;
 color:#0f172a;
 border-color:#d99b38;
 box-shadow:0 10px 22px rgba(20,42,74,.18),0 0 0 2px rgba(245,210,133,.45);
}
html[data-theme=light] body.home-astra .dock-greeter-bubble::after{
 background:#ffffff;
 border-color:#d99b38;
}
html[data-theme] body.home-astra .dock-greeter-img{
 width:128px;
 height:128px;
 object-fit:contain;
 transform:rotate(4deg);
 filter:drop-shadow(0 12px 20px rgba(4,10,24,.48));
 transition:transform 340ms cubic-bezier(.22,1,.36,1),filter 300ms ease;
}
html[data-theme=light] body.home-astra .dock-greeter-img{
 filter:drop-shadow(0 10px 18px rgba(20,42,74,.24));
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .dock-greeter-bubble,
html[data-theme] body.home-astra .dock-greeter-sticker:is(:hover,:focus-visible) .dock-greeter-bubble{
 transform:translateY(-5px) rotate(0deg) scale(1.04);
 border-color:#d97706;
 box-shadow:0 14px 28px rgba(4,10,24,.46),0 0 22px rgba(251,191,36,.48);
}
html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .dock-greeter-img,
html[data-theme] body.home-astra .dock-greeter-sticker:is(:hover,:focus-visible) .dock-greeter-img{
 transform:translateY(-8px) rotate(-5deg) scale(1.08);
 filter:drop-shadow(0 16px 24px rgba(4,10,24,.54)) drop-shadow(0 0 18px rgba(245,210,133,.48));
}

@media(max-width:700px){
 html[data-theme] body.home-astra .dock-harbor-stage{
  width:100%!important;
  max-width:100%!important;
  margin:0 auto!important;
  min-height:auto!important;
  padding-left:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:16px!important;
 }
 html[data-theme] body.home-astra .community-dock-card .community-dock-pill{
  left:0!important;
  right:0!important;
  margin-inline:auto!important;
 }
 html[data-theme] body.home-astra .dock-orbit-ring{
  left:auto!important;
  width:316px!important;
  height:316px!important;
 }
 html[data-theme] body.home-astra .dock-water-ring{
  left:8%!important;
  right:8%!important;
 }
 html[data-theme] body.home-astra .community-dock-card{
  max-width:308px!important;
  margin:0 auto!important;
 }
 html[data-theme] body.home-astra .dock-greeter-sticker{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  flex-direction:row!important;
  justify-content:center!important;
  align-items:center!important;
  gap:10px!important;
  margin-top:2px!important;
  transform:none!important;
 }
 html[data-theme] body.home-astra .dock-harbor-stage:is(:hover,:focus-within) .dock-greeter-sticker{
  transform:none!important;
 }
 html[data-theme] body.home-astra .dock-greeter-bubble{
  transform:none!important;
  font-size:12.5px!important;
 }
 html[data-theme] body.home-astra .dock-greeter-bubble::after{
  bottom:auto!important;
  left:auto!important;
  right:-6px!important;
  top:calc(50% - 5px)!important;
  transform:rotate(-45deg)!important;
 }
 html[data-theme] body.home-astra .dock-greeter-img{
  width:84px!important;
  height:84px!important;
 }
}

/* ==========================================================================
   A28.3 Coffee Support (#support) Kungki Coffee Sticker Companion
   (Audi 2026-10-22: "ตรง สนับสนุนค่ากาแฟ ควรมีstickerด้วยไหม อาจจะท่ากินกาแฟอะไรงี้")
   ========================================================================== */
html[data-theme] body.home-astra #support.coffee-support{
 grid-template-columns:minmax(0,1fr) auto 264px!important;
 gap:32px!important;
}
html[data-theme] body.home-astra .coffee-barista-sticker{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:8px;
 position:relative;
 z-index:8!important;
 padding-inline:4px;
}
html[data-theme] body.home-astra .coffee-barista-bubble{
 position:relative;
 display:inline-flex;
 align-items:center;
 gap:4px;
 padding:7px 14px;
 border-radius:999px;
 background:#fff9eb;
 color:#23180c;
 border:1.5px solid #e2b454;
 font:600 13.5px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 white-space:nowrap;
 box-shadow:0 12px 24px rgba(4,10,24,.38),0 0 18px rgba(245,210,133,.28);
 transform:rotate(-2deg);
 transition:transform 300ms cubic-bezier(.22,1,.36,1),box-shadow 260ms ease,border-color 240ms ease;
}
html[data-theme] body.home-astra .coffee-barista-bubble::after{
 content:'';
 position:absolute;
 bottom:-6px;
 left:50%;
 width:10px;
 height:10px;
 background:#fff9eb;
 border-right:1.5px solid #e2b454;
 border-bottom:1.5px solid #e2b454;
 transform:translateX(-50%) rotate(45deg);
}
html[data-theme=light] body.home-astra .coffee-barista-bubble{
 background:#ffffff;
 color:#1e1408;
 border-color:#d49832;
 box-shadow:0 10px 22px rgba(32,22,8,.16),0 0 0 2px rgba(245,210,133,.44);
}
html[data-theme=light] body.home-astra .coffee-barista-bubble::after{
 background:#ffffff;
 border-color:#d49832;
}
html[data-theme] body.home-astra .coffee-barista-img{
 width:156px;
 height:158px;
 object-fit:contain;
 transform:rotate(-3deg);
 filter:drop-shadow(0 14px 22px rgba(4,10,24,.48));
 transition:transform 340ms cubic-bezier(.22,1,.36,1),filter 300ms ease;
}
html[data-theme=light] body.home-astra .coffee-barista-img{
 filter:drop-shadow(0 12px 18px rgba(32,22,8,.22));
}
html[data-theme] body.home-astra #support.coffee-support:is(:hover,:focus-within) .coffee-barista-bubble,
html[data-theme] body.home-astra .coffee-barista-sticker:hover .coffee-barista-bubble{
 transform:translateY(-4px) rotate(0deg) scale(1.04);
 border-color:#d97706;
 box-shadow:0 14px 28px rgba(4,10,24,.45),0 0 22px rgba(251,191,36,.44);
}
html[data-theme] body.home-astra #support.coffee-support:is(:hover,:focus-within) .coffee-barista-img,
html[data-theme] body.home-astra .coffee-barista-sticker:hover .coffee-barista-img{
 transform:translateY(-7px) rotate(3deg) scale(1.07);
 filter:drop-shadow(0 18px 26px rgba(4,10,24,.54)) drop-shadow(0 0 20px rgba(245,210,133,.46));
}

@media(max-width:860px){
 html[data-theme] body.home-astra #support.coffee-support{
  grid-template-columns:1fr!important;
  gap:22px!important;
  text-align:center;
 }
 html[data-theme] body.home-astra .coffee-copy{
  align-items:center!important;
  max-width:none!important;
 }
 html[data-theme] body.home-astra .coffee-barista-sticker{
  flex-direction:column!important;
  margin-block:2px!important;
 }
 html[data-theme] body.home-astra .coffee-barista-img{
  width:132px!important;
  height:134px!important;
 }
}


/* ═══ A32 — Full-Width Vertical Research Folio Layout for .deepdive-card (Audi 2026-10-22: "ตรง 82/100 ณ วันวิเคราะห์ งบแกร่ง · ราคาใกล้มูลค่าฐาน ... Op Margin 29.5% · FY26e FCF ≈$12.5B · Ads ≈$3B ... วางเละเทะไม่สวนเลย") ═══
   Prevent the legacy 250px side-stub boarding-pass split from squeezing the 4-pillar Stock Hub scorecard into a narrow 220px column or punching semicircular mask holes through the leather cover. */
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-card{
 display:grid!important;
 grid-template-columns:minmax(0,1fr)!important;
 grid-template-areas:"top" "content" "stub"!important;
 grid-template-rows:auto 1fr auto!important;
 -webkit-mask:none!important;
 mask:none!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-card-top{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) auto!important;
 align-items:start!important;
 gap:12px 14px!important;
 padding:22px 24px 8px!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-date-pill{
 justify-self:end!important;
 align-self:start!important;
 white-space:nowrap!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-card-content{
 padding:6px 24px 20px!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-card-bottom{
 border-left:0!important;
 border-top:2px dashed rgba(90,65,32,.36)!important;
 border-radius:0 0 6px 6px!important;
 padding:16px 24px!important;
 display:flex!important;
 flex-direction:row!important;
 flex-wrap:wrap!important;
 align-items:center!important;
 justify-content:space-between!important;
 gap:12px 16px!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-primary-btn{
 width:auto!important;
 flex:1 1 220px!important;
 padding:10px 16px!important;
}
html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-series-widget{
 display:flex!important;
 flex-direction:row!important;
 flex-wrap:wrap!important;
 align-items:center!important;
 gap:8px 10px!important;
}
@media(max-width:640px){
 html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-card-top{
  grid-template-columns:minmax(0,1fr)!important;
  padding:18px 18px 6px!important;
 }
 html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-date-pill{
  justify-self:start!important;
 }
 html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-card-content{
  padding:6px 18px 16px!important;
 }
 html[data-theme] body.home-astra .shelf-deepdives-grid .deepdive-card-bottom{
  padding:14px 18px!important;
  flex-direction:column!important;
  align-items:stretch!important;
 }
}



/* Tool cards: a real door into each tool (Audi 2026-10-23 — "หาลิงก์ไปหน้าไม่เจอ") */
html[data-theme] body.home-astra #members .tool-detail .tool-open{
 display:inline-flex;align-items:center;gap:6px;margin:12px 10px 4px 0;padding:9px 16px;border-radius:999px;
 font:700 14px/1.2 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;text-decoration:none;position:relative;z-index:1;
 transition:transform 180ms ease,box-shadow 180ms ease;
}
html[data-theme=dark] body.home-astra #members .tool-detail .tool-open{
 background:linear-gradient(180deg,#f5d285,#d9a94a);color:#1d1404!important;border:1.5px solid #8a6418;box-shadow:0 3px 0 #5b400c;
}
html[data-theme=light] body.home-astra #members .tool-detail .tool-open{
 background:linear-gradient(180deg,#1f3a5f,#152a46);color:#fff6dc!important;border:1.5px solid #0d1d33;box-shadow:0 3px 0 #0a1628;
}
html[data-theme] body.home-astra #members .tool-detail .tool-open:is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,.35)}
html[data-theme] body.home-astra #members .tool-detail .tool-status{display:inline-block;font-weight:600}
@media (prefers-reduced-motion:reduce){html[data-theme] body.home-astra #members .tool-detail .tool-open{transition:none}}
/* Home joint review 2026-10-23: keep the complete portal in the first phone view. */
@media(max-width:700px){
 html[data-theme] body.home-astra .worlds .world-finance{
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr)!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  align-items:center!important;
  column-gap:12px!important;
  row-gap:6px!important;
  padding-bottom:10px!important;
 }
 html[data-theme] body.home-astra .world-finance .portal-visual{
  grid-column:1!important;grid-row:1 / 4!important;
 }
 html[data-theme] body.home-astra .world-finance .world-title{
  grid-column:2!important;grid-row:1!important;align-self:end!important;
 }
 html[data-theme] body.home-astra .world-finance .world-sub{
  grid-column:2!important;grid-row:2!important;margin:0!important;
 }
 html[data-theme] body.home-astra .world-finance .finance-enter{
  grid-column:2!important;grid-row:3!important;
  align-self:start!important;justify-self:start!important;
  margin:0!important;min-height:44px!important;
 }
 html[data-theme] body.home-astra .bn-feedback-link:not(.aku-control){min-height:44px;display:inline-flex;align-items:center}
}
html[data-theme] body.home-astra #idea-box{scroll-margin-top:110px}

/* Links leave the explanatory folder through a clear native destination. */
html[data-theme] body.home-astra .tool-detail .lab-launch{
 display:inline-flex;align-items:center;justify-content:space-between;gap:20px;
 min-height:44px;margin-top:14px;padding:10px 16px;
 background:linear-gradient(135deg,#164e3e,#0d3126);
 border:1.5px solid #71d3ad;border-radius:10px;
 color:#ffffff!important;font-family:var(--font-body,'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif);
 font-size:15px;font-weight:600;text-decoration:none;
 transition:transform 180ms ease,background 180ms ease,color 180ms ease;
}
html[data-theme] body.home-astra .tool-detail .lab-launch:is(:hover,:focus-visible){
 background:linear-gradient(135deg,#1f6e58,#124536);color:#ffffff!important;
 transform:translateY(-2px);
}
html[data-motion=paused] body.home-astra .lab-launch{transition:none}
@media(prefers-reduced-motion:reduce){html[data-theme] body.home-astra .lab-launch{transition:none;transform:none!important}}

/* A single motion boundary outranks older high-specificity aura rules. */
html[data-motion=paused] #public-home *,
html[data-motion=paused] #public-home *::before,
html[data-motion=paused] #public-home *::after{
 animation-play-state:paused!important;
}
@media(prefers-reduced-motion:reduce){
 #public-home *,#public-home *::before,#public-home *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important;
 }
}

html[data-theme] body.home-astra .bn-copy{min-width:0}

#public-home #auth-overlay:not(.open),
#public-home #pd-wrap:not(.open){visibility:hidden}

/* The translated financial labels are reading content, not tiny telemetry. */
html[data-theme] body.home-astra .dd-kpi-chip{
 max-width:100%;flex-wrap:wrap;font-size:14px;line-height:1.5;
}

/* Member sign-up CTA in #members (Audi 2026-10-23: "เพิ่มปุ่มสมัครสมาชิกเข้าไปด้วยไหม สำหรับuserที่ยังไม่สมัคร แต่ทำปุ่มสวยๆนะ").
   Button system B: the one gold primary of this section + a quiet text route for people who already subscribed. */
html[data-theme] body.home-astra #members .lab-join{
 grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:18px 0 4px;
}
html[data-theme] body.home-astra #members .lab-join-btn{
 position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:12px;
 min-height:56px;padding:9px 18px 9px 12px;border-radius:14px;text-decoration:none;
 background:linear-gradient(180deg,#f3cf6b 0%,#e2ab36 52%,#c48f22 100%);color:#2a1a02!important;
 box-shadow:0 3px 0 #7a5410,0 10px 22px -10px rgba(196,143,34,.75),inset 0 1px 0 rgba(255,246,214,.75);
 transition:transform 200ms cubic-bezier(.22,1,.36,1),box-shadow 200ms ease,color 200ms ease;
}
html[data-theme] body.home-astra #members .lab-join-btn::before{
 /* Shine lives inside the button box: a moving gradient, not a moving stripe, so it never escapes now that Kungki overflows the top. */
 content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
 background:linear-gradient(100deg,transparent 38%,rgba(255,252,236,.62) 50%,transparent 62%) no-repeat;
 background-size:260% 100%;background-position:160% 0;animation:akLabJoinShine 4.8s ease-in-out 1.2s infinite;
}
/* 16-bit Kungki pops out of the button top (Audi 2026-10-23: "ทำเป็นภาพสติ้กเกอร์หรือ16bitดีกว่าไหม") */
html[data-theme] body.home-astra #members .lab-join-btn{overflow:visible;padding-left:74px}
html[data-theme] body.home-astra #members .lab-join-ic{
 position:absolute;left:6px;bottom:4px;width:62px;height:auto;z-index:2;pointer-events:none;
 image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(90,52,4,.45));transform-origin:50% 100%;
 animation:akLabJoinBob 2.8s cubic-bezier(.45,0,.55,1) infinite;
 transition:transform 260ms cubic-bezier(.34,1.56,.64,1);
}
/* Attention ring: one soft gold pulse every few seconds so the one action this section wants is easy to spot */
html[data-theme] body.home-astra #members .lab-join-btn::after{
 content:"";position:absolute;inset:-3px;border-radius:17px;pointer-events:none;z-index:-2;
 box-shadow:0 0 0 0 rgba(245,200,90,.55);animation:akLabJoinPulse 3.2s ease-out 1.6s infinite;
}
@keyframes akLabJoinBob{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-6px) rotate(-3deg)}60%{transform:translateY(-6px) rotate(2deg)}}
@keyframes akLabJoinPulse{0%{box-shadow:0 0 0 0 rgba(245,200,90,.55)}70%,100%{box-shadow:0 0 0 14px rgba(245,200,90,0)}}
html[data-theme] body.home-astra #members .lab-join-tx{display:flex;flex-direction:column;gap:1px;text-align:left}
html[data-theme] body.home-astra #members .lab-join-tx b{font:800 16.5px/1.2 'AK Thai','Google Sans','Outfit','Plus Jakarta Sans','Sarabun',sans-serif;color:#2a1a02}
html[data-theme] body.home-astra #members .lab-join-tx small{font:600 13px/1.25 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;color:#5a3a06}
html[data-theme] body.home-astra #members .lab-join-arr{
 display:grid;place-items:center;width:28px;height:28px;margin-left:4px;border-radius:50%;
 background:#2a1a02;color:#f6d77d;font:800 14px/1 'AK Thai','Google Sans','Plus Jakarta Sans',sans-serif;
 transition:transform 220ms cubic-bezier(.22,1,.36,1);
}
html[data-theme] body.home-astra #members .lab-join-btn:is(:hover,:focus-visible){
 transform:translateY(-2px);color:#2a1a02!important;
 box-shadow:0 5px 0 #7a5410,0 16px 30px -12px rgba(214,160,46,.9),inset 0 1px 0 rgba(255,246,214,.85);
}
html[data-theme] body.home-astra #members .lab-join-btn:is(:hover,:focus-visible) .lab-join-ic{animation:akLabJoinHop 520ms cubic-bezier(.34,1.56,.64,1) both}
@keyframes akLabJoinHop{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-14px) rotate(-8deg) scale(1.12)}100%{transform:translateY(-4px) rotate(-4deg) scale(1.08)}}
html[data-theme] body.home-astra #members .lab-join-btn:is(:hover,:focus-visible) .lab-join-arr{transform:translate(2px,-2px)}
html[data-theme] body.home-astra #members .lab-join-btn:active{transform:translateY(1px);box-shadow:0 1px 0 #7a5410,0 6px 14px -8px rgba(196,143,34,.7)}
html[data-theme] body.home-astra #members .lab-join-btn:focus-visible{outline:3px solid #fff3c4;outline-offset:3px}
html[data-theme=light] body.home-astra #members .lab-join-btn:focus-visible{outline-color:#1b2d44}
html[data-theme] body.home-astra #members .lab-join-link:not(.aku-control){
 display:inline-flex;align-items:center;min-height:44px;color:#f5d285;text-decoration:none;
 font:700 14.5px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;transition:color 180ms ease;
}
html[data-theme=light] body.home-astra #members .lab-join-link:not(.aku-control){color:#7a4d06}
html[data-theme] body.home-astra #members .lab-join-link:not(.aku-control):is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:4px}
@keyframes akLabJoinShine{0%,62%{background-position:160% 0}86%,100%{background-position:-60% 0}}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.home-astra #members .lab-join-btn::before{animation:none;opacity:0}
 html[data-theme] body.home-astra #members .lab-join-ic,
 html[data-theme] body.home-astra #members .lab-join-btn::after{animation:none!important}
 html[data-theme] body.home-astra #members :is(.lab-join-btn,.lab-join-ic,.lab-join-arr){transition:none}
}
@media(max-width:600px){
 html[data-theme] body.home-astra #members .lab-join{grid-column:1 / -1}
 html[data-theme] body.home-astra #members .lab-join-btn{width:100%;justify-content:flex-start}
 html[data-theme] body.home-astra #members .lab-join-arr{margin-left:auto}
}

/* Tool-card infographics follow the CARD width, not the viewport: at 721–1179px the three cards are ~240px wide,
   so the ≤700px stacked layout never fired and funnel values / 0DTE zones were cut (Claude sweep 2026-10-23, 768–1024px). */
html[data-theme] body.home-astra #members .lab-tool{container-type:inline-size;container-name:labtool}
@container labtool (max-width:360px){
 html[data-theme] body.home-astra #members .ti-funnel-step{grid-template-columns:minmax(0,1fr) auto;gap:3px 8px}
 html[data-theme] body.home-astra #members .ti-funnel-step .ti-f-lbl{grid-column:1 / -1}
 html[data-theme] body.home-astra #members .ti-f-val{text-align:right;white-space:nowrap}
 html[data-theme] body.home-astra #members .ti-force-chamber{grid-template-columns:1fr}
 html[data-theme] body.home-astra #members .ti-seg{font-size:0!important;justify-content:center}
 html[data-theme] body.home-astra #members .ti-seg b{font-size:11.5px!important}
}

html[data-motion=paused] body.home-astra #members .lab-join-btn::before,
html[data-motion=paused] body.home-astra #members .lab-join-btn::after,
body.home-astra.paused #members .lab-join-btn::before,
body.home-astra.paused #members .lab-join-btn::after{animation:none!important}

/* One-shot pixel cursor that glides to the sign-up button and clicks it (home-join-demo.js adds .is-demo once). */
html[data-theme] body.home-astra #members .lab-join-cursor{
 position:absolute;right:22px;top:58%;z-index:4;pointer-events:none;opacity:0;display:none;
 filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));transform:translate(90px,70px);
}
html[data-theme] body.home-astra #members .lab-join-cursor svg{display:block;image-rendering:pixelated}
html[data-theme] body.home-astra #members .lab-join-tap{
 position:absolute;left:-10px;top:-10px;width:22px;height:22px;border-radius:50%;
 border:3px solid #fff3c4;opacity:0;transform:scale(.3);
}
html[data-theme] body.home-astra #members .lab-join.is-demo .lab-join-cursor{display:block;animation:akJoinCursor 2.5s cubic-bezier(.22,1,.36,1) both}
html[data-theme] body.home-astra #members .lab-join.is-demo .lab-join-tap{animation:akJoinTap 2.5s ease-out both}
html[data-theme] body.home-astra #members .lab-join.is-demo .lab-join-btn{animation:akJoinPress 2.5s ease both}
html[data-theme] body.home-astra #members .lab-join.is-demo .lab-join-ic{animation:akLabJoinHop 520ms cubic-bezier(.34,1.56,.64,1) 1.25s both}
@keyframes akJoinCursor{
 0%{opacity:0;transform:translate(90px,70px)}
 12%{opacity:1}
 42%{transform:translate(0,0)}
 50%{transform:translate(0,0) scale(.82)}
 58%{transform:translate(0,0) scale(1)}
 82%{opacity:1;transform:translate(0,0)}
 100%{opacity:0;transform:translate(14px,18px)}
}
@keyframes akJoinTap{0%,46%{opacity:0;transform:scale(.3)}52%{opacity:1;transform:scale(.6)}78%,100%{opacity:0;transform:scale(1.9)}}
@keyframes akJoinPress{0%,44%{transform:translateY(0)}50%{transform:translateY(2px);box-shadow:0 1px 0 #7a5410,0 6px 14px -8px rgba(196,143,34,.7)}60%{transform:translateY(-2px)}72%,100%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){html[data-theme] body.home-astra #members .lab-join-cursor{display:none}}
html[data-motion=paused] body.home-astra #members .lab-join-cursor,body.home-astra.paused #members .lab-join-cursor{display:none}

/* Phone: the lab mascot sits over the heading's right end; keep the title clear of it (pre-existing on prod, found 2026-10-23). */
@media(max-width:600px){html[data-theme] body.home-astra #members #members-title{padding-right:100px;text-wrap:balance}}

/* GATE 0 holistic pass on #members (Audi 2026-10-23): with the gold sign-up CTA as this section's one primary,
   "เปิด <tool> →" are routes → button B says text links, not three more gold/navy boxes competing with it. */
html[data-theme] body.home-astra #members .tool-detail .tool-open{
 background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;
 min-height:44px;margin:8px 16px 0 0;color:#f5d285!important;font:700 15px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
}
html[data-theme=light] body.home-astra #members .tool-detail .tool-open{color:#7a4d06!important}
html[data-theme] body.home-astra #members .tool-detail .tool-open:is(:hover,:focus-visible){transform:none;text-decoration:underline;text-underline-offset:4px;box-shadow:none!important}
html[data-theme] body.home-astra #members .tool-detail .tool-status{color:var(--a-copy);font-weight:600}
/* Status notes under tool cards are labels, not links (cold read 2026-10-23 mistook them for links). */
html[data-theme] body.home-astra #members .tool-detail .tool-status{display:inline-flex;align-items:center;min-height:44px;font:500 13px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif!important;color:var(--a-copy)!important;opacity:.85;text-decoration:none!important;cursor:default}

/* Center peek: how to join (Audi 2026-10-23: "ทำเป็นcenter peek ขึ้นมาไม่ดีกว่าหรอ … คล้ายๆที่codexเคยทำแต่ทำดีกว่านี้").
   Codex's members.html stepper look (numbered steps + Kungki guide), upgraded: every step is clickable, Kungki changes pose
   per step, and each step has exactly ONE action the visitor can do right now. Native <dialog>: Esc/✕/backdrop/Back close. */
html:has(#member-join[open]){overflow:hidden}
body.home-astra .join-peek{
 width:min(600px,calc(100vw - 32px));max-height:min(88vh,760px);padding:0;border:0;border-radius:22px;overflow:visible;
 background:transparent;color:var(--a-ink);
}
body.home-astra .join-peek[open]{animation:jpIn 300ms cubic-bezier(.22,1,.36,1) both}
body.home-astra .join-peek::backdrop{background:rgba(4,10,22,.66);backdrop-filter:blur(6px);animation:jpFade 240ms ease both}
body.home-astra .join-peek .jp-card{
 position:relative;max-height:inherit;overflow:auto;padding:26px 26px 18px;border-radius:22px;
 background:radial-gradient(120% 80% at 0% 0%,rgba(245,210,133,.16),transparent 60%),linear-gradient(165deg,#13233f 0%,#0b1628 100%);
 border:1px solid rgba(245,210,133,.38);box-shadow:0 30px 70px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,248,220,.12);
}
html[data-theme=light] body.home-astra .join-peek .jp-card{
 background:radial-gradient(120% 80% at 0% 0%,rgba(240,196,84,.22),transparent 60%),linear-gradient(170deg,#fffaf0 0%,#f6ead2 100%);
 border-color:rgba(150,108,32,.35);box-shadow:0 30px 70px -24px rgba(60,40,8,.45);
}
html[data-theme=light] body.home-astra .join-peek::backdrop{background:rgba(30,24,10,.42)}
body.home-astra .join-peek .jp-close{
 position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(245,210,133,.35);
 background:transparent;color:#f5d285;font:700 18px/1 'AK Thai','Google Sans','Plus Jakarta Sans',sans-serif;cursor:pointer;transition:background 160ms ease,transform 160ms ease;
}
html[data-theme=light] body.home-astra .join-peek .jp-close{color:#6b4306;border-color:rgba(120,80,10,.35)}
body.home-astra .join-peek .jp-close:is(:hover,:focus-visible){background:rgba(245,210,133,.16);transform:rotate(90deg)}
body.home-astra .join-peek .jp-head{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:end;padding-right:40px}
body.home-astra .join-peek .jp-guide{width:96px;height:auto;image-rendering:pixelated;filter:drop-shadow(0 4px 0 rgba(0,0,0,.3));transform-origin:50% 100%}
body.home-astra .join-peek .jp-guide.is-hop{animation:jpHop 520ms cubic-bezier(.34,1.56,.64,1)}
body.home-astra .join-peek .jp-kicker{margin:0 0 2px;font:700 13px/1.3 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;color:#f5d285;letter-spacing:.02em}
html[data-theme=light] body.home-astra .join-peek .jp-kicker{color:#8a5a08}
body.home-astra .join-peek h2{margin:0;font:800 clamp(22px,3.4vw,27px)/1.25 'AK Thai','Google Sans','Outfit','Plus Jakarta Sans','Sarabun',sans-serif;color:var(--a-ink)}
body.home-astra .join-peek .jp-sub{margin:6px 0 0;font:500 14.5px/1.5 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;color:var(--a-copy)}
body.home-astra .join-peek .jp-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0 0;border-bottom:1px solid rgba(245,210,133,.22)}
html[data-theme=light] body.home-astra .join-peek .jp-tabs{border-bottom-color:rgba(120,80,10,.22)}
body.home-astra .join-peek .jp-tab:not(.aku-control){
 display:flex;flex-direction:column;align-items:center;gap:5px;min-height:64px;padding:8px 4px 10px;border:0;background:none;cursor:pointer;
 color:var(--a-copy);font:600 13.5px/1.25 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;border-bottom:3px solid transparent;margin-bottom:-1px;transition:color 160ms ease,border-color 160ms ease;
}
body.home-astra .join-peek .jp-tab:not(.aku-control) .jp-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid currentColor;font:800 14px/1 'AK Thai','Google Sans','Outfit',sans-serif;transition:background 160ms ease,color 160ms ease}
body.home-astra .join-peek .jp-tab:not(.aku-control)[aria-selected=true]{color:var(--a-ink);border-bottom-color:#f0c454}
body.home-astra .join-peek .jp-tab:not(.aku-control)[aria-selected=true] .jp-n{background:#f0c454;border-color:#f0c454;color:#2a1a02}
body.home-astra .join-peek .jp-tab:not(.aku-control):is(:hover,:focus-visible){color:var(--a-ink)}
body.home-astra .join-peek .jp-tab:not(.aku-control):focus-visible{outline:2px solid #f5d285;outline-offset:-2px;border-radius:8px}
body.home-astra .join-peek .jp-panel{padding:18px 2px 6px;min-height:150px;animation:jpPanel 260ms ease both}
body.home-astra .join-peek .jp-panel h3{margin:0 0 6px;font:800 19px/1.35 'AK Thai','Google Sans','Outfit','Plus Jakarta Sans','Sarabun',sans-serif;color:var(--a-ink)}
body.home-astra .join-peek .jp-panel p{margin:0 0 16px;font:500 15.5px/1.6 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;color:var(--a-copy)}
body.home-astra .join-peek .jp-act{
 display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 20px;border-radius:12px;text-decoration:none;
 background:linear-gradient(180deg,#f3cf6b 0%,#e2ab36 52%,#c48f22 100%);color:#2a1a02!important;font:800 15.5px/1.2 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;
 box-shadow:0 3px 0 #7a5410,0 10px 22px -10px rgba(196,143,34,.75);transition:transform 180ms ease,box-shadow 180ms ease;
}
body.home-astra .join-peek .jp-act:is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:0 5px 0 #7a5410,0 14px 26px -10px rgba(214,160,46,.9)}
body.home-astra .join-peek .jp-act:focus-visible{outline:3px solid #fff3c4;outline-offset:3px}
body.home-astra .join-peek .jp-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:12px;border-top:1px dashed rgba(245,210,133,.22)}
html[data-theme=light] body.home-astra .join-peek .jp-foot{border-top-color:rgba(120,80,10,.22)}
body.home-astra .join-peek :is(.jp-prev:not(.aku-control),.jp-next:not(.aku-control)){min-height:44px;padding:0 6px;border:0;background:none;cursor:pointer;color:#f5d285;font:700 15px/1 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif}
html[data-theme=light] body.home-astra .join-peek :is(.jp-prev:not(.aku-control),.jp-next:not(.aku-control)){color:#7a4d06}
body.home-astra .join-peek :is(.jp-prev:not(.aku-control),.jp-next:not(.aku-control)):is(:hover,:focus-visible){text-decoration:underline;text-underline-offset:4px}
body.home-astra .join-peek .jp-prev:not(.aku-control):disabled{opacity:.35;cursor:default;text-decoration:none}
body.home-astra .join-peek .jp-count{font:600 13px/1 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;color:var(--a-copy)}
@keyframes jpIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes jpFade{from{opacity:0}to{opacity:1}}
@keyframes jpPanel{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@keyframes jpHop{0%{transform:translateY(0)}40%{transform:translateY(-12px) rotate(-5deg)}100%{transform:none}}
@media(max-width:480px){
 body.home-astra .join-peek .jp-card{padding:20px 16px 14px}
 body.home-astra .join-peek .jp-head{grid-template-columns:72px minmax(0,1fr);gap:12px}
 body.home-astra .join-peek .jp-guide{width:72px}
 body.home-astra .join-peek .jp-tab:not(.aku-control){font-size:12px;min-height:60px}
 body.home-astra .join-peek .jp-act{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
 body.home-astra .join-peek[open],body.home-astra .join-peek::backdrop,body.home-astra .join-peek .jp-panel,body.home-astra .join-peek .jp-guide.is-hop{animation:none}
}
/* Peek polish: drop the legacy home-v5 dialog offset slab, and let the title use the full row (only the kicker clears ✕). */
body.home-astra .join-peek{box-shadow:none!important}
body.home-astra .join-peek .jp-head{padding-right:0}
body.home-astra .join-peek .jp-kicker{padding-right:48px}
body.home-astra .join-peek h2{text-wrap:balance}
@media(max-width:480px){
 body.home-astra .join-peek .jp-head{grid-template-columns:60px minmax(0,1fr);gap:10px;align-items:center}
 body.home-astra .join-peek .jp-guide{width:60px}
 body.home-astra .join-peek h2{font-size:20px}
 body.home-astra .join-peek .jp-sub{font-size:13.5px}
}
@media(max-width:360px){body.home-astra .join-peek .jp-count{display:none}body.home-astra .join-peek .jp-foot{flex-wrap:nowrap}}
/* Cold read 2026-10-23: viewing a step is not doing it — no green "done" marks; bigger kicker/sub; no orphan words. */
body.home-astra .join-peek .jp-kicker{font-size:14.5px}
body.home-astra .join-peek .jp-sub{font-size:15.5px;text-wrap:pretty}
body.home-astra .join-peek .jp-panel h3,body.home-astra .join-peek .jp-panel p{text-wrap:pretty}
@media(max-width:480px){
 body.home-astra .join-peek .jp-head{grid-template-columns:56px minmax(0,1fr);row-gap:2px;align-items:end}
 body.home-astra .join-peek .jp-head>div{display:contents}
 body.home-astra .join-peek .jp-guide{grid-column:1;grid-row:1 / 3;width:56px}
 body.home-astra .join-peek .jp-kicker{grid-column:2;grid-row:1}
 body.home-astra .join-peek h2{grid-column:2;grid-row:2;font-size:19px}
 body.home-astra .join-peek .jp-sub{grid-column:1 / -1;grid-row:3;margin-top:10px}
}
body.home-astra .join-peek h2{max-width:none!important;width:auto}
@media(max-width:360px){body.home-astra .join-peek h2{text-wrap:wrap;font-size:18px}}
body.home-astra .join-peek h2{padding:0!important;margin:0!important}
/* Icon order logo > 16-bit > emoji (rule 5, Audi 2026-10-23: "สมัครสมาชิกบน Facebook ของผม ก็ต้องlogo facebookรึป่าว"). */
body.home-astra .join-peek .jp-tl{display:inline-flex;align-items:center;gap:5px}
body.home-astra .join-peek .jp-logo{width:18px;height:18px;flex:none;display:inline-block;vertical-align:-3px}
body.home-astra .join-peek .jp-logo-h{width:24px;height:24px;vertical-align:-5px;margin-right:2px}
body.home-astra .join-peek .jp-logo-inline{width:18px;height:18px;vertical-align:-3px}
body.home-astra .join-peek .jp-act .jp-logo{width:22px;height:22px;background:#fff;border-radius:50%;padding:1px}
body.home-astra .join-peek .jp-px{display:inline-block;flex:none}
@media(max-width:480px){body.home-astra .join-peek .jp-tl{flex-direction:column;gap:3px}}

/* Feature screenshots on the tool cards (Audi 2026-10-23: "ขึ้นรูปscreen โชว์featureด้วยไหม"): the signature section of
   each tool, cropped clean (public data only), framed as a tiny browser window so it reads as "this is the real page". */
html[data-theme] body.home-astra #members .tool-shot{
 display:block;margin:14px 0 2px;border-radius:12px;overflow:hidden;position:relative;
 border:1px solid color-mix(in srgb,var(--tool-accent,#f5d285) 45%,transparent);
 box-shadow:0 14px 30px -16px rgba(0,0,0,.65);background:#0b1628;
 transform:rotate(-1deg);transition:transform 260ms cubic-bezier(.22,1,.36,1),box-shadow 260ms ease;
}
html[data-theme=light] body.home-astra #members .tool-shot{background:#f4ead6;box-shadow:0 14px 28px -18px rgba(60,40,8,.45)}
html[data-theme] body.home-astra #members .ts-bar{display:flex;align-items:center;gap:5px;height:22px;padding:0 9px;background:rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.08)}
html[data-theme=light] body.home-astra #members .ts-bar{background:rgba(120,80,10,.08);border-bottom-color:rgba(120,80,10,.12)}
html[data-theme] body.home-astra #members .ts-bar i{width:7px;height:7px;border-radius:50%;background:#f87171}
html[data-theme] body.home-astra #members .ts-bar i:nth-child(2){background:#fbbf24}
html[data-theme] body.home-astra #members .ts-bar i:nth-child(3){background:#34d399}
html[data-theme] body.home-astra #members .ts-bar b{margin-left:6px;font:600 10.5px/1 'AK Thai','Google Sans','Plus Jakarta Sans',sans-serif;color:var(--a-copy);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html[data-theme] body.home-astra #members .tool-shot img{display:block;width:100%;height:auto}
html[data-theme=dark] body.home-astra #members .tool-shot .ts-light,html[data-theme=light] body.home-astra #members .tool-shot .ts-dark{display:none}
html[data-theme] body.home-astra #members .lab-tool:is(:hover,:focus-within) .tool-shot{transform:rotate(0) translateY(-3px) scale(1.02);box-shadow:0 20px 36px -16px rgba(0,0,0,.7)}
@media(prefers-reduced-motion:reduce){html[data-theme] body.home-astra #members .tool-shot{transform:none;transition:none}}
html[data-theme] body.home-astra #members .ts-bar b{font:600 10.5px/1 'AK Thai','Google Sans','Plus Jakarta Sans',sans-serif!important;letter-spacing:0!important}

/* Tool-card screenshots as the zone's showpiece (Audi 2026-10-23: "ทำให้ภาพทั้งโซนนี้มันดูน่ากด ดูเด่นกว่าหน่อยไหม ดูพิเศษอ่ะ").
   Equal-height frames, a tool-coloured gradient rim + aura, a "หน้าจริง" live badge, and a light sweep that plays once when the
   card scrolls in and again on hover. Nothing loops, so the gold join CTA stays the loudest thing in the section. */
@property --ts-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
html[data-theme] body.home-astra #members .tool-shot{
 margin-top:16px;border:2px solid transparent;
 background:linear-gradient(#0b1628,#0b1628) padding-box,
  conic-gradient(from var(--ts-ang),var(--tool-accent,#f5d285),#f5d285 22%,color-mix(in srgb,var(--tool-accent,#f5d285) 30%,transparent) 45%,var(--tool-accent,#f5d285) 70%,#f5d285 88%,var(--tool-accent,#f5d285)) border-box;
 box-shadow:0 0 0 4px color-mix(in srgb,var(--tool-accent,#f5d285) 14%,transparent),0 20px 40px -16px color-mix(in srgb,var(--tool-accent,#f5d285) 55%,rgba(0,0,0,.6));
 transform:perspective(700px) rotate(-1deg);
 transition:transform 320ms cubic-bezier(.22,1,.36,1),box-shadow 320ms ease;
}
html[data-theme=light] body.home-astra #members .tool-shot{
 background:linear-gradient(#fbf6ea,#fbf6ea) padding-box,
  conic-gradient(from var(--ts-ang),var(--tool-accent,#c9962c),#d4a017 22%,color-mix(in srgb,var(--tool-accent,#c9962c) 30%,transparent) 45%,var(--tool-accent,#c9962c) 70%,#d4a017 88%,var(--tool-accent,#c9962c)) border-box;
 box-shadow:0 0 0 4px color-mix(in srgb,var(--tool-accent,#c9962c) 16%,transparent),0 18px 34px -16px color-mix(in srgb,var(--tool-accent,#8a6418) 55%,rgba(60,40,8,.4));
}
html[data-theme] body.home-astra #members .tool-shot img{aspect-ratio:16/11;object-fit:cover;object-position:center top;transition:transform 420ms cubic-bezier(.22,1,.36,1)}
html[data-theme] body.home-astra #members .tool-shot::after{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
 background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 47%,rgba(255,255,255,.08) 53%,transparent 66%) no-repeat;
 background-size:250% 100%;background-position:160% 0;
}
html[data-theme] body.home-astra #members .ts-bar{position:relative;z-index:1}
html[data-theme] body.home-astra #members .ts-live{
 margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;
 font:700 10px/1.2 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;font-style:normal;color:#06281b;background:#5eead4;
}
html[data-theme] body.home-astra #members .ts-live i{width:6px!important;height:6px!important;border-radius:50%;background:#047857!important;box-shadow:0 0 0 0 rgba(4,120,87,.6)}
html[data-theme] body.home-astra #members .lab-tool .tool-shot.is-lit{animation:ts-spin 1.6s cubic-bezier(.45,0,.2,1) 1}
html[data-theme] body.home-astra #members .lab-tool .tool-shot.is-lit::after{animation:ts-sweep 1.4s ease-out 1}
html[data-theme] body.home-astra #members .lab-tool .tool-shot.is-lit .ts-live i{animation:ts-ping 1.4s ease-out 2}
html[data-theme] body.home-astra #members .lab-tool:is(:hover,:focus-within) .tool-shot{
 transform:perspective(700px) rotateX(4deg) rotate(0) translateY(-5px) scale(1.03);
 box-shadow:0 0 0 5px color-mix(in srgb,var(--tool-accent,#f5d285) 24%,transparent),0 28px 50px -18px color-mix(in srgb,var(--tool-accent,#f5d285) 70%,rgba(0,0,0,.6));
 animation:ts-spin 2.4s linear infinite;
}
html[data-theme] body.home-astra #members .lab-tool:is(:hover,:focus-within) .tool-shot::after{animation:ts-sweep 1.2s ease-out 1}
/* Source image remains complete on hover; the outer frame supplies the lift. */
@keyframes ts-spin{to{--ts-ang:360deg}}
@keyframes ts-sweep{from{background-position:160% 0}to{background-position:-60% 0}}
@keyframes ts-ping{to{box-shadow:0 0 0 7px rgba(4,120,87,0)}}
@media(prefers-reduced-motion:reduce){
 html[data-theme] body.home-astra #members .tool-shot,html[data-theme] body.home-astra #members .lab-tool:is(:hover,:focus-within) .tool-shot{animation:none!important;transform:none}
 html[data-theme] body.home-astra #members .tool-shot::after,html[data-theme] body.home-astra #members .tool-shot img{animation:none!important;transition:none;transform:none}
}
html[data-motion=paused] body.home-astra #members .tool-shot,html[data-motion=paused] body.home-astra #members .tool-shot::after,body.home-astra.paused #members .tool-shot,body.home-astra.paused #members .tool-shot::after{animation:none!important}
/* Frames line up across the row (subtitle reserves two lines on desktop) and end in a fade with a "press to see" pill — the
   bottom rows were cut mid-line, and the pill tells people the picture opens the card. Hidden once the card is open. */
@media(min-width:921px){html[data-theme] body.home-astra #members .lab-tool summary>span>small{display:block;min-height:3.3em}}
html[data-theme] body.home-astra #members .ts-cta{
 position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:center;align-items:flex-end;padding:34px 10px 10px;
 background:linear-gradient(180deg,transparent,rgba(8,18,34,.92) 70%);
 font:700 12.5px/1.2 'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',sans-serif;color:#fff4d6;letter-spacing:0;
 transition:opacity 220ms ease;
}
html[data-theme=light] body.home-astra #members .ts-cta{background:linear-gradient(180deg,transparent,rgba(251,246,234,.96) 70%);color:#4a3206}
html[data-theme] body.home-astra #members .ts-cta b{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:6px;border-radius:50%;background:#f5d285;color:#2a1a00;font-size:14px;line-height:1}
html[data-theme] body.home-astra #members .lab-tool[open] .ts-cta{opacity:0}
html[data-theme] body.home-astra #members .lab-tool:is(:hover,:focus-within) .tool-shot{transform:perspective(700px) rotateX(3deg) rotate(0) translateY(-4px) scale(1.02)}
html[data-theme] body.home-astra #members .lab-tool:is(:hover,:focus-within) .ts-cta b{animation:ts-bob .9s ease-in-out 2}
@keyframes ts-bob{50%{transform:translateY(-3px)}}
html[data-motion=paused] body.home-astra #members .ts-cta b,body.home-astra.paused #members .ts-cta b{animation:none!important}
@media(prefers-reduced-motion:reduce){html[data-theme] body.home-astra #members .ts-cta b{animation:none!important}}
/* The badge never widens a narrow card: the URL gives way first, and at small card widths it hides. */
html[data-theme] body.home-astra #members .tool-shot,html[data-theme] body.home-astra #members .ts-bar,html[data-theme] body.home-astra #members .ts-bar b{min-width:0;max-width:100%}
html[data-theme] body.home-astra #members .ts-bar b{flex:1 1 auto}
@container labtool (max-width:300px){html[data-theme] body.home-astra #members .ts-bar b{display:none}}