@import url('fonts.css');
*{box-sizing:border-box}:root{font-family:'DM Sans',Arial,sans-serif;color:#30283f}body{margin:0;background:#e8eaf0;overflow:hidden}.backdrop{position:fixed;inset:-8px;z-index:-1;background:linear-gradient(#f3f4f7b0,#eeedf3c2),url('../images/background.webp') center/cover;filter:blur(3px)}main{height:100svh;display:flex;flex-direction:column;align-items:center;padding:2.2vh 3vw 1.5vh;gap:1.7vh}header{text-align:center;flex-shrink:0}.eyebrow{font-size:10px;letter-spacing:.28em;font-weight:800;color:#80748d}h1{font:700 clamp(26px,4.3vh,48px)/1.1 'Outfit',Arial,sans-serif;letter-spacing:-.04em;margin:6px 0 8px}header p{font-size:clamp(13px,1.75vh,20px);margin:0;color:#6b6177}.machine{position:relative;isolation:isolate;width:min(1220px,95vw);flex:1;min-height:0;max-height:65vh;filter:drop-shadow(0 18px 19px #33294035)}.shell{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-1;user-select:none}.slots{position:absolute;inset:10% 6% 20%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2%}.column{--accent:#23b9b1;--pale:#dff5ef;display:flex;flex-direction:column;min-height:0;min-width:0}.past{--accent:#a07bdd;--pale:#eee5fb}.future{--accent:#ee926f;--pale:#ffebdf}h2{flex-shrink:0;height:43px;font:700 clamp(12px,1.4vw,20px)/1 'Outfit',Arial,sans-serif;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 8px;background:linear-gradient(#fafbff,#e6e6f0);border:1px solid #ffffffb0;border-radius:9px;box-shadow:0 2px 5px #17112455;color:#3e354d}h2 span{font-size:23px;color:var(--accent)}.chamber{position:relative;flex:1;min-height:0;background:linear-gradient(90deg,#151d29,#273040 50%,#141c28);border:3px solid #292e3b;border-radius:12px;box-shadow:inset 0 0 15px #050d1a,0 0 0 1px #9cabc188;overflow:hidden;padding:30px 10px 19px}.chamber:before,.chamber:after{content:'';position:absolute;top:8px;bottom:9px;width:4px;border-radius:3px;background:linear-gradient(90deg,#8291a2,#e8edf4,#637183);box-shadow:0 0 7px var(--accent);z-index:2;pointer-events:none}.chamber:before{left:4px}.chamber:after{right:4px}.feeder{position:absolute;left:11px;right:11px;top:6px;height:18px;display:flex;align-items:center;gap:4px}.feeder b{height:10px;flex:1;background:repeating-linear-gradient(90deg,#6c788a 0 3px,#414c60 3px 6px);border:1px solid #98a3b7;border-radius:5px;box-shadow:0 3px 4px #0008}.gear{display:block;width:16px;height:16px;border-radius:50%;border:3px dashed #b1bccb;background:#626c7e;box-shadow:inset 0 0 0 3px #323c4b}.window{position:relative;height:100%;overflow:hidden;border:2px solid var(--accent);border-radius:7px;background:linear-gradient(#1c2737,#354051);box-shadow:0 0 9px color-mix(in srgb,var(--accent),transparent 60%)}.card{height:100%;width:100%;display:flex;flex-direction:column;background:#fff;overflow:hidden;will-change:transform}.art{flex:1;min-height:0;overflow:hidden}.art img{display:block;width:100%;height:100%;object-fit:cover;user-select:none}.phrase{height:24%;min-height:65px;flex-shrink:0;background:linear-gradient(#fff,var(--pale));display:flex;align-items:center;justify-content:center;text-align:center;font:600 clamp(16px,1.8vw,28px)/1.13 'Outfit',Arial,sans-serif;letter-spacing:-.035em;padding:6px 12px}.tray{position:absolute;bottom:4px;left:7px;right:7px;height:12px;border-radius:3px 3px 6px 6px;background:linear-gradient(#778599,#c5cdd7 35%,#566273 42%,#252f3e);border-top:1px solid #f1f5fc;box-shadow:0 3px 4px #0006}.dispensing .gear{animation:rotate .5s linear infinite}.dispensing .feeder b{animation:roller .35s linear infinite}.dispensing .chamber{box-shadow:inset 0 0 22px color-mix(in srgb,var(--accent),transparent 62%),0 0 15px color-mix(in srgb,var(--accent),transparent 50%)}.lit h2{animation:glow .85s ease-out}.dispense{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 43px;background:linear-gradient(#534260,#3e314d);border:1px solid #6d5a7b;border-radius:13px;color:white;box-shadow:0 5px 0 #291e37,0 10px 18px #34253d25;font:700 15px 'DM Sans',Arial,sans-serif;letter-spacing:.16em;cursor:pointer;transition:transform .15s,filter .15s}.dispense span{font-size:25px;line-height:20px;color:#d4b8f2}.dispense:hover{filter:brightness(1.12);transform:translateY(-1px)}.dispense:active{transform:translateY(3px);box-shadow:0 2px 0 #291e37}.dispense:disabled{opacity:.7;cursor:wait}footer{width:min(1220px,95vw);display:flex;justify-content:space-between;align-items:center;margin-top:auto;flex-shrink:0}.footer-label{font-size:9px;font-weight:700;letter-spacing:.17em;color:#7e728c}.utilities{display:flex;gap:6px}.utilities button{background:#ffffff7a;border:0;border-radius:9px;color:#736780;font-size:17px;padding:8px 11px;cursor:pointer}.utilities button:disabled{opacity:.5;cursor:wait}.utilities span{font:500 11px 'DM Sans',Arial,sans-serif;padding-left:5px}button:focus-visible{outline:3px solid #7651a3;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes roller{to{background-position:12px 0}}@keyframes glow{35%{background:var(--pale);box-shadow:0 0 17px var(--accent)}}@media(max-width:700px){main{padding:3vh 1vw 1.5vh;gap:2.5vh}.machine{width:99vw;max-height:61vh}.slots{inset:9% 4% 19%;gap:1.5%}h2{font-size:9px;gap:3px;height:35px;letter-spacing:0;margin-bottom:5px}h2 span{font-size:14px}.chamber{padding:24px 5px 15px;border-width:2px;border-radius:8px}.chamber:before,.chamber:after{width:2px}.chamber:before{left:1px}.chamber:after{right:1px}.feeder{left:6px;right:6px;height:14px}.gear{width:12px;height:12px;border-width:2px}.window{border-width:1px}.phrase{padding:5px 4px;min-height:86px;font-size:clamp(12px,3.3vw,19px)}.footer-label{display:none}footer{justify-content:center}.utilities button{padding:7px}.dispense{padding:14px 32px}.tray{height:9px;bottom:3px}}@media(max-height:600px) and (min-width:701px){main{gap:1vh;padding-top:1vh}h1{font-size:25px;margin:3px}.eyebrow{font-size:8px}header p{font-size:12px}h2{height:28px;font-size:12px;margin-bottom:4px}.chamber{padding-top:24px}.phrase{min-height:47px;font-size:17px}.dispense{padding:9px 30px;font-size:12px}.utilities button{padding:3px 10px}.machine{max-height:66vh}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Place the live cards inside the generated machine's three glass bays. */
.slots{inset:2.5% 10.5% 31%;gap:7%}.column{position:relative}h2{position:absolute;inset:0 0 auto;height:9%;min-height:27px;margin:0;border-radius:6px;font-size:clamp(11px,1.3vw,19px);gap:7px;letter-spacing:.055em}.chamber{position:absolute;inset:28% 0 0;padding:0;border:0;border-radius:5px;background:none;box-shadow:none;overflow:visible}.chamber:before,.chamber:after{display:none}.window{border-radius:5px;box-shadow:0 2px 4px #16223440}.feeder{top:-17%;left:0;right:0;height:11%;opacity:.65}.feeder b{height:65%;opacity:.2}.gear{width:14px;height:14px;background:#66728799}.tray{display:none}.dispensing .chamber{box-shadow:none}.dispensing .window{box-shadow:0 0 18px var(--accent)}.phrase{font-size:clamp(15px,1.65vw,25px);min-height:64px;padding:5px 8px}.art img{object-position:center 42%}@media(max-width:700px){.slots{inset:2.5% 9% 31%;gap:5%}h2{font-size:9px;gap:3px;min-height:24px}.chamber{padding:0;border:0}.phrase{font-size:clamp(12px,2.8vw,18px);min-height:85px;padding:5px 3px}.gear{width:10px;height:10px}}@media(max-height:600px) and (min-width:701px){h2{font-size:12px;min-height:22px}.phrase{min-height:48px;font-size:16px}.chamber{padding:0}}