/* A viewport budget for the existing workshop; no state, controls or canvas pixels are removed. */
#keepsake .diy-heading,
#keepsake .diy-layout,
#keepsake .diy-shelf,
#keepsake .diy-guide,
#keepsake .keepsake-extra-panel,
#keepsake #blessing-main .controls { min-width:0; }

/* A desktop table uses the space below the real museum header, rather than stacking
   a fixed-height stage below four more full-width bands. Short screens keep scrolling. */
@media (min-width:1001px) and (min-height:660px) {
 body[data-room=keepsake] { overflow-y:auto; }
 #keepsake.room.keepsake,
 #keepsake.room.keepsake[data-experience=assembly],
 #keepsake.room.keepsake:not([data-experience=assembly]) {
  --keepsake-room-height:calc(100svh - var(--museum-head,112px));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:72px 48px minmax(0,1fr) 24px;
  gap:8px 20px;
  height:var(--keepsake-room-height)!important;
  min-height:0!important;
  max-height:var(--keepsake-room-height);
  margin-top:var(--museum-head,112px);
  padding:12px clamp(24px,3vw,52px) 12px;
  overflow:visible;
 }
 #keepsake.room.keepsake .diy-heading {
  grid-column:1;
  grid-row:1;
  position:relative;
  inset:auto;
  width:auto;
  max-width:none;
  margin:0;
  align-self:center;
  text-align:left;
 }
 #keepsake .diy-heading .eyebrow { margin:0 0 2px; font-size:9px; line-height:1.35; }
 #keepsake .diy-heading h1 { margin:0; font-size:clamp(29px,2.5vw,36px); line-height:1.25; letter-spacing:.045em; }
 #keepsake .diy-heading .diy-intro { margin:3px 0 0; max-width:none; font-size:12px; line-height:1.5; }
 #keepsake.room.keepsake .keepsake-experience-tabs {
  grid-column:2;
  grid-row:1;
  position:relative;
  inset:auto;
  align-self:center;
  width:auto;
  max-width:none;
  margin:0;
  flex-wrap:nowrap;
  gap:5px;
 }
 #keepsake .keepsake-experience-tabs button { min-height:44px; padding:7px 12px; font-size:12px; white-space:nowrap; }
 #keepsake.room.keepsake .visitor-workshop-v37 {
  grid-column:1/-1;
  grid-row:2;
  width:100%;
  max-width:none;
  height:48px;
  min-height:0;
  margin:0;
  padding:1px 8px 1px 10px;
  gap:10px;
  flex-wrap:nowrap;
  border-radius:8px 16px;
 }
 #keepsake .visitor-workshop-v37 .guide-icon { width:32px; height:32px; }
 #keepsake .visitor-workshop-v37 p { min-width:0; max-width:none; font-size:13px; line-height:1.5; }
 #keepsake .visitor-workshop-v37 button { min-height:44px; padding:7px 14px; white-space:nowrap; }
 #keepsake #diy-assembly-panel {
  grid-column:1/-1;
  grid-row:3;
  display:grid;
  grid-template-rows:minmax(0,1fr) 64px;
  gap:8px;
  min-width:0;
  min-height:0;
  position:relative;
 }
 #keepsake.room.keepsake[data-experience=assembly] .diy-layout {
  position:relative;
  inset:auto;
  grid-row:1;
  width:100%;
  height:100%;
  max-width:1440px;
  min-height:0;
  margin:0 auto;
  grid-template-columns:minmax(190px,220px) minmax(0,1fr) minmax(250px,290px);
  gap:16px;
  align-items:stretch;
 }
 #keepsake.room.keepsake[data-experience=assembly] .diy-variant-switch {
  position:absolute;
  z-index:5;
  top:0;
  left:236px;
  right:306px;
  width:auto;
  max-width:898px;
  margin:0 auto;
  height:44px;
 }
 #keepsake .diy-variant-switch button { min-height:44px; padding:7px 12px; font-size:12px; }
 #keepsake.room.keepsake[data-experience=assembly] .diy-table {
  align-self:stretch;
  display:grid;
  grid-template-rows:44px minmax(0,1fr) 46px 20px;
  gap:4px;
  min-width:0;
  min-height:0;
  height:100%;
  margin:0;
  align-items:stretch;
 }
 #keepsake.room.keepsake[data-experience=assembly] .diy-drop {
  grid-row:2;
  width:100%;
  height:100%;
  min-height:0;
  flex:none;
  margin:0;
 }
 #keepsake #diy-stage,#keepsake #diy-stage canvas { width:100%; height:100%; }
 #keepsake .diy-view-controls { grid-row:3; padding:0; margin:0; gap:8px; flex-wrap:nowrap; }
 #keepsake .diy-view-controls button { min-height:44px; padding:7px 12px; }
 #keepsake .diy-view-controls #diy-left,#keepsake .diy-view-controls #diy-right { width:44px; height:44px; flex-shrink:0; }
 #keepsake .diy-view-controls span { font-size:11px; line-height:1.4; }
 #keepsake .diy-view-controls #diy-reset-view { font-size:12px; white-space:nowrap; }
 #keepsake .diy-variant-note { grid-row:4; margin:0; line-height:20px; font-size:11px; }
 #keepsake.room.keepsake[data-experience=assembly] .diy-shelf,
 #keepsake.room.keepsake[data-experience=assembly] .diy-guide {
  align-self:stretch;
  height:100%;
  min-height:0;
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  padding:13px 14px;
  border-radius:10px 18px;
 }
 #keepsake .diy-shelf h2 { margin:0 0 7px; font-size:21px; line-height:1.35; }
 #keepsake .diy-shelf h2 small { display:inline; margin-left:6px; font-size:9px; line-height:1.4; letter-spacing:0; }
 #keepsake .diy-session-tools { gap:4px; margin:0 0 7px; }
 #keepsake .diy-session-tools button { flex:1 1 54px; min-height:44px; padding:5px 4px; font-size:11px; line-height:1.3; border-radius:6px; }
 #keepsake .diy-session-tools small { font-size:10px; line-height:1.5; }
 #keepsake #diy-parts { gap:5px; }
 #keepsake .diy-part {
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:center;
  min-height:58px;
  padding:5px 4px;
  border-radius:6px;
  gap:0 4px;
 }
 #keepsake .diy-part img { grid-column:1; grid-row:1/3; width:34px; height:42px; object-fit:contain; }
 #keepsake .diy-part .part-name { grid-column:2; grid-row:1; font-size:13px; line-height:1.5; letter-spacing:0; text-align:left; }
 #keepsake .diy-part small { grid-column:2; grid-row:2; font-size:10px; line-height:1.4; margin:0; text-align:left; }
 #keepsake .diy-part .part-number { top:4px; left:4px; font-size:8px; }
 #keepsake .diy-shelf>p { margin:6px 0 0; font-size:10px; line-height:1.5; }
 #keepsake .diy-guide::before { width:48px; height:16px; margin:0 0 6px; }
 #keepsake .diy-guide h2,#keepsake[data-complete=true] .diy-guide h2 { margin:5px 0 7px; font-size:23px; line-height:1.35; }
 #keepsake .diy-guide>p:not(.diy-status) { margin:0 0 8px; font-size:12px; line-height:1.65; }
 #keepsake .diy-guide .eyebrow { font-size:10px; }
 #keepsake .diy-options,#keepsake[data-complete=true] .diy-options { margin:8px 0; padding:0; }
 #keepsake .diy-options summary { min-height:44px; font-size:12px; }
 #keepsake .diy-options[open] summary { margin-bottom:7px; }
 #keepsake .diy-guide label { font-size:12px; line-height:1.5; }
 #keepsake .diy-guide input,#keepsake .diy-guide select { min-height:44px; padding:8px 10px; font-size:14px; margin:4px 0 7px; }
 #keepsake .diy-option-pair { gap:8px; }
 #keepsake .diy-guide .soft-button { min-height:44px; margin:4px 0 0; padding:8px 12px; font-size:14px; }
 #keepsake .diy-status,#keepsake[data-complete=true] .diy-status { min-height:0; margin:6px 0; font-size:11px; line-height:1.6; }
 #keepsake .diy-finish .text-button { min-height:44px; margin:2px 0; padding:8px 0; font-size:12px; }
 #keepsake .diy-revise { padding-top:4px; gap:14px; }
 #keepsake .diy-revise button { min-height:44px; padding:5px 0; font-size:12px; }
 #keepsake.room.keepsake[data-experience=assembly] .diy-progress-rail {
  position:relative;
  inset:auto;
  grid-row:2;
  width:100%;
  height:64px;
  min-height:0;
  max-width:1440px;
  margin:0 auto;
  padding:4px 14px 5px;
  border:1px solid #caa36366;
  border-radius:8px;
 }
 #keepsake .diy-progress-caption { margin:0; height:15px; line-height:15px; font-size:11px; }
 #keepsake .diy-progress-caption strong { font-size:15px; }
 #keepsake .diy-progress-caption #diy-save-note { font-size:10px; }
 #keepsake #diy-steps { height:44px; gap:6px; }
 #keepsake #diy-steps:before { top:22px; }
 #keepsake #diy-steps button { min-height:44px; padding:1px 4px; font-size:12px; }
 #keepsake #diy-steps button>span { width:28px; height:28px; font-size:11px; }
 #keepsake.room.keepsake .room-bottom {
  grid-column:1/-1;
  grid-row:4;
  position:relative;
  inset:auto;
  min-height:0;
  height:24px;
  margin:0;
  padding:0;
  background:none;
  border-top:1px solid #c8aa7250;
  align-items:center;
  flex-direction:row;
  gap:12px;
 }
 #keepsake .room-bottom>span,#keepsake .room-bottom>span:last-child { font-size:10px; line-height:1.5; }

 /* A letterboxed canvas is kept in its original intrinsic ratio; only the
    surrounding room and readable right column are constrained. */
 #keepsake.room.keepsake:not([data-experience=assembly]) .keepsake-extra-panel {
  grid-column:1/-1;
  grid-row:3;
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  min-height:0;
  max-width:1440px;
  max-height:none;
  margin:0 auto;
  padding:0;
  overflow:visible;
 }
 #keepsake #craft-panel { display:grid; grid-template-rows:minmax(0,1fr) 52px; gap:8px; }
 #keepsake #craft-panel .craft-room { height:100%; min-height:0; grid-template-columns:minmax(0,1.3fr) minmax(300px,.85fr); align-items:stretch; gap:18px; }
 #keepsake #craft-panel .craft-board { position:relative; top:auto; height:100%; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) 44px 18px; gap:6px; }
 #keepsake #craft-panel .craft-board canvas { width:100%; height:100%; min-height:0; max-height:100%; flex:none; aspect-ratio:900/650; object-fit:contain; border-width:1px; }
 #keepsake #craft-panel .craft-board-tools { min-height:44px; margin:0; gap:10px; }
 #keepsake #craft-panel .craft-board>small { font-size:11px; line-height:18px; }
 #keepsake #craft-panel .craft-guide { height:100%; min-height:0; max-height:100%; padding:16px 20px; overflow-y:auto; overscroll-behavior:contain; border-radius:10px 18px; }
 #keepsake #craft-panel .craft-guide h2 { margin:8px 0 10px; font-size:26px; line-height:1.5; }
 #keepsake #craft-panel .craft-guide>p { font-size:14px; line-height:1.8; }
 #keepsake #craft-panel .craft-chapters { min-height:44px; margin:0; padding:3px 8px; border-width:1px; border-radius:8px; }
 #keepsake #craft-panel .craft-chapters button { padding:3px 8px; min-height:44px; }
 #keepsake #blessing-main { height:100%; min-height:0; max-width:1120px; margin:auto; grid-template-columns:minmax(0,.85fr) minmax(360px,1.15fr); gap:28px; align-items:stretch; padding:0; }
 #keepsake #blessing-main canvas { position:relative; top:auto; width:100%; height:100%; max-width:100%; min-height:0; aspect-ratio:3/4; object-fit:contain; margin:0 auto; box-shadow:none; }
 #keepsake #blessing-main .controls { height:100%; min-height:0; padding:12px 18px; overflow-y:auto; overscroll-behavior:contain; border-radius:10px 18px; }
 #keepsake #blessing-main label { margin:0 0 7px; font-size:14px; line-height:1.5; }
 #keepsake #blessing-main input,#keepsake #blessing-main select { min-height:44px; margin-top:3px; padding:8px 10px; font-size:16px; }
 #keepsake #blessing-main .choice { margin:0 0 7px; gap:6px; }
 #keepsake #blessing-main .choice button { min-height:44px; padding:6px; font-size:12px; }
 #keepsake #blessing-main .blessing-field-row { gap:12px; }
 #keepsake #blessing-main .blessing-custom { margin:0 0 7px; padding:0; }
 #keepsake #blessing-main details { padding-top:3px; }
 #keepsake #blessing-main details summary { min-height:44px; display:flex; align-items:center; font-size:13px; }
 #keepsake #blessing-main .save { min-height:44px; font-size:16px; }
 #keepsake #blessing-main [role=status] { min-height:0; margin:6px 0; font-size:11px; line-height:1.6; }
}

/* Wide but short windows receive the same readable vertical flow as a tablet. */
@media (min-width:1001px) and (max-height:659px) {
 #keepsake.room.keepsake,
 #keepsake.room.keepsake[data-experience=assembly],
 #keepsake.room.keepsake:not([data-experience=assembly]) { height:auto!important; min-height:calc(100svh - var(--museum-head,112px))!important; max-height:none; overflow:visible; }
 #keepsake .diy-heading,#keepsake .keepsake-experience-tabs,#keepsake .diy-variant-switch { position:relative; inset:auto; }
 #keepsake.room.keepsake[data-experience=assembly] .diy-layout { position:relative; inset:auto; margin-top:20px; align-items:start; }
 #keepsake.room.keepsake[data-experience=assembly] .diy-table { height:auto; min-height:460px; }
 #keepsake.room.keepsake[data-experience=assembly] .diy-drop { height:380px; min-height:0; }
 #keepsake.room.keepsake[data-experience=assembly] .diy-guide,#keepsake.room.keepsake[data-experience=assembly] .diy-shelf { max-height:none; overflow:visible; }
 #keepsake.room.keepsake[data-experience=assembly] .diy-progress-rail { position:relative; inset:auto; height:auto; }
}

@media (max-width:1000px) {
 #keepsake .diy-shelf,#keepsake .diy-guide,#keepsake #craft-panel .craft-guide,#keepsake #blessing-main .controls { border-radius:10px 18px; }
 #keepsake #craft-panel .craft-board canvas { object-fit:contain; }
 #keepsake #blessing-main canvas { height:auto; aspect-ratio:3/4; object-fit:contain; }
}