@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
.account-navigation{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px 24px;margin-left:16px}@media(max-width:600px){.account-navigation{flex-direction:column;align-items:flex-end;gap:8px}.account-navigation .back{font-size:11px;white-space:nowrap}}
:root{color-scheme:dark;font-family:Manrope,Arial,sans-serif;color:#eff9f7;background:#061315}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 9% 63%,#0f3437 0,transparent 38%),#061315}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}a{color:inherit;text-decoration:none}[hidden]{display:none!important}:focus-visible{outline:2px solid #38dce0;outline-offset:3px}.skip{position:absolute;top:-100px;left:16px;background:#38dce0;color:#061315;padding:12px;z-index:9}.skip:focus{top:12px}
.top{height:90px;border-bottom:1px solid #234044;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,5vw,80px)}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.06em}.brand small{display:block;font:500 8px 'DM Mono',monospace;letter-spacing:.4em;color:#b9d3d0}.accent,.eyebrow{color:#38dce0}.back{font-size:12px;font-weight:700;color:#a9c8c4}.back:hover{color:#38dce0}
.layout{display:grid;grid-template-columns:minmax(300px,1fr) minmax(380px,1fr);min-height:calc(100vh - 145px);max-width:1450px;margin:auto}.intro{position:relative;overflow:hidden;padding:clamp(55px,7vw,110px) clamp(28px,6vw,100px);border-right:1px solid #234044}.eyebrow,.diagram-label{font:500 10px 'DM Mono',monospace;letter-spacing:.18em}.intro h1{font-size:clamp(47px,5vw,76px);line-height:1.05;letter-spacing:-.08em;max-width:640px;margin:30px 0}.intro h1 em{font-style:normal;color:#38dce0}.intro>p:not(.eyebrow){font-size:16px;line-height:1.8;color:#a9c2bf;max-width:500px}.diagram{width:min(95%,430px);aspect-ratio:1;margin:30px auto 0;position:relative;display:grid;place-items:center}.diagram:before{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,#19bcc04d,transparent 70%);filter:blur(20px)}.diagram img{width:72%;z-index:1;filter:drop-shadow(0 20px 40px #17b2b457)}.orbit{position:absolute;width:95%;height:75%;border:1px solid #38dce045;border-radius:50%;transform:rotate(-25deg)}.orbit-two{width:75%;height:55%;border-style:dashed}.diagram-label{position:absolute;bottom:0;color:#6bafae}
.workspace{padding:clamp(36px,5vw,90px) clamp(24px,5vw,90px);display:flex;align-items:center;justify-content:center}.workspace>div{width:100%;max-width:620px}.loading{color:#9fc0bd}.tabs{display:flex;gap:30px;border-bottom:1px solid #315054}.tab{background:none;border:0;color:#83a19e;padding:0 0 16px;font-size:13px;font-weight:800}.tab.active{color:#eff9f7;border-bottom:2px solid #38dce0}.card{padding-top:35px}.form h2,#dashboard>h2{font-size:clamp(32px,3vw,46px);letter-spacing:-.065em;margin:0 0 10px}.form>p,.dash-lead{color:#9eb9b5;font-size:13px;line-height:1.7;margin:0 0 30px}.form label,.profile label{display:block;font-size:11px;font-weight:700;color:#bdd1ce;margin:18px 0}.form input,.profile input{display:block;width:100%;height:50px;padding:0 15px;margin-top:8px;border:1px solid #315054;border-radius:5px;background:#0b2022;color:#eff9f7;outline:0}.form input:focus,.profile input:focus{border-color:#38dce0}.primary,.secondary{min-height:50px;border:0;border-radius:5px;background:#38dce0;color:#062126;font-size:12px;font-weight:800;padding:0 20px}.primary{width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:28px}.primary:hover,.secondary:hover{background:#7ff3ec}.primary span{font-size:19px;font-weight:400}.text-button{padding:0;background:none;border:0;color:#63dcdb;font-size:12px;font-weight:700;margin-top:22px}.text-button:hover{text-decoration:underline}.google-area{text-align:center;border-top:1px solid #315054;margin-top:30px;padding-top:20px}.google-area span{display:block;color:#7e9a96;font-size:11px;margin-bottom:16px}.google{background:#142a2c;border:1px solid #416568;color:#e8f8f5;border-radius:5px;min-height:45px;width:100%;font-size:12px;font-weight:700}.message{padding:12px 15px;border:1px solid #5a8886;background:#143637;color:#d5f9f5;border-radius:5px;font-size:12px;line-height:1.6;margin-bottom:20px}.message.error{border-color:#b07171;background:#3a2023;color:#ffd6d6}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.dash-head .text-button{margin:0}#dashboard>h2{margin-top:25px}#greeting{color:#38dce0}.profile{border-top:1px solid #315054;padding-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:25px}.profile h3{margin:12px 0 7px;font-size:22px;letter-spacing:-.05em}.profile p{font-size:12px;line-height:1.6;color:#9eb9b5}.profile label{margin:0 0 12px}.secondary{min-height:43px}
.billing-consent{display:flex;align-items:flex-start;gap:8px;color:#bdd1ce;font-size:11px;line-height:1.5;margin:12px 0}.billing-consent input{margin:2px 0 0;flex:none}.billing-consent a{color:#38dce0;text-decoration:underline}
.billing-currency-label{display:block;color:#bdd1ce;font-size:11px;font-weight:700;margin:12px 0 6px}.billing-currency-label select{display:block;width:100%;margin-top:7px;padding:10px;border:1px solid #416568;border-radius:5px;background:#0b2022;color:#eff9f7;font:inherit}
footer{min-height:55px;border-top:1px solid #234044;padding:12px clamp(24px,5vw,80px);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font:500 10px 'DM Mono',monospace;color:#678f8c}
.google-area{border-top:0;border-bottom:1px solid #315054;margin-top:0;margin-bottom:25px;padding-top:0;padding-bottom:20px}.google-area span{margin-top:15px;margin-bottom:0}
.provider-link{border-top:1px solid #315054;margin-top:24px;padding-top:14px}.provider-link p{margin:0 0 11px}.provider-link .google{max-width:250px}
.privacy-note{font-size:11px;line-height:1.6;color:#9eb9b5;margin:18px 0 0}.privacy-note a,footer a{color:#38dce0;text-decoration:underline;text-underline-offset:3px}
.google-area #epic-button{margin-top:10px}
.plugin-pairing{margin:26px 0;padding:22px;border:1px solid #38dce0;background:#10282a}.plugin-pairing h3{margin:10px 0;font-size:22px}.plugin-pairing p{font-size:12px;line-height:1.6;color:#b8cfca}.plugin-pairing .secondary{margin-top:12px}
.purchase-history{border-top:1px solid #315054;padding:30px 0;margin-bottom:30px}.purchase-history-head{display:flex;align-items:start;justify-content:space-between;gap:16px}.purchase-history-head h3{margin:12px 0 7px;font-size:22px;letter-spacing:-.05em}.purchase-history-head .text-button{margin:4px 0 0;white-space:nowrap}.purchase-history>p,.purchase-item p{font-size:12px;line-height:1.6;color:#9eb9b5}.purchase-history-list{display:grid;gap:10px;margin-top:18px}.purchase-item{background:#10282a;border:1px solid #2a4a4c;padding:16px;min-width:0}.purchase-item-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.purchase-item-head strong{font-size:15px}.purchase-item-head span{color:#38dce0;font-size:11px}.purchase-item p{margin:9px 0 0}.purchase-item .purchase-reference{overflow-wrap:anywhere;color:#d5e8e4;font:11px/1.5 'DM Mono',monospace}#more-purchases{margin-top:14px}
@media(max-width:950px){.layout{grid-template-columns:1fr}.intro{padding:55px 28px 30px;border-right:0;border-bottom:1px solid #234044}.intro h1{max-width:650px}.diagram{display:none}.workspace{padding:50px 24px 75px}.workspace>div{max-width:680px}}
@media(max-width:570px){.top{height:75px}.brand{font-size:16px}.back{font-size:10px}.intro h1{font-size:46px}.profile{grid-template-columns:1fr}.purchase-history-head{display:block}.purchase-history-head .text-button{margin-top:8px}}

/* The signed-in portal gives the credit balance the full workspace. */
.signed-in .layout{display:block;max-width:1200px}.signed-in .intro{display:none}.signed-in .workspace{padding:48px clamp(24px,5vw,70px) 72px;align-items:flex-start}.signed-in .workspace>div{max-width:none}#dashboard>h2{overflow-wrap:anywhere}
.credits-panel{display:grid;grid-template-columns:1.1fr 1fr;margin:32px 0 40px;border:1px solid #315054;border-radius:16px;overflow:hidden;background:#10282a}.balance-panel{padding:32px;min-width:0;background:radial-gradient(ellipse at 0 100%,#16505580,transparent 75%)}.balance-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.balance-heading h3{margin:0;font-size:14px;font-weight:600;color:#bdd1ce}.credit-status{font:10px 'DM Mono',monospace;color:#67e5dd;border:1px solid #38605f;border-radius:20px;padding:7px 10px}.balance-display{margin:32px 0 24px}.balance-display strong{display:block;font-size:clamp(48px,6vw,84px);font-weight:800;letter-spacing:-.065em;line-height:1.15;font-variant-numeric:tabular-nums;color:#64eee5;overflow-wrap:anywhere}.balance-display>span{display:block;margin-top:8px;color:#bdd1ce;font-size:16px}.balance-display p,#billing-welcome{color:#a9c8c4;font-size:12px;line-height:1.6}#billing-welcome{margin:0 0 12px}.balance-panel .text-button{margin-top:12px}.top-up-panel{padding:32px;border-left:1px solid #315054;min-width:0}.top-up-panel h3{font-size:26px;letter-spacing:-.04em;margin:12px 0}.top-up-panel>p{font-size:12px;line-height:1.7;color:#9eb9b5;margin:0 0 22px}.billing-currency-label{font-size:12px}.billing-currency-label select{min-height:44px}.billing-consent{font-size:12px;margin:18px 0;gap:10px}.billing-consent input{width:16px;height:16px;accent-color:#38dce0}.credit-packs{display:grid;gap:10px}.credit-packs .secondary{width:100%;min-height:52px;font-size:13px;line-height:1.5;padding:12px 16px}.account-settings{border-top:1px solid #315054}.account-settings summary{padding:22px 0;cursor:pointer;color:#a9c8c4;font-size:13px;font-weight:700}.account-settings .profile{border-top:0;padding-top:8px}.purchase-history{border-top:0;padding-top:0;margin-bottom:28px}
@media(max-width:700px){.credits-panel{grid-template-columns:1fr}.top-up-panel{border-left:0;border-top:1px solid #315054}.balance-panel,.top-up-panel{padding:26px}.balance-display strong{font-size:clamp(48px,12vw,76px)}.signed-in .workspace{padding-top:32px}.signed-in #dashboard>h2{font-size:32px}}
