:root{--bg-top:#fef9ef;--bg-bottom:#f3ece4;--glass:rgba(255,255,255,0.48);--glass-strong:rgba(255,255,255,0.68);--stroke:rgba(255,255,255,0.58);--text:#2f2416;--muted:#705941;--accent:#c56f1a;--accent-soft:rgba(197,111,26,0.17);--shadow:0 22px 44px rgba(80,52,23,0.14);}*{box-sizing:border-box;}body{margin:0;min-height:100vh;font-family:"Avenir Next","SF Pro Text","Helvetica Neue",sans-serif;color:var(--text);background:linear-gradient(160deg,var(--bg-top) 0%,#f8f1e7 35%,var(--bg-bottom) 100%);overflow-x:hidden;}.bg-orb{position:fixed;border-radius:50%;pointer-events:none;filter:blur(2px);z-index:-1;animation:drift 16s ease-in-out infinite alternate;}.orb-1{width:280px;height:280px;top:-70px;right:-40px;background:radial-gradient(circle at 30% 30%,rgba(255,238,212,0.95),rgba(232,178,109,0.2) 70%,transparent 100%);}.orb-2{width:320px;height:320px;bottom:-120px;left:-120px;background:radial-gradient(circle at 45% 45%,rgba(250,213,173,0.45),rgba(220,143,72,0.14) 65%,transparent 100%);animation-duration:20s;}.orb-3{width:220px;height:220px;top:38%;left:64%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0.6),rgba(245,215,183,0.24) 65%,transparent 100%);animation-duration:13s;}#maindiv{width:min(980px,calc(100% - 2rem));margin:2.2rem auto 2.6rem;display:grid;gap:1rem;}.glass{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--stroke);background:linear-gradient(145deg,var(--glass-strong),var(--glass));box-shadow:var(--shadow);backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%);}.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,0.5),transparent 45%);pointer-events:none;}.hero{padding:1.4rem 1.4rem 1.2rem;}.hero-top{display:grid;grid-template-columns:minmax(230px,320px) 1fr;gap:1rem;align-items:center;}.hero-content{display:grid;gap:0.35rem;}.logo-shell{position:relative;border-radius:22px;padding:0.9rem 1rem;border:1px solid rgba(255,255,255,0.76);background:radial-gradient(circle at 20% 10%,rgba(255,255,255,0.9),transparent 55%),linear-gradient(145deg,rgba(255,255,255,0.92),rgba(255,237,209,0.72));box-shadow:0 14px 26px rgba(123,80,34,0.16),inset 0 1px 0 rgba(255,255,255,0.9);}.logo-shell::after{content:"";position:absolute;inset:6px;border-radius:16px;border:1px solid rgba(255,255,255,0.55);pointer-events:none;}.hero-logo{width:100%;height:auto;max-height:90px;object-fit:contain;display:block;filter:drop-shadow(0 5px 10px rgba(141,79,24,0.22));}.eyebrow{margin:0;font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);font-weight:700;}h1{margin:0.35rem 0 0.25rem;font-size:clamp(1.7rem,2.6vw,2.35rem);line-height:1.05;letter-spacing:-0.02em;}.hero-text{margin:0;color:rgba(65,49,31,0.86);max-width:62ch;}.current-method{margin:0.75rem 0 0;color:#6a4a2e;font-weight:600;}.section1{padding:1rem;}.section-title{margin:0 0 0.75rem;font-size:1.03rem;letter-spacing:0.01em;}.methods-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0.6rem;}li.brewingelements{border:1px solid rgba(255,255,255,0.68);border-radius:16px;padding:0.68rem 0.55rem;cursor:pointer;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.35rem;color:#5e4124;font-weight:650;font-size:0.86rem;text-align:center;background:linear-gradient(165deg,rgba(255,255,255,0.7),rgba(255,241,221,0.5));transition:transform 170ms ease,border-color 170ms ease,box-shadow 170ms ease,background 170ms ease;}li.brewingelements:hover{transform:translateY(-1px);border-color:rgba(255,255,255,0.95);box-shadow:0 10px 20px rgba(123,78,26,0.12);}li.brewingelements.active{border-color:rgba(245,162,73,0.95);background:linear-gradient(165deg,rgba(255,250,240,0.92),rgba(255,225,177,0.75));box-shadow:0 10px 22px rgba(153,89,16,0.18),inset 0 1px 0 rgba(255,255,255,0.85);}.method-icon,.cup-icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}.row{display:flex;align-items:end;gap:0.75rem;flex-wrap:wrap;}.cups-row{justify-content:center;}.control-label{display:block;font-size:0.76rem;letter-spacing:0.08em;text-transform:uppercase;color:#6f5135;font-weight:700;margin-bottom:0.4rem;}.control-group{flex:1 1 240px;min-width:220px;}input[type="range"]{width:min(100%,490px);appearance:none;height:12px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,0.9),rgba(247,219,181,0.9));border:1px solid rgba(255,255,255,0.75);margin-inline:auto;}input[type="range"]::-webkit-slider-thumb{appearance:none;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,0.8);background:linear-gradient(140deg,#f6b164,#cf7415);box-shadow:0 8px 18px rgba(138,76,16,0.33);}input[type="range"]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:linear-gradient(140deg,#f6b164,#cf7415);box-shadow:0 8px 18px rgba(138,76,16,0.33);}.value{font-size:1.55rem;font-weight:730;color:#b95f0e;display:inline-flex;align-items:center;gap:0.35rem;}.cup-value{padding:0.33rem 0.78rem;border-radius:999px;border:1px solid rgba(255,255,255,0.72);background:rgba(255,251,245,0.72);}select,input[type="number"]{width:100%;appearance:none;border-radius:13px;border:1px solid rgba(255,255,255,0.72);background:linear-gradient(165deg,rgba(255,255,255,0.88),rgba(255,242,226,0.84));color:#53361a;padding:0.72rem 1rem;font-size:0.95rem;font-family:inherit;}.controls-row{justify-content:space-between;}.pill{display:inline-block;padding:0.48rem 0.78rem;border-radius:999px;background:linear-gradient(145deg,rgba(255,255,255,0.86),rgba(255,233,206,0.84));border:1px solid rgba(255,255,255,0.8);color:#7f4a15;font-weight:650;white-space:nowrap;}.ratio-explainer{margin-top:0.62rem;padding:0.6rem 0.7rem;border-radius:12px;border:1px solid rgba(255,255,255,0.76);background:linear-gradient(150deg,rgba(255,255,255,0.72),rgba(255,241,220,0.55));color:#614529;}.advanced-header{display:flex;align-items:center;justify-content:space-between;gap:0.7rem;}.text-btn{border:1px solid rgba(255,255,255,0.7);background:rgba(255,255,255,0.55);color:#6f4b2a;border-radius:999px;padding:0.42rem 0.8rem;font-weight:650;cursor:pointer;}.advanced-panel{margin-top:0.7rem;}.advanced-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.6rem;}.advanced-grid label{display:block;font-size:0.84rem;color:#65472c;}.advanced-grid .advanced-full{grid-column:1 / -1;}.advanced-note{margin-top:0.6rem;}.actions-row{display:grid;grid-template-columns:1fr 1fr;gap:0.55rem;}.btn{border:0;border-radius:16px;padding:0.9rem 1rem;cursor:pointer;color:#fffaf3;font-family:inherit;font-size:0.95rem;font-weight:700;letter-spacing:0.01em;background:linear-gradient(135deg,#e2913d,#ba5f0f);box-shadow:0 14px 26px rgba(139,72,11,0.28),inset 0 1px 0 rgba(255,220,178,0.36);transition:transform 160ms ease,box-shadow 160ms ease;}.btn:hover{transform:translateY(-1px);}.btn-secondary{background:linear-gradient(135deg,#e1dfda,#c9c3ba);color:#4c3d2b;box-shadow:0 12px 20px rgba(97,76,52,0.16),inset 0 1px 0 rgba(255,255,255,0.5);}.error{min-height:1.2rem;margin:0.65rem 0 0;color:#9a2a21;font-weight:600;}.error.is-error{color:#9a2a21;}.error.is-success{color:#2f7a32;}.results-panel .results{margin-top:0.86rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.7rem;}.metric-card{margin:0;padding:0.8rem 0.88rem;border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,0.8),rgba(255,243,227,0.64));border:1px solid rgba(255,255,255,0.8);}.metric-label{margin:0;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.11em;color:#755538;font-weight:680;}.metric-value{margin:0.2rem 0 0;display:flex;align-items:baseline;gap:0.35rem;color:var(--accent);font-size:2rem;font-weight:760;line-height:1;}.metric-value small{font-size:0.82rem;color:#90663e;text-transform:uppercase;letter-spacing:0.08em;}.hint{color:rgba(81,61,41,0.8);font-size:0.82rem;margin:0.55rem 0 0;}.meta-line{margin-top:0.75rem;min-height:1.25rem;}.steps-title{margin:0.9rem 0 0.45rem;font-size:0.95rem;color:#5e4027;}.steps{margin:0;padding-left:1.1rem;color:#5a4129;}.steps li{margin:0.35rem 0;}.knowledge-intro{margin-top:0.15rem;}.knowledge-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:0.75rem;}.knowledge-grid > *{min-width:0;}.knowledge-card{min-width:0;border-radius:16px;border:1px solid rgba(255,255,255,0.76);background:linear-gradient(152deg,rgba(255,255,255,0.78),rgba(255,242,224,0.58));padding:0.78rem 0.85rem;}.subsection-title{margin:0;font-size:0.92rem;color:#5d3f22;}.mini-steps{margin:0.62rem 0 0;padding:0;list-style:none;counter-reset:step;}.mini-steps li{counter-increment:step;display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:0.55rem;align-items:start;margin:0.44rem 0;color:#5c4227;}.mini-steps li::before{content:counter(step);width:1.5rem;height:1.5rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:760;color:#8f541b;border:1px solid rgba(255,255,255,0.8);background:linear-gradient(145deg,rgba(255,255,255,0.92),rgba(251,226,192,0.85));}.table-wrap{margin-top:0.62rem;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}.ratio-table{width:100%;border-collapse:collapse;font-size:0.84rem;color:#5e4327;}.ratio-table th,.ratio-table td{padding:0.44rem 0.36rem;border-bottom:1px solid rgba(255,255,255,0.65);text-align:left;vertical-align:top;}.ratio-table thead th{font-size:0.72rem;letter-spacing:0.07em;text-transform:uppercase;color:#7a5737;}.ratio-table tbody th{font-weight:700;color:#563a1f;}.faq-list{margin-top:0.85rem;padding-top:0.2rem;}.faq-item{border:1px solid rgba(255,255,255,0.72);border-radius:13px;background:linear-gradient(155deg,rgba(255,255,255,0.7),rgba(255,245,232,0.55));padding:0.1rem 0.72rem 0.55rem;margin-top:0.55rem;}.faq-item summary{cursor:pointer;font-weight:680;color:#5e4024;padding:0.5rem 0;}.faq-item[open]{border-color:rgba(244,164,81,0.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35);}.faq-item .hint{margin-top:0;}.noscript-panel{border-style:dashed;}.quick-summary{display:none;}@keyframes drift{0%{transform:translate3d(0,0,0) scale(1);}100%{transform:translate3d(-20px,24px,0) scale(1.06);}}@media (max-width:880px){.methods-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.knowledge-grid{grid-template-columns:1fr;}}@media (max-width:700px){.actions-row{grid-template-columns:1fr;}.advanced-grid{grid-template-columns:1fr;}}@media (max-width:620px){#maindiv{width:calc(100% - 1rem);margin-top:0.95rem;padding-bottom:calc(108px + env(safe-area-inset-bottom));}.hero{padding:1rem;}.hero-top{grid-template-columns:1fr;gap:0.75rem;}.hero-logo{max-height:78px;}.section1{padding:0.9rem;}.methods-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.controls-row{align-items:stretch;}.pill{width:100%;text-align:center;}.results-panel .results{grid-template-columns:1fr;}.knowledge-card{padding:0.72rem 0.75rem;}.ratio-table{min-width:0;width:100%;table-layout:fixed;font-size:0.78rem;}.ratio-table thead th:nth-child(1){width:34%;}.ratio-table thead th:nth-child(2),.ratio-table thead th:nth-child(3){width:33%;}.ratio-table thead th{font-size:0.64rem;letter-spacing:0.03em;white-space:nowrap;overflow-wrap:normal;word-break:normal;}.ratio-table th,.ratio-table td{padding:0.4rem 0.22rem;white-space:normal;overflow-wrap:anywhere;}.quick-summary{display:flex;align-items:center;justify-content:space-between;gap:0.7rem;position:fixed;left:0.5rem;right:0.5rem;bottom:calc(0.5rem + env(safe-area-inset-bottom));z-index:50;border-radius:18px;border:1px solid rgba(255,255,255,0.8);background:linear-gradient(145deg,rgba(255,255,255,0.92),rgba(255,239,218,0.9));backdrop-filter:blur(10px) saturate(125%);-webkit-backdrop-filter:blur(10px) saturate(125%);box-shadow:0 12px 28px rgba(88,58,28,0.2);padding:0.6rem 0.7rem;}.quick-summary-values p{margin:0;font-size:0.82rem;color:#5d4329;line-height:1.35;}.quick-summary-values strong{color:#8a551f;text-transform:uppercase;letter-spacing:0.06em;font-size:0.72rem;}.quick-summary-btn{border:0;border-radius:12px;padding:0.62rem 0.8rem;background:linear-gradient(135deg,#e2913d,#ba5f0f);color:#fffaf3;font-size:0.78rem;font-weight:700;letter-spacing:0.01em;}}