:root{font-family:SF Pro Text,PingFang SC,Noto Sans SC,sans-serif;color:#221c17;background:#f6f2ea;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--panel: rgba(255, 252, 248, .88);--panel-border: rgba(118, 95, 69, .12);--accent: #bf7b30;--accent-strong: #8f5720;--muted: rgba(74, 61, 49, .66);--text-strong: #1f1914;--field-bg: rgba(255, 255, 255, .92);--field-border: rgba(126, 101, 74, .14);--shadow: 0 24px 50px rgba(87, 66, 40, .08);--shadow-soft: 0 10px 22px rgba(87, 66, 40, .05)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:var(--text-strong);background:linear-gradient(to bottom,#fff6,#fff0),#f6f2ea}button,input{font:inherit}#root{min-height:100vh}.shell{min-height:100vh;padding:28px 20px 32px;display:grid;align-content:center;gap:20px;position:relative;overflow:hidden}.shell:before,.shell:after{content:"";position:fixed;border-radius:50%;pointer-events:none;z-index:0}.shell:before{top:-110px;right:-80px;width:300px;height:300px;background:#dfbc942e;filter:blur(10px)}.shell:after{left:-100px;bottom:-120px;width:280px;height:280px;background:#d2e0d62e;filter:blur(16px)}.hero,.panel{width:min(1080px,100%);margin:0 auto;position:relative;z-index:1}.hero{padding-top:0}.eyebrow{margin:0 0 10px;color:var(--accent-strong);letter-spacing:.3em;text-transform:uppercase;font-size:.72rem;font-weight:700}.hero h1{margin:0;font-family:SF Pro Display,Avenir Next,PingFang SC,sans-serif;font-size:clamp(2.5rem,6vw,4.4rem);font-weight:700;line-height:.95;letter-spacing:-.04em;color:var(--text-strong)}.intro{margin:14px 0 0;max-width:680px;color:var(--muted);font-size:1rem;line-height:1.72}.panel{padding:28px;border:1px solid var(--panel-border);background:var(--panel);border-radius:30px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.field{display:grid;gap:10px}.stop-mode-field{align-content:start}.field span{color:var(--muted);font-size:.9rem;font-weight:600}.mode-switch{display:flex;gap:4px;margin-bottom:4px;padding:4px;border:1px solid rgba(126,101,74,.08);border-radius:16px;background:#4938230f;box-shadow:inset 0 1px 2px #3c2c160a}.mode-chip{border:0;background:transparent;color:#6f5b4b;border-radius:12px;padding:11px 16px;font-size:.92rem;font-weight:600;line-height:1;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}.mode-chip:hover{color:#49392c}.mode-chip.active{background:#fff;box-shadow:0 1px 2px #2c20140f,0 6px 14px #69503214;color:#241b14;transform:translateY(-.5px)}.derived-stop{display:grid;gap:8px}.derived-stop small{color:var(--muted);font-size:.88rem}.field input{width:100%;border:1px solid var(--field-border);background:var(--field-bg);color:var(--text-strong);border-radius:18px;padding:15px 16px;outline:none;box-shadow:inset 0 1px #fff9;transition:border-color .18s ease,transform .18s ease,background .18s ease,box-shadow .18s ease}.field input:focus{border-color:#bf7b3085;background:#fff;transform:translateY(-1px);box-shadow:inset 0 1px #ffffffbf,0 0 0 4px #bf7b301a}.slider-wrap{display:grid;gap:8px}.slider-wrap input[type=range],.derived-stop input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer}.slider-wrap input[type=range]::-webkit-slider-runnable-track,.derived-stop input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:#bf7b3038}.slider-wrap input[type=range]::-webkit-slider-thumb,.derived-stop input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-6px;border:3px solid #fffdf8;border-radius:50%;background:#bf7b30;box-shadow:0 6px 16px #91682c2e}.slider-wrap input[type=range]::-moz-range-track,.derived-stop input[type=range]::-moz-range-track{height:8px;border:0;border-radius:999px;background:#bf7b3038}.slider-wrap input[type=range]::-moz-range-thumb,.derived-stop input[type=range]::-moz-range-thumb{width:20px;height:20px;border:3px solid #fffdf8;border-radius:50%;background:#bf7b30;box-shadow:0 6px 16px #91682c2e}.slider-wrap input[type=range]:focus,.derived-stop input[type=range]:focus{transform:none}.slider-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.slider-meta strong{font-size:1rem;color:var(--text-strong)}.slider-meta small{color:var(--muted);font-size:.85rem}.action-row{margin-top:22px}.calculate-button,.close-button{width:100%;border:0;border-radius:22px;padding:17px 20px;color:#fffdfa;font-weight:700;letter-spacing:.06em;background:#1f1914;box-shadow:inset 0 1px #ffffff14,0 16px 26px #1f191429;cursor:pointer;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}.calculate-button:hover,.close-button:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:inset 0 1px #ffffff1a,0 20px 34px #1f19142e}.calculate-button:active,.close-button:active{transform:translateY(0);box-shadow:inset 0 2px 4px #ffffff0d,0 10px 18px #1f191424}.calculate-button:disabled{cursor:not-allowed;filter:grayscale(.2);opacity:.55;transform:none}.summary{margin-top:16px;padding:14px 16px;border:1px solid rgba(126,101,74,.1);background:#ffffff80;border-radius:18px;box-shadow:var(--shadow-soft)}.summary.slim p{font-size:.92rem}.summary p{margin:0;color:#5c4a39;line-height:1.55}.modal-backdrop{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:#4938231f;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:1000}.modal-card{position:relative;width:min(620px,100%);padding:30px;border-radius:30px;background:#fffdf9fa;border:1px solid rgba(126,101,74,.1);box-shadow:0 30px 60px #3a2c1c24;z-index:1001}.modal-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:999px;display:grid;place-items:center;padding:0;color:#6d5131;background:#241c130d;cursor:pointer;transition:background .18s ease,transform .18s ease}.modal-close:hover{background:#241c1317;transform:rotate(90deg)}.modal-kicker{margin:0 0 8px;color:var(--accent-strong);letter-spacing:.2em;text-transform:uppercase;font-size:.74rem;font-weight:700}.modal-card h2{margin:0;font-size:1.65rem;color:var(--text-strong)}.modal-quantity{margin-top:16px;font-family:SF Pro Display,Avenir Next,PingFang SC,sans-serif;font-size:clamp(3.6rem,9vw,5.6rem);font-weight:700;line-height:.92;letter-spacing:-.05em;color:var(--text-strong)}.modal-unit{margin:10px 0 0;color:var(--muted)}.modal-grid{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.modal-grid.simple{margin-top:18px}.modal-metric{display:grid;gap:8px;padding:16px;border-radius:20px;background:#faf7f2eb;border:1px solid rgba(126,101,74,.08)}.modal-metric span{color:var(--muted);font-size:.86rem;font-weight:600}.modal-metric strong{font-size:1.18rem}.close-button{margin-top:22px}@media(max-width:840px){.grid,.grid.compact,.modal-grid{grid-template-columns:1fr}.panel{padding:22px;border-radius:24px}}