:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#66665f;background:#f8f8f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{color:inherit;cursor:pointer;background:none;border:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #893426;outline-offset:5px}header{height:92px;padding:26px 34px;display:flex;align-items:center;justify-content:space-between}header button{font-size:.875rem;padding:10px}.mark{width:27px;height:32px;color:#893426;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;line-height:1;text-decoration:none}main{display:grid;grid-template-columns:minmax(270px,365px) minmax(0,760px);gap:5vw;max-width:1310px;padding:16px 34px 36px;margin:0 auto;align-items:center}.controls{width:100%;text-align:center}.scope{position:relative;aspect-ratio:1;border-radius:50%;touch-action:none;cursor:crosshair;background:#eeeee9}.scope canvas{width:100%;height:100%;display:block}#puck{position:absolute;left:50%;top:50%;width:23px;height:23px;border-radius:50%;border:1px solid #444;box-shadow:0 0 0 3px #f8f8f5b3,inset 0 0 0 3px #f8f8f5b3;transform:translate(-50%,-50%);padding:0;background:transparent}.readout{display:flex;justify-content:center;gap:20px;margin:23px 0;font: .8125rem ui-monospace,monospace;color:#888880}.readout b{font-weight:400;color:#393934}form{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.875rem}form input{width:78px;border:0;border-bottom:1px solid #d9d9d1;background:transparent;color:#73736b;padding:7px 0;border-radius:0}form button{border-bottom:1px solid #ccc;padding:7px 0}#swatch{width:14px;height:14px;border-radius:50%;background:#9c9793}.hint{font-size:.875rem;line-height:1.65;margin:22px 0 10px;color:#82827a}.reset{font-size:.8125rem;padding:10px;text-decoration:underline;text-underline-offset:4px;color:#888880}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.frame{position:relative;margin:0;aspect-ratio:4/5;min-width:0;overflow:hidden;background:var(--tone);color:var(--ink);border:0;padding:0;text-align:left;cursor:default}.frame img{height:100%;width:100%;object-fit:cover}.placeholder{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:11px}.placeholder .number{font:1.5rem Georgia,serif;opacity:.6}.placeholder .label{font: .6875rem ui-monospace,monospace;letter-spacing:.12em}.palette{position:absolute;left:0;bottom:0;right:0;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s;background:#f8f8f5;padding:12px}.frame:hover .palette,.frame:focus .palette{opacity:1;transform:none}.palette p{margin:0 0 9px;font-size:.75rem;color:#65655c}.chips{display:flex;height:13px}.chips span{flex:1}footer{display:flex;justify-content:space-between;max-width:1310px;margin:0 auto;padding:16px 34px 25px;font: .75rem ui-monospace,monospace;color:#8a8a81}dialog{border:0;background:#f8f8f5;color:#55564e;padding:54px;width:min(460px,calc(100% - 36px));box-shadow:0 15px 90px #0002}dialog::backdrop{background:#3335;backdrop-filter:blur(4px)}dialog #close{position:absolute;top:12px;right:18px;font-size:28px}dialog h1{font:2rem Georgia,serif;color:#3c3c35}dialog p{line-height:1.7;font-size:1rem}.eyebrow{font: .75rem ui-monospace,monospace!important;letter-spacing:.1em}.muted{color:#85857b}@media(min-width:1400px){main{gap:85px;padding-top:32px}}@media(max-width:800px){header{height:76px;padding:20px}main{padding:12px 20px 25px;gap:35px;grid-template-columns:1fr}.controls{max-width:320px;margin:0 auto}.scope{width:240px;margin:auto}.readout{margin:17px 0}.hint{margin:16px 0 0}.gallery{gap:8px}footer{padding:16px 20px;font-size:.75rem;gap:20px}.placeholder .label{font-size:.625rem;letter-spacing:.02em}}@media(max-width:420px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Photograph backdrop stays full-bleed as the gallery scrolls. */
body{min-height:100vh;isolation:isolate;background:#715027}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(rgba(248,248,245,.48),rgba(248,248,245,.48)),url("background.webp") center center/cover no-repeat;pointer-events:none}
.controls{padding:20px;background:rgba(248,248,245,.92);border:1px solid #ffffff60;backdrop-filter:blur(5px)}
header button{color:#fff;background:#241b13b8;border-radius:2px;padding:10px 14px}
.mark{text-shadow:0 0 5px #f8f8f5b3}
footer{color:#fff;text-shadow:0 1px 5px #000,0 0 12px #000}
@media(max-width:800px){.controls{padding:20px 15px}.scope{max-width:100%}}

.frame img{object-fit:contain;display:block;background:#f3f2ed}
.gallery-pages{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;padding:10px 14px;background:rgba(248,248,245,.92);font-size:.875rem;color:#44443c}
.gallery-pages button{padding:8px 4px;min-height:40px}.gallery-pages button:disabled{opacity:.35;cursor:default}
/* Let portrait and landscape photographs keep their original proportions. */
.gallery{align-items:start}
.frame{aspect-ratio:auto;background:transparent}
.frame img{width:100%;height:auto;object-fit:contain;background:transparent}

/* Stable wheel and transparent gallery rows prevent drag-induced layout shifts. */
html{scrollbar-gutter:stable}
main{align-items:start}
.gallery{grid-auto-rows:var(--row-height,360px);min-height:calc(var(--row-height,360px)*2 + 10px);overflow-anchor:none}
@media(max-width:420px){.gallery{min-height:calc(var(--row-height,360px)*3 + 16px)}}
/* Portrait-shaped mats keep horizontal photographs complete and aligned. */
.frame.landscape{height:var(--row-height,360px);background:#f3f2ed;display:flex;align-items:center}
.frame.landscape img{width:100%;height:auto;flex:none}


/* Isolate gallery painting and reserve space before previews arrive. */
.frame{contain:layout paint;aspect-ratio:var(--photo-ratio,2/3);background:#f3f2ed}
.frame.landscape{aspect-ratio:auto}
.controls{backdrop-filter:none}