:root{--ivory:#f6f0e5;--gold:#dcae64;--ink:#120d09;--line:rgba(255,255,255,.14)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink);color:var(--ivory);font-family:Arial,sans-serif}button,input,a{font:inherit}button{color:inherit}#experience,#scene{position:fixed;inset:0;width:100%;height:100%}#scene{display:block;touch-action:none;background:radial-gradient(circle at 56% 44%,#382416,#120d09 62%)}
.topbar{position:fixed;z-index:30;inset:0 0 auto;height:88px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:linear-gradient(#120d09f2,#120d0990);backdrop-filter:blur(10px)}.brand{color:white;text-decoration:none;font-weight:950;font-size:22px;letter-spacing:-1px}.heading{text-align:center}.heading small,.intro>small,.recipe>small{color:var(--gold);font-size:9px;font-weight:900;letter-spacing:2.2px}.heading h1{margin:5px 0 0;font:500 25px/1 Georgia,serif}.tools{display:flex;gap:7px}.tools button{height:42px;min-width:42px;padding:0 12px;border:1px solid var(--line);background:#120d09b8;display:flex;align-items:center;gap:7px;cursor:pointer}.tools button b{font-size:17px}.tools button span{font-size:9px;letter-spacing:1px}.tools button:hover,.tools button.active{border-color:var(--gold);color:var(--gold)}
.intro{position:fixed;z-index:20;left:34px;top:132px;width:325px;padding:21px 23px 22px;border-left:2px solid var(--gold);background:linear-gradient(90deg,#120d09e8,#120d091a);backdrop-filter:blur(3px)}.intro h2{margin:10px 0 12px;font:500 39px/1 Georgia,serif}.intro p{margin:0;color:#bcb1a5;font-size:13px;line-height:1.55}.intro #fact{margin-top:19px;padding-top:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}.intro #fact b{font:italic 23px Georgia,serif;color:var(--gold)}.intro #fact span{font-size:10px;line-height:1.45;color:#ddd2c5}
.recipe{position:fixed;z-index:20;right:32px;top:135px;width:205px}.recipe>small{display:block;text-align:right;margin-bottom:9px}.recipe>div{display:flex;gap:11px;align-items:center;padding:12px 4px;border-top:1px solid var(--line)}.recipe i{width:24px;height:24px;flex:0 0 24px;border-radius:50%;box-shadow:inset 0 0 0 1px #fff3,0 3px 9px #0008}.recipe .almond{background:radial-gradient(circle at 35% 30%,#e9c99f,#b47642)}.recipe .melon{background:radial-gradient(circle at 35% 30%,#ffd26e,#bc7729)}.recipe .orange{background:radial-gradient(circle at 35% 30%,#f49438,#9d3514)}.recipe span{display:flex;flex-direction:column}.recipe b{font-size:11px}.recipe em{font:italic 10px Georgia,serif;color:#8e8276;margin-top:3px}
.maker{position:fixed;z-index:32;left:50%;bottom:31px;transform:translateX(-50%);width:min(680px,calc(100% - 50px));padding:15px 20px 17px;background:#120d09e8;border:1px solid var(--line);box-shadow:0 18px 45px #0009;backdrop-filter:blur(10px)}.maker-head{display:flex;justify-content:space-between;color:var(--gold);font-size:9px;font-weight:900;letter-spacing:1.7px}.maker-head b{font-size:11px}.maker input{--progress:0%;width:100%;height:22px;margin:7px 0 0;appearance:none;background:transparent;cursor:grab}.maker input::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--gold) var(--progress),#ffffff24 var(--progress))}.maker input::-moz-range-track{height:3px;background:#ffffff24}.maker input::-moz-range-progress{height:3px;background:var(--gold)}.maker input::-webkit-slider-thumb{appearance:none;width:19px;height:19px;margin-top:-8px;border-radius:50%;background:var(--ivory);border:5px solid var(--gold);box-shadow:0 0 0 4px #dcae6425}.maker input::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ivory);border:4px solid var(--gold)}.milestones{display:flex;justify-content:space-between;color:#756a60;font-size:7px;font-weight:800;letter-spacing:1px}.maker #auto{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);border:0;background:transparent;color:#bcae9e;font-size:8px;font-weight:900;letter-spacing:1.2px;cursor:pointer;white-space:nowrap}.maker #auto.active{color:var(--gold)}
.label{display:none;position:fixed;z-index:18;transform:translateY(-50%);pointer-events:none;align-items:center}.label.visible{display:flex}.label span{padding:7px 9px;background:#120d09e8;border:1px solid var(--line);font-size:8px;font-weight:900;letter-spacing:1.2px}.label i{display:block;width:48px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}.gesture,.credits{position:fixed;z-index:15;bottom:10px;color:#6e6257;font-size:8px}.gesture{left:29px}.credits{right:25px}#loading{position:fixed;z-index:100;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#120d09;transition:.6s opacity}#loading.done{opacity:0;pointer-events:none}#loading strong{font-size:25px}#loading span{margin:13px 0 17px;font:italic 22px Georgia,serif}#loading>div{width:230px;height:2px;background:#ffffff18}#loading i{display:block;width:0;height:100%;background:var(--gold);transition:.2s}
@media(max-width:900px){.recipe{display:none}.intro{left:15px;top:103px;width:min(310px,78vw);padding:15px 18px}.intro h2{font-size:29px}.tools button span{display:none}.tools button{padding:0;width:39px;min-width:39px;justify-content:center}.maker{bottom:48px}.gesture,.credits{display:none}.label span{font-size:7px}.label i{width:25px}}@media(max-width:560px){.topbar{height:68px;padding:0 13px}.brand{font-size:18px}.heading small{display:none}.heading h1{font-size:18px}.tools{gap:4px}.tools button{width:34px;min-width:34px;height:34px}.tools #reset{display:none}.intro{top:78px;width:82vw}.intro h2{font-size:25px}.intro p{font-size:11px}.intro #fact{margin-top:10px;padding-top:9px}.maker{bottom:25px;width:calc(100% - 20px);padding:13px 14px 15px}.milestones{font-size:6px}.maker #auto{bottom:-26px}.label{display:none!important}}