@font-face { font-family: Kitchen; src: local("Yuanti SC"), local("Hannotate SC"), local("PingFang SC"); font-display: swap; }
:root { font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; color: #24483f; background: #f8f8ef; font-synthesis: none; --ink: #24483f; --muted: #6d8176; --green: #356f60; --paper: #f8f8ef; --line: #d9e0d3; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body, #app { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button, input { font: inherit; }
button { border: 0; background: none; color: inherit; cursor: pointer; min-height: 44px; min-width: 44px; touch-action: manipulation; }
button:disabled { opacity: .38; cursor: default; }
button:focus-visible, input:focus-visible, canvas:focus-visible { outline: 3px solid #d78b4d; outline-offset: 3px; }
button:active:not(:disabled) { transform: translateY(1px); }
svg { width: 23px; height: 23px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
img { object-fit: contain; -webkit-user-drag: none; }
.kitchen-app { height: 100dvh; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.topbar { height: 76px; padding: 0 28px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); background: #f9faf2; z-index: 3; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0; text-align: left; font-family: Kitchen, sans-serif; font-size: 20px; font-weight: 800; white-space: nowrap; }
.brand>svg { width: 37px; height: 37px; padding: 6px; background: #dfebdb; border-radius: 13px; }
.brand small { display: block; font-family: "PingFang SC", sans-serif; font-weight: 500; letter-spacing: 3px; font-size: 10px; margin-top: 4px; color: var(--muted); }
.top-actions { display: flex; gap: 7px; }
.top-actions button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; }
.top-actions .muted { opacity: .48; }
.chapters { display: flex; align-items: center; gap: 24px; }
.chapters>span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #9ca89d; white-space: nowrap; }
.chapters i { font: 11px ui-monospace, monospace; border: 1px solid #d8dfd2; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font-style: normal; }
.chapters .current { color: #2d6453; font-weight: 700; }
.chapters .current i { background: #356f60; color: white; border-color: #356f60; }
.chapters .done i { background: #e0eadb; border-color: #e0eadb; color: #56705e; }
.chapters .brand-note { color: #637966; letter-spacing: 4px; }
#workspace { flex: 1; position: relative; min-height: 0; overflow: hidden; }
#stage { position: absolute; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#workspace[data-feeding] .stage-copy, #workspace[data-feeding] #labels, #workspace[data-feeding] #sharing-guide, #workspace[data-feeding] .view-controls { opacity: 0; pointer-events: none; }
.stage-copy { position: absolute; top: 24px; left: 30px; pointer-events: none; max-width: 480px; text-shadow: 0 1px 4px #f9f7e9aa; }
#eyebrow { font-size: 11px; letter-spacing: 2px; font-weight: 600; color: #587366; }
.stage-copy h1 { font-family: Kitchen, sans-serif; font-size: clamp(23px, 2.3vw, 34px); margin: 9px 0 7px; letter-spacing: .5px; }
.stage-copy p { font-size: 13px; margin: 0; color: #4d6a5b; line-height: 1.65; }
#welcome { position: absolute; left: max(38px, calc((100% - 1250px) / 2)); top: 50%; transform: translateY(-52%); max-width: 410px; }
.welcome-tag { font-size: 12px; letter-spacing: 3px; color: #66846b; }
#welcome h1 { font-family: Kitchen, sans-serif; font-size: clamp(38px, 4.3vw, 65px); letter-spacing: 2px; line-height: 1.2; margin: 22px 0; font-weight: 800; }
#welcome p { font-size: 15px; line-height: 1.9; color: #577063; margin-bottom: 22px; }
.shape-picker { display: flex; gap: 10px; margin-bottom: 25px; }
.shape-picker button { display: flex; gap: 8px; align-items: center; border: 1px solid #bacdb8; border-radius: 14px; padding: 8px 14px; font-size: 13px; background: #eff3e4b8; }
.shape-picker b { font: 24px system-ui; color: #6c947b; }
.shape-picker [aria-pressed=true] { background: #d8e5ce; border-color: #7ea68a; }
#welcome .primary { width: 270px; justify-content: space-between; margin-bottom: 10px; }
#welcome>.secondary { width: 270px; justify-content: space-between; background: #f7f8edb8; }
.resume { display: block; font-size: 12px; margin-top: 7px; text-decoration: underline; }
.primary, .secondary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 22px; min-height: 50px; border-radius: 17px; font-size: 14px; font-weight: 650; white-space: nowrap; }
.primary { background: #356f60; color: #fffdf1; box-shadow: 0 4px 0 #245446; }
.secondary { background: #f5f7eced; border: 1px solid #cfd8c5; }
.primary:disabled { box-shadow: none; }
#dock { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 9px 22px; min-height: 104px; background: #f9faf3; border-top: 1px solid #d2dac8; box-shadow: 0 -6px 30px #264b3b08; flex: none; }
[data-stage=home] #dock { min-height: 62px; justify-content: space-between; }
.home-footer { font-size: 12px; letter-spacing: 3px; color: #6c8170; }
.text-button { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; }
.tool-scroll, .studio-tools, .topping-scroll { display: flex; align-items: center; gap: 8px; }
.tool-scroll, .topping-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #cedcc8 transparent; min-width: 0; }
.tool { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 13px; min-width: 68px; height: 80px; padding: 3px 5px 6px; border: 1px solid transparent; touch-action: none; }
.tool img { width: 52px; height: 50px; pointer-events: none; }
.tool>svg { height: 46px; width: 30px; padding: 7px 0; }
.tool span { font-size: 11px; font-weight: 600; }
.tool.active { background: #dfebd8; border-color: #b1c8a5; }
.tool:hover { background: #eaf0e1; }
.topping-scroll { max-width: 480px; border-left: 1px solid var(--line); padding-left: 10px; }
.topping-scroll .tool { min-width: 62px; }
.history-tools { display: flex; flex-direction: column; gap: 1px; padding-right: 12px; border-right: 1px solid var(--line); }
.history-tools button { min-height: 36px; height: 36px; display: grid; place-items: center; }
.history-tools svg { width: 19px; height: 19px; }
.swatches { display: grid; grid-template-columns: repeat(3, 32px); gap: 4px; padding: 0 8px; }
.swatches button { width: 32px; height: 32px; min-height: 32px; min-width: 32px; border: 4px solid #fff; border-radius: 50%; background: var(--swatch); box-shadow: 0 1px 2px #28413230; position: relative; }
.swatches [aria-pressed=true] { outline: 2px solid #547d59; outline-offset: 1px; }
.layer-button { flex: none; display: flex; flex-direction: column; gap: 7px; align-items: center; justify-content: center; font-size: 10px; line-height: 1.5; padding: 4px; }
.layer-button svg { width: 26px; height: 26px; }
.recipe-toggle { border-radius: 13px; border: 1px dashed #a4b59c; font-size: 12px; padding: 10px 15px; flex: none; }
#stage-actions { position: absolute; right: 26px; bottom: 24px; display: flex; align-items: flex-end; gap: 12px; }
.view-controls { position: absolute; left: 24px; bottom: 22px; display: flex; gap: 5px; align-items: center; }
.view-controls button { display: grid; place-items: center; min-height: 37px; height: 37px; min-width: 37px; width: 37px; border-radius: 50%; background: #f9faf0d9; border: 1px solid #d1dac6; }
.view-controls button:last-of-type svg { transform: scaleX(-1); }
.view-controls span { margin-left: 7px; font-size: 10px; color: #657f6b; }
.view-controls svg { width: 17px; height: 17px; }
.dock-instruction { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.dock-instruction strong { font-family: Kitchen, sans-serif; font-size: 16px; }
.dock-instruction span { font-size: 12px; color: var(--muted); }
.bake-progress { display: flex; gap: 20px; align-items: center; width: min(560px, 70vw); font-size: 13px; }
.bake-progress>div { flex: 1; height: 7px; border-radius: 8px; background: #e1e6d7; overflow: hidden; }
.bake-progress i { display: block; height: 100%; border-radius: 8px; background: #d9a05e; }
.bake-progress b { font: 13px ui-monospace, monospace; }
.oven-controls { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.oven-controls label { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; border-radius: 12px; background: #f6f8eccf; font-size: 11px; }
.oven-controls input { width: 105px; accent-color: #5f8c67; }
#recipe-card { position: absolute; top: 24px; right: 28px; width: 218px; background: #fafbefeb; border: 1px solid #d6dfc9; padding: 18px; border-radius: 18px; box-shadow: 0 7px 25px #35533c0d; }
#recipe-card>strong { font-size: 15px; }
#recipe-card>span { display: block; color: #87947d; font-size: 10px; margin: 5px 0 15px; }
#recipe-card>div { display: grid; grid-template-columns: 1fr 32px 58px; align-items: center; padding: 6px 0; border-bottom: 1px solid #e5eadb; font-size: 12px; }
#recipe-card small { font-size: 10px; color: #8c967f; }
#recipe-card p { color: #89947e; font-size: 10px; line-height: 1.7; margin-bottom: 0; }
#labels { position: absolute; inset: 0; pointer-events: none; }
#labels span { position: absolute; transform: translateX(-50%); border-radius: 20px; padding: 5px 11px; font-size: 11px; background: #fbfbe5ce; color: #607359; white-space: nowrap; }
#object-actions { position: absolute; right: 22px; top: 140px; display: flex; flex-direction: column; gap: 7px; align-items: center; }
#object-actions span { font-size: 11px; }
#object-actions button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #cedac2; background: #fafbeded; }
#toast { position: absolute; left: 50%; bottom: 90px; transform: translate(-50%, 12px); max-width: 80%; border-radius: 15px; background: #2d5648ed; color: #fffdef; padding: 12px 20px; font-size: 13px; pointer-events: none; opacity: 0; transition: .2s; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
#storage-warning { position: fixed; left: 12px; bottom: 5px; z-index: 20; background: #fff1cf; border-radius: 10px; padding: 8px; font-size: 11px; }
#loader { position: absolute; inset: 0; background: #edf2e5; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; font-size: 14px; }
.loader-mark { width: 74px; height: 74px; border: 1px solid #b7c9ab; border-radius: 50%; display: grid; place-items: center; animation: breathe 1.6s ease-in-out infinite; }
.loader-mark svg { width: 40px; height: 40px; }
@keyframes breathe { 50% { transform: scale(1.08) rotate(12deg); } }
dialog { border: 1px solid #d4dec8; border-radius: 25px; color: var(--ink); background: #fafbf1; width: min(850px, 92vw); max-height: 90dvh; padding: 32px; overflow: auto; box-shadow: 0 25px 100px #253d3055; }
dialog::backdrop { background: #253f345c; backdrop-filter: blur(7px); }
.dialog-close { position: absolute; right: 16px; top: 16px; }
.dialog-close button { display: grid; place-items: center; }
.dialog-eyebrow { display: block; font-size: 11px; color: #849078; margin-bottom: 12px; }
dialog h2 { font-family: Kitchen, sans-serif; margin: 12px 0 20px; font-size: 28px; }
dialog p { font-size: 14px; line-height: 1.8; color: #6b7d62; }
.dialog-buttons { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.art-preview { display: block; width: 100%; max-height: 340px; border-radius: 15px; object-fit: cover; }
.name-label { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; font-size: 12px; }
.name-label input { width: 100%; padding: 12px 16px; border: 1px solid #becdb4; border-radius: 12px; background: white; font-size: 17px; color: var(--ink); -webkit-user-select: text; user-select: text; }
.album-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.album-grid article { border: 1px solid #d6dec9; border-radius: 16px; padding: 8px 8px 12px; }
.album-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; }
.album-grid h3 { font-size: 15px; padding: 0 8px; }
.album-grid article>div { display: flex; gap: 4px; align-items: center; justify-content: space-around; }
.album-grid button { font-size: 11px; }
.empty-album { text-align: center; padding: 60px 10px; }
@media (max-width: 1100px) {
  .topbar { gap: 12px; padding: 0 18px; }.chapters { gap: 13px; }.brand { font-size: 18px; }
  #dock { gap: 9px; padding: 8px 12px; }.studio-tools { gap: 2px; }.tool { min-width: 57px; }.topping-scroll { gap: 3px; }
  .swatches { grid-template-columns: repeat(2, 30px); gap: 3px; padding: 0 4px; }.swatches button { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
  .history-tools { padding-right: 6px; }.view-controls span { display: none; }#welcome { max-width: 310px; left: 30px; }#welcome h1 { font-size: 48px; }
}
@media (orientation: portrait) {
  .topbar { height: 72px; }.chapters { gap: 9px; }.chapters>span { font-size: 10px; gap: 4px; }.chapters i { width: 18px; height: 18px; font-size: 9px; }
  .brand small { font-size: 9px; letter-spacing: 1px; }.top-actions { gap: 4px; }.top-actions button { min-width: 39px; width: 39px; height: 39px; min-height: 39px; }
  .stage-copy { top: 25px; left: 24px; }.stage-copy h1 { font-size: 29px; }.stage-copy p { font-size: 12px; }
  #welcome { top: 40px; left: 30px; transform: none; max-width: none; }#welcome h1 { font-size: 43px; margin: 14px 0; }#welcome h1 br { display: none; }
  #welcome p { font-size: 13px; margin: 10px 0; }#welcome p br { display: none; }.shape-picker { margin-bottom: 14px; }
  #welcome .primary, #welcome>.secondary { width: 235px; display: inline-flex; margin-right: 8px; }.resume { display: block; }
  #dock { flex-wrap: wrap; gap: 8px; }.topping-scroll { width: calc(100% - 80px); max-width: none; order: 5; border-left: 0; border-top: 1px solid var(--line); padding: 4px 0 0; }
  .layer-button { order: 6; }.swatches { display: flex; gap: 5px; }.studio-tools .tool { min-width: 60px; }.tool { height: 74px; }.tool img { width: 47px; height: 45px; }
  .history-tools { flex-direction: row; }.history-tools button { width: 38px; min-width: 38px; }.view-controls { bottom: 24px; }
  #stage-actions { bottom: 22px; right: 22px; }#recipe-card { top: 140px; right: 22px; }
}
@media (max-width: 650px) {
  .topbar { height: 62px; padding: 0 12px; }.brand { font-size: 15px; gap: 6px; }.brand>svg { width: 30px; height: 30px; }.brand small { font-size: 8px; }.chapters { display: none; }
  .top-actions button { min-width: 35px; width: 35px; height: 35px; min-height: 35px; }.top-actions svg { width: 19px; height: 19px; }
  .stage-copy { top: 16px; left: 18px; right: 12px; }.stage-copy h1 { font-size: 24px; margin-top: 5px; }.stage-copy p { font-size: 11px; max-width: 290px; }#eyebrow { font-size: 9px; }
  #welcome { top: 24px; left: 22px; }#welcome h1 { font-size: 33px; }.welcome-tag { font-size: 10px; }#welcome p { max-width: 290px; font-size: 12px; }
  #welcome .primary, #welcome>.secondary { width: 170px; font-size: 11px; padding: 10px 13px; }#welcome .primary { margin-right: 4px; }
  .shape-picker { gap: 6px; }.shape-picker button { padding: 5px 10px; font-size: 11px; }.shape-picker b { font-size: 20px; }
  .primary, .secondary { font-size: 12px; gap: 6px; min-height: 44px; padding: 10px 14px; border-radius: 13px; }.primary svg, .secondary svg { width: 19px; height: 19px; }
  .view-controls { left: 12px; bottom: 17px; gap: 3px; }.view-controls button { width: 32px; min-width: 32px; height: 34px; min-height: 34px; }
  #stage-actions { right: 12px; bottom: 17px; gap: 5px; }.oven-controls label { padding: 5px; }.oven-controls input { width: 68px; }.oven-controls .secondary { font-size: 10px; }
  #dock { gap: 5px; padding: 5px 8px; min-height: 84px; }.tool { min-width: 51px; height: 64px; border-radius: 10px; }.tool img { width: 39px; height: 38px; }.tool span { font-size: 10px; }.tool>svg { height: 36px; width: 25px; }.studio-tools .tool { min-width: 48px; }
  .history-tools { padding-right: 4px; flex-direction: column; gap: 0; }.history-tools button { min-height: 30px; height: 30px; width: 31px; min-width: 31px; }
  .swatches { display: grid; grid-template-columns: repeat(3, 26px); gap: 3px; }.swatches button { width: 26px; min-width: 26px; height: 26px; min-height: 26px; border-width: 3px; }
  .topping-scroll { width: calc(100% - 70px); }.layer-button { font-size: 9px; width: 61px; }.recipe-toggle { font-size: 10px; padding: 5px; }.tool-scroll { flex: 1; }
  .home-footer { font-size: 10px; letter-spacing: 1px; }[data-stage=home] #dock { min-height: 49px; }.bake-progress { width: 78vw; gap: 10px; font-size: 10px; }.bake-progress>span { max-width: 90px; }.bake-progress b { font-size: 11px; }
  #recipe-card { width: 177px; top: 105px; right: 12px; padding: 12px; }#recipe-card>div { font-size: 10px; grid-template-columns: 1fr 25px 50px; }
  #object-actions { right: 10px; top: 112px; }#object-actions button { width: 38px; height: 38px; min-height: 38px; min-width: 38px; }
  #toast { font-size: 11px; width: max-content; max-width: 90%; padding: 10px 12px; }dialog { padding: 24px 18px; }dialog h2 { font-size: 23px; }.album-grid { grid-template-columns: 1fr; }.art-preview { max-height: 230px; }
}
@media (max-height: 550px) and (orientation: landscape) {
  .topbar { height: 48px; }.brand small { display: none; }.brand { font-size: 16px; }.top-actions button { height: 34px; width: 34px; min-height: 34px; min-width: 34px; }
  .stage-copy { top: 12px; left: 18px; }.stage-copy h1 { font-size: 22px; margin: 4px 0; }.stage-copy p { font-size: 10px; }
  #dock { min-height: 75px; padding: 3px 10px; }.tool { height: 63px; min-width: 51px; }.tool img { height: 38px; width: 38px; }.history-tools button { min-height: 30px; height: 30px; }
  .layer-button { font-size: 9px; }.swatches { grid-template-columns: repeat(3, 27px); }.swatches button { min-height: 27px; height: 27px; min-width: 27px; width: 27px; }
  #welcome { top: 50%; max-width: 340px; }#welcome h1 { font-size: 34px; margin: 10px 0; }#welcome p { font-size: 11px; margin: 8px 0; }#welcome p br { display: none; }
  .shape-picker { margin-bottom: 10px; }.shape-picker button { min-height: 34px; font-size: 10px; padding: 3px 9px; }
  #welcome .primary, #welcome>.secondary { min-height: 39px; font-size: 11px; width: 220px; padding: 7px 15px; }
  #stage-actions { bottom: 12px; }.view-controls { bottom: 12px; }.primary, .secondary { min-height: 40px; padding: 8px 15px; font-size: 12px; }.oven-controls { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Keep every frequently used control large enough for a child's fingertip. */
.swatches { grid-template-columns: repeat(3, 44px); gap: 2px; padding: 0 4px; }
.swatches button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 8px solid #f9faf3; box-shadow: none; }
.swatches [aria-pressed=true] { outline: none; box-shadow: inset 0 0 0 2px #547d59; }
.history-tools button, .view-controls button, .top-actions button, #object-actions button { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
@media (orientation: portrait) {
  [data-stage=studio] #dock { display: grid; grid-template-columns: 48px minmax(0, 1fr) 76px; gap: 4px; }
  [data-stage=studio] .history-tools { grid-column: 1; grid-row: 1; flex-direction: column; padding: 0; }
  [data-stage=studio] .studio-tools { grid-column: 2 / 4; grid-row: 1; justify-content: space-evenly; }
  [data-stage=studio] .swatches { grid-column: 1 / 3; grid-row: 2; display: flex; justify-content: center; }
  [data-stage=studio] .layer-button { grid-column: 3; grid-row: 2; width: auto; flex-direction: row; font-size: 10px; }
  [data-stage=studio] .topping-scroll { grid-column: 1 / 4; grid-row: 3; width: 100%; padding-top: 2px; }
  [data-stage=studio] .tool { height: 64px; }
  [data-stage=studio] .history-tools button { min-height: 44px; height: 44px; }
}

#sharing-guide { position: absolute; top: 30px; right: 30px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 1px solid #d9dfcc; border-radius: 24px; background: #fafbf0e8; font-size: 13px; }
#sharing-guide span { display: flex; align-items: center; gap: 7px; color: #6d8176; }
#sharing-guide b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e6eadb; font-size: 12px; }
#sharing-guide .current { color: #245446; font-weight: 700; }
#sharing-guide .current b { color: white; background: #356f60; }
#sharing-guide i { font-style: normal; color: #a8b39d; }
[data-stage=party] #dock { gap: 22px; min-height: 118px; }
.sharing-action { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-left: 1px solid var(--line); padding-left: 24px; }
#serving-status { flex-basis: 100%; font-size: 12px; color: #657b6b; }
.sharing-action .primary { min-width: 156px; min-height: 52px; }
.sharing-action .secondary { min-height: 52px; padding: 10px 14px; }
.sharing-extras { display: flex; align-items: center; gap: 12px; margin-left: 16px; }
[data-stage=party] #labels span { font-size: 13px; padding: 8px 15px; background: #f9faedec; border: 1px solid #cbdac8; }
@media (max-width: 1100px) {
  [data-stage=party] #dock { gap: 12px; padding: 10px 14px; }
  .sharing-action { padding-left: 12px; }
  .sharing-extras { gap: 4px; margin-left: 0; flex-direction: column; }
  .sharing-extras .secondary { padding: 8px 14px; min-height: 44px; }
  .sharing-extras .text-button { min-height: 44px; font-size: 12px; }
  #sharing-guide { top: 24px; right: 22px; gap: 7px; font-size: 12px; padding: 8px 12px; }
}
@media (max-width: 700px) {
  [data-stage=party] .stage-copy { top: 18px; left: 18px; right: 18px; max-width: none; }
  [data-stage=party] .stage-copy h1 { font-size: 23px; }
  [data-stage=party] .stage-copy p { font-size: 12px; max-width: 340px; }
  #sharing-guide { top: 112px; left: 18px; right: auto; padding: 7px 12px; }
  [data-stage=party] #dock { display: grid; grid-template-columns: 44px 130px minmax(0, 1fr); gap: 6px; padding: 8px 10px; }
  [data-stage=party] .history-tools { padding-right: 0; }
  [data-stage=party] .studio-tools { gap: 0; }
  [data-stage=party] .tool { min-width: 64px; }
  .sharing-action { padding-left: 8px; gap: 4px; }
  .sharing-action .primary { min-width: 0; width: 100%; padding: 9px 10px; font-size: 13px; gap: 5px; }
  .sharing-action .secondary { padding: 4px 8px; min-height: 44px; }
  .sharing-extras { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 6px; }
  .sharing-extras svg { width: 18px; }
  [data-stage=party] #labels span { font-size: 11px; padding: 6px 10px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  [data-stage=party] #dock { min-height: 92px; padding: 3px 12px; }
  [data-stage=party] .stage-copy { top: 12px; }
  [data-stage=party] .stage-copy h1 { font-size: 20px; margin: 4px 0; }
  #sharing-guide { top: 10px; }
  .sharing-extras { flex-direction: row; }
}

/* Pictured actions stay readable without relying on the short text labels. */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; border: 0 !important; }
.pictogram { width: 48px; height: 48px; stroke: #426d61; stroke-width: 1.5; }
.picture-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 7px 14px; min-height: 60px; border-radius: 18px; }
.picture-button .pictogram { width: 46px; height: 46px; }
.picture-button span { font-size: 13px; font-weight: 650; }
.picture-pair { display: inline-flex; align-items: center; gap: 10px; }
.picture-pair>img, .picture-pair>.pictogram { width: 52px; height: 52px; }
.picture-arrow { font-size: 30px; color: #648c77; }
.chapters { gap: 12px; }
.chapters>span { flex-direction: column; gap: 0; position: relative; padding: 2px 8px; opacity: .55; border-radius: 15px; }
.chapters .pictogram { width: 34px; height: 34px; }
.chapters small { font-size: 10px; }
.chapters .current { opacity: 1; background: #e1eddc; box-shadow: inset 0 -3px #7ca78b; }
.chapters .done { opacity: .85; }
.chapters .done::after { content: '✓'; position: absolute; right: 0; top: 0; font-size: 12px; color: #356f60; }
.stage-copy { max-width: 240px; }
.stage-copy h1 { font-size: 23px; margin: 3px 0 7px; }
.guide-controls { display: flex; align-items: center; gap: 6px; pointer-events: auto; }
.guide-controls button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; background: #fff9e9ed; border: 1px solid #c5d5bc; border-radius: 16px; padding: 3px 10px; }
.guide-controls .pictogram { width: 32px; height: 32px; }
.guide-controls span { font-size: 12px; }
.guide-controls b { font-size: 11px; }
.guide-controls [aria-pressed=true] { background: #d7ead8; }
#gesture-demo { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: visible; }
.demo-route { width: 100%; height: 100%; overflow: visible; }
.demo-route path { fill: none; stroke: #fff9da; stroke-width: 6px; stroke-dasharray: 3 13; filter: drop-shadow(0 1px 2px #356f60); }
.demo-hand { position: absolute; left: 0; top: 0; margin: -12px 0 0 -20px; filter: drop-shadow(0 3px 3px #31564655); }
.demo-hand .pictogram { width: 60px; height: 60px; }
.demo-target { position: absolute; width: 48px; height: 48px; margin: -24px; border: 3px solid #ffedaf; border-radius: 50%; box-shadow: 0 0 0 5px #416d6944; }
#workspace[data-feeding] #gesture-demo { display: none; }
#welcome .welcome-choices { display: flex; gap: 12px; }
#welcome .welcome-choices .picture-button { width: 154px; margin: 0; min-height: 128px; flex-direction: column; justify-content: center; padding: 12px; }
#welcome .welcome-choices .pictogram { width: 72px; height: 72px; }
#welcome .welcome-choices span { font-size: 16px; }
#welcome .resume { margin-top: 16px; text-decoration: none; background: #f6f8edda; border: 1px solid #bfd2bd; }
.home-footer .picture-pair>.pictogram { width: 34px; height: 34px; }
.home-footer .picture-arrow { font-size: 22px; }
.bake-progress>.pictogram { width: 48px; height: 48px; }
.bake-progress>div { height: 14px; border: 2px solid #d5dfce; }
.oven-controls label .pictogram { width: 24px; height: 24px; }
.oven-controls label .pictogram:last-child { width: 34px; height: 34px; }
.oven-controls input { height: 44px; }
[data-stage=bake] #dock .bake-progress { flex: 1; max-width: 560px; width: auto; }
[data-stage=bake] #dock .oven-controls { flex-direction: row; align-items: center; }
[data-stage=bake] #dock .oven-controls input { width: 86px; }
#recipe-card { width: 260px; padding: 12px; z-index: 5; background: #fffbedf5; }
#recipe-card header { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
#recipe-card .recipe-pictures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 0; border: 0; }
.recipe-pictures button { position: relative; display: grid; justify-items: center; gap: 3px; padding: 5px 8px 10px; border: 1px solid #d7dfc9; border-radius: 15px; background: #f1f5e9; }
.recipe-pictures img { width: 56px; height: 56px; }
.recipe-pictures span { font-size: 11px; }
.recipe-pictures meter { width: 78px; height: 16px; accent-color: #73a78d; }
.recipe-pictures button::after { content: '★'; position: absolute; bottom: 8px; right: 8px; color: #ab752c; font-size: 14px; }
.ingredient-check { position: absolute; right: 7px; top: 5px; display: none; color: #356f60; }
.enough .ingredient-check { display: block; }
.recipe-pictures .enough { background: #dcebd3; border-color: #81a78b; }
#recipe-card p { text-align: center; font-size: 11px; color: #5a735f; }
#labels>span { padding: 3px; background: #fffbedda; box-shadow: 0 2px 8px #31564622; border-radius: 50%; }
#labels .pictogram { width: 34px; height: 34px; display: block; }
#sharing-guide { padding: 6px 12px; }
#sharing-guide>span { flex-direction: column; gap: 1px; opacity: .5; }
#sharing-guide .pictogram { width: 38px; height: 38px; }
#sharing-guide .current { opacity: 1; }
#sharing-guide small { font-size: 10px; }
#toast { display: flex; align-items: center; gap: 10px; }
#toast .pictogram { width: 32px; height: 32px; }
#serving-status { display: flex; align-items: center; gap: 6px; min-height: 24px; }
#serving-status>.pictogram { width: 24px; height: 24px; }
.bite-dots { display: flex; flex-wrap: wrap; gap: 4px; max-width: 155px; padding: 4px 0; }
.bite-dots i { width: 9px; height: 9px; border-radius: 3px; background: #dcb779; border: 1px solid #ad8d55; }
.bite-dots .eaten { background: transparent; border-color: #d5daca; }
.picture-heading { display: flex; gap: 12px; align-items: center; }
.layer-button .pictogram { width: 42px; height: 42px; }
.tool>.pictogram { width: 44px; height: 44px; padding: 0; }
.empty-album .picture-pair>.pictogram { width: 90px; height: 90px; }
.sharing-extras .picture-button { flex-direction: column; gap: 1px; padding: 4px 8px; }
.sharing-extras .picture-button .pictogram { width: 36px; height: 36px; }
.sharing-extras .picture-button span { font-size: 11px; }
@media (max-width: 1100px) {
  .topbar { gap: 10px; }.chapters { gap: 5px; }.chapters>span { padding: 2px 5px; }
  .sharing-extras { flex-direction: row; gap: 4px; }.sharing-extras .picture-button { min-width: 56px; padding: 4px; }
}
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; height: 108px; gap: 0; padding: 5px 12px; }.brand { font-size: 15px; }.brand small { display: none; }
  .chapters { display: flex; order: 3; width: 100%; justify-content: center; gap: 18px; }.chapters .pictogram { width: 28px; height: 28px; }.chapters small { display: none; }
  [data-stage=home] .topbar { height: 62px; }[data-stage=home] .chapters { display: none; }
  .stage-copy, [data-stage=party] .stage-copy { top: 10px; left: 12px; right: auto; max-width: 190px; }
  .picture-pair>img, .picture-pair>.pictogram { width: 38px; height: 38px; }.picture-pair { gap: 6px; }
  .stage-copy h1, [data-stage=party] .stage-copy h1 { font-size: 18px; }
  .guide-controls button { padding: 2px 6px; }.guide-controls .pictogram { width: 26px; height: 26px; }
  .picture-button { padding: 5px 9px; min-height: 54px; gap: 4px; }.picture-button .pictogram { width: 36px; height: 36px; }.picture-button span { font-size: 11px; }
  #welcome .welcome-choices .picture-button { width: 132px; min-height: 112px; }#welcome .welcome-choices .pictogram { width: 62px; height: 62px; }#welcome .welcome-choices span { font-size: 14px; }
  #welcome .resume { margin-top: 10px; }.shape-picker button { min-height: 48px; }
  #recipe-card { top: 126px; right: 10px; width: 236px; max-height: calc(100% - 136px); overflow-y: auto; }
  #sharing-guide { top: 12px; right: 10px; left: auto; gap: 3px; padding: 4px; }#sharing-guide .pictogram { width: 26px; height: 26px; }#sharing-guide small { font-size: 9px; }
  [data-stage=party] #dock { grid-template-columns: 44px 108px minmax(0, 1fr); }[data-stage=party] .tool { min-width: 52px; }
  .sharing-action .picture-button { padding: 4px; }.sharing-action .picture-button .pictogram { width: 36px; height: 36px; }
  .sharing-extras { gap: 12px; }.sharing-extras .picture-button .pictogram { width: 30px; height: 30px; }
  #serving-status { font-size: 10px; }.recipe-toggle { flex-direction: column; gap: 0; padding: 3px; }.recipe-toggle .pictogram { width: 36px; height: 36px; }
  .dialog-buttons { justify-content: center; }.album-grid .picture-button { padding: 4px; }
  [data-stage=bake] #dock { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 10px; }
  [data-stage=bake] #dock .history-tools { grid-row: 1 / 3; }
  [data-stage=bake] #dock .bake-progress { width: 100%; gap: 8px; }
  [data-stage=bake] #dock .bake-progress>.pictogram { width: 32px; height: 32px; }
  [data-stage=bake] #dock .oven-controls { grid-column: 2; justify-content: center; gap: 8px; }
  [data-stage=bake] #dock .oven-controls label { padding: 0 4px; }
}
@media (max-height: 550px) and (orientation: landscape) {
  .stage-copy { top: 8px; left: 12px; }.stage-copy h1 { font-size: 17px; margin: 2px 0; }
  #picture-guide .picture-pair>img, #picture-guide .pictogram { width: 32px; height: 32px; }
  .guide-controls button { min-height: 44px; }.picture-button { padding: 4px 8px; min-height: 48px; }.picture-button .pictogram { width: 34px; height: 34px; }
  #welcome { top: 8px; transform: none; }#welcome h1 { font-size: 26px; margin: 0 0 6px; }#welcome .welcome-choices .picture-button { width: 138px; min-height: 62px; flex-direction: row; }#welcome .welcome-choices .pictogram { width: 40px; height: 40px; }#welcome .resume { margin-top: 6px; min-height: 44px; }.shape-picker { margin-bottom: 6px; }
  #recipe-card { top: 8px; max-height: calc(100% - 16px); overflow-y: auto; }.recipe-pictures img { width: 38px; height: 38px; }
}