/* Hallmark · macrostructure: Narrative Workflow · theme: custom island fieldnotes · nav: N3 · footer: Ft4 · tone: playful, practical
 * paper: oklch(20% .007 250) · accent: oklch(86% .18 92) · display: Songti SC · body: PingFang SC
 * axes: dark / Chinese roman-serif / yellow · user-selected palette and system Chinese fonts take precedence
 * pre-emit critique: P4 H5 E4 S5 R5 V5 */
:root{--color-coal:#111315;--color-gun:#4B5563;--color-yellow:#FACC15;--color-red:#DC2626;--color-paper:#F5F0E6;--color-ink:#202124;--color-surface:#1c2023;--color-rule:#3d4247;--color-muted:#b9c0c3;--color-pink:#edd1dc;--color-lavender:#d5cbe1;--color-wine:#B8322A;--color-success:#81c7a5;--color-glass:rgba(17,19,21,.94);--color-shade:rgba(17,19,21,.6);--color-dots:rgba(75,85,99,.12);--color-clear:transparent;--font-display:'Songti SC','STSong','Noto Serif CJK SC',serif;--font-body:'PingFang SC','Microsoft YaHei',sans-serif;--font-mono:'SFMono-Regular',Consolas,monospace;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:80px;--ease-out:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-in-out:cubic-bezier(.4,0,.2,1)}
*{box-sizing:border-box}html,body{overflow-x:clip}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:var(--color-coal);color:var(--color-paper);font-family:var(--font-body);line-height:1.75;padding-bottom:112px}h1,h2,h3{font-style:normal;overflow-wrap:anywhere;min-width:0;line-height:1.25}h1,h2{font-family:var(--font-display)}h2{font-size:clamp(28px,3.1vw,44px);font-weight:600;margin:0 0 var(--space-lg)}h3{font-size:21px;margin:0 0 var(--space-md)}p{margin:0 0 var(--space-md)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%;height:auto}a,button,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--color-yellow);outline-offset:4px}a:active,button:active{transform:translateY(2px)}button:disabled,[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}[hidden]{display:none!important}[data-state=loading]{cursor:progress;opacity:.7}[data-state=error]{outline:2px solid var(--color-red)}[data-state=success]{border-color:var(--color-success)}.skip{position:fixed;top:-100px;left:16px;z-index:500;background:var(--color-yellow);color:var(--color-coal);padding:var(--space-md)}.skip:focus{top:8px}.top{position:sticky;top:0;z-index:90;background:var(--color-coal);margin-left:88px;min-height:72px;border-bottom:1px solid var(--color-rule);display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-xl);gap:var(--space-md)}.brand{display:flex;align-items:center;gap:var(--space-sm);font-weight:700;white-space:nowrap}.brand img{width:32px;height:32px}.top-note{font-size:12px;letter-spacing:.1em;color:var(--color-muted)}.top-links{display:flex;gap:var(--space-lg);align-items:center}.top-links a{white-space:nowrap;font-size:13px;min-height:44px;display:flex;align-items:center}.rail{position:fixed;left:0;top:0;bottom:0;width:88px;z-index:100;background:var(--color-surface);border-right:1px solid var(--color-rule);display:flex;flex-direction:column;align-items:center;padding:var(--space-lg) var(--space-sm);gap:var(--space-xl)}.rail-brand{font-family:var(--font-display);font-size:22px;writing-mode:vertical-rl;letter-spacing:.2em;margin-bottom:var(--space-xl)}.rail a:not(.rail-brand){font-size:12px;min-height:56px;min-width:56px;display:grid;place-content:center;text-align:center;white-space:nowrap;border:1px solid var(--color-clear)}.rail a[aria-current=page]{border-color:var(--color-yellow);color:var(--color-yellow)}.rail small{color:var(--color-muted);font-family:var(--font-mono)}main,.footer{margin-left:88px}.container{width:calc(100% - 96px);max-width:1320px;margin:auto}.hero{padding:var(--space-xl) 0 var(--space-2xl);position:relative;border-bottom:1px solid var(--color-rule)}.hero-top{display:flex;justify-content:space-between;color:var(--color-muted);font-size:12px;gap:var(--space-md);margin-bottom:var(--space-lg)}.hero-top span:first-child{color:var(--color-paper)}.hero-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-xl);align-items:center}.hero h1{margin:0 0 var(--space-lg);font-weight:700;font-size:clamp(56px,6.4vw,90px);line-height:1.03;letter-spacing:-.05em}.hero h1 .subtitle{display:block;max-width:28ch;font-size:16px;line-height:1.7;font-family:var(--font-body);font-weight:400;letter-spacing:0;margin-top:var(--space-md)}.original{display:block;font-size:11px;line-height:1.8;color:var(--color-muted);max-width:48ch;margin-top:var(--space-sm);font-family:var(--font-body);letter-spacing:0;font-weight:400}.lede{font-size:16px;max-width:36ch;color:var(--color-muted);margin-bottom:var(--space-lg)}.tags{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-lg)}.tags span{border:1px solid var(--color-rule);padding:var(--space-xs) var(--space-sm);font-size:12px}.actions{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);min-height:48px;border:1px solid var(--color-rule);background:var(--color-surface);font-weight:600;font-size:14px;white-space:nowrap;box-shadow:0 4px 0 var(--color-gun);transition:transform .12s var(--ease-out)}.btn.primary{background:var(--color-yellow);color:var(--color-coal);border-color:var(--color-yellow)}.btn:active{box-shadow:0 2px 0 var(--color-gun);transform:translateY(2px)}.minor{font-size:12px;color:var(--color-muted);margin-top:var(--space-md)}.hero-visual{margin:0;position:relative}.hero-visual>a{display:block;border:1px solid var(--color-rule);padding:var(--space-sm);background:var(--color-surface);transform:rotate(-1deg)}.hero-visual img{aspect-ratio:16/9;object-fit:contain}.hero-visual figcaption{display:flex;justify-content:space-between;gap:var(--space-md);margin-top:var(--space-md);font-size:12px;color:var(--color-muted)}.media-stamp{position:absolute;right:16px;top:-16px;background:var(--color-paper);color:var(--color-wine);font-family:var(--font-display);font-size:14px;padding:var(--space-sm) var(--space-md);z-index:2;transform:rotate(3deg);border:2px solid var(--color-wine)}.fact-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--color-rule);padding-top:var(--space-lg);margin-top:var(--space-xl)}.fact-strip>div{padding-right:var(--space-md)}dt{font-size:12px;color:var(--color-muted);margin-bottom:var(--space-xs)}dd{margin:0;font-size:14px}.story-band{background:var(--color-paper);color:var(--color-ink);padding:var(--space-3xl) 0;background-image:radial-gradient(var(--color-dots) .6px,var(--color-clear) .6px);background-size:6px 6px}.story-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-3xl);align-items:start}.story-layout p{max-width:60ch}.story-layout .story-note{font-family:var(--font-display);font-size:23px;border-bottom:2px solid var(--color-ink);padding-bottom:var(--space-lg);margin-bottom:var(--space-lg)}.chapter-select{border:2px solid var(--color-ink);background:var(--color-paper)}.chapter-select a{display:flex;justify-content:space-between;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-ink);align-items:center;white-space:nowrap}.chapter-select a:last-child{border:0}.chapter-select small{font-size:12px}.workflow{padding:var(--space-3xl) 0}.section-intro{margin-bottom:var(--space-xl);max-width:65ch}.workflow-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-2xl);padding:var(--space-xl) 0;border-top:1px solid var(--color-rule);align-items:center}.workflow-row:nth-of-type(even) .step-image{order:-1}.step-label{font-family:var(--font-mono);font-size:13px;color:var(--color-muted);margin-bottom:var(--space-md)}.workflow-row p{max-width:58ch;color:var(--color-muted)}.inline-link{display:inline-flex;align-items:center;gap:var(--space-md);min-height:44px;color:var(--color-yellow);border-bottom:1px solid var(--color-yellow);white-space:nowrap;font-size:14px}.step-image{margin:0;border:1px solid var(--color-rule);padding:var(--space-sm);background:var(--color-surface)}.step-image img{width:100%;aspect-ratio:16/9;object-fit:contain}.step-image figcaption{font-size:12px;color:var(--color-muted);padding:var(--space-sm)}.gallery-section{padding:var(--space-3xl) 0;background:var(--color-surface);border-block:1px solid var(--color-rule)}.section-heading{display:flex;justify-content:space-between;gap:var(--space-lg);align-items:baseline;margin-bottom:var(--space-lg)}.section-heading h2{margin:0}.gallery-main{margin:0}.gallery-main>a{display:block}.gallery-main img{width:100%;aspect-ratio:16/9;object-fit:contain;background:var(--color-coal)}.gallery-main figcaption{font-size:13px;padding:var(--space-md) 0;color:var(--color-muted)}.thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-md)}.thumbs a{border:1px solid var(--color-rule);padding:var(--space-xs);display:block}.thumbs img{width:100%;aspect-ratio:16/9;object-fit:contain}.thumbs span{display:block;font-size:12px;margin:var(--space-sm)}.characters{padding:var(--space-3xl) 0}.characters-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2xl)}.cast{margin:0;border-top:1px solid var(--color-rule)}.cast>div{display:flex;justify-content:space-between;padding:var(--space-md) 0;border-bottom:1px solid var(--color-rule)}.cast dt{font-size:18px;color:var(--color-paper);margin:0}.cast dd{font-size:13px;color:var(--color-muted);align-self:center}.faq-section{padding:var(--space-3xl) 0;background:var(--color-paper);color:var(--color-ink)}.faq-layout{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:var(--space-2xl)}details{border-top:1px solid var(--color-gun)}details:last-child{border-bottom:1px solid var(--color-gun)}summary{padding:var(--space-lg) 0;cursor:pointer;font-weight:600;font-size:16px}details p{max-width:65ch;padding:0 0 var(--space-lg);margin:0}details a{color:var(--color-wine);text-decoration:underline}.final{padding:var(--space-3xl) 0}.final-wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--space-xl)}.final h2{font-size:32px}.final p{color:var(--color-muted)}.footer{border-top:1px solid var(--color-rule);padding:var(--space-xl) 0 var(--space-2xl);color:var(--color-muted);font-size:12px}.footer p{max-width:100ch}.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);margin-bottom:var(--space-lg)}.footer-links a{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}.dock{position:fixed;bottom:0;left:88px;right:0;z-index:110;background:var(--color-glass);border-top:1px solid var(--color-rule);backdrop-filter:blur(12px);padding:var(--space-md) var(--space-xl);display:flex;justify-content:space-between;align-items:center;gap:var(--space-lg)}.dock-dialogue{display:flex;gap:var(--space-lg);align-items:center}.dock-name{font-size:12px;color:var(--color-yellow);border:1px solid var(--color-rule);padding:var(--space-xs) var(--space-sm);white-space:nowrap}.dock p{margin:0;font-size:14px}.dock-actions{display:flex;align-items:center;gap:var(--space-lg)}.dock .inline-link{font-size:12px}.page-head{padding:var(--space-2xl) 0}.breadcrumb{font-size:12px;color:var(--color-muted);margin-bottom:var(--space-xl);display:flex;gap:var(--space-sm);flex-wrap:wrap}.breadcrumb a{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}.breadcrumb span{align-self:center}.page-head h1{font-size:clamp(32px,4vw,56px);max-width:22ch;margin:0 0 var(--space-lg)}.page-head p{max-width:65ch;color:var(--color-muted)}.paper-sheet{background:var(--color-paper);color:var(--color-ink);padding:var(--space-xl);border:1px solid var(--color-rule)}.paper-sheet dt{color:var(--color-gun)}.paper-sheet h2{font-size:30px}.paper-sheet code{overflow-wrap:anywhere;font-family:var(--font-mono);font-size:13px}.content-block{padding:var(--space-xl) 0 var(--space-2xl);border-top:1px solid var(--color-rule);max-width:75ch}.content-block p{color:var(--color-muted)}.content-block ul,.content-block ol{padding-left:var(--space-lg);color:var(--color-muted)}.content-block li{margin-bottom:var(--space-md)}.guide-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-2xl);padding-bottom:var(--space-3xl)}.toc{position:sticky;top:104px;align-self:start;border:1px solid var(--color-rule);padding:var(--space-md)}.toc p{font-size:13px;color:var(--color-muted)}.toc a{display:block;padding:var(--space-sm);min-height:44px;font-size:13px;white-space:nowrap}.guide-body{min-width:0}.guide-body .content-block{max-width:none}.guide-body figure{margin:var(--space-xl) 0}.guide-body figure img{width:100%}.guide-body figcaption{font-size:12px;color:var(--color-muted);padding:var(--space-sm) 0}.notice{border:1px solid var(--color-rule);padding:var(--space-md);font-size:14px;color:var(--color-muted)}.download-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl);padding-bottom:var(--space-3xl)}.download-layout .paper-sheet p{max-width:60ch}.download-layout dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg);margin:var(--space-lg) 0}.filters{display:flex;flex-wrap:wrap;gap:var(--space-sm);padding-bottom:var(--space-lg)}.filters button{background:var(--color-surface);border:1px solid var(--color-rule);padding:var(--space-sm) var(--space-lg);min-height:44px;font-size:13px}.filters button[aria-pressed=true]{background:var(--color-yellow);color:var(--color-coal);border-color:var(--color-yellow)}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);padding-bottom:var(--space-3xl)}.gallery-card{margin:0;border:1px solid var(--color-rule);background:var(--color-surface)}.gallery-card a{display:block}.gallery-card img{width:100%;aspect-ratio:16/9;object-fit:contain}.gallery-card figcaption{padding:var(--space-md);font-size:13px}.gallery-card small{display:block;color:var(--color-muted)}dialog{background:var(--color-coal);color:var(--color-paper);border:1px solid var(--color-rule);padding:var(--space-md);max-width:94vw;width:1280px;max-height:94vh}dialog::backdrop{background:var(--color-shade)}.lightbox-header,.lightbox-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md)}dialog button{background:var(--color-surface);border:1px solid var(--color-rule);min-height:44px;padding:var(--space-sm) var(--space-md);white-space:nowrap}dialog img{width:100%;max-height:70vh;object-fit:contain;margin:var(--space-md) 0}#image-status{font-size:13px;max-width:65ch;margin:0}dialog .lightbox-footer span{font-size:12px;color:var(--color-muted)}
@media(hover:hover){a:hover,summary:hover{color:var(--color-yellow)}.story-band a:hover,.faq-section summary:hover{color:var(--color-wine)}.btn:hover{transform:translateY(-1px);color:inherit}.btn.primary:hover{color:var(--color-coal)}button:hover{border-color:var(--color-yellow)}}
@media(min-width:1600px){.hero{padding-top:var(--space-2xl);padding-bottom:var(--space-3xl)}.hero h1{font-size:104px}}
@media(max-width:1050px){.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-lg)}.hero h1{font-size:64px}.container{width:calc(100% - 64px)}.top-note{display:none}.dock-dialogue p{display:none}.story-layout{gap:var(--space-xl)}.workflow-row{gap:var(--space-xl)}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-layout{grid-template-columns:200px minmax(0,1fr)}}
@media(max-width:768px){.rail{position:sticky;top:64px;width:100%;height:52px;bottom:auto;flex-direction:row;justify-content:space-around;padding:var(--space-xs) var(--space-md);gap:var(--space-sm);border:0;border-bottom:1px solid var(--color-rule);z-index:90}.rail-brand{display:none}.rail a:not(.rail-brand){min-height:44px;min-width:56px;display:flex;align-items:center;gap:var(--space-sm)}.rail small{display:none}.top{margin:0;min-height:64px;padding:var(--space-sm) var(--space-md)}.top-links{gap:var(--space-md)}main,.footer{margin:0}.container{width:calc(100% - 32px)}html{scroll-padding-top:136px}.hero{padding:var(--space-lg) 0 var(--space-xl)}.hero-grid{grid-template-columns:minmax(0,1fr)}.hero h1{font-size:64px;letter-spacing:-.04em}.hero h1 br{display:none}.hero h1 .subtitle{font-size:14px;max-width:40ch;line-height:1.6;margin-top:var(--space-sm)}.original{font-size:10px;max-width:60ch}.hero-top{margin-bottom:var(--space-md);font-size:10px}.hero .lede{font-size:14px;max-width:46ch;margin-bottom:var(--space-md)}.tags{margin-bottom:var(--space-md)}.hero-visual{margin-top:var(--space-lg)}.hero-visual>a{transform:none;padding:var(--space-xs)}.media-stamp{top:-12px;font-size:12px;padding:var(--space-xs) var(--space-sm)}.fact-strip{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-lg)}.story-layout,.workflow-row,.characters-wrap,.faq-layout,.download-layout{grid-template-columns:minmax(0,1fr)}.story-band,.workflow,.gallery-section,.characters,.faq-section,.final{padding:var(--space-2xl) 0}.workflow-row:nth-of-type(even) .step-image{order:0}.workflow-row p{font-size:14px}.workflow-row{gap:var(--space-lg)}.thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{display:block}.section-heading .inline-link{margin-top:var(--space-sm)}.final-wrap{display:block}.final h2{font-size:28px}.dock{left:0;padding:var(--space-sm) var(--space-md);gap:var(--space-sm)}.dock-name{border:0;padding:0;font-size:11px}.dock-actions{gap:var(--space-sm)}.dock .inline-link{display:none}.dock .btn{min-height:44px;font-size:13px;padding:var(--space-sm) var(--space-md)}body{padding-bottom:84px}.guide-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}.toc{position:static}.toc a{display:inline-flex;margin-right:var(--space-sm);font-size:12px}.page-head{padding:var(--space-lg) 0}.page-head h1{font-size:36px}.paper-sheet{padding:var(--space-lg)}.gallery-grid{gap:var(--space-md)}.gallery-card figcaption{font-size:12px;padding:var(--space-sm)}.breadcrumb{margin-bottom:var(--space-md)}dialog{padding:var(--space-sm)}dialog img{max-height:62vh}}
@media(max-width:414px){.hero h1{font-size:52px}.hero-top span:last-child{display:none}.top .brand{font-size:14px}.top-links a{font-size:11px}.hero .actions{gap:var(--space-sm)}.hero .btn{font-size:12px;padding:var(--space-sm) var(--space-md)}.hero .minor{font-size:11px;margin-top:var(--space-sm)}.hero-visual figcaption{font-size:10px}.gallery-grid{grid-template-columns:minmax(0,1fr)}.download-layout dl{grid-template-columns:minmax(0,1fr)}.chapter-select a{padding:var(--space-md);font-size:14px}.chapter-select small{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.hero-visual>a,.media-stamp{transform:none}}