.tools-dreamcore{height:200vh;position:relative;background:#100a18;color:#fff}
/* Over the dreamcore scene the header drops its bars and floats on the artwork, so the scene runs
   to the very top edge. Transparency is the default state (no flash of solid chrome before the
   script runs) and JS adds .tools-dreamcore-past once the hero is behind you, which simply drops
   these rules and lets the theme's own header styling return. The header is fixed the whole way
   down so nothing jumps at that handover. Without JS the scene never animates, so the section is
   hidden and the header keeps its normal styling. */
html:not(.js) .tools-dreamcore{display:none}
html.js body[data-page="tools"] .site-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:opacity .35s ease,transform .35s ease,background-color .35s ease,border-color .35s ease}
html.js body[data-page="tools"]:not(.tools-dreamcore-past) .site-header{background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none}
html.js body[data-page="tools"]:not(.tools-dreamcore-past) .site-header .utility{background:transparent;border-bottom-color:transparent}
html.js body[data-page="tools"].tools-dreamcore-dive:not(.menu-open):not(.search-open) .site-header{opacity:0;transform:translateY(-8px);pointer-events:none}
.tools-dreamcore-view{position:fixed;z-index:1;left:0;right:0;top:0;height:100vh;height:100svh;overflow:hidden;background:#a98fd0;isolation:isolate;opacity:0;pointer-events:none;transition:opacity .15s linear}
.tools-dreamcore-layer{position:absolute;inset:0;will-change:transform,opacity;pointer-events:none}
.tools-dreamcore-sky{z-index:0;background:#a98fd0 url('../images/dreamcore-sky.png') center center/cover no-repeat}
.tools-dreamcore-cave{z-index:2;background:url('../images/dreamcore-cave-foreground.png') center center/100% 100% no-repeat;transform-origin:50% 51%}
@media(max-aspect-ratio:4/3){.tools-dreamcore-cave{background-size:auto 100%}}
.tools-dreamcore-fade{z-index:4;inset:auto 0 0;height:35%;background:linear-gradient(transparent,rgba(8,3,15,.42));pointer-events:none}
.tools-dreamcore-view:before{content:"";position:absolute;z-index:5;inset:0 0 auto;height:190px;background:linear-gradient(rgba(10,4,18,.6),transparent);pointer-events:none}
.tools-dreamcore-ui{position:fixed;z-index:6;left:0;right:0;top:0;height:100vh;height:100svh;pointer-events:none;text-shadow:0 2px 18px rgba(33,8,42,.75)}
.tools-dreamcore-copy{position:absolute;left:5vw;top:42%;width:min(390px,42vw);transform:translateY(-50%);opacity:1;transition:opacity .7s ease,transform .7s ease}
.tools-dreamcore-copy.is-hidden{opacity:0;transform:translateY(-60%)}
.tools-dreamcore-eyebrow{margin:0 0 12px;color:#ffe0f4;font-size:.82rem;font-weight:800;letter-spacing:.16em}
.tools-dreamcore-title{margin:0;color:#fff;font:400 clamp(3.8rem,7vw,7.5rem)/.78 Georgia,'Times New Roman',serif;letter-spacing:-.06em}
.tools-dreamcore-title em{color:#fff0fa;font-style:italic}
.tools-dreamcore-description{width:max-content;max-width:min(410px,100%);margin:28px 0 0;padding:12px 17px;border-left:3px solid #ffc5e4;border-radius:0 9px 9px 0;background:rgba(17,9,32,.82);color:#fff;font:600 1.08rem/1.65 'IBM Plex Sans Thai',sans-serif;text-shadow:none;backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(7,4,20,.25)}
html[lang="th"] .tools-dreamcore-title{font-family:'Noto Serif Thai',serif;font-size:clamp(3.1rem,6vw,6.3rem);font-weight:600;line-height:1.15;letter-spacing:-.045em}
html[lang="th"] .tools-dreamcore-title em{font-style:normal}
@media(min-width:1051px){html[lang="th"] .tools-dreamcore-copy{width:min(620px,62vw)}}
.tools-dreamcore-scroll{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-align:center;transition:opacity .5s ease}
.tools-dreamcore-scroll span{display:grid;place-items:center;width:29px;height:29px;margin:8px auto 0;border:1px solid rgba(255,255,255,.5);border-radius:50%;font-size:1rem;animation:tools-dreamcore-bob 1.8s ease-in-out infinite}
.tools-dreamcore-scroll.is-hidden{opacity:0}
@keyframes tools-dreamcore-bob{50%{transform:translateY(-5px)}}
@media(max-width:1050px){.tools-dreamcore-copy{left:50%;top:20%;width:min(540px,90vw);transform:translateX(-50%);text-align:center}.tools-dreamcore-copy.is-hidden{transform:translate(-50%,-10%)}.tools-dreamcore-description{margin-inline:auto}}
@media(max-width:650px){.tools-dreamcore{height:230vh}.tools-dreamcore-cave{background-position:center center}.tools-dreamcore-copy{top:17%;padding:0 18px}.tools-dreamcore-title{font-size:clamp(3.5rem,15vw,5.3rem)}html[lang="th"] .tools-dreamcore-title{font-size:clamp(2.55rem,10.5vw,4.3rem)}.tools-dreamcore-description{max-width:100%;font-size:.94rem;line-height:1.6}.tools-dreamcore-scroll{display:none}}
@media(prefers-reduced-motion:reduce){.tools-dreamcore-copy,.tools-dreamcore-scroll span{transition:none;animation:none}.tools-dreamcore-cave{transform:none!important}body[data-page="tools"].tools-dreamcore-dive .site-header{opacity:1!important;transform:none!important;pointer-events:auto!important}}

/* Tool catalogue: vivid, substantial cards below the dreamcore entrance. */
body[data-page="tools"] .tl-catalog{
  background-color:#251b50;
  background-image:linear-gradient(180deg,rgba(18,10,45,.25),rgba(20,13,51,.42) 48%,rgba(17,10,40,.64)),url('../images/dreamcore-sky.png');
  background-position:center,center;
  background-size:cover,cover;
  background-repeat:no-repeat;
  background-attachment:scroll,fixed;
}
body[data-page="tools"] .tl-catalog .pdft-grid-head :is(.mini-label,h2,p){color:#fff}
body[data-page="tools"] .tl-catalog .pdft-grid-head .mini-label{color:#ffd0ed}
body[data-page="tools"] .tl-catalog .pdft-grid-head p{color:#d5cde9}
body[data-page="tools"] .tl-switch{gap:22px}
body[data-page="tools"] .tl-tile:not(.tl-tile-soon){
  min-height:370px;aspect-ratio:auto;padding:23px;border-radius:25px;
  border:1px solid rgba(255,255,255,.44);
  background:radial-gradient(circle at 74% 19%,color-mix(in srgb,var(--glow) 68%,transparent),transparent 37%),linear-gradient(145deg,var(--shade),var(--tone) 65%,var(--shade));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 16px 36px rgba(4,2,27,.38);
}
body[data-page="tools"] .tl-tile:not(.tl-tile-soon)::after{
  inset:38% 0 0;background:linear-gradient(180deg,transparent,rgba(4,5,30,.18) 18%,rgba(5,5,25,.9) 100%);
}
body[data-page="tools"] .tl-tile:not(.tl-tile-soon):is(:hover,:focus-visible){
  transform:translateY(-9px);border-color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 27px 52px rgba(4,2,27,.55),0 0 0 3px color-mix(in srgb,var(--glow) 60%,transparent);
}
body[data-page="tools"] .tl-art{inset:10px 0 34%;filter:drop-shadow(0 14px 15px rgba(4,4,28,.3))}
body[data-page="tools"] .tl-badge{position:relative;z-index:2;padding:7px 12px;background:#fff;color:var(--shade);box-shadow:0 5px 15px rgba(4,2,27,.27)}
body[data-page="tools"] .tl-index{position:absolute;right:22px;top:15px;z-index:2;color:rgba(255,255,255,.72);font:800 2rem/1 Manrope,sans-serif;letter-spacing:-.08em;text-shadow:0 2px 10px rgba(0,0,0,.2)}
body[data-page="tools"] .tl-copy{gap:7px;max-width:100%;text-shadow:0 2px 12px rgba(0,0,0,.75)}
body[data-page="tools"] .tl-copy strong{font-size:clamp(1.45rem,2.25vw,1.9rem);line-height:1.17;color:#fff}
body[data-page="tools"] .tl-copy small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em;color:#f0ebff;font-size:.88rem;line-height:1.45}
body[data-page="tools"] .tl-open{align-self:stretch;justify-content:space-between;margin-top:19px;padding:12px 16px;border-radius:13px;background:#fff;color:var(--shade);font-size:.86rem;box-shadow:0 7px 18px rgba(0,0,0,.25)}
body[data-page="tools"] .tl-open .icon{width:18px;height:18px}
body[data-page="tools"] a.tl-tile:is(:hover,:focus-visible) .tl-open{background:var(--glow);color:#101124}
body[data-page="tools"] .tl-tile-soon{min-height:370px;aspect-ratio:auto;border-color:rgba(255,255,255,.35);background:linear-gradient(145deg,#342d60,#171432);box-shadow:0 16px 36px rgba(4,2,27,.28)}
body[data-page="tools"] .tl-tile-soon .tl-open{align-self:stretch}
body[data-page="tools"] .tl-pdf-list{background:#f9f6ff;border-color:#eee6ff}
@media(max-width:700px){
  body[data-page="tools"] .tl-catalog{background-attachment:scroll; background-size:cover,auto 100svh; background-repeat:no-repeat,repeat-y}
  body[data-page="tools"] .tl-switch{gap:16px}
  body[data-page="tools"] .tl-tile:not(.tl-tile-soon),body[data-page="tools"] .tl-tile-soon{min-height:340px}
  body[data-page="tools"] .tl-copy strong{font-size:1.5rem}
}
@media(prefers-reduced-motion:reduce){body[data-page="tools"] .tl-tile:not(.tl-tile-soon):is(:hover,:focus-visible){transform:none}}