:root{
  --bg:#f4f6f9;
  --surface:#ffffff;
  --border:#e1e5ec;
  --text:#1c2430;
  --muted:#6b7686;
  --primary:#2f6feb;
  --primary-dark:#1d54c4;
  --radius:12px;
  --shadow:0 2px 10px rgba(20,30,50,.06);
  --ad-col: 450px;
  --ad-gap: 1.25rem;
  font-size:16px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  /* The footer's full-width divider line uses a 100vw breakout trick, which
     overshoots the real viewport by the scrollbar's width when one is
     present. Clip that harmless sliver instead of letting it force its own
     horizontal scrollbar. Set on html (the actual scrolling root), not
     just body. */
  overflow-x:hidden;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--primary); color:#fff; padding:.6em 1em; z-index:200;
}
.skip-link:focus{ left:8px; top:8px; }

/* ---------- Header ---------- */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
  max-width:1400px; margin:0 auto;
  padding:.85rem 1.25rem;
}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit}
.brand .logo{
  height:1.8rem; width:auto; display:block;
}
.brand h1, .brand .brand-name{font-size:1.15rem; margin:0; font-weight:700}
.brand .tagline{margin:.15rem 0 0; font-size:.82rem; color:var(--muted)}

.site-nav{ display:flex; align-items:center; gap:.15rem; flex-wrap:wrap; }
.site-nav a{
  color:var(--text); text-decoration:none; font-weight:600; font-size:.9rem;
  padding:.55em 1.1em; border-radius:999px;
  transition:background .15s ease, color .15s ease;
}
.site-nav a:hover{ background:#eaf1fe; color:var(--primary); }
.site-nav a.active{ background:var(--primary); color:#fff; }

@media (max-width:640px){
  .brand .tagline{ display:none; }
}

/* ---------- Buttons ---------- */
.btn{
  font:inherit; font-weight:600; font-size:.9rem;
  padding:.65em 1.1em;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  transition:transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{box-shadow:var(--shadow)}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:var(--primary); border-color:var(--primary); color:#fff;
}
.btn-primary:hover{background:var(--primary-dark)}

/* ---------- Quick-link cards ---------- */
.quick-links{
  max-width:1400px; margin:0 auto; padding:1.5rem 1.25rem .5rem;
}
.quick-links h1{ margin:0 0 .3rem; font-size:1.3rem; }
.quick-links-intro{ margin:0 0 1.25rem; color:var(--text); font-size:.95rem; line-height:1.6; }
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem;
}
.paper-card{
  display:flex; flex-direction:column; gap:.75rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:1rem; text-decoration:none; color:var(--text);
  transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.paper-card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(20,30,60,.12); border-color:var(--primary); }
.paper-card svg{
  width:100%; height:auto; aspect-ratio:1/1; border:1px solid var(--border); border-radius:8px; background:#fff;
}
.paper-card-body h3{ margin:0 0 .3rem; font-size:1rem; }
.paper-card-body p{ margin:0 0 .5rem; font-size:.85rem; color:var(--muted); }
.card-cta{ font-size:.85rem; font-weight:700; color:var(--primary); }

.custom-heading{
  max-width:1400px; margin:1.75rem auto .25rem; padding:0 1.25rem;
  font-size:1.1rem; color:var(--text);
}

/* ---------- Page intro (dedicated paper pages) ---------- */
.page-intro{
  max-width:1400px; margin:0 auto; padding:1.25rem 1.25rem 0;
}
.breadcrumb{ font-size:.85rem; color:var(--muted); text-decoration:none; }
.breadcrumb:hover{ color:var(--primary); }
.page-intro h1{ margin:.5rem 0 .3rem; font-size:1.3rem; }
.page-intro p{ margin:0; color:var(--muted); font-size:.92rem; max-width:60ch; }

/* ---------- Layout ---------- */
.app{
  display:flex; flex-direction:column; gap:1rem;
  max-width:1400px; margin:0 auto;
  padding:1rem 1.25rem 2rem;
}
@media (min-width:960px){
  .app{ flex-direction:row; align-items:flex-start; }
  .controls{ flex:0 0 340px; position:sticky; top:78px; max-height:calc(100vh - 96px); overflow:auto; }
  .preview-area{ flex:1 1 auto; min-width:0; }
}

/* Single-purpose print pages (5mm, isometric, etc.): stack the optional
   customize panel below the preview instead of reserving a sidebar column,
   so the paper centers across the full width instead of skewing left. */
@media (min-width:960px){
  .app.stacked{ flex-direction:column; align-items:stretch; }
  .app.stacked .controls{ flex-basis:auto; width:100%; position:static; max-height:none; }
}

/* ---------- Controls panel ---------- */
.controls{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:0;
}
.controls-toggle{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.1rem; font-weight:700; font-size:1rem;
}
.controls-toggle::-webkit-details-marker{display:none}
.chevron{transition:transform .2s ease}
.controls[open] .chevron{transform:rotate(180deg)}
@media (min-width:960px){
  .controls-toggle{display:none}
  .controls-body{display:block !important}
}

.controls-body{
  padding:0 1.1rem 1.25rem;
  display:flex; flex-direction:column; gap:1.4rem;
}
.control-group h2{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); margin:0 0 .55rem;
}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.25rem; }
@media (max-width:420px){ .two-col{ grid-template-columns:1fr; } }
.hint{ text-transform:none; font-weight:400; color:var(--muted); font-size:.75rem; }

/* presets */
.preset-row{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{
  font:inherit; font-size:.8rem; font-weight:600;
  padding:.5em .9em; border-radius:999px; border:1px solid var(--border);
  background:#f7f9fc; color:var(--text); cursor:pointer;
}
.chip:hover{ border-color:var(--primary); color:var(--primary); }

/* grid type buttons */
.type-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.6rem;
}
@media (min-width:520px) and (max-width:959px){ .type-grid{ grid-template-columns:repeat(4,1fr); } }
.type-btn{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:.6rem .4rem; border-radius:10px;
  border:1.5px solid var(--border); background:#fafbfd; cursor:pointer;
  color:var(--muted);
}
.type-btn svg{ width:34px; height:34px; color:var(--text); }
.type-btn span{ font-size:.72rem; font-weight:600; color:var(--text); text-align:center; }
.type-btn:hover{ border-color:var(--primary); }
.type-btn.active{ border-color:var(--primary); background:#eaf1fe; box-shadow:0 0 0 3px rgba(47,111,235,.12); }

/* selects / inputs */
select, input[type=number]{
  font:inherit; padding:.55em .7em; border-radius:8px;
  border:1px solid var(--border); background:#fff; color:var(--text); width:100%;
}
input[type=number]{width:5.5em}

.seg{ display:flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.seg-btn{
  flex:1; font:inherit; font-size:.8rem; font-weight:600; padding:.5em .4em;
  border:none; background:#fafbfd; color:var(--muted); cursor:pointer;
}
.seg-btn + .seg-btn{ border-left:1px solid var(--border); }
.seg-btn.active{ background:var(--primary); color:#fff; }

.spacing-row{ display:flex; align-items:center; gap:.5rem; }
.spacing-row input[type=range]{ flex:1; }
.spacing-row select{ width:4.6em; padding:.55em .3em; }

.color-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.swatch{
  width:28px; height:28px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 0 1.5px var(--border);
  background:var(--c); cursor:pointer; padding:0;
}
.swatch.active{ box-shadow:0 0 0 2px var(--primary); }
input[type=color]{
  width:28px; height:28px; padding:0; border:none; border-radius:50%; overflow:hidden;
  background:none; cursor:pointer;
}

.toggle{ display:flex; align-items:center; gap:.5em; font-size:.85rem; margin-bottom:.4em; cursor:pointer; }
.toggle input{ width:16px; height:16px; }

/* ---------- Preview ---------- */
.preview-area{ display:flex; flex-direction:column; gap:.75rem; min-height:60vh; }
.preview-toolbar{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:.65rem .8rem; box-shadow:var(--shadow);
}
.paper-info{ margin-left:auto; font-size:.8rem; color:var(--muted); }

.quick-preset-row{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:.65rem .8rem; box-shadow:var(--shadow);
}
.quick-preset-label{ font-size:.8rem; font-weight:600; color:var(--muted); white-space:nowrap; }
.quick-combo-row{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:.65rem .8rem; box-shadow:var(--shadow);
}
.quick-field{ display:flex; align-items:center; gap:.6rem; flex-wrap:nowrap; flex-shrink:0; }
.quick-field #lineColorCustom{ display:none; }
.chip-row{display:flex; flex-wrap:wrap; gap:.5rem}
#lineColorSelect{
  border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text);
  padding:.4em .6em; font-size:.85rem;
}
/* Reserved ad columns flanking the preview. Hidden until there's enough room
   (desktop only) so they never squeeze the paper preview itself. */
.preview-body{ display:flex; align-items:flex-start; gap:var(--ad-gap); }
.ad-slot{
  display:none;
  flex:0 0 var(--ad-col);
  min-height:600px;
  position:sticky; top:90px;
}
/* Drop the width cap entirely on pages with ad slots, so both the
   preview/toolbar row and the heading row above it use the full available
   screen at any desktop size — not gated behind the ad breakpoint below,
   since ads are just one reason this content shouldn't be capped at 1400px. */
body.has-ads .app,
body.has-ads .page-intro{ max-width:none; }

/* Pages that just want the extra width without reserving ad columns
   (no ad-slot elements in the markup, so no alignment offset is needed —
   content just centers normally within the wider container). Capped at
   70% so there's a consistent 15% breathing margin on each side rather
   than running edge-to-edge. Gated to desktop widths only — below this,
   .app is a single stacked mobile/tablet column already using the full
   width, and squeezing it to 70% there just wastes screen space and
   crushes the toolbar/paper into an unnecessarily narrow strip. */
@media (min-width:960px){
  body.wide-page .app,
  body.wide-page .page-intro,
  body.wide-page .how-to,
  body.wide-page .quick-links,
  body.wide-page .custom-heading,
  body.wide-page .site-footer,
  body.wide-page .header-inner,
  body.wide-page .info-block,
  body.wide-page .faq,
  body.wide-page .legal-page{ max-width:70%; }
  /* The intro paragraph is capped at 60ch for readability on the normal
     narrow layout, but that same cap looks like an odd 3-line wrap once
     the container is this wide — let it use the full container width. */
  body.wide-page .page-intro p{ max-width:none; }
}

@media (min-width:1500px){
  .ad-slot{ display:block; }
  /* Line the breadcrumb/heading/toolbar rows up with where the preview
     content actually starts, instead of spanning edge-to-edge above a
     narrower, ad-flanked preview row. .page-intro sits directly under
     <body> while .preview-toolbar sits inside .app's own 1.25rem padding,
     so .page-intro needs one extra 1.25rem to land at the same spot. */
  body.has-ads .page-intro{
    padding-left: calc(var(--ad-col) + var(--ad-gap) + 2.5rem);
    padding-right: calc(var(--ad-col) + var(--ad-gap) + 2.5rem);
  }
  /* .preview-toolbar has a visible card background, so it's shrunk with
     margin (not padding) to line up with the preview instead of stretching
     its white bar the full row width with dead space before the buttons. */
  body.has-ads .preview-toolbar{
    margin-left: calc(var(--ad-col) + var(--ad-gap) + 1.25rem);
    margin-right: calc(var(--ad-col) + var(--ad-gap) + 1.25rem);
  }
}
@media print{
  .ad-slot{ display:none !important; }
}

.preview-scroll{
  flex:1;
  background:repeating-conic-gradient(#e7eaf0 0% 25%, #eef1f6 0% 50%) 50% / 22px 22px;
  border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem;
  display:flex; justify-content:center;
  overflow:auto;
}
.paper-scale-wrap{ display:flex; justify-content:center; }
.paper{
  background:#fff;
  box-shadow:0 6px 24px rgba(20,30,60,.18);
  transform-origin:top center;
  flex:none;
}
.paper svg{ display:block; width:100%; height:100%; }

/* ---------- How-to / footer ---------- */
.how-to, .site-footer{
  max-width:1400px; margin:0 auto; padding:0 1.25rem 1rem;
}
.how-to{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.25rem 1.5rem; margin-top:0; box-shadow:var(--shadow);
}
.how-to h2{ font-size:1rem; margin-top:0; }
.how-to ol{ padding-left:1.2rem; margin:.5rem 0; }
.how-to li{ margin-bottom:.3rem; }
.disclaimer{ color:var(--muted); font-size:.82rem; margin-bottom:0; }

.info-block{
  max-width:1400px; margin:1rem auto 0; padding:1.25rem 1.5rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.info-block h2{ font-size:1rem; margin:0 0 .5rem; }
.info-block p{ margin:0; color:var(--muted); font-size:.9rem; line-height:1.65; }
.info-block p + p{ margin-top:.85rem; }

.faq{
  max-width:1400px; margin:1rem auto 0; padding:0 1.25rem 1rem;
}
.faq h2{ font-size:1rem; margin:0 0 .75rem; }
.faq-item{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:.9rem 1.1rem; margin-bottom:.6rem;
}
.faq-item summary{
  font-weight:600; font-size:.92rem; color:var(--text); cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; float:right; color:var(--primary); font-weight:700; font-size:1.1rem;
}
.faq-item[open] summary::after{ content:"−"; }
.faq-item p{ margin:.6rem 0 0; color:var(--muted); font-size:.88rem; line-height:1.6; }
.site-footer{
  position:relative;
  text-align:center; color:var(--muted); font-size:.82rem;
  padding-top:1.09rem; padding-bottom:.45rem; margin-top:1rem;
}
/* Full browser-width divider, independent of the footer's own (possibly
   narrower) max-width — breaks out of its container via the 100vw trick
   so it reads as a real section break rather than a line only as wide
   as the footer text/links. */
.site-footer::before{
  content:"";
  position:absolute; top:0; left:50%;
  width:100vw; margin-left:-50vw;
  border-top:1px solid var(--border);
}
.footer-nav{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
  gap:.15rem; margin-bottom:0;
}
.footer-nav a{
  color:var(--text); text-decoration:none; font-weight:600; font-size:.85rem;
  padding:.35rem .7rem; border-radius:999px;
  transition:background .15s ease, color .15s ease;
}
.footer-nav a:hover{ background:#eaf1fe; color:var(--primary); }
.footer-nav a:not(:first-child)::before{
  content:"•"; margin-right:.5rem; color:var(--border); font-weight:400;
}

/* ---------- Static content pages (about / contact / privacy) ---------- */
.legal-page{
  max-width:1400px; margin:2rem auto; padding:0 1.25rem 3rem;
}
.legal-page ~ .site-footer{ max-width:1400px; }
.legal-page .breadcrumb{ display:inline-block; margin-bottom:1rem; }
.legal-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:2rem;
}
.legal-card h1{ font-size:1.6rem; margin:0 0 .3rem; }
.legal-card .updated{ color:var(--muted); font-size:.82rem; margin:0 0 1.5rem; }
.legal-card h2{ font-size:1.1rem; margin:1.75rem 0 .5rem; }
.legal-card h2:first-of-type{ margin-top:0; }
.legal-card p{ color:var(--text); line-height:1.65; margin:0 0 1rem; }
.legal-card ul{ margin:0 0 1rem; padding-left:1.3rem; line-height:1.65; }
.legal-card li{ margin-bottom:.4rem; }
.legal-card a{ color:var(--primary); }
.email-box{
  margin-top:.5rem; background:#f7f9fc; border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.1rem;
}
.email-box-label{ display:block; font-weight:700; font-size:.9rem; margin-bottom:.6rem; }
.email-box-row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.email-box-field{
  flex:1 1 260px; min-width:0; font:inherit; font-size:.92rem;
  padding:.6em .8em; border-radius:8px; border:1px solid var(--border);
  background:var(--surface); color:var(--text);
}

/* Only shown on the printed page, under the paper itself — not part of the live site. */
.print-credit{ display:none; }

/* ---------- Print ---------- */
@media print{
  .site-header, .controls, .preview-toolbar, .how-to, .site-footer, .skip-link,
  .page-intro, .quick-links, .custom-heading,
  .quick-preset-row, .quick-combo-row, .info-block, .faq{ display:none !important; }
  body{ background:#fff; }
  .app{ padding:0; max-width:none; }
  .preview-area{ min-height:0; }
  .preview-scroll{
    background:none; border:none; padding:0; overflow:visible; display:block;
  }
  .paper-scale-wrap{ display:block; width:auto !important; height:auto !important; }
  .paper{
    box-shadow:none !important; transform:none !important;
  }
  .print-credit{
    display:block; position:fixed; left:0; right:0; bottom:0;
    text-align:center; color:#888; font-size:.75rem; margin:0;
  }
}