/* Homepage artwork and story layout. */
#welcome-page .home249-hero .scene-window{overflow:hidden}
#welcome-page .home249-hero .scene-canvas{isolation:isolate}
#welcome-page .home249-hero .scene-shape{z-index:1;left:55%;top:57%;width:155px;height:155px;box-shadow:12px 12px 0 #40326840}
#welcome-page .home249-hero .home249-david{position:absolute;z-index:2;width:580px;height:580px;max-width:none;object-fit:contain;left:47%;top:46%;transform:translate(-50%,-50%);filter:drop-shadow(11px 12px 11px #25253688);pointer-events:none;animation:home249-david 12s ease-in-out infinite}
#welcome-page .home249-hero .scene-cursor{z-index:4;right:60px;bottom:10px}
@keyframes home249-david{0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}50%{transform:translate(-50%,-53%) rotate(1deg)}}
/* The icon image supplies its own rounded square. The chosen app color shines through its dark pixels. */
#welcome-page .home234-tool-grid>span{background:var(--welcome-icon-color,#565d67)!important;border:0!important;box-shadow:none!important;overflow:hidden}
#welcome-page .home234-tool-grid img{display:block;width:100%;height:100%;filter:none;mix-blend-mode:screen}
#welcome-page .home234-tool-grid{width:76%;gap:17px}
#welcome-page .home234-intro .home217-copy p{margin-bottom:13px}
.home249-story-link{display:inline-flex;align-items:center;gap:11px;color:var(--text);font:600 12px/1.5 Rubik,sans-serif;text-decoration:none;padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--story) 65%,var(--border));transition:gap .2s,color .2s}
.home249-story-link:hover{gap:17px;color:var(--story)}
.home217-copy .home249-story-link{margin-top:2px}.home217-copy small+.home249-story-link{margin-top:12px}
/* A separate conversion scene, fully contained in its own story art. */
.home249-transfer{overflow:visible}
.home249-transfer-app{width:88%;max-width:415px;border:1px solid var(--border);border-radius:13px;background:var(--panel);box-shadow:0 20px 43px #0003;overflow:hidden;transform:rotate(-3deg)}
.home249-transfer-app>header{height:43px;display:flex;align-items:center;gap:9px;padding:0 16px;border-bottom:1px solid var(--border);color:var(--text);font-size:11px}.home249-transfer-app>header>i{display:grid;place-items:center;width:25px;height:25px;border-radius:6px;background:#84b4b6;color:#172f32}.home249-transfer-app>header>span{margin-left:auto;color:var(--muted);font-size:9px;letter-spacing:.14em}
.home249-transfer-body{padding:21px 25px 16px}.home249-upload,.home249-output{display:flex;align-items:center;gap:13px;min-height:67px;padding:11px 15px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:12px;font-weight:650}.home249-upload>i,.home249-output>i{font-size:25px;color:#87a8c4}.home249-output>i{color:#91c5af}.home249-upload small,.home249-output small{display:block;margin-top:4px;color:var(--muted);font-size:9px;font-weight:400}.home249-output{opacity:.55;animation:home249-output 7.8s ease-in-out infinite}.home249-output>b{margin-left:auto;color:#92c7ac;opacity:0;animation:home249-check 7.8s ease-in-out infinite}
.home249-convert-path{position:relative;display:flex;align-items:center;justify-content:center;height:69px;gap:12px;color:#9fc7b3;font-size:10px}.home249-convert-path>i{font-size:14px}.home249-moving-file{position:absolute;left:14%;top:19px;font-size:22px;color:#abd5c4;filter:drop-shadow(0 2px 3px #0005);animation:home249-transfer 7.8s ease-in-out infinite}
.home249-transfer-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 19px;border-top:1px solid var(--border);font-size:10px;color:var(--muted)}.home249-transfer-footer>span:last-child{padding:8px 12px;border-radius:6px;background:#a8d8c4;color:#234337;font-weight:650;animation:home249-check 7.8s ease-in-out infinite}
@keyframes home249-transfer{0%,12%,100%{left:14%;opacity:0;transform:scale(.8)}20%{opacity:1}53%,70%{left:75%;opacity:1;transform:scale(1)}78%{opacity:0}}
@keyframes home249-output{0%,41%,100%{opacity:.55;transform:translateY(3px)}57%,85%{opacity:1;transform:none}}
@keyframes home249-check{0%,51%,100%{opacity:.3}60%,85%{opacity:1}}
/* Keep the free promise compact, with two intersecting slips rather than loading bars. */
.home227-free .home233-free-tape{left:47%;top:53%;width:125px;transform:rotate(-10deg)!important}
.home233-free-tape>span{font-size:13px;padding:9px 9px;box-shadow:0 7px 14px #384b3938}.home233-free-tape>span+span{font-size:9px;letter-spacing:.17em;padding:6px 10px}
/* A proper two-tool workspace: perform work, then move the tools. */
.home249-workspace{position:relative;width:97%;max-width:455px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:0 19px 45px #0003;overflow:hidden;transform:rotate(-2deg);color:var(--text)}
.home249-workbar{height:38px;display:flex;align-items:center;gap:9px;padding:0 12px;border-bottom:1px solid var(--border);font-size:10px}.home249-workbar>i{color:#be9ed5;font-size:14px}.home249-workbar>span{margin-left:auto;font-size:8px;color:var(--muted)}
.home249-work-tabs{height:37px;display:flex;align-items:center;gap:5px;padding:5px 10px;background:var(--bg);border-bottom:1px solid var(--border);font-size:8px;white-space:nowrap}.home249-work-tabs>span{min-width:0;display:flex;align-items:center;gap:4px;padding:5px 6px;border-radius:5px;color:var(--muted)}.home249-work-tabs i{color:#9ebfd0}.home249-work-tabs .home249-tab-convert{background:var(--panel);color:var(--text)}.home249-work-tabs .home249-tab-gradient i{color:#be9ed5}.home249-work-tabs .home249-tab-crop i{color:#b6c297}
.home249-work-canvas{display:flex;gap:9px;padding:12px 10px 9px;height:237px}.home249-work-canvas>div{flex:1;min-width:0;border:1px solid var(--border);border-radius:8px;background:var(--bg);padding:10px 9px;box-shadow:0 2px 5px #0001;transition:transform .6s ease,box-shadow .6s ease}.home249-work-canvas small{display:block;color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.07em;margin-bottom:10px}
.home249-work-source,.home249-work-result{display:flex;align-items:center;gap:5px;padding:8px 6px;min-height:38px;background:var(--panel);border-radius:5px;font-size:9px;white-space:nowrap}.home249-work-source>i{color:#8aabc3}.home249-work-result>i{color:#91c7ad}.home249-work-source b{font-size:7px;color:var(--muted);margin-left:auto}.home249-work-result{opacity:.2;transition:opacity .25s}.home249-work-result>i:last-child{margin-left:auto}.home249-work-arrow{text-align:center;height:36px;padding-top:11px;color:#9ac2b1;font-size:9px;font-weight:600}.home249-work-download{margin-top:9px;padding:8px 5px;background:#a8d8c4;color:#274d40;text-align:center;border-radius:5px;font-size:9px;font-weight:650;opacity:.45;transition:opacity .25s}
.home249-work-preview{height:120px;border-radius:6px;background:linear-gradient(135deg,#6277b5,#c8a3c4,#efaf8d);transition:filter .65s}.home249-work-handle{display:block;position:relative;left:24%;top:53%;width:15px;height:15px;border:2px solid white;border-radius:50%;box-shadow:0 2px 5px #0005;transition:left .8s}.home249-work-colors{display:flex;align-items:center;gap:6px;padding-top:8px}.home249-work-colors>i{width:14px;height:14px;border-radius:50%;background:#6277b5}.home249-work-colors>i:nth-child(2){background:#c8a3c4}.home249-work-colors>i:nth-child(3){background:#efaf8d}.home249-work-colors>span{margin-left:auto;color:var(--muted);font-size:8px}.home249-work-save{margin-top:9px;color:var(--muted);font-size:8px}
.home249-work-footer{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-top:1px solid var(--border);font-size:9px}.home249-work-footer>span:first-child{color:#b8a2d5;font-weight:600}.home249-work-footer>span:last-child{color:var(--muted);font-size:8px}
.home249-pointer{position:absolute;z-index:5;left:28%;top:51%;font-size:20px;color:#fff;filter:drop-shadow(1px 2px 2px #000b);pointer-events:none;transition:left .8s,top .8s,transform .8s}.home249-pointer>b{display:block;position:absolute;left:1px;top:1px;width:19px;height:19px;border:2px solid #fff;border-radius:50%;opacity:0}.home249-workspace[data-work-stage="convert"] .home249-pointer{left:25%;top:45%}.home249-workspace[data-work-stage="converted"] .home249-work-result,.home249-workspace[data-work-stage="download"] .home249-work-result,.home249-workspace[data-work-stage="gradient"] .home249-work-result,.home249-workspace[data-work-stage="reorder"] .home249-work-result,.home249-workspace[data-work-stage="return"] .home249-work-result{opacity:1}.home249-workspace[data-work-stage="download"] .home249-work-download,.home249-workspace[data-work-stage="gradient"] .home249-work-download,.home249-workspace[data-work-stage="reorder"] .home249-work-download,.home249-workspace[data-work-stage="return"] .home249-work-download{opacity:1}
.home249-workspace[data-work-stage="download"] .home249-pointer{left:27%;top:75%}.home249-workspace[data-work-stage="gradient"] .home249-pointer{left:72%;top:47%}.home249-workspace[data-work-stage="gradient"] .home249-work-handle,.home249-workspace[data-work-stage="reorder"] .home249-work-handle,.home249-workspace[data-work-stage="return"] .home249-work-handle{left:73%}.home249-workspace[data-work-stage="gradient"] .home249-work-preview,.home249-workspace[data-work-stage="reorder"] .home249-work-preview,.home249-workspace[data-work-stage="return"] .home249-work-preview{filter:hue-rotate(66deg)}.home249-workspace[data-work-stage="reorder"] .home249-pointer{left:49%;top:26%}.home249-workspace[data-work-stage="reorder"] .home249-work-converter{transform:translateX(calc(100% + 9px));box-shadow:0 12px 20px #0004;z-index:2}.home249-workspace[data-work-stage="reorder"] .home249-work-gradient{transform:translateX(calc(-100% - 9px));z-index:1}.home249-workspace[data-work-stage="return"] .home249-pointer{left:25%;top:45%}
.home249-workspace[data-work-stage="converted"] .home249-pointer>b,.home249-workspace[data-work-stage="download"] .home249-pointer>b,.home249-workspace[data-work-stage="gradient"] .home249-pointer>b{animation:home249-tap .7s ease-out 1}@keyframes home249-tap{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(2.2)}}
/* A heart visibly saves the tool and reveals it in the adjacent list. */
.home233-fav-art .home233-fav-card>i{color:#8e8490!important;font-size:22px!important;animation:home249-heart 6s ease-in-out infinite!important;filter:drop-shadow(0 0 0 transparent)}
.home233-fav-art .home233-fav-card{position:relative}.home233-fav-art .home233-fav-card:after{content:"";position:absolute;right:6px;top:50%;width:24px;height:24px;border:2px solid #df83a9;border-radius:50%;transform:translateY(-50%) scale(.3);opacity:0;animation:home249-heart-ring 6s ease-out infinite}
.home233-fav-art .home233-saved-gradient{animation:home249-saved 6s ease-in-out infinite!important}.home233-fav-art .home233-fav-pointer{animation:home249-fav-pointer 6s ease-in-out infinite!important}
@keyframes home249-heart{0%,18%,100%{color:#8e8490;transform:scale(1)}27%,76%{color:#e875a4;transform:scale(1.26);filter:drop-shadow(0 0 7px #e875a488)}35%{transform:scale(1)}}
@keyframes home249-heart-ring{0%,20%,100%{opacity:0;transform:translateY(-50%) scale(.3)}27%{opacity:.9}39%{opacity:0;transform:translateY(-50%) scale(2.3)}}
@keyframes home249-saved{0%,28%,100%{opacity:0;transform:translateY(9px)}38%,82%{opacity:1;transform:none}}
@keyframes home249-fav-pointer{0%,7%,100%{opacity:0;left:25%;top:68%}13%,25%{opacity:1;left:43%;top:47%}35%,80%{opacity:0;left:43%;top:47%}}
.home233-fav-card img,.home233-fav-list [data-home-tool] img{mix-blend-mode:screen!important;width:33px;height:33px;border:0!important;background:var(--welcome-icon-color,#6f7d89)!important}
.home233-fav-list [data-home-tool] img{width:24px;height:24px}
/* The brand mark resolves to the six square PXLS glyph, then scatters and rebuilds. */
.home249-brand-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.home249-pxls-mark{position:relative;width:176px;height:176px;border-radius:32px;background:#222325;box-shadow:0 17px 35px #0003;transform:rotate(-4deg)}
.home249-pxls-mark i{position:absolute;left:calc(26px + var(--px)*29px);top:calc(29px + var(--py)*29px);width:28px;height:28px;background:white;animation:home249-pixel 6s ease-in-out infinite;animation-delay:calc(var(--d)*.16s)}
@keyframes home249-pixel{0%,16%,76%,100%{opacity:1;transform:translate(0,0) scale(1)}38%,52%{opacity:.08;transform:translate(calc((var(--px) - 1)*24px),calc((var(--py) - 1)*16px)) scale(.3)}}
.home249-brand-word{font:700 15px/1 Rubik,sans-serif;letter-spacing:.3em;color:var(--text);opacity:.72}
html:not([data-pxls-sidebar="compact"]) .sidebar-collapse-label{color:color-mix(in srgb,var(--muted) 70%,var(--text))!important}
@media(max-width:760px){#welcome-page .home249-hero .home249-david{width:410px;height:410px;left:48%;top:47%}#welcome-page .home249-hero .scene-shape{width:120px;height:120px;border-width:20px}.home249-transfer-app{width:94%}.home249-transfer-body{padding:13px 15px 10px}.home249-upload,.home249-output{min-height:56px;font-size:10px}.home249-convert-path{height:50px}.home249-workspace{width:100%;transform:rotate(-1deg)}.home249-work-canvas{height:218px}.home249-work-preview{height:101px}.home249-work-tabs{font-size:7px}.home249-work-footer>span:last-child{font-size:7px}.home249-pxls-mark{transform:scale(.82) rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.home249-david,.home249-moving-file,.home249-output,.home249-output>b,.home249-transfer-footer>span:last-child,.home233-fav-art .home233-fav-card>i,.home233-fav-art .home233-fav-card:after,.home233-fav-art .home233-saved-gradient,.home233-fav-art .home233-fav-pointer,.home249-pxls-mark i{animation:none!important}.home233-fav-art .home233-saved-gradient{opacity:1!important}.home249-pointer{display:none}}

/* Let the bottom arc pass in front of David while the rest of the shape sits behind him. */
#welcome-page .home249-hero .home249-front-ring{position:absolute;z-index:3;left:55%;top:57%;width:155px;height:155px;border:28px solid #ccebd8;border-radius:45px;transform:translate(-50%,-50%) rotate(25deg);clip-path:polygon(0 61%,100% 61%,100% 100%,0 100%);pointer-events:none}
@media(max-width:760px){#welcome-page .home249-hero .home249-front-ring{width:120px;height:120px;border-width:20px}}