#mna-demo{max-width:1100px;margin:auto;padding:24px;color:#624651;font:17px/1.6 Arial,sans-serif}#mna-demo *{box-sizing:border-box}#mna-demo [hidden]{display:none!important}#mna-demo h1,#mna-demo h2,#mna-demo h3{font-family:Georgia,serif;line-height:1.25}#mna-demo header,#mna-demo footer{text-align:center;padding:20px 0}#mna-demo a{color:#a74467}#mna-demo button,#mna-demo .demo-button{background:#a74467;color:white;border:1px solid #987326;border-radius:10px;padding:11px 16px;font:700 16px/1.4 Arial,sans-serif;cursor:pointer;text-decoration:none;display:inline-block}#mna-demo button[aria-pressed=true]{background:#6d4923}#mna-demo input,#mna-demo select{font:inherit;padding:8px;max-width:100%;border:1px solid #987326;border-radius:6px}#mna-demo label{display:grid;gap:5px}#mna-demo nav,.demo-tools{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0;align-items:end}.demo-intro,#demo-collection{border:1px solid #987326;border-radius:16px;background:#fffdf9;padding:22px;margin:20px 0}#demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}#demo-grid article{border:1px solid #c5a43b;border-radius:14px;padding:18px;background:white;min-width:0}#demo-grid .demo-finished{width:100%;display:block}#demo-grid .demo-flat{display:block;height:240px;max-width:100%;margin:12px auto;object-fit:contain}#demo-grid .demo-actions{display:flex;flex-wrap:wrap;gap:8px}#demo-grid figure{margin:12px 0}#demo-grid figcaption{font-weight:bold;text-align:center}.demo-photo{max-height:320px;width:100%;object-fit:contain}#demo-practice{width:min(960px,95vw);max-height:90vh;overflow:auto;border:2px solid #987326;border-radius:16px;color:#624651;background:#fffdf9;padding:22px}#demo-practice::backdrop{background:#0008}#demo-close{float:right}.demo-canvases{display:flex;gap:20px;justify-content:center}.demo-canvases figure{width:40%;max-width:220px;margin:0}.demo-canvases img{width:100%;display:block}.demo-canvas-stack{position:relative;border:1px solid #aaa}.demo-canvas-stack canvas{width:100%;height:auto;display:block}#demo-ink{position:absolute;inset:0;touch-action:none}#demo-print-sheet{display:none}@media(max-width:650px){#mna-demo{padding:14px}#demo-grid{grid-template-columns:1fr}.demo-intro,#demo-collection{padding:15px}#mna-demo nav{display:grid;grid-template-columns:1fr 1fr}.demo-canvases{gap:12px}.demo-canvases figure{width:46%}}@media print{body>*{display:none!important}body>#demo-print-sheet{display:block!important;color:black;font:10pt Arial;background:white}#demo-print-sheet h1{font-size:16pt}#demo-print-sheet .demo-print-row{break-inside:avoid;margin-bottom:5mm}#demo-print-sheet h3{margin:0 0 2mm}#demo-print-sheet .demo-print-boxes{display:flex;gap:4mm}#demo-print-sheet canvas{flex:none;print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* Center the card actions on phones, with two primary buttons followed by two rows. */
@media(max-width:650px){
 #demo-grid .demo-actions{display:grid;grid-template-columns:max-content max-content;justify-content:center;gap:10px 8px}
 #demo-grid .demo-actions>button{min-height:44px;max-width:100%;white-space:normal}
 #demo-grid .demo-actions>button:nth-child(n+3){grid-column:1 / -1;justify-self:center}
}

/* Keep both reference panels aligned, including narrow phone screens. */
#demo-practice .demo-canvases{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:12px;align-items:start}
#demo-practice .demo-canvases figure{width:100%;max-width:none;min-width:0;margin:0;display:grid;grid-template-rows:3.6em auto}
#demo-practice .demo-canvases figcaption{font:16px/1.2 Arial,sans-serif;display:flex;align-items:center;justify-content:center;text-align:center;margin:0;padding:4px}
#demo-practice #demo-reference{width:100%;height:auto;aspect-ratio:1/2;object-fit:fill}
#demo-practice .demo-canvas-stack{border:0;aspect-ratio:1/2}
#demo-practice .demo-palette{display:flex;flex-wrap:wrap;gap:8px}
#demo-practice .demo-palette button{display:flex;align-items:center;gap:6px;background:white;color:#624651;border:1px solid #987326;padding:7px;font:12px Arial,sans-serif;border-radius:8px;min-height:44px}
#demo-practice .demo-palette button::before{content:"";width:25px;height:25px;background:var(--swatch);border:1px solid #aaa;border-radius:50%;flex-shrink:0}
@media print{#demo-print-sheet h1{margin:0 0 3mm}#demo-print-sheet>p{margin:0 0 4mm}#demo-print-sheet h3{font-size:10pt;line-height:4mm}#demo-print-sheet .demo-print-row{margin:0 0 3mm}#demo-print-sheet .demo-print-boxes{gap:4mm}#demo-print-sheet canvas{box-sizing:border-box}}

#mna-demo .demo-howto>h2{text-align:center;margin:0 0 22px}#mna-demo .demo-howto-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}#mna-demo .demo-howto-grid article{border:2px solid #987326;border-radius:16px;padding:22px;background:#fffdf9;min-width:0}#mna-demo .demo-howto-grid h3{font-size:23px;font-weight:400;margin:0 0 14px}#mna-demo .demo-howto-grid p{margin:0;line-height:1.65}#mna-demo .demo-howto-note{font-size:14px;line-height:1.6;margin:20px 0 0}@media(max-width:650px){#mna-demo .demo-howto-grid{grid-template-columns:1fr;gap:16px}#mna-demo .demo-howto-grid article{padding:20px}#mna-demo .demo-howto-grid h3{font-size:22px}}