:root{color-scheme:light;font-family:IBM Plex Mono,Courier New,monospace;background:#f4f0e5;color:#111;--surface: #fffdf7;--paper: #fffefb;--ink: #111111;--muted: #4b4b4b;--border: #111111;--accent: #f7d85c;--accent-strong: #21849a;--answer: #ef476f;--active: #2c9fba;--cell: 1.72rem;--letter-scale: .63}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;min-height:100dvh;background:#f4f0e5;overflow-x:hidden;overscroll-behavior-x:none}button,input,select{font:inherit}button,input,select{border:2px solid var(--border);border-radius:6px;background:var(--surface);color:var(--ink);min-height:2.4rem}button{cursor:pointer;padding:.55rem .75rem;box-shadow:3px 3px 0 var(--border);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}button:hover{background:#fff}button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--border)}button:focus-visible,input:focus-visible,select:focus-visible,.cell:focus-visible{outline:3px solid var(--active);outline-offset:2px}.app-shell{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:.6rem;min-height:100dvh;padding:max(.75rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left))}.toolbar,.play-bar{border:1px solid var(--border);border-radius:3px;background:#fffdf7f5;box-shadow:2px 2px 0 var(--border)}.toolbar{display:grid;gap:.75rem;padding:.75rem}.brand{display:flex;align-items:center;gap:.65rem}.brand h1{position:relative;margin:0;padding:.22rem .46rem .28rem;border:2px solid var(--border);border-radius:6px;background:radial-gradient(ellipse .52rem .24rem at 12% 20%,#111111 0 96%,transparent 100%),radial-gradient(ellipse .76rem .3rem at 37% 82%,#111111 0 96%,transparent 100%),radial-gradient(ellipse .5rem .2rem at 56% 34%,#111111 0 96%,transparent 100%),radial-gradient(ellipse .64rem .26rem at 74% 78%,#111111 0 96%,transparent 100%),radial-gradient(ellipse .46rem .3rem at 91% 24%,#111111 0 96%,transparent 100%),radial-gradient(ellipse .34rem .18rem at 86% 90%,#111111 0 96%,transparent 100%),#fff;font-size:clamp(1.35rem,2.4vw,2.2rem);line-height:1;letter-spacing:0;color:#111;text-shadow:1px 1px 0 #ffffff,-1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px -1px 0 #ffffff;box-shadow:2px 2px 0 var(--border)}.brand-mark{position:relative;display:grid;place-items:center;width:2.35rem;height:2.35rem;border:2px solid var(--border);border-radius:50%;background:radial-gradient(ellipse .42rem .24rem at 82% 22%,#111111 0 96%,transparent 100%),radial-gradient(ellipse .48rem .28rem at 23% 78%,#111111 0 96%,transparent 100%),radial-gradient(ellipse .3rem .18rem at 86% 76%,#111111 0 96%,transparent 100%),#fff;font-size:.8rem;font-weight:800;color:#111;text-shadow:1px 1px 0 #ffffff,-1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px -1px 0 #ffffff;box-shadow:2px 2px 0 var(--border)}.controls{display:flex;flex-wrap:wrap;gap:.65rem;align-items:end}.field{display:grid;gap:.25rem}.field span{color:var(--muted);font-size:.75rem;font-weight:700;text-transform:uppercase}input,select{padding:.45rem .6rem}input{width:8rem;text-transform:uppercase}#solutionCountInput{text-transform:none}.primary-button{--cow-button-bg: radial-gradient(ellipse .82rem .32rem at 11% 18%, #111111 0 96%, transparent 100%), radial-gradient(ellipse .48rem .78rem at 7% 88%, #111111 0 96%, transparent 100%), radial-gradient(ellipse .54rem .2rem at 36% 12%, #111111 0 96%, transparent 100%), radial-gradient(ellipse .9rem .48rem at 52% 90%, #111111 0 96%, transparent 100%), radial-gradient(ellipse .28rem .5rem at 69% 16%, #111111 0 96%, transparent 100%), radial-gradient(ellipse .78rem .34rem at 84% 78%, #111111 0 96%, transparent 100%), radial-gradient(ellipse .42rem .24rem at 92% 23%, #111111 0 96%, transparent 100%), #ffffff;background:var(--cow-button-bg);font-weight:800;text-shadow:1px 1px 0 #ffffff,-1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px -1px 0 #ffffff}.primary-button:hover{background:var(--cow-button-bg)}.starter-words{display:flex;flex-wrap:wrap;gap:.45rem}.starter-words button{min-height:2rem;padding:.35rem .5rem;font-size:.78rem;box-shadow:2px 2px 0 var(--border)}.play-bar{position:sticky;top:max(.35rem,env(safe-area-inset-top));z-index:5;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.45rem .55rem;font-size:.92rem;font-weight:700}.play-copy{display:flex;min-width:0;flex-wrap:wrap;gap:.35rem .9rem}.play-actions{display:flex;flex:0 0 auto;gap:.35rem}.mode-button{min-height:2rem;padding:.35rem .55rem;border-radius:3px;box-shadow:none;background:#fff;font-size:.78rem;font-weight:800}.mode-button.is-selected,.solution-toggle.is-selected{background:var(--ink);color:#fff}#statusText.solved{color:var(--accent-strong)}#statusText.error{color:var(--answer)}#metaText{color:var(--muted);white-space:nowrap}.grid-frame{height:min(70dvh,42rem);min-height:24rem;border:1px solid var(--border);border-radius:3px;background:#e8e2d2;box-shadow:2px 2px 0 var(--border);overflow:hidden}.grid-scroll{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;padding:.7rem;background:#fff;touch-action:none;cursor:grab}.grid-scroll.is-panning{cursor:grabbing}.puzzle-grid{display:grid;grid-auto-rows:var(--cell);grid-auto-columns:var(--cell);position:relative;width:max-content;border-top:2px solid var(--border);border-left:2px solid var(--border);background:var(--paper);user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab}.cell{display:flex;align-items:center;justify-content:center;width:var(--cell);height:var(--cell);min-height:0;margin:0;padding:0;border:0;border-right:2px solid var(--border);border-bottom:2px solid var(--border);border-radius:0;background:transparent;color:#07182d;font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-size:calc(var(--cell) * var(--letter-scale));font-weight:400;line-height:1;box-shadow:none;cursor:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;position:relative;z-index:2}.cell.active,.cell.answer{background:#2c9fbab8;color:#081d23}.cell.active.answer{background:#2c9fbad1;color:#081d23}body.is-focused .toolbar{display:none}body.is-focused .app-shell{grid-template-rows:auto minmax(0,1fr)}body.is-focused .grid-frame{height:calc(100dvh - 4.8rem)}@media(max-width:720px){:root{--cell: 1.29rem;--letter-scale: .78}.app-shell{width:100%;padding:.35rem;gap:.45rem;overflow-x:hidden}.toolbar,.play-bar,.grid-frame{max-width:100%}.toolbar{gap:.55rem;padding:.55rem .6rem .65rem .55rem}.controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.5rem .65rem;align-items:end}.controls>button,.field{width:calc(100% - 3px);min-width:0}input,select{width:100%;min-width:0}.controls>button{min-height:3.05rem;padding:.45rem .4rem;font-size:.86rem;line-height:1.2;overflow-wrap:anywhere}.primary-button{font-size:.9rem}.starter-words{gap:.35rem}.starter-words button{min-height:1.85rem;padding:.28rem .42rem;font-size:.7rem}.play-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.45rem;padding:.4rem .45rem}.play-copy{gap:.2rem .55rem}.play-actions{margin-left:auto}.mode-button{min-height:1.9rem;padding:.3rem .36rem;font-size:.68rem}.grid-scroll{padding:.45rem}.grid-frame{height:58dvh;min-height:23rem}body.is-focused .grid-frame{height:calc(100dvh - 4.2rem);min-height:0}}
