@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');

:root { font-family:'DM Sans',sans-serif;color:#303c2b;background:#f7f8f2;font-synthesis:none;--green:#60794f;--ink:#303c2b;--muted:#858a7e;--line:#e7e9df }
* { box-sizing:border-box }
body { margin:0 }
button, input { font:inherit }
button, a, input { -webkit-tap-highlight-color:transparent }
button { cursor:pointer }
a { color:inherit;text-decoration:none }
svg { width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid #b69755;outline-offset:4px }
.icon-defs { position:absolute;width:0;height:0;overflow:hidden }
[hidden] { display:none!important }
.site-header { height:100px;max-width:1240px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line) }
.brand { display:flex;align-items:center;font-family:'Manrope',sans-serif;font-size:29px;font-weight:800;letter-spacing:-1.5px }
.brand-mark { width:40px;height:40px;background:var(--green);color:white;border-radius:13px;display:grid;place-items:center;margin-right:11px;transform:rotate(-5deg) }
.brand-mark svg { width:23px;height:23px }
.brand-dot { color:var(--green) }
.header-note { font-size:12px;color:#8b8f83;letter-spacing:.15px }
.how-link { font-size:12px;font-weight:600 }
.how-link span { margin-left:10px;font-size:18px }
main { max-width:1160px;margin:0 auto;padding:0 0 30px }
.intro { display:flex;align-items:center;justify-content:space-between;min-height:331px;padding:45px 22px 48px 2px }
.eyebrow { font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--green) }
.eyebrow>span { display:inline-block;width:6px;height:6px;border-radius:50%;background:#899e77;margin-right:8px;vertical-align:1px }
h1 { font-family:'Manrope',sans-serif;font-size:49px;line-height:1.14;letter-spacing:-2px;font-weight:750;margin:19px 0 20px;position:relative;width:max-content }
h1>span { color:var(--green) }
.intro p { font-size:14px;line-height:1.8;color:#858a7e;margin:0 }
.workspace { display:grid;grid-template-columns:342px minmax(0,1fr);gap:27px;align-items:start }
.settings { background:#fff;border:1px solid var(--line);border-radius:16px;padding:25px 25px 20px;box-shadow:0 3px 5px #333d2402 }
.card-heading { display:flex;align-items:center;gap:10px;margin-bottom:28px }
.step-number { display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#edf1e5;color:var(--green);font-size:11px;font-weight:700;flex-shrink:0 }
.card-heading h2, .preview-toolbar h2 { font-size:15px;letter-spacing:-.3px;margin:0;font-weight:650 }
.card-heading>svg { margin-left:auto;width:17px;color:#98a18d }
.field-label, legend, .repeat-label { font-size:12px;font-weight:650 }
.field-label { display:block;margin-bottom:10px }
.word-field { position:relative }
.word-field input { background:#fafbf7;border:1px solid #d9dfd0;border-radius:8px;width:100%;padding:14px 62px 14px 14px;height:52px;font-size:18px;font-weight:600;letter-spacing:1.4px;color:var(--ink);text-transform:none }
.word-field input:focus { border-color:var(--green);outline:2px solid #60794f22;outline-offset:1px }
.word-field>span { position:absolute;right:12px;top:20px;color:#9cA18f;font-size:10px }
.field-error { font-size:11px;color:#a35c36;line-height:1.5 }
.divider { height:1px;background:#eff0e9;margin:23px 0 }
fieldset { margin:0;padding:0;border:0 }
legend { padding:0;margin-bottom:11px }
.size-options { display:grid;grid-template-columns:repeat(3,1fr);gap:8px }
.size-options label { position:relative;cursor:pointer }
.size-options input { position:absolute;opacity:0;width:1px;height:1px }
.size-options label>span { display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #e9ebe2;border-radius:8px;height:82px;color:#8a8e82;gap:3px }
.size-options input:checked+span { border:1.5px solid #7d916b;background:#f1f5eb;color:#526e40 }
.size-options input:focus-visible+span { outline:3px solid #b69755;outline-offset:3px }
.sample { font-family:'Manrope',sans-serif;height:35px;display:flex;align-items:center;font-weight:500 }
.sample.small { font-size:21px }
.sample.medium { font-size:28px }
.sample.large { font-size:34px }
.size-options label>span>span { font-size:10px }
.repeat-label { display:flex;justify-content:space-between;align-items:center;margin-top:24px }
.repeat-label output { font-size:12px;background:#edf1e6;color:var(--green);padding:4px 10px;border-radius:5px }
input[type=range] { appearance:none;display:block;width:100%;height:4px;border-radius:4px;margin:18px 0 12px;background:linear-gradient(to right,#7a9168 var(--progress,60%),#e9ece1 var(--progress,60%));cursor:pointer }
input[type=range]::-webkit-slider-thumb { appearance:none;border:3px solid white;border-radius:50%;width:17px;height:17px;background:var(--green);box-shadow:0 0 0 1px #dce1d1,0 1px 3px #0002 }
input[type=range]::-moz-range-thumb { border:3px solid white;border-radius:50%;width:12px;height:12px;background:var(--green);box-shadow:0 0 0 1px #dce1d1 }
.range-endpoints { display:flex;justify-content:space-between;font-size:9px;color:#9ca191 }
.toggle-row { display:flex;align-items:center;position:relative;cursor:pointer;margin-bottom:19px }
.toggle-row strong { display:block;font-size:11px;font-weight:600 }
.toggle-row input { position:absolute;width:1px;height:1px;opacity:0 }
.switch { margin-left:auto;flex-shrink:0;width:31px;height:18px;border-radius:20px;background:#dfe3d7;position:relative;transition:background .15s }
.switch:after { content:'';position:absolute;width:12px;height:12px;top:3px;left:3px;border-radius:50%;background:white;box-shadow:0 1px 2px #0001;transition:transform .15s }
.toggle-row input:checked+.switch { background:#738d60 }
.toggle-row input:checked+.switch:after { transform:translateX(13px) }
.toggle-row input:focus-visible+.switch { outline:3px solid #b69755;outline-offset:3px }
.print-button { display:flex;align-items:center;justify-content:center;gap:11px;width:100%;padding:15px 14px;border:0;border-radius:8px;color:white;background:var(--green);font-size:12px;font-weight:600;margin-top:28px;box-shadow:0 4px 9px #60794f17;transition:background .15s,transform .15s }
.print-button:hover { background:#4d663d;transform:translateY(-1px) }
.print-button:disabled { opacity:.5;cursor:not-allowed;transform:none }
.print-button svg { width:17px;height:17px }
.print-button .button-arrow { width:16px;margin-left:auto }
.preview-panel { border:1px solid #e2e5d8;border-radius:16px;background:#eef0e7;overflow:hidden }
.preview-toolbar { display:flex;align-items:center;justify-content:space-between;padding:19px 23px;border-bottom:1px solid #e2e5d8;background:#f2f4ec }
.preview-toolbar>div { display:flex;align-items:center;gap:10px }
.preview-toolbar .step-number { background:#e4e9db }
.preview-toolbar h2 { font-size:13px }
.live-badge { display:inline-flex;align-items:center;gap:5px;background:#e6eddd;color:#758967;font-size:8px;border-radius:4px;padding:4px 6px;margin-left:4px }
.live-badge i { width:4px;height:4px;background:#899f76;border-radius:50% }
.paper-format { color:#919784;font-size:10px }
.paper-format>span { margin:0 6px;color:#b4b9a8 }
.preview-surface { padding:27px 53px 29px;max-height:790px;overflow-y:auto;background-image:radial-gradient(#c7ceba65 .6px,transparent .6px);background-size:10px 10px;scrollbar-color:#bac5aa transparent;scrollbar-width:thin }
#pages { display:grid;gap:24px }
.sheet { aspect-ratio:210/297;background:#fff;box-shadow:0 4px 16px #3541270c,0 1px 3px #3541270c;position:relative;padding:7.4% 7.8% 8.5%;container-type:inline-size;color:#666b62;overflow:hidden }
.sheet-header { position:relative }
.sheet-eyebrow { font-family:'DM Sans',sans-serif;font-size:1.8cqw;font-weight:600;letter-spacing:.28cqw;color:#919888 }
.sheet-flower { position:absolute;right:0;top:0;font-size:7cqw;color:#abb397;line-height:1 }
.sheet-header h2 { font-family:'Manrope',sans-serif;font-size:4.8cqw;line-height:1.3;margin:3.2cqw 0 1.7cqw;letter-spacing:-.12cqw;color:#59614f;overflow-wrap:anywhere }
.sheet-header h2 { font-size:3.8cqw;font-weight:500;line-height:1.1 }
.sheet-header h2>span { font-size:6cqw;font-weight:800;color:#353b30 }
.sheet-header p { font-size:2.1cqw;color:#92988a;margin:0 }
.student-fields { display:flex;gap:7cqw;margin:4.8cqw 0 5cqw;font-size:1.95cqw;color:#919888 }
.student-fields>span { display:flex;align-items:end;gap:2cqw;flex:1 }
.student-fields>span:first-child { flex:1.5 }
.student-fields i { flex:1;border-bottom:1px solid #d9ded1 }
.letter-rows { display:flex;flex-direction:column;gap:2.6cqw }
.letter-row { display:flex;position:relative;justify-content:space-around;align-items:center;height:13.4cqw }
.letter { width:min(calc(100% / var(--repetitions) - 1.6%),11cqw);height:100%;stroke:#82877d;stroke-width:1.15;stroke-dasharray:2 3.8;stroke-linecap:round;stroke-linejoin:round;z-index:1;flex-shrink:0 }
.letter.solid { stroke:#737d67;stroke-dasharray:none;stroke-width:1.6 }
.guide-lines { display:none;position:absolute;left:0;right:0;top:17.27%;height:63.64%;border-top:1px solid #e5e9df;border-bottom:1px solid #e5e9df }
.guide-lines:after { content:'';position:absolute;top:50%;left:0;right:0;border-top:1px dashed #e9ece4 }
.with-guides .guide-lines { display:block }
.size-small .letter-row { height:10cqw }
.size-small .letter { max-width:7.3cqw }
.size-small .letter-rows { gap:2cqw }
.size-large .letter-row { height:18cqw }
.size-large .letter { max-width:13.1cqw }
.size-large .letter-rows { gap:3.8cqw }
.sheet-footer { position:absolute;bottom:4.9%;left:7.8%;right:7.8%;display:flex;justify-content:space-between;font-size:1.7cqw;color:#a4aa9b;border-top:1px solid #eef0e9;padding-top:2.5cqw }
.sheet-footer>span:first-child>span { font-size:2.8cqw;vertical-align:middle;margin-left:.8cqw }
.sheet-footer i { font-style:normal;margin:0 1cqw }
.preview-footer { padding:15px 23px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e0e4d6;font-size:9px;color:#929b85;background:#f2f4ec }
.preview-footer>span:first-child { display:flex;align-items:center;gap:6px }
.preview-footer svg { width:13px;height:13px;color:#859a72 }
.preview-empty { text-align:center;padding:130px 0;color:#7e8972;min-height:500px }
.preview-empty svg { width:40px;height:40px }
.preview-empty h3 { font-size:17px }
.preview-empty p { font-size:12px;line-height:1.8 }
.how-section { display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:42px;margin:55px 0 0;padding:0 3px 38px;border-bottom:1px solid var(--line);scroll-margin-top:30px }
.how-intro .eyebrow { font-size:8px;letter-spacing:1.6px }
.how-intro h2 { font-family:'Manrope',sans-serif;font-size:21px;line-height:1.45;letter-spacing:-.65px;margin-top:12px;font-weight:650 }
.how-icon { display:grid;place-items:center;width:33px;height:33px;border-radius:10px;margin-bottom:13px }
.how-icon svg { width:17px;height:17px }
.peach { color:#ad8b65;background:#f1e7d8 }
.lavender { color:#8b83a3;background:#eae7ef }
.green { color:#82956a;background:#e9edde }
.how-step h3 { font-size:12px;font-weight:600;margin:0 0 8px }
.how-step p { font-size:11px;line-height:1.8;color:#909587;margin:0;max-width:220px }
.kind-note { text-align:center;font-size:12px;color:#8c967e;padding:28px 10px 5px }
.kind-note span:first-child { color:#b0b88d;font-size:20px;vertical-align:middle;margin-right:12px }
.kind-note span:last-child { margin-left:12px;font-size:17px }
.site-footer { max-width:1160px;margin:auto;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:23px 0 29px;font-size:9px;color:#a4a899 }
.footer-brand { font-family:'Manrope',sans-serif;font-size:16px;font-weight:800;color:#758268;letter-spacing:-.8px }
@media(min-width:1450px) {
  .intro { min-height:350px }
  .preview-surface { max-height:850px }
}
@media(max-width:1240px) {
  main, .site-footer { margin-left:40px;margin-right:40px }
  .site-header { padding:0 40px }
  .workspace { grid-template-columns:320px minmax(0,1fr);gap:24px }
  .settings { padding:23px }
  .preview-surface { padding:25px 35px }
  .how-section { gap:25px }
}
@media(max-width:1000px) {
  main, .site-footer { margin-left:28px;margin-right:28px }
  .site-header { padding:0 28px;height:84px }
  .intro { min-height:300px }
  h1 { font-size:44px }
  .workspace { grid-template-columns:295px minmax(0,1fr);gap:20px }
  .settings { padding:20px }
  .preview-surface { padding:22px }
  .preview-toolbar { padding:17px 15px }
  .preview-footer { padding:13px 15px }
  .live-badge { display:none }
  .how-section { gap:22px }
  .how-intro h2 { font-size:18px }
  .preview-footer>span:first-child { font-size:8px }
}
@media(max-width:760px) {
  .header-note { display:none }
  .site-header { height:76px;padding:0 22px }
  .brand { font-size:25px }
  .brand-mark { width:33px;height:33px;border-radius:10px }
  main, .site-footer { margin-left:22px;margin-right:22px }
  .intro { min-height:270px;padding:35px 0 }
  .intro h1 { font-size:40px;letter-spacing:-1.6px }
  .intro p { font-size:12px }
  .eyebrow { font-size:8px;letter-spacing:1.4px }
  .workspace { grid-template-columns:1fr }
  .settings { padding:24px }
  .card-heading { margin-bottom:22px }
  .size-options label>span { height:70px }
  .field-label, legend, .repeat-label, .toggle-row strong { font-size:13px }
  .print-button { font-size:14px }
  .preview-surface { padding:25px 40px;max-height:none }
  .preview-toolbar { padding:18px 22px }
  .live-badge { display:inline-flex }
  .preview-footer { padding:15px 22px }
  .preview-footer>span:first-child { font-size:9px }
  .how-section { grid-template-columns:1fr 1fr;gap:28px;margin-top:40px }
  .how-intro h2 { font-size:22px }
  .how-step h3 { font-size:13px }
  .how-step p { font-size:12px }
  .site-footer { flex-wrap:wrap;gap:15px;font-size:9px }
  .site-footer>span:last-child { width:100%;text-align:center }
  .kind-note { font-size:11px }
}
@media(max-width:480px) {
  main, .site-footer { margin-left:16px;margin-right:16px }
  .site-header { padding:0 18px }
  .intro { padding:30px 5px;min-height:273px }
  .intro h1 { font-size:43px }
  .intro p { font-size:12px }
  .preview-surface { padding:18px 15px }
  .settings { padding:22px }
  .preview-toolbar { padding:16px }
  .preview-toolbar>div { gap:7px }
  .preview-toolbar h2 { font-size:12px }
  .paper-format { font-size:9px }
  .preview-footer { padding:13px;font-size:8px }
  .preview-footer>span:first-child { font-size:8px }
  .how-section { gap:26px 24px }
  .kind-note { font-size:10px }
  .kind-note span:first-child { margin-right:5px }
  .kind-note span:last-child { margin-left:5px }
  .how-link { font-size:11px }
}
@media(prefers-reduced-motion:reduce) {
  * { transition:none!important;scroll-behavior:auto!important }
}
@media(max-width:360px) {
  .intro h1 { font-size:35px }
  .live-badge { display:none }
  .preview-footer { gap:8px }
  .kind-note { line-height:1.8 }
}
.letter-style { margin-bottom:22px }
.style-options { grid-template-columns:1fr 1fr }
.style-options .sample { font-size:22px;letter-spacing:2px }
.cursive-sample { display:flex;gap:0 }
.cursive-sample .letter { width:23px;height:34px;max-width:none;stroke:currentColor }
.style-cursive .guide-lines { height:54.55% }
.word-practice .practice-label { position:absolute;top:-1cqw;left:0;font-size:1.8cqw;color:#818977 }
.word-practice:after { content:'';position:absolute;left:0;right:0;top:80.91%;border-bottom:1px solid #cfd6c6 }
.style-cursive .word-practice:after { top:71.82% }
@page { size:A4 portrait;margin:0 }
.sheet-header h2>span { white-space:break-spaces }
.style-cursive { --row-height:13.4cqw;--cursive-row-height:min(var(--row-height),calc((100cqw / var(--repetitions) - 1.6cqw) * 1.1)) }
.style-cursive.size-small { --row-height:10cqw }
.style-cursive.size-large { --row-height:18cqw }
.style-cursive .letter-row { height:var(--cursive-row-height) }
.style-cursive .letter { width:calc(var(--cursive-row-height) * 100 / 110);max-width:none;stroke:#616958;stroke-width:.9;stroke-dasharray:2 2.4 }
.style-cursive .letter.solid, .cursive-sample .letter.solid { fill:#737d67;stroke:none }
.cursive-sample .letter { width:31px;height:34px }
@media print {
  :root, body { background:white;color:#333 }
  body { margin:0 }
  .icon-defs, .site-header, .intro, .settings, .preview-toolbar, .preview-footer, .how-section, .kind-note, .site-footer, .preview-empty { display:none!important }
  main { margin:0;padding:0;max-width:none }
  .workspace { display:block }
  .preview-panel { border:0;border-radius:0;background:none;overflow:visible }
  .preview-surface { padding:0;max-height:none;overflow:visible;background:none }
  #pages { display:block }
  .sheet { width:210mm;height:297mm;aspect-ratio:auto;padding:18mm 17mm 22mm;margin:0;box-shadow:none;break-after:page;break-inside:avoid;page-break-inside:avoid;overflow:hidden;print-color-adjust:exact;-webkit-print-color-adjust:exact }
  .sheet:last-child { break-after:auto }
  .sheet-footer { bottom:15mm;left:17mm;right:17mm }
  .letter { stroke:#666 }
  .letter.solid { stroke:#444 }
  .guide-lines { border-color:#dce0d5 }
  .guide-lines:after { border-color:#e1e5db }
}

/* Zeszyt odkrywcy: screen UI, independent of worksheet print geometry. */
@media screen {
  body { --accent:#a04c28;--ink:#383a37;--soft:#eee9dc;--canvas:#fbf8f0;--border:#ded8c9;--muted:#736d60;--radius:8px;background:var(--canvas);color:var(--ink) }
  .site-header { max-width:1200px;height:94px;padding:0 20px;border:0 }
  .brand { font-size:30px;letter-spacing:-1.4px;color:var(--ink) }
  .brand-dot { color:var(--accent) }
  .brand-mark { background:var(--accent);border-radius:14px;width:43px;height:43px;transform:none }
  .brand-mark svg { width:29px;height:29px;stroke-width:2.2 }
  .header-note { color:var(--muted);font-size:12px }
  .how-link { font-size:13px;min-height:44px;display:flex;align-items:center }
  main { max-width:1160px;margin:0 auto;padding-bottom:25px }
  .intro { min-height:324px;padding:24px 35px 35px;gap:30px }
  .intro h1 { font-size:56px;letter-spacing:-2.5px;line-height:1.12;margin:15px 0 18px }
  .intro h1>span { color:var(--accent) }
  .intro p { font-size:15px;color:var(--muted);line-height:1.7 }
  .eyebrow { font-size:10px;color:var(--accent);letter-spacing:1.5px }
  .start-link { display:inline-flex;align-items:center;gap:18px;min-height:48px;font-size:13px;font-weight:700;color:var(--accent);margin-top:12px }
  .start-link svg { width:18px }
  .intro-art { position:relative;width:390px;height:270px;flex-shrink:0 }
  .workspace { grid-template-columns:380px minmax(0,1fr);gap:24px }
  .settings { border:1px solid var(--border);border-radius:var(--radius);padding:28px;background:#fff;box-shadow:0 8px 30px #30294b04 }
  .card-heading { margin-bottom:24px }
  .card-heading h2 { font-size:18px;font-weight:750 }
  .card-heading>svg { color:var(--accent) }
  .step-number { background:var(--soft);color:var(--accent);width:28px;height:28px;font-size:12px }
  .field-label, legend, .repeat-label { font-size:13px }
  .word-field input { height:58px;background:var(--canvas);border:1.5px solid var(--border);color:var(--ink);border-radius:12px;font-size:21px }
  .word-field input:focus { outline:2px solid var(--accent);border-color:var(--accent) }
  .word-field>span { color:var(--muted);top:23px }
  .divider { background:var(--border);margin:22px 0 }
  .size-options label>span { border-color:var(--border);border-radius:12px;color:var(--muted) }
  .size-options label>span>span { font-size:11px }
  .size-options input:checked+span { background:var(--soft);border-color:var(--accent);color:var(--accent) }
  .cursive-sample .letter.solid { fill:var(--accent) }
  .extra-settings { border-top:1px solid var(--border);border-bottom:1px solid var(--border) }
  .extra-settings summary { cursor:pointer;padding:18px 0;font-size:13px;font-weight:700;min-height:60px }
  .extra-settings summary span { display:block;margin:6px 0 0 17px;font-size:11px;font-weight:400;color:var(--muted) }
  .extra-content { padding:6px 0 12px }
  .repeat-label output { background:var(--soft);color:var(--accent) }
  input[type=range] { height:24px;background:linear-gradient(to right,var(--accent) var(--progress,60%),var(--border) var(--progress,60%));border-top:10px solid #fff;border-bottom:10px solid #fff;margin:12px 0 4px }
  input[type=range]::-webkit-slider-thumb { background:var(--accent);width:24px;height:24px }
  input[type=range]::-moz-range-thumb { background:var(--accent);width:18px;height:18px }
  .range-endpoints { color:var(--muted) }
  .toggle-row { min-height:48px;margin-bottom:8px;gap:12px }
  .toggle-row strong { font-size:12px }
  .switch { width:40px;height:24px }
  .switch:after { width:18px;height:18px }
  .toggle-row input:checked+.switch { background:var(--accent) }
  .toggle-row input:checked+.switch:after { transform:translateX(16px) }
  .print-button { background:var(--accent);min-height:54px;border-radius:14px;font-size:14px;margin-top:22px;box-shadow:none }
  .print-button:hover { background:var(--ink) }
  .mobile-preview { display:none }
  .preview-panel { border:1px solid var(--border);border-radius:var(--radius);background:var(--soft);scroll-margin-top:16px }
  .preview-toolbar, .preview-footer { background:transparent;border-color:var(--border);padding:19px 23px }
  .preview-toolbar h2 { font-size:14px }
  .preview-toolbar .step-number { background:#ffffffa0;color:var(--accent) }
  .live-badge { background:#fff;color:var(--accent);font-size:10px }
  .live-badge i { background:var(--accent) }
  .paper-format, .preview-footer { color:var(--muted);font-size:11px }
  .preview-footer>span:first-child { font-size:11px }
  .preview-surface { padding:26px 65px 32px;max-height:710px;background-image:none }
  .sheet { box-shadow:0 8px 18px #30294b0c }
  .how-section { margin-top:42px;gap:32px;border-color:var(--border) }
  .how-step p { font-size:12px;color:var(--muted) }
  .how-step h3 { font-size:13px }
  .how-intro h2 { color:var(--ink) }
  .kind-note { color:var(--muted) }
  .site-footer { max-width:1160px;border-color:var(--border);color:var(--muted);font-size:11px }
  .footer-brand { color:var(--accent) }
  body { background-image:radial-gradient(#b1a58c28 .7px,transparent .7px);background-size:8px 8px }
  body .brand-mark { background:transparent;color:var(--accent);border:2px solid var(--accent);border-radius:8px;transform:rotate(-5deg) }
  body .intro h1 { font-family:Georgia,serif;font-weight:400;font-size:62px;letter-spacing:-2px }
  body .intro h1 span { font-style:italic }
  body .workspace { grid-template-columns:380px minmax(0,1fr) }
  body .settings { grid-column:1;grid-row:1;box-shadow:4px 4px 0 #e7dfcd }
  body .preview-panel { grid-column:2;grid-row:1 }
  body .word-field input, body .print-button, body .size-options label>span { border-radius:6px }
  body .preview-surface { background:repeating-linear-gradient(0deg,transparent 0 23px,#c2b99f35 23px 24px) }
  .notebook { position:absolute;left:20px;top:15px;width:280px;height:222px;background:#fffef9;border:1px solid #ded8c9;box-shadow:8px 8px 0 #e6ddc5;transform:rotate(-7deg);padding:24px 24px 20px 34px;border-radius:5px;background-image:repeating-linear-gradient(0deg,transparent 0 27px,#a8c7d03d 27px 28px) }
  .notebook:before { content:'';position:absolute;left:22px;top:0;bottom:0;border-left:1px solid #d58f7b66 }
  .notebook>span { font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted) }
  .notebook strong { display:block;font-family:Georgia,serif;font-style:italic;font-size:63px;font-weight:400;color:#557f8c;margin-top:16px }
  .notebook svg { width:210px;height:30px;color:#a87551;stroke-dasharray:3 4 }
  .notebook small { display:block;font-size:11px;color:var(--muted);margin-top:10px }
  .paper-star { position:absolute;right:15px;top:0;color:#dca445;font-size:62px }
  .paper-pencil { position:absolute;right:48px;top:90px;width:18px;height:164px;background:linear-gradient(90deg,#b87636 0 28%,#e6b56b 28% 72%,#c18b43 72%);transform:rotate(24deg);border-radius:5px 5px 0 0 }
  .paper-pencil:after { content:'';position:absolute;top:100%;border-left:9px solid transparent;border-right:9px solid transparent;border-top:25px solid #49473e }
  :is(button,a,input,summary):focus-visible { outline:3px solid var(--accent);outline-offset:4px }
  .size-options input:focus-visible+span, .toggle-row input:focus-visible+.switch { outline-color:var(--accent) }
  @media(max-width:1240px) {
    main, .site-footer { margin-left:28px;margin-right:28px }
    .site-header { padding:0 28px }
    .intro { padding-left:10px;padding-right:10px }
    .intro h1 { font-size:49px }
    .intro-art { transform:scale(.88);transform-origin:right center;width:350px }
    .workspace { grid-template-columns:350px minmax(0,1fr) }
    .preview-surface { padding:25px 35px }
  }
  @media(max-width:960px) {
    .intro h1, body .intro h1 { font-size:46px }
    .intro-art { width:300px;transform:scale(.78);margin-left:-30px }
    .header-note { display:none }
    .workspace, body .workspace { grid-template-columns:310px minmax(0,1fr);gap:20px }
    .settings { padding:22px }
    .preview-surface { padding:22px }
    .paper-format { display:none }
    body .settings { grid-column:1 }
    body .preview-panel { grid-column:2 }
    .live-badge { display:none }
  }
  @media(max-width:760px) {
    .site-header { height:80px;padding:0 20px }
    .brand { font-size:27px }
    .brand-mark { width:38px;height:38px }
    .intro { min-height:245px;padding:18px 4px 28px;position:relative;gap:0 }
    .intro h1, body .intro h1 { font-size:42px;letter-spacing:-1.8px;width:auto }
    .intro p { font-size:13px }
    .intro .eyebrow { font-size:8px;letter-spacing:1px }
    .intro-art { display:none }
    main, .site-footer { margin-left:16px;margin-right:16px }
    .workspace, body .workspace { grid-template-columns:minmax(0,1fr);gap:22px }
    body .settings, body .preview-panel { grid-column:auto;grid-row:auto }
    .settings { padding:24px }
    .card-heading h2 { font-size:18px }
    .mobile-preview { display:flex;justify-content:space-between;align-items:center;min-height:48px;margin-top:18px;padding:10px 16px;border:1px solid var(--accent);border-radius:10px;font-size:13px;font-weight:600;color:var(--accent) }
    .print-button { margin-top:12px }
    .preview-surface { padding:24px;max-height:none }
    .preview-toolbar { padding:18px }
    .live-badge { display:inline-flex }
    .preview-footer { padding:15px }
    .preview-footer, .preview-footer>span:first-child { font-size:9px }
    .paper-format { display:block;font-size:9px }
    .how-section { grid-template-columns:1fr;gap:22px;margin-top:32px }
    .how-intro { display:none }
    .how-step { position:relative;padding-left:52px;min-height:44px }
    .how-icon { position:absolute;left:0;top:0 }
    .how-step p { max-width:none }
    .how-step h3 { margin-bottom:4px }
    .kind-note { font-size:10px;line-height:1.7 }
    .site-footer { font-size:10px;padding-bottom:max(24px,env(safe-area-inset-bottom)) }
    .start-link { margin-top:8px }
  }
  @media(max-width:360px) {
    .settings { padding:18px }
    .intro h1, body .intro h1 { font-size:36px }
    .paper-format { display:none }
    .preview-surface { padding:16px }
  }
}
@media print {
  .mobile-preview { display:none!important }
}