/* Hyper Nexus · Humans × Super Intelligence: co-evolution — v9 (p300, 2026-10-25). A precise, information-dense film for peers. */
.cf9{position:relative;margin-top:clamp(18px,3vh,34px);--ink:#0B0D17;--vi:#5B5BFF;--or:#FF6A3D}
.cf9-stage{position:relative;aspect-ratio:16/9;width:100%;border-radius:clamp(12px,1.2vw,20px);overflow:hidden;color:var(--ink);isolation:isolate;box-shadow:0 30px 80px -50px rgba(20,24,60,.45),0 0 0 1px rgba(11,13,23,.08);
  background:radial-gradient(120% 90% at 70% 40%,rgba(91,91,255,.07),transparent 60%),repeating-linear-gradient(0deg,rgba(11,13,23,.045) 0 1px,transparent 1px 100%),repeating-linear-gradient(90deg,rgba(11,13,23,.045) 0 1px,transparent 1px 100%),#F6F7FB;background-size:auto,2.5% 4.444%,2.5% 4.444%,auto}
.cf9-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.cf9-gl{opacity:0;transition:opacity .8s}
.cf9-k{position:absolute;inset:0;z-index:3;pointer-events:none}
.cf9-k .p{position:absolute;left:6%;margin:0;opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(.25em);filter:blur(4px);letter-spacing:.06em;transition:opacity .45s,clip-path .8s cubic-bezier(.65,0,.35,1),transform .8s cubic-bezier(.16,1,.3,1),filter .6s,letter-spacing .9s cubic-bezier(.16,1,.3,1)}
.cf9-k .p.on{opacity:1;clip-path:inset(0 0 0 0);transform:none;filter:none;letter-spacing:-.01em}
.cf9-k em{font-style:normal;color:var(--vi)}
.cf9-k .p-tag{top:14.5%;font:700 clamp(9px,.9vw,16px)/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.14em;color:var(--vi);text-transform:uppercase}
.cf9-k .p-h{top:12.5%;font-weight:850;font-size:clamp(17px,2.3vw,44px);letter-spacing:.02em}
.cf9-k .p-big{top:34%;font-weight:900;font-size:clamp(28px,5.4vw,104px);line-height:1;letter-spacing:-.03em}
.cf9-k .p-sub{top:52%;font-weight:700;font-size:clamp(14px,1.9vw,36px);color:#4A5068}
.cf9-k .p-w{top:15%;font-weight:900;font-size:clamp(30px,5.6vw,108px);letter-spacing:-.02em;translate:-50% 0}
.cf9[data-viz="thesis"] .p-w:nth-child(1){left:24%;color:var(--or)}.cf9[data-viz="thesis"] .p-w:nth-child(2){left:50%}.cf9[data-viz="thesis"] .p-w:nth-child(3){left:76%;color:var(--vi)}
.cf9[data-viz="thesis"] .p-sub{top:84%;left:50%;translate:-50% 0;font-size:clamp(16px,2.4vw,46px);color:var(--ink)}
.cf9[data-viz="compute"] .p-big{top:28%;left:65%;color:var(--vi);font-size:clamp(26px,4.4vw,84px)}.cf9[data-viz="compute"] .p-sub{top:41%;left:65%;font-size:clamp(12px,1.5vw,28px)}
.cf9[data-viz="cost"] .p-big{top:28%;left:64%;color:#12B886;font-size:clamp(30px,6vw,116px)}.cf9[data-viz="cost"] .p-sub{top:43%;left:64%;font-size:clamp(12px,1.5vw,28px)}
.cf9[data-viz="jagged"] .p-sub{top:74%;font-size:clamp(13px,1.7vw,32px)}.cf9[data-viz="jagged"] .p-big{top:81%;font-size:clamp(18px,3vw,58px)}
.cf9[data-viz="embodied"] .p-sub,.cf9[data-viz="stack"] .p-sub{top:20%;font-size:clamp(11px,1.2vw,22px);color:var(--vi)}
.cf9[data-viz="laws"] .p-big{top:84%;font-size:clamp(18px,3vw,56px);left:50%;translate:-50% 0}
.cf9[data-viz="finale"] .p-big{top:13%;left:50%;translate:-50% 0;white-space:nowrap;font-size:clamp(26px,4.6vw,88px)}.cf9[data-viz="finale"] .p-sub{top:27%;left:50%;translate:-50% 0;white-space:nowrap;font-size:clamp(12px,1.6vw,30px)}
.cf9[data-viz="open"] .p-big{top:27%}.cf9[data-viz="open"] .p-sub{top:43%;font-size:clamp(20px,3vw,58px);color:var(--ink);font-weight:900}.cf9[data-viz="open"] .p-sub2{top:54%;font-size:clamp(18px,2.6vw,50px);color:var(--vi);font-weight:850}.cf9[data-viz="open"] .p-sub3{top:64%;font-size:clamp(14px,1.9vw,36px);color:#4A5068;font-weight:800}
.cf9-k .p-sub2,.cf9-k .p-sub3{font-weight:800}.cf9[data-viz="revere"] .p-sub{top:20%;font-size:clamp(11px,1.3vw,24px);color:var(--vi)}
.cf9:not(.sound) .cf9-pp{display:none}
.cf9-end{position:absolute;left:0;right:0;bottom:16%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,.8vw,12px);opacity:0;transform:translateY(12px);transition:opacity 1s,transform 1.2s cubic-bezier(.16,1,.3,1);pointer-events:none}
.cf9-end.on{opacity:1;transform:none}
.cf9-end img{width:clamp(44px,5vw,96px);height:auto}
.cf9-end b{font-weight:900;font-size:clamp(20px,3.2vw,62px);letter-spacing:.02em}
.cf9-end span{font:700 clamp(10px,1vw,18px)/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.34em;color:#4A5068}
.cf9-big{position:absolute;right:3%;bottom:12%;z-index:6;display:inline-flex;align-items:center;gap:10px;padding:clamp(10px,1vw,14px) clamp(16px,1.5vw,24px);border-radius:999px;border:0;background:#0B0D17;color:#fff;font:700 clamp(13px,1.05vw,18px)/1 inherit;cursor:pointer;box-shadow:0 14px 30px -16px rgba(11,13,23,.7);transition:opacity .4s}
.cf9-big svg{width:16px;height:16px}.cf9-big.gone{opacity:0;pointer-events:none}.cf9-big.prep{cursor:progress}.cf9-big.prep svg{animation:cf9Spin 1s linear infinite}
.cf9-ctl{display:flex;align-items:center;gap:clamp(8px,1vw,14px);margin-top:14px;flex-wrap:wrap}
.cf9-pp,.cf9-fs{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:0;background:#0B0D17;color:#fff;font:700 15px/1 inherit;cursor:pointer}
html[data-theme="dark"] .cf9-pp,html[data-theme="dark"] .cf9-fs{background:#fff;color:#0B0D17}
.cf9-fs{padding:10px 12px}.cf9-pp svg,.cf9-fs svg{width:16px;height:16px}
.cf9-ch{display:flex;gap:6px;flex-wrap:wrap}
.cf9-ch button{padding:7px 11px;border-radius:999px;border:1px solid rgba(11,13,23,.14);background:transparent;color:inherit;font:650 12.5px/1 inherit;cursor:pointer;opacity:.75}
html[data-theme="dark"] .cf9-ch button{border-color:rgba(255,255,255,.18)}
.cf9-ch button[aria-current="true"]{opacity:1;border-color:#5B5BFF;background:#5B5BFF;color:#fff}
.cf9-prog{flex:1;min-width:120px;height:4px;border-radius:4px;background:rgba(11,13,23,.1);overflow:hidden;cursor:pointer}
html[data-theme="dark"] .cf9-prog{background:rgba(255,255,255,.14)}
.cf9-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#FF6A3D,#5B5BFF)}
.cf9:fullscreen{background:#F6F7FB;display:flex;flex-direction:column;justify-content:center}
.cf9:fullscreen .cf9-stage{width:100vw;max-height:100vh;height:auto;border-radius:0}
.cf9:fullscreen .cf9-ctl{position:absolute;left:24px;right:24px;bottom:18px;opacity:0;transition:opacity .4s}.cf9:fullscreen:hover .cf9-ctl{opacity:1}
@keyframes cf9Spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cf9-k .p,.cf9-end{transition:none}}
@media (max-width:640px){.cf9-ch{display:none}}

/* p306 */
.cf9:fullscreen .cf9-prog{display:none}
.cf9[data-viz="stack"] .p-big{top:21.5%;font-size:clamp(18px,2.6vw,50px);color:var(--vi)}.cf9[data-viz="stack"] .p-sub{top:31%}
.cf9[data-viz="finale"] .p-big{top:15%;font-size:clamp(28px,5vw,96px)}

/* p307: colour, type and motion */
.cf9{--acc:#5B5BFF}
.cf9-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 55% at 80% 28%,var(--acc),transparent 72%);opacity:.09;transition:opacity .6s}
.cf9-k em{color:var(--acc)}
.cf9-k .p-h{padding-left:.55em}.cf9-k .p-h::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:.18em;border-radius:.1em;background:var(--acc);transform:scaleY(0);transform-origin:top;transition:transform .7s cubic-bezier(.16,1,.3,1) .15s}.cf9-k .p-h.on::before{transform:scaleY(1)}
.cf9-k .p-big{background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 38%,var(--acc) 50%,var(--ink) 62%,var(--ink) 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.cf9-k .p-big.on{animation:cf9Pop .9s cubic-bezier(.16,1,.3,1) both,cf9Shine 2.6s ease-in-out .9s 1 both}
.cf9-k .p-big em{-webkit-text-fill-color:var(--acc)}
.cf9-k .p-sub,.cf9-k .p-sub2{background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 .09em no-repeat;transition:opacity .45s,clip-path .8s cubic-bezier(.65,0,.35,1),transform .8s cubic-bezier(.16,1,.3,1),filter .6s,letter-spacing .9s cubic-bezier(.16,1,.3,1),background-size 1s cubic-bezier(.16,1,.3,1) .35s}
.cf9-k .p-sub.on,.cf9-k .p-sub2.on{background-size:100% .09em}
.cf9-k .p-w.on{animation:cf9Pop .8s cubic-bezier(.16,1,.3,1) both}
.cf9[data-viz="revere"] .cf9-k .p-h,.cf9[data-viz="revere"] .cf9-k .p-sub,.cf9[data-viz="finale"] .cf9-k .p-big,.cf9-end b,.cf9-chap{font-family:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","Noto Serif CJK SC",Georgia,serif}
.cf9[data-viz="finale"] .cf9-k .p-big{font-weight:700;letter-spacing:.12em}
.cf9[data-viz="strength"] .p-big{top:76%;left:58%;font-size:clamp(15px,2.1vw,40px)}
.cf9-chap{position:absolute;left:0;right:0;top:50%;z-index:5;text-align:center;font-weight:800;font-size:clamp(40px,9vw,170px);letter-spacing:.12em;color:transparent;-webkit-text-stroke:2px var(--acc);opacity:0;transform:translate(-8%,-50%) scale(1.05);pointer-events:none;white-space:nowrap}
.cf9-chap.on{animation:cf9Chap 1.25s cubic-bezier(.16,1,.3,1) both}
@keyframes cf9Pop{0%{opacity:0;transform:scale(1.14);filter:blur(10px)}55%{opacity:1;transform:scale(.985);filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes cf9Shine{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes cf9Chap{0%{opacity:0;transform:translate(-10%,-50%) scale(1.06)}30%{opacity:.9;transform:translate(0,-50%) scale(1)}70%{opacity:.75;transform:translate(2%,-50%) scale(1)}100%{opacity:0;transform:translate(10%,-50%) scale(.98)}}
@media (prefers-reduced-motion:reduce){.cf9-k .p-big.on,.cf9-k .p-w.on,.cf9-chap.on{animation:none}.cf9-chap{display:none}}

/* p309 */
.cf9-chap{font-size:clamp(30px,6.2vw,118px);letter-spacing:.06em}
.cf9[data-viz="open"] .p-sub{font-size:clamp(20px,3.1vw,60px)}

/* 2026-10-26 (p327): the film's right-click menu, share bar, toast and recording pill */
.cf9-menu{position:fixed;z-index:2147483000;min-width:230px;padding:6px;border-radius:12px;background:rgba(255,255,255,.96);border:1px solid rgba(17,24,39,.1);box-shadow:0 18px 48px rgba(15,23,42,.22);backdrop-filter:blur(12px)}
.cf9-menu button{display:block;width:100%;text-align:start;font:500 14px/1.3 system-ui,-apple-system,"PingFang SC",sans-serif;padding:9px 12px;border:0;border-radius:8px;background:none;color:#111827;cursor:pointer}
.cf9-menu button:hover,.cf9-menu button:focus-visible{background:rgba(109,91,255,.1);outline:none}
.cf9-share{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 6px}
.cf9-share button{font:600 14px/1 system-ui,-apple-system,"PingFang SC",sans-serif;padding:11px 18px;border-radius:999px;border:1px solid rgba(17,24,39,.14);background:#fff;color:#111827;cursor:pointer}
.cf9-share button[data-act="save"]{background:#111827;color:#fff;border-color:#111827}
.cf9-toast{position:fixed;left:50%;bottom:28px;z-index:2147483001;transform:translate(-50%,12px);opacity:0;transition:.25s;padding:10px 16px;border-radius:999px;background:#111827;color:#fff;font:500 14px/1.3 system-ui,sans-serif;max-width:min(92vw,640px);text-align:center}
.cf9-toast.on{opacity:1;transform:translate(-50%,0)}
.cf9-rec{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:2147483001;padding:9px 16px;border-radius:999px;border:0;background:#E5484D;color:#fff;font:600 13px/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(229,72,77,.35)}
@media (prefers-color-scheme:dark){.cf9-menu{background:rgba(28,28,30,.96);border-color:rgba(255,255,255,.12)}.cf9-menu button{color:#F5F5F7}.cf9-share button{background:#1C1C1E;color:#F5F5F7;border-color:rgba(255,255,255,.16)}.cf9-share button[data-act="save"]{background:#F5F5F7;color:#111}}

/* 2026-10-26 (p333): handwriting for the emphasis lines and the finale, written stroke by stroke; younger colours */
@font-face{font-family:"HN Hand";src:url(/assets/v2/fonts/hn-hand-zh.65ad459433.woff2) format("woff2");unicode-range:U+3000-303F,U+3400-9FFF,U+FF00-FFEF,U+00B7;font-display:swap}
@font-face{font-family:"HN Hand";src:url(/assets/v2/fonts/hn-hand-lat.a59247948a.woff2) format("woff2");unicode-range:U+0020-024F,U+0300-036F,U+0400-04FF,U+1E00-1EFF,U+2010-2044;font-display:swap}
.cf9-k .p-sub2,.cf9-k .p-sub3,.cf9[data-viz="finale"] .cf9-k .p-big{font-family:"HN Hand","Kaiti SC","STKaiti",system-ui,sans-serif;font-weight:600;letter-spacing:.01em;clip-path:none;-webkit-mask-image:linear-gradient(100deg,#000 0 44%,transparent 56% 100%);mask-image:linear-gradient(100deg,#000 0 44%,transparent 56% 100%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;transition:opacity .3s,-webkit-mask-position 1.9s cubic-bezier(.45,.05,.35,1),mask-position 1.9s cubic-bezier(.45,.05,.35,1),transform .9s cubic-bezier(.16,1,.3,1),filter .5s,background-size 1.2s .5s cubic-bezier(.16,1,.3,1)}
.cf9-k .p-sub2.on, .cf9-k .p-sub3.on, .cf9[data-viz="finale"] .cf9-k .p-big.on{-webkit-mask-position:0 0;mask-position:0 0}
.cf9-k .p-sub2,.cf9-k .p-sub3{transform:rotate(-1.2deg) translateY(.2em);background:linear-gradient(100deg,rgba(255,206,84,.62),rgba(255,138,101,.5) 55%,rgba(72,219,198,.5)) 0 86%/0 .38em no-repeat;padding:0 .12em;border-radius:.2em}
.cf9-k .p-sub2.on,.cf9-k .p-sub3.on{transform:rotate(-1.2deg);background-size:100% .38em}
.cf9-k em{background:linear-gradient(92deg,#6D5BFF,#E254FF 48%,#FF7A59);-webkit-background-clip:text;background-clip:text;color:transparent}

/* 2026-10-26 (p335): aurora colours, a clean loading cover, livelier handwriting, an inviting sound button */
.cf9-stage::before{content:"";position:absolute;inset:-25%;z-index:2;mix-blend-mode:multiply;opacity:.9;pointer-events:none;background:radial-gradient(38% 46% at 14% 18%,rgba(109,91,255,.30),transparent 62%),radial-gradient(34% 42% at 86% 22%,rgba(255,95,160,.24),transparent 62%),radial-gradient(40% 48% at 72% 86%,rgba(40,214,190,.24),transparent 62%),radial-gradient(30% 38% at 24% 88%,rgba(255,190,60,.22),transparent 62%);filter:blur(6px) saturate(1.15);animation:cf9aur 22s ease-in-out infinite alternate}
@keyframes cf9aur{0%{transform:translate3d(-3%,-2%,0) rotate(0deg) scale(1)}50%{transform:translate3d(3%,2%,0) rotate(8deg) scale(1.06)}100%{transform:translate3d(-2%,3%,0) rotate(-6deg) scale(1.02)}}
.cf9-cover{position:absolute;inset:0;z-index:40;background:#F4F1FF center/cover no-repeat;display:grid;place-items:center;transition:opacity .8s ease,filter .8s ease;pointer-events:none}
.cf9-cover i{width:46px;height:46px;border-radius:50%;background:conic-gradient(from 0deg,#6D5BFF,#FF5FA0,#FFB84D,#28D6BE,#6D5BFF);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:cf9spin 1s linear infinite;opacity:.9;margin-top:22%}
.cf9-cover.gone{opacity:0;filter:blur(8px)}
@keyframes cf9spin{to{transform:rotate(360deg)}}
.cf9-k .p-sub2.hw-go,.cf9-k .p-sub3.hw-go{-webkit-mask-image:none;mask-image:none}
.cf9-k .hw-c{display:inline-block;opacity:0;will-change:transform,opacity}
.cf9-k .hw-go .hw-c{animation:cf9hw .75s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(var(--i) * .11s)}
@keyframes cf9hw{0%{opacity:0;color:transparent;-webkit-text-stroke:1.5px #6D5BFF;transform:translateY(.1em) rotate(-7deg) scale(1.28);filter:blur(1.2px)}45%{opacity:1;color:transparent;-webkit-text-stroke:1.5px #E254FF;filter:blur(0)}75%{color:inherit;-webkit-text-stroke:.6px rgba(226,84,255,.5);transform:rotate(1deg) scale(1.04)}100%{opacity:1;color:inherit;-webkit-text-stroke:0 transparent;transform:none}}
.cf9-pen{position:absolute;z-index:8;width:14px;height:14px;margin:-7px 0 0 -2px;border-radius:50%;background:radial-gradient(circle,#fff 0 22%,#FF7A59 48%,rgba(255,122,89,0) 72%);box-shadow:0 0 18px 6px rgba(255,122,89,.5);pointer-events:none;transition:left .1s linear,top .1s linear,opacity .4s}
.cf9-pen.gone{opacity:0}
.cf9 .cf9-pp{animation:cf9inv 2.8s ease-in-out infinite}
@keyframes cf9inv{0%,100%{box-shadow:0 8px 24px rgba(17,24,39,.18),0 0 0 0 rgba(109,91,255,.0)}50%{box-shadow:0 8px 24px rgba(17,24,39,.18),0 0 0 8px rgba(109,91,255,.18)}}
@media (prefers-reduced-motion:reduce){.cf9-stage::before,.cf9 .cf9-pp,.cf9-cover i{animation:none}}