/* Learn: three doors and How people work (27 Oct 2026). Light by default; html.bu-dark is the site's dark mode. */
.hpw-root{
  --hpw-ink:#14202f; --hpw-ink2:#33415c; --hpw-muted:#566275; --hpw-card:#ffffff; --hpw-card2:#f3f6fb; --hpw-line:rgba(16,24,40,.09);
  --hpw-tint:#235ea8; --hpw-a1:var(--la,#317fd8); --hpw-a2:color-mix(in srgb,var(--la,#317fd8) 28%,#fff); --hpw-ln:#33415c;
  --hpw-shadow:0 1px 2px rgba(16,24,40,.06),0 10px 30px rgba(20,40,80,.08); --hpw-shadow-up:0 18px 44px rgba(20,40,80,.16);
  --hpw-out:var(--bu-ease-out,cubic-bezier(.22,1,.36,1)); --hpw-spring:var(--bu-ease-spring,cubic-bezier(.3,1.25,.4,1));
  color:var(--hpw-ink);
}
html.bu-dark .hpw-root{
  --hpw-ink:#e9eef7; --hpw-ink2:#c9d4e4; --hpw-muted:#9eabbe; --hpw-card:#1b2230; --hpw-card2:#222b3b; --hpw-line:rgba(255,255,255,.08);
  --hpw-tint:#8fc0f5; --hpw-a2:color-mix(in srgb,var(--la,#317fd8) 38%,#1b2230); --hpw-ln:#c9d4e4;
  --hpw-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.25); --hpw-shadow-up:0 22px 50px rgba(0,0,0,.45);
}
.hpw-root a{color:inherit}
.hpw-root .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* entrance */
@keyframes hpw-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hpw-draw{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
@keyframes hpw-pop{0%{opacity:0;transform:scale(.35)}70%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes hpw-orbit{to{transform:rotate(360deg)}}
@keyframes hpw-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes hpw-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hpw-glow{0%,100%{transform:translate(-10%,-10%) scale(1)}50%{transform:translate(10%,6%) scale(1.15)}}

/* shared type */
.hpw-h1{font-family:Lora,Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(34px,5vw,52px);line-height:1.08;margin:.2em 0 0;text-wrap:balance}
.hpw-h1--light{color:#fff}
.hpw-h2{font-family:Lora,Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(26px,3vw,34px);line-height:1.15;margin:0 0 .4em}
.hpw-lead{color:var(--hpw-ink2);font-size:1.125rem;max-width:640px;margin:.6em 0 0}
.hpw-k{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.85)}
.hpw-note{margin:12px 0 0;font-size:13px;color:var(--hpw-muted)}
.hpw-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--hpw-tint)!important;text-decoration:none}
.hpw-link:hover{text-decoration:underline}
.hpw-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--hpw-tint)!important;text-decoration:none;font-weight:600;font-size:15px;animation:hpw-rise .6s var(--hpw-out) both}
.hpw-back svg,.hpw-arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .36s var(--hpw-spring)}
.hpw-back:hover svg{transform:translateX(-4px)}
.hpw-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;background:#2a6cbd;color:#fff!important;text-decoration:none;font-weight:700;transition:transform .16s,box-shadow .36s;box-shadow:0 8px 22px rgba(42,108,189,.35)}
.hpw-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(42,108,189,.45)}
.hpw-btn:active{transform:scale(.97)}
.hpw-root :focus-visible{outline:3px solid #6aa8ee;outline-offset:3px;border-radius:12px}

/* ---------- three doors ---------- */
.hpw-doors-wrap{padding-top:8px!important}
.hpw-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.hpw-door{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;padding:28px;border-radius:28px;overflow:hidden;text-decoration:none!important;
  animation:hpw-rise .9s var(--hpw-out) both;animation-delay:calc(.15s + var(--i,0)*.12s);
  transition:transform .55s var(--hpw-out),box-shadow .55s var(--hpw-out);box-shadow:var(--hpw-shadow)}
.hpw-door:hover{transform:perspective(900px) translateY(-8px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.012);box-shadow:var(--hpw-shadow-up)}
.hpw-door:active{transform:translateY(-2px) scale(.99)}
.hpw-door__scene{position:absolute;inset:0 0 auto 0;height:56%;z-index:-1;display:grid;place-items:center}
.hpw-door__scene svg{width:86%;height:auto;overflow:visible}
.hpw-door__k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.88}
.hpw-door__t{margin-top:8px;font-family:Lora,Georgia,serif;font-style:italic;font-size:34px;line-height:1.1}
.hpw-door__d{margin-top:10px;font-size:1rem;line-height:1.5;opacity:.94}
.hpw-door__go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:700}
.hpw-door:hover .hpw-arrow{transform:translateX(6px)}
.hpw-door .d-ln{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;animation:hpw-draw 1.5s var(--hpw-out) both .5s}
.hpw-door--hpw{background:linear-gradient(160deg,#3d86d8 0%,#2a63ad 55%,#1d467e 100%);color:#fff!important}
.hpw-door--hpw .d-ln{stroke:#fff}.hpw-door--hpw .d-soft{fill:rgba(255,255,255,.45)}.hpw-door--hpw .d-mid{fill:rgba(255,255,255,.42)}.hpw-door--hpw .d-full{fill:#fff}
.hpw-door--hpw .d-dash{fill:none;stroke:#fff;stroke-width:1.8;stroke-dasharray:4 4}
.hpw-orbit{transform-origin:150px 90px;animation:hpw-orbit 22s linear infinite}
.hpw-door--hpw:hover .hpw-orbit{animation-duration:6s}
.hpw-breathe{transform-origin:204px 90px;transform-box:view-box}
.hpw-door:hover .hpw-breathe{animation:hpw-breathe 1.6s ease-in-out infinite}
.hpw-door--persp{background:linear-gradient(165deg,#fde4ec 0%,#e6f0fb 52%,#c8f2ea 100%);color:#13213a!important}
.hpw-door--persp .d-ln{stroke:#2a5ea8}.hpw-door--persp .p-core{fill:#2a5ea8}.p-a{fill:#ef8fa7}.p-b{fill:#5fbfa8}.p-c{fill:#7fa9e6}.p-d{fill:#efbe5a}
.hpw-door--persp .hpw-door__go{color:#1f4f91}
.hpw-float{animation:hpw-float 4.5s ease-in-out infinite}
.hpw-door--essays{background:linear-gradient(170deg,#f6eedc 0%,#e7d9bd 100%);color:#2b2418!important}
.hpw-door--essays .hpw-door__go{color:#6b4f1c}
.e-1{fill:#fffaf0;stroke:#c9b48a;stroke-width:1}.e-2{fill:#ecdfc3}.e-3{fill:#d8c8a6}.hpw-door--essays .e-ln{stroke:#8a7550;stroke-width:2}
.hpw-page{transition:transform .6s var(--hpw-out);transform-box:view-box;transform-origin:150px 150px}
.hpw-door:hover .hpw-page--2{transform:translate(10px,-8px) rotate(4deg)}
.hpw-door:hover .hpw-page--3{transform:translate(20px,-14px) rotate(8deg)}
.hpw-boundy{display:flex;align-items:center;gap:16px;max-width:660px;margin:36px auto 0;padding:14px 22px 14px 14px;border-radius:999px;border:1px solid var(--hpw-line);background:var(--hpw-card);color:var(--hpw-ink);text-align:left;font:inherit;cursor:pointer;box-shadow:var(--hpw-shadow);
  animation:hpw-rise .9s var(--hpw-out) both .6s;transition:transform .36s var(--hpw-out),box-shadow .36s}
.hpw-boundy:hover{transform:translateY(-3px);box-shadow:var(--hpw-shadow-up)}
.hpw-boundy b{display:block}.hpw-boundy span span{font-size:14px;color:var(--hpw-muted)}
.hpw-boundy__face svg{width:48px;height:48px;display:block}
.b-body{fill:#cfe6ff}.b-eye{fill:#13213a}.b-smile{fill:none;stroke:#13213a;stroke-width:2;stroke-linecap:round}
.hpw-boundy:hover .hpw-boundy__face{animation:hpw-breathe 1.2s ease-in-out infinite}

/* sub pages (Perspectives, Essays) */
.hpw-sub .products-page__inner{padding-bottom:0}
.hpw-sub .hpw-h1,.hpw-sub .hpw-lead{animation:hpw-rise .7s var(--hpw-out) both .05s}

/* ---------- How people work ---------- */
.hpw-hero,.hpw-ihero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-top:8px;padding:clamp(26px,4vw,44px);border-radius:28px;color:#fff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--la,#317fd8) 72%,#0f2b55) 0%,var(--la,#317fd8) 58%,color-mix(in srgb,var(--la,#317fd8) 70%,#fff) 100%);
  box-shadow:0 22px 54px color-mix(in srgb,var(--la,#317fd8) 32%,transparent);animation:hpw-rise .8s var(--hpw-out) both}
.hpw-list .hpw-hero{--la:#3d86d8}
.hpw-hero__glow{position:absolute;inset:-30%;z-index:-1;background:radial-gradient(40% 40% at 70% 30%,rgba(255,255,255,.28),transparent 70%);animation:hpw-glow 14s ease-in-out infinite;pointer-events:none}
.hpw-hero__text{flex:1 1 420px;min-width:0}
.hpw-hero__lead{margin:12px 0 0;max-width:580px;color:rgba(255,255,255,.93);font-size:1.0625rem}
.hpw-stats{display:flex;gap:clamp(18px,3vw,36px);margin:0}
.hpw-stats div{text-align:center}
.hpw-stats dt{font-family:Lora,Georgia,serif;font-size:42px;line-height:1;font-variant-numeric:tabular-nums}
.hpw-stats dd{margin:6px 0 0;font-size:13px;opacity:.9}

.hpw-search{margin-top:18px}
.hpw-search__box{display:flex;align-items:center;gap:10px;min-height:54px;padding:0 18px;border-radius:18px;background:var(--hpw-card);border:1px solid var(--hpw-line);box-shadow:var(--hpw-shadow);transition:box-shadow .36s,border-color .36s;animation:hpw-rise .7s var(--hpw-out) both .12s}
.hpw-search__box:focus-within{border-color:color-mix(in srgb,#3d86d8 60%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,#3d86d8 18%,transparent),var(--hpw-shadow)}
.hpw-search__box svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--hpw-muted);stroke-width:2;stroke-linecap:round}
.hpw-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--hpw-ink);font:inherit;font-size:1rem;outline:none;min-height:44px}
.hpw-search input::placeholder{color:var(--hpw-muted);opacity:1}
.hpw-chips__l{margin:18px 0 8px;font-size:13px;font-weight:700;color:var(--hpw-muted)}
.hpw-chips{display:flex;flex-wrap:wrap;gap:8px}
.hpw-qchip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--hpw-line);background:var(--hpw-card);color:var(--hpw-ink);font:inherit;font-size:14px;cursor:pointer;
  animation:hpw-rise .6s var(--hpw-out) both;animation-delay:calc(.2s + var(--n,0)*.05s);transition:transform .16s,background .36s,border-color .36s}
.hpw-qchip:hover{border-color:color-mix(in srgb,#3d86d8 50%,transparent);transform:translateY(-1px)}
.hpw-qchip:active{transform:scale(.96)}

.hpw-results{margin-top:22px}
.hpw-results__h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hpw-results__h p{margin:0;color:var(--hpw-ink2)}
.hpw-clear{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--hpw-line);background:transparent;color:var(--hpw-tint);font:inherit;font-weight:600;cursor:pointer}

.hpw-groups{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:22px;border-top:1px solid var(--hpw-line)}
.hpw-gpill{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--hpw-card);border:1px solid var(--hpw-line);color:var(--hpw-ink)!important;text-decoration:none!important;font-weight:600;font-size:14px;transition:color .36s,background .36s,transform .16s}
.hpw-gpill span{color:var(--hpw-muted);font-weight:500;transition:color .36s}
.hpw-gpill:active{transform:scale(.96)}
.hpw-gpill.is-on{background:transparent;border-color:transparent;color:#fff!important}
.hpw-gpill.is-on span{color:rgba(255,255,255,.85)}
.hpw-groups__ink{position:absolute;z-index:0;left:0;top:0;height:44px;border-radius:999px;background:var(--ink-c,#3d86d8);box-shadow:0 8px 20px color-mix(in srgb,var(--ink-c,#3d86d8) 40%,transparent);opacity:0;
  transition:transform .5s var(--hpw-spring),width .5s var(--hpw-spring),background .5s,opacity .3s}
.hpw-js .hpw-groups__ink{opacity:1}
.hpw-js .hpw-gpill.is-on{border-color:transparent}

.hpw-grp{margin-top:34px;scroll-margin-top:96px}
.hpw-grp__intro{margin:0 0 18px;max-width:780px;color:var(--hpw-ink2)}
.hpw-js .hpw-grp{display:none}
.hpw-js .hpw-grp.is-on{display:block}
.hpw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.hpw-card{display:flex;flex-direction:column;gap:12px;padding:12px 12px 16px;border-radius:22px;background:var(--hpw-card);border:1px solid var(--hpw-line);text-decoration:none!important;color:var(--hpw-ink)!important;box-shadow:var(--hpw-shadow);
  transition:transform .45s var(--hpw-out),box-shadow .45s var(--hpw-out)}
.hpw-card:hover{transform:translateY(-5px);box-shadow:var(--hpw-shadow-up)}
.hpw-card:active{transform:translateY(-1px) scale(.985)}
.hpw-in{animation:hpw-rise .7s var(--hpw-out) both;animation-delay:calc(var(--n,0)*.05s)}
.hpw-card__art{display:block;padding:10px 14px;border-radius:15px;background:color-mix(in srgb,var(--la,#317fd8) 11%,var(--hpw-card))}
.hpw-card__t{font-size:1rem;line-height:1.3;padding:0 4px}
.hpw-card__m{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 4px;font-size:12px;color:var(--hpw-muted)}

.hpw-art{display:block;width:100%;height:auto;overflow:visible}
.hpw-art .a1{fill:var(--hpw-a1)}.hpw-art .a2{fill:var(--hpw-a2)}
.hpw-art .ln{fill:none;stroke:var(--hpw-ln);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hpw-art .lnw{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.hpw-art .lnx{fill:none;stroke:var(--hpw-a1);stroke-width:4;stroke-linecap:round}
.hpw-art .dash{fill:none;stroke:var(--hpw-a1);stroke-width:1.6;stroke-dasharray:3 3}
.hpw-art .dashf{fill:none;stroke:var(--hpw-ln);stroke-width:1.6;stroke-dasharray:2 2}
.hpw-in .hpw-art .ln,.hpw-in .hpw-art .lnw,.hpw-in .hpw-art .lnx{stroke-dasharray:160;animation:hpw-draw 1.2s var(--hpw-out) both;animation-delay:calc(.15s + var(--n,0)*.05s)}
.hpw-in .hpw-art .a1,.hpw-in .hpw-art .a2{transform-box:fill-box;transform-origin:center;animation:hpw-pop .7s var(--hpw-spring) both;animation-delay:calc(.1s + var(--n,0)*.05s)}
.hpw-card:hover .hpw-art .a1{transform-box:fill-box;transform-origin:center;transform:scale(1.14);transition:transform .45s var(--hpw-spring)}

.hpw-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(214,150,40,.14);color:#8a5a05}
.hpw-chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.hpw-chip--solid{background:rgba(30,140,90,.13);color:#17704a}
.hpw-chip--lens{background:rgba(66,120,200,.14);color:#2a5ea8}
html.bu-dark .hpw-chip{background:rgba(240,180,60,.16);color:#f2c46b}
html.bu-dark .hpw-chip--solid{background:rgba(70,200,140,.16);color:#7fd6ac}
html.bu-dark .hpw-chip--lens{background:rgba(122,180,242,.16);color:#a9cdf6}

.hpw-bookstrip{display:flex;align-items:center;gap:22px;margin-top:44px;padding:22px 26px;border-radius:24px;background:var(--hpw-card);border:1px solid var(--hpw-line);box-shadow:var(--hpw-shadow);text-decoration:none!important;color:var(--hpw-ink)!important;transition:transform .45s var(--hpw-out),box-shadow .45s}
.hpw-bookstrip:hover{transform:translateY(-4px);box-shadow:var(--hpw-shadow-up)}
.hpw-bookstrip b{display:block;font-family:Lora,Georgia,serif;font-style:italic;font-weight:500;font-size:22px}
.hpw-bookstrip span span{color:var(--hpw-muted);font-size:15px}
.hpw-bookstrip > span:nth-child(2){flex:1}
.hpw-bookstrip__covers{display:flex;flex:none}
.hpw-bookstrip__covers i{display:block;width:38px;height:58px;margin-left:-12px;border-radius:3px 7px 7px 3px;background:var(--bc);box-shadow:inset 4px 0 0 rgba(0,0,0,.22),0 6px 14px rgba(0,0,0,.18);transform:rotate(calc((var(--k) - 2)*4deg));transition:transform .5s var(--hpw-spring)}
.hpw-bookstrip__covers i:first-child{margin-left:0}
.hpw-bookstrip:hover .hpw-bookstrip__covers i{transform:rotate(calc((var(--k) - 2)*8deg)) translateY(calc(var(--k)*-2px))}
.hpw-bookstrip:hover .hpw-arrow{transform:translateX(6px)}
@media (max-width:600px){.hpw-bookstrip{flex-wrap:wrap}}

.hpw-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:36px;padding:26px;border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,#3d86d8 12%,var(--hpw-card)),var(--hpw-card));border:1px solid var(--hpw-line)}
.hpw-ask p{flex:1 1 380px;margin:0;font-family:Lora,Georgia,serif;font-style:italic;font-size:22px;line-height:1.3}

/* ---------- one idea ---------- */
.hpw-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--hpw-muted);animation:hpw-rise .5s var(--hpw-out) both}
.hpw-crumb a{display:inline-flex;align-items:center;min-height:44px;color:var(--hpw-tint)!important;text-decoration:none;font-weight:600}
.hpw-ihero{align-items:center}
.hpw-ihero__text{flex:1 1 440px;min-width:0}
.hpw-ihero__s{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0 0;font-size:13px;color:rgba(255,255,255,.9)}
.hpw-ihero .hpw-chip{background:rgba(255,255,255,.2);color:#fff}
.hpw-ihero__art{flex:0 0 clamp(150px,22vw,240px)}
.hpw-ihero .hpw-art .a1{fill:#fff}.hpw-ihero .hpw-art .a2{fill:rgba(255,255,255,.45)}
.hpw-ihero .hpw-art .ln,.hpw-ihero .hpw-art .dashf{stroke:#fff}.hpw-ihero .hpw-art .dash,.hpw-ihero .hpw-art .lnx{stroke:#fff}
.hpw-ihero .hpw-art .lnw{stroke:color-mix(in srgb,var(--la,#317fd8) 70%,#000)}
.hpw-ihero .hpw-art .ln,.hpw-ihero .hpw-art .lnx{stroke-dasharray:160;animation:hpw-draw 1.4s var(--hpw-out) both .35s}
.hpw-ihero .hpw-art .a1{transform-box:fill-box;transform-origin:center;animation:hpw-pop .8s var(--hpw-spring) both .25s}
@media (max-width:640px){.hpw-ihero__art{flex-basis:120px;order:-1}}

.hpw-box{padding:22px;border-radius:22px;background:var(--hpw-card);border:1px solid var(--hpw-line);box-shadow:var(--hpw-shadow);animation:hpw-rise .7s var(--hpw-out) both;animation-delay:calc(.2s + var(--n,0)*.08s)}
.hpw-box h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:1rem;font-weight:700}
.hpw-box p,.hpw-box ul{margin:0;color:var(--hpw-ink2);line-height:1.6}
.hpw-box ul{padding-left:1.15em}.hpw-box li+li{margin-top:7px}
.hpw-box--idea{margin-top:16px}
.hpw-box--idea p{font-size:1.125rem;color:var(--hpw-ink)}
.hpw-trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:14px}
.hpw-box--mistake{box-shadow:inset 0 -3px 0 #d0704f,var(--hpw-shadow)}
.hpw-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--la,#317fd8) 16%,transparent)}
.hpw-ic::before{content:"";width:18px;height:18px;background:var(--la,#317fd8);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
html.bu-dark .hpw-ic::before{background:color-mix(in srgb,var(--la,#317fd8) 55%,#fff)}
.hpw-ic--idea{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2V16h5v-.1c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}
.hpw-ic--home{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9H4z'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E")}
.hpw-ic--comp{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.hpw-ic--warn{background:rgba(224,120,80,.16)}
.hpw-ic--warn::before{background:#d0704f!important;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 3 20h18z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E")}

.hpw-deep{margin-top:14px;border-radius:20px;background:var(--hpw-card);border:1px solid var(--hpw-line);overflow:hidden}
.hpw-deep summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:56px;padding:6px 22px;cursor:pointer;list-style:none}
.hpw-deep summary::-webkit-details-marker{display:none}
.hpw-deep summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2px solid var(--hpw-muted);border-bottom:2px solid var(--hpw-muted);transform:rotate(45deg);transition:transform .36s var(--hpw-spring)}
.hpw-deep[open] summary::after{transform:rotate(225deg)}
.hpw-deep summary span{font-size:14px;color:var(--hpw-muted)}
.hpw-deep__body,.hpw-refs ul{padding:0 22px 20px;color:var(--hpw-ink2);line-height:1.6}
.hpw-deep__body p{margin:0}
.hpw-refs ul{padding-left:40px;font-size:14px}.hpw-refs li+li{margin-top:6px}
.hpw-deep[open] .hpw-deep__body,.hpw-deep[open] ul{animation:hpw-rise .45s var(--hpw-out) both}

.hpw-panel{margin-top:30px;padding:24px;border-radius:24px;background:var(--hpw-card);border:1px solid var(--hpw-line)}
.hpw-panel--plain{background:transparent;border:0;padding:0}
.hpw-vids{display:flex;flex-direction:column;gap:10px}
.hpw-vid{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 12px;border-radius:16px;background:var(--hpw-card2);text-decoration:none!important;color:var(--hpw-ink)!important;transition:transform .36s var(--hpw-out),background .36s}
.hpw-vid:hover{transform:translateX(4px)}
.hpw-vid b{display:block;font-size:15px}.hpw-vid small{font-size:13px;color:var(--hpw-muted)}
.hpw-vid__play{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#e23b2e;transition:transform .36s var(--hpw-spring)}
.hpw-vid:hover .hpw-vid__play{transform:scale(1.12)}
.hpw-vid__play svg{width:16px;height:16px;fill:#fff}

.hpw-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.hpw-book{display:flex;gap:16px;padding:14px;border-radius:20px;background:var(--hpw-card);border:1px solid var(--hpw-line);box-shadow:var(--hpw-shadow)}
.hpw-bookspage .hpw-book{animation:hpw-rise .6s var(--hpw-out) both;animation-delay:calc(var(--n,0)*.04s)}
.hpw-book__cover{flex:none;display:flex;flex-direction:column;justify-content:space-between;width:78px;height:112px;padding:9px 8px;box-sizing:border-box;border-radius:4px 9px 9px 4px;color:#fff;
  background:linear-gradient(160deg,var(--bc),color-mix(in srgb,var(--bc) 62%,#000));box-shadow:inset 5px 0 0 rgba(0,0,0,.22),0 10px 20px rgba(0,0,0,.2);transform:rotate(-2deg);transition:transform .5s var(--hpw-spring)}
.hpw-book:hover .hpw-book__cover{transform:rotate(0) translateY(-4px)}
.hpw-book__cover b{font-family:Lora,Georgia,serif;font-size:10.5px;line-height:1.2;font-weight:600}
.hpw-book__cover i{font-style:normal;font-size:9px;opacity:.85}
.hpw-book__t{display:block}.hpw-book__a{display:block;font-size:13px;color:var(--hpw-muted)}
.hpw-book p{margin:6px 0 0;font-size:14px;color:var(--hpw-ink2);line-height:1.5}

.hpw-pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.hpw-pn__a{display:flex;flex-direction:column;gap:2px;min-height:64px;justify-content:center;padding:12px 18px;border-radius:18px;background:var(--hpw-card);border:1px solid var(--hpw-line);text-decoration:none!important;color:var(--hpw-ink)!important;transition:transform .36s var(--hpw-out)}
.hpw-pn__a small{color:var(--hpw-muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.hpw-pn__a--next{text-align:right;grid-column:2}
.hpw-pn__a--prev:hover{transform:translateX(-4px)}.hpw-pn__a--next:hover{transform:translateX(4px)}
@media (max-width:600px){.hpw-pn{grid-template-columns:1fr}.hpw-pn__a--next{grid-column:1}}

/* moving between Learn pages: the hero card and each idea's drawing and title travel to the next page */
::view-transition-group(hpw-hero){animation-duration:.55s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-group(*){animation-timing-function:cubic-bezier(.32,.72,0,1)}

/* light that follows the pointer on a door */
.hpw-door::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.22),transparent 60%)}
.hpw-door:hover::after{opacity:1}
/* parts of the idea page wait below the fold, then rise */
.hpw-wait{opacity:0}
.hpw-wait.hpw-in{opacity:1}
/* while a search shows results, the groups step back */
.hpw-searching .hpw-groups,.hpw-searching .hpw-grp.is-on{opacity:.35;transition:opacity .4s}
.hpw-searching .hpw-groups:hover,.hpw-searching .hpw-grp.is-on:hover{opacity:1}
.hpw-results{view-transition-name:hpw-results}

@media (prefers-reduced-motion: reduce){
  .hpw-wait{opacity:1!important}
  .hpw-root *,.hpw-root{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* drawings stay inside their tile */
.hpw-art{overflow:hidden}
.hpw-card__art{overflow:hidden}

/* link from the website to the Bounded Learn app */
.hpw-applink-row{position:relative;z-index:1;flex:0 0 100%;display:block}
.hpw-applink{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:44px;padding:0 18px 0 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff!important;text-decoration:none!important;font-weight:600;font-size:14px;transition:background .3s,transform .3s var(--hpw-out)}
.hpw-applink:hover{background:rgba(255,255,255,.26);transform:translateY(-2px)}
.hpw-applink svg{width:24px;height:24px;fill:#fff}
.hpw-hero{flex-wrap:wrap}

/* for parents first (27 Oct 2026): quieter science groups, what to try beside the common mistake, the science folded */
.hpw-gsep{flex-basis:100%;margin:10px 0 2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hpw-muted)}
.hpw-gpill--deep{background:transparent;border-style:dashed}
.hpw-duo{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important}
.hpw-comp{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px;padding:14px 18px;min-height:64px;border-radius:20px;background:var(--hpw-card2);color:var(--hpw-ink)!important;text-decoration:none!important;transition:transform .36s var(--hpw-out)}
.hpw-comp:hover{transform:translateY(-2px)}
.hpw-comp span:not(.hpw-ic){flex:1 1 220px;color:var(--hpw-ink2)}
.hpw-comp b{color:var(--hpw-tint)}
.hpw-science{margin-top:22px}
.hpw-science h3{margin:18px 0 6px;font-size:15px;color:var(--hpw-ink)}
.hpw-science h3:first-child{margin-top:0}
.hpw-card{justify-content:flex-start}

/* Ko-fi line (27 Oct 2026, English pages only) */
.bu-kofi{margin:28px 0 0;font-size:15px;color:var(--hpw-muted,#566275)}
.bu-kofi a{color:var(--hpw-tint,#235ea8);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.bu-kofi a:hover{text-decoration-thickness:2px}
.bu-kofi--essays{text-align:center;margin:8px auto 40px;max-width:1100px;padding:0 16px}

/* book covers: the words stay on the cover (28 Oct 2026) */
.hpw-book__cover{overflow:hidden}
.hpw-book__cover b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;overflow-wrap:anywhere;hyphens:auto;font-size:10px;line-height:1.18}
.hpw-book__cover i{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
.hpw-book > div{min-width:0}
.hpw-book__t{overflow-wrap:anywhere}

/* start here: plain reads, podcasts and short videos before the books (28 Oct 2026) */
.hpw-sub{margin:22px 0 2px;font-size:17px;font-weight:700;color:var(--hpw-ink)}
.hpw-panel .hpw-sub:first-of-type{margin-top:6px}
.hpw-subl{margin:0 0 12px;font-size:14px;color:var(--hpw-muted)}
.hpw-reads{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.hpw-read{display:flex;align-items:flex-start;gap:14px;min-height:64px;padding:14px 16px;border-radius:18px;background:var(--hpw-card);border:1px solid var(--hpw-line);box-shadow:var(--hpw-shadow);text-decoration:none!important;color:var(--hpw-ink)!important;transition:transform .36s var(--hpw-out),box-shadow .36s}
.hpw-read:hover{transform:translateY(-3px);box-shadow:var(--hpw-shadow-up)}
.hpw-read__k{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--la,#317fd8) 14%,transparent);color:var(--la,#317fd8)}
html.bu-dark .hpw-read__k{color:color-mix(in srgb,var(--la,#317fd8) 55%,#fff)}
.hpw-read__k svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.hpw-read__k--video svg{fill:currentColor;stroke:none}
.hpw-read__b{display:flex;flex-direction:column;gap:2px;min-width:0}
.hpw-read__b b{font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.hpw-read__b small{font-size:12.5px;color:var(--hpw-muted);line-height:1.35}
.hpw-read__lab{text-transform:uppercase;letter-spacing:.07em;font-weight:700;font-size:11px!important;color:var(--la,#317fd8)!important}
html.bu-dark .hpw-read__lab{color:color-mix(in srgb,var(--la,#317fd8) 55%,#fff)!important}
.hpw-bookspage .hpw-h2{margin-top:30px}

/* In short, at the top of each idea */
.hpw-gist{margin:18px 0;padding:16px 20px;border-radius:18px;background:color-mix(in srgb,var(--hpw-tint,#2f74c9) 9%,transparent);border:1px solid color-mix(in srgb,var(--hpw-tint,#2f74c9) 22%,transparent);font-size:1.08rem;line-height:1.55}
.hpw-gist b{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;color:var(--hpw-tint,#2f74c9)}