/* MIDNIGHT DECK, the deciding surface. Cards arrive at midnight, so they arrive FACE DOWN. Turning one over is how you find out what the day gave you. That is the moment the grid never had. ⛔ TRANSFORM DISCIPLINE, and it is why the first build was broken: three nested layers, one transform each, never two on the same element. .riser translate/scale, rise, float, fly-off .tilt small rotateX/rotateY from pointer or gyro .flip rotateY(0|180) and nothing else A running animation with fill:both beats a class rule, so animating `transform` on the flip element means the rotate silently never applies. */ #view-deck *{box-sizing:border-box;margin:0;padding:0} /* 🔴 body IS NOT A DESCENDANT OF #view-deck, so the reset above never reached it. With content-box, min-height:100dvh plus the 84px + safe-area of nav padding makes the page taller than the screen by exactly the nav — which is the scroll, and the reason the card sat against the top with a screen of nothing under it. Everything fits without scrolling now. */ body.v-deck{box-sizing:border-box} html.v-deck, body.v-deck{height:100%;overflow-x:clip;max-width:100%} body.v-deck{background:var(--void); color:var(--txt1);font-family:"JetBrains Mono",ui-monospace,monospace; display:flex;flex-direction:column;align-items:center;padding:20px 18px 22px; overflow-x:hidden} /* the glow, pinned to the viewport so it never stretches and bands */ body.v-deck::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1; background:radial-gradient(120% 70% at 50% -8%,var(--s3) 0%,rgba(27,27,36,0) 62%)} #view-deck header{width:100%;max-width:820px;display:flex;align-items:center;gap:20px; flex-wrap:nowrap} #view-deck .mark{font-family:Fraunces,Georgia,serif;font-size:18px;font-weight:600; font-variation-settings:"SOFT" 40,"WONK" 1;letter-spacing:-.015em; white-space:nowrap;flex:none} #view-deck .when{font-size:10.5px;letter-spacing:.03em;color:var(--dim); white-space:nowrap;flex:none;margin-left:8px} #view-deck .left{margin-left:auto;font-size:10px;letter-spacing:.14em;color:var(--dim); font-variant-numeric:tabular-nums;white-space:nowrap;flex:none} /* the way back to the board. It was a grey outline on a black ground, which is the least visible thing a control can be. */ #view-deck .navb{font-family:inherit;font-size:10.5px;letter-spacing:.06em;padding:7px 15px 7px 13px; border-radius:100px;background:var(--s3);border:1px solid var(--edge2);color:var(--txt2); cursor:pointer;transition:.16s;display:inline-flex;align-items:center;gap:7px} #view-deck .navb::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--lime); opacity:.85;transform:rotate(45deg)} #view-deck .navb:hover{background:var(--edge);border-color:var(--lime-txt);color:var(--txt1)} #view-deck .stage{width:100%;max-width:330px;perspective:1500px;margin:auto 0; display:flex;flex-direction:column;align-items:center; opacity:0;transition:opacity .18s ease} #view-deck .stage.ready{opacity:1} #view-deck .slot{position:relative;width:100%;aspect-ratio:5/7;transform-style:flat} /* the cards underneath: the same back, set back in Z so nothing clips through them, and dimmed by depth rather than by being a different object */ #view-deck .ghost{position:absolute;inset:0;border-radius:var(--r);overflow:hidden; background:radial-gradient(120% 90% at 50% 40%,var(--s3),var(--s1)); border:1px solid var(--edge2);box-shadow:0 18px 40px -22px #000; display:flex;align-items:center;justify-content:center; opacity:var(--deep,.75)} #view-deck .ghost .gimg{position:absolute;inset:0;width:100%;height:100%;opacity:.3; background-size:cover} #view-deck .ghost .gnum{position:relative;font-family:Fraunces,Georgia,serif;font-size:44px; font-weight:300;font-variation-settings:"SOFT" 60,"WONK" 1;color:var(--lime-txt); letter-spacing:.02em;opacity:.65} #view-deck .ghost .gdate{position:absolute;bottom:22px;left:0;right:0;text-align:center; font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim3)} #view-deck .ghost.deep2{--deep:.45} /* the card's 3D lives entirely in here. Nothing else is in this context, so there is nothing for it to intersect. */ #view-deck .riser{position:absolute;inset:0;transform-style:preserve-3d;cursor:pointer;z-index:3} #view-deck .riser:focus-visible{outline:2px solid var(--lime);outline-offset:6px;border-radius:var(--r)} #view-deck .tilt{position:absolute;inset:0;transform-style:preserve-3d; transition:transform 420ms ease-out} #view-deck .tilt.live{transition:transform 90ms ease-out} #view-deck .flip{position:absolute;inset:0;transform-style:preserve-3d;border-radius:var(--r); transition:transform 780ms cubic-bezier(.45,.05,.2,1); visibility:hidden} #view-deck .flip.built{visibility:visible} #view-deck .flip.turned{transform:rotateY(180deg)} #view-deck .face{position:absolute;inset:0;backface-visibility:hidden; -webkit-backface-visibility:hidden;border-radius:var(--r);overflow:hidden; box-shadow:0 26px 60px -26px #000,0 2px 0 rgba(255,255,255,.05) inset; /* an opaque ground on both faces: nothing behind a card is ever visible through it, at any angle, on any compositor */ background-color:var(--s1); transform-style:flat} /* ── the four backs ─────────────────────────────────────────────────────── */ #view-deck .back{transform:rotateY(0);border:1px solid var(--edge2); display:flex;align-items:center;justify-content:center} /* 1. ELEVEN, the manifestation number, and the price. The most brandable of the four: it is the thing people already look up at, and on a product that delivers at midnight a time on the back is coherent rather than decorative. */ #view-deck .b-eleven{background-color:var(--s1);background-image:radial-gradient(120% 90% at 50% 40%,var(--s3),var(--s1))} /* the engraving as GROUND rather than subject: the guilloche sits under the mark at low opacity, so the card has the texture of a printed object and still has something to say. */ #view-deck .b-eleven canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.34} #view-deck .b-eleven .num, #view-deck .b-eleven .sub{position:relative;z-index:2} #view-deck .b-eleven .num{text-shadow:0 0 44px rgba(202,240,0,.34),0 0 90px rgba(8,8,11,.9)} #view-deck .b-eleven .num{font-family:Fraunces,Georgia,serif;font-size:56px;font-weight:300; font-variation-settings:"SOFT" 60,"WONK" 1;color:var(--lime-txt);letter-spacing:.02em; text-shadow:0 0 44px rgba(202,240,0,.28)} #view-deck .b-eleven .sub{position:absolute;bottom:26px;left:0;right:0;text-align:center; font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim3)} #view-deck .b-eleven .sub em{font-style:normal;color:var(--dim2)} /* 2. THE DATE, the deck becomes a calendar and the flip is literally "what did today give me". */ #view-deck .b-date{background-color:var(--s1);background-image:linear-gradient(168deg,var(--s2),var(--s1))} #view-deck .b-date .d{font-family:Fraunces,Georgia,serif;font-size:62px;font-weight:300; font-variation-settings:"SOFT" 50,"WONK" 1;line-height:.9;color:var(--txt1)} #view-deck .b-date .m{font-size:10px;letter-spacing:.4em;text-transform:uppercase; color:var(--lime-txt);margin-top:14px;text-align:center} #view-deck .b-date .stack{display:flex;flex-direction:column;align-items:center} /* 3. APERTURE, a blurred window onto the photograph underneath. You get the colour and none of the subject. Uses what is already on the card. */ #view-deck .b-ap{background:var(--s1);overflow:hidden} #view-deck .b-ap .blur{position:absolute;inset:0;background-size:cover;background-position:center; filter:blur(34px) saturate(1.5) brightness(.68);transform:scale(1.25)} #view-deck .b-ap .ring{position:relative;width:118px;height:118px;border-radius:50%; border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(2px); box-shadow:0 0 70px -12px rgba(0,0,0,.85) inset} #view-deck .b-ap .ring::after{content:"";position:absolute;inset:14px;border-radius:50%; border:1px solid rgba(255,255,255,.1)} #view-deck .b-ap .lbl{position:absolute;bottom:26px;left:0;right:0;text-align:center; font-size:8.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--dim1)} /* 4. ENGRAVED, banknote guilloche on canvas. No words, endlessly reprintable, and the only one that reads as an object rather than a screen. */ #view-deck .b-eng{background:var(--s1)} #view-deck .b-eng canvas{position:absolute;inset:0;width:100%;height:100%} /* ── the front ──────────────────────────────────────────────────────────── */ #view-deck .front{transform:rotateY(180deg);background-color:var(--card); display:flex;flex-direction:column} #view-deck .shot{width:100%;height:56%;object-fit:cover;display:block;background:var(--card2)} #view-deck .body{flex:1;padding:15px 17px 16px;display:flex;flex-direction:column; background:linear-gradient(180deg,var(--card) 0,var(--card2) 100%)} #view-deck .cat{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sub); display:flex;align-items:center;gap:7px} #view-deck .cat b{width:5px;height:5px;border-radius:50%;background:var(--pip,var(--dim2))} #view-deck .wish{font-family:Fraunces,Georgia,serif;font-size:19px;line-height:1.18;color:var(--ink); margin-top:7px;letter-spacing:-.015em;text-wrap:balance;font-weight:500; font-variation-settings:"SOFT" 30,"WONK" 1} #view-deck .why{font-size:10.5px;line-height:1.5;color:var(--sub);margin-top:auto;padding-top:10px} #view-deck .gloss{position:absolute;inset:0;border-radius:var(--r);pointer-events:none; mix-blend-mode:overlay;opacity:.35;transition:opacity 300ms ease-out} #view-deck .holo{position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat; background-size:250% 100%;mix-blend-mode:color-dodge;opacity:0; background-image:linear-gradient(115deg,transparent 16%,rgba(255,0,128,.4) 34%, rgba(255,210,0,.4) 46%,rgba(0,224,255,.4) 58%,rgba(170,0,255,.4) 70%,transparent 86%); animation:sweep 2.6s linear infinite} #view-deck .wildcard .holo{opacity:1} @keyframes sweep{0%{background-position:165% 0}100%{background-position:-65% 0}} #view-deck .rare{position:absolute;top:12px;right:12px;font-size:8px;letter-spacing:.18em; text-transform:uppercase;color:var(--on-accent);background:var(--lime);padding:4px 8px; border-radius:100px;z-index:3} #view-deck .riser.rise{animation:rise 1100ms cubic-bezier(.16,.84,.28,1) both} @keyframes rise{from{transform:translateY(120%) scale(.92);opacity:0}35%{opacity:1} to{transform:translateY(0) scale(1);opacity:1}} #view-deck .riser.float{animation:float 4.2s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} #view-deck .riser.gone-keep{animation:gk 460ms cubic-bezier(.4,0,.6,1) both} /* the card leaves under its own width rather than under a slice of the viewport, so it can never make the page wider than the screen */ @keyframes gk{to{transform:translate(115%,-16%) rotate(17deg);opacity:0}} #view-deck .riser.gone-drop{animation:gd 460ms cubic-bezier(.4,0,.6,1) both} @keyframes gd{to{transform:translate(-115%,10%) rotate(-17deg);opacity:0}} /* ruled, but still here, pushed aside and quieted so the reason box has the attention while the card it is about stays in view */ /* ruled: the card stays exactly where it is and at full size. A no dims it slightly, which is the only thing that changes. */ #view-deck .riser.set-drop .front{filter:saturate(.5) brightness(.8);transition:filter 300ms} #view-deck .riser.set-keep, #view-deck .riser.set-drop{transition:transform 300ms ease-out} /* Everything above the sheet is still the card, so the scrim is barely there: it exists to catch the tap, not to dim what he is looking at. */ #view-deck .scrim{position:fixed;inset:0;z-index:19;background:rgba(6,6,10,.28); animation:scrim-in 220ms ease both} @keyframes scrim-in{from{opacity:0}to{opacity:1}} /* the sheet, slides up over the lower screen so nothing displaces the card */ #view-deck .sheet{position:fixed;left:0;right:0;bottom:0;z-index:20; background:linear-gradient(180deg,rgba(12,12,17,.86),var(--s0) 22%); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-top:1px solid var(--edge2);border-radius:20px 20px 0 0; padding:16px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -26px 60px -30px #000; animation:sheet-up 320ms cubic-bezier(.16,.84,.28,1) both; touch-action:pan-y} /* the drag handle: a real affordance for the swipe, and it says the sheet moves */ #view-deck .sheet .grip{width:38px;height:4px;border-radius:100px;background:var(--edge2); margin:-4px auto 12px} #view-deck .sheet.dragging{animation:none;transition:none} #view-deck .sheet.springing{animation:none;transition:transform 220ms cubic-bezier(.2,.9,.3,1)} @keyframes sheet-up{from{transform:translateY(102%)}to{transform:translateY(0)}} #view-deck .sheet .inner{max-width:330px;margin:0 auto} #view-deck .riser.set-drop .front{filter:saturate(.45) brightness(.82)} #view-deck .stamp{position:absolute;top:16px;left:16px;z-index:5;font-size:8.5px; letter-spacing:.2em;text-transform:uppercase;padding:5px 10px;border-radius:100px; font-weight:700} #view-deck .stamp.keep{background:var(--lime);color:var(--on-accent)} #view-deck .stamp.drop{background:var(--s3);color:var(--ember);border:1px solid var(--ember)} #view-deck .rule{width:100%;max-width:330px;margin-top:18px;min-height:150px} #view-deck .hint{text-align:center;font-size:10.5px;letter-spacing:.1em;color:var(--dim);padding-top:22px} #view-deck .hint kbd{background:var(--s3);border:1px solid var(--edge);border-radius:4px;padding:2px 6px; color:var(--txt3);font-family:inherit;font-size:10px} #view-deck .yn{display:flex;gap:9px} #view-deck .yn button{flex:1;padding:13px 8px;border-radius:13px;cursor:pointer;font-family:inherit; font-size:12px;letter-spacing:.06em;border:1.5px solid var(--edge);background:var(--s2); color:var(--txt2);transition:transform .12s,background .14s,border-color .14s} #view-deck .yn button:hover{transform:translateY(-1px)} #view-deck .yn .keep{border-color:var(--lime-txt);color:var(--lime-txt)} #view-deck .yn .keep:hover{background:var(--lime);color:var(--on-accent)} #view-deck .yn .drop:hover{border-color:var(--ember);color:var(--ember)} #view-deck .reads .lab{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim); margin-bottom:8px;display:flex;align-items:center;gap:8px;text-align:left} #view-deck .reads .lab i{flex:1;height:1px;background:var(--edge);display:block} #view-deck .reads .row{display:flex;gap:6px} #view-deck .reads .row button{flex:1;padding:10px 4px;border-radius:11px;cursor:pointer; font-family:inherit;font-size:10.5px;background:var(--s2);color:var(--txt3); border:1px solid var(--edge);transition:.14s} #view-deck .reads .row button:hover{color:var(--txt1);border-color:var(--edge3)} #view-deck .reads .row button.on{background:var(--lime);border-color:var(--lime-txt);color:var(--on-accent);font-weight:700} /* the 94%: two big targets, the shape of the swipe they stand in for */ /* These two stand in for the gesture, so they are shaped like it: each leans the way its swipe goes, carries a chevron on its outer edge, and TILTS THE CARD toward itself on hover, which teaches the swipe without a word of instruction. */ #view-deck .swipe{display:flex;gap:10px} #view-deck .swipe button{flex:1;position:relative;padding:16px 10px;border-radius:15px; cursor:pointer;font-family:inherit;font-size:13.5px;letter-spacing:.04em; border:1.5px solid var(--edge);background:linear-gradient(180deg,var(--s2),var(--s1)); color:var(--txt2);overflow:hidden;isolation:isolate; transition:transform .16s cubic-bezier(.2,.7,.3,1),border-color .16s,color .16s,box-shadow .2s} #view-deck .swipe button::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0; transition:opacity .18s} #view-deck .swipe button::after{position:absolute;top:50%;transform:translateY(-50%); font-size:15px;opacity:.32;transition:opacity .16s,transform .22s} #view-deck .swipe .no::after{content:"←";left:13px} #view-deck .swipe .ok::after{content:"→";right:13px} #view-deck .swipe button:hover::after{opacity:1} #view-deck .swipe .no:hover::after{transform:translate(-4px,-50%)} #view-deck .swipe .ok:hover::after{transform:translate(4px,-50%)} #view-deck .swipe .ok{border-color:rgba(202,240,0,.5);color:var(--lime-txt)} #view-deck .swipe .ok::before{background:radial-gradient(120% 180% at 100% 50%,rgba(202,240,0,.22),transparent 62%)} #view-deck .swipe .ok:hover{transform:translateX(4px) rotate(.6deg);border-color:var(--lime-txt); color:var(--lime-txt);box-shadow:0 0 34px -12px rgba(202,240,0,.55)} #view-deck .swipe .ok:hover::before{opacity:1} #view-deck .swipe .ok:active{transform:translateX(9px) rotate(1.4deg) scale(.985)} #view-deck .swipe .no::before{background:radial-gradient(120% 180% at 0% 50%,rgba(255,106,69,.18),transparent 62%)} #view-deck .swipe .no:hover{transform:translateX(-4px) rotate(-.6deg);border-color:rgba(255,106,69,.75); color:var(--ember-hi);box-shadow:0 0 30px -14px rgba(255,106,69,.5)} #view-deck .swipe .no:hover::before{opacity:1} #view-deck .swipe .no:active{transform:translateX(-9px) rotate(-1.4deg) scale(.985)} /* the 6%: present, never in the way */ #view-deck .nolist{display:flex;flex-direction:column;gap:6px;margin-bottom:9px} #view-deck .nolist button{text-align:left;font-family:inherit;padding:9px 12px 9px 14px; border-radius:11px;background:var(--s2);border:1px solid var(--edge); border-left:3px solid var(--tone,var(--edge));color:var(--txt2);cursor:pointer; transition:.14s} #view-deck .nolist button:hover{border-color:var(--tone);border-left-color:var(--tone); background:var(--s2);color:var(--txt1)} #view-deck .nolist b{display:block;font-size:11.5px;font-weight:400} #view-deck .nolist span{display:block;font-size:9.5px;color:var(--dim);margin-top:3px} #view-deck .nolist span::before{content:"→ ";color:var(--tone);opacity:.8} /* it stays: the accent, same as a yes */ #view-deck .nolist .keeps{--tone:var(--lime)} /* it comes back changed: warm, unfinished */ #view-deck .nolist .returns{--tone:var(--amber)} /* it closes: the only one that ends anything */ #view-deck .nolist .closes{--tone:var(--ember)} #view-deck .nolist .closes b{color:var(--txt3)} #view-deck .undo{width:100%;margin-top:12px;font-family:inherit;font-size:10.5px;padding:10px; border-radius:10px;background:transparent;border:1px dashed var(--edge); color:var(--dim);cursor:pointer;transition:.14s} #view-deck .undo:hover{border-style:solid;border-color:var(--dim3);color:var(--txt2)} #view-deck .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} #view-deck .chips button{font-family:inherit;font-size:10.5px;padding:8px 13px;border-radius:100px; background:var(--s2);border:1px solid var(--edge);color:var(--txt3);cursor:pointer;transition:.14s} #view-deck .chips button:hover{border-color:var(--amber);color:var(--txt2)} #view-deck .chips button.on{background:var(--amber);border-color:var(--amber);color:var(--on-accent);font-weight:700} #view-deck .egs{font-size:9.5px;color:var(--dim);margin-bottom:8px;min-height:14px} #view-deck .reads button:disabled{opacity:.4;cursor:default} #view-deck .quick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px} #view-deck .quick button{font-family:inherit;font-size:10px;padding:7px 11px;border-radius:100px; background:var(--s2);border:1px solid var(--edge);color:var(--txt3);cursor:pointer;transition:.14s} #view-deck .quick button:hover{border-color:var(--lime-txt);color:var(--lime-txt)} #view-deck .reads textarea{width:100%;padding:9px 11px;font-family:inherit;font-size:11px; line-height:1.5;background:var(--s1);border:1px solid var(--edge);border-radius:10px; color:var(--txt1);resize:vertical} #view-deck .reads textarea:focus{outline:none;border-color:var(--edge3)} #view-deck .reads .skip{flex:0 0 30%!important;background:transparent!important;color:var(--dim)!important} #view-deck .meaning{margin-top:9px;font-size:10.5px;line-height:1.55;color:var(--dim);min-height:30px} #view-deck .meaning b{color:var(--txt2);font-weight:400} #view-deck .done{text-align:center;max-width:330px;margin:auto 0} #view-deck .done h2{font-family:Fraunces,Georgia,serif;font-size:27px;font-weight:500; letter-spacing:-.02em;margin-bottom:10px;font-variation-settings:"SOFT" 40,"WONK" 1} #view-deck .done p{font-size:11.5px;line-height:1.65;color:var(--dim)} #view-deck .more{margin:26px 0 4px;text-align:left;position:relative;isolation:isolate; background:linear-gradient(180deg,var(--s1),var(--s1));border:1px solid var(--edge2); border-radius:22px;padding:22px 22px 20px;box-shadow:0 30px 70px -34px #000} #view-deck .more > *{position:relative;z-index:4} #view-deck .mlab{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim); display:flex;align-items:center;gap:9px;margin-bottom:11px} #view-deck .mlab i{flex:1;height:1px;background:var(--edge)} #view-deck .mq{font-family:Fraunces,Georgia,serif;font-size:20px;line-height:1.25;color:var(--txt1); letter-spacing:-.015em; font-variation-settings:"SOFT" 30,"WONK" 1;text-wrap:balance} #view-deck .mhint{font-size:10.5px;color:var(--dim);line-height:1.55;margin-top:6px} #view-deck .more textarea{width:100%;margin-top:14px;padding:13px 15px;font-family:inherit; font-size:14px;line-height:1.55;background:var(--s0);border:1px solid var(--edge2); border-radius:13px;color:var(--txt1);resize:vertical;min-height:96px} #view-deck .more textarea:focus{outline:none;border-color:var(--lime-txt)} #view-deck .mrow{display:flex;gap:9px;margin-top:16px;padding-top:16px; border-top:1px solid var(--edge);align-items:center} #view-deck .mrow button{font-family:inherit;font-size:12.5px;letter-spacing:.04em;padding:12px 24px; border-radius:10px;background:var(--lime);border:0;color:var(--on-accent);cursor:pointer; font-weight:700;display:inline-flex;align-items:center;gap:9px;transition:.15s; box-shadow:0 0 0 1px rgba(202,240,0,.25),0 10px 26px -14px rgba(202,240,0,.6)} #view-deck .mrow button::after{content:"→";font-size:13px;opacity:.8} #view-deck .mrow button:hover{background:var(--lime-hi)} #view-deck .mrow .ghostb{background:transparent;border:1px solid var(--edge2);color:var(--dim); font-weight:400;box-shadow:none;border-radius:100px;padding:11px 20px} #view-deck .mrow .ghostb::after{content:""} #view-deck .mrow .ghostb:hover{border-color:var(--dim3);color:var(--txt2);background:transparent} /* leaving the flow: a different shape again, and quiet */ #view-deck .done .wide{width:100%;margin-top:22px;border-radius:100px;background:transparent; border:1px solid var(--edge2);color:var(--dim);font-family:inherit;font-size:11.5px; padding:12px;cursor:pointer;letter-spacing:.06em;transition:.15s; display:inline-flex;align-items:center;justify-content:center;gap:9px} #view-deck .done .wide::before{content:"";width:6px;height:6px;border-radius:2px; background:var(--lime);transform:rotate(45deg);opacity:.8} #view-deck .done .wide:hover{border-color:var(--dim3);color:var(--txt1)} #view-deck .guide{max-width:400px;margin:auto 0;text-align:left} #view-deck .guide h2{font-family:Fraunces,Georgia,serif;font-size:27px;font-weight:500; letter-spacing:-.02em;font-variation-settings:"SOFT" 40,"WONK" 1;margin-bottom:20px; text-align:center} #view-deck .steps{display:flex;flex-direction:column;gap:14px} #view-deck .step{display:flex;gap:13px;align-items:flex-start} #view-deck .step b{flex:none;width:26px;height:26px;border-radius:8px;background:var(--s2); border:1px solid var(--edge2,var(--edge2));color:var(--lime-txt);display:flex; align-items:center;justify-content:center;font-size:12px;font-weight:400} #view-deck .step span{font-size:12px;line-height:1.65;color:var(--txt3)} #view-deck .step em{font-style:normal;color:var(--txt1)} #view-deck .guide .big{width:100%;margin-top:24px;padding:14px;border-radius:100px;background:var(--lime); border:0;color:var(--on-accent);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer} #view-deck .guide .big:disabled{background:var(--s3);color:var(--dim);cursor:default} #view-deck .gsub{margin-top:10px;font-size:10.5px;color:var(--dim);text-align:center} #view-deck .done .big{margin-top:22px;padding:14px 26px;border-radius:100px;background:var(--lime); border:0;color:var(--on-accent);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer} #view-deck .done .big:disabled{background:var(--s3);color:var(--dim);cursor:default} #view-deck .genline{margin-top:12px;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums} #view-deck .enough{width:100%;margin-top:9px;font-family:inherit;font-size:10.5px;padding:8px; border-radius:10px;background:transparent;border:1px dashed var(--edge); color:var(--dim);cursor:pointer;transition:.14s} #view-deck .enough:hover{border-style:solid;color:var(--txt2)} #view-deck .done button{margin-top:20px;padding:12px 22px;border-radius:100px;cursor:pointer; font-family:inherit;font-size:11.5px;letter-spacing:.08em;background:transparent; border:1px solid var(--edge);color:var(--txt3)} #view-deck .done button:hover{border-color:var(--lime-txt);color:var(--lime-txt)} #view-deck footer{width:100%;max-width:470px;margin-top:auto;padding-top:18px;font-size:9.5px; line-height:1.75;color:var(--dim3);text-align:center} #view-deck .bk{background:none;border:0;cursor:pointer;font-family:inherit;font-size:10px; letter-spacing:.1em;padding:4px 8px;border-bottom:1px solid transparent;color:var(--dim2)} #view-deck .bk.on{color:var(--lime-txt);border-bottom-color:var(--lime-txt)} /* ═══ THE HEADER BAR — one definition, pasted into each page's own stylesheet. ⛔ It lived in style.css, which only the auth page loads: deck, board and settings each carry their own inline