*{box-sizing:border-box}body{margin:0;background:#f5f4ef;color:#242820;font-family:Arial,Helvetica,sans-serif}button,select{font:inherit;color:inherit;cursor:pointer}button{border:1px solid #d5d6ce;background:transparent;border-radius:7px;padding:13px 19px;min-height:46px;transition:background .15s}button:hover{background:#e5e7dc}button:disabled{opacity:.35;cursor:default}.primary{background:#d9ef76;border-color:#d9ef76;font-weight:600}.primary:hover{background:#cee665}.plain{border:0;background:none}header{height:96px;border-bottom:1px solid #ddded6;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}.brand{font-size:28px;letter-spacing:-1.6px;font-weight:900;text-decoration:none;color:inherit}.brand span{font-size:12px;vertical-align:top;margin-left:4px;letter-spacing:0}.quiet{font-size:12px;color:#7c8074}main{max-width:1200px;margin:auto;padding:60px 36px 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:38px}.eyebrow,.tiny{font-size:10px;letter-spacing:1.8px;color:#797e70}h1{font-size:clamp(38px,5vw,58px);font-weight:400;letter-spacing:-2.8px;margin:12px 0}p{color:#7a7f72;font-size:14px;line-height:1.6;margin:0}.workspace{background:#e8e9e1;border:1px solid #d8dbce;border-radius:12px;overflow:hidden}.bar,.boardFoot{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;font-size:10px;letter-spacing:1px}.bar #count{color:#858a7b;letter-spacing:0;margin-left:12px}.live{display:inline-block;background:#889b54;border-radius:50%;height:6px;width:6px;margin-right:9px}select{background:transparent;border:0;font-size:11px;padding:8px}#boardWrap{position:relative;margin:0 auto;max-width:700px;width:calc(100% - 44px);background:#f7f6f1;aspect-ratio:1;box-shadow:0 8px 25px #30392209}#board{width:100%;height:100%;display:block;touch-action:manipulation}#empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}.empty-icon{font-size:40px;color:#9ba78b;margin-bottom:12px;font-weight:200}h2{font-size:24px;letter-spacing:-.7px;font-weight:400;margin:8px 0}#empty p{max-width:270px;margin:10px 0 24px}.boardFoot{letter-spacing:0;color:#7e8474}.boardFoot button{border:0;font-size:12px;padding:8px}.bottom{display:flex;justify-content:space-between;align-items:center;margin:28px 0}.bottom p{font-size:12px;margin-top:8px}.export{display:flex;gap:8px}#tray{display:flex;gap:9px;overflow-x:auto;padding:5px 0 20px}.thumb{position:relative;flex:0 0 74px;padding:0;height:74px;overflow:hidden;border-radius:5px;background:#e6e7de}.thumb img{width:100%;height:100%;object-fit:cover}.thumb span{position:absolute;right:4px;top:4px;color:#d9ef76;text-shadow:0 1px 4px #000}footer{border-top:1px solid #dedfd5;display:flex;justify-content:space-between;padding:25px 0;color:#959b8c;font-size:9px;letter-spacing:1px}dialog{border:1px solid #d7dacd;border-radius:15px;background:#f5f4ef;width:min(440px,calc(100% - 28px));padding:22px;max-height:94dvh;overflow:auto}dialog::backdrop{background:#19201488;backdrop-filter:blur(5px)}.dialogHead{display:flex;align-items:center;justify-content:space-between}.dialogHead button{border:0;padding:8px}dialog p{font-size:12px;margin:0 0 15px}#crop{width:100%;display:block;touch-action:none;background:#e4e6dd}.zoom{display:flex;align-items:center;gap:14px;font-size:12px;margin:22px 0}.zoom input{flex:1;min-width:0;accent-color:#718b30}.editActions,.reorder{display:flex;gap:8px;margin-bottom:12px}.editActions button,.reorder button{flex:1;font-size:12px}.danger{color:#9c5144}.full{width:100%}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#252c20;color:white;border-radius:8px;padding:12px 20px;font-size:13px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:10}button:focus-visible,select:focus-visible{outline:2px solid #697e35;outline-offset:3px}@media(max-width:650px){header{height:72px;padding:0 20px}.brand{font-size:24px}.quiet{display:none}header button{font-size:11px;padding:10px}main{padding:32px 16px 0}.intro{display:block;margin-bottom:25px}.intro p{font-size:13px;max-width:290px}.intro>.primary{margin-top:22px;width:100%}h1{margin:13px 0;letter-spacing:-2px}.bar,.boardFoot{padding:10px 12px}.bar{font-size:9px}.bar #count{margin-left:6px}#boardWrap{width:calc(100% - 24px)}.bottom{display:block;margin:22px 0 14px}.export{margin-top:20px}.export button{flex:1}.bottom p{font-size:11px}.boardFoot{font-size:10px}.boardFoot button{font-size:11px}footer{font-size:8px;letter-spacing:.4px}footer span:last-child{display:none}}
/* RESAMPL reference: monochrome, ABC Diatype, fine rules and square geometry. */
@font-face{font-family:'ABC Diatype';src:url('https://cdn.prod.website-files.com/67c56a372dfe5d9044374b5f/67ea6daefb05da2a10f0feb5_ABC%20Diatype.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
body{background:#fff;color:#000;font-family:'ABC Diatype',Arial,sans-serif;font-size:12px}header{height:60px;padding:0 18px;border:0;gap:30px;justify-content:flex-start}.brand{font:400 14px 'ABC Diatype',Arial,sans-serif;letter-spacing:0}.brand span{font-size:12px;margin:0;vertical-align:baseline}.quiet{color:#000;font-size:12px}header #reset{margin-left:auto;font-size:12px}main{max-width:none;padding:54px 18px 0}.intro{align-items:flex-end;margin-bottom:65px}.eyebrow,.tiny{font-size:11px;color:#000;letter-spacing:0}.eyebrow{display:none}h1{font-size:24px;font-weight:400;letter-spacing:-.5px;line-height:1.2;margin:0 0 20px}p{font-size:12px;color:#000;line-height:1.5}.intro p{max-width:480px}.primary{background:#000;border-color:#000;color:#fff;font-weight:400}.primary:hover{background:#303030}button{border-radius:0;border-color:#000;font-size:12px;padding:10px 18px;min-height:44px}button:hover{background:#f1f1f1}.plain:hover{background:transparent;text-decoration:underline}.primary:hover{color:#fff;background:#303030}.workspace{border:1px solid #000;border-radius:0;background:#fff}.bar{padding:8px 10px;border-bottom:1px solid #000;letter-spacing:0;font-size:11px}.bar #count{color:#777}.live{background:#000;border-radius:0;width:5px;height:5px}select{font-size:11px}#boardWrap{margin:12px auto;max-width:620px;width:calc(100% - 24px);background:#f3f3f3;box-shadow:none}.boardFoot{border-top:1px solid #000;padding:6px 10px;color:#777}.boardFoot button{font-size:11px}#empty h2{font-size:18px;letter-spacing:0}#empty p{color:#777;font-size:12px}.empty-icon{color:#000;font-size:30px}.bottom{margin:20px 0}.bottom p{font-size:11px;color:#777}.thumb{border-radius:0;border-color:#ddd}.thumb span{color:#fff;background:#000;padding:2px 4px;text-shadow:none}footer{border-color:#000;font-size:10px;letter-spacing:0;color:#000;padding:14px 0}dialog{border-color:#000;border-radius:0;background:#fff}dialog::backdrop{background:#0005;backdrop-filter:none}.dialogHead h2{font-size:20px;letter-spacing:0}.zoom input{accent-color:#000}.danger{color:#000}#toast{border-radius:0;background:#000;color:#fff}button:focus-visible,select:focus-visible{outline-color:#777}button:disabled{opacity:.3}@media(min-width:1000px){main{padding-top:65px}.intro{margin-bottom:80px}.workspace{display:grid;grid-template-columns:1fr minmax(400px,620px) 1fr}.bar{grid-column:1/-1}#boardWrap{grid-column:2;width:100%}.boardFoot{grid-column:1/-1}.bottom{margin-top:22px}h1{font-size:28px}}@media(max-width:650px){header{height:55px;padding:0 12px}.brand{font-size:13px}.quiet{display:none}main{padding:35px 12px 0}.intro{margin-bottom:35px}.intro p{font-size:12px;max-width:300px}.intro>.primary{margin-top:25px}.bar{font-size:10px}h1{font-size:23px;letter-spacing:-.4px}.bottom{margin-top:20px}.export{margin-top:20px}.boardFoot{padding:5px 8px}.boardFoot button{font-size:10px;padding:6px}footer{font-size:9px}}

.boardFoot{justify-content:flex-end;gap:8px}.boardFoot #add{min-height:44px;padding:10px 18px;font-size:12px}.boardFoot #shuffle{min-height:44px;padding:10px 14px}
@media(max-width:650px){.boardFoot{padding:8px;gap:8px}.boardFoot #add,.boardFoot #shuffle{flex:1;padding:10px 8px;font-size:11px}}

.bar{justify-content:flex-end}#empty .empty-plus{display:flex;align-items:center;justify-content:center;width:64px;height:64px;padding:0;border:0;background:transparent;color:#000;font-size:36px;font-weight:400;line-height:1}#empty .empty-plus:hover{background:#e9e9e9}

.boardFoot #add{background:#fff;color:#000}.boardFoot #add:hover{background:#f1f1f1}

.bottom{display:block;margin:20px 0}.bottom .export{display:block;width:100%;margin:0}.bottom #share{display:block;width:100%;min-height:58px;padding:18px 24px;font-size:14px}

.site-footer{display:block;border:0;padding:0;margin:100px -6px 0;color:#000;font-size:11px;line-height:1.4;letter-spacing:0}.footer-grid{display:flex;flex-wrap:wrap;row-gap:24px;border:1px solid #000;border-bottom:0;padding-bottom:24px}.footer-cell{display:flex;flex-direction:column;gap:12px;width:50%;padding:6px 6px 0}.footer-logo{display:block;width:auto;height:15.4px;align-self:flex-start}.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover{text-decoration:underline}.footer-cell>div>a{display:block;width:fit-content}.site-footer .contact-link{text-decoration:underline}.footer-cell .newsletter-placeholder{color:#ccc;white-space:nowrap}.footer-credit{margin-top:60px;padding:6px 0 12px;color:#ccc}.footer-credit a{color:inherit}@media(min-width:992px){.footer-cell{width:25%}} 

/* Share action follows the full workspace width at every breakpoint. */
.bottom{display:block;width:100%;margin:20px 0}
.bottom .export{display:block;width:100%;margin:0}
.bottom #share{display:block;width:100%;min-height:58px;padding:18px 24px;background:#000;border:1px solid #000;color:#fff;font-size:14px;opacity:1}
.bottom #share:hover:not(:disabled){background:#222}
.bottom #share:disabled{background:#000;color:#fff;opacity:1;cursor:default}

.bottom>.bar{display:flex;justify-content:flex-start;width:100%;min-height:48px;border:1px solid #000;border-bottom:0;padding:8px 10px;background:#fff}.bottom>.bar select{min-height:32px}

html body main .bottom .export button#share,html body main .bottom .export button#share:disabled{background-color:#000!important;border-color:#000!important;color:#fff!important;opacity:1!important;-webkit-text-fill-color:#fff}html body main .bottom .export button#share:hover:not(:disabled){background-color:#222!important}

.boardFoot{display:flex;align-items:center;justify-content:space-between;gap:8px}.boardFoot #add,.boardFoot #shuffle{flex:0 1 auto;white-space:nowrap}.boardFoot #ratio{flex:0 1 auto;min-width:0;max-width:40%;min-height:44px;font-size:11px;padding:8px 4px}@media(max-width:650px){.boardFoot{gap:4px;padding:8px}.boardFoot #add,.boardFoot #shuffle{flex:0 1 auto;padding:10px 4px;font-size:10px}.boardFoot #ratio{font-size:10px;padding:8px 0}}

.boardFoot{justify-content:space-around;padding:6px 12px;gap:12px}.boardFoot #add,.boardFoot #shuffle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;min-height:48px;padding:12px;border:0;background:#fff;color:#000}.boardFoot button svg{display:block}.boardFoot button:hover:not(:disabled){background:#f3f3f3}.boardFoot .ratio-control{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:#000}.ratio-control svg{pointer-events:none}.boardFoot .ratio-control #ratio{position:absolute;inset:0;width:100%;height:100%;max-width:none;min-height:48px;opacity:0;cursor:pointer;padding:0}.ratio-control:focus-within{outline:2px solid #777;outline-offset:3px}

.site-footer .footer-logo{width:22.75px;height:15.4px;object-fit:contain;filter:brightness(0)}

/* The board uses the workspace width on phones and desktops. */
.workspace{display:block}
#boardWrap{width:calc(100% - 24px);max-width:none;margin:12px auto;grid-column:auto}

#empty{padding:0}
#empty .empty-plus{width:100%;height:100%;min-height:44px;align-self:stretch}
#empty .empty-plus:hover{background:transparent}
#empty .empty-plus:focus-visible{outline:2px solid #777;outline-offset:-3px}

/* Preserve the compact mobile composition on larger screens. */
header{max-width:534px;width:100%;margin:0 auto;padding:0 12px;height:55px}
header .quiet{display:none}
main{max-width:534px;width:100%;margin:0 auto;padding:35px 12px 0}
.intro{display:block;margin-bottom:35px}
h1{font-size:23px;letter-spacing:-.4px}
.intro p{font-size:12px;max-width:300px}
.site-footer .footer-cell{width:50%}

#tray{padding:14px 0 2px;min-height:0;touch-action:pan-y}#tray:empty{display:none}.thumb{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}.thumb img{pointer-events:none}.thumb.dragging{opacity:.5;outline:2px solid #000;outline-offset:-2px;cursor:grabbing}

#tray .add-thumb{flex:0 0 74px;width:74px;height:74px;min-height:74px;display:flex;align-items:center;justify-content:center;padding:0;background:#f0f0f0;border:1px solid #ddd;border-radius:0;color:#000;font-size:28px;line-height:1}#tray .add-thumb:hover{background:#e5e5e5}

main>.boardFoot{border:1px solid #000;margin-top:14px;width:100%;color:#000}

main>.boardFoot{display:grid;grid-template-columns:64px 64px minmax(0,1fr);gap:0;padding:0;align-items:stretch}
.boardFoot .ratio-control{width:100%;height:58px;border-right:1px solid #000}
.boardFoot .ratio-control #ratio{min-height:58px}
.boardFoot #shuffle{width:100%;min-height:58px;height:58px;padding:16px;justify-content:center}
.boardFoot #share,.boardFoot #share:disabled{display:block;min-width:0;width:100%;min-height:58px;margin:0;padding:16px 20px;background:#000!important;color:#fff!important;border:0;border-left:1px solid #000;border-radius:0;opacity:1!important;font-size:14px;-webkit-text-fill-color:#fff}
.boardFoot #share:hover:not(:disabled){background:#222!important}

/* Match the first two 74px gallery tiles and their 9px gap. */
main>.boardFoot{grid-template-columns:83px 74px minmax(0,1fr)}

/* Motion stays quiet, and yields to system accessibility preferences. */
button{transition:background-color .15s,opacity .15s,transform .12s}button:active:not(:disabled){transform:scale(.97)}
main>.boardFoot{position:sticky;bottom:max(12px,env(safe-area-inset-bottom));z-index:5;background:#fff;box-shadow:0 4px 18px #00000012}
#boardWrap.loading:after{content:'';position:absolute;bottom:0;left:0;height:2px;width:35%;background:#000;animation:loading-slide 1s ease-in-out infinite;pointer-events:none}
@keyframes loading-slide{from{left:0}to{left:65%}}
.thumb.dragging{opacity:.25;outline:1px dashed #777;outline-offset:-1px}
.drag-ghost{position:fixed!important;z-index:30;width:74px;height:74px;pointer-events:none;box-shadow:0 8px 22px #0003;transform:scale(1.07) rotate(-2deg);background:#fff;opacity:.95;overflow:hidden}.drag-ghost img{width:100%;height:100%;object-fit:cover}
#crop{cursor:grab}#crop:active{cursor:grabbing}
@media(max-width:650px){dialog#editor{position:fixed;inset:auto 0 0;width:100%;max-width:534px;margin:0 auto;max-height:94dvh;border:1px solid #000;border-bottom:0;border-radius:14px 14px 0 0;padding:24px 20px max(20px,env(safe-area-inset-bottom));overflow-y:auto}dialog#editor:before{content:'';position:absolute;width:32px;height:3px;top:8px;left:calc(50% - 16px);background:#ccc;border-radius:3px}dialog#editor.is-open{animation:sheet-in .2s cubic-bezier(.2,.7,.2,1)}#editor #crop{max-height:38dvh!important}#editor .zoom{margin:16px 0}#editor .editActions,#editor .reorder{margin-bottom:8px}}
@keyframes sheet-in{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

#themeToggle{margin-left:auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:12px}
.intro{animation:intro-in .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes intro-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body{background:#000000;color:#f3f3f3}
html[data-theme="dark"] p,html[data-theme="dark"] .site-footer,html[data-theme="dark"] .boardFoot{color:#f3f3f3}
html[data-theme="dark"] .workspace,html[data-theme="dark"] main>.boardFoot,html[data-theme="dark"] dialog{background:#000000;color:#f3f3f3;border-color:#888}
html[data-theme="dark"] #boardWrap,html[data-theme="dark"] #empty{background:#252525}
html[data-theme="dark"] #empty .empty-plus,html[data-theme="dark"] .ratio-control{color:#f3f3f3}
html[data-theme="dark"] .boardFoot #shuffle{background:#000000;color:#f3f3f3}
html[data-theme="dark"] .ratio-control,html[data-theme="dark"] .footer-grid,html[data-theme="dark"] button{border-color:#888}
html[data-theme="dark"] #tray .add-thumb{background:#252525;color:#f3f3f3;border-color:#555}
html[data-theme="dark"] .site-footer .footer-logo{filter:brightness(0) invert(1)}
html[data-theme="dark"] .footer-credit{color:#888}
html[data-theme="dark"] button:hover:not(:disabled){background:#333}
html[data-theme="dark"] .primary{background:#000;color:#fff}
@media(prefers-reduced-motion:reduce){.intro{animation:none}}

#ratio option{background:#fff;color:#000}html[data-theme="dark"] #ratio{color-scheme:dark;color:#f5f5f5}html[data-theme="dark"] #ratio option{background:#252525;color:#fff}

.boardFoot #shuffle,.boardFoot #shuffle:disabled{color:#000;opacity:1}html[data-theme="dark"] .boardFoot #shuffle,html[data-theme="dark"] .boardFoot #shuffle:disabled{color:#f3f3f3;opacity:1}

.boardFoot #share,.boardFoot #share:disabled{border-left:1px solid #000}html[data-theme="dark"] .boardFoot #share,html[data-theme="dark"] .boardFoot #share:disabled{border-left:1px solid #888}

/* Keep primary actions anchored to the viewport, independent of scrolling. */
main{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
main>.boardFoot{position:fixed;left:50%;transform:translateX(-50%);bottom:env(safe-area-inset-bottom,0px);width:calc(100% - 24px);max-width:510px;margin:0;z-index:10;box-shadow:0 -4px 20px #00000012}

/* Keep the fixed toolbar aligned to the board's actual bounds. */
main>.boardFoot{left:var(--toolbar-left,50%);width:var(--toolbar-width,calc(100% - 24px));max-width:none;transform:none}
.boardFoot #share,.boardFoot #share:disabled{background:#f0f0f0!important;color:#000!important;-webkit-text-fill-color:#000}
.boardFoot #share:hover:not(:disabled){background:#e5e5e5!important}
html[data-theme="dark"] .boardFoot #share,html[data-theme="dark"] .boardFoot #share:disabled{background:#252525!important;color:#f3f3f3!important;-webkit-text-fill-color:#f3f3f3}
html[data-theme="dark"] .boardFoot #share:hover:not(:disabled){background:#333!important}

/* Shared outer alignment for every primary section. */
.site-footer{margin-left:0;margin-right:0;width:100%}
.workspace,#tray{width:100%}

/* Keep breathing room around the floating controls in every ratio. */
main>.boardFoot{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
html{scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
#tray,.workspace{scroll-margin-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
main{padding-bottom:24px}

.intro,.intro>div,.intro p{width:100%;max-width:none}

#empty{background:#f0f0f0}html[data-theme="dark"] #empty{background:#252525}

#empty{background:#fff}html[data-theme="dark"] #empty{background:#000000}

/* Reserve the reference breathing room before the footer. */
.site-footer{margin-top:100px}

.site-footer[hidden]{display:none}
main{padding-bottom:calc(190px + env(safe-area-inset-bottom,0px))}

header{gap:4px}#infoOpen{margin-left:auto;padding:10px 12px;font-size:12px}#themeToggle{margin-left:0}
#infoPage{width:calc(100% - 24px);max-width:510px;max-height:90dvh;padding:24px}#infoPage h3{font-size:12px;font-weight:400;margin:28px 0 12px}#infoPage p,#infoPage li{font-size:12px;line-height:1.65}#infoPage ol{padding-left:18px;margin:0 0 24px}#infoPage li{padding-left:4px;margin:8px 0}.info-links{display:flex;flex-direction:column;gap:14px;margin-top:28px}.info-links a{color:inherit;font-size:12px;text-underline-offset:3px}html[data-theme="dark"] #infoPage{background:#000000;color:#f3f3f3}

#infoPage::backdrop{background:rgba(0,0,0,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

#tray{touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}#tray .thumb{touch-action:pan-x pan-y;-webkit-touch-callout:none}#tray .thumb img{-webkit-touch-callout:none}

html[data-theme="dark"] #boardWrap,html[data-theme="dark"] #empty{background:#000}

html[data-theme="dark"] #empty{background:#000000}

#infoPage .dialogHead{margin-bottom:16px;gap:16px}#infoClose{border:0;min-width:44px;padding:10px}
.info-brand{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px;padding:16px 12px 12px;border:1px solid #000;font-size:12px;line-height:1.5}.info-logo{display:block;width:28px;height:19px;object-fit:contain;filter:brightness(0);margin-bottom:16px}#infoPage .info-brand p{margin:0;font-size:12px;line-height:1.5}.info-brand a{color:inherit;font-size:12px;text-underline-offset:3px}.info-brand-socials>p{margin-bottom:16px!important}.info-brand-socials>a{display:block;text-decoration:none;line-height:1.8}.info-brand-socials>a:hover{text-decoration:underline}.info-website{grid-column:1/-1;border-top:1px solid #ddd;padding-top:12px;margin-top:4px}#infoPage .info-updated{margin:16px 0 0;font-size:10px;line-height:1.5;color:#777}.info-updated time{float:right}html[data-theme="dark"] .info-brand{border-color:#888}html[data-theme="dark"] .info-logo{filter:brightness(0) invert(1)}html[data-theme="dark"] .info-website{border-color:#444}html[data-theme="dark"] #infoPage .info-updated{color:#aaa}

/* Open information layout, matching the supplied reference. */
#infoPage{border:0;box-shadow:none;border-radius:0;padding:24px;background:#fff}
#infoPage .dialogHead{margin:0 -16px 30px;padding:8px 16px 0;border:1px solid #888;border-bottom:0;align-items:flex-start}
#infoPage .dialogHead h2{margin:0;font-size:24px;line-height:1.25}
#infoClose{border:0;background:transparent;min-height:32px;min-width:32px;padding:0;margin:-2px -4px 0 8px}
#infoPage h3{margin-top:30px}#infoPage ol{margin-bottom:28px}#infoPage li{margin:12px 0}
#infoPage .info-brand{margin-top:30px;padding:16px 12px 0;gap:28px 20px;border-bottom:0}
#infoPage .info-website{grid-column:1;border:0;margin:0;padding:12px 0 0;align-self:end;white-space:nowrap}
#infoPage .info-updated{grid-column:2;margin:0;padding:12px 0 0;font-size:10px;align-self:end;line-height:1.5}
#infoPage .info-updated time{float:none;margin-left:5px;white-space:nowrap}
html[data-theme="dark"] #infoPage{background:#000000}
@media(max-width:400px){#infoPage{padding:20px 16px}#infoPage .dialogHead h2{font-size:22px}#infoPage .info-brand{gap:24px 12px}#infoPage .info-website{font-size:11px}#infoPage .info-updated{font-size:9px}}

/* Shared frame edges and leading throughout the information footer. */
#infoPage .dialogHead{margin:0 0 30px;padding:12px 12px 0}
#infoPage .info-brand{padding:16px 12px 0}
#infoPage .info-brand p,#infoPage .info-brand-identity>a,#infoPage .info-brand-socials>a{font-size:12px;line-height:1.4}
#infoPage .info-brand-identity>a{display:block}
#infoPage .info-brand-socials>a{margin:0;padding:0}
#infoPage .info-brand-socials>p{margin-bottom:16px!important}

#infoPage .dialogHead{padding:6px 6px 0}#infoPage .info-brand{padding:6px 6px 0}

#infoPage ol{list-style:none;counter-reset:steps;padding-left:0}#infoPage ol>li{position:relative;counter-increment:steps;padding-left:24px}#infoPage ol>li:before{content:counter(steps) ".";position:absolute;left:0;top:0}

@media(max-width:650px){#infoPage .info-updated{display:flex;flex-direction:column;align-items:flex-start;gap:2px}#infoPage .info-updated time{display:block;float:none;margin-left:0;text-align:left}}

/* No browser tap rectangles; retain deliberate keyboard focus. */
a,button,select,input,label{-webkit-tap-highlight-color:transparent}
button:focus:not(:focus-visible),a:focus:not(:focus-visible),select:focus:not(:focus-visible){outline:none}
.ratio-control:focus-within{outline:none}
.ratio-control:has(select:focus-visible){outline:2px solid #777;outline-offset:3px}
@media(hover:none){#infoOpen:hover,#themeToggle:hover{background:transparent;text-decoration:none}}

#infoTitle:focus{outline:none}#infoPage #infoClose,#infoPage #infoClose:hover,#infoPage #infoClose:focus,#infoPage #infoClose:active{appearance:none;-webkit-appearance:none;border:0;outline:0;box-shadow:none;background:transparent}#infoPage #infoClose:focus-visible{text-decoration:underline;text-underline-offset:5px}

/* Keep the full-board upload target visually unchanged during touch. */
#empty #emptyAdd,#empty #emptyAdd:hover,#empty #emptyAdd:active,#empty #emptyAdd:focus{appearance:none;-webkit-appearance:none;background:transparent!important;box-shadow:none;border:0;transform:none;transition:none;-webkit-tap-highlight-color:transparent}

html[data-theme="dark"] #empty #emptyAdd,html[data-theme="dark"] #empty #emptyAdd:hover,html[data-theme="dark"] #empty #emptyAdd:active,html[data-theme="dark"] #empty #emptyAdd:focus{background:#000!important;-webkit-tap-highlight-color:rgba(0,0,0,1)!important;box-shadow:none!important;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
html[data-theme="dark"] #emptyAdd svg{pointer-events:none}

html[data-theme="dark"] #editor #remove{color:#fff;-webkit-text-fill-color:#fff}

.brand span{display:inline-block;font-size:.58em;line-height:1;vertical-align:super;margin-left:1px;letter-spacing:0}
html,body{touch-action:pan-x pan-y}#crop{touch-action:none}

.brand span{font-size:1em;vertical-align:baseline;line-height:inherit;margin-left:1px}

.ratio-control:focus-within,.ratio-control:has(select:focus-visible){outline:none;box-shadow:none}.boardFoot .ratio-control #ratio:focus{outline:none;box-shadow:none}.ratio-control:has(select:focus-visible) svg{opacity:.65}

header .brand,header #infoOpen{font-size:11px;line-height:1.4;font-weight:400;letter-spacing:0}

/* Information is a full page with the same column and margins as the builder. */
#infoPage{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:auto;background:#fff;color:#000;box-shadow:none}
#infoPage .info-page-header{width:100%;max-width:534px;height:55px;padding:0 12px;margin:0 auto;display:flex;align-items:center;gap:4px}
#infoPage #infoClose{margin:0 0 0 auto;padding:10px 12px;min-height:44px;width:auto;font:400 11px/1.4 'ABC Diatype',Arial,sans-serif;color:inherit}
#infoTheme{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:12px;border:0;background:transparent;color:inherit}
#infoPage .info-content{max-width:534px;width:100%;margin:clamp(100px,22dvh,220px) auto 0;padding:0 12px 24px;outline:0}
#infoPage .info-content p,#infoPage .info-content li,#infoPage .info-content h3,#infoPage .info-content a{font-family:'ABC Diatype',Arial,sans-serif;font-size:12px;font-weight:400;line-height:1.65}
#infoPage .info-brand p,#infoPage .info-brand a{line-height:1.4}
#infoPage .info-updated{font-size:10px;line-height:1.4}
#infoPage[open] .info-content{animation:info-page-enter .28s ease-out both}
#infoPage::backdrop{background:#0003}
@keyframes info-page-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
html[data-theme="dark"] #infoPage{background:#000;color:#f3f3f3}
@media(prefers-reduced-motion:reduce){#infoPage[open] .info-content{animation:none}}

/* Persistent navigation; reveal the information body beneath it. */
body>header{position:sticky;top:0;z-index:12;background:#fff}
#infoPage .info-page-header{position:sticky;top:0;z-index:2;background:#fff}
html[data-theme="dark"] body>header,html[data-theme="dark"] #infoPage .info-page-header{background:#000}
#infoPage[open]{animation:information-curtain .42s cubic-bezier(.2,.7,.2,1) both}
#infoPage[open] .info-content{animation:info-page-enter .3s .15s ease-out both}
@keyframes information-curtain{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){#infoPage[open],#infoPage[open] .info-content{animation:none}}