/* ONE website UI. Tool internals stay isolated inside their own canvas/frame. */
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.65 var(--font);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,summary,select{-webkit-tap-highlight-color:transparent}button,a,summary,select{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:not-allowed;opacity:.6}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #8060D0;outline-offset:4px}button{border:0;background:none}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.35}img,svg{display:block}p{overflow-wrap:anywhere}[hidden]{display:none!important}.container{max-width:var(--page-width);margin-inline:auto;width:calc(100% - 64px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-80px;left:20px;z-index:200;padding:10px 20px;background:var(--text);color:#fff;border-radius:8px}.skip-link:focus{top:8px}.ui-icon{width:20px;height:20px;flex-shrink:0}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--accent-text)}
/* Navigation */
.site-topbar{height:var(--topbar-height);position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid var(--border);flex:none}.topbar-inner{height:100%;max-width:1512px;padding:0 32px;margin:auto;display:flex;align-items:center;gap:30px}.brand-link{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}.brand-mark{height:31px;width:31px}.brand-word{font-weight:900;font-size:19px;letter-spacing:-.8px;line-height:1}.brand-word>span{font-weight:550;margin-left:4px;letter-spacing:-.65px}.desktop-nav{display:flex;align-items:center;gap:26px;font-size:12px;font-weight:650;white-space:nowrap}.desktop-nav a{display:flex;align-items:center;gap:8px;padding:18px 0}.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:var(--accent-text)}.desktop-nav .ui-icon{width:16px;height:16px}.desktop-account{display:flex;align-items:center;gap:8px;margin-left:auto;white-space:nowrap}.plan-pill{border:1px solid #CCEEF6;background:#EDFAFE;color:#186179;border-radius:999px;padding:3px 9px;font:750 10px/1.6 var(--font-mono);letter-spacing:.5px;display:inline-flex;align-items:center;justify-content:center}.plan-pill.pro{border-color:#E1D4FE;background:#F3EDFF;color:#6E42BA}.credit-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:11px;font-weight:650;background:var(--card);white-space:nowrap}.credit-pill .ui-icon{width:13px;height:13px;color:#76649E}.credit-pill.low{border-color:#C89037;background:#FFF7E5;color:#815707}.button{min-height:39px;border-radius:var(--radius-sm);padding:9px 16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:12px;font-weight:700;border:1px solid transparent;line-height:1.5;transition:background .16s,box-shadow .16s}.button .ui-icon{height:17px;width:17px}.button.primary{background:#202331;color:white}.button.primary:hover{background:#39324F;box-shadow:0 4px 14px #6C51A522}.button.upgrade{background:linear-gradient(110deg,#DEF6FF,#E8DCFF 70%,#F7DEF0);color:#352B5B;padding:7px 13px;font-size:11px;min-height:34px}.button.upgrade:hover{background:linear-gradient(110deg,#D1F3FF,#DECBFF 70%,#FFD5ED)}.button.subtle{border-color:var(--border);background:#FFF;color:var(--text)}.button.subtle:hover{border-color:#B6A0D9;background:#FBF9FF}.button.full{width:100%}.login-button{font-size:12px;font-weight:650;padding:8px 10px;white-space:nowrap}.login-button:hover{color:var(--accent-text)}.language-control{display:flex;align-items:center;gap:4px;font-size:11px;min-width:0}.language-control .ui-icon{width:16px;height:16px;color:var(--muted)}.language-control select{border:0;padding:5px 0;background:transparent;color:inherit;cursor:pointer;max-width:116px;font-size:11px;min-width:0}.language-control option{background:#fff;color:#202331}.menu-button{display:none}.icon-button{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:transparent;flex-shrink:0}.icon-button:hover{background:#EEF0F7}.menu-button{display:none}.mobile-menu{position:absolute;left:0;right:0;top:63px;background:#fff;border-bottom:1px solid var(--border);padding:16px 24px;box-shadow:0 12px 25px #1C254412;color:var(--text)}.mobile-menu nav{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border-bottom:1px solid var(--border);padding-bottom:13px;margin-bottom:15px}.mobile-menu nav a{padding:10px 0;font-weight:650}.mobile-account{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mobile-menu>p{font-size:10px;color:var(--muted);margin-top:16px}
/* Compact hero, tool discovery */
.hero{position:relative;padding:40px 24px 30px;text-align:center;overflow:hidden}.hero-inner{position:relative;max-width:940px;margin:auto}.hero .eyebrow{color:#878494;font-size:9px;letter-spacing:3px}.hero h1{font-size:34px;font-weight:800;letter-spacing:-1.25px;margin:12px auto 12px}.hero-brand{display:block;font-size:13px;letter-spacing:4px;font-weight:700;color:#5E507F;margin-bottom:10px}.hero-description{font-size:14px;color:var(--muted);max-width:800px;margin:auto;line-height:1.8}.hero-pixels{position:absolute;inset:0;pointer-events:none;max-width:1290px;margin:auto}.hero-pixels i{position:absolute;width:12px;height:12px;border-radius:2px;background:var(--cyan);opacity:.4;transform:rotate(-8deg)}.hero-pixels i:nth-child(1){left:7%;top:70px;width:16px;height:16px}.hero-pixels i:nth-child(2){left:10%;top:95px;background:var(--violet);width:8px;height:8px}.hero-pixels i:nth-child(3){right:7%;top:90px;background:var(--pink)}.hero-pixels i:nth-child(4){right:9%;top:66px;background:var(--violet);width:7px;height:7px}.hero-pixels i:nth-child(5){right:5%;top:65px;width:7px;height:7px}.tools-section-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.category-list{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.category-button{padding:8px 17px;min-height:38px;border-radius:8px;color:var(--muted);font-size:12px;font-weight:650;border:1px solid transparent;white-space:nowrap;transition:background .15s}.category-button:hover{background:#EEEAF7;color:#675389}.category-button.active{background:var(--text);color:white}.tool-count{font-size:11px;color:var(--muted);white-space:nowrap}.tool-count b{color:#474B5E}.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.tool-card{position:relative;display:flex;flex-direction:column;min-height:252px;padding:22px 24px 18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:0 2px 4px #1D254202;transition:transform .18s,box-shadow .18s,border-color .18s;--card-accent:var(--violet)}.tool-card.accent-pink{--card-accent:var(--pink)}.tool-card.accent-cyan{--card-accent:var(--cyan)}.tool-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px #31374E0D;border-color:var(--card-accent)}.card-icon-row{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:18px}.card-icon-wrap{height:58px;width:120px;display:flex;align-items:center;justify-content:flex-start}.tool-icon{width:120px;max-width:100%;height:58px;overflow:visible}.tool-card[data-tool-id="pixel_fx_filter_builder"] .tool-icon,.tool-card[data-tool-id="frame_animator"] .tool-icon,.tool-card[data-tool-id="asset_builder_2_5d"] .tool-icon{width:58px}.tool-status{font-size:10px;color:#898D9C;background:#F5F6F9;border:1px solid #EEEFF4;display:flex;align-items:center;gap:6px;border-radius:6px;padding:3px 8px;white-space:nowrap}.tool-status.ready{color:#256E59;border-color:#DAEEE5;background:#F1FAF5}.tool-status.ready i{width:5px;height:5px;background:#48AB80;border-radius:50%}.tool-card h3{font-size:16px;font-weight:750;letter-spacing:-.35px;line-height:1.45;margin-bottom:2px;min-height:24px}.tool-zh{font-size:13px;line-height:1.5;font-weight:600;color:#4D5265;margin-bottom:9px}.tool-description{font-size:12px;line-height:1.8;color:var(--muted);margin-bottom:17px;max-width:325px}.card-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between}.tool-index{font:9px/1.5 var(--font-mono);color:#9B9FAB;letter-spacing:.7px}.card-arrow{height:17px;width:17px;color:#8A8B99;transition:transform .18s,color .18s}.tool-card:hover .card-arrow{transform:translateX(3px);color:#69519E}.palette-placeholder{display:grid;grid-template-columns:repeat(3,15px);gap:4px;transform:rotate(-8deg);width:53px;height:34px;align-self:center}.palette-placeholder i{height:15px;border-radius:3px;background:#F391AD}.palette-placeholder i:nth-child(2){background:#F4BF82}.palette-placeholder i:nth-child(3){background:#EBD386}.palette-placeholder i:nth-child(4){background:#AB95DE}.palette-placeholder i:nth-child(5){background:#75C6DB}.palette-placeholder i:nth-child(6){background:#9CCBB1}.temporary-icon-note{font-size:8px;position:absolute;top:72px;left:24px;color:#9695A4}.integration-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;font-size:10px;line-height:1.7;color:#858899;text-align:center}.integration-note strong{font-weight:650;color:#676A7C}.integration-note .ui-icon{width:14px;height:14px;flex:none;color:#9691AC}
/* Lower homepage */
.benefits-section{padding-top:58px;padding-bottom:44px}.section-heading{text-align:center;margin-bottom:26px}.section-heading h2{font-size:24px;font-weight:750;letter-spacing:-.65px;margin:7px 0 7px}.section-heading>p:last-child{font-size:12px;color:var(--muted)}.benefits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px}.benefit{text-align:center;padding:9px 12px}.benefit-icon{display:inline-grid;place-items:center;color:#70628E;width:40px;height:40px;background:#EFECF5;border-radius:11px;margin-bottom:12px}.benefit-icon .ui-icon{width:22px;height:22px}.benefit h3{font-size:14px;margin-bottom:9px;font-weight:700}.benefit p{font-size:12px;color:var(--muted);max-width:310px;margin:auto;line-height:1.8}.closing-section{display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(115deg,#F0F9FD,#F2EFFA 65%,#FCF0F7);padding:28px 35px;margin-bottom:58px}.closing-section h2{font-size:23px;margin:6px 0;letter-spacing:-.5px}.closing-section p{font-size:12px;color:var(--muted);max-width:650px}.closing-section .button{flex:none;background:#FFFFFFB8;min-width:195px}
/* Shared footer */
#site-footer{border-top:1px solid var(--border);background:white;padding:38px 32px 0}.footer-inner{max-width:var(--page-width);margin:auto;display:flex;gap:52px}.footer-brand{width:214px;flex:none}.footer-brand .brand-word{font-size:17px}.footer-brand .brand-mark{height:28px;width:28px}.footer-brand p{font-size:11px;color:var(--muted);margin:13px 0 20px}.footer-stamp{font:8px var(--font-mono);letter-spacing:1.6px;color:#9692A3}.footer-columns{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}.footer-column h2{font-size:11px;color:#454959;margin:0 0 13px;font-weight:750}.footer-column>a,.footer-column>button{display:block;text-align:left;color:var(--muted);font-size:10px;padding:0;margin-bottom:8px;line-height:1.7}.footer-column>a:hover,.footer-column>button:hover{color:var(--accent-text)}.footer-column .language-control{margin-left:-3px}.footer-column .language-control select{max-width:100px;font-size:10px}.footer-column .ui-icon{width:13px}.footer-bottom{display:flex;gap:15px;justify-content:space-between;align-items:center;max-width:var(--page-width);margin:26px auto 0;border-top:1px solid var(--border);padding:18px 0;font-size:9px;color:#8B8E9D}.build-label{font-family:var(--font-mono);white-space:nowrap}
/* Shared modal, account and pricing */
#site-dialog{padding:26px;max-width:min(880px,calc(100vw - 32px));width:550px;max-height:90dvh;border:1px solid var(--border);border-radius:18px;background:#FFF;color:var(--text);box-shadow:0 26px 120px #0005;overflow:auto}#site-dialog[data-kind=pricing]{width:880px}#site-dialog::backdrop{background:#0F12298A;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.dialog-heading h2{font-size:20px;letter-spacing:-.5px}.dialog-heading .icon-button{border:0;background:#F6F5F8}.mock-note{display:flex;align-items:flex-start;gap:9px;border:1px solid #E7E1F4;background:#F8F6FC;padding:12px 14px;border-radius:9px;font-size:11px;color:#786691;line-height:1.75}.mock-note .ui-icon{height:16px;width:16px;margin-top:1px}.inline-note{width:max-content;max-width:100%;margin:0 auto 25px}.field-label{display:block;font-size:12px;font-weight:650;margin:20px 0 6px}.text-field{display:block;width:100%;border:1px solid #DCE0E9;border-radius:9px;background:#FCFCFE;padding:12px 14px;color:var(--text);margin-bottom:16px}.form-result{font-size:12px;color:#71518F;margin-top:13px}.small-muted{font-size:11px;color:var(--muted);line-height:1.8;margin:16px 0 0}.text-button{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--link);padding:9px 0;font-weight:650}.text-button .ui-icon{width:16px;height:16px}.wallet-overview{text-align:center;margin:22px 0}.wallet-overview>.plan-pill{margin-bottom:10px}.wallet-overview strong{display:block;font-size:38px;letter-spacing:-1px;line-height:1.3}.wallet-overview strong small{font-size:18px;color:var(--muted);font-weight:500;letter-spacing:0}.wallet-overview p{font-size:11px;color:var(--muted);margin-top:8px}.wallet-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:#F8F9FB;padding:14px;border-radius:9px}.wallet-meta>span{font-size:10px;color:var(--muted)}.wallet-meta b{display:block;color:var(--text);font-size:13px;font-weight:650;margin-top:3px}.dev-details{border-top:1px dashed var(--border);padding-top:18px;margin-top:22px}.dev-details summary{font-size:11px;color:#8D7987;cursor:pointer}.dev-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.dev-actions>.text-button{width:100%;font-size:11px}.site-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;max-width:calc(100vw - 32px);width:max-content;background:#202331;color:white;padding:12px 19px;border:1px solid #76708C;border-radius:10px;font-size:12px;box-shadow:0 8px 36px #0003}.dialog-lead{font-size:12px;color:var(--muted);margin:18px 0 22px}.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:910px;margin:auto}.plan-card{border:1px solid var(--border);border-radius:16px;background:white;padding:30px;display:flex;flex-direction:column}.plan-card h3{font-size:34px;letter-spacing:-1px;margin:14px 0 8px}.plan-card h3 small{font-size:12px;letter-spacing:0;font-weight:500;color:var(--muted)}.plan-card>p{color:var(--muted);font-size:12px;min-height:42px}.plan-card.pro-card{border-color:#CCB4EC;background:linear-gradient(160deg,#FEFEFF,#F7F3FC)}.plan-features{list-style:none;padding:0;margin:24px 0 28px;font-size:12px;display:grid;gap:13px}.plan-features li{display:flex;align-items:flex-start;gap:10px}.plan-features .ui-icon{width:16px;height:16px;color:#83739B;margin-top:2px}.plan-card>.button{margin-top:auto}.pricing-footnote{font-size:11px;text-align:center;margin:25px auto 0;color:var(--muted)}
/* Website content pages */
.content-page{padding-top:46px;padding-bottom:64px;min-height:65vh}.page-heading{text-align:center;margin-bottom:32px}.page-heading h1{font-size:32px;letter-spacing:-1px;margin:10px 0 13px}.page-heading>p{color:var(--muted);font-size:13px;max-width:720px;margin:auto}.docs-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:50px}.docs-sidebar{background:white;border:1px solid var(--border);border-radius:14px;padding:25px;height:max-content;position:sticky;top:88px}.docs-sidebar strong{font-size:15px;display:block;margin:9px 0}.docs-sidebar p:not(.eyebrow){font-size:11px;color:var(--muted);margin-bottom:20px}.docs-sidebar .button{padding:9px 10px;font-size:11px}.docs-content>section{margin-bottom:36px;scroll-margin-top:90px}.docs-content h2{font-size:20px;margin-bottom:22px}.step{display:flex;gap:20px;margin-bottom:24px}.step>span{flex:none;width:30px;padding-top:3px;color:#A197B9;font:11px var(--font-mono)}.step h3{font-size:14px;margin-bottom:6px}.step p{font-size:12px;color:var(--muted);line-height:1.9}.warning-note{font-size:11px;line-height:1.8;padding:13px 16px;background:#FFF7EB;border:1px solid #EEDFBE;border-radius:9px;color:#866B3E}.shortcut-table{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:white}.shortcut-table>div{display:grid;grid-template-columns:minmax(150px,1fr) 1.4fr;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px solid var(--border);font-size:12px}.shortcut-table>div:last-child{border-bottom:0}kbd{display:inline-block;font:10px/1.5 var(--font-mono);border:1px solid #DBDDE7;border-radius:5px;background:#F6F7FA;padding:2px 6px;width:max-content;color:#656076;white-space:nowrap}.faq-item{border-top:1px solid var(--border);padding:16px 0}.faq-item summary{font-size:13px;font-weight:650;cursor:pointer}.faq-item p{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.9}.text-page{max-width:810px}.prose-card{padding:32px;background:white;border:1px solid var(--border);border-radius:var(--radius)}.prose-card h2{font-size:20px;margin:10px 0 20px}.prose-card p{font-size:13px;color:var(--muted);margin:18px 0;line-height:1.9}.empty-page{text-align:center;min-height:60vh;padding:100px 0}.empty-page h1{font-size:30px;margin:20px 0 14px}.empty-page p{font-size:13px;color:var(--muted);margin-bottom:26px}
/* Central dark Tool Shell, not a duplicated tool website */
body.is-tool{height:100dvh;min-height:350px;display:flex;flex-direction:column;background:var(--editor-bg);overflow:hidden}body.is-tool #main-content{flex:1;min-height:0;outline:0;display:flex}body.is-tool #site-footer{display:none}.site-topbar.dark{background:#151825;border-color:#30364C;color:var(--editor-text)}.dark .brand-word{color:var(--editor-text)}.dark .desktop-nav a{color:var(--editor-muted)}.dark .desktop-nav a:hover{color:var(--cyan)}.dark .credit-pill{background:#242A3D;border-color:#3A425B;color:#EBECF7}.dark .credit-pill .ui-icon{color:#B7A3E6}.dark .plan-pill{background:#183647;border-color:#35637B;color:#A9EDFF}.dark .plan-pill.pro{background:#342750;border-color:#634785;color:#E0C6FF}.dark .button.upgrade{background:linear-gradient(110deg,#325A75,#564977 70%,#694764);color:#F5F2FF}.dark .language-control{color:#DBDEEA}.dark .icon-button{border-color:#42495F;color:#C4CBE0}.dark .icon-button:hover{background:#283049}.dark .mobile-menu{background:#191D2C;border-color:#30364C;color:#D8DCEC}.dark .mobile-menu nav{border-color:#3A415A}.tool-shell{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;color:var(--editor-text)}.tool-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 21px;border-bottom:1px solid #2D344A;background:#191D2C;min-height:75px;flex:none}.tool-identity{display:flex;align-items:center;gap:14px;min-width:0}.tool-heading-icon-frame{width:56px;height:56px;flex:0 0 56px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(180deg,#214664,#18394f);border:2px solid #2f6f78;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 5px 14px rgba(0,0,0,.18)}.tool-heading-icon-frame .tool-icon{width:46px;height:34px;flex:none}.tool-heading-icon-frame .palette-placeholder{transform:scale(.72)}.tool-identity .tool-icon{height:36px;width:86px;flex:none}.tool-identity .palette-placeholder{transform:scale(.75)}.tool-identity-text{min-width:0}.tool-title-line{display:flex;align-items:center;gap:9px}.tool-title-line h1{font-size:16px;letter-spacing:-.25px;font-weight:750}.version-pill{font:9px var(--font-mono);padding:3px 6px;background:#262E45;border:1px solid #465370;color:#B8C5E2;border-radius:5px;white-space:nowrap}.tool-subtitle-line{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:10px;color:#AEB7CC}.tool-heading-right{display:flex;align-items:center;gap:12px;flex:none}.tool-heading-right>span{font-size:10px;display:flex;align-items:center;gap:5px;color:#AEB7CC}.tool-heading-right .ui-icon{width:13px;height:13px}.mock-badge{padding:2px 6px;border:1px dashed #626074;border-radius:5px;font-size:9px!important;color:#B5ABC5!important;white-space:nowrap}.desktop-advisory{display:none;padding:7px 16px;background:#332D25;border-bottom:1px solid #61533A;align-items:center;gap:8px;font-size:10px;flex:none;color:#DBC098}.desktop-advisory .ui-icon{width:16px;height:16px}.tool-stage{position:relative;flex:1;min-height:0;display:flex;background:#10121B;overflow:hidden}.tool-frame{width:100%;height:100%;border:0;display:block;flex:1;min-width:0;background:#10121B}.tool-loading{position:absolute;inset:0;display:grid;place-content:center;gap:15px;text-align:center;background:#10121B;color:#ACB6CE;font-size:13px;z-index:2}.loading-dots{height:12px;display:flex;justify-content:center;gap:6px}.loading-dots i{width:7px;height:7px;background:#A56BFF;animation:breathe 1s ease-in-out infinite alternate}.loading-dots i:nth-child(2){background:#58DCFF;animation-delay:.2s}.loading-dots i:nth-child(3){background:#FF70B7;animation-delay:.4s}@keyframes breathe{to{opacity:.3;transform:translateY(-3px)}}.tool-pending{width:100%;height:100%;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:35px 24px;background:radial-gradient(ellipse at 50% 35%,#26253E55,transparent 65%)}.pending-inner{max-width:600px;text-align:center;margin:auto}.pending-inner>.tool-icon{height:86px;width:160px;margin:0 auto 28px}.pending-inner>.palette-placeholder{margin:0 auto 38px;transform:scale(1.4)}.pending-inner>.eyebrow{color:#A997D0;font-size:9px}.pending-inner h2{font-size:23px;font-weight:650;margin:13px 0;letter-spacing:-.5px}.pending-inner p{font-size:12px;color:var(--editor-muted);line-height:1.9;max-width:515px;margin:auto}.pending-inner .button{margin-top:25px;border-color:#42495F;background:#282C40;color:#EDF0FC}.file-chips{display:flex;justify-content:center;gap:8px;margin:23px 0 0}.file-chips span{font:10px var(--font-mono);border:1px solid #3B435E;border-radius:6px;padding:6px 10px;color:#9DAAC8;background:#202537}.route-label{font:9px/1.8 var(--font-mono);color:#737D97;margin-top:20px;overflow-wrap:anywhere}.shortcut-help{position:relative;flex:none}.shortcut-help>button{width:21px;height:21px;border-radius:50%;border:1px solid #AF8D36;background:#393123;color:#FFE06B;font-size:12px;font-weight:900;padding:0;line-height:1;display:grid;place-items:center}.shortcut-popover{position:absolute;top:30px;left:0;width:362px;max-height:65dvh;overflow:auto;background:#171C2A;border:1px solid #52607F;border-radius:11px;padding:13px;box-shadow:0 14px 42px #0008;z-index:20;color:#D9E4F7;font-size:10px}.shortcut-popover>strong{display:block;font-size:11px;margin-bottom:9px}.shortcut-popover>div{display:grid;grid-template-columns:153px 1fr;align-items:center;gap:9px;margin:5px 0}.shortcut-popover kbd{font-size:9px;color:#BFF3FF;background:#242C40;border-color:#4F5B7C}.shortcut-help:not(.open) .shortcut-popover{display:none}
/* Shared breakpoints */
@media(min-width:1600px){:root{--page-width:1240px}.hero{padding-top:48px;padding-bottom:36px}.tool-card{min-height:264px}.hero h1{font-size:38px}}
@media(max-width:1150px){.topbar-inner{padding:0 22px;gap:22px}.desktop-nav{gap:18px;font-size:11px}.desktop-account{gap:6px}.desktop-account .language-control select{max-width:93px}.desktop-account .login-button{padding-inline:5px}.footer-inner{gap:30px}.footer-brand{width:180px}.footer-columns{gap:14px}.tool-card{padding:21px}.tool-card h3{font-size:15px}.benefits-grid{gap:24px}}
@media(max-width:1023px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-card{min-height:245px}.hero{padding-top:32px}.hero h1{font-size:30px}.topbar-inner{gap:20px}.desktop-nav{gap:15px}.desktop-account .button.upgrade{padding-inline:9px}.desktop-account .credit-pill{padding-inline:7px}.footer-inner{flex-direction:column}.footer-brand{width:auto}.footer-brand p{margin:10px 0}.footer-stamp{display:none}.footer-columns{gap:30px}.tool-heading-right>span:not(.mock-badge){display:none}.tool-title-line h1{font-size:14px}}
@media(max-width:950px){.desktop-nav,.desktop-account{display:none}.menu-button{display:grid;margin-left:auto}.topbar-inner{padding-inline:24px}.tool-heading{padding:12px 15px}.tool-identity{gap:11px}.desktop-advisory{display:flex}.tool-subtitle-line{font-size:9px}.tool-heading-right .mock-badge{font-size:8px!important}}
@media(max-width:767px){.container{width:calc(100% - 40px)}.hero{padding:28px 22px}.hero h1{font-size:29px;letter-spacing:-.9px}.hero-description{font-size:12px;max-width:540px}.hero-pixels{display:none}.hero .eyebrow{font-size:8px}.tools-section-top{gap:10px}.category-list{gap:4px}.category-button{font-size:11px;padding:7px 11px}.tool-count{display:none}.benefits-grid{gap:12px}.benefit{padding:8px 0}.benefit h3{font-size:12px}.benefit p{font-size:11px}.closing-section{flex-direction:column;align-items:flex-start;padding:25px;gap:20px;margin-bottom:36px}.closing-section h2{font-size:22px}.footer-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.footer-bottom{align-items:flex-start;flex-wrap:wrap;row-gap:7px}.footer-bottom>span:nth-child(2){order:3;width:100%}.build-label{margin-left:auto}.docs-layout{grid-template-columns:1fr;gap:25px}.docs-sidebar{position:static}.docs-sidebar .button{width:max-content}.tool-heading-right{display:none}.tool-identity .tool-icon{width:58px;height:30px}.tool-title-line h1{font-size:13px}.tool-title-line{gap:5px}.tool-subtitle-line{max-width:100%;gap:6px}.tool-subtitle-line>span{font-size:9px;line-height:1.7}.shortcut-popover{position:fixed;top:145px;left:16px;right:16px;width:auto;max-height:65dvh}.pending-inner h2{font-size:21px}.version-pill{font-size:8px}.desktop-advisory span{font-size:9px}.desktop-advisory strong{font-size:10px}}
@media(max-width:639px){.tool-grid{grid-template-columns:1fr;gap:13px}.tool-card{min-height:232px;padding:22px 24px}.card-icon-row{margin-bottom:16px}.tool-card h3{font-size:16px}.tool-description{font-size:12px;max-width:none}.hero h1{font-size:26px;max-width:340px;margin-top:11px;line-height:1.5;letter-spacing:-.7px}.hero-brand{font-size:11px;margin-bottom:9px}.hero-description{max-width:320px;font-size:12px}.tools-section-top{margin-bottom:16px}.category-list{gap:4px;width:100%}.category-button{font-size:10px;padding:7px 10px;min-height:34px}.integration-note{align-items:flex-start;flex-wrap:wrap;font-size:10px;column-gap:6px;margin:19px 5px 0}.integration-note>span{width:100%}.benefits-section{padding-top:40px;padding-bottom:30px}.section-heading h2{font-size:23px}.benefits-grid{grid-template-columns:1fr;gap:20px}.benefit{padding:7px 15px}.benefit h3{font-size:14px}.benefit p{font-size:12px}.benefit-icon{margin-bottom:9px}.closing-section .button{width:100%;font-size:12px}.closing-section p{font-size:12px}.footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.footer-column h2{font-size:12px}.footer-column>a,.footer-column>button{font-size:11px}.footer-brand p{font-size:12px}.footer-bottom{font-size:9px}#site-footer{padding:30px 24px 0}.pricing-grid{grid-template-columns:1fr;gap:18px}.plan-card{padding:27px}.content-page{padding-top:30px;padding-bottom:42px}.page-heading h1{font-size:26px}.page-heading>p{font-size:12px}.page-heading{margin-bottom:25px}#site-dialog{padding:20px;max-width:calc(100vw - 24px)}.dialog-heading h2{font-size:18px}.shortcut-table>div{padding:9px 10px;grid-template-columns:1.2fr 1fr;font-size:11px;gap:7px}.shortcut-table kbd{font-size:9px}.docs-content h2{font-size:19px}.tool-heading{padding:11px 12px;min-height:72px}.tool-title-line{flex-wrap:wrap;row-gap:3px}.tool-title-line h1{font-size:12px}.tool-subtitle-line>span{font-size:8px}.tool-identity{gap:8px}.tool-identity .tool-icon{width:48px;height:29px}.tool-heading .version-pill{display:none}.desktop-advisory span{display:none}.tool-pending{padding:28px 20px}.pending-inner h2{font-size:20px}.pending-inner p{font-size:11px}.pending-inner>.tool-icon{margin-bottom:22px}.tool-subtitle-line .shortcut-help>button{height:18px;width:18px;font-size:10px}}
@media(max-width:359px){.container{width:calc(100% - 28px)}.topbar-inner{padding-inline:16px}.brand-word{font-size:18px}.category-button{padding:7px 8px;font-size:9px}.tool-card{padding:20px}.tool-card h3{font-size:15px}.hero h1{font-size:24px}.tool-title-line h1{font-size:11px}.tool-subtitle-line>span{font-size:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.tool-card:hover{transform:none}}

/* Keep compact mobile headlines balanced instead of leaving a one-character last line. */
.hero h1,.section-heading h2{text-wrap:balance}

/* Keep Korean word clusters readable; no added font downloads. */
html[lang="ko"] .tool-card,html[lang="ko"] .hero,html[lang="ko"] .content-page{word-break:keep-all;overflow-wrap:anywhere}

/* Phase 2A compatibility hardening */
.ilikepixel-word{font-weight:850;letter-spacing:-.75px;white-space:nowrap}
@media (pointer:coarse){
  .category-button,.button,.login-button,.icon-button,.language-control select,.mobile-menu a,.mobile-menu button{min-height:44px}
  .tool-card{touch-action:manipulation}
  .tool-card:hover{transform:none}
}
@media(max-width:480px){
  .topbar-inner{padding-inline:14px;gap:10px}.brand-mark{width:28px;height:28px}.brand-word{font-size:17px}
  .mobile-menu{padding:14px 16px}.mobile-menu nav{grid-template-columns:1fr}.mobile-account{display:grid;grid-template-columns:1fr 1fr;width:100%}.mobile-account>*{min-width:0}
  .language-control select{width:100%;max-width:none}.hero{padding-inline:16px}.container{width:calc(100% - 28px)}
  .tool-heading{min-height:68px}.tool-subtitle-line>span{max-width:54vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:340px){.brand-mark{display:block;width:24px;height:24px}.brand-link{gap:7px}.brand-word{font-size:16px}.topbar-inner{padding-inline:12px}.hero{padding-inline:12px}.container{width:calc(100% - 20px)}}
@media(orientation:landscape) and (max-height:520px) and (pointer:coarse){.site-topbar{position:relative}.hero{padding-top:18px;padding-bottom:18px}.desktop-advisory{display:flex}}

@media(max-width:767px){.tool-heading-icon-frame{width:48px;height:48px;flex-basis:48px;border-radius:12px}.tool-heading-icon-frame .tool-icon{width:40px!important;height:29px!important}}
@media(max-width:639px){.tool-heading-icon-frame{width:44px;height:44px;flex-basis:44px;border-radius:11px}.tool-heading-icon-frame .tool-icon{width:36px!important;height:27px!important}}

/* Phase 2B homepage readability + stronger tool-card identity */
html[lang="zh-Hant"] body{font-family:"Noto Sans TC","Microsoft JhengHei","PingFang TC","Segoe UI",Arial,sans-serif}
html[lang="zh-Hans"] body{font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC","Segoe UI",Arial,sans-serif}
html[lang="ja"] body{font-family:"Noto Sans JP","Yu Gothic UI","Meiryo","Segoe UI",Arial,sans-serif}
html[lang="ko"] body{font-family:"Noto Sans KR","Malgun Gothic","Segoe UI",Arial,sans-serif}
html[lang="en"] body{font-family:Inter,"Segoe UI",Arial,sans-serif}
body{font-size:16px}
.brand-word{font-size:21px}.desktop-nav{font-size:13px}.login-button{font-size:13px}.language-control{font-size:12px}.language-control select{font-size:12px}.credit-pill{font-size:12px}
.hero{padding-top:46px;padding-bottom:34px}.hero h1{font-size:42px;letter-spacing:-1.35px}.hero-brand{font-size:14px}.hero-description{font-size:16px;line-height:1.75}.hero .eyebrow{font-size:10px}
.category-button{font-size:13px;padding:9px 18px;min-height:40px}.tool-count{font-size:12px}
.tool-grid{gap:18px}.tool-card{min-height:276px;padding:24px 25px 20px;border:2px solid var(--card-border,#D7DAE4);box-shadow:0 3px 10px rgba(31,38,60,.065);transition:transform .18s,box-shadow .18s,border-color .18s;background:#fff;--card-accent:#A56BFF;--card-border:#BDA9EA}.tool-card.accent-pink{--card-accent:#E94F98;--card-border:#E6A0C3}.tool-card.accent-violet{--card-accent:#8C5BE8;--card-border:#B5A0E5}.tool-card.accent-cyan{--card-accent:#1BAFD0;--card-border:#72CADC}.tool-card.accent-green{--card-accent:#2E9F6B;--card-border:#71C59B}.tool-card.accent-deepblue{--card-accent:#234FAF;--card-border:#5F7FC8}.tool-card.accent-yellow{--card-accent:#D49B00;--card-border:#DAB64A}.tool-card:hover{transform:translateY(-3px);border-color:var(--card-accent);box-shadow:0 12px 28px rgba(31,38,60,.14)}
.tool-card h3{font-size:18px;font-weight:760;line-height:1.4;min-height:26px}.tool-zh{font-size:15px;line-height:1.55;margin-bottom:10px}.tool-description{font-size:14px;line-height:1.75;max-width:350px}.tool-status{font-size:11px;padding:4px 9px}.tool-index{font-size:10px}.card-arrow{width:19px;height:19px}
.section-heading h2{font-size:28px}.section-heading>p:last-child{font-size:14px}.benefit h3{font-size:16px}.benefit p{font-size:14px}.closing-section h2{font-size:27px}.closing-section p{font-size:14px}
.page-heading h1{font-size:36px}.page-heading>p{font-size:14px}.docs-content h2{font-size:22px}.step h3{font-size:16px}.step p,.prose-card p{font-size:14px}.faq-item summary{font-size:14px}.faq-item p{font-size:13px}
@media(max-width:1150px){.tool-card h3{font-size:17px}.tool-description{font-size:13px}}
@media(max-width:767px){body{font-size:15px}.hero h1{font-size:32px}.hero-description{font-size:14px}.category-button{font-size:12px}.tool-card h3{font-size:17px}.tool-zh{font-size:14px}.tool-description{font-size:13px}.section-heading h2{font-size:25px}.benefit h3{font-size:15px}.benefit p{font-size:13px}}
@media(max-width:639px){.hero h1{font-size:29px}.hero-description{font-size:14px}.tool-card{min-height:245px;padding:22px;border-width:2px}.tool-card h3{font-size:17px}.tool-description{font-size:13px}.category-button{font-size:11px}.footer-column h2{font-size:13px}.footer-column>a,.footer-column>button{font-size:12px}}

/* iLikePixel official brand assets */
.brand-link{gap:0}
.brand-logo-set{display:inline-flex;align-items:center;line-height:0;flex:none}
.brand-logo{display:block;width:auto;height:38px;object-fit:contain}
.brand-logo-on-dark{display:none}
.site-topbar.dark .brand-logo-on-light{display:none}
.site-topbar.dark .brand-logo-on-dark{display:block}
.footer-brand .brand-logo{height:42px}
@media(max-width:480px){.brand-logo{height:34px}.footer-brand .brand-logo{height:38px}}
@media(max-width:340px){.brand-logo{height:31px}}

/* Phase 2B larger desktop brand + navigation */
@media(min-width:951px){
  .site-topbar{height:84px}
  .topbar-inner{padding-inline:34px;gap:34px}
  .brand-logo{height:57px}
  .desktop-nav{font-size:19px;gap:30px;font-weight:680}
  .desktop-nav a{padding:24px 0}
  .desktop-nav .ui-icon{width:20px;height:20px}
}

/* Phase 2B subscription cadence pricing */
.pricing-page{max-width:1480px}
.pricing-grid-four{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1420px;gap:18px}
.pricing-grid-four .plan-card{padding:27px 24px;min-width:0}
.pricing-grid-four .plan-card h3{font-size:30px;white-space:nowrap}
.pricing-grid-four .plan-card h3 small{font-size:12px}
.pricing-grid-four .plan-card>p{font-size:12px;min-height:58px}
.plan-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.billing-badge{font:750 9px/1.5 var(--font-mono);letter-spacing:.35px;padding:4px 7px;border:1px solid #D9CFF0;border-radius:999px;background:#F6F1FF;color:#7455AC;white-space:nowrap}
.billing-card[data-billing-period="yearly"]{border-width:2px;border-color:#B68AE8;background:linear-gradient(160deg,#FFFFFF,#F8F2FF)}
.billing-card[data-billing-period="quarterly"]{border-style:dashed}
.billing-card button:disabled{background:#E8E9EF;color:#8E91A1;border-color:#E0E1E7}
.subscription-rules{max-width:1420px;margin:20px auto 0;display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border:1px solid #DDD7EA;border-radius:12px;background:#FBFAFD;color:#666B7D}
.subscription-rules>.ui-icon{width:18px;height:18px;flex:none;color:#7256A0;margin-top:2px}
.subscription-rules strong{display:block;color:#35394B;font-size:13px;margin-bottom:4px}
.subscription-rules p{font-size:12px;line-height:1.8}
@media(max-width:1250px){.pricing-grid-four{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}.subscription-rules{max-width:900px}}
@media(max-width:639px){.pricing-page{max-width:none}.pricing-grid-four{grid-template-columns:1fr;max-width:520px}.pricing-grid-four .plan-card h3{font-size:30px}.subscription-rules{max-width:520px;padding:14px}.subscription-rules strong{font-size:13px}.subscription-rules p{font-size:12px}}

/* Phase 2B effective pricing emphasis */
.billing-price-row{display:flex;align-items:baseline;gap:10px 12px;flex-wrap:wrap;margin:14px 0 8px}
.billing-price-row h3{margin:0!important;display:flex;align-items:baseline;gap:5px;min-width:0}
.billing-price-row .effective-price{font-size:36px;font-weight:820;letter-spacing:-1.2px;color:#171B2A}
.billing-card[data-billing-period="yearly"] .effective-price{color:#6A3DB0}
.billing-price-meta{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.billing-total{font-size:11px;line-height:1.5;color:#777B8E;white-space:nowrap}
.billing-save{font-size:10px;font-weight:800;line-height:1.4;color:#4E8B43;background:#EFF9EC;border:1px solid #CFE8C7;border-radius:999px;padding:3px 7px;white-space:nowrap}
@media(max-width:1250px){.billing-price-row .effective-price{font-size:34px}}
@media(max-width:639px){.billing-price-row{align-items:flex-start}.billing-price-row .effective-price{font-size:33px}.billing-total{font-size:11px}}

/* Phase 2B animated yearly marquee border */
@property --yearly-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
.billing-card[data-billing-period="yearly"]{
  --yearly-angle:0deg;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:2px solid transparent;
  background:
    linear-gradient(160deg,#FFFFFF,#FAF6FF) padding-box,
    conic-gradient(from var(--yearly-angle),#58DCFF 0 14%,#A56BFF 25%,#FF70B7 42%,#FFD84D 58%,#53DDA2 73%,#58DCFF 88% 100%) border-box;
  box-shadow:0 10px 30px rgba(94,72,150,.14);
  animation:yearly-border-marquee 4.2s linear infinite;
}
@keyframes yearly-border-marquee{to{--yearly-angle:360deg}}
@media(prefers-reduced-motion:reduce){.billing-card[data-billing-period="yearly"]{animation:none}}

/* Phase 2B pricing overflow hardening */
.pricing-page,.pricing-grid-four,.pricing-grid-four>.plan-card,.plan-card-top,.billing-price-row,.billing-price-meta{min-width:0}
.pricing-grid-four>.plan-card{overflow:hidden}
.pricing-grid-four .plan-card h3{white-space:normal}
.billing-price-row h3{flex-wrap:wrap;max-width:100%}
.billing-price-row .effective-price{white-space:nowrap;max-width:100%}
.billing-price-meta{max-width:100%}
.billing-total{white-space:normal;overflow-wrap:anywhere}
.billing-badge{max-width:58%;white-space:normal;text-align:center;overflow-wrap:anywhere;line-height:1.25}
.pricing-grid-four .button{white-space:normal;text-align:center;line-height:1.35}
.pricing-page .page-heading h1{max-width:100%;overflow-wrap:anywhere;text-wrap:balance}
.pricing-page .page-heading>p,.subscription-rules p{overflow-wrap:anywhere}
@media(max-width:1350px){.billing-price-row .effective-price{font-size:34px}.billing-badge{font-size:8px}}
@media(max-width:700px){.pricing-grid-four{grid-template-columns:1fr;max-width:520px}.subscription-rules{max-width:520px}.billing-badge{max-width:52%}}
@media(max-width:380px){.billing-price-row .effective-price{font-size:30px}.pricing-grid-four .plan-card{padding-inline:20px}.billing-badge{max-width:48%;font-size:7px}}


/* Godot editor pages own their in-editor billing/language chrome. Keep website chrome minimal. */
body.is-godot-tool .site-topbar{height:52px;min-height:52px}
.site-topbar.compact-godot .topbar-inner{height:52px;max-width:none;padding:0 18px;gap:18px}
.site-topbar.compact-godot .brand-logo{height:34px}
.site-topbar.compact-godot .desktop-nav{display:flex!important;font-size:14px;gap:0;font-weight:680}
.site-topbar.compact-godot .desktop-nav a{padding:10px 0}
.site-topbar.compact-godot .desktop-nav .ui-icon{width:16px;height:16px}
body.is-godot-tool #main-content{min-height:0}
body.is-godot-tool .godot-compact-shell{min-height:0}
body.is-godot-tool .godot-compact-shell .tool-stage{border-top:0}
@media(max-width:767px){.site-topbar.compact-godot .topbar-inner{padding:0 12px;gap:12px}.site-topbar.compact-godot .brand-logo{height:30px}.site-topbar.compact-godot .desktop-nav{font-size:12px}}


/* Tool identity frames: exact website accent border, darker same-hue fill. Logo artwork stays untouched. */
.tool-heading-icon-frame{border-width:2px!important;border-style:solid!important;background:var(--tool-icon-bg,#2B1D45)!important;border-color:var(--tool-icon-border,#8C5BE8)!important}
.tool-heading-icon-frame.accent-pink{--tool-icon-border:#E94F98;--tool-icon-bg:#3A1630}
.tool-heading-icon-frame.accent-violet{--tool-icon-border:#8C5BE8;--tool-icon-bg:#2B1D45}
.tool-heading-icon-frame.accent-green{--tool-icon-border:#2E9F6B;--tool-icon-bg:#14382A}
.tool-heading-icon-frame.accent-cyan{--tool-icon-border:#1BAFD0;--tool-icon-bg:#123541}
.tool-heading-icon-frame.accent-deepblue{--tool-icon-border:#234FAF;--tool-icon-bg:#13274F}
.tool-heading-icon-frame.accent-yellow{--tool-icon-border:#D49B00;--tool-icon-bg:#40300A}

/* Hover panel remains reachable across its visual gap. */
.shortcut-popover{max-width:calc(100vw - 24px);top:calc(100% + 8px);overflow:visible}.shortcut-popover::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}.shortcut-popover>div{grid-template-columns:minmax(110px,153px) minmax(0,1fr)}

.shortcut-popover{overflow:auto}.shortcut-help.open::after{content:"";position:absolute;left:0;top:100%;width:100%;height:10px}

/* Account sign-in / member summary */
.account-login-button{display:inline-flex;align-items:center;gap:6px;max-width:170px}.account-login-button .ui-icon{width:16px;height:16px}.account-login-button span{max-width:125px;overflow:hidden;text-overflow:ellipsis}.auth-provider-stack{display:grid;gap:10px}.account-summary{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--border);border-radius:12px;background:#FAFAFC}.account-summary-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#EFECF5;color:#6B5D88}.account-summary-icon .ui-icon{width:22px;height:22px}.account-summary h3{font-size:16px}.account-summary .small-muted{margin:2px 0 0}.account-meta{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}
@media(max-width:639px){.account-meta{grid-template-columns:1fr}.account-login-button span{max-width:90px}}

/* Member settings keep the active tool mounted behind the shared modal. */
#site-dialog[data-kind="member"]{width:min(820px,calc(100vw - 24px));max-width:820px;max-height:calc(100dvh - 24px);overflow:auto}
.member-layout{display:grid;grid-template-columns:165px minmax(0,1fr);gap:24px;margin-top:20px}
.member-nav{display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--border);padding-right:16px}
.member-tab{padding:12px;text-align:left;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.member-tab.active{background:#eef0f8;font-weight:700;color:#3c487e}
.member-tab:focus-visible,.member-input:focus-visible{outline:3px solid #6578ca;outline-offset:2px}
.member-content{min-width:0;min-height:270px}.member-content>h3{margin:0 0 18px;font-size:20px}
.member-identity{display:flex;align-items:center;gap:16px;margin-bottom:22px;min-width:0}.member-identity h3{margin:0 0 4px;font-size:20px;overflow-wrap:anywhere}.member-identity p{margin:0;overflow-wrap:anywhere;font-size:13px;color:#646879}
.member-avatar{width:60px;height:60px;object-fit:cover;flex:none;border-radius:16px;image-rendering:pixelated;border:1px solid #dbe0eb;background:#edf1f7}
.member-avatar-small{width:24px;height:24px;border-radius:7px}.member-initial{display:inline-grid;place-items:center;font-weight:800;color:#45588e}
.member-facts{display:grid;gap:0;border:1px solid #e2e6ef;border-radius:12px;overflow:hidden;margin:16px 0}.member-fact{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:14px;border-bottom:1px solid #e2e6ef;font-size:13px}.member-fact:last-child{border:0}.member-fact span{color:#656b7f}.member-fact strong{font-weight:600;text-align:right;overflow-wrap:anywhere}
.member-label{display:block;font-size:13px;font-weight:650;margin:18px 0 8px}.member-input{width:100%;max-width:100%;padding:11px 12px;border:1px solid #ccd4e3;border-radius:8px;background:#fff;color:#1c2439;font:inherit}
.member-avatar-options{border:0;padding:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0}.member-avatar-options legend{font-size:13px;font-weight:650;margin-bottom:12px}.member-avatar-options>label:first-of-type{width:100%;font-size:13px}.member-avatar-choice{position:relative;cursor:pointer}.member-avatar-choice img{width:44px;height:44px;border:2px solid transparent;border-radius:12px;image-rendering:pixelated}.member-avatar-choice input{position:absolute;opacity:0}.member-avatar-choice input:checked+img{border-color:#536aba;outline:2px solid #d8e0fb;outline-offset:2px}.member-avatar-choice input:focus-visible+img{outline:3px solid #6578ca;outline-offset:3px}
.member-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.member-error{color:#a22435;background:#fff1f2;border:1px solid #f2c5cb;border-radius:8px;padding:12px;font-size:13px;line-height:1.6}.member-error[hidden]{display:none}.member-notice{padding:12px;border-radius:8px;background:#fff6df;color:#75551a;font-size:13px}.member-table-scroll{overflow:auto}.member-table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}.member-table th,.member-table td{padding:12px 8px;border-bottom:1px solid #e2e6ef;overflow-wrap:anywhere}.member-table th{color:#646c80}.member-empty{padding:30px 12px;background:#f7f8fc;text-align:center;border-radius:12px;color:#646c80;font-size:14px}
@media(max-width:620px){.member-layout{grid-template-columns:1fr;gap:16px}.member-nav{flex-direction:row;flex-wrap:wrap;gap:4px;border-right:0;border-bottom:1px solid var(--border);padding:0 0 12px}.member-tab{padding:9px;font-size:12px}.member-content{min-height:200px}.member-fact{flex-direction:column;gap:5px}.member-fact strong{text-align:left}.member-identity h3{font-size:17px}}