@charset "UTF-8";
.template-search-field{margin:0 0 12px}.template-search-field>label,.template-sport-field>label{display:block;font-size:10px;color:#c3cbd4;margin-bottom:6px}.template-search-field>div{display:flex;gap:4px}.template-search-field input{font-size:11px;padding:7px}.template-search-field button{width:27px;border:1px solid #4b535c;border-radius:4px;font-size:16px}.template-sport-field{margin:0 0 14px}.template-sport-field select{font-size:11px;padding:7px}.category-list{max-height:139px;overflow-y:auto;scrollbar-width:thin;padding:2px}.template-search-field input::-webkit-search-cancel-button{display:none}
:root{color-scheme:dark;--bg:#181a20;--panel:#22242c;--panel2:#292b35;--line:#353742;--text:#ececf1;--muted:#999daE;--accent:#c1b3f6;--accent-ink:#242033;--green:#c2db9e;font-family:Inter,"Yu Gothic UI","Meiryo",sans-serif;font-size:12px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);height:100dvh;overflow:hidden}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit;background:none;border:0;transition:background .15s,color .15s}button:hover{background:#ffffff0d}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input,select,textarea{color:var(--text);border:1px solid #3a3c49;border-radius:5px;background:#1d1f27;padding:9px 10px;min-width:0;width:100%}input[type=number]{font-variant-numeric:tabular-nums}input[type=color]{padding:3px;width:31px;height:31px;cursor:pointer}input[type=range]{accent-color:var(--accent);padding:0;height:20px;border:0;background:none}input[type=checkbox]{width:auto;accent-color:var(--accent)}textarea{resize:vertical;line-height:1.65}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button svg{vertical-align:middle}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.app-header{height:66px;display:flex;align-items:center;padding:0 21px;gap:15px;border-bottom:1px solid var(--line);background:#20222a}.brand{color:var(--text);text-decoration:none;display:flex;align-items:center;gap:10px;font-size:25px;font-weight:650;letter-spacing:-1px;line-height:1}.brand-sub{display:block;font-size:7px;letter-spacing:1.85px;font-weight:600;margin-top:5px;color:#adb0be}.brand-mark{position:relative;display:block;width:28px;height:31px}.brand-mark b{position:absolute;background:var(--accent);width:10px;height:29px;left:0;bottom:0}.brand-mark b:nth-child(2){width:16px;height:10px;left:12px;bottom:0}.brand-mark b:nth-child(3){width:12px;height:12px;left:15px;top:0;background:var(--green)}.beta{font-size:8px;font-weight:600;color:#c4b8ec;background:#c1b3f60c;border:1px solid #5c526f;border-radius:4px;letter-spacing:.6px;padding:3px 5px;white-space:nowrap}.header-separator{width:1px;height:26px;background:var(--line);margin:0 5px}.document-name{border-color:transparent;background:none;width:180px;font-weight:500;padding:8px}.document-name:hover{border-color:var(--line)}.save-state{font-size:10px;color:var(--muted);white-space:nowrap}.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:35px;border:1px solid var(--line);padding:9px 13px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap}.button svg{width:15px;height:15px}.button.quiet{border-color:transparent}.button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.button.primary:hover{background:#d1c6ff}.button.full{width:100%}.options-bar{height:43px;display:flex;align-items:center;border-bottom:1px solid var(--line);padding:0 21px;background:#1d1f26;justify-content:space-between}.workspace-label{font-size:10px;color:#b1b3c0;display:flex;align-items:center;gap:8px}.live-dot{display:inline-block;height:5px;width:5px;border-radius:50%;background:var(--accent)}.option-actions{display:flex;align-items:center;gap:10px}.option-actions button{font-size:10px;padding:6px 9px;border-radius:4px;color:#b5b8c6}.option-actions button[aria-pressed=true]{color:var(--accent);background:#c1b3f60c}.option-actions span{margin-left:9px;color:#818695;font-size:10px}.editor-layout{height:calc(100dvh - 138px);display:grid;grid-template-columns:238px minmax(320px,1fr) 270px;min-height:0}.library-panel{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--panel);min-height:0}.panel-tabs{display:flex;border-bottom:1px solid var(--line);height:45px;flex-shrink:0;padding:0 14px;gap:21px}.panel-tabs button{height:100%;position:relative;font-size:11px;color:var(--muted)}.panel-tabs button.active{color:var(--text)}.panel-tabs button.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent)}.library-content{padding:20px 16px;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:#494b58 transparent}.eyebrow{font-size:8px;letter-spacing:1.5px;color:var(--accent);font-weight:650}.library-heading h1{font-size:22px;letter-spacing:.6px;line-height:1.6;font-weight:550;margin:10px 0 8px}.library-heading p{font-size:10px;color:var(--muted);margin:0 0 22px}.category-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.category-list button{font-size:10px;border:1px solid var(--line);border-radius:20px;padding:6px 10px;color:#b0b3c0}.category-list button.active{background:#c1b3f617;border-color:#7b6f9d;color:#ded6fb}.template-list{display:grid;grid-template-columns:1fr 1fr;gap:13px 9px}.template-card{text-align:left;padding:0;border-radius:5px;min-width:0}.template-card .thumbnail{height:64px;border-radius:5px;overflow:hidden;border:1px solid #414451;position:relative;display:flex;align-items:flex-end;padding:7px;background:linear-gradient(140deg,#55636c,#27353d 50%,#17242a)}.template-card.active .thumbnail{outline:2px solid var(--accent);outline-offset:2px}.template-card .thumbnail:before{content:"";position:absolute;inset:0;opacity:.16;background:linear-gradient(135deg,transparent 40%,#c3e5e1 40%,transparent 80%)}.template-card .mini-card{position:relative;width:100%;padding:5px 6px;font-size:7px;line-height:1.5;box-shadow:0 2px 6px #0003;overflow:hidden;white-space:nowrap}.mini-card small{display:block;font-size:4px;opacity:.75}.mini-card b{font-size:7px;font-weight:700}.template-card .mini-corner{width:85%;align-self:flex-start;padding:4px}.template-card .mini-title{align-self:center;text-align:center;padding:8px 4px}.template-card .template-name{display:block;font-size:9px;color:#c4c6d2;margin:7px 0 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.template-card .template-number{font-size:8px;color:#6f7586;margin-right:3px;font-variant-numeric:tabular-nums}.library-footer{padding:13px 10px;border-top:1px solid var(--line);font-size:8px;white-space:nowrap;color:#9097a6;display:flex;align-items:center;gap:6px}.local-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:3px}.studio{display:flex;min-height:0;overflow:hidden;background:#17191f}.tool-rail{width:49px;flex-shrink:0;padding:12px 6px;background:#1e2028;border-right:1px solid #2c2f39;display:flex;align-items:center;flex-direction:column;gap:6px}.tool-rail button{height:35px;width:35px;border-radius:6px;color:#aaafc1}.tool-rail button.active{color:var(--accent);background:#c1b3f620}.tool-rail svg{width:18px;height:18px}.rail-divider{height:1px;width:20px;background:var(--line);margin:6px}.tool-rail input{margin-top:8px}.stage-wrap{flex:1;min-width:0;position:relative;display:flex;flex-direction:column}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;padding:17px 21px;gap:10px}.canvas-toolbar>div{display:flex;gap:11px;align-items:center;white-space:nowrap}.canvas-tag{font-size:8px;letter-spacing:1.5px;color:#a3a7b5}.canvas-toolbar #canvas-description{font-size:8px;color:#656c7d;letter-spacing:.5px}.preview-label{font-size:9px;display:flex;align-items:center;gap:7px;color:#8d93a4;white-space:nowrap}.preview-label select{font-size:10px;padding:5px 6px;width:83px;border-color:#363945;background:#22252d}.stage{flex:1;position:relative;overflow:hidden;min-height:0;background-image:radial-gradient(#ffffff0b .7px,transparent .7px);background-size:12px 12px;touch-action:none}.artboard{position:absolute;left:50%;top:50%;transform-origin:center;box-shadow:0 16px 65px #0004;isolation:isolate;will-change:transform}.artboard canvas{display:block;width:100%;height:100%}.artboard.checker{background-color:#96999f;background-image:linear-gradient(45deg,#aaaeb3 25%,transparent 25%),linear-gradient(-45deg,#aaaeb3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aaaeb3 75%),linear-gradient(-45deg,transparent 75%,#aaaeb3 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.artboard.dark{background:radial-gradient(ellipse at 70% 20%,#546575,transparent 70%),linear-gradient(145deg,#23242e,#0d1b24)}.artboard.light{background:radial-gradient(ellipse at 70% 20%,#f3d7be,transparent 70%),linear-gradient(145deg,#99baba,#e9e1d5)}.artboard.green{background:#00ff00}.safe-area{position:absolute;inset:5%;border:1px dashed #ffffff4d;pointer-events:none}.safe-area span{font-size:8px;position:absolute;top:6px;left:7px;letter-spacing:1px;color:#ffffff88}.selection{position:absolute;border:1px solid var(--accent);pointer-events:none;transform-origin:center}.selection:before,.selection:after{content:"";position:absolute;height:5px;width:5px;border:1px solid #fff;background:#9785d7;top:-3px}.selection:before{left:-3px}.selection:after{right:-3px}.selection-label{position:absolute;bottom:calc(100% + 5px);left:-1px;font-size:9px;padding:3px 5px;color:#272238;background:var(--accent);white-space:nowrap;border-radius:3px;max-width:200px;overflow:hidden;text-overflow:ellipsis}.resize-handle{position:absolute;width:9px;height:9px;background:#fff;border:1px solid #82709e;bottom:-5px;right:-5px;pointer-events:auto;cursor:nwse-resize;padding:0}.crop-box{position:absolute;border:1px solid #fff;background:#c1b3f633;box-shadow:0 0 0 10000px #0007;pointer-events:none}.stage-bottom{height:56px;padding:8px 17px;display:flex;align-items:center;justify-content:space-between;gap:10px}.history-buttons,.zoom-controls{display:flex;align-items:center;background:#242730;border:1px solid #393d49;border-radius:7px;overflow:hidden;flex-shrink:0}.history-buttons button,.zoom-controls button{width:30px;height:30px;color:#b0b6c6}.history-buttons button+button{border-left:1px solid var(--line)}#zoom-label{width:47px;font-size:10px;font-variant-numeric:tabular-nums}.zoom-controls svg{width:13px;height:13px}#tool-hint{font-size:9px;color:#6e7586;text-align:center}.floating-controls{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);border:1px solid #474452;background:#25242eee;backdrop-filter:blur(8px);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 20px #0005;font-size:10px;white-space:nowrap;z-index:3}.floating-controls label{display:flex;align-items:center;gap:10px}.floating-controls input{width:100px}.drop-zone{position:absolute;inset:20px;z-index:5;background:#282435ee;border:2px dashed var(--accent);display:flex;align-items:center;justify-content:center;border-radius:12px;color:var(--accent);font-size:18px;pointer-events:none}.inspector{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.inspector-scroll{flex:1;min-height:120px;overflow-y:auto;padding:0 17px 12px;scrollbar-width:thin;scrollbar-color:#454959 transparent}.inspector-heading{height:47px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600}.inspector-heading>span{display:flex;align-items:center;gap:7px}.inspector-heading svg{width:14px;height:14px}.inspector-heading button{width:25px;height:25px;border-radius:4px}.subtle-label{font-size:8px!important;color:#72798b;letter-spacing:1px;font-weight:400}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:15px}.field>label,.field{font-size:10px;color:#a0a5b4}.field input,.field select{color:var(--text)}.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 11px;margin:14px 0}.property-grid label{font-size:9px;color:#969cac;display:flex;flex-direction:column;gap:7px}.property-grid input,.property-grid select{font-size:11px;padding:8px}.section-label{font-size:10px;color:#c4c6d2;border-top:1px solid var(--line);padding-top:17px;margin:20px 0 12px}.color-row{display:flex;align-items:center;margin:17px 0;gap:8px}.color-row label{font-size:10px;color:#a4a8b7;margin-right:auto}.color-row span{font-size:9px;letter-spacing:.5px;color:#9aa0b0;text-transform:uppercase}.color-row input{width:28px;height:26px}.empty-properties{color:#858c9b;font-size:11px;line-height:2;padding:16px 0 20px}.empty-properties small{font-size:10px;color:#676f80}.inspector details{border-top:1px solid var(--line);padding:15px 0 0;margin-top:18px}.inspector summary{font-size:11px;cursor:pointer;color:#c4c6d4}.filter-fields{padding-top:10px}.filter-fields label{display:block;font-size:10px;color:#9ba2b3;margin:12px 0}.filter-fields output{float:right;color:#d3c7fb;font-variant-numeric:tabular-nums}.filter-fields input{display:block;margin-top:7px}.layers-section{height:36%;min-height:180px;max-height:340px;border-top:1px solid var(--line);display:flex;flex-direction:column}.layers-section>.inspector-heading{padding:0 16px;height:43px;flex-shrink:0}.layers-section small{font-size:9px;background:#353842;padding:2px 5px;border-radius:4px;color:#979eaf;font-weight:400}.layer-list{flex:1;overflow:auto;padding:0 8px;scrollbar-width:thin;scrollbar-color:#454959 transparent}.layer-row{display:flex;align-items:center;gap:7px;padding:7px 5px;margin-bottom:3px;border:1px solid transparent;border-radius:5px;cursor:pointer}.layer-row.selected{background:#c1b3f614;border-color:#c1b3f63d}.layer-row.invisible{opacity:.45}.layer-row>button{height:22px;width:20px;color:#7f879a;flex-shrink:0;padding:2px}.layer-row svg{width:13px;height:13px}.layer-symbol{width:24px;height:24px;border:1px solid #444857;display:flex;align-items:center;justify-content:center;border-radius:3px;color:#c6c3d8;font-family:Georgia,serif;font-size:15px;flex-shrink:0}.layer-row .layer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.layer-actions{display:flex;align-items:center;gap:6px;padding:7px 12px;border-top:1px solid var(--line);flex-shrink:0}.layer-actions span{flex:1}.layer-actions button{width:26px;height:25px;color:#969db0;border-radius:4px}.layer-actions svg{width:14px;height:14px}.section-title{font-size:13px;margin:3px 0 13px}.muted{color:var(--muted);line-height:1.8}.small{font-size:10px}.caption-field{margin:18px 0}.caption-field label{display:block;font-size:10px;color:#b1b6c5;margin-bottom:8px}.caption-field textarea{font-size:12px;min-height:65px}.status-bar{height:29px;border-top:1px solid var(--line);background:#1c1e26;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 15px;color:#777e90;font-size:8px}.status-bar>span:first-child{font-size:7px;letter-spacing:1.1px}.status-bar .status-version{padding-left:15px;color:#555d70}.toast{position:fixed;bottom:55px;left:50%;transform:translateX(-50%);z-index:100;background:#e4ddf8;color:#282237;border:1px solid #c9baf1;border-radius:9px;padding:14px 22px;box-shadow:0 8px 40px #0006;max-width:90%;font-size:12px}.toast.error{background:#f4d6d8;border-color:#e1a7aa;color:#681d26}dialog{color:var(--text);background:#252730;border:1px solid #484958;border-radius:14px;box-shadow:0 20px 100px #0008;padding:28px;width:440px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 48px);overflow-y:auto}dialog::backdrop{background:#0b0c11ae;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;gap:15px}h2{font-size:21px;font-weight:550;letter-spacing:.2px;margin:7px 0 0}.icon-button{width:30px;height:30px;border-radius:5px;color:#959bad}.dialog-heading .icon-button{align-self:flex-start}.preset-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.preset-list button{background:#2d303a;border:1px solid #424554;border-radius:7px;padding:13px;font-size:11px;text-align:left}.preset-list button:hover{border-color:var(--accent)}.preset-list small{display:block;font-size:9px;color:#8c95a7;margin-top:5px}.export-note{font-size:10px;line-height:1.8;padding:13px;background:#c1b3f60b;border:1px solid #c1b3f61e;border-radius:6px;color:#b7accd;margin:20px 0}.check-field{display:flex;align-items:center;gap:5px;font-size:10px;color:#aeb4c5;margin:4px 0 20px}.help-steps{padding-left:22px;font-size:12px;line-height:2.4;color:#c1c5d1}.help-callout{background:#c1b3f60d;color:#d2c8ef;padding:15px;line-height:1.9;font-size:11px;border-radius:6px}.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0;font-size:10px;color:#9da5b8}.shortcut-grid span{display:flex;justify-content:space-between;padding-right:17px}kbd{font:9px monospace;background:#393d49;border:1px solid #4d5261;border-radius:3px;padding:3px 5px;color:#d2d4de}.dialog-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:27px}#confirm-dialog{width:470px}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:#454958;border-radius:5px}
@media(min-width:1650px){.editor-layout{grid-template-columns:270px minmax(320px,1fr) 290px}.template-card .thumbnail{height:79px}.library-content{padding:24px 20px}.library-heading h1{font-size:25px}}
@media(max-width:1250px){.editor-layout{grid-template-columns:211px minmax(290px,1fr) 239px}.save-state{display:none}.header-actions .button{padding:8px}.canvas-toolbar{padding:15px 13px}#canvas-description{display:none}.library-content{padding:18px 12px}.template-card .thumbnail{height:57px}.inspector-scroll{padding:0 13px 12px}#tool-hint{display:none}.document-name{width:140px}.app-header{gap:10px}.workspace-label{font-size:9px}}
@media(max-width:980px){.editor-layout{grid-template-columns:178px minmax(280px,1fr) 220px}.brand-sub,.beta{display:none}.header-actions .quiet span{display:none}.header-separator{display:none}.options-bar{padding:0 10px}.workspace-label{display:none}.option-actions{width:100%;justify-content:space-between}.template-list{grid-template-columns:1fr}.template-card .thumbnail{height:77px}.library-heading h1{font-size:18px}.library-footer{font-size:6px}.panel-tabs{gap:12px;padding:0 10px}.panel-tabs button{font-size:10px}.preview-label{font-size:0}.canvas-toolbar>div{gap:0}.status-bar #status-text{display:none}}
@media(max-width:730px){body{height:auto;overflow:auto;min-width:360px}.app-header{position:sticky;top:0;z-index:10;height:60px;padding:0 10px;background:#20222a}.brand{font-size:21px}.brand-mark{transform:scale(.8);width:23px}.document-name{width:90px;font-size:10px;padding:4px}.header-actions{gap:2px}.header-actions .button{padding:7px;min-height:30px;font-size:10px}.header-actions #new-button{display:none}.editor-layout{height:auto;min-height:calc(100dvh - 133px);display:grid;grid-template-columns:1fr}.studio{grid-row:1;height:56dvh;min-height:340px}.library-panel{grid-row:3;border-top:1px solid var(--line)}.library-heading{display:none}.library-content{max-height:450px}.template-list{grid-template-columns:repeat(3,1fr)}.template-card .thumbnail{height:70px}.inspector{grid-row:2;display:grid;grid-template-columns:1fr 1fr;height:340px;border-top:1px solid var(--line)}.layers-section{height:100%;min-height:0;max-height:none;border-left:1px solid var(--line);border-top:0}.inspector-scroll{min-height:0}.status-bar{position:relative}.status-bar .status-version{display:none}.library-footer{font-size:9px}.canvas-toolbar{padding:12px}.canvas-toolbar .canvas-tag{font-size:7px}.stage-bottom{padding:8px}.tool-rail{width:41px;padding:8px 3px;gap:2px}.tool-rail button{height:29px;width:29px}.tool-rail svg{width:16px;height:16px}.rail-divider{margin:3px}.stage-wrap{min-width:0}.panel-tabs{height:43px;gap:24px}.panel-tabs button{font-size:12px}.floating-controls{font-size:9px;gap:5px;padding:7px}.floating-controls .button{padding:6px;min-height:28px}.selection-label{font-size:8px}.library-content #caption-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.caption-field{margin:8px 0}}
.template-card .thumbnail.rendered{padding:0;background:#273b46;align-items:center;justify-content:center}.thumbnail.rendered:before{display:none}.thumbnail.rendered img{width:100%;height:100%;object-fit:contain;display:block}
.error-note{border-color:#bf697a!important;color:#efabb9!important}.option-actions{overflow-x:auto;white-space:nowrap;scrollbar-width:none}.option-actions button{flex-shrink:0}.text-effects .property-grid input[type=color]{width:100%;height:32px}

/* Compact editing workspace: tools left, artwork centre, editable docks right. */
:root{--bg:#242424;--panel:#2d2d2d;--panel2:#353535;--line:#444;--text:#ededed;--muted:#aaa;--accent:#79b6f3;--accent-ink:#102439;--green:#a8bf91;font-family:"Segoe UI","Yu Gothic UI","Meiryo",sans-serif}
body{background:#242424}
input,select,textarea{background:#252525;border-color:#4a4a4a;border-radius:3px;padding:7px 8px}
.button{border-radius:3px;min-height:30px;padding:6px 10px;font-weight:500}
.button.primary{background:#427fb8;border-color:#528ec5;color:white}
.button.primary:hover{background:#518fca}
.app-header{height:34px;padding:0 10px;gap:12px;background:#292929;border-bottom:1px solid #171717;position:relative;z-index:30}
.brand{font-size:14px;letter-spacing:.2px;gap:7px;flex-shrink:0;white-space:nowrap}
.brand-mark{height:22px;width:21px;transform:none;transform-origin:left center;margin-right:0}
.brand-mark b:first-child{left:1px;top:3px;width:19px;height:5px;background:#86b9ec}
.brand-mark b:nth-child(2){left:8px;top:7px;width:5px;height:13px;background:#86b9ec}
.brand-mark b:nth-child(3){left:17px;top:15px;width:4px;height:5px;background:#c6d9ad}
.header-actions{gap:3px;flex-shrink:0}
.header-actions .button{height:25px;min-height:25px;font-size:11px;padding:4px 8px;gap:5px}
.header-actions .button svg{width:14px;height:14px}
.header-actions .compact-action{width:27px;padding:4px}
.compact-action span{display:none}
.workspace-menu{display:flex;align-items:stretch;gap:0;min-width:0;height:100%;flex-shrink:0}
.app-menu{position:relative;height:100%}
.app-menu>summary{list-style:none;display:flex;align-items:center;height:100%;padding:0 9px;font-size:11px;cursor:pointer;white-space:nowrap;user-select:none;color:#e1e1e1}
.app-menu>summary::-webkit-details-marker{display:none}
.app-menu[open]>summary,.app-menu>summary:hover{background:#454545}
.menu-popup{position:absolute;left:0;top:100%;min-width:245px;max-width:calc(100vw - 16px);padding:5px 0;background:#333;border:1px solid #171717;box-shadow:0 6px 20px #0008;z-index:60;border-radius:0 0 4px 4px}
.menu-popup button{display:flex;justify-content:space-between;align-items:center;gap:25px;width:100%;padding:8px 13px;text-align:left;font-size:11px;white-space:nowrap}
.menu-popup button:hover:not(:disabled),.menu-popup button:focus-visible{background:#427fb8;color:white;outline:0}
.menu-popup button span{font-size:10px;color:#b1b1b1;white-space:nowrap}
.menu-popup button:hover span{color:inherit}
.menu-popup hr{border:0;border-top:1px solid #4c4c4c;margin:4px 7px}
.options-bar{height:36px;padding:0 10px 0 12px;background:#333;border-bottom:1px solid #161616;gap:12px}
.workspace-label{display:flex;font-size:11px;color:#d9d9d9;gap:9px;white-space:nowrap;flex-shrink:0}
.workspace-label>svg{width:16px;height:16px}
.options-divider{width:1px;height:18px;background:#555;margin:0 4px}
.workspace-mode{font-size:10px;color:#aaa}
.option-actions{gap:4px;min-width:0;margin-left:auto}
.option-actions button{font-size:10px;padding:5px 8px;color:#ddd;border-radius:3px}
.option-actions button[aria-pressed=true]{color:#dceaf9;background:#474747}
.option-actions span{color:#a8a8a8;margin-left:5px}
#workspace-panels-toggle{border:1px solid #575757}
.editor-layout{height:calc(100dvh - 92px);grid-template-columns:minmax(300px,1fr) 266px 278px;grid-template-rows:minmax(0,1fr);background:#242424}
.studio{grid-column:1;grid-row:1;background:#242424;min-width:0}
.tool-rail{width:40px;padding:8px 4px;gap:3px;background:#323232;border-right:1px solid #171717}
.tool-rail button{width:31px;height:31px;border-radius:2px;color:#ddd}
.tool-rail button:hover{background:#454545}
.tool-rail button.active{background:#494949;box-shadow:inset 0 0 0 1px #626262;color:white}
.tool-rail svg{width:18px;height:18px;stroke-width:1.5}
.rail-divider{width:23px;margin:4px 0;background:#565656}
.tool-rail input{width:28px;height:28px;margin-top:8px}
.canvas-toolbar{height:34px;min-height:34px;padding:0;background:#262626;border-bottom:1px solid #171717;gap:0}
.canvas-toolbar>.document-tab{height:100%;display:flex;gap:6px;align-items:center;min-width:0;overflow:hidden;background:#3b3b3b;border-right:1px solid #181818;padding:0 10px;border-top:1px solid #535353}
.document-tab>svg{width:13px;height:13px;color:#b9b9b9}
.document-name{width:155px;min-width:60px;padding:4px 2px;border:1px solid transparent;background:transparent;color:#e9e9e9;font-size:11px;font-weight:400}
.document-name:hover,.document-name:focus{border-color:#626262}
.document-color-mode{font-size:9px;color:#bcbcbc;white-space:nowrap}
.canvas-toolbar #canvas-description{font-size:9px;color:#a8a8a8;letter-spacing:0;display:none}
.save-state{font-size:9px;color:#bfbfbf;margin-left:4px;white-space:nowrap}
.preview-label{font-size:9px;margin-left:auto;padding:0 8px;color:#bbb;gap:5px}
.preview-label select{width:77px;padding:3px 4px;font-size:10px;background:#333;border-color:#505050;border-radius:2px}
.stage{background:#202020;background-image:none}
.artboard{box-shadow:0 1px 12px #0009}
.stage-bottom{height:30px;min-height:30px;padding:2px 8px;background:#2c2c2c;border-top:1px solid #171717}
.history-buttons,.zoom-controls{background:#303030;border-color:#4b4b4b;border-radius:2px}
.history-buttons button,.zoom-controls button{height:23px;width:25px;color:#c9c9c9}
#zoom-label{width:45px;font-size:10px}
#tool-hint{font-size:9px;color:#aaa}
.library-panel{grid-column:2;grid-row:1;border-left:1px solid #171717;border-right:1px solid #171717;min-width:0;background:#2d2d2d}
.panel-tabs{height:34px;padding:0;gap:0;background:#262626;border-color:#161616}
.panel-tabs button{padding:0 14px;font-size:11px;border-right:1px solid #191919;color:#aaa}
.panel-tabs button.active{background:#343434;color:#eee;border-top:1px solid #606060}
.panel-tabs button.active:after{height:1px;background:#343434}
.library-content{padding:13px 12px;scrollbar-color:#5c5c5c transparent}
.library-heading{display:block}
.library-heading h1{font-size:12px;font-weight:600;line-height:1.5;letter-spacing:0;margin:0 0 6px}
.library-heading p{font-size:10px;line-height:1.6;margin:0 0 14px;color:#a5a5a5}
.category-list{gap:5px;margin-bottom:15px}
.category-list button{font-size:9px;padding:4px 7px;border-radius:3px;border-color:#4a4a4a;color:#bcbcbc}
.category-list button.active{color:#eef4ff;background:#41546a;border-color:#6c8db2}
.template-list{grid-template-columns:1fr 1fr;gap:14px 9px}
.template-card{border-radius:2px}
.template-card .thumbnail{height:69px;border-radius:2px;border-color:#565656}
.template-card.active .thumbnail{outline:2px solid #75a8da;outline-offset:1px}
.template-card .template-name{font-size:10px;color:#ddd;margin-top:6px;line-height:1.45}
.template-card .template-number{color:#909090;font-size:8px}
.library-footer{padding:8px 9px;font-size:8px;color:#aaa;background:#292929;white-space:normal}
.section-title{font-size:12px;font-weight:600;margin:0 0 9px}
.caption-field{margin:13px 0}
.caption-field label{font-size:11px;color:#ddd;margin-bottom:6px}
.caption-field textarea{font-size:12px;line-height:1.6;min-height:56px;color:#f3f3f3;background:#232323;border-color:#535353}
.inspector{grid-column:3;grid-row:1;border-left:0;background:#303030;min-width:0}
.inspector-scroll{padding:0 12px 12px;min-height:0;scrollbar-color:#5c5c5c transparent}
.inspector-heading{height:34px;min-height:34px;background:#303030;font-size:11px}
.inspector-scroll>.inspector-heading{position:sticky;top:0;z-index:2;border-bottom:1px solid #454545;margin:0 -12px 12px;padding:0 12px}
.subtle-label{color:#a5a5a5}
.field{margin-bottom:11px;gap:6px}
.field>label,.field{font-size:10px;color:#bdbdbd}
.property-grid{gap:9px 10px;margin:12px 0}
.property-grid label{font-size:10px;color:#b6b6b6;gap:5px}
.property-grid input,.property-grid select{padding:6px 7px;font-size:11px}
.section-label{padding-top:12px;margin:14px 0 9px;color:#ddd}
.color-row{margin:12px 0}
.color-row label,.color-row span{color:#bbb}
.inspector details{padding-top:11px;margin-top:12px}
.inspector summary{color:#ddd}
.layers-section{height:42%;max-height:none;min-height:200px;border-top:1px solid #151515;background:#292929}
.layers-section>.inspector-heading{height:34px;min-height:34px;padding:0 10px;background:#333;border-bottom:1px solid #191919}
.layers-section small{background:#454545;color:#bbb;border-radius:2px}
.layer-list{padding:3px 0;scrollbar-color:#5c5c5c transparent}
.layer-row{margin:0;padding:7px 7px;border:0;border-bottom:1px solid #363636;border-radius:0;gap:7px;min-height:39px}
.layer-row.selected{background:#4b4b4b;box-shadow:inset 2px 0 #8ab4dc}
.layer-row>button{color:#aaa}
.layer-symbol{background:#313131;border-color:#626262;border-radius:1px;color:#e5e5e5;width:27px;height:26px}
.layer-row .layer-name{font-size:11px;color:#ebebeb;line-height:1.4}
.layer-actions{padding:4px 9px;background:#303030;border-top:1px solid #171717}
.layer-actions button{height:23px;color:#ccc}
.status-bar{height:22px;padding:0 11px;background:#303030;border-top:1px solid #151515;color:#a1a1a1;font-size:9px}
.status-bar>span:first-child{font-size:8px;letter-spacing:.6px}
.status-bar .status-version{color:#858585}
.selection-label{background:#78b4ef;color:#172b41;border-radius:2px}
.selection:before,.selection:after{background:#74a6d8}
.resize-handle{border-color:#5c91c5}
.floating-controls{bottom:43px;background:#333f;border-color:#616161;border-radius:4px;backdrop-filter:none}
.drop-zone{background:#292d34ee;border-radius:4px}
dialog{background:#303030;border-color:#5c5c5c;border-radius:7px;padding:24px}
dialog::backdrop{backdrop-filter:none;background:#0009}
.eyebrow{color:#96bce1}
.export-note{background:#25292e;border-color:#49535f;color:#c1cbd6}
.help-callout{background:#25292e;color:#d5e0ee}
.preset-list button{background:#373737;border-color:#575757;border-radius:4px}
.toast{background:#dce7f1;border-color:#93aec6;color:#24394d;border-radius:5px}
body.panels-hidden .editor-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
body.panels-hidden .library-panel,body.panels-hidden .inspector{display:none}
body.panels-hidden .studio{grid-column:1;grid-row:1}
@media(min-width:1650px){.editor-layout{grid-template-columns:minmax(400px,1fr) 282px 292px}.template-card .thumbnail{height:77px}.canvas-toolbar #canvas-description{display:inline}.library-content{padding:15px}}
@media(max-width:1250px){.editor-layout{grid-template-columns:minmax(280px,1fr) 240px 256px}.workspace-mode,.options-divider,.save-state{display:none}.workspace-menu .app-menu>summary{padding:0 7px}.preview-label{font-size:0}.document-name{width:155px}.header-actions .button{padding:4px 6px}.template-card .thumbnail{height:61px}.library-content{padding:12px 10px}.inspector-scroll{padding:0 10px 10px}.inspector-scroll>.inspector-heading{margin-left:-10px;margin-right:-10px;padding:0 10px}#tool-hint{display:none}}
@media(max-width:1050px) and (min-width:731px){.editor-layout{grid-template-columns:minmax(270px,1fr) 278px;grid-template-rows:minmax(170px,38%) minmax(0,62%)}.studio{grid-row:1/3}.library-panel{grid-column:2;grid-row:1}.inspector{grid-column:2;grid-row:2;border-left:1px solid #171717;border-top:1px solid #161616}.layers-section{min-height:145px;height:43%}.library-heading{display:none}.template-card .thumbnail{height:64px}.library-footer{padding:5px 9px}.header-actions #new-button,.header-actions #open-button{display:none}.document-name{width:150px}.workspace-label{display:flex}.option-actions{width:auto;justify-content:flex-end}.option-actions button{padding:5px 7px}.option-actions #help-button{display:none}}
@media(max-width:800px) and (min-width:731px){.brand{font-size:13px}.workspace-menu .app-menu>summary{font-size:10px;padding:0 5px}.app-header{gap:8px;padding:0 7px}.header-actions #save-button span{display:none}.editor-layout{grid-template-columns:minmax(250px,1fr) 252px}.document-name{width:122px}.document-color-mode{display:none}}
@media(max-width:730px){
  body{height:auto;min-width:320px;overflow:auto}
  .app-header{position:sticky;top:0;height:66px;padding:0 9px;display:flex;flex-wrap:wrap;gap:0;background:#292929}
  .brand{height:34px;font-size:13px;gap:5px}.brand-mark{width:21px;transform:none}
  .header-actions{height:34px;gap:3px}.header-actions #new-button{display:none}.header-actions #save-button span{display:none}.header-actions .button{font-size:11px;padding:4px 8px;min-height:25px}.header-actions #open-button{display:inline-flex}
  .workspace-menu{order:3;flex-basis:100%;height:32px;width:100%;justify-content:space-between;border-top:1px solid #404040;flex-shrink:1}
  .workspace-menu .app-menu>summary{font-size:11px;padding:0 6px}.app-menu:nth-last-child(-n+3) .menu-popup{left:auto;right:0}
  .menu-popup{min-width:236px}.menu-popup button{font-size:11px;padding:10px 12px;gap:15px}
  .options-bar{height:36px;padding:0 7px;gap:6px}.workspace-label{display:none}.option-actions{width:100%;justify-content:flex-start;gap:2px}.option-actions button{font-size:10px;padding:5px 7px}.option-actions #resize-button span{display:none}.option-actions #help-button{display:none}.option-actions #workspace-panels-toggle{margin-left:auto;position:sticky;right:0;background:#333}
  .editor-layout{height:auto;min-height:0;display:flex;flex-direction:column}
  .studio{height:56dvh;min-height:360px;order:0;flex:none}.tool-rail{width:37px;padding:6px 3px;gap:2px}.tool-rail button{width:30px;height:29px}.tool-rail svg{width:16px;height:16px}.tool-rail input{margin-top:5px}.rail-divider{margin:3px 0}
  .canvas-toolbar{height:32px;min-height:32px;padding:0}.canvas-toolbar>.document-tab{padding:0 7px;gap:4px;flex:1}.document-tab>svg{display:none}.document-name{font-size:10px;width:100%;max-width:180px;padding:4px 0}.document-color-mode{display:none}.canvas-toolbar #canvas-description{display:none}.preview-label{padding:0 5px;font-size:0}.preview-label select{width:74px;font-size:9px}.save-state{display:none}
  .stage-bottom{height:30px;padding:2px 6px}.history-buttons button,.zoom-controls button{height:24px;width:24px}.zoom-controls #zoom-label{width:42px}
  .library-panel{order:1;border-top:1px solid #151515;border-left:0;border-right:0;min-height:240px}.panel-tabs{height:36px;padding:0;gap:0}.panel-tabs button{font-size:12px;padding:0 16px}.library-content{max-height:460px;padding:14px 12px}.library-heading{display:none}.template-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 9px}.template-card .thumbnail{height:62px}.template-card .template-name{font-size:9px}.library-footer{font-size:9px}.library-content #caption-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.caption-field{margin:7px 0}.caption-field textarea{font-size:12px}.category-list button{font-size:10px}
  .inspector{order:2;display:grid;grid-template-columns:1fr 1fr;height:380px;min-height:380px;border-left:0;border-top:1px solid #171717}.inspector-scroll{min-height:0;padding:0 9px 10px}.inspector-scroll>.inspector-heading{margin:0 -9px 10px;padding:0 9px}.layers-section{height:100%;min-height:0;border-top:0;border-left:1px solid #161616}.layer-row{padding:7px 4px;gap:4px}.layer-symbol{width:23px;height:24px}.layer-row .layer-name{font-size:10px}.layer-row>button{width:17px}
  .status-bar{height:22px;position:relative;padding:0 7px;font-size:8px}.status-bar #status-text,.status-bar .status-version{display:none}.status-bar>span:first-child{font-size:7px}
  .floating-controls{bottom:43px;max-width:calc(100% - 12px);white-space:normal;gap:5px;padding:7px}.floating-controls>span{max-width:100px;line-height:1.5}.floating-controls .button{padding:6px;font-size:10px;min-height:28px}.floating-controls label{font-size:10px}.floating-controls input{width:90px}
  body.panels-hidden .editor-layout{display:flex}body.panels-hidden .studio{height:calc(100dvh - 124px)}
  dialog{padding:20px;max-width:calc(100vw - 24px)}.dialog-actions{gap:6px;flex-wrap:wrap}.dialog-actions .button{font-size:11px;padding:7px 9px}.toast{font-size:11px;max-width:calc(100vw - 24px)}
}
/* Template browsing focus is separate from the artwork selection. */
.template-card:focus-visible{outline:2px solid #fff;outline-offset:4px}
.library-heading .template-keyboard-hint{font-size:10px;line-height:1.8;margin-top:-6px;margin-bottom:14px;color:#b9c8d5}
.template-keyboard-hint kbd{font:inherit;padding:0 2px;color:#e4edf5}
.stage:focus-visible{outline:1px solid #78a6cc;outline-offset:-1px}
/* Collections separate production presets from reference recreations. */
.template-collection-field{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;margin:0 0 12px}.template-collection-field label{grid-column:1/-1;color:#c3cbd4;font-size:10px}.template-collection-field select{min-width:0;width:100%;font-size:11px;padding:7px}.template-collection-field>span{color:#9caab8;font-size:10px;white-space:nowrap}.category-list button>span{opacity:.58;margin-left:2px}.template-group-heading{grid-column:1/-1;padding:12px 0 3px;border-top:1px solid #4b4b4b;margin-top:6px;display:flex;flex-direction:column;gap:5px}.template-group-heading>span{font-size:9px;color:#9eacba}.template-group-heading strong{font-size:12px;color:#e6edf4;font-weight:600}.template-group-heading small{font-size:9px;font-weight:400;color:#9eacba;margin-left:5px}.template-empty{grid-column:1/-1;font-size:11px;color:#b6c0cb;line-height:1.7}.template-reference{font-size:10px;line-height:1.7;margin:0 0 12px;background:#262a2f;border:1px solid #4b535c;padding:8px}.template-reference p{margin:5px 0;color:#bdc9d6}.template-reference a{color:#a9cff4}.template-reference summary{cursor:pointer;color:#d5e5f5}
.font-status{font-size:10px;line-height:1.65;color:#bdc9d6;margin:7px 0 10px}.font-status:empty{display:none}#font-family{max-width:100%}