/* Arashi: restrained dark interface, solid surfaces, an 8-point spacing system. */
.password-field{display:block;position:relative;margin-top:8px}.password-field input{margin-top:0;padding-right:56px}.password-toggle{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:44px;min-height:44px;padding:10px;background:transparent;color:var(--muted);border:0;border-radius:9px}.password-toggle svg{width:22px;height:22px;pointer-events:none}.password-toggle:not(:disabled):hover{background:#ffffff0a;color:var(--ink)}.eye-slash[hidden]{display:none}
.settings-group>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;list-style:none;cursor:pointer;font-size:16px;font-weight:600}
.settings-group>summary::-webkit-details-marker{display:none}.settings-group>summary::after{content:'';width:9px;height:9px;flex:0 0 9px;margin:0 6px 5px 0;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform 180ms}.settings-group[open]>summary::after{transform:rotate(225deg)}
.settings-group summary small{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:3px}.settings-content{padding:4px 0 16px}.settings-group.card{padding-top:8px;padding-bottom:8px}#security-panel>.settings-group{border-top:1px solid var(--line);margin-top:16px}#security-panel h2{font-size:18px}#screen-settings .account-card{padding-top:20px;padding-bottom:20px}#screen-settings footer{gap:12px}#connection-account:empty{display:none}
:root{color-scheme:dark;--bg:#101012;--surface:#1c1c1f;--surface-raised:#242427;--line:#343437;--ink:#f5f5f7;--muted:#aaaab1;--accent:#b99aef;--lavender:#d2bdf3;--warning:#f0c28c;font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}html{scroll-padding-top:24px;scroll-behavior:auto}body{margin:0;min-width:320px;background:var(--bg);-webkit-font-smoothing:antialiased}main{max-width:1120px;margin:0 auto;padding:24px 32px 64px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:0 0 20px;border-bottom:1px solid var(--line)}
a{color:var(--lavender);text-underline-offset:3px}a:hover{color:var(--ink)}.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:20px;font-weight:700;letter-spacing:1.8px;line-height:1.2}.brand img{width:40px;height:40px;object-fit:cover;border-radius:12px}.brand small{display:block;margin-top:5px;font-size:9px;letter-spacing:1.5px;font-weight:500;color:var(--muted)}.badge{padding:6px 11px;border-radius:8px;background:var(--surface);color:var(--muted);font-size:12px;white-space:nowrap}
.intro{padding:56px 0 40px;max-width:760px}.intro h1{margin:0 0 24px;font-size:clamp(36px,5vw,60px);line-height:1.08;font-weight:650;letter-spacing:-2.2px}.intro h1 em{font-style:normal;color:var(--lavender)}.intro p:not(.eyebrow){color:var(--muted);font-size:17px;max-width:560px;margin:0 0 24px}.eyebrow,.section-number{display:block;color:var(--accent);font-size:11px;font-weight:650;letter-spacing:1.8px;margin:0 0 12px}.hero-tags{display:flex;gap:8px;flex-wrap:wrap}.hero-tags span{font-size:12px;color:var(--muted);background:var(--surface);padding:5px 10px;border-radius:7px}.notice{padding:14px 16px;background:#27221b;color:var(--warning);border:1px solid #4c4030;border-radius:12px;font-size:13px;margin:16px 0}
.card{padding:28px;margin:20px 0 0;background:var(--surface);border:1px solid #ffffff08;border-radius:20px}.card h2{margin:0 0 16px;font-size:21px;font-weight:650;letter-spacing:-.5px;line-height:1.25}.card h3{font-size:16px;letter-spacing:-.2px;font-weight:600;margin:28px 0 12px}.card p{margin:12px 0;font-size:14px;line-height:1.6;color:var(--muted)}.muted{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grid .card{margin-top:0}
label{display:block;margin:20px 0;color:var(--muted);font-size:13px;font-weight:500}input,textarea{display:block;width:100%;min-width:0;min-height:48px;margin-top:8px;padding:12px 14px;border:1px solid #505057;border-radius:11px;background:#141416;color:var(--ink);font:400 16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;transition:border-color 150ms,box-shadow 150ms}input:hover,textarea:hover{border-color:#777780}input:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px #b99aef33}input[readonly]{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;color:var(--lavender)}input::placeholder{color:#85858d}
button,a.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;padding:11px 18px;border:1px solid transparent;border-radius:10px;background:var(--accent);color:#21152f;font:600 14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-decoration:none;cursor:pointer;transition:background-color 150ms,color 150ms,opacity 150ms;overflow-wrap:anywhere;text-align:center}button:not(:disabled):hover,a.button[href]:hover{background:#cbb2f5;color:#21152f}button:active,a.button:active{opacity:.85}button:disabled{opacity:.5;cursor:default}.secondary,a.button.secondary{background:#303034;border-color:transparent;color:var(--ink)}button.secondary:not(:disabled):hover,a.button.secondary[href]:hover{background:#414147;color:var(--ink)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.actions,.device-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.actions{margin:16px 0}.price{float:right;color:var(--accent)}
#auth{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;padding:32px}.auth-copy{max-width:280px}.auth-copy p{margin-bottom:0}.auth-forms{min-width:0}.auth-forms form>label:first-child{margin-top:0}.auth-forms .actions{gap:8px}#forgot-form{border-top:1px solid var(--line);padding-top:20px;margin-top:24px}#registration-note{margin:0 0 20px}.autofill-username{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);border:0;pointer-events:none}
.app-layout{display:grid;grid-template-columns:192px minmax(0,1fr);gap:40px;align-items:start;margin-top:32px}.app-views{min-width:0;max-width:744px}.app-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:24px;padding:6px;background:var(--surface);border:1px solid #ffffff08;border-radius:16px}.app-nav a{display:flex;align-items:center;gap:12px;min-height:48px;padding:12px;text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);border-radius:10px;transition:color 150ms,background-color 150ms}.app-nav svg{width:21px;height:21px;flex-shrink:0}.app-nav a:hover{background:var(--surface-raised);color:var(--ink)}.app-nav a[aria-current="page"]{background:#b99aef1c;color:var(--lavender)}.screen-heading{margin:0 0 24px}.screen-heading h1{margin:0 0 10px;font-size:34px;letter-spacing:-1.1px;font-weight:650;line-height:1.15}.screen-heading h1:focus{outline:none}.screen-heading>p:last-child{font-size:15px;color:var(--muted);max-width:540px;margin:0}.screen-heading .eyebrow{margin-bottom:10px}.app-screen>.screen-heading+.card{margin-top:0}.app-screen{animation:enter 180ms ease-out both}
body[data-session="loading"] .intro,body[data-session="authenticated"] .intro,body[data-session="authenticated"] .portal-footer,body[data-session="authenticated"] #environment-notice{display:none}body[data-session="authenticated"]{min-height:100dvh}#subscription-status{font-size:28px;letter-spacing:-.7px}#expiry{color:var(--ink)}#provision{font-size:12px}#device-count{font-weight:600;color:var(--lavender)}.subscription-card{border-color:#b99aef33}.primary-screen-action{display:flex;justify-content:space-between;width:100%;margin-top:16px;padding:14px 18px}
.order{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.order>div{min-width:0}.order small{display:block;color:var(--muted);font-size:12px;margin-top:5px}footer{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;padding-top:20px;margin-top:20px;border-top:1px solid var(--line);color:var(--muted)}footer button{margin-left:auto}.account-card footer{padding:0;margin:0;border:0}.account-card #email{flex:1 1 240px;min-width:0;font-size:15px;overflow-wrap:anywhere}.account-card #logout{margin-left:auto}#sessions{margin-top:16px}#sessions>div{font-size:14px;padding:16px 0;border-top:1px solid var(--line)}
.plan-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}.plan-choice{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;min-width:0;white-space:normal;padding:16px;background:#252528!important;border:1px solid #45454c!important;color:var(--ink)!important}.plan-choice span{font-size:12px;font-weight:400;color:var(--muted)}.plan-choice[aria-pressed="true"]{border-color:var(--accent)!important;background:#b99aef12!important}
.device-list{list-style:none;margin:20px 0;padding:0}.device-list li{padding:18px 0;border-top:1px solid var(--line);overflow-wrap:anywhere}.device-list strong,.device-list small{display:block}.device-list strong{font-size:16px;font-weight:600;letter-spacing:-.2px}.device-list small{margin-top:5px;color:var(--muted);font-size:12px}.device-actions{margin-top:14px;gap:8px}.device-actions button{min-height:44px;padding:10px 13px;font-size:13px}.vpn-device .device-actions button:last-child{color:#f5aaa5}#add-vpn-device{margin:0 8px 8px 0}#refresh-devices{margin-bottom:8px}#device-capacity{display:block;appearance:none;width:100%;height:6px;margin:18px 0;border:0;border-radius:6px;background:#3d3d44;overflow:hidden;accent-color:var(--accent)}#device-capacity::-webkit-progress-bar{background:#3d3d44;border-radius:6px}#device-capacity::-webkit-progress-value{background:var(--accent);border-radius:6px}#device-capacity::-moz-progress-bar{background:var(--accent);border-radius:6px}
#connection-form{max-width:100%}#connection-account{overflow-wrap:anywhere;font-size:12px}#connection-result,#import-result{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}#connection-qr,#import-qr{display:block;max-width:100%;height:auto;margin:20px 0;border-radius:0;background:#fff;image-rendering:pixelated}#connection-qr-details{margin:18px 0}summary{cursor:pointer;color:var(--lavender);min-height:44px;padding:11px 0;font-size:14px}.routing-details{margin-top:24px;padding-top:12px;border-top:1px solid var(--line)}#routing-notice{font-size:13px}.inline-feedback{min-height:22px;color:var(--lavender)!important;overflow-wrap:anywhere}.inline-feedback:empty{min-height:0;margin:0}#connection-result{scroll-margin-top:20px}.connect-steps{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;align-items:start}.connect-steps .card{margin-top:0}.connect-steps .actions{align-items:stretch;flex-direction:column}.connect-steps #import-result .actions{flex-direction:row}.connect-steps .actions>a:not(.button){font-size:13px}
#message{color:var(--warning);font-size:14px;overflow-wrap:anywhere}#message:empty{display:none}#message:not(:empty){padding:12px 0}body[data-session="authenticated"] #message:not(:empty){position:fixed;z-index:30;right:24px;bottom:24px;width:calc(100% - 48px);max-width:460px;padding:14px 18px;background:#303034;border:1px solid #515159;border-radius:14px;box-shadow:0 8px 28px #0004;color:var(--ink);pointer-events:none}.portal-footer{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
dialog{width:calc(100% - 32px);max-width:440px;max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid #505057;border-radius:20px;background:#242427;color:var(--ink);box-shadow:0 24px 64px #0007}dialog h2{font-size:22px;letter-spacing:-.5px;line-height:1.25;margin:0 0 12px}dialog p{font-size:14px;line-height:1.6;color:var(--muted)}dialog::backdrop{background:#000a}#device-dialog-message{color:var(--warning)}.skip-link{position:fixed;top:12px;left:16px;z-index:50;transform:translateY(-180%);padding:10px 16px;background:var(--accent);color:#21152f;border-radius:8px}.skip-link:focus{transform:none}main:focus{outline:none}
button[aria-busy="true"]{position:relative;color:transparent!important;cursor:progress}button[aria-busy="true"]::after{content:"";position:absolute;left:calc(50% - 7px);top:calc(50% - 7px);width:14px;height:14px;border:2px solid #302239;border-right-color:transparent;border-radius:50%;animation:spin 700ms linear infinite}button.secondary[aria-busy="true"]::after{border-color:var(--ink);border-right-color:transparent}@keyframes spin{to{transform:rotate(360deg)}}@keyframes enter{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}[hidden]{display:none!important}
@media(max-width:760px){main{padding:16px 20px 40px}header{min-height:60px;padding-bottom:16px}.brand{font-size:18px;gap:10px}.brand img{width:36px;height:36px}.brand small{font-size:8px;letter-spacing:1.2px}.badge{font-size:10px;padding:5px 8px}.intro{padding:36px 0 28px}.intro h1{font-size:40px;letter-spacing:-1.6px}.intro p:not(.eyebrow){font-size:15px}.card{padding:22px;margin-top:16px;border-radius:18px}.card h2{font-size:20px}.card p{font-size:14px}#auth{grid-template-columns:1fr;padding:24px;gap:24px}.auth-copy{max-width:none}.auth-copy p{margin-top:10px}.auth-forms .actions{align-items:stretch}.auth-forms .actions button{flex:1 1 auto}.auth-forms #forgot-password{flex-basis:100%;background:transparent;color:var(--lavender)}.grid,.connect-steps{grid-template-columns:1fr;gap:16px}.screen-heading h1{font-size:30px;letter-spacing:-.9px}.screen-heading>p:last-child{font-size:14px}.screen-heading{margin-bottom:20px}.app-layout{display:block;margin-top:28px}.app-views{max-width:none}body[data-session="authenticated"] main{padding-bottom:calc(108px + env(safe-area-inset-bottom))}.app-nav{position:fixed;z-index:20;top:auto;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:#1c1c1f;border:0;border-top:1px solid #38383d;border-radius:0}.app-nav a{flex-direction:column;justify-content:center;gap:5px;min-height:54px;padding:6px 2px;border-radius:10px;font-size:10px;line-height:1.2}.app-nav svg{width:22px;height:22px}.app-nav a[aria-current="page"]{background:transparent;color:var(--lavender)}.app-nav a:not([aria-current="page"]){color:#b0b0b8}.plan-options{gap:10px}.plan-choice{padding:14px}.order{align-items:flex-start;flex-wrap:wrap}.order>div{flex:1 1 200px}.order button{flex:0 0 auto}.account-card footer{gap:12px}.portal-footer{flex-direction:column;gap:4px}body[data-session="authenticated"] #message:not(:empty){right:16px;width:calc(100% - 32px);bottom:calc(90px + env(safe-area-inset-bottom));font-size:13px}#subscription-status{font-size:26px}.device-actions{gap:8px}.device-actions button{padding:10px 12px}.connect-steps .card{margin-top:0}}
@media(max-width:374px){main{padding-right:16px;padding-left:16px}.card,#auth{padding:18px}.brand small{letter-spacing:.8px}.badge{display:none}.device-actions button{flex:1 1 auto}.plan-options{grid-template-columns:1fr}.intro h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}



@supports(interpolate-size:allow-keywords){
 .settings-group{interpolate-size:allow-keywords}
 .settings-group::details-content{block-size:0;overflow:clip;transition:block-size 180ms ease,content-visibility 180ms allow-discrete}
 .settings-group[open]::details-content{block-size:auto}
}