/* Hallmark · macrostructure: Workbench · tone: tactile local maker · anchor hue: coral */
@font-face{font-family:Pixelify;src:url("../fonts/pixelify-sans-latin-700.f54f30a241c6.woff2") format("woff2");font-weight:700;font-display:swap}:root{--paper:oklch(95% .025 82);--card:oklch(99% .012 82);--ink:oklch(25% .02 45);--muted:oklch(45% .025 45);--line:oklch(30% .02 45);--coral:oklch(63% .18 35);--focus:oklch(55% .18 250);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px}*{box-sizing:border-box}html{overflow-x:clip}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 "Avenir Next",Avenir,system-ui,sans-serif}.wrap{width:min(1180px,calc(100% - 32px));margin:auto}.skip-link{position:fixed;top:-4rem;left:1rem;z-index:9;padding:12px;background:var(--ink);color:white}.skip-link:focus{top:1rem}h1,h2,h3,legend{font-family:Pixelify,ui-monospace,monospace;line-height:1.05}.intro{padding:clamp(24px,5vw,56px) 0 20px}.intro h1{font-size:clamp(2.4rem,7vw,5.5rem);margin:4px 0 12px}.intro p:not(.eyebrow){max-width:62ch;color:var(--muted);font-size:1.08rem}.eyebrow{margin:0;color:var(--coral);font:700 .8rem Pixelify,monospace;letter-spacing:.08em}.workbench{margin-bottom:56px;padding:var(--space-4);background:var(--card);border:2px solid var(--line);box-shadow:5px 5px 0 var(--line)}.workbench-head{display:flex;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-3);border-bottom:2px solid var(--line)}.workbench-head h2{margin:0;font-size:clamp(1.7rem,4vw,2.8rem)}#status{max-width:52ch;margin:8px 0 0;color:var(--muted);font-size:.9rem}.verification{align-self:start;max-width:26ch;padding:8px;border:1px solid var(--line);font-size:.82rem}.verification[data-result="pass"]{border-color:oklch(55% .13 145)}.verification[data-result="fail"]{border-color:var(--coral);background:oklch(94% .035 30)}.input-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-3);margin-top:var(--space-4);align-items:end}label{display:grid;gap:4px;font-size:.86rem;font-weight:700}textarea,select,button{font:inherit;color:inherit}textarea,select{width:100%;min-height:44px;padding:8px;border:1px solid var(--line);background:var(--card)}textarea{resize:vertical}.input-row button,.actions button{min-height:44px;padding:8px 12px;border:1.5px solid var(--line);box-shadow:2px 2px 0 var(--line);background:var(--paper);font-weight:700}.input-row button{background:var(--coral);color:#fff}.actions button:disabled{opacity:.5;box-shadow:none;cursor:not-allowed}.help{margin:8px 0;color:var(--muted);font-size:.78rem}.studio{display:grid;grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr);gap:var(--space-6);margin-top:var(--space-4)}.settings{display:grid;align-content:start;gap:var(--space-3)}fieldset{min-width:0;margin:0;padding:12px;border:1.5px solid var(--line)}fieldset label+label{margin-top:10px}.check{display:flex;align-items:center;gap:8px}.check input{inline-size:18px;block-size:18px}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.chart-area{min-width:0}.stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.stats span{padding:4px 7px;border:1px solid var(--line);font:700 .75rem ui-monospace,monospace}.canvas-wrap{overflow:auto;max-height:72vh;border:2px solid var(--line);background:#fff}.canvas-wrap canvas{display:block;width:min(100%,728px);height:auto;image-rendering:pixelated}.materials{border-top:1px solid var(--line);margin-top:16px}.materials h3{margin:12px 0 0}.materials p{color:var(--muted);font-size:.85rem}.materials ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));padding:0;gap:8px;list-style:none}.materials li{display:flex;gap:8px;align-items:center;padding:6px;border:1px solid color-mix(in oklch,var(--line) 25%,transparent);font-size:.8rem}.swatch{width:22px;height:22px;border:1px solid var(--line);flex:none}.guide{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:var(--space-8);padding-bottom:56px}.guide figure{margin:0;border:2px solid var(--line);align-self:start;background:var(--card)}.guide img{display:block;width:100%;height:auto;image-rendering:pixelated}.guide figcaption{padding:8px;border-top:1px solid var(--line);font-size:.76rem;color:var(--muted)}.guide h2{font-size:clamp(1.7rem,4vw,3rem);margin:0}.guide p{max-width:70ch;color:var(--muted)}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}@media(max-width:768px){.studio,.guide{grid-template-columns:1fr}.input-row{grid-template-columns:1fr}.workbench-head{flex-direction:column}.verification{max-width:none}.settings{display:contents}.settings fieldset:first-child{order:2}.chart-area{order:1}.settings fieldset:nth-child(2),.settings fieldset:nth-child(3),.settings .actions,.settings>.help{order:3}.canvas-wrap{max-height:58vh}}@media(max-width:390px){.wrap{width:calc(100% - 16px)}.workbench{padding:10px}.actions{grid-template-columns:1fr}.intro h1{font-size:2.25rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:150ms!important;transition-duration:150ms!important}}

/* Scoped state/responsive tokens; brand HEX values belong to matrix data, not UI chrome. */
:root{--qr-pass:oklch(55% .13 145);--qr-error-paper:oklch(94% .035 30);--qr-chart-paper:oklch(99% .004 82)}
html,body{overflow-x:clip}
h1,h2,h3,legend{overflow-wrap:anywhere;min-width:0;font-style:normal}
textarea,select{min-width:0}
.input-row{grid-template-columns:minmax(0,1fr) auto}
.guide{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.input-row button,.actions button{white-space:nowrap;cursor:pointer;transition:background-color 150ms,box-shadow 150ms}
.input-row button{color:var(--ink)}
.input-row button:enabled:hover,.actions button:enabled:hover{background:color-mix(in oklch,var(--coral) 25%,var(--paper))}
.input-row button:enabled:active,.actions button:enabled:active{box-shadow:none;transform:translate(1px,1px)}
.input-row button:disabled,.actions button:disabled{cursor:not-allowed;opacity:.5}
.skip-link{color:var(--card)}
.canvas-wrap{background:var(--qr-chart-paper)}
.verification[data-result="pass"]{border-color:var(--qr-pass)}
.verification[data-result="fail"]{background:var(--qr-error-paper)}
[data-error="true"]{color:var(--ink)!important;font-weight:600}
canvas[data-stale="true"]{opacity:.5}
.site-foot{padding:0 0 var(--space-8)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.site-foot a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;color:var(--ink)}
@media(max-width:768px){.input-row,.guide{grid-template-columns:minmax(0,1fr)}}
/* Hallmark · component: legible accent text and primary action; matrix colors unchanged. */
:root{--qr-accent-ink:#9c322e;--qr-logo-ink:#a53270}
body[data-page-route="qr-code-pattern-maker"] header.site .logo-name b{color:var(--qr-logo-ink)}
.intro .eyebrow{color:var(--qr-accent-ink)}
.input-row #generateButton{background:var(--qr-accent-ink);color:var(--card)}