*{box-sizing:border-box}body{margin:0;background:#f4f1e7;color:#173f3d;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid #c0cec3;background:#fffaf0;color:#173f3d;border-radius:9px;padding:11px 15px;font-weight:650}button:hover:not(:disabled){background:#e1f1e8;transform:translateY(-1px)}button:disabled{opacity:.48;cursor:default}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #dc7757;outline-offset:4px}main{max-width:1160px;margin:auto;padding:0 32px}header{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #cad4c9;gap:15px}.brand{font-weight:850;font-size:21px;letter-spacing:3px;text-decoration:none;color:inherit}header span{font-size:10px;letter-spacing:2px}.intro{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:38px 0 30px}.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:800}h1{font-family:Georgia,serif;font-weight:400;font-size:62px;letter-spacing:-2px;line-height:1.01;margin:14px 0}p{line-height:1.6}.intro p:not(.eyebrow){font-size:14px;color:#47655e}.levelbox{width:320px;border-left:1px solid #c7d0c4;padding-left:28px}.levelbox label{display:block;font-size:10px;letter-spacing:2px;margin-bottom:12px}.levelbox select{width:100%;background:#fffaf0;border:1px solid #b9c7b9;padding:12px;border-radius:7px;color:#173f3d;font-weight:700}.levelbox p{min-height:44px}#stars{font-size:20px;letter-spacing:6px;color:#ad633c}.workbench{background:linear-gradient(#e3ece4e8,#edf1e9ef),url('atelier.webp') center/cover;border:1px solid #abc0b2;border-radius:18px;overflow:hidden;box-shadow:0 15px 40px #173f3d12;position:relative}.bar{background:#173f3d;color:#eaf0da;display:flex;justify-content:space-between;padding:16px 22px;font-size:12px;letter-spacing:1px}.play{display:grid;grid-template-columns:1.08fr 1fr;gap:34px;padding:28px;min-height:290px}.ribbons{display:flex;gap:12px;align-items:stretch}.ribbon{background:#fffdf4ed;flex:1;min-width:0;border:2px solid transparent;border-radius:12px;padding:14px 10px;text-align:center;box-shadow:0 4px 15px #173f3d10}.ribbon.selected{border-color:#236b5b}.ribbon h3{margin:5px 0;font-size:14px}.strip{height:95px;display:flex;align-items:center;justify-content:center;margin:9px auto;width:34px;border-radius:7px;border:3px solid #b48b58;background:repeating-linear-gradient(0deg,#d8d7b1 0 7px,#b6bfa7 7px 10px);transition:all .25s;box-shadow:3px 3px 0 #173f3d15}.ribbon[data-phase="1"] .strip{height:115px;margin:0 auto;background:repeating-linear-gradient(0deg,#e9a77a 0 9px,#bc7254 9px 11px)}.ribbon[data-phase="2"] .strip{height:115px;margin:0 auto}.ribbon[data-phase="3"] .strip{background:repeating-linear-gradient(0deg,#b5e8e1 0 7px,#63b9c2 7px 10px);box-shadow:0 0 23px #6fd6e3}.ribbon .state{font-size:11px;height:19px;margin:7px 0;color:#4f675e}.ribbon .charge{font-size:11px;margin:8px 0}.ribbon button{font-size:12px;padding:10px 5px;width:100%}.ribbon .units{font-family:Georgia,serif;font-size:22px}.orders{padding:5px 0}#cups{display:flex;gap:12px;flex-wrap:wrap}.cup{flex:1;min-width:105px;background:#fffaf1ed;border-radius:11px;padding:16px 10px;text-align:center;border:1px solid #c3d0bc}.scoop{width:58px;height:48px;border-radius:50% 50% 12% 12%;margin:8px auto -3px;background:radial-gradient(circle at 30% 30%,#ffdfba,#f2ac80);box-shadow:inset -8px -6px 0 #b5614b13}.cup:nth-child(2) .scoop{background:radial-gradient(circle at 30% 30%,#c5c1ee,#9484bb)}.cup:nth-child(3) .scoop{background:radial-gradient(circle at 30% 30%,#cfebc7,#8fb7a2)}.dish{width:48px;height:24px;border-radius:0 0 20px 20px;background:#d5e3d7;margin:0 auto 15px;border-bottom:4px solid #86a395}.cup.done{background:#dcebdd}.cup.done .scoop{box-shadow:0 0 14px #ffffff;filter:saturate(.65)}.cup h3{font-size:12px;font-weight:600;margin:4px 0}.cup strong{display:block;font:32px Georgia,serif;margin:6px 0}.cup button{width:100%;font-size:12px;padding:10px 4px}.cup small{font-size:10px}#notice{min-height:28px;margin:0 24px 14px;font-size:13px;color:#204e42}.tools{display:flex;gap:10px;padding:0 24px 22px;flex-wrap:wrap}.tools button{background:#ffffffb0;font-size:12px}#next{background:#194e42;color:white;margin-left:auto}kbd{font-size:10px;opacity:.55;margin-left:4px}.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin:28px 0}.legend b{display:block;font-size:10px;letter-spacing:1.5px}.legend span{display:block;font-size:12px;color:#5a7164;line-height:1.6;margin-top:8px}footer{border-top:1px solid #cbd3c7;padding:22px 0 30px;font-size:10px;color:#687c70}footer a{color:inherit}footer span{float:right}dialog{max-width:550px;width:calc(100% - 30px);padding:30px;border:1px solid #aabcab;border-radius:16px;background:#fffaf0;color:#173f3d;box-shadow:0 30px 100px #0005}dialog::backdrop{background:#123e3c88;backdrop-filter:blur(5px)}dialog h2{font:30px Georgia,serif}dialog p,dialog li{font-size:14px;line-height:1.65}dialog .small{font-size:11px;color:#5e7467}#close{float:right;padding:2px 10px;font-size:24px}#begin{background:#173f3d;color:#fffaf0}@media(max-width:740px){main{padding:0 15px}header{height:70px}header span{display:none}.brand{font-size:17px}.intro{gap:18px;padding:25px 0;align-items:start}h1{font-size:43px}.intro p:not(.eyebrow){font-size:12px}.levelbox{width:42%;padding-left:15px}.levelbox label{letter-spacing:1px;font-size:9px}.levelbox select{font-size:12px;padding:8px}.levelbox p{font-size:11px!important}.play{grid-template-columns:1fr;padding:18px;gap:20px}.ribbon{padding:12px 10px}.strip{height:65px}.ribbon[data-phase="1"] .strip,.ribbon[data-phase="2"] .strip{height:85px}.legend{grid-template-columns:1fr 1fr;gap:16px}.tools{padding:0 18px 18px}footer span{display:block;float:none;margin-top:10px}.bar{padding:13px 18px;font-size:10px}#stars{font-size:16px;letter-spacing:3px}.cup{padding:12px 7px}#notice{margin:0 18px 12px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.intro{background:linear-gradient(90deg,#f4f1e7 22%,#f4f1e77a 55%,#f4f1e7 95%),url('atelier.webp') center 62%/cover;border-radius:16px}.levelbox{background:#f4f1e7de;border-radius:10px;padding-top:16px;padding-bottom:10px}.workbench{background:linear-gradient(#e3ece4b8,#edf1e9e0),url('atelier.webp') center/cover}