:root{color:#2d2d2d;background:#fdfbf7;font-family:Patrick Hand,Comic Sans MS,cursive;font-synthesis:none;text-rendering:optimizeLegibility;--paper: #fdfbf7;--ink: #2d2d2d;--muted: #e5e0d8;--red: #ff4d4d;--blue: #2d5da1;--yellow: #fff9c4;--white: #ffffff;--green: #2f8f52;--amber: #d98200;--violet: #7454bf;--rose: #d44766;--active: #2d2d2d;--error: #ff4d4d;--shadow: 5px 5px 0 0 var(--ink);--shadow-lg: 8px 8px 0 0 var(--ink);--shadow-soft: 3px 3px 0 0 rgba(45, 45, 45, .16);--wobbly: 255px 18px 225px 16px / 18px 225px 18px 255px;--wobbly-md: 32px 18px 28px 22px / 18px 30px 16px 28px;--wobbly-card: 24px 42px 20px 36px / 30px 22px 40px 18px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px;background-color:var(--paper);background-image:radial-gradient(#e5e0d8 1.1px,transparent 1.1px),linear-gradient(90deg,rgba(45,45,45,.06) 1px,transparent 1px);background-position:0 0,10px 0;background-size:24px 24px,96px 96px}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px dashed var(--blue);outline-offset:5px}.site-shell{position:relative;width:min(1120px,calc(100vw - 32px));margin:0 auto;padding:18px 0 64px}.paper-doodles{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}.doodle{position:absolute;color:#2d2d2d52;font-family:Kalam,cursive;font-weight:700}.doodle-star{top:98px;right:7vw;color:var(--red);font-size:2.8rem;animation:doodleBounce 3.2s ease-in-out infinite}.doodle-note{top:610px;left:4vw;transform:rotate(-9deg);font-size:1.15rem}.doodle-arrow{position:absolute;top:185px;right:16vw;width:180px;height:92px;transform:rotate(5deg)}.doodle-arrow path{fill:none;stroke:var(--ink);stroke-dasharray:8 7;stroke-linecap:round;stroke-linejoin:round;stroke-width:5}.topbar,.hero-band,.play-layout,.rules-strip,.seo-section{position:relative;z-index:1}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;margin-bottom:24px}.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;transform:rotate(-1deg)}.brand-mark{display:grid;place-items:center;width:51px;height:51px;padding:0;border:0;background:transparent;overflow:visible}.brand-logo{display:block;width:100%;height:100%;object-fit:cover}.brand strong,.brand small{display:block;line-height:1}.brand strong{font-family:Kalam,cursive;font-size:1.2rem;font-weight:700}.brand small{margin-top:5px;color:#2d2d2dbf;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase}.topbar-actions{display:inline-flex;align-items:center;gap:10px}.stat-pill,.icon-button,.metric,.control-button,.next-button{border:3px solid var(--ink);border-radius:var(--wobbly);background:var(--white);color:var(--ink);box-shadow:var(--shadow);transition:background .1s ease,color .1s ease,box-shadow .1s ease,transform .1s ease}.stat-pill,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:1.08rem}.stat-pill{min-width:98px;padding:0 14px;transform:rotate(1deg)}.icon-button{width:46px;padding:0;transform:rotate(-1deg)}.icon-button:hover,.stat-pill:hover,.control-button:hover,.next-button:hover{background:var(--red);color:var(--white);box-shadow:2px 2px 0 0 var(--ink);transform:translate(3px,3px) rotate(1deg)}.icon-button:active,.control-button:active,.next-button:active{box-shadow:none;transform:translate(5px,5px) rotate(0)}.hero-band{display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:end;gap:28px;margin-bottom:26px;padding:34px 34px 30px;border:4px solid var(--ink);border-radius:26px 44px 24px 38px/34px 22px 40px 18px;background:var(--yellow);box-shadow:var(--shadow-lg);transform:rotate(-.45deg)}.hero-band:after{content:"";position:absolute;right:24px;bottom:20px;width:118px;height:22px;border-bottom:4px dashed var(--red);border-radius:50%;transform:rotate(-4deg)}.tape{position:absolute;z-index:4;width:122px;height:28px;border:2px dashed rgba(45,45,45,.22);background:#e5e0d8b8;pointer-events:none}.tape-hero{top:-15px;left:50%;transform:translate(-50%) rotate(2deg)}.hero-copy{max-width:760px}.eyebrow,.kicker{display:inline-block;margin:0 0 10px;padding:3px 11px;border:2px solid var(--ink);border-radius:18px 8px 20px 10px/10px 20px 8px 18px;background:var(--white);color:var(--blue);font-family:Kalam,cursive;font-size:.95rem;font-weight:700;letter-spacing:0;transform:rotate(-1deg)}.hero-copy h1{max-width:780px;margin:0;color:var(--ink);font-family:Kalam,cursive;font-size:clamp(3rem,6.2vw,5.8rem);font-weight:700;letter-spacing:0;line-height:.86}.hero-copy h1 span{display:inline-block;color:var(--red);transform:rotate(2deg)}.hero-copy p:last-child{max-width:52rem;margin:18px 0 0;color:var(--ink);font-size:1.42rem;line-height:1.24}.hero-metrics{display:grid;gap:14px;min-width:0}.metric{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:56px;padding:0 15px;font-size:1.12rem}.metric:nth-child(1){transform:rotate(1.8deg)}.metric:nth-child(2){background:var(--white);transform:rotate(-1deg)}.metric svg,.control-button svg,.next-button svg,.stat-pill svg,.icon-button svg{stroke-width:3}.metric strong{font-family:Kalam,cursive;font-size:1.35rem}.play-layout{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);grid-template-areas:"panel board";align-items:stretch;justify-items:stretch;gap:24px}.puzzle-panel,.board-stage,.rules-strip,.answer-box,.seo-grid article,.faq-section{border:3px solid var(--ink);background:var(--white);box-shadow:var(--shadow)}.puzzle-panel{position:relative;grid-area:panel;display:flex;flex-direction:column;gap:16px;padding:22px 18px 18px;border-radius:var(--wobbly-card);transform:rotate(.7deg)}.tack{position:absolute;top:-12px;left:50%;z-index:5;width:24px;height:24px;border:3px solid var(--ink);border-radius:50%;background:var(--red);box-shadow:2px 2px 0 var(--ink);transform:translate(-50%)}.panel-heading h2{margin:0;color:var(--ink);font-family:Kalam,cursive;font-size:2.15rem;font-weight:700;line-height:.98}.panel-heading p:last-child{margin:10px 0 0;color:#2d2d2dd1;font-size:1.18rem;line-height:1.25}.current-word{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;min-height:54px;padding:9px 12px;border:3px dashed var(--ink);border-radius:20px 14px 24px 10px/10px 22px 12px 20px;background:var(--paper)}.current-label{color:var(--blue);font-family:Kalam,cursive;font-size:.98rem;font-weight:700}.current-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}.empty-path{color:#2d2d2d8f;font-size:1.08rem}.letter-chip,.slot-cell,.slot-length{display:grid;place-items:center;border:2px solid var(--ink);background:color-mix(in srgb,var(--path-color) 16%,#ffffff);color:var(--ink);font-family:Kalam,cursive;font-weight:700;box-shadow:2px 2px 0 var(--ink)}.letter-chip{width:29px;height:29px;border-radius:9px 14px 8px 12px/12px 8px 14px 9px;font-size:1rem;transform:rotate(-2deg)}.slot-stack{display:grid;gap:10px}.slot-row{display:grid;grid-template-columns:32px minmax(0,1fr) 50px;align-items:center;gap:9px}.slot-length{width:32px;height:32px;border-radius:12px 8px 14px 9px/9px 13px 8px 12px;background:var(--yellow);font-size:1rem}.slot-cells{display:flex;flex-wrap:wrap;gap:5px;min-width:0}.slot-cell{width:29px;height:29px;border-radius:8px 13px 9px 12px/12px 8px 13px 9px;font-size:.96rem}.slot-cell.is-empty{border-style:dashed;border-color:#2d2d2d47;background:var(--muted);color:transparent;box-shadow:none}.slot-status{justify-self:end;width:45px;color:#2d2d2da3;font-family:Kalam,cursive;font-size:.82rem;font-weight:700;text-align:right;text-transform:lowercase}.slot-status.is-complete{color:var(--blue)}.message-panel{min-height:56px;padding:12px 14px;border:3px solid var(--ink);border-radius:18px 12px 22px 10px/11px 24px 12px 20px;background:var(--paper);box-shadow:var(--shadow-soft);transform:rotate(-.6deg)}.message-panel p{margin:0;color:var(--ink);font-size:1.16rem;line-height:1.2}.message-success,.message-solved,.message-hint{background:color-mix(in srgb,var(--blue) 12%,#ffffff)}.message-error,.message-warning{background:color-mix(in srgb,var(--red) 16%,#ffffff)}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.control-button,.next-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 14px;font-size:1.18rem}.control-button:nth-child(2),.control-button:nth-child(3){background:var(--muted)}.next-button{width:100%;margin-top:auto;background:var(--blue);color:var(--white);font-family:Kalam,cursive;font-size:1.28rem}.next-button:hover{background:var(--red)}.board-stage{position:relative;grid-area:board;display:grid;place-items:center;min-height:610px;padding:24px;border-radius:38px 22px 34px 26px/24px 40px 22px 36px;background:#fffefb;transform:rotate(-.35deg)}.tape-board{top:-16px;right:18%;transform:rotate(-3deg)}.board{--cell-size: clamp(76px, 7.3vw, 104px);position:relative;display:grid;grid-template-columns:repeat(5,var(--cell-size));grid-template-rows:repeat(5,var(--cell-size));width:calc(var(--cell-size) * 5 + 2px);height:calc(var(--cell-size) * 5 + 2px);overflow:hidden;border:4px solid var(--ink);border-radius:26px 16px 30px 18px/18px 32px 14px 28px;background:linear-gradient(rgba(45,45,45,.18) 2px,transparent 2px) 0 0 / var(--cell-size) var(--cell-size),linear-gradient(90deg,rgba(45,45,45,.18) 2px,transparent 2px) 0 0 / var(--cell-size) var(--cell-size),radial-gradient(rgba(229,224,216,.9) 1px,transparent 1px) 0 0 / 18px 18px,var(--white);box-shadow:var(--shadow-lg);touch-action:none}.board.has-error{animation:boardShake .26s ease}.tile{position:relative;z-index:2;display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--ink);font-family:Kalam,cursive;font-size:clamp(1.55rem,3vw,2.5rem);font-weight:700;user-select:none;-webkit-user-select:none}.tile-core{position:relative;z-index:5;display:grid;place-items:center;width:min(64%,68px);aspect-ratio:1;border:3px solid transparent;border-radius:18px 10px 16px 12px/11px 17px 10px 18px;background:#ffffffb3;transition:background .1s ease,color .1s ease,border-color .1s ease,box-shadow .1s ease,transform .1s ease}.tile:hover .tile-core{border-color:var(--ink);background:var(--yellow);box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg)}.tile.has-path{background:color-mix(in srgb,var(--path-color) 12%,transparent)}.tile.has-path .tile-core{border-color:var(--ink);background:var(--path-color);color:var(--white);box-shadow:3px 3px 0 var(--ink)}.tile.is-error .tile-core{background:var(--red)}.tile.is-hinted .tile-core{border-color:var(--blue);box-shadow:3px 3px 0 var(--ink),0 0 0 7px #2d5da138}.board.is-hinting .tile:not(.is-hinted):not(.has-path) .tile-core{opacity:.42}.path-segment{position:absolute;z-index:3;display:block;background:var(--path-color);border:2px solid var(--ink);pointer-events:none}.segment-up,.segment-down{left:50%;width:20px;height:calc(50% + 3px);transform:translate(-50%) rotate(1deg)}.segment-up{top:-2px}.segment-down{bottom:-2px}.segment-left,.segment-right{top:50%;width:calc(50% + 3px);height:20px;transform:translateY(-50%) rotate(-1deg)}.segment-left{left:-2px}.segment-right{right:-2px}.path-arrow{position:absolute;z-index:7;display:grid;place-items:center;width:23px;height:23px;border:2px solid var(--ink);border-radius:50%;background:var(--white);color:var(--ink);font-family:Kalam,cursive;font-size:.85rem;font-weight:700;line-height:1;pointer-events:none}.arrow-right{right:8px;top:50%;transform:translateY(-50%) rotate(5deg)}.arrow-left{left:8px;top:50%;transform:translateY(-50%) rotate(-5deg)}.arrow-up{top:8px;left:50%;transform:translate(-50%) rotate(-4deg)}.arrow-down{bottom:8px;left:50%;transform:translate(-50%) rotate(4deg)}.completion-mark{position:absolute;top:8px;right:8px;z-index:8;width:13px;height:13px;border:2px solid var(--ink);border-radius:50%;background:var(--white);box-shadow:2px 2px 0 var(--ink)}.obstacle{z-index:10;margin:-1px;border:3px solid var(--ink);border-radius:18px 8px 20px 10px/10px 22px 8px 18px;background:repeating-linear-gradient(-45deg,rgba(45,45,45,.32) 0,rgba(45,45,45,.32) 4px,transparent 4px,transparent 10px),var(--muted)}.path-blue{--path-color: var(--blue)}.path-green{--path-color: var(--green)}.path-amber{--path-color: var(--amber)}.path-violet{--path-color: var(--violet)}.path-rose{--path-color: var(--rose)}.path-active{--path-color: var(--active)}.path-error{--path-color: var(--error)}.path-none,.path-empty{--path-color: var(--muted)}.rules-strip{position:relative;margin-top:26px;border-radius:28px 18px 34px 16px/16px 34px 18px 28px;background:var(--white);transform:rotate(.4deg)}.tape-rules{top:-14px;left:28px;transform:rotate(5deg)}.rules-strip summary{min-height:58px;padding:0 22px;color:var(--ink);cursor:pointer;font-family:Kalam,cursive;font-size:1.32rem;font-weight:700;line-height:58px}.rules-strip div{display:grid;gap:10px;padding:0 22px 22px}.rules-strip p{margin:0;color:var(--ink);font-size:1.15rem;line-height:1.32}.seo-section{margin-top:34px;padding-bottom:36px}.answer-box{padding:26px;border-radius:36px 20px 30px 22px/20px 34px 18px 32px;background:var(--yellow);transform:rotate(-.5deg)}.answer-box h2,.seo-grid h2,.faq-section h2{margin:0 0 12px;color:var(--ink);font-family:Kalam,cursive;font-size:1.72rem;font-weight:700;letter-spacing:0;line-height:1.02}.answer-box p,.seo-grid p,.faq-section p{margin:0;color:var(--ink);font-size:1.16rem;line-height:1.36}.seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:20px}.seo-grid article{padding:22px;border-radius:var(--wobbly-card);transition:box-shadow .1s ease,transform .1s ease}.seo-grid article:nth-child(1){transform:rotate(.8deg)}.seo-grid article:nth-child(2){background:var(--paper);transform:rotate(-.9deg)}.seo-grid article:nth-child(3){transform:rotate(1.1deg)}.seo-grid article:hover{box-shadow:7px 7px 0 0 var(--ink);transform:rotate(-1deg) translateY(-2px)}.faq-section{margin-top:24px;padding:22px;border-radius:24px 42px 20px 36px/32px 20px 38px 18px;background:var(--white)}.faq-section details{border-top:3px dashed var(--ink)}.faq-section summary{min-height:52px;padding:14px 0;color:var(--ink);cursor:pointer;font-family:Kalam,cursive;font-size:1.22rem;font-weight:700;line-height:1.18}.faq-section p{padding-bottom:16px}@keyframes boardShake{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-6px) rotate(-1deg)}75%{transform:translate(6px) rotate(1deg)}}@keyframes doodleBounce{0%,to{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(4deg)}}@media(max-width:980px){.hero-band,.play-layout{grid-template-columns:1fr}.play-layout{grid-template-areas:"board" "panel";justify-items:center;gap:28px}.puzzle-panel{width:min(430px,100%)}.hero-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.board-stage{min-height:auto;padding:22px}.board{--cell-size: min(17vw, 96px)}.seo-grid{grid-template-columns:1fr}.doodle-arrow{display:none}}@media(max-width:620px){.site-shell{width:min(100% - 16px,560px);padding-top:6px}.topbar{min-height:42px;margin-bottom:8px}.brand{gap:10px}.brand-mark{width:34px;height:34px}.brand strong{font-size:1rem}.brand small{display:none}.stat-pill{min-width:74px;min-height:36px;padding:0 10px;border-width:2px;box-shadow:3px 3px 0 0 var(--ink);font-size:.96rem}.icon-button{width:38px;min-height:36px;border-width:2px;box-shadow:3px 3px 0 0 var(--ink)}.hero-band{gap:6px;margin-bottom:10px;padding:10px 13px;border-width:3px;box-shadow:4px 4px 0 0 var(--ink);transform:rotate(-.25deg)}.hero-band:after,.tape-hero{display:none}.eyebrow{margin-bottom:3px;padding:1px 8px;font-size:.72rem}.hero-copy h1{font-size:clamp(1.55rem,8.2vw,2.25rem);line-height:.88}.hero-copy p:last-child{display:none}.hero-metrics{display:none}.play-layout{gap:9px;align-items:start}.puzzle-panel{width:min(390px,100%);gap:6px;padding:13px 10px 10px;border-width:3px;box-shadow:4px 4px 0 0 var(--ink);transform:rotate(.25deg)}.tack{top:-10px;width:20px;height:20px}.panel-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:6px;row-gap:2px}.panel-heading .kicker{grid-column:auto;grid-row:1;width:fit-content;margin-bottom:0;padding:1px 7px;font-size:.7rem}.panel-heading h2{grid-column:1 / -1;margin:0;font-size:1.28rem;line-height:.96}.panel-heading p:last-child{grid-column:2;grid-row:1;justify-self:end;margin:0;color:#2d2d2db8;font-size:.76rem;line-height:1.05;text-align:right;white-space:nowrap}.current-word{min-height:32px;grid-template-columns:auto minmax(0,1fr);gap:6px;padding:3px 7px;border-width:2px}.current-label{font-size:.82rem}.current-chips{flex-wrap:nowrap;gap:4px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none}.current-chips::-webkit-scrollbar{display:none}.empty-path{font-size:.92rem}.letter-chip{width:20px;height:20px;border-width:2px;font-size:.7rem;box-shadow:1px 1px 0 var(--ink)}.slot-stack{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 8px}.slot-row{grid-template-columns:22px minmax(0,1fr);gap:5px;min-height:20px}.slot-length{width:21px;height:21px;border-width:2px;font-size:.74rem;box-shadow:1px 1px 0 var(--ink)}.slot-cells{gap:3px}.slot-cell{width:18px;height:18px;border-width:2px;font-size:.64rem;box-shadow:1px 1px 0 var(--ink)}.slot-cell.is-empty{box-shadow:none}.slot-status{display:none}.message-panel{min-height:30px;padding:5px 8px;border-width:2px;box-shadow:2px 2px #2d2d2d29}.message-panel p{overflow:hidden;font-size:.88rem;line-height:1.08;text-overflow:ellipsis;white-space:nowrap}.control-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.control-button,.next-button{min-height:34px;border-width:2px;box-shadow:3px 3px 0 0 var(--ink);gap:4px;padding:0 5px;font-size:.82rem}.control-button svg,.next-button svg{width:13px;height:13px}.next-button{min-height:34px;font-size:.96rem}.board-stage{width:min(390px,100%);padding:7px;border-width:3px;box-shadow:4px 4px 0 0 var(--ink);transform:rotate(-.18deg)}.tape-board{top:-12px;right:25%;width:100px;height:22px}.board{--mobile-cell-by-width: calc((100vw - 60px)/5) ;--mobile-cell-by-height: calc((100svh - 382px)/5) ;--cell-size: clamp(40px, min(var(--mobile-cell-by-width), var(--mobile-cell-by-height)), 54px);border-width:3px;box-shadow:4px 4px 0 0 var(--ink)}.tile{font-size:clamp(1.1rem,6vw,1.65rem)}.tile-core{width:min(60%,42px);border-width:2px;border-radius:12px 8px 13px 9px/9px 13px 8px 12px}.tile.has-path .tile-core,.tile:hover .tile-core{box-shadow:2px 2px 0 var(--ink)}.completion-mark{top:4px;right:4px;width:9px;height:9px;border-width:1.5px}.obstacle{border-width:2px}.segment-up,.segment-down{width:11px;border-width:1.5px}.segment-left,.segment-right{height:11px;border-width:1.5px}.path-arrow{width:14px;height:14px;border-width:1.5px;font-size:.55rem}.arrow-right{right:3px}.arrow-left{left:3px}.arrow-up{top:3px}.arrow-down{bottom:3px}.doodle-star,.doodle-note{display:none}}@media(max-width:380px){.site-shell{width:min(100% - 14px,420px)}.brand strong{font-size:1.02rem}.stat-pill{min-width:78px;padding:0 8px}.hero-band{padding:22px 14px 20px}.slot-cells{gap:3px}.slot-cell{width:23px;height:23px;font-size:.78rem}}