:root{--bg-page:#fff;--bg-subtle:#f7f7fa;--bg-muted:#efeff4;--bg-elevated:#fff;--text-primary:#1c1c23;--text-secondary:#5e5e6e;--text-tertiary:#7c7c8c;--text-disabled:#c9c9d4;--border:#e2e2ea;--border-strong:#c9c9d4;--brand:#5a4bc6;--brand-hover:#4a3ca8;--brand-active:#3a2f85;--brand-text:#5a4bc6;--brand-subtle:#f4f3fd;--brand-subtle-text:#4a3ca8;--on-brand:#fff;--success:#2e9e6a;--success-bg:#e7f6ee;--success-text:#1d6e49;--warning:#e07a2f;--warning-bg:#fdf0e6;--warning-text:#9a4a12;--danger:#d9433f;--danger-bg:#fcebea;--danger-text:#9e2723;--focus-ring:#5a4bc659;--overlay:#12121666;--selection:#f4f3fd;--font-display:"Nunito","Resource Han Rounded SC","Noto Sans SC",sans-serif;--font-sans:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;--font-mono:"JetBrains Mono","Noto Sans SC",ui-monospace,monospace;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-full:999px;--radius-bubble:16px 16px 16px 4px;--shadow-sm:0 1px 2px #1c1c230f;--shadow-md:0 4px 16px #1c1c2314;--duration-fast:.12s;--duration-base:.2s;--duration-slow:.32s;--ease-out:cubic-bezier(.2,0,0,1)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg-page:#121216;--bg-subtle:#1c1c23;--bg-muted:#2e2e38;--bg-elevated:#24242c;--text-primary:#f7f7fa;--text-secondary:#a2a2b0;--text-tertiary:#8e8e9e;--text-disabled:#464654;--border:#2e2e38;--border-strong:#464654;--brand:#7366d8;--brand-hover:#6456d0;--brand-active:#5a4bc6;--brand-text:#b5acf1;--brand-subtle:#282160;--brand-subtle-text:#d3cdf7;--success-bg:#12301f;--success-text:#5fc795;--warning-bg:#3a2312;--warning-text:#f0a46a;--danger-bg:#3a1716;--danger-text:#f07c78;--focus-ring:#b5acf173;--overlay:#0009;--selection:#3a2f85}}:root[data-theme=dark]{--bg-page:#121216;--bg-subtle:#1c1c23;--bg-muted:#2e2e38;--bg-elevated:#24242c;--text-primary:#f7f7fa;--text-secondary:#a2a2b0;--text-tertiary:#8e8e9e;--text-disabled:#464654;--border:#2e2e38;--border-strong:#464654;--brand:#7366d8;--brand-hover:#6456d0;--brand-active:#5a4bc6;--brand-text:#b5acf1;--brand-subtle:#282160;--brand-subtle-text:#d3cdf7;--success-bg:#12301f;--success-text:#5fc795;--warning-bg:#3a2312;--warning-text:#f0a46a;--danger-bg:#3a1716;--danger-text:#f07c78;--focus-ring:#b5acf173;--overlay:#0009;--selection:#3a2f85}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:28px}::selection{background:var(--selection)}:focus-visible{box-shadow:0 0 0 3px var(--focus-ring);outline:none}h1,h2,h3,p,ul,ol{margin:0;padding:0}ul,ol{list-style:none}a{color:var(--brand-text);text-decoration:none}a:hover{text-decoration:underline}button,textarea,input{font:inherit;color:inherit}img{max-width:100%;display:block}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}.page{max-width:720px;margin:0 auto;padding:0 16px 96px}.nav{justify-content:space-between;align-items:center;height:64px;display:flex}.logo{color:var(--text-primary);font-family:var(--font-display);align-items:center;gap:8px;min-height:44px;font-size:20px;font-weight:700;line-height:28px;display:inline-flex}.logo:hover{text-decoration:none}.logo svg{flex:none}.logo path{fill:var(--brand)}.hero{padding:32px 0 24px}.hero h1{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:36px}.hero h1 em{color:var(--brand-text);font-style:normal}.hero p{color:var(--text-secondary);margin-top:12px}@media (width>=768px){.hero{padding:48px 0 32px}.hero h1{font-size:36px;line-height:44px}}.form{flex-direction:column;gap:12px;display:flex}.field{border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-page);resize:vertical;width:100%;min-height:120px;transition:border-color var(--duration-fast) var(--ease-out);padding:12px 16px}.field::placeholder{color:var(--text-tertiary)}.field:hover{border-color:var(--text-tertiary)}.field:focus-visible{border-color:var(--brand)}.field:disabled{background:var(--bg-subtle);color:var(--text-disabled)}.form-row{gap:12px;display:flex}.hint{color:var(--text-secondary);font-size:14px;line-height:22px}.btn{border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;height:48px;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:0 24px;font-weight:500;display:inline-flex}.btn:hover{text-decoration:none}.btn:disabled{cursor:not-allowed}.btn-primary{background:var(--brand);color:var(--on-brand);flex:1}.btn-primary:hover{background:var(--brand-hover)}.btn-primary:active{background:var(--brand-active)}.btn-primary:disabled{background:var(--bg-muted);color:var(--text-disabled)}.btn-secondary{border-color:var(--border-strong);color:var(--text-primary);background:0 0}.btn-secondary:hover{background:var(--bg-subtle)}.btn-secondary:active{background:var(--bg-muted)}.btn-secondary:disabled{color:var(--text-disabled);border-color:var(--border)}.btn-sm{height:36px;padding:0 12px;font-size:14px}.btn-icon{border-radius:var(--radius-md);border:1px solid var(--border-strong);cursor:pointer;background:0 0;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:inline-flex}.btn-icon:hover{background:var(--bg-subtle)}.btn-icon:active{background:var(--bg-muted)}.btn-icon:disabled{color:var(--text-disabled);border-color:var(--border);cursor:not-allowed}.progress{border-radius:var(--radius-lg);background:var(--bg-subtle);margin-top:24px;padding:24px}.progress ol{flex-direction:column;gap:12px;display:flex}.progress li{color:var(--text-tertiary);align-items:center;gap:12px;display:flex}.progress li[data-state=active]{color:var(--text-primary);font-weight:500}.progress li[data-state=done]{color:var(--text-secondary)}.dot{width:20px;height:20px;color:var(--text-disabled);flex:none;justify-content:center;align-items:center;display:inline-flex}li[data-state=active] .dot{color:var(--brand-text)}li[data-state=done] .dot{color:var(--success)}.spin{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.progress .hint{margin-top:16px}.notice{border-radius:var(--radius-md);gap:12px;margin-top:24px;padding:16px;font-size:14px;line-height:22px;display:flex}.notice svg{flex:none;margin-top:1px}.notice strong{font-size:16px;font-weight:500;line-height:24px;display:block}.notice-danger{background:var(--danger-bg);color:var(--danger-text)}.notice-warning{background:var(--warning-bg);color:var(--warning-text)}.notice-info{background:var(--brand-subtle);color:var(--brand-subtle-text)}.section{margin-top:48px}.section>h2{margin-bottom:16px;font-size:20px;font-weight:700;line-height:28px}.cards{gap:12px;display:grid}@media (width>=768px){.cards{grid-template-columns:1fr 1fr}}.card{border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text-primary);min-height:88px;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);align-items:center;gap:12px;padding:12px;display:flex}.card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);text-decoration:none}.card:active{background:var(--bg-subtle)}.thumb{border-radius:var(--radius-md);background:var(--bg-muted);object-fit:cover;flex:none;width:64px;height:64px}.card-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-weight:500;line-height:24px;display:-webkit-box;overflow:hidden}.card-meta{color:var(--text-secondary);margin-top:4px;font-size:12px;line-height:18px}.empty{border-radius:var(--radius-lg);background:var(--bg-subtle);color:var(--text-secondary);text-align:center;padding:32px 24px}.skeleton{border-radius:var(--radius-lg);background:var(--bg-muted);height:88px;animation:1.4s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.5}}.cover{aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-lg);background:var(--bg-muted);width:100%}.recipe-head{margin-top:24px}.recipe-head h1{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:36px}@media (width>=768px){.recipe-head h1{font-size:36px;line-height:44px}}.recipe-head p{color:var(--text-secondary);margin-top:12px}.facts{color:var(--text-secondary);flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:14px;line-height:22px;display:flex}.fact{align-items:center;gap:4px;display:inline-flex}.tags{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.tag{border-radius:var(--radius-sm);background:var(--brand-subtle);height:22px;color:var(--brand-subtle-text);padding:0 8px;font-size:12px;line-height:22px}.actions{gap:12px;margin-top:24px;display:flex}.dish{border-top:1px solid var(--border);margin-top:48px;padding-top:24px}.dish>h2{font-family:var(--font-display);font-size:24px;font-weight:700;line-height:32px}.block{margin-top:32px}.block-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.block h2,.block h3{font-size:20px;font-weight:700;line-height:28px}.group-label{color:var(--text-secondary);margin:16px 0 4px;font-size:12px;line-height:18px}.ing{border-bottom:1px solid var(--border);cursor:pointer;align-items:flex-start;gap:12px;min-height:48px;padding:10px 0;display:flex}.ing input{opacity:0;width:0;height:0;position:absolute}.box{border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);color:#0000;width:20px;height:20px;transition:background var(--duration-fast) var(--ease-out);flex:none;justify-content:center;align-items:center;margin-top:4px;display:inline-flex}.ing:hover .box{border-color:var(--brand)}.ing input:focus-visible+.box{box-shadow:0 0 0 3px var(--focus-ring)}.ing input:checked+.box{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}.ing-name{flex:1}.ing-note{color:var(--text-secondary);font-size:12px;line-height:18px;display:block}.ing-amount{color:var(--text-secondary);text-align:right;flex:none;max-width:45%}.ing[data-checked=true] .ing-name,.ing[data-checked=true] .ing-amount{color:var(--text-disabled);text-decoration:line-through}.stepper{align-items:center;gap:8px;font-size:14px;display:inline-flex}.stepper output{text-align:center;min-width:56px}.steps{counter-reset:step;flex-direction:column;gap:20px;display:flex}.step{gap:12px;display:flex}.step-no{border-radius:var(--radius-full);background:var(--bg-muted);text-align:center;flex:none;width:28px;height:28px;font-size:14px;font-weight:500;line-height:28px}.step-body{flex:1;min-width:0}.step-meta{color:var(--text-secondary);flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:12px;line-height:18px;display:flex}.step-meta a{align-items:center;gap:4px;min-height:24px;display:inline-flex}.step-tip{border-radius:var(--radius-md);background:var(--bg-subtle);color:var(--text-secondary);margin-top:8px;padding:8px 12px;font-size:14px;line-height:22px}.tips li{margin-top:8px;padding-left:16px;position:relative}.tips li:before{content:"";border-radius:var(--radius-full);background:var(--text-tertiary);width:4px;height:4px;position:absolute;top:12px;left:2px}.source{border-top:1px solid var(--border);color:var(--text-secondary);margin-top:48px;padding-top:24px;font-size:14px;line-height:22px}.source a{align-items:center;gap:4px;min-height:44px;display:inline-flex}.toast{border-radius:var(--radius-md);background:var(--text-primary);color:var(--bg-page);box-shadow:var(--shadow-md);padding:8px 16px;font-size:14px;line-height:22px;position:fixed;bottom:32px;left:50%;transform:translate(-50%)}