.shell{padding-inline:16px;flex-direction:column;max-width:640px;min-height:100dvh;margin-inline:auto;padding-bottom:40px;display:flex}.app-header{margin-top:max(10px, env(safe-area-inset-top));border-top:3px solid var(--text);align-items:flex-start;gap:10px;padding:12px 0 15px;display:flex;position:relative}.app-header:after{content:"";border-top:1px solid var(--text);border-bottom:3px solid var(--text);height:5px;position:absolute;bottom:0;left:0;right:0}.brand{align-items:flex-start;gap:9px;display:flex}.brand-mark{width:28px;height:28px;display:block}.wordmark{letter-spacing:-.04em;text-transform:uppercase;font-size:26px;font-weight:800;line-height:.95}.wordmark small{font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:5px;font-size:9px;font-weight:500;display:block}.spacer{flex:1}.lang{border:1px solid var(--line);display:flex}.lang a{font-family:var(--mono);letter-spacing:.08em;color:var(--muted);place-items:center;min-height:34px;padding:0 11px;font-size:11px;font-weight:700;text-decoration:none;display:grid}.lang a+a{border-left:1px solid var(--line)}.lang a[aria-current=page]{background:var(--text);color:var(--bg)}.section-label{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text);align-items:baseline;gap:8px;padding:20px 0 9px;font-size:10px;font-weight:700;display:flex}.section-label .no,.row-label .no{color:var(--accent-text)}.section-label .rule{background:repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 9px);background-position:bottom;background-repeat:no-repeat;background-size:100% 5px;flex:1;align-self:center;height:6px}.section-label.in-screen{padding:14px 0 9px}.route-announcer{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:fixed;overflow:hidden}.route-focus:focus{outline:2px solid var(--accent-text);outline-offset:4px}.shelf-head{align-items:center;gap:6px;padding:14px 0 4px;display:flex}.back{min-width:44px;min-height:48px;color:var(--muted);justify-content:flex-start;align-items:center;margin-right:-20px;font-size:22px;display:flex}.brand-pill{border:1px solid var(--line);align-items:center;padding:6px 14px;display:inline-flex}.shelf-title{letter-spacing:-.01em;text-transform:uppercase;font-size:17px;font-weight:800}.search-wrap{padding:8px 0 2px}.search{background:var(--surface);border:1px solid var(--line);width:100%;min-height:48px;font-family:var(--mono);appearance:none;border-radius:0;padding:12px 14px;font-size:14px}.search::placeholder{color:var(--muted)}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;padding:0 0 12px;display:grid}.card{background:var(--surface);border:1px solid var(--line);min-height:96px;display:flex;position:relative}.card:before{content:"";background:var(--pcolor,var(--line));width:5px;position:absolute;inset:0 auto 0 0}.card-main{text-align:left;flex-direction:column;flex:1;align-items:flex-start;gap:3px;min-width:0;padding:12px 12px 10px 15px;transition:transform .12s cubic-bezier(.2,.8,.2,1);display:flex}.card .name{letter-spacing:-.015em;padding-right:24px;font-size:15px;font-weight:800;line-height:1.2}.card .cat{color:var(--muted);font-size:12px}.card .meta{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:auto;padding-top:8px;font-size:9.5px}.card .meta .rtu{color:var(--accent-text);font-weight:700}.fav{color:var(--muted);transition:transform .12s cubic-bezier(.2,.8,.2,1)}.fav.on{color:var(--accent)}.card .fav{min-width:36px;min-height:36px;padding:8px;font-size:16px;position:absolute;top:4px;right:0}.card.add{color:var(--muted);border-style:dashed;justify-content:center;align-items:center;padding:14px;font-weight:700}.card.add:before{display:none}.empty{color:var(--muted);padding:24px 0;font-size:14px}.brand-select{flex-direction:column;gap:10px;padding-bottom:12px;display:flex}.brand-tile{background:var(--surface);border:1px solid var(--line);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:128px;padding:20px 16px;display:flex}.brand-tile:active{background:var(--surface2)}.tile-carpro{background:#0b0c0d;border-color:#2a2d2f}.tile-labocosmetica{background:#0d1420;border-color:#223050}.tile-carpro:active,.tile-labocosmetica:active{background:#10161f}.tile-carpro .tile-sub,.tile-labocosmetica .tile-sub{color:#8b949a}.tile-good-stuff{background:#f4f4f2;border-color:#d9d9d5}.tile-good-stuff:active{background:#e9e9e5}.tile-good-stuff .tile-sub{color:#6b7075}.logo-good-stuff{height:64px}.brand-pill.tile-good-stuff .logo-good-stuff{height:30px}.tile-koch-chemie{background:#f4f4f2;border-color:#d9d9d5}.tile-koch-chemie:active{background:#e9e9e5}.tile-koch-chemie .tile-sub{color:#6b7075}.logo-koch-chemie{height:30px}.brand-pill.tile-koch-chemie .logo-koch-chemie{height:18px}.tile-bilt-hamber{background:#fff;border-color:#d9d9d5}.tile-bilt-hamber:active{background:#efefec}.tile-bilt-hamber .tile-sub{color:#6b7075}.logo-bilt-hamber{height:22px}.brand-pill .logo-bilt-hamber{height:13px}.tile-gyeon{background:#0b0c0d;border-color:#2a2d2f}.tile-gyeon:active{background:#10161f}.tile-gyeon .tile-sub{color:#8b949a}.logo-gyeon{height:34px}.brand-pill .logo-gyeon{height:17px}.brand-pill .brand-word{font-size:13px}.tile-row{gap:10px;display:flex}.tile-row .brand-tile{flex:1;gap:6px;min-height:104px}.brand-tile.quick{border:2px dashed var(--accent)}.brand-tile.quick .tile-name{color:var(--accent-text)}.brand-logo{width:auto;max-width:100%;display:block}.logo-carpro{height:22px}.logo-labocosmetica{height:84px}.brand-word,.tile-name{letter-spacing:-.01em;text-transform:uppercase;font-size:15px;font-weight:800}.tile-sub{font-family:var(--mono);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:10px}.brand-pill .logo-carpro{height:13px}.brand-pill .logo-labocosmetica{height:32px}.screen{background:var(--bg);background-image:radial-gradient(var(--dot) 1px, transparent 1px);visibility:hidden;z-index:10;background-size:22px 22px;flex-direction:column;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s;display:flex;position:fixed;inset:0;transform:translate(100%)}.screen.open{visibility:visible;transform:translate(0)}@media (prefers-reduced-motion:reduce){.screen{transition:none}}.screen-inner{overscroll-behavior:contain;flex-direction:column;width:100%;max-width:640px;height:100%;min-height:0;margin-inline:auto;padding-inline:16px;display:flex;overflow-y:auto}.product-header{padding:max(10px, env(safe-area-inset-top)) 0 10px;border-bottom:4px solid var(--pcolor,var(--line));align-items:center;gap:4px;display:flex;position:relative}.product-header:after{content:"";border-bottom:1px solid var(--text);position:absolute;bottom:-7px;left:0;right:0}.product-header .title{flex:1;min-width:0}.product-header .name{letter-spacing:-.02em;text-transform:uppercase;font-size:19px;font-weight:800}.product-header .cat{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:2px;font-size:9.5px}.product-header .fav{min-width:48px;min-height:48px;margin-right:-8px;font-size:22px}.jobs{flex-wrap:wrap;flex:none;gap:7px;display:flex}.chip{background:var(--surface);border:1px solid var(--line);text-align:left;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;min-height:48px;padding:8px 12px;transition:transform .12s cubic-bezier(.2,.8,.2,1);display:flex;position:relative}.chip[aria-pressed=true]{border:2px solid var(--text);padding:7px 11px}.chip[aria-pressed=true]:before{content:"";border-style:solid;border-width:0 12px 12px 0;border-color:transparent var(--accent) transparent transparent;position:absolute;top:0;right:0}.chip .job{letter-spacing:-.01em;font-size:13px;font-weight:600}.chip .job small{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:1px;font-size:8.5px;font-weight:500;display:block}.chip .ratio{font-family:var(--mono);letter-spacing:.05em;color:var(--muted);font-variant-numeric:tabular-nums;font-size:10.5px}.chip[aria-pressed=true] .ratio{color:var(--accent-text);font-weight:700}.chip.add{color:var(--muted);border-style:dashed;justify-content:center;font-size:13px;font-weight:700}.pnote{color:var(--muted);padding:8px 0 0;font-size:12px;line-height:1.45}.stage{border:1px solid var(--text);background:var(--surface);flex-direction:column;flex:1 0 auto;margin-top:14px;display:flex;position:relative}.stage:before{content:"";background:repeating-linear-gradient(90deg, var(--text) 0 1px, transparent 1px 8px);opacity:.35;background-repeat:no-repeat;background-size:100% 7px;height:7px;position:absolute;top:0;left:0;right:0}.stage-head{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;justify-content:space-between;align-items:baseline;gap:10px;padding:13px 13px 0;font-size:9.5px;font-weight:700;display:flex}.stage-head .meta{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums;font-weight:500;overflow:hidden}.stage-body{flex:1;justify-content:center;align-items:center;min-height:32vh;padding:2px 8px;display:flex}.stage-body svg{width:auto;max-width:100%;height:100%;max-height:36vh}.stage svg text{font-variant-numeric:tabular-nums}.b-tick{stroke:var(--line-soft);stroke-width:1.2px}.b-tick.major{stroke:var(--line)}.b-num{font-family:var(--mono);fill:var(--muted);letter-spacing:.02em;font-size:9px}.b-top{font-family:var(--mono);fill:var(--muted);font-size:11px}.b-marker{font-family:var(--mono);fill:var(--accent);font-size:14px;font-weight:700}.liquid rect{transition:y .3s,height .3s}.liquid.pouring rect{transition:none}@media (prefers-reduced-motion:reduce){.liquid rect{transition:none}}.steps{flex-direction:column;flex:none;gap:5px;padding:6px 13px 4px;display:flex}.stepline{color:var(--muted);font-variant-numeric:tabular-nums;align-items:center;gap:9px;font-size:13.5px;display:flex}.stepline .n{width:20px;height:20px;font-family:var(--mono);border:1px solid var(--line);color:var(--text);flex:none;place-items:center;font-size:11px;font-weight:700;display:grid}.stepline b{font-family:var(--mono);color:var(--text);font-size:15px;font-weight:700}.swatch{vertical-align:-1px;border:1px solid var(--line);width:10px;height:10px;margin-right:2px;display:inline-block}.swatch.water{background:var(--water)}.strip-zone{padding:6px 13px 14px}.strip{background:var(--text);color:var(--bg);font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase;box-shadow:2px 3px 0 var(--line-soft);white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums;padding:9px 12px;font-size:11px;font-weight:500;overflow:hidden;transform:rotate(-1deg)}.strip b{color:var(--accent-text);font-weight:700}@media (width<=400px){.strip{letter-spacing:.06em;font-size:10px}.strip .strip-total{display:none}}@media (prefers-color-scheme:light){.strip b{color:#ffd9c7}}.panel{padding:10px 0 calc(48px + env(safe-area-inset-bottom));flex:none}.row-label{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text);align-items:center;gap:8px;padding:2px 0 8px;font-size:10px;font-weight:700;display:flex}.units{border:1px solid var(--line);display:flex}.units button{font-family:var(--mono);letter-spacing:.05em;color:var(--muted);text-transform:none;min-height:28px;padding:0 10px;font-size:11px;font-weight:700}.units button+button{border-left:1px solid var(--line)}.units button[aria-pressed=true]{background:var(--text);color:var(--bg)}.tune{align-items:center;gap:7px;margin-left:auto;display:flex}.tune .cur{font-family:var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums;text-align:center;min-width:52px;font-size:15px;font-weight:700}.stepbtn{border:1px solid var(--line);background:var(--surface);width:44px;height:36px;font-family:var(--mono);place-items:center;font-size:17px;font-weight:700;display:grid}.stepbtn:active{background:var(--surface2)}.containers{flex-wrap:wrap;gap:7px;padding:2px 0;display:flex}.cont{border:1px solid var(--line);background:var(--surface);font-family:var(--mono);letter-spacing:.03em;font-variant-numeric:tabular-nums;text-transform:uppercase;flex:none;place-items:center;min-height:44px;padding:0 11px;font-size:12px;font-weight:500;transition:transform .12s cubic-bezier(.2,.8,.2,1);display:grid}.card-main:active,.fav:active,.chip:active,.cont:active{transform:scale(.98)}.lang a,.back,.brand-tile,.card.add,.units button,.stepbtn,dialog .actions button{transition:transform .12s cubic-bezier(.2,.8,.2,1)}.lang a:active,.back:active,.brand-tile:active,.card.add:active,.units button:active,.stepbtn:active,dialog .actions button:active{transform:scale(.98)}.chip.just-created,.cont.just-created{opacity:1;transition:opacity .18s cubic-bezier(.2,.8,.2,1),transform .18s cubic-bezier(.2,.8,.2,1);transform:scale(1)}@starting-style{.chip.just-created,.cont.just-created{opacity:0;transform:scale(.97)}}.cont[aria-pressed=true]{border:2px solid var(--text);color:var(--accent-text);font-weight:700}.cont.add{color:var(--muted);border-style:dashed;font-weight:700}dialog{border:1px solid var(--text);background:var(--surface);color:var(--text);width:min(92vw,360px);box-shadow:4px 5px 0 var(--line-soft);opacity:0;transition:opacity .16s cubic-bezier(.23, 1, .32, 1), transform .16s cubic-bezier(.23, 1, .32, 1), overlay .16s allow-discrete, display .16s allow-discrete;border-radius:0;padding:20px;transform:scale(.97)}dialog[open]{opacity:1;transition-duration:.22s;transform:scale(1)}@starting-style{dialog[open]{opacity:0;transform:scale(.97)}}dialog::backdrop{opacity:0;transition:opacity .16s cubic-bezier(.23, 1, .32, 1), overlay .16s allow-discrete, display .16s allow-discrete;background:#0a0e1073}dialog[open]::backdrop{opacity:1;transition-duration:.22s}@starting-style{dialog[open]::backdrop{opacity:0}}dialog h2{letter-spacing:.02em;text-transform:uppercase;margin:0 0 14px;font-size:15px;font-weight:800}dialog form{flex-direction:column;gap:12px;display:flex}dialog label{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex-direction:column;gap:5px;font-size:10px;font-weight:700;display:flex}dialog input,dialog select{font-family:var(--mono);letter-spacing:0;text-transform:none;background:var(--bg);border:1px solid var(--line);appearance:none;border-radius:0;min-height:44px;padding:10px 12px;font-size:14px}dialog .row{gap:8px;display:flex}dialog .row>*{flex:1}dialog .actions{gap:8px;margin-top:6px;display:flex}dialog .actions button{flex:1;min-height:48px;font-size:14px;font-weight:700}.btn-primary{background:var(--accent);color:var(--accent-ink)}.btn-ghost{border:1px solid var(--line);background:var(--surface)}.app-foot{border-top:1px solid var(--line-soft);color:var(--muted);font-size:12.5px;font-family:var(--mono);letter-spacing:.02em;text-align:center;margin-top:auto;padding-top:24px}.screen-inner .app-foot{padding-bottom:max(24px, env(safe-area-inset-bottom))}.app-foot a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:2px}@media (prefers-reduced-motion:reduce){.card-main,.fav,.chip,.cont,.lang a,.back,.brand-tile,.card.add,.units button,.stepbtn,dialog .actions button{transition-duration:80ms}.card-main:active,.fav:active,.chip:active,.cont:active,.lang a:active,.back:active,.brand-tile:active,.card.add:active,.units button:active,.stepbtn:active,dialog .actions button:active{transform:scale(.99)}.chip.just-created,.cont.just-created{transition:opacity .12s cubic-bezier(.2,.8,.2,1)}@starting-style{.chip.just-created,.cont.just-created{opacity:.8;transform:none}}dialog,dialog[open],dialog::backdrop,dialog[open]::backdrop{transition-duration:.12s}dialog{transform:scale(.99)}dialog[open]{transform:scale(1)}@starting-style{dialog[open]{opacity:0;transform:scale(.99)}}}