:root { --ink:#151612; --paper:#f1efe8; --white:#fbfaf5; --line:#c9c6bb; --acid:#d9ff43; --muted:#6f7169; --danger:#9c3525; --warn:#a96b00; --good:#507200; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select { font:inherit; color:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #91af14; outline-offset:3px; }
.topbar { height:78px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.brandMark { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--acid); font:italic 700 16px Georgia,serif; }
.brand>span:last-child { display:flex; flex-direction:column; gap:2px; }
.brand strong { font-size:16px; letter-spacing:.05em; }
.brand small { color:var(--muted); font:9px ui-monospace,monospace; letter-spacing:.08em; }
.localBadge { display:flex; align-items:center; gap:9px; color:#4d5147; font-size:12px; }
.localBadge i { width:8px; height:8px; border-radius:50%; background:#75a400; box-shadow:0 0 0 4px #dbe7b6; }
.shortCopy { display:none; }
.hero { padding:76px 5vw 72px; display:grid; grid-template-columns:1fr minmax(300px,540px); column-gap:6vw; align-items:end; border-bottom:1px solid var(--line); }
.breadcrumb { grid-column:1/-1; margin-bottom:52px; display:flex; align-items:center; gap:14px; color:var(--muted); font:700 10px ui-monospace,monospace; }
.breadcrumb a { padding:8px 11px; border:1px solid var(--line); background:#e8e6de; color:var(--ink); text-decoration:none; }
.breadcrumb span::before { content:"/"; margin-right:14px; color:#a2a49b; }
.eyebrow,.sectionHead span,.panelHead,.settingsIntro span,.sourceFacts span,.metricsGrid span,.profileFact span,.preflightSummary span { font:700 10px ui-monospace,monospace; letter-spacing:.12em; }
.hero>.eyebrow { grid-column:1/-1; margin:0 0 22px; }
.hero h1 { margin:0; font-size:clamp(52px,6.6vw,104px); line-height:.92; letter-spacing:-.065em; }
.hero h1 em { color:#73766d; font-family:Georgia,"Songti SC",serif; font-weight:400; }
.heroIntro { margin:0 0 8px; color:#595c55; font-size:15px; line-height:1.85; }
.pathSection,.sourceSection,.metricsSection { padding:92px 5vw; border-bottom:1px solid var(--line); }
.sectionHead { margin-bottom:36px; display:grid; grid-template-columns:1fr minmax(280px,520px); gap:50px; align-items:end; }
.sectionHead h2 { margin:13px 0 0; font-size:clamp(34px,4.5vw,62px); letter-spacing:-.045em; }
.sectionHead>p { margin:0; color:var(--muted); font-size:13px; line-height:1.8; }
.pathGrid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.pathCard { min-height:190px; padding:25px; display:flex; flex-direction:column; align-items:flex-start; border:0; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); background:transparent; text-align:left; cursor:pointer; }
.pathCard b { color:#8a8c84; font:700 10px ui-monospace,monospace; }
.pathCard strong { margin-top:auto; font-size:20px; }
.pathCard span { margin-top:10px; color:var(--muted); font-size:11px; }
.pathCard.active { background:var(--acid); }
.pathCard.active b,.pathCard.active span { color:var(--ink); }
.sourceSection { background:var(--white); }
.dropzone { min-height:250px; padding:36px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #878980; text-align:center; cursor:pointer; }
.dropIndex { color:#85877f; font:9px ui-monospace,monospace; letter-spacing:.15em; }
.dropzone strong { margin-top:22px; font-size:27px; }
.dropzone p { margin:9px 0 24px; color:var(--muted); font-size:12px; }
.dropzone button,.profileUpload button,.canvasControls button { padding:10px 16px; border:1px solid var(--ink); background:transparent; font-size:11px; cursor:pointer; }
.dropzone.dragging { background:#edf7c6; border-style:solid; }
.sourceFacts { display:grid; grid-template-columns:repeat(3,1fr); border-left:1px solid var(--line); }
.sourceFacts>div { min-width:0; padding:22px; display:flex; flex-direction:column; gap:9px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.sourceFacts span { color:#81837b; }
.sourceFacts strong { overflow:hidden; text-overflow:ellipsis; font-size:13px; white-space:nowrap; }
.confirmProfile { margin-top:14px; padding:15px 18px; display:flex; gap:11px; align-items:flex-start; background:#fff1d0; color:#725018; font-size:12px; line-height:1.6; }
.workspace { margin:78px 5vw 96px; display:grid; grid-template-columns:minmax(420px,.9fr) minmax(560px,1.1fr); border:1px solid var(--line); background:var(--white); box-shadow:0 22px 60px rgb(45 46 39 / 8%); }
.canvasPanel { min-width:0; padding:25px; display:flex; flex-direction:column; background:#191a17; color:#fff; }
.panelHead { padding:0 2px 20px; display:flex; justify-content:space-between; color:#afb1a8; }
.canvasWrap { min-height:650px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:#262723; }
#previewCanvas { display:block; max-width:100%; max-height:650px; box-shadow:0 12px 40px #0008; touch-action:none; cursor:grab; }
#previewCanvas.dragging { cursor:grabbing; }
.canvasEmpty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:#8d8f87; text-align:center; }
.canvasEmpty strong { color:#e1e2dc; font-size:21px; }
.canvasEmpty span { font-size:11px; }
.canvasLegend { padding:18px 0 0; display:flex; flex-wrap:wrap; gap:18px; color:#9fa198; font-size:9px; }
.canvasLegend span { display:flex; align-items:center; gap:7px; }
.canvasLegend i { width:20px; height:0; display:block; border-top:1px solid; }
.canvasLegend .trim { color:#fff; }.canvasLegend .bleed { color:#ff6559; border-top-style:dashed; }.canvasLegend .safe { color:var(--acid); border-top-style:dotted; }
.canvasControls { margin-top:auto; padding-top:24px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.canvasControls label { flex:1; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; color:#b5b7af; font-size:10px; }
.canvasControls input { width:100%; accent-color:var(--acid); }
.canvasControls>div { display:flex; gap:7px; }.canvasControls button { border-color:#777970; color:#fff; }
.settingsPanel { min-width:0; }
.settingsIntro { min-height:70px; padding:20px 26px; display:flex; align-items:center; gap:24px; border-bottom:1px solid var(--line); }
.settingsIntro p { margin:0; color:var(--muted); font-size:11px; }
.settingModule { border-bottom:1px solid var(--line); }
.settingModule summary { padding:22px 27px; display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:14px; list-style:none; cursor:pointer; }
.settingModule summary::-webkit-details-marker { display:none; }
.settingModule summary>span { color:#8d8f87; font:700 10px ui-monospace,monospace; }
.settingModule summary div { display:flex; flex-direction:column; gap:4px; }
.settingModule summary strong { font-size:17px; }.settingModule summary small { color:var(--muted); font-size:10px; }
.settingModule summary>b { padding:4px 6px; border:1px solid var(--line); color:#85877f; font:8px ui-monospace,monospace; }
.moduleBody { padding:5px 28px 34px 78px; }
.segmented { margin-bottom:20px; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); }
.segmented button { min-height:38px; border:0; background:transparent; font-size:10px; cursor:pointer; }.segmented button.active { background:var(--ink); color:var(--acid); }
.fieldGrid { display:grid; gap:14px; }.fieldGrid.three { grid-template-columns:repeat(3,1fr); }.fieldGrid.two { grid-template-columns:repeat(2,1fr); }
.fieldGrid label,.exportConfig label { margin-bottom:17px; display:flex; flex-direction:column; gap:8px; color:#72746d; font-size:10px; }
.fieldGrid input,.fieldGrid select,.exportConfig input,.exportConfig select { width:100%; min-width:0; padding:11px; border:1px solid var(--line); border-radius:0; background:#f5f3ec; outline:0; }
.fieldGrid input:disabled { color:#777970; background:#e4e2da; cursor:not-allowed; opacity:.72; }
.unitInput,.colorField { display:grid; grid-template-columns:1fr auto; }.unitInput b { min-width:38px; display:grid; place-items:center; border:1px solid var(--line); border-left:0; background:#e7e5dd; }
.colorField { grid-template-columns:45px 1fr; }.colorField input[type=color] { height:39px; padding:4px; }
.operationGrid { margin-bottom:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.operationGrid label { min-height:68px; padding:12px; display:flex; gap:10px; border:1px solid var(--line); cursor:pointer; }
.operationGrid label:has(input:checked) { border-color:var(--ink); background:#e8f0c7; }
.operationGrid span { display:flex; flex-direction:column; gap:5px; }.operationGrid b { font-size:11px; }.operationGrid small { color:var(--muted); font-size:9px; }
.switchLine { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:10px; }
.engineStatus { margin-bottom:20px; padding:14px; display:flex; align-items:flex-start; gap:12px; background:#f5e8c7; }
.engineStatus i { width:9px; height:9px; margin-top:3px; flex:0 0 9px; border-radius:50%; background:#bf7812; }
.engineStatus div { display:flex; flex-direction:column; gap:5px; }.engineStatus strong { font-size:11px; }.engineStatus span { color:#6e6453; font-size:9px; line-height:1.6; }
.engineStatus.ready { background:#e8f1c9; }.engineStatus.ready i { background:#659000; }
.profileUpload { margin-bottom:15px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; border:1px dashed var(--line); color:var(--muted); font-size:10px; }
.profileFact { padding:14px; display:grid; grid-template-columns:120px 1fr; gap:7px 14px; background:#eeece5; }
.profileFact span { color:#7d7f77; }.profileFact strong { font-size:11px; }.profileFact small { grid-column:1/-1; color:var(--muted); font-size:9px; line-height:1.6; }
.metricsGrid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.metricsGrid>div { min-height:150px; padding:23px; display:flex; flex-direction:column; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.metricsGrid span { color:#83857d; }.metricsGrid strong { margin-top:auto; font:700 clamp(21px,2.4vw,35px) ui-monospace,monospace; }.metricsGrid small { margin-top:7px; color:var(--muted); font-size:9px; }
.riskMetric.good { background:#e8f2c6; }.riskMetric.warn { background:#fff0c8; }.riskMetric.high { background:#f2d8d1; }
.proofSection { padding:92px 5vw; background:var(--ink); color:#f7f5ee; }
.sectionHead.dark span { color:var(--acid); }.sectionHead.dark>p { color:#afb1a8; }
.proofGrid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.proofGrid figure { min-width:0; margin:0; padding:15px; position:relative; border:1px solid #4a4c45; }
.proofGrid figcaption { margin-bottom:12px; color:#aeb0a7; font:9px ui-monospace,monospace; letter-spacing:.12em; }
.proofGrid canvas { width:100%; height:auto; display:block; background:#262723; }
.proofUnavailable { position:absolute; inset:43px 15px 15px; display:grid; place-items:center; background:#171814d9; color:#a7a9a1; font-size:11px; text-align:center; }
.proofControls { margin-top:18px; display:flex; flex-wrap:wrap; gap:25px; color:#b6b8b0; font-size:10px; }
.proofControls label { display:flex; gap:8px; }.proofControls input { accent-color:var(--acid); }
.preflightSection { padding:100px 5vw; display:grid; grid-template-columns:.65fr 1.35fr; gap:7vw; }
.preflightTitle h2 { margin:15px 0 20px; font-size:clamp(42px,5vw,72px); letter-spacing:-.05em; }.preflightTitle>p:last-child { color:var(--muted); font-size:12px; line-height:1.8; }
.preflightPanel { border:1px solid var(--line); background:var(--white); }
.preflightSummary { padding:22px; display:grid; grid-template-columns:110px 1fr; gap:7px; background:#e7e5dd; }.preflightSummary strong { font-size:19px; }.preflightSummary small { grid-column:2; color:var(--muted); font-size:10px; }
.preflightSummary.ready { background:#e8f2c6; }.preflightSummary.warning { background:#fff0c8; }.preflightSummary.blocked { background:#f2d8d1; }
#preflightList { margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); }
#preflightList li { min-height:52px; padding:13px 16px; display:flex; align-items:flex-start; gap:10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:10px; line-height:1.55; }
#preflightList li::before { content:"•"; font-size:18px; line-height:.7; }#preflightList li.ok::before { color:var(--good); }#preflightList li.warn::before { color:var(--warn); }#preflightList li.error::before { color:var(--danger); }
.exportSection { padding:88px 5vw; display:grid; grid-template-columns:1fr minmax(380px,.8fr); gap:8vw; align-items:center; border-top:1px solid var(--line); background:var(--white); }.exportSection h2 { margin:15px 0; font-size:clamp(38px,4.4vw,64px); letter-spacing:-.05em; }.exportSection>div>p:last-child { max-width:680px; color:var(--muted); font-size:12px; line-height:1.8; }
.exportConfig { padding:25px; border:1px solid var(--line); }.exportConfig .qualityControl { display:grid; grid-template-columns:auto 1fr auto; align-items:center; }.exportConfig input[type=range] { padding:0; accent-color:var(--ink); }
#exportPackage { width:100%; min-height:64px; padding:0 20px; display:flex; justify-content:space-between; align-items:center; border:0; background:var(--acid); font-weight:800; cursor:pointer; }#exportPackage:disabled { filter:grayscale(1); opacity:.42; cursor:not-allowed; }#exportPackage b { font-size:25px; }
.exportError { margin:14px 0 0; padding:12px; background:#f2d8d1; color:var(--danger); font-size:10px; line-height:1.6; }
.packageMap { padding:0 5vw 90px; }.packageMap pre { margin:0; padding:28px; overflow:auto; background:var(--ink); color:#d9dbd3; font:11px/1.9 ui-monospace,monospace; }
.siteFooter { padding:36px 5vw 38px; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr); gap:48px; color:#696c64; font:12px/1.6 ui-monospace,monospace; }
.footerBrand { display:flex; flex-direction:column; gap:7px; }.footerBrand strong { color:var(--ink); font-size:14px; }.footerLinks { display:grid; grid-template-columns:repeat(3,max-content); justify-content:end; gap:12px 30px; }.footerLinks a,.footerLinks a:visited { color:var(--ink); text-decoration:none; border-bottom:1px solid #9a9c94; padding-bottom:3px; white-space:nowrap; }

@media (max-width:1100px) {
  .workspace { grid-template-columns:1fr; }.canvasWrap { min-height:560px; }.canvasPanel { min-height:720px; }.preflightSection { grid-template-columns:1fr; }.footerLinks { grid-template-columns:1fr; justify-content:start; }.siteFooter { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .topbar { height:68px; padding:8px 16px; }.brandMark { width:30px; height:30px; }.brand strong { font-size:14px; }.wideCopy { display:none; }.shortCopy { display:inline; }.localBadge { padding:8px 10px; border-radius:20px; background:#e4ead0; font-size:10px; }
  .hero { padding:52px 20px; grid-template-columns:1fr; }.breadcrumb { margin-bottom:34px; gap:8px; font-size:9px; }.breadcrumb span::before { margin-right:8px; }.hero h1 { font-size:48px; }.heroIntro { margin-top:28px; font-size:13px; }
  .pathSection,.sourceSection,.metricsSection,.proofSection,.preflightSection,.exportSection { padding:68px 16px; }.sectionHead { grid-template-columns:1fr; gap:20px; }.pathGrid,.metricsGrid { grid-template-columns:1fr; }.pathCard { min-height:150px; }.sourceFacts { grid-template-columns:1fr; }.workspace { margin:45px 16px 65px; }.canvasPanel { min-height:570px; padding:14px; }.canvasWrap { min-height:420px; }.canvasControls { align-items:stretch; flex-direction:column; }.canvasControls>div { justify-content:flex-end; }
  .settingsIntro { align-items:flex-start; flex-direction:column; gap:8px; }.settingModule summary { padding:20px 16px; grid-template-columns:28px 1fr auto; }.moduleBody { padding:4px 16px 28px; }.fieldGrid.three,.fieldGrid.two,.operationGrid { grid-template-columns:1fr; }.proofGrid { grid-template-columns:1fr; }.proofControls { flex-direction:column; }#preflightList { grid-template-columns:1fr; }.preflightSummary { grid-template-columns:1fr; }.preflightSummary small { grid-column:1; }.exportSection { grid-template-columns:1fr; }.siteFooter { padding:30px 20px 34px; }.footerLinks { gap:13px; }.footerLinks a { white-space:normal; overflow-wrap:anywhere; }
}