/* Glass surfaces and explicit placement keep the catalog centered even if ad rails are hidden. */
:root{--glass:rgba(255,255,255,.76);--glass-soft:rgba(247,245,255,.65);--glass-line:rgba(132,108,190,.2);--glass-shadow:0 12px 38px #49326b0b;--glass-shine:inset 0 1px 0 #ffffffcc}
:root[data-theme=dark]{--glass:rgba(29,29,44,.76);--glass-soft:rgba(40,39,58,.62);--glass-line:rgba(184,166,241,.19);--glass-shadow:0 14px 40px #0002;--glass-shine:inset 0 1px 0 #ffffff10}
html{scroll-padding-top:115px}body{background:radial-gradient(ellipse at 12% 5%,#8956f018,transparent 45%),radial-gradient(ellipse at 90% 35%,#387efb10,transparent 45%),var(--page);background-attachment:fixed}
html .content-width{width:min(1480px,calc(100% - 56px))}html .page-grid{width:min(1840px,100%);margin-inline:auto;padding-inline:24px;display:grid;grid-template-columns:120px minmax(0,1fr) 120px;grid-template-areas:'left content right';gap:24px;align-items:start}html .page-grid>.page-content{grid-area:content;width:100%;min-width:0}html .page-grid>.ad-rail:first-child{grid-area:left}html .page-grid>.ad-rail:last-child{grid-area:right}html .tool-grid,html .category-grid{width:100%;min-width:0}html .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.catalog-controls{flex-wrap:wrap;gap:12px}.category-filters{flex-wrap:wrap}.tool-card{min-width:0}
html .site-header{position:sticky;top:12px;z-index:40;width:min(1500px,calc(100% - 40px));margin:12px auto 0;border:1px solid var(--glass-line);border-radius:24px;background:var(--glass);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);box-shadow:var(--glass-shadow),var(--glass-shine)}html .header-inner{display:grid;grid-template-columns:1fr auto 1fr;width:100%;height:76px;min-height:0;padding:0 24px;gap:24px}html .brand{justify-self:start;gap:9px}html .brand-mark{width:40px!important;height:40px!important;transform:none;margin:0}html .site-header nav{display:flex;justify-content:center;align-items:center;gap:6px;width:auto;order:initial}html .site-header nav>a,html .saved-nav{padding:10px 12px;border-radius:12px;font-size:13px;white-space:nowrap}html .site-header nav>a:hover,html .saved-nav:hover{background:var(--glass-soft)}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}html .header-badge{display:none}html .theme-toggle{margin:0;border-radius:13px;background:var(--glass-soft);padding:10px 13px}html .hero{background:transparent;padding-top:66px}html .hero h1{max-width:1000px;margin-inline:auto}html .hero-content{max-width:1100px}
html .editor-panel,html .editor-card,html .tool-card,html .related-panel,html .steps-grid article,html .privacy-strip,html .smart-search,html .search-results,html .floating-card,html dialog{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow),var(--glass-shine);border-radius:22px}html .editor-panel,html .editor-card{padding:28px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}html .tool-card{overflow:hidden}html .tool-card:hover{border-color:#9b7ce980;box-shadow:0 16px 40px #7351bf18,var(--glass-shine)}html .editor-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}html .related-panel{position:static;width:100%;padding:24px;margin:0}html .related-panel h2,html .related-panel h3{margin:0 0 16px}html .related-panel>div{display:flex;flex-wrap:wrap;gap:12px}html .related-button{flex:1 1 220px;max-width:380px;padding:14px;border:1px solid var(--glass-line);border-radius:14px}html .related-tip{display:none}html .button,html .tool-field select,html .tool-field input{border-radius:12px}html .button.subtle,html .bg-controls,html .pixel-options,html .discord-stage{background:var(--glass-soft);border-color:var(--glass-line)}html .dropzone{border-radius:18px;background:var(--glass-soft);min-height:170px}html .dropzone.has-file{min-height:76px}html .bg-layout{grid-template-columns:minmax(0,1fr) 280px;align-items:start}html .bg-controls{border-radius:18px}html .image-preview{max-height:480px!important}html .image-preview canvas{max-height:440px}html .image-preview.is-zoomed canvas{max-height:none}html .tool-heading{margin-bottom:26px}html .ad-placeholder{border-radius:18px;background:var(--glass-soft)}html .processing-note{font-size:11px}
.export-dialog{width:min(850px,calc(100% - 32px));max-height:85vh;padding:28px;color:var(--text);overflow:auto}.export-dialog::backdrop{background:#11112588;backdrop-filter:blur(7px)}.export-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.export-heading h2{margin:0}.export-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.export-card{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--glass-soft);min-width:0}.export-card img,.export-card pre{height:140px;width:100%;object-fit:contain;margin:0;padding:10px;background:var(--surface2);border-radius:10px;overflow:hidden;font-size:12px}.export-card h3{margin:0}.export-card .button{align-self:flex-start}
@media(min-width:1750px){html .category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1280px){html .page-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:'content';padding-inline:28px}html .ad-rail{display:none}html .header-inner{gap:12px}html .brand-subtitle{display:none}}
@media(max-width:760px){html{scroll-padding-top:145px}html .site-header{top:8px;width:calc(100% - 24px);border-radius:20px}html .header-inner{grid-template-columns:1fr auto;height:auto;padding:12px 16px;gap:8px}html .site-header nav{grid-column:1/-1;grid-row:2;gap:2px}html .site-header nav>a,html .saved-nav{font-size:12px;padding:8px 10px}.header-actions{grid-column:2;grid-row:1}html .brand-mark{width:32px!important;height:32px!important}html .brand{font-size:25px}html .theme-toggle{font-size:11px;padding:8px 10px}html .page-grid{padding-inline:16px}html .content-width{width:calc(100% - 32px)}html .category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}html .editor-panel,html .editor-card{padding:18px}html .bg-layout{grid-template-columns:minmax(0,1fr)}html .related-panel{padding:20px}html .hero{padding-top:44px}.export-grid{grid-template-columns:1fr}}
@media(max-width:480px){html .category-grid{grid-template-columns:minmax(0,1fr)}html .hero h1{font-size:42px}html .related-button{max-width:none}.export-dialog{padding:18px}}
@supports not (backdrop-filter:blur(1px)){html .site-header,html .editor-panel,html dialog{background:var(--surface)}}
/* Drawing workspace: tools left, canvas center, colors and layers right. */
.pixel-menubar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:20px}.pixel-menubar>.primary{margin-left:auto}.editor-disclosure{border:1px solid var(--glass-line);border-radius:12px;padding:10px 12px;min-width:0;background:var(--glass-soft)}.editor-disclosure>summary{cursor:pointer;font-size:13px;font-weight:600;list-style-position:inside}.editor-disclosure[open]>summary{margin-bottom:16px}.pixel-menubar>.editor-disclosure{position:relative}.pixel-menubar>.editor-disclosure[open]>div{position:absolute;top:45px;left:0;z-index:15;background:var(--surface);border:1px solid var(--border);box-shadow:0 12px 40px #0003;padding:20px;width:320px;border-radius:16px;display:flex;flex-wrap:wrap;gap:10px}.pixel-menubar .result-actions{margin:0;border:0}.pixel-filemenu .pixel-size-row{width:100%;gap:12px}.pixel-workbench{display:grid;grid-template-columns:48px minmax(0,1fr) 230px;gap:16px;align-items:start}.pixel-workbench>.pixel-tool-strip{display:flex;flex-direction:column;flex-wrap:nowrap;gap:8px;margin:0}.pixel-tool-strip button{height:44px;width:44px;min-width:44px;padding:10px}.pixel-tool-strip svg{width:24px;height:24px}.pixel-center,.pixel-sidebar{min-width:0}.pixel-contextbar{min-height:65px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:12px}.pixel-contextbar .tool-field{max-width:95px;font-size:11px}.pixel-contextbar input{min-height:34px!important;padding:6px 10px!important}.pixel-contextbar .control-row{gap:10px}.pixel-current-tool{font-size:13px;margin-right:auto}.pixel-contextbar .editor-disclosure[open]{width:100%}html .pixel-canvas-wrap{min-height:540px;max-height:700px;display:grid;align-items:center;background:var(--glass-soft);padding:24px;border-radius:18px}.pixel-viewbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px}.pixel-viewbar>.tool-field{max-width:105px}.pixel-viewbar .muted{margin-left:auto;font-size:10px}.pixel-colorbox{padding:16px;border:1px solid var(--glass-line);border-radius:16px;margin-bottom:16px}.pixel-colorbox h3{font-size:14px;margin:0 0 14px}.pixel-colorbox>.tool-field{margin-bottom:16px}.pixel-layers h3{font-size:14px}.pixel-sidebar .editor-disclosure{margin-top:12px}.pixel-layer-settings>.tool-field{margin-bottom:14px}.pixel-sidebar .color-control{flex-wrap:wrap}.pixel-sidebar .color-popover{left:auto;right:0}.pixel-editor>.editor-disclosure{margin-top:20px}.pixel-frames{border:0;padding:0;margin:0}.pixel-frames>h3{display:none}.pixel-export>.tool-field{margin-bottom:20px;max-width:200px}.pixel-export>.button{margin:0 10px 10px 0}
@media(max-width:1000px){.pixel-workbench{grid-template-columns:44px minmax(0,1fr)}.pixel-sidebar{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px}.pixel-colorbox{margin:0}html .pixel-canvas-wrap{min-height:400px}.pixel-contextbar{min-height:50px}}
@media(max-width:600px){.pixel-workbench{grid-template-columns:minmax(0,1fr)}.pixel-workbench>.pixel-tool-strip{flex-direction:row;flex-wrap:wrap}.pixel-tool-strip button{width:36px;height:36px;min-width:36px;padding:7px}.pixel-sidebar{grid-template-columns:minmax(0,1fr)}html .pixel-canvas-wrap{min-height:300px;padding:8px}.pixel-menubar>.button{font-size:11px;padding:8px}.pixel-menubar>.editor-disclosure[open]>div{width:min(280px,75vw)}}
.bg-method-row{display:flex;justify-content:flex-end;margin:14px 0;gap:12px}.bg-method-row .tool-field{width:220px}.bg-method-row select{width:100%;background:var(--glass-soft);color:var(--text);border:1px solid var(--border);padding:10px 12px}
/* Discord editor follows the icon/shape/element workflow. */
html .discord-editor-layout{grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);gap:28px;align-items:start}.discord-left,.discord-pane{min-width:0}.discord-tabs{display:flex;gap:6px;padding:5px;background:var(--glass-soft);border:1px solid var(--glass-line);border-radius:15px;margin-bottom:24px}.discord-tabs .button{flex:1;background:transparent;border:0;padding:12px 8px;font-size:12px}.discord-tabs [aria-selected=true]{background:linear-gradient(125deg,#8c5de8,#6944d7);color:white;box-shadow:0 4px 12px #7c3aed20}html .discord-library{margin:0;padding:0;border:0}.discord-library>h3{display:none}.discord-library>input{margin:0 0 14px}.discord-library .control-row{gap:10px}.discord-library .checkbox-row{flex-basis:100%;padding:6px 0}html .discord-symbol-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:9px;max-height:390px;overflow:auto;margin:16px 0}html .discord-symbol-grid button{padding:10px;border-radius:12px;border-color:transparent;background:var(--glass-soft)}html .discord-symbol-grid button:hover{border-color:var(--purple);background:#bda3f32e}html .discord-symbol-grid img{height:32px}html[data-theme=dark] .discord-symbol-grid img[src*='/filled/']{filter:invert(90%) sepia(15%) saturate(500%) hue-rotate(205deg)}html .discord-stage{position:sticky;top:115px;padding:24px;gap:20px;border-radius:20px}html .discord-stage>canvas{width:100%;height:310px;max-height:350px;object-fit:contain;padding:24px;image-rendering:auto}.discord-stage>.tool-field{width:100%}.discord-stage .result-actions{margin:0;padding:0;border:0;width:100%;gap:8px}.discord-stage .result-actions>.primary{width:100%;min-height:48px}.discord-stage .result-actions>.button:not(.primary){font-size:11px;padding:8px 10px;flex:1}.discord-chat{font-size:13px}.discord-chat .muted{font-size:11px}.discord-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.discord-fields>.editor-disclosure,.discord-fields>.checkbox-row{grid-column:1/-1}.discord-pane>.editor-disclosure{margin:20px 0}.discord-element-controls{display:flex;flex-direction:column;padding:0;border:0}.discord-element-controls>.editor-disclosure{margin-top:10px}.discord-shape-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:24px}.discord-shape-grid button{padding:6px;min-width:0}.discord-shape-grid canvas{width:100%;height:auto}.discord-shape-grid [aria-pressed=true]{border-color:var(--purple);background:#a78bfa25}.discord-fields .color-control{flex-wrap:wrap}.discord-search-pane>.editor-disclosure{margin-top:24px}
@media(max-width:1000px){html .discord-editor-layout{grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);gap:18px}html .discord-symbol-grid{grid-template-columns:repeat(6,minmax(0,1fr))}html .discord-stage{padding:16px}html .discord-stage>canvas{height:250px}.discord-tabs .button{font-size:11px}}
@media(max-width:760px){html .discord-editor-layout{grid-template-columns:minmax(0,1fr)}html .discord-stage{position:static;order:0}html .discord-stage>canvas{height:240px}.discord-fields{gap:14px}.discord-shape-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
html .pixel-tool-strip button[aria-pressed=true]{color:#fff;background:#7950da}
html[data-theme=dark] .discord-symbol-grid img[src*='/brands/']{filter:invert(90%) sepia(15%) saturate(500%) hue-rotate(205deg)}
@media(max-width:700px){html .related-panel>div:first-of-type{display:flex;gap:12px}html .related-button{padding:14px!important;border:1px solid var(--glass-line)}}
@media(max-width:760px){html .site-header nav>a{display:block}html .site-header nav{width:100%}.pixel-contextbar .editor-disclosure{max-width:100%}}