:root{--w: 460px;--h: 300px;--r: 18px;--bg1: #071028;--bg2: #0b1f44;--paper: #fffaf2;--paper2: #fff3df;--red1: #b10f2e;--red2: #7a001b;--gold1: #ffd36b;--gold2: #c99b2c;--ink: #1b1b1b;--introDur: 4.6s;--introEase: cubic-bezier(.18, .88, .22, 1);--deliverAt: .58;--gripY: 10px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;display:grid;place-items:center;background:radial-gradient(1200px 600px at 30% 20%,rgba(255,255,255,.08),transparent 55%),radial-gradient(900px 500px at 70% 80%,rgba(255,255,255,.06),transparent 60%),linear-gradient(160deg,var(--bg1),var(--bg2));color:#fff;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";overflow:hidden}body.locked #snow,body.locked .wrap{opacity:0;pointer-events:none;-webkit-user-select:none;user-select:none}#gate{position:fixed;inset:0;display:grid;place-items:center;z-index:9999;background:radial-gradient(900px 500px at 30% 20%,rgba(255,255,255,.08),transparent 55%),radial-gradient(700px 450px at 70% 80%,rgba(255,255,255,.06),transparent 60%),linear-gradient(160deg,#071028fa,#0b1f44fa);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:opacity .35s ease,transform .35s ease}.macWindow{width:min(720px,94vw);height:min(480px,80vh);background:#060d1f;border-radius:12px;box-shadow:0 40px 100px #0009,0 0 0 1px #ffffff1a;display:flex;flex-direction:column;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;animation:popIn .4s cubic-bezier(.18,.89,.32,1.28)}@keyframes popIn{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.macTitleBar{height:38px;background:linear-gradient(to bottom,#1d2538,#151b2e);border-bottom:1px solid rgba(0,0,0,.4);display:flex;align-items:center;padding:0 16px;position:relative;flex-shrink:0}.macButtons{display:flex;gap:8px}.macBtn{width:12px;height:12px;border-radius:50%}.macBtn--red{background:#ff5f57;border:1px solid #e0443e;cursor:pointer}.macBtn--red:hover{background:#e0443e}.macBtn--yellow{background:#febc2e;border:1px solid #dba522}.macBtn--green{background:#28c840;border:1px solid #1aab29}.macWindowTitle{position:absolute;left:0;right:0;text-align:center;color:#ffffffb3;font-size:13px;font-weight:500;pointer-events:none}.macBody{flex:1;display:flex;position:relative;overflow:hidden}.macSidebar{width:220px;background:#0a142880;border-right:1px solid rgba(255,255,255,.08);padding:24px 20px;display:flex;flex-direction:column;flex-shrink:0}.sbHeader{font-size:14px;font-weight:600;color:#ffd36b;margin-bottom:30px;display:flex;align-items:center;gap:8px}.sbSectionTitle{font-size:11px;font-weight:700;color:#fff6;letter-spacing:.5px;margin-bottom:8px}.sbProgressContainer{height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;margin-bottom:8px}.sbProgressBar{height:100%;width:0%;background:#ffd36b;border-radius:3px;transition:width .4s ease}.sbProgressText{font-size:12px;color:#fff9}.sbTimer{font-family:monospace;font-size:24px;color:#ff5f57;text-align:center;padding:10px;background:#0003;border-radius:8px;border:1px solid rgba(255,95,87,.3);box-shadow:0 2px 10px #0003}.macContent{flex:1;padding:40px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at top right,rgba(255,255,255,.05),transparent 70%);position:relative}.gateTitle{font-size:32px;margin:20px 0 5px;color:#fff}.gateText{font-size:16px;line-height:1.5;color:#ffffffe6;margin-bottom:30px;background:transparent}.choices{display:grid;gap:12px}.choiceBtn{background:#ffffff14;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:14px 18px;color:#fff;text-align:left;font-size:14px;transition:all .2s ease;cursor:pointer}.choiceBtn:hover{background:#ffffff26;border-color:#fff6}.choiceBtn:active{transform:scale(.99)}.gateErr{margin:12px 0 0;min-height:18px;font-size:13px;opacity:.92;color:#ff5f57}.gateHint{margin:10px 0 0;font-size:12px;opacity:.65;font-style:italic}@media(max-width:600px){.macSidebar{display:none}.macContent{padding:20px}.macTitleBar{justify-content:space-between}.macWindowTitle{position:static;text-align:left;margin-left:10px}}.macWindow.shake{animation:shake .35s ease}#snow{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;transition:opacity .35s ease}.flake{position:absolute;top:-12vh;left:calc(var(--x) * 1vw);width:calc(var(--s) * 1px);height:calc(var(--s) * 1px);border-radius:999px;background:rgba(255,255,255,var(--o));box-shadow:0 0 calc(var(--blur) * 1px) #ffffff8c;transform:translate3d(0,-12vh,0);will-change:transform;animation:fall calc(var(--d) * 1s) linear infinite;animation-delay:calc(var(--delay) * 1s);filter:blur(calc(var(--fblur) * 1px))}@keyframes fall{0%{transform:translate3d(0,-12vh,0) rotate(0)}to{transform:translate3d(calc(var(--dx) * 1vw),112vh,0) rotate(360deg)}}body:not(.delivered) .scene{pointer-events:none}.wrap{position:relative;z-index:1;display:grid;gap:14px;place-items:center;padding:24px;transition:opacity .35s ease}body.start-intro:not(.intro-done) .wrap{animation:introDrop var(--introDur) var(--introEase) 1 both}body.start-intro:not(.intro-done) .scene{animation:scenePop var(--introDur) var(--introEase) 1 both}@keyframes introDrop{0%{transform:translate3d(0,-130vh,0) rotate(-10deg) rotateX(7deg)}26%{transform:translate3d(0,-24vh,0) rotate(3deg) rotateX(4deg)}40%{transform:translateZ(0) rotate(0) rotateX(0)}45%{transform:translate3d(0,10px,0) rotate(.7deg)}49%{transform:translate3d(0,-6px,0) rotate(-.5deg)}53%{transform:translate3d(0,3px,0) rotate(.25deg)}58%{transform:translateZ(0) rotate(0)}to{transform:translateZ(0) rotate(0)}}@keyframes scenePop{0%{transform:scale(.92);opacity:.86;filter:blur(.2px)}33%{transform:scale(1.01);opacity:1;filter:blur(0px)}46%{transform:scale(.995)}55%{transform:scale(1)}to{transform:scale(1)}}.introBot{position:absolute;inset:0;z-index:10;pointer-events:none;overflow:visible}body.intro-done .introBot{display:none}.introBotMove{position:absolute;inset:0;transform-origin:50% var(--gripY)}body.start-intro:not(.intro-done) .introBotMove{animation:armMove var(--introDur) var(--introEase) 1 both}.introBotSway{position:absolute;inset:0;transform-origin:50% var(--gripY)}body.start-intro:not(.intro-done) .introBotSway{animation:armSway var(--introDur) ease-in-out 1 both}@keyframes armMove{0%{transform:rotate(-16deg) rotateX(12deg);opacity:1}18%{transform:rotate(-10deg) rotateX(8deg)}40%{transform:rotate(0) rotateX(0)}55%{transform:rotate(0) rotateX(0)}to{transform:translate3d(0,-155vh,0) rotate(0) rotateX(0);opacity:.98}}@keyframes armSway{0%{transform:rotate(3deg) rotateX(8deg)}18%{transform:rotate(-1.6deg) rotateX(6deg)}34%{transform:rotate(1deg) rotateX(4deg)}44%{transform:rotate(-1.2deg) rotateX(2deg)}48%{transform:rotate(.8deg) rotateX(1.5deg)}58%{transform:rotate(0) rotateX(0)}to{transform:rotate(0) rotateX(0)}}.armColumn{position:absolute;left:50%;top:calc(var(--gripY) - 140vh);width:54px;height:140vh;transform:translate(-50%);border-radius:16px;background:linear-gradient(90deg,#0f0f12,#6f6f77 18%,#1a1a1f 38%,#8b8b95 60%,#141418);border:2px solid rgba(0,0,0,.85);box-shadow:0 24px 70px #0000008c;overflow:hidden;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}.armColumn:before{content:"";position:absolute;inset:8px;border-radius:12px;background:repeating-linear-gradient(0deg,#ffffff1a 0 10px,#0000001a 10px 20px);opacity:.35;mix-blend-mode:overlay}.armHead{position:absolute;left:50%;top:calc(var(--gripY) - 92px);transform:translate(-50%);width:176px;height:64px;border-radius:18px;background:linear-gradient(180deg,#3a3a42,#141418);border:2px solid rgba(0,0,0,.85);box-shadow:0 20px 40px #00000073;overflow:hidden}.armHead:before{content:"";position:absolute;inset:0;background:radial-gradient(10px 10px at 16% 55%,rgba(0,0,0,.35),transparent 60%),radial-gradient(10px 10px at 84% 55%,rgba(0,0,0,.35),transparent 60%),linear-gradient(90deg,rgba(255,255,255,.08),transparent 40%,rgba(0,0,0,.12));opacity:.9;pointer-events:none}.rotor{position:absolute;left:50%;top:10px;width:46px;height:46px;transform:translate(-50%);border-radius:999px;background:conic-gradient(from 0deg,#ffffff14 0 10%,#0000002e 10% 20%,#ffffff14 20% 30%,#0000002e 30% 40%,#ffffff14 40% 50%,#0000002e 50% 60%,#ffffff14 60% 70%,#0000002e 70% 80%,#ffffff14 80% 90%,#0000002e 90% 100%);border:2px solid rgba(0,0,0,.55);box-shadow:inset 0 0 0 2px #ffffff0f;opacity:.85}body.start-intro:not(.intro-done) .rotor{animation:rotorSpin .9s linear infinite}@keyframes rotorSpin{to{transform:translate(-50%) rotate(360deg)}}.leds{position:absolute;right:14px;top:18px;display:flex;gap:8px;align-items:center}.led{width:10px;height:10px;border-radius:999px;box-shadow:0 0 0 2px #00000059;filter:drop-shadow(0 0 8px rgba(255,255,255,.18));opacity:.95}.led--red{background:radial-gradient(circle at 30% 30%,#ffb2b2,#ff2b2b 55%,#7a0000)}.led--green{background:radial-gradient(circle at 30% 30%,#b9ffd2,#27ff7b 55%,#005a2a);opacity:0}body.start-intro:not(.intro-done) .led--red{animation:ledRed var(--introDur) linear 1 both}body.start-intro:not(.intro-done) .led--green{animation:ledGreen var(--introDur) linear 1 both}@keyframes ledRed{0%,50%{opacity:.95}56%,to{opacity:0}}@keyframes ledGreen{0%,50%{opacity:0}56%,to{opacity:.95}}.wrist{position:absolute;left:50%;top:calc(var(--gripY) - 24px);width:54px;height:18px;transform:translate(-50%);border-radius:12px;background:linear-gradient(180deg,#595966,#1a1a1f);border:2px solid rgba(0,0,0,.85);box-shadow:0 10px 18px #00000059;z-index:11}.gripper{--contactY: 92px;position:absolute;left:50%;top:calc(var(--gripY) - var(--contactY));width:190px;height:140px;transform:translate(-50%);z-index:12;filter:drop-shadow(0 18px 20px rgba(0,0,0,.35))}.hose{position:absolute;left:50%;top:8px;width:110px;height:18px;transform:translate(-50%);border-radius:999px;background:linear-gradient(90deg,#19191ef2,#6e6e78f2,#19191ef2);border:2px solid rgba(0,0,0,.7);box-shadow:inset 0 6px 8px #ffffff0f}.stem{position:absolute;left:50%;top:26px;width:40px;height:48px;transform:translate(-50%);border-radius:14px;background:linear-gradient(180deg,#4b4b55,#17171c);border:2px solid rgba(0,0,0,.85);box-shadow:inset 0 10px 14px #ffffff0f}.gimbal{position:absolute;left:50%;top:70px;width:54px;height:24px;transform:translate(-50%);border-radius:999px;background:linear-gradient(180deg,#60606c,#1a1a1f);border:2px solid rgba(0,0,0,.8);box-shadow:inset 0 10px 12px #ffffff0d}.cup{position:absolute;left:50%;top:calc(var(--contactY) - 34px);width:86px;height:34px;transform:translate(-50%);transform-origin:50% 100%;border-radius:10px 10px 50px 50px;background:radial-gradient(closest-side at 50% 20%,rgba(255,255,255,.22),transparent 65%),linear-gradient(180deg,#2a2a32,#0d0d12);border:2px solid rgba(0,0,0,.88);box-shadow:inset 0 10px 16px #ffffff0d,inset 0 -12px 18px #00000059}.cup:before{content:"";position:absolute;left:50%;top:7px;width:60px;height:18px;transform:translate(-50%);border-radius:8px 8px 40px 40px;background:radial-gradient(closest-side at 50% 70%,rgba(0,0,0,.55),transparent 75%),linear-gradient(180deg,#ffffff14,#00000038);box-shadow:inset 0 -8px 12px #00000059;opacity:.9}.sealRing{position:absolute;left:50%;top:calc(var(--contactY) - 6px);width:94px;height:16px;transform:translate(-50%);border-radius:999px;background:radial-gradient(closest-side,#ffffff2e,#0000);opacity:0;filter:blur(.2px);mix-blend-mode:screen;pointer-events:none}body.start-intro:not(.intro-done) .cup{animation:cupAction var(--introDur) var(--introEase) 1 both}body.start-intro:not(.intro-done) .sealRing{animation:sealAction var(--introDur) linear 1 both}@keyframes cupAction{0%,36%{transform:translate(-50%) translateY(0) scaleY(1) scaleX(1)}41%{transform:translate(-50%) translateY(6px) scaleY(.78) scaleX(1.06)}54%{transform:translate(-50%) translateY(6px) scaleY(.8) scaleX(1.05)}58%{transform:translate(-50%) translateY(-14px) scaleY(1) scaleX(.98)}to{transform:translate(-50%) translateY(-14px) scaleY(1) scaleX(.98)}}@keyframes sealAction{0%,38%{opacity:0;transform:translate(-50%) scaleX(.85)}42%{opacity:.55;transform:translate(-50%) scaleX(1)}54%{opacity:.35;transform:translate(-50%) scaleX(1)}58%{opacity:0;transform:translate(-50%) scaleX(1.08)}to{opacity:0}}.scene{position:relative;width:min(var(--w),92vw);height:calc(min(var(--w),92vw) * (var(--h) / var(--w)));perspective:1400px;perspective-origin:50% 45%;z-index:1}.card{position:relative;width:100%;height:100%;transform-style:preserve-3d;border-radius:var(--r);transform:rotateX(6deg) rotateY(-10deg);transition:transform .6s cubic-bezier(.2,.7,.2,1);outline:none}.scene:hover .card,.card:focus-visible{transform:rotateX(2deg) rotateY(-4deg)}.base{position:absolute;inset:0;border-radius:var(--r);transform-style:preserve-3d;background:linear-gradient(145deg,#ffffff14,#ffffff08);box-shadow:0 40px 90px #0000008c,0 10px 25px #00000059}.base:before{content:"";position:absolute;inset:10px;border-radius:calc(var(--r) - 8px);transform:translateZ(-10px);background:linear-gradient(90deg,#00000059,#0000000d);filter:blur(.2px)}.pages{position:absolute;inset:0;border-radius:var(--r);transform:translateZ(2px);overflow:hidden;display:grid;grid-template-columns:1fr;background:linear-gradient(90deg,var(--paper2),var(--paper))}.page{position:relative;padding:18px 18px 16px;color:var(--ink);display:flex;align-items:center;justify-content:center}.page--left{background:radial-gradient(400px 260px at 30% 30%,rgba(177,15,46,.1),transparent 60%),radial-gradient(220px 220px at 70% 70%,rgba(255,211,107,.1),transparent 60%),linear-gradient(135deg,var(--paper2),var(--paper))}.page--full{background:radial-gradient(400px 260px at 30% 30%,rgba(177,15,46,.05),transparent 60%),radial-gradient(220px 220px at 70% 70%,rgba(255,211,107,.05),transparent 60%),linear-gradient(135deg,var(--paper2),var(--paper))}.page--left:after,.page--full:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,#b10f2e14 0 10px,#ffd36b14 10px 20px);opacity:.12;mix-blend-mode:multiply;pointer-events:none}.message{width:100%;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:4px;text-align:center}.message h2{margin:0;font-size:22px;letter-spacing:.2px}.message p{margin:0;font-size:15px;line-height:1.45;opacity:.9}.message .sig{margin-top:8px;font-weight:600;opacity:.9}.cover{position:absolute;inset:0;border-radius:var(--r);transform-style:preserve-3d;transform-origin:left center;transform:translateZ(14px) rotateY(0);transition:transform .9s cubic-bezier(.2,.7,.12,1);box-shadow:0 18px 40px #00000059,0 3px 10px #00000040}.scene:hover .cover,.card:focus-visible .cover{transform:translateZ(14px) rotateY(-155deg)}.face{position:absolute;inset:0;border-radius:var(--r);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;display:grid;place-items:center}.face--front{color:#fff;background:radial-gradient(800px 300px at 20% 20%,rgba(255,211,107,.22),transparent 55%),radial-gradient(600px 280px at 80% 75%,rgba(255,255,255,.1),transparent 60%),linear-gradient(145deg,var(--red1),var(--red2))}.face--front:before{content:"";position:absolute;inset:14px;border-radius:calc(var(--r) - 8px);border:1px solid rgba(255,211,107,.55);box-shadow:inset 0 0 0 2px #ffd36b1f;pointer-events:none}.ribbon{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 42%,rgba(255,211,107,.9) 42% 58%,transparent 58% 100%),linear-gradient(0deg,transparent 0 46%,rgba(255,211,107,.9) 46% 54%,transparent 54% 100%);opacity:.65;mix-blend-mode:screen;pointer-events:none}.coverTitle{text-align:center;padding:18px 16px;transform:translateZ(1px)}.face--back{transform:rotateY(180deg);color:var(--ink);background:radial-gradient(500px 220px at 20% 30%,rgba(177,15,46,.1),transparent 60%),linear-gradient(135deg,var(--paper2),var(--paper))}.face--back:before{content:"";position:absolute;inset:0;background:radial-gradient(12px 12px at 18% 22%,rgba(177,15,46,.14),transparent 65%),radial-gradient(10px 10px at 72% 30%,rgba(201,155,44,.14),transparent 65%),radial-gradient(14px 14px at 60% 78%,rgba(177,15,46,.12),transparent 65%),radial-gradient(9px 9px at 30% 70%,rgba(201,155,44,.12),transparent 65%);opacity:.7;pointer-events:none}.hingeShadow{position:absolute;left:0;top:0;bottom:0;width:18px;border-top-left-radius:var(--r);border-bottom-left-radius:var(--r);background:linear-gradient(90deg,rgba(0,0,0,.35),transparent);transform:translateZ(15px);pointer-events:none;opacity:.6}.scene:hover .hingeShadow,.card:focus-visible .hingeShadow{opacity:.25;transition:opacity .9s}@media(max-width:420px){:root{--w: 340px;--h: 240px}}@media(prefers-reduced-motion:reduce){.flake{animation:none!important}.card,.cover{transition:none!important}body.start-intro:not(.intro-done) .wrap,body.start-intro:not(.intro-done) .scene,body.start-intro:not(.intro-done) .introBotMove,body.start-intro:not(.intro-done) .introBotSway,body.start-intro:not(.intro-done) .cup,body.start-intro:not(.intro-done) .sealRing,body.start-intro:not(.intro-done) .rotor,body.start-intro:not(.intro-done) .led--red,body.start-intro:not(.intro-done) .led--green{animation:none!important}body:not(.delivered) .scene{pointer-events:auto}}html.quiz-passed #gate{display:none!important}html.quiz-passed body.locked{overflow:auto!important;pointer-events:auto!important;-webkit-user-select:auto!important;user-select:auto!important}html.quiz-passed body.locked #snow,html.quiz-passed body.locked .wrap{opacity:1!important;pointer-events:auto!important}.sbFooter{margin-top:auto;display:flex;flex-direction:column;gap:10px;width:100%}.macBtnRestart{background:#ff5f5733;border:1px solid rgba(255,95,87,.5);color:#ff5f57;border-radius:6px;padding:8px;font-size:13px;cursor:pointer;width:100%;transition:all .2s ease}.macBtnRestart:hover{background:#ff5f5759;border-color:#ff5f57}
