@font-face { font-family: Gloock; src: url(/fonts/gloock.woff2) format('woff2'); font-weight: 400; font-display: block }
@font-face { font-family: Hanken; src: url(/fonts/hanken-400.woff2) format('woff2'); font-weight: 400; font-display: block }
@font-face { font-family: Hanken; src: url(/fonts/hanken-500.woff2) format('woff2'); font-weight: 500 600 700; font-display: block }

:root {
  --crema: #EFE2CD; --oat: #D9BE98; --caramel: #CF8E4E; --ember: #A5563A; --tobacco: #7B3B26; --roast: #24120C;
  --paper: #F7EFE1; --ink: var(--roast); --soft: rgba(36, 18, 12, .62); --line: rgba(36, 18, 12, .16);
  --frame: min(100vw, 64vh);
  --pad: clamp(18px, calc(var(--frame) * .055), 56px);
  --r: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent }
html { font-size: clamp(15px, calc(var(--frame) * .024), 34px); background: var(--roast); height: 100% }
body { font-family: Hanken, system-ui, sans-serif; color: var(--ink); background: var(--roast); height: 100%; overflow: hidden;
  user-select: none; -webkit-user-select: none; overscroll-behavior: none; touch-action: manipulation }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
input, textarea { font: inherit; color: inherit; user-select: text; -webkit-user-select: text }
img, svg, canvas { display: block }
h1, h2, .serif { font-family: Gloock, Georgia, serif; font-weight: 400; letter-spacing: -.01em; line-height: 1.02 }

#app { position: relative; width: var(--frame); height: 100%; margin: 0 auto; background: var(--crema); overflow: hidden; overflow: clip }
#screen { overflow: hidden; overflow: clip }

/* ---------- header ---------- */
#top { position: absolute; inset: 0 0 auto; z-index: 5; background: linear-gradient(var(--crema) 72%, rgba(239, 226, 205, 0)); display: flex; align-items: center; gap: .8rem; padding: calc(var(--pad) * .6) var(--pad) 0; height: calc(var(--pad) * .6 + 3.2rem); transition: opacity .3s }
#top.hide { opacity: 0; pointer-events: none }
#brand { height: 2.4rem; display: flex; align-items: center; padding-right: .4rem }
#brand img { height: 1.15rem; width: auto }
#back { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line) }
#back[hidden] { display: none }
#back svg { width: 1.1rem; height: 1.1rem }
#dots { flex: 1; display: flex; justify-content: center; gap: .45rem }
#dots i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--line); transition: all .3s var(--ease) }
#dots i.on { background: var(--roast); width: 1.4rem; border-radius: 1rem }
#restart { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--soft); padding: .6rem 0 .6rem .6rem }

/* ---------- views ---------- */
#screen { position: absolute; inset: 0 }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--pad) * .6 + 4.4rem) var(--pad) var(--pad);
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; animation: inview .55s var(--ease) both }
.view.out { animation: outview .3s ease both; pointer-events: none }
@keyframes inview { from { opacity: 0; transform: translateY(2.2rem) } }
@keyframes outview { to { opacity: 0; transform: translateY(-1rem) } }
.kicker { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--soft); margin-bottom: .9rem }
.view h1 { font-size: 3.1rem; margin-bottom: .7rem }
.view h1 em { font-style: normal; color: var(--ember) }
.lede { font-size: 1.12rem; line-height: 1.45; color: var(--soft); max-width: 30em }
.head { margin: 1.4rem 0 1.8rem }
.spacer { flex: 1; min-height: 1.4rem }
.label { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--soft); margin: 1.5rem 0 .75rem }
.label small { letter-spacing: .04em; text-transform: none; font-weight: 400; opacity: .8 }

/* ---------- controls ---------- */
.grid { display: grid; gap: .8rem }
.grid.two { grid-template-columns: 1fr 1fr }
.grid.three { grid-template-columns: repeat(3, 1fr) }
.grid.fill { flex: 1; grid-auto-rows: 1fr; max-height: 44rem }
.grid.fill .chip { padding: 1rem 1.4rem }
.grid.fill .chip b { font-size: 1.85rem }
.grid.fill .chip small { font-size: .9rem }
.row { display: flex; flex-wrap: wrap; gap: .6rem }
.chip { position: relative; min-height: 4.6rem; padding: .9rem 1.2rem; border-radius: 1.2rem; border: 1.5px solid var(--line); background: var(--paper);
  text-align: left; display: flex; flex-direction: column; justify-content: center; gap: .15rem; transition: transform .15s, background .2s, border-color .2s, color .2s }
.chip b { font-family: Gloock, serif; font-weight: 400; font-size: 1.5rem; line-height: 1.05 }
.chip small { font-size: .82rem; color: var(--soft); transition: color .2s }
.chip:active { transform: scale(.97) }
.chip.on { background: var(--roast); border-color: var(--roast); color: var(--crema) }
.chip.on small { color: rgba(239, 226, 205, .7) }
.chip.mini { min-height: 3.2rem; padding: .55rem 1.1rem; border-radius: var(--r); flex-direction: row; align-items: center; gap: .5rem }
.chip.mini b { font-family: Hanken, sans-serif; font-weight: 500; font-size: 1rem }
.chip.mini .sw { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--line) }
.chip.off { opacity: .35; pointer-events: none }
.chip.big { min-height: 9rem; padding: 1.4rem 1.5rem; border-radius: 1.6rem }
.chip.big b { font-size: 2.1rem }
.chip.big small { font-size: .95rem; line-height: 1.35 }
.chip .tick { position: absolute; top: .8rem; right: .9rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center }
.chip.on .tick { background: var(--caramel); border-color: var(--caramel) }
.chip.on .tick::after { content: ''; width: .45rem; height: .25rem; border: 2px solid var(--roast); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem; padding: .4rem; border-radius: 1.4rem; background: rgba(36, 18, 12, .07) }
.seg button { min-height: 3.6rem; border-radius: 1.05rem; font-weight: 500; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: background .2s, color .2s }
.seg button.on { background: var(--roast); color: var(--crema) }
.seg svg { width: 1.2rem; height: 1.2rem }

.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem .8rem }
.swatch { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: .4rem 0 }
.swatch i { width: 100%; max-width: 8.2rem; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(36, 18, 12, .12); transition: transform .25s var(--ease), box-shadow .25s; position: relative }
.swatch.on i { transform: scale(1.06); box-shadow: 0 0 0 .3rem var(--crema), 0 0 0 .5rem var(--roast) }
.swatch b { font-family: Gloock, serif; font-weight: 400; font-size: 1.25rem }
.swatch small { font-size: .8rem; color: var(--soft); margin-top: -.45rem }

.btn { min-height: 4.4rem; padding: 0 2rem; border-radius: var(--r); background: var(--roast); color: var(--crema); font-weight: 500; font-size: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .8rem; transition: transform .15s, opacity .2s; width: 100% }
.btn:active { transform: scale(.98) }
.btn[disabled] { opacity: .3; pointer-events: none }
.btn svg { width: 1.3rem; height: 1.3rem }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line) }
.btn.text { background: none; color: var(--soft); min-height: 3rem; font-size: .95rem }
.actions { display: grid; gap: .7rem; margin-top: 1.6rem }
.actions.two { grid-template-columns: 1fr 1fr }

textarea.say { width: 100%; min-height: 9rem; border-radius: 1.4rem; border: 1.5px solid var(--line); background: var(--paper); padding: 1.2rem 1.3rem; font-size: 1.35rem; line-height: 1.4; resize: none; outline: none }
textarea.say:focus, input.name:focus { border-color: var(--roast) }
input.name { width: 100%; height: 4.2rem; border-radius: 1.2rem; border: 1.5px solid var(--line); background: var(--paper); padding: 0 1.3rem; font-size: 1.35rem; outline: none }
.counter { text-align: right; font-size: .8rem; color: var(--soft); margin-top: .4rem }

/* ---------- welcome ---------- */
.v-welcome { background: var(--roast); color: var(--crema); padding-top: calc(var(--pad) * 1.6); justify-content: flex-start; align-items: flex-start; overflow: hidden }
.v-welcome .emb { width: 46%; opacity: .95 }
.v-welcome h1 { font-size: 6.4rem; margin: 2.6rem 0 1rem; color: var(--crema) }
.v-welcome .lede { color: rgba(239, 226, 205, .72); font-size: 1.35rem }
.v-welcome .tap { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) * 1.2); z-index: 2; display: flex; align-items: center; justify-content: space-between }
.v-welcome .tap .btn { width: auto; background: var(--crema); color: var(--roast); padding: 0 2.4rem }
.v-welcome .tap span { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(239, 226, 205, .55) }
.descent { position: absolute; inset: auto 0 0; height: 46%; pointer-events: none }
.descent svg { position: absolute; left: 0; width: 200%; height: 100% }
.descent .w { animation: drift 18s linear infinite }
.descent .w:nth-child(2) { animation-duration: 23s } .descent .w:nth-child(3) { animation-duration: 29s }
.descent .w:nth-child(4) { animation-duration: 21s } .descent .w:nth-child(5) { animation-duration: 33s } .descent .w:nth-child(6) { animation-duration: 26s }
@keyframes drift { to { transform: translateX(-50%) } }
.pulse { animation: pulse 2.4s ease-in-out infinite }
@keyframes pulse { 50% { opacity: .45 } }

/* ---------- choose ---------- */
.paths { display: grid; gap: 1rem; flex: 1; grid-auto-rows: 1fr; max-height: 46rem }
.path { position: relative; border-radius: 1.8rem; padding: 1.8rem; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 11rem; transition: transform .15s }
.path:active { transform: scale(.985) }
.path b { font-family: Gloock, serif; font-weight: 400; font-size: 2.7rem; line-height: 1; position: relative }
.path small { font-size: 1.02rem; line-height: 1.4; margin-top: .6rem; max-width: 22em; opacity: .75; position: relative }
.path .art { position: absolute; right: -1.5rem; top: -1.5rem; width: 55%; max-width: 20rem; opacity: .9 }
.path .spark { position: absolute; right: 1.6rem; top: 1.6rem; width: 30%; max-width: 10rem; fill: var(--roast); opacity: .9 }
.path.dark { background: var(--roast); color: var(--crema) }
.path.warm { background: var(--caramel); color: var(--roast) }

/* ---------- thinking ---------- */
.v-thinking { align-items: center; justify-content: center; text-align: center }
.v-thinking .cup { width: 38%; margin-bottom: 2.4rem }
.v-thinking h1 { font-size: 2.6rem }
.v-thinking .lede { min-height: 1.5em; transition: opacity .3s }
.v-thinking .bands { animation: rise 3.2s var(--ease) infinite }
@keyframes rise { 0% { transform: translateY(190px) } 75%, 100% { transform: translateY(0) } }

/* ---------- result ---------- */
.v-result { padding-top: calc(var(--pad) * .6 + 3.8rem) }
.v-result .hero { display: grid; grid-template-columns: 38% 1fr; gap: 1.2rem; align-items: end; margin: .4rem 0 1.4rem }
.v-result .glass { width: 100%; filter: drop-shadow(0 1.2rem 1.4rem rgba(36, 18, 12, .18)) }
.v-result h1 { font-size: 3.3rem; margin: .2rem 0 .7rem; overflow-wrap: anywhere }
.v-result .why { font-size: 1.12rem; line-height: 1.45; color: var(--soft) }
.meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 1.1rem }
.tag { display: inline-flex; align-items: center; gap: .45rem; height: 2.3rem; padding: 0 .95rem; border-radius: var(--r); background: rgba(36, 18, 12, .07); font-size: .88rem; font-weight: 500 }
.tag svg { width: 1.1rem; height: 1.1rem }
.tag .str { display: inline-flex; gap: 3px } .tag .str i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--line) } .tag .str i.on { background: var(--roast) }
.tag.price { background: var(--roast); color: var(--crema); margin-left: auto }
.recipe { border-top: 1.5px solid var(--line) }
.recipe li { list-style: none; display: flex; align-items: center; gap: .9rem; padding: .78rem 0; border-bottom: 1px solid var(--line); font-size: 1.08rem }
.recipe li i { width: 1.15rem; height: 1.15rem; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(36, 18, 12, .2) }
.recipe li span { flex: 1 }
.recipe li em { font-style: normal; color: var(--soft); font-variant-numeric: tabular-nums }
.note { font-size: .86rem; color: var(--soft); margin-top: .8rem; line-height: 1.4 }
.source { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); margin-bottom: .2rem }
.source i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--caramel) }

/* ---------- stickers ---------- */
.stickers { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem }
.stk { grid-column: span 2; border-radius: 1.4rem; padding: 1rem .7rem .9rem; background: var(--paper); border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: .5rem; transition: transform .15s, border-color .2s, background .2s }
.stk:nth-child(4) { grid-column: 2 / span 2 } .stk:nth-child(5) { grid-column: 4 / span 2 }
.stk canvas { width: 82%; height: auto; aspect-ratio: 1; image-rendering: pixelated; filter: drop-shadow(0 .3rem .5rem rgba(36, 18, 12, .15)) }
.stk b { font-family: Gloock, serif; font-weight: 400; font-size: 1.25rem; line-height: 1 }
.stk small { font-size: .78rem; color: var(--soft); text-align: center }
.stk.on { border-color: var(--roast); background: #fff; box-shadow: 0 0 0 2px var(--roast) }
.stk:active { transform: scale(.97) }

.studio { position: relative; width: 86%; margin: .4rem auto 0; aspect-ratio: 1 }
.studio canvas, .studio video { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50% }
.studio canvas.print { image-rendering: pixelated; filter: drop-shadow(0 1rem 1.6rem rgba(36, 18, 12, .2)); touch-action: none }
.studio video { object-fit: cover; transform: scaleX(-1); clip-path: circle(33% at 50% 50%); background: #000 }
.studio .ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, transparent 33%, rgba(247, 239, 225, .94) 33.3%); }
.studio .count { position: absolute; inset: 0; display: grid; place-items: center; font-family: Gloock, serif; font-size: 7rem; color: #fff; text-shadow: 0 .3rem 1.2rem rgba(0, 0, 0, .4); pointer-events: none }
.tools { display: flex; justify-content: center; gap: .7rem; margin-top: 1.4rem }
.tools button { height: 3.4rem; min-width: 3.4rem; padding: 0 1.1rem; border-radius: var(--r); border: 1.5px solid var(--line); display: flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .95rem }
.tools button[hidden] { display: none }
.tools button.on { background: var(--roast); color: var(--crema); border-color: var(--roast) }
.tools .pen { display: block; border-radius: 50%; background: currentColor }

.final { width: 72%; margin: .6rem auto 0; aspect-ratio: 1; position: relative }
.final canvas { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 1rem 1.6rem rgba(36, 18, 12, .22)) }
.summary { text-align: center; margin-top: 1.4rem }
.summary b { font-family: Gloock, serif; font-weight: 400; font-size: 2rem; display: block }
.summary span { color: var(--soft); font-size: 1rem }

/* ---------- printing / done ---------- */
.v-printing { align-items: center; justify-content: center; text-align: center }
.slip { width: 46%; aspect-ratio: .62; position: relative; overflow: hidden; margin-bottom: 2rem; border-radius: .3rem .3rem 0 0 }
.slip .paper { position: absolute; inset: 0; background: #FBF6EC; box-shadow: 0 1rem 2rem rgba(36, 18, 12, .15); animation: feed 2.2s var(--ease) both; display: flex; flex-direction: column; align-items: center; padding-top: 10% }
.slip .paper canvas { width: 76%; image-rendering: pixelated }
.slip .paper i { display: block; height: .35rem; background: rgba(36, 18, 12, .5); margin-top: 6%; border-radius: 2px }
.slip::before { content: ''; position: absolute; inset: 0 0 auto; height: .9rem; background: var(--roast); border-radius: .3rem; z-index: 2 }
@keyframes feed { from { transform: translateY(-100%) } }
.v-done { align-items: center; justify-content: center; text-align: center; background: var(--roast); color: var(--crema) }
.v-done .kicker { color: rgba(239, 226, 205, .6) }
.v-done .no { font-family: Gloock, serif; font-size: 9rem; line-height: 1; margin: .6rem 0 1.4rem; letter-spacing: -.02em }
.v-done h1 { color: var(--crema); font-size: 2.4rem }
.v-done .lede { color: rgba(239, 226, 205, .72); margin: 0 auto }
.v-done .btn { background: var(--crema); color: var(--roast); width: auto; padding: 0 2.4rem; margin-top: 2.4rem }
.v-done .warn { margin-top: 1.4rem; padding: .9rem 1.2rem; border-radius: 1rem; background: rgba(207, 142, 78, .18); color: var(--oat); font-size: .95rem; line-height: 1.4 }
.ring-timer { width: 3.2rem; height: 3.2rem; margin: 1.6rem auto 0; opacity: .6 }

/* ---------- glass ---------- */
.layer { transform-box: fill-box; transform-origin: bottom; animation: pour .9s var(--ease) both }
@keyframes pour { from { transform: scaleY(0) } }

/* ---------- toast, idle ---------- */
#toast { position: absolute; left: 50%; bottom: calc(var(--pad) * 1.1); transform: translate(-50%, 2rem); opacity: 0; z-index: 20; background: var(--roast); color: var(--crema);
  padding: 1rem 1.4rem; border-radius: 1.1rem; font-size: 1rem; line-height: 1.35; max-width: 86%; text-align: center; transition: all .35s var(--ease); pointer-events: none; box-shadow: 0 1rem 2rem rgba(0, 0, 0, .25) }
#toast.show { opacity: 1; transform: translate(-50%, 0) }
#idle { position: absolute; inset: 0; z-index: 30; background: rgba(36, 18, 12, .82); color: var(--crema); display: none; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 1rem; backdrop-filter: blur(6px) }
#idle.show { display: flex }
#idle h2 { font-size: 3rem }
#idle p { opacity: .7 }

/* ---------- staff panel ---------- */
#staff { position: absolute; inset: 0; z-index: 40; background: var(--paper); display: none; flex-direction: column; overflow-y: auto; padding: var(--pad) }
#staff.show { display: flex }
#staff h2 { font-size: 2.2rem; margin-bottom: .3rem }
#staff section { border-top: 1.5px solid var(--line); padding: 1.1rem 0 }
#staff .k { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--soft); margin-bottom: .7rem }
#staff .st { display: flex; align-items: center; gap: .7rem; font-size: 1.1rem; font-weight: 500 }
#staff .st i { width: .8rem; height: .8rem; border-radius: 50%; background: #b44 }
#staff .st i.ok { background: #4a8a4a }
#staff .row button, #staff .row a { min-height: 3.2rem; padding: 0 1.1rem; border-radius: var(--r); border: 1.5px solid var(--line); font-weight: 500; font-size: .95rem; display: inline-flex; align-items: center; text-decoration: none }
#staff .row button.pri { background: var(--roast); color: var(--crema); border-color: var(--roast) }
#staff label.f { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; font-size: 1rem }
#staff label.f small { display: block; color: var(--soft); font-size: .8rem }
#staff select, #staff input[type=number] { font: inherit; padding: .5rem .7rem; border-radius: .7rem; border: 1.5px solid var(--line); background: #fff; min-width: 7.5rem }
#staff input[type=checkbox] { width: 1.5rem; height: 1.5rem; accent-color: var(--roast) }
#staff .muted { color: var(--soft); font-size: .88rem; line-height: 1.45 }
#staff pre { font-size: .75rem; white-space: pre-wrap; color: var(--soft); max-height: 9rem; overflow: auto }
#pin { position: absolute; inset: 0; z-index: 41; background: rgba(36, 18, 12, .86); display: none; align-items: center; justify-content: center }
#pin.show { display: flex }
#pin div { background: var(--paper); border-radius: 1.6rem; padding: 1.6rem; width: 78%; display: grid; gap: .8rem; text-align: center }
#pin input { text-align: center; font-size: 2rem; letter-spacing: .4em; height: 4rem; border-radius: 1rem; border: 1.5px solid var(--line) }

.recap { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem }
.recap span { display: inline-flex; align-items: center; gap: .45rem; height: 2.4rem; padding: 0 1rem; border-radius: var(--r); background: rgba(36, 18, 12, .07); font-size: .95rem; font-weight: 500 }
.recap i { width: .9rem; height: .9rem; border-radius: 50% }
@media (max-aspect-ratio: 1/2) { /* tall phones */
  .view h1 { font-size: 2.6rem } .v-welcome h1 { font-size: 4.4rem } .chip b, .grid.fill .chip b { font-size: 1.3rem } .v-result h1 { font-size: 2.6rem }
  .grid.fill { flex: none } .v-done .no { font-size: 6.5rem }
}