:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#173340;background:#122b38;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-height:100vh}
button,input{font:inherit}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr)}
.story{position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;min-height:680px;padding:48px 6vw 42px;color:#deeff1;background:radial-gradient(circle at 46% 45%,#244c58 0,#183c49 32%,#102c39 72%,#0e2633 100%)}
.story:before{content:"";position:absolute;width:min(76vw,820px);aspect-ratio:1;left:50%;top:47%;transform:translate(-50%,-50%);border:1px solid #95d9dc13;border-radius:50%;box-shadow:0 0 0 95px #95d9dc06,0 0 0 190px #95d9dc04;pointer-events:none}
.story:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 29%,#ffffff05 50%,transparent 68%);pointer-events:none}
.story-top,.story-bottom{position:relative;z-index:1;display:flex;align-items:center;gap:16px;font-size:10px;font-weight:650;letter-spacing:.25em}
.story-top{color:#b7ced1}.story-line{height:1px;width:35px;background:#72bec1aa}.story-bottom{justify-content:space-between;color:#98b8bc;letter-spacing:.17em}
.story-center{position:relative;z-index:1;display:grid;justify-items:center;gap:26px}
.brand-sequence{display:flex;align-items:center;justify-content:center;gap:18px;min-height:265px;width:100%}
.watch-stage{position:relative;width:220px;height:244px;flex:none}
.brand-sequence.motion-ready .watch-stage{animation:watch-slide .95s cubic-bezier(.22,.8,.25,1) 2.75s both}
.watch-halo{position:absolute;inset:17% 7%;border-radius:50%;background:#54ced344;filter:blur(40px);opacity:0}
.brand-sequence.motion-ready .watch-halo{animation:halo 1.2s ease 2.35s forwards}
.watch{position:relative;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 28px #021b28a8)}
.watch-strap,.watch-case-outer{fill:none;stroke:#62cbd0;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.watch-case-inner{fill:#123440;stroke:#75d0d1;stroke-width:2;opacity:.9}
.watch-ticks{fill:none;stroke:#82d7d8;stroke-width:6;stroke-linecap:round}
.watch-hour,.watch-minute{transform-box:view-box;transform-origin:110px 122px;fill:none;stroke:#8ee3e2;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.watch-hour{transform:rotate(90deg)}
.watch-minute{transform:rotate(0deg)}
.watch-pivot{fill:#a4e9e7}
.brand-sequence.motion-ready .watch-hour{animation:hour-turn 2.15s cubic-bezier(.2,.75,.2,1) .15s both,hand-light .45s ease 2.3s forwards,hand-settle .45s ease 2.9s forwards}
.brand-sequence.motion-ready .watch-minute{animation:minute-turn 2.15s cubic-bezier(.2,.75,.2,1) .15s both,hand-light .45s ease 2.3s forwards,hand-settle .45s ease 2.9s forwards}
.wordmark{display:flex;align-items:center;margin-left:-6px;padding-top:4px;color:#f1f8f7;font-size:clamp(48px,6.3vw,101px);line-height:1;letter-spacing:.025em;font-weight:680}
.letter-slot{position:relative;display:inline-block;flex:none}
.letter-face{display:block;transform-origin:top left}
.brand-sequence.motion-ready .letter-face{animation:l-type 1.25s cubic-bezier(.2,.75,.2,1) 2.75s both}
.travel-l{position:absolute;left:0;top:.14em;display:block;width:.56em;height:.7em;transform-origin:top left;opacity:0;filter:drop-shadow(0 0 7px #98eeee80)}
.brand-sequence.motion-ready .travel-l{animation:l-emerge 1.25s cubic-bezier(.2,.75,.2,1) 2.75s both}
.travel-l svg{display:block;width:100%;height:100%;overflow:visible}
.travel-l path{fill:none;stroke:#d5ffff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.wordmark .rest{display:flex;align-items:center}
.wordmark .rest span{display:inline-block}
.brand-sequence.motion-ready .rest span{opacity:0;transform:translateY(12px)}
.brand-sequence.motion-ready.word-ready .rest span{animation:write-letter .55s cubic-bezier(.18,.8,.2,1) forwards}
.brand-sequence.motion-ready.word-ready .rest span:nth-child(1){animation-delay:0s}
.brand-sequence.motion-ready.word-ready .rest span:nth-child(2){animation-delay:.14s}
.brand-sequence.motion-ready.word-ready .rest span:nth-child(3){animation-delay:.28s}
.brand-sequence.motion-ready.word-ready .rest span:nth-child(4){animation-delay:.42s}
.brand-caption{display:flex;align-items:center;gap:13px;color:#a8c9ca;font-size:12px;letter-spacing:.14em}
.caption-rule{height:1px;width:29px;background:#73b7bbaa}
.access{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#f7f8f5;padding:50px 48px 35px}
.access-inner{width:min(100%,380px)}
.access-kicker{display:block;margin-bottom:27px;color:#347779;font-size:10px;font-weight:700;letter-spacing:.24em}
h1{margin:0;color:#18333e;font-family:Georgia,"Times New Roman",serif;font-size:clamp(35px,3.4vw,52px);font-weight:400;letter-spacing:-.045em;line-height:1.08}
.access-heading p{margin:19px 0 0;color:#657a80;line-height:1.7;font-size:14px}
form{margin-top:42px}
label{display:block;margin-bottom:11px;color:#284650;font-size:12px;font-weight:650;letter-spacing:.025em}
.password-wrap{display:flex;align-items:center;min-height:56px;border:1px solid #c9d8d8;border-radius:9px;background:#fff;transition:border-color .2s,box-shadow .2s}
.password-wrap:focus-within{border-color:#348a8d;box-shadow:0 0 0 4px #54c5c41f}
input{width:100%;min-width:0;border:0;outline:0;background:transparent;padding:16px;color:#15343d;font-size:15px}
.password-wrap button{flex:none;border:0;background:none;padding:0 18px;color:#477a7c;font-size:11px;cursor:pointer}
#confirm-wrap{margin-top:23px}
.form-hint{min-height:19px;margin:11px 0 0;color:#74868a;font-size:11px;line-height:1.5}
.form-error{margin:12px 0 0;color:#a23f47;font-size:12px;line-height:1.5}
.submit-button{width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:23px;padding:18px 21px;border:0;border-radius:9px;background:#195d63;color:white;font-size:13px;font-weight:650;letter-spacing:.02em;cursor:pointer;box-shadow:0 9px 18px #15545b25;transition:transform .2s,background .2s,box-shadow .2s}
.submit-button:hover{transform:translateY(-2px);background:#13747a;box-shadow:0 13px 23px #15545b31}
.submit-button:disabled{opacity:.65;cursor:wait;transform:none}
.submit-button span:last-child{font-size:22px;font-weight:400;line-height:.6}
.loading-note{margin-top:42px;color:#658085;font-size:12px}
.access-footer{position:absolute;bottom:33px;left:48px;display:flex;align-items:center;gap:10px;color:#7e999c;font-size:10px;letter-spacing:.09em}
.footer-mark{width:8px;height:8px;border:2px solid #53bfc0;border-radius:50%}
@keyframes hour-turn{from{transform:rotate(0deg)}to{transform:rotate(450deg)}}
@keyframes minute-turn{from{transform:rotate(0deg)}to{transform:rotate(1440deg)}}
@keyframes hand-light{to{stroke:#d8ffff;stroke-width:9;filter:drop-shadow(0 0 7px #a5faff)}}
@keyframes hand-settle{to{stroke:#8ee3e2;stroke-width:8;filter:none}}
@keyframes halo{to{opacity:1}}
@keyframes watch-slide{from{transform:translateX(var(--watch-offset))}to{transform:translateX(0)}}
@keyframes l-emerge{0%{transform:translate(var(--l-x),var(--l-y)) scale(var(--l-scale));opacity:0}8%{transform:translate(var(--l-x),var(--l-y)) scale(var(--l-scale));opacity:1}25%{transform:translate(var(--l-x),var(--l-y)) scale(var(--l-scale-pop));opacity:1}40%{opacity:1}78%{opacity:0}100%{transform:translate(0,0) scale(1);opacity:0}}
@keyframes l-type{0%,25%{transform:translate(var(--type-x),var(--type-y)) scale(var(--type-scale));opacity:0}75%{opacity:1}100%{transform:translate(0,0) scale(1);opacity:1}}
@keyframes write-letter{to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.brand-sequence{gap:3px}.watch-stage{width:165px;height:183px}.wordmark{font-size:clamp(45px,6vw,68px)}}
@media(max-width:760px){.login-shell{grid-template-columns:1fr}.story{min-height:330px;padding:24px 28px}.story-center{gap:5px}.brand-sequence{min-height:190px}.watch-stage{width:150px;height:166px}.wordmark{font-size:clamp(49px,11vw,75px)}.brand-caption{font-size:9px}.story-bottom{font-size:8px}.access{min-height:450px;padding:45px 28px 75px}.access-footer{left:28px;bottom:24px}form{margin-top:29px}}
@media(max-width:420px){.brand-sequence{gap:0}.watch-stage{width:105px;height:116px}.wordmark{font-size:43px}.story{min-height:295px}}
.brand-caption,.story-top,.story-bottom,.access-footer,.access-kicker,.form-hint,.password-wrap button,.eyebrow { font-size:12px; line-height:1.6; }
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition:none!important}.wordmark .rest span{opacity:1;transform:none}}