:root{color-scheme:light;--bg:#faf9f5;--text:#3d3d3a;--muted:#716d65;--line:#dedbd2;--accent:#b55c3d;--brand-accent:#c16a47;--accent-soft:#eee4da;--soft:#f0eee7;--paper:#fffefa;--serif:'Songti SC','STSong',Georgia,'Noto Serif CJK SC',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;--mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;font-family:var(--sans);background:var(--bg);color:var(--text);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
:root[data-theme=dark]{color-scheme:dark;--bg:#24231f;--text:#eae5da;--muted:#b3ac9f;--line:#4b473e;--accent:#e0a485;--brand-accent:#e0a485;--accent-soft:#45372e;--soft:#2d2b26;--paper:#292823}
[hidden]{display:none!important}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}a,button{touch-action:manipulation}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{cursor:default;opacity:.5}::selection{background:var(--accent-soft)}p,h1,h2,h3,figure,dl,dd,dt{margin:0}svg{display:block}button{border:0}code{font-family:var(--mono);font-size:.92em}.wrap{width:min(1152px,calc(100% - 112px));margin-inline:auto}.eyebrow{font:11px/1.5 var(--mono);letter-spacing:1.7px;color:var(--muted)}
.skip-link{position:fixed;top:-100px;left:20px;z-index:30;background:var(--text);color:var(--bg);padding:15px}.skip-link:focus{top:10px}
.site-header{height:110px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:32px}.wordmark{display:block;width:116px;flex-shrink:0}.brand-wordmark-svg,.brand-mark-svg{width:100%;height:auto;overflow:visible}.cursor{color:var(--accent);animation:blink 2.6s ease-in-out infinite}.site-header nav{display:flex;align-items:center;gap:34px;margin-left:auto;font-size:13px}.site-header nav a{padding-block:12px}.site-header nav a:hover,.quiet-link:hover,.footer-bottom a:hover{color:var(--accent)}.site-header nav a span{font-size:13px;margin-left:3px}.theme-toggle{height:36px;width:36px;padding:0;font-size:23px;background:none;border:1px solid var(--line);border-radius:50%;line-height:1}.theme-toggle:hover{background:var(--soft)}
@keyframes blink{0%,40%,100%{opacity:1}60%,80%{opacity:.25}}

/* ---- Concept landscape: fine raster art + exact native vector identity ---- */
.hero{position:relative}
.hero-overlay{position:relative;height:clamp(660px,56vw,1080px);overflow:hidden}
.hero-art{position:absolute;inset:0;background:url('./assets/lintel-landscape.png') center bottom/100% auto no-repeat;pointer-events:none;mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,transparent,#000 30%)}
:root[data-theme=dark] .hero-art{background-image:url('./assets/lintel-landscape-night.png');mix-blend-mode:normal}
.hero-lockup{position:absolute;left:50%;top:16%;transform:translateX(-50%);width:33.5%;display:flex;gap:4.59%;align-items:flex-end;color:var(--text)}
.hero-beam{width:36.59%;flex-shrink:0}.hero-word{position:relative;width:58.82%;flex-shrink:0;transform:translateY(1.4%)}
.hero-preview{position:absolute;top:33.5%;left:50%;transform:translateX(-50%);width:27%;display:flex;align-items:center;gap:24px;font:clamp(10px,.94vw,16px)/1.4 var(--mono);letter-spacing:.29em;white-space:nowrap;text-align:center}
.hero-preview::before,.hero-preview::after{content:"";height:1px;background:var(--line);flex:1}.hero-preview span{flex-shrink:0}
.hero h1{position:absolute;left:50%;top:39.2%;transform:translateX(-50%);font:400 clamp(24px,2.625vw,46px)/1.13 Baskerville,Georgia,serif;text-align:center;letter-spacing:.15px;width:max-content;max-width:95%;margin:0}
.hero-island,.hero-reflection{position:absolute;left:50%;width:10.4%;transform:translateX(-50%);color:var(--text)}.hero-island{top:calc(100% - 19.25vw)}.hero-reflection{top:calc(100% - 13vw);transform:translateX(-50%) scaleY(-1);opacity:.5;mask-image:linear-gradient(to bottom,#000,transparent),repeating-linear-gradient(to bottom,#000 0 1px,transparent 1px 4px);mask-composite:intersect}
.hero-introduction{text-align:center;padding-top:25px;padding-bottom:50px;max-width:790px}.hero-chinese{font:400 24px/1.6 var(--serif);margin-bottom:13px}.hero-description{font-size:15px;line-height:1.9;color:var(--muted);max-width:56ch;margin-inline:auto}.hero-actions{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:23px;flex-wrap:wrap}.development-note{font-size:11px;color:var(--muted);margin-top:18px;letter-spacing:.3px}.development-symbol{font-size:18px;vertical-align:-1px;color:var(--accent);margin-right:4px}.note-divider{margin:0 10px;color:var(--line)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:46px;padding:12px 19px;border:1px solid var(--line);background:var(--paper);font-size:14px;line-height:1.5;border-radius:3px;transition:background .18s,transform .18s}.button:hover{background:var(--soft)}.button.primary{background:var(--text);color:var(--bg);border-color:var(--text)}.button.primary:hover{background:var(--accent);border-color:var(--accent)}.button:active{transform:translateY(1px)}.quiet-link{display:inline-flex;gap:12px;align-items:center;font-size:14px;padding:9px 0;background:none;border:0;color:inherit;text-align:left}

/* A capability index: readable outcomes on an open sheet, linked to real guides. */
.capabilities { padding-block:65px 22px; }
.section-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:90px; align-items:end; }
.section-heading h2 { font:400 clamp(36px,3.6vw,52px)/1.4 var(--serif); margin-top:22px; letter-spacing:-.8px; }
.section-introduction > p:first-child { font:17px/1.85 var(--serif); }
.section-status { font:12px/1.85 var(--sans); color:var(--muted); margin-top:15px; }
.section-introduction > .text-link { margin-top:13px; }
.capability-index { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:25px 70px; margin-top:49px; }
.capability-index article { border-top:1px solid var(--line); padding-top:23px; }
.capability-number { display:flex; align-items:center; gap:16px; font:9px/1.7 var(--mono); letter-spacing:1.3px; color:var(--muted); }
.capability-number > span { color:var(--accent); }
.capability-index h3 { font:400 25px/1.5 var(--serif); margin-top:10px; }
.capability-index h3 a { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px; }
.capability-index h3 a span { font:16px/1.5 var(--sans); color:var(--accent); transition:transform .18s; }
.capability-index h3 a:hover { color:var(--accent); }
.capability-index h3 a:hover span { transform:translate(2px,-2px); }
.capability-index h3 + p { font:14px/1.9 var(--sans); margin-top:10px; }
.capability-boundary { font:11px/1.9 var(--sans); color:var(--muted); margin-top:12px; }
.journey-link { display:flex; justify-content:center; align-items:center; gap:22px; min-height:75px; border-top:1px solid var(--line); margin-top:37px; font:12px/1.7 var(--sans); color:var(--muted); }
.journey-link > span:first-child { font:9px/1.7 var(--mono); letter-spacing:1.2px; }
.journey-link > span:last-child { color:var(--accent); }
.journey-link:hover { color:var(--accent); }

/* An open, illustrated story: text lives in the paper, not in a demo window. */
.story-opening { padding-block: 45px 25px; text-align:center; }
.story-opening > p:nth-child(2) { margin-top:24px; font:400 32px/1.65 var(--serif); letter-spacing:1px; }
.opening-line { display:block; width:1px; height:65px; margin:38px auto 0; background:var(--line); }
.story { position:relative; }
.story-scene { position:relative; overflow:hidden; }
.story-world { position:absolute; inset:0; }
.story-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; mix-blend-mode:multiply; pointer-events:none; }
.story-keep .story-art { mask-image:linear-gradient(to right,transparent 27%,#000 50%),linear-gradient(to bottom,transparent,#000 4%,#000 91%,transparent); mask-composite:intersect; }
.story-review .story-art { mask-image:linear-gradient(to right,#000 42%,transparent 67%),linear-gradient(to bottom,transparent,#000 4%,#000 91%,transparent); mask-composite:intersect; }
/* Night ink stays warm and quiet; the clipped original character retains its black eyes. */
:root[data-theme=dark] .story-art { filter:grayscale(1) invert(1) sepia(.45); mix-blend-mode:screen; opacity:.53; }
.story-character { display:none; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
:root[data-theme=dark] .story-character { display:block; filter:brightness(1.1) saturate(.85); }
.scene-inner { position:relative; min-height:clamp(600px,50vw,860px); padding-top:100px; padding-bottom:76px; pointer-events:none; }
.story-copy { width:43%; max-width:480px; pointer-events:auto; }
.story-index { display:flex; align-items:center; gap:16px; font:10px/1.7 var(--mono); letter-spacing:1.4px; color:var(--muted); }
.story-index > span { color:var(--accent); }
.story-copy h2 { font:400 clamp(38px,4vw,58px)/1.3 var(--serif); letter-spacing:-1px; margin-top:24px; }
.story-description { font:400 19px/1.8 var(--serif); margin-top:27px; }
.story-detail { font:14px/1.95 var(--sans); color:var(--muted); max-width:31ch; margin-top:22px; }
.original-notes { display:flex; flex-wrap:wrap; gap:10px 18px; font:10px/1.6 var(--mono); color:var(--muted); margin-top:26px; }
.original-notes > span::before { content:'· '; color:var(--accent); }
.text-link { display:inline-flex; align-items:center; gap:16px; font-size:13px; line-height:1.5; min-height:44px; border-bottom:1px solid var(--line); transition:color .18s,border-color .18s; }
.text-link:hover { color:var(--accent); border-color:var(--accent); }
.story-copy > .text-link { margin-top:20px; }
.scene-caption { position:absolute; bottom:28px; left:0; font:9px/1.5 var(--mono); letter-spacing:1.3px; color:var(--muted); }
.story-review .story-copy { margin-left:auto; }
.story-review .scene-caption { left:auto; right:0; }
.story-review .scene-inner { padding-top:110px; }
.review-sequence { display:flex; gap:19px; align-items:center; list-style:none; margin:26px 0 0; padding:0; font-size:12px; }
.review-sequence li { display:flex; align-items:center; gap:19px; }
.review-sequence li:not(:last-child)::after { content:'→'; color:var(--accent); }

/* A page, explicitly opened by the reader; no simulated execution or persistence. */
.sample-pages { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:12px; }
.sample-pages summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:20px; min-height:80px; font:18px/1.6 var(--serif); }
.sample-pages summary::-webkit-details-marker { display:none; }
.sample-pages summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.sample-label { font:10px/1.7 var(--sans); color:var(--muted); }
.page-turn { margin-left:auto; color:var(--accent); font:22px var(--serif); }
.sample-pages[open] .page-turn { font-size:0; }
.sample-pages[open] .page-turn::after { content:'−'; font:22px var(--serif); }
.sample-sheets { display:grid; grid-template-columns:1fr 1fr 1fr; column-gap:40px; padding-block:20px 35px; }
.sample-sheets > div { min-width:0; }
.sheet-number { font:9px/1.8 var(--mono); letter-spacing:1px; color:var(--muted); }
.sample-sheets h3 { font:400 22px/1.5 var(--serif); margin-top:12px; }
.sample-sheets pre { white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.9 var(--mono); margin-top:17px; color:var(--muted); }
.reading-note { grid-column:1/-1; max-width:80ch; font:12px/1.9 var(--sans); color:var(--muted); margin-top:32px; }

/* One complete operation, followed by the actual entry and execution boundaries. */
.how-it-works { border-top:1px solid var(--line); padding-block:78px 15px; }
.example-scope { display:flex; align-items:center; gap:26px; flex-wrap:wrap; border-block:1px solid var(--line); margin-top:42px; padding-block:19px; font:12px/1.8 var(--sans); }
.example-scope > span { font:9px/1.8 var(--mono); letter-spacing:1px; color:var(--accent); }
.example-scope > p:nth-child(2) { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.example-scope i { font-style:normal; color:var(--muted); }
.example-scope > p:last-child { margin-left:auto; color:var(--muted); }
.example-scope > p:last-child > span { margin-inline:8px; color:var(--accent); }
.workflow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px; list-style:none; margin:0; padding:30px 0 33px; }
.workflow-number { display:block; font:400 33px/1.3 var(--serif); color:var(--accent); }
.workflow h3 { font:400 21px/1.6 var(--serif); margin-top:15px; }
.workflow p { font:13px/1.9 var(--sans); color:var(--muted); margin-top:12px; }
.workflow-result { display:block; font:11px/1.8 var(--sans); color:var(--accent); margin-top:19px; }
.workflow-after { display:grid; grid-template-columns:1fr 1fr; gap:60px; border-top:1px solid var(--line); padding-block:24px 28px; font:14px/1.95 var(--sans); }
.workflow-after strong { font-weight:500; }
.workflow-after > p:last-child { font-size:12px; color:var(--muted); }
.execution-model { border-top:1px solid var(--line); padding-top:30px; }
.execution-heading { display:flex; align-items:baseline; justify-content:space-between; gap:30px; }
.execution-heading h3 { font:400 23px/1.6 var(--serif); }
.execution-entries { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:45px; margin-top:26px; }
.execution-entries dt { font:500 14px/1.7 var(--sans); }
.execution-entries dd { font:13px/1.9 var(--sans); color:var(--muted); margin-top:8px; max-width:27ch; }
.execution-boundary { font:11px/1.9 var(--sans); color:var(--muted); margin-top:24px; }
.how-it-works > .thread-line { margin-top:36px; }

.continuation { padding-block:76px 90px; text-align:center; }
.continuation > .story-index { justify-content:center; }
.continuation h2 { font:400 clamp(40px,4.7vw,67px)/1.35 var(--serif); margin-top:28px; letter-spacing:-1.5px; }
.continuation h2 em { font-style:normal; color:var(--accent); }
.continuation-copy { font:16px/1.9 var(--serif); margin-top:33px; }
.thread-line { display:flex; gap:18px; align-items:center; justify-content:center; font:10px/1.8 var(--mono); color:var(--muted); margin:34px auto 0; max-width:720px; }
.thread-line i { height:1px; background:var(--line); flex:1; max-width:100px; }

.trial { border-top:1px solid var(--line); padding-block:75px 65px; }
.trial-heading { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:end; }
.trial-heading h2 { font:400 44px/1.4 var(--serif); margin-top:20px; letter-spacing:-1px; }
.trial-invitation > p { font:18px/1.8 var(--serif); }
.trial-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:26px; }
.reading-links { display:flex; flex-wrap:wrap; gap:25px 35px; margin-top:28px; font-size:12px; }
.reading-links a { min-height:44px; display:flex; align-items:center; gap:15px; }
.reading-links a:hover { color:var(--accent); }
.preview-note { display:grid; grid-template-columns:125px 1.8fr 1fr; gap:26px; margin-top:25px; color:var(--muted); font:11px/1.9 var(--sans); }
.preview-note > span { font:9px/1.8 var(--mono); letter-spacing:1.5px; padding-top:3px; color:var(--accent); }

/* The game is the existing, explicit opt-in runner shared with the App. */
.play-section { padding-top:50px; border-top:1px solid var(--line); padding-bottom:65px; }
.play-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:25px; margin-bottom:28px; }
.play-heading h2 { font:400 32px/1.5 var(--serif); margin-top:12px; }
.play-heading > p { font-size:12px; line-height:1.9; color:var(--muted); padding-bottom:6px; }
.mobile-break { display:none; }
.noscript-game { padding-block:35px; font-size:14px; line-height:1.8; color:var(--muted); }
.site-footer { border-top:1px solid var(--line); padding-block:40px 26px; }
.footer-top { display:flex; align-items:center; gap:34px; margin-bottom:35px; }
.footer-wordmark { width:157px; }
.footer-top > p { font:14px var(--serif); color:var(--muted); padding-top:8px; }
.back-top { margin-left:auto; font-size:12px; color:var(--muted); }
.footer-bottom { display:flex; align-items:flex-start; gap:30px; justify-content:space-between; border-top:1px solid var(--line); padding-top:23px; color:var(--muted); font-size:10px; line-height:1.8; }
.footer-bottom > div { display:flex; gap:20px; flex-wrap:wrap; }

/* Only artwork has an entrance. All text and actions are present from first paint. */
.scene-motion .story-world { transform:translateY(14px); opacity:0; transition:opacity 800ms ease,transform 1000ms ease; }
.scene-motion .story-world.arrived { transform:none; opacity:1; }

/* A responsive local world. Live type/identity stay anchored; only the landscape has depth. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.reading-progress { position:fixed; left:0; top:0; z-index:25; width:100%; height:2px; background:var(--brand-accent); transform:scaleX(var(--read,0)); transform-origin:left; pointer-events:none; }
.world-ready .hero-art { transform:translate(var(--scene-x,0px),var(--scene-y,0px)); }
.lake-light { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.scene-moon { position:absolute; left:var(--moon-x,80.4%); top:var(--moon-y,36.7%); width:10%; aspect-ratio:1; min-width:44px; min-height:44px; border-radius:50%; transform:translate(-50%,-50%); background:transparent; z-index:2; }
.scene-water { position:absolute; left:0; top:calc(100% - 11vw); width:100%; bottom:36px; background:none; cursor:crosshair; z-index:1; }
.scene-clawd { position:absolute; left:var(--clawd-x,15.5%); top:var(--clawd-y,76.5%); width:60px; height:55px; transform:translate(-50%,-50%); background:transparent; z-index:3; color:var(--brand-accent); border-radius:50%; }
.scene-clawd > svg { display:none; }
.tail-secret { position:absolute; right:-9px; bottom:-13px; width:48px; height:44px; background:transparent; border-radius:4px; }
.tail-eyes { display:none; }
.hero-word[data-reacting=true] .tail-eyes { display:block; }
.motion-toggle { position:absolute; right:max(32px,calc((100% - 1152px)/2)); bottom:5px; z-index:4; display:grid; place-items:center; width:44px; height:44px; background:transparent; color:var(--muted); font:12px var(--mono); opacity:.65; }
.motion-toggle:hover,.motion-toggle:focus-visible { color:var(--accent); opacity:1; }
.story-clawd { position:absolute; width:44px; height:44px; transform:translate(-50%,-50%); background:transparent; color:var(--accent); border-radius:50%; }
.scene-response { position:absolute; bottom:80%; left:50%; width:20px; height:18px; margin-left:-10px; pointer-events:none; color:var(--brand-accent); animation:little-heart 1.8s ease-out both; }
.scene-response svg { width:100%; height:100%; overflow:visible; }
.scene-response.boat { width:26px; height:18px; bottom:20%; margin-left:-13px; animation:little-boat 2.3s cubic-bezier(.2,.6,.3,1) both; }
.scene-response.sparkles { width:54px; height:36px; bottom:65%; margin-left:-27px; animation:little-heart 1.8s ease-out both; }
@keyframes little-heart { 0% { opacity:0; transform:translateY(4px) scale(.7); } 18%,50% { opacity:1; transform:translateY(-5px) scale(1); } 100% { opacity:0; transform:translateY(-15px) scale(.9); } }
@keyframes little-boat { 0% { opacity:0; transform:translate(-12px,10px); } 18%,60% { opacity:1; } 100% { opacity:0; transform:translate(-80px,22px); } }
.world-ready .hero-reflection { animation:water-reflection 5s ease-in-out infinite; }
@keyframes water-reflection { 0%,100% { opacity:.43; transform:translateX(-50%) scaleY(-1) skewX(-1deg); } 50% { opacity:.57; transform:translateX(calc(-50% + 2px)) scaleY(-1) skewX(1deg); } }
.hero-overlay[data-animation=resting] .hero-reflection { animation-play-state:paused; }

/* Touch a step to follow the same originals through the plan and into a portable package. */
.work-trail { margin-top:28px; padding:20px 0 0; }
.trail-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.trail-heading > p { font:16px/1.7 var(--serif); }
.trail-heading > p > span { color:var(--accent); margin-right:10px; }
.trail-heading > span { font:10px/1.7 var(--sans); color:var(--muted); }
.trail-controls { display:flex; gap:27px; flex-wrap:wrap; margin-top:12px; }
.trail-controls button { display:flex; align-items:center; gap:10px; min-height:44px; background:none; border-bottom:1px solid transparent; font:10px var(--mono); color:var(--muted); padding:8px 0; }
.trail-controls button > span { font:12px var(--sans); }
.trail-controls button[aria-pressed=true] { border-color:var(--accent); color:var(--accent); }
.trail-controls button:hover { color:var(--accent); }
.trail-drawing { width:100%; height:auto; max-height:200px; margin:12px auto 0; color:var(--muted); overflow:visible; }
.trail-drawing text { stroke:none; fill:currentColor; font:10px var(--mono); }
.trail-originals,.trail-bundle,.trail-record,.trail-plan { stroke:var(--muted); stroke-width:1.1; fill:var(--bg); transition:opacity .5s,transform .65s; }
.trail-originals > path:not(.trail-lines):not(.trail-fold) { fill:url(#trail-paper); }
.trail-lines,.trail-fold { fill:none; opacity:.5; }
.trail-path,.trail-current { fill:none; stroke:var(--line); stroke-width:1; stroke-dasharray:2 6; }
.trail-current { stroke:var(--accent); stroke-dasharray:4 8; opacity:0; transition:opacity .4s; }
.trail-plan { opacity:0; }
.trail-labels { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; padding:8px 0 0; font:11px/1.6 var(--mono); color:var(--muted); }
.trail-labels b { font-weight:400; }
.trail-plan-label { display:none; }
.work-trail[data-step="1"] .trail-plan-label { display:inline; }
.work-trail[data-step="1"] .trail-output-label { display:none; }
.trail-plan text { font-size:9px; }
.trail-plan-corners { stroke:var(--accent); fill:none; }
.trail-bundle,.trail-output-label { opacity:.25; }
.trail-record,.trail-receipt-label { opacity:.25; }
.trail-band { fill:var(--accent-soft); stroke:var(--accent); }
.trail-seal { fill:var(--bg); stroke:var(--accent); }
.trail-dot { color:var(--accent); fill:currentColor; transform:translateX(190px); transition:transform .7s cubic-bezier(.2,.65,.3,1); }
.work-trail[data-step="1"] .trail-plan { opacity:1; }
.work-trail[data-step="1"] .trail-bundle { opacity:0; }
.work-trail[data-step="1"] .trail-dot { transform:translateX(365px); }
.work-trail[data-step="2"] .trail-dot { transform:translateX(535px); }
.work-trail[data-step="3"] .trail-dot { transform:translateX(718px); }
.work-trail:is([data-step="2"],[data-step="3"]) :is(.trail-bundle,.trail-output-label) { opacity:1; }
.work-trail[data-step="3"] :is(.trail-record,.trail-receipt-label) { opacity:1; }
.work-trail:not([data-step="0"]) .trail-current { opacity:1; }
.work-trail[data-in-view=true]:not([data-step="0"]) .trail-current { animation:thread-current 2s linear infinite; }
@keyframes thread-current { to { stroke-dashoffset:-24; } }
.trail-feedback { display:flex; align-items:start; justify-content:space-between; gap:24px; min-height:80px; padding:18px 0 20px; border-bottom:1px solid var(--line); }
.trail-feedback p { max-width:78ch; font:12px/1.9 var(--sans); color:var(--muted); }
.trail-feedback button { display:flex; align-items:center; justify-content:space-between; gap:24px; background:none; min-width:95px; min-height:44px; border-bottom:1px solid var(--line); font:12px var(--sans); padding:4px 0; }
.trail-feedback button:hover { color:var(--accent); border-color:var(--accent); }
.workflow li { position:relative; }
.workflow li::before { content:''; position:absolute; top:0; left:0; width:38px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
.workflow li[data-highlight=true]::before { transform:scaleX(1); }
.capability-index article { position:relative; }
.capability-index article::before { content:''; position:absolute; top:-1px; left:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .45s; }
.capability-index article:is(:hover,:focus-within)::before { transform:scaleX(1); }
:root[data-page-visibility=hidden] .trail-current { animation-play-state:paused!important; }
:root:is([data-motion=paused],[data-motion=reduced]) *, :root:is([data-motion=paused],[data-motion=reduced]) *::before, :root:is([data-motion=paused],[data-motion=reduced]) *::after { animation:none!important; transition:none!important; }
:root:is([data-motion=paused],[data-motion=reduced]) .story-world { transform:none; opacity:1; }


@media(max-width:1000px) {
  .wrap { width:calc(100% - 64px); }
  .scene-inner { min-height:620px; padding-top:82px; }
  .story-art { object-fit:contain; }
  .story-copy { width:47%; }
  .story-copy h2 { font-size:44px; }
  .story-detail { max-width:26ch; }
  .story-review .scene-inner { padding-top:82px; }
  .section-heading { gap:45px; }
  .section-introduction > p:first-child { font-size:16px; }
  .capability-index { column-gap:42px; }
  .capability-index h3 { font-size:23px; }
  .workflow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 45px; }
  .execution-heading { display:block; }
  .execution-heading h3 { margin-top:13px; }
  .execution-entries { gap:28px; }
  .example-scope { gap:12px 24px; }
  .example-scope > p:last-child { margin-left:0; }
  .trial-heading { gap:40px; }
  .trial-heading h2 { font-size:39px; }
  .trial-actions { gap:16px; }
  .preview-note { grid-template-columns:100px 1fr; }
  .preview-note > p:last-child { grid-column:2; }
}
@media(max-width:700px) {
  html { scroll-padding-top:18px; }
  .wrap { width:calc(100% - 40px); }
  .site-header { height:auto; min-height:82px; padding-block:18px; display:grid; grid-template-columns:1fr auto; gap:10px 16px; }
  .wordmark { width:110px; }
  .site-header nav { grid-column:1/-1; grid-row:2; flex-wrap:wrap; gap:0 24px; margin-left:0; font-size:12px; }
  .site-header nav a { min-height:44px; display:inline-flex; align-items:center; }
  .theme-toggle { grid-column:2; grid-row:1; width:36px; height:36px; justify-self:end; font-size:21px; }
  .hero-overlay { height:520px; }
  .hero-art { background-size:auto 420px; }
  .hero-lockup { width:min(76%,335px); top:18%; }
  .hero-preview { width:67%; top:37%; gap:12px; font-size:10px; }
  .hero h1 { top:46%; font-size:28px; }
  .hero-island,.hero-reflection { width:86px; }
  .hero-island { top:calc(100% - 162px); }
  .hero-reflection { top:calc(100% - 110px); }
  .hero-introduction { padding-top:22px; padding-bottom:35px; }
  .hero-chinese { font-size:22px; }
  .hero-description { font-size:14px; }
  .hero-actions { gap:14px; }
  .capabilities { padding-block:43px 5px; }
  .section-heading { grid-template-columns:1fr; gap:25px; }
  .section-heading h2 { font-size:35px; margin-top:16px; }
  .section-introduction > p:first-child { font-size:16px; }
  .section-status { font-size:11px; margin-top:12px; max-width:none; }
  .section-introduction > .text-link { margin-top:10px; }
  .capability-index { grid-template-columns:1fr; gap:25px; margin-top:31px; }
  .capability-index article { padding-top:21px; }
  .capability-index h3 { font-size:24px; margin-top:8px; }
  .capability-index h3 + p { font-size:13px; margin-top:7px; max-width:none; }
  .capability-boundary { max-width:none; font-size:10.5px; margin-top:9px; }
  .journey-link { flex-wrap:wrap; gap:7px 12px; padding-block:19px; margin-top:29px; font-size:11px; }
  .journey-link > span:first-child { width:100%; text-align:center; font-size:8px; }
  .story-opening { padding-block:33px 0; }
  .story-opening > p:nth-child(2) { font-size:25px; margin-top:18px; letter-spacing:.3px; }
  .opening-line { margin-top:30px; height:42px; }
  .story-scene { display:flex; flex-direction:column; }
  .scene-inner,.story-review .scene-inner { min-height:0; padding-top:55px; padding-bottom:0; order:0; }
  .story-copy { width:100%; max-width:400px; }
  .story-review .story-copy { margin-left:0; }
  .story-index { font-size:9px; }
  .story-copy h2 { font-size:43px; margin-top:18px; line-height:1.35; }
  .story-description { font-size:18px; margin-top:22px; }
  .story-detail { max-width:100%; font-size:13px; margin-top:17px; }
  .original-notes { font-size:10px; margin-top:19px; gap:10px 14px; }
  .story-copy > .text-link { margin-top:15px; }
  .story-world { position:relative; inset:auto; flex-shrink:0; order:1; width:760px; height:380px; }
  .story-art { object-fit:contain; }
  .story-keep .story-art,.story-review .story-art { mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent); mask-composite:add; }
  .story-keep .story-world { margin-left:calc(100% - 760px); margin-top:6px; }
  .story-review .story-world { margin-top:12px; margin-left:0; }
  .scene-caption,.story-review .scene-caption { position:relative; inset:auto; margin-top:25px; font-size:8px; }
  .sample-pages { margin-top:0; }
  .sample-pages summary { min-height:76px; gap:12px; flex-wrap:wrap; font-size:16px; padding-block:17px; }
  .sample-label { font-size:9px; }
  .sample-sheets { grid-template-columns:1fr; gap:26px; padding-block:15px 26px; }
  .sample-sheets h3 { font-size:21px; margin-top:6px; }
  .sample-sheets pre { margin-top:10px; }
  .reading-note { grid-column:auto; margin-top:0; }
  .how-it-works { padding-block:48px 0; }
  .example-scope { display:block; margin-top:28px; padding-block:19px; }
  .example-scope > p:nth-child(2) { margin-top:12px; gap:4px; font-size:11px; }
  .example-scope > p:last-child { margin-top:10px; font-size:11px; }
  .workflow { grid-template-columns:1fr; gap:0; padding-block:0; }
  .workflow li { display:grid; grid-template-columns:38px minmax(0,1fr); gap:0 16px; border-bottom:1px solid var(--line); padding-block:24px; }
  .workflow-number { grid-column:1; grid-row:1/4; font-size:24px; padding-top:3px; }
  .workflow h3 { grid-column:2; margin-top:0; font-size:22px; }
  .workflow p { grid-column:2; font-size:13px; margin-top:9px; }
  .workflow-result { grid-column:2; margin-top:12px; }
  .workflow-after { grid-template-columns:1fr; gap:14px; border-top:0; padding-block:23px; font-size:13px; }
  .workflow-after > p:last-child { font-size:11px; }
  .execution-model { padding-top:25px; }
  .execution-heading h3 { font-size:21px; margin-top:14px; }
  .execution-entries { grid-template-columns:1fr; gap:21px; margin-top:23px; }
  .execution-entries > div { display:grid; grid-template-columns:94px minmax(0,1fr); gap:15px; }
  .execution-entries dt { font-size:12px; padding-top:1px; }
  .execution-entries dd { font-size:12px; margin-top:0; max-width:none; }
  .execution-boundary { font-size:10.5px; margin-top:22px; }
  .how-it-works > .thread-line { margin-top:27px; }
  .continuation { padding-block:62px 64px; }
  .continuation h2 { font-size:36px; letter-spacing:-1px; }
  .continuation-copy { font-size:15px; margin-top:27px; }
  .thread-line { font-size:8px; gap:9px; margin-top:25px; }
  .thread-line i { max-width:20px; }
  .trial { padding-block:50px 42px; }
  .trial-heading { grid-template-columns:1fr; gap:29px; }
  .trial-heading h2 { font-size:36px; margin-top:16px; }
  .trial-invitation > p { font-size:16px; }
  .trial-actions { margin-top:21px; gap:18px; }
  .reading-links { gap:5px 28px; margin-top:20px; }
  .preview-note { grid-template-columns:1fr; gap:13px; margin-top:20px; font-size:10px; }
  .preview-note > p:last-child { grid-column:auto; }
  .play-section { padding-top:35px; padding-bottom:42px; }
  .play-heading { display:block; margin-bottom:20px; }
  .play-heading h2 { font-size:28px; }
  .play-heading > p { margin-top:12px; }
  .site-footer { padding-top:30px; }
  .footer-top { gap:18px; flex-wrap:wrap; margin-bottom:24px; }
  .footer-wordmark { width:145px; }
  .footer-top > p { font-size:12px; }
  .back-top { font-size:11px; }
  .footer-bottom { flex-wrap:wrap; gap:17px; font-size:10px; }
  .footer-bottom > div { gap:10px 20px; }
}
@media(max-width:700px) {
  .scene-moon { display:none; }
  .scene-clawd { left:12%; top:calc(100% - 88px); width:52px; }
  .scene-clawd > svg { display:block; width:34px; height:auto; margin:auto; }
  .scene-water { top:calc(100% - 94px); bottom:26px; }
  .motion-toggle { right:10px; bottom:0; }
  .tail-secret { width:40px; right:-8px; bottom:-13px; }
  .trail-heading { display:block; }
  .trail-heading > p { font-size:16px; }
  .trail-heading > span { display:block; margin-top:7px; font-size:9px; }
  .trail-controls { gap:0; justify-content:space-between; margin-top:12px; }
  .trail-controls button { font-size:9px; gap:5px; }
  .trail-controls button > span { font-size:11px; }
  .trail-drawing { margin-top:18px; min-height:80px; }
  .trail-feedback { display:block; min-height:0; padding-bottom:18px; }
  .trail-feedback p { font-size:11px; }
  .trail-labels { font-size:9px; }
  .trail-plan text { font-size:18px; }
  .trail-record text { font-size:16px; }
  .trail-feedback button { margin-left:auto; margin-top:7px; font-size:11px; }
  .workflow li::before { top:24px; width:24px; }
}
@media(max-width:400px) {
  .hero h1 { font-size:26px; }
  .wrap { width:calc(100% - 32px); }
  .button { padding:11px 14px; }
  .section-heading h2 { font-size:32px; }
  .continuation h2 { font-size:33px; }
  .sample-label { font-size:8px; }
  .thread-line { gap:7px; font-size:7.5px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .scene-motion .story-world { opacity:1; transform:none; }
}

/* Opt-in short film: a quiet hero link (native no-JS entrance) upgraded to a bare dark <dialog>. */
.film-open{color:var(--muted)}.film-open:hover{color:var(--accent)}.film-open-note{font:11px var(--mono);letter-spacing:.4px;opacity:.75}.film-open:hover .film-open-note{color:inherit}
.film-dialog{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:rgba(12,11,10,.93);color:#f4efe7;overflow:hidden}
.film-dialog[open]{display:grid;place-items:center}
.film-dialog::backdrop{background:rgba(12,11,10,.86)}
.film-video{display:block;width:min(100%,calc(100vh * 16 / 9));max-height:100%;aspect-ratio:16/9;background:#000;object-fit:contain;margin:auto}
.film-video::cue{font:600 clamp(16px,2.6vw,30px)/1.4 var(--serif);color:#f7f2ea;background:rgba(12,11,10,.55);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.film-close{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:1;display:grid;place-items:center;width:44px;height:44px;font-size:16px;line-height:1;color:#f4efe7;background:rgba(12,11,10,.55);border:1px solid rgba(244,239,231,.34);border-radius:50%}
.film-close:hover,.film-close:focus-visible{background:rgba(12,11,10,.85);border-color:var(--accent);color:var(--accent)}
.film-sr-caption{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}