/* Bakers World 360° turntable page (same look as the original turntable file; fonts now served from this site) */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/bricolage.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/plex-sans.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/plex-mono-500.woff2) format("woff2")}
*,*::before,*::after{box-sizing:border-box}
body{margin:0}

/* Layout: one studio stage filling the screen; a slim top bar names the product, a bottom dock holds the turntable controls. */
:root{
  --stage:#e4e6ea; --stage-glow:#f4f5f7; --ink:#1d1f24; --muted:#5e636d;
  --accent:#c81d25; --dock:rgba(255,255,255,.78); --line:rgba(29,31,36,.12);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --stage:#17191d; --stage-glow:#262a31; --ink:#eceef2; --muted:#9aa0aa;
  --accent:#ff4a4f; --dock:rgba(28,31,36,.82); --line:rgba(236,238,242,.14); color-scheme:dark}}
:root[data-theme="dark"]{
  --stage:#17191d; --stage-glow:#262a31; --ink:#eceef2; --muted:#9aa0aa;
  --accent:#ff4a4f; --dock:rgba(28,31,36,.82); --line:rgba(236,238,242,.14); color-scheme:dark}
html,body{height:100%}
body{background:radial-gradient(ellipse 70% 60% at 50% 42%,var(--stage-glow),var(--stage));background-color:var(--stage);color:var(--ink);font-family:var(--body);overflow:hidden}
.app{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding-inline:16px}
header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-block:18px 0;z-index:2}
h1{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,3vw,1.75rem);margin:0;letter-spacing:-.01em;text-wrap:balance}
h1 span{color:var(--accent)}
.meta{font-family:var(--mono);font-size:.75rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
#stage{position:absolute;inset:0;z-index:0;touch-action:none;cursor:grab}
#stage:active{cursor:grabbing}
#stage canvas{display:block;width:100%;height:100%}
.dock{z-index:2;justify-self:center;margin-bottom:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  background:var(--dock);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:10px 14px;max-width:100%}
button{font:500 .875rem var(--body);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:9px;padding:7px 12px;cursor:pointer}
button:hover{border-color:var(--accent)}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
label{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted)}
input[type=range]{accent-color:var(--accent);width:110px}
.read{font-family:var(--mono);font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--muted);min-width:9.5ch;text-align:right}
.hint{position:absolute;left:50%;transform:translateX(-50%);bottom:84px;font-size:.75rem;color:var(--muted);z-index:1;white-space:nowrap}
@media (max-width:480px){.hint{bottom:128px}}

/* ?embed: bare stage for iframes, keeps drag/zoom, hides site chrome */
html.embed header, html.embed .hint, html.embed .dock{display:none}
html.embed body{background:transparent}

/* added for the website: link back, and a message if 3D cannot run on this device */
.back{font:500 .8125rem var(--body);color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.back:hover{color:var(--accent);border-color:var(--accent)}
.nogl{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted);z-index:1}
.nogl[hidden]{display:none}

/* per-product stage and accent colours (from each turntable file) */
:root[data-model="white-bread"]{--stage:#e4e6ea;--stage-glow:#f4f5f7;--accent:#c81d25}
@media (prefers-color-scheme: dark){:root[data-model="white-bread"]:not([data-theme="light"]){--stage:#17191d;--stage-glow:#262a31;--accent:#ff4a4f}}
:root[data-model="white-bread"][data-theme="dark"]{--stage:#17191d;--stage-glow:#262a31;--accent:#ff4a4f}
:root[data-model="milk-bread"]{--stage:#e7e6e3;--stage-glow:#f6f5f2;--accent:#1572d3}
@media (prefers-color-scheme: dark){:root[data-model="milk-bread"]:not([data-theme="light"]){--stage:#17191d;--stage-glow:#262a31;--accent:#5aa9f5}}
:root[data-model="milk-bread"][data-theme="dark"]{--stage:#17191d;--stage-glow:#262a31;--accent:#5aa9f5}
:root[data-model="brown-bread"]{--stage:#e7e6e3;--stage-glow:#f6f5f2;--accent:#a8561c}
@media (prefers-color-scheme: dark){:root[data-model="brown-bread"]:not([data-theme="light"]){--stage:#17191d;--stage-glow:#262a31;--accent:#f0a24a}}
:root[data-model="brown-bread"][data-theme="dark"]{--stage:#17191d;--stage-glow:#262a31;--accent:#f0a24a}
:root[data-model="premium-brown-bread"]{--stage:#e7e6e3;--stage-glow:#f6f5f2;--accent:#b4531a}
@media (prefers-color-scheme: dark){:root[data-model="premium-brown-bread"]:not([data-theme="light"]){--stage:#17191d;--stage-glow:#262a31;--accent:#f08a3e}}
:root[data-model="premium-brown-bread"][data-theme="dark"]{--stage:#17191d;--stage-glow:#262a31;--accent:#f08a3e}
:root[data-model="wholemeal-bread"]{--stage:#e7e6e3;--stage-glow:#f6f5f2;--accent:#9b1b1f}
@media (prefers-color-scheme: dark){:root[data-model="wholemeal-bread"]:not([data-theme="light"]){--stage:#17191d;--stage-glow:#262a31;--accent:#f2c230}}
:root[data-model="wholemeal-bread"][data-theme="dark"]{--stage:#17191d;--stage-glow:#262a31;--accent:#f2c230}
:root[data-model="wholemeal-bread-300g"]{--stage:#e7e6e3;--stage-glow:#f6f5f2;--accent:#a87c00}
@media (prefers-color-scheme: dark){:root[data-model="wholemeal-bread-300g"]:not([data-theme="light"]){--stage:#17191d;--stage-glow:#262a31;--accent:#f2c230}}
:root[data-model="wholemeal-bread-300g"][data-theme="dark"]{--stage:#17191d;--stage-glow:#262a31;--accent:#f2c230}
:root[data-model="jumbo-bread"]{--stage:#e7e6e3;--stage-glow:#f6f5f2;--accent:#d4111e}
@media (prefers-color-scheme: dark){:root[data-model="jumbo-bread"]:not([data-theme="light"]){--stage:#17191d;--stage-glow:#262a31;--accent:#ff5a5f}}
:root[data-model="jumbo-bread"][data-theme="dark"]{--stage:#17191d;--stage-glow:#262a31;--accent:#ff5a5f}
:root[data-model="milk-rusk"]{--stage:#e7e6e3;--stage-glow:#f6f5f2;--accent:#1d4fc4}
@media (prefers-color-scheme: dark){:root[data-model="milk-rusk"]:not([data-theme="light"]){--stage:#17191d;--stage-glow:#262a31;--accent:#6f9bff}}
:root[data-model="milk-rusk"][data-theme="dark"]{--stage:#17191d;--stage-glow:#262a31;--accent:#6f9bff}
:root[data-model="premium-rusk"]{--stage:#e7e6e3;--stage-glow:#f6f5f2;--accent:#c81d25}
@media (prefers-color-scheme: dark){:root[data-model="premium-rusk"]:not([data-theme="light"]){--stage:#17191d;--stage-glow:#262a31;--accent:#ff5a5f}}
:root[data-model="premium-rusk"][data-theme="dark"]{--stage:#17191d;--stage-glow:#262a31;--accent:#ff5a5f}