:root { --brown: #4c2d20; --green: #009140; --paper: #f6f3ee; --main-width: min(600px, 100vw); --main-right-offset: calc((100vw - var(--main-width)) / 2); }
@font-face { font-family: 'Afacad'; src: url('fonts/Afacad.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--brown); background: var(--paper); font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif; }
a { color: inherit; }
/* Width may scale; height always follows the original image ratio. */
img { display: block; max-width: 100%; height: auto; flex: none; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 10; top: 8px; left: 8px; padding: 10px 16px; background: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.desktop-background, .desktop-header, .desktop-sidebar, .scroll-cue { display: none; }
.page-content { width: 100%; max-width: 600px; margin: 0 auto; background: #fff; }
.image-section { position: relative; scroll-margin-top: 16px; }
.section-image { width: 100%; height: auto; }
.closing-area { background: #f7f4ee url('images/closing-background.webp?v=261020') center top / 100% auto repeat-y; }
.page-footer { container-type: inline-size; padding: 24px 8px calc(32px + env(safe-area-inset-bottom, 0px)); }
.copyright { margin: 0; font-family: Arial, sans-serif; font-size: 8px; font-size: clamp(8px, 2.6cqw, 16px); line-height: 1.5; text-align: center; white-space: nowrap; }
.shop-area { display: flex; flex-direction: column; align-items: center; gap: calc(var(--main-width) * 30 / 768); padding: calc(var(--main-width) * 50 / 768) 0 calc(var(--main-width) * 100 / 768); }
.shop-button { position: relative; display: block; width: 86.979167%; aspect-ratio: 668 / 112; border-radius: 999px; }
.shop-button img { position: absolute; left: -2.994012%; top: -13.392857%; width: 105.988024%; max-width: none; height: auto; }
.shop-button:hover img { filter: brightness(.94); }
a:focus-visible, input:focus-visible, .chart-scroller:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.chart-panel { position: absolute; top: 44.602185%; left: 11.71875%; width: 76.5625%; }
.chart-viewport { position: relative; }
.chart-scroller { width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-color: #a59589 #fff; }
.chart-scroll-hint { position: absolute; z-index: 1; top: calc(50% - 60px); left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 164px; max-width: calc(100% - 24px); padding: 16px 12px; border-radius: 8px; color: #fff; background: rgb(76 45 32 / 88%); font-size: 14px; font-weight: 700; line-height: 1.5; white-space: nowrap; pointer-events: none; }
.chart-scroll-hint[hidden] { display: none; }
.chart-scroll-hint svg { width: 72px; height: auto; overflow: visible; }
.chart-hint-hand { animation: chart-hint-swipe 1.8s ease-in-out infinite; }
.chart-strip { width: var(--chart-strip-width, 239.050%); }
.chart-image { width: 100%; height: auto; max-width: none; }
.chart-slider { display: none; }
.js .chart-scroller { scrollbar-width: none; }
.js .chart-scroller::-webkit-scrollbar { display: none; }
.js .chart-slider { display: block; }
.chart-slider { width: 100%; height: 10px; padding: 0; margin: var(--chart-slider-gap, 7.65%) 0 0; background: transparent; appearance: none; cursor: ew-resize; }
.chart-slider::-webkit-slider-runnable-track { height: 5px; background: #fff; border-radius: 999px; }
.chart-slider::-webkit-slider-thumb { width: var(--thumb-width, 42%); height: 5px; border: 0; border-radius: 999px; background: #a59589; appearance: none; }
.chart-slider::-moz-range-track { height: 5px; background: #fff; border-radius: 999px; }
.chart-slider::-moz-range-thumb { width: var(--thumb-width, 42%); height: 5px; border: 0; border-radius: 999px; background: #a59589; }
.chart-hint { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (min-width: 1000px) {
  :root { --main-width: min(600px, 35vw); --right-gutter: 80px; --main-right-offset: var(--right-gutter); --left-panel-width: calc(100vw - var(--main-width) - var(--right-gutter)); --decoration-scale: 1; }
  .desktop-background { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--paper) url('images/pc-paper.webp') center / cover no-repeat; pointer-events: none; }
  .corner-chocolate, .corner-raisins { position: absolute; mix-blend-mode: multiply; }
  .corner-chocolate { top: 0; right: calc(var(--main-width) + var(--right-gutter) - 60px * var(--decoration-scale)); width: calc(480px * var(--decoration-scale)); }
  .corner-raisins { bottom: 0; left: 0; width: calc(506px * var(--decoration-scale)); }
  .desktop-header { display: block; position: fixed; z-index: 2; top: 23px; left: 23px; width: min(326px, calc(var(--left-panel-width) - 46px)); }
  .desktop-header img { width: 100%; }
  /* Native Figma dimensions, reduced only when the available area is smaller. */
  .desktop-sidebar { --design-unit: min(1px, calc((var(--left-panel-width) - 48px) / 439), calc((100svh - 48px) / 794)); display: block; position: fixed; left: calc(var(--left-panel-width) / 2); top: 50%; transform: translate(-50%, -50%); width: calc(439 * var(--design-unit)); height: calc(794 * var(--design-unit)); }
  .contents-title { position: absolute; left: calc(108.586914 * var(--design-unit)); top: calc(-6.29 * var(--design-unit)); width: calc(238 * var(--design-unit)); }
  .section-nav { position: absolute; left: calc(20 * var(--design-unit)); top: calc(105 * var(--design-unit)); width: calc(398 * var(--design-unit)); }
  .section-nav a { position: relative; display: flex; align-items: center; gap: calc(30 * var(--design-unit)); height: calc(60 * var(--design-unit)); text-decoration: none; color: var(--brown); font-weight: 700; font-size: calc(24 * var(--design-unit)); line-height: 1; white-space: nowrap; }
  .section-nav img { width: 100%; height: auto; }
  .section-nav a[href="#about"] { --nav-image: url('images/nav-about.svg?v=261013'); }
  .section-nav a[href="#features"] { --nav-image: url('images/nav-features.svg?v=261013'); }
  .section-nav a[href="#rebake"] { --nav-image: url('images/nav-rebake.svg?v=261013'); }
  .section-nav a[href="#story"] { --nav-image: url('images/nav-story.svg?v=261013'); }
  .section-nav a[href="#voice"] { --nav-image: url('images/nav-voice.svg?v=261013'); }
  /* Use the SVG silhouette to render the exact brand color, including the arrow. */
  @supports (mask-image: url('')) or (-webkit-mask-image: url('')) {
    .section-nav img { opacity: 0; }
    .section-nav a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; aspect-ratio: 398 / 24; background: currentColor; -webkit-mask: var(--nav-image) center / contain no-repeat; mask: var(--nav-image) center / contain no-repeat; pointer-events: none; }
  }
  .section-nav a:hover, .section-nav a:focus-visible, .section-nav a[aria-current="location"] { color: var(--green); }
  .products { position: absolute; left: calc(3 * var(--design-unit)); top: calc(349 * var(--design-unit)); width: calc(433 * var(--design-unit)); pointer-events: none; }
  .desktop-cta { position: absolute; left: 0; top: calc(706 * var(--design-unit)); width: 100%; height: calc(88 * var(--design-unit)); border-radius: 999px; }
  .desktop-cta img { position: absolute; left: calc(-15.7 * var(--design-unit)); top: calc(-11.775 * var(--design-unit)); width: calc(471 * var(--design-unit)); max-width: none; height: auto; }
  .desktop-cta:hover img { filter: brightness(.94); }
  .desktop-launch { position: absolute; left: 0; top: calc(706 * var(--design-unit)); width: 100%; }
  .page-content { position: relative; width: var(--main-width); max-width: 600px; margin-left: auto; margin-right: var(--right-gutter); }
  .page-content::before, .page-content::after { content: ''; position: absolute; top: 0; bottom: 0; width: 4px; background: var(--brown); pointer-events: none; }
  .page-content::before { right: 100%; }
  .page-content::after { left: 100%; }
  .scroll-cue { display: flex; flex-direction: column; align-items: center; position: fixed; right: 10px; bottom: 0; width: 60px; pointer-events: none; }
  .scroll-label { font-family: 'Afacad', Arial, sans-serif; font-size: 24px; font-weight: 500; line-height: 2.5; letter-spacing: .05em; writing-mode: vertical-rl; }
  .scroll-line { display: block; width: 1px; height: 250px; margin-top: 20px; background: var(--brown); transform-origin: top; animation: scroll-line-grow 2.4s cubic-bezier(.65, 0, .35, 1) infinite; }
}
@keyframes scroll-line-grow {
  0% { transform: scaleY(0); opacity: 0; }
  12% { opacity: 1; }
  65% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@keyframes chart-hint-swipe {
  0%, 100% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-line { animation: none; transform: scaleY(1); opacity: 1; }
  .chart-hint-hand { animation: none; }
}