.bake-page { --bake-ink: #2e1e2e; --bake-muted: #604f60; --bake-line: #e5d7df; --bake-wash: #faf4ef; color: var(--bake-ink); }
.bake-page .bake-wrap { width: min(1100px, calc(100% - 40px)); margin-inline: auto; }
.bake-page .bake-hero { padding: clamp(36px, 8vw, 94px) 0; background: linear-gradient(125deg, #f5e7ed, var(--bake-wash) 72%); }
.bake-page .bake-hero-grid { display: grid; grid-template-columns: 1.5fr 0.8fr; gap: clamp(28px, 6vw, 72px); align-items: center; }
.bake-page h1 { font-size: clamp(2.15rem, 5.2vw, 4.3rem); line-height: 1.06; letter-spacing: -.045em; margin: 14px 0 20px; }
.bake-page h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.15; margin: 0 0 14px; }
.bake-page h3 { line-height: 1.2; margin: 0 0 10px; }
.bake-page p { max-width: 68ch; line-height: 1.6; }
.bake-page .bake-identity { display: inline-flex; gap: 12px; align-items: center; font-weight: 750; font-size: 1.15rem; }
.bake-page .bake-identity img { width: 48px; height: 48px; border-radius: 12px; }
.bake-page .bake-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.bake-page .bake-actions .btn { white-space: normal; }
.bake-page .bake-section { padding: clamp(34px, 6vw, 70px) 0; }
.bake-page .bake-soft { background: var(--bake-wash); }
.bake-page .bake-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.bake-page .bake-card { border: 1px solid var(--bake-line); border-radius: 20px; background: white; padding: 20px; min-width: 0; }
.bake-page .bake-shot { margin: 0; display: flex; align-items: center; flex-direction: column; gap: 12px; }
.bake-page .bake-shot img { width: min(100%, 300px); height: auto; border-radius: 22px; border: 1px solid var(--bake-line); box-shadow: 0 12px 30px #3b28321f; }
.bake-page .bake-shot figcaption { color: var(--bake-muted); text-align: center; max-width: 32ch; }
.bake-page .bake-calculator { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: 24px; }
.bake-page form, .bake-page fieldset { min-width: 0; }
.bake-page fieldset { border: 1px solid var(--bake-line); border-radius: 14px; padding: 14px; margin: 12px 0; }
.bake-page legend { padding: 0 6px; font-size: 1rem; font-weight: 700; }
.bake-page label { display: grid; gap: 5px; font-weight: 600; min-width: 0; }
.bake-page input, .bake-page select { padding: 9px 10px; border: 1px solid #ab94a3; border-radius: 10px; min-width: 0; width: 100%; min-height: 44px; font: inherit; color: var(--bake-ink); background: white; }
.bake-page .bake-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.bake-page .ingredient > label { margin-bottom: 10px; }
.bake-page .bake-light-button { min-height: 44px; background: transparent; border: 0; font: inherit; color: #64334f; text-decoration: underline; cursor: pointer; }
.bake-page .bake-total { font-weight: 750; font-size: 1.25rem; padding-block: 10px; background: var(--bake-wash); }
.bake-page dt, .bake-page dd { padding: 7px 9px; margin: 0; }
.bake-page dl { display: grid; grid-template-columns: 1fr auto; }
.bake-page [hidden] { display: none !important; }
.bake-page :focus-visible { outline: 3px solid #a0516f; outline-offset: 3px; }
@media (max-width: 760px) {
  .bake-page .bake-hero-grid, .bake-page .bake-calculator { grid-template-columns: 1fr; }
  .bake-page .bake-wrap { width: calc(100% - 28px); }
}