:root{--paper:#f6f7f4;--ink:#263331;--muted:#68716e;--line:#b6bfba;--light:#dce1dc;--surface:#fcfcfa;--gutter:clamp(24px,4vw,72px)}*{box-sizing:border-box}body{margin:0;height:100svh;min-height:480px;display:grid;grid-template-rows:76px minmax(0,1fr) 72px 58px;background:var(--paper);color:var(--ink);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button,a.outline,.topbar nav a{border:0;background:transparent;color:inherit;min-height:44px;padding:10px 17px;font:inherit;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:background .2s,color .2s}button:hover,a.outline:hover,.topbar nav a:hover{background:#e9ede7}button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}button:disabled{opacity:.3;cursor:default}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}.topbar,footer,.timeline{margin:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}.topbar{border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:600;letter-spacing:-.5px}.brand-mark{border:1px solid var(--ink);width:30px;height:34px;display:grid;place-items:center;font-family:Georgia,serif;font-weight:400}.brand-cn{font-size:16px;font-weight:400}.topbar nav{display:flex;gap:10px}.github svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}.github{padding:10px!important}main{position:relative;min-height:0;isolation:isolate;overflow:hidden}main:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#cbd4cd66 1px,transparent 1px),linear-gradient(90deg,#cbd4cd66 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at 69% 53%,#000 0%,#0009 40%,transparent 75%)}.intro{position:absolute;top:28%;left:var(--gutter);width:36%;z-index:3;transition:top .3s}.eyebrow{font-size:10px;letter-spacing:2.3px;color:var(--muted);margin-bottom:24px}h1{font-family:"Songti SC","STSong",Georgia,serif;font-size:clamp(36px,4.7vw,74px);font-weight:500;line-height:1.28;letter-spacing:-2px;margin:0 0 24px}h1 span{display:block}.intro>p{font-size:clamp(14px,1.3vw,19px);line-height:1.8;color:var(--muted);margin:0;max-width:29em}#end-actions{margin-top:24px}.stage{position:absolute;inset:0}.window{position:absolute;background:var(--surface);border:1px solid #89968e;box-shadow:5px 7px 0 #dce2da55;border-radius:5px;overflow:hidden}.note{left:57%;top:9%;width:36%;height:80%;z-index:2;display:flex;flex-direction:column;transition:left .3s,top .3s,width .3s,height .3s}.window-bar{height:38px;flex-shrink:0;border-bottom:1px solid var(--light);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:11px;color:var(--muted);letter-spacing:1px}.dots{letter-spacing:3px}.window-bar button{font-size:11px;padding:2px 8px;min-height:28px}.toolbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0}.project{font-size:12px;flex:1;white-space:nowrap}.tabs{display:flex}.tabs button{font-size:11px;min-height:32px;padding:6px 10px;margin-left:-1px}.tabs button.active{border-color:var(--ink);background:#eef0eb;z-index:1}.toolbar>button{padding:4px 9px;min-height:32px}.note-content{flex:1;min-height:0;display:flex;overflow:auto}.note-status{display:flex;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--light);font-size:10px;color:var(--muted);gap:8px}.empty{margin:auto;text-align:center;padding:24px}.empty-symbol{font-size:36px;font-weight:200;margin-bottom:20px}.empty h2{font-size:20px;font-weight:400}.empty p{color:var(--muted);font-size:13px;margin:16px 0 28px}.primary{border-color:var(--ink);box-shadow:3px 3px 0 #dce2da}.pane{padding:clamp(16px,2.2vw,34px);flex:1;min-width:0}.pane+.pane{border-left:1px solid var(--line)}.pane small{color:var(--muted);font-size:10px;letter-spacing:1px}.pane h2{font-size:clamp(16px,1.6vw,24px);font-weight:400;line-height:1.6;margin:22px 0}.pane p{font-size:13px;line-height:1.9;color:var(--muted)}.lines{display:grid;gap:12px;margin:24px 0}.lines i{display:block;height:1px;background:var(--light);width:100%}.lines i:last-child{width:65%}.source-card{border:1px solid var(--line);padding:18px;margin-top:22px;font-size:13px;line-height:1.8}.source-card small{display:block;margin-top:16px}.pane button{margin-top:16px;font-size:12px}.source{flex:.7}.side{flex:.7}.side h2{font-size:17px;margin-top:0}.task{border:1px solid var(--line);padding:14px;margin-top:20px;font-size:12px;line-height:1.8;display:flex;gap:8px}.task input{accent-color:var(--ink)}.chat{border:1px solid var(--line);padding:14px;line-height:1.8;font-size:12px;margin-top:20px}.chat.question{margin-left:20px;background:#f0f2ed}.browser{left:34%;top:14%;width:44%;height:71%;opacity:0;transform:translateY(20px);transition:opacity .25s,transform .3s;pointer-events:none}.browser-content{padding:26px}.browser h2{font-size:26px;font-weight:400}.browser small{font-size:10px;letter-spacing:2px}.address{border-bottom:1px solid var(--line);padding:10px 20px;font-size:11px;color:var(--muted)}blockquote{margin:20px 0;padding:12px;border:1px dashed var(--line);font:italic 16px Georgia,serif}.image-placeholder{height:90px;border:1px solid var(--light);margin-top:22px;display:grid;place-items:center;color:var(--muted);font-size:11px;background:linear-gradient(15deg,transparent 49.7%,var(--light) 50%,transparent 50.3%)}.guide{position:absolute;z-index:4;left:40%;top:69%;width:235px;border:1px solid var(--line);background:var(--surface);display:flex;gap:14px;padding:19px;transition:left .3s,top .3s;box-shadow:3px 3px 0 #dce2da66}.guide:after{content:"";position:absolute;width:13px;height:13px;right:-8px;top:28px;background:var(--surface);border-right:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}#guide-number{font:11px monospace;border:1px solid var(--line);width:26px;height:26px;flex-shrink:0;display:grid;place-items:center}.guide strong{font-size:13px;font-weight:400}.guide p{font-size:11px;color:var(--muted);line-height:1.6;margin:8px 0 0}.guide-arrow{position:absolute;top:-30px;right:0;font-size:25px}.toast{position:absolute;top:4%;right:8%;border:1px solid var(--line);padding:10px 18px;background:var(--surface);font-size:12px;z-index:5;opacity:0;transform:translateY(-8px);transition:.25s;pointer-events:none}.toast.visible{opacity:1;transform:none}.timeline{border-bottom:1px solid var(--line)}.progress{font:11px monospace;min-width:130px;color:var(--muted)}#steps{display:flex;gap:6px}#steps button{border:0;border-bottom:1px solid var(--light);padding:8px 10px;min-width:36px;font:11px monospace;color:var(--muted)}#steps button[aria-current=step]{border-bottom:2px solid var(--ink);color:var(--ink)}.step-controls{display:flex;gap:8px}.step-controls button{padding:8px 16px}footer{font-size:11px;color:var(--muted)}footer>span:first-child{color:var(--ink)}footer div{display:flex;gap:24px}.footer-note{font-size:10px;letter-spacing:1px}[data-scene="1"] .browser,[data-scene="2"] .browser{opacity:1;transform:none;pointer-events:auto}[data-scene="1"] .note,[data-scene="2"] .note{left:70%;top:25%;width:27%;height:66%}[data-scene="1"] .intro,[data-scene="2"] .intro{width:30%;top:25%}[data-scene="1"] h1,[data-scene="2"] h1{font-size:clamp(32px,3.8vw,60px)}[data-scene="1"] .guide,[data-scene="2"] .guide{left:43%;top:72%}[data-scene="5"] .intro{top:4%;width:80%}[data-scene="5"] .eyebrow{display:none}[data-scene="5"] h1{font-size:clamp(28px,3vw,44px);margin-bottom:8px}[data-scene="5"] h1 span{display:inline}[data-scene="5"] .note{left:14%;top:25%;width:66%;height:70%}[data-scene="5"] .guide{left:81%;top:34%;width:17%}[data-scene="6"] .note,[data-scene="7"] .note,[data-scene="8"] .note{left:34%;top:12%;width:62%;height:76%}[data-scene="6"] .intro,[data-scene="7"] .intro,[data-scene="8"] .intro{width:29%}[data-scene="6"] h1,[data-scene="7"] h1,[data-scene="8"] h1{font-size:clamp(32px,3.8vw,60px)}[data-scene="6"] .guide,[data-scene="7"] .guide,[data-scene="8"] .guide{left:17%;top:70%;width:230px}[data-scene="9"] .guide{display:none}.enter{animation:enter .28s ease both}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.toolbar{flex-wrap:wrap;gap:8px;padding:8px}.project{flex-basis:60%}.tabs{order:3;width:100%}.tabs button{flex:1}.guide{width:195px;left:38%}.footer-note{display:none}.pane{padding:18px}.source-card{padding:12px}.note-status{font-size:9px}.guide p{font-size:10px}}
@media(max-width:680px){body{grid-template-rows:64px minmax(0,1fr) 60px 42px;min-height:600px;--gutter:20px}.brand{font-size:17px;gap:8px}.brand-mark,#restart,.footer-tag{display:none}.topbar nav{gap:8px}.topbar nav a{font-size:12px;padding:8px 12px}.intro,main[data-scene] .intro{top:4%;left:20px;width:90%}.eyebrow{font-size:9px;margin-bottom:12px}h1,main[data-scene] h1{font-size:32px;line-height:1.3;letter-spacing:-1px;margin-bottom:10px}h1 span{display:inline}.intro>p{font-size:12px;max-width:95%}.note,main[data-scene] .note{left:8%;top:35%;width:84%;height:60%}.guide,main[data-scene] .guide{left:auto;right:8%;top:25%;width:auto;max-width:85%;padding:9px 12px;align-items:center;gap:8px;box-shadow:none}.guide p,.guide-arrow{display:none}.guide:after{width:9px;height:9px;right:22px;top:auto;bottom:-6px;transform:rotate(135deg)}#guide-number{width:22px;height:22px}.guide strong{font-size:11px}.toolbar{flex-wrap:nowrap;padding:8px 12px}.project{flex-basis:auto}.tabs{order:0;width:auto}.tabs button{padding:4px 8px}.window-bar{height:30px}.note-status{padding:8px}.pane{padding:16px}.pane h2{font-size:16px;margin:12px 0}.pane p{font-size:12px}.lines{gap:10px;margin:16px 0}.empty{padding:16px}.empty-symbol{margin-bottom:8px;font-size:24px}.empty h2{font-size:17px}.empty p{margin:12px 0 18px}.browser,main[data-scene] .browser{left:5%;top:33%;width:65%;height:57%}.browser-content{padding:16px}.browser h2{font-size:17px}.browser .lines,.image-placeholder{display:none}.browser blockquote{font-size:13px;margin:16px 0}.browser button{padding:8px;font-size:12px}[data-scene="1"] .note,[data-scene="2"] .note{left:57%;top:45%;width:40%;height:50%}[data-scene="1"] .note .project,[data-scene="2"] .note .project,[data-scene="1"] .note .tabs,[data-scene="2"] .note .tabs{display:none}[data-scene="1"] .note-status,[data-scene="2"] .note-status{display:none}.source-card{margin-top:12px;font-size:11px}.source-card small{font-size:9px}[data-scene="6"] .source,[data-scene="7"] .source,[data-scene="8"] .source{display:none}.side{flex:.85}.side h2{font-size:14px}.task,.chat{padding:9px;font-size:11px}.pane button{padding:8px;font-size:11px}.timeline{gap:8px}.progress{min-width:0;font-size:10px}#steps{gap:0}#steps button{padding:8px 5px;min-width:18px;font-size:9px}.step-controls{gap:4px}.step-controls button{padding:8px;min-width:32px}.timeline{margin:0 12px}footer{font-size:10px}footer div{gap:16px}#end-actions{margin-top:10px}#end-actions a{min-height:32px;font-size:11px;padding:6px 12px}.toast{top:29%;right:8%;font-size:10px}.note-content{overflow:auto}}
@media(max-height:650px) and (min-width:681px){body{grid-template-rows:60px minmax(0,1fr) 54px 42px}.intro{top:20%}h1{font-size:44px}.eyebrow{margin-bottom:12px}.pane{padding:18px}.pane h2{margin:12px 0}.lines{margin:16px 0}.guide{padding:12px}.empty-symbol{margin-bottom:8px}.empty p{margin:12px 0}.browser-content{padding:16px}.image-placeholder{height:48px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:680px){h1 span,main[data-scene="5"] h1 span{display:block}h1,main[data-scene] h1{font-size:28px}.progress{white-space:nowrap;font-size:9px}#steps button{width:18px;min-width:0;padding:8px 2px}#steps{flex-shrink:0}}
/* Quiet chapter navigation and one persistent, button-anchored speech bubble. */
.timeline{justify-content:center;border:0}
#steps{gap:8px}
#steps button{border:0!important;width:36px;min-width:36px;padding:0;min-height:44px;background:transparent}
#steps button span{width:24px;height:2px;background:var(--line);transition:background .25s,transform .25s}
#steps button[aria-current=step] span{background:var(--ink);transform:scaleX(1.35)}
#steps button:hover span{background:var(--ink)}
footer{border-top:1px solid var(--line)}
.guide,main[data-scene] .guide{position:absolute;left:0;top:0;right:auto;width:max-content;max-width:220px;padding:12px 16px;display:block;box-shadow:none;pointer-events:none;transition:transform .7s cubic-bezier(.22,.7,.25,1);will-change:transform}
.guide[hidden],main[data-scene] .guide[hidden]{display:none}
.guide strong{font-size:12px;white-space:nowrap}
.guide:after,main[data-scene] .guide:after{width:10px;height:10px;left:calc(var(--tip-x, 50%) - 5px);right:auto;top:auto;bottom:-6px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.guide[data-side=top]:after{bottom:auto;top:-6px;transform:rotate(225deg)}
/* Dual-column and action states share the same title and window anchor. */
main[data-scene="5"] .intro,main[data-scene="6"] .intro,main[data-scene="7"] .intro{top:28%;width:29%}
main[data-scene="5"] h1,main[data-scene="6"] h1,main[data-scene="7"] h1{font-size:clamp(32px,3.8vw,60px);margin-bottom:24px}
main[data-scene="5"] h1 span{display:block}
main[data-scene="5"] .note{left:34%;top:12%;width:62%;height:76%}
.capture-in{animation:capture-in .55s ease both}
@keyframes capture-in{from{opacity:0;transform:translate(-24px,10px)}to{opacity:1;transform:translate(0,0)}}
@media(max-width:680px){
 main[data-scene="5"] .intro,main[data-scene="6"] .intro,main[data-scene="7"] .intro{top:4%;left:20px;width:90%}
 main[data-scene="5"] h1,main[data-scene="6"] h1,main[data-scene="7"] h1{font-size:28px;margin-bottom:10px}
 main[data-scene="5"] .note{left:8%;top:35%;width:84%;height:60%}
 .guide,main[data-scene] .guide{max-width:190px;padding:9px 12px}
 .guide strong{font-size:11px}
 #steps button{width:32px;min-width:32px}
}
.guide[data-side=right]:after,main[data-scene] .guide[data-side=right]:after{left:auto;right:-6px;top:calc(50% - 5px);bottom:auto;transform:rotate(-45deg)}
/* Three layout families share a baseline and a compact navigation strip. */
body{grid-template-rows:72px minmax(0,1fr) 40px 40px}
#steps button{min-height:36px}
.guide,main[data-scene] .guide{width:224px;max-width:224px;padding:14px 17px}
.guide strong{font-size:13px;white-space:normal;line-height:1.5}
.guide p{display:block;font-size:11px;line-height:1.65;margin:6px 0 0}
.guide[data-side=top]:after,main[data-scene] .guide[data-side=top]:after{bottom:auto;top:-6px;transform:rotate(225deg)}
@media(min-width:681px){
 .intro,main[data-scene] .intro{top:50%;transform:translateY(-50%);left:var(--gutter);width:36%;transition:none}
 h1,main[data-scene] h1{font-size:clamp(44px,5.65vw,88px);line-height:1.26;margin:0 0 24px;letter-spacing:-2px}
 h1 span,main[data-scene] h1 span{display:block}
 .intro>p{font-size:clamp(14px,1.35vw,20px);max-width:26em;line-height:1.85}
 .note,main[data-scene] .note{left:45%;width:calc(55% - var(--gutter));top:36px;bottom:8px;height:auto}
 .pane{padding:clamp(20px,2.3vw,36px)}
 .note-content>.pane:only-child{padding:clamp(24px,3vw,48px)}
 .pane h2{font-size:clamp(19px,1.8vw,27px)}
 .pane p{font-size:clamp(13px,1.05vw,16px)}
 .empty h2{font-size:24px}
 .empty p{font-size:14px}
 /* Collection: the overlapping windows form one larger composition. */
 main[data-scene="1"] .intro,main[data-scene="2"] .intro{width:27%}
 main[data-scene="1"] h1,main[data-scene="2"] h1{font-size:clamp(40px,5.05vw,78px)}
 .browser,main[data-scene] .browser{left:33%;width:49%;top:36px;bottom:28px;height:auto}
 main[data-scene="1"] .note,main[data-scene="2"] .note{left:69%;width:calc(31% - var(--gutter));top:100px;bottom:8px;height:auto}
 .browser-content{padding:clamp(24px,3vw,44px);padding-right:26%}
 .browser h2{font-size:clamp(24px,2.5vw,36px);line-height:1.4}
 .browser blockquote{line-height:1.8}
 .browser .image-placeholder{height:clamp(80px,16vh,160px)}
 /* Wide workspace: keep the outer frame stable as side panels change. */
 main[data-scene="5"] .intro,main[data-scene="6"] .intro,main[data-scene="7"] .intro,main[data-scene="8"] .intro{width:27%}
 main[data-scene="5"] h1,main[data-scene="6"] h1,main[data-scene="7"] h1,main[data-scene="8"] h1{font-size:clamp(35px,4.3vw,66px)}
 main[data-scene="5"] .note,main[data-scene="6"] .note,main[data-scene="7"] .note,main[data-scene="8"] .note{left:34%;width:calc(66% - var(--gutter));top:36px;bottom:8px;height:auto}
 main[data-scene="5"] .source{flex:.85}
 main[data-scene="6"] .source,main[data-scene="7"] .source,main[data-scene="8"] .source{flex:.55}
 .side{flex:.8}
 .side h2{font-size:18px}
 main[data-scene="8"] .side{flex:1}
 main[data-scene="6"] .pane,main[data-scene="7"] .pane,main[data-scene="8"] .pane{padding:clamp(16px,1.5vw,24px)}
}
@media(min-width:681px) and (max-width:1000px){
 .toolbar{flex-wrap:nowrap;padding:10px;gap:8px}
 .project{flex-basis:auto;font-size:11px}
 .tabs{order:0;width:auto}
 .tabs button{padding:6px 8px}
 main[data-scene="1"] .toolbar,main[data-scene="2"] .toolbar{flex-wrap:wrap}
 main[data-scene="1"] .tabs,main[data-scene="2"] .tabs{order:3;width:100%}
 .guide,main[data-scene] .guide{width:204px;max-width:204px}
}
@media(max-width:680px){
 body{grid-template-rows:60px minmax(0,1fr) 36px 34px}
 .intro,main[data-scene] .intro{top:22px;left:20px;width:calc(100% - 40px);transform:none}
 h1,main[data-scene] h1{font-size:32px;line-height:1.25;margin-bottom:10px}
 .note,main[data-scene] .note{left:5%;width:90%;top:190px;bottom:6px;height:auto}
 .browser,main[data-scene] .browser{left:4%;width:68%;top:185px;bottom:22px;height:auto}
 main[data-scene="1"] .note,main[data-scene="2"] .note{left:56%;width:41%;top:275px;bottom:6px;height:auto}
 main[data-scene="1"] .note .tabs,main[data-scene="2"] .note .tabs{display:flex;width:100%}
 main[data-scene="1"] .toolbar,main[data-scene="2"] .toolbar{flex-wrap:wrap}
 main[data-scene="1"] .tabs button,main[data-scene="2"] .tabs button{font-size:10px;padding:4px}
 .guide,main[data-scene] .guide{width:190px;max-width:190px;padding:10px 12px}
 .guide strong{font-size:12px}
 .guide p{display:block;font-size:10px}
 #steps{gap:6px}
 #steps button{width:30px;min-width:30px;min-height:34px}
}
@media(max-height:650px) and (min-width:681px){body{grid-template-rows:60px minmax(0,1fr) 34px 34px}.note,main[data-scene] .note{top:22px}.browser,main[data-scene] .browser{top:22px}main[data-scene="1"] .note,main[data-scene="2"] .note{top:68px}}

/* Warm paper, bold handwritten typography, and uninterrupted editorial rules. */
@font-face{font-family:"FloatNote WenKai";src:url("../assets/fonts/wenkai-bold-subset.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
:root{--paper:#f7f4ed;--ink:#20211e;--muted:#555750;--accent:#34734e;--line:#a5a79e;--display:"FloatNote WenKai","Kaiti SC","STKaiti",serif;--editorial:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif}
body{font-family:var(--editorial);isolation:isolate}
#ambient-grid{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.45}
main:before{display:none}
.topbar,footer{margin:0;padding-inline:var(--gutter);border-color:var(--ink)}
.brand{gap:11px;font-weight:700;letter-spacing:0}
.brand:hover{text-decoration:none}
.brand-mark{display:block;width:40px;height:40px;border:0;flex-shrink:0;object-fit:contain}
.brand-name{font-family:var(--display);font-size:29px;font-weight:700;letter-spacing:-1.2px}
/* Topbar actions are square editorial chips; no capsule shapes. */
.topbar nav .github{width:44px}
.topbar nav .github:hover{background:transparent;color:var(--accent)}
.github svg{fill:currentColor;stroke:none;width:26px;height:26px;transition:transform .2s}
.topbar nav .github:hover svg{transform:scale(1.08)}
.topbar{position:relative;z-index:6}
/* The language switcher is plain text; only the text color changes on hover. */
.lang-switch{position:relative;display:flex}
#lang-toggle{gap:6px;padding:10px 14px;font-size:13px;letter-spacing:.02em;background:transparent}
#lang-toggle:hover,#lang-toggle[aria-expanded="true"]{background:transparent;color:var(--accent)}
#lang-toggle .ph{font-size:12px;color:var(--muted);transition:color .2s}
#lang-toggle:hover .ph,#lang-toggle[aria-expanded="true"] .ph{color:var(--accent)}
/* Each language label uses the typeface of its own language. */
html[data-lang="zh"] #lang-current,.lang-menu button[data-lang="zh"] span{font-family:var(--display);font-weight:700;letter-spacing:.02em}
html[data-lang="en"] #lang-current,.lang-menu button[data-lang="en"] span{font-family:Georgia,"Times New Roman",serif;letter-spacing:.01em}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:148px;background:var(--surface);border:0;border-radius:10px;padding:6px;display:grid;gap:2px;box-shadow:0 10px 30px #203b2926,0 2px 8px #203b2914;z-index:20}
.lang-menu[hidden]{display:none}
.lang-menu button{border:0;min-height:38px;padding:8px 12px;font-size:13px;background:transparent;justify-content:flex-start}
.lang-menu button:hover{background:#e9ede7}
.lang-menu button .ph{margin-left:auto;color:var(--accent);opacity:0;font-size:14px}
.lang-menu button[aria-checked="true"] .ph{opacity:1}
.topbar nav .download-link,#end-actions .download-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 25px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--display);font-size:17px;font-weight:700;line-height:1.25;letter-spacing:.04em;box-shadow:none;transition:background .2s}
.topbar nav .download-link:hover,#end-actions .download-link:hover{background:var(--accent);text-decoration:none}
/* The app name inside download buttons takes a light tint of the accent green. */
.download-link .app-name{color:#9fd3b2;transition:color .2s}
.download-link .app-name:empty{display:none}
.download-link:hover .app-name{color:#dff1e5}
#headline{font-family:var(--display);font-weight:700;letter-spacing:-.055em;line-height:1.3;color:var(--ink)}
.headline-accent{font-style:normal;color:var(--accent);text-decoration:none}
.intro>p{font-family:var(--display);font-weight:700;letter-spacing:.015em;color:var(--muted);line-height:1.8}
footer{font-family:var(--editorial);letter-spacing:.04em}
/* Preserve the product's familiar interface typography inside the demo. */
.stage{font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
@media(max-width:680px){.brand-mark{display:block;width:30px;height:30px}.brand-name{font-size:24px}.brand{gap:7px}.topbar nav{gap:4px}.topbar nav .download-link{padding:9px 16px;font-size:14px;letter-spacing:0}.topbar nav .github{width:36px}.github svg{width:22px;height:22px}#lang-toggle{padding:8px 10px;min-height:36px;font-size:12px}.lang-menu{min-width:132px}.intro>p{font-size:14px}#end-actions .download-link{min-height:36px;font-size:14px;padding:7px 18px}}
@media(max-width:680px){main[data-scene="9"] .note{top:210px}}

/* Cloudflare Pages serves this lightweight fallback for unknown routes. */
.error-page{display:grid;grid-template-rows:1fr;min-height:100svh;height:auto;place-items:center;padding:24px;text-align:center}
.error-content{position:static;overflow:visible;max-width:680px}
.error-content .error-code{font:700 14px/1 var(--editorial);letter-spacing:.24em;color:var(--accent);margin:0 0 24px}
.error-content h1{font-family:var(--display);font-size:clamp(36px,8vw,72px);margin-bottom:18px}
.error-content>p{color:var(--muted);margin:0 0 30px}
.error-content .download-link{display:inline-flex}

/* The next action uses the same forest green as the editorial headline. */
:root{--guide-surface:#2d6244;--guide-ink:#fffdf6;--guide-muted:#e1ecdf}
.guide,main[data-scene] .guide{background:var(--guide-surface);color:var(--guide-ink);border:1px solid var(--guide-surface);border-radius:10px;padding:14px 17px;box-shadow:0 5px 0 #203b2920,0 10px 24px #203b2926;transition:none}
.guide strong{font-size:14px;font-weight:600;line-height:1.55}
.guide p{color:var(--guide-muted);font-size:12px;line-height:1.7;margin-top:5px}
.guide:after,main[data-scene] .guide:after{background:var(--guide-surface);border-color:var(--guide-surface)}
@media(max-width:680px){
 .guide,main[data-scene] .guide{padding:11px 13px;border-radius:8px}
 .guide strong{font-size:13px}
 .guide p{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 .note,.browser,#steps button span{transition:none!important}
 .capture-in,.enter{animation:none!important}
}

/* A single pointer glides around the rounded bubble perimeter. */
.guide::after,main[data-scene] .guide[data-side]::after{
 left:var(--pointer-x,50%);top:var(--pointer-y,0px);right:auto;bottom:auto;
 width:14px;height:9px;border:0;background:var(--guide-surface);
 clip-path:polygon(0 100%,50% 0,100% 100%);
 transform:translate(-50%,-100%) rotate(var(--pointer-angle,0deg)) translateY(2px);
 transform-origin:50% 100%;
}

/* The finale bubble points nowhere and carries the closing call to action. */
.guide[data-side=none]:after,main[data-scene] .guide[data-side=none]:after{display:none}
#guide-text[hidden],#guide-done[hidden]{display:none}
#guide-done{pointer-events:auto;gap:8px;margin-top:11px;padding:8px 15px;min-height:34px;border:0;border-radius:999px;background:var(--guide-ink);color:var(--guide-surface);font-size:12px;font-weight:600;box-shadow:none}
#guide-done:hover{background:#fff}
#guide-done:focus-visible{outline-color:var(--guide-ink)}
#guide-done .ph{font-size:14px}

/* Keep grid tracks and mobile navigation inside the visual viewport. */
body{grid-template-columns:minmax(0,1fr);overflow-x:hidden}
.topbar,main,.timeline,footer{min-width:0}
@media(max-width:480px){
 .topbar{margin:0;padding-inline:16px;gap:8px}
 .brand-name{font-size:22px}
 .topbar nav .download-link{padding:8px 12px;font-size:13px}
 #lang-toggle{padding-inline:6px}
}
@media(max-width:360px){.brand-name{display:none}}

/* Direct-download chooser: desktop variants stay explicit when architecture is unknown. */
.download-dialog{width:min(92vw,520px);max-width:none;padding:0;border:0;border-radius:18px;background:transparent;color:var(--ink);box-shadow:0 24px 80px #14261b40}
.download-dialog::backdrop{background:#18201bb8;backdrop-filter:blur(4px)}
.download-card{position:relative;padding:34px;background:var(--surface);border-radius:18px}
.download-close{position:absolute;top:14px;right:14px;width:44px;min-height:44px;padding:0;border-radius:50%;font-size:20px}
.download-kicker{margin:0 0 10px;color:var(--accent);font:700 11px/1 var(--editorial);letter-spacing:.18em}
.download-card h2{margin:0 48px 8px 0;font-family:var(--display);font-size:32px;line-height:1.3;letter-spacing:-.04em}
.download-message{margin:0 0 24px;color:var(--muted);font-size:14px;line-height:1.7}
.download-options{display:grid;gap:10px}
.download-options[hidden]{display:none}
.download-options a[hidden]{display:none}
.download-options a{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:13px;min-height:68px;padding:12px 15px;border:1px solid var(--line);border-radius:12px;background:var(--paper);text-decoration:none;transition:border-color .2s,background .2s,transform .2s}
.download-options a:hover{border-color:var(--accent);background:#edf3eb;text-decoration:none;transform:translateY(-1px)}
.download-options a:focus-visible{outline:3px solid #34734e55;outline-offset:2px}
.download-options a>.ph{font-size:23px;color:var(--accent)}
.download-options strong,.download-options small{display:block}
.download-options strong{font-size:14px;font-weight:650;line-height:1.45}
.download-options small{margin-top:2px;color:var(--muted);font-size:11px;line-height:1.45}
.download-options a.is-recommended{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.recommendation{padding:4px 7px;border-radius:999px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em}
body:has(.download-dialog[open]){overflow:hidden}
@media(max-width:680px){
 .download-card{padding:28px 22px 24px}
 .download-card h2{font-size:27px}
 .download-message{font-size:14px;margin-bottom:8px}
}