/* iLikePixel's own pixel language. Tool artwork and six identity colors stay intact. */
:root{--bg:#f5f4ee;--text:#202831;--muted:#626c75;--border:#d7d9d2;--accent-text:#0e6eb8;--accent-bg:#fff8c9;--link:#0e6eb8;--brand-yellow:#f7ee12;--brand-soft:#fff8c9;--radius:5px;--radius-sm:4px;--shadow:4px 4px 0 #20283112}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:150;border:5px solid var(--brand-yellow);border-radius:3px}
.site-topbar{border-bottom:3px solid var(--brand-yellow);background:#fffffffa}
.desktop-nav a{transition:color .12s}.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:#0e6eb8}
.button,.category-button,.icon-button,.login-button,.member-tab,.text-field,.credit-pill,.plan-pill,.tool-status,.billing-badge,.billing-save,kbd{border-radius:4px}
.button{border:2px solid #202831;box-shadow:2px 2px 0 #20283118;transition:background .12s,color .12s,box-shadow .12s,transform .12s}
.button.primary,.button.upgrade{background:var(--brand-yellow);color:#202831;border-color:#202831}
.button.subtle,.closing-section .button{background:#fff;color:#202831;border-color:#f7ee12}
.button:not(:disabled):hover,.login-button:hover,.icon-button:hover{background:#202831;color:#fff8c9;border-color:#202831;box-shadow:3px 3px 0 #f7ee12;transform:translate(-1px,-1px)}
.button:active{transform:translate(1px,1px);box-shadow:none}
.category-button{border:2px solid transparent}.category-button.active{background:#202831;color:#fff8c9;border-color:#202831}.category-button:hover{background:var(--brand-soft);color:#202831;border-color:#f7ee12}
:is(button,a,summary,select,input):focus-visible{outline:3px solid #0e6eb8;outline-offset:3px}
.hero{background:linear-gradient(180deg,#fffdf2 0%,#f5f4ee 100%)}
.hero-brand,.eyebrow,.hero .eyebrow{color:#0e6eb8}.hero h1{color:#202831;text-wrap:balance}
.hero-pixels i{border-radius:0;transform:none;opacity:.8;background:#f7ee12;box-shadow:12px 12px 0 #fff8c9}
.hero-pixels i:nth-child(2),.hero-pixels i:nth-child(4){background:#675c89;box-shadow:none}.hero-pixels i:nth-child(3){background:#4b9daa}.hero-pixels i:nth-child(5){background:#f7ee12}
.tool-card{border-radius:5px;box-shadow:4px 4px 0 #2028310b;overflow:hidden;transition:background .14s,transform .14s,box-shadow .14s}
.tool-card::after{content:"";position:absolute;right:0;bottom:0;width:9px;height:9px;background:var(--card-border);box-shadow:-9px 0 0 #fff,0 -9px 0 #fff;pointer-events:none}
.tool-card:hover{background:#fffdf0;transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--card-border);border-color:var(--card-border)}
.tool-card:hover .card-arrow{color:#202831}.tool-status.ready i{border-radius:0}.tool-status{background:#f6f7f3}
.benefits-section{position:relative}.benefit-icon{border:2px solid #f7ee12;border-radius:4px;background:#fff8c9;color:#202831;box-shadow:3px 3px 0 #20283116;width:46px;height:46px}
.benefit-icon .ui-icon{width:26px;height:26px;shape-rendering:crispEdges}
.closing-section{position:relative;background:#fffdf2;border:2px solid #f7ee12;border-radius:5px;box-shadow:4px 4px 0 #20283112;overflow:hidden}
.closing-section::before{content:"";position:absolute;right:12px;top:12px;width:7px;height:7px;background:#f7ee12;box-shadow:-9px 9px 0 #ded4ae,-18px 0 0 #675c89;pointer-events:none}
#site-footer{border-top:3px solid #f7ee12;background:#fffdf8;position:relative}#site-footer::before{content:"";position:absolute;left:24px;top:-11px;width:8px;height:8px;background:#f7ee12;box-shadow:8px 8px 0 #f7ee12,24px 0 0 #675c89,40px 8px 0 #4b9daa;pointer-events:none}
.plan-card,.docs-sidebar,.shortcut-table,.mock-note,.warning-note,.subscription-rules,.account-summary,.wallet-meta,.member-empty,.member-error,.member-notice,#site-dialog{border-radius:5px;box-shadow:var(--shadow)}
.plan-card.pro-card,.billing-card[data-billing-period=yearly]{background:#fffdf2;border-color:#f7ee12;animation:none;box-shadow:4px 4px 0 #f7ee1233}
.billing-card[data-billing-period=yearly] .effective-price{color:#0e6eb8}.billing-badge{background:#fff8c9;color:#0e6eb8;border-color:#f7ee12}.subscription-rules{background:#fffdf2;border-color:#ded4ae}.plan-features .ui-icon,.subscription-rules>.ui-icon{color:#0e6eb8}
.member-tab[aria-selected=true]{background:#fff8c9;color:#202831}.member-tab:hover{background:#fff8c9;color:#202831}.member-fact{border-color:#d7d9d2}.dialog-heading .icon-button{border:1px solid #d7d9d2;border-radius:4px}
.tool-heading{background:#202831;border-bottom:3px solid #f7ee12}.tool-heading .text-button{color:#f7ee12}.desktop-advisory{border-bottom:1px solid #414952;background:#29323b}
.tool-stage,.tool-frame{background:#141c25}.shortcut-popover{border-radius:4px}.version-pill{border-radius:3px}
.site-topbar.dark{background:#18232e;border-bottom:3px solid #f7ee12}.site-topbar.dark .button.upgrade{background:#f7ee12;color:#18212b;border:2px solid #f7ee12}.site-topbar.dark .desktop-nav a:hover,.site-topbar.dark .desktop-nav a[aria-current=page]{color:#219cd9}
@media(max-width:767px){body::after{border-width:3px}.hero-pixels{opacity:.45}.desktop-advisory{display:none!important}.tool-heading{padding-top:13px;padding-bottom:13px}.tool-heading .tool-subtitle-line>span{display:none}.tool-stage{min-height:calc(100dvh - 145px)}.tool-frame{min-height:calc(100dvh - 145px)}.mobile-menu{border-bottom:3px solid #f7ee12}.closing-section{padding:24px}.button{min-height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.button,.tool-card,.card-arrow{transition:none}}

/* Jack's logo colors: yellow #f7ee12, blue gradient #0e6eb8/#219cd9,
 * purple #7e308e. Links use blue; violet hover surfaces keep readable blue text. */
:root{--brand-blue:#0e6eb8;--brand-blue-light:#219cd9;--brand-purple:#7e308e;--hover-purple:#3b1646}
:is(a,.text-button,summary):hover{color:var(--brand-blue)}
.desktop-nav a:hover,.desktop-nav a[aria-current=page],.hero-brand,.eyebrow,.hero .eyebrow{color:var(--brand-blue)}
:is(.button,.login-button,.icon-button,.category-button,.member-tab):not(:disabled):hover{background:var(--hover-purple);color:var(--brand-blue-light);border-color:var(--brand-purple);box-shadow:3px 3px 0 #7e308e33}
.tool-card:hover :is(h3,.card-arrow){color:var(--brand-blue)}
.tool-heading .text-button:hover,.site-topbar.dark :is(a,.text-button):hover{color:var(--brand-blue-light)}
.site-topbar.dark :is(.button,.login-button,.icon-button):not(:disabled):hover{background:var(--hover-purple);color:var(--brand-blue-light);border-color:var(--brand-purple)}
body:has(#tool-container-outline_harmonizer){--tool-bg:#24161e;--tool-header:#2b1b24;--tool-panel:#34222c;--tool-card:#402b35;--tool-line:#637f76;--tool-stitch:#aac6b8;--tool-accent:#e94f98;--tool-action:#f58db9;--tool-soft:#f9e5dd;--tool-soft2:#b7dacb;--tool-ink:#3b2630;--tool-muted:#d1b9c3;--tool-hover:#612b47;--tool-hoverText:#ffe4ee;--tool-checkA:#30222a;--tool-checkB:#251920}
body:has(#tool-container-pixel_fx_filter_builder){--tool-bg:#1d1926;--tool-header:#241e30;--tool-panel:#2c2539;--tool-card:#383047;--tool-line:#81745f;--tool-stitch:#c1ac84;--tool-accent:#8c5be8;--tool-action:#bda2f3;--tool-soft:#e8dff2;--tool-soft2:#d9d1c2;--tool-ink:#302738;--tool-muted:#c5bbd5;--tool-hover:#513773;--tool-hoverText:#f2e8ff;--tool-checkA:#2c2536;--tool-checkB:#221c2c}
body:has(#tool-container-palette_lab){--tool-bg:#15261f;--tool-header:#1b2e24;--tool-panel:#20372a;--tool-card:#2b4334;--tool-line:#866850;--tool-stitch:#c69d78;--tool-accent:#2e9f6b;--tool-action:#6ecd9c;--tool-soft:#d7e8d1;--tool-soft2:#e7caaa;--tool-ink:#263a2a;--tool-muted:#baceba;--tool-hover:#315940;--tool-hoverText:#e0f7e4;--tool-checkA:#24392b;--tool-checkB:#1b2d22}
body:has(#tool-container-frame_animator){--tool-bg:#15242a;--tool-header:#1b2e36;--tool-panel:#213841;--tool-card:#2c4650;--tool-line:#886b61;--tool-stitch:#d3a38d;--tool-accent:#1bafd0;--tool-action:#6ad3e5;--tool-soft:#d4eaec;--tool-soft2:#e8b88c;--tool-ink:#24353a;--tool-muted:#b5d0d5;--tool-hover:#2b5968;--tool-hoverText:#e2faff;--tool-checkA:#253a42;--tool-checkB:#1b2d34}
body:has(#tool-container-pixel_normal_map_builder){--tool-bg:#171f2c;--tool-header:#1e293a;--tool-panel:#263248;--tool-card:#33415b;--tool-line:#877654;--tool-stitch:#cab17d;--tool-accent:#234faf;--tool-action:#87a9eb;--tool-soft:#dce3ee;--tool-soft2:#d9bcaa;--tool-ink:#243047;--tool-muted:#becbdc;--tool-hover:#304a78;--tool-hoverText:#e2ecff;--tool-checkA:#283348;--tool-checkB:#1e2839}

body:has(.tool-shell):not(:has(.godot-compact-shell)){background:var(--tool-bg,#141c25)}
body:has(.tool-shell) .site-topbar.dark{background:var(--tool-header,#18232e)}
.tool-heading{background:var(--tool-panel,#202831)}
.tool-stage,.tool-frame{background:var(--tool-bg,#141c25)}
body:has(.tool-shell) :is(.tool-subtitle-line,.tool-heading-right){color:var(--tool-muted,#b4bdc6)}
/* Monthly and quarterly stay blue; the annual PRO card has the rainbow marquee. */
.billing-card[data-billing-period=monthly],.billing-card[data-billing-period=quarterly]{
 border:3px solid #a9d9eb;
 background:linear-gradient(160deg,#fffef4,#fff8dc);
 box-shadow:3px 3px 0 #a9d9eb26;
 animation:none;
}
.billing-card[data-billing-period=yearly]{
 --yearly-angle:0deg;
 border:3px solid transparent;
 background:linear-gradient(160deg,#fffef4,#fff8dc) padding-box,
  conic-gradient(from var(--yearly-angle),#58dcff 0 14%,#a56bff 25%,#ff70b7 42%,#f7ee12 58%,#53dda2 73%,#58dcff 88% 100%) border-box;
 box-shadow:3px 3px 0 #7e308e14;
 animation:yearly-border-marquee 4.2s linear infinite;
}
@media(prefers-reduced-motion:reduce){.billing-card[data-billing-period=yearly]{animation:none}}

/* Each editor's outer window follows the exact logo frame identity, like bodywork/trim. */
body:has(.tool-shell)::after{border-color:var(--tool-accent,#d49b00)}
body:has(.tool-shell) .site-topbar.dark{border-bottom-color:var(--tool-accent,#d49b00)}
body:has(.tool-shell) .tool-heading{border-bottom-color:var(--tool-line,#6a583c)}
body:has(.tool-shell) .tool-heading .text-button{color:var(--tool-action,#edca84)}
body:has(.tool-shell) .tool-heading .text-button:hover{color:var(--tool-soft2,#e7d4ba)}
body:has(.tool-shell) .shortcut-help>button{background:var(--tool-card,#40300a);border-color:var(--tool-accent,#d49b00);color:var(--tool-action,#edca84)}
body:has(.tool-shell) :is(.credit-pill,.version-pill){border-color:var(--tool-line,#6a583c)}
body:has(.tool-shell) .version-pill{background:var(--tool-header,#352a1a);color:var(--tool-muted,#d4c6af)}
body:has(.tool-shell) .shortcut-popover{background:var(--tool-header,#352a1a);border-color:var(--tool-line,#6a583c);color:var(--tool-muted,#d4c6af)}
body:has(.tool-shell) .shortcut-popover kbd{background:var(--tool-card,#40300a);border-color:var(--tool-line,#6a583c);color:var(--tool-soft2,#e7d4ba)}
body:has(.tool-shell){--editor-muted:var(--tool-muted,#d4c6af)}
body.is-godot-tool{--tool-bg:#292114;--tool-header:#352a1a;--tool-accent:#d49b00;--tool-line:#6a583c;--tool-card:#40300a;--tool-action:#edca84;--tool-soft2:#e7d4ba}

/* Simple colorful pixel benefits and sky-blue PRO framing, requested by Jack. */
.benefit-icon .ui-icon{width:28px;height:28px}
.closing-section{border-color:#38bdf0;box-shadow:4px 4px 0 #38bdf014}
.closing-section .button{border-color:var(--brand-yellow)}
.closing-section .button:not(:disabled):hover{color:var(--brand-yellow);border-color:var(--brand-yellow)}

/* Pricing reads as aligned cards, not narrow columns with broken badge words. */
.pricing-page,#site-dialog[data-kind=pricing]{container-type:inline-size;container-name:pricing-layout}
.pricing-grid-four{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1100px;gap:22px}
.pricing-grid-four .plan-card{padding:28px 24px}
.plan-card-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;min-height:58px}
.plan-card-top .eyebrow,.free-card>.eyebrow{font-size:11px;letter-spacing:1.3px;white-space:nowrap;word-break:normal;overflow-wrap:normal}
.free-card>.eyebrow{min-height:58px}
.billing-badge{font:750 11px/1.5 var(--font);letter-spacing:0;padding:5px 9px;max-width:none;white-space:nowrap;word-break:normal;overflow-wrap:normal;text-align:center}
.billing-price-row{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:94px;margin:18px 0 10px}
.billing-price-row h3{display:flex;flex-wrap:nowrap;align-items:baseline;gap:6px;white-space:nowrap}
.billing-price-row .effective-price,.pricing-grid-four .free-card>h3{font-size:36px;letter-spacing:-1px}
.pricing-grid-four .plan-card h3 small{font-size:13px;white-space:nowrap;flex:none}
.pricing-grid-four .free-card>h3{display:flex;align-items:baseline;gap:6px;min-height:94px;margin:18px 0 10px}
.billing-price-meta{gap:8px}
.billing-total{font-size:12px;overflow-wrap:normal;word-break:normal}
.billing-save{font-size:11px}
.pricing-grid-four .plan-card>p{font-size:13px;line-height:1.7;min-height:48px;word-break:normal;overflow-wrap:normal}
.pricing-grid-four .plan-features{font-size:13px;line-height:1.7;gap:14px;margin:24px 0 28px}
.plan-features li>span{min-width:0;word-break:normal;overflow-wrap:normal}
.pricing-grid-four .button{font-size:13px;min-height:44px;word-break:normal;overflow-wrap:normal}
@media(max-width:740px){.pricing-page.container{width:calc(100% - 32px)}.pricing-grid-four{grid-template-columns:1fr;max-width:520px}}
@container pricing-layout (min-width:1360px){.pricing-grid-four{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1420px}}
@container pricing-layout (max-width:680px){.pricing-grid-four{grid-template-columns:1fr;max-width:520px}}
@container pricing-layout (max-width:380px){.plan-card-top{grid-template-columns:1fr;gap:6px}.billing-badge{justify-self:end}.pricing-grid-four .plan-card{padding:24px 20px}.billing-price-row .effective-price,.pricing-grid-four .free-card>h3{font-size:32px}}
@media(max-width:1150px){body:has(.pricing-page) .desktop-nav,body:has(.pricing-page) .desktop-account{display:none}body:has(.pricing-page) .menu-button{display:grid;margin-left:auto}}

/* Mobile browser chrome and rubber-band scroll must not drag horizontal frame bars. */
@media(max-width:767px){
 html{overscroll-behavior-y:none}
 body::after{border-top-width:0;border-bottom-width:0;border-radius:0}
}

/* Cute pixel stories: one calm 4.8 second loop, with readable resting poses. */
.benefit-icon{width:88px;height:88px}
.benefit-icon .animated-benefit{width:72px;height:72px;overflow:visible}
.animated-benefit g{transform-box:view-box}
.computer-arrow{animation:pixel-download 4.8s ease-in-out infinite}
.computer-flash{opacity:0;animation:pixel-screen-flash 4.8s linear infinite}
.computer-face{opacity:0;animation:pixel-screen-face 4.8s linear infinite}
.money-bag{transform-origin:24px 41px;animation:pixel-bag-puff 4.8s ease-in-out infinite}
.coin-rise{opacity:0;animation:pixel-coin-rise 4.8s ease-in-out infinite}
.coin-spin{transform-origin:24px 22px;animation:pixel-coin-spin .7s linear infinite}
.coin-spark{opacity:0;animation:pixel-coin-spark 4.8s linear infinite}
.treasure-chest{transform-origin:24px 42px;animation:pixel-chest-hop 4.8s ease-in-out infinite}
.chest-lid{transform-origin:9px 27px;animation:pixel-chest-open 4.8s ease-in-out infinite}
.burst-particle{opacity:0;transform-origin:0 0;animation:pixel-treasure-burst 4.8s ease-in-out infinite}
.burst-star{--fly-x:-13px;--fly-y:-21px;--fall-x:-20px;--turn:-100deg}
.burst-ball{--fly-x:11px;--fly-y:-19px;--fall-x:19px;--turn:140deg}
.burst-book{--fly-x:1px;--fly-y:-24px;--fall-x:6px;--turn:65deg}
.burst-mini-star{--fly-x:-20px;--fly-y:-10px;--fall-x:-23px;--turn:-160deg}
.burst-confetti{--fly-x:20px;--fly-y:-9px;--fall-x:23px;--turn:200deg}
@keyframes pixel-download{0%,8%{transform:translateY(-2px);opacity:0}14%,24%{transform:translateY(0);opacity:1}43%{transform:translateY(17px);opacity:1}49%,100%{transform:translateY(20px);opacity:0}}
@keyframes pixel-screen-flash{0%,44%,100%{opacity:0}50%{opacity:.38}58%{opacity:.08}66%{opacity:.28}74%,90%{opacity:0}}
@keyframes pixel-screen-face{0%,55%,100%{opacity:0}65%,88%{opacity:1}95%{opacity:0}}
@keyframes pixel-bag-puff{0%,12%,100%{transform:scale(1.15,.42)}27%{transform:scale(.96,1.05)}36%,48%{transform:scale(1,1)}54%{transform:scale(1.08,.92)}65%,85%{transform:scale(1,1)}94%{transform:scale(1.12,.48)}}
@keyframes pixel-coin-rise{0%,33%{transform:translateY(4px);opacity:0}40%{transform:translateY(0);opacity:1}53%,78%{transform:translateY(-14px);opacity:1}90%{transform:translateY(2px);opacity:0}100%{opacity:0}}
@keyframes pixel-coin-spin{0%,100%{transform:scaleX(1)}25%,75%{transform:scaleX(.12)}50%{transform:scaleX(-1)}}
@keyframes pixel-coin-spark{0%,45%,90%,100%{opacity:0}56%,72%{opacity:1}64%,82%{opacity:.25}}
@keyframes pixel-chest-hop{0%,12%,100%{transform:translateY(0) scale(1)}18%{transform:translateY(1px) scale(1.06,.92)}27%{transform:translateY(-6px) scale(.98,1.02)}35%{transform:translateY(0) scale(1.04,.96)}42%,90%{transform:translateY(0) scale(1)}}
@keyframes pixel-chest-open{0%,30%,96%,100%{transform:translateY(0) rotate(0)}42%,78%{transform:translateY(-3px) rotate(-27deg)}90%{transform:translateY(-1px) rotate(-10deg)}}
@keyframes pixel-treasure-burst{0%,38%{opacity:0;transform:translate(0,0) scale(.5) rotate(0)}44%{opacity:1}58%{opacity:1;transform:translate(var(--fly-x),var(--fly-y)) scale(1) rotate(var(--turn))}78%{opacity:1;transform:translate(var(--fall-x),7px) scale(.9) rotate(var(--turn))}88%,100%{opacity:0;transform:translate(var(--fall-x),15px) scale(.6) rotate(var(--turn))}}
@media(prefers-reduced-motion:reduce){
 .animated-benefit :is(g,rect){animation:none!important;transform:none}
 .computer-arrow{opacity:1}.computer-flash{opacity:0}.computer-face{opacity:0}
 .money-bag{transform:none}.coin-rise{opacity:1;transform:translateY(-14px)!important}.coin-spark{opacity:0}
 .chest-lid{transform:translateY(-3px) rotate(-18deg)!important}.burst-particle{opacity:0}
}

/* Compact account bar: guest, FREE member and PRO member share one layout. */
.topbar-wallet{display:inline-flex;align-items:center;gap:7px;flex:none}
.site-topbar .credit-pill{min-width:49px;min-height:38px;padding:7px 10px;font-size:13px}
.site-topbar .guest-login-button{background:var(--brand-yellow);color:#182635;border:2px solid #24303b;box-shadow:2px 2px 0 #24303b22;padding:7px 15px;min-height:38px}
.site-topbar .guest-login-button:hover{background:var(--hover-purple);color:var(--brand-yellow);border-color:var(--brand-yellow)}
.site-topbar .account-login-button{padding:5px 7px;min-width:0;max-width:190px;gap:7px}
.site-topbar .account-avatar{position:relative;display:inline-flex;flex:none;overflow:visible;max-width:none}
.site-topbar .account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:145px}
.site-topbar .pro-account .account-avatar{border-radius:8px;box-shadow:0 0 0 2px #8a62c5,3px 3px 0 #f7ee12;}
.site-topbar .pro-account .account-avatar::after{content:'';position:absolute;width:5px;height:5px;background:#38bdf0;right:-4px;top:-4px;box-shadow:-4px -3px 0 #f7ee12}
.site-topbar .language-compact{position:relative;gap:6px;flex:none;min-height:38px;padding:4px 7px;font-size:12px;cursor:pointer}
.site-topbar .language-compact select{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;padding:0}
.site-topbar .language-compact:focus-within{outline:2px solid #38bdf0;outline-offset:2px;border-radius:4px}
.site-topbar .locale-code{min-width:22px;font-weight:600;white-space:nowrap}
.site-topbar .locale-caret{width:6px;height:6px;border-bottom:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:3px;margin-top:-3px}
.wallet-meta small{display:block;margin-top:5px;color:var(--muted)}
@media(max-width:950px){
 .site-topbar .mobile-menu{padding:14px 16px 16px;top:100%;max-height:calc(100dvh - var(--topbar-height));overflow-y:auto}
 .site-topbar .mobile-menu nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-bottom:12px;margin-bottom:12px}
 .site-topbar .mobile-menu nav a{display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;padding:8px 3px;font-size:13px;border-radius:4px;background:#edf8fc}
 .site-topbar .mobile-account{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;flex-wrap:nowrap}
 .site-topbar .mobile-account>*{width:auto;min-width:0}
 .site-topbar .mobile-account .account-login-button{max-width:none;justify-content:flex-start;min-height:44px;padding:4px 3px;font-size:13px}
 .site-topbar .mobile-account .account-name{max-width:100%;min-width:0}
 .site-topbar .mobile-account .credit-pill,.site-topbar .mobile-account .language-compact{min-height:44px}
 .site-topbar .mobile-account .plan-pill{min-height:27px;padding:3px 7px}
 .site-topbar .mobile-account .guest-login-button{padding:7px 10px;min-height:44px}
}

/* Provider identity, clear language globe and purple/yellow category controls. */
.button.auth-provider{--provider-bg:#ea4335;display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:11px 18px;background:var(--provider-bg);border:2px solid var(--brand-yellow);color:#fff;box-shadow:2px 2px 0 #24303b18}
.button.auth-provider.discord{--provider-bg:#5865f2}
.button.auth-provider.facebook{--provider-bg:#0866ff}
.button.auth-provider:not(:disabled):hover,.button.auth-provider:not(:disabled):active{background:var(--provider-bg);color:#fff;border-color:var(--brand-yellow);box-shadow:3px 3px 0 #24303b30;filter:brightness(.91)}
.button.auth-provider:focus-visible{outline:3px solid var(--brand-blue-light);outline-offset:3px}
.button.auth-provider:disabled{background:var(--provider-bg);color:#fff;border-color:var(--brand-yellow);opacity:.72;cursor:not-allowed}
.auth-provider-logo{width:22px;height:22px;flex:none;fill:currentColor}
.auth-provider-label{min-width:0;line-height:1.45}
.auth-provider-status{display:block;font-size:11px;font-weight:500;margin-top:3px;color:inherit}
.category-list .category-button.active{background:var(--hover-purple);color:var(--brand-yellow);border-color:var(--brand-purple);box-shadow:2px 2px 0 #7e308e33}
.ui-icon.globe-icon{shape-rendering:auto;image-rendering:auto}
.language-control .globe-icon{width:20px;height:20px;flex:none}

/* FREE pricing links home; hover changes only text and arrow color. */
.free-card .button.subtle:not(:disabled):hover{background:var(--hover-purple);color:var(--brand-yellow);border-color:var(--brand-yellow);box-shadow:2px 2px 0 #20283118;transform:none}

/* Invite guests to raise their cap; only the current server balance is shown. */
.member-invite{padding:14px 0;margin:8px 0;color:var(--text,#202a33)}
.member-invite p{margin:4px 0 12px;color:var(--muted,#647080);line-height:1.6}
.member-invite[hidden]{display:none!important}
.home-member-invite{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fffdf2;border:2px solid #38bdf0;box-shadow:4px 4px 0 #38bdf014;padding:18px 24px;margin:0 auto 28px;border-radius:5px}
.home-member-invite p{margin-bottom:0;font-size:14px}
.home-member-invite .button{flex-shrink:0}
.home-member-invite .button:not(:disabled):hover{background:var(--hover-purple);color:var(--brand-yellow);border-color:var(--brand-yellow)}
.free-card .member-invite{padding:0;margin:0 0 12px}
@media(max-width:600px){.home-member-invite{flex-direction:column;align-items:stretch;padding:16px;gap:12px}.home-member-invite .button{width:100%}}

/* Email account forms share the existing brand colors. */
.email-auth-form{display:grid;gap:12px;min-width:0}.email-auth-form .member-input{width:100%;box-sizing:border-box}.email-auth-links{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-top:16px}.auth-divider{text-align:center;margin:18px 0;color:var(--text-muted,#687482)}#email-auth-status{margin:0;overflow-wrap:anywhere}.email-auth-form button:disabled{opacity:.65}

/* Original task entries and workflow examples. */
.task-entry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-block:24px}
.task-entry>div{display:flex;flex-direction:column;gap:12px;padding:22px;border:2px solid #a37828;background:var(--surface,#fff)}
.task-entry a{color:inherit;font-size:20px;font-weight:700}
.tool-intro{padding:10px 22px;background:var(--tool-header,#18232e);display:flex;gap:20px;align-items:center;color:var(--tool-muted,#c6ced7)}
.tool-intro p{margin:0;flex:1}.tool-intro a,.tool-walkthrough a{color:var(--tool-action,#edca84)}
body.is-tool:has(.tool-walkthrough){height:auto;min-height:100dvh;overflow:auto}
body.is-tool:has(.tool-walkthrough) #main-content{display:block}
body.is-tool:has(.tool-walkthrough) .tool-shell{height:calc(100dvh - 76px);min-height:520px}
.tool-walkthrough{max-width:1180px;padding:36px 24px;margin:auto;color:var(--editor-text,#f5f6fc);display:grid;grid-template-columns:1.2fr 1fr;gap:28px;line-height:1.7}
.tool-walkthrough h2{font-size:22px}.tool-walkthrough li{margin-block:8px}.tool-policy{border-left:3px solid var(--tool-accent,#edca84);padding-left:14px}
.tool-walkthrough nav{grid-column:1/-1;display:flex;gap:18px;flex-wrap:wrap;align-items:center}.tool-walkthrough nav h2{width:100%;margin-bottom:0}
.tool-example img,.sprite-example{image-rendering:pixelated;object-fit:contain;background:#26313e;max-width:100%}
.sprite-example{width:64px;height:64px;background-image:url('/assets/examples/sprite-walk.png');background-size:256px 64px;animation:ilp-example-walk .7s steps(4) infinite;margin-top:14px}
@keyframes ilp-example-walk{to{background-position:-256px 0}}
@media(prefers-reduced-motion:reduce){.sprite-example{animation:none}}
@media(max-width:767px){.task-entry,.tool-walkthrough{grid-template-columns:1fr}.tool-intro{display:block}.tool-heading h1{font-size:18px}.tool-walkthrough nav{grid-column:1}}

/* Compact website chrome leaves more vertical room for the native tools. */
body.is-tool:not(.is-godot-tool){--topbar-height:64px}
body.is-tool:not(.is-godot-tool) .site-topbar{height:64px;min-height:64px}
body.is-tool:not(.is-godot-tool) .tool-heading{min-height:56px;padding:6px 16px;gap:12px}
body.is-tool:not(.is-godot-tool) .tool-heading-icon-frame{width:36px;height:36px;flex:none}
body.is-tool:not(.is-godot-tool) .tool-title-line h1{font-size:18px;line-height:1.25}
body.is-tool:not(.is-godot-tool) .tool-subtitle-line{margin-top:2px;line-height:1.3}
body.is-tool:not(.is-godot-tool) .tool-intro{padding:5px 16px;font-size:11px;line-height:1.4}
body.is-tool:not(.is-godot-tool):has(.tool-walkthrough) .tool-shell{height:calc(100dvh - 64px)}
@media(max-width:767px){
 body.is-tool:not(.is-godot-tool) .tool-heading{padding:6px 10px;min-height:56px}
 body.is-tool:not(.is-godot-tool) .tool-title-line h1{font-size:16px}
}

body.is-tool:not(.is-godot-tool) .tool-heading .text-button{min-height:24px;padding:2px 5px}
body.is-tool:not(.is-godot-tool) .tool-heading-icon-frame .tool-icon{width:30px!important;height:24px!important}

/* Further compact the two tool header rows without hiding controls. */
@media(min-width:768px){
 body.is-tool:not(.is-godot-tool){--topbar-height:48px}
 body.is-tool:not(.is-godot-tool) .site-topbar{height:48px;min-height:48px}
 body.is-tool:not(.is-godot-tool) .site-topbar .brand-logo{height:34px}
 body.is-tool:not(.is-godot-tool) .site-topbar .topbar-inner{padding-block:0}
 body.is-tool:not(.is-godot-tool) .tool-heading{min-height:44px;padding-block:2px}
 body.is-tool:not(.is-godot-tool) .tool-heading .text-button{min-height:20px;padding-block:0}
 body.is-tool:not(.is-godot-tool) .tool-heading-icon-frame{width:30px;height:30px}
 body.is-tool:not(.is-godot-tool) .tool-subtitle-line{margin-top:0}
 body.is-tool:not(.is-godot-tool):has(.tool-walkthrough) .tool-shell{height:calc(100dvh - 48px)}
}