/* Hallmark · macrostructure: Split Studio · tone: tactile pixel workshop · anchor hue: coral · pre-emit critique: P4 H4 E4 S4 R4 V4 */
@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);--yellow:oklch(84% .15 88);--mint:oklch(84% .08 170);--focus:oklch(55% .18 250);--display:Pixelify,ui-monospace,monospace;--sans:"Avenir Next",Avenir,ui-rounded,system-ui,sans-serif;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--shadow:5px 5px 0 var(--line)}*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:clip}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans)}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.wrap{width:min(1180px,calc(100% - 2rem));margin:auto}.skip-link{position:fixed;left:1rem;top:-5rem;background:var(--ink);color:#fff;padding:.75rem;z-index:100}.skip-link:focus{top:1rem}.site{border-bottom:2px solid var(--line);background:color-mix(in oklch,var(--paper) 94%,transparent);position:sticky;top:0;z-index:20}.site .wrap,.site-foot .wrap{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.logo,.main a{text-decoration:none;font-weight:700}.logo{font:1.3rem var(--display)}.logo b{color:var(--coral)}.main{display:flex;gap:1rem;font-size:.88rem}.main a:hover{text-decoration:underline}.hero{padding:clamp(1.25rem,3vw,2.5rem) 0 1rem}.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.65fr);gap:1.25rem;align-items:center}.kicker{margin:0;color:var(--coral);font:700 .75rem var(--display);letter-spacing:.08em}h1,h2,h3{font-family:var(--display);line-height:1.05}h1{font-size:clamp(2.55rem,7vw,5.5rem);margin:.35rem 0 .75rem}.lede{max-width:66ch;color:var(--muted);font-size:1.1rem}.static-example{width:min(500px,100%);margin:1rem 0 0;border:2px solid var(--line);background:var(--card);box-shadow:3px 3px 0 var(--line)}.static-example img{display:block;width:100%;height:auto;image-rendering:pixelated}.static-example figcaption{padding:.35rem .55rem;border-top:1px solid var(--line);color:var(--muted);font-size:.74rem}.tool{margin-bottom:4rem;padding:clamp(.8rem,2vw,1.5rem);border:2px solid var(--line);background:var(--card);box-shadow:var(--shadow)}.tool-title{display:flex;justify-content:space-between;gap:1rem;border-bottom:2px solid var(--line);padding-bottom:.8rem;margin-bottom:1rem}.tool-title h2{margin:.25rem 0 0;font-size:clamp(1.5rem,4vw,2.5rem)}.live-thumb{display:grid;grid-template-columns:160px minmax(160px,1fr);gap:.6rem;align-items:center}.live-thumb canvas{width:160px;height:70px;border:1px solid var(--line);background:var(--card);image-rendering:pixelated}#status{max-width:32ch;margin:auto 0;color:var(--muted);font-size:.84rem}.studio{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:var(--space-6)}.settings{display:grid;align-content:start;gap:var(--space-3)}fieldset{margin:0;min-width:0;padding:.85rem;border:1.5px solid var(--line)}legend{font:700 1rem var(--display)}label{display:grid;gap:.25rem;margin-top:.6rem;font-weight:700;font-size:.87rem}input,select,textarea{min-height:44px;border:1px solid var(--line);background:var(--card);padding:.42rem .5rem}textarea{resize:vertical}input[type=range]{padding:0;accent-color:var(--coral)}output{font:700 .8rem ui-monospace,monospace;color:var(--coral)}.toggle{display:flex;align-items:center;gap:.5rem}.toggle input{min-height:auto;width:18px;height:18px}.help{margin:.4rem 0;color:var(--muted);font-size:.76rem}.actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-top:.7rem}.actions button{min-height:44px;border:1.5px solid var(--line);background:var(--paper);padding:.35rem;font-weight:700;font-size:.76rem;box-shadow:2px 2px 0 var(--line)}.actions button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--line)}.actions button:disabled{cursor:not-allowed;opacity:.5;box-shadow:none}.export button:first-child{background:var(--coral);color:#fff}.work{min-width:0}.stats{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.65rem}.stats span{border:1px solid var(--line);background:var(--paper);padding:.25rem .45rem;font:700 .75rem ui-monospace,monospace}.connection{min-height:2.5rem;margin-bottom:.6rem;padding:.45rem .6rem;border:1px solid var(--mint);background:color-mix(in oklch,var(--mint) 30%,var(--card));font-size:.8rem}.connection[data-risk=true]{border-color:var(--coral)}.grid-scroll{overflow:auto;border:2px solid var(--line);background:oklch(91% .015 80);max-height:70vh}.grid{display:grid;width:max-content;max-width:none;gap:1px;padding:1px;background:var(--line);touch-action:auto}.cell{width:var(--cell-size,24px);height:var(--cell-size,24px);padding:0;border:0;border-radius:0;background:transparent}.cell.clear{background:#e7e7e7}.grid[data-empty-texture=true] .cell.clear{background-color:#eee;background-image:linear-gradient(45deg,#d2d2d2 25%,transparent 25%,transparent 75%,#d2d2d2 75%),linear-gradient(45deg,#d2d2d2 25%,transparent 25%,transparent 75%,#d2d2d2 75%);background-position:0 0,4px 4px;background-size:8px 8px}.grid-zoom{display:flex;align-items:center;gap:.5rem;margin:.4rem 0;font-size:.76rem}.grid-zoom input{min-height:auto;flex:1}.cell:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.sheet-options{display:flex;flex-wrap:wrap;gap:.4rem .7rem;margin-top:.7rem}.sheet-options label{display:flex;align-items:center;gap:.25rem;margin:0;font-size:.72rem}.sheet-options input{min-height:auto;width:16px;height:16px}.materials{margin-top:1rem;border-top:1px solid var(--line)}.materials h3{margin:.7rem 0 .25rem;font-size:1.15rem}.materials p{margin:.1rem 0;color:var(--muted);font-size:.8rem}.materials ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.4rem;padding:0;list-style:none}.materials li{display:flex;align-items:center;gap:.45rem;padding:.35rem;border:1px solid color-mix(in oklch,var(--line) 28%,transparent);font-size:.76rem}.dot{width:20px;height:20px;border:1px solid var(--line);flex:none}.guide{display:grid;grid-template-columns:minmax(230px,.65fr) minmax(0,1.35fr);gap:var(--space-8);padding-bottom:4rem}.guide h2{font-size:clamp(1.9rem,4vw,3rem);margin:0}.guide h3{margin:0 0 .2rem;font-size:1.25rem}.guide p{margin:.15rem 0 1.2rem;color:var(--muted);max-width:70ch}.site-foot{border-top:2px solid var(--line);font-size:.85rem}.site-foot p{color:var(--muted)}.site-foot nav{display:flex;gap:.8rem}@media(max-width:760px){.live-thumb{grid-template-columns:100px 1fr}.live-thumb canvas{width:100px;height:50px}.main{display:none}.site .wrap,.site-foot .wrap{min-height:56px}.studio,.guide{grid-template-columns:1fr;gap:1rem}.tool-title{align-items:flex-start;flex-direction:column}.tool-title #status{margin:0}.settings{order:0}.work{order:1}.grid-scroll{max-height:56vh}.guide{padding-bottom:3rem}.export{grid-template-columns:1fr}.hero-layout{grid-template-columns:1fr}.cell{width:var(--cell-size,22px);height:var(--cell-size,22px)}}@media(max-width:390px){.wrap{width:calc(100% - 1rem)}.tool{padding:.65rem}.actions{gap:.3rem}.actions button{font-size:.68rem}.cell{width:var(--cell-size,20px);height:var(--cell-size,20px)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.15ms!important;transition-duration:.15ms!important}}
.grid[data-grid=false]{gap:0;padding:0;background:transparent}.grid[data-grid=false] .cell{border:0}.cell .code{display:block;font:700 8px/1 ui-monospace,monospace;overflow:hidden;text-align:center}.grid[data-boards=true] .cell.board-top{box-shadow:inset 0 2px 0 var(--line)}.grid[data-boards=true] .cell.board-left{box-shadow:inset 2px 0 0 var(--line)}.grid[data-boards=true] .cell.board-top.board-left{box-shadow:inset 2px 0 0 var(--line),inset 0 2px 0 var(--line)}
/* Compact mobile layout: text/layout, live chart, then brand and export. */
@media(max-width:760px){
  .settings{display:contents}
  .settings fieldset{order:2}
  .settings fieldset:first-child{order:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  .settings fieldset:first-child>label:first-of-type,.settings fieldset:first-child>.help{grid-column:1/-1}
  .settings fieldset:first-child input,.settings fieldset:first-child select{min-width:0;width:100%}
  .settings fieldset:last-child{order:3}
  .work{order:1}
  .hero-layout{grid-template-columns:minmax(0,1fr)}
}
/* Hallmark · component: accessible bead grid and contrast states · P5 H5 E5 S5 R5 V4 */
:root{--letter-accent-ink:#9c322e;--letter-logo-ink:#a53270}
.grid-row{display:contents}
body[data-page-route="bead-letter-generator"] header.site .logo-name b{color:var(--letter-logo-ink)}
.hero .kicker{color:var(--letter-accent-ink)}
.actions.export button:first-child{background:var(--letter-accent-ink);color:var(--card)}