/* The box is drawn in an x/y floor plane; positive z is its height.
   Body faces meet at x=0/w, y=0/d and z=0/h. The lid hinges at y=0. */
.box-experience{width:min(100%,510px);margin-inline:auto;--box-w:clamp(210px,61vw,268px);--box-d:calc(var(--box-w)*.68);--box-h:calc(var(--box-w)*.24);--box-ink:#173f32;--box-orange:#ee783f;--box-open-time:1100ms}
.box-scene{position:relative;width:100%;height:clamp(370px,100vw,450px);isolation:isolate}
.box3d-trigger{position:relative;display:block;width:100%;height:100%;min-width:44px;min-height:44px;padding:0;border:0;border-radius:28px;background:transparent;color:var(--box-ink);perspective:1100px;perspective-origin:50% 45%;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.box3d-trigger:focus-visible{outline:3px solid #be461c;outline-offset:3px;background:#ee783f08}
.box3d-model{position:absolute;left:50%;top:70.5%;display:block;width:var(--box-w);height:var(--box-d);transform:translate(-50%,-50%) rotateX(54deg) rotateZ(-25deg);transform-style:preserve-3d;transition:transform 550ms cubic-bezier(.2,.7,.2,1);pointer-events:none}
.box3d-model span{box-sizing:border-box;display:block}
.box3d-face,.box3d-rim,.box3d-tray,.box3d-lid,.box3d-lid-outside,.box3d-lid-inside,.box3d-lid-edge{position:absolute;transform-style:preserve-3d}
.box3d-face{border:3px solid var(--box-ink);backface-visibility:hidden}
.box3d-bottom{inset:0;background:#bd642f;transform:translateZ(0)}
.box3d-back{left:0;top:0;width:var(--box-w);height:var(--box-h);background:#bb6537;transform-origin:50% 0;transform:rotateX(90deg)}
.box3d-left{left:0;top:0;width:var(--box-h);height:var(--box-d);background:#ce672f;transform-origin:0 50%;transform:rotateY(-90deg)}
.box3d-right{left:100%;top:0;width:var(--box-h);height:var(--box-d);background:linear-gradient(90deg,#f0a164,#e97a3d);transform-origin:0 50%;transform:translateZ(var(--box-h)) rotateY(90deg)}
.box3d-front{left:0;top:100%;width:var(--box-w);height:var(--box-h);background:linear-gradient(180deg,#f19a55,#ee7c40);transform-origin:50% 0;transform:translateZ(var(--box-h)) rotateX(-90deg);display:flex!important;align-items:center;justify-content:space-between;padding:0 17px;box-shadow:inset 0 5px 0 #173f320b}
.box3d-front-word{font-family:var(--font,'DM Sans',sans-serif);font-size:calc(var(--box-w)*.029);font-weight:800;letter-spacing:.17em}
.box3d-front-dot{width:9px;height:9px;border-radius:50%;background:var(--box-ink);box-shadow:-15px 0 0 #173f3240}
.box3d-rim{inset:0;border:9px solid #dcb77e;outline:3px solid var(--box-ink);outline-offset:-3px;transform:translateZ(var(--box-h));box-shadow:inset 0 0 0 2px #ae8450;pointer-events:none}
.box3d-tray{inset:8px;background:linear-gradient(135deg,#f5dfb8,#e2bd87);border:2px solid #b89160;transform:translateZ(calc(var(--box-h) - 10px));box-shadow:inset 0 0 15px #9b683527;overflow:hidden;border-radius:3px}
.box3d-rice{position:absolute;left:7%;top:11%;width:46%;height:76%;border-radius:44% 48% 42% 46%;background:radial-gradient(ellipse at 37% 28%,#fffbdf,#f5e7b9 70%,#d9c68e);box-shadow:3px 4px 0 #b78e5726,inset -3px -5px 0 #deca8b40;transform:rotate(-8deg) translateZ(3px)}
.box3d-grains{position:absolute;left:21%;top:22%;width:9px;height:3px;border-radius:5px;background:#fffdf1;transform:rotate(-30deg);box-shadow:17px 8px 0 #fffdf1,32px 14px 0 #fffdf1,46px 6px 0 #fff8db,4px 22px 0 #fffdf1,22px 30px 0 #fffdf1,41px 33px 0 #fffdf1,-4px 42px 0 #fffdf1,13px 49px 0 #fffdf1,33px 53px 0 #fffdf1,51px 47px 0 #fffdf1,23px 68px 0 #fff8db,43px 69px 0 #fff8db}
.box3d-herbs{position:absolute;left:36%;top:25%;width:4px;height:5px;background:#4e7131;border-radius:2px;transform:rotate(20deg);box-shadow:24px 9px 0 #5e7e38,-9px 28px 0 #4e7131,20px 36px 0 #5e7e38,37px 53px 0 #4e7131,4px 61px 0 #7b933e}
.box3d-chicken{position:absolute;left:51%;top:11%;width:42%;height:47%;transform:rotate(-13deg) translateZ(5px)}
.box3d-chicken>span{position:absolute;left:8%;width:85%;height:31%;border-radius:45% 43% 36% 47%;background:repeating-linear-gradient(100deg,transparent 0 12px,#85492070 13px 16px,transparent 17px 29px),linear-gradient(180deg,#efb45c,#c97932);border:1px solid #b56b2e;box-shadow:0 3px 1px #78512730,inset 0 2px 0 #ffe0a077}
.box3d-chicken>span:nth-child(1){top:0;transform:rotate(8deg);width:73%;left:15%}
.box3d-chicken>span:nth-child(2){top:31%;transform:rotate(1deg)}
.box3d-chicken>span:nth-child(3){top:62%;transform:rotate(-6deg);width:79%}
.box3d-veggies{position:absolute;left:55%;top:63%;width:37%;height:29%;transform:translateZ(4px)}
.box3d-veggies>span{position:absolute;width:22%;aspect-ratio:1;border-radius:40%;background:#648a40;box-shadow:inset -3px -3px 0 #3b633a;transform:rotate(18deg)}
.box3d-veggies>span:nth-child(1){left:3%;top:3%;background:#48743d}
.box3d-veggies>span:nth-child(2){left:30%;top:13%;background:#eb8b3f;box-shadow:inset -2px -2px 0 #c76a30;border-radius:7px 3px 5px 3px}
.box3d-veggies>span:nth-child(3){left:61%;top:0;background:#71944b}
.box3d-veggies>span:nth-child(4){left:8%;top:54%;background:#e5a145;box-shadow:inset -2px -2px 0 #c97e31;border-radius:5px 3px}
.box3d-veggies>span:nth-child(5){left:40%;top:60%;background:#547f3e}
.box3d-veggies>span:nth-child(6){left:75%;top:48%;width:17%;background:#d56539;box-shadow:inset -2px -2px 0 #a74b2d;border-radius:50%}
.box3d-veggies>span:nth-child(7){left:43%;top:-9%;width:12%;border-radius:50%;background:#87a653;box-shadow:inset -1px -2px 0 #577b39}
.box3d-lemon{position:absolute;left:39%;top:6%;width:18%;height:21%;border-radius:100% 100% 8px 8px;background:repeating-conic-gradient(from -90deg at 50% 100%,#f3c75a 0 26deg,#fff3ba 27deg 30deg);border:3px solid #f8df78;border-bottom:2px solid #fff0a5;transform:rotate(29deg) translateZ(8px);box-shadow:0 2px 3px #9b703331}
.box3d-lid{left:-2px;top:-2px;width:calc(var(--box-w) + 4px);height:calc(var(--box-d) + 4px);transform-origin:50% 0;transform:translateZ(calc(var(--box-h) + 4px));transition:transform var(--box-open-time) cubic-bezier(.19,.7,.23,1);will-change:transform}
.box3d-lid-outside,.box3d-lid-inside{inset:0;display:flex!important;flex-direction:column;align-items:center;justify-content:center;border:4px solid var(--box-ink);border-radius:5px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.box3d-lid-outside{background:linear-gradient(140deg,#ffae6b,#f3904d 58%,#ee783f);box-shadow:inset 0 0 0 5px #f7b177,inset 0 0 0 6px #173f321b;transform:translateZ(1px)}
.box3d-lid-note{font-family:var(--font,'DM Sans',sans-serif);font-size:calc(var(--box-w)*.024);font-weight:800;letter-spacing:.12em;margin-bottom:12px}
.box3d-wordmark{font-family:var(--display,'Fraunces',Georgia,serif);font-size:calc(var(--box-w)*.14);font-weight:700;letter-spacing:-.06em;line-height:1.05}
.box3d-wordmark>span{display:inline;color:#fff6dc}
.box3d-smile{position:relative;width:49px;height:30px;margin-top:9px;margin-bottom:9px}
.box3d-smile>span:nth-child(1),.box3d-smile>span:nth-child(2){position:absolute;top:0;width:12px;height:8px;border:3px solid var(--box-ink);border-bottom:0;border-radius:12px 12px 0 0}
.box3d-smile>span:nth-child(1){left:2px;transform:rotate(-8deg)}
.box3d-smile>span:nth-child(2){right:2px;transform:rotate(8deg)}
.box3d-smile>span:nth-child(3){position:absolute;left:12px;top:11px;width:26px;height:15px;border:3px solid var(--box-ink);border-top:0;border-radius:0 0 25px 25px}
.box3d-lid-tagline{font-family:var(--font,'DM Sans',sans-serif);font-size:calc(var(--box-w)*.032);font-weight:650;letter-spacing:.025em}
.box3d-lid-inside{background:linear-gradient(135deg,#f6dfb3,#e8c38d);box-shadow:inset 0 0 0 7px #dfbd89;transform:rotateX(180deg) translateZ(1px)}
.box3d-lid-inside>span:first-child{max-width:72%;font-family:var(--display,'Fraunces',Georgia,serif);font-size:calc(var(--box-w)*.073);font-weight:600;line-height:1.1;letter-spacing:-.04em}
.box3d-inside-spark{font-family:Georgia,serif;font-size:29px;color:#a64d26;margin:5px 0;line-height:1}
.box3d-lid-inside>span:last-child{font-family:var(--font,'DM Sans',sans-serif);font-size:calc(var(--box-w)*.025);letter-spacing:.15em;font-weight:800}
.box3d-lid-edge{left:0;top:100%;height:7px;width:100%;background:#d4793e;border:2px solid var(--box-ink);transform-origin:50% 0;transform:translateZ(1px) rotateX(-90deg);backface-visibility:hidden}
.box3d-shadow{position:absolute;display:block;left:50%;top:75%;width:72%;height:21%;border-radius:50%;background:radial-gradient(ellipse,#754d2936 0,#754d2917 40%,transparent 71%);transform:translate(-50%,-50%) rotate(-10deg);filter:blur(9px);pointer-events:none;transition:opacity var(--box-open-time)}
.box3d-invitation{position:absolute;left:50%;bottom:0;display:flex;align-items:center;gap:6px;transform:translateX(-50%) rotate(-6deg);pointer-events:none;white-space:nowrap;transition:opacity 220ms,transform 400ms}
.box3d-invitation svg{width:45px;height:32px;fill:none;stroke:#be461c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:translateY(-7px)}
.box3d-invitation>span{font-family:var(--display,'Fraunces',Georgia,serif);font-size:23px;font-weight:600;letter-spacing:-.04em;color:var(--box-ink)}
.box3d-help{max-width:310px;margin:12px auto 0;text-align:center;font-family:var(--font,'DM Sans',sans-serif);font-size:12px;line-height:1.7;color:#647269}
.box-scene.is-opening .box3d-lid,.box-scene.is-open .box3d-lid{transform:translateZ(calc(var(--box-h) + 4px)) rotateX(108deg)}
.box-scene.is-opening .box3d-invitation,.box-scene.is-open .box3d-invitation{opacity:0;transform:translate(-50%,8px) rotate(-6deg)}
.box-scene.is-opening .box3d-shadow,.box-scene.is-open .box3d-shadow{opacity:.75}
.box-scene.is-open .box3d-trigger{cursor:default}
@media(hover:hover) and (pointer:fine){.box-scene:not(.is-opening):not(.is-open) .box3d-trigger:hover .box3d-model{transform:translate(-50%,-50%) rotateX(52deg) rotateZ(-25deg) translateZ(5px)}.box-scene:not(.is-opening):not(.is-open) .box3d-trigger:hover .box3d-lid{transform:translateZ(calc(var(--box-h) + 4px)) rotateX(3deg)}}
@media(max-width:360px){.box3d-lid-note{letter-spacing:.06em}.box3d-invitation>span{font-size:21px}.box3d-help{font-size:11px;max-width:260px}}
@media(prefers-reduced-motion:reduce){.box3d-model,.box3d-lid,.box3d-shadow,.box3d-invitation{transition:none!important}.box-scene:not(.is-opening):not(.is-open) .box3d-trigger:hover .box3d-model{transform:translate(-50%,-50%) rotateX(54deg) rotateZ(-25deg)}.box-scene:not(.is-opening):not(.is-open) .box3d-trigger:hover .box3d-lid{transform:translateZ(calc(var(--box-h) + 4px))}}

@media(min-width:1001px){.box-experience{--box-w:330px}.box3d-model{top:62%}.box3d-shadow{top:70%}}
@media(max-width:600px){.box-scene{height:270px}.box3d-model{top:58%}.box3d-shadow{top:70%}.box3d-invitation{bottom:0}.box3d-help{margin-top:8px}}