.cp{--cp-bg:#eaeef5;--cp-bg-2:#e2e7f0;--cp-tile:#f4f7fb;--cp-tile-hi:#fff;--cp-tile-lo:#dfe5ef;--cp-navy:#0a2748;--cp-navy-2:#123b6b;--cp-ink:#0d2440;--cp-sub:#5b6b82;--cp-gold:#c9a35a;--cp-gold-hi:#e6c988;--cp-teal:#17b3a6;--cp-green:#37c98b;--cp-blue:#2f7ff0;--cp-shadow:rgba(13,38,76,.16);--cp-shadow-soft:rgba(13,38,76,.1);--cp-hi:hsla(0,0%,100%,.95)}.cp-surface{background:radial-gradient(1200px 600px at 12% -10%,#fff 0,hsla(0,0%,100%,0) 45%),radial-gradient(1000px 700px at 110% 10%,#eef2f9 0,rgba(238,242,249,0) 50%),linear-gradient(180deg,#edf1f8,#e4e9f2);min-height:100%}.cp-tile{position:relative;border-radius:24px;background:linear-gradient(160deg,#fff,#f2f6fc 48%,#e7edf7);box-shadow:-10px -10px 22px hsla(0,0%,100%,.95),12px 14px 28px rgba(13,38,76,.13),inset 0 1px 0 hsla(0,0%,100%,.9),inset 0 -2px 6px rgba(13,38,76,.05);border:1px solid hsla(0,0%,100%,.7);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1);will-change:transform}.cp-tile:before{content:"";position:absolute;inset:1px 1px 40% 1px;border-radius:23px 23px 40% 40%/23px 23px 30% 30%;background:linear-gradient(180deg,hsla(0,0%,100%,.75),hsla(0,0%,100%,0));pointer-events:none}.cp-tile-interactive{cursor:pointer}.cp-tile-interactive:hover{transform:translateY(-6px);box-shadow:-12px -12px 26px hsla(0,0%,100%,.98),18px 22px 40px rgba(13,38,76,.18),inset 0 1px 0 hsla(0,0%,100%,.95)}.cp-tile-interactive:active{transform:translateY(1px) scale(.992);box-shadow:inset 6px 6px 14px rgba(13,38,76,.14),inset -6px -6px 14px hsla(0,0%,100%,.85)}.cp-tile-navy{background:linear-gradient(160deg,#123b6b,#0c2a4f 55%,#081f3c);border:1px solid hsla(0,0%,100%,.1);box-shadow:-8px -8px 20px hsla(0,0%,100%,.55),14px 16px 34px rgba(8,24,48,.35),inset 0 1px 0 hsla(0,0%,100%,.14),inset 0 -3px 10px rgba(0,0,0,.28);color:#eef4ff}.cp-tile-navy:before{content:"";position:absolute;inset:1px 1px 55% 1px;border-radius:23px;background:linear-gradient(180deg,hsla(0,0%,100%,.16),hsla(0,0%,100%,0));pointer-events:none}.cp-screen{position:relative;border-radius:20px;background:radial-gradient(120% 120% at 50% 0,#10345f 0,#0a2242 45%,#061627 100%);box-shadow:inset 6px 6px 16px rgba(0,0,0,.55),inset -4px -4px 12px rgba(72,130,200,.18),0 1px 0 hsla(0,0%,100%,.7);border:1px solid rgba(9,22,40,.6);overflow:hidden;color:#dbeafe}.cp-screen:after{content:"";background:repeating-linear-gradient(180deg,hsla(0,0%,100%,.03),hsla(0,0%,100%,.03) 1px,transparent 2px,transparent 4px);opacity:.5}.cp-screen-glow,.cp-screen:after{position:absolute;inset:0;pointer-events:none}.cp-screen-glow{background:radial-gradient(60% 80% at 20% 0,rgba(47,127,240,.25),transparent 60%)}.cp-screen-scan{position:absolute;left:0;right:0;height:40%;top:-40%;background:linear-gradient(180deg,rgba(120,190,255,0),rgba(120,190,255,.1) 50%,rgba(120,190,255,0));animation:cpScan 5.5s linear infinite;pointer-events:none}@keyframes cpScan{0%{top:-40%}to{top:120%}}.cp-readout{font-family:var(--font-mono),ui-monospace,monospace;letter-spacing:.04em}.cp-readout-glow{text-shadow:0 0 10px rgba(105,230,163,.55),0 0 2px rgba(105,230,163,.9)}.cp-live-dot{width:8px;height:8px;border-radius:9999px;background:#37c98b;box-shadow:0 0 0 0 rgba(55,201,139,.7);animation:cpPulseDot 1.8s ease-out infinite}@keyframes cpPulseDot{0%{box-shadow:0 0 0 0 rgba(55,201,139,.55)}70%{box-shadow:0 0 0 9px rgba(55,201,139,0)}to{box-shadow:0 0 0 0 rgba(55,201,139,0)}}.cp-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.72rem 1.4rem;border-radius:9999px;font-weight:600;font-size:.9rem;letter-spacing:.01em;cursor:pointer;border:1px solid hsla(0,0%,100%,.6);background:linear-gradient(180deg,#fff,#eef2f9);color:var(--cp-ink);box-shadow:-4px -4px 10px hsla(0,0%,100%,.9),6px 8px 16px rgba(13,38,76,.14),inset 0 1px 0 hsla(0,0%,100%,.9);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;overflow:hidden}.cp-btn:hover{transform:translateY(-2px);box-shadow:-5px -5px 12px hsla(0,0%,100%,.95),9px 12px 22px rgba(13,38,76,.2),inset 0 1px 0 hsla(0,0%,100%,.9)}.cp-btn:active{transform:translateY(1px);box-shadow:inset 4px 4px 10px rgba(13,38,76,.16),inset -4px -4px 10px hsla(0,0%,100%,.8)}.cp-btn-navy{background:linear-gradient(180deg,#1a4a86,#0c2a52);color:#f2f7ff;border:1px solid hsla(0,0%,100%,.14);box-shadow:-4px -4px 10px hsla(0,0%,100%,.4),6px 8px 18px rgba(8,24,48,.35),inset 0 1px 0 hsla(0,0%,100%,.22)}.cp-btn-navy:hover{transform:translateY(-2px);filter:brightness(1.08)}.cp-btn-navy:active{transform:translateY(1px);box-shadow:inset 4px 4px 12px rgba(0,0,0,.4)}.cp-btn-gold{background:linear-gradient(180deg,#e6c988,#c9a35a);color:#3a2c0f;border:1px solid hsla(0,0%,100%,.4);box-shadow:-4px -4px 10px hsla(0,0%,100%,.5),6px 8px 18px rgba(150,110,40,.3),inset 0 1px 0 hsla(0,0%,100%,.55)}.cp-btn-gold:hover{transform:translateY(-2px);filter:brightness(1.05)}.cp-btn-shine:after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.55) 50%,hsla(0,0%,100%,0));transform:skewX(-18deg);transition:left .6s ease}.cp-btn-shine:hover:after{left:130%}.cp-key{display:inline-flex;align-items:center;justify-content:center;border-radius:16px;background:linear-gradient(160deg,#fff,#eaf0f8);box-shadow:-5px -5px 12px hsla(0,0%,100%,.95),6px 8px 16px rgba(13,38,76,.14),inset 0 1px 0 hsla(0,0%,100%,.9);transition:transform .25s ease,box-shadow .25s ease}.cp-key-active{background:linear-gradient(160deg,#1a4a86,#0c2a52);color:#fff;box-shadow:inset 3px 3px 8px rgba(0,0,0,.35),inset -3px -3px 8px hsla(0,0%,100%,.12)}.cp-key-hover{transition:background .3s ease,box-shadow .3s ease,transform .3s ease}.group:hover .cp-key-hover{background:linear-gradient(160deg,#1a4a86,#0c2a52);box-shadow:6px 8px 18px rgba(8,24,48,.28),inset 0 1px 0 hsla(0,0%,100%,.18);transform:translateY(-2px)}.group:hover .cp-key-hover svg{color:#fff!important}.cp-track{background:#dbe2ee;box-shadow:inset 2px 2px 6px rgba(13,38,76,.16),inset -2px -2px 5px hsla(0,0%,100%,.9);overflow:hidden}.cp-fill,.cp-track{border-radius:9999px}.cp-fill{height:100%;background:linear-gradient(90deg,#17b3a6,#37c98b);box-shadow:0 0 10px rgba(55,201,139,.45);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}.cp-fill-gold{background:linear-gradient(90deg,#c9a35a,#e6c988);box-shadow:0 0 10px rgba(201,163,90,.5)}.cp-fill-blue{background:linear-gradient(90deg,#2f7ff0,#56b0ff);box-shadow:0 0 10px rgba(47,127,240,.5)}@keyframes cpRise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.cp-rise{animation:cpRise .7s cubic-bezier(.2,.8,.2,1) both}@keyframes cpFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.cp-float{animation:cpFloat 6s ease-in-out infinite}@keyframes cpTicker{0%{transform:translateX(0)}to{transform:translateX(-50%)}}.cp-ticker-track{display:inline-flex;white-space:nowrap;animation:cpTicker 26s linear infinite}@keyframes cpSheen{0%{background-position:-200% 0}to{background-position:200% 0}}.cp-shimmer-text{background:linear-gradient(90deg,#0d2440,#c9a35a 45%,#e6c988 55%,#0d2440);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:cpSheen 6s linear infinite}.cp-grain:after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");pointer-events:none;border-radius:inherit}.cp-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:9999px;font-size:.72rem;font-weight:600;letter-spacing:.04em;background:linear-gradient(180deg,#fff,#eef2f9);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.9),2px 3px 8px rgba(13,38,76,.1);color:var(--cp-sub)}