@font-face{font-family:system-local;src:local("Arial")}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:#202e35;background:#f5f3ed;font:15px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}a{color:inherit;text-underline-offset:4px}button,a,label,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #b24824;outline-offset:4px}.wrap{width:min(1180px,calc(100% - 64px));margin-inline:auto}.preview-note{padding:7px 20px;background:#273d46;color:#f5f3ed;text-align:center;font-size:10px;letter-spacing:.1em}.site-header{display:flex;align-items:center;justify-content:space-between;min-height:102px;border-bottom:1px solid #d9d9cf;gap:25px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:21px;font-weight:750;line-height:1.25;letter-spacing:-.04em}.brand svg{width:29px;height:32px;stroke:#bb4a26;fill:none;stroke-width:1.7}.brand b{color:#bb4a26;font-weight:400}.brand-note{display:block;font-size:8px;letter-spacing:.16em;margin-top:5px;font-weight:600;color:#657279}.site-header nav{display:flex;gap:28px;font-size:12px}.site-header nav a{text-decoration:none}.local-pill{font-size:10px;letter-spacing:.04em;border:1px solid #d8dcd3;border-radius:40px;padding:7px 12px;white-space:nowrap}.local-pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#517d63;margin-right:7px}.intro{padding-top:49px;padding-bottom:28px}.eyebrow{font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em;color:#8f482c}.hero-line{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;margin:16px 0 29px}h1{font-size:clamp(34px,4.2vw,56px);line-height:1.12;letter-spacing:-.055em;margin:0;font-weight:650}h1 span{color:#738078}p{margin:12px 0;color:#59676a}.hero-line p{max-width:330px;font-size:14px;line-height:1.8;margin:0 0 4px}.benefits{display:flex;gap:32px;font-size:10px;letter-spacing:.025em;color:#697471}.workspace{display:grid;grid-template-columns:390px 1fr;border:1px solid #d3d7cf;background:#fcfbf7;box-shadow:0 16px 40px #263b3908;scroll-margin-top:24px}.input-panel{padding:23px 24px;border-right:1px solid #d9ddd5}.panel-label{display:flex;justify-content:space-between;align-items:center;gap:10px;font:9px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.13em;color:#536660;min-height:23px}.small-tag{padding:3px 7px;background:#eeeee6;letter-spacing:.07em}.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #b0bcb0;border-radius:3px;min-height:168px;margin-top:18px;cursor:pointer;background:#f2f3ec;transition:background .2s,border-color .2s}.dropzone:hover,.dropzone.dragover{background:#e9eee1;border-color:#527863}.dropzone:focus-within{outline:3px solid #b24824;outline-offset:3px}.dropzone input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.dropzone svg{width:34px;height:34px;stroke:#4a6a54;stroke-width:1.8;fill:none;margin-bottom:13px}.dropzone strong{font-size:14px;font-weight:600}.dropzone>span{font-size:11px;color:#819084;margin-top:4px}.hint{font-size:10px;line-height:1.65;color:#77827e;margin:9px 0}.sample-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:1px solid #e2e4db;padding:9px 0 16px;font-size:10px}.sample-row>span{color:#7e8781}.sample-row button{padding:4px 8px;border:1px solid #dbe0d5;background:transparent;border-radius:3px;font-size:10px;color:#536a59}.sample-row button:hover{background:#e9eee1}.status{font-size:11px;line-height:1.65;color:#5d7261;padding:15px 0;overflow-wrap:anywhere}.status.error{color:#a52b20}.file-details{display:flex;gap:10px;align-items:center;margin-top:16px;min-width:0}.file-details[hidden]{display:none}.file-details>div{min-width:0;flex:1}.file-details strong{display:block;font-size:11px;overflow-wrap:anywhere}.file-details small{display:block;font-size:10px;color:#68776d}.file-icon{font:9px ui-monospace,monospace;background:#e8ece1;color:#507359;padding:11px 6px}.text-button{border:0;background:none;font-size:10px;color:#80583e;text-decoration:underline;text-underline-offset:3px;padding:5px}.part-label{border-top:1px solid #e2e4db;padding-top:14px;margin-bottom:10px}.parts{max-height:190px;overflow:auto}.part-item{display:flex;gap:9px;align-items:flex-start;padding:9px 0;font-size:11px;border-bottom:1px solid #ebede5}.part-item input,.check-option input{accent-color:#b34f2a;flex:none;margin:4px 0 0}.part-item>span{min-width:0;overflow-wrap:anywhere}.part-item small{display:block;color:#849087;font-size:10px}.check-option{display:flex;gap:8px;align-items:flex-start;font-size:11px;margin-top:18px}.primary{display:flex;justify-content:space-between;align-items:center;width:100%;background:#ba4d29;color:#fff6eb;border:1px solid #ba4d29;padding:13px 16px;margin-top:21px;font-size:13px;font-weight:600}.primary:hover{background:#a84224}.primary span{font-size:19px}.secondary{width:100%;background:transparent;border:1px solid #d5d9d0;margin-top:9px;padding:10px;font-size:11px;color:#596d60}.secondary:hover{background:#edf0e6}.preview-panel{padding:23px 24px 16px;min-width:0}.view-controls{display:flex;gap:3px}.view-controls button{border:0;background:transparent;font:9px ui-monospace,monospace;color:#7b8881;padding:5px 7px}.view-controls button[aria-pressed=true]{background:#e7ebe0;color:#345044}.canvas-wrap{position:relative;height:300px;margin-top:14px;background-color:#f1f3ec;background-image:linear-gradient(#cbd4c42e 1px,transparent 1px),linear-gradient(90deg,#cbd4c42e 1px,transparent 1px);background-size:24px 24px;border:1px solid #e8ebe2;overflow:hidden}canvas{width:100%;height:100%;display:block}.canvas-label{position:absolute;inset:auto 14px 12px auto;font:8px ui-monospace,monospace;letter-spacing:.12em;color:#7c8d7e;pointer-events:none}.axis-label{position:absolute;top:13px;left:14px;font:9px ui-monospace,monospace;color:#7b8a7d}.metrics{display:grid;grid-template-columns:1.65fr 1fr 1fr;border:1px solid #e1e5da;border-top:0}.metrics>div{padding:15px 14px;min-width:0;border-right:1px solid #e1e5da}.metrics>div:last-child{border-right:0}.metrics span{display:block;font-size:9px;color:#7b8a7d}.metrics strong{display:block;font:15px/1.5 ui-monospace,Consolas,monospace;letter-spacing:-.04em;color:#405944;margin-top:5px;overflow-wrap:anywhere}.export-note{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:14px 0}.note-mark{font:12px Georgia,serif;border:1px solid #aebdac;border-radius:50%;width:18px;height:18px;text-align:center;line-height:17px;color:#6f866b;flex:none}.export-note strong{font-size:11px;font-weight:600}.export-note p{font-size:11px;line-height:1.7;margin:4px 0;color:#7c887b}.warnings{padding:0 0 0 16px;font-size:10px;color:#7d6a42;margin:3px 0 10px}.warnings li{margin:5px 0}.preview-detail{border-top:1px solid #e7eadf;padding-top:10px}.guide{padding:70px 0 55px}.section-heading h2{font-size:29px;letter-spacing:-.035em;font-weight:550;line-height:1.2;margin:12px 0 30px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.steps article>span{font:11px ui-monospace,monospace;color:#ab5b3a}.steps h3{font-size:16px;font-weight:550;margin:14px 0 8px}.steps p{font-size:12px;line-height:1.9;margin:0;max-width:310px}.detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:95px;border-top:1px solid #d8ddd2;padding:55px 0}.detail-grid h2{font-size:29px;letter-spacing:-.04em;line-height:1.25;font-weight:550;margin:14px 0 22px}.detail-grid p{font-size:12px;line-height:1.9}.detail-grid p.hint{font-size:10px}.example-card{align-self:start;background:#e9ede2;padding:28px 30px;border:1px solid #d8dfce}.example-card h3{font-size:25px;line-height:1.3;letter-spacing:-.03em;font-weight:500;margin:18px 0}.example-card svg{max-height:190px;width:100%;stroke:#7d9076;stroke-width:1.1;fill:none}.example-card text{stroke:none;fill:#6a7b64;font:12px ui-monospace,monospace}.example-links{display:flex;flex-wrap:wrap;gap:12px;font-size:10px;color:#59734f;margin-top:22px}.faq{border-top:1px solid #d8ddd2;padding:50px 0}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 50px}.faq details{border-bottom:1px solid #dce1d6}.faq summary{cursor:pointer;font-size:12px;font-weight:550;padding:17px 5px;list-style-position:outside;margin-left:16px}.faq details p{font-size:12px;line-height:1.85;padding:0 16px 16px;margin:0}.privacy{border-top:1px solid #d8ddd2;padding:38px 0;display:block}.privacy h2{font-size:21px;font-weight:550;letter-spacing:-.03em;margin:12px 0}.privacy p{font-size:11px;line-height:1.9;max-width:940px}.privacy a{color:#80583e}footer{border-top:1px solid #d8ddd2;padding:26px 0 35px;display:flex;gap:20px;justify-content:space-between;align-items:center;font-size:10px;color:#7e887f}footer .footer-brand{font-size:15px;color:#384f3e;text-decoration:none;font-weight:650}footer>a:last-child{text-decoration:none}.skip{position:fixed;top:-100px;left:20px;background:#fff;padding:10px;z-index:10}.skip:focus{top:10px}.noscript{padding:20px;background:#fff0d7;text-align:center} [hidden]{display:none!important}@media(max-width:960px){.wrap{width:calc(100% - 40px)}.workspace{grid-template-columns:340px 1fr}.input-panel,.preview-panel{padding:20px}.hero-line{gap:25px}.hero-line p{max-width:260px}.local-pill{display:none}.steps{gap:26px}.detail-grid{gap:45px}.metrics{grid-template-columns:1.5fr 1fr}.metrics>div:last-child{grid-column:1/-1;border-top:1px solid #e1e5da}.canvas-wrap{height:300px}.metrics strong{font-size:13px}}@media(max-width:690px){.wrap{width:calc(100% - 32px)}.preview-note{font-size:8px}.site-header{min-height:82px;gap:15px}.site-header nav{gap:13px;font-size:10px}.site-header nav a:nth-child(2){display:none}.brand{font-size:18px}.brand svg{width:25px}.brand-note{font-size:7px}.intro{padding-top:33px}.hero-line{display:block;margin-bottom:22px}h1{font-size:39px;letter-spacing:-.05em}.hero-line p{max-width:100%;font-size:12px;margin-top:20px}.benefits{gap:8px;flex-wrap:wrap;font-size:8px}.benefits span{flex-basis:100%}.workspace{grid-template-columns:1fr}.input-panel{border-right:0;border-bottom:1px solid #d9ddd5}.dropzone{min-height:135px}.preview-panel{padding:20px 16px}.canvas-wrap{height:250px}.metrics{grid-template-columns:1.65fr 1fr 1fr}.metrics>div{padding:13px 8px}.metrics>div:last-child{grid-column:auto;border-top:0}.metrics strong{font-size:11px}.metrics span{font-size:8px}.guide{padding:43px 0}.section-heading h2{font-size:26px}.steps{grid-template-columns:1fr;gap:25px}.steps article{padding-left:35px;position:relative}.steps article>span{position:absolute;left:0;top:4px}.steps h3{margin-top:0}.steps p{max-width:none}.detail-grid{grid-template-columns:1fr;gap:25px;padding:35px 0}.detail-grid h2{font-size:26px}.example-card{padding:24px}.faq{padding:35px 0}.faq-grid{grid-template-columns:1fr}.privacy{padding:30px 0}footer{flex-wrap:wrap;gap:14px}footer>span{display:none}.eyebrow{font-size:9px}.file-details strong{font-size:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
#feedback-dialog{width:min(520px,calc(100% - 28px));max-height:90vh;overflow:auto;border:1px solid #cfd7c7;background:#fcfbf7;color:#273d35;padding:24px}#feedback-dialog::backdrop{background:#1a2f39a6}.feedback-heading{display:flex;justify-content:space-between;gap:16px;align-items:start}.feedback-heading h2{font-size:25px;margin:8px 0 20px}#feedback-form label{display:block;font-size:12px;margin:14px 0 6px}#feedback-form textarea,#feedback-form select,#feedback-form input{display:block;width:100%;padding:10px;background:#fffef9;border:1px solid #c9d2c0;border-radius:2px;font:inherit;color:inherit}#feedback-form textarea{resize:vertical}#feedback-status{font-size:12px;color:#526e4c;white-space:pre-wrap;overflow-wrap:anywhere}.feedback-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* Readability pass: keep the editorial layout while ensuring body copy,
   operational labels and controls remain legible at common desktop sizes. */
body{font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.wrap{width:min(1240px,calc(100% - 56px))}
.brand{font-size:23px}
.brand-note{font-size:11px;letter-spacing:.1em;color:#536269}
.site-header nav{font-size:14px}
.local-pill{font-size:12px;padding:8px 14px}
.eyebrow{font-size:12px;line-height:1.55;letter-spacing:.095em;color:#8a442a}
.hero-line p{max-width:390px;font-size:16px;line-height:1.7;color:#43565a}
h1{font-size:clamp(38px,4.2vw,58px)}
.benefits{gap:34px;font-size:13px;line-height:1.6;color:#4f605e}
.workspace{grid-template-columns:420px 1fr}
.input-panel{padding:28px 28px 30px}
.preview-panel{padding:28px 28px 20px}
.panel-label{font-size:12px;line-height:1.5;color:#405650}
.dropzone{min-height:180px}
.dropzone strong{font-size:16px}
.dropzone>span{font-size:13px;color:#5e7067}
.hint{font-size:13px;line-height:1.65;color:#5d6b68}
.sample-row{font-size:13px;line-height:1.5}
.sample-row button{font-size:14px;padding:8px 11px;min-height:40px}
.status{font-size:14px;line-height:1.65;color:#46624f}
.file-details strong{font-size:13px}
.file-details small{font-size:13px;color:#53645b}
.file-icon{font-size:11px}
.text-button{font-size:13px;min-height:38px}
.part-item{font-size:13px;padding:11px 0}
.part-item small,.check-option{font-size:13px}
.part-item small{color:#5c6d63}
.check-option{line-height:1.55}
.primary{font-size:15px;padding:15px 18px;min-height:52px}
.primary span{font-size:21px}
.secondary{font-size:14px;padding:12px;min-height:46px}
.view-controls button{font-size:11px;padding:8px 10px;min-height:36px}
.canvas-label{font-size:11px;color:#596c5d}
.axis-label{font-size:12px;color:#586b5d}
.metrics>div{padding:17px 15px}
.metrics span{font-size:12px;color:#596b5e}
.metrics strong{font-size:17px;line-height:1.45}
.export-note strong{font-size:13px}
.export-note p{font-size:13px;line-height:1.7;color:#596a61}
.warnings{font-size:12px;line-height:1.6;color:#665632}
.guide{padding:78px 0 62px}
.section-heading h2{font-size:36px}
.steps{gap:56px}
.steps article>span{font-size:12px}
.steps h3{font-size:20px}
.steps p{font-size:15px;line-height:1.75;color:#485a5d;max-width:350px}
.detail-grid{gap:80px;padding:64px 0}
.detail-grid h2{font-size:36px}
.detail-grid p{font-size:15px;line-height:1.8;color:#43565a}
.detail-grid p.hint{font-size:13px;line-height:1.7;color:#5a6b67}
.example-card h3{font-size:29px}
.example-links{font-size:13px}
.faq{padding:60px 0}
.faq summary{font-size:15px;padding:19px 8px}
.faq details p{font-size:15px;line-height:1.75;color:#43565a}
.privacy h2{font-size:25px}
.privacy p{font-size:14px;line-height:1.8;color:#43565a;max-width:82ch}
footer{font-size:12px;color:#596862}
footer .footer-brand{font-size:17px}
#feedback-dialog{width:min(580px,calc(100% - 32px));padding:28px}
.feedback-heading h2{font-size:29px}
#feedback-form label{font-size:14px;margin:17px 0 7px}
#feedback-form textarea,#feedback-form select,#feedback-form input{font-size:16px;padding:12px;min-height:46px}
#feedback-status{font-size:14px}
@media(max-width:1080px){
  .wrap{width:calc(100% - 44px)}
  .workspace{grid-template-columns:380px 1fr}
  .input-panel,.preview-panel{padding:24px}
  .detail-grid{gap:48px}
}
@media(max-width:960px){
  .workspace{grid-template-columns:350px 1fr}
  .hero-line p{max-width:330px}
  .metrics strong{font-size:15px}
}
@media(max-width:690px){
  .wrap{width:calc(100% - 28px)}
  .workspace{grid-template-columns:1fr}
  .site-header{min-height:88px}
  .brand{font-size:20px}
  .brand-note{font-size:10px}
  .site-header nav{font-size:12px;gap:16px}
  .intro{padding-top:36px}
  .hero-line p{font-size:15px;line-height:1.7}
  h1{font-size:clamp(38px,11vw,46px);letter-spacing:-.04em}
  .benefits{font-size:11px;gap:9px}
  .input-panel,.preview-panel{padding:22px 18px}
  .panel-label,.sample-row button,.view-controls button,.text-button{font-size:14px}
  .canvas-wrap{height:260px}
  .metrics strong{font-size:14px}
  .metrics span{font-size:10px}
  .section-heading h2,.detail-grid h2{font-size:30px}
  .steps{padding-left:2px}
  .steps article{padding-left:40px}
  .steps article>span{font-size:11px}
  .steps h3{font-size:19px}
  .steps p,.detail-grid p,.faq summary,.faq details p{font-size:14px}
  .example-card h3{font-size:27px}
  .privacy h2{font-size:23px}
  .privacy p{font-size:13px}
  #feedback-dialog{padding:22px 18px}
  .feedback-heading h2{font-size:26px}
}