.pattern-page{max-width:1240px;margin:20px auto;padding:0 16px;color:#183d59;font-family:'Zen Maru Gothic',sans-serif}.page-heading{padding:8px 4px 18px}.page-heading h1{font-size:clamp(26px,4vw,36px);margin:0 0 6px}.page-heading p{margin:0}.parent-note{max-width:900px;margin:32px auto;padding:24px;line-height:1.9;background:#faf1df;border:1px solid #d9cfb6}.parent-note h2{font-size:23px}#host{--ink:#163c59;--red:#c8442c;--paper:#fff5df;--board-size:min(calc(100cqh - 132px),calc(100cqw - 368px));position:relative;isolation:isolate;container-type:size;height:710px;max-width:1200px;margin:auto;overflow:hidden;background:#f8eedb url('./assets/background.webp') center/cover;border:2px solid #264a60;color:var(--ink);font-family:'Zen Maru Gothic',sans-serif}#host *{box-sizing:border-box}#host [hidden]{display:none!important}#host button{font:800 16px/1.2 'Zen Maru Gothic',sans-serif;min-height:42px;border:2px solid var(--ink);border-radius:5px;background:#fff6e7;color:var(--ink);padding:10px 12px;cursor:pointer;touch-action:manipulation}#host button:disabled{opacity:.4;cursor:default}#host button:focus-visible,#host input:focus-visible{outline:4px solid #c7482f;outline-offset:3px}#host button:hover:enabled{box-shadow:3px 3px 0 #183d5924}#host button.primary{background:var(--red);border-color:var(--red);color:white}#host button.quiet{font-size:12px;border:0;background:transparent;text-decoration:underline;min-height:30px}#host input{accent-color:#183d59}#host .studio-top{height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff7e8d9;padding:10px 14px;border-bottom:1px solid #193f5740}#host .studio-top strong{font-size:16px;white-space:nowrap}#host nav{display:flex;gap:8px}#host nav button{font-size:12px;min-height:32px;padding:6px 10px;border-width:1px}#base{height:calc(100% - 58px)}#cover{height:100%;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:36px;padding:30px 80px}.keyart{width:100%;min-width:0;max-height:100%;object-fit:contain;transform:rotate(-3deg);box-shadow:10px 14px 0 #193f5720;border:8px solid #fff6e2}.cover-copy{display:flex;flex-direction:column;gap:20px}.cover-copy h2{font-size:clamp(32px,5.5cqw,66px);line-height:1.2;margin:0}.cover-copy em{color:var(--red);font-style:normal}.cover-copy p{font-size:21px;line-height:1.8;margin:0}.cover-copy small{font-size:13px}#start{width:100%;max-width:320px;min-height:56px;font-size:23px!important}#ready-note{font-size:11px;line-height:1.6}
#workspace{height:100%;display:grid;grid-template-columns:110px minmax(0,1fr) 206px;gap:20px;padding:24px 28px 18px}#palette{display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}#palette button{position:relative;display:flex;align-items:center;gap:9px;border-color:transparent;background:#fff5dfad;padding:5px;min-height:48px;font-size:12px;text-align:left}#palette button i{width:33px;height:33px;border:1px solid #173b5660;background:var(--color);flex:none}#palette button[aria-pressed=true]{border-color:#173b56;background:#fff8e9;box-shadow:3px 3px 0 #173b5620}#palette button[aria-pressed=true]::after{content:'✓';position:absolute;left:14px;color:#173b56;font-size:19px;text-shadow:0 0 2px white}.drawing{min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.board-wrap{position:relative;width:var(--board-size);height:var(--board-size);max-width:100%;flex:none}#board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:3px;width:100%;height:100%;padding:6px;background:#fff9e9;border:3px solid var(--ink);touch-action:none;box-shadow:8px 8px 0 #193f5722}#board button{min-height:0;min-width:0;border:0;padding:0;border-radius:0;background:var(--color);box-shadow:inset 0 0 0 1px #193f5712;touch-action:none;opacity:1}#board button:hover:enabled{box-shadow:inset 0 0 0 3px #193f5740}#board button:focus-visible{position:relative;z-index:3;outline-offset:-3px}#axis{position:absolute;top:0;bottom:0;left:50%;border-left:2px dashed #163c5980;pointer-events:none}#preview{width:100%;height:100%;display:block;border:9px solid #fff7e3;outline:3px solid var(--ink);box-shadow:11px 11px 0 #193f5720;image-rendering:pixelated}#feedback{margin:0;font-size:13px;min-height:36px;padding:9px 12px;background:#fff7e9e0;text-align:center;width:100%;max-width:600px}.side{min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;background:#fff6e9c9;padding:14px;border-left:1px solid #173b5640}#tools{display:flex;flex-direction:column;gap:13px}.mirror-label{display:flex;gap:9px;align-items:center;font-size:16px;font-weight:bold;white-space:nowrap}.mirror-label input{width:25px;height:25px}.mirror-note{font-size:11px;line-height:1.6;margin:-7px 0 10px}.history-buttons{display:flex;gap:8px}.history-buttons button{flex:1;min-width:0;font-size:13px;padding:10px 4px}#result{text-align:left}#result h2{font-size:38px;line-height:1.3;margin:18px 0;color:var(--ink)}#result>small{font-size:11px}#result p{font-size:14px;line-height:1.8;margin:18px 0}#result button{display:block;width:100%;margin-top:15px}#workspace.gallery{grid-template-columns:minmax(0,1fr) 270px;padding-left:45px;padding-right:45px;--board-size:min(calc(100cqh - 152px),calc(100cqw - 400px))}.gallery .side{border:0;background:#fff5e3bf;padding:25px}
#modal{position:absolute;inset:0;z-index:50;background:#112e49bb;display:grid;place-items:center;padding:16px}#modal>section{max-height:100%;overflow:auto;width:min(660px,100%);background:#fff5e3;border:3px solid #173b56;padding:26px;box-shadow:8px 9px 0 #1c385050}#modal header{display:flex;align-items:center;justify-content:space-between;gap:10px}#modal h2{font-size:24px;margin:0}#dialog-content{font-size:16px;line-height:1.9}#dialog-content>button{display:block;width:100%;margin-top:12px}#dialog-content label{display:flex;align-items:center;gap:12px;margin:17px 0}#dialog-content label:has(input[type=range]){display:block}#dialog-content input[type=checkbox]{width:25px;height:25px}#dialog-content input[type=range]{display:block;width:100%;height:34px}#storage-note{font-size:12px}#host:fullscreen,#host.faux-fullscreen{width:100vw;height:100dvh;max-width:none;min-height:0;margin:0;border:0}#host.faux-fullscreen{position:fixed;inset:0;z-index:99999}
@media(max-width:700px){.pattern-page{padding:0 8px}#host{height:740px}.parent-note{margin:24px 0;padding:16px}}
@media(max-height:520px) and (min-width:621px){#host{height:390px}}
@container (max-width:620px){#host .studio-top{height:80px;display:grid;gap:7px;padding:7px 8px;justify-content:stretch;text-align:center}#host .studio-top strong{font-size:14px}#host nav{gap:5px}#host nav button{padding:7px 3px;flex:1;white-space:nowrap;font-size:11px;min-height:33px}#base{height:calc(100% - 80px)}#cover{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:20px;padding:24px 30px}.keyart{height:100%;width:100%;max-width:420px;justify-self:center}.cover-copy{gap:12px;text-align:center;align-items:center}.cover-copy h2{font-size:35px}.cover-copy h2 br{display:none}.cover-copy p{font-size:15px;line-height:1.6}.cover-copy p br{display:none}.cover-copy small{font-size:11px}#start{min-height:47px;font-size:20px!important}#workspace{--board-size:min(calc(100cqw - 32px),calc(100cqh - 300px));grid-template-columns:minmax(0,1fr);grid-template-rows:60px minmax(0,1fr) auto;padding:12px 12px 10px;gap:8px}#palette{flex-direction:row;gap:3px;justify-content:space-between;align-items:center}#palette button{flex:1;min-width:0;min-height:50px;flex-direction:column;gap:4px;padding:4px 1px;font-size:9px;text-align:center}#palette button i{width:26px;height:26px}#palette button[aria-pressed=true]::after{left:50%;top:5px;transform:translateX(-50%);font-size:17px}.drawing{gap:10px}#board{gap:2px;padding:4px;border-width:2px;box-shadow:4px 4px 0 #193f5722}#feedback{font-size:11px;min-height:30px;padding:7px 3px}.side{padding:8px;border:1px solid #173b5620;background:#fff6e9dd}#tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mirror-label{font-size:13px;grid-column:1/3;gap:6px}.mirror-label input{width:22px;height:22px}.mirror-note{display:none}.history-buttons{grid-column:1/3;grid-row:2;gap:6px}.history-buttons button,#tools>button{font-size:12px;min-height:34px;padding:7px 4px}#random{grid-column:3;grid-row:1}#clear{grid-column:3;grid-row:2}#finish{grid-column:1;grid-row:3}#save{grid-column:2;grid-row:3}#menu{grid-column:3;grid-row:3;font-size:10px!important;text-decoration:none!important}#workspace.gallery{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;padding:25px 18px 12px;gap:16px;--board-size:min(calc(100cqw - 52px),calc(100cqh - 260px))}.gallery .side{padding:10px}.gallery #feedback{font-size:12px}#result{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:center;align-items:center}#result>small{display:none}#result h2{font-size:23px;margin:0}#result h2 br{display:none}#result p{font-size:11px;margin:0}#result button{font-size:12px;min-height:36px;padding:8px 4px;margin:0}#result-menu{grid-column:1/-1;min-height:26px!important}#modal>section{padding:18px}#modal h2{font-size:21px}#dialog-content{font-size:14px}}
@container (max-height:520px) and (min-width:621px){#host .studio-top{height:38px;padding:4px 10px}#host .studio-top strong{font-size:13px}#host nav button{font-size:11px;min-height:28px;padding:4px 8px}#base{height:calc(100% - 38px)}#cover{padding:16px 70px;gap:35px}.cover-copy{gap:12px}.cover-copy h2{font-size:38px}.cover-copy p{font-size:14px}.cover-copy p br{display:none}.cover-copy small{font-size:10px}#start{min-height:44px;font-size:20px!important}#workspace{--board-size:min(calc(100cqh - 92px),calc(100cqw - 316px));grid-template-columns:82px minmax(0,1fr) 177px;gap:12px;padding:8px 12px}#palette{gap:3px}#palette button{gap:6px;min-height:36px;font-size:10px;padding:3px}#palette button i{width:26px;height:26px}#palette button[aria-pressed=true]::after{left:9px;font-size:18px}.drawing{gap:9px}#board{gap:2px;padding:4px;border-width:2px}#feedback{font-size:10px;min-height:25px;padding:5px 3px}.side{padding:9px}.mirror-label{font-size:13px;gap:7px}.mirror-label input{width:21px;height:21px}.mirror-note{font-size:9px;margin:-4px 0 3px}#tools{gap:7px}#tools>button,.history-buttons button{font-size:12px;min-height:30px;padding:5px}#tools button.quiet{font-size:10px;min-height:22px}#workspace.gallery{--board-size:min(calc(100cqh - 108px),calc(100cqw - 280px));grid-template-columns:minmax(0,1fr) 230px;padding:18px 48px;gap:25px}.gallery .side{padding:10px}#result h2{font-size:30px;margin:12px 0}#result p{font-size:12px;margin:12px 0}#result button{font-size:13px;min-height:34px;margin-top:10px;padding:7px}#modal>section{padding:16px 22px}#modal h2{font-size:22px}#dialog-content{font-size:14px;line-height:1.7}#dialog-content p{margin:10px 0}#dialog-content label{margin:9px 0}}
@container (max-width:620px) and (max-height:610px){#workspace{--board-size:min(calc(100cqw - 30px),calc(100cqh - 272px));grid-template-rows:49px minmax(0,1fr) auto;padding:7px 9px;gap:6px}#palette button{font-size:8px;min-height:43px;gap:2px}#palette button i{width:23px;height:23px}.drawing{gap:7px}#feedback{font-size:10px;min-height:24px;padding:5px 3px}.side{padding:6px}#tools{gap:4px}.mirror-label{font-size:11px}#tools>button,.history-buttons button{font-size:10px;min-height:29px;padding:5px 2px}#menu{font-size:9px!important}#cover{padding:16px 26px;gap:15px}.cover-copy{gap:9px}.cover-copy h2{font-size:30px}.cover-copy p{font-size:13px}.cover-copy>small:first-child{display:none}#ready-note{font-size:9px}#workspace.gallery{--board-size:min(calc(100cqw - 42px),calc(100cqh - 247px));padding:18px 15px 8px;gap:12px}#result h2{font-size:20px}#result p{font-size:10px}#modal>section{padding:15px}#dialog-content{font-size:13px;line-height:1.65}}
@media(prefers-reduced-motion:reduce){#host *{transition:none!important}}
#tools .history-buttons button{font-size:13px;white-space:nowrap;padding:8px 3px;min-height:38px}
@container (max-height:520px) and (min-width:621px){#tools .history-buttons button{font-size:12px;min-height:30px;padding:5px 3px}}