@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { color-scheme: dark; --ink: #e7ece3; --muted: #819189; --accent: #e8c88a; }
* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; background: #101816; color: var(--ink); font-family: 'DM Sans', sans-serif; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
header { position: fixed; top: 0; left: 0; right: 0; padding: 32px 48px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
header > * { pointer-events: auto; }
header, main, footer { transition: opacity .5s ease, visibility .5s; }
body.zen header, body.zen main, body.zen footer { opacity: 0; visibility: hidden; }
body.zen header:hover { opacity: 1; visibility: visible; }
.wordmark { color: var(--ink); text-decoration: none; font-size: 29px; font-weight: 700; letter-spacing: -1.5px; display: flex; align-items: center; }
.brand-icon { color: var(--accent); font-size: 40px; font-weight: 400; margin-right: 11px; line-height: 1; }
.brand-dot { color: var(--accent); }
.edition, .label, .eyebrow, footer, .vessel-note { font-size: 10px; font-weight: 500; letter-spacing: 1.8px; }
.edition { color: #94a29a; margin-left: -35px; }
.edition-number { margin-left: 24px; color: #53635a; }
.icon-button { width: 40px; height: 40px; border: 1px solid #344139; border-radius: 50%; color: #9daa9f; background: #ffffff03; cursor: pointer; transition: background .2s, transform .3s; }
.icon-button:hover { background: #ffffff0c; transform: rotate(-30deg); }
.icon-button svg { width: 18px; height: 18px; vertical-align: middle; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.session { position: relative; display: flex; align-items: center; }
.session-time { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 12px; letter-spacing: 2.5px; color: #9daa9f; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .4s; pointer-events: none; }
.session:hover .session-time, .session.peek .session-time { opacity: 1; }
#session-icon-stop { display: none; }
#session.is-running #session-icon-play { display: none; }
#session.is-running #session-icon-stop { display: inline; }
#fs-icon-compress { display: none; }
#fullscreen.is-fullscreen #fs-icon-expand { display: none; }
#fullscreen.is-fullscreen #fs-icon-compress { display: inline; }
.intro { position: absolute; top: 20%; left: 7.5%; pointer-events: none; }
.eyebrow { color: #96a58f; font-size: 9px; letter-spacing: 1.65px; display: flex; align-items: center; gap: 9px; }
.live-dot { display: inline-block; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px #e8c88a50; }
h1 { font-family: 'Manrope', sans-serif; font-size: clamp(42px, 4.4vw, 70px); font-weight: 400; letter-spacing: -3.5px; line-height: 1.15; margin: 24px 0 20px; }
h1 em { display: block; font-family: Georgia, serif; font-weight: 400; color: var(--accent); letter-spacing: -2px; }
.intro p { color: #8e9c93; font-size: 13px; line-height: 1.9; }
.level-panel { position: absolute; right: 8%; top: 45%; width: 152px; opacity: 0; transition: opacity .4s; }
.level-panel:hover { opacity: 1; }
.level-panel::before { content: ''; position: absolute; left: -14px; top: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: .3; transition: opacity .4s; }
.level-panel:hover::before { opacity: 0; }
.label { color: #8b9a8d; font-size: 9px; letter-spacing: 1.5px; }
.level-panel > div:nth-child(2) { margin: 13px 0 16px; font-family: 'Manrope', sans-serif; font-size: 47px; font-weight: 400; line-height: 1; letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.percent { color: #7d8e80; font-size: 19px; margin-left: 6px; }
.level-track { height: 2px; width: 115px; background: #394439; margin-bottom: 13px; }
.level-track span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s; }
.level-caption { font-size: 10px; color: #77867b; }
.vessel-note { position: absolute; top: 39%; left: calc(50% + 160px); display: flex; align-items: center; gap: 12px; color: #647768; font-size: 8px; letter-spacing: 1.2px; pointer-events: none; }
.note-line { width: 34px; height: 1px; background: #445347; }
.drag-hint { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); color: #94a18e; font-size: 21px; pointer-events: none; transition: opacity .5s; white-space: nowrap; }
.drag-hint span { font-size: 10px; margin-left: 10px; letter-spacing: .6px; vertical-align: middle; }
.controls { position: absolute; left: 50%; bottom: 10.8%; transform: translateX(-50%); display: flex; align-items: center; gap: 26px; border: 1px solid #394638; border-radius: 18px; padding: 19px 23px; background: #1c261ee0; box-shadow: 0 15px 55px #0002, inset 0 1px #ffffff03; backdrop-filter: blur(18px); }
.palette-group { display: flex; flex-direction: column; gap: 11px; }
.palette { display: flex; gap: 12px; }
.swatch { display: block; width: 17px; height: 17px; padding: 0; border: 0; border-radius: 50%; background: var(--swatch); cursor: pointer; position: relative; transition: transform .2s; }
.swatch:hover { transform: scale(1.15); }
.swatch.active::after { content: ''; position: absolute; inset: -4px; border: 1px solid var(--swatch); border-radius: 50%; opacity: .65; }
.control-divider { width: 1px; height: 41px; background: #3b4637; }
.pour-button { display: flex; align-items: center; gap: 12px; color: #e3eadc; background: transparent; border: none; padding: 9px 0; cursor: pointer; white-space: nowrap; font-size: 12px; touch-action: none; user-select: none; }
.keycap { border: 1px solid #64765a; color: var(--accent); background: #e8c88a0b; padding: 0 10px 4px; font-size: 23px; line-height: 27px; border-radius: 6px; box-shadow: 0 2px #090f09; transition: background .15s; }
.pour-button.is-pouring .keycap { background: #e8c88a33; transform: translateY(2px); box-shadow: none; }
.pour-button svg { margin-left: 2px; height: 18px; width: 18px; color: var(--accent); }
footer { position: absolute; bottom: 26px; left: 48px; right: 48px; display: flex; justify-content: space-between; align-items: center; color: #67796d; font-size: 8px; letter-spacing: 1.4px; pointer-events: none; }
.keyboard-tip { text-transform: none; letter-spacing: .3px; font-size: 10px; }
kbd { font: inherit; border: 1px solid #38463c; border-radius: 4px; padding: 3px 7px; margin-right: 4px; }
.footer-dot { margin: 0 10px; }
.footer-right span { margin-left: 15px; font-size: 15px; }
@media (max-width: 850px) {
  header { padding: 23px 25px; } .edition { font-size: 8px; margin: 0; letter-spacing: 1px; } .edition-number { display: none; }
  .intro { top: 15%; left: 7%; } h1 { font-size: 47px; } .intro p { font-size: 11px; } .eyebrow { font-size: 7px; }
  .vessel-note { display: none; } .level-panel { right: 5%; width: 105px; } .level-track { width: 90px; } .level-caption { font-size: 9px; }
  footer { left: 25px; right: 25px; } .footer-right { display: none; }
}
@media (max-width: 600px) {
  .edition { max-width: 150px; text-align: center; line-height: 1.8; font-size: 7px; } .wordmark { font-size: 24px; } .brand-icon { font-size: 33px; }
  .intro { top: 13%; left: 0; width: 100%; text-align: center; } .eyebrow { justify-content: center; font-size: 7px; } h1 { font-size: 39px; letter-spacing: -2px; margin: 14px 0 9px; } h1 em { display: inline; } .intro p { font-size: 10px; line-height: 1.7; }
  .level-panel { top: 43%; right: 5%; width: 56px; } .level-panel .label { font-size: 7px; line-height: 1.8; display: block; } .level-panel > div:nth-child(2) { font-size: 30px; margin: 10px 0 12px; } .percent { font-size: 13px; margin-left: 2px; } .level-track { width: 45px; } .level-caption { display: none; }
  .controls { bottom: 10%; gap: 18px; padding: 17px 18px; border-radius: 15px; } .pour-button { font-size: 10px; gap: 9px; } .pour-button svg { display: none; } .palette { gap: 11px; } .palette-group .label { font-size: 7px; } .keycap { padding: 0 8px 4px; }
  .drag-hint { bottom: 24%; } footer { bottom: 22px; justify-content: center; } .keyboard-tip { display: none; }
}
@media (max-height: 580px) { .intro { top: 19%; } .intro p, .eyebrow, .drag-hint { display: none; } h1 { font-size: 36px; } .controls { bottom: 8%; padding: 10px 18px; } footer { bottom: 10px; } }