:root{
--paper:#f3eadc;--ink:#2a2f24;--mute:#4e5644;--line:#d4c8b2;--tomato:#a53d24;--olive:#5e6644;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Songti TC","PMingLiU",serif;
--sans:"PingFang TC","Hiragino Sans CNS","Noto Sans TC","Microsoft JhengHei",sans-serif
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.7;background:var(--paper)}
img{max-width:100%;height:auto;display:block}
a{color:var(--tomato)}
a:hover{color:var(--ink)}
.skip{position:absolute;left:.5rem;top:.5rem;transform:translateY(-160%);background:var(--ink);color:var(--paper);padding:.75rem 1rem;min-height:44px;z-index:8;text-decoration:none}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--tomato);outline-offset:3px}
.wrap{width:min(70rem,calc(100% - 2rem));margin-inline:auto}
header{border-bottom:1px solid var(--line);padding-block:.75rem;background:var(--paper)}
.head{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between}
.mast{margin:0;font-family:var(--serif);font-size:1.05rem}
nav{display:flex;flex-wrap:wrap;gap:.15rem}
nav a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;padding:0 .7rem;color:var(--ink);text-decoration:none}
nav a:hover{color:var(--tomato)}
.intro{padding:1.75rem 0 1rem}
.kicker{margin:0 0 .4rem;color:var(--olive);letter-spacing:.12em;font-size:.75rem}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.18;letter-spacing:-.02em;color:var(--ink)}
h1{margin:.2rem 0 .8rem;font-size:clamp(2.05rem,7vw,4.2rem);max-width:14ch}
h2{margin:.2rem 0 .7rem;font-size:clamp(1.45rem,3.4vw,2.05rem)}
h3{margin:1.2rem 0 .45rem;font-size:1.2rem}
.lede{font-size:1.14rem;max-width:38rem;color:var(--mute)}
.aside{color:var(--olive);border-left:3px solid var(--tomato);padding-left:.8rem}
.ghost,.row button,#replay,#static-toggle{min-height:44px;min-width:44px;padding:0 1rem;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}
.ghost{margin:.4rem 0 0}
.row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.55rem 0}
.row button[aria-pressed="true"]{background:var(--tomato);color:var(--paper);border-color:var(--tomato)}
.status{margin:.2rem 0 .6rem;font-family:var(--serif)}
.result{padding:1rem 1.1rem;background:#efe6d4;border:1px solid var(--line);max-width:38rem}
.notes p{max-width:38rem}
.beat{padding-block:1.15rem 1.8rem;scroll-margin-top:.4rem}
.copy p{max-width:38rem}
.story-grid{display:flex;flex-direction:column;gap:.85rem}
.pasta-workstation{display:flex;flex-direction:column;align-items:center;gap:.65rem;width:100%}
.pasta-world{position:relative;aspect-ratio:1/1;width:min(100%,220px);max-width:220px;margin:0;background:transparent;filter:drop-shadow(0 10px 18px rgba(42,47,36,.16))}
.pasta-world img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block;pointer-events:none}
.pasta-world img[hidden]{display:none}
.pasta-base{z-index:1;transform:translate3d(0,calc((1 - var(--pasta-progress,1)) * 6%),0);transform-origin:50% 58%}
.pasta-fill{z-index:2;clip-path:inset(0 0 100% 0)}
.pasta-fill.is-reveal{animation:pasta-plate-reveal 600ms ease-out 1 both}
@keyframes pasta-plate-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.stage.is-gentle .pasta-base{transition:opacity .35s ease,transform .35s ease}
.stage.is-static .pasta-base{transition:none!important;transform:none}
.pasta-controls{width:100%;max-width:22rem;font-size:1rem}
.picks{margin:.35rem 0}
.picks .row{display:flex;flex-wrap:wrap;gap:.5rem;margin:.45rem 0}
.picks button,.scrub input[type="range"],.ghost{min-height:44px;min-width:44px}
.scrub{display:flex;align-items:center;gap:.65rem;margin-top:.55rem;font-size:1rem}
.scrub input[type="range"]{flex:1;max-width:16rem}
.workstation-note{margin:.25rem 0 0;text-align:center;max-width:22rem}
.notes p{margin:.55rem 0}
.result{margin:1rem 0;padding:.75rem 0;border-top:1px solid var(--line)}
.guide{padding:2.6rem 0 3.4rem;border-top:1px solid var(--line);scroll-margin-top:.4rem}
.guide p{max-width:40rem}
.cta{margin-top:1.6rem}
footer{border-top:1px solid var(--line);padding:1.4rem 0 2.2rem;color:var(--mute);font-size:.95rem}
html.js .no-js-only{display:none}
.pasta-base.is-arrive{animation:pasta-arrive 450ms ease-out 1 both}
@keyframes pasta-arrive{from{opacity:1;transform:translateY(.4rem)}to{opacity:1;transform:translateY(0)}}
.stage.is-gentle{transition:none}
.stage.is-gentle .pasta-base,.stage.is-static .pasta-base{animation:none!important;transition:none!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
.pasta-base.is-arrive,.pasta-base,.pasta-fill.is-reveal,.stage.is-gentle .pasta-base{animation:none!important;transition:none!important;transform:none!important}
}
@media (max-width:17.5rem){
.story-grid{display:flex;flex-direction:column;gap:.75rem}
.pasta-workstation{position:static;align-items:center}
.pasta-world{width:min(100%,13.75rem);max-width:100%}
.pasta-controls{max-width:22rem;width:100%}
.pasta-controls .row,.pasta-controls .scrub{display:flex;flex-direction:column;align-items:stretch}
.pasta-controls .row > *,.pasta-controls button{width:100%;min-width:0;min-height:44px;box-sizing:border-box}
.pasta-controls .scrub input{width:100%;box-sizing:border-box}
.pasta-controls label{font-size:16px;white-space:normal;overflow-wrap:anywhere}
body{font-size:1.05rem}
.wrap{width:calc(100% - 1.25rem)}
h1{font-size:2.05rem}
}
@media (min-width:17.5625rem) and (max-width:63.99rem){
.wrap{width:calc(100% - 2rem)}
.story-grid{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:.85rem 1.1rem;align-items:start}
.pasta-workstation{align-self:start;align-items:stretch;max-height:none;overflow:visible;min-width:0}
html.js .pasta-workstation{position:sticky;top:.75rem}
.pasta-world{width:100%;max-width:100%;margin-inline:auto;box-sizing:border-box}
.pasta-controls{max-width:none;width:100%;font-size:1rem;min-width:0}
.pasta-controls .row,.pasta-controls .scrub{display:flex;flex-direction:column;align-items:stretch}
.pasta-controls .row > *,.pasta-controls button{width:100%;min-width:0;min-height:44px;box-sizing:border-box}
.pasta-controls .scrub input{width:100%;box-sizing:border-box}
.pasta-controls label{font-size:16px;white-space:normal;overflow-wrap:anywhere}
.story-copy{min-width:0}
.beat{padding-block:1rem 1.5rem}
}
@media (min-width:64rem){
.story-grid{display:grid;grid-template-columns:minmax(16rem,min(520px,42%)) minmax(0,1fr);gap:1.6rem 3rem;align-items:start}
.pasta-workstation{align-self:start;align-items:stretch;overflow:visible}
html.js .pasta-workstation{position:sticky;top:1rem}
.pasta-world{width:100%;max-width:min(100%,520px);margin:0}
.pasta-controls{max-width:none}
.beat{padding-block:1.4rem 2.4rem}
.copy{padding-top:.35rem}
}
@media (min-width:90rem){
.wrap{width:min(72rem,calc(100% - 4rem))}
.lede{font-size:1.22rem}
}

.stage[data-pasta-layout="true"] .pasta-controls,
.stage[data-pasta-layout="true"] .pasta-controls .row button,
.stage[data-pasta-layout="true"] .pasta-controls .scrub,
.stage[data-pasta-layout="true"] .pasta-controls .scrub input,
.stage[data-pasta-layout="true"] .story-copy a{
  pointer-events:auto
}

.stage[data-pasta-layout="true"] .story-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  gap:0;
  position:relative;
  width:100%;
  min-height:100svh;
  align-items:stretch
}
.stage[data-pasta-layout="true"] .pasta-workstation,
.stage[data-pasta-layout="true"] .story-copy{
  grid-column:1;
  grid-row:1;
  min-width:0
}

@media (max-width:63.99rem){
  .stage[data-pasta-layout="true"] .pasta-workstation{
    position:sticky;
    top:0;
    z-index:3;
    align-self:start;
    justify-self:stretch;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:.35rem;
    width:100%;
    max-width:none;
    max-height:calc(28svh + 24svh);
    padding:.35rem .65rem .25rem;
    box-sizing:border-box;
    overflow:visible;
    background:transparent
  }
  html.js .stage[data-pasta-layout="true"] .pasta-workstation{
    position:sticky;
    top:0
  }
  .stage[data-pasta-layout="true"] .pasta-world{
    width:min(70vw,28svh);
    max-width:min(70vw,28svh);
    aspect-ratio:1/1;
    flex:0 0 auto
  }
  .stage[data-pasta-layout="true"] .pasta-controls{
    width:min(100%,22rem);
    max-width:100%;
    flex:0 0 auto;
    max-height:24svh;
    min-height:20svh;
    overflow:auto;
    font-size:1rem;
    -webkit-overflow-scrolling:touch
  }
  .stage[data-pasta-layout="true"] .pasta-controls .picks .row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:.5rem;
    margin:.35rem 0;
    align-items:stretch
  }
  .stage[data-pasta-layout="true"] .pasta-controls .picks .row > *,
  .stage[data-pasta-layout="true"] .pasta-controls .picks .row button{
    width:auto;
    min-width:44px;
    min-height:44px;
    max-width:none;
    box-sizing:border-box
  }
  .stage[data-pasta-layout="true"] .pasta-controls .scrub{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:.65rem;
    margin-top:.35rem
  }
  .stage[data-pasta-layout="true"] .pasta-controls .scrub input[type="range"]{
    flex:1;
    width:auto;
    max-width:none;
    min-height:44px
  }
  .stage[data-pasta-layout="true"] .story-copy{
    position:relative;
    z-index:2;
    align-self:stretch;
    justify-self:stretch;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    background:transparent
  }
  .stage[data-pasta-layout="true"] .beat{
    box-sizing:border-box;
    min-height:100svh;
    padding-block:calc(28svh + 24svh) 0;
    padding-inline:.75rem;
    scroll-margin-top:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end
  }
  .stage[data-pasta-layout="true"] .beat .copy,
  .stage[data-pasta-layout="true"] .story-copy .copy{
    position:sticky;
    bottom:0;
    top:auto;
    z-index:2;
    box-sizing:border-box;
    width:100%;
    min-height:0;
    max-height:56svh;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    background:var(--paper);
    color:var(--ink);
    padding:.85rem .85rem 1.1rem;
    border-radius:.75rem .75rem 0 0;
    box-shadow:0 -8px 24px rgba(42,47,36,.08)
  }
  .stage[data-pasta-layout="true"] .copy p{
    max-width:38rem;
    overflow-wrap:anywhere
  }
}

@media (max-width:17.5rem){
  .stage[data-pasta-layout="true"] .pasta-world{
    width:min(70vw,26svh);
    max-width:min(70vw,26svh)
  }
  .stage[data-pasta-layout="true"] .pasta-controls .picks .row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }
  .stage[data-pasta-layout="true"] .beat{
    padding-block:calc(26svh + 24svh) 0
  }
  .stage[data-pasta-layout="true"] .beat .copy,
  .stage[data-pasta-layout="true"] .story-copy .copy{
    max-height:56svh
  }
}

@media (min-width:64rem){
  .stage[data-pasta-layout="true"] .story-grid{
    min-height:100svh
  }
  .stage[data-pasta-layout="true"] .pasta-workstation{
    position:sticky;
    top:1rem;
    z-index:3;
    align-self:start;
    justify-self:end;
    width:55%;
    max-width:55%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.65rem;
    padding:1rem 1.25rem 1rem 0;
    box-sizing:border-box;
    overflow:visible;
    max-height:none
  }
  html.js .stage[data-pasta-layout="true"] .pasta-workstation{
    position:sticky;
    top:1rem
  }
  .stage[data-pasta-layout="true"] .pasta-world{
    width:min(100%,min(520px,70%));
    max-width:min(100%,520px);
    aspect-ratio:1/1;
    margin-inline:auto
  }
  .stage[data-pasta-layout="true"] .pasta-controls{
    width:100%;
    max-width:none;
    max-height:none;
    min-height:0
  }
  .stage[data-pasta-layout="true"] .pasta-controls .picks .row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:.5rem;
    margin:.45rem 0
  }
  .stage[data-pasta-layout="true"] .pasta-controls .picks .row > *,
  .stage[data-pasta-layout="true"] .pasta-controls .picks .row button{
    width:auto;
    min-width:44px;
    min-height:44px;
    box-sizing:border-box
  }
  .stage[data-pasta-layout="true"] .story-copy{
    position:relative;
    z-index:2;
    align-self:stretch;
    justify-self:start;
    width:40%;
    max-width:40%;
    box-sizing:border-box;
    padding:.35rem 1rem 1rem 0
  }
  .stage[data-pasta-layout="true"] .beat{
    min-height:100svh;
    padding-block:1.4rem 2.4rem;
    padding-inline:0;
    box-sizing:border-box;
    display:block
  }
  .stage[data-pasta-layout="true"] .beat .copy,
  .stage[data-pasta-layout="true"] .story-copy .copy{
    position:sticky;
    top:1rem;
    bottom:auto;
    max-height:calc(100svh - 2rem);
    overflow-x:hidden;
    overflow-y:auto;
    background:var(--paper);
    color:var(--ink);
    padding:.35rem .25rem 1rem 0;
    border-radius:0;
    box-shadow:none
  }
  .stage[data-pasta-layout="true"] .copy p{max-width:38rem}
}

@media (max-width: 63.99rem) {
  .stage[data-pasta-layout="true"] .beat {
    min-height: 200svh;
    padding-block: 56svh 0;
    justify-content: flex-start;
  }
  .stage[data-pasta-layout="true"] .story-copy .beat .copy,
  .stage[data-pasta-layout="true"] .beat .copy,
  .stage[data-pasta-layout="true"] .story-copy .copy {
    top: 56svh;
    bottom: auto;
    max-height: 44svh;
  }
}
.stage[data-pasta-layout="true"] .pasta-workstation{grid-column:1;grid-row:1;min-width:0}.stage[data-pasta-layout="true"] .pasta-workstation{position:sticky;top:0;z-index:3;align-self:start;justify-self:stretch;box-sizing:border-box;width:100%;height:100svh;min-height:100svh;max-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.35rem;padding:.35rem .65rem .25rem;overflow:visible;background:transparent;pointer-events:none}.stage[data-pasta-layout="true"] .pasta-workstation .pasta-world,.stage[data-pasta-layout="true"] .pasta-workstation .pasta-controls{pointer-events:auto}.stage[data-pasta-layout="true"] .story-copy .beat .copy{visibility:hidden;pointer-events:none}@media (min-width:64rem){.stage[data-pasta-layout="true"] .pasta-workstation{top:1rem;justify-self:end;width:55%;max-width:55%;height:auto;min-height:0;max-height:none;padding:0}}

.stage[data-pasta-layout="true"] header > .head{padding:.75rem 1rem;gap:.5rem}
.stage[data-pasta-layout="true"] .intro{padding:1.25rem 1.5rem}
.stage[data-pasta-layout="true"] .intro h1{font-size:clamp(2.05rem,8vw,3.3rem);line-height:1.02}
@media (max-width:699px){.stage[data-pasta-layout="true"] .pasta-world{width:min(260px,100%)}.stage[data-pasta-layout="true"] .beat:first-child{min-height:65svh;padding:0}.stage[data-pasta-layout="true"] .beat+.beat{min-height:90svh}}
@media (min-width:700px){.stage[data-pasta-layout="true"] .pasta-world{width:min(330px,100%)}.stage[data-pasta-layout="true"] .beat:first-child{min-height:900px}}

body>header>.wrap.head{gap:.5rem;padding:.5rem .75rem}body>header>.wrap.head nav a{min-height:44px;white-space:nowrap}body>main>.wrap.intro{padding-block:1rem}body>main>.wrap.intro h1{font-size:clamp(2.05rem,6vw,4.2rem);line-height:1.05;max-height:2.1em;overflow:hidden}body>main>.stage[data-pasta-layout=true] .beat:first-child{min-height:65svh;padding:0}

body>header{padding-block:.25rem}body>header>.wrap.head{padding-block:0;gap:.25rem}body>main>.wrap.intro{padding-block:.5rem}body>main>.wrap.intro h1{font-size:clamp(1.5rem,6vw,3rem);line-height:1.12;max-width:none;max-height:none;overflow:visible;margin:.2rem 0}body>main>.wrap.intro .lede{font-size:1rem;line-height:1.5;margin:.25rem 0}

.stage[data-pasta-entry="ready"][data-chapter="0"] .pasta-world{animation:pastaFiniteEntry01a0f6c9 1800ms cubic-bezier(.2,.8,.2,1) 1;animation-fill-mode:none;animation-composition:add}@keyframes pastaFiniteEntry01a0f6c9{from{transform:translate(-30px,45px) scale(.78) rotate(-8deg)}to{transform:none}}.stage.is-gentle[data-pasta-entry="ready"][data-chapter="0"] .pasta-world{animation:pastaFiniteDissolve01a0f6c9 480ms ease-out 1;animation-fill-mode:none;animation-composition:replace}@keyframes pastaFiniteDissolve01a0f6c9{from{opacity:.65}to{opacity:1}}@media(prefers-reduced-motion:reduce){.stage[data-pasta-entry="ready"][data-chapter="0"] .pasta-world{animation:pastaFiniteDissolve01a0f6c9 480ms ease-out 1;animation-fill-mode:none;animation-composition:replace}}

/* pasta-retention-r1 — strengthen intro promise, compact first-fold, condense beat pacing,
   terracotta scrub focus, distinct shape/sauce selected states. Source selectors only. */

/* Compact chrome so bowl + first beat land earlier on 390 */
.head {
	gap: 0.4rem 0.85rem;
}

.intro {
	padding: 0.85rem 0 0.55rem;
}

.intro .kicker {
	margin: 0 0 0.25rem;
}

.intro h1 {
	margin: 0.1rem 0 0.45rem;
	font-size: clamp(1.85rem, 6.4vw, 3.55rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	max-width: 16ch;
}

.intro .lede {
	margin: 0.2rem 0 0.35rem;
	font-size: 1.05rem;
	line-height: 1.45;
}

.pasta-controls {
	margin-top: 0;
	gap: 0.35rem;
}

.pasta-controls .picks {
	margin: 0.2rem 0;
}

.pasta-controls .picks .row {
	margin: 0.3rem 0;
	gap: 0.4rem;
}

.pasta-controls .scrub {
	margin-top: 0.35rem;
}

/* Condense stage / beat pacing — preserve all phases, forward/reverse */
.beat {
	padding-block: 0.85rem 1.25rem;
	scroll-margin-top: 0.3rem;
}

.story-grid {
	gap: 0.65rem;
}

@media (min-width: 17.5625rem) and (max-width: 63.99rem) {
	.beat {
		padding-block: 0.75rem 1.1rem;
	}

	.story-grid {
		gap: 0.65rem 0.9rem;
	}
}

@media (min-width: 64rem) {
	.beat {
		padding-block: 1rem 1.55rem;
	}

	.story-grid {
		gap: 1.1rem 2.2rem;
	}

	.copy {
		padding-top: 0.2rem;
	}
}

/* Layout-mode first fold: bowl + first useful beat heading earlier */
@media (max-width: 699px) {
	.stage[data-pasta-layout="true"] .intro {
		padding: 0.65rem 1rem 0.4rem;
	}

	.stage[data-pasta-layout="true"] .intro h1 {
		font-size: clamp(1.75rem, 7vw, 2.85rem);
		line-height: 1.06;
		margin: 0.05rem 0 0.35rem;
	}

	.stage[data-pasta-layout="true"] .pasta-controls {
		gap: 0.25rem;
	}

	.stage[data-pasta-layout="true"] .beat:first-child {
		min-height: 58svh;
		padding: 0;
	}

	.stage[data-pasta-layout="true"] .beat + .beat {
		min-height: 78svh;
	}
}

@media (min-width: 700px) {
	.stage[data-pasta-layout="true"] .intro {
		padding: 0.9rem 1.25rem 0.5rem;
	}

	.stage[data-pasta-layout="true"] .intro h1 {
		font-size: clamp(2.1rem, 5vw, 3.4rem);
		line-height: 1.05;
	}

	.stage[data-pasta-layout="true"] .beat:first-child {
		min-height: 72svh;
		padding-block: 0.85rem 1.2rem;
	}

	.stage[data-pasta-layout="true"] .beat {
		min-height: 78svh;
		padding-block: 1rem 1.4rem;
	}
}

@media (min-width: 64rem) {
	.stage[data-pasta-layout="true"] .beat {
		min-height: 82svh;
		padding-block: 1.05rem 1.6rem;
	}

	.stage[data-pasta-layout="true"] .beat .copy,
	.stage[data-pasta-layout="true"] .story-copy .copy {
		top: 0.75rem;
		max-height: calc(100svh - 1.5rem);
	}
}

/* #phase-scrub — terracotta accessible focus */
#phase-scrub,
.scrub input[type="range"] {
	accent-color: var(--tomato, #a53d24);
}

#phase-scrub:focus-visible,
.scrub input[type="range"]:focus-visible {
	outline: 2px solid var(--tomato, #a53d24);
	outline-offset: 3px;
}

#phase-scrub:focus,
.scrub input[type="range"]:focus {
	outline: 2px solid var(--tomato, #a53d24);
	outline-offset: 3px;
}

/* Shape / sauce groups — visually distinct + selected, labels/behavior unchanged */
.pasta-controls .picks .row button,
.picks .row button {
	border: 1px solid var(--line, #d4c8b2);
	background: var(--paper, #f3eadc);
	color: var(--ink, #2a2f24);
	border-radius: 0.35rem;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pasta-controls .picks .row:first-of-type button,
.picks .row:first-of-type button {
	border-color: var(--olive, #5e6644);
}

.pasta-controls .picks .row:last-of-type button,
.picks .row:last-of-type button {
	border-color: var(--tomato, #a53d24);
}

.pasta-controls .picks .row button[aria-pressed="true"],
.picks .row button[aria-pressed="true"],
.row button[aria-pressed="true"] {
	background: var(--tomato, #a53d24);
	color: var(--paper, #f3eadc);
	border-color: var(--tomato, #a53d24);
	font-weight: 600;
}

.pasta-controls .picks .row:first-of-type button[aria-pressed="true"],
.picks .row:first-of-type button[aria-pressed="true"] {
	background: var(--olive, #5e6644);
	border-color: var(--olive, #5e6644);
	color: var(--paper, #f3eadc);
}

.pasta-controls .picks .row button:focus-visible,
.picks .row button:focus-visible {
	outline: 2px solid var(--tomato, #a53d24);
	outline-offset: 3px;
}

/* R2c: compact intro hierarchy; header+intro siblings before #stage */
body>header{padding-block:.2rem}
body>header>.wrap.head{padding-block:0;gap:.2rem}
body>main>.wrap.intro{padding-block:.35rem .45rem}
body>main>.wrap.intro .kicker{margin:.1rem 0;font-size:.85rem;line-height:1.35}
body>main>.wrap.intro h1{font-size:clamp(1.65rem,5.6vw,2.65rem);line-height:1.14;max-width:none;max-height:none;overflow:visible;margin:.15rem 0 .2rem}
body>main>.wrap.intro .lede{font-size:.98rem;line-height:1.48;margin:.15rem 0 .35rem;max-height:none;overflow:visible}

/* 44px controls; group chrome via .picks-shape / .picks-sauce; keep terracotta */
.stage .pasta-controls .row [data-shape],
.stage .pasta-controls .row [data-sauce]{min-height:44px;min-width:44px;padding:.55rem .9rem}
.stage .picks-shape,.stage .picks-sauce{gap:.4rem}
.stage .picks-shape .row,.stage .picks-sauce .row{display:flex;flex-wrap:wrap;gap:.4rem}
.stage .picks-sauce .status{min-height:1.25em;margin:.15rem 0 .25rem}
.stage .picks-sauce .status>#choice-label{display:inline-block}

/* Natural reader: kill transport plane holds; restore beat copies; pin workstation height:auto only */

.stage[data-pasta-layout="true"] .pasta-workstation{grid-column:1;grid-row:1;position:sticky;top:0;z-index:3;align-self:start;justify-self:stretch;box-sizing:border-box;width:100%;height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.35rem;padding:.35rem .65rem .25rem;overflow:visible;background:transparent;pointer-events:none}
.stage[data-pasta-layout="true"] .pasta-workstation .pasta-world,
.stage[data-pasta-layout="true"] .pasta-workstation .pasta-controls{pointer-events:auto}
.stage[data-pasta-layout="true"] .story-copy{grid-column:1;grid-row:1;position:relative;z-index:1;align-self:stretch;justify-self:stretch;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:var(--pasta-reader-pad,0) 0 0;pointer-events:auto;background:transparent;overflow:visible}
.stage[data-pasta-layout="true"] .story-copy .beat{position:relative;min-height:0;max-height:none;overflow:visible}
.stage[data-pasta-layout="true"] .story-copy .beat .copy{visibility:visible!important;pointer-events:auto;position:relative;z-index:1;box-sizing:border-box;width:100%;min-width:0;min-height:0;max-height:none;margin:0;padding:.85rem .85rem 1.1rem;overflow:visible;background:var(--paper);color:var(--ink);border-radius:.75rem;box-shadow:0 4px 16px rgba(42,47,36,.06)}

/* Mobile: reader band below pinned workstation (pad set once from measured height) */
@media (max-width:63.998rem){
.stage[data-pasta-layout="true"] .story-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto}
.stage[data-pasta-layout="true"] .pasta-workstation{grid-column:1;grid-row:1}
.stage[data-pasta-layout="true"] .story-copy{grid-column:1;grid-row:1;padding-top:var(--pasta-reader-pad,0)}
}

/* Desktop: separate image/copy zones; tablet readable line width */
@media (min-width:64rem){
.stage[data-pasta-layout="true"] .story-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto;column-gap:1.25rem;align-items:start}
.stage[data-pasta-layout="true"] .pasta-workstation{grid-column:2;grid-row:1;top:1rem;justify-self:end;width:100%;max-width:100%;height:auto;min-height:0;max-height:none;padding:0}
.stage[data-pasta-layout="true"] .story-copy{grid-column:1;grid-row:1;justify-self:stretch;width:100%;max-width:38rem;padding:0}
.stage[data-pasta-layout="true"] .story-copy .beat .copy{max-height:none;padding:.35rem .25rem 1rem 0;border-radius:0;box-shadow:none;overflow:visible}
}

/* Fault fallback: layout false/absent → one readable column ≤1023; copies visible; JS [hidden] stays hidden */
.stage:not([data-pasta-layout="true"]) .story-grid,
.stage[data-pasta-layout="false"] .story-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto}
.stage:not([data-pasta-layout="true"]) .pasta-workstation,
.stage[data-pasta-layout="false"] .pasta-workstation{position:relative;top:auto;width:100%;max-width:100%;height:auto;min-height:0;max-height:none;grid-column:1;grid-row:auto}

.stage:not([data-pasta-layout="true"]) .story-copy,
.stage[data-pasta-layout="false"] .story-copy{grid-column:1;grid-row:auto;width:100%;max-width:40rem;padding:0;overflow:visible}
.stage:not([data-pasta-layout="true"]) .story-copy .beat .copy,
.stage[data-pasta-layout="false"] .story-copy .beat .copy{visibility:visible!important;pointer-events:auto;max-height:none;overflow:visible}
.stage .js-only[hidden],.stage .pasta-controls[hidden]{display:none!important}
@media (max-width:63.998rem){
.stage:not([data-pasta-layout="true"]) .story-grid,
.stage[data-pasta-layout="false"] .story-grid{grid-template-columns:1fr}
}
body>main>#stage.stage[data-pasta-layout=true] .beat:first-child,body>main>#stage[data-pasta-layout=true] .story-copy .beat:first-child,body>main>#stage[data-pasta-layout=true] .story-copy .beat{padding-top:0;padding-bottom:.75rem}body>main>#stage[data-pasta-layout=true] .story-copy .copy,body>main>#stage[data-pasta-layout=true] .copy{position:relative;visibility:visible;max-height:none;overflow:visible}body>main>#stage[data-pasta-layout=true] .pasta-workstation,body>main>#stage[data-pasta-layout=true] .pasta-controls,body>main>#stage[data-pasta-layout=true] .pasta-workstation .pasta-controls{max-height:none;overflow:visible}body>main>#stage[data-pasta-layout=true] .pasta-controls{min-height:44px;height:auto;max-height:none;overflow:visible;padding-top:.35rem;padding-bottom:.35rem}body>main>#stage[data-pasta-layout=true] .pasta-controls button,body>main>#stage[data-pasta-layout=true] .pasta-controls [role=button]{min-height:44px;min-width:44px}body>main>.wrap.intro h1{font-size:clamp(1.875rem,5vw,2.25rem);line-height:1.2;overflow:visible;max-height:none;-webkit-line-clamp:unset}body>main>.wrap.intro .secondary,body>main header .secondary,body>main>.wrap.intro nav.secondary{font-size:.875rem;line-height:1.35;gap:.5rem;flex-wrap:wrap;max-height:none;overflow:visible}body>main>.wrap.intro .secondary a,body>main header .secondary a{font-size:.875rem;padding:.25rem .4rem}@media (max-width:63.998rem){body>main>#stage[data-pasta-layout=true] .story-copy{padding-top:var(--pasta-reader-pad,0px);-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent var(--pasta-reader-pad,0px),#000 var(--pasta-reader-pad,0px));mask-image:linear-gradient(to bottom,transparent 0,transparent var(--pasta-reader-pad,0px),#000 var(--pasta-reader-pad,0px));mask-size:100% 100%;-webkit-mask-size:100% 100%}body>main>#stage:not([data-pasta-layout=true]) .story-copy,body>main>#stage[data-pasta-layout=false] .story-copy{padding-top:0;-webkit-mask-image:none;mask-image:none}}@media (min-width:64rem){body>main>#stage[data-pasta-layout=true] .story-copy{padding-top:0;-webkit-mask-image:none;mask-image:none}}
@media (max-width: 63.998rem){#stage[data-pasta-layout="true"] .story-copy{clip-path:inset(var(--pasta-reader-clip-px,0px) 0 0 0);-webkit-clip-path:inset(var(--pasta-reader-clip-px,0px) 0 0 0);mask-image:none;-webkit-mask-image:none}}#stage:not([data-pasta-layout="true"]) .story-copy,#stage[data-pasta-layout="true"] .story-copy{mask-image:none;-webkit-mask-image:none}@media (min-width: 64rem){#stage .story-copy{clip-path:none;-webkit-clip-path:none;mask-image:none;-webkit-mask-image:none}}

@media (min-width: 64rem) {
  #stage[data-pasta-layout="true"] .pasta-workstation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: start;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  #stage[data-pasta-layout="true"] .pasta-workstation .pasta-world {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    align-self: start;
  }
  #stage[data-pasta-layout="true"] .pasta-workstation .pasta-controls {
    width: 100%;
    max-width: none;
    align-self: start;
  }
}


/* =========================================================================
   Layered bowl scene (plan a002281e15a071b42e3c1166)
   Replaces the retired whole-world camera gate (data-noomo-motion) and the
   whole-photo swap as the scene substrate.

   The inner rim ellipse is the single source of truth: every layer mask is
   derived from --pasta-rim-* so the contact boundary stays aligned at any
   viewport and at any progress value. Defaults below ARE the end state, so a
   no-JS or failed-JS reader sees the finished bowl, not an empty frame.

   Geometry defaults are the values the source already used (circle at
   50% 50%, radius 37%, ~3% feather). Real photographed rim geometry is still
   UNKNOWN: see SOURCE_REQUESTS.json. Overriding the four --pasta-rim-*
   values is the only change needed once it is measured.
   ========================================================================= */

#stage {
	--pasta-rim-cx: 50%;
	--pasta-rim-cy: 50%;
	--pasta-rim-rx: 37%;
	--pasta-rim-ry: 37%;
	--pasta-rim-feather: 3%;
	--pasta-content-inset: 0.94;
	--pasta-sauce-shift: -2%;
	--pasta-pasta-y: 0%;
	--pasta-pasta-scale: 1;
	--pasta-pasta-opacity: 1;
	--pasta-sauce-y: 0%;
	--pasta-sauce-opacity: 1;
	--pasta-sauce-spread: 1;
	--pasta-sauce-rx: 26%;
	--pasta-sauce-ry: 17.5%;
	--pasta-world-scale: 1;
	--pasta-world-x: 0px;
	--pasta-world-rotate: 0deg;
	--pasta-light: 1;
	--pasta-mask-inner: radial-gradient(ellipse var(--pasta-rim-rx) var(--pasta-rim-ry) at var(--pasta-rim-cx) var(--pasta-rim-cy), #000 0 calc(100% - var(--pasta-rim-feather)), transparent 100%);
	--pasta-mask-rim: radial-gradient(ellipse var(--pasta-rim-rx) var(--pasta-rim-ry) at var(--pasta-rim-cx) var(--pasta-rim-cy), transparent 0 calc(100% - var(--pasta-rim-feather)), #000 100%);
	--pasta-mask-content: radial-gradient(ellipse calc(var(--pasta-rim-rx) * var(--pasta-content-inset)) calc(var(--pasta-rim-ry) * var(--pasta-content-inset)) at var(--pasta-rim-cx) var(--pasta-rim-cy), #000 0 92%, transparent 100%);
	--pasta-mask-sauce: radial-gradient(ellipse calc(var(--pasta-sauce-rx) * var(--pasta-sauce-spread)) calc(var(--pasta-sauce-ry) * var(--pasta-sauce-spread)) at var(--pasta-rim-cx) calc(var(--pasta-rim-cy) + var(--pasta-sauce-shift)), #000 0 84%, transparent 100%);
}

/* One scene container for every layer (S5): same box, same perspective, same light. */
#stage .pasta-world {
	position: relative;
	aspect-ratio: 1 / 1;
	margin: 0;
	background: transparent;
	transform: translate3d(var(--pasta-world-x), 0, 0) scale(var(--pasta-world-scale)) rotate(var(--pasta-world-rotate));
	transform-origin: var(--pasta-rim-cx) var(--pasta-rim-cy);
	filter: drop-shadow(0 10px 18px rgba(42, 47, 36, 0.16)) brightness(var(--pasta-light));
}

#stage .pasta-world > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 50%;
	display: block;
	pointer-events: none;
	box-sizing: border-box;
}

#stage .pasta-world > img[hidden] {
	display: none;
}

/* The old whole-photo drift is not the substrate any more. */
#stage .pasta-base {
	z-index: 0;
	transform: none;
}

/* B1 bowl: interior and front rim are two masked views of the same verified
   raster (the mechanism the source already used, kept and given real contact).
   With a dedicated rim raster the base stays whole and the rim carries alpha. */
#stage[data-scene-rim="mask"] .pasta-base {
	-webkit-mask-image: var(--pasta-mask-inner);
	mask-image: var(--pasta-mask-inner);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
}

#stage .pasta-rim {
	z-index: 4;
	transform: none;
}

#stage[data-scene-rim="mask"] .pasta-rim {
	-webkit-mask-image: var(--pasta-mask-rim);
	mask-image: var(--pasta-mask-rim);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
}

/* P1 pasta content layer: one z slot, two alternative shape rasters. */
#stage .pasta-layer-shape {
	z-index: 2;
	opacity: var(--pasta-pasta-opacity);
	transform: translate3d(0, var(--pasta-pasta-y), 0) scale(var(--pasta-pasta-scale));
	transform-origin: var(--pasta-rim-cx) var(--pasta-rim-cy);
	-webkit-mask-image: var(--pasta-mask-content);
	mask-image: var(--pasta-mask-content);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
}

/* S1 sauce content layer: lands ON the pasta, its own mask spreads on contact. */
#stage .pasta-layer-sauce {
	z-index: 3;
	opacity: var(--pasta-sauce-opacity);
	transform: translate3d(0, var(--pasta-sauce-y), 0);
	transform-origin: var(--pasta-rim-cx) var(--pasta-rim-cy);
	-webkit-mask-image: var(--pasta-mask-sauce);
	mask-image: var(--pasta-mask-sauce);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
}

#stage[data-scene-mode="layered"] .pasta-layer {
	transition: opacity 0.22s ease;
	will-change: transform, opacity;
}

/* Photo fallback (S12): the verified finished-dish rasters keep the current
   behaviour when a layer raster is missing or fails to decode. */
#stage[data-scene-mode="photo"] .pasta-layer {
	display: none !important;
}

#stage[data-scene-rim="mask"] .pasta-fill {
	z-index: 1;
	-webkit-mask-image: var(--pasta-mask-inner);
	mask-image: var(--pasta-mask-inner);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
}

/* S11 mobile recomposition: single column, bowl larger in frame, rim ellipse
   re-cut for the narrower box, controls below the bowl. Not a scaled-down
   desktop: the sauce layer is the only animated content layer here, the pasta
   layer is held (see pasta.js narrowHold). */
@media (max-width: 63.998rem) {
	#stage {
		--pasta-rim-rx: 40%;
		--pasta-rim-ry: 40%;
		--pasta-sauce-rx: 28%;
		--pasta-sauce-ry: 19%;
		--pasta-content-inset: 0.95;
	}

	/* Accepted mobile recomposition: one column, the bowl pinned at the top of the
	   viewport, the choice buttons docked at the bottom, the beat copy reading in
	   the band between them. The retired layout stacked bowl and copy in one grid
	   cell and clipped the copy away once the beats had real scroll travel. */
	#stage[data-pasta-layout="true"] .story-grid {
		display: block;
	}

	#stage[data-pasta-layout="true"] .pasta-workstation {
		display: contents;
	}

	#stage[data-pasta-layout="true"] .pasta-world {
		position: sticky;
		top: 0;
		z-index: 3;
		width: min(52vw, 27svh);
		max-width: min(52vw, 27svh);
		margin: 0 auto;
		padding-block: 0.25rem;
		background: var(--paper);
	}

	/* Docked choice bar. It is hidden (and out of the tab order) whenever the stage
	   is not in view, so it never floats over the guide or the footer. */
	#stage[data-pasta-layout="true"] .pasta-controls {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 5;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0.4rem 0.65rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
		background: var(--paper);
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 16px rgba(42, 47, 36, 0.08);
		font-size: 0.95rem;
		visibility: hidden;
		transform: translateY(110%);
		transition: transform 0.2s ease;
	}

	#stage[data-pasta-layout="true"][data-scene-in-view="true"] .pasta-controls {
		visibility: visible;
		transform: none;
	}

	#stage[data-pasta-layout="true"] .story-copy {
		padding-bottom: var(--pasta-dock-h, 9rem);
	}

	/* Each beat's copy holds in the reading band while that beat's scroll travel
	   plays, so there is always a sentence to read next to the bowl. */
	#stage[data-pasta-layout="true"] .story-copy .beat {
		position: relative;
	}

	#stage[data-pasta-layout="true"] .story-copy .beat .copy {
		position: sticky;
		top: calc(var(--pasta-band-h, 13rem) + 0.5rem);
		max-height: calc(100svh - var(--pasta-band-h, 13rem) - var(--pasta-dock-h, 9rem) - 1.5rem);
		overflow-y: auto;
	}

	#stage[data-pasta-layout="true"] .pasta-controls .picks {
		margin: 0.15rem 0;
	}

	#stage[data-pasta-layout="true"] .pasta-controls .scrub {
		margin-top: 0.25rem;
	}

	#stage[data-pasta-layout="true"] .story-copy {
		padding-top: 0.5rem;
		clip-path: none;
		-webkit-clip-path: none;
		-webkit-mask-image: none;
		mask-image: none;
	}

	#stage .pasta-world {
		margin-inline: auto;
	}
}

@media (min-width: 64rem) {
	#stage .pasta-world {
		width: min(100%, 520px);
		max-width: min(100%, 520px);
	}
}

/* R9 / R10: reduced motion and Save-Data resolve straight to the end state.
   pasta.js writes the end-state values, so clearing the transforms here lands
   on the same frame rather than an empty bowl. */
@media (prefers-reduced-motion: reduce) {
	#stage .pasta-world,
	#stage .pasta-layer,
	#stage .pasta-base,
	#stage .pasta-fill,
	#stage .pasta-rim {
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}

	#stage,
	#stage * {
		transition: none !important;
		animation: none !important;
	}

	#stage .pasta-world {
		filter: drop-shadow(0 10px 18px rgba(42, 47, 36, 0.16));
	}
}

#stage.is-gentle .pasta-world,
#stage.is-gentle .pasta-layer,
#stage.is-gentle .pasta-fill,
#stage.is-gentle *,
#stage.is-static .pasta-world,
#stage.is-static .pasta-layer,
#stage.is-static .pasta-fill,
#stage.is-static * {
	transition: none !important;
	animation: none !important;
}

#stage.is-gentle .pasta-world,
#stage.is-static .pasta-world {
	transform: none !important;
	filter: drop-shadow(0 10px 18px rgba(42, 47, 36, 0.16));
}

/* A4: the scene is never the only path to the answer. */
#stage[data-scene-degraded] .pasta-layer {
	display: none !important;
}

/* Scroll travel for the story band. The retired transport layout had collapsed every
   beat to content height, which left the layer states no room to read; the bowl is
   sticky, so this is scroll distance for the scene, not empty whitespace. */
#stage[data-pasta-layout="true"] .story-copy .beat {
	min-height: 76svh;
}

#stage[data-pasta-layout="true"] .story-copy .beat:first-child {
	min-height: 58svh;
}

@media (max-width: 63.998rem) {
	#stage[data-pasta-layout="true"] .story-copy .beat {
		min-height: 68svh;
	}

	#stage[data-pasta-layout="true"] .story-copy .beat:first-child {
		min-height: 54svh;
	}
}