/* A living assembly table: real parts, warm timber and a view through the pavilion. */
@media(min-width:1001px) and (max-width:1550px) {
 .masthead { gap:12px; padding-inline:3%; grid-template-columns:1fr auto 1fr; }
 .masthead .brand-name { font-size:32px; }.masthead .brand small { font-size:8px; letter-spacing:.075em; }
 .masthead nav { gap:2px; }.masthead nav a,.masthead nav button { padding-inline:14px; font-size:15px; letter-spacing:.075em; }
 .museum-motto { font-size:9px; letter-spacing:.05em; }.museum-motto small { font-size:8px; letter-spacing:.03em; }
}
.keepsake { position:relative; isolation:isolate; color:#f1d8aa; min-height:730px!important; background:#29483e; }
.diy-pavilion { position:absolute; inset:0; z-index:-1; background:linear-gradient(#13383157,#17312d09 36%,#1b2b2833),url('assets/diy-pavilion-v20.png') center/cover; }
.diy-heading { position:absolute; top:22px; left:26%; right:25%; text-align:center; }
.diy-heading .eyebrow { font:8px/1.6 var(--serif); color:#d8c6a1; letter-spacing:.17em; margin:0 0 6px; }
.diy-heading h1 { font:500 clamp(25px,2.7vw,38px)/1.5 var(--display); letter-spacing:.06em; color:#ffdf9a; text-shadow:0 2px 8px #0e2f27; margin:0; }
.diy-heading>p:last-child { font:10px/1.8 var(--serif); color:#f4dfbc; margin:7px 0 0; text-shadow:0 1px 5px #14362b; }
.diy-variant-switch { position:absolute; top:115px; left:26%; right:25%; display:flex; justify-content:center; gap:0; z-index:3; }
.diy-variant-switch button { font:11px/1.6 var(--serif); color:#e7d2ac; padding:10px 17px; background:#1a382ccc; border:1px solid #cfaa6666; }
.diy-variant-switch button:first-child { border-radius:20px 0 0 20px; }.diy-variant-switch button:last-child { border-radius:0 20px 20px 0; border-left:0; }
.diy-variant-switch button[aria-pressed=true] { color:#ffebbd; background:#795436; box-shadow:inset 0 0 0 3px #e8bc6422; }
.diy-layout { position:absolute; inset:40px 4% 169px; display:grid; grid-template-columns:22% 1fr 25%; gap:22px; align-items:stretch; }
.diy-shelf { align-self:center; background:var(--wood); background-size:auto,600px; border:1px solid #b6975c; border-radius:3px; padding:18px 13px 12px; box-shadow:inset 0 0 0 4px #b48d5425,0 6px 24px #1721163a; }
.diy-shelf h2 { font:22px/1.4 var(--display); text-align:center; color:#efcb88; margin:0 0 12px; letter-spacing:.13em; }
.diy-shelf h2 small { display:block; font:8px/1.8 var(--serif); color:#bca17e; margin-top:6px; letter-spacing:.12em; }
#diy-parts { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.diy-part { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; padding:4px 3px 8px; border:1px solid #ac885033; border-radius:2px; background:linear-gradient(130deg,#a77b4826,#6a432322); color:#e6c591; cursor:grab; }
.diy-part img { width:100%; height:82px; object-fit:contain; filter:drop-shadow(0 4px 4px #140e0b77); pointer-events:none; }
.diy-part .part-number { position:absolute; top:6px; left:7px; font:9px/1 var(--serif); color:#b69665; }
.diy-part .part-name { font:13px/1.5 var(--serif); letter-spacing:.08em; }.diy-part small { font:8px/1.6 var(--serif); color:#b2956f; margin-top:2px; }
.diy-part[aria-pressed=true] { border-color:#e8c276; background:linear-gradient(130deg,#c9965147,#8b642533); box-shadow:inset 0 0 0 2px #e4bc6624; }
.diy-part.is-installed { opacity:.67; }.diy-part.is-installed small { color:#bec39b; }
.diy-part.is-next:before { content:''; position:absolute; right:6px; top:7px; width:4px; height:4px; border-radius:50%; background:#efd48d; box-shadow:0 0 8px #f0c97c; }
.diy-shelf>p { font:8px/1.9 var(--serif); text-align:center; color:#c8af88; margin:12px 0 0; }
.diy-table { position:relative; min-width:0; margin-top:124px; display:flex; flex-direction:column; align-items:center; }
.diy-drop { position:relative; flex:1; width:100%; min-height:280px; border:1px solid transparent; border-radius:48% 48% 12% 12%; transition:background .2s,border-color .2s; }
.diy-drop.is-drag-over { background:radial-gradient(ellipse,#e0bc6224,transparent 70%); border-color:#ffdf9399; }
.diy-drop-note { position:absolute; top:42%; left:15%; right:15%; text-align:center; font:13px/1.7 var(--serif); color:#ffe5a8; opacity:0; pointer-events:none; z-index:3; background:#1d352acc; padding:14px; }
.is-drag-over .diy-drop-note { opacity:1; }
#diy-stage { position:absolute; inset:0; width:100%; height:100%; }
#diy-stage canvas { width:100%; height:100%; }
#diy-stage .loading-note { position:absolute; top:45%; left:10%; right:10%; color:#f3deb2; font:12px/1.9 var(--serif); background:#1c372cba; padding:16px; text-align:center; }
.diy-view-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px; padding-top:3px; width:100%; }
.diy-view-controls button { font:10px/1.5 var(--serif); color:#f5dba1; padding:6px; border-bottom:1px solid #e6c88980; text-shadow:0 1px 4px #2d251c; }
.diy-view-controls #diy-left,.diy-view-controls #diy-right { font-size:20px; border-radius:50%; border:1px solid #cfa86e88; width:34px; height:34px; background:#243d2c99; padding:0; }
.diy-view-controls span { font:9px var(--serif); color:#f2e0c0; text-shadow:0 1px 4px #283325; }
.diy-variant-note { text-align:center; font:9px/1.7 var(--serif); color:#ffe8bb; text-shadow:0 1px 6px #192d29; margin:10px 0 0; }
.diy-guide { align-self:center; max-height:100%; overflow:auto; background:var(--warm-paper); border:1px solid #bc9660; border-radius:4px 13px 4px 13px; padding:27px 25px 21px; box-shadow:inset 0 0 0 4px #fff4d466,inset 0 0 0 6px #b3945d33,0 8px 27px #0d231b3c; color:#5c462a; scrollbar-width:thin; scrollbar-color:#b89960 transparent; }
.diy-guide:before { content:''; display:block; width:57px; height:25px; background:url('assets/cloud-corner-v18.svg') center/contain no-repeat; margin:0 0 12px; }
.diy-guide .eyebrow { font:9px/1.7 var(--serif); color:#9a7045; letter-spacing:.13em; }
.diy-guide h2 { font:500 clamp(21px,1.9vw,28px)/1.55 var(--display); margin:13px 0 12px; color:#633c23; }
.diy-guide>p:not(.diy-status) { font:11px/1.95 var(--serif); margin:0 0 15px; color:#796246; }
.diy-guide .soft-button { font-size:12px; padding:12px 15px; width:100%; display:flex; align-items:center; justify-content:space-between; margin:4px 0 0; }
.diy-status { font:10px/1.85 var(--serif); min-height:38px; margin:12px 0; color:#8b6947; }
.diy-revise { display:flex; gap:19px; padding-top:12px; border-top:1px solid #bd9d6a66; }
.diy-revise button { font:10px/1.6 var(--serif); color:#8f6942; padding:5px 0; border-bottom:1px solid #b9926044; }
.diy-options { border-block:1px solid #bc98633b; margin:15px 0; padding:12px 0; }
.diy-options summary { cursor:pointer; font:11px/1.8 var(--serif); color:#90673e; }
.diy-options[open] summary { margin-bottom:12px; }
.keepsake[data-complete=true] .diy-guide:before { display:none; }
.keepsake[data-complete=true] .diy-guide h2 { font-size:24px; line-height:1.45; margin:9px 0; }
.keepsake[data-complete=true] .diy-options { margin:10px 0; padding:8px 0; }
.keepsake[data-complete=true] .diy-status { min-height:0; margin:8px 0 14px; }
.diy-guide label { display:block; font:10px/1.7 var(--serif); color:#876540; }
.diy-guide select,.diy-guide input { display:block; width:100%; font:11px/1.5 var(--serif); padding:8px 9px; margin:5px 0 9px; color:#61462e; background:#fff3d973; border:1px solid #b38f58aa; border-radius:2px; accent-color:#9f623c; }
.diy-option-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.diy-finish .text-button { display:block; width:100%; text-align:center; margin:7px 0 13px; font-size:11px; }
.diy-progress-rail { position:absolute; bottom:64px; left:0; right:0; height:104px; padding:10px 5% 13px; background:var(--wood); background-size:auto,850px; border-top:1px solid #caa36388; }
.diy-progress-caption { display:flex; align-items:center; gap:14px; margin-bottom:10px; font:10px/1.6 var(--serif); color:#c8ad82; }
.diy-progress-caption strong { font:15px var(--display); color:#f4d391; }.diy-progress-caption #diy-save-note { margin-left:auto; font-size:8px; opacity:.8; }
#diy-steps { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; position:relative; }
#diy-steps:before { content:''; position:absolute; top:16px; left:7%; right:7%; height:1px; background:#a887533d; }
#diy-steps button { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; padding:2px 5px; color:#9f805b; font:11px/1.6 var(--serif); }
#diy-steps button>span { display:grid; place-items:center; width:29px; height:29px; background:#3b281b; border:1px solid #94714966; border-radius:50%; font:11px var(--serif); }
#diy-steps .is-done { color:#d4b784; }#diy-steps .is-done>span { background:#69532f; color:#f0d19b; border-color:#b79156; }
#diy-steps [aria-current=step] { color:#fff0bf; }#diy-steps [aria-current=step]>span { border-color:#eed392; box-shadow:0 0 0 3px #d4ab5940; color:#ffeaba; }
.keepsake button:disabled { cursor:default; opacity:.36; }.keepsake [hidden] { display:none!important; }
.keepsake .room-bottom>span:last-child { font:9px/1.8 var(--serif); color:#c0a273; }
.part-arrived .diy-table:after { content:''; position:absolute; left:30%; right:30%; bottom:50px; height:20px; background:#ffe2a457; filter:blur(14px); border-radius:50%; pointer-events:none; animation:placement-glow .65s both; }
@keyframes placement-glow { from { opacity:.9;transform:scale(.6); } to { opacity:0;transform:scale(1.8); } }
@media(min-width:1001px) and (max-width:1200px) {
 .museum-motto { visibility:hidden; }.masthead nav a,.masthead nav button { padding-inline:11px; font-size:14px; }
 .diy-layout { gap:15px; inset-inline:3%; grid-template-columns:22% 1fr 26%; }.diy-guide { padding:20px 19px; }.diy-shelf { padding-inline:10px; }.diy-part img { height:71px; }
 .diy-heading { left:25%; right:26%; }.diy-heading h1 { font-size:28px; }.diy-heading>p:last-child { font-size:9px; }
}
@media(max-width:1000px) {
 .keepsake { height:auto!important; min-height:0!important; padding:28px 6% 0; }
 .diy-pavilion { background-position:center top; background-size:auto 760px; background-repeat:no-repeat; background-color:#304839; }
 .diy-heading { position:relative; inset:auto; text-align:center; }.diy-heading h1 { font-size:30px; }.diy-heading>p:last-child { font-size:10px; margin:10px auto; max-width:340px; }.diy-heading .eyebrow { font-size:7px; }
 .diy-variant-switch { position:relative; inset:auto; margin:22px auto 0; }.diy-variant-switch button { padding:11px 16px; font-size:10px; }
 .diy-layout { position:relative; inset:auto; display:flex; flex-direction:column; gap:23px; }
 .diy-table { order:0; margin-top:12px; width:100%; }.diy-drop { height:460px; flex:none; min-height:0; }.diy-view-controls { padding-top:0; }.diy-variant-note { margin-top:13px; font-size:9px; }
 .diy-shelf { order:1; width:100%; max-width:600px; margin:auto; padding:19px 16px; }#diy-parts { grid-template-columns:repeat(3,1fr); gap:8px; }.diy-part img { height:90px; }.diy-part strong { font-size:12px; }.diy-shelf h2 { font-size:23px; }.diy-shelf h2 small { display:inline; margin-left:12px; font-size:8px; }
 .diy-guide { order:2; width:100%; max-width:600px; padding:26px 27px; margin:0 auto 30px; overflow:visible; max-height:none; }.diy-guide h2 { font-size:25px; }.diy-guide>p:not(.diy-status) { font-size:12px; }.diy-guide .soft-button { font-size:14px; }.diy-status { font-size:11px; }.diy-guide select,.diy-guide input { font-size:16px; }.diy-guide label { font-size:11px; }.diy-revise button { font-size:12px; min-height:40px; }
 .diy-progress-rail { position:relative; bottom:auto; margin:0 -6.82%; padding:18px 7% 20px; height:auto; }#diy-steps { grid-template-columns:repeat(3,1fr); gap:15px 6px; }#diy-steps:before { display:none; }.diy-progress-caption #diy-save-note { font-size:7px; }.diy-progress-caption { gap:8px; }
 .keepsake .room-bottom { position:relative; inset:auto; margin:0 -6.82%; padding:18px 7%; min-height:80px; flex-direction:column; align-items:flex-start; gap:5px; }.keepsake .room-bottom>span { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) { .part-arrived .diy-table:after { animation:none; }.diy-drop { transition:none; } }