/* 方向 B · 编辑之眼：米白 / 墨黑 / 朱红；1920×1080 固定画布，等比缩放投屏 */
:root{--paper:#f5f1e8;--paper-2:#ece6d9;--ink:#20231f;--red:#bf402c;--muted:#5c5c55;--line:#c9c4b6;--serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC",serif;--sans:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;--mono:ui-monospace,"SFMono-Regular",monospace}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#d9d3c6;color:var(--ink);font:24px/1.6 var(--sans)}
button,a,input,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit}
button{color:inherit;cursor:pointer;border:1.5px solid var(--ink);background:transparent;padding:10px 20px;font-size:19px;line-height:1.3;transition:background .2s,color .2s,border-color .2s}
button:hover{color:var(--red);border-color:var(--red)}
button[aria-pressed=true],button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
button:disabled{opacity:.25;cursor:default}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
h1,h2,h3,p{margin:0}
img{display:block;max-width:100%;height:100%;object-fit:contain}
video{display:block;width:100%;height:100%;object-fit:contain;background:#171915}
kbd{font:14px var(--mono);margin-left:8px;padding:1px 6px;border:1px solid var(--line)}
.red{color:var(--red)}

/* 画布与外框 */
.deck{position:absolute;left:50%;top:50%;width:1920px;height:1080px;background:var(--paper);transform-origin:center center;overflow:hidden;display:flex;flex-direction:column}
.topbar{height:84px;margin:0 92px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);gap:24px;flex-shrink:0}
.brand{font:600 24px var(--serif);letter-spacing:2px}
.brand span{color:var(--red);margin:0 10px}
.edition{font-size:19px;color:var(--muted);letter-spacing:2px}
.edition b{font-weight:400;margin-left:28px;color:var(--ink)}
.top-actions{display:flex;gap:8px}
.top-actions button{border:0;padding:8px 10px;font-size:18px;color:var(--muted)}
.top-actions button:hover{color:var(--red)}
#stage{flex:1;min-height:0;position:relative;overflow:hidden}
.bottom{height:72px;margin:0 92px;border-top:1px solid var(--line);display:flex;align-items:center;gap:36px;flex-shrink:0}
.page-meta{display:flex;gap:22px;align-items:baseline;font-size:18px;color:var(--muted)}
.page-meta span:first-child{color:var(--red);font:600 20px var(--mono);white-space:nowrap}
#page-name{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#progress{display:flex;flex:1;gap:6px;align-items:center}
#progress button{height:22px;padding:0;flex:1;border:0;border-top:2px solid var(--line);transform:translateY(10px);background:none}
#progress button:hover{border-color:var(--ink)}
#progress button.active{border-color:var(--red);border-top-width:6px;transform:translateY(8px)}
.arrows{display:flex;gap:4px}
.arrows button{border:0;font-size:30px;padding:0 12px;line-height:1}

/* 页面骨架 */
.slide{height:100%;padding:40px 92px 30px;display:flex;flex-direction:column;gap:30px;overflow:hidden}
.slide-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-shrink:0}
.eyebrow{font-size:18px;letter-spacing:2px;color:var(--muted);margin-bottom:14px}
.eyebrow span,.eyebrow b{color:var(--red);font-weight:400}
.slide-heading h1{font:600 60px/1.2 var(--serif);letter-spacing:-2px;white-space:pre-line}
.slide-heading h1 .line{display:block;overflow:hidden}
.slide-heading h1 .line>span{display:inline-block}
.slide-heading .subtitle{max-width:600px;font-size:21px;color:var(--muted);line-height:1.6;border-left:6px solid var(--red);padding-left:20px}
.content{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:56px}
.copy{display:flex;flex-direction:column;justify-content:center;gap:26px;min-height:0}
.copy h2{font:600 64px/1.2 var(--serif);letter-spacing:-2px;white-space:pre-line}
.copy p{font-size:24px;max-width:640px}
.copy .muted{color:var(--muted);font-size:21px}
.button-row,.tabs{display:flex;flex-wrap:wrap;gap:10px}
.link-button{border:0;border-bottom:2px solid var(--ink);padding:6px 0;font-size:20px;align-self:flex-start}
.link-button:hover{border-color:var(--red)}
.visual{position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--paper-2);display:flex;align-items:center;justify-content:center}
.tiny{font-size:18px;color:var(--muted)}
.image-label{position:absolute;top:18px;left:18px;background:var(--paper);font-size:17px;padding:5px 12px;z-index:2}
.image-label.right{left:auto;right:18px}
.ai-mark{position:absolute;right:14px;bottom:12px;font-size:15px;color:#fff;text-shadow:0 1px 4px #000a;letter-spacing:1px;pointer-events:none;z-index:2}

/* 封面 */
.cover{padding:0;position:relative}
.cover-bg{position:absolute;inset:0;background:var(--paper)}
.cover-bg video{width:100%;height:100%;object-fit:cover;object-position:right center;background:var(--paper)}
.cover-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,rgb(245 241 232/.7) 32%,rgb(245 241 232/0) 55%)}
.cover-meta{position:absolute;left:92px;right:92px;top:44px;display:flex;justify-content:space-between;font-size:22px;letter-spacing:2px;color:var(--muted)}
.cover-title{position:absolute;left:88px;top:150px;z-index:2;font:600 150px/1.28 var(--serif);letter-spacing:-8px;pointer-events:none}
.cover-title>span{display:block;overflow:hidden}
.cover-title>span>span{display:inline-block}
.cover-sub{position:absolute;left:96px;top:590px;font-size:30px;letter-spacing:6px}
.cover-sign{position:absolute;left:96px;bottom:70px}
.cover-sign p{font-size:30px;font-weight:600;letter-spacing:2px}
.cover-sign p span{font-size:24px;font-weight:400;color:var(--muted)}
.signature-line{width:96px;border-top:8px solid var(--red);margin-top:28px;transform-origin:left}
.cover-index{position:absolute;left:340px;bottom:64px;display:flex;gap:40px;font-size:19px;color:var(--muted)}
.cover-index b{display:block;color:var(--ink);font:600 52px/1.1 var(--serif)}
.three-host{position:absolute;inset:0;touch-action:none;cursor:grab}
.three-host canvas{display:block;width:100%;height:100%}
.canvas-hint{position:absolute;right:50px;top:0;font-size:18px;color:var(--muted);pointer-events:none}

/* 起点 / 比较 */
.quote{font:600 40px/1.45 var(--serif)!important;border-left:6px solid var(--red);padding-left:26px}
.comparison{position:relative;width:100%;height:100%;overflow:hidden;--split:50%}
.comparison>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.comparison .before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.comparison .source-photo{object-fit:cover;object-position:center 92%}
.compare-line{position:absolute;top:0;bottom:0;left:var(--split);width:3px;background:var(--red);pointer-events:none}
.compare-line:after{content:'↔';position:absolute;top:50%;transform:translate(-50%,-50%);padding:10px 14px;background:var(--red);color:#fff;font-size:22px}
.compare-range{position:absolute;bottom:20px;left:5%;width:90%;accent-color:var(--red)}

/* 侧栏与流程 */
.side-panel{display:flex;flex-direction:column;gap:22px;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:4px}
.side-panel h2{font:600 40px/1.3 var(--serif);letter-spacing:-1px}
.side-panel p{font-size:21px;color:var(--muted)}
.flow{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.flow li{display:flex;gap:18px;align-items:baseline;border-bottom:1px solid var(--line);padding:15px 0;font-size:22px;line-height:1.45}
.step-num{color:var(--red);font:600 18px var(--mono);flex-shrink:0}
.aside-caption{font-size:18px!important;color:var(--muted);margin-top:auto;line-height:1.6}
.project-link{font-size:18px;border-bottom:1.5px solid var(--ink);padding-bottom:4px;align-self:flex-start}
.project-content{grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:64px}
.demo-column{display:flex;flex-direction:column;gap:16px;min-height:0;min-width:0}
.demo-frame{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;background:var(--paper-2);overflow:hidden}
.demo-frame:before{content:"";position:absolute;left:0;top:0;width:96px;border-top:8px solid var(--red);z-index:3}
.demo-frame video,.demo-frame>img{width:100%;height:100%;object-fit:contain}
.demo-frame video{background:transparent}
.demo-frame iframe{border:0;width:100%;height:100%;background:var(--paper);display:block}
.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;flex-shrink:0}
.demo-toolbar .tabs button{padding:8px 16px;font-size:18px}

/* 字幕同步（白板） */
.srt-lines{display:flex;flex-direction:column;gap:6px}
.srt-lines button{text-align:left;font-size:20px;padding:10px 14px;border-color:var(--line);display:flex;gap:14px}
.srt-lines button small{color:var(--red);font:16px var(--mono);padding-top:3px}
.srt-lines button.active{background:var(--red);border-color:var(--red);color:#fff}
.srt-lines button.active small{color:#fff}
.caption-overlay{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);background:#20231fe6;color:#fff;font-size:30px;padding:8px 24px;letter-spacing:1px;white-space:nowrap;pointer-events:none;z-index:2}
.caption-overlay:empty{display:none}

/* IP */
.thumb-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.thumb-grid button{padding:0;overflow:hidden;aspect-ratio:1;position:relative;border-color:var(--line);background:#fff}
.thumb-grid button[aria-pressed=true]{border:3px solid var(--red);background:#fff}
.thumb-grid img{width:100%;height:100%;object-fit:cover}
.thumb-grid span{position:absolute;bottom:0;right:0;background:var(--paper);color:var(--ink);font-size:14px;padding:1px 6px}
.ip-preview{width:32px;height:32px;flex-shrink:0}
.ip-main{width:100%;height:100%;object-fit:contain}
.ip-context{display:flex;align-items:center;gap:16px;background:#fff;padding:14px 18px;font-size:20px}

/* 构图实验室 */
.composition-layout{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:48px;flex:1;min-height:0}
.composition-main{display:flex;flex-direction:column;min-height:0;gap:14px}
.composition-image{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.composition-image .frame16{position:relative;height:100%;aspect-ratio:16/9;max-width:100%;overflow:hidden;background:var(--paper-2)}
.composition-image img{width:100%;height:100%;object-fit:cover}
.composition-image svg{position:absolute;inset:0;width:100%;height:100%;color:#fff;pointer-events:none}
.composition-image svg path,.composition-image svg rect,.composition-image svg circle{vector-effect:non-scaling-stroke;stroke:currentColor;stroke-width:2.5;fill:none;filter:drop-shadow(0 1px 2px #000a)}
.composition-strip{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;flex-shrink:0}
.composition-strip button{padding:0;border:0;overflow:hidden;position:relative;height:104px;background:var(--paper-2)}
.composition-strip button:after{content:"";position:absolute;inset:0;border:3px solid transparent;transition:border-color .2s}
.composition-strip button.active:after{border-color:var(--red)}
.composition-strip img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .2s}
.composition-strip button.active img,.composition-strip button:hover img{opacity:1}
.composition-strip span{position:absolute;inset:auto 0 0;background:#f5f1e8f0;color:var(--ink);font-size:16px;padding:2px 4px;text-align:center}
.side-panel .composition-number{font:600 120px/1 var(--serif);color:var(--red);letter-spacing:-4px}
.composition-detail{border-top:2px solid var(--ink);padding-top:18px;font-size:22px;line-height:1.75;overflow:auto;max-height:300px}

/* 灵感库 */
.resources{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;min-height:0;overflow:auto;border-top:2px solid var(--ink)}
.resource{padding:22px 4px;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:baseline}
.resource-number{color:var(--red);font:600 18px var(--mono)}
.resource b{font:600 32px/1.2 var(--serif);display:block}
.resource p{color:var(--muted);font-size:19px;margin-top:6px}
.resource .arrow{margin-left:auto;font-size:24px}
.resource[hidden]{display:none}

/* 方法 / 海报 */
.method-poster{position:relative;background:#fafaf7;overflow:hidden;height:100%;width:100%}
.method-poster>img{width:100%;height:100%;object-fit:cover}
.poster-copy{position:absolute;left:7%;top:9%;max-width:50%;font:600 84px/1.15 var(--serif);letter-spacing:-3px;color:var(--ink)}
.poster-copy small{display:block;font:18px var(--mono);letter-spacing:2px;margin-bottom:20px}
.poster-copy em{font-style:normal;color:var(--red)}
.method-poster.noisy .poster-copy{font:700 34px var(--sans);max-width:90%;text-shadow:3px 3px #ff7f43;color:#6c38c9}
.method-poster.noisy:after{content:'HOT ★ 全新上市 ★ 不容错过';position:absolute;bottom:15%;left:8%;right:8%;padding:22px;background:linear-gradient(45deg,#a64df5,#4f9eff);border-radius:40px;color:white;text-align:center;transform:rotate(-7deg);font-size:30px}
.control-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:20px}
.control-row input,.control-row select{accent-color:var(--red);max-width:60%}
.terminal{background:var(--ink);color:var(--paper);padding:44px;font:26px/1.9 var(--mono);white-space:pre-wrap;position:relative;overflow:auto}
.terminal .blue{color:#f08a73}
.copy .repo-mark{font:600 96px var(--serif);color:var(--red);letter-spacing:-4px}

/* 审美对照 */
.taste-frame{background:#fff;flex:1;min-height:0;position:relative;overflow:hidden;border:2px solid var(--ink)}
.taste-site{height:100%;padding:56px;position:relative}
.taste-site.bad{background:linear-gradient(125deg,#e8dbff,#e6f4ff);text-align:center;font-family:var(--sans)}
.taste-site.good{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;background:#fffdf5}
.taste-site .mini-nav{position:absolute;top:22px;left:40px;right:40px;display:flex;justify-content:space-between;font-size:16px}
.taste-site h2{font:600 92px/1.12 var(--serif);letter-spacing:-3px;max-width:720px}
.taste-site.bad h2{margin:60px auto 20px;color:#864dcd;font:700 52px var(--sans)}
.taste-site p{font-size:22px;margin-top:22px}
.taste-site img{max-height:100%;object-fit:cover;width:100%;min-height:0}
.taste-site.good .mini-cta{display:inline-block;margin-top:30px;padding:12px 22px;background:var(--red);color:white;font-size:20px}
.fake-cards{display:flex;justify-content:center;gap:20px;margin-top:48px}
.fake-cards span{padding:40px 34px;background:#ffffffa6;border-radius:18px;box-shadow:0 8px 18px #833dce22;font-size:22px}

/* 剪辑页：OpenCut 操作录屏 */
.edit-layout .tabs button{padding:8px 14px;font-size:18px}
.edit-layout{display:grid;grid-template-columns:540px minmax(0,1fr);gap:56px;min-height:0;flex:1}
.edit-video{min-height:0;position:relative;background:var(--ink);display:flex;justify-content:center}
.edit-video:before{content:"";position:absolute;left:0;top:-14px;width:96px;border-top:8px solid var(--red)}
.edit-video video{width:100%;height:100%;object-fit:contain}
.edit-video.portrait video{width:auto;max-width:100%}
.video-stamp{position:absolute;top:16px;left:16px;background:var(--paper);padding:5px 12px;font-size:17px;z-index:2}
.edit-steps{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.edit-steps button{width:100%;border:0;border-bottom:1px solid var(--line);text-align:left;padding:11px 0;font-size:21px;display:flex;gap:16px;align-items:baseline}
.edit-steps button small{font:600 16px var(--mono);color:var(--red);width:56px;flex-shrink:0}
.edit-steps button.active{background:none;color:var(--red);border-color:var(--line)}
.pending-note{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:100%;color:var(--paper);font-size:26px;text-align:center;padding:40px}

/* 收尾 */
.action-list{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.action-list label{font-size:23px;padding:16px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:center;cursor:pointer}
.action-list input{accent-color:var(--red);width:22px;height:22px;flex-shrink:0}
.copy .callout{font:600 84px/1.25 var(--serif);letter-spacing:-4px;max-width:none}
.callout span{color:var(--red)}
.practice-result{font:600 20px var(--mono);color:var(--red);margin-top:18px}
.screen-note{display:inline-block;border-left:6px solid var(--red);padding:4px 14px;font-size:19px;align-self:flex-start;background:var(--paper-2)}

/* 摄影、文化 */
.photo-zoom{overflow:hidden;height:100%;width:100%;display:flex;justify-content:center}
.photo-zoom img{transition:transform .7s cubic-bezier(.2,.7,.2,1),transform-origin .7s;transform-origin:50% 0}
.photo-zoom[data-zoom=main] img{transform:scale(1.62)}
.photo-zoom[data-zoom=wall] img{transform-origin:0 100%;transform:scale(2.4)}
.photo-zoom[data-zoom=detail] img{transform-origin:100% 100%;transform:scale(2.4)}
.gene-board{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;height:100%;width:100%;padding:28px;background:var(--paper)}
.gene-board>img{height:100%;width:100%;object-fit:contain;background:var(--paper-2)}
.gene-list{display:flex;flex-direction:column;gap:18px;justify-content:center}
.gene{display:grid;grid-template-columns:132px 1fr;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px}
.gene figure{margin:0;height:100px;overflow:hidden}
.gene figure img{width:100%;height:100%;object-fit:cover}
.gene b{display:block;font:600 26px var(--serif)}
.gene span{font-size:19px;color:var(--muted)}
.swatches{display:flex;gap:10px}
.swatches i{width:56px;height:56px;display:block}
.dna-card{position:absolute;bottom:24px;left:24px;max-width:460px;padding:18px 22px;background:#f5f1e8f2;font-size:19px;line-height:1.8;border-left:6px solid var(--red)}

/* 通用 */
.loading{padding:20vh;text-align:center;font-size:28px}
.error-state{padding:80px;max-width:900px;margin:auto}
.error-state p{margin:20px 0}
.hidden,[hidden]{display:none!important}

/* 对话框（不随画布缩放） */
dialog{border:0;border-top:8px solid var(--red);background:var(--paper);color:var(--ink);padding:40px 44px;width:min(980px,92vw);max-height:88dvh;overflow:auto;box-shadow:0 40px 120px #20231f55;font-size:17px}
dialog::backdrop{background:#20231f99;backdrop-filter:blur(6px)}
dialog .eyebrow{font-size:14px}
dialog h2{font:600 34px/1.3 var(--serif);letter-spacing:-1px;margin-bottom:24px}
dialog .close{position:absolute;right:14px;top:10px;border:0;font-size:30px;padding:2px 12px}
dialog button{font-size:15px;padding:8px 14px}
dialog .flow li{font-size:17px;padding:12px 0}
dialog .control-row{font-size:16px}
dialog .composition-detail{font-size:16px}
#menu-items{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
#menu-items button{border:0;border-bottom:1px solid var(--line);padding:12px 2px;text-align:left;font-size:17px;display:flex;gap:14px}
#menu-items b{font:600 14px var(--mono);color:var(--red);padding-top:3px}
#notes{width:min(700px,90vw)}
#notes-content{font-size:18px;line-height:1.9;white-space:pre-line}
#media-dialog{width:min(1200px,94vw);padding-top:52px}
#modal-content video{max-height:64vh;height:auto;aspect-ratio:16/9}
#modal-content .modal-tabs{margin-bottom:16px}
#modal-content .three-demo{height:46vh;max-height:380px;position:relative;background:var(--paper-2)}
.modal-caption{margin:14px 0;font-size:15px;color:var(--muted)}

/* 第 2 页 学习路线 */
.origin-grid{grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px}
.path-stage{display:flex;flex-direction:column;gap:18px;min-height:0}
.path-video{position:relative;flex:1;min-height:0;background:var(--paper-2);overflow:hidden}
.path-video:before{content:"";position:absolute;left:0;top:0;width:96px;border-top:8px solid var(--red);z-index:2}
.path-video video{width:100%;height:100%;object-fit:cover;background:var(--paper-2)}
.path-caption{position:absolute;left:24px;bottom:24px;max-width:560px;background:#f5f1e8f2;padding:14px 22px;font-size:22px;border-left:6px solid var(--red)}
.path-caption:empty{display:none}
.path-caption b{display:block;font:600 28px var(--serif);margin-bottom:4px}
.path-route{position:relative;flex-shrink:0}
.path-line{position:absolute;left:20px;right:20px;top:13px;height:2px;background:var(--line)}
.path-line i{display:block;height:100%;width:0;background:var(--red);transition:width .25s linear}
.path-route ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:8px;position:relative}
.path-route button{border:0;padding:0;background:none;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;width:100%}
.path-route button:hover,.path-route button.active{background:none;color:var(--ink)}
.path-dot{width:28px;height:28px;border-radius:50%;background:var(--paper);border:3px solid var(--line);display:block}
.path-route button.active .path-dot{border-color:var(--red);background:var(--red)}
.path-route b{font:600 16px var(--mono);color:var(--red)}
.path-route li{min-width:0}
.path-route em{display:block;font-style:normal;font-size:18px;line-height:1.35;color:var(--muted)}
.path-route button.active em{color:var(--ink);font-weight:600}

/* 第 4 页 网站截图 */
.site-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:26px 22px;min-height:0;border-top:2px solid var(--ink);padding-top:22px}
.site-card{display:flex;flex-direction:column;gap:8px;min-width:0}
.site-card[hidden]{display:none}
.site-card figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}
.site-card figure img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.site-card:hover figure img{transform:scale(1.06)}
.site-card div{display:flex;align-items:baseline;gap:10px}
.site-card b{font:600 24px/1.2 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-card .arrow{margin-left:auto}
.site-card p{font-size:17px;color:var(--muted);line-height:1.45}

/* 第 5 页 品牌广告 */
.method-grid{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
.layer-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.layer-list li{display:flex;gap:18px;border-bottom:1px solid var(--line);padding:16px 0}
.layer-list b{display:block;font:600 26px var(--serif)}
.layer-list p{font-size:21px;color:var(--ink);line-height:1.5}
.method-visual{background:var(--paper-2)}
.method-visual .method-poster{height:100%;width:auto;aspect-ratio:3/4}
.method-visual .poster-copy{left:9%;top:8%;max-width:82%;font-size:64px;letter-spacing:-2px;color:#20231f}
.method-visual .poster-copy em{color:#c8102e}
.method-visual .poster-copy small{font:18px var(--sans);letter-spacing:4px;color:#8a8579}

/* 第 6 页 设计决策机 */
.open-grid{grid-template-columns:minmax(0,500px) minmax(0,1fr)}
.designer-machine{display:flex;flex-direction:column;gap:14px;min-height:0}
.dm-stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:28px;background:var(--ink);color:var(--paper);padding:30px}
.dm-steps{display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.dm-step{border-left:4px solid var(--red);padding:6px 0 6px 18px}
.dm-step b{display:block;font:600 17px var(--mono);color:#f08a73;letter-spacing:1px;margin-bottom:6px}
.dm-hook{font:600 30px/1.35 var(--serif)}
.dm-swatches{display:flex;flex-wrap:wrap;gap:8px}
.dm-swatches span{border:1px solid #f5f1e855;padding:4px 10px;font-size:17px}
.dm-style{font:600 30px var(--serif)}
.dm-score{font:600 64px/1 var(--serif);color:#f08a73}
.dm-score small{font-size:22px;color:#f5f1e899;margin-left:6px}
.dm-image{margin:0;position:relative;background:#2c2f2a;display:flex;align-items:center;justify-content:center;min-height:0}
.dm-image img{width:100%;height:100%;object-fit:contain}
.dm-image figcaption{position:absolute;left:0;bottom:-2px;background:var(--red);color:#fff;font-size:17px;padding:4px 12px}
.dm-thumbs{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;flex-shrink:0}
.dm-thumbs button{padding:0;border:0;height:86px;position:relative;overflow:hidden;background:var(--paper-2)}
.dm-thumbs button img{width:100%;height:100%;object-fit:cover;opacity:.6}
.dm-thumbs button.active img,.dm-thumbs button:hover img{opacity:1}
.dm-thumbs button.active{outline:3px solid var(--red);outline-offset:-3px;background:var(--paper-2)}
.dm-thumbs span{position:absolute;inset:auto 0 0;background:#f5f1e8f0;color:var(--ink);font-size:14px;padding:1px 2px}

/* 第 7 页 鹈鹕 */
.pelican-grid{grid-template-columns:minmax(0,460px) minmax(0,1fr)}
.prompt-quote{font:600 24px/1.55 var(--serif)!important;color:var(--ink)!important;border-left:6px solid var(--red);padding-left:18px}
.pelican-frame{background:var(--ink)}
.pelican-cells{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;height:100%;aspect-ratio:1/1;max-width:100%}
.pelican-cell{margin:0;position:relative;overflow:hidden;background:#fff}
.pelican-scale{position:absolute;inset:0;overflow:hidden}
.pelican-scale iframe{width:1080px;height:1080px;border:0;transform-origin:0 0;transform:scale(var(--k,.2));pointer-events:none;background:#fff}
.pelican-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#e2ddd1;color:var(--muted);font-size:24px}
.pelican-cell figcaption{position:absolute;left:0;right:0;bottom:0;background:#20231fd9;color:#f5f1e8;padding:4px 10px;font-size:14px;display:flex;flex-direction:column;line-height:1.35}
.pelican-cell figcaption b{font-size:16px}

/* 第 9 页 基因拆解 */
.gene-board{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;height:100%;width:100%;padding:28px 32px;background:var(--paper);align-items:center}
.gene-row{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 28px}
.gene{position:relative;display:flex;flex-direction:column;gap:6px}
.gene-n{position:absolute;left:0;top:0;background:var(--red);color:#fff;font:600 16px var(--mono);padding:3px 9px;z-index:1}
.gene figure{margin:0;height:200px;width:100%;overflow:hidden;background:var(--paper-2)}
.gene figure img{width:100%;height:100%;object-fit:cover}
.gene b{font:600 28px var(--serif)}
.gene p{font-size:19px;color:var(--muted)}
.gene-type{height:100%;display:flex;align-items:center;justify-content:center;font:600 72px/1.1 var(--serif);color:var(--ink)}
.gene-swatch{height:100%;display:flex}
.gene-swatch i{display:block;height:100%}
.gene-result{display:flex;flex-direction:column;gap:10px;height:100%;justify-content:center}
.gene-result img{height:auto;max-height:86%;width:100%;object-fit:contain}
.gene-arrow{font:600 22px var(--serif);color:var(--red)}

/* 第 10 页 机位图 */
.photo-plan{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;height:100%;width:100%;padding:24px;background:var(--paper)}
.photo-plan .photo-zoom{aspect-ratio:3/4;height:100%;width:auto;background:var(--paper-2)}
.plan-side{display:flex;flex-direction:column;gap:14px;min-height:0}
.plan-map{flex:1;min-height:0;width:100%}
.plan-map .map-note{font-size:14px;fill:#5c5c55}
.plan-map .cam{cursor:pointer}
.plan-map .cam .fov{fill:#bf402c;opacity:.14;transition:opacity .3s}
.plan-map .cam.on .fov{opacity:.5}
.plan-map .cam rect,.plan-map .cam circle{fill:#20231f}
.plan-map .cam.on rect,.plan-map .cam.on circle{fill:#bf402c}
.plan-map .cam-label{font:600 20px var(--mono);fill:#20231f}
.plan-map .sun circle{fill:#e8e2d4;stroke:#c99a3c;stroke-width:3}
.plan-map .sun path{stroke:#c99a3c;stroke-width:3;stroke-dasharray:6 6}
.cam-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.cam-list button{width:100%;border:0;border-bottom:1px solid var(--line);text-align:left;padding:10px 0;font-size:19px;display:flex;gap:14px}
.cam-list b{font:600 19px var(--mono);color:var(--red)}
.cam-list li.on button{color:var(--red);background:none}

/* 第 14 页 Prompt */
.prompt-box{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
.prompt-head{display:flex;align-items:center;justify-content:space-between}
.prompt-head b{font:600 26px var(--serif)}
.prompt-box pre{margin:0;flex:1;min-height:0;overflow:auto;background:var(--ink);color:var(--paper);padding:20px 22px;font:17px/1.7 var(--sans);white-space:pre-wrap}

/* 第 16 页 Punk 九宫格 */
.punk-frame{background:var(--paper)}
.punk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:100%;aspect-ratio:3/4*1;padding:10px}
.punk-grid{aspect-ratio:auto;width:auto;height:100%;grid-template-rows:repeat(3,1fr)}
.punk-grid button{padding:0;border:0;position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--paper-2)}
.punk-grid button img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.punk-grid button:hover img{transform:scale(1.05)}
.punk-grid button span{position:absolute;left:0;top:0;background:var(--red);color:#fff;font-size:14px;padding:2px 8px}
.punk-modal{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.punk-modal img{height:60vh;width:auto}
.punk-modal p{font-size:18px;line-height:1.8}

/* IP 缩略图 7 列 */
.ip-logo .thumb-grid{grid-template-columns:repeat(7,1fr)}

/* 第 20 页 */
.closing-grid{grid-template-columns:minmax(0,640px) minmax(0,1fr)}
.course-url{font:600 25px/1.4 var(--mono);color:var(--red);word-break:break-all;border-bottom:3px solid var(--red);align-self:flex-start}
.course-qr{width:200px;height:200px}
.closing-grid .copy .callout{font-size:58px;letter-spacing:-2px}
.link-table{width:100%;border-collapse:collapse;font-size:17px}
.link-table th{text-align:left;font:600 16px var(--mono);color:var(--muted);border-bottom:2px solid var(--ink);padding:6px 8px;position:sticky;top:0;background:var(--paper)}
.link-table td{border-bottom:1px solid var(--line);padding:6px 8px;vertical-align:top}
.link-table td:first-child{color:var(--red);white-space:nowrap}
.link-table td:nth-child(2){white-space:nowrap;font-weight:600}
.link-table a:hover{color:var(--red)}

/* 剪辑工具对比 */
.compare-wrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:16px}
.tool-compare{width:100%;border-collapse:collapse;table-layout:fixed;font-size:20px;line-height:1.35}
.tool-compare thead th{text-align:left;vertical-align:bottom;border-bottom:2px solid var(--ink);padding:0 16px 10px}
.tool-compare thead a{display:block;font:600 28px var(--serif)}
.tool-compare thead small{display:block;font-size:16px;color:var(--muted);font-weight:400}
.tool-compare thead .legend{width:260px;padding-left:0;font:400 16px var(--sans);color:var(--muted)}
.tool-compare tbody th{text-align:left;font-weight:600;padding:9px 16px 9px 0}
.tool-compare td{padding:9px 16px;border-left:1px solid var(--line)}
.tool-compare tbody tr{border-bottom:1px solid var(--line)}
.tool-compare tbody tr:first-child{background:var(--paper-2)}
.tool-compare tbody tr:first-child th{color:var(--red);padding-left:12px}
.tool-compare i{font-style:normal;margin-right:10px}
.tool-compare .yes i{color:var(--ink)}
.tool-compare .part i,.tool-compare .unknown i{color:var(--red)}
.tool-compare .no{color:var(--muted)}
.tool-compare .no i{color:var(--line)}
.tool-compare .info{font-size:17px;color:var(--muted)}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Opus 5.5：四支并行播放的风格画廊 */
.opus-layout{grid-template-columns:500px minmax(0,1fr);gap:56px;align-items:center}
.opus-copy{gap:24px}
.opus-copy .eyebrow{margin:0;font-size:18px}
.opus-copy h2{font-size:66px}
.opus-copy p{font-size:23px}
.opus-takeaway{border-left:4px solid var(--red);padding-left:20px}
.opus-takeaway strong{color:var(--red);font-weight:600}
.opus-video-grid{width:100%;max-width:1056px;justify-self:end;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px}
.opus-video-grid figure{margin:0;min-width:0}
.opus-video-grid video{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.opus-video-grid figcaption{margin-top:10px;font-size:19px;letter-spacing:1px;color:var(--muted)}

/* GitHub 项目的国内源码下载入口 */
.repo-links{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px}
.repo-links .repo-download{display:inline-block;font:400 17px/1.5 var(--sans);color:var(--red);white-space:nowrap;border-bottom:1px solid currentColor}
.repo-download:hover{color:var(--ink)}
.link-table .repo-links{flex-wrap:nowrap;gap:10px}
.link-table .repo-download{font-size:15px}

/* 每个案例页直接展示 Prompt，与第 14 页保持一致 */
.inline-prompt{min-height:280px;flex:1 0 280px;gap:10px;min-width:0}
.inline-prompt .prompt-head{gap:12px;flex-shrink:0}
.inline-prompt .prompt-head b{font-size:24px}
.inline-prompt .prompt-head button{font-size:17px;padding:8px 14px;white-space:nowrap}
.example-prompt-picker{display:flex;align-items:center;gap:12px;font-size:17px;flex-shrink:0}
.example-prompt-picker select{flex:1;min-width:0;padding:6px;background:var(--paper);color:var(--ink);border:1px solid var(--line);font-size:17px}
#example-prompt-text{width:100%;flex:1;min-height:160px;resize:none;padding:20px 22px;background:var(--ink);border:0;color:var(--paper);font:17px/1.7 var(--sans)}
.example-prompt-note{font-size:15px;line-height:1.4;color:var(--muted);margin:0;flex-shrink:0}
.has-inline-prompt .side-panel,.has-inline-prompt .copy{gap:18px;overflow:auto;justify-content:flex-start}
.has-inline-prompt .side-panel>*,.has-inline-prompt .copy>*{flex-shrink:0}
.has-inline-prompt .copy .inline-prompt{flex-shrink:0}
.inline-example-layout{display:grid;grid-template-columns:520px minmax(0,1fr);gap:48px;flex:1;min-height:0}
.inline-example-demo{display:flex;flex-direction:column;gap:18px;min-height:0;min-width:0}
.cover>.inline-prompt{position:absolute;right:92px;top:120px;width:620px;height:600px;padding:24px;background:var(--paper);z-index:3}
.opus-layout{align-items:stretch}
.opus-copy h2{font-size:48px}
.opus-copy p{font-size:21px}
.has-inline-prompt .opus-copy{gap:12px}
.has-inline-prompt .copy .example-prompt-note{font-size:15px}
.opus-copy .inline-prompt{min-height:260px;flex-basis:260px}