@font-face{font-family:Inter;src:url('/inter.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/instrument-serif.woff2') format('woff2');font-display:swap}
:root{--bg:#eee3d4;--card:#fbf1e2;--ink:#3c281d;--accent:#a64e29;--dark:#302820;--line:#cbb7a0;--muted:#6e5543;--mint:#b7d7c8;font:500 15px/1.5 Inter,system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 65% 6%,#f4e6d4,var(--bg) 65%);color:var(--ink)}
.frame{width:min(1140px,calc(100% - 53px));margin-inline:auto}
.mast,.footer,.head,.transfer{display:flex;align-items:center;justify-content:space-between;gap:9px}
.mast{height:66px;border-bottom:1px solid var(--line);font-size:13px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:17px;font-weight:760;letter-spacing:-.04em}
.mark{position:relative;width:28px;height:28px;border-radius:7px;background:#a85432}
.mark::before{content:'';position:absolute;left:8px;top:7px;width:12px;height:12px;background:#f8e3c9;border-radius:60% 60% 60% 0;transform:rotate(-45deg)}
a{color:inherit;text-decoration-color:#9d765c;text-underline-offset:3px}
a:hover{color:var(--accent)}
button,input,select{font:inherit;color:inherit}
button,input,select{min-height:37px;border:1px solid #c9b39a;border-radius:6px;padding:7px 9px;background:#fff6e9}
button{font-size:12px;font-weight:730;cursor:pointer}
.head>button{flex:none;white-space:nowrap}
button:hover:not(:disabled){border-color:#925f40}
button:disabled{opacity:.5;cursor:default}
button.primary{background:#83462c;color:#fff3de;border-color:#83462c}
:focus-visible{outline:2px solid #a8522e;outline-offset:3px}
.skip{position:absolute;top:-90px;left:12px;background:var(--card);padding:7px}
.skip:focus{top:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
h1,h2,p{margin:0}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(175px,300px);align-items:end;gap:22px;padding:31px 0 18px}
h1{font:400 clamp(54px,9vw,116px)/.79 'Instrument Serif',Georgia,serif;letter-spacing:-.045em}
h1 em{color:var(--accent);font-style:normal}
.hero p{max-width:34ch;font-size:15px;color:var(--muted);padding-bottom:3px}
h2{font-size:17px;letter-spacing:-.037em;line-height:1.2}
.overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.15fr);gap:0;border:1px solid #a68c72;background:#e3c6a7;border-radius:9px;border-top:4px solid #8c593e;padding:11px 4px 10px;margin-bottom:11px}
.overview>div{padding:0 12px}
.overview>div+div{border-left:1px solid #b79b80}
.overview h2{font-size:12px;letter-spacing:0}
.overview p{font-size:clamp(18px,3.7vw,38px);line-height:1.08;font-weight:780;letter-spacing:-.05em;color:#553a2a;margin:3px 0}
.overview span{display:block;color:#5e4836;font-size:11px;line-height:1.2}
#split{display:block;width:min(105px,100%);height:9px;margin:3px 0 1px}
#split::-webkit-meter-bar{background:#aa7651;border:0;height:6px}
#split::-webkit-meter-optimum-value{background:#436c64}
.bench{display:grid;grid-template-columns:minmax(277px,.77fr) minmax(0,1.45fr);gap:11px;align-items:start}
.card{min-width:0;padding:13px;background:var(--card);border:1px solid var(--line);border-radius:9px}
.hint,.error{color:var(--muted);font-size:12px;line-height:1.4}
.error{color:#983928;margin:4px 0}
.compact{display:flex;align-items:center;gap:5px}
.compact select{min-height:31px;padding:4px 6px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:6px}
form label{font-size:12px;font-weight:680;align-self:end}
form label input{display:block;width:100%;min-width:0;font-size:14px;margin-top:3px}
.actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px}
.inputs #storage{margin-top:7px}
.brew h2{margin-bottom:3px}
.timer{background:#322721;border-radius:7px;color:#fcf1dd;padding:10px;margin-top:8px}
.clock{align-items:end}
.clock p{font-size:12px;color:#f2ddbe;min-height:16px}
.clock strong{display:block;color:#f5c390;font-size:clamp(39px,6.1vw,67px);font-weight:750;line-height:.98;letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.clock .next{min-width:0;text-align:right}
.clock .next strong{font-size:clamp(24px,3.7vw,39px);color:#b2d7c8}
progress{display:block;width:100%;height:7px;margin-top:8px;appearance:none;border:0;border-radius:5px;overflow:hidden;background:#594639}
progress::-webkit-progress-bar{background:#594639}
progress::-webkit-progress-value{background:#b1d5bf}
progress::-moz-progress-bar{background:#b1d5bf}
.timer button{min-height:33px;background:#473a31;color:#fff4db;border-color:#745b48;padding:5px 8px}
.timer #start{background:#d5e2c6;color:#2e433a;border-color:#d5e2c6}
.timer :focus-visible{outline-color:#f5c390}
table{width:100%;border-collapse:collapse;margin:7px 0 4px;font-size:13px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:5px 4px;border-bottom:1px solid #d9c5ae}
thead th{font-size:11px;color:var(--muted)}
tbody tr.active{background:#e8e5d2}
tbody tr.active th{color:#36584b}
tbody td:last-child{font-weight:730}
.transfer{margin-top:11px}
.footer{padding:10px 0 18px;margin-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.reading{max-width:730px;padding:35px 0 17px}
.reading h1{font-size:clamp(51px,8vw,95px);line-height:.85;margin-bottom:14px}
.reading h2{font-size:23px;margin:20px 0 5px}
.reading p,.reading li{max-width:65ch;margin-bottom:7px}
.reading .lead{font-size:17px;color:var(--muted)}
@media(max-width:845px){.frame{width:calc(100% - 33px)}.card{padding:10px}}
@media(max-width:665px){.frame{width:calc(100% - 24px)}.mast{height:55px}.hero,.bench{grid-template-columns:1fr;gap:8px}.hero{padding:23px 0 12px}.hero p{padding:0}.overview>div{padding:0 5px}.overview span,.overview h2{font-size:10px}.overview p{font-size:clamp(17px,5.5vw,28px)}.footer{align-items:start}}
@media print{body{background:#fff;color:#000}.mast,.hero,.inputs,.timer,.transfer,.footer,#print,.skip{display:none}.bench{display:block}.frame{width:100%}.overview,.card{border:1px solid #999;color:#000}}