@font-face{font-family:"Outfit";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/outfit-latin.woff2) format("woff2")}
:root{--accent:#7b2d6e;--accent-hover:#5f2155;--accent-soft:#f6e9f3;--ink:#1a1f24;--muted:#5d6470;--line:#e4e1e6;--font:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;--sh:0 4px 20px rgba(0,0,0,.08)}
*{box-sizing:border-box}
html{background:#4d4e4e}
body{margin:0;font:400 18px/1.65 var(--font);color:var(--ink);min-height:100vh;background:linear-gradient(180deg,#4d4e4e 0%,#716861 30%,#8a7968 55%,#a6865a 85%,#ac854e 100%)}
@media (hover:hover) and (min-width:900px){body{background-attachment:fixed}}
a{color:var(--accent)}a:hover{color:var(--accent-hover)}
:focus-visible{outline:3px solid #e7b3da;outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}
.top{background:#fff;box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:22px;color:var(--ink);text-decoration:none}.brand span{color:var(--accent)}
.top nav{display:flex;gap:6px;flex-wrap:wrap}.top nav a{color:var(--ink);text-decoration:none;font-weight:700;padding:10px 12px;border-radius:12px;font-size:17px}
.top nav a:hover,.top nav a[aria-current]{background:var(--accent-soft);color:var(--accent)}
.hero{color:#fff;padding:32px 0 20px}.hero h1{font-size:clamp(34px,5vw,52px);line-height:1.1;margin:0 0 8px;font-weight:800}.hero p{margin:0;font-size:20px;max-width:760px}
.card{background:#fff;border-radius:16px;box-shadow:var(--sh);padding:28px}
section.band{padding:clamp(28px,5vw,56px) 0}
h2{font-size:clamp(26px,3.4vw,34px);line-height:1.2;margin:0 0 16px;font-weight:800}h3{font-size:21px;margin:0 0 8px;line-height:1.3}
.tool{display:grid;grid-template-columns:minmax(340px,.8fr) minmax(0,1.2fr);gap:28px}
label.l,.lbl{display:block;font-weight:700;margin:0 0 6px}
.field{margin:0 0 18px}
input[type=text],textarea,select{width:100%;font:inherit;font-size:20px;border:2px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink);background:#fff}
input[type=text]:focus,textarea:focus{border-color:var(--accent);outline:none}
textarea{resize:vertical;line-height:1.4}
.countchip{display:inline-block;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:16px;border-radius:999px;padding:2px 12px;margin-left:8px}
.hint{color:var(--muted);font-size:16px;margin:4px 0 0}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--ink);font:700 17px var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.18s ease}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.chip svg{width:20px;height:20px}
.tog{display:flex;align-items:center;gap:10px;font-weight:700;min-height:44px;cursor:pointer}.tog input{width:22px;height:22px;accent-color:var(--accent)}
details.more{margin:0 0 18px}details.more>summary{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border-radius:12px;font:800 18px var(--font);text-decoration:none;cursor:pointer;transition:.18s ease;border:2px solid transparent}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line)}.btn-secondary:hover{border-color:var(--accent);color:var(--ink)}
.btn-secondary[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.btn.full{width:100%;min-height:56px}.btn.sm{min-height:44px;padding:0 14px;font-size:16px}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.row .btn{flex:1 1 auto}
.msg{color:var(--accent);font-weight:700;min-height:0;margin:8px 0 0}
.preview .ptitle{font-size:26px;margin:0 0 12px;font-weight:800;text-align:center}
.grid{display:grid;grid-template-columns:repeat(var(--n),1fr);aspect-ratio:1;max-width:560px;margin:0 auto;border:2px solid var(--ink);border-radius:12px;background:#fff;overflow:hidden;font-variant-numeric:tabular-nums}
.grid span{display:flex;align-items:center;justify-content:center;aspect-ratio:1;font:700 clamp(14px,3.2vw,26px)/1 var(--font);border-right:1px solid #ece8ee;border-bottom:1px solid #ece8ee;text-transform:none}
.grid[style*="--n:20"] span{font-size:clamp(11px,2.2vw,20px)}.grid[style*="--n:15"] span{font-size:clamp(13px,2.7vw,23px)}
.grid .hit{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.grid .hit.s{border-radius:999px 0 0 999px}.grid .hit.e{border-radius:0 999px 999px 0}.grid .hit.s.e{border-radius:999px}
.wlist{columns:3;gap:20px;list-style:none;padding:0;margin:18px auto 0;max-width:560px;font-size:19px}.wlist li{break-inside:avoid}
.nolist .wlist,.nolist .wl-h{display:none}
.stat{color:var(--muted);font-size:16px;text-align:center;margin:10px 0 0}.skip-w{color:var(--accent);font-weight:700}
.empty .grid{opacity:.35}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards .card{transition:.18s ease}.cards .card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.14)}
.ic{width:24px;height:24px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.step{display:inline-flex;width:36px;height:36px;border-radius:999px;background:var(--accent);color:#fff;font-weight:800;align-items:center;justify-content:center;margin-bottom:8px}
.kicker{color:var(--accent);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;margin:12px 0 2px}
.mini{display:grid;grid-template-columns:repeat(6,1fr);aspect-ratio:4/3;border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.mini span{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;border-right:1px solid #ece8ee;border-bottom:1px solid #ece8ee}.mini .hit{background:var(--accent-soft);color:var(--accent)}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}.meta span{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:2px 10px;font-size:16px;font-weight:700}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.faq details{border-top:1px solid var(--line);padding:6px 0}.faq summary{cursor:pointer;font-weight:700;font-size:19px;min-height:44px;display:flex;align-items:center}.faq details p{margin:4px 0 12px}
.prose{max-width:780px}.prose h2{margin-top:32px}.prose h3{margin-top:22px}
.page{padding:0 0 40px}
footer{background:#fff;margin-top:40px;padding:28px 0;font-size:16px;color:var(--muted)}footer ul{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:6px 18px}footer a{color:var(--ink)}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.12);padding:10px 14px;display:flex;gap:12px;align-items:center}
.cookie[hidden]{display:none}.cookie p{margin:0;font-size:16px;flex:1}
.printonly{display:none}
.sticky{display:none}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
/* projector */
#proj{position:fixed;inset:0;z-index:100;background:#141a26;color:#f4f7fb;display:grid;grid-template-rows:auto 1fr auto;padding:2vh 3vw}
#proj[hidden]{display:none}
.projector{overflow:hidden}
.p-top{display:flex;justify-content:space-between;align-items:center;gap:2vw}.p-top h2{margin:0;font-size:clamp(24px,3.4vw,52px)}
#p-exit{width:44px;height:44px;border-radius:12px;background:transparent;color:#f4f7fb;border:2px solid #2a3242;font-size:24px;cursor:pointer;opacity:.4}#p-exit:hover,#p-exit:focus{opacity:1}
.p-mid{display:flex;gap:3vw;align-items:center;justify-content:center;min-height:0}
#pgrid .grid{width:min(78vh,60vw);max-width:none;background:#141a26;border-color:#2a3242}
#pgrid .grid span{color:#f4f7fb;border-color:#2a3242;font-size:calc(min(78vh,60vw)/var(--n)*.55)}
#pgrid .grid .hit{background:rgba(212,140,196,.22);box-shadow:inset 0 0 0 2px #d48cc4;color:#f4f7fb}
#plist{list-style:none;margin:0;padding:0;font-size:clamp(22px,2.4vw,40px);line-height:1.35;columns:2;gap:2vw;max-height:78vh}
#plist .found{text-decoration:line-through;color:#9aa3b2}
#pbar{height:14px;background:#2a3242;border-radius:7px;overflow:hidden;width:min(78vh,60vw);margin:1vh auto 0}#pbar i{display:block;height:100%;width:100%}#pbar .g{background:#3fa34d}#pbar .a{background:#e0a526}#pbar .r{background:#d9534f}
#pbar[hidden]{display:none}
.p-ctl{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;transition:opacity .3s}
.p-ctl button,.p-ctl select{min-height:48px;padding:0 18px;border-radius:12px;border:2px solid #2a3242;background:#1d2433;color:#f4f7fb;font:700 18px var(--font);cursor:pointer}
.p-ctl button[aria-pressed=true]{border-color:#d48cc4}
.p-ctl #p-next{background:#d48cc4;color:#141a26;border-color:#d48cc4}
#ptime{font-size:22px;font-weight:800;min-width:5ch}
#proj.idle .p-ctl,#proj.idle #p-exit{opacity:0}#proj.idle{cursor:none}
#p-help{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);background:#1d2433;border:2px solid #2a3242;border-radius:12px;padding:12px 20px;font-size:18px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.btn-primary:hover,.cards .card:hover{transform:none}}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.tool{grid-template-columns:1fr}}
@media (max-width:699px){
 .hero{padding:20px 0 14px}.hero h1{font-size:34px}.hero p{font-size:18px}
 .card{padding:20px}.cards{grid-template-columns:1fr}
 textarea#words{height:calc(5 * 1.4em + 24px)}
 details.more>summary{display:flex;align-items:center;min-height:44px;font-weight:700;cursor:pointer;color:var(--accent)}
 .wlist{columns:2}
 .top nav a{padding:8px 8px;font-size:16px}
 .has-puzzle .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;box-shadow:0 -4px 16px rgba(0,0,0,.1);padding:10px 12px;gap:10px}
 .has-puzzle .sticky .btn{flex:1}
 .has-puzzle footer{padding-bottom:90px}
 .pinch{display:block}
 .grid[style*="--n:20"]{min-width:560px}.gridwrap{overflow-x:auto}
}
.pinch{display:none;color:var(--muted);font-size:16px;text-align:center}
.grid[style*="--n:20"]~.pinch{}
@media print{
 @page{size:auto;margin:14mm}
 body{background:#fff!important;font-size:12pt}
 .top,footer,.cookie,.hero,form,.row,.sticky,.noprint,.stat,section.band,#proj,.msg,.skip{display:none!important}
 main,.card,.wrap{box-shadow:none!important;padding:0!important;margin:0!important;max-width:none!important;border-radius:0!important}
 .tool{display:block}
 .printonly{display:block}
 .preview .ptitle,.keypage h2{font-size:24pt;margin:0 0 4mm;text-align:left}
 .nameline{font-size:13pt;margin:0 0 6mm}
 .grid{width:min(180mm,100%);max-width:180mm;border:1pt solid #000;border-radius:0;margin:0}
 .grid span{border-color:#000;border-width:0 .5pt .5pt 0;color:#000!important;font-size:calc(180mm / var(--n) * .5)!important}
 .grid .hit{background:transparent;box-shadow:none}
 .keypage .grid .hit{background:#ddd!important;box-shadow:inset 0 0 0 1.5pt #000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .gridwrap{overflow:visible}.grid[style*="--n:20"]{min-width:0}.pinch{display:none!important}
 .wlist{columns:3;font-size:12pt;max-width:none;margin:6mm 0 0}
 .puzzlepage{break-after:page}
 .keypage{display:block!important}
 #keylist{font-size:11pt;columns:2;padding-left:18px;margin-top:5mm}
 .pfoot{display:block;font-size:8pt;color:#555;margin-top:4mm}
}
.keypage{display:none}.pfoot{display:none}
@media (max-width:699px){
 .top .wrap{min-height:52px;gap:0 12px}.top nav a{padding:6px 8px}.brand{font-size:20px}
 .hero h1{margin-bottom:4px}.hero p{font-size:17px}
 #gen .hint{display:none}#gen .field{margin-bottom:12px}#gen label.l,#gen .lbl{margin-bottom:4px}
 #gen input[type=text]{padding:8px 12px}#gen .chip{padding:0 12px}
 #gen .row{display:none}
 .preview{margin-top:-8px}
}
@media (max-width:699px){
 #gen{display:flex;flex-direction:column}#gen>*{order:3}#gen>.field:first-child{order:4}#gen>details{order:3}#gen>button[type=submit]{order:5}#gen>.msg{order:6}
 .hero{padding:16px 0 12px}
}
@media (max-width:699px){#gen .seg{gap:6px;flex-wrap:nowrap}#gen .chip{padding:0 10px;font-size:16px;flex:1 1 auto;justify-content:center}#gen details .seg{flex-wrap:wrap}textarea#words{height:150px}}
#proj{gap:1.5vh}#pgrid .grid{width:min(66vh,58vw)}#pgrid .grid span{font-size:calc(min(66vh,58vw)/var(--n)*.55)}#pbar{width:min(66vh,58vw)}
.p-ctl select{width:auto}.p-top h2{font-size:clamp(22px,3vw,44px)}
@media (max-width:699px){.p-mid{flex-direction:column}#pgrid .grid{width:92vw}#pgrid .grid span{font-size:calc(92vw/var(--n)*.55)}#pbar{width:92vw}#plist{columns:3;font-size:18px}}
.grid .hit.s,.grid .hit.e{border-radius:999px}
.p-ctl select{-webkit-appearance:none;appearance:none;background:#1d2433;color:#f4f7fb;padding-right:18px}
/* design fix list 1 */
details.more>summary{display:flex;align-items:center;min-height:44px;font-weight:700;cursor:pointer;color:var(--accent)}
.grid{max-width:min(560px,calc(100vh - 220px))}.grid span{font-size:min(clamp(14px,3.2vw,26px),calc((100vh - 220px)/var(--n)*.6))}
.wlist{max-width:min(560px,calc(100vh - 220px))}
.cookie{left:0;right:0;bottom:0;max-width:none;border-radius:0;border:0;border-top:1px solid var(--line);padding:6px 16px;min-height:0;max-height:56px;justify-content:center;box-shadow:0 -2px 10px rgba(0,0,0,.08)}
.cookie p{flex:0 1 auto;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cookie .btn{min-height:40px}
@media (max-width:699px){
 textarea#words{height:136px}
 #gen>.field:has(#words){order:1}#gen>button[type=submit]{order:2;margin-bottom:14px}#gen>.field:has(#size){order:3}#gen>.field:has(#difficulty){order:4}#gen>details{order:5}#gen>.msg{order:6}
 .cookie p{font-size:15px}.cookie p .long{display:none}
}
@media (max-width:699px){.has-puzzle .cookie{bottom:68px}}
@media (min-width:700px){textarea#words{height:150px}#gen .field{margin-bottom:14px}
 .grid,.wlist{max-width:min(560px,calc(100vh - 340px))}.grid span{font-size:min(clamp(14px,3.2vw,26px),calc((100vh - 340px)/var(--n)*.6))}}
@media (min-width:700px){
 .hero{padding:22px 0 14px}.hero h1{font-size:44px;margin-bottom:4px}.hero p{font-size:18px}
 .tool{padding:24px 28px}textarea#words{height:122px}#wh{display:none}#gen .field{margin-bottom:10px}
 #gen>.field:first-child{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}#gen>.field:first-child label{margin:0}
 #gen input[type=text]{padding:7px 12px}
 #gen .hint{font-size:16px;margin-top:2px}
}
/* mazes */
.mazebox{max-width:min(560px,calc(100vh - 300px));margin:0 auto}.mazebox svg{display:block;width:100%;height:auto;background:#fff;border-radius:12px}
.mini-maze svg{display:block;width:100%;height:auto;max-height:260px}
.mproj{position:fixed;inset:0;z-index:100;background:#141a26;color:#f4f7fb;display:grid;grid-template-rows:auto 1fr auto;padding:2vh 3vw;gap:1.5vh}
.mproj[hidden]{display:none}
.mproj .mazebox{max-width:none;width:min(78vh,90vw)}.mproj .mazebox svg{background:#141a26;max-height:78vh}
.p-x{width:44px;height:44px;border-radius:12px;background:transparent;color:#f4f7fb;border:2px solid #2a3242;font-size:24px;cursor:pointer;opacity:.5}
.mproj .p-ctl button{min-height:48px;padding:0 18px;border-radius:12px;border:2px solid #2a3242;background:#1d2433;color:#f4f7fb;font:700 18px var(--font);cursor:pointer}
.mproj #mp-sol{background:#d48cc4;color:#141a26;border-color:#d48cc4}
@media print{.mazebox{max-width:180mm;margin:0}.mazebox svg{max-height:200mm;width:auto;max-width:100%;border-radius:0}.keypage .sol{stroke:#000;stroke-dasharray:none;stroke-width:4;opacity:1}#mproj{display:none!important}}
@media print{.puzzlepage .sol{display:none}}
/* design fix list 2 */
.ns{display:none}
#mgen>button.mnew-m{display:none}
@media (max-width:699px){
 .nl{display:none}.ns{display:inline}
 .top nav{flex-wrap:nowrap;overflow-x:auto;width:100%;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);scrollbar-width:none}.top nav::-webkit-scrollbar{display:none}.top nav a{white-space:nowrap}
 #mgen{display:flex;flex-direction:column}#mgen>*{order:3}#mgen>button[type=submit]:not(.mnew-m){display:none}#mgen>button.mnew-m{display:flex;order:4;margin-bottom:12px}#mgen>details{order:5}#mgen>.row{display:none}
}
.tog.switch input{-webkit-appearance:none;appearance:none;width:48px;height:28px;border-radius:999px;background:#cfc8d2;position:relative;cursor:pointer;transition:.18s ease;flex:none;margin:0}
.tog.switch input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s ease}
.tog.switch input:checked{background:var(--accent)}.tog.switch input:checked::after{left:23px}
