/* The six actual Keygate tools. Art is generated as a consistent transparent atlas. */
.generated-tool-art{display:block;background-image:url('/assets/tool-icons.png');background-size:300% 200%;background-repeat:no-repeat;aspect-ratio:1;width:100px;pointer-events:none}
.art-director{background-position:0% 0%}.art-design{background-position:50% 0%}.art-ppt{background-position:100% 0%}.art-avatar{background-position:0% 100%}.art-remix{background-position:50% 100%}.art-chat{background-position:100% 100%}
.studio-banner{position:relative;overflow:hidden;isolation:isolate;border-radius:23px;background:linear-gradient(115deg,#315ee4,#497df9 55%,#7eaeff);padding:28px 34px;color:#fff;min-height:244px;box-shadow:0 8px 25px #4872e81a}
.studio-banner:before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 80% 0%,#ccdfff80,transparent 65%)}
.studio-banner-copy{position:relative;z-index:2}.studio-banner-copy>span{font-size:11px;letter-spacing:2px;color:#dbe8ff}.studio-banner h2{font-size:34px;line-height:1.35;font-weight:700;margin:13px 0 9px;letter-spacing:.5px}.studio-banner-copy p{font-size:12px;color:#e0eaff;letter-spacing:1px}.studio-banner-copy>a{display:inline-flex;align-items:center;gap:18px;margin-top:19px;padding:0 17px;background:#fff;color:#3f64c3;border-radius:11px;font-size:13px;font-weight:650;box-shadow:0 5px 14px #254cb127}
.studio-banner-art{position:absolute;right:9%;bottom:-18px;transform:rotate(5deg);filter:drop-shadow(0 14px 15px #1a328e21)}.studio-banner-art .generated-tool-art{width:285px}
.studio-tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.studio-tool{position:relative;isolation:isolate;overflow:hidden;min-height:154px;border-radius:18px;padding:20px;background:#eef2ff;border:1px solid #e3eaff;box-shadow:inset 0 1px 0 #fff,0 2px 7px #647bb608;transition:transform .18s ease,box-shadow .18s ease}
.studio-tool:hover{transform:translateY(-3px);box-shadow:0 10px 25px #536fba15}.studio-tool-copy{position:relative;z-index:2;pointer-events:none}.studio-tool h3{font-size:18px;font-weight:700;color:#344775;letter-spacing:.1px}.studio-tool p{font-size:12px;color:#7a8bac;margin-top:7px;line-height:1.5}.studio-tool>.generated-tool-art{position:absolute;bottom:-8px;right:3px;width:123px;z-index:1;transition:transform .24s ease}.studio-tool:hover>.generated-tool-art{transform:translateY(-4px) rotate(3deg)}.studio-tool-arrow{position:absolute;left:20px;bottom:19px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ffffffc7;color:#7f93bb;box-shadow:0 3px 8px #8195be12}.studio-tool-arrow .icon{width:15px;height:15px}.studio-coral{background:#fff1ed;border-color:#ffe8df}.studio-coral h3{color:#945b4c}.studio-coral p{color:#b08779}.studio-apricot{background:#fff5e9;border-color:#faead7}.studio-apricot h3{color:#8e6a42}.studio-apricot p{color:#ac9477}.studio-sky{background:#eaf5ff;border-color:#dceeff}.studio-sky h3{color:#376c9b}.studio-sky p{color:#799bb8}.studio-purple{background:#f3ecff;border-color:#ebe0fe}.studio-purple h3{color:#74529c}.studio-purple p{color:#a08ab9}.studio-mint{background:#eaf6f4;border-color:#dcefeb}.studio-mint h3{color:#416f6c}.studio-mint p{color:#7b9c99}
.home-services{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:23px}.home-service{position:relative;isolation:isolate;min-height:106px;overflow:hidden;border-radius:17px;background:#e7f2ff;display:flex;align-items:center;padding:20px;border:1px solid #dfeafa}.home-service img{position:absolute;z-index:-2;right:0;top:0;width:100%;height:100%;object-fit:cover;object-position:right 70%}.home-service:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#e8f3ff 20%,#e8f3ffe8 45%,#e8f3ff00 80%)}.home-service.service-invite{background:#f0eaff;border-color:#e9e0f9}.home-service.service-invite:after{background:linear-gradient(90deg,#edf0ff 10%,#edf0ffe8 47%,#edf0ff00 90%)}.home-service h3{font-size:16px;font-weight:650;color:#3d6595}.home-service p{display:flex;align-items:center;gap:5px;font-size:12px;color:#839aba;margin-top:9px}.home-service p .icon{width:13px;height:13px}.service-invite h3{color:#6c63a5}.service-invite p{color:#928db3}
.brand img,.mobile-brand img,.login-brand img{object-fit:contain}.brand img,.mobile-brand img{border-radius:0}.login-brand img{width:54px;height:54px}.mobile-brand{gap:11px}.mobile-brand img{width:29px;height:29px}.brand{gap:13px}.brand img{width:34px;height:34px}.brand-small{letter-spacing:0}
.sidebar-note .little-star{display:none}.sidebar-note{padding-top:18px}.sidebar-note p{color:#7d87a1}.sidebar-note>span:last-child{color:#a2abc0}.home-welcome{margin-bottom:20px}.home-welcome p{color:#929bb1}.home-welcome h1{font-weight:700}.profile-header .profile-avatar{border-radius:22px;background:#fff}.profile-header .profile-avatar .icon{stroke-width:1.5}.profile-decoration{display:none}
button,a,input,select,textarea{transition:background-color .17s ease,border-color .17s ease,color .17s ease,box-shadow .17s ease,transform .17s ease}button:active:not(:disabled),a:active{transform:scale(.98)}.nav-item:active{transform:scale(.95)}.button.primary:hover{box-shadow:0 7px 18px #4d73ed30;filter:brightness(1.035)}.button.secondary:hover{background:#e8efff}.icon-button:hover{background:#edf2ff;border-radius:50%}.icon-button:active{background:#e1eaff}.mobile-nav{border:1px solid #ffffffed;box-shadow:0 -2px 28px #7f8fb815}.mobile-nav .nav-item.active{color:#4770ed}.mobile-nav .nav-item.active .icon{fill:#dfe8ff;stroke:#4770ed}.mobile-nav .nav-item .icon{transition:transform .2s ease}.mobile-nav .nav-item.active .icon{transform:translateY(-1px)}.mobile-nav .nav-item span{font-weight:550}#main{animation:page-in .23s ease-out}.modal-top .icon-button{color:#8a97b4}.modal-top h2{font-weight:650}.modal-body .button{margin-top:12px}dialog[open]{animation:dialog-in .22s ease-out}.modal-body .muted{font-size:14px;line-height:1.9}.modal-body .notice{border:0;background:#f4f6fd;border-radius:12px;color:#8794b0;padding:14px 16px}.phone-field{border-radius:12px;border-color:#e5ebf7;min-height:50px}.login-brand{padding-top:2px}.login-brand h3{font-size:22px;font-weight:650;letter-spacing:-.5px}.login-brand p{font-size:13px;color:#9ca6bc}.login-brand+.notice{margin:23px 0 18px}.purchase-list>div{border-color:#eef1f8;padding:19px 0}.purchase-list .icon{color:#8395be}.review-tool{gap:12px;font-size:15px}.review-details dt{color:#8b97b1}.review-details dd{color:#566584}.empty-art{border-radius:20px;background:#f1f4ff}.notice.error{background:#fff3f3;color:#b27272}.status-list p{color:#6e7f9f}
@keyframes page-in{from{opacity:.55;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes dialog-in{from{opacity:.5;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1150px){.studio-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-tool>.generated-tool-art{width:130px}.studio-banner-art{right:2%}}
@media(max-width:600px){.studio-banner{min-height:202px;padding:22px 23px;border-radius:19px}.studio-banner h2{font-size:29px;margin:11px 0 7px}.studio-banner-copy>span{font-size:10px;letter-spacing:1.5px}.studio-banner-copy p{font-size:11px;letter-spacing:.5px}.studio-banner-copy>a{min-height:38px;font-size:12px;margin-top:17px;border-radius:10px;padding:0 13px;gap:15px}.studio-banner-art{right:-26px;bottom:-5px}.studio-banner-art .generated-tool-art{width:207px}.studio-tool-grid{gap:12px}.studio-tool{min-height:139px;padding:16px;border-radius:16px}.studio-tool h3{font-size:17px}.studio-tool p{font-size:11px;letter-spacing:0;margin-top:6px}.studio-tool>.generated-tool-art{width:100px;bottom:-5px;right:-2px}.studio-tool-arrow{left:16px;bottom:16px;width:25px;height:25px}.studio-tool-arrow .icon{width:13px;height:13px}.home-services{gap:12px;margin-top:19px}.home-service{min-height:95px;padding:15px;border-radius:14px}.home-service h3{font-size:15px}.home-service p{font-size:11px;gap:3px;margin-top:7px}.home-service p .icon{width:11px}.home-service:after{background:linear-gradient(90deg,#e8f3ff 28%,#e8f3ffce 63%,#e8f3ff36)}.home-service.service-invite:after{background:linear-gradient(90deg,#edf0ff 28%,#edf0ffce 63%,#edf0ff36)}.creation-section{margin-top:25px}.section-heading h2{font-size:19px}.section-heading>a{font-size:12px}.home-welcome h1{font-size:25px}.home-welcome p{font-size:12px}.home-welcome{margin-bottom:18px}.draft-text strong{font-size:13px}.draft-text>span{font-size:11px}.profile-rows strong{font-size:15px}.profile-rows small{font-size:12px}.profile-summary span{font-size:12px}.profile-header h1{font-size:21px}.profile-header button{font-size:12px}.mobile-nav .nav-item{font-size:12px}.site-footer{padding-bottom:calc(105px + env(safe-area-inset-bottom))}.modal-top h2{font-size:18px}.modal-body .notice{font-size:12px}}
@media(max-width:365px){.studio-tool{padding:14px;min-height:134px}.studio-tool h3{font-size:16px}.studio-tool p{font-size:10px}.studio-tool>.generated-tool-art{width:94px;right:-4px}.studio-banner-art{right:-45px}.studio-banner h2{font-size:27px}.home-welcome h1{font-size:24px}.home-service{padding:13px}.home-service h3{font-size:14px}.home-service p{font-size:10px}.home-service p .icon{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.studio-banner-copy{padding-top:5px}.studio-banner h2{margin-top:6px}.membership-banner{min-height:126px}.membership-banner h2{margin-top:0}.site-footer{min-height:25px;padding-top:0}.composer-intro{min-height:100px}.works-intro{min-height:96px}.composer-bottom{padding-top:14px}
@media(max-width:600px){.studio-banner{min-height:188px}.studio-banner-copy{padding-top:4px}.membership-banner{min-height:100px}.membership-banner button{bottom:auto;top:calc(50% - 16px)}.home-welcome{margin-top:3px;margin-bottom:18px}.site-footer{padding-bottom:calc(103px + env(safe-area-inset-bottom))}}
.home-primary{margin-top:0}.home-primary .section-heading h1{font-size:23px;line-height:1.5;font-weight:700;letter-spacing:-.4px}
@media(max-width:800px){.topbar{display:none}main{min-height:calc(100dvh - 110px);padding-top:22px}.home-primary .section-heading{margin-bottom:18px}.home-primary .section-heading h1{font-size:23px}.home-primary .studio-tool{min-height:146px}.community .cm-heading{margin-top:0}.profile-header{padding-top:7px}}

/* Account keeps only the existing account, credits and service actions. */
body:has(.profile-account){background:linear-gradient(155deg,#f5f8ff 0%,#f5f4fc 70%,#f7f8fc 100%)}
.profile-account{max-width:760px;margin:0 auto;color:#202126}
.profile-account .profile-header{padding:10px 2px 26px;gap:17px}
.profile-account .profile-avatar{width:70px;height:70px;flex-shrink:0;border:1px solid #fff;border-radius:50%;background:#fff;color:#919bb0;box-shadow:0 5px 20px #7184ad0b}
.profile-account .profile-avatar>.icon{width:38px;height:38px}
.profile-account .profile-header h1{font-size:24px;line-height:1.5;font-weight:700;color:#202126}
.profile-account .profile-header button{font-size:14px;min-height:36px;margin-top:1px;color:#7e8392}
.profile-credit-card{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:124px;padding:23px 25px;background:linear-gradient(112deg,#353538 0%,#252527 65%,#303033 100%);border:1px solid #39393d;border-radius:16px;box-shadow:0 6px 18px #24232a13}
.profile-credit-card h2{margin:0;color:#e9d3a4;font-size:16px;line-height:1.5;font-weight:500}
.profile-credit-card strong{display:block;margin-top:10px;color:#f8e5b6;font-size:29px;line-height:1.2;font-weight:650}
.profile-credit-card>button{min-height:40px;min-width:94px;padding:9px 23px;border:0;border-radius:99px;background:linear-gradient(110deg,#fff0cd,#ffe5af);color:#554125;font-size:16px;font-weight:650;line-height:1.3}
.profile-credit-card>button:hover{background:#ffedc6}
.profile-account .profile-services{margin-top:20px}
.profile-account .profile-rows{display:grid;gap:11px;border:0;border-radius:0;background:transparent;overflow:visible}
.profile-account .profile-rows>a,.profile-account .profile-rows>button{min-height:67px;padding:17px 20px;gap:15px;border:0;border-radius:14px;background:#fff;color:#202126;box-shadow:0 4px 18px #7185b00d}
.profile-account .profile-rows>a:hover,.profile-account .profile-rows>button:hover{background:#fdfdff;box-shadow:0 6px 22px #7185b018}
.profile-account .profile-rows strong{font-size:18px;line-height:1.5;font-weight:500;color:#202126}
.profile-account .profile-rows>a>.icon,.profile-account .profile-rows>button>.icon{width:19px;height:19px;margin-left:auto;color:#282a31}
.profile-account .profile-rows>a>.profile-service-icon,.profile-account .profile-rows>button>.profile-service-icon{display:block;flex:0 0 28px;width:28px;height:28px;margin-left:0;object-fit:contain;color:#9297a5}
@media(max-width:500px){.profile-account .profile-header{padding-top:7px;gap:16px}.profile-account .profile-header h1{font-size:23px}.profile-credit-card{min-height:120px;padding:22px 22px}.profile-account .profile-rows>a,.profile-account .profile-rows>button{padding:16px 18px;min-height:65px}}