.color-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.color-card{display:flex;flex-direction:column;gap:10px}
.color-card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:white;border-radius:8px}
.color-card h3{margin:0;min-height:0;overflow-wrap:anywhere}
.drawing-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.drawing-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:18px 0}
.drawing-result{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.drawing-result>a:first-child{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:12px;text-decoration:none;font-weight:600}
.drawing-result img{width:56px;height:56px;object-fit:cover;border-radius:6px}
.drawing-story-link{font:600 16px/1.5 system-ui,sans-serif;padding:14px 18px;background:#f0eadf;border-radius:10px}
.color-card .drawing-actions{margin-top:auto}
.drawing-actions .button,.drawing-actions button{padding:9px 12px;font-size:14px;text-align:center;min-height:44px}
.drawing-page{max-width:850px;margin:24px auto}
.drawing-page h1{font-size:clamp(28px,4vw,46px);text-align:center;overflow-wrap:anywhere}
.drawing-navigation{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px}
.drawing-help,.drawing-status{text-align:center;font-size:14px;color:var(--muted)}
.drawing-status:empty{display:none}
.coloring-sheet{margin:20px 0;background:white;padding:12px;border:1px solid var(--line);border-radius:12px;color:#182c43}
.coloring-sheet img{display:block;width:100%;height:auto;object-fit:contain}
.coloring-sheet figcaption{text-align:center;font-size:13px;padding-top:10px}
@media(max-width:480px){.color-grid{gap:12px}.color-card .drawing-actions{gap:5px}.color-card .button{flex:1 1 100%;padding:7px 5px;font-size:13px}.coloring-sheet{padding:6px}}
@media(max-width:340px){.color-grid{grid-template-columns:1fr}}
@media(min-width:700px){.color-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.color-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media print{
  @page coloring{size:A4 portrait;margin:12mm}
  body:has(.drawing-page)>:not(main){display:none!important}
  body:has(.drawing-page),body:has(.drawing-page) main{margin:0!important;padding:0!important;width:100%!important;max-width:none!important;background:white!important}
  .drawing-page{page:coloring;margin:0!important;max-width:none!important}
  .drawing-page>:not(.coloring-sheet){display:none!important}
  .coloring-sheet{margin:0;border:0;border-radius:0;padding:0;break-inside:avoid;page-break-inside:avoid}
  .coloring-sheet img{width:100%;height:auto;max-height:240mm;object-fit:contain}
  .coloring-sheet figcaption{font:10pt/1.3 Arial,sans-serif;color:black;padding-top:4mm}
}