/* Onyx Panel default public CSS */
*{box-sizing:border-box}html{background:#09090b}body{margin:0;color:#f4f1eb;font-family:Arial,Helvetica,sans-serif;min-height:100svh;overflow-x:hidden}button{font:inherit}::selection{background:#f47b42;color:#09090b}
.scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 49%,#25140f66,transparent 62%)}canvas{width:100%;height:100%;position:absolute;inset:0}.grain{position:absolute;inset:0;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.eclipse{position:absolute;left:50%;top:47%;width:min(64vw,660px);aspect-ratio:1;border-radius:50%;transform:translate(calc(-50% + var(--mx,0px)),calc(-50% + var(--my,0px)));transition:transform 1.5s ease-out;background:#09090b;box-shadow:0 0 90px #ed673113,inset 0 0 50px #25130e;isolation:isolate}.eclipse:before{content:"";position:absolute;inset:-2px;border-radius:50%;z-index:-2;background:conic-gradient(from 0deg,#ffbe78 0deg,#ed7540 20deg,#b13c151a 85deg,#28140e 170deg,#ffb168 220deg,#ffdfb4 240deg,#4b2516 290deg,#ffbe78);animation:orbit 22s linear infinite;box-shadow:0 0 24px #e9653030}.eclipse:after{content:"";position:absolute;inset:1px;border-radius:50%;z-index:-1;background:radial-gradient(ellipse at 50% 10%,#211812,#0b0b0d 45%,#09090b 80%);box-shadow:inset 0 0 24px #ff8b2510}.halo{position:absolute;inset:-23px;border:1px solid #ffffff05;border-radius:50%}.halo:after{content:"";position:absolute;inset:-65px;border:1px solid #ffffff03;border-radius:50%}
.shell{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:34px 4.4vw 24px}header,footer{display:flex;justify-content:space-between;align-items:center;gap:24px}header{animation:appear 1s both}.brand{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:700;letter-spacing:-.9px}.mark{width:23px;height:27px;display:inline-block;background:linear-gradient(130deg,#fff,#aaa);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%,50% 0,50% 24%,21% 38%,21% 62%,50% 77%,79% 62%,79% 38%,50% 24%)}.status{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#aaa6a2}.status i{height:5px;width:5px;border-radius:50%;background:#efaa70;box-shadow:0 0 12px #f79043;animation:breathe 3s ease-in-out infinite}main{flex:1;display:grid;place-items:center;text-align:center;padding:88px 0 94px}.hero{position:relative;width:100%}.eyebrow{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:#d0b39f;margin:0 0 30px;animation:rise 1s .15s both}.eyebrow:before,.eyebrow:after{content:"";display:inline-block;width:28px;height:1px;background:#a7856b66;vertical-align:middle;margin:0 15px}h1{font-size:clamp(108px,20.5vw,285px);font-weight:500;line-height:.83;letter-spacing:-.085em;margin:0 0 40px;padding-right:.08em;color:#ece9e4;text-shadow:0 5px 55px #0008;animation:rise 1.3s .25s both}h1 span{display:inline-block;background:linear-gradient(165deg,#fff 15%,#dad5cd 53%,#8a8581 100%);background-clip:text;-webkit-background-clip:text;color:transparent}h2{font-size:clamp(21px,2.35vw,32px);font-weight:400;letter-spacing:-.9px;margin:0 0 14px;animation:rise 1s .45s both}.description{font-size:14px;line-height:1.8;color:#94918f;margin:0 auto;max-width:380px;animation:rise 1s .6s both}.action{margin-top:30px;display:inline-flex;align-items:center;gap:30px;border:1px solid #ffffff24;background:#ffffff06;color:#eee7df;border-radius:50px;padding:15px 20px 15px 25px;font-size:12px;cursor:pointer;transition:background .3s,border-color .3s,transform .3s;animation:rise 1s .75s both}.action:hover{background:#f4965120;border-color:#eaaa7870;transform:translateY(-3px)}.action svg{width:16px;height:16px;transition:transform .3s}.action:hover svg{transform:rotate(45deg)}button:focus-visible{outline:2px solid #ffbe78;outline-offset:6px}.side{position:absolute;left:0;top:47%;writing-mode:vertical-rl;transform:rotate(180deg);font:9px monospace;letter-spacing:3px;color:#76706b}.coordinates{position:absolute;right:0;top:48%;color:#79716b;font:9px monospace;letter-spacing:2px;writing-mode:vertical-rl}.bottom{animation:appear 1s 1s both}footer{border-top:1px solid #ffffff13;padding-top:20px;font-size:10px;color:#77736f;letter-spacing:.4px}.footer-note{display:flex;align-items:center;gap:9px}.footer-note:before{content:"";width:4px;height:4px;background:#a28e7b;border-radius:50%}.controls{border:0;background:transparent;color:#99938e;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 0;font-size:10px}.bars{height:12px;display:flex;align-items:center;gap:3px}.bars i{width:2px;height:9px;background:#c39c7c;animation:bars 1.3s ease-in-out infinite alternate}.bars i:nth-child(2){animation-delay:-.5s}.bars i:nth-child(3){animation-delay:-.9s}.progress-line{position:absolute;bottom:0;left:0;width:100%;height:1px;background:#ffffff05}.progress-line:after{content:"";position:absolute;width:20%;height:100%;background:linear-gradient(90deg,transparent,#d69560,transparent);animation:scan 9s linear infinite}
dialog{color:#eee9e3;background:#131214;border:1px solid #e3ac7838;border-radius:20px;max-width:440px;width:calc(100% - 40px);padding:38px;box-shadow:0 20px 100px #0009}dialog::backdrop{background:#0009;backdrop-filter:blur(12px)}dialog[open]{animation:rise .3s both}dialog h2{animation:none;margin-top:22px;font-size:28px}dialog p{color:#a6a09b;line-height:1.8;font-size:14px}.close{position:absolute;top:14px;right:18px;background:none;border:0;color:#aaa;font-size:25px;cursor:pointer}.dialog-label{color:#d0a17d;font:10px monospace;letter-spacing:2px}.paused *,.paused *:before,.paused *:after{animation-play-state:paused!important}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes breathe{50%{opacity:.4;box-shadow:0 0 4px #f79043}}@keyframes rise{from{opacity:0;transform:translateY(20px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes appear{from{opacity:0}to{opacity:1}}@keyframes bars{to{height:3px}}@keyframes scan{from{left:-20%}to{left:100%}}
@media(min-width:1600px){.shell{padding-top:45px}main{padding:100px 0}.eclipse{width:750px}}
@media(max-width:600px){.shell{padding:24px 23px 18px}.brand{font-size:18px}.status{font-size:8px;letter-spacing:1.3px}.eclipse{width:106vw;top:44%}main{padding:100px 0 105px}.eyebrow{font-size:8px;letter-spacing:2.8px;margin-bottom:34px}.eyebrow:before,.eyebrow:after{width:15px;margin:0 10px}h1{font-size:29vw;margin-bottom:35px}h2{font-size:23px}.description{font-size:12px;max-width:270px}.side,.coordinates{display:none}footer{font-size:9px;flex-wrap:wrap;gap:12px}.footer-note{display:none}.action{font-size:11px}.controls{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}