@import"https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap";*{box-sizing:border-box;margin:0;padding:0;border:none}:root{--bg: #000000;--fg: #ffffff;--hover-bg: #141414;--input-bg: #111111}body.light-mode{--bg: #ffffff;--fg: #000000;--hover-bg: #eeeeee;--input-bg: #f0f0f0}html,body,#root{height:100%;width:100%}body{background:var(--bg);color:var(--fg);font-family:ui-monospace,JetBrains Mono,SF Mono,Menlo,Consolas,monospace;font-size:13px;line-height:1.35;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;-webkit-text-size-adjust:100%}#root{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}header{height:48px;display:flex;align-items:center;justify-content:space-between;padding:2px 14px;gap:12px;background:var(--bg);flex-shrink:0}.top-left{display:flex;align-items:center;gap:10px;flex:1}.brand-group{display:flex;align-items:center;gap:8px;flex-shrink:0}.mobile-menu-btn{display:none!important}.desktop-btn-label{display:inline}.mobile-btn-label{display:none}.brand-title{font-family:Rubik Doodle Shadow,cursive,sans-serif;font-weight:400;font-size:20px;letter-spacing:1px;cursor:pointer;user-select:none;line-height:1}.chris-creative-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--fg);opacity:.65;transition:opacity .15s ease;user-select:none;cursor:pointer;white-space:nowrap}.chris-creative-link:hover{opacity:1}.chris-creative-by{font-size:11px;letter-spacing:.4px;opacity:.85}.chris-creative-logo{height:13px;width:auto;display:block}body.light-mode .chris-creative-logo.dark-only{display:none!important}body:not(.light-mode) .chris-creative-logo.light-only{display:none!important}.top-center{display:flex;align-items:center;justify-content:center;flex:1.5;max-width:480px}.search-input{background:var(--input-bg);color:var(--fg);font-family:inherit;font-size:12px;padding:6px 12px;width:100%;max-width:420px;outline:none;margin:0;border:none}.top-right{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex:1}.btn{background:transparent;color:var(--fg);font-family:inherit;font-size:12px;font-weight:700;padding:3px 8px;margin:1px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;user-select:none;border:none;outline:none;transition:background .1s,color .1s}.btn:hover{background:var(--fg);color:var(--bg)}.btn.active{background:var(--fg);color:var(--bg);font-weight:800}.btn:disabled{opacity:.25;cursor:not-allowed;background:transparent;color:var(--fg)}.app-layout{flex:1;display:flex;overflow:hidden;min-height:0}aside{width:260px;display:flex;flex-direction:column;background:var(--bg);flex-shrink:0;overflow-y:auto;min-height:0;padding:2px}.sidebar-top-bar{display:flex;align-items:center;justify-content:space-between}.sidebar-close-btn,.mobile-nav-backdrop{display:none!important}.sidebar-header{padding:8px 12px;font-weight:800;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;opacity:.5}.nav-list{list-style:none}.nav-item{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;margin:1px 0;cursor:pointer;user-select:none;font-size:12px;background:transparent;color:var(--fg)}.nav-item:hover{background:var(--hover-bg)}.nav-item.active{background:var(--fg);color:var(--bg);font-weight:700}.nav-badge{font-size:11px;opacity:.7}.nav-item.active .nav-badge{opacity:1}.sidebar-footer{margin-top:auto;padding:12px 14px;display:flex;align-items:center;gap:8px;font-size:11px;opacity:.6;border-top:1px solid var(--hover-bg)}.sidebar-link-btn{background:transparent;border:none;color:inherit;font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.8px;cursor:pointer;padding:0;transition:opacity .15s ease}.sidebar-link-btn:hover{opacity:1;text-decoration:underline}main{flex:1;display:flex;flex-direction:column;overflow-y:auto;min-height:0;background:var(--bg);padding:2px}.view-header{padding:8px 12px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;font-size:12px}.view-breadcrumb{display:flex;align-items:center;gap:8px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;padding:2px;background:var(--bg)}.card{background:var(--bg);display:flex;flex-direction:column;cursor:pointer;position:relative;min-height:260px}.card:hover{background:var(--hover-bg)}.preview{flex:1;display:flex;align-items:center;justify-content:center;padding:18px;color:var(--fg)}.preview svg{width:100%;height:100%;max-width:150px;max-height:150px;color:var(--fg)}.card-footer{padding:6px 10px;display:flex;flex-direction:column;gap:4px;margin-top:auto}.card-title{font-weight:700;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-sub{opacity:.6;display:flex;justify-content:space-between;gap:6px;font-size:10px;overflow:hidden}.card-sub span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-sub span:first-child{flex-shrink:0}.card-actions{display:flex;gap:2px;margin-top:auto;padding:2px 0}.card-actions .btn{flex:1;padding:2px;margin:1px;font-size:10px;height:24px;background:transparent;color:var(--fg)}.card-actions .btn:hover{background:var(--fg);color:var(--bg)}.card-edit-btn{position:absolute;top:2px;left:2px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--fg);border:none;cursor:pointer;padding:1px;margin:1px;z-index:10;opacity:.4;transition:opacity .15s,background .15s,color .15s}.card:hover .card-edit-btn{opacity:1}.card-edit-btn:hover{background:var(--fg);color:var(--bg)}.card-edit-btn svg{width:14px;height:14px;display:block}.card-zoom-btn{position:absolute;top:2px;right:2px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--fg);border:none;cursor:pointer;padding:1px;margin:1px;z-index:10;opacity:.4;transition:opacity .15s,background .15s,color .15s}.card:hover .card-zoom-btn{opacity:1}.card-zoom-btn:hover{background:var(--fg);color:var(--bg)}.card-zoom-btn svg{width:14px;height:14px;display:block}#toast{position:fixed;bottom:16px;right:16px;background:var(--fg);color:var(--bg);padding:6px 14px;font-weight:700;font-size:12px;z-index:3000}.modal-overlay{position:fixed;inset:0;background:var(--bg);z-index:2000;display:none;flex-direction:column;padding:1px}.modal-overlay.open{display:flex}.modal-container{display:flex;flex-direction:column;height:100%;width:100%;background:var(--bg)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--bg);flex-shrink:0}.modal-info{display:flex;flex-direction:column;gap:2px}.modal-title{font-weight:700;font-size:14px;letter-spacing:.5px}.modal-meta{font-size:11px;opacity:.6}.modal-actions{display:flex;gap:4px;align-items:center}.modal-actions .btn{padding:4px 10px;margin:1px;font-size:11px;height:28px;background:transparent;color:var(--fg);border:none;cursor:pointer}.modal-actions .btn:hover{background:var(--fg);color:var(--bg)}.modal-body{flex:1;display:flex;flex-direction:row;overflow:hidden;position:relative}.stage-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;overflow:hidden;position:relative}.stage-toolbar{position:absolute;top:10px;left:14px;display:flex;gap:4px;z-index:10}.stage-toolbar .btn{padding:2px 8px;margin:1px;font-size:10px;height:24px;background:transparent;color:var(--fg);border:none;cursor:pointer}.stage-toolbar .btn:hover,.stage-toolbar .btn.active{background:var(--fg);color:var(--bg)}.svg-stage-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.svg-canvas{display:flex;align-items:center;justify-content:center;width:min(70vh,70vw);height:min(70vh,70vw);position:relative;transition:width .15s,height .15s}.svg-canvas.show-bounds{outline:1px dashed var(--fg);outline-offset:-1px}.svg-canvas.alt-bg{background:var(--fg);color:var(--bg)!important}.svg-canvas svg{width:100%;height:100%;display:block;color:inherit}.editor-drawer{width:360px;display:none;flex-direction:column;background:var(--bg);padding:12px;gap:8px;overflow-y:auto;z-index:20}.editor-drawer.open{display:flex}.drawer-tabs{display:flex;gap:4px;margin-bottom:4px}.drawer-tabs .btn{flex:1;height:28px;font-size:11px;padding:2px 6px;background:transparent;color:var(--fg);border:none;cursor:pointer}.drawer-tabs .btn.active{background:var(--fg);color:var(--bg)}.drawer-content{display:flex;flex-direction:column;gap:8px}.control-group{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}.control-label{display:flex;justify-content:space-between;font-size:11px;font-weight:700}.control-group input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--fg);outline:none;margin:8px 0}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;background:var(--bg);border:2px solid var(--fg);cursor:pointer}.quick-btn-row{display:flex;gap:4px;flex-wrap:wrap}.quick-btn-row .btn{flex:1;height:24px;font-size:10px;padding:2px 4px;background:transparent;color:var(--fg);border:none;cursor:pointer}.quick-btn-row .btn:hover{background:var(--fg);color:var(--bg)}#svgCodeEditor{width:100%;height:260px;background:var(--bg);color:var(--fg);font-family:monospace;font-size:11px;line-height:1.4;padding:8px;border:1px solid var(--fg);resize:vertical;white-space:pre;overflow-wrap:normal;overflow-x:auto}.drawer-footer{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:8px}.drawer-footer .btn{height:28px;font-size:11px;padding:2px 8px;background:transparent;color:var(--fg);border:none;cursor:pointer;width:100%}.drawer-footer .btn:hover{background:var(--fg);color:var(--bg)}.info-modal-backdrop,.download-modal-backdrop{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}.info-modal-container{background:var(--bg);color:var(--fg);width:100%;max-width:680px;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;position:relative;border:2px solid var(--fg);padding:0}.info-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--hover-bg);gap:8px}.info-modal-content{padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;-webkit-overflow-scrolling:touch}.download-modal-container{background:var(--bg);color:var(--fg);width:100%;max-width:520px;padding:28px;display:flex;flex-direction:column;position:relative;border:2px solid var(--fg);max-height:90vh;max-height:90dvh;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(hover:none){.card-edit-btn,.card-zoom-btn{opacity:.75}}@media(max-width:992px){aside{width:220px}.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}@media(max-width:768px){header{height:auto;flex-wrap:wrap;padding:8px 10px;gap:8px;border-bottom:1px solid var(--hover-bg)}.top-left{order:1;flex:1 1 auto;gap:8px}.mobile-menu-btn{display:inline-flex!important;align-items:center;gap:4px;padding:4px 8px;font-size:11px;font-weight:800;border:1px solid var(--fg);height:30px}.top-right{order:2;flex:0 0 auto;gap:3px}.top-right .btn{height:30px;padding:3px 6px;font-size:11px}.top-center{order:3;width:100%;max-width:100%;flex:1 1 100%;margin:0}.search-input{max-width:100%;padding:8px 10px;font-size:12px}aside{position:fixed;top:0;left:0;bottom:0;width:min(300px,85vw);height:100%;height:100dvh;z-index:2500;transform:translate(-100%);transition:transform .22s cubic-bezier(.16,1,.3,1);box-shadow:6px 0 30px #000000b3;border-right:2px solid var(--fg);background:var(--bg);padding:0}aside.mobile-open{transform:translate(0)}.sidebar-top-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--hover-bg)}.sidebar-header{padding:0;opacity:.8}.sidebar-close-btn{display:flex!important;align-items:center;justify-content:center;background:transparent;color:var(--fg);font-size:22px;font-weight:700;width:32px;height:32px;cursor:pointer;border:none;line-height:1}.sidebar-close-btn:hover{background:var(--hover-bg)}.nav-item{padding:10px 14px;font-size:12px}.sidebar-footer{padding:14px}.mobile-nav-backdrop{display:block;position:fixed;inset:0;background:#000000bf;z-index:2400;backdrop-filter:blur(2px)}main{padding:0;-webkit-overflow-scrolling:touch}.view-header{padding:8px 10px;font-size:11px;flex-wrap:wrap;gap:6px}.modal-header{flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px;border-bottom:1px solid var(--hover-bg)}.modal-actions{flex-wrap:wrap;gap:4px}.modal-actions .btn{height:32px;font-size:11px;padding:4px 8px;flex:1 1 auto;min-width:calc(25% - 4px)}.modal-nav-group{display:flex;gap:4px;flex:1 1 100%}.modal-nav-group .btn{flex:1}.modal-close-btn{order:10;flex:1 1 100%;font-weight:800;background:var(--hover-bg)}.modal-body.studio-open{flex-direction:column;overflow-y:auto}.modal-body.studio-open .stage-area{min-height:240px;max-height:40vh;flex-shrink:0;padding:8px}.modal-body.studio-open .svg-canvas{width:min(32vh,70vw);height:min(32vh,70vw)}.modal-body.studio-open .editor-drawer{width:100%;flex:1;max-height:60vh;border-top:2px solid var(--fg);padding:10px}.stage-toolbar{top:6px;left:8px;right:8px;flex-wrap:wrap;gap:3px}.stage-toolbar .btn{height:22px;font-size:9px;padding:1px 5px}.modal-body:not(.studio-open) .stage-area{flex:1;padding:12px}.modal-body:not(.studio-open) .svg-canvas{width:min(65vh,85vw);height:min(65vh,85vw)}}@media(max-width:640px){.desktop-btn-label{display:none}.mobile-btn-label{display:inline}.grid{grid-template-columns:repeat(2,1fr);gap:2px;padding:2px}.card{min-height:195px}.preview{padding:10px}.preview svg{max-width:100px;max-height:100px}.card-footer{padding:6px 8px;gap:2px}.card-title{font-size:11px}.card-sub{font-size:9px}.card-actions .btn{height:22px;font-size:9px;padding:1px 3px;font-weight:700}.info-modal-header{padding:12px 14px}.info-modal-content{padding:14px;gap:16px}.download-modal-container{padding:18px 14px}}@media(max-width:440px){.chris-creative-by{display:none}.chris-creative-logo{height:11px}.brand-title{font-size:18px}.mobile-menu-text{display:none}.mobile-menu-btn{padding:4px 6px}.top-right .btn{padding:3px 5px;font-size:10px}}@media(max-width:330px){.grid{grid-template-columns:1fr}}