.patterns-app{--p-ink: #24211d;--p-paper: #f6f0e4;--p-cream: #ebe1cf;--p-orange: #ed6842;--p-yellow: #f2c71b;min-height:100vh;overflow:hidden;color:var(--p-ink);background:var(--p-paper);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.patterns-app *,.patterns-app *:before,.patterns-app *:after{box-sizing:border-box}.patterns-app button{font-family:inherit}.patterns-header,.patterns-hero,.pattern-workbench,.set-guide,.patterns-app footer{max-width:1480px;margin-inline:auto}.patterns-header{display:flex;align-items:center;justify-content:space-between;padding:24px 36px;border-bottom:1px solid rgba(36,33,29,.18)}.patterns-header p{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em}.patterns-mark{display:inline-flex;align-items:center;gap:11px;color:inherit;text-decoration:none;font-size:17px}.patterns-mark span{display:grid;width:34px;height:34px;place-items:center;border:1.5px solid var(--p-ink);border-radius:50%;background:var(--p-yellow)}.patterns-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);align-items:end;gap:60px;padding:72px 36px 58px}.patterns-kicker{margin:0 0 16px;color:#d94d2d;font-size:11px;font-weight:800;letter-spacing:.19em}.patterns-hero h1{margin:0;font-family:ui-rounded,Arial Rounded MT Bold,Trebuchet MS,sans-serif;font-size:clamp(42px,6.2vw,94px);line-height:.98;letter-spacing:-.055em}.patterns-hero h1 em{color:var(--p-orange);font-style:normal}.patterns-hero>p{max-width:480px;margin:0 0 6px;font-size:clamp(16px,1.5vw,21px);line-height:1.55}.pattern-workbench{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(360px,.8fr);border-block:1px solid rgba(36,33,29,.22)}.pattern-stage{position:relative;display:grid;min-height:720px;border-right:1px solid rgba(36,33,29,.22);background:#ded5c5}.stage-toolbar{position:absolute;z-index:2;top:24px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.stage-toolbar>*{pointer-events:auto}.family{padding:7px 11px;border:1px solid var(--p-ink);border-radius:999px;background:var(--p-paper);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.family-shape{background:var(--p-yellow)}.family-mosaic{background:#98c69c}.color-switch{display:flex;align-items:center;gap:9px;padding:7px 11px 7px 8px;border:1px solid var(--p-ink);border-radius:999px;background:var(--p-paper);cursor:pointer;font-size:12px}.color-switch input{position:absolute;opacity:0;pointer-events:none}.color-switch>span{position:relative;width:35px;height:20px;border-radius:999px;background:#aaa192;transition:background .2s}.color-switch i{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}.color-switch input:checked+span{background:var(--p-orange)}.color-switch input:checked+span i{transform:translate(15px)}.color-switch input:focus-visible+span{outline:3px solid rgba(237,104,66,.35)}.board-wrap{display:grid;place-items:center;min-height:580px;padding:82px 54px 122px}.pattern-board{width:100%;max-width:720px;max-height:500px;overflow:visible;filter:drop-shadow(0 12px 10px rgba(47,39,28,.12))}.pattern-board path{transition:fill .24s ease}.stage-caption{position:absolute;right:28px;bottom:24px;left:28px;display:flex;align-items:end;justify-content:space-between;gap:24px}.stage-caption span{color:#5f584e;font-size:11px;font-weight:800;letter-spacing:.12em}.stage-caption h2{margin:4px 0 2px;font:700 clamp(25px,3vw,42px)/1 ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",sans-serif;letter-spacing:-.04em}.stage-caption p{margin:9px 0 0;color:#5f584e;font-size:13px}.stage-caption dl{display:flex;gap:8px;margin:0}.stage-caption dl div{min-width:84px;padding:10px 12px;border:1px solid rgba(36,33,29,.2);border-radius:10px;background:#f6f0e494}.stage-caption dt{color:#665f55;font-size:10px;font-weight:700;text-transform:uppercase}.stage-caption dd{margin:3px 0 0;font-size:16px;font-weight:800}.pattern-arrows{position:absolute;top:50%;right:22px;display:grid;gap:8px;transform:translateY(-50%)}.pattern-arrows button{width:42px;height:42px;padding:0;border:1px solid var(--p-ink);border-radius:50%;background:var(--p-paper);color:var(--p-ink);font-size:20px}.pattern-arrows button:hover{background:var(--p-yellow);transform:translate(2px)}.pattern-picker{min-width:0;padding:30px 0 22px;background:#f8f3e9}.picker-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:0 26px 25px}.picker-heading h2{margin:0;font:700 24px/1.1 ui-rounded,Arial Rounded MT Bold,Trebuchet MS,sans-serif;letter-spacing:-.04em}.picker-heading .patterns-kicker{margin-bottom:8px}.picker-heading>button{padding:8px 10px;border:1px solid rgba(36,33,29,.35);border-radius:999px;background:transparent;color:var(--p-ink);font-size:11px}.picker-heading>button:hover{border-color:var(--p-ink);background:var(--p-yellow)}.pattern-cards{display:grid;max-height:660px;overflow:auto;border-top:1px solid rgba(36,33,29,.16);scrollbar-color:#aaa08f transparent}.pattern-cards>button{position:relative;display:grid;grid-template-columns:28px 110px minmax(0,1fr);align-items:center;gap:14px;min-height:104px;padding:12px 26px;border:0;border-bottom:1px solid rgba(36,33,29,.16);border-radius:0;background:transparent;color:var(--p-ink);text-align:left}.pattern-cards>button:hover{background:#eee6d8}.pattern-cards>button.selected{background:var(--p-yellow)}.pattern-cards>button.selected:before{position:absolute;top:0;bottom:0;left:0;width:5px;background:var(--p-orange);content:""}.card-number{align-self:start;padding-top:4px;color:#6b645b;font-size:10px;font-weight:800}.pattern-miniature{width:110px;height:75px;overflow:visible;filter:drop-shadow(0 3px 2px rgba(47,39,28,.1))}.card-copy{display:grid;min-width:0;gap:6px}.card-copy b{font-size:15px}.card-copy small{color:#665f55;font-size:11px}.set-guide{display:grid;grid-template-columns:.62fr 1.38fr;gap:80px;padding:86px 36px 96px}.set-guide h2{margin:0 0 20px;font:700 clamp(30px,4vw,54px)/1.08 ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",sans-serif;letter-spacing:-.045em}.set-guide>div:first-child>p:last-child{max-width:390px;color:#625b52;line-height:1.6}.piece-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;border-top:1px solid rgba(36,33,29,.2)}.piece-legend>div{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:16px;min-height:92px;border-bottom:1px solid rgba(36,33,29,.2)}.piece-legend>div:nth-child(odd){padding-right:22px;border-right:1px solid rgba(36,33,29,.2)}.piece-legend>div:nth-child(2n){padding-left:22px}.piece-legend svg{width:100px;height:48px}.piece-legend span{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:700}.piece-legend b{color:#d94d2d}.patterns-app footer{display:flex;justify-content:space-between;gap:20px;padding:24px 36px;border-top:1px solid rgba(36,33,29,.2);font-size:11px;font-weight:700;letter-spacing:.08em}.patterns-app footer p{margin:0;color:#655f56}.patterns-app footer a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}@media(max-width:980px){.patterns-hero{grid-template-columns:1fr;gap:26px;padding-top:52px}.patterns-hero>p{max-width:620px}.pattern-workbench{grid-template-columns:1fr}.pattern-stage{min-height:640px;border-right:0;border-bottom:1px solid rgba(36,33,29,.22)}.pattern-cards{grid-template-columns:repeat(2,1fr);max-height:none}.pattern-cards>button:nth-child(odd){border-right:1px solid rgba(36,33,29,.16)}.set-guide{grid-template-columns:1fr;gap:50px}}@media(max-width:620px){.patterns-header{padding:18px}.patterns-header p{display:none}.patterns-hero{padding:44px 18px 38px}.patterns-hero h1{font-size:clamp(36px,12.5vw,60px)}.pattern-stage{min-height:590px}.stage-toolbar{top:16px;right:16px;left:16px}.color-switch b{display:none}.board-wrap{min-height:440px;padding:75px 30px 145px}.pattern-arrows{top:auto;right:16px;bottom:126px;grid-template-columns:1fr 1fr;transform:none}.stage-caption{right:16px;bottom:18px;left:16px;align-items:start}.stage-caption dl{display:none}.stage-caption h2{font-size:27px}.picker-heading{align-items:start;padding:24px 18px}.picker-heading h2{font-size:20px}.picker-heading>button{max-width:110px}.pattern-cards{grid-template-columns:1fr}.pattern-cards>button:nth-child(odd){border-right:0}.set-guide{padding:64px 18px}.piece-legend{grid-template-columns:1fr}.piece-legend>div:nth-child(odd),.piece-legend>div:nth-child(2n){padding-inline:0;border-right:0}.patterns-app footer{padding:20px 18px}.patterns-app footer p{text-align:right}}@media(prefers-reduced-motion:reduce){.patterns-app *,.patterns-app *:before,.patterns-app *:after{scroll-behavior:auto!important;transition:none!important}}