:root{--green:#8cc63e;--green-dark:#6fa32c;--green-tint:#f4f9ec;--text:#14140f;--text-muted:#4a4a42;--text-label:#14140f;--text-invert:#fff;--surface:#fff;--surface-alt:#f6f6f2;--surface-press:#ecece6;--line:#e6e6df;--line-strong:#d5d5cc;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--pad-x:var(--sp-4);--row-pad-y:var(--sp-3);--gap:var(--sp-5);--font-hero:32px;--font-title:24px;--font-section:17px;--font-row:17px;--font-label:15px;--font-small:13px;--r-sm:6px;--r-md:10px;--r-lg:14px;--shadow-sm:0 1px 2px #14140f0f;--shadow-md:0 2px 8px #14140f14;--thumb-w:88px;--thumb-h:68px;--hero-h:240px;--app-max:520px;--app-max-wide:900px;--sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{font-family:var(--sans);color:var(--text);background:var(--surface);margin:0}img{max-width:100%;display:block}button{font:inherit;color:inherit}ul{margin:0;padding:0;list-style:none}.app{max-width:var(--app-max);background:var(--surface);min-height:100vh;margin:0 auto}.masthead{padding:var(--sp-2) var(--pad-x);background:var(--green);justify-content:center;align-items:center;display:flex;position:relative}.masthead-back{left:var(--sp-2);align-items:center;gap:var(--sp-1);font-size:var(--font-small);color:var(--text);cursor:pointer;background:#fff9;border:0;border-radius:999px;padding:6px 12px;font-weight:600;line-height:1;transition:background .15s;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.masthead-back:hover{background:#ffffffd9}.masthead-back span{font-size:17px}.masthead-logo{width:100%;max-width:220px;height:auto}.screen-label{padding:var(--sp-3) var(--pad-x);font-size:var(--font-small);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);background:var(--surface-alt);border-bottom:1px solid var(--line);margin:0;font-weight:600}.nav{gap:var(--sp-3);padding:var(--sp-5) var(--pad-x) var(--sp-6);display:flex}.nav-btn{padding:var(--sp-4);font-size:var(--font-row);color:var(--text);background:var(--surface-alt);border:1px solid var(--line-strong);border-radius:var(--r-md);cursor:pointer;flex:1;font-weight:600;transition:background .15s,transform 50ms}.nav-btn:hover{background:var(--surface-press)}.nav-btn:active{transform:translateY(1px)}.nav-btn-primary{background:var(--green);border-color:var(--green-dark);box-shadow:var(--shadow-sm)}.nav-btn-primary:hover{background:var(--green-dark)}.message{padding:var(--sp-3) var(--pad-x);font-size:var(--font-label);color:var(--text-muted);margin:0}.veg-row{align-items:center;gap:var(--gap);width:100%;padding:var(--row-pad-y) var(--pad-x);background:var(--surface);border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;transition:background .15s;display:flex}.veg-row:hover{background:var(--green-tint)}.veg-thumb{width:var(--thumb-w);height:var(--thumb-h);object-fit:cover;border-radius:var(--r-sm);background:var(--surface-alt);flex:none}.veg-name{font-size:var(--font-row);color:var(--text);font-weight:600}.choice-row{align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-3);margin-bottom:var(--sp-2);background:var(--surface-alt);border-radius:var(--r-md);cursor:pointer;border:1px solid #0000;transition:background .15s,border-color .15s;display:flex}.choice-row:hover{background:var(--green-tint)}.choice-row:has(:checked){background:var(--green-tint);border-color:var(--green)}.choice-box{width:22px;height:22px;accent-color:var(--green-dark);cursor:pointer;flex:none}.choice-text{font-size:var(--font-row);color:var(--text)}.hero{background:var(--surface-alt);position:relative}.hero-img{width:100%;height:var(--hero-h);object-fit:cover;object-position:center 30%}.hero:after{content:"";pointer-events:none;background:linear-gradient(#0000,#0000008c);height:110px;position:absolute;inset:auto 0 0}.hero-name{z-index:1;left:var(--pad-x);bottom:var(--sp-3);font-size:var(--font-hero);letter-spacing:-.01em;color:var(--text-invert);text-shadow:0 1px 6px #00000080;margin:0;font-weight:600;position:absolute}.recipe{padding:var(--sp-4) var(--pad-x) 0}.recipe-badges{gap:var(--sp-1);margin-bottom:var(--sp-2);flex-wrap:wrap;display:flex}.recipe-badge{font-size:var(--font-small);color:var(--text-invert);border-radius:999px;padding:4px 10px;font-weight:600}.recipe-title{margin:0 0 var(--sp-3);font-size:var(--font-title);letter-spacing:-.01em;color:var(--text);font-weight:700;line-height:1.25}.recipe-photo-frame{border-radius:var(--r-lg);background:var(--surface-alt);box-shadow:var(--shadow-md);overflow:hidden}.recipe-photo{width:100%;height:auto}.recipe-section{margin-top:var(--sp-5)}.recipe-section-tab{margin-bottom:var(--sp-2);font-size:var(--font-section);letter-spacing:.02em;color:var(--green-dark);font-weight:700;display:block}.recipe-summary{padding:var(--sp-2) var(--sp-3);background:var(--surface-alt);border-radius:var(--r-md);grid-template-columns:auto auto auto auto;align-items:center;display:grid}.recipe-summary-key{padding:var(--sp-2) var(--sp-2) var(--sp-2) 0;font-size:var(--font-small);color:var(--text-muted)}.recipe-summary-val{padding:var(--sp-2) var(--sp-4) var(--sp-2) 0;font-size:var(--font-small);color:var(--text);font-weight:600}.recipe-list{padding:var(--sp-1) var(--sp-3);background:var(--surface-alt);border-radius:var(--r-md);margin:0}.recipe-list li{padding:var(--sp-3) 0;font-size:var(--font-label);color:var(--text);border-bottom:1px solid var(--line);line-height:1.5}.recipe-list li:last-child{border-bottom:0}.recipe-steps{padding-left:var(--sp-6);list-style:decimal}.recipe-steps li{padding-left:var(--sp-1)}.recipe-steps::marker{color:var(--green-dark)}.recipe-counter{margin:0 0 var(--sp-3);font-size:var(--font-small);letter-spacing:.03em;color:var(--green-dark);background:var(--green-tint);border-radius:999px;padding:4px 12px;font-weight:600;display:inline-block}.recipe-loading{margin-top:var(--sp-5)}.skeleton{background:var(--surface-alt);border-radius:var(--r-sm);animation:1.4s ease-in-out infinite pulse}.skeleton-tab{width:110px;height:20px;margin:var(--sp-5) 0 var(--sp-2)}.skeleton-line{height:15px;margin-bottom:var(--sp-3)}.skeleton-line.short{width:60%}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}.create-actions{gap:var(--sp-3);padding:var(--sp-5) var(--pad-x);flex-direction:column;display:flex}.create-btn{width:100%;padding:var(--sp-4);font-size:var(--font-row);color:var(--text);background:var(--green);border-radius:var(--r-md);box-shadow:var(--shadow-sm);cursor:pointer;border:0;font-weight:700;transition:background .15s,transform 50ms}.create-btn:hover{background:var(--green-dark)}.create-btn:active{transform:translateY(1px)}.create-btn:disabled{color:var(--text-muted);background:var(--surface-alt);box-shadow:none;cursor:default;transform:none}.book-card{width:100%;margin-bottom:var(--sp-3);border-radius:var(--r-lg);box-shadow:var(--shadow-md);cursor:pointer;background:0 0;border:0;padding:0;display:block;position:relative;overflow:hidden}.book-card-img{object-fit:cover;object-position:center 30%;width:100%;height:160px}.book-card:after{content:"";pointer-events:none;background:linear-gradient(#0000,#0000008c);height:90px;position:absolute;inset:auto 0 0}.book-card-name{z-index:1;left:var(--pad-x);bottom:var(--sp-3);font-size:var(--font-title);color:var(--text-invert);text-shadow:0 1px 6px #00000080;font-weight:600;position:absolute}.question{padding:var(--sp-5) var(--pad-x) var(--sp-2)}.question-intro{letter-spacing:-.01em;color:var(--text);margin:0;font-size:21px;font-weight:700;line-height:1.35}.question-sub{margin:var(--sp-2) 0 0;font-size:var(--font-small);letter-spacing:.04em;color:var(--green-dark);font-weight:600}.choice-list{margin-top:var(--sp-4)}.transition{padding:var(--sp-7) var(--pad-x) var(--sp-2);flex-direction:column;align-items:center;display:flex}.transition-line{margin:0 0 var(--sp-5);color:var(--text);align-self:flex-start;font-size:19px;font-weight:600;line-height:1.45}.transition-cue{margin:var(--sp-6) 0 var(--sp-4);font-size:var(--font-row);color:var(--green-dark);font-weight:700}.transition-arrow{background:var(--green);clip-path:polygon(38% 0%,62% 0%,62% 72%,100% 72%,50% 100%,0% 72%,38% 72%);width:44px;height:110px}.decide{gap:var(--sp-3);margin-top:var(--sp-5);padding:var(--sp-3) var(--pad-x) var(--sp-4);background:var(--surface);border-top:1px solid var(--line);display:flex;position:sticky;bottom:0}.decide-btn{padding:var(--sp-4);font-size:var(--font-row);letter-spacing:.03em;border-radius:var(--r-md);cursor:pointer;flex:1;font-weight:700;transition:background .15s,transform 50ms}.decide-btn:active{transform:translateY(1px)}.decide-btn:first-child{color:var(--text);background:var(--green);border:1px solid var(--green-dark);box-shadow:var(--shadow-sm)}.decide-btn:first-child:hover{background:var(--green-dark)}.decide-btn:last-child{color:var(--text-muted);background:var(--surface-alt);border:1px solid var(--line-strong)}.decide-btn:last-child:hover{background:var(--surface-press)}.intro-text{padding:var(--sp-4) var(--pad-x);background:var(--surface-alt)}.intro-text p{margin:0 0 var(--sp-3);font-size:var(--font-label);color:var(--text);line-height:1.5}.intro-text p:last-child{margin-bottom:0}.copy-grid{gap:var(--sp-3);padding:var(--sp-4) var(--pad-x);grid-template-columns:1fr 1fr;display:grid}.copy-tile{background:var(--surface-alt);border-radius:var(--r-md);cursor:pointer;border:2px solid #0000;width:100%;padding:0;transition:border-color .15s;display:block;position:relative;overflow:hidden}.copy-tile[aria-pressed=true]{border-color:var(--green)}.copy-tile-img{object-fit:cover;width:100%;height:130px}.copy-tile-title{padding:var(--sp-2) 38px var(--sp-3) var(--sp-3);font-size:var(--font-small);text-align:left;color:var(--text-invert);background:linear-gradient(#000000a6,#0000);font-weight:600;position:absolute;top:0;left:0;right:0}.copy-tile-box{top:var(--sp-2);right:var(--sp-2);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);width:22px;height:22px;position:absolute}.copy-tile-box.is-checked{background:var(--green);border-color:var(--green-dark)}.copy-tile-box.is-checked:after{content:"";border:solid var(--text);border-width:0 3px 3px 0;width:6px;height:12px;position:absolute;top:2px;left:7px;transform:rotate(45deg)}@media (width>=720px){.app{max-width:680px}.app:has(.copy-grid){max-width:var(--app-max-wide)}.recipe-title{font-size:28px}.copy-grid{grid-template-columns:repeat(3,1fr)}.copy-tile-img{height:150px}.decide{justify-content:center}.decide-btn{flex:0 260px}}@media (width>=1024px){body{background:var(--surface-alt)}.app{box-shadow:var(--shadow-md)}}