/* Poppins carries every piece of interface text; Georgia carries the display type.
   Both are stored locally, so the site still needs no CDN. */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(public/fonts/poppins-400-latin.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(public/fonts/poppins-500-latin.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(public/fonts/poppins-600-latin.woff2) format('woff2')}

:root{
  --ink:#49392e;--muted:#9b8778;--line:#e9e0d3;
  --accent:#d2607a;--accent-deep:#b84a63;--cocoa:#8a6246;
  --glass:rgba(255,252,247,.74);
  --serif:Georgia,'Times New Roman',serif;
  --sans:Poppins,'Segoe UI',system-ui,sans-serif;

  /* The headline is the biggest thing on the page, so it sizes the page.
     "Your little universe." measures 8.29em in Georgia italic at this tracking, so a column
     of 8.45em always breaks the headline into exactly two lines — never one, never three. */
  --head:clamp(29px,3.6vw,64px);
  --sub:clamp(13px,1.25vw,18px);
  --col:calc(var(--head) * 8.45);
  /* The headline block is as tall as its own type, and the tools below it have to start
     under it: eyebrow and margins, then two headline lines, then three sub-head lines. */
  --intro-bottom:calc(94px + 44px + var(--head) * 2.2 + var(--sub) * 5.5);
  --gutter:clamp(16px,2vw,40px);
  --panel:clamp(228px,18vw,302px);
  /* both margins are reserved, so the cupcake keeps the middle to itself */
  --margin-left:calc(var(--col) + var(--gutter) * 2);
  --margin-right:calc(var(--panel) + var(--gutter) * 1.8);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;overflow:hidden;color:var(--ink);font:14px/1.5 var(--sans);
  background:radial-gradient(ellipse 90% 75% at 50% 42%,#fffdf8 0%,#fdf4ec 42%,#f6e7dd 78%,#efdcd2 100%);
  -webkit-font-smoothing:antialiased;
}
button,select,input{font:inherit}
button{cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- the object owns the whole page ---- */
#viewport{position:fixed;inset:0;touch-action:none;z-index:0}
#viewport canvas{display:block}

/* ---- launch ---- */
.launch{
  position:fixed;inset:0;z-index:9;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 50% 38%,#fffaf6 0%,#fdeef2 45%,#f8dfe6 100%);
  transition:opacity .6s ease,transform .6s ease;
}
.launch.gone{opacity:0;transform:scale(1.06);pointer-events:none}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;display:block;width:7px;height:16px;border-radius:4px;opacity:.75;animation:drift linear infinite}
@keyframes drift{
  0%{transform:translateY(8vh) rotate(0deg);opacity:0}
  12%{opacity:.8}
  100%{transform:translateY(-110vh) rotate(420deg);opacity:0}
}
.launch-card{position:relative;text-align:center;padding:0 24px;max-width:520px}
.launch-mark{width:clamp(108px,15vw,150px);height:auto;animation:bob 3.4s ease-in-out infinite;filter:drop-shadow(0 16px 22px rgba(145,82,99,.22))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
.eyebrow{font-size:10px;font-weight:500;letter-spacing:2.8px;color:var(--accent);margin:18px 0 0}
.launch h1{font:clamp(38px,5.9vw,68px)/1.06 var(--serif);margin:12px 0 0;letter-spacing:-1.2px}
.launch h1 em{font-style:italic;color:var(--accent-deep)}
.launch-sub{font-size:14px;color:#a98a84;margin:16px 0 0}
.play{
  position:relative;margin-top:30px;width:84px;height:84px;border:0;border-radius:50%;
  background:linear-gradient(160deg,#e8708c,#c74e6b);color:#fff6f8;
  box-shadow:0 18px 34px -12px rgba(183,74,99,.6);transition:transform .22s,box-shadow .22s,filter .22s;
}
.play svg{width:34px;height:34px;margin-left:4px}
.play:not(:disabled):hover{transform:scale(1.08);box-shadow:0 22px 40px -12px rgba(183,74,99,.7)}
.play:not(:disabled):active{transform:scale(.97)}
.play:disabled{filter:grayscale(.5) opacity(.45);cursor:progress}
.play-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(210,96,122,.5)}
.play:not(:disabled) .play-ring{animation:pulse 2.1s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.65}70%{transform:scale(1.42);opacity:0}100%{opacity:0}}
.launch-state{font-size:11px;letter-spacing:1.4px;color:#b79aa0;margin:18px 0 0;text-transform:uppercase}

/* ---- floating chrome ---- */
.topbar,.tool-stack,.stage,.eatbar,.hint{position:fixed;z-index:3}
.topbar{top:0;left:0;right:0;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);pointer-events:none}
.topbar>*{pointer-events:auto}
.brand{font:bold 30px var(--serif);letter-spacing:-1.5px}
.brand span{color:var(--accent);margin-left:3px}
.tools{display:flex;gap:7px}
.icon-btn{
  position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--glass);
  backdrop-filter:blur(14px);color:var(--ink);font-size:15px;line-height:1;transition:.2s;
}
.icon-btn:hover{background:#fff;border-color:#e2cdc2;transform:translateY(-1px)}
.icon-btn.on{background:var(--accent);border-color:var(--accent);color:#fff6f8}
/* muted reads as the note struck through, so the button keeps its shape either way */
.icon-btn.muted{color:#b8a497}
.icon-btn.muted::after{
  content:'';position:absolute;left:9px;right:9px;top:50%;height:1.5px;border-radius:2px;
  background:currentColor;rotate:-32deg;
}
.text-btn{background:none;border:0;color:var(--muted);font-size:11px;padding:7px 0 0}
.text-btn:hover{color:var(--accent)}
.icon{background:none;border:0;color:var(--muted);font-size:12px;line-height:1;padding:4px}
.hint{bottom:12px;left:50%;transform:translateX(-50%);margin:0;font-size:10px;letter-spacing:.4px;color:#b5a08f;pointer-events:none}

/* ---- the steps are the objects themselves ---- */
.stage{bottom:40px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
.stage>*{pointer-events:auto}
.tray{display:flex;gap:clamp(2px,1.4vw,16px);align-items:flex-end;justify-content:center;width:100%;padding:0 10px;overflow-x:auto;scrollbar-width:none}
.tray::-webkit-scrollbar{display:none}
/* the rail only owns the band between the two margins, so the objects shrink to fit it */
.chip{
  position:relative;flex:0 1 auto;min-width:34px;border:0;background:none;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:9px;transition:transform .25s;
}
.chip img{
  display:block;width:clamp(58px,7.4vw,88px);max-width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  filter:grayscale(1) opacity(.22);transition:filter .3s,transform .3s;
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:#dfd0c2;transition:.25s}
.chip .tip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  white-space:nowrap;background:var(--ink);color:#fff8f0;font-size:10px;padding:5px 11px;border-radius:20px;
  opacity:0;pointer-events:none;transition:.2s;
}
.chip:hover .tip{opacity:1;transform:translateX(-50%) translateY(0)}
.chip.locked{cursor:not-allowed}
.chip.added img{filter:drop-shadow(0 8px 12px rgba(73,57,46,.2))}
.chip.added .dot{background:var(--accent)}
.chip.next img{filter:drop-shadow(0 10px 16px rgba(210,96,122,.34));animation:nudge 2s ease-in-out infinite}
.chip.next .dot{background:none;box-shadow:inset 0 0 0 2px var(--accent);animation:blink 2s ease-in-out infinite}
.chip.active img{filter:drop-shadow(0 8px 14px rgba(210,96,122,.5))}
.chip:not(.locked):hover{transform:translateY(-5px)}
.chip:not(.locked):hover img{filter:drop-shadow(0 12px 16px rgba(73,57,46,.26))}
@keyframes nudge{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.05)}}
@keyframes blink{0%,100%{opacity:.4}50%{opacity:1}}

.pill{
  border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(14px);color:var(--ink);
  border-radius:30px;padding:11px 22px;font-size:12px;transition:.2s;
}
.pill:hover{background:#fff;border-color:#e2cdc2}
.pill.primary{background:var(--accent);border-color:var(--accent);color:#fff6f8}
.pill.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
#to-eat{animation:rise .5s ease both}
.actions{display:flex;gap:9px;align-items:center}
.rect{
  border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(14px);color:var(--ink);
  border-radius:10px;padding:10px 18px;font-size:12px;transition:.2s;
}
.rect:hover{background:#fff;border-color:#e2cdc2;transform:translateY(-1px)}
.rect.ghost{background:none;color:var(--muted)}
.rect.ghost:hover{background:var(--glass);border-color:#e2cdc2;color:var(--ink)}
#bounce{animation:rise .4s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.eatbar{bottom:40px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px}
.bite-count{font-size:11px;font-weight:500;letter-spacing:1.2px;color:var(--accent);text-transform:uppercase;white-space:nowrap}

/* ---- left column: view tools over the adjust panel ---- */
.tool-stack{left:var(--gutter);bottom:40px;width:250px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
#adjust{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#dec6bf transparent}
.view-tools{display:flex;align-items:center;gap:7px}
.checkbox{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;white-space:nowrap;
  border:1px solid var(--line);border-radius:19px;background:var(--glass);backdrop-filter:blur(14px);
  font-size:11px;color:var(--ink);cursor:pointer;transition:.2s;
}
.checkbox:hover{background:#fff;border-color:#e2cdc2}
.checkbox input{
  appearance:none;margin:0;flex:none;width:14px;height:14px;border:1.5px solid #cdbcae;border-radius:4px;
  background:#fff;display:grid;place-items:center;cursor:pointer;transition:.18s;
}
.checkbox input:checked{background:var(--accent);border-color:var(--accent)}
.checkbox input:checked::after{content:'';width:7px;height:4px;border:1.6px solid #fff;border-top:0;border-right:0;rotate:-45deg;translate:0 -1px}
.checkbox:has(input:checked){border-color:#e4b6c0;background:#fff2f5;color:#965268}
.panel{
  background:var(--glass);backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 20px 50px -26px rgba(73,57,46,.45);
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.panel-head strong{font:16px var(--serif);font-weight:normal}
select{width:100%;border:1px solid var(--line);background:#fffaf4;border-radius:8px;padding:7px;color:var(--ink);font-size:11px}
.panel-tabs{display:flex;gap:3px;background:#f6ece2;border-radius:9px;padding:3px;margin:10px 0 4px}
.panel-tabs button{flex:1;border:0;background:none;border-radius:7px;padding:6px;font-size:11px;color:var(--muted);transition:.18s}
.panel-tabs button.active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(73,57,46,.1)}
.slider{display:flex;gap:9px;align-items:center;margin:9px 0;font-size:10px}
.slider span{width:50px;color:var(--muted);flex:0 0 auto}
.slider input{width:100%;accent-color:var(--accent);height:3px}
.slider output{width:34px;text-align:right;flex:0 0 auto;font-variant-numeric:tabular-nums}

/* the bottom of the stage belongs to the ingredients, so messages land under the top bar */
#toast{
  position:fixed;top:74px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:10px 20px;border-radius:30px;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:8;
}

/* The headline holds the left margin; the personal-touch panel owns the right. */
.studio-sidebar{display:contents}
.studio-intro{position:fixed;left:var(--gutter);top:94px;width:var(--col);z-index:3}
.studio-intro .eyebrow{margin:0 0 14px;font-size:11px;letter-spacing:2.6px}
/* two lines, broken at the full stop */
.studio-intro h1{font:var(--head)/1.07 var(--serif);letter-spacing:-1.5px;margin:0}
.studio-intro h1 em{font-weight:normal;color:#b27f75}
/* three lines, each broken where the sentence already pauses */
.studio-intro>p:last-child{color:var(--muted);font-size:var(--sub);line-height:1.75;margin:18px 0 0}
.properties{
  position:fixed;right:var(--gutter);top:88px;max-height:calc(100vh - 116px);width:var(--panel);z-index:3;
  background:rgba(255,253,249,.78);border:1px solid var(--line);border-radius:18px;padding:19px;
  overflow:auto;scrollbar-width:thin;scrollbar-color:#dec6bf transparent;box-shadow:0 16px 40px -30px #9b6d61;
}
.properties-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.properties-heading h2{font:21px var(--serif);margin:0}.properties-heading>span{color:var(--accent);font-size:22px}
.properties-sub{font-size:10px;color:var(--muted);margin:7px 0 4px}
.properties fieldset{border:0;margin:0;padding:0;min-width:0}
.properties fieldset:disabled{opacity:.5}
.property-section{padding-top:18px;margin-top:18px;border-top:1px solid var(--line)}
.property-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.property-label h3{font-weight:600;font-size:12px;margin:0}.property-label>span{font-size:7px;letter-spacing:1.3px;color:#ae978c}
.preset-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.color-preset{border:1px solid transparent;border-radius:9px;background:none;padding:7px 2px;color:var(--muted);font-size:9px;display:flex;flex-direction:column;align-items:center;gap:6px}
.color-preset i{display:block;width:28px;height:28px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #eaded6}
.color-preset.active,.fruit-options button.active{border-color:#e4b6c0;background:#fff2f5;color:#965268}
.color-preset:hover,.fruit-options button:hover{background:#f7efea}
.property-note{font-size:9px;line-height:1.6;color:#ac978a;margin:10px 0 0}
.fruit-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.fruit-options button{border:1px solid var(--line);border-radius:9px;background:#fffcf8;padding:9px 1px;font-size:9px;color:var(--muted);display:flex;align-items:center;flex-direction:column;gap:5px}
.fruit-options button>span{font-size:24px;line-height:30px}.fruit-options small{font-size:8px}

/* The stage takes what is left between the two reserved margins. */
@media(min-width:861px){
 #viewport,.stage{left:var(--margin-left);right:var(--margin-right)}
 .eatbar,.hint{left:calc(50% + (var(--margin-left) - var(--margin-right)) / 2)}
 .tool-stack{top:calc(var(--intro-bottom) + 20px);bottom:216px}
}
/* the rail only has the middle band, so all six objects have to fit inside it */
@media(max-width:1180px) and (min-width:861px){
 .tray{gap:10px}.chip img{width:64px}
 .properties{top:84px;max-height:calc(100vh - 106px);padding:16px}
}
@media(max-width:1000px) and (min-width:861px){
 .tray{gap:5px}.chip img{width:50px}
 .properties{padding:14px}
}
/* One column on a phone: headline, then the panel, then the cupcake. */
@media(max-width:860px){
 .topbar{height:60px}
 .brand{font-size:25px}
 #toast{top:62px}
 .stage{bottom:20px;gap:8px}
 .studio-sidebar{display:flex;flex-direction:column;position:fixed;left:16px;right:16px;top:73px;height:304px;gap:11px;z-index:3}
 .studio-intro{position:static;width:auto;flex:none}
 .studio-intro .eyebrow{font-size:9px;letter-spacing:2px;margin-bottom:8px}
 .studio-intro h1{font-size:29px;line-height:1.03;letter-spacing:-.9px}
 .studio-intro>p:last-child{font-size:11px;margin-top:9px;line-height:1.55}
 .properties{position:static;width:auto;flex:1;min-height:0;max-height:none;padding:13px;border-radius:13px}
 .properties-heading h2{font-size:17px}.properties-sub{margin:3px 0}
 .property-section{padding-top:13px;margin-top:13px}.color-preset{padding:6px}
 #viewport{top:390px;bottom:0}
 /* one column has no left margin to stack into: the tools take the top of the stage,
    the panel stays down by the rail it belongs to */
 .tool-stack{display:contents}
 .view-tools{position:fixed;z-index:3;left:16px;top:398px}
 #adjust{position:fixed;z-index:3;left:16px;right:16px;bottom:146px;max-height:240px;overflow:auto}
 .rect{padding:9px 14px;font-size:11px}.actions{gap:7px}
 .chip img{width:50px}
 .eatbar{bottom:20px;flex-wrap:wrap;justify-content:center;width:100%;padding:0 12px}
 .pill{padding:9px 16px;font-size:11px}
 .hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}