*{box-sizing:border-box}body{margin:0;background:#faf6ee;color:#3e3937;font:15px/1.55 system-ui,-apple-system,sans-serif}button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #c35353;outline-offset:4px}header{max-width:1240px;margin:auto;padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:14px}header a{text-decoration:none;font-weight:750}header select{border:1px solid #ded4c4;background:#fffdf7;border-radius:8px;padding:7px;max-width:160px}.puzzle-main{max-width:1200px;padding:5px 28px 45px;margin:auto}.heading{display:flex;align-items:center;gap:18px;justify-content:space-between;margin-bottom:22px}.heading h1{font-size:clamp(26px,4vw,42px);letter-spacing:-1.2px;line-height:1.15;margin:12px 0}.heading p{margin:8px 0 0;max-width:650px;color:#746a60}.pet-mark{font-size:54px;transform:rotate(-12deg);padding-right:10px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 195px;gap:26px}.play-area{min-width:0}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}.level-title{font-weight:780;color:#a64d4a}.toolbar button,.small-button{padding:8px 13px;background:#fffdf7;border:1px solid #d9ceba;border-radius:8px}.toolbar button[aria-pressed=true]{background:#ecd7ce;border-color:#ba7166}.stats{display:flex;gap:22px;align-items:center;margin-bottom:12px;font-size:12px;color:#796d62}.stats b{font-size:18px;color:#47413c;font-variant-numeric:tabular-nums;font-weight:750}.stats span{display:flex;align-items:center;gap:7px}.stats progress{margin-inline-start:auto;max-width:150px;height:6px;accent-color:#a85b52}.board-frame{padding:18px;background:#f0e5d5;border:1px solid #e0cfb6;border-radius:15px;box-shadow:0 3px 0 #dac8b0;overflow:hidden}#puzzle-board{position:relative;isolation:isolate;aspect-ratio:3/2;display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),1fr);background:#e8ddcd;border:1px solid #c7b6a3;transition:box-shadow .2s}.board-reference{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:.035;pointer-events:none;z-index:0}.show-preview .board-reference{opacity:.55}.slot{z-index:1;position:relative;padding:0;border:1px dashed #ad9a8059;background:transparent;min-width:0}.slot:disabled{border-color:transparent}.slot:hover:not(:disabled),.slot:focus-visible{background:#fff9ec55;box-shadow:inset 0 0 0 2px #b86c5b}.drag-over{box-shadow:0 0 0 4px #bb7165}.piece{padding:0;border:0;background:transparent;position:relative;aspect-ratio:1.5;touch-action:none;user-select:none;min-width:0;transition:filter .15s,opacity .15s}.piece svg{width:100%;height:100%;display:block;overflow:visible}.piece-edge{stroke:#4d382380;stroke-width:.8;fill:none;vector-effect:non-scaling-stroke}.piece.selected{filter:drop-shadow(0 0 2px #d14c48) drop-shadow(0 0 2px #d14c48);transform:translateY(-4px)}.piece.selected .piece-edge{stroke:#be3835;stroke-width:2}.piece.placed{position:absolute;z-index:2;aspect-ratio:auto}.piece.snapped{animation:snap .6s}.piece.snapped .piece-edge{stroke:#8d6f54;stroke-width:.45}.piece.drag-source{opacity:.2}.piece.flying{position:fixed;z-index:1000;pointer-events:none;filter:drop-shadow(0 12px 10px #3a2c2b55)}.piece.wrong{animation:wrong .3s}.complete .piece-edge{stroke:transparent;transition:stroke 1s}#status{min-height:28px;padding-top:12px;font-size:13px;color:#84644f;margin:0}.tray-label{font-size:13px;font-weight:750;margin:20px 0 5px;color:#756356}#pieces{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px 3px;min-height:80px;padding:12px 3px;background:#eee3d4;border:1px solid #e0d2bd;border-radius:13px;align-items:center}.sidebar{min-width:0}.sidebar h2{font-size:13px;letter-spacing:.02em;margin:4px 0 11px}.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:27px}.level{height:36px;border:1px solid #d5cab8;border-radius:8px;background:#fffdf8;font-weight:650}.level.current{background:#b95f54;border-color:#b95f54;color:white}.level.done:not(.current){background:#dfe6d4;color:#536c46}.reference{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:9px;background:#e8ddcd}.photo-title{font-size:14px;font-weight:700;margin:10px 0 4px}.photo-credit{font-size:11px;color:#837365;margin:0 0 22px}.photo-credit a{display:block}.help{font-size:12px;color:#7c6c5b;border-top:1px solid #dfd4c3;padding-top:15px}.finish{background:#e3ead8;border:1px solid #b8c8a1;border-radius:12px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;margin-top:17px;gap:16px}.finish h2{font-size:21px;margin:0}.finish p{margin:3px 0 0;font-size:13px}.finish button{border:0;background:#577449;color:#fff;border-radius:8px;padding:10px 15px;font-weight:700}.finish[hidden],button[hidden]{display:none}dialog{border:1px solid #d8c8b2;border-radius:15px;max-width:360px;padding:24px;background:#fffaf1;color:#44372c}dialog::backdrop{background:#3c302944}dialog h2{font-size:20px;margin-top:0}dialog form{display:flex;gap:12px;justify-content:flex-end}#preview-image{display:none}@keyframes snap{0%{filter:drop-shadow(0 0 5px #a2ba76)}100%{filter:none}}@keyframes wrong{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@media(max-width:760px){header{padding:17px 16px}.puzzle-main{padding:0 16px 30px}.workspace{grid-template-columns:minmax(0,1fr);gap:20px}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}.sidebar>section{min-width:0}.sidebar .help{grid-column:1/-1;margin-top:0}.levels{margin-bottom:0}.reference{max-height:120px}.photo-credit{margin-bottom:0}.heading{margin-bottom:15px}.heading h1{font-size:29px}.pet-mark{font-size:43px}.board-frame{padding:12px;border-radius:10px}#pieces{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 3px}.stats{gap:15px;font-size:11px}.stats b{font-size:16px}.stats progress{max-width:80px}.finish{flex-wrap:wrap}.level{height:38px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

#puzzle-board,#pieces{direction:ltr}