@font-face{font-family:"Recursive";src:url(/fonts/recursive.woff2) format("woff2");font-weight:300 1000;font-display:swap}
:root{--cob:#1D3FD0;--oat:#FAF5EC;--page:#E6D3B3;--crust:#A4561F;--dough:#E2AE4A;--ink:#1F1A15;--busy:#DCD3C3;--tone:#F0E4D0;--mute:#62401F;--ease:cubic-bezier(.22,1,.36,1);color-scheme:light}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Recursive",system-ui,sans-serif;font-variation-settings:"CASL" 0;font-size:18px;font-weight:430;line-height:1.5;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}
a{color:inherit}button,input,output{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3{margin:0;line-height:1.08;font-weight:850;font-variation-settings:"CASL" 1;text-wrap:balance}p{text-wrap:pretty}
:focus{outline:none}:focus-visible{box-shadow:0 0 0 3px var(--oat),0 0 0 6px var(--cob);border-radius:12px}
[hidden]{display:none!important}.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.top{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(6px + env(safe-area-inset-top)) 14px 6px;background:rgba(230,211,179,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.top .cal{justify-self:end}.smx{display:none}@media (max-width:560px){.lgx{display:none}.smx{display:inline}}
.mark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:850;font-variation-settings:"CASL" 1;font-size:22px;min-height:44px}.mark svg{width:32px;height:32px;border-radius:10px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--cob);color:#fff;font-weight:650;font-size:16px;transition:transform .16s var(--ease),opacity .2s}
.pill:disabled,.btn:disabled{opacity:.4;cursor:default}
button:active:not(:disabled),.btn:active,.chip:active{transform:scale(.97)}
.hero{position:relative;overflow:hidden;background:var(--cob);color:#fff;isolation:isolate}
.heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,34,120,.62) 0%,rgba(18,34,120,.25) 38%,rgba(18,34,120,.25) 58%,rgba(14,26,96,.82) 100%)}
.heroin{max-width:640px;margin:0 auto;padding:30px 18px 26px}
.hero h1{font-size:44px;font-weight:900;text-shadow:0 2px 18px rgba(8,16,70,.45)}
.q{margin:14px 0 8px;font-weight:600;font-size:18px;text-shadow:0 1px 10px rgba(8,16,70,.6)}
.days{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:2px 18px 4px}.days::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border:0;border-radius:999px;background:rgba(10,20,80,.42);color:#fff;font-weight:600;font-size:16px;text-decoration:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .18s var(--ease),color .18s var(--ease),transform .16s var(--ease)}
.chip[aria-pressed=true]{background:#fff;color:var(--cob)}
.when{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 10px}
.clock{min-width:0;font-size:clamp(64px,20.5vw,120px);font-weight:900;font-variation-settings:"CASL" 1;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:0 4px 30px rgba(8,16,70,.5)}
.step{flex:none;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--cob);font-size:30px;font-weight:700;line-height:1;transition:transform .16s var(--ease)}
.step.sm{width:44px;height:44px;font-size:24px;background:var(--cob);color:#fff}
.kt{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;margin-top:8px;padding:14px 16px;border-radius:22px;background:rgba(10,20,80,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kt label{font-weight:600}.kt b{font-weight:800}
.kt input{grid-column:1/-1;grid-row:2}
input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--cob)}.kt input[type=range]{accent-color:#fff}
.unit{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.16)}
.unit button{min-height:40px;min-width:44px;padding:0 12px;border:0;border-radius:999px;background:none;font-weight:700;font-size:15px}
.unit button[aria-pressed=true]{background:#fff;color:var(--cob)}
.paper{max-width:640px;margin:0 auto;padding:20px 16px 0}
.card{margin:0 0 16px;padding:20px 18px;border-radius:26px;background:var(--tone)}
.card h2{font-size:26px;margin-bottom:12px}
.hrow{display:grid;grid-template-columns:84px minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin:8px 0}.hl,.tog{font-weight:650}
.tin{width:100%;min-width:0;min-height:44px;padding:0 8px;border:0;border-radius:12px;background:var(--oat);font-variant-numeric:tabular-nums;font-weight:600}
.to{color:var(--mute)}.tin::-webkit-calendar-picker-indicator{display:none}
.tog{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:var(--oat);text-align:left;transition:background .18s var(--ease),color .18s var(--ease)}
.tog[aria-pressed=true]{background:var(--ink);color:var(--oat)}
.nowork #wFrom,.nowork #wTo,.nowork .wdays{opacity:.45}
.wdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin-top:6px}
.wdays button{min-height:44px;min-width:0;padding:0;border:0;border-radius:999px;background:var(--oat);font-weight:600;font-size:15px}
.wdays button[aria-pressed=true]{background:var(--ink);color:var(--oat)}
.result{margin:24px 0 18px}
.verdict{margin:0 0 12px;font-size:24px;font-weight:800;font-variation-settings:"CASL" 1;line-height:1.2}
.fix{margin:0 0 14px}
.dials{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:6px 0 4px}
.dial{margin:0;text-align:center}.dial svg{width:100%;max-width:220px;display:block;margin:0 auto}
.dial figcaption{font-weight:800;font-variation-settings:"CASL" 1;font-size:18px;margin-top:2px}
.rim{fill:none;stroke:var(--tone);stroke-width:8}.busy{fill:none;stroke:url(#hatch);stroke-width:8}
.track{fill:none;stroke:var(--tone);stroke-width:12}
.ph{fill:none;stroke-width:12;stroke-linecap:butt}.ph.lev{stroke:var(--dough)}.ph.auto{stroke:#D9B67E}.ph.bulk{stroke:var(--crust)}.ph.shape{stroke:#7B3E15}.ph.cold{stroke:#9DB0F2}.ph.bake{stroke:var(--ink)}
.draw .ph{stroke-dasharray:var(--len) 999;stroke-dashoffset:var(--len);animation:draw .6s var(--ease) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.draw .busy{animation:fade .3s var(--ease) both}@keyframes fade{from{opacity:0}}
.dot{fill:#fff;stroke:var(--ink);stroke-width:2.2}.dot.bad{fill:#E5484D;stroke:#fff}
.tk{font:600 7px "Recursive",sans-serif;fill:var(--mute);text-anchor:middle}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:8px 0 18px;font-size:15px;color:var(--mute)}
.lg{display:inline-block;width:14px;height:14px;border-radius:5px;margin-right:6px;vertical-align:-2px}.lg.lev{background:var(--dough)}.lg.bulk{background:var(--crust)}.lg.cold{background:#9DB0F2}.lg.bake{background:var(--ink)}.lg.busy{background:#D9CBB0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M-1 1l2-2M0 4l4-4M3 5l2-2' stroke='%237D6E57' stroke-width='1.2'/%3E%3C/svg%3E")}
.steps{list-style:none;margin:0;padding:0}
.st{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:12px 0}
.st+.st{box-shadow:0 -1px 0 0 transparent}
.tm{display:flex;flex-direction:column;font-weight:850;font-variation-settings:"CASL" 1;font-size:24px;line-height:1.05;font-variant-numeric:tabular-nums}
.dn{font-size:15px;font-weight:700;color:#7E3B0E;margin-bottom:3px}
.tx b{display:block;font-weight:650;line-height:1.3}.tx span{display:block;color:var(--mute);font-size:16px;margin-top:2px}
.st.passive .tm,.st.passive .tx b{color:#2442C4}
.st.bad .tm,.st.bad b{color:#C62F35}
.st.tip .tx span{color:var(--ink);background:var(--dough);padding:10px 14px;border-radius:16px}
.st.out .tm{color:#7E3B0E}
.acts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:0;border-radius:999px;font-weight:700;font-size:17px;text-decoration:none;transition:transform .16s var(--ease)}
.btn.cobalt{background:var(--cob);color:#fff}.btn.quiet{background:var(--tone)}
.rrow{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;margin:6px 0}.rrow label,.rrow>span{font-weight:600}.rrow b{font-weight:800}
.rrow input[type=range]{grid-column:1/-1}
.stepper{display:flex;align-items:center;gap:12px}.stepper output{font-size:26px;font-weight:850;font-variation-settings:"CASL" 1;min-width:22px;text-align:center}
.amounts{margin:12px 0 0;display:grid;gap:2px}
.amounts div{display:flex;justify-content:space-between;align-items:baseline;padding:9px 14px;border-radius:14px;background:var(--oat)}
.amounts dt{font-weight:500}.amounts dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums;font-size:20px}
.note{margin:10px 0 0;color:var(--mute);font-size:16px}
.news p{margin:0 0 12px}.sub{display:flex;flex-wrap:wrap;gap:8px}.sub .in{flex:1 1 200px}.sub .err{flex-basis:100%;margin:4px 0 0;color:#B42318;font-weight:600}.sub .err:empty{display:none}.ok{margin:0;font-weight:700}
.in{min-height:48px;padding:0 16px;border:0;border-radius:14px;background:var(--oat);font-size:18px}.in::placeholder{color:#6B6157}
.guide{max-width:640px;margin:0 auto;padding:40px 18px 20px}
.guide h1{font-size:46px;margin:6px 0 16px}.guide h2{font-size:30px;margin:36px 0 10px}.guide h3{font-size:20px;margin:22px 0 4px;font-variation-settings:"CASL" .5}
.guide p{max-width:560px;margin:0 0 14px}
.others{display:flex;flex-wrap:wrap;gap:8px}.others .chip{background:var(--tone);color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.tbl{display:grid;gap:2px;margin:18px 0;font-variant-numeric:tabular-nums}
.tr{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:8px;padding:10px 14px;border-radius:14px;background:var(--tone);font-size:16px}
.tr.th{background:var(--ink);color:var(--oat);font-weight:700}
.ddt .big{font-size:34px;font-weight:900;font-variation-settings:"CASL" 1;margin:16px 0 0;color:var(--cob)}
.ddt .unit{background:var(--oat)}.ddt .unit button[aria-pressed=true]{background:var(--cob);color:#fff}
.foot{max-width:640px;margin:0 auto;padding:30px 18px calc(40px + env(safe-area-inset-bottom));font-size:15px;color:var(--mute)}
.foot .mark{color:var(--ink)}.foot nav{display:flex;flex-wrap:wrap;gap:0 16px;margin:10px 0}.foot nav a{display:inline-flex;align-items:center;min-height:44px}
.toast{white-space:nowrap;position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;background:var(--ink);color:var(--oat);font-weight:650;padding:12px 20px;border-radius:999px;pointer-events:none;transition:all .22s var(--ease);z-index:50;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (min-width:960px){
  .hero{min-height:520px}.heroin{max-width:1100px;display:grid;grid-template-columns:1fr 420px;grid-template-rows:auto auto auto 1fr;column-gap:60px;padding:56px 40px 40px}
  .hero h1{grid-column:1;font-size:72px;max-width:9ch}.q,.days,.when{grid-column:1}.kt{grid-column:2;grid-row:1/span 3;align-self:end}
  .days{margin:0;padding:2px 0 4px;flex-wrap:wrap}
  .paper{max-width:1100px;display:grid;grid-template-columns:380px 1fr;gap:20px 40px;padding:32px 40px 0;align-items:start}
  .hours{grid-column:1;position:sticky;top:76px}.result{grid-column:2;grid-row:1/span 3;margin-top:0}.recipe,.news{grid-column:1}
  .dials{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.top,.hero,.hours,.recipe .stepper,.news,.guide,.foot,.acts,.toast,.fix,input[type=range]{display:none!important}body{background:#fff}.paper{display:block;padding:0}.result{margin:0}.card{background:#fff;padding:0}.amounts div{background:#fff}}
@media (max-width:560px){.tin{font-size:15px;padding:0 6px;letter-spacing:-.01em}}
@media (min-width:900px){.heroimg{object-position:70% 50%}}