/* Shared header: the same alignment and controls in both themes. */
:root { --header-height:80px; --page-gutter:36px; --page-width:1440px; --accent-ink:#e50056; }
html[data-theme="dark"] { --accent-ink:var(--lime); }
html[data-theme="light"] { color-scheme:light; }
html body > header {
 height:var(--header-height); padding:0 max(var(--page-gutter),calc((100vw - var(--page-width))/2));
 gap:24px; background:color-mix(in srgb,var(--paper) 94%,transparent);
 border-bottom:1px solid var(--line); box-shadow:none;
 transition:background .2s,border-color .2s;
}
header .logo { gap:14px; flex-shrink:0; }
header .logo img.han-logo { height:32px !important; }
header .logo-title-link { padding-left:14px; }
header .logo h1 { font-size:23px; letter-spacing:-.8px; }
header .logo-subline { font-size:8px; letter-spacing:1.2px; }
header .nav-menu { gap:16px; }
header .nav-links { gap:4px; }
header .nav-link {
 min-height:44px; padding:10px 14px; font-size:13px; font-weight:500;
 color:var(--muted); border-radius:8px; white-space:nowrap;
 transition:background .2s,color .2s;
}
header .nav-link:hover, header .nav-link.active { background:var(--surface); color:var(--ink); }
header .nav-link.active { font-weight:600; }
header .nav-link.active::after { display:none; }
header .nav-link[data-page="contact"] { margin-left:12px; padding-inline:18px; background:var(--lime); color:#252525; }
header .nav-link[data-page="contact"]:hover { background:#e50056; }
header .theme-switch, header .mobile-menu-toggle {
 width:44px; min-width:44px; height:44px; padding:10px; border:1px solid var(--line);
 border-radius:10px; background:transparent; color:var(--ink); animation:none;
}
header .theme-switch:hover, header .mobile-menu-toggle:hover { background:var(--surface); }
header .theme-switch:hover svg { color:inherit; transform:none; }
header .theme-switch:focus:not(:focus-visible) { outline:none; }
header .theme-switch:focus-visible { outline:3px solid var(--pink); outline-offset:4px; }
header .theme-switch svg { width:19px; height:19px; }
html[data-page="discover"] main, html[data-page="radar"] main { padding-top:var(--header-height); }
.discovery-shell { width:min(var(--page-width),calc(100% - var(--page-gutter)*2)); }
html .story-sticky { top:var(--header-height); }
#page-discover > .discovery-shell:first-child { padding-top:24px; }

/* The opening follows the page theme; the graph has its own dark palette. */
html[data-page="discover"] .intro-chapter { height:205svh; }
html[data-page="discover"] .discovery-hero {
 --hero-padding:clamp(28px,3vw,48px);
 display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); grid-template-rows:minmax(0,1fr) auto;
 column-gap:clamp(24px,3vw,48px); row-gap:28px;
 position:sticky; top:calc(var(--header-height) + 16px);
 height:calc(100svh - var(--header-height) - 48px); min-height:680px;
 padding:var(--hero-padding) var(--hero-padding) 0;
 background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:18px; overflow:visible;
}
html[data-theme="dark"] .discovery-hero { background:#181818; }
html[data-page="discover"] .hero-copy {
 width:auto; min-width:0; padding:0; align-self:center;
 transform:none; opacity:1; pointer-events:auto; text-shadow:none;
}
html[data-page="discover"] .hero-copy .eyebrow { color:var(--muted); font-size:10px; letter-spacing:1.5px; }
html[data-page="discover"] .hero-copy h2 {
 font-size:clamp(46px,4.7vw,82px); line-height:1.05; letter-spacing:-.055em;
 font-weight:500; margin:0 0 24px;
}
html[data-page="discover"] .hero-copy h2 em { color:var(--accent-ink); }
html[data-page="discover"] .hero-intro { color:var(--muted); font-size:16px; line-height:1.75; max-width:490px; margin:0 0 24px; }
.cloud-questions { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 24px; }
.cloud-questions button {
 min-height:44px; padding:10px 14px; font-size:12px; border:1px solid var(--line);
 border-radius:24px; background:transparent; color:var(--ink); text-align:left;
}
.cloud-questions button:hover { border-color:var(--accent-ink); }
.cloud-questions button[aria-pressed="true"] {
 border-color:var(--accent-ink); color:var(--accent-ink);
 background:color-mix(in srgb,var(--accent-ink) 9%,transparent);
}
.cloud-steps { display:flex; gap:16px; flex-wrap:wrap; margin:0 0 24px; }
.cloud-steps button {
 display:flex; align-items:center; gap:8px; min-height:44px; padding:10px 0;
 color:var(--muted); background:none; border:0; border-bottom:2px solid var(--line); font-size:12px;
}
.cloud-steps button span { color:var(--muted); font:10px var(--font-body); }
.cloud-steps button[aria-current="step"] { color:var(--ink); border-bottom-color:var(--accent-ink); }
.cloud-steps button[aria-current="step"] span { color:var(--accent-ink); }
html[data-page="discover"] .hero-actions { gap:10px 22px; }
html[data-page="discover"] .hero-actions .lab-button { min-height:52px; padding:13px 20px; font-size:13px; }
html[data-page="discover"] .hero-secondary { color:var(--ink); font-size:13px; }
.hero-utilities { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:22px; }
html[data-page="discover"] .hero-utilities button {
 position:static; width:auto; min-width:0; min-height:44px; padding:8px 0;
 background:none; border:0; border-radius:4px; color:var(--muted); font-size:11px;
}
html[data-page="discover"] .hero-utilities button:hover { color:var(--ink); text-decoration:underline; }
html[data-page="discover"] .hero-footnote {
 position:static; grid-column:1/-1; min-height:58px; padding:12px 0; gap:16px;
 border-top:1px solid var(--line); color:var(--muted); font-size:9px;
}
html[data-page="discover"] .scroll-invitation { color:var(--accent-ink); font:13px/1.5 var(--font-body); letter-spacing:0; animation:none; margin-left:auto; }
html .data-art.knowledge-atlas {
 --ink:#efefef; --muted:#b6b6b6; --line:#cdcdcd2e; --surface:#232323;
 position:relative; inset:auto; width:100%; height:100%; min-height:0; margin:0;
 display:grid; grid-template-rows:auto minmax(270px,1fr) auto auto;
 padding:22px; color:var(--ink); background:radial-gradient(ellipse at 50% 35%,#2e2e2e,#1a1a1a 75%);
 border:1px solid #cdcdcd2e; border-radius:12px;
 transform:none; opacity:1; perspective:none;
}
.knowledge-atlas::before { display:none; }
.atlas-topline {
 position:static; display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap;
 color:var(--ink); font:500 13px/1.6 var(--font-body);
}
.atlas-topline #cloud-count { color:var(--muted); font-size:11px; font-weight:400; }
.atlas-graph { position:relative; min-width:0; min-height:0; }
html .knowledge-atlas #knowledge-canvas { position:absolute; inset:0; width:100%; height:100%; }
.cloud-labels { position:absolute; inset:0; z-index:2; pointer-events:none; }
.cloud-node-label {
 pointer-events:auto; position:absolute; transform:translate(-50%,-50%); min-height:44px;
 padding:9px 12px; border:1px solid color-mix(in srgb,var(--node-color) 60%,transparent);
 background:#1c1c1cf5; border-radius:8px; color:#f0f0f0; font-size:11px; line-height:1.4;
 text-align:center; overflow-wrap:anywhere; box-shadow:0 4px 12px #0002;
}
.cloud-node-label small { display:block; color:var(--node-color); font:9px var(--font-body); margin-top:4px; }
.cloud-node-label:hover, .cloud-node-label[aria-pressed="true"] { border-color:var(--node-color); background:#303030; z-index:3; }
.cloud-node-label:focus-visible { z-index:4; }
.cloud-question { background:var(--lime); border-color:var(--lime); color:#242424; font-size:13px; font-weight:600; padding:12px; }
.cloud-detail { position:static; border-top:1px solid var(--line); padding:18px 0 0; background:none; z-index:3; }
.cloud-detail .micro-label { font:12px/1.5 var(--font-body); letter-spacing:0; color:var(--muted); }
.cloud-detail strong { display:block; font-size:21px; font-weight:500; margin:8px 0; line-height:1.3; }
.cloud-detail p { font-size:13px; color:var(--muted); line-height:1.7; margin:8px 0; }
.cloud-detail a { color:var(--lime); font-size:12px; display:inline-flex; align-items:center; min-height:44px; }
.atlas-source { position:static; margin:10px 0 0; color:var(--muted); font:10px/1.7 var(--font-body); }

@media (min-width:1700px) {
 :root { --page-width:1640px; --page-gutter:60px; }
 header .nav-link { font-size:14px; }
 .cloud-node-label { font-size:12px; }
}
@media (max-width:1250px) {
 header .logo-subline { display:none; }
 header .nav-menu { gap:10px; }
 header .nav-link { padding-inline:11px; }
 html[data-page="discover"] .hero-copy h2 { font-size:clamp(44px,4.7vw,60px); }
 .cloud-steps { gap:10px; }
 .cloud-steps button { font-size:11px; }
}
@media (max-width:1100px) {
 :root { --page-gutter:24px; --header-height:72px; }
 header .nav-menu { position:relative; }
 header .mobile-menu-toggle { display:block; }
 header .nav-links {
  display:none; position:absolute; top:calc(100% + 14px); right:0; width:260px; min-width:0;
  flex-direction:column; padding:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 16px 40px #0002;
 }
 header .nav-links.active { display:flex; }
 header .nav-link { width:100%; min-height:48px; font-size:14px; padding:12px 14px; }
 header .nav-link.active { background:var(--paper); }
 header .nav-link[data-page="contact"] { margin:4px 0 0; }
 html[data-page="discover"] .discovery-hero { --hero-padding:28px; column-gap:24px; }
 html[data-page="discover"] .hero-intro { font-size:14px; }
 .cloud-questions button { font-size:11px; padding-inline:12px; }
 html .data-art.knowledge-atlas { padding:18px; }
 .cloud-node-label { font-size:10px; padding:8px; }
 .cloud-detail strong { font-size:19px; }
}
@media (max-width:900px), (max-height:780px) {
 html[data-page="discover"] .intro-chapter { height:auto; }
 html[data-page="discover"] .discovery-hero { position:relative; top:auto; height:auto; min-height:0; }
 html .data-art.knowledge-atlas { min-height:570px; }
}
@media (max-width:900px) {
 html[data-page="discover"] .discovery-hero { grid-template-columns:minmax(0,1fr); row-gap:28px; }
 html[data-page="discover"] .hero-copy h2 { font-size:clamp(44px,7.5vw,68px); }
 html[data-page="discover"] .hero-intro { max-width:600px; font-size:15px; }
 html[data-page="discover"] .hero-actions { flex-direction:row; align-items:center; }
 html .data-art.knowledge-atlas { height:660px; min-height:0; }
 .cloud-node-label { font-size:12px; }
 .hero-utilities { margin-top:12px; }
 .journey-progress { display:none; }
}
@media (max-width:650px) {
 :root { --page-gutter:16px; --header-height:68px; }
 html body > header { gap:12px; }
 header .logo { gap:10px; }
 header .logo img.han-logo { height:27px !important; }
 header .logo-title-link { padding-left:10px; }
 header .logo h1 { font-size:20px; }
 header .nav-menu { gap:6px; }
 #page-discover > .discovery-shell:first-child { padding-top:16px; }
 html[data-page="discover"] .discovery-hero { --hero-padding:22px; border-radius:14px; }
 html[data-page="discover"] .hero-copy .eyebrow { font-size:9px; }
 html[data-page="discover"] .hero-copy h2 { font-size:clamp(36px,8.7vw,55px); margin-block:18px; }
 html[data-page="discover"] .hero-intro { font-size:14px; }
 .cloud-questions, .cloud-steps { margin-bottom:18px; }
 .cloud-steps { gap:12px; }
 html[data-page="discover"] .hero-footnote { padding-block:8px; }
 html[data-page="discover"] .hero-footnote > span:first-child { display:none; }
 html[data-page="discover"] .scroll-invitation { font-size:12px; gap:16px; width:100%; justify-content:space-between; }
 html .data-art.knowledge-atlas { padding:16px; }
 .cloud-detail p { font-size:12px; }
}
@media (max-width:480px) {
 html .data-art.knowledge-atlas { height:auto; grid-template-rows:auto auto auto auto; }
 .atlas-graph { display:flex; flex-direction:column; padding-top:230px; }
 html .knowledge-atlas #knowledge-canvas { height:240px; }
 .cloud-labels { position:relative; inset:auto; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-bottom:18px; }
 html .cloud-labels .cloud-node-label {
  position:relative; inset:auto !important; transform:none; min-width:0; max-width:none !important;
  width:100%; min-height:48px; padding:8px; font-size:10px;
 }
 .cloud-node-label small { display:inline; margin-left:6px; }
 .cloud-question { grid-column:1/-1; }
 .atlas-source { font-size:8px; }
}
@media (max-width:360px) {
 header .logo h1 { font-size:18px; }
 header .logo-title-link { padding-left:8px; }
 header .logo { gap:8px; }
 html[data-page="discover"] .discovery-hero { --hero-padding:18px; }
}
@media (prefers-reduced-motion:reduce) {
 html[data-page="discover"] .intro-chapter { height:auto; }
 html[data-page="discover"] .discovery-hero { position:relative; top:auto; height:auto; }
 html .data-art.knowledge-atlas { min-height:570px; }
}

/* Each example is a separate, stationary target once it enters the viewport. */
html .inspiration-story { height:140svh; }
html .inspiration-story .story-sticky { display:grid; grid-template-columns:.9fr 1.1fr; gap:7%; align-items:center; padding:35px 0; }
html .inspiration-story .story-copy { position:relative; inset:auto; width:auto; }
html .inspiration-story .story-copy h2 { font-size:clamp(45px,4.4vw,75px); }
html #possibility-stack { position:relative; inset:auto; width:100%; height:auto; display:grid; grid-template-columns:1fr; gap:18px; perspective:none; transform-style:flat; z-index:3; }
html #possibility-stack .possibility-card { position:relative; inset:auto; width:100%; min-height:172px; display:grid; grid-template-columns:34% 1fr; gap:0; border-radius:10px; box-shadow:0 10px 32px #0003; transform:none; opacity:1; transition:border-color .2s,background .2s; }
html #possibility-stack .possibility-card:hover { background:#313131; }
html #possibility-stack .possibility-card .inspiration-art { width:100%; height:100%; min-height:172px; }
html #possibility-stack .possibility-card .inspiration-card-copy { position:relative; inset:auto; min-height:0; background:none; padding:24px 32px 22px 24px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
html #possibility-stack .possibility-card h3 { font-size:24px; line-height:1.15; margin:8px 0 12px; padding:0; letter-spacing:-.6px; }
html #possibility-stack .possibility-card .micro-label { font-size:8px; }
html #possibility-stack .possibility-card .card-arrow { position:static; font-size:12px; color:var(--lime); margin-top:auto; min-height:24px; }
html #possibility-stack .inspiration-art::after { font-size:6px; left:10px; right:10px; line-height:1.6; }
html #possibility-stack .inspiration-art > :not(.world-mountain):not(.world-grid):not(.world-sun):not(.object-ring) { margin-top:0; }
html #possibility-stack .demo-cube { width:65px; height:65px; }
html #possibility-stack .robot-figure { transform:scale(.75); }
html #possibility-stack .inspiration-art .world-sun { width:40px; height:40px; right:15%; }
.example-brief { font-size:12px; color:#bababa; line-height:1.6; margin:0 0 12px; }
/* Magazine cards use real source images, with reading content inside the site. */
.radar-cards { align-items:stretch; }
html .radar-card { appearance:none; width:100%; padding:0; border-radius:10px; overflow:hidden; text-align:left; background:var(--surface); color:var(--ink); cursor:pointer; }
html .radar-card:first-child { background:var(--surface); color:var(--ink); border-color:var(--line); }
.radar-cover { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; flex-shrink:0; background:#e8e8e8; }
.radar-cover img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.radar-card:hover .radar-cover img { transform:scale(1.035); }
.radar-cover[data-source="arXiv"] img { object-fit:contain; padding:12px; }
.radar-cover .radar-category { position:absolute; left:16px; top:16px; background:#191919e8; color:#e8e8e8; border-color:#e5005660; z-index:1; backdrop-filter:blur(10px); }
.radar-image-credit { position:absolute; bottom:10px; right:12px; padding:4px 7px; border-radius:3px; background:#131313bb; color:white; font:8px var(--font-body); }
.radar-cover-fallback { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; color:#e50056; background:radial-gradient(ellipse,#3e3e3e,#242424); }
.radar-cover-fallback strong { font-size:30px; font-weight:500; }.radar-cover-fallback span { font:9px var(--font-body); letter-spacing:2px; }
.radar-cover.has-image .radar-cover-fallback { display:none; }
.radar-card-body { display:flex; flex-direction:column; flex:1; padding:24px; width:100%; }
html .radar-card h3 { font-size:24px; line-height:1.2; letter-spacing:-.7px; margin:0 0 15px; }
html .radar-card .radar-description,html .radar-card:first-child .radar-description { display:block; font-size:13px; line-height:1.85; color:var(--muted); margin:0 0 22px; }
.radar-read { display:flex; align-items:center; justify-content:space-between; min-height:36px; margin-top:auto; font-size:12px; color:var(--lime); padding-bottom:16px; }
html .radar-card .radar-source { color:var(--muted); font-size:9px; margin-top:0; }
#article-dialog { width:min(1000px,calc(100% - 40px)); max-height:91dvh; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:0 30px 130px #0009; }
#article-dialog::backdrop { background:#0a0a0add; backdrop-filter:blur(16px); }
.article-reader { position:relative; padding:42px; }
.article-reader .dialog-dismiss { position:sticky; float:right; top:0; margin:-20px -20px 0 12px; }
.article-reader h2 { font-size:42px; line-height:1.12; font-weight:500; letter-spacing:-1.7px; margin:22px 30px 24px 0; }
.article-reader .article-intro { font-size:18px; line-height:1.85; color:var(--muted); margin:20px 0 28px; }
.article-reader figure { margin:20px 0 26px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#ededed; }
.article-reader figure img { display:block; width:100%; max-height:400px; object-fit:contain; }
.article-reader figcaption { padding:9px 14px; background:var(--paper); color:var(--muted); font-size:10px; line-height:1.6; }
.article-reader h3 { font-size:20px; font-weight:500; margin:28px 0 15px; }
.article-reader li { padding-left:5px; margin-bottom:15px; font-size:15px; line-height:1.85; color:var(--muted); }
.article-reader ul { padding-left:20px; }
.article-try { padding:22px 26px; border-left:3px solid var(--lime); border-radius:0 6px 6px 0; background:#e5005609; margin:25px 0; }
.article-try p,.article-relevance { font-size:15px; line-height:1.8; color:var(--muted); margin:8px 0; }
.article-try h3 { margin-top:0; }.article-editorial { font:10px/1.8 var(--font-body); color:var(--muted); margin:25px 0; }
html[data-kiosk] header .nav-link.kiosk-info { background:var(--lime); color:#252525; margin-left:10px; padding-inline:22px; border-radius:5px; }
html[data-kiosk] header .nav-link[data-page="about"]:not(.kiosk-info) { display:none; }
html[data-kiosk] .kiosk-info::after { display:none; }
@media (min-width:1700px) {
 html #possibility-stack .possibility-card,html #possibility-stack .possibility-card .inspiration-art { min-height:200px; }
 html #possibility-stack .possibility-card h3 { font-size:28px; }
 .example-brief { font-size:14px; }
}
@media (max-width:1100px) {
 html .inspiration-story .story-sticky {gap:4%;grid-template-columns:.85fr 1.15fr;}
 html #possibility-stack .possibility-card {grid-template-columns:28% 1fr;}
 html #possibility-stack .possibility-card .inspiration-card-copy {padding:18px;}
 html #possibility-stack .possibility-card h3 {font-size:20px;}
 .example-brief {font-size:11px;}
}
@media (max-width:800px) {
 html .inspiration-story {height:auto;}
 html .inspiration-story .story-sticky {position:relative;top:0;display:block;height:auto;min-height:0;padding:55px 0;}
 html .inspiration-story .story-copy {position:relative;inset:auto;}
 html .inspiration-story .story-copy h2 {font-size:48px;}
 html .inspiration-story .story-copy > p:not(.eyebrow) {max-width:560px;}
 html #possibility-stack {margin-top:32px;gap:16px;}
 html #possibility-stack .possibility-card {grid-template-columns:30% 1fr;min-height:168px;}
 html #possibility-stack .possibility-card .inspiration-art {min-height:168px;}
 html #possibility-stack .possibility-card h3 {font-size:22px;}
 .chapter-watermark {display:none;}
 .radar-card-body {padding:22px;}
 html .radar-card h3 {font-size:24px;}
 .article-reader {padding:30px 24px;}.article-reader h2 {font-size:33px;letter-spacing:-1px;}
 .article-reader .article-intro {font-size:16px;}.article-reader li {font-size:14px;}
 .article-reader .dialog-dismiss {margin:-15px -10px 0 10px;}
 .article-reader .eyebrow {padding-right:45px;}
}
@media (max-width:480px) {
 html .inspiration-story .story-copy h2 {font-size:42px;}
 html #possibility-stack .possibility-card {grid-template-columns:28% 1fr;}
 html #possibility-stack .possibility-card h3 {font-size:20px;}
 html #possibility-stack .possibility-card .inspiration-card-copy {padding:18px 15px;}
 html #possibility-stack .inspiration-art::after {display:none;}
 .article-reader h2 {font-size:30px;}
}
@media (prefers-reduced-motion:reduce) {
 html[data-page="discover"] .intro-chapter {height:auto;}
 html .inspiration-story {height:auto;}
 html .inspiration-story .story-sticky {position:relative;top:0;}
}