:root{--bg:#f3f4f1;--paper:#fff;--ink:#191d1a;--muted:#727a72;--line:#d9ded8;--accent:#ef6548;--stage:#e5e9e4;font-family:'DM Sans','Noto Sans SC',sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.site-shell{max-width:1680px;margin:auto}
.site-header{height:88px;padding:0 clamp(22px,4vw,72px);display:flex;align-items:center;gap:50px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-size:25px;font-weight:800;letter-spacing:-1.5px;white-space:nowrap}
.brand-mark{width:29px;height:29px;display:grid;grid-template-columns:1fr 1fr;gap:1px;transform:rotate(-10deg)}
.brand-mark i:nth-child(1),.brand-mark i:nth-child(4){background:#111}
.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){background:var(--accent)}
.accent-dot,.footer-brand span{color:var(--accent)}
.brand small{border-left:1px solid #bcc5bb;padding-left:12px;margin-left:6px;font-size:10px;letter-spacing:1.3px;font-weight:700}
.site-header nav{display:flex;gap:32px;margin:auto;font-size:13px;font-weight:700;color:#8a9289}
.site-header nav .active,.site-header nav a:hover{color:var(--ink)}
.header-tag{font-size:12px;font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:5px;white-space:nowrap}
.header-tag span{color:var(--accent);margin-left:14px}
.hero{padding:45px clamp(22px,4vw,72px) 52px}
.hero-kicker,.section-index,.section-topline,.stage-label,.preview-note,.spec-strip small,.footer-brand+span,footer>span:last-child{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1.15px;font-weight:500}
.hero-kicker{display:flex;gap:13px;align-items:center;color:#68786b}
.kicker-line{width:29px;height:1px;background:#738474}.kicker-no{color:var(--accent)}
.hero-body{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.hero h1{font-family:'Noto Sans SC',sans-serif;font-weight:800;font-size:clamp(48px,5vw,72px);line-height:1.18;letter-spacing:-5px;margin:20px 0 14px}
.hero h1 em,.print-guide h2 em{font-style:normal;color:var(--accent)}
.hero p{font-size:15px;line-height:1.85;color:#69736a;max-width:630px;margin:0}
.hero-glyph{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;width:115px;height:115px;transform:rotate(12deg);margin:0 40px 7px 0;flex:none}
.hero-glyph span:nth-child(1),.hero-glyph span:nth-child(4){background:#191d1a}.hero-glyph span:nth-child(2),.hero-glyph span:nth-child(3){background:var(--accent)}
.generator{background:var(--paper);border:1px solid #e1e5df;margin:0 clamp(10px,2vw,32px);padding:0 clamp(16px,3vw,50px) 60px}
.section-topline{height:62px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);color:#7b877c}.section-topline span:first-child{color:var(--accent)}
.workspace{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(350px,.82fr);gap:clamp(30px,4.8vw,76px);padding-top:36px}
.preview-heading,.settings-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:23px}
.section-index{color:var(--accent)}
.preview-heading h2,.settings-heading h2{margin:9px 0 0;font-size:clamp(21px,2vw,29px);letter-spacing:-1px}
.preview-note{color:#8c978b;white-space:nowrap;font-size:10px;letter-spacing:.4px;display:flex;align-items:center;gap:7px}.preview-note>span{width:7px;height:7px;border-radius:50%;background:#95ac93;box-shadow:0 0 0 4px #e6eee5}
.paper-stage{position:relative;min-height:575px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:52px 48px;background:var(--stage);background-image:radial-gradient(#ced5cb 1px,transparent 1px);background-size:17px 17px}
.paper-stage:before{content:'';position:absolute;inset:17px;border:1px solid #d0d7ce;pointer-events:none}
.stage-label{position:absolute;z-index:2;color:#929e91;font-size:9px;letter-spacing:1.2px}.stage-label-tl{left:28px;top:25px}.stage-label-tr{right:28px;top:25px}.stage-label-bl{left:28px;bottom:25px}.stage-label-br{right:28px;bottom:25px}
.paper-sheet{position:relative;width:100%;max-width:625px;aspect-ratio:297/210;background:#fff;box-shadow:0 18px 35px #2d3b2e24,0 2px 5px #2d3b2e0e;flex:none;overflow:hidden}
.paper-sheet.invalid{box-shadow:0 0 0 2px #d46b5a,0 18px 35px #2d3b2e24}
.checker-pattern{position:absolute;display:grid;overflow:hidden}
.checker-square.black{background:#000}.checker-square.white{background:#fff}
.spec-strip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin-top:16px}
.spec-strip>div{min-height:75px;padding:14px 18px;display:flex;flex-direction:column;gap:6px}.spec-strip>div+div{border-left:1px solid var(--line)}
.spec-strip small{color:#98a299;font-size:9px}.spec-strip strong{font-size:14px;letter-spacing:-.2px}
.preview-footnote{font-size:11px;color:#9aa299;line-height:1.6;margin:13px 0 0}
.settings{border-left:1px solid var(--line);padding-left:clamp(28px,3vw,50px)}
.settings-heading{align-items:center;padding-bottom:17px;border-bottom:1px solid var(--line);margin-bottom:0}.reference-link{border:0;border-bottom:1px solid #6b756c;background:none;color:#5d6b60;padding:0 0 4px;font-size:11px;font-weight:700;white-space:nowrap}.reference-link:hover{color:var(--accent)}
.setting-section{padding:25px 0 27px;border-bottom:1px solid var(--line)}
.setting-title{display:flex;align-items:center;gap:12px}.setting-title>span{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid #d1d9d0;border-radius:50%;font-family:'DM Mono',monospace;font-size:10px;color:#849285}.setting-title h3{font-size:17px;margin:0;letter-spacing:-.5px}
.setting-help{font-size:12px;color:#929d92;line-height:1.55;margin:10px 0 18px}
.field{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:700;min-width:0}.field>span small{font-family:'DM Mono',monospace;color:#acb5aa;font-size:9px;font-weight:500;margin-left:4px}.field input,.field select{height:44px;border:1px solid #d8dfd7;border-radius:0;background:#fff;padding:0 13px;color:var(--ink);width:100%;outline:none;min-width:0;font-size:13px}.field input:focus,.field select:focus{border-color:#6e9074;box-shadow:0 0 0 2px #dce9dd}.field input[type=number]{appearance:textfield;-moz-appearance:textfield}.field input[type=number]::-webkit-outer-spin-button,.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.orientation-group{margin-top:17px}.field-label{font-size:12px;font-weight:700;display:block;margin-bottom:8px}.segmented{display:grid;grid-template-columns:1fr 1fr;border:1px solid #d8dfd7}.segmented label{position:relative;min-width:0}.segmented label+label{border-left:1px solid #d8dfd7}.segmented input{position:absolute;opacity:0;inset:0}.segmented span{height:43px;display:flex;align-items:center;justify-content:center;gap:6px;color:#6c796d;font-size:12px;font-weight:700;cursor:pointer}.segmented small{font-family:'DM Mono',monospace;color:#a6b0a5;font-size:9px;font-weight:500}.segmented input:checked+span{background:var(--ink);color:white}.segmented input:checked+span small{color:#bdc8bd}.segmented input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:11px}.custom-fields{margin-top:17px}
.corner-hint{display:flex;gap:12px;align-items:flex-start;background:#f2f5f0;padding:14px;margin-top:15px;font-size:12px;font-weight:600;line-height:1.5}.corner-symbol{font-size:26px;line-height:1;color:#6c8c6e}.corner-hint strong{font-family:'DM Mono',monospace;font-size:14px}.corner-hint small{display:block;font-size:10px;font-weight:400;color:#899688;margin-top:3px;line-height:1.5}
.size-section{border-bottom:0;padding-bottom:19px}.unit-input{position:relative}.unit-input input{padding-right:50px}.unit-input>span{position:absolute;right:13px;top:14px;font-family:'DM Mono',monospace;font-size:11px;color:#929d92}
.size-shortcuts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.size-shortcuts button{background:#fff;border:1px solid #d7ded6;color:#778477;min-width:67px;height:30px;font-family:'DM Mono',monospace;font-size:10px}.size-shortcuts button:hover,.size-shortcuts button.active{border-color:var(--ink);color:var(--ink);background:#f3f5f1}
.fit-status{display:flex;align-items:flex-start;gap:10px;padding:14px;background:#edf4eb;color:#42664b;font-size:12px;line-height:1.5}.fit-status.is-invalid{background:#fff0ec;color:#a34f3f}.status-icon{font-size:14px;font-weight:700;line-height:1.2}
.download-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.download-actions button{height:53px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-radius:0;font-size:12px;font-weight:700;transition:transform .15s,background .15s}.download-actions button:hover:not(:disabled){transform:translateY(-2px)}.primary-button{background:var(--ink);color:#fff;border:1px solid var(--ink)}.primary-button:hover:not(:disabled){background:#3b453d}.secondary-button{background:#fff;color:var(--ink);border:1px solid var(--ink)}.secondary-button:hover:not(:disabled){background:#f1f3ee}.download-actions button:disabled{cursor:not-allowed;opacity:.45}
.download-tip{font-size:10px;color:#9aa498;line-height:1.7;margin:12px 0 0}
.print-guide{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;padding:98px clamp(22px,4vw,72px)}.print-guide h2{font-size:clamp(33px,3.4vw,53px);letter-spacing:-2.8px;line-height:1.25;margin:24px 0 0}.guide-items{display:grid;gap:22px}.guide-items>div{display:flex;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}.guide-items>div>span{font-family:'DM Mono',monospace;color:var(--accent);font-size:12px;margin-top:2px}.guide-items h3{font-size:15px;margin:0 0 7px}.guide-items p{font-size:12px;color:#7d897e;line-height:1.7;margin:0}
footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:30px clamp(22px,4vw,72px);color:#899589}.footer-brand{font-size:25px;font-weight:800;color:var(--ink);letter-spacing:-1px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,15px);padding:12px 18px;background:var(--ink);color:white;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:20;box-shadow:0 8px 22px #0002}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) minmax(330px,.78fr);gap:30px}.settings{padding-left:28px}.paper-stage{min-height:500px;padding:45px 32px}.hero-glyph{margin-right:5px}.download-actions{grid-template-columns:1fr}}
@media(max-width:850px){.site-header{height:74px}.site-header nav{display:none}.header-tag{margin-left:auto}.workspace{grid-template-columns:1fr;gap:48px}.settings{border-left:0;border-top:1px solid var(--line);padding:28px 0 0}.paper-stage{min-height:500px}.download-actions{grid-template-columns:1fr 1fr}.print-guide{grid-template-columns:1fr;gap:34px}.guide-items{max-width:690px}}
@media(max-width:600px){.site-header{padding:0 20px}.brand small{display:none}.header-tag{font-size:10px}.hero{padding:44px 21px 57px}.hero h1{font-size:47px;letter-spacing:-3.5px}.hero p{font-size:13px}.hero-glyph{display:none}.generator{margin:0 8px;padding:0 14px 38px}.section-topline{font-size:9px;letter-spacing:.6px}.workspace{padding-top:28px}.preview-heading h2,.settings-heading h2{font-size:22px}.preview-note{font-size:8px;letter-spacing:0}.paper-stage{min-height:340px;padding:42px 25px}.stage-label{font-size:7px;letter-spacing:.3px}.stage-label-tl{top:25px;left:24px}.stage-label-tr{top:25px;right:24px}.stage-label-bl{bottom:25px;left:24px}.stage-label-br{bottom:25px;right:24px}.spec-strip>div{padding:12px 8px;min-height:68px}.spec-strip strong{font-size:11px}.spec-strip small{font-size:8px;letter-spacing:0}.settings-heading{gap:8px}.reference-link{font-size:10px}.download-actions{grid-template-columns:1fr}.print-guide{padding:68px 21px}.print-guide h2{font-size:38px}footer{padding:28px 21px;flex-wrap:wrap}footer>span:last-child{width:100%}}