*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;padding-bottom:104px}a{color:inherit;text-decoration:none}.wrap{width:min(100% - 2rem,var(--max-width-narrow));margin-inline:auto}.wrap-wide{width:min(100% - 2rem,var(--max-width));margin-inline:auto}.site-header{position:sticky;top:0;z-index:40;height:var(--header-height);background:#fafaf8eb;backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}.site-header .inner{height:100%;width:min(100% - 2rem,var(--max-width));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}.logo-link svg{height:26px;width:auto}.back{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted)}.back:hover{color:var(--color-text)}.hero-block{padding:var(--space-12) 0 var(--space-8)}.crumb{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-4)}.crumb a{color:var(--color-accent)}.system-tag{display:inline-flex;font-size:var(--text-xs);font-weight:600;color:var(--color-accent);background:var(--color-accent-soft);padding:.3rem .7rem;border-radius:var(--radius-pill);margin-bottom:var(--space-3)}h1{font-size:clamp(1.55rem,3.5vw,var(--text-2xl));font-weight:700;letter-spacing:-.03em;line-height:var(--leading-tight);margin-bottom:var(--space-4)}.one-liner{color:var(--color-text-muted);font-size:var(--text-md);line-height:var(--leading-relaxed);margin-bottom:var(--space-6)}.recommend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--color-pastel-green);border-radius:var(--radius-lg);border:1px solid rgba(61,155,143,.22);font-size:var(--text-sm)}.setup-pill,.effort-pill{display:inline-flex;align-items:center;gap:.35rem;background:#ffffffb8;padding:.25rem .6rem;border-radius:var(--radius-pill);font-weight:600;font-size:var(--text-xs)}.setup-pill .dot,.effort-pill .dot{width:7px;height:7px;border-radius:50%}.setup-pill.fast .dot,.effort-pill.low .dot{background:var(--color-setup-fast)}.setup-pill.mid .dot,.effort-pill.medium .dot{background:var(--color-setup-mid)}.section{padding:var(--space-10) 0;border-top:1px solid var(--color-border)}.section h2{font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-5)}.section p{margin-bottom:var(--space-3);line-height:var(--leading-relaxed)}.section p.muted{color:var(--color-text-muted)}.goal{font-size:var(--text-sm);font-weight:600;color:var(--color-accent);margin-bottom:var(--space-6);padding:var(--space-3) var(--space-4);background:var(--color-accent-soft);border-radius:var(--radius-md)}ul.clean{list-style:none;display:grid;gap:var(--space-3)}ul.clean li{display:flex;gap:var(--space-3);font-size:var(--text-sm);line-height:var(--leading-relaxed)}ul.clean li:before{content:"";width:6px;height:6px;margin-top:.55em;border-radius:50%;background:var(--color-accent);flex-shrink:0}.steps{counter-reset:step;display:grid;gap:var(--space-6)}.step{display:grid;grid-template-columns:34px 1fr;gap:var(--space-3);align-items:start}.step:before{counter-increment:step;content:counter(step);width:34px;height:34px;border-radius:50%;background:var(--color-text);color:#fff;font-size:var(--text-sm);font-weight:700;display:flex;align-items:center;justify-content:center}.step p{margin:0;font-size:var(--text-sm);line-height:var(--leading-relaxed)}.step-body{display:grid;gap:var(--space-3)}.inline-code,.step code{font-family:var(--font-mono);font-size:.85em;background:#f0eee8;padding:.1em .35em;border-radius:4px}.step-figure{margin-top:var(--space-2);border-radius:var(--radius-lg);background:var(--color-bg-warm);border:1px solid var(--color-border);overflow:hidden;box-shadow:var(--shadow-sm)}.step-figure .frame{padding:var(--space-4);background:linear-gradient(180deg,#fbf9f5,#f5f1ea)}.step-figure .frame svg,.step-figure .frame img{display:block;width:100%;height:auto;border-radius:var(--radius-md);background:#fff;border:1px solid var(--color-border)}.step-figure figcaption{padding:var(--space-2) var(--space-4) var(--space-3);font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);letter-spacing:.01em}details.other{margin-top:var(--space-8);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-elevated);overflow:hidden}details.other summary{cursor:pointer;padding:var(--space-4) var(--space-5);font-weight:600;font-size:var(--text-sm);list-style:none;display:flex;justify-content:space-between;align-items:center}details.other summary::-webkit-details-marker{display:none}details.other summary:after{content:"+";color:var(--color-text-muted);font-size:1.2rem}details.other[open] summary:after{content:"−"}details.other .body{padding:0 var(--space-5) var(--space-5)}details.other h3{font-size:var(--text-sm);font-weight:700;margin:var(--space-4) 0 var(--space-3)}.tips{background:var(--color-pastel-purple);border-radius:var(--radius-lg);padding:var(--space-6)}.tips ul{padding-left:1.1rem}.tips li{font-size:var(--text-sm);margin-bottom:var(--space-2);line-height:var(--leading-relaxed)}.template-box{margin-top:var(--space-5);background:var(--color-bg-warm);border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);white-space:pre-wrap;line-height:1.6;color:#222}.related{padding:var(--space-12) 0 var(--space-16);border-top:1px solid var(--color-border)}.related h2{font-size:var(--text-lg);margin-bottom:var(--space-6)}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}.rel-card{display:flex;flex-direction:column;padding:var(--space-5);border-radius:var(--radius-xl);min-height:148px;transition:transform .16s var(--ease),box-shadow .16s var(--ease)}.rel-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.rel-card h3{font-size:var(--text-sm);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-2)}.rel-card .tag{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:auto}.sticky-cta{position:fixed;bottom:0;left:0;right:0;z-index:50;background:#fafaf8f5;backdrop-filter:blur(12px);border-top:1px solid var(--color-border);padding:var(--space-3) 0}.sticky-cta .inner{width:min(100% - 2rem,var(--max-width-narrow));margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}.sticky-cta .helper{flex:1 1 180px;font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.45}.cta-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:var(--radius-pill);font-weight:600;font-size:var(--text-sm);padding:.75rem 1.2rem;cursor:pointer;border:none}.btn-primary{background:var(--color-cta);color:#fff}.btn-primary:hover{background:#2a2a2a}.btn-outline{background:transparent;color:var(--color-text);border:1.5px solid var(--color-border-strong)}.btn-outline:hover{border-color:var(--color-accent);color:var(--color-accent)}.toast{position:fixed;bottom:96px;left:50%;transform:translate(-50%) translateY(12px);background:var(--color-text);color:#fff;padding:.55rem 1rem;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:500;opacity:0;pointer-events:none;z-index:60;transition:opacity .18s var(--ease),transform .18s var(--ease)}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}footer.site{border-top:1px solid var(--color-border);padding:var(--space-8) 0;font-size:var(--text-sm);color:var(--color-text-muted)}footer.site a{color:var(--color-accent);font-weight:500}@media(max-width:720px){.related-grid{grid-template-columns:1fr}.sticky-cta .inner{flex-direction:column;align-items:stretch}.cta-actions .btn{flex:1}}body.recipe-page,body{padding-bottom:0!important}.sticky-cta{display:none!important}.btn-sm{padding:.5rem .95rem;font-size:var(--text-xs)}.step-link-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem .75rem;margin:0}.ext-link{color:var(--color-accent);font-weight:600;font-size:var(--text-sm);text-decoration:none}.ext-link:hover{text-decoration:underline}.ext-link .ext-icon{font-weight:700;margin-left:.15em}.opens-tab{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:500}.step-actions{display:grid;gap:var(--space-2);justify-items:start;padding:var(--space-3) var(--space-4);background:var(--color-bg-warm);border:1px solid var(--color-border);border-radius:var(--radius-md)}.inline-helper{margin:0;font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.45}.template-block{margin-top:var(--space-5);display:grid;gap:var(--space-3)}.template-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}.template-block .template-box{margin-top:0}.try-asking .try-intro{margin-bottom:var(--space-4)}.try-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}.try-chip{margin:0;font-size:var(--text-sm);line-height:var(--leading-snug);color:var(--color-text);background:var(--color-bg-warm);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:.55rem .85rem;max-width:100%}.rel-card .card-brand{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}.rel-card .rel-logo{width:28px;height:28px;border-radius:6px;flex-shrink:0;display:block}.rel-card .card-system{font-size:var(--card-system-size, .8125rem);font-weight:500;color:var(--card-system-color, var(--color-text-muted));letter-spacing:.01em}.rel-card h3{font-size:var(--text-sm);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--space-3);line-height:var(--leading-snug)}.rel-card .card-setup{display:inline-flex;align-items:center;gap:.35rem;margin-top:auto;font-size:var(--text-xs);font-weight:500;color:var(--color-text)}.rel-card .card-setup .setup-label{color:var(--color-text-muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.6875rem}.rel-card .setup-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.rel-card .setup-fast .setup-dot{background:var(--color-setup-fast)}.rel-card .setup-mid .setup-dot{background:var(--color-setup-mid)}.toast{bottom:24px!important}.share-row{padding:var(--space-8) 0;border-top:1px solid var(--color-border)}.share-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem .75rem;margin-bottom:var(--space-4)}.share-heading h2{font-size:var(--text-sm);font-weight:700;letter-spacing:-.01em}.share-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.share-link{color:var(--color-text-muted);border-color:var(--color-border-strong)}.share-link:hover,.share-link:focus-visible{color:var(--color-accent);border-color:var(--color-accent)}.share-arrow{font-weight:700;margin-left:.05em}