
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.nebula{animation:nebula-drift 60s ease-in-out infinite alternate;opacity:.035;filter:grayscale(.8) hue-rotate(170deg)}
@keyframes nebula-drift{to{transform:translate(2%,1%) scale(1.025)}}
.aurora{position:absolute;width:1000px;max-width:130vw;height:800px;left:50%;top:8%;border-radius:50%;pointer-events:none;opacity:.55;transform:translateX(-50%);background:radial-gradient(ellipse,#1e73d920,transparent 65%);animation:aurora-drift 26s ease-in-out infinite alternate}
.aurora-two{width:850px;height:550px;top:40%;left:30%;opacity:.4;background:radial-gradient(ellipse,#428dff17,transparent 68%);animation-delay:-10s;animation-duration:32s}
@keyframes aurora-drift{to{transform:translate(-45%,-3%) scale(1.1)}}
.space-grid{opacity:.6}.horizon{opacity:.55}
.mode-nav{isolation:isolate}.mode-nav button{width:122px;min-width:0;position:relative;z-index:1;transition:color .3s}.mode-nav button.active{background:none;box-shadow:none}.mode-indicator{position:absolute;z-index:0;left:5px;top:5px;bottom:5px;width:calc((100% - 14px)/2);border-radius:24px;background:linear-gradient(130deg,#24537e,#163857);box-shadow:0 2px 12px #0002;transition:transform .45s var(--motion-ease)}
body[data-view=receive] .mode-indicator{transform:translateX(calc(100% + 4px))}
.ring-outer{animation:portal-outer 12s ease-in-out infinite}.ring-middle{animation:portal-middle 10s ease-in-out infinite}.ring-inner{animation:portal-pulse 5s ease-in-out infinite}
@keyframes portal-outer{50%{transform:rotate(-48deg) scaleY(.82);border-color:#6fb6ffbb}}
@keyframes portal-middle{50%{transform:rotate(60deg) scaleY(.66);border-color:#75bbffaa}}
@keyframes portal-pulse{50%{box-shadow:0 0 40px #377dff77,inset 0 0 30px #3873ff44;transform:scale(.96)}}
.portal-art{transition:transform .5s var(--motion-ease)}.drop-zone:hover .portal-art{transform:translateY(-5px) scale(1.025)}
.portal-star{animation:star-pulse 5s ease-in-out infinite}.star-two{animation-delay:1.5s}@keyframes star-pulse{50%{opacity:.45;transform:scale(.85)}}
.drop-zone:hover .choose-button{transform:translateY(-2px);box-shadow:0 8px 32px #1485ff44}.choose-button,.primary,.selection-surface,.text-link,.time-options button,.copy-code{transition:transform .3s var(--motion-ease),box-shadow .35s,border-color .3s,background .3s,color .25s}
.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 30px #2387ff44}.primary:active:not(:disabled){transform:scale(.985)}.primary:before{content:"";position:absolute;inset:-50% auto -50% -80%;width:30%;background:linear-gradient(90deg,transparent,#ffffff38,transparent);transform:skewX(-20deg);transition:left .8s;pointer-events:none}.primary:hover:before{left:140%}
.stage-card:not([hidden]),.selected-area:not([hidden]),.password-field:not([hidden]){animation:stage-arrive .55s var(--motion-ease)}.hero-heading{animation:stage-arrive .8s var(--motion-ease)}
@keyframes stage-arrive{from{opacity:0;transform:translateY(14px) scale(.986)}to{opacity:1;transform:translateY(0) scale(1)}}
.file-row{animation:file-arrive .4s var(--motion-ease);transition:border-color .25s,background .25s}.file-row:nth-child(2){animation-delay:.025s}.file-row:nth-child(3){animation-delay:.05s}
@keyframes file-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.file-row:hover{border-color:#6bb1ff42;background:#183a6066}
.upload-stage-top{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#81a3c6;font-size:11px}.transfer-status{display:flex;align-items:center;gap:8px;color:#b1d5f4}
.progress-card{position:relative;overflow:hidden;padding-top:23px;background:radial-gradient(ellipse at 50% 40%,#1239678c,transparent 65%),linear-gradient(145deg,#0c203ce8,#08162ae8);border-color:#4a8ad649}
.progress-card:before{content:"";position:absolute;left:15%;right:15%;top:0;height:1px;background:linear-gradient(90deg,transparent,#8ac8ff88,transparent)}
.progress-orbit{width:184px;height:184px;margin:35px auto 25px;border:none;box-shadow:none;animation:none;isolation:isolate}
.progress-orbit svg{inset:10px}.progress-orbit .progress-circle-base{stroke:#2a548245;stroke-width:1}.progress-orbit #progress-circle{stroke:#9bceff;stroke-width:2.5;filter:drop-shadow(0 0 5px #53aaff80);transition:none}
.transfer-core{display:grid;place-content:center;position:absolute!important;inset:29px;border:1px solid #70baff1a;border-radius:50%;background:radial-gradient(circle,#0a1f3a55,#0a1f3a11);box-shadow:inset 0 0 40px #277aef12;gap:8px!important}
.progress-orbit strong{font-size:35px;font-variant-numeric:tabular-nums;letter-spacing:-1px}.progress-orbit small{letter-spacing:1px}
.transfer-halo{position:absolute;display:block;border:1px solid #66b2ff36;border-radius:50%;inset:0;pointer-events:none;z-index:-1}
.halo-one{inset:-8px;transform:rotate(-30deg) scaleY(.7);animation:halo-one 8s ease-in-out infinite}.halo-two{inset:-13px;transform:rotate(42deg) scaleY(.72);border-color:#3c90ff46;animation:halo-two 9s ease-in-out infinite}.halo-three{inset:16px;border-style:dashed;border-color:#599ddb22;animation:orbit-spin 45s linear infinite}
@keyframes halo-one{50%{transform:rotate(-45deg) scaleY(.8);border-color:#66b2ff60}}@keyframes halo-two{50%{transform:rotate(58deg) scaleY(.64);border-color:#3c90ff77}}
.orbit-dot{transform-origin:0 96px;animation:orbit-spin 8s linear infinite;top:-4px;left:50%;width:4px;height:4px}
.orbit-satellite{position:absolute;width:3px;height:3px;border-radius:50%;background:#79bcff;box-shadow:0 0 8px #368cff55}.satellite-one{left:-3px;top:72px;animation:star-pulse 4s ease-in-out infinite}.satellite-two{right:0;bottom:38px;animation:star-pulse 4s ease-in-out infinite reverse}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
.transfer-file{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 19px;min-width:0}.transfer-file-icon{display:flex;color:#689bca;flex-shrink:0}.filename-progress{margin:0;max-width:80%;font-size:12px;color:#bfd8ed}
.progress-track{height:3px;background:#24476c66}.progress-track>div{transition:none;background:linear-gradient(90deg,#2687fa,#a1d7ff);border-radius:3px;position:relative}.progress-track>div:after{content:"";position:absolute;top:0;bottom:0;right:0;width:30px;background:linear-gradient(90deg,transparent,#d2eeffb0)}
.progress-meta{font-size:10px;color:#7b9fc2}.transfer-metrics{display:grid;grid-template-columns:1fr 1fr;border:1px solid #70a7de1d;border-radius:12px;margin-top:20px;background:#091b3260;padding:14px 0;text-align:left}.transfer-metrics>div{padding:0 19px}.transfer-metrics>div+div{border-left:1px solid #70a7de1d}.transfer-metrics span{display:block;color:#6086ad;font-size:10px;margin-bottom:5px}.transfer-metrics strong{display:block;font-size:12px;font-weight:500;color:#aacdeb;font-variant-numeric:tabular-nums}
.transfer-steps{display:flex;justify-content:space-between;list-style:none;padding:0;margin:23px 0 0;font-size:10px;color:#54769b;gap:8px}.transfer-steps li{display:flex;align-items:center;gap:7px}.transfer-steps span{display:grid;place-items:center;font:9px ui-monospace,monospace;width:18px;height:18px;border:1px solid #4e7ca844;border-radius:50%}
[data-phase=prepare] [data-step=prepare],[data-phase=sending] [data-step=sending],[data-phase=saving] [data-step=saving]{color:#9fcdf4}
[data-phase=sending] [data-step=prepare],[data-phase=saving] [data-step=prepare],[data-phase=saving] [data-step=sending]{color:#719dc4}
[data-phase=prepare] [data-step=prepare] span,[data-phase=sending] [data-step=sending] span,[data-phase=saving] [data-step=saving] span{background:#2a669a66;border-color:#63b3ff80;color:#d1e9ff;box-shadow:0 0 10px #3d92e51a}
[data-phase=saving] .halo-one,[data-phase=saving] .halo-two{animation-duration:4s}[data-phase=saving] .transfer-core{animation:saving-glow 2s ease-in-out infinite}@keyframes saving-glow{50%{box-shadow:inset 0 0 30px #4d9df22a}}
.progress-card #progress-state{font-size:10px;line-height:1.7;margin:20px 0 10px;color:#6588ac}.cancel-transfer{background:#17355240;border:1px solid #527da63b;border-radius:9px;padding:8px 17px;font-size:11px;color:#8dabca;transition:background .25s,border-color .25s}.cancel-transfer:hover{background:#22415f66;border-color:#82b7e166}
body[data-stage=uploading] .journey{opacity:.4}body[data-stage=uploading] .page-signoff{opacity:.5}.journey,.page-signoff{transition:opacity .5s}
.arrival-icon{animation:arrival-pop .7s var(--motion-ease)}@keyframes arrival-pop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
.toast:not([hidden]){animation:toast-arrive .4s var(--motion-ease)}@keyframes toast-arrive{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
dialog[open]{animation:stage-arrive .4s var(--motion-ease)}.transmitting .aurora{opacity:.9}.transmitting .nebula{opacity:.018}.aurora,.nebula{transition:opacity 1.3s}.drag-overlay:not([hidden]){animation:stage-arrive .25s var(--motion-ease)}
@media(max-width:700px){.mode-nav{position:relative;left:auto}.mode-nav button{width:100px}.aurora{animation:none;opacity:.45}.nebula{animation:none}.progress-orbit{margin-top:30px}.transfer-steps{font-size:9px}}
@media(max-width:440px){.mode-nav button{width:84px}.mode-indicator{left:3px;top:3px;bottom:3px;width:calc((100% - 6px)/2)}body[data-view=receive] .mode-indicator{transform:translateX(100%)}.upload-stage-top{font-size:10px}.transfer-metrics>div{padding:0 13px}.transfer-metrics strong{font-size:11px}.progress-meta{font-size:9px}.transfer-steps{gap:5px;font-size:9px}.transfer-steps li{gap:5px}.transfer-steps span{width:16px;height:16px}.progress-card #progress-state{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#stars{display:none}}

.company-signature{display:flex;justify-content:center;align-items:center;padding:0 0 18px}.company-signature img{display:block;width:280px;max-width:80%;height:auto;filter:drop-shadow(0 0 18px #228cff12)}
@media(max-width:440px){.company-signature{padding:0 0 10px}.company-signature img{width:245px}}
