:root{font-family:'Host Grotesk','DM Sans',Arial,sans-serif;color:#eaf0f6;background:#07111f;font-synthesis:none;--bg:#07111f;--card:#0c1627;--stroke:#20314b;--muted:#94a7c0;--gold:#ab8855;--cream:#e0cbab;--cyan:#49ccf4;--orange:#ff9856;--pink:#d56fe9}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 50% -20%,#18294a 0,transparent 38%),var(--bg)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.app{max-width:1500px;min-height:100vh;margin:auto;padding:18px clamp(14px,2.5vw,34px) 26px}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #1a2940;padding-bottom:14px}.brand{width:203px;max-width:42vw;height:auto;display:block}.head-right{display:flex;align-items:center;gap:10px}.pill{border:1px solid #27604e;background:#0b302a;color:#67e6bc;border-radius:99px;padding:8px 12px;font-size:12px;font-weight:700;white-space:nowrap}.pill.demo{border-color:#745d38;background:#2d241c;color:#e0cbab}.ghost,.tab,.icon-btn{background:#0e1c31;border:1px solid #273b58;color:#d3dfeb;border-radius:12px;min-height:44px;padding:10px 15px}.icon-btn{width:44px;padding:0;font-size:20px}.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 20px}.nav .tab.active{background:#ab8855;border-color:#ab8855;color:#08111d;font-weight:800}.nav .spacer{flex:1}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8fa2bb;font-weight:700}.section-title{font-size:clamp(25px,3vw,40px);margin:5px 0 8px;color:var(--cream);letter-spacing:-.045em}.sub{color:#a8b7c9;line-height:1.5}.grid{display:grid;gap:18px}.card{border:1px solid var(--stroke);border-radius:20px;background:linear-gradient(145deg,#0f1b2d,#0a1424);padding:20px;box-shadow:0 10px 28px #0002}.card h2,.card h3{margin:0 0 12px}.gold{color:var(--cream)}.cyan{color:var(--cyan)}.orange{color:var(--orange)}.pink{color:var(--pink)}.muted{color:var(--muted)}.small{font-size:13px}.stat-number{font-size:clamp(30px,4vw,56px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.055em}.button{border:0;background:var(--gold);color:#07111f;border-radius:14px;min-height:49px;padding:11px 20px;font-weight:800}.button.secondary{background:#162b43;color:#d7e9f6;border:1px solid #28415f}.button.danger{background:#6c342e;color:#fff}.button.full{width:100%}.button-row{display:flex;gap:10px;flex-wrap:wrap}.button-row>*{flex:1}.profile-hero{display:grid;grid-template-columns:1.4fr .85fr;gap:18px}.profile-art{min-height:260px;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 60%,#694630 0,#1b2c3a 31%,#0e1a2b 73%);border:1px solid #43516a;border-radius:20px;padding:25px;display:flex;flex-direction:column;justify-content:space-between}.profile-art:after{content:'◉';position:absolute;right:7%;top:0;font-size:220px;color:#c8a46b18;line-height:1}.profile-art>*{position:relative;z-index:1}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{border:1px solid #37506a;background:#11243a;border-radius:99px;padding:6px 11px;color:#bed1e0;font-size:12px}.detail-grid{grid-template-columns:repeat(3,1fr)}.detail-tile{border-left:4px solid var(--accent,var(--gold))}.detail-tile b{display:block;margin-top:7px;color:var(--accent,var(--cream));font-size:23px}.key-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.key{border-bottom:1px solid #22344c;padding:9px 0;color:#9fb0c5}.key strong{display:block;color:#f1e4cf;margin-top:3px}.phase-list{display:grid;gap:9px}.phase-item{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid #2a3e57;border-radius:12px}.phase-dot{width:10px;height:10px;border-radius:50%;background:var(--phase)}.phase-item small{color:#9aadc2}.active-head{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-bottom:14px}.active-head h1{margin:2px 0;color:#f1dfc3;font-size:clamp(28px,3.4vw,43px)}.stage-track{display:flex;gap:4px;margin-bottom:18px}.stage{min-width:0;flex:1}.stage-label{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:7px;color:#9eacc0}.stage-label strong{color:#dde7ef;white-space:nowrap}.stage-bar{height:18px;border-radius:9px;background:#142139;overflow:hidden;border:1px solid #2b3b53}.stage-fill{height:100%;width:0;background:linear-gradient(90deg,var(--start),var(--end));border-radius:9px;transition:width .12s linear}.stage.current .stage-bar{height:28px;box-shadow:0 0 14px #4dd7ff33}.stage.current .stage-label strong{font-size:16px}.stage.past .stage-fill{width:100%}.brew-grid{grid-template-columns:1fr 1.05fr 1.45fr;align-items:stretch}.metric-heading{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#a8bbd2;font-weight:800}.ring-card{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.ring{position:relative;width:min(230px,100%);aspect-ratio:1;border-radius:50%;margin:11px auto;background:conic-gradient(from 180deg,var(--cyan),#7972df,var(--pink) var(--pct),#1b2b42 var(--pct));box-shadow:0 0 24px #5866db55;display:grid;place-items:center}.ring:before{content:'';position:absolute;inset:15px;background:#0b1729;border-radius:50%;border:1px solid #293f5b}.ring-content{position:relative;z-index:1}.ring-time{font-size:clamp(37px,4vw,58px);font-weight:800;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.ring-note{color:#a7bbce;font-size:14px}.vessel-card{position:relative;display:flex;flex-direction:column;align-items:center}.vessel-frame{position:relative;flex:1;width:100%;min-height:280px;display:grid;place-items:center}.vessel{width:min(275px,90%);height:280px;overflow:visible}.server-outline{fill:#0b1727;stroke:#89a4bf;stroke-width:3;stroke-linejoin:round}.dripper-outline{fill:#112338;stroke:#8daac8;stroke-width:3;stroke-linejoin:round}.water-shape{fill:url(#coffeeGradient)}.water-wave{fill:none;stroke:#e5af64;stroke-width:3}.droplet{fill:#d9a56e;opacity:0}.pouring .droplet{opacity:1;animation:drop 1s linear infinite}.pouring .droplet.delay{animation-delay:.45s}@keyframes drop{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(28px);opacity:0}}.vessel-meter{position:absolute;right:0;top:74px;bottom:11px;width:55px}.meter-tick{position:absolute;right:3px;display:flex;align-items:center;gap:5px;color:var(--tick);font-size:11px;font-weight:800;white-space:nowrap;transform:translateY(50%)}.meter-tick:after{content:'····';letter-spacing:1px}.vessel-weight{font-size:34px;color:#f5dcc1;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.vessel-weight.over{color:#ff805e;animation:blink .7s infinite}@keyframes blink{50%{opacity:.25}}.chart-card{display:flex;flex-direction:column}.chart-wrap{flex:1;min-height:260px;position:relative;background:#0a1425;border-radius:16px;margin:14px 0 11px;padding:9px}.chart-wrap canvas{width:100%;height:100%;display:block}.legend{display:flex;flex-wrap:wrap;gap:16px;color:#9bacbf;font-size:12px}.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}.metrics{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:0}.metric{padding:16px;border-right:1px solid #22344d}.metric:last-child{border:0}.metric strong{display:block;font-size:clamp(18px,2.2vw,29px);margin-top:7px;font-variant-numeric:tabular-nums;white-space:nowrap}.metric small{color:#9bacbf}.bottom-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:15px}.alert{border:1px solid #925124;border-radius:16px;background:#2b1d15;padding:16px;display:flex;align-items:center;gap:12px}.alert.good{border-color:#1e775a;background:#103126}.alert.cool{border-color:#26749d;background:#102b3c}.alert.hot{border-color:#a75832;background:#3b251a}.alert-icon{font-size:25px}.control-card{display:flex;align-items:center;justify-content:space-between;gap:12px}.pour-button{touch-action:none;user-select:none;-webkit-user-select:none;min-width:130px}.pour-button.active{background:#ffa760;box-shadow:0 0 25px #ff8b4a66}.slider{width:100%;accent-color:#ab8855}.control-stack{display:grid;gap:10px}.waterline{height:8px;border-radius:6px;background:#1d3048;overflow:hidden;margin:11px 0}.waterline>div{height:100%;background:linear-gradient(90deg,#49ccf4,#ffa256,#d56fe9);width:0}.history-table{width:100%;border-collapse:collapse}.history-table td,.history-table th{text-align:left;padding:13px;border-bottom:1px solid #25344b}.history-table th{color:#93a8be;font-size:12px;text-transform:uppercase}.score{font-size:92px;font-weight:800;line-height:1;color:#f0d1a5}.complete-grid{grid-template-columns:.8fr 1.2fr}.report-row{display:flex;justify-content:space-between;border-bottom:1px solid #2a3950;padding:10px 0;gap:10px}.notice{background:#1f2a3d;border:1px solid #3a4e67;border-radius:14px;padding:14px;color:#c3d3e2}.empty{text-align:center;padding:50px}.readout{font-variant-numeric:tabular-nums}.footer{margin-top:25px;color:#7e93ac;font-size:12px;display:flex;justify-content:space-between;gap:10px}.mobile-only{display:none}
@media(max-width:1050px){.brew-grid{grid-template-columns:1fr 1fr}.chart-card{grid-column:1/-1}.chart-wrap{min-height:270px}.metrics{grid-template-columns:repeat(3,1fr)}.metric:nth-child(3){border:0}.metric:nth-child(-n+3){border-bottom:1px solid #22344d}}
@media(max-width:680px){.app{padding:12px 14px 26px}.topbar{height:58px}.brand{width:170px}.head-right .pill:not(.demo){display:none}.nav{margin:14px 0;gap:6px}.nav .tab{padding:8px 11px;min-height:40px;font-size:12px}.profile-hero,.detail-grid,.brew-grid,.bottom-grid,.complete-grid{grid-template-columns:1fr}.profile-art{min-height:230px}.card{padding:17px}.active-head{grid-template-columns:1fr}.active-head .pill{justify-self:start}.stage-track{overflow-x:auto;padding-bottom:4px}.stage{flex:0 0 102px}.stage-label{display:block;font-size:11px}.stage-label strong{display:block;margin-bottom:2px}.stage.current .stage-label strong{font-size:13px}.ring{width:204px}.ring-card{min-height:292px}.vessel-card{min-height:365px}.chart-card{grid-column:auto}.chart-wrap{min-height:220px}.metrics{grid-template-columns:repeat(2,1fr)}.metric:nth-child(3){border-right:1px solid #22344d}.metric:nth-child(even){border-right:0}.metric:nth-child(-n+4){border-bottom:1px solid #22344d}.history-table th:nth-child(3),.history-table td:nth-child(3){display:none}.score{font-size:78px}.mobile-only{display:block}.footer{display:block}.footer span{display:block;margin-top:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.stage-track{scrollbar-width:none}
.stage-track::-webkit-scrollbar{display:none}
.auth-card{max-width:520px;margin:25px auto}
.auth-card label{display:block;margin-top:16px;color:#e0cbab}
.auth-card input{display:block;width:100%;min-height:48px;border:1px solid #38516f;border-radius:12px;background:#091628;color:#fff;padding:10px 14px;margin-top:7px}
.ghost.full{width:100%}
@media (min-width:900px) and (max-height:700px){
  .app{padding:8px 20px 18px}
  .topbar{height:52px;padding-bottom:7px}
  .brand{width:170px}
  .nav{margin:8px 0 10px}
  .active-head{margin-bottom:7px}
  .active-head h1{font-size:29px;margin:0}
  .active-head .sub{font-size:13px}
  .stage-track{margin-bottom:9px}
  .stage.current .stage-bar{height:21px}
  .stage-bar{height:15px}
  .brew-grid{grid-template-columns:1fr 1.05fr 1.45fr;gap:10px}
  .chart-card{grid-column:auto}
  .card{padding:12px}
  .ring{width:162px;margin:3px auto}
  .ring:before{inset:11px}
  .ring-time{font-size:37px}
  .vessel-frame{min-height:170px}
  .vessel{height:175px}
  .vessel-meter{top:40px;bottom:1px}
  .vessel-weight{font-size:27px}
  .chart-wrap{min-height:175px;margin:7px 0}
  .metrics{grid-template-columns:repeat(6,1fr)!important;margin-top:9px!important}
  .metric{padding:9px;border-bottom:0!important;border-right:1px solid #22344d!important}
  .metric:last-child{border-right:0!important}
  .metric strong{font-size:20px}
  .bottom-grid{margin-top:8px}
  .alert{padding:9px}
  .control-card{padding:9px}
  .footer{margin-top:12px}
}