/* Real viewport layout; the projected work surface keeps its 4:3 proportions. */
html,body{min-width:280px;overscroll-behavior:none}
body{display:block}
#frame{width:100%;height:100dvh;max-width:none;max-height:none}
button,.mini-button,.text-button,.brass-button{min-height:48px;font-size:1rem;line-height:1.25;white-space:normal}
.eyebrow,.small-label{font-size:.75rem;letter-spacing:1.5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#masthead{top:max(20px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));gap:16px}
#masthead .icon-button{flex-shrink:0}
#museum-ui{position:absolute;inset:0;pointer-events:none}
#museum-ui button,#joystick{pointer-events:auto}
.museum-caption{left:max(24px,env(safe-area-inset-left));top:22%}
.museum-navigation{position:absolute;left:max(28px,env(safe-area-inset-left));right:max(28px,env(safe-area-inset-right));bottom:calc(66px + env(safe-area-inset-bottom));display:grid;grid-template-columns:112px minmax(0,1fr) 112px;align-items:end;gap:24px;pointer-events:none}
.movement{grid-column:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
#joystick{position:relative;inset:auto;width:112px;height:112px;flex-shrink:0}
#stick{width:48px;height:48px;left:31px;top:31px}
#move-label{position:static;inset:auto;width:auto;font-size:.75rem;letter-spacing:1px}
#museum-actions{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
#interact,#approach{position:static;inset:auto;transform:none;max-width:100%;white-space:normal}
#interact{min-width:180px}
#look-label{right:max(28px,env(safe-area-inset-right));bottom:calc(168px + env(safe-area-inset-bottom));font-size:.75rem;letter-spacing:1px}
#museum-footer{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:env(safe-area-inset-bottom);min-height:56px;font-size:.875rem;gap:12px}
.museum-footer-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
#view-plate{right:max(24px,env(safe-area-inset-right));top:94px;max-width:210px;font-size:.875rem}
body.left-handed .movement{grid-column:3}
body.left-handed #joystick,body.left-handed #move-label{left:auto;right:auto}
body.left-handed #look-label{left:max(28px,env(safe-area-inset-left));right:auto}

#game-ui{display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);grid-template-areas:'header' 'surface' 'dock';padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);gap:0;overflow:hidden}
#game-header{grid-area:header;position:relative;padding:10px clamp(12px,3vw,36px) 8px;background:linear-gradient(#181a24f5,#30251dde);z-index:2;min-width:0;max-height:34dvh;overflow:auto;touch-action:pan-y}
.stage-heading{display:flex;align-items:center;gap:16px;min-height:48px;min-width:0}
#stage-strip{position:static;inset:auto;display:flex;flex:1;min-width:0;justify-content:center;gap:clamp(8px,1.2vw,20px);font-size:.875rem;letter-spacing:0}
#stage-strip span{white-space:nowrap;line-height:1.25}
#mode-badge{flex:0 0 auto;padding:6px 9px;border:1px solid #c9a66b55;border-radius:999px;color:#d9c39e;background:#6c4c2844;font-size:.6875rem;letter-spacing:1px;white-space:nowrap}
#mode-badge[data-mode=assessment]{color:#d8dcec;border-color:#9eaed755;background:#2d3d6544}
#table-settings{position:static;inset:auto;width:48px;height:48px;flex:0 0 48px;margin:0;font-size:1.2rem}
#instruction{position:static;inset:auto;margin:2px auto 0;max-width:820px;min-height:0;font-size:1rem;line-height:1.4;text-align:center;overflow-wrap:anywhere}
#production-surface{grid-area:surface;position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse,#34261c,#16131a);pointer-events:auto;touch-action:none}
#board{position:absolute;inset:auto;display:block;width:1024px;height:768px;max-width:none;max-height:none;transform:none;touch-action:none}
#game-ui.controls-hidden #game-header,#game-ui.controls-hidden #production-dock{visibility:hidden;pointer-events:none}
#game-ui.finishing #game-header,#game-ui.finishing #production-dock{visibility:hidden;pointer-events:none}
#game-ui.controls-hidden #production-surface{background:transparent}
#game-ui.controls-hidden #board{visibility:hidden}
#production-dock{grid-area:dock;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;padding:10px clamp(12px,3vw,36px);background:#211b18f5;border-top:1px solid #d8b87930;min-width:0;max-height:42dvh;overflow:auto;touch-action:pan-y;pointer-events:auto}
.craft-reading{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px 14px;border:1px solid #b88e5b55;border-radius:4px;background:linear-gradient(120deg,#51392399,#2d241db8);color:#ead7b4;font-family:Georgia,serif;font-size:.9375rem;letter-spacing:.2px;white-space:nowrap}
#preparation-controls{display:flex;align-items:center;gap:12px;flex:1 1 420px;max-width:720px;min-width:0}
#dose-control{position:static;inset:auto;width:auto;min-width:0;flex:1 1 190px;height:auto;min-height:48px;font-size:1rem;gap:10px}
#dose{height:48px;min-width:50px;width:100%;flex:1}
#dose-value{min-width:32px}
#accessible-controls{position:static;inset:auto;display:flex;flex:1 1 230px;gap:8px;align-items:center;min-width:0;font-size:1rem}
#ingredient-access-label{flex:1;min-width:0}
#ingredient-access{width:100%;max-width:100%;min-height:48px;font-size:1rem;border-radius:3px;padding:8px}
#add-access{flex-shrink:0}
#heat-controls{display:flex;flex-direction:column;align-items:stretch;gap:9px;flex:1 1 440px;min-width:0;max-width:750px}
.thermal-instruments{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;padding:10px 14px;background:linear-gradient(110deg,#402b20,#2b241e);border:1px solid #bd935d45;border-radius:6px;min-width:0}
.heat-instrument,.stir-instrument{display:grid;grid-template-columns:1fr;gap:3px;min-width:0}
.instrument-label{font-size:.65rem;letter-spacing:1.5px;color:#c4ac86;white-space:nowrap}
#heat-reading,#stir-reading{font-size:1.125rem;font-family:Georgia,serif;line-height:1.3;text-align:left;font-variant-numeric:tabular-nums;color:#f8e6c1;white-space:nowrap}
#stir-reading[data-rhythm=fast]{color:#f1aa88}#stir-reading[data-rhythm=good]{color:#e6dea0}
#batch-reading{font-size:.75rem;line-height:1.4;color:#ccba9d;white-space:nowrap}
#heat-track{height:5px;background:linear-gradient(90deg,#546e88,#bb9762 60%,#b75a3c);position:relative;margin:6px 0 3px;border-radius:3px}
#heat-target{position:absolute;top:-3px;height:11px;border:1px solid #fff0bf;box-shadow:0 0 0 1px #201a17;border-radius:2px}
#heat-needle{position:absolute;top:-4px;width:3px;height:13px;background:#fff9e7;transform:translateX(-1px);transition:left .2s linear;border-radius:2px}
.bellows-tools{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:8px;min-width:0}
.bellows-tools button{min-width:0;font-size:.875rem;padding:9px 8px;line-height:1.25}
#latch-bellows[aria-pressed=true]{background:#c49c5e;color:#261c15;border-color:#ecd2a2}
#bellows,#microphone,#recipe-button,#focus-board,#next-stage{position:static;inset:auto;transform:none;width:auto;height:auto;min-width:0;max-width:none;min-height:48px;font-size:1rem;padding:10px 14px}
#bellows{touch-action:none;flex:1 1 180px;background:#79523180;border-color:#c89b65}
#bellows.active{background:#b87535;color:#fff2d9}
#microphone{flex:1 1 150px}
.tool-actions{display:flex;gap:8px;flex:0 1 auto;min-width:0}
.tool-actions button{flex:1 1 auto}
#next-stage{flex:0 1 auto;white-space:normal;max-width:280px}
#focus-board[aria-pressed=true]{background:#b8955d44;border-color:#e0b979}
#toast{top:auto;bottom:calc(210px + env(safe-area-inset-bottom));font-size:1rem;line-height:1.4;max-width:min(90%,520px);width:max-content}
body.table #toast{top:calc(100px + env(safe-area-inset-top));bottom:auto}

dialog{position:fixed;max-width:calc(100vw - 28px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));width:720px;overscroll-behavior:contain}
#dialog-body{padding:36px clamp(20px,5vw,40px);overflow-wrap:anywhere}
#dialog-title{padding-right:22px;font-size:clamp(1.5rem,4vw,2rem)}
.dialog-close{position:absolute;top:4px;right:4px;width:48px;height:48px;background:#e9decae8;z-index:2}
.dialog-actions{gap:10px}
.dialog-actions button{flex:1 1 160px}
dialog .history-card p,dialog .dialog-intro{font-size:1rem}
.source,.image-credit,.data-note,.help-key{font-size:.875rem!important;line-height:1.6}
.history-card img{float:none;display:block;width:100%;max-height:none;aspect-ratio:3/2;object-fit:cover;margin:0 0 16px;background:#30241b}
.history-card h3{font-size:1.375rem}
.history-card{padding:16px}
.journey-list{list-style:none;margin:20px 0;padding:0;border-top:1px solid #9f805943}
.journey-list li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid #9f805943}
.journey-list li>b{display:grid;place-items:center;width:42px;height:42px;border:1px solid #9a7847;border-radius:50%;color:#826033;font-family:Georgia,serif;font-weight:400}
.journey-list span{font-size:.9375rem;line-height:1.45}.journey-list strong{display:block;margin-bottom:2px;color:#5e422d;font-family:Georgia,serif;font-size:1.05rem}
.name-input{font-size:1.125rem}
.memory-formats button{font-size:1rem;flex:1 1 200px}
.memory-image{max-height:none}
.score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.score-row{font-size:.9375rem}
.skill-line{font-size:.875rem;grid-template-columns:minmax(95px,1.4fr) minmax(30px,1fr) 44px}
.serving-heading{top:max(24px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}
.serving-heading h2{font-size:clamp(1.5rem,4vw,2.5rem);margin:8px 0;overflow-wrap:anywhere}
.serving-heading p:not(.eyebrow){font-size:1rem}
.serving-actions{bottom:calc(20px + env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));gap:10px;flex-wrap:wrap}
.serving-actions button{font-size:1rem;min-height:48px}
.plate-rotate{bottom:calc(82px + env(safe-area-inset-bottom));font-size:.875rem;margin:0 16px}
body.large #instruction{font-size:1.25rem}
body.large #stage-strip{font-size:1rem}
body.large #production-dock button,body.large #production-dock label{font-size:1.125rem}

@media(max-width:1100px){
 #stage-strip{justify-content:flex-start;font-size:1rem}
 #stage-strip span{display:none}
 #stage-strip span.current{display:block;border:0;padding:0;color:#ffe0a4}
 #stage-strip .stage-count{display:inline;color:#baac96;margin-left:12px;font-size:.875rem}
}
@media(min-width:1101px){#stage-strip .stage-count{display:none}}
@media(max-width:760px){
 #masthead{top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));gap:12px}
 h1{font-size:1.375rem}.brand-mark{width:32px;height:32px;font-size:24px;flex:0 0 32px}
 .museum-caption{display:none}
 .museum-navigation{grid-template-columns:96px minmax(0,1fr);gap:20px;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));bottom:calc(64px + env(safe-area-inset-bottom))}
 #joystick{width:96px;height:96px}#stick{width:44px;height:44px;left:25px;top:25px}
 #museum-actions{align-items:stretch}
 #interact{min-width:0}
 #look-label{bottom:calc(210px + env(safe-area-inset-bottom));right:max(18px,env(safe-area-inset-right));font-size:.75rem;letter-spacing:0}
 #museum-footer>span{display:none}#museum-footer{justify-content:flex-end}.museum-footer-actions{width:100%;justify-content:flex-end}
 body.left-handed .museum-navigation{grid-template-columns:minmax(0,1fr) 96px}
 body.left-handed .movement{grid-column:2}body.left-handed #museum-actions{grid-column:1}
 #view-plate{top:88px;right:max(16px,env(safe-area-inset-right));font-size:.875rem}
 #game-header{padding:6px 12px 10px}
 #instruction{text-align:left;font-size:1rem;min-height:2.8em}
 #production-dock{padding:10px 12px;gap:8px;max-height:44dvh}
 #preparation-controls{flex:1 1 100%;flex-wrap:wrap;gap:4px}
 .craft-reading{flex:1 1 100%;min-height:44px;white-space:normal}
 #dose-control{flex-basis:100%}
 #accessible-controls{flex-basis:100%}
 .tool-actions{flex:1 1 100%;gap:8px}
 #next-stage{flex:1 1 100%;max-width:none}
 #heat-controls{flex-wrap:wrap;gap:8px;flex-basis:100%}
 #bellows{flex:1 1 45%}#microphone{flex:1 1 38%}
 #heat-reading{flex:1 1 100%;text-align:left}
 #production-dock button{font-size:.9375rem;padding:10px 8px}
 #production-dock .tool-actions{flex:1 1 calc(50% - 8px)}
 #next-stage{flex:1 1 calc(50% - 8px)}
 #recipe-button,#focus-board{font-size:.875rem;padding:8px}
 .thermal-instruments{gap:12px;padding:8px 12px}
 #production-dock .bellows-tools button{font-size:.8125rem;padding:8px 5px;min-height:48px}
 body.table #toast{top:calc(112px + env(safe-area-inset-top));max-width:94%;font-size:.9375rem}
 .serving-actions #make-memory{flex:1 1 100%}
 .serving-actions .mini-button{flex:1 1 40%}
 .plate-rotate{bottom:calc(142px + env(safe-area-inset-bottom))}
 .score-grid{grid-template-columns:minmax(0,1fr)}
}
/* A short landscape phone gets a side tray instead of overlapping the scene. */
@media(min-width:600px) and (max-height:560px) and (orientation:landscape){
 #game-ui{grid-template-columns:minmax(0,1fr) clamp(232px,31vw,310px);grid-template-rows:auto minmax(0,1fr);grid-template-areas:'header dock' 'surface dock'}
 #game-header{padding:4px 12px 8px;max-height:40dvh}
 #instruction{font-size:.9375rem;text-align:left}
 #production-dock{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;padding:12px;gap:10px;max-height:none;overflow-y:auto;border-top:0;border-left:1px solid #d8b87930}
 #next-stage{position:sticky;bottom:0;z-index:4;width:100%;box-shadow:0 -10px 22px #211b18}
 #preparation-controls,#heat-controls{flex:0 0 auto;max-width:none;flex-direction:column;align-items:stretch;gap:8px}
 .craft-reading{flex:0 0 auto;width:100%;white-space:normal}
 #dose-control,#accessible-controls{flex:0 0 auto}
 #accessible-controls{flex-wrap:wrap}#add-access{flex:1 1 100%}
 #heat-controls{flex-wrap:nowrap}
 .thermal-instruments{grid-template-columns:1fr;gap:10px}
 .bellows-tools{grid-template-columns:1fr 1fr}
 .bellows-tools #bellows{grid-column:1/-1}
 #bellows,#microphone,#heat-reading,.tool-actions,#next-stage{flex:0 0 auto;max-width:none}
 .tool-actions{display:flex;flex-wrap:wrap}.tool-actions button{flex:1 1 100%}
 #heat-reading{text-align:left}
 #masthead{top:max(8px,env(safe-area-inset-top))}.museum-caption,#look-label{display:none}
 .museum-navigation{grid-template-columns:96px minmax(0,1fr) 96px;bottom:calc(52px + env(safe-area-inset-bottom));max-width:700px;margin:auto}
 #museum-actions{grid-column:2;align-items:center}#interact,#approach{min-width:170px}
 #joystick{width:88px;height:88px}#stick{left:21px;top:21px;width:44px;height:44px}
 body.left-handed .museum-navigation{grid-template-columns:96px minmax(0,1fr) 96px}
 body.left-handed .movement{grid-column:3}body.left-handed #museum-actions{grid-column:2}
 #view-plate{top:64px}.serving-heading{top:max(10px,env(safe-area-inset-top));text-align:left;right:50%}
 .serving-heading h2{font-size:1.5rem}.serving-actions{left:auto;width:230px;top:50%;bottom:auto;transform:translateY(-25%)}
 .serving-actions button{width:100%;flex:0 0 auto!important}
 .plate-rotate{bottom:16px;right:250px;font-size:.875rem}
 body.table #toast{left:12px;transform:none;max-width:calc(69vw - 24px)}
}
@media(max-width:760px) and (max-height:700px) and (orientation:portrait){
 #game-header{padding-top:2px;padding-bottom:6px}
 #instruction{font-size:.875rem;line-height:1.35;min-height:2.7em}
 #production-dock{gap:6px;padding:6px 10px}
 #heat-controls{gap:6px}
 .thermal-instruments{padding:6px 10px}
 #heat-reading,#stir-reading{font-size:1rem}
}
@media(max-width:360px){
 #masthead .eyebrow{letter-spacing:.4px}.brand-mark{display:none}
 .museum-navigation{grid-template-columns:88px minmax(0,1fr);gap:12px}
 #joystick{width:88px;height:88px}#stick{left:21px;top:21px}
 #dialog-body{padding:30px 16px}.history-card{padding:12px}
 .journey-list li{grid-template-columns:38px minmax(0,1fr);gap:10px}.journey-list li>b{width:36px;height:36px}
 #mode-badge{font-size:.625rem;letter-spacing:.4px;padding:5px 7px}
 #production-dock .tool-actions,#next-stage{flex-basis:100%}
}


/* v0.7 audio controls and precision-dose UX */
.brand-copy{min-width:0}
.brand-copy h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sound-toggle{margin-left:auto;font-size:1.05rem}
#settings{margin-left:0}
#now-playing{position:absolute;z-index:5;top:92px;left:max(24px,env(safe-area-inset-left));display:flex;align-items:center;gap:10px;max-width:min(320px,58vw);padding:8px 12px;border:1px solid #91a5d02e;border-radius:999px;background:linear-gradient(100deg,#10192dcc,#1d2840b8);box-shadow:0 8px 28px #02071355;color:#efe2ca;pointer-events:none;backdrop-filter:blur(8px)}
#masthead[hidden]+#now-playing,body.table #now-playing{display:none}
#now-playing>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.2}
#now-playing b{font-family:Georgia,serif;font-size:.875rem;font-weight:500;white-space:nowrap}
#now-playing small{font-size:.6875rem;color:#aeb9d1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-bars{display:flex;align-items:center;justify-content:center;gap:2px;width:18px;height:22px;flex:0 0 18px}
.music-bars i{width:2px;height:12px;border-radius:2px;background:#ddb86e;transform-origin:center;animation:music-pulse .9s ease-in-out infinite alternate}
.music-bars i:nth-child(2){animation-delay:-.48s;height:18px}.music-bars i:nth-child(3){animation-delay:-.22s;height:9px}
#now-playing[data-state=muted]{opacity:.66}
#now-playing[data-state=muted] .music-bars i{animation-play-state:paused;transform:scaleY(.25)}
@keyframes music-pulse{from{transform:scaleY(.35);opacity:.55}to{transform:scaleY(1);opacity:1}}

.dose-stepper{display:flex;align-items:center;gap:8px;flex:1 1 360px;min-width:0}
.dose-stepper #dose-control{flex:1 1 auto}
#dose-minus,#dose-plus{flex:0 0 48px;width:48px;padding:0;font-size:1.5rem;font-family:Georgia,serif;border-color:#c59d665c;background:#5b402c66}
#dose-value{font-weight:700;color:#ffe2ae}
.audio-settings{margin:16px 0 12px;padding:5px 16px;border:1px solid #9a784737;border-radius:6px;background:#7d5b2710}
.audio-settings .volume-option{display:grid;grid-template-columns:minmax(130px,auto) minmax(110px,1fr) 48px;gap:14px;align-items:center}
.audio-settings input[type=range]{width:100%;min-width:80px}
button:not(:disabled):active{filter:brightness(1.14)}

@media(max-width:760px){
 #masthead{gap:8px}
 #now-playing{top:78px;left:max(16px,env(safe-area-inset-left));padding:7px 10px;max-width:65vw}
 #now-playing small{display:none}
 .dose-stepper{flex-basis:100%;gap:6px}
 .audio-settings{padding:4px 12px}
 .audio-settings .volume-option{grid-template-columns:1fr 46px;gap:4px 10px;padding:8px 0}
 .audio-settings .volume-option input{grid-column:1/-1;grid-row:2}
 .audio-settings .volume-option output{grid-column:2;grid-row:1;text-align:right}
}
@media(max-width:420px){
 .brand-mark{display:none}
 #masthead{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}
 #masthead .brand-copy{flex:1 1 auto}
 #masthead h1{font-size:1.12rem}
 #now-playing{left:max(12px,env(safe-area-inset-left))}
}
@media(max-width:330px){
 #masthead .eyebrow{display:none}
 #now-playing{top:70px}
 #dose-minus,#dose-plus{flex-basis:44px;width:44px}
}
@media(min-width:600px) and (max-height:560px) and (orientation:landscape){
 #now-playing{display:none}
 .dose-stepper{flex:0 0 auto;width:100%}
}
@media(pointer:coarse){
 #dose-minus,#dose-plus{min-width:52px;min-height:52px}
 #dose{min-height:52px}
}
@media(prefers-contrast:more){
 #game-header,#production-dock,#now-playing{background:#111827}
 .mini-button,.icon-button,.craft-reading,.thermal-instruments{border-color:#f3d399}
 #instruction,#heat-reading,#stir-reading{color:#fff}
}
body.reduced .music-bars i{animation:none;transform:scaleY(.55)}
/* Contextual teaching cues stay tied to real controls and cease pulsing quickly. */
.coach-attention{position:relative;z-index:3;border-color:#f8dc9c!important;box-shadow:0 0 0 3px #f7d38780,0 0 22px #e5ae5a72!important;animation:coach-breathe 1.3s ease-in-out 2}
#board.coach-board{box-shadow:inset 0 0 0 4px #ebc6819c}
@keyframes coach-breathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}
body.reduced .coach-attention{animation:none}
.portrait-studio{margin:16px 0 20px;padding:18px;background:linear-gradient(145deg,#fffaf0,#f2e2c5);border:1px solid #b6925f;border-radius:7px;box-shadow:0 14px 34px #3f251a16}.portrait-studio h3{margin:3px 0 6px;color:#49311f;font-family:Georgia,serif;font-size:1.25rem}.portrait-studio>p{margin:6px 0 12px;line-height:1.5}.step-label{font-size:.72rem!important;letter-spacing:.17em;color:#88633a;font-weight:750}.portrait-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 8px}
.costume-choice{border:0;padding:0;margin:18px 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.costume-choice legend{grid-column:1/-1;font-family:Georgia,serif;font-size:1rem;color:#60452d;margin-bottom:9px}.costume-choice legend>b,.step-title>b{display:inline-grid;place-items:center;width:27px;height:27px;margin-right:7px;border-radius:50%;background:#79542f;color:#fff5df;font:700 .83rem system-ui}.costume-choice label{position:relative;display:flex;align-items:center;min-height:82px;padding:12px;border:1px solid #aa875d;border-radius:5px;background:#fffaf0;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.costume-choice label:hover{transform:translateY(-1px)}.costume-choice input{width:22px;height:22px;margin:0 11px 0 0;accent-color:#805928}.costume-choice span{display:grid;gap:3px}.costume-choice b{font-size:.96rem;color:#4d331f}.costume-choice small{font-size:.79rem;line-height:1.35;color:#765b41}.costume-choice label:has(input:checked){border-color:#805928;box-shadow:0 0 0 3px #b9986857,0 8px 18px #50341f17;background:#f7e9d0}.memory-formats .selected{background:#886039;color:#fff8e8;border-color:#6c4827}
.photo-step{margin-top:14px;padding:14px;border-top:1px solid #b99a6966}.photo-step.is-locked{opacity:.55}.step-title{margin:0!important;font-family:Georgia,serif;color:#5e4127;font-size:1rem!important}.photo-tip{font-size:.8rem!important;color:#745a42;margin:7px 0 0!important}
.photo-chooser{position:relative;display:inline-grid;place-items:center;min-height:48px;padding:10px 16px;border:1px solid #9e7442;border-radius:4px;background:#e3cb9c54;color:#5a3e25;cursor:pointer;font-weight:650}
.photo-chooser:focus-within{outline:3px solid #7f5429;outline-offset:3px}
.photo-chooser input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.photo-chooser.disabled{cursor:not-allowed}.source-photo{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px;margin-top:10px;padding:9px;background:#fffaf0;border:1px solid #c7ab80;border-radius:5px}.source-photo img{width:64px;height:64px;object-fit:cover;border-radius:3px}.source-photo span{font-size:.84rem;color:#5c422d;overflow-wrap:anywhere}.portrait-consent{display:flex;gap:10px;align-items:flex-start;margin:15px 0;padding:12px;background:#fffaf0;border:1px solid #c7ab80;border-radius:5px;color:#5a412d;font-size:.84rem;line-height:1.45}.portrait-consent input{flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:#805928}.portrait-generate{width:100%;margin-top:2px}.portrait-status{min-height:24px;margin:9px 0 0!important;font-size:.84rem!important;color:#6f5135}.portrait-generate:disabled{filter:saturate(.25);opacity:.58}
.qr-panel{display:grid;grid-template-columns:256px minmax(0,1fr);align-items:center;gap:12px 20px;margin:18px 0;padding:18px;background:#fff8eb;border:1px solid #b99a69;border-radius:6px}
.qr-panel canvas{grid-row:1/3;max-width:100%;height:auto;image-rendering:pixelated;border:8px solid #fff}
.qr-panel p{margin:0;align-self:end}.qr-panel a{align-self:start;overflow-wrap:anywhere}
@media(max-width:540px){.portrait-studio{padding:14px;margin-inline:-2px}.costume-choice{grid-template-columns:1fr}.qr-panel{grid-template-columns:1fr;justify-items:center;text-align:center}.qr-panel canvas{grid-row:auto;width:min(256px,90%)}.qr-panel a{max-width:100%}}
@media(prefers-reduced-motion:reduce){
 .music-bars i{animation:none;transform:scaleY(.55)}
 .coach-attention{animation:none}
 button{transition:none!important}
}

/* One quiet, persistent next-action highlight. */
.coach-attention{animation:coach-breathe 2.8s ease-in-out infinite;box-shadow:0 0 0 2px #f7d38788,0 0 16px #e5ae5a44!important}
#board.coach-board{box-shadow:none}
body.reduced .coach-attention{animation:none}
@media(prefers-reduced-motion:reduce){.coach-attention{animation:none}}


/* New dialog content always starts at its heading, without smooth scroll or anchoring. */
#dialog,#dialog-body{scroll-behavior:auto;overflow-anchor:none}
#dialog-title:focus{outline:none}

.portrait-studio[hidden]{display:none}