/* Original blue-green glass material with the current bilingual story. */
:root{color-scheme:dark;--bg:#152c32;--text:#fff;--muted:#d1dbe2;--faint:#a4b6c0;--line:#ffffff20;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none;color:var(--text)}
*{box-sizing:border-box}body{margin:16px;min-height:calc(100svh - 32px);display:flex;flex-direction:column;position:relative;isolation:isolate;border:1px solid #b5c9d238;border-radius:22px;background:#0b14206b;backdrop-filter:blur(32px) saturate(1.1);-webkit-backdrop-filter:blur(32px) saturate(1.1);box-shadow:inset 0 1px 0 #ffffff0a}a{color:inherit;text-decoration:none}button{font:inherit}a:hover,button:hover{color:#bfd3ee}a:focus-visible,button:focus-visible{outline:2px solid #769fd4;outline-offset:6px;border-radius:2px}.skip{position:fixed;left:24px;top:12px;transform:translateY(-180%);background:var(--bg);z-index:3;padding:12px}.skip:focus{transform:none}
header{display:flex;align-items:center;justify-content:space-between;padding:28px clamp(24px,4vw,70px);gap:32px}.brand{display:flex;align-items:center}.brand img{display:block;width:192px;height:auto}nav{display:flex;gap:36px;align-items:center;font-size:15px;color:var(--muted)}nav a{padding:10px 0}nav a[aria-current=page]{color:var(--text);text-decoration:underline;text-underline-offset:7px}.languages{display:flex;align-items:center;gap:6px;color:var(--faint)}.languages button{cursor:pointer;border:0;background:none;color:var(--faint);padding:10px 0}.languages button[aria-pressed=true]{color:var(--text)}
main,footer{width:min(1120px,80%);margin-inline:auto}.home{flex:1;display:flex;align-items:center;padding:54px 0 70px}.statement{width:100%}h1{font-size:clamp(26px,2.65vw,40px);font-weight:400;letter-spacing:-.04em;line-height:1.3;margin:0 0 36px}.statement h1{white-space:nowrap}.statement>p{max-width:620px;margin:0;font-size:17px;line-height:1.8;white-space:pre-line;color:var(--muted);text-wrap:pretty}.action{display:inline-block;margin-top:34px;font-size:18px;line-height:1.5;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}.action span+span{margin-left:8px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0 32px;color:var(--faint);font-size:12px}
.attention-word{font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;border:0;background:none;padding:0;text-align:inherit;cursor:pointer}.attention-word span{display:inline-block}.attention-slot{white-space:nowrap}
.inner{flex:1;padding:65px 0 60px;max-width:1040px}.inner h1{font-size:48px;margin-bottom:20px}.page-intro{font-size:20px;color:var(--muted);line-height:1.6;margin:0 0 48px}.experiments{max-width:690px}.experiments section{padding:24px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:190px 1fr;gap:24px}.experiments h2{font-size:19px;font-weight:400;margin:0;line-height:1.6}.experiments p{font-size:17px;line-height:1.75;color:var(--muted);margin:0}.note,.empty{color:var(--faint);font-size:15px}.note{margin-top:30px}.empty{border-top:1px solid var(--line);max-width:690px;padding:22px 0}
html[lang=zh-CN] .statement h1{letter-spacing:-.025em;line-height:1.5}html[lang=zh-CN] .statement>p{line-height:1.9;max-width:610px}
@media(max-width:1000px){.statement h1{white-space:normal;font-size:34px;max-width:800px}}
@media(max-width:700px){body{margin:8px;min-height:calc(100svh - 16px);border-radius:16px}header{padding:20px 16px;gap:12px}.brand img{width:132px}nav{gap:16px;font-size:14px}.languages{gap:4px}main,footer{width:calc(100% - 40px)}.home{padding:32px 0}.statement h1{font-size:30px;margin-bottom:26px}.statement>p{font-size:15px;line-height:1.7}html[lang=zh-CN] .statement>p{line-height:1.8}.action{font-size:17px;margin-top:28px}footer{padding-bottom:24px}.inner{padding:48px 0}.inner h1{font-size:36px}.page-intro{font-size:18px}.experiments section{display:block;padding:20px 0}.experiments h2{margin-bottom:7px}.experiments p{font-size:16px}html[lang=zh-CN] .statement h1{font-size:28px}}
@media(max-width:360px){nav{gap:12px}header{padding-inline:12px}.brand img{width:104px}.statement h1{font-size:26px}html[lang=zh-CN] .statement h1{font-size:25px}.statement>p{font-size:14px}.home{padding-block:24px}}

/* The colour field belongs to the viewport, beneath one continuous glass panel. */
html{background:
  radial-gradient(ellipse 70% 100% at -12% -18%,#527b9c 0%,#294964 43%,transparent 76%),
  linear-gradient(126deg,transparent 48%,#142d3800 57%,#41666d66 70%,#547a7770 73%,#29495145 82%,transparent 94%),
  radial-gradient(ellipse 54% 75% at 108% 110%,#385858,transparent 78%),
  #080f18;background-attachment:fixed}
body{background:#0b14203b;border-color:#bed4de38;backdrop-filter:blur(28px) saturate(.9);-webkit-backdrop-filter:blur(28px) saturate(.9);box-shadow:inset 0 1px 0 #edf8ff0d,inset 0 -1px 0 #0003}
body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(145deg,#c4dce509,transparent 38%,#040b1215);}

/* An open notebook thought, beside the story rather than behind the text. */
.home{position:relative}
@media(max-width:1000px){.language-sketch{display:none}}

/* Existing typography and geometry remain unchanged. */
.home{padding-block:40px 54px}
.statement h1{font-size:clamp(40px,4.2vw,60px);line-height:1.12;letter-spacing:-.045em;white-space:normal;max-width:1000px;margin-bottom:32px;text-wrap:balance}
.statement>p{font-size:16px;line-height:1.65;max-width:590px}
html[lang=zh-CN] .statement h1{font-size:clamp(36px,3.7vw,54px);line-height:1.35;max-width:870px}
html[lang=zh-CN] .statement>p{line-height:1.8;max-width:580px}
.action{margin-top:28px;font-size:19px}
@media(max-width:1000px){.statement h1{font-size:44px;max-width:760px}.language-sketch{display:none}}
@media(max-width:700px){.home{padding-block:28px 30px}.statement h1{font-size:34px;line-height:1.16;margin-bottom:26px;text-wrap:initial}.statement>p{font-size:15px;line-height:1.7}html[lang=zh-CN] .statement h1{font-size:30px}.action{font-size:17px}}
@media(max-width:360px){.statement h1{font-size:28px}.statement>p{font-size:14px}html[lang=zh-CN] .statement h1{font-size:26px}}
@media(max-width:700px){.statement h1{font-size:30px}html[lang=zh-CN] .statement h1{font-size:28px}}
@media(max-width:360px){.statement h1{font-size:26px}html[lang=zh-CN] .statement h1{font-size:25px}}

/* Six small scenes share the same stage; only the drawing changes. */
.story-scene{width:100%;animation:story-arrival .6s ease-out both}
.story-scene svg{display:block;width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.story-scene text{fill:currentColor;stroke:none;font-family:"Segoe Print","Bradley Hand","Chalkboard SE",cursive;font-size:23px;letter-spacing:.02em}
.story-scene .date{font-size:15px;fill:#a4bac8;letter-spacing:.14em}.story-scene .bits{font-size:24px;letter-spacing:.14em}.story-scene .code{font-size:31px}.story-scene .small-question{font-size:36px}.story-scene .blue{stroke:#8aafd6}
.story-caption{display:block;text-align:center;font-size:12px;color:#b5c7d0;letter-spacing:.02em;line-height:1.6;margin-top:5px}
.story-scene .draw{stroke-dasharray:1;animation:story-draw 1.4s ease-out both}.story-scene .appear{animation:story-arrival .6s ease-out both;animation-delay:var(--wait,0s)}
@keyframes story-arrival{from{opacity:0}to{opacity:1}}@keyframes story-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.story-scene,.story-scene .draw,.story-scene .appear{animation:none}}

/* A growing sketchbook spread: earlier drawings keep their place and opacity. */
.story-scene{min-width:0}.story-scene[data-pending=true]{visibility:hidden}.story-scene[data-pending=true],.story-scene[data-pending=true] *{animation:none!important}
.story-scene svg{stroke-width:2}.story-scene .date{font-size:23px}.story-caption{font-size:10px;line-height:1.5;margin-top:0}
@media(max-width:1000px){.language-sketch{display:none}}

.story-scene .llm-date{font-size:21px;letter-spacing:.03em}


/* Both columns participate in layout; hidden scenes retain their grid cells. */
.language-sketch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;min-width:0;width:100%;pointer-events:none;color:#e5ebe9}
@media(min-width:1001px){
  body[data-page=index] main,body[data-page=index] footer{width:min(1320px,calc(100% - clamp(48px,8vw,144px)))}
  .home{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,min(25vw,36svh),360px);column-gap:clamp(36px,5vw,80px);align-items:center;padding-block:24px 32px}
  .statement{min-width:0}
  .statement h1{font-size:clamp(38px,3.4vw,56px);max-width:none}
  .statement>p{max-width:640px;font-size:17px;line-height:1.75}
  .headline-line{display:block;white-space:nowrap}
}
@media(max-width:1000px){.language-sketch{display:none}}

/* The invitation opens on demand, keeping the one-screen composition quiet. */
button.action{font-family:inherit;color:inherit;background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 3px;text-decoration:none;cursor:pointer;text-align:left}
/* Carry the homepage typography and open controls into the invitation. */
.access-dialog{color:#fafafa;background:#131e25;border:1px solid #b5c9d225;border-radius:20px;padding:40px;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-shadow:0 24px 80px #0004}
.access-dialog::backdrop{background:#07101855;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.access-dialog h2{font-family:inherit;font-size:26px;line-height:1.2;font-weight:400;letter-spacing:-.035em;margin:2px 20px 38px 0}
.access-dialog p{font-size:14px;line-height:1.5;color:var(--muted)}
.access-close{position:absolute;top:10px;right:10px;background:none;border:0;color:#9babb6;font-size:23px;font-weight:300;line-height:1;width:40px;height:40px;cursor:pointer}
.access-dialog label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.access-dialog input[type=email]{width:100%;min-width:0;font:inherit;font-size:16px;color:white;background:transparent;border:0;border-bottom:1px solid #94acbd66;border-radius:0;padding:12px 0;box-shadow:none}
.access-dialog input[type=email]::placeholder{color:#94a7b5;opacity:1}
.access-dialog input:focus-visible{outline:none;border-bottom-color:#eef4fa}
.access-submit{display:block;width:auto;margin:26px 0 0 auto;border:0;border-bottom:1px solid #b5c9d280;border-radius:0;padding:6px 0;background:none;color:#fafafa;font-size:15px;cursor:pointer;box-shadow:none}
.access-submit:disabled{opacity:.5;cursor:default}.access-submit:hover{color:white;border-bottom-color:white}
.access-contact{text-decoration:underline;text-underline-offset:4px;font-size:14px}
.access-status:empty{display:none}.access-trap{position:absolute;left:-10000px;width:1px;height:1px}
@media(max-width:450px){.access-dialog{padding:32px 24px}.access-dialog h2{font-size:25px}}


.contact{position:relative;font-size:12px}.contact summary{cursor:pointer;list-style:none;padding:8px 0}.contact summary::-webkit-details-marker{display:none}.contact summary:hover{color:var(--text)}.contact summary:focus-visible{outline:2px solid #769fd4;outline-offset:4px;border-radius:2px}.contact-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:272px;max-width:calc(100vw - 64px);padding:22px;background:#131e25;border:1px solid #b5c9d225;border-radius:12px;box-shadow:0 12px 36px #0003;color:var(--text);z-index:5}.contact-email{font-size:15px;user-select:text;overflow-wrap:anywhere}.contact-actions{display:flex;justify-content:space-between;gap:24px;margin-top:18px;font-size:13px;color:var(--muted)}.contact-actions button{color:inherit;background:none;border:0;padding:0;cursor:pointer}.contact-actions a,.contact-actions button{text-decoration:underline;text-underline-offset:4px}.contact-status{display:block;margin-top:12px;line-height:1.5;color:var(--muted)}.contact-status:empty{display:none}

.coming-soon{display:flex;align-items:center;padding-block:60px 100px}.coming-soon h1{font-size:clamp(30px,4vw,48px);margin:0 0 28px}.coming-title{font-size:24px;letter-spacing:-.025em;color:var(--text);margin:0 0 12px}.coming-description{font-size:16px;line-height:1.7;color:var(--muted);max-width:420px;margin:0}.back-home{display:inline-block;margin-top:32px;font-size:14px;color:var(--muted);border-bottom:1px solid #b5c9d260;padding-bottom:3px}@media(max-width:700px){.coming-soon{padding-block:48px 72px}}

/* Public product and legal information remains readable without scripts or login. */
footer{flex-wrap:wrap}.legal-links{font-size:12px;gap:20px}.legal{max-width:760px;margin:40px auto 80px}.legal h1{font-size:42px;white-space:normal}.legal h2{font-size:22px;font-weight:500;margin:32px 0 12px}.legal p{font-size:16px;line-height:1.8;color:var(--muted)}.legal a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}.legal .date,.legal .eyebrow{font-size:13px;color:var(--faint)}@media(max-width:700px){.legal{margin:24px auto 48px}.legal h1{font-size:34px}footer nav{flex-wrap:wrap;gap:14px}}

/* Companion pages keep the homepage edges, with a narrower reading measure. */
body:not([data-page=index]) main,body:not([data-page=index]) footer{width:min(1320px,calc(100% - clamp(48px,8vw,144px)));max-width:none}
.coming-soon{flex:1;padding-block:64px 96px}
.coming-soon>div{max-width:540px}
.coming-soon h1{font-size:clamp(40px,4.2vw,60px);line-height:1.12;letter-spacing:-.045em;margin-bottom:28px}
.coming-title{font-size:20px;line-height:1.5;margin-bottom:12px}
.coming-description{font-size:16px;line-height:1.75;color:#aebac5}
.back-home{font-size:16px;margin-top:36px;color:#e1e8ed;border-color:currentColor}
.legal{max-width:720px;margin:72px auto 100px}
.legal h1{font-size:clamp(36px,4.2vw,56px);line-height:1.15;letter-spacing:-.045em;margin-bottom:18px}
.legal .date{margin:0 0 48px;color:#8e9ca8}
.legal h2{font-size:21px;font-weight:400;letter-spacing:-.02em;margin:44px 0 14px;color:#eef1f4}
.legal p{line-height:1.85;color:#b8c2ca}
html[data-surface=cosmos] .contact-panel,html[data-surface=cosmos] .access-dialog{background:#11151b;border-color:#ffffff24;box-shadow:0 16px 60px #0005}
@media(max-width:700px){
 body:not([data-page=index]) main,body:not([data-page=index]) footer{width:calc(100% - 40px)}
 .coming-soon{padding-block:48px 64px}.coming-soon h1{font-size:40px}
 .legal{margin:40px auto 64px}.legal h1{font-size:36px}.legal .date{margin-bottom:32px}.legal h2{margin-top:32px}.legal p{font-size:15px;line-height:1.8}
}