:root {
  --page-scale:1; --layout-width:100%; --layout-vw:1vw; --layout-vh:1svh;
  --bg:#faf6ed; --paper:#fffdf7; --ink:#30302e; --muted:#77736c; --line:#dfdad0;
  --soft:#f2e9d9; --accent:#a45f24; --accent-hover:#854819; --accent-soft:#f4dfbd; --deep:#343431; --nav:84px; --radius:18px;
  --sans:"Segoe UI","Noto Sans CJK SC",system-ui,sans-serif;
  --serif:"Iowan Old Style",Georgia,"Noto Serif CJK SC",serif;
  font:16px/1.65 var(--sans); color:var(--ink); background:var(--bg); font-synthesis:none;
  scroll-padding-top:calc((var(--nav) + 24px) * var(--page-scale)); scroll-behavior:smooth;
}
* {box-sizing:border-box} body {width:var(--layout-width);margin:0 auto;zoom:var(--page-scale)} button,input,textarea,select {font:inherit;color:inherit}
@media print {body {width:auto;zoom:1}}
button {cursor:pointer;border:0;background:none} a {color:inherit;text-decoration:none}
button,a,input,textarea,summary {touch-action:manipulation} [hidden] {display:none!important}
p {margin:0 0 1.2em} h1,h2,h3 {margin:0;font-weight:550} img,svg {max-width:100%}
button:disabled {opacity:.45;cursor:not-allowed} :focus-visible {outline:3px solid var(--accent);outline-offset:4px}
::selection {background:var(--accent-soft);color:var(--ink)} .sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.shell {width:calc(100% - clamp(32px,calc(var(--layout-vw) * 7.8),120px));margin-inline:auto}
.small {font-size:12px;line-height:1.75;color:var(--muted)} .eyebrow {display:flex;align-items:center;gap:10px;font-size:10px;font-weight:650;letter-spacing:.105em;line-height:1.7;margin-bottom:24px}
.status-dot {display:inline-block;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:#d69843}
.lead {font-size:17px;line-height:1.85;color:#6c6962;max-width:510px}
h1 {font-size:clamp(50px,calc(var(--layout-vw) * 5.15),80px);letter-spacing:-.065em;line-height:1.08;margin-bottom:28px}
h2 {font-size:clamp(36px,calc(var(--layout-vw) * 3.55),55px);letter-spacing:-.045em;line-height:1.16;margin-bottom:26px}
h1 span,h1 em,h2 span,h2 em {display:block} h1 em,h2 em {font-family:var(--serif);font-weight:400;letter-spacing:-.055em;color:var(--accent)}
h3 {font-size:22px;line-height:1.4;letter-spacing:-.035em}
.actions {display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:24px 0 16px}
.button {display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;border:1px solid transparent;border-radius:9px;background:var(--deep);color:var(--paper);padding:12px 20px;font-size:14px;line-height:1.4;font-weight:550;transition:background .18s}
.button:hover {background:#4b4a44}.button.primary {background:var(--accent-soft);color:var(--ink)}.button.primary:hover {background:#e4d6b8}.button.compact {font-size:13px;min-height:40px;padding:10px 16px}
.text-link {display:inline-flex;align-items:center;font-size:14px;min-height:44px;padding:0;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#bcb3a2}.text-link:hover {text-decoration-color:currentColor}
.quiet {font-size:13px;min-height:44px;padding:8px 12px;border-radius:7px}.quiet:hover {background:var(--soft)}
.skip-link {position:fixed;top:-80px;left:16px;z-index:1000;background:var(--deep);color:white;padding:12px 24px}.skip-link:focus {top:12px}
.site-header {position:sticky;top:0;z-index:50;background:rgba(250,246,237,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.nav {height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:28px}.brand {display:inline-flex;align-items:center;gap:11px;font-size:21px;font-weight:650;letter-spacing:-.04em;flex-shrink:0;line-height:1.2}
.brand small {display:block;font-size:7px;letter-spacing:.13em;color:var(--muted);font-weight:500;margin-top:5px}
.brand-mark {width:32px;height:32px;object-fit:contain;display:block;flex-shrink:0}
#navigation {display:flex;gap:28px;align-items:center}#navigation a {position:relative;display:flex;align-items:center;min-height:48px;font-size:14px;color:#706d66}
#navigation a[aria-current=true] {color:var(--accent)}#navigation a[aria-current=true]:after {content:"";position:absolute;bottom:1px;left:0;right:0;height:2px;background:var(--accent)}
.nav-actions {display:flex;align-items:center;gap:20px}.github-link {font-size:12px;white-space:nowrap}.menu-toggle {display:none}
/* Both columns extend through all five chapters. No viewport-height rule removes the stage. */
.story {overflow-anchor:none;display:grid;grid-template-columns:minmax(0,.39fr) minmax(0,.61fr);gap:clamp(30px,calc(var(--layout-vw) * 4),64px);padding-top:24px}
.story-copy,.desktop-stage {min-width:0}.chapter {min-height:calc(calc(var(--layout-vh) * 100) - var(--nav));display:flex;align-items:center;padding:56px 0;scroll-margin-top:calc(var(--nav) + 20px)}
.chapter-copy {width:100%;max-width:500px;margin-inline:auto}.hero .lead {max-width:450px}.hero .actions {gap:15px}.hero .button {padding-inline:17px}
.hero #try-demo {margin-left:auto;white-space:nowrap}
.scroll-cue {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:max-content;min-width:80px;margin:28px auto 0;text-align:center;color:var(--muted);font-size:12px;line-height:1.65}.scroll-cue>span:last-child {font-size:25px;line-height:1}.scroll-cue:hover {color:var(--ink)}
.script-cycle {min-width:168px}
.chapter-step {display:none}
.appearance {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px}.appearance>.small {margin:0}.swatches {display:flex;gap:0}.swatches button {width:32px;height:40px;display:grid;place-items:center;padding:4px}
.swatches i {display:block;width:16px;height:16px;border:1px solid #b0a594;border-radius:50%;background:var(--swatch)}.swatches [aria-pressed=true] i {outline:2px solid var(--p-active);outline-offset:3px}
.mode-switch {display:inline-flex;gap:3px;flex-wrap:wrap;padding:5px;border-radius:10px;border:1px solid var(--line);background:#eeeae1;margin:5px 0 16px}
.mode-switch button {font-size:13px;min-height:42px;border-radius:6px;padding:8px 15px;color:#716b60}.mode-switch button[aria-pressed=true] {background:var(--paper);color:var(--ink);box-shadow:0 2px 6px #342e2010}
.desktop-stage {position:relative}.stage-sticky {position:sticky;top:calc(var(--nav) + 24px)}
.stage-caption {display:flex;justify-content:space-between;gap:12px;padding:12px 4px;font-size:11px;color:#8a8377}.chapter-tabs,.mobile-chapter-controls {display:none}
/* Palette values carried forward from the source-checked fusion baseline. */
.scene {--p-bg:#fff9ea;--p-border:#e0cea7;--p-text:#33291e;--p-weak:#8a7a63;--p-active:#8c7350;--p-code:#f7edd2;--p-link:#b06242;--p-check:#b4a078}
[data-palette=ink] {--p-bg:#f6f7f9;--p-border:#d0d6de;--p-text:#262c36;--p-weak:#767e8a;--p-active:#5a6c86;--p-code:#eceff3;--p-link:#42689c;--p-check:#aab4c2}
[data-palette=forest] {--p-bg:#f3f8f1;--p-border:#c8dac6;--p-text:#26322a;--p-weak:#6e8070;--p-active:#588260;--p-code:#e9f2e7;--p-link:#3c8260;--p-check:#a8c0a8}
[data-palette=rose] {--p-bg:#fdf5f6;--p-border:#e4cdd2;--p-text:#36262a;--p-weak:#8c7278;--p-active:#9e6876;--p-code:#f8ecee;--p-link:#b2546e;--p-check:#d8b8c0}
[data-palette=warm][data-dark=true] {--p-bg:#211f1c;--p-border:#4c453d;--p-text:#e7e0d4;--p-weak:#92897b;--p-active:#a88e6a;--p-code:#2d2a26;--p-link:#d69678;--p-check:#6e6455}
[data-palette=ink][data-dark=true] {--p-bg:#1a1c20;--p-border:#3c424c;--p-text:#dee3ea;--p-weak:#8a929e;--p-active:#849cbc;--p-code:#26292f;--p-link:#84aad6;--p-check:#606a78}
[data-palette=forest][data-dark=true] {--p-bg:#1a1e1b;--p-border:#3a463c;--p-text:#dce4dc;--p-weak:#869488;--p-active:#7ca886;--p-code:#252a26;--p-link:#80be96;--p-check:#5c6e5e}
[data-palette=rose][data-dark=true] {--p-bg:#211c1e;--p-border:#4e4044;--p-text:#e8dcdf;--p-weak:#988489;--p-active:#be8694;--p-code:#2c2628;--p-link:#e094aa;--p-check:#604e52}

/* Native app proportions at a 1 CSS px / DIP reference scale; coarse-pointer hit
   areas expand separately from their 30px visible capsule silhouettes. */
.scene {
  --app-chrome:"Microsoft YaHei UI","Microsoft YaHei","Segoe UI","Noto Sans CJK SC",sans-serif;
  --app-body:"Segoe UI","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --p-tint:#785c30; --title-tint:4.7%; --divider-tint:11%;
  --capsule-body-height:30px; --capsule-hit-height:30px; --capsule-gap:12px;
}
.scene[data-palette=ink] {--p-tint:#465a78}
.scene[data-palette=forest] {--p-tint:#466e50}
.scene[data-palette=rose] {--p-tint:#965060}
.scene[data-dark=true] {--title-tint:7%;--divider-tint:13.3%}
.scene[data-palette=warm][data-dark=true] {--p-tint:#e6dfd3}
.scene[data-palette=ink][data-dark=true] {--p-tint:#b4c8e4}
.scene[data-palette=forest][data-dark=true] {--p-tint:#b4d0ba}
.scene[data-palette=rose][data-dark=true] {--p-tint:#e0b4be}

.scene {height:calc(calc(var(--layout-vh) * 100) - var(--nav) - 60px);min-height:350px;display:flex;flex-direction:column;position:relative;isolation:isolate;background:#f1e9da;border:1px solid #ddcaab;border-radius:var(--radius);box-shadow:0 12px 55px #9c672b0c;overflow-anchor:none}
.scene-top {display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:10px 18px;background:#f5f1e8;border-radius:var(--radius) var(--radius) 0 0;color:#777063;font-size:10px;border-bottom:1px solid #dcd5c8;flex-shrink:0}
.scene-top>span:first-child {display:flex;align-items:center;gap:11px;letter-spacing:.12em}.scene-top>span:last-child {font-size:10px;color:#81786a}
.mini-paper {width:14px;height:18px;display:block;transform:rotate(-8deg);border-radius:2px;background:#726a5d;position:relative}.mini-paper:after {content:"";position:absolute;right:0;top:0;border-left:5px solid #e1d5bd;border-top:5px solid #f5f1e8}
.scene-canvas {position:relative;flex:1;min-height:0;overflow:hidden;border-top-left-radius:inherit;border-top-right-radius:inherit;background-image:radial-gradient(#8d81701c .6px,transparent .6px);background-size:6px 6px;isolation:isolate}
.scene {--rail-width:104px}
.paper-deck {position:absolute;inset:20px calc(var(--rail-width) + 16px) 24px 20px;pointer-events:none;z-index:2}
.paper {position:absolute;background:var(--p-bg);color:var(--p-text);border:1px solid var(--p-border);border-radius:16px;box-shadow:0 2px 14px #00000024;font-family:var(--app-body);display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0;pointer-events:auto;transform-origin:top left}




.paper-header {cursor:grab;touch-action:none;user-select:none;min-height:30px;display:flex;align-items:center;gap:4px;flex-shrink:0;border-bottom:1px solid color-mix(in srgb,var(--p-tint) var(--divider-tint),transparent);padding:2px 6px;background:color-mix(in srgb,var(--p-tint) var(--title-tint),var(--p-bg))}
.paper.is-dragging {box-shadow:0 12px 30px #30291f30}.paper.is-dragging .paper-header {cursor:grabbing}.paper-header:focus-visible {outline-offset:-4px}
.paper-header h3 {font:400 12px/1.4 var(--app-chrome);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin:0;letter-spacing:0}
.paper-type {color:var(--p-weak);display:flex;align-items:center;padding:0 3px}.paper-type svg {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon-button {width:24px;height:24px;display:grid;place-items:center;flex-shrink:0;border-radius:8px;padding:4px;color:var(--p-weak)}
.icon-button svg,.task-link svg {width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.icon-button:hover,.task-link:hover {background:color-mix(in srgb,var(--p-active) 14%,transparent)}
.paper-body {padding:15px 18px;overflow:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:var(--p-border) transparent}
#todo-body {padding:5px 10px}.paper-footer {min-height:24px;padding:3px 12px;display:flex;align-items:center;justify-content:flex-end;font:10.5px/1.4 var(--app-chrome);color:var(--p-weak);flex-shrink:0}
.todo-row {display:flex;align-items:center;min-height:34px;gap:0;border:0;border-radius:8px;margin:2px 0;padding:2px}.todo-row:last-child {border:0}
.task-check {display:flex;align-items:center;gap:9px;min-height:30px;flex:1;min-width:0;cursor:pointer;padding:3px 5px}
.task-check input,.md-task input {accent-color:var(--p-active);height:16px;width:16px;flex-shrink:0;margin:0}.task-text {font:14px/1.55 var(--app-body);overflow-wrap:anywhere}
.task-check:has(input:checked) .task-text {text-decoration:line-through;color:var(--p-weak)}.task-link {flex-shrink:0;width:26px;min-height:28px;color:var(--p-link);display:grid;place-items:center;border-radius:8px;padding:4px}
.markdown {font:14px/1.7 var(--app-body);overflow-wrap:anywhere}.markdown p {margin:9px 0 14px}.markdown h3 {font:600 20px/1.45 var(--app-body);letter-spacing:-.025em;margin:2px 0 16px}.markdown h4 {font:600 16px/1.5 var(--app-body);margin:22px 0 8px}.markdown h5 {font-size:15px}
.markdown a {color:var(--p-link);text-decoration:underline;text-underline-offset:3px}.markdown ul,.markdown ol {padding-left:21px;margin:9px 0 15px}.markdown ul:has(.md-task) {list-style:none;padding:0}
.md-task label {display:flex;align-items:center;gap:10px;min-height:36px;cursor:pointer}.md-task:has(input:checked) span {text-decoration:line-through;color:var(--p-weak)}
.markdown blockquote {margin:20px 0;padding:7px 0 7px 13px;border-left:3px solid var(--p-border);color:color-mix(in srgb,var(--p-text) 76%,var(--p-weak));font-size:13px}
.markdown code {font:12px/1.7 ui-monospace,Consolas,monospace;background:var(--p-code);padding:2px 5px;border-radius:3px}
.markdown pre {padding:12px;margin:16px 0;background:var(--p-code);border-radius:5px;font:12px/1.7 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto}.markdown pre code {padding:0}.markdown hr {border:0;border-top:1px solid var(--p-border)}
.markdown .plain-note {white-space:pre-wrap;font:inherit;color:inherit;background:none;margin:0;padding:0;border:0;border-radius:0}
.md-illustration {width:100%;max-width:320px;margin:12px 0 16px}
.md-illustration img {display:block;width:100%;height:auto;max-height:112px;object-fit:cover;border:1px solid var(--p-border);border-radius:7px}
.md-illustration figcaption {margin-top:5px;font:10px/1.5 var(--app-body);color:var(--p-weak)}
.basic-line {white-space:pre-wrap;min-height:1em}.basic-heading {font-weight:650;font-size:17px;line-height:1.6;margin-top:8px}.basic-quote {color:var(--p-weak);border-left:2px solid var(--p-border);padding-left:8px}.basic-code {color:var(--p-link);font-family:monospace;font-size:12px}
.scene[data-view=markdown] #note-body {padding:24px 28px}.scene[data-view=markdown] .markdown {font-size:15px}.scene[data-view=markdown] .markdown h3 {font-size:24px}
.scene-bottom {display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:44px;border-top:1px solid #dcd5c8;background:#f5f1e8;border-radius:0 0 var(--radius) var(--radius);font-size:10px;color:#81786a;padding:2px 14px;flex-shrink:0}
.scene-bottom .appearance {margin:0;gap:8px;flex-wrap:nowrap;justify-content:flex-end}
.scene-bottom .appearance>.small {font-size:11px;white-space:nowrap}
.scene-bottom .appearance .quiet {font-size:12px;white-space:nowrap;padding:6px 10px}
.theme-switch {--switch-width:38px;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0;border-radius:6px;font-size:11px;white-space:nowrap}
.theme-track {display:block;flex-shrink:0;width:var(--switch-width);height:22px;padding:3px;border:1px solid #bfb4a1;border-radius:999px;background:#e4ddd0;transition:background .18s,border-color .18s}
.theme-track:after {content:"";display:block;width:14px;height:14px;border-radius:50%;background:#fffef8;box-shadow:0 1px 3px #30291f30;transition:transform .18s}
.theme-switch[aria-checked=true] .theme-track {background:var(--p-active);border-color:var(--p-active)}
.theme-switch[aria-checked=true] .theme-track:after {transform:translateX(calc(var(--switch-width) - 22px))}
.theme-switch:focus-visible {outline:2px solid var(--p-active);outline-offset:3px}
.paper-body,.script-body,.preview-body,.maker {overscroll-behavior:contain}

.todo-row:hover {background:color-mix(in srgb,var(--p-tint) 8%,transparent)}
.scene input[type=checkbox] {
  appearance:none;-webkit-appearance:none;position:relative;box-sizing:border-box;
  width:16px;height:16px;min-width:16px;flex-shrink:0;margin:0;border:1.5px solid var(--p-check);
  border-radius:4px;background:transparent;cursor:pointer;vertical-align:middle;
}
.scene input[type=checkbox]:hover {border-color:color-mix(in srgb,var(--p-check) 65%,var(--p-text));background:color-mix(in srgb,var(--p-tint) 8%,transparent)}
.scene input[type=checkbox]:checked {border-color:transparent;background:var(--p-active)}
.scene input[type=checkbox]:checked:after {
  content:"";position:absolute;left:2px;top:3px;width:9px;height:5px;
  border-left:2px solid var(--p-bg);border-bottom:2px solid var(--p-bg);transform:rotate(-45deg);
}
.scene input[type=checkbox]:checked:hover {background:color-mix(in srgb,var(--p-active) 88%,#000)}
.scene input[type=checkbox]:focus-visible {outline:2px solid var(--p-active);outline-offset:3px}

/* The capsule itself expands. The preview has a content heading, not a miniature
   window toolbar/footer. No second preview shell or duplicate tool is introduced. */
.capsule-rail {position:absolute;right:0;top:16px;width:var(--rail-width);z-index:50;pointer-events:none;font-family:var(--app-chrome)}
#capsule-items {position:relative;margin-top:var(--capsule-gap);pointer-events:none}
.edge-slot {position:absolute;right:0;top:0;height:var(--capsule-hit-height);width:var(--rail-width);pointer-events:auto;overflow:hidden;color:var(--p-text);border:0;border-radius:12px 0 0 12px;transform-origin:top left;isolation:isolate}
.edge-slot:before {content:"";position:absolute;inset:calc((var(--capsule-hit-height) - var(--capsule-body-height))/2) 0;z-index:-1;background:var(--p-bg);border:1px solid var(--p-border);border-right:0;border-radius:12px 0 0 12px;box-shadow:0 0 4px #00000019;pointer-events:none}
.edge-slot[data-preview=true] {background:var(--p-bg);border:1px solid var(--p-border);border-right:0;border-radius:12px 0 0 12px;box-shadow:0 2px 12px #00000020}
.edge-slot[data-preview=true]:before {display:none}
.capsule {display:flex;align-items:center;gap:5px;width:100%;min-height:var(--capsule-hit-height);height:var(--capsule-hit-height);color:var(--p-text);padding:0 9px;text-align:left;pointer-events:auto;font:12px/1.3 var(--app-chrome)}
.capsule>svg {width:14px;height:14px;min-width:14px;fill:none;stroke:var(--p-weak);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.capsule-title {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;font-size:12px}
.capsule[data-paper-open=true]:after {content:"";width:3px;height:3px;background:var(--p-active);border-radius:50%;margin-left:auto;flex-shrink:0}
.edge-slot:not([data-preview=true]):hover:before {background:color-mix(in srgb,var(--p-tint) 8%,var(--p-bg))}
.edge-slot:has(>.capsule[data-paper-open=true]):before {background:color-mix(in srgb,var(--p-active) 14%,var(--p-bg));border-color:color-mix(in srgb,var(--p-active) 55%,var(--p-border))}
.scene[data-dark=true] .edge-slot:has(>.capsule[data-paper-open=true]):before {background:color-mix(in srgb,var(--p-active) 20%,var(--p-bg))}
.capsule[data-paper-open=true]>svg {stroke:var(--p-active)}
.capsule[data-paper-open=true] .capsule-title {font-weight:600}
.edge-slot[data-preview=true] {border-color:color-mix(in srgb,var(--p-active) 60%,var(--p-border))}
.capsule:focus-visible {outline-offset:-3px}
.edge-slot[data-preview=true]>.capsule {visibility:hidden;pointer-events:none}

.preview-card {position:absolute;inset:0;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;padding:9px 24px 8px 10px;color:var(--p-text);background:var(--p-bg);overflow:hidden;cursor:default;font-family:var(--app-body)}
.preview-head {display:flex;align-items:center;gap:6px;min-height:24px;flex-shrink:0;cursor:pointer;margin:0 0 5px;padding:0 2px;border:0;font-family:var(--app-chrome)}
.preview-title-button {display:block;min-width:0;max-width:calc(100% - 40px);padding:0;text-align:left;border-radius:4px}
.preview-head strong {display:block;font-size:13px;line-height:22px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#preview-count {font-size:11px;color:var(--p-weak);flex-shrink:0}
.preview-body {flex:1;padding:0 1px;overflow:auto;min-height:0;scrollbar-width:thin;overscroll-behavior:contain;cursor:pointer}
/* The capsule animates from its collapsed size; only expose overflow controls
   once the preview has its final bounds. Long previews remain scrollable. */
.edge-slot[data-moving] .preview-body {overflow:hidden}
.preview-body .todo-row {min-height:32px;gap:3px;margin:1px 0;padding:3px}
.preview-check {display:grid;place-items:center;flex:0 0 24px;align-self:stretch;cursor:pointer}
.preview-body .task-text {flex:1;min-width:0;font-size:12px}
.preview-body .task-link {width:22px;min-height:24px;padding:2px}
.preview-body .todo-row:has(input:checked) .task-text {color:var(--p-weak);text-decoration:line-through}
.preview-body .widget {cursor:default}
.preview-retract {position:absolute;top:0;right:0;bottom:0;width:18px;padding:0;display:grid;place-items:center;color:var(--p-weak);border-radius:0;background:color-mix(in srgb,var(--p-tint) 3%,transparent)}
.preview-retract svg {width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.preview-retract:hover {background:color-mix(in srgb,var(--p-tint) 10%,transparent);color:var(--p-text)}
.preview-retract:focus-visible {outline-offset:-3px}
/* Script and maker are alternate occupants of the original canvas, not sibling canvases. */
.script-surface {position:absolute;inset:24px calc(var(--rail-width) + 16px) 24px 20px;pointer-events:none;z-index:3}
.script-paper {position:absolute;left:0;top:10%;width:100%;min-height:240px;max-height:90%;overflow:auto;pointer-events:auto}.script-body {padding:26px 25px}.code-label {display:flex;justify-content:space-between;font-size:10px;color:var(--p-weak);letter-spacing:.08em;margin-bottom:23px}
.script-body pre {font:14px/2 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.code-accent {color:var(--p-link)}.script-path {border-top:1px solid var(--p-border);padding-top:20px;margin-top:26px;color:var(--p-weak);font-size:10px;letter-spacing:.1em}
.script-capsule-stage {position:absolute;right:0;top:14%;width:100%;text-align:right;pointer-events:auto}.lightning {display:inline-flex;align-items:center;gap:6px;min-height:30px;background:var(--p-bg);color:var(--p-text);border:1px solid var(--p-border);border-radius:12px;padding:5px 10px;box-shadow:0 0 4px #00000019;font:12px/1.4 var(--app-chrome)}.lightning:hover {background:var(--p-code)}.lightning svg {width:14px;height:16px;fill:none;stroke:var(--p-active);stroke-width:1.4}.script-capsule-stage p {margin-top:20px}
.terminal {position:absolute;left:0;top:12%;width:100%;max-height:88%;overflow:auto;pointer-events:auto;background:#292a2b;color:#e9e6de;border-radius:11px;box-shadow:0 14px 25px #30291f19;overflow:hidden}.terminal-bar {display:flex;align-items:center;gap:14px;border-bottom:1px solid #494943;padding:16px 19px;font-size:10px;letter-spacing:.1em}.terminal-bar>span:last-child {margin-left:auto;color:var(--p-active)}.terminal pre {font:17px/1.8 ui-monospace,Consolas,monospace;margin:0;padding:34px 25px 20px;overflow-wrap:anywhere;white-space:pre-wrap}.terminal-caret {color:#e0cfaa}.terminal p {font-size:12px;padding:0 25px;color:#c0b9aa;line-height:1.9}.terminal-actions {display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:10px 19px;border-top:1px solid #494943}.terminal-actions button {color:#e3d8bf;min-height:44px;font-size:12px}
.maker {position:absolute;inset:16px calc(var(--rail-width) + 12px) 16px 16px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--p-border) transparent;border:1px solid var(--p-border);border-radius:11px;background:var(--p-bg);color:var(--p-text);padding:22px 25px;z-index:4;scroll-padding-top:8px}
.maker-heading {display:flex;align-items:center;gap:12px}.maker-symbol {display:grid;place-items:center;flex-shrink:0;width:35px;height:38px;border-radius:8px;background:var(--p-code);color:var(--p-active);font:15px ui-monospace,monospace}.maker-heading>div {min-width:0;flex:1}.maker-heading p {margin:0 0 4px;font-size:8px;letter-spacing:.13em;color:var(--muted)}.maker-heading h3 {font-size:22px;line-height:1.4}.maker-heading .quiet {font-size:11px;padding:5px;max-width:94px}
.demo-disclosure {font-size:11px;color:var(--p-weak);line-height:1.8;margin:16px 0 20px;max-width:560px}
.recipe-description {margin:16px 0 20px;font-size:14px;line-height:1.8;color:var(--p-weak)}
.maker-input-actions {display:flex;align-items:center;gap:12px;justify-content:flex-end;flex-wrap:wrap}.recipes {display:flex;gap:6px;flex-wrap:wrap}.recipes button {min-height:38px;font-size:11px;border:1px solid var(--p-border);border-radius:20px;padding:7px 11px}.recipes button[aria-pressed=true] {background:var(--p-code);border-color:var(--p-active)}.maker-input-actions .button {min-height:42px;font-size:12px;padding:10px 14px}
#prompt-error {color:#a74831;font-size:12px;margin:10px 0 0;min-height:0}#prompt-error:empty {display:none}
.pipeline {margin:20px 0 0;border-top:1px solid var(--p-border);padding-top:15px}.pipeline-head {display:flex;align-items:center;justify-content:space-between;min-height:32px;font-size:12px;color:var(--p-weak)}.pipeline-head button {font-size:12px;min-height:32px;padding:4px 10px}.pipeline progress {width:100%;height:3px;display:block;margin:12px 0;appearance:none;border:0;background:var(--p-code);accent-color:var(--p-active)}.pipeline progress::-webkit-progress-bar {background:var(--p-code)}.pipeline progress::-webkit-progress-value {background:var(--p-active)}
.pipeline ol {display:flex;gap:10px;justify-content:space-between;margin:0;padding:0;list-style:none;font-size:10px;color:var(--p-weak)}.pipeline li.is-done {color:var(--p-active)}
/* The single plugin instance lives here, in the maker, or in a capsule preview. */
.scene .widget h3 {display:none}
#plugin-home {padding:0}#live-plugin {width:100%}.widget {padding:20px;color:var(--p-text);font-size:14px}.widget-tag {font-size:8px;letter-spacing:.1em;color:var(--p-weak);margin:0 0 8px}.widget h3 {font:600 18px/1.4 var(--app-chrome);margin:0 0 12px;letter-spacing:0}.widget-help {font-size:12px;line-height:1.7;color:var(--p-weak);margin:0}
.timer-face {width:min(170px,100%);aspect-ratio:1;border-radius:50%;padding:7px;background:conic-gradient(var(--p-active) var(--progress,0%),var(--p-code) 0);margin:16px auto}.timer-inner {height:100%;border-radius:50%;background:var(--p-bg);display:flex;flex-direction:column;align-items:center;justify-content:center}.timer-digits {font-size:43px;line-height:1.3;font-variant-numeric:tabular-nums;letter-spacing:-.03em}.timer-state {font-size:10px;color:var(--p-weak);margin-top:6px}.widget-actions {display:flex;justify-content:center;gap:8px}
.widget button {min-height:32px;padding:6px 12px;border-radius:8px;background:var(--p-active);color:var(--p-bg);font:12px/1.5 var(--app-chrome)}.widget button.secondary {background:var(--p-code);color:var(--p-text)}.widget button:hover {filter:brightness(.96)}
.widget-list {margin-top:18px}.widget-row {display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--p-border);font-size:14px;line-height:1.6;overflow-wrap:anywhere;cursor:pointer}.widget-row input {accent-color:var(--p-active);flex-shrink:0;width:16px;height:16px}.widget-row:has(input:checked) span {text-decoration:line-through;color:var(--p-weak)}.widget-summary {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:13px;font-size:11px}.widget-summary button {background:none;color:var(--p-link);text-decoration:underline;padding:5px;font-size:11px;min-height:36px}.widget-meter {height:4px;background:var(--p-code);margin-top:8px}.widget-meter span {height:100%;display:block;background:var(--p-active)}.widget-add {display:flex;gap:6px;margin-top:13px}.widget-input {min-width:0;width:100%;padding:9px;border:1px solid var(--p-border);background:var(--p-bg);color:var(--p-text);font-size:12px;border-radius:5px}.widget-add button {padding:8px 12px;white-space:nowrap}
.preview-body .widget {padding:10px 6px}.preview-body .timer-face {width:150px;margin:16px auto}.preview-body .timer-digits {font-size:36px}
/* The rest of the fusion story is editorial: no extra product canvases. */
.story-divider {display:flex;align-items:center;justify-content:space-between;gap:15px;letter-spacing:.18em;font-size:10px;color:#8a8172;padding:26px 0;border-block:1px solid var(--line);margin-top:30px}
.section {padding:96px 0;scroll-margin-top:calc(var(--nav) + 25px)}.section-heading {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:25px}.section-decoration {font:105px var(--serif);color:#d1c7b4;line-height:1}.feature-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 75px}
.feature-grid article {display:grid;grid-template-columns:56px 1fr;gap:25px;padding:35px 0;border-top:1px solid var(--line)}.feature-symbol {display:grid;place-items:center;width:48px;height:48px;border:1px solid #ded4c3;border-radius:12px;font-size:24px;color:var(--accent);background:#f8ead2}.feature-number {font-size:10px;letter-spacing:.15em;color:#978b78}.feature-grid h3 {margin:7px 0 12px}.feature-grid p {font-size:15px;color:var(--muted);line-height:1.85;margin:0;max-width:500px}
.faq-section {display:grid;grid-template-columns:1fr 1.4fr;gap:100px;border-top:1px solid var(--line)}.faq-list details {border-top:1px solid var(--line)}.faq-list summary {position:relative;list-style:none;padding:24px 36px 24px 0;cursor:pointer;font-size:16px;line-height:1.65}.faq-list summary::-webkit-details-marker {display:none}.faq-list summary:after {content:"+";position:absolute;right:6px;font-size:22px;top:20px;color:#8e816b}.faq-list details[open] summary:after {content:"−"}.faq-list details p {font-size:14px;line-height:1.9;color:var(--muted);padding:0 35px 10px 0}
.closing {position:relative;background:#f4e7cf;border-top:1px solid #dfc8a4;padding:90px 0;overflow:hidden}.closing .shell {position:relative}.closing h2 {font-size:clamp(52px,calc(var(--layout-vw) * 5.4),80px);max-width:740px}.closing .lead {max-width:600px}.closing-star {position:absolute;right:0;top:10px;font:190px var(--serif);line-height:1;color:#dfd4be;pointer-events:none}.download-package {position:relative;display:flex;align-items:center;gap:24px;flex-wrap:wrap;border:1px solid #ddd3c0;background:#fcf9f1;border-radius:12px;padding:24px 28px;margin:28px 0 16px;max-width:960px}.windows-mark {font-size:40px;color:var(--accent)}.download-package strong {font-size:15px;overflow-wrap:anywhere}.download-package p {font-size:12px;color:var(--muted);margin:6px 0 0}.download-package>a {margin-left:auto}.download-alt {font-size:12px}.closing .actions {gap:30px}
footer {padding:42px 0 28px}.footer-top {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}.footer-top p {font:italic 17px var(--serif);color:var(--muted);margin:0}.footer-links {display:flex;align-items:center;flex-wrap:wrap;gap:14px 25px;font-size:11px;color:var(--muted)}.footer-links a {min-height:32px;display:flex;align-items:center}.footer-links span {margin-left:auto;font-size:10px}
#toast {position:fixed;z-index:80;bottom:22px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);background:var(--deep);color:#fff9ec;border:1px solid #8a7a60;border-radius:9px;box-shadow:0 10px 25px #30291f26;font-size:13px;padding:12px 20px;pointer-events:none}.noscript {background:#eee8d6;padding:25px;text-align:center;font-size:14px}
html:lang(zh-CN) h1 {font-size:clamp(47px,calc(var(--layout-vw) * 4.35),69px);letter-spacing:-.035em;line-height:1.3}html:lang(zh-CN) h2 {letter-spacing:-.025em;line-height:1.35}html:lang(zh-CN) h1 em,html:lang(zh-CN) h2 em {font-style:normal;letter-spacing:0}html:lang(zh-CN) .lead {font-size:16px;line-height:1.95}html:lang(zh-CN) .hero-note p {font-style:normal}
@media (min-width:980px) and (max-height:800px) {
  :root {--nav:72px}.story {padding-top:18px}.stage-sticky {top:calc(var(--nav) + 18px)}.scene {height:calc(calc(var(--layout-vh) * 100) - var(--nav) - 65px)}
  .chapter {padding:35px 0}.eyebrow {margin-bottom:18px}h1 {font-size:clamp(48px,calc(var(--layout-vw) * 4.7),68px);margin-bottom:22px}h2 {font-size:clamp(35px,calc(var(--layout-vw) * 3.4),48px);margin-bottom:20px}
  .lead {font-size:16px;line-height:1.75}.hero-note {margin-top:19px}.appearance {margin-top:15px}.margin-note {margin-top:18px}.scroll-cue {margin-top:17px}.instructions {margin:22px 0}.instructions li {margin:13px 0}
  .paper-deck {inset:18px 22px 24px}

  .widget {padding:16px}.widget h3 {font-size:24px}.timer-face {width:165px;margin:18px auto}.timer-digits {font-size:38px}.widget-help {font-size:11px}
  .maker {inset:12px 58px 12px 12px;padding:18px 20px}.maker-heading h3 {font-size:20px}.demo-disclosure {margin:13px 0 16px}.maker-empty {padding:25px 0 5px}
}
@media (min-width:980px) and (max-width:1200px) {#navigation {gap:18px}.nav-actions {gap:12px}.brand {font-size:18px}.brand small {font-size:6px}.story {grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:26px}.shell {width:calc(100% - 56px)}.lead {font-size:16px}.maker-heading .quiet {max-width:70px}.maker-heading h3 {font-size:20px}.scene-top {padding-inline:13px}.task-text {font-size:13px}.paper-body {padding:13px}.widget {padding:15px}.widget h3 {font-size:23px}.timer-face {width:160px}}
@media (max-width:979px) {
  :root {--nav:70px}.nav {gap:12px}.brand {font-size:19px}.github-link {display:none}.menu-toggle {display:block;margin-left:auto}#navigation {display:none;position:absolute;top:calc(var(--nav) - 1px);left:0;right:0;background:var(--bg);padding:14px 24px 22px;border-bottom:1px solid var(--line);gap:0;flex-wrap:wrap;box-shadow:0 7px 12px #30291f0a}#navigation.is-open {display:flex}#navigation a {padding:10px 16px;min-height:44px}.nav-actions {gap:6px}
  .story {display:flex;flex-direction:column;gap:0;padding-top:20px}.chapter-tabs {display:flex;align-items:center;gap:5px;overflow:auto;padding:2px 1px 10px;margin-bottom:12px;scrollbar-width:none}.chapter-tabs a {white-space:nowrap;min-height:44px;display:flex;align-items:center;padding:9px 12px;font-size:12px;border-radius:8px;border:1px solid transparent}.chapter-tabs a[aria-current=true] {background:#ece4d5;border-color:#d9cbb1}
  .chapter {min-height:0;padding:22px 0 24px}.chapter:not([data-active=true]) {display:none}.chapter-copy {max-width:100%}.hero .lead {max-width:590px}.chapter h1 {font-size:66px}.chapter h2 {font-size:46px}.hero-note {margin:18px 0}.hero .margin-note {margin-top:18px}.appearance {margin-top:12px}.scroll-cue {margin-top:15px}.instructions {margin:20px 0}.instructions li {margin:12px 0}.margin-note {max-width:570px}.chapter .lead {max-width:590px}
  .stage-sticky {position:static}.scene {height:700px;min-height:0}.scene-top {min-height:46px}.mobile-chapter-controls {display:flex;align-items:center;justify-content:space-between;padding:3px 0 16px;border-bottom:1px solid var(--line)}.mobile-chapter-controls button {font-size:13px}.stage-caption {padding:10px 3px;font-size:10px}
  .paper-deck {inset:22px calc(var(--rail-width) + 14px) 22px 22px}.scene[data-view=markdown] .paper-deck {inset:18px calc(var(--rail-width) + 14px) 18px 18px}
  .section {padding:66px 0}.feature-grid {gap:0 35px}.feature-grid article {grid-template-columns:45px 1fr;gap:16px}.feature-symbol {width:40px;height:40px}.faq-section {grid-template-columns:1fr;gap:20px}.closing {padding:65px 0}.closing h2 {font-size:58px}.closing-star {font-size:130px}.download-package {padding:20px}.footer-links span {margin-left:0}.story-divider {margin-top:32px;letter-spacing:.08em;font-size:9px}
}
@media (max-width:540px) {
  :root {--nav:64px}.shell {width:calc(100% - 32px)}.brand {font-size:18px;gap:8px}.brand-mark {width:28px;height:28px}.brand small {font-size:5px;letter-spacing:.09em}.nav {gap:3px}.menu-toggle {font-size:11px;padding:7px}.nav-actions .quiet {font-size:12px;padding:8px}.nav-actions .button {font-size:11px;padding:9px;min-height:40px}
  .chapter-tabs {gap:1px;margin-bottom:8px}.chapter-tabs a {font-size:11px;padding:9px 10px}.chapter {padding:18px 0 24px}.eyebrow {font-size:9px;margin-bottom:18px;letter-spacing:.05em}.chapter h1 {font-size:58px;margin-bottom:23px}.chapter h2 {font-size:40px;margin-bottom:20px}html:lang(zh-CN) .chapter h1 {font-size:48px}html:lang(zh-CN) .chapter h2 {font-size:36px}.lead,html:lang(zh-CN) .lead {font-size:15px;line-height:1.85}.hero .actions {gap:12px;margin:20px 0 14px}.hero .button {padding-inline:14px;font-size:13px}.hero-note p {font-size:16px}.margin-note {font-size:12px;margin-top:20px}.hero-note {margin-top:21px}.appearance {gap:5px}.appearance>.small {font-size:11px}.swatches button {width:32px}.appearance .quiet {font-size:11px;padding:8px}.instructions li {font-size:13px}.actions {gap:12px;margin:20px 0 12px}.mode-switch {display:flex;width:100%}.mode-switch button {flex:1;min-height:44px;font-size:12px;padding:8px 7px}
  .scene {height:754px;border-radius:14px}.scene-top {padding:10px 12px;font-size:9px;border-radius:14px 14px 0 0}.scene-top>span:last-child {font-size:9px}.scene-bottom {padding:8px 11px;font-size:9px;border-radius:0 0 14px 14px;min-height:36px;gap:6px}.scene-top>span:first-child {gap:8px;letter-spacing:.08em}
  .paper-deck {inset:16px 16px 24px}.paper-header {min-height:36px;padding:0 7px;gap:5px}.paper-header h3 {font-size:12px}.paper-header .icon-button {height:32px;width:32px}.paper-type {padding-left:4px}.paper-body {padding:16px}.paper-footer {min-height:29px;font-size:10px}#todo-body {padding:4px 9px}


  .scene[data-view=markdown] .paper-deck {inset:16px 56px 16px 12px}.scene[data-view=markdown] #note-body {padding:16px 14px}.scene[data-view=markdown] .markdown {font-size:14px}.scene[data-view=markdown] .markdown h3 {font-size:21px}.task-text {font-size:14px}.task-check {min-height:46px;gap:10px}.task-link {width:44px;height:44px}.md-task label {min-height:44px}


  .script-surface {inset:18px 55px 18px 12px}.script-body {padding:23px 16px}.script-body pre {font-size:12px}.code-label {font-size:9px}.script-path {font-size:9px;letter-spacing:0}.lightning {font-size:14px;gap:9px;padding:14px 16px}.script-capsule-stage p {font-size:11px}.terminal pre {font-size:14px;padding:25px 17px 18px}.terminal p {padding:0 17px;font-size:12px}.terminal-actions {gap:6px;padding:8px 10px}.terminal-actions button {font-size:11px}.terminal-bar {font-size:9px;gap:9px;padding:16px}
  .maker {inset:12px 47px 12px 10px;padding:18px 14px}.maker-heading {gap:9px;flex-wrap:wrap}.maker-symbol {width:28px;height:31px;font-size:12px}.maker-heading>div {min-width:150px}.maker-heading h3 {font-size:18px}.maker-heading p {font-size:7px}.maker-heading .quiet {margin-left:33px;max-width:none;font-size:11px;min-height:34px;padding:0}.demo-disclosure {font-size:11px;line-height:1.75;margin:10px 0 17px}#build-form textarea {min-height:135px;font-size:14px;padding:11px;line-height:1.8}.prompt-meta {font-size:9px;margin-bottom:14px}.maker-input-actions {gap:14px}.recipes {gap:4px;flex-wrap:wrap}.recipes button {font-size:10px;min-height:44px;padding:7px 9px}.maker-input-actions .button {width:100%;min-height:44px}.pipeline {margin-top:21px}.pipeline ol {font-size:9px;gap:7px;line-height:1.6}.pipeline-head {font-size:11px}.maker-empty {font-size:13px;gap:10px}.maker-empty>span:first-child {font-size:30px}.result-top {font-size:12px;gap:10px}.result-top .button {width:100%;min-height:44px}#maker-preview {padding:7px}#maker-preview .widget {padding:16px 12px}#maker-preview .widget h3 {font-size:24px}#maker-preview .timer-face {width:155px;margin:21px auto}#maker-preview .timer-digits {font-size:36px}
  .widget {padding:23px}.widget-help {font-size:12px}.widget button {min-height:44px}.widget-add {gap:5px}.widget-add button {padding:8px 11px}.widget-input {font-size:12px}.widget-summary button {min-height:44px}.preview-body .widget {font-size:12px}.preview-body .widget-help {font-size:11px}.preview-body .timer-face {width:145px}.preview-body .timer-state {font-size:9px}
  .story-divider {gap:12px;flex-wrap:wrap;justify-content:center;font-size:8px;letter-spacing:.04em;padding:21px 0}.story-divider>span:nth-child(4) {display:none}.section {padding:56px 0}.section h2 {font-size:37px}.section-decoration {font-size:65px}.section-heading {gap:12px}.feature-grid {grid-template-columns:1fr;gap:0}.feature-grid article {padding:25px 0;gap:17px;grid-template-columns:42px 1fr}.feature-grid p {font-size:14px}.feature-grid h3 {font-size:20px}.faq-list summary {font-size:14px;padding:21px 28px 21px 0}.faq-list details p {font-size:13px;padding-right:12px}.closing h2,html:lang(zh-CN) .closing h2 {font-size:44px}.closing-star {font-size:85px;top:47px;opacity:.5}.download-package {padding:17px;gap:12px}.download-package strong {font-size:13px}.download-package p {font-size:11px}.download-package .button {width:100%;margin-top:4px}.closing .lead {font-size:15px}.download-alt {font-size:11px}.closing .actions {gap:20px}.footer-top {flex-direction:column;align-items:start;gap:15px}.footer-top p {font-size:15px}.footer-links {font-size:10px;gap:6px 18px}.footer-links span {width:100%;margin-top:6px}
}
@media (pointer:coarse) {.icon-button {min-width:44px;min-height:44px}.swatches button {min-width:40px;min-height:44px}.task-check,.md-task label {min-height:44px}.recipes button {min-height:44px}}
@media (prefers-reduced-motion:reduce) {:root {scroll-behavior:auto}*,*:before,*:after {animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
@media print {.site-header,.desktop-stage,.chapter-tabs,.appearance,.mode-switch,#toast,.closing-star {display:none!important}.story,.faq-section {display:block}.chapter,.chapter:not([data-active=true]) {display:block;min-height:0;padding:24px 0}.shell {width:100%}.section,.closing {padding:25px 0}.feature-grid {display:block}}

/* Wheel gestures page through the five chapters. Native snap also aligns keyboard
   and scrollbar navigation; paper bodies keep independent scroll areas. */
@media screen and (min-width:980px) {
  :root[data-story-snap=true] {scroll-snap-type:y mandatory;scroll-padding-top:calc((var(--nav) + 24px) * var(--page-scale))}
  .chapter {min-height:calc(calc(var(--layout-vh) * 100) - var(--nav) - 24px)}
  .chapter {scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:0}
  /* This exit target lets native scrolling leave the final story chapter. */
  #features {scroll-snap-align:start;scroll-snap-stop:normal;scroll-margin-top:0}
}
@media (pointer:coarse) {.theme-switch {min-height:44px;--switch-width:44px}}

/* The outer stage does not change size between chapters or after generation.
   On phones the same two papers sit below the named dock; no second desktop exists. */
@media (min-width:980px) and (max-height:780px) {
  .paper-deck,.scene[data-view=markdown] .paper-deck {inset:16px calc(var(--rail-width) + 12px) 16px 16px}

  .script-surface {inset:16px calc(var(--rail-width) + 12px) 16px 16px}
  .maker {inset:12px calc(var(--rail-width) + 12px) 12px 12px;padding:18px}
}
@media (max-width:979px) and (min-width:541px) {
  .scene,.scene[data-view=maker] {height:750px}
}
@media (max-width:540px) {
  .scene {--rail-width:104px}
  .scene,.scene[data-view=maker],.scene[data-view=script],.scene[data-view=markdown] {height:1030px}
  .paper-deck,.scene[data-view=markdown] .paper-deck {inset:174px 14px 18px}




  .script-surface {inset:174px 14px 18px}.script-paper {width:100%;left:0;top:4%}.script-capsule-stage {top:8%}
  .maker {inset:174px 12px 14px;padding:22px 18px}
  .maker-heading .quiet {margin-left:0}.maker-heading>div {min-width:160px}
  .capsule-rail {top:16px}.capsule-title {display:block;opacity:1;font-size:12px}
  .capsule {min-height:var(--capsule-hit-height)}
  .preview-card {inset:0;width:100%;height:100%;border-radius:0}
  .preview-body .widget {padding:8px}.preview-body .timer-face {width:150px;margin:16px auto}
}
[data-moving=out] {pointer-events:none!important}

@media (pointer:coarse) {
  .scene {--capsule-hit-height:44px;--capsule-gap:4px}
  .paper-header {min-height:44px}
  .paper-header .icon-button {width:44px;height:44px}
  .preview-title-button {min-height:44px;max-width:calc(100% - 38px)}
  .preview-card {padding-right:46px}
  .preview-retract {width:44px}
  .preview-check {flex-basis:36px;min-height:44px}
  .preview-body .todo-row {min-height:46px;padding:0}
  .preview-body .task-link,.task-link {width:44px;min-height:44px}
  .lightning {min-height:44px}
  .widget button {min-height:44px}
}
@media (forced-colors:active) {
  .scene input[type=checkbox] {appearance:auto;forced-color-adjust:auto}
  .scene input[type=checkbox]:after {display:none}
  .theme-track {border-color:ButtonText}
  .theme-track:after {background:ButtonText}
  .edge-slot:before {border:1px solid ButtonText;background:Canvas}
}

/* Compact workbench geometry. Manual resize uses real width/height, not scaling. */
.queue-toggle {position:relative;display:flex;align-items:center;justify-content:center;gap:6px;width:42px;height:var(--capsule-hit-height);min-height:var(--capsule-hit-height);margin-left:auto;padding:0 7px;border-radius:12px 0 0 12px;font-size:11px;color:var(--p-text);pointer-events:auto;isolation:isolate}
.queue-toggle:before {content:"";position:absolute;inset:calc((var(--capsule-hit-height) - var(--capsule-body-height))/2) 0;z-index:-1;background:var(--p-bg);border:1px solid var(--p-border);border-right:0;border-radius:inherit;pointer-events:none}
.queue-toggle:hover:before {background:color-mix(in srgb,var(--p-tint) 8%,var(--p-bg))}
.queue-toggle:focus-visible {outline-offset:-3px}
.capsule-rail {top:16px}
[data-edge-slot=script]>.capsule {padding-right:28px}
.capsule-run {position:absolute;right:1px;top:0;width:27px;height:var(--capsule-hit-height);display:grid;place-items:center;padding:6px;color:var(--p-active);border-radius:5px}
.capsule-run svg {width:13px;height:13px;fill:currentColor}
.capsule-run:hover {background:color-mix(in srgb,var(--p-tint) 15%,transparent)}
.capsule-run:focus-visible {outline-offset:-3px}
.edge-slot[data-preview=true]>.capsule-run {visibility:hidden;pointer-events:none}
.edge-slot[data-running=true]:before {background:var(--p-code)}
.capsule-summary {font-size:12px;color:var(--p-weak);margin:8px 0}
.script-peek {font:11px/1.6 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 12px}
.script-preview-run {padding:5px 12px;min-height:30px;border-radius:6px;background:var(--p-code);color:var(--p-text);font-size:12px}
.preview-body .markdown {font-size:12px;line-height:1.55}
.preview-body .markdown h3 {font-size:15px;margin:4px 0 10px}
.preview-body .markdown h4 {font-size:13px;margin:12px 0 6px}
.preview-body .markdown p {margin:6px 0 9px}
.preview-body .markdown blockquote {margin:10px 0;font-size:11px}
.preview-body .md-task label {min-height:30px}
.preview-body .widget {padding:4px}
.preview-body .timer-face {width:116px;margin:8px auto}
.preview-body .timer-digits {font-size:30px}
.preview-body .widget-list {margin-top:2px}
.preview-body .widget-row {font-size:12px;padding:7px 0}
.preview-body .widget-actions {gap:6px}
.preview-body .widget-actions button {padding:5px 10px}
.paper-deck,.scene[data-view=markdown] .paper-deck {inset:20px calc(var(--rail-width) + 12px) 18px 20px}
/* All papers share a top-left origin. Extra desktop space preserves the
   composition instead of pulling the note toward the opposite edge. */
#todo-paper {left:0;top:12px;right:auto;bottom:auto;width:min(300px,100%);height:178px;min-height:0;z-index:2}
#note-paper {--note-top:206px;left:clamp(0px,calc(100% - 400px),220px);right:auto;top:var(--note-top);bottom:auto;width:min(384px,96%);height:min(420px,calc(100% - var(--note-top) - 12px));min-height:0;z-index:3}
#plugin-paper {left:min(64px,10%);right:auto;top:min(94px,14%);bottom:auto;width:min(300px,90%);height:min(318px,85%);min-height:0;z-index:4}
.scene[data-view=markdown] #note-paper {left:min(24px,4%);right:auto;top:24px;bottom:auto;width:min(414px,96%);height:min(440px,calc(100% - 24px))}
.scene[data-view=markdown] #note-body {padding:15px 18px}
.scene[data-view=markdown] .markdown {font-size:14px}
.scene[data-view=markdown] .markdown h3 {font-size:20px}
.paper-footer {padding-right:28px}
.script-surface {inset:20px calc(var(--rail-width) + 12px) 18px 20px}
#script-editor {left:min(24px,4%);top:min(80px,12%);width:min(326px,96%);height:min(222px,85%);min-height:0;max-height:none;overflow:hidden}
.script-body {padding:20px;overflow:auto;min-height:0;flex:1}
.script-body .code-label {margin-bottom:12px}
.script-body pre {font-size:12px;line-height:1.8}
.terminal {left:min(24px,4%);top:min(80px,12%);width:min(346px,96%);max-height:85%}
.terminal-bar {padding:12px 16px}
.terminal pre {font-size:16px;padding:24px 20px}
.terminal-actions {padding:8px 12px}
.terminal[data-running=true] .terminal-caret {animation:script-caret .45s ease-in-out infinite alternate}
@keyframes script-caret {to {opacity:.1}}
.maker {left:20px;right:calc(var(--rail-width) + 12px);top:24px;bottom:auto;max-width:456px;max-height:calc(100% - 48px);padding:20px}
.paper-resize {position:absolute;bottom:0;right:0;z-index:5;width:22px;height:22px;padding:3px;color:var(--p-weak);cursor:nwse-resize;touch-action:none;display:grid;place-items:center;border-radius:4px 0 15px 0}
.paper-resize svg {width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1;pointer-events:none}
.paper-resize:hover {background:color-mix(in srgb,var(--p-tint) 10%,transparent);color:var(--p-text)}
.paper-resize:focus-visible {outline-offset:-4px}
.paper-resize-edge {position:absolute;z-index:4;touch-action:none}
.paper-resize-edge.edge-e {right:0;top:34px;bottom:22px;width:5px;cursor:ew-resize}
.paper-resize-edge.edge-s {bottom:0;left:16px;right:22px;height:5px;cursor:ns-resize}
.paper.is-resizing {user-select:none}
.paper.is-resizing .paper-body,.paper.is-resizing .script-body {pointer-events:none}
@media (pointer:coarse) {
  .queue-toggle {min-width:44px}
  .capsule-run {width:36px;padding:9px}
  [data-edge-slot=script]>.capsule {padding-right:35px;padding-left:6px;gap:3px}
  [data-edge-slot=script]>.capsule:after {display:none}
  .paper-resize {width:38px;height:38px;padding:8px}
  .paper-resize-edge {display:none}
  .paper-footer {padding-right:42px}
  .script-preview-run {min-height:44px}
  .preview-body .md-task label {min-height:44px}
}
@media (max-width:540px) {
  .scene {--mobile-paper-top:calc(210px + var(--capsule-hit-height) + var(--capsule-gap))}
  .scene,.scene[data-view=maker],.scene[data-view=script],.scene[data-view=markdown] {height:880px}
  .paper-deck,.scene[data-view=markdown] .paper-deck {inset:var(--mobile-paper-top) 14px 18px}
  #todo-paper {left:0;top:0;right:auto;bottom:auto;width:100%;height:202px}
  #note-paper {left:0;top:218px;right:auto;bottom:auto;width:100%;height:min(306px,calc(100% - 218px))}
  #plugin-paper {left:0;top:100px;right:auto;bottom:auto;width:100%;height:min(330px,calc(100% - 100px))}
  .scene[data-view=markdown] #note-paper {left:0;top:0;right:auto;bottom:auto;width:100%;height:min(374px,100%)}
  .script-surface {inset:var(--mobile-paper-top) 14px 18px}
  #script-editor {left:0;top:0;width:100%;height:222px}
  .terminal {left:0;top:0;width:100%}
  .maker {left:12px;right:12px;top:var(--mobile-paper-top);bottom:auto;max-height:calc(100% - var(--mobile-paper-top) - 16px);padding:18px}
  .maker-heading>div {min-width:130px}
  .maker-heading .quiet {margin-left:0}
  .preview-body .timer-face {width:116px;margin:8px auto}
  .scene-bottom {padding:2px 8px;min-height:44px}
  .scene-bottom .appearance {gap:5px}
  .scene-bottom .appearance .quiet {padding:6px;font-size:11px}
}

/* Story typography stays independent of the native paper UI. */
.story-copy {
  --sans:"Segoe UI","Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;
  font-family:var(--sans);
}
html:lang(zh-CN) .story-copy {--sans:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC","Segoe UI",system-ui,sans-serif}
.chapter-heading h1 em,.chapter-heading h2 em {
  font-family:inherit;font-style:normal;font-weight:400;color:var(--accent);
}
.chapter .control-icon {width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.chapter .windows-icon {fill:currentColor;stroke:none;width:16px;height:16px;flex-basis:16px}
.chapter .button {gap:9px;border-radius:10px;font-weight:600;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
.chapter .button.primary {border-color:#d8c9ac;box-shadow:0 2px 3px #3b312108}
.chapter .button.primary:hover {border-color:#c8b78f;box-shadow:0 3px 8px #3b312112}
.chapter .button:active {transform:translateY(1px)}
.hero .button.primary {background:var(--accent);border-color:var(--accent);color:#fffdf6;box-shadow:0 3px 7px #302b2116,inset 0 1px #ffffff18}
.hero .button.primary:hover {background:var(--accent-hover);border-color:var(--accent-hover)}
.capsule-guide {display:flex;align-items:flex-start;gap:10px;color:var(--accent);font-size:13px;line-height:1.8}
.capsule-guide svg {width:19px;height:19px;flex:0 0 19px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.chapter .mode-switch {border-color:#ddd6c9;background:#f0ebe0;border-radius:11px;gap:4px}
.chapter .mode-switch button {border-radius:7px;transition:background .18s,color .18s}
.chapter .mode-switch button:hover {color:var(--ink);background:#f8f4eb}
.chapter .mode-switch button[aria-pressed=true] {background:#fffdf7;box-shadow:0 1px 4px #38302412}
.chapter .studio-actions:has(#make-again[hidden]) {display:none}
.script-cycle .cycle-back {display:none}
.script-cycle:is([data-phase=running],[data-phase=result]) .cycle-run {display:none}
.script-cycle:is([data-phase=running],[data-phase=result]) .cycle-back {display:block}
.hero .demo-arrow {display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--accent-soft);transition:background .18s}
.hero .demo-arrow svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.hero #try-demo:hover .demo-arrow {background:#edcc98}
.hero #try-demo:hover svg {transform:translateX(2px)}
@media screen and (min-width:980px) {
  .chapter-copy {display:flex;flex-direction:column;align-items:flex-start;min-height:520px;max-width:480px;margin-inline:auto}
  .chapter-heading {width:100%}
  .chapter .eyebrow {min-height:20px;margin:0 0 22px;color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.09em}
  .chapter:not(.hero) .eyebrow:before {content:"";width:22px;height:2px;background:#d69843;border-radius:2px}
  .chapter h1,html:lang(zh-CN) .chapter h1 {font-size:clamp(46px,calc(var(--layout-vw) * 4.35),66px);font-weight:600;line-height:1.18;letter-spacing:-.045em;margin:0 0 25px;text-wrap:balance}
  .chapter h2,html:lang(zh-CN) .chapter h2 {font-size:clamp(35px,calc(var(--layout-vw) * 3.4),51px);font-weight:600;line-height:1.25;letter-spacing:-.035em;margin:0 0 25px;text-wrap:balance}
  html:lang(zh-CN) .chapter h1,html:lang(zh-CN) .chapter h2 {letter-spacing:-.025em}
  .chapter-heading h1 em,.chapter-heading h2 em {margin-top:8px;letter-spacing:inherit}
  html:lang(zh-CN) .chapter-heading h1 em,html:lang(zh-CN) .chapter-heading h2 em {letter-spacing:inherit}
  .chapter .lead,html:lang(zh-CN) .chapter .lead {max-width:100%;margin:0;font-size:17px;line-height:1.85;color:#706b63;white-space:pre-line;text-wrap:pretty}
  .chapter .chapter-actions {width:100%;margin:24px 0 0;padding-top:20px;border-top:1px solid #e0d9cd}
  .chapter .actions {gap:14px}
  .chapter .button {min-height:46px;padding:11px 18px;font-size:13px}
  .hero .actions {gap:16px}
  .hero #try-demo {gap:10px;font-size:13px;text-decoration:none;color:var(--accent);min-height:44px;transition:color .18s}
  .hero #try-demo:hover {color:var(--accent-hover)}
  .chapter .small {margin:13px 0 0;font-size:11px;letter-spacing:.02em;color:#82786b}
  .chapter .mode-switch {width:min(100%,320px);margin:0;padding:4px}
  .chapter .mode-switch button {flex:1;min-height:38px;padding:7px 14px;font-size:13px}
  .chapter #make-again {margin:0}
  .chapter .scroll-cue {align-self:center;gap:8px;min-height:84px;margin:auto auto 0;padding-top:32px;font-size:11px;letter-spacing:.04em;color:#82786b}
  .chapter .scroll-cue>span:last-child {display:grid;place-items:center;width:28px;height:28px;border:1px solid #ddd6c9;border-radius:50%;font:16px/1 var(--sans);transition:background .18s,border-color .18s,transform .18s}
  .chapter .scroll-cue:hover {color:#655a48}
  .chapter .scroll-cue:hover>span:last-child {background:#eee5d4;border-color:#cabb9e;transform:translateY(2px)}
}
@media screen and (min-width:980px) and (max-height:800px) {
  .chapter-copy {min-height:min(450px,calc(calc(var(--layout-vh) * 100) - var(--nav) - 94px))}
  .chapter .eyebrow {margin-bottom:16px}
  .chapter h1,html:lang(zh-CN) .chapter h1 {font-size:clamp(42px,calc(var(--layout-vw) * 3.8),54px);margin-bottom:20px}
  .chapter h2,html:lang(zh-CN) .chapter h2 {font-size:clamp(34px,calc(var(--layout-vw) * 3.05),44px);margin-bottom:20px}
  .chapter .lead,html:lang(zh-CN) .chapter .lead {font-size:15px;line-height:1.8}
  .chapter .chapter-actions {margin-top:20px;padding-top:16px}
  .chapter .scroll-cue {padding-top:24px;min-height:76px}
}
@media screen and (min-width:980px) and (max-width:1100px) {
  .hero .actions {gap:10px}
  .hero .button {padding-inline:13px;font-size:12px}
  .hero #try-demo {gap:6px;font-size:12px}
}

/* Narrow windows: one title line, controls, then the same shared workbench. */
@media screen and (max-width:979px) {
  :root {--nav:62px}
  .nav {gap:8px}.brand {font-size:18px;gap:8px}.brand-mark {width:26px;height:26px}
  .nav-actions .button {min-height:34px;padding:7px 12px}
  .nav .quiet {min-height:40px;padding:6px 9px}
  .story {padding-top:10px}
  .chapter-tabs {gap:4px;margin-bottom:0;padding:0 0 6px}
  .chapter-tabs a {min-height:34px;padding:5px 11px}
  .chapter {padding:12px 0 14px}
  .chapter-heading {display:flex;align-items:center;gap:12px;min-width:0}
  .chapter-heading .eyebrow {display:none}
  .chapter-step {display:grid;place-items:center;flex:0 0 28px;height:24px;padding-right:10px;border-right:1px solid #d9d0c0;color:#988c78;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
  .chapter .chapter-heading h1,.chapter .chapter-heading h2,
  html:lang(zh-CN) .chapter .chapter-heading h1,html:lang(zh-CN) .chapter .chapter-heading h2 {min-width:0;margin:0;font-family:var(--sans);font-size:18px;font-weight:600;line-height:1.6;letter-spacing:-.015em;text-wrap:balance}
  .chapter-heading h1 span,.chapter-heading h1 em,.chapter-heading h2 span,.chapter-heading h2 em {display:inline;letter-spacing:0}
  .chapter-heading h1 em,.chapter-heading h2 em {margin-left:.25em;font-family:inherit;font-style:normal;font-weight:500;color:var(--accent)}
  .chapter .lead,.chapter .small {display:none}
  .chapter .chapter-actions {margin:12px 0 0}
  .chapter .actions {gap:8px}
  .chapter .button {gap:7px;min-height:42px;padding:8px 12px;font-size:12px}
  .chapter .text-link {min-height:40px;font-size:12px}
  .capsule-guide {gap:7px;font-size:12px;line-height:1.7}
  .capsule-guide svg {width:16px;height:16px;flex-basis:16px}
  .chapter .mode-switch {margin:0;padding:3px}
  .chapter .mode-switch button {min-height:34px;padding:6px 12px}
  #make-again {margin:0}
  .chapter .scroll-cue,.hero #try-demo {display:none}
  .scene,.scene[data-view=maker],.scene[data-view=script],.scene[data-view=markdown] {height:580px}
  #note-paper {height:min(400px,calc(100% - var(--note-top) - 12px))}
}
@media screen and (max-width:540px) {
  :root {--nav:54px}
  .shell {width:calc(100% - 24px)}
  .nav {gap:2px}.brand {font-size:17px;gap:6px}
  .nav .quiet {padding:6px}.nav-actions {gap:1px}.nav-actions .button {padding:7px 10px}
  .chapter-tabs {gap:1px}.chapter-tabs a {padding:5px 9px;font-size:11px}
  .chapter-heading {gap:10px}.chapter-step {flex-basis:24px;height:22px;padding-right:8px;font-size:10px}
  .chapter .chapter-heading h1,.chapter .chapter-heading h2,
  html:lang(zh-CN) .chapter .chapter-heading h1,html:lang(zh-CN) .chapter .chapter-heading h2 {font-size:clamp(14px,calc(var(--layout-vw) * 4.05),17px)}
  .chapter .button {padding-inline:8px}.hero .actions {gap:8px}
  .chapter .mode-switch {width:100%}.chapter .mode-switch button {min-height:38px}
  .scene,.scene[data-view=maker],.scene[data-view=script],.scene[data-view=markdown] {height:660px}
  .scene {--mobile-paper-top:calc(184px + var(--capsule-hit-height) + var(--capsule-gap))}
  #todo-paper {height:200px}
  #note-paper {top:212px;height:calc(100% - 212px)}
  #plugin-paper {top:0;height:min(330px,100%)}
  .scene[data-view=markdown] #note-paper {top:0;height:100%}
  .maker {padding:14px}
  .maker-heading {gap:7px;flex-wrap:nowrap}.maker-heading>div {min-width:0;flex:1}
  .maker-heading h3 {font-size:16px}.maker-heading .quiet {flex-shrink:0}
  .demo-disclosure {margin:8px 0;font-size:10px}
  .recipe-description {margin:8px 0;font-size:11px}
  .recipes button {min-height:38px;padding:5px 8px}
  .pipeline {margin-top:12px;padding-top:8px}
  .scene-bottom .appearance {gap:4px}.scene-bottom .appearance>.small {font-size:10px}
  .scene-bottom .swatches button {width:30px;min-width:30px}
  .theme-switch {gap:5px;font-size:10px}
}

/* The converter is one live plugin instance in the paper or its capsule preview. */
.widget:has(.converter-tabs) {padding:14px}
.converter-tabs {display:flex;gap:5px;margin:0 0 10px}
.widget .converter-tabs button {flex:1;min-width:0;padding:6px 7px;border:1px solid var(--p-border);background:transparent;color:var(--p-weak);font-size:11px}
.widget .converter-tabs button[aria-pressed=true] {background:var(--p-code);color:var(--p-text);border-color:var(--p-active)}
.converter-field {display:block}
.converter-label {display:block;font-size:10px;color:var(--p-weak);margin-bottom:5px}
.converter-entry {display:flex;align-items:center;border:1px solid var(--p-border);border-radius:8px;background:var(--p-bg);overflow:hidden}
.converter-input {min-width:0;width:100%;padding:9px 10px;border:0;outline-offset:-3px;background:transparent;color:var(--p-text);font:500 22px/1.3 var(--sans);font-variant-numeric:tabular-nums}
.converter-unit {flex-shrink:0;padding-right:12px;font-size:14px;color:var(--p-weak)}
.converter-result {margin:10px 0;padding:10px 12px;border-radius:8px;background:var(--p-code)}
.converter-output {display:block;font-size:22px;line-height:1.35;font-weight:550;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.converter-hint {font-size:10px;color:var(--p-weak);text-align:center;margin:10px 0 0}
.preview-body .converter-tabs {margin-bottom:8px}.preview-body .converter-result {margin:9px 0;padding:8px 10px}
.preview-body .converter-input,.preview-body .converter-output {font-size:19px}.preview-body .converter-hint {display:none}
@media (pointer:coarse) {.widget .converter-tabs button {min-height:40px}}

.faq-list p a {color:var(--accent);text-decoration:underline;text-decoration-color:#b8aa8e;text-underline-offset:3px}

.site-header .button {background:var(--accent);padding-inline:22px;min-height:44px}
.site-header .button:hover {background:var(--accent-hover)}
.chapter .mode-switch button[aria-pressed=true] {color:var(--accent);background:#fff8eb}
.chapter .scroll-cue>span:last-child {color:var(--accent);border-color:#d8bd91;background:#fbefda}
.chapter .scroll-cue:hover>span:last-child {background:var(--accent-soft);border-color:#bf9459}
@media screen and (max-width:979px) {.site-header .button {min-height:38px;padding:8px 14px}}
@media screen and (max-width:540px) {.site-header .button {min-height:36px;padding:7px 11px}}