:root{
  --canvas:#FAF9F5; --surface:#FFFFFF; --ink:#1D2228;
  --text-secondary:#4A4F55; --text-tertiary:#8A8F96; --text-quaternary:#B9BDC3;
  --border:#E7E4DD; --border-strong:#D8D4CB;
  --haand:#5F5E5A; --haand-let:#9FA4AB; --haand-fin:#C4C8CD;
  --card:#FFFFFF; --paper:#FAF9F5; --accent:oklch(0.62 0.09 52);
  --r:13px; --r-s:8px; --pill:9999px;
  --ease:cubic-bezier(.25,.46,.45,.94);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{font-family:"Satoshi","Inter",system-ui,-apple-system,sans-serif;background:var(--canvas);
  color:var(--ink);font-size:13px;line-height:1.5;padding:56px clamp(24px,5vw,80px) 120px}
a{color:var(--accent);text-decoration:none} a:is(:hover, [data-hover]){color:oklch(0.55 0.1 52)}
.masthead{max-width:1240px;margin:0 auto 8px}
.masthead h1{font-size:23px;font-weight:600;letter-spacing:-0.01em}
.masthead p{font-size:13.5px;color:var(--text-secondary);max-width:76ch;margin-top:8px;text-wrap:pretty}
.masthead .keys{font-size:12.5px;color:var(--text-tertiary);margin-top:10px}
.masthead .keys b{color:var(--text-secondary);font-weight:600}

.turn{max-width:1240px;margin:36px auto 0;display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}

.bud{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:22px 22px 24px;display:flex;flex-direction:column;gap:16px}
.bud.a{width:412px} .bud.b{width:412px} .bud.c{width:100%;max-width:1240px}
.badge{position:absolute;top:-12px;left:20px;height:24px;padding:0 11px;border-radius:var(--pill);
  background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  display:inline-flex;align-items:center;font-variant-numeric:tabular-nums}
.bhead h2{font-size:15px;font-weight:600;letter-spacing:-0.01em}
.bhead p{font-size:12.5px;color:var(--text-secondary);margin-top:5px;max-width:52ch;text-wrap:pretty}
.bhead .tag{display:inline-block;margin-top:9px;font-size:10.5px;color:var(--text-tertiary);
  border:1px solid var(--border);border-radius:var(--pill);padding:2px 9px}

.sheet{display:grid;gap:14px}
.sheet.two{grid-template-columns:1fr}
.sheet.three{grid-template-columns:repeat(3,1fr)}

.cell{border:1px solid var(--border);border-radius:var(--r-s);background:var(--canvas);
  padding:18px 14px 16px;display:flex;flex-direction:column;align-items:center;gap:11px;min-height:210px;justify-content:center;position:relative;overflow:hidden}
.cell .grain{position:absolute;inset:0;pointer-events:none;opacity:.5}
.cell figure{width:150px;position:relative;z-index:1}
.bud.b .cell figure{width:108px}
.cell.big figure{width:184px}
.cell svg{display:block;width:100%;height:auto;overflow:visible}
.cell .cap{font-size:12px;color:var(--text-tertiary);text-align:center;max-width:26ch;z-index:1;text-wrap:pretty}
.cell .note{font-size:10px;color:var(--text-quaternary);text-transform:uppercase;letter-spacing:.08em;z-index:1}

.compare{display:flex;align-items:center;gap:10px}
.compare .old{width:82px;opacity:.9}
.compare .arrow{color:var(--text-quaternary);font-size:15px}
.compare .new{width:150px}

.handling{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 4px 0 12px;
  border:1px solid var(--border-strong);border-radius:var(--pill);background:var(--surface);
  color:var(--ink);font-size:12px;font-weight:500;z-index:1;transition:border-color 160ms var(--ease)}
.handling:is(:hover, [data-hover]){border-color:var(--haand-let)}
.handling kbd{font:inherit;font-size:11px;color:var(--text-tertiary);border:1px solid var(--border);
  border-radius:4px;min-width:18px;height:18px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;background:var(--canvas)}

/* atelier */
.atelier{border:1px solid var(--border);border-radius:var(--r-s);background:
  radial-gradient(120% 90% at 30% 0%, #FFFDF8 0%, var(--canvas) 60%);
  padding:8px;position:relative;overflow:hidden}
.atelier svg{display:block;width:100%;height:auto}
.atelier .light{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(60% 80% at 26% -10%, rgba(255,246,224,.7), rgba(255,246,224,0) 55%)}

/* living */
@media (prefers-reduced-motion: no-preference){
  .breathe{animation:breathe 5.5s var(--ease) infinite;transform-origin:100px 90px}
  @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.028)}}
  .twinkle{animation:twinkle 3.4s ease-in-out infinite}
  @keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
  .twinkle.b{animation-delay:1.1s}
  .drip{animation:drip 3.2s cubic-bezier(.5,0,.7,1) infinite}
  @keyframes drip{0%,55%{transform:translateY(0);opacity:0}
    60%{opacity:1}72%{transform:translateY(6px) scale(1.05,.95);opacity:1}
    100%{transform:translateY(46px) scale(.75,1.2);opacity:0}}
  .well{animation:well 3.2s cubic-bezier(.5,0,.7,1) infinite;transform-origin:100px 96px}
  @keyframes well{0%,52%{transform:scaleY(1)}62%{transform:scaleY(1.14)}72%,100%{transform:scaleY(1)}}
  .needle{animation:wander 7s ease-in-out infinite;transform-origin:101px 88px}
  @keyframes wander{0%{transform:rotate(-32deg)}22%{transform:rotate(24deg)}
    44%{transform:rotate(-12deg)}64%{transform:rotate(9deg)}82%{transform:rotate(-4deg)}100%{transform:rotate(-32deg)}}
  .steam1{animation:steam 4s ease-in-out infinite}
  .steam2{animation:steam 4s ease-in-out infinite .8s}
  @keyframes steam{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.8;transform:translateY(-3px)}}
}