.cc{--cab:oklch(95.5% .003 286);--cab-edge:oklch(90% .004 286);--drawer-top:oklch(99.5% 0 0);--drawer-bot:oklch(96.5% .002 286);--drawer-line:#14141e14;--pull:oklch(30% .006 286);--frame:oklch(87% .005 286);--tab-bg:oklch(90% .035 85);--tab-ink:oklch(35% .05 70);--int-back:oklch(86% .004 286);--int-floor:oklch(93% .003 286);--slot-top:oklch(62% .006 286);--slot-bot:oklch(75% .005 286);--stock:oklch(100% 0 0);--stock-ink:oklch(20% .006 286);--stock-muted:oklch(52% .012 286);--card-edge:#14141e1a;--card-line:oklch(62% .09 245/.16);--card-rule:oklch(60% .17 22/.7);--ink:oklch(45% .16 262);--ink-stamp:oklch(50% .16 300);--well:oklch(93% .003 286);--shadow:20 20 30}.dark .cc{--cab:oklch(17% .005 286);--cab-edge:oklch(12% .004 286);--drawer-top:oklch(28% .006 286);--drawer-bot:oklch(23.5% .006 286);--drawer-line:#ffffff0d;--pull:oklch(85% .005 286);--frame:oklch(38% .006 286);--tab-bg:oklch(36% .04 80);--tab-ink:oklch(90% .04 85);--int-back:oklch(10% .003 286);--int-floor:oklch(15% .004 286);--slot-top:oklch(6% .002 286);--slot-bot:oklch(11% .003 286);--stock:oklch(23% .006 286);--stock-ink:oklch(94% .003 286);--stock-muted:oklch(68% .012 286);--card-edge:#ffffff17;--card-line:oklch(72% .08 245/.13);--card-rule:oklch(68% .15 22/.65);--ink:oklch(80% .1 262);--ink-stamp:oklch(78% .12 300);--well:oklch(17% .005 286);--shadow:0 0 0}.cc .font-type{font-family:Courier Prime,Courier New,ui-monospace,monospace}.cc .tnum{font-variant-numeric:tabular-nums}.cc .cabinet{background:var(--cab);border:1px solid var(--cab-edge);box-shadow:inset 0 1px 0 #ffffff4d, 0 24px 40px -28px rgb(var(--shadow) / .45), 0 2px 4px rgb(var(--shadow) / .06);border-radius:16px;padding:14px 14px 16px}.cc .plate{color:var(--muted-foreground);letter-spacing:.22em;text-transform:uppercase;align-items:center;gap:8px;margin:0 2px 12px;font:500 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;display:flex}.cc .plate:after{content:"";background:var(--cab-edge);flex:1;order:1;height:1px}.cc .plate span:last-child{order:2}.cc .drawers{touch-action:pan-y;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.cc .drawer{aspect-ratio:5/4;cursor:pointer;background:linear-gradient(180deg, var(--drawer-top), var(--drawer-bot));box-shadow:inset 0 1px 0 #ffffff80, inset 0 -1px 0 var(--drawer-line), 0 0 0 1px var(--drawer-line), 0 1px 2px rgb(var(--shadow) / .08);border:0;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;gap:9px;padding:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s;display:flex;position:relative}.cc .drawer:hover{transform:translateY(-1px)}.cc .drawer:active{transform:scale(.98)}.cc .drawer:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.cc .drawer:before{content:"";height:5px;width:calc(var(--full,0) * 74%);background:repeating-linear-gradient(90deg, var(--stock) 0 2px, var(--stock-muted) 2px 3px);transform-origin:50% 100%;border-radius:1px;transition:transform .45s cubic-bezier(.2,.8,.2,1);position:absolute;top:3px;left:50%;transform:translate(-50%)scaleY(0)}.cc .drawer.nudge:not(.out),.cc .drawer:focus-visible:not(.out){transform:perspective(500px) translateZ(calc(10px + var(--full,0) * 30px)) translateY(-1px);box-shadow:inset 0 1px 0 #ffffff80, 0 0 0 1px var(--drawer-line), 0 calc(6px + var(--full,0) * 10px) 16px -6px rgb(var(--shadow) / .35);z-index:2;transition-duration:.14s}.cc .drawer.nudge-half:not(.out):not(.nudge){transform:perspective(500px) translateZ(calc(3px + var(--full,0) * 10px));transition-duration:.14s}.cc .drawer.nudge:not(.out):before,.cc .drawer:focus-visible:not(.out):before{transition-duration:.14s;transform:translate(-50%)scaleY(1)}.cc .drawer.out,.cc .drawer.out:hover,.cc .drawer.out:active{background:linear-gradient(180deg, var(--slot-top), var(--slot-bot));transform:none;box-shadow:inset 0 10px 14px -6px #00000073,inset 0 0 0 1px #00000024}.cc .drawer.out .holder,.cc .drawer.out .pull{visibility:hidden}.cc .drawer.out:after{content:attr(data-label);text-align:center;letter-spacing:.2em;color:#fff9;font:500 9px/1 ui-monospace,monospace;position:absolute;bottom:9px;left:0;right:0}.cc .drawer.empty .holder{opacity:.5}.cc .drawer.spare{cursor:default}.cc .drawer.grab{animation:.22s ease-out cc-grab}@keyframes cc-grab{50%{transform:scale(.95)translateY(1px)}}.cc .holder{background:var(--frame);border-radius:4px;width:68%;padding:2px}.cc .holder .lbl{background:var(--stock);color:var(--stock-ink);text-align:center;border-radius:2.5px;padding:3px 0 2px;font:700 13px/1.15 Courier Prime,Courier New,monospace;display:block}.cc .holder .ct{color:var(--stock-muted);letter-spacing:.04em;font:400 9px/1.25 ui-monospace,monospace;display:block}.cc .pull{background:var(--pull);width:38%;height:6px;box-shadow:0 2px 3px rgb(var(--shadow) / .22);border-radius:999px}.cc .dopen{isolation:isolate;position:relative}.cc .interior{background:linear-gradient(180deg, var(--int-back), var(--int-floor) 70%);border:1px solid var(--cab-edge);box-shadow:inset 18px 0 16px -14px rgb(var(--shadow) / .28), inset -18px 0 16px -14px rgb(var(--shadow) / .28), inset 0 18px 18px -12px rgb(var(--shadow) / .32);border-bottom:0;border-radius:12px 12px 0 0;padding:0 22px;position:relative;overflow:hidden}.cc .cards{position:relative}@media (hover:none){.cc .cards.has-cards{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}.cc .face{pointer-events:none;transform-origin:50% 100%;transform:perspective(1000px) translateY(var(--y)) rotateX(0deg);transition:transform .55s cubic-bezier(.22,.8,.26,1),opacity .3s;position:absolute;top:0;left:0;right:0}.cc .face.up{transform:perspective(1000px) translateY(calc(var(--y) - 12px)) rotateX(2deg)}.cc .face.fwd1{transform:perspective(1000px) translateY(calc(var(--y) + 30px)) rotateX(-16deg)}.cc .face.fwd2{transform:perspective(1000px) translateY(calc(var(--y) + 16px)) rotateX(-8deg)}.cc .face.fwd3{transform:perspective(1000px) translateY(calc(var(--y) + 8px)) rotateX(-4deg)}.cc .face.fwd{transform:perspective(1000px) translateY(calc(var(--y) + 4px)) rotateX(-2deg)}.cc .face.gone{opacity:0}.cc .face .idx{box-shadow:0 0 0 1px var(--card-edge), 0 -6px 12px -8px #00000059}.cc .face.kb .idx{outline:2px solid var(--ring);outline-offset:2px}.cc .gcard{height:var(--H);background:var(--tab-bg);max-width:620px;box-shadow:0 -6px 12px -8px rgb(var(--shadow) / .35);border-radius:8px;margin-inline:auto;position:relative}.cc .gtab{background:var(--tab-bg);height:19px;color:var(--tab-ink);border-radius:6px 6px 0 0;padding:0 12px;font:700 12px/19px Courier Prime,Courier New,monospace;position:absolute;top:-18px}.cc .hit{z-index:900;cursor:pointer;background:0 0;border:0;padding:0;position:absolute;left:0;right:0}.cc .hit:focus-visible{outline:none}.cc .dfront{z-index:950;background:linear-gradient(180deg, var(--drawer-top), var(--drawer-bot));height:88px;box-shadow:inset 0 1px 0 #ffffff80, 0 0 0 1px var(--drawer-line), 0 14px 26px -12px rgb(var(--shadow) / .4);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:11px;margin-top:-30px;display:flex;position:relative}.cc .dfront .holder{width:120px}.cc .dfront .holder .lbl{padding:5px 0 4px;font-size:16px}.cc .dfront .pull{background:var(--primary);width:110px;height:7px}.cc .drawer-empty{text-align:center;padding:56px 16px 64px}.cc .dopen.opening .interior{animation:.95s cubic-bezier(.2,.8,.2,1) backwards cc-slide-out}.cc .dopen.opening .dfront{animation:.95s cubic-bezier(.2,.8,.2,1) backwards cc-front-out}.cc .dopen.opening .face{animation:.8s cubic-bezier(.2,.8,.2,1) backwards cc-settle;animation-delay:calc(var(--i,0) * 45ms + .38s)}@keyframes cc-slide-out{0%{clip-path:inset(100% 0 0);transform:translateY(-40px)}to{clip-path:inset(0);transform:none}}@keyframes cc-front-out{0%{transform:translateY(-40px)scale(.97)}to{transform:none}}@keyframes cc-settle{0%{opacity:0;transform:perspective(1000px) translateY(calc(var(--y) + 40px)) rotateX(-28deg)}}.cc .swap{animation:.6s cubic-bezier(.2,.8,.2,1) cc-swap}@keyframes cc-swap{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.cc .idx{background-color:var(--stock);width:100%;max-width:620px;color:var(--stock-ink);background-image:repeating-linear-gradient(to bottom, transparent 0 23px, var(--card-line) 23px 24px);box-shadow:0 0 0 1px var(--card-edge), 0 2px 6px #0000000f;text-align:left;background-position:0 60px;background-repeat:no-repeat;background-size:100% calc(100% - 84px);border-radius:8px;margin-inline:auto;font-family:Courier Prime,Courier New,monospace;font-size:14px;line-height:24px;position:relative;overflow:hidden}.cc .idx.deck{height:var(--H)}.cc .idx.deck .head{white-space:nowrap;text-overflow:ellipsis;padding-right:104px;overflow:hidden}.cc .idx.full{aspect-ratio:5/3;min-height:300px;box-shadow:0 0 0 1px var(--card-edge), 0 30px 60px -20px #00000080;overflow:visible}.cc .idx .rule{background:var(--card-rule);height:1px;position:absolute;top:54px;left:0;right:0}.cc .idx .inner{grid-template-columns:84px minmax(0,1fr);column-gap:10px;padding:10px 18px 36px 14px;display:grid;position:relative}.cc .idx .call{padding-top:2px;font-size:12px;line-height:15px}.cc .idx .head{overflow-wrap:anywhere;min-height:48px;font-weight:700}.cc .idx .body{grid-column:2;padding-top:2px}.cc .idx .body p{overflow-wrap:anywhere;margin:0}.cc .idx .ind{text-indent:2ch}.cc .idx .trace{margin-top:24px}.cc .idx .summary{-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;margin-top:24px;display:-webkit-box;overflow:hidden}.cc .idx .hole{background:var(--well);width:13px;height:13px;box-shadow:inset 0 0 0 1px var(--card-edge);border-radius:50%;margin-left:-6.5px;position:absolute;bottom:10px;left:50%}.cc .stamp{z-index:1;color:var(--ink-stamp);letter-spacing:.14em;text-transform:uppercase;opacity:.85;pointer-events:none;border:2px solid;border-radius:3px;padding:2px 8px;font:600 11px/1.5 ui-monospace,monospace;position:absolute;top:66px;right:14px;transform:rotate(-7deg)}.cc .idx.deck .stamp{border-width:1.5px;padding:0 5px;font-size:9px;top:8px;right:10px}.cc .turn-hint{color:var(--ink);opacity:.8;font:600 17px/1 Caveat,Segoe Print,cursive;position:absolute;bottom:8px;right:16px}@media (width<=520px){.cc .idx{font-size:12.5px}.cc .idx .inner{grid-template-columns:62px minmax(0,1fr);padding-right:12px}.cc .idx .call{font-size:10.5px}.cc .idx.full{aspect-ratio:auto}.cc .holder .lbl{font-size:12px}.cc .drawers{gap:5px}.cc .idx.deck .stamp{display:none}.cc .idx.deck .head{padding-right:0}}.cc .lift{z-index:60;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.cc .lift-scrim{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#08080c8c;transition:opacity .45s;animation:.45s cc-fadein;position:absolute;inset:0}.cc .lift.closing .lift-scrim,.cc .lift.closing .lift-actions{opacity:0}.cc .lift-body{flex-direction:column;gap:14px;width:min(640px,100%);max-height:100%;padding:8px 4px 4px;display:flex;position:relative;overflow:auto}.cc .flip{perspective:1800px;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}.cc .flip:active{cursor:grabbing}.cc .flip-inner{transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.2,1);position:relative}.cc .lift.flipped .flip-inner{transform:rotateY(180deg)}.cc .flip-front,.cc .flip-back{backface-visibility:hidden}.cc .flip-inner>.flip-back{position:absolute;inset:0;overflow:auto;transform:rotateY(180deg)}.cc .idx.back{cursor:default;background-image:repeating-linear-gradient(to bottom, transparent 0 29px, var(--card-line) 29px 30px);height:100%;box-shadow:0 0 0 1px var(--card-edge), 0 30px 60px -20px #00000080;background-position:0 36px;background-size:100% calc(100% - 60px);flex-direction:column;gap:6px;padding:16px 22px 30px;display:flex}.cc .back-label{letter-spacing:.18em;text-transform:uppercase;color:var(--stock-muted);justify-content:space-between;font:500 10px/1.4 ui-monospace,monospace;display:flex}.cc .hand{resize:none;width:100%;min-height:90px;color:var(--ink);white-space:pre-wrap;-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:none;flex:1;padding:0;font:500 24px/30px Caveat,Segoe Print,Bradley Hand,cursive}.cc .hand::placeholder{color:color-mix(in srgb, var(--ink) 40%, transparent)}.cc .hand.empty{color:color-mix(in srgb, var(--ink) 50%, transparent)}.cc .hand:focus-visible{box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 45%, transparent)}.cc .lift-tip{color:#ffffffc7;text-align:center;font-size:12px;animation:.4s .6s backwards cc-fadein}.cc .lift-actions{flex-wrap:wrap;align-items:center;gap:8px;transition:opacity .3s;animation:.4s .45s backwards cc-fadein;display:flex}@keyframes cc-fadein{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.cc *,.cc :before,.cc :after{transition:none!important;animation:none!important}}
