:root{--ink:#203758;--yellow:#ffce35;--blue:#168eea}*{box-sizing:border-box}body{margin:0;background:#dff7ff;color:var(--ink);font:16px/1.45 "Trebuchet MS","Segoe UI",Arial,sans-serif}.print-toolbar{max-width:1000px;margin:0 auto;padding:28px 30px 24px;text-align:center}.back-link{display:block;text-align:left;color:var(--ink);font-size:14px;font-weight:800}h1{font-size:clamp(28px,4vw,42px);line-height:1.1;margin:20px 0 10px;font-weight:950;letter-spacing:-1.4px}.print-toolbar p{margin:10px 0}.mode-buttons,.print-buttons,.pdf-links{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px 0}.mode-buttons button,.print-buttons button{font:800 14px "Trebuchet MS",Arial;border:2px solid var(--ink);border-radius:16px;padding:12px 18px;cursor:pointer;background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--ink)}.mode-buttons button[aria-pressed=true]{background:var(--ink);color:#fff}.print-buttons button{background:#ffce35}.print-buttons button:last-child{background:#fff}.print-tip{font-size:12px;max-width:680px;margin:18px auto!important}.pdf-links{font-size:13px;font-weight:800}.pdf-links a{padding:8px 12px;background:#fff;border-radius:12px;color:var(--ink)}button:focus-visible,a:focus-visible{outline:4px solid #7b51cc;outline-offset:4px}.sheets{padding:0 12px 35px}.sheet{width:186mm;height:273mm;padding:0;display:flex;flex-direction:column;gap:5mm;background:white;margin:25px auto;box-shadow:0 8px 35px #194a6b30;outline:12mm solid white;outline-offset:0;break-after:page;page-break-after:always}.sheet:last-child{break-after:auto;page-break-after:auto}.sheet-header{height:22mm;flex:none;display:flex;align-items:center;justify-content:space-between;padding:2mm 4mm;background:#ffcf38;border-radius:6mm;gap:3mm}.sheet-brand{font-size:8pt;font-weight:900;letter-spacing:1pt}.sheet-header h2{font-size:20pt;line-height:1.1;margin:2mm 0 0;letter-spacing:-.8pt}.sheet-badge{white-space:nowrap;background:#fff;border:1mm solid var(--ink);border-radius:5mm;font-size:20pt;font-weight:900;padding:2mm 4mm}.abc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4mm;flex:1;min-height:0}.abc-card{--tone:#ffe7a3;--accent:#d47509;position:relative;border:.65mm solid var(--accent);border-radius:6mm;background:var(--tone);display:grid;grid-template-columns:25mm minmax(0,1fr);grid-template-rows:1fr auto 9mm;align-items:center;overflow:hidden;padding:3mm 4mm 2mm;min-height:0}.tone-1{--tone:#d3f6f4;--accent:#087f89}.tone-2{--tone:#ffe1e8;--accent:#c34576}.tone-3{--tone:#e8e0ff;--accent:#7653bc}.tone-4{--tone:#e0f3d8;--accent:#4b8b42}.tone-5{--tone:#ffe0c4;--accent:#ba591a}.abc-letter{font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif;font-size:53pt;font-weight:900;line-height:1;color:var(--accent);text-shadow:1px 2px white;align-self:center;z-index:1}.abc-card img{width:100%;height:37mm;object-fit:contain;display:block;min-width:0}.card-word{grid-column:1/-1;text-align:center;font-size:21pt;font-weight:900;line-height:1.1;color:var(--ink);padding:1mm 0;white-space:nowrap}.card-hint{grid-column:1/-1;text-align:center;font-size:8pt;font-weight:700;line-height:1.15;margin:0;color:var(--ink)}.inside-letter{color:#c13872;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}.five .abc-card:last-child{grid-column:1/-1;grid-template-columns:42mm 1fr 63mm;grid-template-rows:1fr 10mm}.five .abc-card:last-child .abc-letter{text-align:center}.five .abc-card:last-child img{height:43mm;grid-column:2;grid-row:1/3}.five .abc-card:last-child .card-word{grid-column:3;grid-row:1;align-self:end;padding-bottom:5mm}.five .abc-card:last-child .card-hint{grid-column:3;grid-row:2;align-self:start}.sheet-footer{height:7mm;flex:none;display:flex;align-items:center;justify-content:space-between;font-size:8pt;font-weight:800;border-top:.4mm solid #cadbe6;padding-top:2mm}.sheet-header,.abc-card{-webkit-print-color-adjust:exact;print-color-adjust:exact}body[data-mode=outline] .sheet-header{background:white;border:.6mm solid #222}body[data-mode=outline] .sheet-badge{border-color:#222}body[data-mode=outline] .abc-card{background:#fff;border-color:#222}body[data-mode=outline] .abc-letter{color:white;-webkit-text-stroke:1px #172332;text-shadow:none}body[data-mode=outline] .card-word,body[data-mode=outline] .card-hint,body[data-mode=outline] .sheet-header,body[data-mode=outline] .inside-letter{color:#172332}body[data-mode=outline] .sheet-footer{border-color:#777}.sheets{counter-reset:sheet}
@media screen and (max-width:800px){.sheet{width:100%;height:auto;min-height:0;outline:0;padding:18px;margin:20px auto;border-radius:20px;gap:18px}.sheet-header{height:auto;min-height:75px;padding:14px;border-radius:18px}.sheet-header h2{font-size:23px}.sheet-brand{font-size:9px}.sheet-badge{font-size:25px;border-width:2px;padding:8px 12px}.abc-grid{grid-template-rows:none;grid-auto-rows:minmax(210px,auto);gap:12px;flex:none}.abc-card{padding:10px;grid-template-columns:40px 1fr;grid-template-rows:1fr auto 28px;border-width:2px;border-radius:20px}.abc-letter{font-size:58px}.abc-card img{height:125px}.card-word{font-size:25px}.card-hint{font-size:10px}.five .abc-card:last-child{grid-template-columns:55px 1fr;grid-template-rows:1fr auto 25px}.five .abc-card:last-child img{grid-column:2;grid-row:1;height:125px}.five .abc-card:last-child .card-word{grid-column:1/-1;grid-row:2;padding:0;align-self:center}.five .abc-card:last-child .card-hint{grid-column:1/-1;grid-row:3;align-self:center}.sheet-footer{height:auto;font-size:10px;gap:10px}.print-toolbar{padding:20px}.sheets{padding:0 10px 25px}}
@media screen and (max-width:450px){.sheet{padding:12px}.sheet-header h2{font-size:20px}.sheet-badge{font-size:19px}.abc-grid{grid-template-columns:1fr;grid-auto-rows:220px}.abc-card{grid-template-columns:75px 1fr}.abc-card img{height:135px}.abc-letter{font-size:74px;text-align:center}.five .abc-card:last-child{grid-column:auto;grid-template-columns:75px 1fr}.sheet-footer{font-size:9px}.mode-buttons button,.print-buttons button{flex:1;font-size:12px;padding:12px 9px}.pdf-links{font-size:12px}}
@page{size:A4 portrait;margin:12mm}@media print{html,body{margin:0!important;padding:0!important;background:white!important}.print-toolbar{display:none!important}.sheets{padding:0!important;margin:0!important}.sheet{width:186mm!important;height:272mm!important;margin:0!important;outline:none!important;box-shadow:none!important;gap:5mm!important}.sheet-header{height:22mm!important}.sheet-footer{height:7mm!important}.abc-card{break-inside:avoid;page-break-inside:avoid}.sheet-header h2{font-size:20pt!important}.sheet-footer{color:#203758}body[data-mode=outline] .sheet-footer{color:#172332}}
.print-buttons a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font:800 14px "Trebuchet MS",Arial;border:2px solid var(--ink);border-radius:16px;padding:12px 18px;color:var(--ink);box-shadow:0 4px 0 var(--ink);background:#ffce35}.print-buttons a:last-child{background:white}@media(max-width:450px){.print-buttons a{flex:1;font-size:12px;padding:12px 9px}}