:root{color-scheme:light;--paper:#f6eddc;--cream:#fff7e7;--pine:#153c33;--dark:#142e27;--rust:#a43424;--peach:#f6ad8f;--gold:#f4c85d;--line:#c7bda7;--muted:#514b40;--serif:Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--dark);font:16px/1.55 var(--sans)}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,figure{margin:0}
.shell{width:min(1240px,calc(100% - 76px));margin-inline:auto}
.skip{position:absolute;left:12px;top:-100px;padding:10px;background:var(--gold);z-index:5}
.skip:focus{top:8px}
.header{min-height:83px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;border-bottom:1px solid var(--line)}
.brand{justify-self:start;border:0;background:none;padding:0}
.brand img{width:192px;height:auto}
.tabs{display:flex;gap:4px;border:1px solid var(--line);border-radius:30px;background:var(--cream);padding:4px}
.tab{border:0;background:transparent;border-radius:30px;padding:7px 16px;font-size:13px;font-weight:700}
.tab[aria-selected="true"]{background:var(--pine);color:var(--cream)}
.tab[aria-selected="false"]:hover{background:#f2e2c8}
.header-note{justify-self:end;font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--rust)}
.panel{padding-top:26px}
.hero{position:relative;display:grid;grid-template-columns:1.07fr .93fr;min-height:512px;background:var(--pine);color:var(--cream);border-radius:20px;overflow:hidden}
.hero-stage{min-height:100%;position:relative;background:#1b2321;overflow:hidden}
.hero-stage>img{width:100%;height:100%;position:absolute;inset:0}
.hero-stage .lead-art{width:auto;max-width:100%;height:100%;inset:0 auto auto 50%;transform:translateX(-50%);object-fit:contain;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hero-stage .lead-backdrop{object-fit:cover;filter:blur(21px);transform:scale(1.12);opacity:.61}
.stage-caption{position:absolute;inset:auto 0 0;color:white;background:linear-gradient(transparent,#0b1512d9);padding:42px 20px 15px;font-size:13px;font-weight:800;letter-spacing:.04em}
.partner{position:absolute;top:16px;right:16px;width:91px;height:91px;border:4px solid var(--gold);border-radius:50%;overflow:hidden;box-shadow:0 3px 0 #1117}
.partner img{width:100%;height:100%;object-fit:cover;object-position:50% 43%}
.hero-copy{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(27px,5vw,65px);overflow:hidden}
.hero-copy::before{content:"";position:absolute;inset:12px;border:1px dashed #e7cf8d79;border-radius:11px;pointer-events:none}
.yarn-doodle{position:absolute;right:-20px;bottom:-35px;width:min(55%,220px);color:#e6b47e;opacity:.31;z-index:-1}
.kicker{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.hero .kicker{color:var(--gold);margin-bottom:12px}
.hero h1{font:700 clamp(48px,6.55vw,96px)/.88 var(--serif);letter-spacing:-.071em;margin:0 0 19px}
.hero h1 em{color:var(--peach)}
.hero-copy>p:not(.kicker){max-width:350px;color:#f9ecd7;font-size:16px;margin-bottom:19px}
.actions{display:flex;flex-wrap:wrap;gap:9px}
.button{border:1px solid transparent;border-radius:8px;background:var(--rust);color:white;font-size:13px;font-weight:800;padding:10px 13px}
.button:hover{background:#822717}
.button.warm{background:var(--gold);color:var(--dark)}
.button.warm:hover{background:#ffe19a}
.button.light{background:transparent;color:var(--cream);border-color:#f3e4c1a8}
.button.light:hover{background:#ffffff19}
.hero .button:focus-visible{outline-color:var(--gold)}
.index{color:var(--rust);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.subhead{font:700 clamp(34px,5vw,61px)/.99 var(--serif);letter-spacing:-.062em}
.workbench{display:grid;grid-template-columns:.72fr 1fr 1fr;align-items:center;gap:16px;padding:23px 0 27px}
.workbench h2{font:700 clamp(22px,3vw,36px)/1 var(--serif);letter-spacing:-.052em;margin:3px 0 5px}
.workbench p{font-size:13px;color:var(--muted)}
.workbench .index{color:var(--rust)}
.tile{display:grid;grid-template-columns:108px 1fr;align-items:stretch;text-align:left;overflow:hidden;min-height:102px;border:1px solid var(--line);border-radius:10px;background:var(--cream);padding:0}
.tile:hover{border-color:var(--rust)}
.tile img{width:108px;height:100%;object-fit:cover}
.tile .icon{display:grid;place-items:center;background:var(--peach);color:var(--pine)}
.tile svg{width:72px}
.tile-label{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:10px 12px;font-size:13px;line-height:1.25}
.tile-label strong{font-size:17px;letter-spacing:-.04em}
.tile-label small{color:var(--muted)}
.page-intro{padding:13px 0 23px;max-width:660px}
.page-intro .index{margin-bottom:5px}
.page-intro p:last-child{margin-top:8px;color:var(--muted)}
.makes-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:15px}
.make-card{overflow:hidden;border:1px solid var(--line);border-radius:13px;background:var(--cream)}
.make-card img{width:100%;height:clamp(210px,30vw,390px);object-fit:cover}
.make-card figcaption{padding:14px 15px 16px}
.make-card h2,.nail-note h2{font:700 28px/1 var(--serif);letter-spacing:-.045em;margin-bottom:4px}
.make-card p,.nail-note p{font-size:14px;color:var(--muted)}
.nail-note{display:flex;align-items:center;gap:15px;margin:15px 0 25px;padding:14px;border:1px dashed #9f6c58;background:#f7ddcd;border-radius:10px}
.nail-note svg{width:76px;flex-shrink:0}
.play-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;padding-bottom:25px}
.game,.game-notes{border:1px solid var(--line);border-radius:13px;padding:clamp(15px,3vw,28px);background:var(--cream)}
.game h2,.game-notes h2{font:700 32px/1 var(--serif);letter-spacing:-.045em;margin-bottom:7px}
.game-notes{background:#e0e8d9}
.game-notes p{margin-top:12px}
.game-notes p span{display:block;font-size:14px;color:var(--muted)}
.hats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0}
.hat{border:1px solid var(--line);border-radius:8px;padding:8px 3px;background:var(--paper);display:grid;justify-items:center;font-weight:750;font-size:13px}
.hat:hover,.hat[data-right="true"]{background:var(--gold);border-color:var(--pine)}
.hat svg{height:52px;width:61px}
.game-foot{display:flex;justify-content:space-between;align-items:center;gap:9px;min-height:40px;font-size:14px}
.footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 0 18px;font-size:12px;color:var(--muted)}
.footer .kicker{color:var(--rust);font-size:9px}
@media(max-width:900px){.shell{width:calc(100% - 44px)}.hero{min-height:425px}.hero-copy{padding:30px}.workbench{grid-template-columns:.7fr 1fr 1fr;gap:9px}.tile{grid-template-columns:70px 1fr}.tile img{width:70px}.tile svg{width:55px}}
@media(max-width:650px){.shell{width:calc(100% - 28px)}.header{grid-template-columns:1fr auto;gap:5px;min-height:67px}.header-note{display:none}.brand img{width:clamp(118px,37vw,159px)}.tab{padding:5px 9px;font-size:12px}.tabs{gap:1px;padding:3px}.panel{padding-top:13px}.hero{grid-template-columns:1fr;min-height:0;border-radius:14px}.hero-stage{min-height:0;aspect-ratio:1.23}.hero-copy{padding:25px 20px 26px}.hero-copy::before{inset:7px}.hero h1{font-size:clamp(46px,10.5vw,66px);margin-bottom:11px}.hero .kicker{margin-bottom:6px}.hero-copy>p:not(.kicker){font-size:14px;margin-bottom:13px}.partner{width:69px;height:69px;top:10px;right:10px}.stage-caption{padding:30px 12px 8px}.workbench{grid-template-columns:1fr 1fr;padding:16px 0 17px}.workbench>div:first-child{grid-column:1/-1}.tile{grid-template-columns:45px 1fr;min-height:78px}.tile img{width:45px}.tile svg{width:40px}.tile-label{padding:6px}.tile-label strong{font-size:14px}.makes-grid,.play-wrap{grid-template-columns:1fr}.make-card img{height:230px}.footer{font-size:11px}}
@media(max-width:350px){.workbench{grid-template-columns:1fr}.tile{grid-template-columns:58px 1fr}.tile img{width:58px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.pattern-link{display:inline-block;margin-top:7px;color:var(--rust);font-weight:750;font-size:14px;text-underline-offset:3px}
.character-patterns{margin-top:22px}
.character-patterns h2,.small-pattern h3{font:700 26px/1.15 var(--serif);margin-bottom:8px}
.small-pattern{display:grid;grid-template-columns:94px 1fr;gap:12px;align-items:center;background:var(--cream);border:1px solid var(--line);padding:9px;border-radius:12px}
.small-pattern img{width:94px;height:112px;object-fit:cover;border-radius:6px}
.small-pattern h3{margin:0 0 4px}
.small-pattern p{font-size:14px;color:var(--muted)}
.pattern{max-width:820px;margin:0 auto;padding:22px 0 30px}
.pattern-intro{display:grid;grid-template-columns:1.3fr 1fr;align-items:start;gap:19px;margin:16px 0 20px}
.pattern-intro img{width:100%;max-height:220px;object-fit:cover;border-radius:12px}
.pattern .subhead{margin:8px 0 12px}
.pattern section{margin-top:22px}
.pattern h2{font:700 29px/1.1 var(--serif);margin-bottom:8px}
.pattern ul,.pattern ol{padding-left:23px;margin:7px 0}
.pattern li{padding:3px 0}
.pattern .note{margin:10px 0;padding:9px 12px;background:#f4e1c7;border-left:3px solid var(--rust)}
.pattern .pattern-actions{display:flex;flex-wrap:wrap;gap:15px;align-items:center}
.pattern .pattern-actions .pattern-link{margin:0}
@media(max-width:570px){.pattern-intro{grid-template-columns:1fr}.pattern-intro img{max-height:200px}}
@media print{body{color:black;background:white;font-size:11pt}.shell{width:100%}.pattern{padding:0;max-width:none}.pattern-actions,.footer,.pattern-intro img{display:none!important}.pattern-intro{display:block;margin:0}.pattern .subhead{font-size:29pt}.pattern h2{break-after:avoid}.pattern li{break-inside:avoid}}