@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#e9e7e2;color:#22211f}body{font-family:Arial,sans-serif}.browserbar{height:40px;background:#f8f7f5;border-bottom:1px solid #d8d5cf;display:flex;align-items:center;padding:0 12px;font-size:13px}.browserbar span{margin-left:28px;color:#777}.browserbar nav{margin-left:auto;display:flex;gap:6px}.browserbar button{background:#fff;border:1px solid #ddd9d2;border-radius:7px;padding:5px 9px}.layout{}.stage,main{height:calc(100vh - 40px)}main{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 53%,#fbfaf8 0,#efede8 62%,#e5e3de 100%)}.intro{position:absolute;z-index:5;left:38px;top:41px}.kicker,.panel label,.live,.help b,.stats small,.note,.inside,.panel-title{font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:.14em}.kicker{font-size:10px;color:#696761;margin-bottom:20px}.intro h1{font:400 86px/.78 'Playfair Display',Georgia,serif;letter-spacing:-.055em;margin:0 0 23px}.intro h1 em{margin-left:39px}.intro p{font:16px/1.45 'Playfair Display',Georgia,serif;color:#77736c}.stage{position:absolute;inset:0 335px 0 0}#scene{position:absolute;inset:0 0 90px;width:100%;height:calc(100% - 90px);touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.live{position:absolute;right:7px;top:2px;border:1px solid #c7c4bd;padding:7px 10px;font-size:9px;color:#666;z-index:6}.live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#478a56;margin-right:7px}.help{position:absolute;left:27px;bottom:93px;max-width:620px;font:14px/1.42 'Playfair Display',serif;color:#4d4a45}.help b{font-size:9px;margin-right:5px}.help em{font-style:italic}.stats{position:absolute;left:27px;bottom:25px;height:59px;display:flex;border-top:1px solid #bbb8b1;border-bottom:1px solid #bbb8b1}.stats div{width:105px;padding:9px 12px 4px 0;border-right:1px solid #c7c4bd}.stats div+div{padding-left:14px}.stats small{display:block;font-size:8px;color:#777;margin-bottom:5px}.stats strong{font:400 16px 'DM Mono'}.stats sup{font-size:8px;color:#777;margin-left:3px}.note{position:absolute;left:27px;bottom:4px;font-size:8px;letter-spacing:0;text-transform:none;color:#8a8780}.panel{position:absolute;right:35px;top:100px;width:255px;border:1px solid #c7c4bd;padding:20px;background:rgba(239,237,232,.67);z-index:10}.panel-title{display:flex;justify-content:space-between;border-bottom:1px solid #c7c4bd;padding-bottom:13px;margin-bottom:18px;font-size:10px}.panel-title i{font:13px 'Playfair Display';letter-spacing:0}.panel>label{display:block;font-size:9px;color:#706d67;margin-bottom:11px}.seg{display:grid;grid-template-columns:1fr 1fr;margin-bottom:18px}.seg button{height:38px;border:1px solid #aaa7a0;background:transparent}.seg .on{background:#252421;color:#fff;border-color:#252421}.varieties{display:flex;gap:10px;margin-bottom:18px}.var{width:66px;height:66px;border:1px solid #aaa7a0;background:transparent;padding:7px 6px;text-align:left}.var.active{border-color:#666}.var span{display:block;height:27px;margin-bottom:5px}.cr{background:linear-gradient(#3d713a 0 22%,#f1efce 22% 31%,#cc2940 31%)}.go{background:linear-gradient(#3d713a 0 22%,#f1efce 22% 31%,#dfa30d 31%)}.ro{background:linear-gradient(#3d713a 0 22%,#f1efce 22% 31%,#d26d82 31%)}.var i{font:11px 'Playfair Display'}.sliderTitle{display:flex;justify-content:space-between;margin-top:14px}.sliderTitle label{margin:0}.sliderTitle output{font:10px 'DM Mono'}.panel input[type=range]{width:100%;accent-color:#777;margin-top:10px}.sliderNotes{display:flex;justify-content:space-between;color:#97938c;font:11px 'Playfair Display'}.buttons{display:grid;grid-template-columns:1fr 60px;gap:7px;margin-top:17px}.buttons button,.pause{height:38px;border:1px solid #aaa7a0;background:transparent}.checks{display:flex;justify-content:space-between;margin:13px 0;font:9px 'DM Mono';letter-spacing:.1em}.checks input{appearance:none;width:12px;height:12px;border:1px solid #777;vertical-align:-2px;margin-right:5px}.checks input:checked{background:#252421;box-shadow:inset 0 0 0 3px #eceae5}.pause{width:100%}.inside{position:absolute;right:35px;bottom:0;width:300px;border:1px solid #c7c4bd;padding:14px;font-size:9px;color:#777}.inside b{float:right;font:15px Arial}@media(max-width:900px){body{overflow:auto}main{height:auto;min-height:100vh}.intro{position:relative;left:auto;top:auto;padding:25px 20px}.stage{position:relative;inset:auto;height:600px}.panel{position:relative;top:auto;right:auto;margin:0 20px;width:auto}.inside{display:none}}