@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#383a31;font-synthesis:none;--accent:#728258;background:#f7f7f2;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline-offset:5px;outline:3px solid #839667}header{border-bottom:1px solid #dddfd5;align-items:center;gap:12px;height:94px;margin:0 4%;display:flex}.brand{color:#33382d;letter-spacing:-1px;align-items:center;font-size:24px;font-weight:700;text-decoration:none;display:flex}.brand-light{margin-left:5px;font-weight:400}.logo{color:#fff;text-align:center;background:#788764;border-radius:13px 13px 15px 6px;width:38px;height:40px;margin-right:11px;font-family:Georgia,serif;font-size:37px;line-height:34px}.header-note{letter-spacing:2px;color:#85897b;margin:auto;font-size:10px}.engine{color:#697956;border:1px solid #dce1d3;border-radius:25px;align-items:center;gap:7px;padding:8px 12px;font-size:10px;display:flex}i{display:inline-block}.engine i,.stage-bottom i{background:#8da575;border-radius:50%;width:6px;height:6px}main{grid-template-columns:minmax(0,1fr) 322px;gap:36px;max-width:1600px;margin:0 auto;padding:30px 4% 28px;display:grid}.stage{background:radial-gradient(at 52% 60%,#f0eee5 0%,#f4f3ed 48%,#f3f4ee 85%);border:1px solid #e6e7dd;border-radius:19px;min-height:690px;position:relative;overflow:hidden}.intro{z-index:2;pointer-events:none;position:absolute;top:32px;left:35px}.eyebrow{letter-spacing:2px;color:#808b70;font-size:9px;font-weight:700}h1{letter-spacing:-2px;margin:15px 0;font-family:Manrope,sans-serif;font-size:clamp(30px,3.4vw,49px);font-weight:500;line-height:1.18}h1 em{color:#798865;font-family:Georgia,serif;font-weight:400}p{color:#939588;font-size:12px}.intro p{margin:0}#viewport{touch-action:none;cursor:grab;position:absolute;inset:130px 0 45px}#viewport:active{cursor:grabbing}canvas{width:100%;height:100%;display:block}.flavor-tag{pointer-events:none;align-items:center;gap:10px;display:flex;position:absolute;bottom:107px;left:32px}.flavor-tag>span{background:#ed6375;border-radius:50%;width:7px;height:7px}.flavor-tag strong{font-size:11px;font-weight:500;display:block}.flavor-tag small{color:#9a9b91;margin-top:4px;font-size:9px;display:block}.interaction-hint{text-align:center;color:#898d80;pointer-events:none;width:100%;font-size:10px;position:absolute;bottom:49px}.interaction-hint span{color:#667455;margin-right:8px;font-size:20px}.interaction-hint b{color:#c3c6ba;margin:0 11px;font-weight:400}.stage-bottom{color:#929989;border-top:1px solid #e0e3d7;justify-content:space-between;align-items:center;height:36px;font-size:9px;display:flex;position:absolute;bottom:0;left:25px;right:25px}.stage-bottom i{width:5px;height:5px;margin-right:5px}button{color:inherit;background:0 0;border:0}.stage-bottom button{font-size:11px}.stage-bottom button span{margin-left:5px;font-size:9px}aside{padding:7px 0}.panel-heading{justify-content:space-between;align-items:center;margin-bottom:27px;display:flex}.panel-heading h2{letter-spacing:-.8px;margin:9px 0 0;font-family:Manrope,sans-serif;font-size:25px;font-weight:500}.panel-heading h2 span{color:#819266}.panel-heading button{color:#7f8872;border:1px solid #dfe2d7;border-radius:50%;width:31px;height:31px;font-size:20px}.controls-group{border-top:1px solid #dde0d4;padding:20px 0 18px}h3{color:#9ca48e;align-items:center;gap:10px;margin:0 0 21px;font-size:10px;font-weight:400;display:flex}h3>span:first-child{color:#4c5441;font-size:12px;font-weight:600}.tiny{letter-spacing:1px;color:#a0a694;margin-left:auto;font-size:7px}.flavors{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.flavor{color:#8c9181;border:1px solid #0000;border-radius:9px;padding:10px 1px 9px;font-size:9px}.flavor.active{color:#596846;background:#edf0e6;border-color:#cbd3bc}.flavor i{background:var(--swatch);border-radius:50%;width:27px;height:27px;margin:0 auto 9px;display:block;box-shadow:inset 0 2px 4px #ffffff70,inset 0 -3px 5px #00000012}.slider-row{margin:0 0 20px}.slider-label{justify-content:space-between;align-items:center;font-size:11px;display:flex}.slider-label output{font-variant-numeric:tabular-nums;color:#74825f;text-align:center;background:#edf0e6;border-radius:4px;min-width:36px;padding:4px 7px;font-size:10px}input[type=range]{appearance:none;background:linear-gradient(to right,#84946c 0%,#84946c var(--fill),#e0e4d8 var(--fill),#e0e4d8 100%);cursor:pointer;border-radius:4px;width:100%;height:4px;margin:15px 0 9px;display:block}input[type=range]::-webkit-slider-thumb{appearance:none;background:#75895b;border:3px solid #fafbf5;border-radius:50%;width:12px;height:12px;box-shadow:0 0 0 1px #b5bea6}.range-ends{color:#a0a695;justify-content:space-between;font-size:8px;display:flex}.slider-row:last-child{margin-bottom:0}.toggle-row{cursor:pointer;justify-content:space-between;align-items:center;margin-top:22px;font-size:11px;display:flex;position:relative}.toggle-row input{opacity:0;width:30px;height:20px;position:absolute;right:0}.switch{background:#dce1d2;border-radius:20px;width:29px;height:17px;padding:3px}.switch:before{content:"";background:#fff;border-radius:50%;width:11px;height:11px;transition:transform .2s;display:block}input:checked+.switch:before{transform:translate(12px)}input:focus-visible+.switch{outline:2px solid #728258}.jiggle{color:#fff;text-align:left;background:#778961;border-radius:9px;width:100%;margin-top:4px;padding:15px 18px;font-size:12px;box-shadow:0 3px 8px #596b4115}.jiggle:hover{background:#667c4e}.jiggle span{float:right;font-size:20px;line-height:16px}.recipe-note{text-align:center;margin:14px 0 0;font-size:9px}footer{color:#9ba08f;border-top:1px solid #dde0d4;justify-content:space-between;margin:0 4%;padding:20px 0;font-size:9px;display:flex}footer>span:last-child{letter-spacing:1.3px;font-size:8px}footer b{margin:0 9px;font-weight:400}.footer-star{color:#82916c;margin:0 17px}#error{background:#fff2e8;border-radius:12px;max-width:450px;padding:20px;font-size:13px;position:fixed;bottom:20px;left:20px}@media (width>=1500px){.stage{min-height:760px}}@media (width<=900px){main{grid-template-columns:minmax(0,1fr) 270px;gap:22px}.intro{left:23px}.header-note{display:none}.engine{margin-left:auto}.flavor-tag{bottom:95px}.interaction-hint{font-size:8px}.interaction-hint b{margin:0 5px}}@media (width<=680px){header{height:75px}main{grid-template-columns:1fr;padding-top:18px}.stage{min-height:600px}h1{font-size:37px}aside{padding:10px 7px}.header-note{display:none}.intro p{font-size:10px}.flavor-tag{bottom:100px}footer{gap:20px;font-size:8px}footer>span:last-child{letter-spacing:.4px;font-size:7px}.footer-star{margin:0 5px}.controls-group{padding:18px 0}.panel-heading{margin-bottom:20px}}@media (width>=681px){.panel-heading{margin-bottom:22px}.controls-group{padding:16px 0}h3{margin-bottom:16px}.slider-row{margin-bottom:14px}input[type=range]{margin-top:12px}.toggle-row{margin-top:18px}}.watermark{right:max(18px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:100;pointer-events:none;-webkit-user-select:none;user-select:none;color:#62734d;letter-spacing:2px;background:#f7f7f2e8;border:1px solid #d6ddcb;border-radius:8px;padding:8px 12px;font-size:11px;font-weight:800;position:fixed;box-shadow:0 2px 12px #3541260a}footer{padding-bottom:65px}.intro h1{letter-spacing:-1.4px;font-size:clamp(29px,3vw,44px)}.header-note{letter-spacing:1.3px}@media (width<=680px){.intro h1{font-size:33px}.interaction-hint{font-size:8px}.interaction-hint b{margin:0 4px}.watermark{right:12px;bottom:max(10px,env(safe-area-inset-bottom));font-size:10px}.brand{font-size:21px}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page:#f7f7f2;--text:#383a31;--muted:#707868;--line:#dce0d4;--surface:#edf0e6;--selected:#596846;--track:#dce2d3;--slider:#84946c;--thumb:#fafbf5;--stage:radial-gradient(ellipse at 52% 60%,#f0eee5 0%,#f4f3ed 48%,#f3f4ee 85%);--mark:#f7f7f2ed;--accent:#728258;background:var(--page);color:var(--text)}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page:#171d1a;--text:#e6ebdf;--muted:#acb6a6;--line:#364238;--surface:#29362c;--selected:#d5e6bc;--track:#3e4c40;--slider:#a2bd83;--thumb:#25332a;--stage:radial-gradient(ellipse at 52% 60%,#35433a 0%,#252f29 48%,#202822 85%);--mark:#202a23ed;--accent:#b2ca95}body{background:var(--page);color:var(--text)}.brand{color:var(--text)}header,.engine,.stage,.stage-bottom,.panel-heading button,.controls-group,footer,.watermark{border-color:var(--line)}.stage{background:var(--stage)}.header-note,.engine,.eyebrow,p,.flavor-tag small,.interaction-hint,.stage-bottom,.panel-heading button,h3,.tiny,.flavor,.range-ends,footer{color:var(--muted)}h3>span:first-child{color:var(--text)}h1 em,.interaction-hint span,.panel-heading h2 span,.footer-star{color:var(--accent)}.interaction-hint b{color:var(--muted)}.flavor.active{background:var(--surface);border-color:var(--slider);color:var(--selected)}.slider-label output{background:var(--surface);color:var(--selected)}input[type=range]{background:linear-gradient(to right,var(--slider) 0%,var(--slider) var(--fill),var(--track) var(--fill),var(--track) 100%)}input[type=range]::-webkit-slider-thumb{border-color:var(--thumb);background:var(--slider);box-shadow:0 0 0 1px var(--slider)}input[type=range]::-moz-range-thumb{border:3px solid var(--thumb);background:var(--slider);width:8px;height:8px;box-shadow:0 0 0 1px var(--slider);border-radius:50%}.switch{background:var(--track)}input:checked+.switch{background:var(--slider)}.watermark{background:var(--mark);color:var(--selected)}[data-theme=dark] .jiggle{color:#172012;background:#a8c48b}[data-theme=dark] .jiggle:hover{background:#bdd8a0}[data-theme=dark] #error{color:#ffdfca;background:#422e27}.theme-picker{border:1px solid var(--line);background:var(--surface);border-radius:22px;flex-shrink:0;gap:3px;padding:4px;display:flex}.theme-picker button{min-height:32px;color:var(--muted);white-space:nowrap;border-radius:18px;padding:6px 10px;font-size:10px}.theme-picker button span{margin-right:4px;font-size:14px}.theme-picker button[aria-pressed=true]{color:var(--selected);background:var(--page);box-shadow:0 1px 4px #00000012}.theme-picker button:hover{color:var(--text)}button:focus-visible,a:focus-visible,input:focus-visible{outline-color:var(--slider)}.engine{white-space:nowrap}.brand{flex-shrink:0}@media (width<=1150px){.header-note{display:none}.engine{margin-left:auto}}@media (width<=680px){header{flex-wrap:wrap;justify-content:space-between;gap:10px;height:auto;min-height:104px;padding:14px 0}.brand{order:0}.engine{order:1;margin-left:auto;padding:7px 8px;font-size:9px}.theme-picker{order:2;margin-left:auto}.theme-picker button{min-height:34px;padding:6px 12px}.intro h1{font-size:clamp(25px,7vw,33px)}.interaction-hint{padding:0 7px}.interaction-hint span{margin-right:3px}.interaction-hint b{margin:0 2px}}@media (prefers-reduced-motion:no-preference){body,.theme-picker,.theme-picker button,.watermark,.flavor,.slider-label output{transition:background-color .2s,color .2s,border-color .2s}}