@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-600.ff7cf63717c2.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
}

:root {
  --paper: #f7f1e7;
  --paper-strong: #fffaf1;
  --ink: #122638;
  --muted: #5f6768;
  --line: #cfc5b5;
  --blue: #1765b5;
  --red: #e64a2f;
  --yellow: #dba11e;
  --green: #66824e;
  --mat: #dcecf2;
  --shadow: 0 3px 0 rgba(91, 72, 43, .16), 0 10px 24px rgba(40, 49, 48, .11);
  color-scheme: light;
  font-family: Aptos, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background-color: var(--paper); background-image: repeating-linear-gradient(0deg, rgba(89,75,54,.018) 0 1px, transparent 1px 5px); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }

.site-header {
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px dashed #b9ad9c;
  background: rgba(255,250,241,.94);
  position: relative;
  z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; font-size: 20px; width: max-content; }
.brand-art { width: 54px; height: auto; display: block; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(28,29,25,.16)); }
.site-header nav { display: flex; gap: 38px; }
.site-header nav a { text-decoration: none; font-weight: 500; }
.site-header nav a:hover { color: var(--blue); }
.local-note { justify-self: end; font-size: 14px; }
.local-note b { color: #27824a; margin-right: 7px; }
.menu-button { display: none; border: 0; background: transparent; font-size: 28px; }

.intro-strip {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 9px 24px;
  background: rgba(255,250,241,.9);
  border-bottom: 1px solid rgba(118,101,76,.18);
}
.intro-strip span, .eyebrow { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.intro-strip h1 { margin: 0; font: 600 clamp(22px,2vw,30px)/1.1 "Fraunces", Georgia, serif; }
.intro-strip p { margin: 0; font-size: 14px; }

.maker {
  display: grid;
  grid-template: 44px minmax(670px, calc(100vh - 172px)) / minmax(310px, 29%) minmax(520px, 1fr) minmax(270px, 23%);
  max-width: 1660px;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
  position: relative;
  background: var(--paper-strong);
}
.use-tabs { grid-column: 1; display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; padding-left: 14px; background: var(--paper-strong); border-right: 1px solid var(--line); }
.use-tabs::-webkit-scrollbar { display: none; }
.tab-label{display:grid;place-items:center;flex:0 0 50px;padding:0 5px 0 0;color:#6d6c65;font-size:8px;font-weight:800;letter-spacing:.07em;line-height:1.05;text-align:center;text-transform:uppercase;white-space:normal}
.use-tabs button { white-space: nowrap; border: 0; border-right: 1px solid var(--line); background: transparent; padding: 0 6px; font-size:13px; cursor: pointer; }
.use-tabs button[aria-selected="true"] { color: white; background: var(--blue); box-shadow: 0 3px 8px rgba(23,101,181,.26); }

.editor-panel { grid-column: 1; grid-row: 2; min-width: 0; padding: 20px 20px 14px; border-right: 1px solid var(--line); overflow: hidden; background: linear-gradient(90deg,rgba(222,207,178,.13),transparent 65%); }
.steps { display: flex; align-items: center; gap: 5px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 15px; }
.steps button { flex: 1; border: 0; background: transparent; color: #6b7170; font-weight: 600; cursor: pointer; padding: 6px 2px; }
.steps b { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid #a8a399; border-radius: 50%; margin-right: 4px; }
.steps .active { color: var(--blue); }
.steps .active b { background: var(--blue); color: #fff; border-color: var(--blue); }
.panel-view { display: none; height: calc(100% - 58px); }
.panel-view.active { display: flex; flex-direction: column; }
.panel-copy h2 { font-size: 15px; margin: 0 0 3px; }
.panel-copy p { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.prompt-fields { display: grid; gap: 7px; overflow-y: auto; padding: 2px 5px 8px 1px; scrollbar-color: #c0b4a2 transparent; }
.prompt-field { display: grid; grid-template-columns: 42px 1fr; background: rgba(255,255,255,.62); border: 1px solid #d9cfc0; box-shadow: 0 2px 3px rgba(55,44,28,.08); position: relative; }
.prompt-field::after { content: ""; position: absolute; right: -1px; top: -1px; border-style: solid; border-width: 0 13px 13px 0; border-color: transparent var(--paper) transparent transparent; }
.prompt-field > b { display: grid; place-items: center; font: 700 20px/1 "Fraunces", serif; border-right: 1px solid #d9cfc0; }
.prompt-field:nth-child(4n+1)>b { color: var(--red); }
.prompt-field:nth-child(4n+2)>b { color: var(--blue); }
.prompt-field:nth-child(4n+3)>b { color: var(--green); }
.prompt-field:nth-child(4n)>b { color: var(--yellow); }
.prompt-inputs { min-width: 0; padding: 7px 22px 7px 10px; }
.prompt-inputs input { width: 100%; border: 0; outline: 0; padding: 1px 0; background: transparent; font-size: 12px; }
.prompt-inputs input:first-child { font-weight: 700; }
.prompt-inputs input:focus { box-shadow: inset 0 -2px var(--blue); }
.editor-actions { margin-top: auto; display: flex; gap: 10px; align-items: center; padding-top: 12px; }
.paper-button, .link-button { min-height: 42px; border: 1px solid #d5bd87; background: #fffaf0; padding: 0 12px; cursor: pointer; }
.link-button { border: 0; background: transparent; color: var(--blue); }

.preview-panel { grid-column: 2; grid-row: 1 / span 2; min-width: 0; background-color: var(--mat); background-image: linear-gradient(rgba(50,118,151,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(50,118,151,.11) 1px,transparent 1px),linear-gradient(rgba(50,118,151,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(50,118,151,.04) 1px,transparent 1px); background-size: 40px 40px,40px 40px,8px 8px,8px 8px; position: relative; overflow: hidden; }
.preview-toolbar { height: 64px; padding: 13px 24px 8px; display: flex; justify-content: space-between; align-items: center; }
.zoom-control, .view-toggle { display: flex; background: #fffaf1; box-shadow: var(--shadow); border: 1px solid #cec4b5; }
.zoom-control button, .zoom-control output, .view-toggle button { height: 38px; min-width: 44px; display: grid; place-items: center; border: 0; border-right: 1px solid #cec4b5; background: transparent; }
.view-toggle button { padding: 0 18px; cursor: pointer; }
.view-toggle .active { color: #fff; background: var(--blue); }
.quick-print { display:none;min-height:38px;border:0;background:var(--red);color:#fff;padding:0 14px;font-weight:700;box-shadow:0 3px 0 #aa321f;cursor:pointer }
.cutting-mat { height: calc(100% - 64px); display: grid; place-items: center; position: relative; padding: 10px 28px 38px; }
.flat-preview { width: min(78vh, 90%); max-width: 760px; aspect-ratio: 1; position:relative;z-index:1;background: #fffdf6; box-shadow: var(--shadow); transform: scale(var(--preview-scale,1)); transform-origin: center; transition: transform .18s ease; }
#fortuneSvg { display: block; width: 100%; height: 100%; background: #fffdf6; }
.cut-note { position:absolute;z-index:5;bottom:10px;left:5%;display:flex;align-items:center;gap:7px;white-space:nowrap;margin:0;padding:5px 10px 5px 4px;background:rgba(241,249,252,.78);font:600 15px/1.35 "Segoe Print","Bradley Hand","Comic Sans MS",cursive;color:#283c48;transform:rotate(-1.2deg);pointer-events:none }
.cut-note svg{width:52px;height:40px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1);transform-origin:center}
.folded-teaser{position:absolute;z-index:4;right:-7px;bottom:-5px;width:clamp(160px,18vw,245px);height:auto;filter:drop-shadow(0 16px 12px rgba(25,35,38,.24));pointer-events:none;transform:rotate(1.5deg)}
.folded-teaser[hidden],.cut-note[hidden]{display:none}
.folded-preview { width: min(650px, 92%); text-align: center; }
.folded-preview p { font: 600 20px "Fraunces", serif; }
.folded-result-art{display:block;width:min(520px,82vw);height:auto;margin:0 auto;filter:drop-shadow(0 24px 18px rgba(25,35,38,.22))}

.export-panel { grid-column: 3; grid-row: 1 / span 2; padding: 22px 22px 16px; background: var(--paper-strong); overflow-y: auto; }
.export-panel section { border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 20px; }
.aside-heading { display: flex; justify-content: space-between; align-items: baseline; }
.aside-heading h2, .export-settings h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; }
.aside-heading a { font-size: 12px; color: var(--blue); }
.template-grid, .template-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.template-card { border: 1px solid #d2c7b7; background: #fff; padding: 7px; cursor: pointer; box-shadow: 0 2px 4px rgba(34,40,36,.1); position: relative; }
.template-card[aria-pressed="true"] { border: 2px solid var(--blue); padding: 6px; }
.template-card[aria-pressed="true"]::after { content: "✓"; position: absolute; right: -7px; bottom: -7px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #fff; background: var(--blue); }
.template-thumb { display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid #d7cdbf;background:#fffdf7; }
.template-thumb.ink-thumb { background:repeating-linear-gradient(45deg,#fff 0 8px,#18252a 9px 10px); }
.template-card span { display: block; padding-top: 6px; font-size: 12px; text-align: center; font-weight: 600; }
.paper-switch { display: flex; margin-bottom: 13px; }
.paper-switch button { flex: 1; min-height: 40px; padding: 5px 8px; border: 1px solid #cdc2b3; background: #fff; font-size: 12px; cursor: pointer; }
.paper-switch .active { background: var(--blue); color: white; border-color: var(--blue); }
.export-settings label, .check-row { display: flex; gap: 9px; align-items: center; min-height: 34px; font-size: 13px; }
input[type="checkbox"] { accent-color: var(--blue); width: 18px; height: 18px; }
.fit-status { font-size: 13px; font-weight: 600; }.fit-status.good{color:#27824a}.fit-status.bad{color:#b83927}
.download-button { width: 100%; min-height: 54px; border: 0; color: #fff; background: var(--red); font-weight: 700; font-size: 17px; box-shadow: 0 3px 0 #aa321f; cursor: pointer; }
.download-button:hover { filter: saturate(1.12) brightness(1.03); }
.secondary-downloads { display: flex; margin-top: 12px; }
.secondary-downloads button { flex: 1; min-height: 42px; border: 1px solid #d5cbbc; background: #fff; cursor: pointer; }
.test-note { font-size: 12px; color: var(--muted); }.test-note button{border:0;background:transparent;color:var(--blue);padding:0;text-decoration:underline;cursor:pointer}
.panel-download{margin-top:16px}
.template-list { margin-top: 8px; }.template-list .template-card{min-width:0}.color-field{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:13px}.color-field input{border:0;width:52px;height:34px;background:transparent}

.mobile-dock, .mobile-sheet { display: none; }
.prompt-field[data-overflow] { border-color: #c34632; box-shadow: 0 0 0 2px rgba(195,70,50,.12); }

tool-feedback{display:block;max-width:1240px;margin:26px auto 0;--feedback-margin:0;--feedback-ink:var(--ink);--feedback-sans:"DM Sans",sans-serif;--feedback-display:"Fraunces",serif;--feedback-accent:var(--red);--feedback-soft:#f5e7c9;--feedback-line:var(--line);--feedback-paper:rgba(255,250,240,.92);--feedback-radius:0;--feedback-control-radius:2px;--feedback-shadow:0 3px 0 rgba(105,83,51,.08)}
.feedback-fallback{min-height:66px;padding:13px 16px;display:flex;align-items:baseline;gap:12px 18px;border:1px solid var(--line);background:rgba(255,250,240,.92)}.feedback-fallback span{color:var(--red);font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.feedback-fallback strong{font:650 18px/1.2 "Fraunces",serif}.feedback-fallback small{margin-left:auto;color:var(--muted)}

.fold-section, .ideas-section, .faq-section { max-width: 1240px; margin: 0 auto; padding: 84px 28px; }
.fold-section h2, .ideas-section h2, .faq-section h2 { margin: 8px 0 30px; max-width: 760px; font: 650 clamp(34px,4vw,58px)/1.05 "Fraunces",serif; }
.fold-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); }
.fold-steps li { padding: 26px; display: flex; gap: 15px; border-right: 1px solid var(--line); }
.fold-steps li:last-child{border:0}.fold-steps b{font:700 38px "Fraunces",serif;color:var(--red)}.fold-steps strong{display:block;margin-bottom:6px}.fold-steps span{font-size:14px;line-height:1.5}
.ideas-section { display: grid; grid-template-columns: .8fr 1.5fr; gap: 60px; border-top: 1px solid var(--line); }
.idea-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.idea-grid article { padding: 24px; border: 1px solid var(--line); background:#fffaf0; box-shadow:0 3px 0 rgba(105,83,51,.1) }.idea-grid article>span{display:grid;place-items:center;width:44px;height:44px;background:var(--mat);font-weight:800}.idea-grid h3{margin:20px 0 8px;font-family:"Fraunces",serif;font-size:20px}.idea-grid p{font-size:14px;line-height:1.55}.idea-grid button{border:0;background:transparent;color:var(--blue);font-weight:700;padding:8px 0;cursor:pointer}
.faq-section { border-top: 1px solid var(--line); display:grid;grid-template-columns:.8fr 1.5fr;column-gap:60px}.faq-section>.eyebrow,.faq-section>h2{grid-column:1}.faq-list{grid-column:2;grid-row:1/span 2}.faq-list details{border-bottom:1px solid var(--line);padding:20px 0}.faq-list summary{font-weight:700;cursor:pointer}.faq-list p{color:var(--muted);line-height:1.6;margin-bottom:0}
footer { display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;max-width:1240px;margin:auto;border-top:1px solid var(--line);font-size:13px }.footer-brand{font-size:15px}.footer-brand .brand-art{width:36px}footer nav{display:flex;gap:20px}

@media (max-width: 1100px) {
  .maker { grid-template-columns: 300px minmax(440px,1fr); }
  .export-panel { display: none; }
  .preview-panel { grid-column: 2; }
  .site-header nav { gap: 20px; }
  .quick-print{display:block}
}

@media (max-height: 800px) and (min-width: 761px){.quick-print{display:block}.preview-toolbar{gap:10px}.view-toggle button{padding:0 12px}}

@media (min-width:821px) and (max-height:950px){.cutting-mat{padding-bottom:108px}.flat-preview{width:min(65vh,82%)}.cut-note{bottom:28px}.folded-teaser{bottom:18px;width:clamp(150px,15vw,205px)}}

@media (max-width: 820px) {
  body { padding-bottom: 74px; }
  .site-header { height: 54px; padding: 0 15px; grid-template-columns:1fr auto; position:sticky;top:0; }
  .brand { font-size: 17px; gap:8px }.brand-art{width:40px}
  .site-header nav,.local-note{display:none}.menu-button{display:block}
  .menu-open .site-header nav{display:grid;position:absolute;top:54px;left:0;right:0;padding:18px 20px;gap:0;background:#fffaf1;border-bottom:1px solid var(--line);box-shadow:0 10px 20px rgba(27,35,32,.12)}.menu-open .site-header nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .intro-strip { min-height: 104px; display:block; padding:14px 20px 11px; }
  .intro-strip span{display:block;margin-bottom:6px}.intro-strip h1{font-size:30px;max-width:360px}.intro-strip p{font-size:13px;margin-top:5px}
  .maker { display:flex; flex-direction:column; min-height:auto; border:0; }
  .use-tabs { order:1; height:50px; flex:none; border-right:0; border-bottom:1px solid var(--line); padding:0; }
  .tab-label{display:none}
  .use-tabs button{min-width:max-content;padding:0 21px;font-weight:600}
  .editor-panel,.export-panel{display:none}
  .preview-panel{order:2;height:calc(100svh - 282px);min-height:480px;display:flex;flex-direction:column}
  .preview-toolbar{height:52px;padding:8px 16px;justify-content:flex-end;gap:14px}.zoom-control{box-shadow:none;border:0;background:transparent}.zoom-control button{display:none}.zoom-control output{border:0}.view-toggle{order:-1;margin:auto}.view-toggle button{height:40px}
  .quick-print{display:none}
  .cutting-mat{height:calc(100% - 52px);padding:12px 14px 32px}.flat-preview{width:min(94vw,calc(100svh - 350px));max-width:none}.folded-teaser{display:none}.cut-note{left:50%;bottom:6px;transform:translateX(-50%) rotate(-1deg);font-size:11px;padding:3px 7px}.cut-note svg{width:36px;height:28px}.folded-result-art{width:min(76vw,430px)}
  .mobile-dock{display:grid;grid-template-columns:1fr 1fr 1.7fr;position:fixed;z-index:40;bottom:0;left:0;right:0;height:72px;background:#fffaf1;border-top:1px solid var(--line);box-shadow:0 -6px 16px rgba(27,35,32,.12)}
  .mobile-dock button{border:0;border-right:1px solid var(--line);background:transparent;font-weight:700;display:grid;place-items:center;align-content:center;gap:2px;font-size:19px}.mobile-dock button span{font-size:11px}.mobile-dock button:last-child{background:var(--red);color:white;font-size:17px}.mobile-dock button:last-child span{font-size:13px}
  .mobile-sheet{display:block;position:fixed;inset:auto 0 72px;width:100%;max-width:none;margin:0;border:0;border-radius:24px 24px 0 0;padding:28px 20px 20px;background:var(--paper-strong);box-shadow:0 -12px 28px rgba(24,36,35,.2);max-height:58svh}.mobile-sheet:not([open]){display:none}.mobile-sheet::backdrop{background:rgba(12,26,31,.22)}.sheet-close{position:absolute;right:16px;top:10px;border:0;background:transparent;font-size:28px}.mobile-sheet .panel-view{display:flex;height:auto;max-height:calc(58svh - 58px);overflow:auto}.mobile-sheet .prompt-fields{overflow:visible}.mobile-sheet .editor-actions{margin-top:12px}.mobile-sheet .template-list{grid-template-columns:repeat(2,1fr)}
  tool-feedback{margin:20px 14px 0}.feedback-fallback{align-items:flex-start;flex-direction:column;gap:4px}.feedback-fallback small{margin-left:0}
  .fold-section,.ideas-section,.faq-section{padding:58px 20px}.fold-section h2,.ideas-section h2,.faq-section h2{font-size:38px}.fold-steps{grid-template-columns:1fr 1fr}.fold-steps li:nth-child(2){border-right:0}.fold-steps li{border-bottom:1px solid var(--line);padding:18px}.fold-steps li:nth-child(n+3){border-bottom:0}
  .ideas-section,.faq-section{display:block}.idea-grid{grid-template-columns:1fr}.faq-list{display:block}footer{display:block;padding:25px 20px}footer p{margin:18px 0}
}

@media (max-width: 420px) {
  .brand span:last-child{font-size:16px}.intro-strip h1{font-size:27px}.preview-panel{min-height:450px}.fold-steps{grid-template-columns:1fr}.fold-steps li{border-right:0;border-bottom:1px solid var(--line)!important}.fold-steps li:last-child{border-bottom:0!important}
}

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

@media print {
  @page { size: var(--print-size, Letter); margin: .4in; }
  body * { visibility:hidden!important; }
  #flatPreview,#flatPreview * { visibility:visible!important; }
  #flatPreview { position:fixed;left:50%;top:50%;width:7.5in;height:7.5in;transform:translate(-50%,-50%)!important;box-shadow:none; }
}