:root{--color-cream:#fbf8f1;--color-warm-white:#fffefb;--color-charcoal:#2c2c2c;--color-charcoal-light:#4a4a4a;--color-lemon:#f5d547;--color-lemon-dark:#d4a843;--color-lemon-light:#fff8dc;--color-green:#2d5016;--color-green-light:#3d6b22;--color-border:#e8e2d8;--color-muted:#8b8177;--font-serif:"Georgia", "Times New Roman", serif;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--radius:16px;--radius-sm:8px;--shadow:0 2px 20px #0000000a;--shadow-hover:0 4px 30px #00000014}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{font-family:var(--font-sans);background-color:var(--color-cream);color:var(--color-charcoal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}.app{flex-direction:column;max-width:1400px;min-height:100vh;margin:0 auto;padding:1.5rem 2rem;display:flex}.header{text-align:center;margin-bottom:1.5rem;padding-top:.5rem}.logo{font-family:var(--font-serif);color:var(--color-charcoal);letter-spacing:-.02em;margin-bottom:.25rem;font-size:2.5rem;font-weight:400}.tagline{color:var(--color-charcoal-light);max-width:600px;margin:0 auto;font-size:1.35rem;font-weight:300;line-height:1.5}.main{flex:1;grid-template-columns:1fr 1fr;align-items:start;gap:1.5rem;display:grid}.card{background:var(--color-warm-white);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow);max-height:calc(100vh - 140px);padding:1.75rem 2rem;overflow-y:auto}.card h2{font-family:var(--font-serif);color:var(--color-charcoal);margin-bottom:.25rem;font-size:1.5rem;font-weight:400}.card-subtitle{color:var(--color-muted);margin-bottom:1.5rem;font-size:.9rem}.mode-toggle{border:1px solid var(--color-border);border-radius:var(--radius-sm);gap:0;margin-bottom:1.5rem;display:flex;overflow:hidden}.mode-btn{background:var(--color-cream);color:var(--color-charcoal-light);cursor:pointer;font-size:.8rem;font-weight:500;font-family:var(--font-sans);border:none;flex:1;padding:.6rem .75rem;transition:all .2s}.mode-btn:first-child{border-right:1px solid var(--color-border)}.mode-btn.active{background:var(--color-lemon-light);color:var(--color-charcoal);font-weight:600}.mode-btn:hover:not(.active){background:#f5f0e8}.input-group{margin-bottom:1.25rem}.input-group label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-charcoal-light);margin-bottom:.35rem;font-size:.8rem;font-weight:600;display:block}.input-group select,.input-group input[type=number]{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-cream);width:100%;color:var(--color-charcoal);font-size:.95rem;font-family:var(--font-sans);padding:.6rem .85rem;transition:border-color .2s}.input-group select:focus,.input-group input[type=number]:focus{border-color:var(--color-lemon-dark);outline:none}.input-hint{color:var(--color-muted);margin-top:.35rem;font-size:.8rem;display:block}.citrus-selector{grid-template-columns:repeat(4,1fr);gap:.5rem;display:grid}.citrus-option{border:2px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-cream);cursor:pointer;font-family:var(--font-sans);flex-direction:column;align-items:center;padding:.6rem .25rem;transition:all .2s;display:flex}.citrus-option:hover{border-color:var(--color-lemon-dark);background:var(--color-lemon-light)}.citrus-option.active{border-color:var(--color-lemon-dark);background:var(--color-lemon-light);box-shadow:0 0 0 3px #f5d54733}.citrus-emoji{margin-bottom:.15rem;font-size:1.4rem}.citrus-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-charcoal-light);font-size:.75rem;font-weight:600}.tick-slider{padding-bottom:38px;position:relative}.tick-slider input[type=range]{z-index:2;width:100%;position:relative}.tick-labels-positioned{height:36px;position:absolute;top:22px;left:8px;right:8px}.tick-label{flex-direction:column;align-items:center;display:flex;position:absolute;transform:translate(-50%)}.tick-mark{background:var(--color-charcoal-light);border-radius:1px;width:2px;height:10px}.tick-inches{color:var(--color-charcoal);white-space:nowrap;margin-top:2px;font-size:.75rem;font-weight:600}.tick-descriptor{color:var(--color-muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;font-size:.6rem}.slider-container{padding-bottom:18px;position:relative}.slider-container input[type=range]{z-index:2;position:relative}.slider-max-marker{z-index:3;pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;top:0;transform:translate(-50%)}.max-marker-line{background:#d4443b;border-radius:1px;width:2px;height:20px}.max-marker-label{color:#d4443b;white-space:nowrap;margin-top:2px;font-size:.65rem;font-weight:600}.slider-disabled-zone{pointer-events:none;z-index:1;background:repeating-linear-gradient(-45deg,#0000,#0000 3px,#c8b4b44d 3px 6px);border-radius:3px;height:6px;position:absolute;top:6px}input[type=range]{appearance:none;background:var(--color-border);border-radius:3px;outline:none;width:100%;height:6px;margin:.5rem 0}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--color-lemon);border:2px solid var(--color-lemon-dark);cursor:pointer;border-radius:50%;width:22px;height:22px;box-shadow:0 2px 6px #0000001a}input[type=range]::-moz-range-thumb{background:var(--color-lemon);border:2px solid var(--color-lemon-dark);cursor:pointer;border-radius:50%;width:22px;height:22px}.range-labels{color:var(--color-muted);justify-content:space-between;margin-top:.25rem;font-size:.75rem;display:flex}.results{animation:.2s ease-out fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.results-grid{grid-template-columns:repeat(3,1fr);gap:.75rem;margin:1.25rem 0;display:grid}.result-item{text-align:center;background:var(--color-cream);border-radius:var(--radius-sm);border:1px solid var(--color-border);padding:.85rem .4rem}.result-value{color:var(--color-green);margin-bottom:.15rem;font-size:1.25rem;font-weight:700;display:block}.result-label{text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted);font-size:.7rem}.phase{margin-top:1rem}.phase-1 h3,.phase-2 h3{font-family:var(--font-serif);color:var(--color-charcoal);margin-bottom:.75rem;font-size:1.1rem;font-weight:400}.ready-date{background:var(--color-lemon-light);border-radius:var(--radius-sm);align-items:center;gap:.5rem;margin:1rem 0;padding:.75rem 1rem;display:flex}.ready-date-label{color:var(--color-charcoal-light);font-size:.8rem}.ready-date-value{color:var(--color-green);font-size:.95rem;font-weight:700}.screenshot-note{border-radius:var(--radius-sm);color:#2a5078;background:#f0f7ff;border:1px solid #c8ddf0;margin-top:.75rem;padding:.85rem 1rem;font-size:.8rem;line-height:1.5}.btn-phase2{width:100%;color:var(--color-charcoal);background:var(--color-lemon);border-radius:var(--radius-sm);cursor:pointer;font-size:.95rem;font-weight:600;font-family:var(--font-sans);border:none;margin-top:1rem;padding:.75rem 1.5rem;transition:all .2s}.btn-phase2:hover{background:var(--color-lemon-dark);box-shadow:var(--shadow-hover);transform:translateY(-1px)}.btn-phase2:active{transform:translateY(0)}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:1.5rem;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--color-warm-white);border-radius:var(--radius);width:100%;max-width:600px;max-height:85vh;padding:2rem;overflow-y:auto;box-shadow:0 20px 60px #0003}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.modal-header h2{font-family:var(--font-serif);margin:0;font-size:1.4rem;font-weight:400}.modal-close{background:var(--color-cream);cursor:pointer;width:32px;height:32px;color:var(--color-charcoal-light);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;transition:background .2s;display:flex}.modal-close:hover{background:var(--color-border)}.modal-screenshot-note{border:2px solid var(--color-lemon);border-radius:var(--radius-sm);color:var(--color-charcoal);background:#fff8dc;margin-bottom:1.25rem;padding:1rem 1.25rem;font-size:.9rem;line-height:1.5}.divider{border:none;border-top:1px solid var(--color-border);margin:1.25rem 0}.results h3{font-family:var(--font-serif);margin-bottom:.75rem;font-size:1.1rem;font-weight:400}.recipe-steps{padding-left:1.25rem}.recipe-steps li{color:var(--color-charcoal-light);margin-bottom:.75rem;font-size:.9rem;line-height:1.5}.recipe-steps li strong{color:var(--color-charcoal)}.final-note{background:var(--color-lemon-light);border-radius:var(--radius-sm);text-align:center;margin-top:1.25rem;padding:.85rem 1rem}.final-note p{color:var(--color-charcoal-light);font-size:.85rem}.warning{border-radius:var(--radius-sm);color:#664d03;background:#fff3cd;border:1px solid #f0c36d;margin-bottom:1.5rem;padding:1rem 1.25rem;font-size:.9rem}.info-note{border-radius:var(--radius-sm);color:#1a4a6b;background:#e8f4fd;border:1px solid #b8d9ed;margin-bottom:1.5rem;padding:1rem 1.25rem;font-size:.9rem}.yield-summary{text-align:center;background:var(--color-lemon-light);border-radius:var(--radius-sm);margin-bottom:1.25rem;padding:1rem}.yield-value{color:var(--color-green);font-size:1.75rem;font-weight:700;display:block}.yield-detail{color:var(--color-charcoal-light);font-size:.85rem}.footer{text-align:center;padding-top:1.5rem}.footer-tagline{color:var(--color-muted);margin-bottom:.35rem;font-size:.8rem}.feedback-link{color:var(--color-green);font-size:1.1rem;font-weight:600;text-decoration:none}.feedback-link:hover{text-decoration:underline}.story-link{color:#fff;border-radius:var(--radius-sm);cursor:pointer;font-size:.95rem;font-weight:600;font-family:var(--font-sans);background:#e8740c;border:none;margin-top:.75rem;padding:.5rem 1.25rem;transition:all .2s;display:inline-block}.story-link:hover{box-shadow:var(--shadow-hover);background:#c9620a;transform:translateY(-1px)}.story-page{max-width:680px;margin:0 auto;padding:2rem 1.5rem 4rem}.back-link{color:var(--color-green);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;font-family:var(--font-sans);background:0 0;margin-bottom:2rem;padding:.4rem .75rem;transition:all .2s;display:inline-block}.back-link:hover{border-color:var(--color-green)}.story-content h1{font-family:var(--font-serif);color:var(--color-charcoal);margin-bottom:1.5rem;font-size:2.25rem;font-weight:400}.story-content p{color:var(--color-charcoal-light);margin-bottom:1.25rem;font-size:1.05rem;line-height:1.8}.story-lede{font-weight:400;color:var(--color-charcoal)!important;font-size:1.15rem!important}.story-hero{margin:2rem 0}.story-image{border-radius:var(--radius);width:100%;box-shadow:var(--shadow)}.story-caption{text-align:center;font-style:italic;color:var(--color-muted)!important;margin-top:.5rem!important;font-size:.8rem!important}.story-cta{text-align:center;background:var(--color-lemon-light);border-radius:var(--radius);margin-top:2.5rem;padding:2rem}.story-cta p{font-family:var(--font-serif);color:var(--color-charcoal)!important;margin-bottom:1rem!important;font-size:1.25rem!important}.inline-link{color:var(--color-green);cursor:pointer;font-size:1rem;font-weight:500;font-family:var(--font-sans);background:0 0;border:none;padding:0}.inline-link:hover{text-decoration:underline}.data-intro{color:var(--color-charcoal-light);margin-bottom:1.25rem;font-size:.9rem}.data-table{border-collapse:collapse;width:100%;margin-bottom:1.5rem;font-size:.9rem}.data-table th,.data-table td{text-align:left;border-bottom:1px solid var(--color-border);padding:.5rem .75rem}.data-table th{text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted);font-size:.75rem;font-weight:600}.data-table td:first-child{color:var(--color-charcoal);font-weight:500}.modal h3{font-family:var(--font-serif);color:var(--color-charcoal);margin-bottom:.75rem;font-size:1.1rem;font-weight:400}.data-formula{background:var(--color-cream);border-radius:var(--radius-sm);margin-bottom:1rem;padding:1rem 1.25rem;font-family:monospace;font-size:.85rem;line-height:1.8}.data-formula p{margin:0}.data-note{color:var(--color-muted);font-size:.8rem;font-style:italic}@media (width<=900px){.main{grid-template-columns:1fr}.card{max-height:none}.app{padding:1rem}.logo{font-size:2rem}}@media (width<=500px){.citrus-selector,.results-grid{grid-template-columns:repeat(2,1fr)}.mode-toggle{flex-direction:column}.mode-btn:first-child{border-right:none;border-bottom:1px solid var(--color-border)}}