/** [CODEX - 2026-08-21 03:27:00] Full-screen responsive Canvas workspace, ribbon, panels, and mobile layout. */
/** [CODEX - 2026-08-24 22:48:26] Canvas bundles the official variable Outfit family in its existing public asset directory so typography never depends on a font CDN or undeployable remote folder. */
@font-face{font-family:Outfit;src:url("Outfit-VariableFont_wght.ttf?v=20260824224826") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
:root{--canvas-accent:#50b8ae;--canvas-accent-2:#e6b65f;--canvas-ink:#f4f2f8;--canvas-muted:#aaa5b5;--canvas-line:#393640;--canvas-panel:#25232a;--canvas-panel-2:#2c2932;--canvas-deep:#17161b;--canvas-stage:#111015} /* [CODEX - 2026-08-30 04:18:30] */
html,body{height:100%;overflow:hidden;background:var(--canvas-deep)!important}
body{margin:0!important;padding:0!important}
.x-ajax-page,.x-ajax-page-content,.x-canvas{height:100%;min-height:0}
.x-canvas,.x-canvas *{box-sizing:border-box}
/** [CODEX - 2026-08-22 03:24:18] The editor shell permits directional touch scrolling but never delegates pinch or double-tap scaling to the browser; the canvas owns document zoom. */
.x-canvas{touch-action:pan-x pan-y;overscroll-behavior:none}
.x-canvas-icon{display:block;width:1.35em;height:1.35em;flex:0 0 auto;overflow:visible;color:var(--canvas-icon-color,inherit);shape-rendering:geometricPrecision;transform-origin:center;transition:filter .16s ease,opacity .16s ease,transform .16s ease}
/** [CODEX - 2026-08-21 19:52:53] Official Phosphor duotone artwork keeps its authored 20% secondary layer while Canvas supplies contextual color and tactile states. */
.x-canvas{--canvas-icon-color:#e5c37b} /* [CODEX - 2026-08-30 04:18:30] */
.x-canvas-topbar{--canvas-icon-color:#ecd08d} /* [CODEX - 2026-08-30 04:18:30] */
.x-canvas-ribbon{--canvas-icon-color:#dfba6d} /* [CODEX - 2026-08-30 04:18:30] */
.x-canvas-tools{--canvas-icon-color:#62dddc}
.x-canvas-inspector{--canvas-icon-color:#e9c47c} /* [CODEX - 2026-08-30 04:18:30] */
.x-canvas-statusbar{--canvas-icon-color:#dfbd70} /* [CODEX - 2026-08-30 04:18:30] */
.x-canvas button:not(:disabled):hover .x-canvas-icon,.x-canvas a:hover .x-canvas-icon{filter:brightness(1.18) drop-shadow(0 2px 4px rgba(0,0,0,.3));transform:scale(1.075)}
.x-canvas button.is-active .x-canvas-icon,.x-canvas button[aria-pressed="true"] .x-canvas-icon,.x-canvas a[aria-current="page"] .x-canvas-icon{filter:brightness(1.24) drop-shadow(0 0 5px color-mix(in srgb,var(--canvas-icon-color) 48%,transparent));transform:scale(1.06)}
.x-canvas button:active .x-canvas-icon,.x-canvas a:active .x-canvas-icon{transform:scale(.94)}
.x-canvas button:disabled .x-canvas-icon{opacity:.5;filter:saturate(.35)}
@media(forced-colors:active){.x-canvas-icon{color:ButtonText;filter:none!important}}
@media(prefers-reduced-motion:reduce){.x-canvas-icon{transition:none}}
.x-canvas-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /** [CODEX - 2026-08-21 15:52:00] */
/** [CODEX - 2026-08-24 04:05:00] Persistent desktop panel dimensions feed the root grid while responsive layouts retain their dedicated mobile rows. */
.x-canvas{--canvas-tools-width:48px;--canvas-inspector-width:270px;--canvas-ribbon-height:113px;display:grid;grid-template-rows:48px var(--canvas-ribbon-height) minmax(0,1fr) 27px;width:100vw;height:100dvh;overflow:hidden;background:var(--canvas-deep);color:var(--canvas-ink);font:13px/1.35 Outfit,"Segoe UI",Arial,sans-serif;user-select:none} /** [CODEX - 2026-08-24 22:40:13] */
.x-canvas button,.x-canvas input,.x-canvas select{font:inherit}
.x-canvas button{color:inherit}
.x-canvas button:focus-visible,.x-canvas input:focus-visible,.x-canvas select:focus-visible{outline:2px solid var(--canvas-accent);outline-offset:-2px}
.x-canvas-topbar{display:flex;min-width:0;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid #302d36;background:#211f25}
.x-canvas-back,.x-canvas-topbar button,.x-canvas-history-actions button{display:grid;width:32px;height:32px;place-items:center;border:0;border-radius:7px;background:transparent;text-decoration:none;cursor:pointer}
.x-canvas-back:hover,.x-canvas-topbar button:hover,.x-canvas-history-actions button:hover{background:#393540}
.x-canvas-back .x-canvas-icon{width:18px;height:18px}
/** [CODEX - 2026-08-29 00:35:42] Hide browser navigation only when the user agent confirms an installed app display mode; native packaging removes the same anchor from its runtime HTML. */
@media (display-mode:standalone),(display-mode:fullscreen),(display-mode:minimal-ui){.x-canvas-back{display:none}}
.x-canvas-brand{display:flex;height:32px;align-items:center;gap:8px;padding-right:13px;border-right:1px solid var(--canvas-line);font-size:14px;font-weight:800;letter-spacing:-.2px}
/** [CODEX - 2026-08-21 19:27:18] Compact uppercase UI may use 11px while normal and mixed-case Canvas text never renders below 12px. */
.x-canvas-brand em{padding:2px 5px;border-radius:4px;background:#4a402b;color:#f2dba8;font-size:11px;font-style:normal;text-transform:uppercase} /* [CODEX - 2026-08-30 04:18:30] */
/** [CODEX - 2026-08-27 04:14:37] The logo becomes a polished application-menu trigger and owns a compact editor-native command surface without disturbing top-bar geometry. */
.x-canvas-app-menu{position:relative;display:flex;height:100%;flex:0 0 auto;align-items:center}
.x-canvas-topbar .x-canvas-brand{display:flex;width:auto;min-width:0;height:34px;place-items:initial;align-items:center;gap:8px;padding:0 9px 0 5px;border:1px solid transparent;border-radius:8px;background:transparent;text-align:left}
.x-canvas-topbar .x-canvas-brand:hover,.x-canvas-topbar .x-canvas-brand[aria-expanded=true]{border-color:#494650;background:linear-gradient(#343139,#2c2931);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.x-canvas-brand-chevron{width:13px;height:13px;margin-left:-2px;color:#a7d5d0;transition:transform .16s ease}
.x-canvas-brand[aria-expanded=true] .x-canvas-brand-chevron{transform:rotate(180deg)}
.x-canvas-app-menu-popover[hidden]{display:none}
.x-canvas-app-menu-popover{position:absolute;top:calc(100% - 3px);left:0;z-index:98;width:296px;padding:7px;border:1px solid #535158;border-radius:12px;background:linear-gradient(145deg,rgba(48,47,52,.98),rgba(31,32,35,.99));box-shadow:0 20px 55px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.045);color:#edf3f1;backdrop-filter:blur(18px)}
.x-canvas-app-menu-popover>header{display:flex;align-items:center;gap:11px;padding:8px 9px 11px;border-bottom:1px solid #45474a}.x-canvas-app-menu-popover>header .x-canvas-mark{width:30px;height:30px;flex:0 0 30px}.x-canvas-app-menu-popover>header>span:last-child{display:grid;gap:1px}.x-canvas-app-menu-popover>header strong{font-size:14px}.x-canvas-app-menu-popover>header small{color:#9ca6a4;font-size:12px}
.x-canvas-app-menu-section{display:grid;gap:2px;padding:6px 0}.x-canvas-app-menu-section+.x-canvas-app-menu-section{border-top:1px solid #45474a}
.x-canvas-topbar .x-canvas-app-menu-popover button{display:grid;width:100%;height:auto;min-height:48px;grid-template-columns:28px minmax(0,1fr) auto;place-items:initial;align-items:center;gap:8px;padding:5px 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:#e9eeed;text-align:left}.x-canvas-topbar .x-canvas-app-menu-popover button:hover,.x-canvas-topbar .x-canvas-app-menu-popover button:focus-visible{border-color:#4d6562;background:linear-gradient(90deg,#344744,#30383a)}
.x-canvas-app-menu-popover button>.x-canvas-icon{width:21px;height:21px;justify-self:center;color:#96d5ce}.x-canvas-app-menu-popover button>span{display:grid;min-width:0;gap:1px}.x-canvas-app-menu-popover button strong{font-size:12px;font-weight:750}.x-canvas-app-menu-popover button small{overflow:hidden;color:#9ba5a3;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.x-canvas-app-menu-popover kbd{padding:2px 5px;border:1px solid #555b5c;border-radius:4px;background:#242729;color:#a9b2b1;font:12px/1.25 Outfit,"Segoe UI",Arial,sans-serif;white-space:nowrap}.x-canvas-app-menu-popover button>b{padding:2px 5px;border-radius:4px;background:#354b48;color:#bfe7e2;font-size:12px} /* [CODEX - 2026-08-27 04:14:37] Mixed-case shortcuts and numeric version badges respect Canvas's 12px normal-text floor. */
/* [CODEX - 2026-08-28 04:45:51] .x-canvas-about-card{width:min(520px,calc(100vw - 32px));gap:16px}.x-canvas-about-identity{display:flex;align-items:center;gap:15px;padding-right:36px}.x-canvas-about-identity>.x-canvas-empty-mark{width:48px;height:48px;flex:0 0 48px;transform:rotate(-4deg) scale(1.55)}.x-canvas-about-identity>span:last-child{display:grid;gap:2px}.x-canvas-about-identity h2{margin:0;font-size:28px}.x-canvas-about-identity strong{color:#a8d8d2;font-size:12px;font-weight:650}.x-canvas-about-card>p{margin:0;color:#b5bfbd;font-size:13px;line-height:1.55}.x-canvas-about-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.x-canvas-about-features>span{display:grid;gap:2px;padding:10px;border:1px solid #464d4c;border-radius:8px;background:#25292a}.x-canvas-about-features strong{font-size:12px}.x-canvas-about-features small{color:#929d9b;font-size:12px} */
/* [CODEX - 2026-08-28 04:45:51] The About identity keeps the final icon at a deliberate 48px instead of scaling and rotating legacy geometry. */
.x-canvas-about-card{width:min(520px,calc(100vw - 32px));gap:16px}.x-canvas-about-identity{display:flex;align-items:center;gap:15px;padding-right:36px}.x-canvas-about-identity>.x-canvas-empty-mark{width:48px;height:48px;flex:0 0 48px}.x-canvas-about-identity>span:last-child{display:grid;gap:2px}.x-canvas-about-identity h2{margin:0;font-size:28px}.x-canvas-about-identity strong{color:#a8d8d2;font-size:12px;font-weight:650}.x-canvas-about-card>p{margin:0;color:#b5bfbd;font-size:13px;line-height:1.55}.x-canvas-about-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.x-canvas-about-features>span{display:grid;gap:2px;padding:10px;border:1px solid #464d4c;border-radius:8px;background:#25292a}.x-canvas-about-features strong{font-size:12px}.x-canvas-about-features small{color:#929d9b;font-size:12px}
/* [CODEX - 2026-08-28 04:45:51] .x-canvas-mark,.x-canvas-empty-mark{position:relative;display:block;width:27px;height:27px;transform:rotate(-4deg)} */
/* [CODEX - 2026-08-28 04:45:51] Product identity now comes from one SVG asset at every in-app size. */
.x-canvas-mark,.x-canvas-empty-mark{position:relative;display:block;width:27px;height:27px;flex:0 0 auto}
.x-canvas-mark img,.x-canvas-empty-mark img{display:block;width:100%;height:100%;object-fit:contain}
/* [CODEX - 2026-08-28 04:45:51] .x-canvas-mark b,.x-canvas-empty-mark span{position:absolute;width:15px;height:15px;border-radius:4px;mix-blend-mode:screen} */
/* [CODEX - 2026-08-28 04:45:51] .x-canvas-mark b:nth-child(1),.x-canvas-empty-mark span:nth-child(1){top:1px;left:1px;background:#ff596d} */
/* [CODEX - 2026-08-28 04:45:51] .x-canvas-mark b:nth-child(2),.x-canvas-empty-mark span:nth-child(2){top:1px;right:0;background:#696cff} */
/* [CODEX - 2026-08-28 04:45:51] .x-canvas-mark b:nth-child(3),.x-canvas-empty-mark span:nth-child(3){right:5px;bottom:0;background:#33d0bb} */
.x-canvas-file-zone{display:flex;min-width:0;max-width:min(68vw,760px);flex:0 1 auto;align-items:center;gap:5px} /* [CODEX - 2026-08-27 19:42:41] Title, history, and status consume only their required top-bar width. */
/** [CODEX - 2026-08-27 19:42:41] The project name is intrinsically sized until its adjacent pencil opens a bounded inline editor. */
.x-canvas-document-title{display:flex;width:max-content;min-width:0;max-width:min(44vw,520px);height:32px;flex:0 1 auto;align-items:center;gap:3px;padding:0 3px 0 8px;border:1px solid transparent;border-radius:7px}
.x-canvas-title-label{width:max-content;min-width:0;max-width:min(38vw,460px);overflow:hidden;color:#eeeaf4;font-size:13px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.x-canvas-topbar .x-canvas-title-edit{width:27px;height:27px;flex:0 0 27px;color:#a9a2b3;opacity:.76}
.x-canvas-topbar .x-canvas-title-edit:hover{color:#f3eff8;opacity:1}
.x-canvas-title-edit .x-canvas-icon{width:15px;height:15px}
.x-canvas-title{min-width:0;width:100%;height:28px;padding:0 7px;border:1px solid #595364;border-radius:6px;outline:0;background:#2b2830;color:#eeeaf4;font-size:13px;font-weight:650;text-overflow:ellipsis}
.x-canvas-document-title.is-editing{width:min(40vw,420px);padding-left:2px;border-color:#45414d;background:#2b2830}
.x-canvas-document-title.is-editing .x-canvas-title-label,.x-canvas-document-title.is-editing .x-canvas-title-edit{display:none}
.x-canvas-title:focus{border-color:var(--canvas-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--canvas-accent) 26%,transparent)}
.x-canvas-save-state{flex:0 0 auto;color:#8f8999;font-size:12px}
.x-canvas-save-state.is-saving{color:#dfbc65}.x-canvas-save-state.is-saved{color:#72d7bd}.x-canvas-save-state.is-error{color:#ff7a88}
/** [CODEX - 2026-09-01 04:56:32] Open documents use a shrink-wrapped strip of grounded image-preview tabs: rounded only across the crown, shadowless, title-free, and physically joined to the ribbon boundary. */
.x-canvas-document-tabs{display:flex;width:max-content;min-width:0;max-width:min(42vw,560px);height:38px;flex:0 1 auto;align-self:flex-end;align-items:flex-end;gap:2px;overflow-x:auto;overflow-y:hidden;padding:0 1px;scrollbar-width:none;-webkit-app-region:no-drag}.x-canvas-document-tabs:empty{display:none}.x-canvas-document-tabs::-webkit-scrollbar{display:none}.x-canvas-document-tab{position:relative;display:block;width:62px;min-width:62px;height:35px;flex:0 0 62px;align-self:flex-end;border:1px solid #403c46;border-bottom:0;border-radius:8px 8px 0 0;background:#29262e;color:#aaa4b0;overflow:hidden;box-shadow:none}.x-canvas-document-tab:hover{border-color:#55505b;background:#302d35;color:#e9e5ec}.x-canvas-document-tab.is-active{z-index:1;border-color:#5c5662;background:#37333d;color:#fff;box-shadow:none}.x-canvas-topbar .x-canvas-document-tab button{height:34px;min-width:0;border:0;border-radius:0;background:transparent;color:inherit}.x-canvas-topbar .x-canvas-document-tab button:hover{background:transparent}.x-canvas-document-tab-main{display:grid!important;width:100%!important;padding:3px 7px!important;place-items:center}.x-canvas-document-tab-preview{position:relative;display:grid;width:42px;height:27px;place-items:center;overflow:hidden;border:1px solid #4b4651;border-radius:3px;background:#1c1a20}.x-canvas-document-tab-preview:before{content:"";position:absolute;inset:0;background:conic-gradient(#343139 25%,#27242c 0 50%,#343139 0 75%,#27242c 0);background-size:8px 8px}.x-canvas-document-tab-preview>img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain}.x-canvas-document-tab-preview>.x-canvas-icon{position:relative;z-index:1;width:15px;height:15px;color:#77717f}.x-canvas-document-tab-preview.has-preview>.x-canvas-icon{display:none}.x-canvas-document-tab-close{position:absolute;top:1px;right:1px;z-index:2;display:grid!important;width:20px!important;height:20px!important;padding:0!important;place-items:center;border-radius:4px!important;background:#242129!important;color:#ddd8e1!important;opacity:0;transform:translateY(-2px);transition:opacity .12s,transform .12s}.x-canvas-document-tab:hover .x-canvas-document-tab-close,.x-canvas-document-tab.is-active:focus-within .x-canvas-document-tab-close,.x-canvas-document-tab-close:focus-visible{opacity:.92;transform:none}.x-canvas-document-tab-close:hover{background:#403b45!important;color:#fff!important}.x-canvas-document-tab-close>.x-canvas-icon{width:13px;height:13px}
/** [CODEX - 2026-09-01 00:55:42] With no active document, editing chrome stays present for orientation but is visibly quiet, non-interactive, and free of misleading hover treatment. */
.x-canvas[data-document-ready=false] .x-canvas-ribbon-tabs,.x-canvas[data-document-ready=false] .x-canvas-ribbon-content,.x-canvas[data-document-ready=false] .x-canvas-tool-grid,.x-canvas[data-document-ready=false] .x-canvas-tool-colors,.x-canvas[data-document-ready=false] .x-canvas-panel-tabs,.x-canvas[data-document-ready=false] .x-canvas-panel,.x-canvas[data-document-ready=false] .x-canvas-contextbar,.x-canvas[data-document-ready=false] .x-canvas-statusbar{opacity:.42;filter:saturate(.28)}.x-canvas[data-document-ready=false] button:disabled,.x-canvas[data-document-ready=false] input:disabled,.x-canvas[data-document-ready=false] select:disabled,.x-canvas[data-document-ready=false] textarea:disabled{cursor:default}.x-canvas[data-document-ready=false] .x-canvas-panel-resizer,.x-canvas[data-document-ready=false] .x-canvas-inspector-split{pointer-events:none;opacity:.25}.x-canvas-topbar .x-canvas-app-menu-popover button:disabled{background:transparent;color:#77727c;opacity:.48}.x-canvas-topbar .x-canvas-app-menu-popover button:disabled:hover{border-color:transparent;background:transparent}.x-canvas-topbar .x-canvas-app-menu-popover button:disabled .x-canvas-icon{opacity:.38} /* [CODEX - 2026-09-01 01:04:33] Disable the inspector's actual horizontal split handle in the document-empty state. */
.x-canvas-history-actions{display:flex;align-items:center;gap:2px}
.x-canvas-history-actions button{font-size:16px}.x-canvas-history-actions .x-canvas-icon{width:17px;height:17px}
.x-canvas-mode{display:flex;align-items:center;gap:7px;color:var(--canvas-muted);font-size:11px;font-weight:700;text-transform:uppercase}
.x-canvas-mode select{height:30px;padding:0 27px 0 9px;border:1px solid #484450;border-radius:7px;background:#2c2932;color:#f5f2f9;font-size:12px;font-weight:700;text-transform:none}
.x-canvas-top-actions{display:flex;gap:3px}
.x-canvas-topbar .x-canvas-top-actions button{display:flex;width:auto;min-width:32px;gap:6px;padding:0 10px}
.x-canvas-primary{border-color:transparent!important;background:linear-gradient(135deg,#65c8be,#46aea5)!important;color:#102724!important;box-shadow:0 5px 18px rgba(63,167,157,.27)!important} /* [CODEX - 2026-08-30 04:18:30] */
.x-canvas-ribbon{display:grid;grid-template-rows:31px minmax(0,1fr);border-bottom:1px solid #393640;background:#27242c}
.x-canvas-ribbon-tabs{display:flex;align-items:end;gap:1px;padding:0 10px;border-bottom:1px solid #37333e}
.x-canvas-ribbon-tabs button{height:29px;padding:0 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:#aaa4b3;font-size:12px;cursor:pointer}
.x-canvas-ribbon-tabs button:hover{color:#fff}.x-canvas-ribbon-tabs button.is-active{border-bottom-color:var(--canvas-accent);color:#fff}
.x-canvas-ribbon-content{min-width:0;overflow:hidden}
/** [CODEX - 2026-08-21 19:05:00] Ribbon panels accept horizontal mouse-wheel navigation without changing their compact desktop geometry. */
/** [CODEX - 2026-08-21 19:07:57] Desktop ribbon groups reserve a separate caption strip so button hover surfaces cannot overlap group labels. */
/** [CODEX - 2026-08-21 19:33:03] Non-shrinking groups guarantee real ribbon overflow and a stable native horizontal scroll range. */
.x-canvas-ribbon-content>section{display:none;height:81px;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding:5px 10px;scrollbar-width:thin;scrollbar-gutter:stable;scroll-behavior:auto;overscroll-behavior:contain}.x-canvas-ribbon-content>section.is-active{display:flex}
.x-canvas-ribbon-group{position:relative;display:flex;min-width:max-content;flex:0 0 auto;align-items:flex-start;gap:4px;padding:0 12px 18px;border-right:1px solid #3b3742}
.x-canvas-ribbon-group:first-child{padding-left:0}.x-canvas-ribbon-group>span{position:absolute;right:10px;bottom:1px;left:0;min-height:15px;color:#7f7987;font-size:11px;line-height:15px;text-align:center;text-transform:uppercase;pointer-events:none}
.x-canvas-ribbon-group button{display:grid;min-width:48px;height:53px;place-items:center;padding:4px 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:#d8d3de;font-size:12px;cursor:pointer}
.x-canvas-ribbon-group button .x-canvas-icon{width:19px;height:19px}.x-canvas-ribbon-group button:hover{border-color:#46414e;background:#34313a}
/** [CODEX - 2026-08-29 19:58:27] Guide visibility buttons use a restrained editor-native pressed state without changing the retained Delete/Clear action. */
.x-canvas-ribbon-group button[data-command=toggle-vertical-guides][aria-pressed=true],.x-canvas-ribbon-group button[data-command=toggle-horizontal-guides][aria-pressed=true]{border-color:#4f7773;background:#30423f;color:#effffc;box-shadow:inset 0 0 0 1px rgba(96,192,183,.1)} /* [CODEX - 2026-08-29 20:02:41] */
/** [CODEX - 2026-08-31 05:18:00] Precision visibility toggles share the restrained pressed state of guide controls instead of introducing a new accent or visual language. */
.x-canvas-ribbon-group button[data-command=toggle-smart-alignment][aria-pressed=true],.x-canvas-ribbon-group button[data-command=toggle-spacing-guides][aria-pressed=true],.x-canvas-ribbon-group button[data-command=toggle-distance-guides][aria-pressed=true]{border-color:#4f7773;background:#30423f;color:#effffc;box-shadow:inset 0 0 0 1px rgba(96,192,183,.1)}
.x-canvas-ribbon-group label{display:grid;gap:3px;margin:0 7px;color:#aaa4b3;font-size:12px}.x-canvas-ribbon-group input[type=range]{width:100px}.x-canvas-ribbon-group input[type=color]{width:38px;height:23px;padding:0;border:0;background:transparent}.x-canvas-ribbon-group select{height:24px;padding:0 20px 0 6px;border:1px solid #4a4552;border-radius:5px;background:#211f26;color:#e5e0e9;font-size:12px}.x-canvas-ribbon-group small{margin:0 8px;color:#77717f;font-size:12px}
/** [CODEX - 2026-08-22 01:24:00] Polished overlapping color wells and precise hex fields keep both active colors visible without obscuring the ribbon caption strip. */
.x-canvas-color-group{align-items:flex-start}.x-canvas-color-stack{position:relative;width:82px;height:50px;margin:0 4px}.x-canvas-color-stack label{position:absolute;display:grid;grid-template-columns:33px auto;align-items:center;gap:4px;margin:0;color:#bab4c2;font-size:12px}.x-canvas-color-stack label:first-child{top:0;left:0;z-index:2}.x-canvas-color-stack label:last-child{right:0;bottom:0;z-index:1}.x-canvas-color-stack input[type=color]{width:35px;height:28px;padding:2px;border:1px solid #625b69;border-radius:7px;background:#19171c;box-shadow:0 3px 9px rgba(0,0,0,.28);cursor:pointer}.x-canvas-color-stack b{font-size:12px;font-weight:600}.x-canvas-ribbon-group input[data-color-hex]{width:79px;height:24px;padding:0 6px;border:1px solid #4a4552;border-radius:5px;background:#211f26;color:#eeeaf4;font-size:12px;font-family:Consolas,"Segoe UI",sans-serif;text-transform:lowercase;user-select:text}
/** [CODEX - 2026-08-24 04:05:00] Left tool and right inspector widths remain bounded CSS variables so the center stage always owns the remaining space. */
.x-canvas-body{display:grid;grid-template-columns:var(--canvas-tools-width) minmax(0,1fr) var(--canvas-inspector-width);min-height:0;overflow:hidden}
.x-canvas-tools{display:grid;min-height:0;grid-template-rows:minmax(0,1fr) auto;border-right:1px solid var(--canvas-line);background:#242128;overflow:hidden}
/** [CODEX - 2026-08-23 00:26:00] Only the tool grid scrolls or gains columns; color wells remain a visually separate pinned footer. */
.x-canvas-tool-grid{display:flex;min-height:0;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
/** [CODEX - 2026-08-23 00:55:00] Compact Affinity-inspired family controls keep one canonical tool node per command and open polished fixed flyouts outside the clipped rail. */
.x-canvas-tool-group{position:relative;width:39px;height:39px;flex:0 0 39px}.x-canvas-tool-group-current{width:39px!important;height:39px!important}.x-canvas-tool-group-toggle{position:absolute!important;right:1px;bottom:1px;width:14px!important;height:14px!important;border:0!important;border-radius:4px!important;background:#26242a!important;color:#aeb8b6!important;box-shadow:0 0 0 1px rgba(255,255,255,.08)!important}.x-canvas-tool-group-toggle:before{content:"";width:0;height:0;border-top:4px solid currentColor;border-right:3px solid transparent;border-left:3px solid transparent}.x-canvas-tool-group.is-active>.x-canvas-tool-group-current{border-color:#5f8782;background:#38504d;color:#fff}.x-canvas-tool-group.is-open>.x-canvas-tool-group-toggle{background:#79c9bd!important;color:#18312e!important}.x-canvas-tool-group-menu{position:fixed;z-index:180;display:grid;width:220px;grid-template-columns:repeat(4,39px);gap:5px;justify-content:start;padding:9px;border:1px solid #596260;border-radius:10px;background:linear-gradient(145deg,#303236,#242529);box-shadow:0 18px 54px rgba(0,0,0,.58);color:#eef5f3}.x-canvas-tool-group-menu[hidden]{display:none}.x-canvas-tool-group-menu:before{content:attr(aria-label);grid-column:1/-1;overflow:hidden;padding:0 2px 6px;border-bottom:1px solid #454b4a;color:#aeb8b6;font-size:11px;font-weight:800;letter-spacing:.04em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.x-canvas-tool-group-menu>button{width:39px;height:39px}.x-canvas-tool-group-menu>button.is-active{border-color:#79c9bd;background:#38504d}.x-canvas.has-tool-rail-columns .x-canvas-tool-group{align-self:start}
.x-canvas-tools button{display:grid;width:39px;height:39px;place-items:center;border:1px solid transparent;border-radius:7px;background:transparent;color:#b7b1c0;cursor:pointer;position:relative}
.x-canvas-tools button .x-canvas-icon{width:20px;height:20px}.x-canvas-tools button span{display:none}.x-canvas-tools button:hover{background:#333039;color:#fff}.x-canvas-tools button.is-active{border-color:#80683c;background:#4a402c;color:#fff} /* [CODEX - 2026-08-30 04:18:30] */
.x-canvas-stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 45%,#26232d 0,#18171c 54%,#111015 100%)}
/** [CODEX - 2026-08-21 19:05:00] Mouse panning and the native context menu expose explicit cursor and focus feedback. */
.x-canvas.is-space-panning .x-canvas-surface{cursor:grab!important}.x-canvas.is-mouse-panning .x-canvas-surface{cursor:grabbing!important}.x-canvas-mouse-menu{position:fixed;z-index:90;width:190px;padding:5px;border:1px solid #514a5a;border-radius:9px;background:#211e25;box-shadow:0 14px 38px rgba(0,0,0,.46);color:#eee9f2}.x-canvas-mouse-menu[hidden]{display:none}.x-canvas-mouse-menu button{display:flex;width:100%;height:32px;align-items:center;gap:9px;padding:0 9px;border:0;border-radius:5px;background:transparent;color:inherit;font:inherit;font-size:12px;text-align:left;cursor:pointer}.x-canvas-mouse-menu button:hover,.x-canvas-mouse-menu button:focus-visible{background:#30504c;outline:none}.x-canvas-mouse-menu .x-canvas-icon{width:16px;height:16px;color:#e1bd71}.x-canvas-mouse-menu hr{height:1px;margin:4px;border:0;background:#45404a} /* [CODEX - 2026-08-30 04:18:30] */
.x-canvas-stage:before{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
/** [CODEX - 2026-08-22 01:51:15] A readable, non-blocking drop target confirms image imports anywhere over the composition workspace. */
.x-canvas-stage:after{content:"Drop images to import";position:absolute;inset:18px;z-index:30;display:grid;place-items:center;border:2px dashed #e8c477;border-radius:16px;background:rgba(43,35,21,.84);color:#f8e9c7;font-size:16px;font-weight:750;letter-spacing:.1px;opacity:0;transform:scale(.985);transition:opacity .15s ease,transform .15s ease;pointer-events:none;backdrop-filter:blur(8px)}.x-canvas.is-file-dragging .x-canvas-stage:after{opacity:1;transform:none} /* [CODEX - 2026-08-30 04:18:30] */
.x-canvas-pasteboard{position:absolute;top:50%;left:50%;display:none;box-shadow:0 22px 55px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12);transform:translate(-50%,-50%);transform-origin:center;background:repeating-conic-gradient(#d6d6d6 0 25%,#fff 0 50%) 0/20px 20px}
/* [CODEX - 2026-08-24 01:36:40] The viewport pasteboard remains a dedicated compositor layer so Firefox can pan and zoom it without repainting document pixels. */
.x-canvas-pasteboard{will-change:transform;contain:layout paint style;backface-visibility:hidden}
/* [CODEX - 2026-08-24 01:36:40] The GPU document surface and transparent interaction overlay share document pixels without duplicating pointer handling or selection animation. */
.x-canvas-gpu-surface{position:absolute;inset:0;z-index:1;display:block;max-width:none;pointer-events:none}.x-canvas-surface{position:relative;z-index:2;background:transparent}
.x-canvas.has-document .x-canvas-pasteboard{display:block}.x-canvas-pasteboard canvas{display:block;max-width:none;touch-action:none}
/** [CODEX - 2026-08-22 04:48:00] The selection overlay follows the document transform but never intercepts mouse, pen, or touch editing gestures. */
.x-canvas-selection-overlay{position:absolute;inset:0;z-index:3;pointer-events:none}
/** [CODEX - 2026-08-22 04:48:00] Curves uses a compact professional graph with large keyboard-focusable nodes and editor-consistent pastel accents. */
.x-canvas-curve{display:grid;gap:8px;padding:2px 0 12px}.x-canvas-curve svg{display:block;width:100%;aspect-ratio:1;border:1px solid #514c56;border-radius:8px;background:linear-gradient(135deg,#232126,#17161a);touch-action:none;cursor:crosshair}.x-canvas-curve-grid path{fill:none;stroke:#3c3841;stroke-width:1}.x-canvas-curve-diagonal{fill:none;stroke:#55505b;stroke-width:1;stroke-dasharray:5 5}.x-canvas-curve polyline{fill:none;stroke:#79c9bd;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.x-canvas-curve circle{fill:#f5f1e9;stroke:#4d8f87;stroke-width:2;cursor:grab;vector-effect:non-scaling-stroke}.x-canvas-curve circle:focus{outline:none;stroke:#f1b991;stroke-width:4}.x-canvas-curve circle:active{cursor:grabbing}.x-canvas-curve-help{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#aaa4ae;font-size:12px}.x-canvas-curve-help button{min-height:30px;padding:0 9px;border:1px solid #4d4851;border-radius:6px;background:#2a272e;color:#eee9f0;font-size:12px;cursor:pointer}
.x-canvas-empty{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;padding:30px;text-align:center}.x-canvas.has-document .x-canvas-empty{display:none}
/* [CODEX - 2026-08-28 04:45:51] .x-canvas-empty-mark{width:56px;height:56px;margin-bottom:17px}.x-canvas-empty-mark span{width:31px;height:31px;border-radius:8px} */
/* [CODEX - 2026-08-28 04:45:51] The empty-state identity scales the same final SVG without legacy child geometry. */
.x-canvas-empty-mark{width:56px;height:56px;margin-bottom:17px}
.x-canvas-empty h1{margin:0 0 8px;font-size:35px;letter-spacing:-1.2px}.x-canvas-empty>p{max-width:450px;margin:0;color:#aaa5b5;font-size:14px}
.x-canvas-empty-actions{display:flex;gap:9px;margin-top:22px}.x-canvas-empty-actions button{min-height:39px;padding:0 15px;border:1px solid #484450;border-radius:8px;background:#2d2933;cursor:pointer}
/** [CODEX - 2026-08-24 04:42:43] Recent projects are true in-app controls, preventing native anchor navigation from escaping the installed PWA shell. */
.x-canvas-recent{display:grid;width:min(620px,90vw);grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:30px}.x-canvas-recent button{display:grid;min-width:0;gap:3px;padding:12px;border:1px solid #3c3943;border-radius:8px;background:#242129;color:#eeeaf4;font:inherit;text-align:left;cursor:pointer}.x-canvas-recent button:hover{border-color:#8b7244;background:#332d24}.x-canvas-recent strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-canvas-recent span{color:#8f8999;font-size:12px} /* [CODEX - 2026-08-30 04:18:30] */
/** [CODEX - 2026-08-31 06:31:10] The empty editor becomes a dense Affinity-like launch workspace with separate horizontal New and Recent rows, faithful document previews, and no card-wall gimmicks. */
.x-canvas-empty{align-content:stretch;justify-items:stretch;padding:0;text-align:left;background:radial-gradient(circle at 48% -20%,rgba(81,142,135,.1),transparent 42%),#1b191e}.x-canvas-start{display:grid;width:min(1120px,calc(100% - 48px));min-height:0;margin:auto;grid-template-rows:auto auto auto;align-content:center;gap:20px;padding:24px 0}.x-canvas-start-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:0 2px}.x-canvas-start-hero .x-canvas-empty-mark{width:52px;height:52px;margin:0}.x-canvas-start-hero h1{margin:0 0 3px;font-size:30px;letter-spacing:-.8px}.x-canvas-start-hero p{margin:0;color:#aaa5b5;font-size:13px}.x-canvas-start-hero>button,.x-canvas-start-row>header>button{display:flex;min-height:35px;align-items:center;gap:7px;padding:0 12px;border:1px solid #49454f;border-radius:7px;background:#29262d;color:#e8e4eb;font:inherit;font-size:13px;cursor:pointer}.x-canvas-start-hero>button:hover,.x-canvas-start-row>header>button:hover{border-color:#5f9f98;background:#2b3c3a;color:#fff}.x-canvas-start-hero>button .x-canvas-icon,.x-canvas-start-row>header>button .x-canvas-icon{width:16px;height:16px}.x-canvas-start-row{display:grid;min-width:0;gap:9px}.x-canvas-start-row>header{display:flex;min-height:37px;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #343139}.x-canvas-start-row>header>span{display:flex;align-items:baseline;gap:10px}.x-canvas-start-row>header strong{font-size:17px;color:#f0edf2}.x-canvas-start-row>header small{color:#8f8994;font-size:12px}.x-canvas-new-presets,.x-canvas-recent{display:flex;width:100%;min-width:0;gap:8px;margin:0;overflow-x:auto;overflow-y:hidden;padding:1px 1px 8px;scroll-snap-type:x proximity}.x-canvas-new-presets>button{display:grid;width:126px;min-width:126px;height:137px;grid-template-rows:76px auto auto;align-items:center;justify-items:center;gap:2px;padding:9px 8px 8px;border:1px solid #3c3942;border-radius:8px;background:#242229;color:#eeeaf2;font:inherit;text-align:center;scroll-snap-align:start;cursor:pointer}.x-canvas-new-presets>button:hover,.x-canvas-new-presets>button:focus-visible{border-color:#61a9a1;background:#293936;outline:0}.x-canvas-new-presets strong{align-self:end;font-size:13px}.x-canvas-new-presets small{align-self:start;color:#938e98;font-size:12px;white-space:nowrap}.x-canvas-preset-sheet{display:block;height:64px;aspect-ratio:1.414/1;border:1px solid #d7d4ce;border-radius:2px;background:#f3f0e9;box-shadow:0 5px 11px rgba(0,0,0,.28)}.x-canvas-preset-sheet.is-square{aspect-ratio:1}.x-canvas-preset-sheet.is-portrait{aspect-ratio:.8}.x-canvas-preset-sheet.is-story{aspect-ratio:.5625}.x-canvas-preset-sheet.is-paper{aspect-ratio:.707}.x-canvas-preset-sheet.is-letter{aspect-ratio:.773}.x-canvas-preset-sheet.is-legal{aspect-ratio:.607}.x-canvas-recent{min-height:154px}.x-canvas-recent-card{display:grid;width:186px;min-width:186px;height:150px;grid-template-rows:106px minmax(0,1fr);gap:0;padding:0;overflow:hidden;border:1px solid #3c3942;border-radius:8px;background:#242229;color:#eeeaf2;font:inherit;text-align:left;scroll-snap-align:start;cursor:pointer}.x-canvas-recent-card:hover,.x-canvas-recent-card:focus-visible{border-color:#61a9a1;background:#293936;outline:0}.x-canvas-recent-preview{position:relative;display:grid;min-width:0;place-items:center;overflow:hidden;border-bottom:1px solid #39363e;background:linear-gradient(145deg,#302d35,#1e1c22)}.x-canvas-recent-placeholder{display:grid;height:88%;max-width:92%;aspect-ratio:var(--canvas-recent-aspect);place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:2px;background:repeating-conic-gradient(#747474 0 25%,#929292 0 50%) 0/12px 12px;color:#e8c778;box-shadow:0 5px 13px rgba(0,0,0,.3)}.x-canvas-recent-placeholder .x-canvas-icon{width:26px;height:26px}.x-canvas-recent-preview img{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);object-fit:contain}.x-canvas-recent-preview.has-preview .x-canvas-recent-placeholder{visibility:hidden}.x-canvas-recent-copy{display:grid;min-width:0;align-content:center;gap:2px;padding:7px 9px}.x-canvas-recent-copy strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.x-canvas-recent-copy small{overflow:hidden;color:#918b97;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.x-canvas-recent-empty{display:grid;min-width:310px;min-height:142px;place-items:center;margin:0;padding:18px;border:1px dashed #3b3840;border-radius:8px;color:#8f8994;font-size:13px;text-align:center}
/** [CODEX - 2026-08-31 06:31:10] Disabled document tools remain legible as editor chrome while clearly unavailable and immune to pointer or keyboard activation. */
.x-canvas [data-document-disabled=true]{opacity:.34!important;filter:saturate(.35);cursor:not-allowed!important}.x-canvas [data-document-disabled=true]:hover{border-color:transparent!important;background:transparent!important;color:inherit!important;box-shadow:none!important}
.x-canvas-inspector{min-width:0;min-height:0;border-left:1px solid var(--canvas-line);background:var(--canvas-panel)}
/** [CODEX - 2026-08-21 15:58:00] Five adaptive inspector tabs include Canvas Assistant without sacrificing compact desktop and mobile layouts. */
.x-canvas-panel-tabs{display:grid;height:35px;grid-template-columns:repeat(5,1fr);border-bottom:1px solid #3a3640}.x-canvas-panel-tabs button{min-width:0;padding:0 3px;border:0;border-bottom:2px solid transparent;background:#211f25;color:#918b99;font-size:12px;cursor:pointer}.x-canvas-panel-tabs button.is-active{border-bottom-color:var(--canvas-accent);background:#28252d;color:#fff}
.x-canvas-panel{display:none;height:calc(100% - 35px);min-height:0;overflow:auto}.x-canvas-panel.is-active{display:block}.x-canvas-panel-head{display:flex;height:37px;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid #393640}.x-canvas-panel-head strong{font-size:12px}.x-canvas-panel-head button{display:grid;width:24px;height:24px;place-items:center;border:0;border-radius:5px;background:transparent;cursor:pointer}.x-canvas-panel-head button .x-canvas-icon{width:15px;height:15px}.x-canvas-panel-head button:hover{background:#3b3742}
.x-canvas-layer-list{padding:5px}.x-canvas-layer{display:grid;grid-template-columns:25px 38px minmax(0,1fr) 25px;align-items:center;gap:5px;min-height:47px;padding:4px;border:1px solid transparent;border-radius:7px;color:#bdb7c5;cursor:pointer}.x-canvas-layer:hover{background:#302d35}.x-canvas-layer.is-active{border-color:#52918a;background:#2d4d49;color:#fff}.x-canvas-layer button{display:grid;width:25px;height:25px;place-items:center;border:0;background:transparent;color:inherit;cursor:pointer}.x-canvas-layer button .x-canvas-icon{width:15px;height:15px}.x-canvas-layer-preview{display:grid;width:36px;height:36px;place-items:center;overflow:hidden;border:1px solid #504a58;border-radius:4px;background:repeating-conic-gradient(#555 0 25%,#777 0 50%) 0/10px 10px}.x-canvas-layer-preview .x-canvas-icon{width:19px;height:19px}.x-canvas-layer-preview img{width:100%;height:100%;object-fit:cover}.x-canvas-layer-name{min-width:0}.x-canvas-layer-name strong,.x-canvas-layer-name span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-canvas-layer-name strong{font-size:12px}.x-canvas-layer-name span{color:#88818f;font-size:12px} /* [CODEX - 2026-08-30 04:18:30] */
/** [CODEX - 2026-08-21 14:38:00] Layer thumbnails visibly advertise attached masks. */
.x-canvas-layer-preview{position:relative}.x-canvas-mask-badge{position:absolute;right:1px;bottom:1px;display:grid;width:15px;height:15px;place-items:center;border-radius:3px;background:#17151b;color:#fff}.x-canvas-mask-badge .x-canvas-icon{width:12px;height:12px}
/** [CODEX - 2026-08-21 14:54:00] Layer groups read as structural rows and can compact their child layers. */
/** [CODEX - 2026-08-21 23:19:32] Selectable six-control group rows expose lock and mask state without reducing any label below the Canvas type floor. */
.x-canvas-layer-group{display:grid;grid-template-columns:24px 19px minmax(0,1fr) 22px 22px 22px;align-items:center;gap:3px;margin:4px 0 2px;padding:4px 3px;border:1px solid transparent;border-radius:6px;background:#1d1b22;color:#c7c0ce;cursor:pointer}.x-canvas-layer-group.is-active{border-color:#5a968f;background:#2d4b47;color:#fff}.x-canvas-layer-group>button{display:grid;width:22px;height:22px;place-items:center;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer}.x-canvas-layer-group>button:hover{background:#35413f}.x-canvas-layer-group>.x-canvas-icon,.x-canvas-layer-group>button .x-canvas-icon{width:15px;height:15px}.x-canvas-layer-group strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.x-canvas-group-mask{display:inline-block;margin-left:4px;padding:1px 4px;border-radius:4px;background:#594a2e;color:#f4dfb5;font-size:12px;font-weight:500}.x-canvas-layer.is-group-collapsed{display:none} /* [CODEX - 2026-08-30 04:18:30] */
.x-canvas-properties{display:grid;gap:10px;padding:11px}.x-canvas-properties>p{color:#8e8796;font-size:12px;line-height:1.55}.x-canvas-property-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.x-canvas-properties label{display:grid;gap:4px;color:#98919f;font-size:11px;text-transform:uppercase}.x-canvas-properties input,.x-canvas-properties textarea,.x-canvas-properties select{width:100%;min-width:0;padding:7px;border:1px solid #494450;border-radius:5px;background:#1e1c22;color:#f3eff7;font-size:12px;text-transform:none}.x-canvas-properties textarea{min-height:65px;resize:vertical}.x-canvas-properties input[type=color]{height:32px;padding:2px}.x-canvas-properties input[type=range]{padding:0}.x-canvas-properties hr{width:100%;border:0;border-top:1px solid #3b3741}
/** [CODEX - 2026-08-21 05:51:00] Slider readouts and compact inspector actions keep precision controls legible at desktop and touch sizes. */
.x-canvas-filter-row{display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:end;gap:7px}.x-canvas-filter-row output{padding:6px 3px;color:#d8dadd;font-size:12px;text-align:right}.x-canvas-properties .x-canvas-inline-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.x-canvas-properties .x-canvas-inline-actions button{height:31px;border:1px solid #494450;border-radius:6px;background:#302c35;color:#d7d1dd;font-size:12px;cursor:pointer}.x-canvas-properties .x-canvas-inline-actions button:hover{border-color:#59bdb3;background:#304a47} /* [CODEX - 2026-08-30 04:24:10] */
.x-canvas-history{padding:7px}.x-canvas-history-item{display:grid;grid-template-columns:9px minmax(0,1fr);gap:8px;padding:7px;color:#aaa4b1;font-size:12px}.x-canvas-history-item:before{content:"";width:7px;height:7px;margin-top:3px;border-radius:50%;background:#5e566a}.x-canvas-history-item:first-child{color:#fff}.x-canvas-history-item:first-child:before{background:var(--canvas-accent-2)}
/** [CODEX - 2026-08-21 07:27:00] Durable revisions are visually distinct and expose a compact restore affordance. */
.x-canvas-history-divider{margin:8px 0 3px;padding:7px 8px 4px;border-top:1px solid #3b3742;color:#817a89;font-size:11px;font-weight:800;text-transform:uppercase}.x-canvas-history-saved{grid-template-columns:9px minmax(0,1fr) auto}.x-canvas-history-saved button{align-self:center;padding:4px 7px;border:1px solid #4b4553;border-radius:5px;background:#302c36;color:#d7d1df;font-size:12px;cursor:pointer}.x-canvas-history-saved button:hover{border-color:#a88543} /* [CODEX - 2026-08-30 04:18:30] */
/** [CODEX - 2026-08-21 15:58:00] Assistant panel balances persistent conversation history, prompt shortcuts, and a compact document-aware composer. */
.x-canvas-assistant-panel.is-active{display:grid;grid-template-rows:37px minmax(0,1fr) auto auto;overflow:hidden}.x-canvas-assistant-messages{display:flex;min-height:0;flex-direction:column;gap:8px;overflow:auto;padding:10px}.x-canvas-assistant-welcome{display:grid;gap:4px;padding:10px;border:1px solid #403a4b;border-radius:9px;background:#211e27}.x-canvas-assistant-welcome strong{font-size:12px}.x-canvas-assistant-welcome span{color:#958e9e;font-size:12px;line-height:1.45}.x-canvas-assistant-message{max-width:88%;padding:8px 10px;border-radius:10px;background:#34303a;color:#e7e2eb;font-size:12px;line-height:1.45;white-space:pre-wrap}.x-canvas-assistant-message.is-user{align-self:flex-end;background:#70552f;color:#fff}.x-canvas-assistant-message small{display:block;margin-top:4px;color:#9f98a7;font-size:12px}.x-canvas-assistant-suggestions{display:flex;gap:5px;overflow-x:auto;padding:7px 9px;border-top:1px solid #393541}.x-canvas-assistant-suggestions button{height:28px;padding:0 8px;border:1px solid #494350;border-radius:14px;background:#2e2a34;color:#bbb4c3;font-size:12px;white-space:nowrap}.x-canvas-assistant-form{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:6px;padding:8px;border-top:1px solid #393541}.x-canvas-assistant-form textarea{min-height:42px;max-height:100px;padding:8px;border:1px solid #4b4553;border-radius:8px;background:#1d1b21;color:#fff;resize:vertical}.x-canvas-assistant-form button{display:grid;width:34px;height:34px;align-self:end;place-items:center;border:0;border-radius:8px;background:var(--canvas-accent);color:#fff}.x-canvas-assistant-form button:disabled{opacity:.5} /* [CODEX - 2026-08-30 04:18:30] */
/** [CODEX - 2026-08-21 14:43:00] Guide controls fit the bottom precision bar without competing with document status. */
.x-canvas-statusbar{display:flex;align-items:center;gap:12px;padding:0 10px;border-top:1px solid #34313a;background:#201e24;color:#8f8997;font-size:12px}.x-canvas-statusbar>span:nth-child(2){flex:1}.x-canvas-statusbar>button{display:flex;align-items:center;gap:3px;height:20px;padding:0 5px;border:0;border-radius:4px;background:transparent;color:#9992a1;font-size:12px;cursor:pointer}.x-canvas-statusbar>button:hover{background:#34303a;color:#fff}.x-canvas-statusbar>button .x-canvas-icon{width:12px;height:12px}.x-canvas-zoom{display:flex;align-items:center;gap:5px}.x-canvas-zoom button{width:20px;height:20px;border:0;background:transparent;cursor:pointer}.x-canvas-zoom input{width:95px;height:3px}.x-canvas-zoom output{width:35px;color:#b7b1bf}
.x-canvas-mobile-nav{display:none}
/** [CODEX - 2026-08-21 15:52:00] Mobile action sheets use large touch targets, safe-area padding, and a familiar bottom-drawer interaction. */
.x-canvas-mobile-sheet[hidden]{display:none}.x-canvas-mobile-sheet{position:fixed;inset:0;z-index:120;display:none;align-items:end;background:rgba(7,6,9,.62);backdrop-filter:blur(8px)}.x-canvas-mobile-sheet>section{width:100%;max-height:72vh;overflow:auto;padding:8px 16px calc(18px + env(safe-area-inset-bottom));border:1px solid #4a4552;border-bottom:0;border-radius:18px 18px 0 0;background:#29262f;box-shadow:0 -24px 70px rgba(0,0,0,.45)}.x-canvas-mobile-sheet h2{margin:7px 0 13px;font-size:18px}.x-canvas-mobile-sheet-handle{display:block;width:44px;height:5px;margin:0 auto 7px;border:0;border-radius:5px;background:#65606c}.x-canvas-mobile-sheet [data-mobile-sheet-panel]{grid-template-columns:1fr 1fr;gap:8px}.x-canvas-mobile-sheet [data-mobile-sheet-panel]:not([hidden]){display:grid}.x-canvas-mobile-sheet [data-mobile-sheet-panel]>button{display:flex;min-height:62px;align-items:center;gap:11px;padding:9px 11px;border:1px solid #48434e;border-radius:10px;background:#211f26;color:#eeeaf3;text-align:left}.x-canvas-mobile-sheet [data-mobile-sheet-panel]>button .x-canvas-icon{width:22px;height:22px;color:#e8bd68}.x-canvas-mobile-sheet [data-mobile-sheet-panel]>button span{display:grid;gap:2px}.x-canvas-mobile-sheet [data-mobile-sheet-panel]>button small{color:#938d9c;font-size:12px} /* [CODEX - 2026-08-30 04:18:30] */
/** [CODEX - 2026-08-22 01:24:00] Touch color wells span the mobile drawer and retain the 12px normal-label readability floor. */
.x-canvas-mobile-colors{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border:1px solid #48434e;border-radius:10px;background:#211f26}.x-canvas-mobile-colors label{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:5px;color:#aaa4b3;font-size:12px}.x-canvas-mobile-colors label>input[type=color]{grid-row:1/3;width:42px;height:42px;padding:2px;border:1px solid #5a5361;border-radius:9px;background:#17151a}.x-canvas-mobile-colors label>input[type=text]{min-width:0;width:100%;height:29px;padding:0 7px;border:1px solid #4b4652;border-radius:6px;background:#19171d;color:#f2eef5;font-size:12px;font-family:Consolas,"Segoe UI",sans-serif;text-transform:lowercase;user-select:text}
.x-canvas-toast{position:absolute;right:20px;bottom:18px;z-index:10;max-width:340px;padding:10px 13px;border:1px solid #47414f;border-radius:7px;background:rgba(31,28,35,.94);box-shadow:0 12px 34px rgba(0,0,0,.32);opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none}.x-canvas-toast.is-visible{opacity:1;transform:none}
/** [CODEX - 2026-08-21 16:29:00] Contextual actions float above the canvas without obscuring the selected content or mobile navigation. */
.x-canvas-contextbar[hidden],.x-canvas-contextbar button[hidden]{display:none}.x-canvas-contextbar{position:absolute;left:50%;bottom:18px;z-index:9;display:flex;max-width:calc(100% - 24px);gap:3px;padding:4px;border:1px solid #4b4653;border-radius:10px;background:rgba(35,32,40,.94);box-shadow:0 14px 40px rgba(0,0,0,.38);transform:translateX(-50%);backdrop-filter:blur(10px)}.x-canvas-contextbar button{display:flex;min-height:34px;align-items:center;gap:5px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:#c0bac8;font-size:12px;white-space:nowrap}.x-canvas-contextbar button:hover{background:#40394b;color:#fff}.x-canvas-contextbar .x-canvas-icon{width:17px;height:17px}
.x-canvas-dialog[hidden]{display:none}.x-canvas-dialog{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(8,7,10,.7);backdrop-filter:blur(12px)}.x-canvas-dialog-card{position:relative;width:min(430px,100%);padding:28px;border:1px solid #4a4552;border-radius:13px;background:#28252e;box-shadow:0 30px 90px rgba(0,0,0,.5)}.x-canvas-dialog-card h2{margin:5px 0 20px;font-size:25px}.x-canvas-dialog-card>label,.x-canvas-dialog-grid label{display:grid;gap:6px;margin-bottom:13px;color:#aaa4b3;font-size:11px;text-transform:uppercase}.x-canvas-dialog-card input{width:100%;height:39px;padding:0 10px;border:1px solid #4c4754;border-radius:7px;background:#1d1b21;color:#fff;font-size:12px;text-transform:none}.x-canvas-dialog-close{position:absolute;top:10px;right:10px;width:30px;height:30px;border:0;border-radius:6px;background:transparent;cursor:pointer}.x-canvas-dialog-close:hover{background:#3a3641}.x-canvas-kicker{color:#e8bd68;font-size:11px;font-weight:800;text-transform:uppercase}.x-canvas-dialog-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.x-canvas-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:2px 0 18px}.x-canvas-presets button{height:31px;border:1px solid #494450;border-radius:6px;background:#322e38;color:#bbb5c3;font-size:12px;cursor:pointer}.x-canvas-create{width:100%;height:42px;border:0;border-radius:8px;cursor:pointer} /* [CODEX - 2026-08-30 04:18:30] */
/** [CODEX - 2026-08-21 06:57:00] Export controls share the modal language while keeping checkbox and dimension feedback compact. */
.x-canvas-dialog-card select{width:100%;height:39px;padding:0 9px;border:1px solid #4c4754;border-radius:7px;background:#1d1b21;color:#fff;font-size:12px;text-transform:none}.x-canvas-dialog-card .x-canvas-check{display:flex;align-items:center;gap:8px;font-size:12px;text-transform:none}.x-canvas-dialog-card .x-canvas-check input{width:16px;height:16px}.x-canvas-export-size{margin:0 0 15px;color:#8f8898;font-size:12px}
/** [CODEX - 2026-08-25 13:30:00] CNV password controls reuse the editor dialog system with readable warnings and no browser-native presentation. */
.x-canvas-cnv-copy,.x-canvas-cnv-passwords p{margin:0 0 15px;color:#a39cab;font-size:12px;line-height:1.45}.x-canvas-cnv-passwords{margin:12px 0 15px;padding:13px;border:1px solid #49434f;border-radius:9px;background:#211f26}.x-canvas-cnv-passwords[hidden]{display:none}.x-canvas-cnv-passwords label{display:grid;gap:6px;margin-bottom:11px;color:#aaa4b3;font-size:11px;text-transform:uppercase}.x-canvas-cnv-passwords p{margin:2px 0 0;color:#c4a98b}#x-canvas-cnv-dialog .x-canvas-icon,#x-canvas-cnv-open-dialog .x-canvas-icon{width:17px;height:17px} /* [CODEX - 2026-08-25 14:22:00] */
/** [CODEX - 2026-08-21 15:18:00] Canvas Library provides desktop browsing, searchable metadata, reversible trash actions, and compact mobile sheets. */
.x-canvas-secondary-link{display:flex;width:100%;min-height:37px;align-items:center;justify-content:center;gap:7px;margin-top:8px;border:1px solid #494450;border-radius:8px;background:#211f26;color:#bcb6c5;cursor:pointer}.x-canvas-secondary-link:hover{border-color:#5f9f98;background:#2d3d3a;color:#fff}.x-canvas-library-card{width:min(920px,100%);height:min(680px,88vh);display:grid;grid-template-rows:auto auto minmax(0,1fr)}.x-canvas-library-card h2{margin-bottom:14px}.x-canvas-library-toolbar{display:grid;grid-template-columns:auto minmax(160px,1fr) auto;align-items:center;gap:10px;margin-bottom:14px}.x-canvas-library-tabs{display:flex;padding:3px;border:1px solid #413c48;border-radius:8px;background:#201e24}.x-canvas-library-tabs button,.x-canvas-library-toolbar>button{display:flex;height:32px;align-items:center;gap:6px;padding:0 11px;border:0;border-radius:6px;background:transparent;color:#aaa4b2;cursor:pointer}.x-canvas-library-tabs button.is-active{background:#31504c;color:#fff}.x-canvas-library-toolbar>input{height:38px}.x-canvas-library-toolbar>button{height:38px;border:1px solid #494450;background:#302c35}.x-canvas-library-grid{display:grid;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:10px;overflow:auto;padding:1px 4px 8px 1px}.x-canvas-library-item{display:grid;min-width:0;grid-template-rows:110px auto;overflow:hidden;border:1px solid #403b47;border-radius:10px;background:#211f26;color:#f3eff7;text-decoration:none}.x-canvas-library-item:hover{border-color:#5d9992;background:#27312f} /* [CODEX - 2026-08-30 04:18:30] */
/** [CODEX - 2026-08-24 04:42:43] Library document buttons retain card styling while downloads alone remain anchors. */
.x-canvas-library-preview{display:grid;width:100%;place-items:center;border:0;background:linear-gradient(145deg,#34303d,#1b1920);color:#d8b66c;font:inherit;cursor:default}.x-canvas-library-preview:is(a,button){cursor:pointer}.x-canvas-library-preview .x-canvas-icon{width:35px;height:35px}.x-canvas-library-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;padding:11px}.x-canvas-library-copy>a,.x-canvas-library-copy>[data-library-open]{min-width:0;padding:0;border:0;background:transparent;color:#f3eff7;font:inherit;text-align:left;text-decoration:none;cursor:pointer}.x-canvas-library-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-canvas-library-copy small{grid-column:1;color:#8f8999}.x-canvas-library-actions{display:flex;grid-column:2;grid-row:1/3;gap:5px;align-items:center}.x-canvas-library-action{display:grid;width:31px;height:31px;grid-column:2;grid-row:1/3;place-items:center;border:1px solid #49434f;border-radius:6px;background:#302c35;color:#c7c0cf;cursor:pointer}.x-canvas-library-actions>.x-canvas-library-action{grid-column:auto;grid-row:auto}.x-canvas-library-action:hover{background:#354844;color:#fff}.x-canvas-library-empty{grid-column:1/-1;margin:40px 0;color:#8e8797;text-align:center} /* [CODEX - 2026-08-30 04:18:30] */
/** [CODEX - 2026-08-31 07:24:50] Open-window document previews fill their card frame without cropping and retain a quiet source-specific placeholder until local-file or private-cloud pixels decode. */
.x-canvas-library-preview{position:relative;min-height:110px;overflow:hidden}.x-canvas-library-preview-placeholder{display:grid;width:100%;height:100%;place-items:center;background:repeating-conic-gradient(#303338 0 25%,#393d42 0 50%) 0/14px 14px;color:#d8b66c}.x-canvas-library-preview-placeholder .x-canvas-icon{width:35px;height:35px}.x-canvas-library-preview>img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain}.x-canvas-library-preview.has-preview .x-canvas-library-preview-placeholder{visibility:hidden}
/** [CODEX - 2026-08-25 13:27:00] The unified Library uses a sticky Rust-rendered filter strip, compact counts, explicit sync badges, and a first-class external CNV action without changing the established card geometry. */
.x-canvas-library-filters{position:sticky;top:0;z-index:3;display:flex;grid-column:1/-1;flex-wrap:wrap;align-items:center;gap:6px;padding:7px;border:1px solid #413c48;border-radius:9px;background:rgba(32,30,36,.96);box-shadow:0 8px 20px rgba(10,9,12,.2);backdrop-filter:blur(8px)}.x-canvas-library-filters button{display:flex;min-height:32px;align-items:center;gap:7px;padding:0 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:#aaa4b2;font:inherit;font-size:12px;cursor:pointer}.x-canvas-library-filters button:hover,.x-canvas-library-filters button:focus-visible{border-color:#5f9f98;background:#2d3d3a;color:#fff}.x-canvas-library-filters button.is-active{border-color:rgba(119,201,192,.42);background:rgba(84,180,173,.16);color:#d9f4f0}.x-canvas-library-filters output{display:grid;min-width:20px;height:20px;place-items:center;padding:0 5px;border-radius:10px;background:#17161a;color:#c8c1d0;font-size:12px}.x-canvas-library-filters .x-canvas-library-external{margin-left:auto;border-color:#4c4754;background:#302c35}.x-canvas-library-external .x-canvas-icon{width:16px;height:16px}.x-canvas-library-state{display:inline-flex;width:max-content;max-width:100%;grid-column:1;align-items:center;padding:2px 7px;border:1px solid #4a4550;border-radius:10px;background:#2a2730;color:#aaa4b2;font-size:12px;line-height:1.25}.x-canvas-library-state[data-state=synced],.x-canvas-library-state[data-state=local]{border-color:rgba(119,201,192,.35);color:#a8ded8}.x-canvas-library-state[data-state=local-changes],.x-canvas-library-state[data-state=cloud-update],.x-canvas-library-state[data-state=syncing]{border-color:rgba(240,183,164,.42);color:#f0c5b7}.x-canvas-library-state[data-state=failed],.x-canvas-library-state[data-state=conflict]{border-color:rgba(234,129,139,.5);color:#f0a6ae}.x-canvas-library-copy>.x-canvas-library-action,.x-canvas-library-actions{grid-row:1/4}.x-canvas-library-copy small{font-size:12px} /* [CODEX - 2026-08-30 04:18:30] */
/** [CODEX - 2026-08-24 04:05:00] Accessible drag separators expose persistent desktop sizing; the ribbon snaps between full labels and icon-only density and can collapse to its tab row. */
.x-canvas-tools,.x-canvas-inspector,.x-canvas-ribbon{position:relative}.x-canvas-panel-resizer{position:absolute;z-index:75;display:block;padding:0;border:0;background:transparent;touch-action:none}.x-canvas-panel-resizer:after{content:"";position:absolute;border-radius:4px;background:transparent;transition:background .14s,box-shadow .14s}.x-canvas-panel-resizer:hover:after,.x-canvas-panel-resizer:focus-visible:after,.x-canvas-panel-resizer.is-active:after{background:var(--canvas-accent);box-shadow:0 0 8px rgba(119,201,192,.52)}.x-canvas-panel-resizer[data-panel-resizer=left]{top:0;right:-4px;bottom:0;width:8px;cursor:col-resize}.x-canvas-panel-resizer[data-panel-resizer=left]:after{top:8px;right:3px;bottom:8px;width:2px}.x-canvas-panel-resizer[data-panel-resizer=right]{top:0;bottom:0;left:-4px;width:8px;cursor:col-resize}.x-canvas-panel-resizer[data-panel-resizer=right]:after{top:8px;bottom:8px;left:3px;width:2px}.x-canvas-panel-resizer[data-panel-resizer=ribbon]{right:0;bottom:-4px;left:0;height:8px;cursor:row-resize}.x-canvas-panel-resizer[data-panel-resizer=ribbon]:after{right:10px;bottom:3px;left:10px;height:2px}.x-canvas.is-resizing-panels{cursor:col-resize}.x-canvas.is-resizing-ribbon{cursor:row-resize}.x-canvas.is-resizing-panels iframe,.x-canvas.is-resizing-panels canvas{pointer-events:none}
.x-canvas.is-ribbon-compact{--canvas-ribbon-height:72px}.x-canvas.is-ribbon-compact .x-canvas-ribbon{grid-template-rows:31px 41px}.x-canvas.is-ribbon-compact .x-canvas-ribbon-content>section{height:40px;padding:2px 8px}.x-canvas.is-ribbon-compact .x-canvas-ribbon-group{align-items:center;gap:2px;padding:0 6px}.x-canvas.is-ribbon-compact .x-canvas-ribbon-group>span,.x-canvas.is-ribbon-compact .x-canvas-ribbon-group>label,.x-canvas.is-ribbon-compact .x-canvas-ribbon-group>small,.x-canvas.is-ribbon-compact .x-canvas-color-stack{display:none}.x-canvas.is-ribbon-compact .x-canvas-ribbon-group button{display:grid;min-width:36px;width:36px;height:35px;padding:0;place-items:center;font-size:0}.x-canvas.is-ribbon-compact .x-canvas-ribbon-group button .x-canvas-icon{width:20px;height:20px}.x-canvas.is-ribbon-collapsed{--canvas-ribbon-height:31px}.x-canvas.is-ribbon-collapsed .x-canvas-ribbon{grid-template-rows:31px}.x-canvas.is-ribbon-collapsed .x-canvas-ribbon-content{display:none}
@media(max-width:900px){.x-canvas-panel-resizer{display:none}.x-canvas.is-ribbon-compact,.x-canvas.is-ribbon-collapsed{grid-template-rows:48px 62px minmax(0,1fr) 55px}.x-canvas.is-ribbon-compact .x-canvas-ribbon,.x-canvas.is-ribbon-collapsed .x-canvas-ribbon{grid-template-rows:28px 34px}.x-canvas.is-ribbon-compact .x-canvas-ribbon-content,.x-canvas.is-ribbon-collapsed .x-canvas-ribbon-content{display:block}.x-canvas.is-ribbon-compact .x-canvas-ribbon-content>section,.x-canvas.is-ribbon-collapsed .x-canvas-ribbon-content>section{height:34px;padding:2px 6px}.x-canvas.is-ribbon-compact .x-canvas-ribbon-group,.x-canvas.is-ribbon-collapsed .x-canvas-ribbon-group{padding:0 4px}.x-canvas.is-ribbon-compact .x-canvas-ribbon-group button,.x-canvas.is-ribbon-collapsed .x-canvas-ribbon-group button{display:block;width:auto;min-width:auto;height:29px;padding:0 9px;font-size:12px}}
.x-canvas[data-workspace=quick] [data-level=essential],.x-canvas[data-workspace=quick] [data-level=studio],.x-canvas[data-workspace=quick] [data-level=pro]{display:none!important}.x-canvas[data-workspace=essential] [data-level=studio],.x-canvas[data-workspace=essential] [data-level=pro]{display:none!important}.x-canvas[data-workspace=studio] [data-level=pro]{display:none!important}
@media(max-width:900px){.x-canvas{grid-template-rows:48px 62px minmax(0,1fr) 55px}.x-canvas-brand em,.x-canvas-save-state,.x-canvas-mode span,.x-canvas-top-actions button:not(.x-canvas-primary),.x-canvas-top-actions button span{display:none}.x-canvas-brand{padding-right:8px}.x-canvas-file-zone{min-width:70px}.x-canvas-history-actions{display:none}.x-canvas-ribbon{grid-template-rows:28px 34px}.x-canvas-ribbon-tabs{overflow-x:auto;padding:0 5px}.x-canvas-ribbon-tabs button{height:26px;padding:0 10px;white-space:nowrap}.x-canvas-ribbon-content>section{height:34px;padding:2px 6px;overflow-x:auto}.x-canvas-ribbon-group{padding:0 4px}.x-canvas-ribbon-group>span,.x-canvas-ribbon-group button i,.x-canvas-ribbon-group label,.x-canvas-ribbon-group small{display:none}.x-canvas-ribbon-group button{display:block;min-width:auto;height:29px;padding:0 9px;font-size:12px;white-space:nowrap}.x-canvas-body{grid-template-columns:minmax(0,1fr)}.x-canvas-tools{display:none}.x-canvas-inspector{position:absolute;right:0;bottom:55px;z-index:20;width:min(310px,88vw);height:min(520px,70vh);border:1px solid #45404b;border-radius:10px 0 0 0;box-shadow:-18px -8px 45px rgba(0,0,0,.38);transform:translateX(105%);transition:transform .2s}.x-canvas-inspector.is-mobile-open{transform:none}.x-canvas-statusbar{display:none}.x-canvas-mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #3a3641;background:#211f25}.x-canvas-mobile-nav button{display:grid;place-items:center;align-content:center;gap:2px;border:0;background:transparent;color:#aaa4b2;font-size:12px;cursor:pointer}.x-canvas-mobile-nav button i{font-size:18px}.x-canvas-mobile-nav button.is-active{color:#fff}.x-canvas-empty{padding:20px}.x-canvas-empty h1{font-size:29px}.x-canvas-recent{grid-template-columns:1fr;width:min(380px,90vw);max-height:190px;overflow:auto}.x-canvas-pasteboard{transform:translate(-50%,-50%)} }
/** [CODEX - 2026-08-31 06:31:10] Compact launch layouts preserve both horizontal galleries and move only the hero action below its copy. */
@media(max-width:900px){.x-canvas-empty{padding:0}.x-canvas-start{width:calc(100% - 28px);height:100%;align-content:start;gap:16px;overflow-y:auto;padding:18px 0 24px}.x-canvas-start-hero{grid-template-columns:44px minmax(0,1fr)}.x-canvas-start-hero .x-canvas-empty-mark{width:44px;height:44px}.x-canvas-start-hero h1{font-size:25px}.x-canvas-start-hero>button{grid-column:1/-1;justify-content:center}.x-canvas-start-row>header>span{display:grid;gap:0}.x-canvas-new-presets,.x-canvas-recent{width:100%;max-height:none;overflow-x:auto;overflow-y:hidden}.x-canvas-new-presets>button{width:116px;min-width:116px}.x-canvas-recent-card{width:172px;min-width:172px}}
@media(max-width:900px){.x-canvas-ribbon-group button .x-canvas-icon{display:none}.x-canvas-mobile-nav button .x-canvas-icon{display:block;width:19px;height:19px}}
@media(max-width:900px){.x-canvas-mobile-sheet{display:flex}.x-canvas-mobile-nav{padding-bottom:env(safe-area-inset-bottom)}.x-canvas-mobile-nav button{min-height:55px}.x-canvas-inspector{padding-bottom:env(safe-area-inset-bottom)}} /** [CODEX - 2026-08-21 15:52:00] */
@media(max-width:900px){.x-canvas-contextbar{bottom:10px;max-width:calc(100% - 16px);overflow-x:auto}.x-canvas-contextbar button{min-width:48px;min-height:42px;flex-direction:column;justify-content:center;gap:1px;padding:2px 8px;font-size:12px}} /** [CODEX - 2026-08-21 16:29:00] */
@media(max-width:520px){.x-canvas-topbar{gap:4px;padding:0 6px}.x-canvas-brand>span{display:none}.x-canvas-file-zone{max-width:none}.x-canvas-mode select{width:74px;padding-right:17px}.x-canvas-topbar .x-canvas-top-actions button{padding:0 8px}.x-canvas-ribbon-tabs button{padding:0 8px}.x-canvas-empty-actions{width:100%;flex-direction:column}.x-canvas-empty-actions button{width:100%}.x-canvas-dialog-card{padding:23px 18px}.x-canvas-presets{grid-template-columns:1fr 1fr}.x-canvas-library-card{position:absolute;inset:44px 0 0;width:100%;height:auto;border-radius:16px 16px 0 0}.x-canvas-library-toolbar{grid-template-columns:1fr auto}.x-canvas-library-tabs{grid-column:1/-1}.x-canvas-library-tabs button{flex:1;justify-content:center}.x-canvas-library-toolbar>button span{display:none}.x-canvas-library-grid{grid-template-columns:1fr 1fr}.x-canvas-library-item{grid-template-rows:82px auto}}
@media(prefers-reduced-motion:reduce){.x-canvas *{scroll-behavior:auto!important;transition:none!important}}

/** [CODEX - 2026-09-02 03:23:59] Editing personas use a true sliding title-bar pill, while Template mode adds a quiet ordered-page strip with document-shaped previews and professional drag feedback. */
.x-canvas{--canvas-pages-width:184px}.x-canvas-editor-mode{position:relative;display:grid;width:216px;height:32px;flex:0 0 216px;grid-template-columns:repeat(3,1fr);align-items:center;padding:3px;border:1px solid #454149;border-radius:18px;background:#1d1b20;isolation:isolate}.x-canvas-editor-mode-indicator{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:14px;background:#3b3a3f;box-shadow:0 1px 5px rgba(0,0,0,.28);transition:transform .2s cubic-bezier(.2,.8,.2,1),background .18s}.x-canvas[data-editor-mode=pixel] .x-canvas-editor-mode-indicator{transform:translateX(100%);background:#31504c}.x-canvas[data-editor-mode=template] .x-canvas-editor-mode-indicator{transform:translateX(200%);background:#59492e}.x-canvas-editor-mode button{position:relative;z-index:1;height:26px;padding:0 7px;border:0;border-radius:13px;background:transparent;color:#9f9aa5;font:inherit;font-size:12px;font-weight:600;cursor:pointer}.x-canvas-editor-mode button.is-active{color:#fff}.x-canvas-editor-mode button:disabled{cursor:not-allowed;opacity:.4}.x-canvas[data-editor-mode=template] .x-canvas-body{grid-template-columns:var(--canvas-tools-width) var(--canvas-pages-width) minmax(0,1fr) var(--canvas-inspector-width)}.x-canvas-pages-panel{display:none;min-width:0;min-height:0;grid-template-rows:46px minmax(0,1fr) 43px;border-right:1px solid var(--canvas-line);background:#232127}.x-canvas[data-editor-mode=template] .x-canvas-pages-panel:not([hidden]){display:grid}.x-canvas-pages-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 9px;border-bottom:1px solid #38353d}.x-canvas-pages-head>span{display:grid;gap:1px}.x-canvas-pages-head strong{font-size:13px}.x-canvas-pages-head small{color:#89848f;font-size:12px}.x-canvas-pages-head button{display:grid;width:29px;height:29px;place-items:center;border:0;border-radius:6px;background:#302d34;color:#d5d1d8;cursor:pointer}.x-canvas-pages-head button:hover{background:#3a373f;color:#fff}.x-canvas-pages-head .x-canvas-icon{width:16px;height:16px}.x-canvas-pages-list{min-height:0;overflow:auto;padding:9px 8px}.x-canvas-page{display:grid;width:100%;grid-template-columns:25px minmax(0,1fr);align-items:start;gap:6px;margin:0 0 8px;padding:6px;border:1px solid transparent;border-radius:7px;background:transparent;color:#aaa5af;font:inherit;text-align:left;cursor:pointer}.x-canvas-page:hover{background:#2d2a31;color:#eeeaf1}.x-canvas-page.is-active{border-color:#58545e;background:#302d34;color:#fff}.x-canvas-page-index{display:grid;height:24px;place-items:center;color:#8f8995;font-size:12px}.x-canvas-page-preview{position:relative;display:grid;width:100%;aspect-ratio:var(--canvas-page-aspect,1.333);place-items:center;overflow:hidden;border:1px solid #4b4750;border-radius:3px;background:repeating-conic-gradient(#656565 0 25%,#858585 0 50%) 0/10px 10px;box-shadow:0 3px 8px rgba(0,0,0,.28)}.x-canvas-page-preview:after{content:"";position:absolute;inset:0;background:var(--canvas-page-background,#fff)}.x-canvas-page-preview img{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain}.x-canvas-page-name{grid-column:2;overflow:hidden;margin-top:4px;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.x-canvas-page[aria-selected=true] .x-canvas-page-index{color:var(--canvas-accent-soft)}.x-canvas-page.is-dragging{opacity:.45}.x-canvas-page.is-drop-before{box-shadow:0 -2px 0 var(--canvas-accent)}.x-canvas-page.is-drop-after{box-shadow:0 2px 0 var(--canvas-accent)}.x-canvas-pages-actions{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #38353d}.x-canvas-pages-actions button{display:flex;min-width:0;align-items:center;justify-content:center;gap:4px;border:0;background:transparent;color:#96919c;font:inherit;font-size:12px;cursor:pointer}.x-canvas-pages-actions button:hover{background:#302d34;color:#fff}.x-canvas-pages-actions .x-canvas-icon{width:15px;height:15px}.x-canvas-page-menu{z-index:130}.x-canvas [data-canvas-mode-hidden=true]{display:none!important}
/** [CODEX - 2026-09-02 03:23:59] Compact screens retain the three editing personas and turn the vertical page navigator into a bounded horizontal filmstrip above the mobile navigation. */
@media(max-width:900px){.x-canvas-editor-mode{width:174px;flex-basis:174px}.x-canvas-editor-mode button{padding:0 3px;font-size:12px}.x-canvas[data-editor-mode=template] .x-canvas-body{grid-template-columns:minmax(0,1fr)}.x-canvas[data-editor-mode=template] .x-canvas-pages-panel:not([hidden]){position:absolute;right:0;bottom:55px;left:0;z-index:19;height:126px;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr;border-top:1px solid var(--canvas-line);border-right:0}.x-canvas-pages-head{width:78px;height:100%;border-right:1px solid #38353d;border-bottom:0}.x-canvas-pages-head button{display:none}.x-canvas-pages-list{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:7px}.x-canvas-page{width:112px;min-width:112px;height:110px;grid-template-columns:20px minmax(0,1fr);margin:0;padding:4px}.x-canvas-page-name{margin-top:1px}.x-canvas-pages-actions{width:49px;grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);border-top:0;border-left:1px solid #38353d}.x-canvas-pages-actions button span{display:none}}@media(max-width:620px){.x-canvas-editor-mode{width:120px;flex-basis:120px}.x-canvas-editor-mode button{font-size:0}.x-canvas-editor-mode button:after{font-size:12px}.x-canvas-editor-mode button[data-canvas-mode=vector]:after{content:"V"}.x-canvas-editor-mode button[data-canvas-mode=pixel]:after{content:"P"}.x-canvas-editor-mode button[data-canvas-mode=template]:after{content:"T"}}
/** [CODEX - 2026-09-02 04:31:00] The persona selector is a taller, highly rounded rectangle rather than a capsule; each equal segment centers its icon-label pair, and compact screens retain the icons without synthetic initials. */
.x-canvas-editor-mode{height:36px;border-radius:11px}.x-canvas-editor-mode-indicator{border-radius:8px}.x-canvas-editor-mode button{display:flex;height:30px;align-items:center;justify-content:center;gap:5px;border-radius:8px;text-align:center}.x-canvas-editor-mode button .x-canvas-icon{width:15px;height:15px;flex:0 0 15px;color:currentColor}.x-canvas-editor-mode button>span{min-width:0;line-height:1;white-space:nowrap}@media(max-width:620px){.x-canvas-editor-mode button:after{content:none!important}.x-canvas-editor-mode button>span{display:none}.x-canvas-editor-mode button .x-canvas-icon{width:17px;height:17px;flex-basis:17px}}
/** [CODEX - 2026-08-22 02:11:28] Pastel sea-glass accents, editor-grade controls, contextual tool UI, rich layers, and floating color surfaces form one cohesive Canvas design system. */
:root{--canvas-accent:#77c9c0;--canvas-accent-strong:#54b4ad;--canvas-accent-soft:#b7e5df;--canvas-accent-2:#f0b7a4;--canvas-focus:#9adbd4}
.x-canvas{--canvas-icon-color:#9fd9d3}.x-canvas-topbar{--canvas-icon-color:#b5ded9}.x-canvas-ribbon{--canvas-icon-color:#a8d5d1}.x-canvas-tools{--canvas-icon-color:#91d4cc}.x-canvas-inspector{--canvas-icon-color:#efb8a8}.x-canvas-statusbar{--canvas-icon-color:#a9d8d2}
.x-canvas-primary{background:linear-gradient(135deg,#83d0c7,#62b9b3)!important;color:#102724!important;box-shadow:0 5px 18px rgba(73,169,161,.24)!important;font-weight:800}.x-canvas-primary:hover{background:linear-gradient(135deg,#96d9d1,#70c4bd)!important;box-shadow:0 7px 22px rgba(73,169,161,.32)!important}
.x-canvas-ribbon-tabs button.is-active,.x-canvas-panel-tabs button.is-active{border-bottom-color:var(--canvas-accent);color:#f7fffe}.x-canvas-ribbon-tabs button.is-active:after{background:linear-gradient(90deg,var(--canvas-accent),var(--canvas-accent-2))}
.x-canvas button:focus-visible,.x-canvas input:focus-visible,.x-canvas select:focus-visible,.x-canvas textarea:focus-visible{outline:2px solid var(--canvas-focus);outline-offset:1px}
.x-canvas input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),.x-canvas textarea,.x-canvas select{border:1px solid #4a4d51;border-radius:6px;background:linear-gradient(#211f24,#1b191e);color:#f3f5f5;box-shadow:inset 0 1px 1px rgba(0,0,0,.22);font-size:12px}.x-canvas select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9ccdc8 50%),linear-gradient(135deg,#9ccdc8 50%,transparent 50%),linear-gradient(#211f24,#1b191e);background-position:calc(100% - 12px) calc(50% - 2px),calc(100% - 8px) calc(50% - 2px),0 0;background-size:4px 4px,4px 4px,100% 100%;background-repeat:no-repeat}.x-canvas option{background:#211f25;color:#f2f5f4}.x-canvas input:disabled,.x-canvas select:disabled,.x-canvas textarea:disabled{opacity:.48;cursor:not-allowed}
.x-canvas input[type=range]{height:16px;margin:0;appearance:none;background:transparent;cursor:pointer}.x-canvas input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:#596064}.x-canvas input[type=range]::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;appearance:none;border:2px solid #d8f1ee;border-radius:50%;background:var(--canvas-accent-strong);box-shadow:0 1px 5px rgba(0,0,0,.45)}.x-canvas input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:#596064}.x-canvas input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--canvas-accent)}.x-canvas input[type=range]::-moz-range-thumb{width:11px;height:11px;border:2px solid #d8f1ee;border-radius:50%;background:var(--canvas-accent-strong)}
/** [CODEX - 2026-08-29 17:05:00] Chromium/WebKit receives the same value-aware active/inactive range track as Firefox, and transparent layer previews retain their full composition instead of being cropped. */
/** [CODEX - 2026-08-29 18:44:06] WebKit range progress uses one flat accent paint over one flat inactive track; background sizing preserves the exact active percentage without a blended color ramp. */
.x-canvas input[type=range]::-webkit-slider-runnable-track{background-color:#596064;background-image:linear-gradient(var(--canvas-accent),var(--canvas-accent));background-position:left center;background-repeat:no-repeat;background-size:var(--canvas-range-fill,0%) 100%}
.x-canvas-layer-preview img{object-fit:contain}
.x-canvas input[type=checkbox],.x-canvas input[type=radio]{width:16px!important;height:16px!important;flex:0 0 16px;margin:0;appearance:none;border:1px solid #5b6265;border-radius:4px;background:#1a191d;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}.x-canvas input[type=radio]{border-radius:50%}.x-canvas input[type=checkbox]:checked,.x-canvas input[type=radio]:checked{border-color:var(--canvas-accent);background:var(--canvas-accent-strong);box-shadow:inset 0 0 0 3px #202528}.x-canvas input[type=checkbox]:checked{background:var(--canvas-accent-strong) linear-gradient(135deg,transparent 43%,#163633 43% 55%,transparent 55%),var(--canvas-accent-strong) linear-gradient(45deg,transparent 48%,#163633 48% 60%,transparent 60%);box-shadow:none}
/** [CODEX - 2026-08-24 04:05:00] Automatic overflow may widen the untouched rail, while a user-sized rail fits as many polished 39px tool columns as its saved width permits. */
.x-canvas.has-tool-rail-columns:not(.has-custom-panel-layout){--canvas-tools-width:90px}.x-canvas.has-tool-rail-columns .x-canvas-tools{width:auto}.x-canvas.has-tool-rail-columns .x-canvas-tool-grid{display:grid;grid-template-columns:repeat(var(--canvas-tool-columns,2),39px);align-content:start;justify-content:center;align-items:start}.x-canvas-tool-colors{position:relative;width:100%;height:62px;min-height:62px;margin:0;border-top:1px solid #3b4141;background:linear-gradient(#23292a,#1e2224);box-shadow:0 -5px 14px rgba(0,0,0,.18)}.x-canvas-tools .x-canvas-tool-color{position:absolute;width:27px;height:27px;border:2px solid #d8dddc;border-radius:5px;background:var(--canvas-tool-color,#000);box-shadow:0 2px 6px rgba(0,0,0,.48)}.x-canvas-tools .x-canvas-tool-color.is-foreground{left:calc(50% - 20px);top:12px;z-index:2}.x-canvas-tools .x-canvas-tool-color.is-background{left:calc(50% - 4px);bottom:8px}.x-canvas-tools .x-canvas-tool-color-swap{position:absolute;left:calc(50% + 8px);top:4px;width:20px;height:20px;border-radius:50%;background:#302e34}.x-canvas-tools .x-canvas-tool-color-swap .x-canvas-icon{width:13px;height:13px} /* [CODEX - 2026-09-01 01:30:33] The persisted left-panel width now drives an explicit one-to-five-column tool grid while colors remain isolated below it. */
.x-canvas-panel-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}.x-canvas-panel-tabs button{padding:0 2px;font-size:12px}.x-canvas-tool-settings{align-content:start}.x-canvas-tool-heading{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:9px;padding:4px 2px 11px;border-bottom:1px solid #3d3b40}.x-canvas-tool-heading>.x-canvas-icon{width:30px;height:30px;color:var(--canvas-accent)}.x-canvas-tool-heading strong,.x-canvas-tool-heading span{display:block}.x-canvas-tool-heading strong{font-size:14px}.x-canvas-tool-heading span{color:#8f9998;font-size:12px}.x-canvas-setting-range{display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:center;gap:7px}.x-canvas-setting-range output{color:#d4dddc;font-size:12px;text-align:right}.x-canvas-tool-settings>.x-canvas-check{display:flex;grid-template-columns:none;align-items:center;gap:8px;color:#b5bcbb;font-size:12px;text-transform:none}
/** [CODEX - 2026-08-29 17:58:27] Active layer and group rows use their full perimeter and background only; unilateral accent rails are intentionally prohibited. */
.x-canvas-layer-list{padding:7px}.x-canvas-layer{grid-template-columns:23px 25px 40px minmax(0,1fr) 25px;gap:4px;min-height:51px;margin:1px 0;padding:4px 5px;border-color:transparent;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.012),transparent)}.x-canvas-layer.is-group-child{margin-left:13px;width:calc(100% - 13px);border-radius:8px}.x-canvas-layer:hover{background:#302f34}.x-canvas-layer.is-active{border-color:#608b86;background:linear-gradient(90deg,#334b48,#353942)}.x-canvas-layer-group{grid-template-columns:22px 22px 18px minmax(0,1fr) 22px 22px 22px;min-height:35px;border-color:#383b3d;background:linear-gradient(90deg,#232729,#202124)}.x-canvas-layer-group.is-active{border-color:#668e89;background:#314643}.x-canvas-stack-handle{cursor:grab!important;touch-action:none}.x-canvas-stack-handle:active,.x-canvas-stack-handle.is-dragging{cursor:grabbing!important;color:var(--canvas-accent)}.x-canvas-layer.is-drop-above:before,.x-canvas-layer-group.is-drop-above:before,.x-canvas-layer.is-drop-below:after,.x-canvas-layer-group.is-drop-below:after{content:"";position:absolute;right:3px;left:3px;z-index:3;height:2px;border-radius:2px;background:var(--canvas-accent);box-shadow:0 0 7px rgba(119,201,192,.55)}.x-canvas-layer,.x-canvas-layer-group{position:relative}.x-canvas-layer.is-drop-above:before,.x-canvas-layer-group.is-drop-above:before{top:-2px}.x-canvas-layer.is-drop-below:after,.x-canvas-layer-group.is-drop-below:after{bottom:-2px}.x-canvas-layer-preview{border-color:#54595a;background:repeating-conic-gradient(#4b4f50 0 25%,#686d6e 0 50%) 0/10px 10px;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.x-canvas-color-editor[hidden]{display:none}.x-canvas-color-editor{position:fixed;left:62px;top:180px;z-index:160;width:292px;overflow:hidden;border:1px solid #57605f;border-radius:11px;background:#28272c;box-shadow:0 20px 65px rgba(0,0,0,.58);color:#eef3f2}.x-canvas-color-editor>header{display:flex;height:39px;align-items:center;justify-content:space-between;padding:0 7px 0 12px;border-bottom:1px solid #424648;background:linear-gradient(#323338,#28292d);cursor:move;touch-action:none}.x-canvas-color-editor>header strong{font-size:12px}.x-canvas-color-editor>header button{display:grid;width:27px;height:27px;place-items:center;border:0;border-radius:6px;background:transparent}.x-canvas-color-editor-body{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}.x-canvas-color-editor-body>label,.x-canvas-color-editor fieldset label{display:grid;gap:4px;color:#aab2b1;font-size:11px;text-transform:uppercase}.x-canvas-color-editor input{width:100%;height:33px;padding:0 7px}.x-canvas-color-editor .x-canvas-color-native{grid-row:span 1}.x-canvas-color-editor .x-canvas-color-native input{height:34px;padding:2px}.x-canvas-color-editor fieldset{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0;padding:9px;border:1px solid #434849;border-radius:8px}.x-canvas-color-editor legend{padding:0 5px;color:#99a2a1;font-size:11px;text-transform:uppercase}.x-canvas-color-editor-preview{grid-column:1/-1;display:grid;grid-template-columns:43px 1fr;align-items:center;gap:9px}.x-canvas-color-editor-preview span{width:43px;height:31px;border:1px solid #686e6e;border-radius:6px}.x-canvas-color-editor-preview small{color:#929b9a;font-size:12px}
/** [CODEX - 2026-08-26 21:55:00] Body-mounted custom tooltips explicitly retain Canvas's bundled Outfit typography in browser and desktop hosts. */
.x-canvas-tooltip{position:fixed;z-index:1000;max-width:240px;padding:6px 9px;border:1px solid #59605f;border-radius:6px;background:#26282a;color:#f3f7f6;box-shadow:0 8px 25px rgba(0,0,0,.5);font:12px/1.35 Outfit,"Segoe UI",Arial,sans-serif;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}.x-canvas-tooltip.is-visible{opacity:1;transform:none}.x-canvas-mouse-menu{border-color:#505756!important;background:#27282c!important;box-shadow:0 14px 42px rgba(0,0,0,.5)!important}.x-canvas-mouse-menu button:hover{background:#38504d!important;color:#fff!important}
.x-canvas-filter-section{margin:9px -3px 1px;padding:8px 4px 4px;border-top:1px solid #3d4242;color:var(--canvas-accent-soft);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.x-canvas-filter-section:first-child{margin-top:0;border-top:0}.x-canvas-filter-row{padding:2px 0}.x-canvas-filter-row label{color:#aeb6b5}.x-canvas-filter-row output{color:#d4e0de}
/** [CODEX - 2026-08-30 20:00:57] Compact numeric parameter rows reproduce the reference editor's label-fill, direct value, minus, plus, and reset composition with Canvas teal accents and accessible 13px labels. */
.x-canvas-parameter-row{display:grid;grid-template-columns:minmax(70px,1fr) 66px repeat(3,24px);align-items:stretch;gap:2px;width:100%;min-width:0;height:27px;margin:3px 0;color:#e7eceb}.x-canvas-parameter-track{position:relative;display:flex;min-width:0;align-items:center;overflow:hidden;border:1px solid #494f50;border-radius:4px 0 0 4px;background:#303436;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}.x-canvas-parameter-fill{position:absolute;inset:0 auto 0 0;width:var(--canvas-range-fill,0%);background:color-mix(in srgb,var(--canvas-accent) 42%,#3b4142);pointer-events:none}.x-canvas-parameter-label{position:relative;z-index:1;min-width:0;overflow:hidden;padding:0 6px;color:#f0f4f3;font-size:13px;font-weight:450;line-height:25px;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.x-canvas-parameter-track>input[type=range]{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.x-canvas-parameter-track:focus-within{border-color:var(--canvas-accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--canvas-accent) 48%,transparent)}.x-canvas-parameter-value{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-width:0;border:1px solid #494f50;background:#202426;box-shadow:inset 0 1px 2px rgba(0,0,0,.36)}.x-canvas-parameter-value input[type=number]{width:100%;min-width:0;height:25px;padding:0 2px 0 4px;border:0!important;background:transparent!important;color:#f2f5f4;font-size:13px;text-align:right;appearance:textfield;box-shadow:none!important}.x-canvas-parameter-value input[type=number]::-webkit-inner-spin-button,.x-canvas-parameter-value input[type=number]::-webkit-outer-spin-button{margin:0;appearance:none}.x-canvas-parameter-value>span{padding-right:4px;color:#9da6a4;font-size:12px;white-space:nowrap}.x-canvas-parameter-step,.x-canvas-parameter-reset{display:grid!important;width:24px!important;height:27px!important;min-width:24px!important;place-items:center;padding:0!important;border:1px solid #4b5152!important;border-radius:2px!important;background:#34393b!important;color:#dce3e1!important;box-shadow:inset 0 1px rgba(255,255,255,.035);font-size:18px!important;font-weight:500;line-height:1!important;cursor:pointer}.x-canvas-parameter-step:hover,.x-canvas-parameter-reset:hover{border-color:#687372!important;background:#41494a!important;color:#fff!important}.x-canvas-parameter-step:active,.x-canvas-parameter-reset:active{background:#2d5551!important}.x-canvas-parameter-reset{border-radius:0 4px 4px 0!important}.x-canvas-parameter-reset .x-canvas-icon{width:17px;height:17px;color:var(--canvas-accent-soft)}.x-canvas-parameter-output{display:none}.x-canvas-filter-row.x-canvas-parameter-row{grid-template-columns:minmax(70px,1fr) 66px repeat(3,24px);align-items:stretch;padding:0}.x-canvas-tool-settings>.x-canvas-parameter-row,.x-canvas-properties>.x-canvas-parameter-row{margin:2px 0}@media(max-width:520px){.x-canvas-parameter-row{grid-template-columns:minmax(80px,1fr) 70px repeat(3,30px);height:33px}.x-canvas-parameter-label{line-height:31px}.x-canvas-parameter-value input[type=number]{height:31px}.x-canvas-parameter-step,.x-canvas-parameter-reset{width:30px!important;height:33px!important;min-width:30px!important}}
/** [CODEX - 2026-08-23 15:58:00] The Affinity-inspired Color Studio uses one polished responsive surface in the inspector and draggable picker, with readable model fields and palette controls. */
.x-canvas-panel-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(56px,1fr);grid-template-columns:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.x-canvas-panel-tabs button{white-space:nowrap}.x-canvas-color-studio{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:11px;color:#e8efed}.x-canvas-color-studio-wells{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:7px}.x-canvas-color-studio-wells button{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:7px;min-height:36px;padding:4px 7px;border:1px solid #484f4e;border-radius:7px;background:#242729;color:#c7cfcd;font-size:12px;text-align:left;cursor:pointer}.x-canvas-color-studio-wells button.is-active{border-color:#79c9bd;background:#334a47;color:#fff}.x-canvas-color-studio-wells span{display:block;width:28px;height:25px;border:1px solid #737a78;border-radius:5px;background:var(--canvas-studio-color,#000);box-shadow:0 2px 5px rgba(0,0,0,.36)}.x-canvas-color-studio-wells b{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.x-canvas-color-studio canvas[data-color-wheel]{grid-column:1/-1;display:block;width:176px;height:176px;justify-self:center;border-radius:50%;cursor:crosshair;touch-action:none}.x-canvas-color-model-label,.x-canvas-color-hex,.x-canvas-color-section>label{display:grid;gap:4px;color:#9ea8a6;font-size:11px;text-transform:uppercase}.x-canvas-color-model-label select,.x-canvas-color-hex input,.x-canvas-color-section select{height:31px;padding:0 25px 0 7px}.x-canvas-color-model-controls{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.x-canvas-color-model-controls label{display:grid;gap:4px;color:#a0aaa8;font-size:11px;text-transform:uppercase}.x-canvas-color-model-controls input{width:100%;min-width:0;height:31px;padding:0 6px;text-transform:none}.x-canvas-color-opacity{display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:end;gap:5px;color:#9ea8a6;font-size:11px;text-transform:uppercase}.x-canvas-color-opacity input{grid-column:1}.x-canvas-color-opacity output{grid-column:2;grid-row:1/3;align-self:end;padding-bottom:3px;color:#d9e1df;font-size:12px;text-align:right}.x-canvas-color-section{grid-column:1/-1;display:grid;gap:7px;padding-top:8px;border-top:1px solid #3e4544}.x-canvas-color-section>strong{color:#9ea8a6;font-size:11px;letter-spacing:.04em;text-transform:uppercase}.x-canvas-color-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;min-height:24px}.x-canvas-color-swatches button{position:relative;width:100%;aspect-ratio:1;padding:0;border:1px solid #697170;border-radius:5px;background:var(--canvas-swatch,#000);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);cursor:pointer}.x-canvas-color-swatches button:hover,.x-canvas-color-swatches button:focus-visible{border-color:#d8f2ee;transform:translateY(-1px)}.x-canvas-color-swatches button.is-current:after{content:"";position:absolute;inset:3px;border:1px solid #fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.55)}.x-canvas-color-section .x-canvas-inline-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.x-canvas-color-section .x-canvas-inline-actions button{min-height:30px;border:1px solid #4b5352;border-radius:6px;background:#292d2f;color:#d8dfdd;font-size:12px;cursor:pointer}.x-canvas-color-section .x-canvas-inline-actions button:hover{border-color:#79c9bd;background:#344744}.x-canvas-color-editor{width:318px;max-height:calc(100vh - 16px);overflow:hidden}.x-canvas-color-editor>.x-canvas-color-studio{max-height:calc(100vh - 55px);overflow-x:hidden;overflow-y:auto}.x-canvas-color-editor>header{position:relative;z-index:2}.x-canvas-color-studio.is-wheel-dragging canvas[data-color-wheel]{cursor:grabbing}.x-canvas-color-empty{grid-column:1/-1;color:#889290;font-size:12px}
/** [CODEX - 2026-08-23 16:02:00] Foreground/background wells preview their true alpha over a checkerboard in both the fixed rail and Color Studio. */
.x-canvas-color-studio-wells span{background:linear-gradient(var(--canvas-studio-color,#000),var(--canvas-studio-color,#000)),repeating-conic-gradient(#c7cccb 0 25%,#737978 0 50%) 0/8px 8px}.x-canvas-tools .x-canvas-tool-color{background:linear-gradient(var(--canvas-tool-color,#000),var(--canvas-tool-color,#000)),repeating-conic-gradient(#c7cccb 0 25%,#737978 0 50%) 0/8px 8px}
@media(max-width:900px){.x-canvas.has-tool-rail-columns .x-canvas-body{grid-template-columns:minmax(0,1fr)}.x-canvas-color-editor{top:auto!important;right:8px!important;bottom:64px!important;left:8px!important;width:auto}}

/** [CODEX - 2026-08-24 04:35:00] Editor-owned overlay scrollbars replace OS chrome without changing native wheel, trackpad, touch, keyboard, or scripted scrolling semantics. */
.x-canvas-scroll-host{scrollbar-width:none!important;scrollbar-gutter:auto!important;-ms-overflow-style:none!important}
.x-canvas-scroll-host::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
.x-canvas-dialog-card.x-canvas-scroll-host{max-height:calc(100dvh - 40px);overflow:auto}
.x-canvas-ui-scrollbar{position:fixed;z-index:76;overflow:hidden;border:1px solid rgba(210,214,216,.2);border-radius:999px;background:rgba(14,18,19,.56);box-shadow:0 1px 4px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.025);opacity:.66;pointer-events:auto;touch-action:none;transition:opacity .14s ease,border-color .14s ease,background .14s ease;backdrop-filter:blur(5px)} /* [CODEX - 2026-08-30 03:22:26] */
.x-canvas-ui-scrollbar[hidden]{display:none!important}
.x-canvas-ui-scrollbar:hover,.x-canvas-ui-scrollbar:focus-visible,.x-canvas-ui-scrollbar.is-dragging{border-color:rgba(224,228,230,.42);background:rgba(22,24,26,.9);opacity:1;outline:none} /* [CODEX - 2026-08-30 03:22:26] */
.x-canvas-ui-scrollbar:focus-visible{box-shadow:0 0 0 2px rgba(220,224,226,.24),0 2px 8px rgba(0,0,0,.44)} /* [CODEX - 2026-08-30 03:22:26] */
.x-canvas-ui-scrollbar-thumb{position:absolute;display:block;border-radius:999px;background:#aeb2b5;box-shadow:0 1px 3px rgba(0,0,0,.48);will-change:transform} /* [CODEX - 2026-08-30 03:22:26] */
.x-canvas-ui-scrollbar.is-x .x-canvas-ui-scrollbar-thumb{top:1px;left:0}
.x-canvas-ui-scrollbar.is-y .x-canvas-ui-scrollbar-thumb{top:0;left:1px}
.x-canvas-ui-scrollbar:hover .x-canvas-ui-scrollbar-thumb,.x-canvas-ui-scrollbar.is-dragging .x-canvas-ui-scrollbar-thumb{background:#d8dadd} /* [CODEX - 2026-08-30 03:22:26] */
@media(prefers-reduced-motion:reduce){.x-canvas-ui-scrollbar{transition:none}}

/** [CODEX - 2026-08-24 23:18:21] The right inspector keeps the existing studio styling while separating Layers/History above from editing panels below at a persistent 30/70 default. */
.x-canvas-inspector{--canvas-inspector-upper:30%;display:grid;grid-template-rows:minmax(96px,var(--canvas-inspector-upper)) 8px minmax(144px,1fr);overflow:hidden}.x-canvas-inspector-region{display:grid;min-width:0;min-height:0;grid-template-rows:35px minmax(0,1fr);overflow:hidden}.x-canvas-inspector-region .x-canvas-panel-tabs{grid-template-columns:repeat(auto-fit,minmax(48px,1fr))}.x-canvas-inspector-region .x-canvas-panel{height:100%;min-height:0}.x-canvas-inspector-split{position:relative;z-index:77;display:block;width:100%;height:8px;padding:0;border:0;border-top:1px solid #34313a;border-bottom:1px solid #34313a;background:#211f25;cursor:row-resize;touch-action:none}.x-canvas-inspector-split:after{content:"";position:absolute;top:2px;right:34%;bottom:2px;left:34%;border-radius:4px;background:#4b4652;transition:background .14s,box-shadow .14s}.x-canvas-inspector-split:hover:after,.x-canvas-inspector-split:focus-visible:after,.x-canvas-inspector-split.is-active:after{background:var(--canvas-accent);box-shadow:0 0 8px rgba(119,201,192,.52)}.x-canvas.is-resizing-inspector-split{cursor:row-resize;user-select:none}.x-canvas.is-resizing-inspector-split iframe,.x-canvas.is-resizing-inspector-split canvas{pointer-events:none}
/** [CODEX - 2026-08-24 23:18:21] Touch layouts retain both inspector regions and the same bounded horizontal separator inside the existing mobile sheet. */
@media(max-width:900px){.x-canvas-inspector{grid-template-rows:minmax(96px,var(--canvas-inspector-upper)) 8px minmax(144px,1fr)}.x-canvas-inspector-split{display:block}}

/** [CODEX - 2026-08-24 23:51:46] The inspector restores its 2px studio edge and exposes a full-width 10px pointer target with a restrained 2px visual divider. */
.x-canvas-inspector{border-left:2px solid var(--canvas-line);grid-template-rows:minmax(96px,var(--canvas-inspector-upper)) 10px minmax(144px,1fr)}
.x-canvas-inspector-split{height:10px;border:0;border-top:1px solid #34313a;border-bottom:1px solid #34313a;background:#211f25}
.x-canvas-inspector-split:after{top:3px;right:8px;bottom:auto;left:8px;height:2px;background:#4b4652}
/** [CODEX - 2026-08-24 23:51:46] The Rust brush picker uses tactile preset cards and readable 12px labels consistent with the Canvas pastel studio controls. */
.x-canvas-brush-picker{display:grid;gap:7px;margin:2px 0 4px}.x-canvas-brush-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.x-canvas-brush-preset{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:7px;min-height:38px;padding:5px 7px;border:1px solid #3d3943;border-radius:8px;background:linear-gradient(180deg,#2c2931,#242229);color:#d9d5dc;font:600 12px/1.15 Outfit,system-ui,sans-serif;text-align:left;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.025)}.x-canvas-brush-preset:hover{border-color:#5f7775;background:linear-gradient(180deg,#343239,#29272e)}.x-canvas-brush-preset.is-active,.x-canvas-brush-preset[aria-pressed=true]{border-color:#7bc5bc;background:linear-gradient(180deg,rgba(99,154,148,.26),rgba(45,63,63,.28));box-shadow:0 0 0 1px rgba(123,197,188,.13),inset 0 1px rgba(255,255,255,.06)}.x-canvas-brush-preset-tip{display:block;justify-self:center;width:24px;height:24px;border-radius:50%;background:#e8e5e9;box-shadow:0 1px 4px rgba(0,0,0,.65)}.x-canvas-brush-preset-tip.is-soft{background:radial-gradient(circle,#f4f2f5 0 30%,rgba(238,235,241,.62) 55%,rgba(238,235,241,0) 76%);box-shadow:none}.x-canvas-brush-preset-tip.is-hard{border:1px solid #faf8fb}.x-canvas-brush-preset-tip.is-pixel{width:18px;height:18px;border-radius:2px;background:repeating-linear-gradient(45deg,#eee 0 4px,#bdb8c2 4px 8px)}.x-canvas-brush-preset-tip.is-ink{width:15px;height:26px;border-radius:70% 28% 70% 28%;transform:rotate(25deg);background:linear-gradient(145deg,#faf8fb,#9f99a7)}
/** [CODEX - 2026-08-24 23:51:46] The desktop aperture previews document-pixel size and hardness at the pointer without intercepting canvas gestures. */
.x-canvas-brush-cursor{position:fixed;z-index:96;display:none;pointer-events:none;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.96);border-radius:50%;box-shadow:0 0 0 1px rgba(8,8,10,.9),0 0 5px rgba(0,0,0,.45);mix-blend-mode:difference}.x-canvas-brush-cursor.is-visible{display:block}.x-canvas-brush-cursor-hardness{position:absolute;top:50%;left:50%;width:var(--canvas-brush-hardness);height:var(--canvas-brush-hardness);transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.72);border-radius:50%;box-shadow:0 0 0 1px rgba(8,8,10,.55)}.x-canvas-brush-cursor[data-tool=pencil] .x-canvas-brush-cursor-hardness{border-radius:1px}
/** [CODEX - 2026-08-24 23:51:46] Mobile and coarse-pointer layouts never display a hover-only brush aperture. */
@media(max-width:900px),(hover:none),(pointer:coarse){.x-canvas-brush-cursor{display:none!important}.x-canvas-inspector{grid-template-rows:minmax(96px,var(--canvas-inspector-upper)) 10px minmax(144px,1fr)}}
/** [CODEX - 2026-08-25 00:29:07] The right resize affordance keeps a crisp two-CSS-pixel accent at rest, hover, focus, and active states without fractional transforms. */
.x-canvas-panel-resizer[data-panel-resizer=right]:after{left:3px!important;right:auto!important;width:2px!important;min-width:2px;max-width:2px;border:0;box-sizing:border-box;transform:none!important}
.x-canvas-panel-resizer[data-panel-resizer=right]:hover:after,.x-canvas-panel-resizer[data-panel-resizer=right]:focus-visible:after,.x-canvas-panel-resizer[data-panel-resizer=right].is-active:after{width:2px!important;min-width:2px;max-width:2px;background:var(--canvas-accent)}
/** [CODEX - 2026-08-25 01:00:12] Keep the complete right resize target and its two-pixel visual inside the overflow-clipped inspector instead of losing their outer half. */
@media(min-width:901px){.x-canvas-inspector{overflow:visible}}
.x-canvas-panel-resizer[data-panel-resizer=right]{left:-2px!important;width:8px!important}
.x-canvas-panel-resizer[data-panel-resizer=right]:after{left:0!important;width:2px!important}
/** [CODEX - 2026-08-25 01:00:12] Complementary fr tracks implement the persisted upper/lower ratio; block-axis percentages otherwise resolve as auto in this stretched grid. */
.x-canvas-inspector{--canvas-inspector-upper:30fr;--canvas-inspector-lower:70fr;grid-template-rows:minmax(96px,var(--canvas-inspector-upper)) 10px minmax(144px,var(--canvas-inspector-lower))}
/** [CODEX - 2026-08-27 01:18:00] A polished responsive Shape palette groups every primitive behind one rail button and keeps all labels above the minimum UI size. */
.x-canvas-shape-card{width:min(780px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto}.x-canvas-shape-card>p{margin:-10px 0 18px;color:#aaaeb0;font-size:12px}.x-canvas-shape-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.x-canvas-shape-grid button{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:8px;min-height:64px;padding:5px 9px;border:1px solid #44484a;border-radius:9px;background:linear-gradient(180deg,#303236,#282a2d);color:#e6ecea;font:600 12px/1.2 Outfit,"Segoe UI",sans-serif;text-align:left;cursor:pointer}.x-canvas-shape-grid button:hover,.x-canvas-shape-grid button:focus-visible{border-color:#79c9bd;background:linear-gradient(180deg,#39423f,#2d3533);outline:none;box-shadow:0 0 0 2px rgba(121,201,189,.16)}.x-canvas-shape-grid canvas{display:block;width:76px;height:54px;border-radius:6px;background:rgba(12,15,15,.25)}.x-canvas-property-wide{grid-column:1/-1}.x-canvas-property-wide textarea{min-height:64px;resize:vertical}
@media(max-width:760px){.x-canvas-shape-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.x-canvas-shape-grid button{grid-template-columns:58px minmax(0,1fr)}.x-canvas-shape-grid canvas{width:58px}}
@media(max-width:420px){.x-canvas-shape-card{width:100%;max-height:calc(100dvh - 24px);padding:22px 14px}.x-canvas-shape-grid{gap:6px}.x-canvas-shape-grid button{grid-template-columns:1fr;justify-items:center;min-height:88px;padding:5px;text-align:center}}

/** [CODEX - 2026-08-29 06:34:00] Canvas accent refinement preserves independent semantic variables while translating primary green states toward the #43AEA3 family and former purple/salmon states toward the #E3AB50 family at role-appropriate lightness and saturation. */
:root{--canvas-accent:#50b8ae;--canvas-accent-strong:#3fa79d;--canvas-accent-soft:#afe1dc;--canvas-accent-2:#e6b65f;--canvas-focus:#7fd2ca}
.x-canvas{--canvas-icon-color:#e5c37b}.x-canvas-topbar{--canvas-icon-color:#ecd08d}.x-canvas-ribbon{--canvas-icon-color:#dfba6d}.x-canvas-tools{--canvas-icon-color:#76cbc3}.x-canvas-inspector{--canvas-icon-color:#e9c47c}.x-canvas-statusbar{--canvas-icon-color:#dfbd70}
.x-canvas-brand em{background:#4a402b;color:#f2dba8}.x-canvas-primary{background:linear-gradient(135deg,#65c8be,#46aea5)!important;color:#102724!important;box-shadow:0 5px 18px rgba(63,167,157,.27)!important}.x-canvas-primary:hover{background:linear-gradient(135deg,#78d3ca,#54bdb3)!important;box-shadow:0 7px 22px rgba(63,167,157,.35)!important}
.x-canvas-tools button.is-active{border-color:#80683c;background:#4a402c;color:#fff}.x-canvas-stage:after{border-color:#e8c477;background:rgba(43,35,21,.84);color:#f8e9c7}.x-canvas-mobile-sheet [data-mobile-sheet-panel]>button .x-canvas-icon,.x-canvas-kicker{color:#e8bd68}
.x-canvas-curve polyline{stroke:#55b9af}.x-canvas-curve circle{stroke:#418f87}.x-canvas-curve circle:focus{stroke:#e9bd69}.x-canvas-group-mask{background:#594a2e;color:#f4dfb5}.x-canvas-assistant-message.is-user{background:#70552f;color:#fff}
.x-canvas-tool-group.is-active>.x-canvas-tool-group-current,.x-canvas-tool-group-menu>button.is-active{border-color:#52938c;background:#2e504c}.x-canvas-tool-group.is-open>.x-canvas-tool-group-toggle{background:#59bdb3!important;color:#12332f!important}
.x-canvas-layer.is-active{border-color:#52918a;background:linear-gradient(90deg,#2d4d49,#353942)}.x-canvas-layer-group.is-active{border-color:#5a968f;background:#2d4b47}.x-canvas-layer.is-drop-above:before,.x-canvas-layer-group.is-drop-above:before,.x-canvas-layer.is-drop-below:after,.x-canvas-layer-group.is-drop-below:after{box-shadow:0 0 7px rgba(80,184,174,.56)}
.x-canvas-color-studio-wells button.is-active{border-color:#59bdb3;background:#2e4d49}.x-canvas-color-section .x-canvas-inline-actions button:hover{border-color:#59bdb3;background:#304a47}.x-canvas-mouse-menu button:hover{background:#30504c!important}
.x-canvas-library-filters button.is-active{border-color:rgba(80,184,174,.46);background:rgba(63,167,157,.18);color:#d9f5f1}.x-canvas-library-state[data-state=synced],.x-canvas-library-state[data-state=local]{border-color:rgba(80,184,174,.4);color:#aee2dc}.x-canvas-library-state[data-state=local-changes],.x-canvas-library-state[data-state=cloud-update],.x-canvas-library-state[data-state=syncing]{border-color:rgba(230,182,95,.48);color:#f0cf91}
.x-canvas-panel-resizer:hover:after,.x-canvas-panel-resizer:focus-visible:after,.x-canvas-panel-resizer.is-active:after,.x-canvas-inspector-split:hover:after,.x-canvas-inspector-split:focus-visible:after,.x-canvas-inspector-split.is-active:after{box-shadow:0 0 8px rgba(80,184,174,.54)}
.x-canvas-ui-scrollbar:focus-visible{box-shadow:0 0 0 2px rgba(220,224,226,.24),0 2px 8px rgba(0,0,0,.44)}.x-canvas-ui-scrollbar-thumb{background:#aeb2b5}.x-canvas-ui-scrollbar:hover .x-canvas-ui-scrollbar-thumb,.x-canvas-ui-scrollbar.is-dragging .x-canvas-ui-scrollbar-thumb{background:#d8dadd} /* [CODEX - 2026-08-30 03:22:26] */
.x-canvas-brush-preset.is-active,.x-canvas-brush-preset[aria-pressed=true]{border-color:#60c0b7;background:linear-gradient(180deg,rgba(80,184,174,.27),rgba(43,72,69,.3));box-shadow:0 0 0 1px rgba(96,192,183,.15),inset 0 1px rgba(255,255,255,.06)}.x-canvas-shape-grid button:hover,.x-canvas-shape-grid button:focus-visible{border-color:#59bdb3;box-shadow:0 0 0 2px rgba(80,184,174,.18)}

/** [CODEX - 2026-08-29 07:51:16] Checked square controls use a centered high-contrast vector tick instead of intersecting gradients, so the mark remains crisp and visible in browser, PWA, and native shells. */
.x-canvas input[type=checkbox]:checked{background-color:var(--canvas-accent-strong);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2 6.5 11.7 13 4.7' fill='none' stroke='%23102f2c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:12px 12px;box-shadow:none}

/** [CODEX - 2026-08-30 03:22:26] Canvas scrollbars preserve a nine-pixel accessible hit target while presenting a neutral two-pixel idle thumb, expanding only under direct hover/focus/drag, and fading after three seconds of inactivity. */
.x-canvas-ui-scrollbar{border-color:transparent;background:transparent;box-shadow:none;opacity:0;transition:opacity .32s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.x-canvas-ui-scrollbar.is-awake{opacity:.68}.x-canvas-ui-scrollbar:hover,.x-canvas-ui-scrollbar:focus-visible,.x-canvas-ui-scrollbar.is-dragging{border-color:rgba(224,228,230,.42);background:rgba(22,24,26,.9);box-shadow:0 1px 4px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.025);opacity:1} /* [CODEX - 2026-08-30 03:22:26] */
.x-canvas-ui-scrollbar-thumb{transition:top .16s ease,left .16s ease,width .16s ease,height .16s ease,background .16s ease}.x-canvas-ui-scrollbar.is-x .x-canvas-ui-scrollbar-thumb{top:3px;height:2px!important}.x-canvas-ui-scrollbar.is-y .x-canvas-ui-scrollbar-thumb{left:3px;width:2px!important}.x-canvas-ui-scrollbar.is-x:hover .x-canvas-ui-scrollbar-thumb,.x-canvas-ui-scrollbar.is-x:focus-visible .x-canvas-ui-scrollbar-thumb,.x-canvas-ui-scrollbar.is-x.is-dragging .x-canvas-ui-scrollbar-thumb{top:1px;height:5px!important}.x-canvas-ui-scrollbar.is-y:hover .x-canvas-ui-scrollbar-thumb,.x-canvas-ui-scrollbar.is-y:focus-visible .x-canvas-ui-scrollbar-thumb,.x-canvas-ui-scrollbar.is-y.is-dragging .x-canvas-ui-scrollbar-thumb{left:1px;width:5px!important}
/** [CODEX - 2026-08-30 03:22:26] Large background-matched fades and borderless intrinsic-direction Phosphor caret controls expose every remaining horizontal or vertical scroll direction without accent-colored chrome or CSS rotation. */
.x-canvas-ribbon-content>section{transition:none}.x-canvas-ribbon-content>section.has-scroll-left,.x-canvas-ribbon-content>section.has-scroll-right{box-shadow:none}
.x-canvas-overflow-affordance{position:fixed;display:flex;align-items:center;pointer-events:none;opacity:1;transition:opacity .18s ease}.x-canvas-overflow-affordance[hidden]{display:none}.x-canvas-overflow-affordance.is-x.is-start{justify-content:flex-start;padding-left:5px;background:linear-gradient(90deg,var(--canvas-overflow-background,#242128) 18%,transparent 100%)}.x-canvas-overflow-affordance.is-x.is-end{justify-content:flex-end;padding-right:5px;background:linear-gradient(270deg,var(--canvas-overflow-background,#242128) 18%,transparent 100%)}.x-canvas-overflow-affordance.is-y.is-start{justify-content:center;align-items:flex-start;padding-top:5px;background:linear-gradient(180deg,var(--canvas-overflow-background,#242128) 18%,transparent 100%)}.x-canvas-overflow-affordance.is-y.is-end{justify-content:center;align-items:flex-end;padding-bottom:5px;background:linear-gradient(0deg,var(--canvas-overflow-background,#242128) 18%,transparent 100%)}.x-canvas-overflow-affordance button{display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;padding:0;border:0;border-radius:8px;background:var(--canvas-overflow-background,#242128);box-shadow:0 3px 12px rgba(0,0,0,.3);color:#dbe2e1;cursor:pointer;pointer-events:auto}.x-canvas-overflow-affordance button:hover,.x-canvas-overflow-affordance button:focus-visible{border:0;background:var(--canvas-overflow-background,#242128);box-shadow:0 4px 16px rgba(0,0,0,.42);color:#fff;outline:none}.x-canvas-overflow-affordance .x-canvas-icon{width:16px;height:16px}.x-canvas-overflow-affordance button:hover .x-canvas-icon,.x-canvas-overflow-affordance button:focus-visible .x-canvas-icon,.x-canvas-overflow-affordance button:active .x-canvas-icon{transform:none} /* [CODEX - 2026-08-30 03:22:26] */
@media(prefers-reduced-motion:reduce){.x-canvas-ui-scrollbar,.x-canvas-ui-scrollbar-thumb,.x-canvas-overflow-affordance{transition:none}}

/** [CODEX - 2026-08-29 22:02:16] Canvas-owned dropdowns replace detached OS option surfaces with one integrated, viewport-aware editor popup while retaining a real semantic select for forms and accessibility. */
.x-canvas-dropdown{position:relative;display:block;width:100%;min-width:0;height:var(--canvas-dropdown-height,32px);font:inherit}.x-canvas-dropdown-native{position:absolute!important;top:0!important;left:0!important;width:1px!important;min-width:1px!important;height:1px!important;margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important}.x-canvas-dropdown-trigger{display:flex;width:100%;min-width:0;height:var(--canvas-dropdown-height,32px);align-items:center;justify-content:space-between;gap:8px;padding:0 9px;border:1px solid #4a4d51;border-radius:6px;background:#211f25;color:#f3f5f5;box-shadow:inset 0 1px rgba(255,255,255,.025),0 1px 2px rgba(0,0,0,.2);font:600 13px/1 Outfit,"Segoe UI",Arial,sans-serif;text-align:left;cursor:pointer;transition:border-color .14s ease,background .14s ease,box-shadow .14s ease}.x-canvas-dropdown-trigger:hover{border-color:#67706f;background:#29272d}.x-canvas-dropdown-trigger:focus-visible,.x-canvas-dropdown.is-open .x-canvas-dropdown-trigger{border-color:var(--canvas-focus);outline:none;background:#2b2e30;box-shadow:0 0 0 2px rgba(80,184,174,.18),inset 0 1px rgba(255,255,255,.035)}.x-canvas-dropdown-trigger:disabled{opacity:.48;cursor:not-allowed}.x-canvas-dropdown-value{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-canvas-dropdown-chevron{position:relative;width:10px;height:10px;flex:0 0 10px;transition:transform .16s ease}.x-canvas-dropdown-chevron:before{content:"";position:absolute;top:1px;left:1px;width:6px;height:6px;border-right:1.5px solid #acd9d4;border-bottom:1.5px solid #acd9d4;transform:rotate(45deg)}.x-canvas-dropdown.is-open .x-canvas-dropdown-chevron{transform:rotate(180deg)}
.x-canvas-dropdown-menu,.x-canvas-dropdown-menu *{box-sizing:border-box}.x-canvas-dropdown-menu{position:fixed;z-index:12000;display:grid;align-content:start;gap:2px;max-width:calc(100vw - 14px);padding:5px;overflow:auto;overscroll-behavior:contain;border:1px solid #555b5c;border-radius:9px;background:#252329;color:#eff4f3;box-shadow:0 14px 36px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.025),inset 0 1px rgba(255,255,255,.035);font:500 13px/1.25 Outfit,"Segoe UI",Arial,sans-serif;opacity:0;transform:translateY(-3px) scale(.985);transform-origin:top center;transition:opacity .12s ease,transform .12s ease;scrollbar-color:#628f8a transparent;scrollbar-width:thin}.x-canvas-dropdown-menu[hidden]{display:none}.x-canvas-dropdown-menu.is-open{opacity:1;transform:translateY(0) scale(1)}.x-canvas-dropdown-option{position:relative;display:flex;width:100%;min-height:31px;align-items:center;padding:6px 30px 6px 9px;border:0;border-radius:6px;background:transparent;color:#e8eeec;font:inherit;text-align:left;cursor:pointer}.x-canvas-dropdown-option:hover,.x-canvas-dropdown-option:focus-visible{outline:none;background:#34383a;color:#fff}.x-canvas-dropdown-option.is-selected{background:#314744;color:#e9fffc}.x-canvas-dropdown-option.is-selected:after{content:"";position:absolute;right:11px;top:9px;width:7px;height:4px;border-left:2px solid #8ed8d0;border-bottom:2px solid #8ed8d0;transform:rotate(-45deg)}.x-canvas-dropdown-option:disabled{color:#777d7c;cursor:not-allowed}.x-canvas-dropdown-group{padding:8px 9px 4px;color:#9ca4a2;font-size:11px;font-weight:700;letter-spacing:.055em;text-transform:uppercase}.x-canvas-dropdown-menu::-webkit-scrollbar{width:7px}.x-canvas-dropdown-menu::-webkit-scrollbar-track{background:transparent}.x-canvas-dropdown-menu::-webkit-scrollbar-thumb{border:2px solid #252329;border-radius:7px;background:#628f8a}
.x-canvas-ribbon-group .x-canvas-dropdown{min-width:72px}.x-canvas-ribbon-group .x-canvas-dropdown-trigger{display:flex;min-width:0;height:var(--canvas-dropdown-height,24px);place-items:normal;padding:0 7px;border-color:#4a4d51;border-radius:5px;background:#211f25;font-size:12px}.x-canvas-mode .x-canvas-dropdown{width:auto;min-width:96px}.x-canvas-mode .x-canvas-dropdown-trigger{border-radius:7px;font-size:12px;font-weight:700}.x-canvas-dialog-card .x-canvas-dropdown-trigger{border-radius:7px}.x-canvas-properties .x-canvas-dropdown-trigger{font-size:12px;font-weight:500}
@media(max-width:520px){.x-canvas-dropdown-menu{max-height:min(52dvh,320px)!important}.x-canvas-mode .x-canvas-dropdown{width:74px;min-width:74px}.x-canvas-dropdown-option{min-height:39px;padding-top:9px;padding-bottom:9px}}
/** [CODEX - 2026-08-30 22:25:00] Canvas dialogs use a shared application-window system: an opaque dimmer, framed title bar, structured content surface, explicit command footer, and one unambiguous sidebar-to-results hierarchy for Open. */
.x-canvas-dialog{padding:20px;background:rgba(7,9,10,.78);backdrop-filter:none}
.x-canvas-dialog-card.x-canvas-window{position:relative;display:grid;width:min(520px,calc(100vw - 40px));max-height:calc(100dvh - 40px);grid-template-rows:auto minmax(0,1fr) auto;gap:0;overflow:hidden;padding:0;border:1px solid #5a6463;border-radius:9px;background:#25292a;color:#edf3f1;box-shadow:0 28px 80px rgba(0,0,0,.68),0 0 0 1px rgba(255,255,255,.035),inset 0 1px rgba(255,255,255,.045)}
.x-canvas-window.x-canvas-window-compact{width:min(500px,calc(100vw - 40px))}.x-canvas-window.x-canvas-window-export{width:min(580px,calc(100vw - 40px))}
.x-canvas-window-head{display:grid;min-height:47px;grid-template-columns:31px minmax(0,1fr) 34px;align-items:center;gap:9px;padding:0 8px 0 11px;border-bottom:1px solid #444c4b;background:linear-gradient(180deg,#343a3a,#2c3132);box-shadow:inset 0 1px rgba(255,255,255,.045);user-select:none}
.x-canvas-window-icon{display:grid;width:30px;height:30px;place-items:center;border:1px solid #4b5654;border-radius:7px;background:#222728;color:#8ed5ce}.x-canvas-window-icon>.x-canvas-icon{width:18px;height:18px}.x-canvas-window-icon>img{display:block;width:23px;height:23px;object-fit:contain}
.x-canvas-window-title{display:grid;min-width:0;gap:1px;line-height:1.15}.x-canvas-window-title>strong{overflow:hidden;color:#f4f8f7;font-size:13px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.x-canvas-window-title>small{overflow:hidden;color:#9ca9a7;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.x-canvas-window .x-canvas-dialog-close{position:static;display:grid;width:34px;height:30px;place-items:center;border:0;border-radius:6px;background:transparent;color:#aab5b3;cursor:pointer}.x-canvas-window .x-canvas-dialog-close:hover,.x-canvas-window .x-canvas-dialog-close:focus-visible{background:#46514f;color:#fff}.x-canvas-window .x-canvas-dialog-close>.x-canvas-icon{width:17px;height:17px}
.x-canvas-window-body{min-height:0;overflow:auto;padding:21px 22px 22px;background:#25292a}.x-canvas-window-intro{display:grid;gap:5px;margin:0 0 17px}.x-canvas-dialog-card.x-canvas-window .x-canvas-window-intro h2{margin:0;color:#f3f7f6;font-size:23px;line-height:1.18}.x-canvas-window-intro p{margin:0;color:#aab5b3;font-size:13px;line-height:1.45}
.x-canvas-window-section{display:grid;gap:12px;margin-top:12px;padding:15px;border:1px solid #414948;border-radius:8px;background:#202425;box-shadow:inset 0 1px rgba(255,255,255,.025)}.x-canvas-window-section+.x-canvas-window-section{margin-top:10px}.x-canvas-window-section-title{color:#aab6b4;font-size:11px;font-weight:750;letter-spacing:.055em;text-transform:uppercase}
.x-canvas-window label{position:relative;display:grid;gap:6px;margin:0;color:#c5cecc;font-size:13px;font-weight:550;text-transform:none}.x-canvas-window label>small{position:absolute;right:9px;bottom:11px;color:#7f8b89;font-size:12px;font-weight:500;pointer-events:none}.x-canvas-window label:has(>small)>input{padding-right:50px}
.x-canvas-window input:not([type=checkbox]):not([type=radio]):not([type=range]),.x-canvas-window select{height:38px;border-color:#4b5553;border-radius:6px;background:#191d1e;color:#f0f4f3;font-size:13px}.x-canvas-window .x-canvas-dialog-grid{gap:10px}.x-canvas-window .x-canvas-check{display:flex;min-height:24px;align-items:center;gap:9px;color:#c0c9c7;font-size:13px;font-weight:500}
.x-canvas-window .x-canvas-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0}.x-canvas-window .x-canvas-presets button{display:grid;height:auto;min-height:56px;align-content:center;gap:3px;padding:7px;border:1px solid #46504e;border-radius:7px;background:#292e2f;color:#e5ebea;text-align:left;cursor:pointer}.x-canvas-window .x-canvas-presets button:hover,.x-canvas-window .x-canvas-presets button:focus-visible{border-color:#68aaa3;background:#303b39;box-shadow:0 0 0 1px rgba(104,170,163,.16)}.x-canvas-window .x-canvas-presets strong{font-size:13px}.x-canvas-window .x-canvas-presets small{color:#91a09d;font-size:12px}
.x-canvas-window-footer{display:flex;min-height:54px;align-items:center;gap:8px;padding:9px 11px;border-top:1px solid #424a49;background:#202425;box-shadow:inset 0 1px rgba(255,255,255,.018)}.x-canvas-window-footer-spacer{flex:1}.x-canvas-window-footer-note{color:#899592;font-size:12px}
.x-canvas-window-button,.x-canvas-window-footer .x-canvas-create{display:inline-flex;width:auto;min-width:82px;height:35px;align-items:center;justify-content:center;gap:7px;padding:0 13px;border:1px solid #4b5553;border-radius:6px;background:#2c3232;color:#e1e7e5;font:600 13px/1 Outfit,"Segoe UI",sans-serif;box-shadow:none;cursor:pointer}.x-canvas-window-button:hover,.x-canvas-window-button:focus-visible{border-color:#697673;background:#39413f;color:#fff}.x-canvas-window-footer .x-canvas-primary{min-width:118px;border:1px solid rgba(135,215,206,.36)}.x-canvas-window-destination{color:#a9d9d4}.x-canvas-window-button>.x-canvas-icon,.x-canvas-window-footer .x-canvas-create>.x-canvas-icon{width:16px;height:16px}
.x-canvas-export-options{gap:10px}.x-canvas-export-summary{display:flex;align-items:center;gap:10px;margin-top:11px;padding:11px 13px;border:1px solid #414a48;border-radius:8px;background:#1f2424;color:#a6d8d2}.x-canvas-export-summary>.x-canvas-icon{width:23px;height:23px}.x-canvas-export-summary>span{display:grid;gap:2px}.x-canvas-export-summary strong{color:#e5ecea;font-size:13px}.x-canvas-export-summary small{margin:0;color:#99a6a4;font-size:12px}
.x-canvas-window .x-canvas-cnv-passwords{display:grid;gap:11px;padding-top:4px}.x-canvas-window .x-canvas-cnv-passwords[hidden]{display:none}.x-canvas-window .x-canvas-cnv-passwords p{margin:0;color:#aab3b1;font-size:12px;line-height:1.45}
.x-canvas-about-card.x-canvas-window{width:min(550px,calc(100vw - 40px))}.x-canvas-about-card .x-canvas-window-body{display:grid;gap:17px}.x-canvas-about-card .x-canvas-about-identity{padding:0}.x-canvas-about-card .x-canvas-window-body>p{margin:0;color:#b7c1bf;font-size:13px;line-height:1.55}.x-canvas-about-card .x-canvas-about-features>span{border-color:#424b49;background:#202525}.x-canvas-about-card .x-canvas-about-features strong{font-size:13px}
.x-canvas-shape-card.x-canvas-window{width:min(800px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:hidden}.x-canvas-shape-card .x-canvas-shape-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.x-canvas-library-card.x-canvas-window{width:min(1040px,calc(100vw - 40px));height:min(730px,calc(100dvh - 40px));grid-template-rows:auto minmax(0,1fr) auto}.x-canvas-library-window-body{display:grid;min-height:0;grid-template-columns:190px minmax(0,1fr);background:#25292a}
.x-canvas-library-sidebar{display:flex;min-height:0;flex-direction:column;gap:11px;padding:17px 11px;border-right:1px solid #424a49;background:#202425}.x-canvas-library-sidebar>.x-canvas-window-section-title{padding:0 8px}.x-canvas-library-sidebar .x-canvas-library-tabs{display:grid;grid-template-columns:1fr;gap:3px;padding:0;border:0;border-radius:0;background:transparent}.x-canvas-library-sidebar .x-canvas-library-tabs button{display:flex;width:100%;height:38px;align-items:center;justify-content:flex-start;gap:9px;padding:0 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:#aeb9b7;font-size:13px;font-weight:600;text-align:left}.x-canvas-library-sidebar .x-canvas-library-tabs button>.x-canvas-icon{width:18px;height:18px;color:#8fbeb9}.x-canvas-library-sidebar .x-canvas-library-tabs button:hover{background:#2b3131;color:#fff}.x-canvas-library-sidebar .x-canvas-library-tabs button.is-active{border-color:#4b6561;background:#30403e;color:#f2f8f6;box-shadow:none}
.x-canvas-library-sidebar-note{display:grid;gap:4px;margin-top:auto;padding:11px;border:1px solid #3d4644;border-radius:7px;background:#1b2020}.x-canvas-library-sidebar-note strong{color:#d9e2e0;font-size:13px}.x-canvas-library-sidebar-note span{color:#879492;font-size:12px;line-height:1.4}
.x-canvas-library-content{display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr);background:#282c2d}.x-canvas-library-content-head{display:grid;gap:13px;padding:18px 19px 14px;border-bottom:1px solid #404847;background:#252a2a}.x-canvas-library-content-head>span{display:grid;gap:4px}.x-canvas-library-content-head h2{margin:0;color:#f1f5f4;font-size:21px}.x-canvas-library-content-head p{margin:0;color:#9ba7a5;font-size:13px;line-height:1.4}
.x-canvas-library-content .x-canvas-library-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:8px;margin:0}.x-canvas-library-search{display:flex;height:38px;align-items:center;gap:8px;padding:0 10px;border:1px solid #4a5452;border-radius:7px;background:#191d1e;color:#8da09d}.x-canvas-library-search>.x-canvas-icon{width:17px;height:17px;flex:0 0 17px}.x-canvas-library-search>input{width:100%;height:34px;padding:0;border:0;background:transparent;color:#eef3f2;font-size:13px;outline:none}.x-canvas-library-content .x-canvas-library-toolbar>button{display:flex;height:38px;align-items:center;gap:7px;margin:0;padding:0 12px;border:1px solid #4b5553;border-radius:7px;background:#303636;color:#dfe6e4;font-size:13px}.x-canvas-library-content .x-canvas-library-toolbar>button>.x-canvas-icon{width:17px;height:17px}
.x-canvas-library-content .x-canvas-library-grid{display:grid;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:10px;overflow:auto;padding:14px 18px 18px}.x-canvas-library-content .x-canvas-library-filters{position:sticky;top:0;display:flex;grid-column:1/-1;gap:5px;padding:8px;border:1px solid #414a48;border-radius:8px;background:#202525;box-shadow:0 9px 16px rgba(0,0,0,.22);backdrop-filter:none}.x-canvas-library-content .x-canvas-library-filters:before{content:"Location";display:flex;align-items:center;padding:0 6px;color:#899693;font-size:11px;font-weight:750;letter-spacing:.045em;text-transform:uppercase}
.x-canvas-library-content .x-canvas-library-item{border-color:#414a48;border-radius:8px;background:#222728}.x-canvas-library-content .x-canvas-library-item:hover{border-color:#629a94;background:#293331}.x-canvas-library-content .x-canvas-library-preview{background:linear-gradient(145deg,#333b39,#1d2222)}
/** [CODEX - 2026-08-30 23:03:00] Open keeps search as one integrated control and its location choices on one intentional, horizontally scrollable source row instead of allowing a second ambiguous wrapped area. */
.x-canvas-window label.x-canvas-library-search{display:flex;margin:0;font-weight:500}.x-canvas-window .x-canvas-library-search>input{width:100%;height:34px;margin:0;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#eef3f2;font-size:13px;outline:none}.x-canvas-library-content .x-canvas-library-filters{min-height:48px;flex-wrap:nowrap;overflow-x:auto}.x-canvas-library-content .x-canvas-library-filters button{flex:0 0 auto;padding-right:7px;padding-left:7px;white-space:nowrap}.x-canvas-library-content .x-canvas-library-filters .x-canvas-library-external{margin-left:auto}
/** [CODEX - 2026-08-31 00:31:00] Guide management uses the shared application-window language with a compact insertion row, document-proportional metadata, and clear drag affordances. */
.x-canvas-window.x-canvas-window-guides{width:min(620px,calc(100vw - 40px))}.x-canvas-guide-add-grid{display:grid;grid-template-columns:minmax(120px,1fr) minmax(110px,1fr) minmax(105px,.8fr) auto;align-items:end;gap:9px}.x-canvas-guide-add{height:38px!important;white-space:nowrap}.x-canvas-guide-list{display:grid;max-height:260px;gap:5px;overflow:auto}.x-canvas-guide-empty{margin:2px 0;color:#899592;font-size:13px}.x-canvas-guide-row{display:grid;grid-template-columns:24px minmax(100px,1fr) minmax(95px,120px) minmax(84px,auto) 32px;align-items:center;gap:8px;min-height:42px;padding:4px 5px 4px 9px;border:1px solid #3f4847;border-radius:7px;background:#272c2d}.x-canvas-guide-row>.x-canvas-icon{width:17px;height:17px;color:#7fc8c0}.x-canvas-guide-row strong{font-size:13px;font-weight:650}.x-canvas-guide-row input{height:32px!important}.x-canvas-guide-row small{color:#91a09d;font-size:12px;text-align:right}.x-canvas-guide-remove{display:grid;width:32px;height:32px;place-items:center;border:0;border-radius:6px;background:transparent;color:#aeb8b6;cursor:pointer}.x-canvas-guide-remove:hover{background:#493536;color:#ffd9d6}.x-canvas-guide-remove>.x-canvas-icon{width:16px;height:16px}#x-canvas-app[data-guide-hover=vertical] .x-canvas-surface{cursor:ew-resize!important}#x-canvas-app[data-guide-hover=horizontal] .x-canvas-surface{cursor:ns-resize!important}
@media(max-width:620px){.x-canvas-guide-add-grid{grid-template-columns:1fr 1fr}.x-canvas-guide-add{width:100%!important}.x-canvas-guide-row{grid-template-columns:22px minmax(80px,1fr) 90px 32px}.x-canvas-guide-row small{display:none}}
@media(max-width:760px){.x-canvas-dialog{padding:10px}.x-canvas-dialog-card.x-canvas-window,.x-canvas-window.x-canvas-window-compact,.x-canvas-window.x-canvas-window-export,.x-canvas-about-card.x-canvas-window,.x-canvas-shape-card.x-canvas-window{width:min(100%,620px);max-height:calc(100dvh - 20px)}.x-canvas-library-card.x-canvas-window{width:100%;height:calc(100dvh - 20px)}.x-canvas-library-window-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.x-canvas-library-sidebar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;padding:8px 10px;border-right:0;border-bottom:1px solid #424a49}.x-canvas-library-sidebar>.x-canvas-window-section-title{padding:0}.x-canvas-library-sidebar .x-canvas-library-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.x-canvas-library-sidebar .x-canvas-library-tabs button{justify-content:center}.x-canvas-library-sidebar-note{display:none}.x-canvas-library-content .x-canvas-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.x-canvas-window-footer-note{display:none}}
@media(max-width:520px){.x-canvas-dialog{padding:6px}.x-canvas-dialog-card.x-canvas-window,.x-canvas-window.x-canvas-window-compact,.x-canvas-window.x-canvas-window-export,.x-canvas-about-card.x-canvas-window,.x-canvas-shape-card.x-canvas-window,.x-canvas-library-card.x-canvas-window{position:relative;inset:auto;width:100%;height:auto;max-height:calc(100dvh - 12px);border-radius:8px;padding:0}.x-canvas-library-card.x-canvas-window{height:calc(100dvh - 12px)}.x-canvas-window-head{grid-template-columns:29px minmax(0,1fr) 34px;padding-left:8px}.x-canvas-window-body{padding:17px 14px}.x-canvas-window .x-canvas-presets{grid-template-columns:1fr 1fr}.x-canvas-window-footer{padding:8px}.x-canvas-window-footer .x-canvas-create,.x-canvas-window-button{min-width:74px;padding:0 10px}.x-canvas-window-destination{display:none}.x-canvas-shape-card .x-canvas-shape-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.x-canvas-library-sidebar{grid-template-columns:1fr}.x-canvas-library-sidebar>.x-canvas-window-section-title{display:none}.x-canvas-library-sidebar .x-canvas-library-tabs button{padding:0 5px}.x-canvas-library-content-head{padding:13px}.x-canvas-library-content .x-canvas-library-toolbar{grid-template-columns:minmax(0,1fr) 42px}.x-canvas-library-content .x-canvas-library-toolbar>button{justify-content:center;padding:0}.x-canvas-library-content .x-canvas-library-toolbar>button span{display:none}.x-canvas-library-content .x-canvas-library-grid{grid-template-columns:1fr;padding:10px 12px 14px}.x-canvas-library-content .x-canvas-library-filters:before{display:none}}

/** [CODEX - 2026-08-31 01:56:55] A restrained PowerPoint-like quick gallery and an anchored square menu replace the former document-dimming Shape dialog. */
.x-canvas-ribbon-shapes{padding-right:8px;padding-left:8px}.x-canvas-ribbon-shape-gallery{display:flex;align-items:flex-start;gap:2px}.x-canvas-ribbon-group .x-canvas-ribbon-shape-gallery>button{grid-template-rows:27px 14px;min-width:48px;width:48px;padding:2px 3px}.x-canvas-ribbon-shape-gallery canvas{display:block;width:32px;height:24px}.x-canvas-ribbon-shape-gallery b{font-size:12px;font-weight:600;line-height:13px}.x-canvas-ribbon-shape-more .x-canvas-icon{width:21px!important;height:21px!important}.x-canvas-ribbon-shape-more b{font-size:12px;font-weight:600}.x-canvas.is-ribbon-compact .x-canvas-ribbon-shape-gallery{gap:1px}.x-canvas.is-ribbon-compact .x-canvas-ribbon-group .x-canvas-ribbon-shape-gallery>button{display:grid;width:36px;min-width:36px;height:35px;grid-template-rows:1fr;padding:0}.x-canvas.is-ribbon-compact .x-canvas-ribbon-shape-gallery canvas{width:25px;height:22px}.x-canvas.is-ribbon-compact .x-canvas-ribbon-shape-gallery b{display:none}
.x-canvas-shape-popover[hidden]{display:none}.x-canvas-shape-popover{position:fixed;z-index:120;display:grid;width:min(400px,calc(100vw - 20px));height:min(400px,calc(100dvh - 20px));grid-template-rows:47px minmax(0,1fr) 29px;overflow:hidden;border:1px solid #4a4d50;border-radius:8px;background:#242529;color:#e4e8e7;box-shadow:0 12px 34px rgba(0,0,0,.48),0 1px 0 rgba(255,255,255,.04);isolation:isolate}.x-canvas-shape-popover-head{display:grid;grid-template-columns:29px minmax(0,1fr) 31px;align-items:center;gap:7px;padding:0 7px 0 10px;border-bottom:1px solid #404347;background:#2a2b30}.x-canvas-shape-popover-head>span{display:grid;width:27px;height:27px;place-items:center;color:#77c8c0}.x-canvas-shape-popover-head>span .x-canvas-icon{width:20px;height:20px}.x-canvas-shape-popover-head>div{display:grid;min-width:0;gap:1px}.x-canvas-shape-popover-head strong{font-size:14px;line-height:17px}.x-canvas-shape-popover-head small{overflow:hidden;color:#9fa4a5;font-size:12px;line-height:14px;text-overflow:ellipsis;white-space:nowrap}.x-canvas-shape-popover-head button{display:grid;width:29px;height:29px;place-items:center;padding:0;border:0;border-radius:5px;background:transparent;color:#bfc4c5;cursor:pointer}.x-canvas-shape-popover-head button:hover,.x-canvas-shape-popover-head button:focus-visible{background:#383b3e;color:#fff;outline:1px solid #555a5c}.x-canvas-shape-popover-head button .x-canvas-icon{width:16px;height:16px}
.x-canvas-shape-groups{overflow:auto;padding:9px 10px 12px;overscroll-behavior:contain}.x-canvas-shape-groups section+section{margin-top:11px;padding-top:9px;border-top:1px solid #383b3e}.x-canvas-shape-groups h3{margin:0 0 6px;color:#989ea0;font-size:11px;font-weight:750;letter-spacing:.055em;line-height:14px;text-transform:uppercase}.x-canvas-shape-popover .x-canvas-shape-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.x-canvas-shape-popover .x-canvas-shape-grid button{display:grid;min-width:0;min-height:59px;grid-template-columns:1fr;grid-template-rows:36px 15px;align-items:center;justify-items:center;gap:2px;padding:3px;border:1px solid transparent;border-radius:5px;background:#2b2d31;color:#d9dedd;font:600 12px/15px Outfit,"Segoe UI",sans-serif;text-align:center;cursor:pointer}.x-canvas-shape-popover .x-canvas-shape-grid button:hover,.x-canvas-shape-popover .x-canvas-shape-grid button:focus-visible{border-color:#5d8f8b;background:#343a3a;color:#fff;outline:none;box-shadow:none}.x-canvas-shape-popover .x-canvas-shape-grid canvas{display:block;width:48px;height:34px;border:0;border-radius:0;background:transparent}.x-canvas-shape-popover .x-canvas-shape-grid span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.x-canvas-shape-popover>footer{display:flex;align-items:center;padding:0 10px;border-top:1px solid #3d4043;background:#282a2e;color:#9ca1a2;font-size:12px;line-height:28px;white-space:nowrap}
@media(max-width:900px){.x-canvas-ribbon-shapes{padding-right:3px;padding-left:3px}.x-canvas-ribbon-shape-gallery b{display:none}.x-canvas-ribbon-group .x-canvas-ribbon-shape-gallery>button{display:grid;width:35px;min-width:35px;height:29px;grid-template-rows:1fr;padding:0}.x-canvas-ribbon-shape-gallery canvas{width:25px;height:21px}.x-canvas-shape-popover[data-placement=mobile]{right:8px!important;bottom:63px!important;left:8px!important;width:auto;height:min(400px,calc(100dvh - 130px))}}
@media(max-width:430px){.x-canvas-shape-popover{width:calc(100vw - 12px)}.x-canvas-shape-popover .x-canvas-shape-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.x-canvas-shape-popover>footer{overflow:hidden;text-overflow:ellipsis}}

/** [CODEX - 2026-08-31 06:12:00] Layers Studio uses compact Affinity-like hierarchy, explicit action grouping, document-ratio thumbnails, restrained selection, and full-button interaction states without an active-row side stripe. */
.x-canvas-layers-panel.is-active{display:grid;grid-template-rows:49px 43px minmax(0,1fr);overflow:hidden;background:#202224}.x-canvas-layer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 10px;border-bottom:1px solid #3b4140;background:#252829}.x-canvas-layer-heading{display:grid;min-width:0;grid-template-columns:31px minmax(0,1fr);align-items:center;gap:8px}.x-canvas-layer-heading>.x-canvas-icon{width:22px;height:22px;color:#81c9c2}.x-canvas-layer-heading>span{display:grid;min-width:0;gap:1px}.x-canvas-layer-heading strong{color:#f0f4f3;font-size:13px;font-weight:700;line-height:16px}.x-canvas-layer-heading small{overflow:hidden;color:#8e9997;font-size:12px;line-height:14px;text-overflow:ellipsis;white-space:nowrap}.x-canvas-layer-add{display:inline-flex;min-width:60px;height:31px;align-items:center;justify-content:center;gap:5px;padding:0 9px;border:1px solid #4c6864;border-radius:6px;background:#30413f;color:#e9f6f4;font:650 12px/1 Outfit,"Segoe UI",sans-serif;cursor:pointer}.x-canvas-layer-add:hover,.x-canvas-layer-add:focus-visible{border-color:#76b8b1;background:#38524f;color:#fff;outline:none}.x-canvas-layer-add>.x-canvas-icon{width:15px;height:15px}
.x-canvas-layer-actions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:2px;padding:4px 6px;border-bottom:1px solid #383e3d;background:#222526}.x-canvas-layer-actions button{display:grid;min-width:0;grid-template-rows:18px 13px;align-content:center;justify-items:center;gap:1px;padding:1px 0;border:1px solid transparent;border-radius:5px;background:transparent;color:#aeb8b6;font:600 11px/13px Outfit,"Segoe UI",sans-serif;cursor:pointer}.x-canvas-layer-actions button>.x-canvas-icon{width:16px;height:16px}.x-canvas-layer-actions button:hover,.x-canvas-layer-actions button:focus-visible{border-color:#465452;background:#303837;color:#f4f8f7;outline:none}.x-canvas-layer-actions button.is-danger:hover,.x-canvas-layer-actions button.is-danger:focus-visible{border-color:#654748;background:#493435;color:#ffd9d6}.x-canvas-layer-actions button:disabled{border-color:transparent;background:transparent;color:#606866;cursor:default;opacity:.64}
.x-canvas-layers-panel .x-canvas-layer-list{min-height:0;overflow-x:hidden;overflow-y:auto;padding:5px 6px 9px;overscroll-behavior:contain}.x-canvas-layers-panel .x-canvas-layer{grid-template-columns:22px 25px 40px minmax(0,1fr) 25px;gap:4px;min-height:50px;margin:2px 0;padding:4px;border:1px solid transparent;border-radius:7px;background:#252829;color:#c2c9c7;box-shadow:none;transition:background .12s,border-color .12s,color .12s}.x-canvas-layers-panel .x-canvas-layer:hover{border-color:#3f4947;background:#2b302f;color:#e8eceb}.x-canvas-layers-panel .x-canvas-layer.is-active{border:1px solid #638f8a;background:#334441;color:#fff;box-shadow:inset 0 0 0 1px rgba(122,190,183,.08)}.x-canvas-layers-panel .x-canvas-layer.is-group-child{width:calc(100% - 14px);margin-left:14px}.x-canvas-layers-panel .x-canvas-layer button,.x-canvas-layers-panel .x-canvas-layer-group>button{border-radius:5px;color:#9ba5a3}.x-canvas-layers-panel .x-canvas-layer button:hover,.x-canvas-layers-panel .x-canvas-layer button:focus-visible,.x-canvas-layers-panel .x-canvas-layer-group>button:hover,.x-canvas-layers-panel .x-canvas-layer-group>button:focus-visible{background:#3a4240;color:#fff;outline:none}.x-canvas-layers-panel .x-canvas-layer button[aria-pressed=true],.x-canvas-layers-panel .x-canvas-layer-group>button[aria-pressed=true]{color:#dce8e6}.x-canvas-layers-panel .x-canvas-layer button[data-layer-visible][aria-pressed=false],.x-canvas-layers-panel .x-canvas-layer-group>button[data-group-visible][aria-pressed=false]{color:#69716f}.x-canvas-layers-panel .x-canvas-layer-preview{border-color:#555d5b;border-radius:5px;background:repeating-conic-gradient(#474c4b 0 25%,#626866 0 50%) 0/8px 8px;box-shadow:0 1px 4px rgba(0,0,0,.34)}.x-canvas-layers-panel .x-canvas-layer-name{display:grid;gap:2px}.x-canvas-layers-panel .x-canvas-layer-name strong{color:inherit;font-size:13px;font-weight:620;line-height:16px}.x-canvas-layers-panel .x-canvas-layer-name span{color:#8f9997;font-size:12px;line-height:14px;text-transform:capitalize}.x-canvas-layers-panel .x-canvas-layer.is-active .x-canvas-layer-name span{color:#b5c4c1}.x-canvas-layers-panel .x-canvas-stack-handle{opacity:.68}.x-canvas-layers-panel .x-canvas-layer:hover .x-canvas-stack-handle,.x-canvas-layers-panel .x-canvas-layer-group:hover .x-canvas-stack-handle{opacity:1}
.x-canvas-layers-panel .x-canvas-layer-group{grid-template-columns:22px 22px 18px minmax(0,1fr) 22px 22px 22px;min-height:37px;margin:5px 0 2px;padding:3px 4px;border:1px solid #3b4241;border-radius:7px;background:#292d2d;color:#cbd2d0;box-shadow:none}.x-canvas-layers-panel .x-canvas-layer-group:hover{border-color:#4b5654;background:#303534}.x-canvas-layers-panel .x-canvas-layer-group.is-active{border:1px solid #638f8a;background:#344643;color:#fff;box-shadow:inset 0 0 0 1px rgba(122,190,183,.08)}.x-canvas-layers-panel .x-canvas-layer-group>strong{font-size:13px;font-weight:680}.x-canvas-layers-panel .x-canvas-group-mask{padding:1px 5px;background:#55452c;color:#f2d8aa;font-size:11px;text-transform:uppercase}.x-canvas-layers-panel .x-canvas-mask-badge{right:2px;bottom:2px;width:14px;height:14px;border:1px solid #5d6664;background:#1d2121;color:#bde1dc}.x-canvas-layers-panel .x-canvas-properties{margin:8px;padding:13px;border:1px dashed #414947;border-radius:7px;background:#242728;color:#939d9b;font-size:13px;line-height:1.45} /* [CODEX - 2026-09-01 00:30:32] Keep the constrained eleven-pixel group-mask badge explicitly uppercase. */
.x-canvas-layers-panel .x-canvas-layer-group-icon{display:grid;width:18px;height:22px;place-items:center;color:#83bdb7}.x-canvas-layers-panel .x-canvas-layer-group-icon>.x-canvas-icon{width:16px;height:16px}.x-canvas-layers-panel .x-canvas-layer-group>button>.x-canvas-icon{width:15px;height:15px}
@media(max-width:760px){.x-canvas-layer-actions button span{display:none}.x-canvas-layer-actions button{grid-template-rows:1fr}.x-canvas-layer-actions{height:38px}.x-canvas-layers-panel.is-active{grid-template-rows:49px 38px minmax(0,1fr)}}

/** [CODEX - 2026-09-01 00:02:32] Shapes now use a true two-row Office ribbon gallery and a dense categorized icon menu; preview geometry occupies the icon box itself and captions live exclusively in Canvas tooltips. */
.x-canvas-ribbon-shapes{padding-right:8px;padding-left:8px}.x-canvas-ribbon-shape-gallery{display:grid;width:174px;height:52px;grid-template-columns:repeat(4,36px) 22px;grid-template-rows:repeat(2,25px);grid-auto-flow:row;gap:2px;align-content:start}.x-canvas-ribbon-group .x-canvas-ribbon-shape-gallery>button{position:relative;display:grid;width:36px;min-width:36px;height:25px;min-height:25px;place-items:center;padding:0;border-radius:4px}.x-canvas-ribbon-shape-gallery canvas{display:block;width:30px;height:21px}.x-canvas-ribbon-group .x-canvas-ribbon-shape-gallery>.x-canvas-ribbon-shape-more{width:22px;min-width:22px;height:52px;grid-column:5;grid-row:1/3;border-left-color:#403c46;border-radius:3px}.x-canvas-ribbon-shape-more .x-canvas-icon{width:13px!important;height:13px!important;color:#aaa4b3}.x-canvas-ribbon-shape-gallery>button:hover,.x-canvas-ribbon-shape-gallery>button:focus-visible{border-color:#504b57;background:#37333d;outline:none;box-shadow:none}.x-canvas.is-ribbon-compact .x-canvas-ribbon-shape-gallery{width:162px;height:33px;grid-template-columns:repeat(4,32px) 20px;grid-template-rows:repeat(2,15px);gap:2px}.x-canvas.is-ribbon-compact .x-canvas-ribbon-group .x-canvas-ribbon-shape-gallery>button{width:32px;min-width:32px;height:15px;min-height:15px}.x-canvas.is-ribbon-compact .x-canvas-ribbon-shape-gallery canvas{width:24px;height:14px}.x-canvas.is-ribbon-compact .x-canvas-ribbon-group .x-canvas-ribbon-shape-gallery>.x-canvas-ribbon-shape-more{width:20px;min-width:20px;height:32px}
.x-canvas-shape-popover[hidden]{display:none}.x-canvas-shape-popover{position:fixed;z-index:120;display:grid;width:min(366px,calc(100vw - 16px));height:min(430px,calc(100dvh - 16px));grid-template-rows:35px minmax(0,1fr);overflow:hidden;border:1px solid #504b57;border-radius:7px;background:#25232a;color:#ebe7ef;box-shadow:0 16px 42px rgba(0,0,0,.52);isolation:isolate}.x-canvas-shape-popover-head{display:grid;grid-template-columns:minmax(0,1fr) 29px;align-items:center;gap:6px;padding:0 5px 0 10px;border-bottom:1px solid #403c46;background:#2b2831}.x-canvas-shape-popover-head>strong{font-size:13px;font-weight:700;line-height:17px}.x-canvas-shape-popover-head>button{display:grid;width:27px;height:27px;place-items:center;padding:0;border:0;border-radius:4px;background:transparent;color:#b5afbc;cursor:pointer}.x-canvas-shape-popover-head>button:hover,.x-canvas-shape-popover-head>button:focus-visible{background:#3a3641;color:#fff;outline:none}.x-canvas-shape-popover-head>button .x-canvas-icon{width:15px;height:15px}.x-canvas-shape-groups{overflow:auto;padding:8px 9px 11px;overscroll-behavior:contain}.x-canvas-shape-groups section+section{margin-top:9px;padding-top:8px;border-top:1px solid #3b3742}.x-canvas-shape-groups h3{margin:0 0 5px;padding-left:2px;color:#98919f;font-size:11px;font-weight:750;letter-spacing:.055em;line-height:14px;text-transform:uppercase}.x-canvas-shape-popover .x-canvas-shape-grid{display:grid;grid-template-columns:repeat(8,39px);gap:4px}.x-canvas-shape-popover .x-canvas-shape-grid button{display:grid;width:39px;min-width:39px;height:39px;min-height:39px;place-items:center;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:#e3e0e7;cursor:pointer}.x-canvas-shape-popover .x-canvas-shape-grid button:hover,.x-canvas-shape-popover .x-canvas-shape-grid button:focus-visible{border-color:#524d59;background:#37333d;color:#fff;outline:none;box-shadow:none}.x-canvas-shape-popover .x-canvas-shape-grid canvas{display:block;width:34px;height:30px;border:0;border-radius:0;background:transparent}.x-canvas-shape-popover .x-canvas-shape-grid span,.x-canvas-shape-popover>footer{display:none}

/** [CODEX - 2026-09-01 00:02:32] Editor surfaces return to Canvas's neutral graphite/plum palette. Teal remains a functional accent only; it no longer washes layers, dialogs, menus, start surfaces, or library panels with green. */
.x-canvas-empty{background:#1b191e}.x-canvas-inspector,.x-canvas-panel,.x-canvas-layers-panel.is-active{background:#211f25}.x-canvas-panel-tabs button{background:#211f25}.x-canvas-panel-tabs button.is-active{background:#2c2932}.x-canvas-layer-head{border-bottom-color:#3b3742;background:#27242c}.x-canvas-layer-heading>.x-canvas-icon{color:#d6b66f}.x-canvas-layer-add{border-color:#514b58;background:#302c35;color:#eee9f2}.x-canvas-layer-add:hover,.x-canvas-layer-add:focus-visible{border-color:#6a6370;background:#3a3540}.x-canvas-layer-actions{border-bottom-color:#393540;background:#242128}.x-canvas-layer-actions button:hover,.x-canvas-layer-actions button:focus-visible{border-color:#4d4753;background:#35313a}.x-canvas-layers-panel .x-canvas-layer{background:#28252d;color:#c7c1ce}.x-canvas-layers-panel .x-canvas-layer:hover{border-color:#49434f;background:#302d35;color:#f0ecf3}.x-canvas-layers-panel .x-canvas-layer.is-active{border-color:#68616f;background:#38343e;color:#fff;box-shadow:none}.x-canvas-layers-panel .x-canvas-layer button:hover,.x-canvas-layers-panel .x-canvas-layer button:focus-visible,.x-canvas-layers-panel .x-canvas-layer-group>button:hover,.x-canvas-layers-panel .x-canvas-layer-group>button:focus-visible{background:#413c47}.x-canvas-layers-panel .x-canvas-layer-preview{border-color:#5a5361;background:repeating-conic-gradient(#4c4850 0 25%,#6a6570 0 50%) 0/8px 8px}.x-canvas-layers-panel .x-canvas-layer-name span,.x-canvas-layers-panel .x-canvas-layer.is-active .x-canvas-layer-name span{color:#aaa3b0}.x-canvas-layers-panel .x-canvas-layer-group{border-color:#403b46;background:#29262e;color:#d0cad5}.x-canvas-layers-panel .x-canvas-layer-group:hover{border-color:#514b57;background:#322e38}.x-canvas-layers-panel .x-canvas-layer-group.is-active{border-color:#68616f;background:#39343f;color:#fff;box-shadow:none}.x-canvas-layers-panel .x-canvas-layer-group-icon{color:#d6b66f}.x-canvas-layers-panel .x-canvas-properties{border-color:#45404a;background:#26232b;color:#9c95a2}
.x-canvas-dialog{background:rgba(8,7,10,.78)}.x-canvas-dialog-card.x-canvas-window{border-color:#57515e;background:#25232a;color:#f0ecf3}.x-canvas-window-head{border-bottom-color:#46414c;background:#2f2c34}.x-canvas-window-icon{border-color:#514b58;background:#27242c;color:#d6b66f}.x-canvas-window-title>small{color:#a39ca9}.x-canvas-window .x-canvas-dialog-close{color:#b4adba}.x-canvas-window .x-canvas-dialog-close:hover,.x-canvas-window .x-canvas-dialog-close:focus-visible{background:#403b46}.x-canvas-window-body,.x-canvas-library-window-body{background:#25232a}.x-canvas-window-intro p{color:#aaa3b0}.x-canvas-window-section{border-color:#44404a;background:#201e24}.x-canvas-window input:not([type=checkbox]):not([type=radio]):not([type=range]),.x-canvas-window select{border-color:#4d4753;background:#19171c;color:#f2eef5}.x-canvas-window .x-canvas-presets button{border-color:#49434f;background:#2c2932;color:#ebe7ef}.x-canvas-window .x-canvas-presets button:hover,.x-canvas-window .x-canvas-presets button:focus-visible{border-color:#625b69;background:#37333d;box-shadow:none}.x-canvas-window-footer{border-top-color:#423d48;background:#211f25}.x-canvas-window-button,.x-canvas-window-footer .x-canvas-create{border-color:#514b58;background:#2d2933;color:#e7e2eb}.x-canvas-window-button:hover,.x-canvas-window-button:focus-visible{border-color:#6a6370;background:#393540}.x-canvas-export-summary{border-color:#45404a;background:#211f25;color:#e0bd72}.x-canvas-about-card .x-canvas-about-features>span{border-color:#46414c;background:#211f25}
.x-canvas-library-sidebar{border-right-color:#423d48;background:#211f25}.x-canvas-library-sidebar .x-canvas-library-tabs button{color:#b2abb8}.x-canvas-library-sidebar .x-canvas-library-tabs button:hover{background:#302d35}.x-canvas-library-sidebar .x-canvas-library-tabs button.is-active{border-color:#5b5461;background:#37333d;color:#fff}.x-canvas-library-sidebar-note{border-color:#403b46;background:#1d1b21}.x-canvas-library-content{background:#28252d}.x-canvas-library-content-head{border-bottom-color:#433e49;background:#25232a}.x-canvas-library-search{border-color:#504a57;background:#19171c;color:#948d9a}.x-canvas-library-content .x-canvas-library-toolbar>button{border-color:#514b58;background:#302c35}.x-canvas-library-content .x-canvas-library-filters{border-color:#45404a;background:#211f25}.x-canvas-library-content .x-canvas-library-item{border-color:#45404a;background:#242128}.x-canvas-library-content .x-canvas-library-item:hover{border-color:#625b69;background:#2e2a34}.x-canvas-library-content .x-canvas-library-preview{background:#201e24}.x-canvas-guide-row{border-color:#45404a;background:#29262e}
.x-canvas-dropdown-menu{border-color:#56505c;background:#25232a;color:#eeeaf2;scrollbar-color:#817b86 transparent}.x-canvas-dropdown-option:hover,.x-canvas-dropdown-option:focus-visible{background:#35313a}.x-canvas-dropdown-option.is-selected{background:#3c3742;color:#fff}.x-canvas-dropdown-menu::-webkit-scrollbar-thumb{border-color:#25232a;background:#817b86}.x-canvas-app-menu-popover{border-color:#56505c;background:#25232a}.x-canvas-topbar .x-canvas-app-menu-popover button:hover,.x-canvas-topbar .x-canvas-app-menu-popover button:focus-visible{border-color:#57515e;background:#37333d}.x-canvas-app-menu-popover button>b{background:#3b3741;color:#e6c476}.x-canvas-tool-group-menu{border-color:#56505c;background:#27242c}.x-canvas-tool-group.is-active>.x-canvas-tool-group-current,.x-canvas-tool-group-menu>button.is-active{border-color:#655e6b;background:#3a3540}.x-canvas-mouse-menu,.x-canvas-tooltip{border-color:#56505c!important;background:#27242c!important}.x-canvas-mouse-menu button:hover{background:#393540!important}.x-canvas-color-studio-wells button.is-active{border-color:#655e6b;background:#38343e}.x-canvas-color-section .x-canvas-inline-actions button:hover{border-color:#655e6b;background:#393540}.x-canvas-secondary-link:hover{border-color:#625b69;background:#35313a}.x-canvas-library-tabs button.is-active{background:#38343e}.x-canvas-library-filters button:hover,.x-canvas-library-filters button:focus-visible{border-color:#625b69;background:#35313a}.x-canvas-library-filters button.is-active{border-color:#655e6b;background:#3b3741;color:#fff}.x-canvas-ribbon-group button[data-command=toggle-vertical-guides][aria-pressed=true],.x-canvas-ribbon-group button[data-command=toggle-horizontal-guides][aria-pressed=true],.x-canvas-ribbon-group button[data-command=toggle-smart-alignment][aria-pressed=true],.x-canvas-ribbon-group button[data-command=toggle-spacing-guides][aria-pressed=true],.x-canvas-ribbon-group button[data-command=toggle-distance-guides][aria-pressed=true]{border-color:#655e6b;background:#393540;color:#fff;box-shadow:none}

/** [CODEX - 2026-09-01 00:02:32] Resize affordances remain precise two-pixel handles but never glow or cast a colored halo. */
.x-canvas-panel-resizer:hover:after,.x-canvas-panel-resizer:focus-visible:after,.x-canvas-panel-resizer.is-active:after,.x-canvas-inspector-split:hover:after,.x-canvas-inspector-split:focus-visible:after,.x-canvas-inspector-split.is-active:after{background:#77717f;box-shadow:none}.x-canvas-panel-resizer:after,.x-canvas-inspector-split:after{transition:background .14s}
/** [CODEX - 2026-09-01 01:46:12] The tools button rules must never collapse the left separator into a single 39-pixel grid cell; its entire two-pixel edge retains an eight-pixel drag target. */
.x-canvas-tools>.x-canvas-panel-resizer[data-panel-resizer=left]{position:absolute;top:0;right:-4px;bottom:0;left:auto;display:block;width:8px;height:auto;padding:0;border:0;border-radius:0;background:transparent;place-items:normal}

@media(max-width:900px){.x-canvas-ribbon-shapes{padding-right:3px;padding-left:3px}.x-canvas-shape-popover[data-placement=mobile]{right:8px!important;bottom:63px!important;left:8px!important;width:auto;height:min(430px,calc(100dvh - 130px))}}
@media(max-width:430px){.x-canvas-shape-popover{width:calc(100vw - 12px)}.x-canvas-shape-popover .x-canvas-shape-grid{grid-template-columns:repeat(7,39px)}}
/** [CODEX - 2026-09-01 00:55:42] Narrow layouts prioritize the open-document strip; full project-title editing remains available on tablet widths and yields to tabs on phone widths. */
@media(max-width:900px){.x-canvas-document-tabs{max-width:min(46vw,360px);flex-basis:150px}.x-canvas-document-tab{min-width:96px;max-width:150px;flex-basis:150px}}
@media(max-width:520px){.x-canvas-document-tabs{max-width:none;flex:1 1 auto}.x-canvas-document-tab{min-width:88px;max-width:138px;flex-basis:138px}.x-canvas-topbar:has(.x-canvas-document-tabs:not(:empty)) .x-canvas-file-zone{display:none}}
/** [CODEX - 2026-09-01 01:57:38] Ribbon groups enter from the previous tab's physical direction; the short stagger reads as horizontal continuity rather than a page replacement. */
.x-canvas-ribbon-content>section.is-ribbon-entering{--canvas-ribbon-entry-x:14px}.x-canvas-ribbon-content>section.is-ribbon-entering.is-from-left{--canvas-ribbon-entry-x:-14px}.x-canvas-ribbon-content>section.is-ribbon-entering>.x-canvas-ribbon-group{animation:canvas-ribbon-tool-entry .2s cubic-bezier(.2,.72,.24,1) both}.x-canvas-ribbon-content>section.is-ribbon-entering>.x-canvas-ribbon-group:nth-child(2){animation-delay:14ms}.x-canvas-ribbon-content>section.is-ribbon-entering>.x-canvas-ribbon-group:nth-child(3){animation-delay:28ms}.x-canvas-ribbon-content>section.is-ribbon-entering>.x-canvas-ribbon-group:nth-child(n+4){animation-delay:42ms}@keyframes canvas-ribbon-tool-entry{from{opacity:.18;transform:translateX(var(--canvas-ribbon-entry-x))}to{opacity:1;transform:translateX(0)}}
/** [CODEX - 2026-09-01 01:57:38] Layer dragging keeps the exact insertion line while opening a small animated gap, lifting the source, and settling the committed row without a unilateral accent rail. */
.x-canvas-layer,.x-canvas-layer-group{transition:transform .15s cubic-bezier(.2,.72,.24,1),opacity .13s ease,box-shadow .16s ease}.x-canvas-layer.is-stack-dragging,.x-canvas-layer-group.is-stack-dragging{z-index:6;opacity:.68;transform:scale(.985);box-shadow:0 8px 18px rgba(0,0,0,.28)}.x-canvas-layer.is-drop-above,.x-canvas-layer-group.is-drop-above{transform:translateY(5px)}.x-canvas-layer.is-drop-below,.x-canvas-layer-group.is-drop-below{transform:translateY(-5px)}.x-canvas-layer.is-drop-above:before,.x-canvas-layer-group.is-drop-above:before{transform:translateY(-5px)}.x-canvas-layer.is-drop-below:after,.x-canvas-layer-group.is-drop-below:after{transform:translateY(5px)}.x-canvas-layer.is-stack-settling,.x-canvas-layer-group.is-stack-settling{animation:canvas-stack-settle .24s cubic-bezier(.2,.72,.24,1)}@keyframes canvas-stack-settle{0%{opacity:.7;transform:scale(.985);box-shadow:0 7px 16px rgba(0,0,0,.25)}65%{opacity:1;transform:scale(1.008)}100%{opacity:1;transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.x-canvas-ribbon-content>section.is-ribbon-entering>.x-canvas-ribbon-group,.x-canvas-layer.is-stack-settling,.x-canvas-layer-group.is-stack-settling{animation:none}.x-canvas-layer,.x-canvas-layer-group{transition:none}}
/** [CODEX - 2026-09-01 02:45:00] Appearance themes isolate every functional accent from structural editor surfaces: Default is achromatic while Canvas exactly preserves the established teal-and-gold identity. */
:root{--canvas-accent:#b2b2b2;--canvas-accent-strong:#989898;--canvas-accent-soft:#d5d5d5;--canvas-accent-2:#c6c6c6;--canvas-focus:#c9c9c9;--canvas-icon-root:#c8c8c8;--canvas-icon-topbar:#d6d6d6;--canvas-icon-ribbon:#cbcbcb;--canvas-icon-tools:#c2c2c2;--canvas-icon-inspector:#cccccc;--canvas-icon-status:#c4c4c4;--canvas-primary-background:linear-gradient(135deg,#c1c1c1,#9b9b9b);--canvas-primary-hover:linear-gradient(135deg,#cecece,#aaaaaa);--canvas-primary-ink:#222;--canvas-primary-shadow:rgba(0,0,0,.25);--canvas-theme-active-border:#777;--canvas-theme-active-background:#3d3d3d;--canvas-theme-active-background-2:#363636;--canvas-theme-toolgroup-border:#777;--canvas-theme-toolgroup-background:#363636;--canvas-theme-layer-border:#777;--canvas-theme-layer-background:#363636;--canvas-theme-emphasis:#ccc;--canvas-theme-emphasis-strong:#e5e5e5;--canvas-theme-badge-background:#444;--canvas-theme-badge-ink:#dcdcdc;--canvas-theme-user-background:#4b4b4b;--canvas-theme-guide-primary:#f0f0f0;--canvas-theme-guide-secondary:#969696;--canvas-guide-primary:#f0f0f0;--canvas-guide-secondary:#969696;--canvas-theme-shadow:rgba(182,182,182,.34)}
.x-canvas[data-theme=canvas]{--canvas-accent:#50b8ae;--canvas-accent-strong:#3fa79d;--canvas-accent-soft:#afe1dc;--canvas-accent-2:#e6b65f;--canvas-focus:#7fd2ca;--canvas-icon-root:#e5c37b;--canvas-icon-topbar:#ecd08d;--canvas-icon-ribbon:#dfba6d;--canvas-icon-tools:#76cbc3;--canvas-icon-inspector:#e9c47c;--canvas-icon-status:#dfbd70;--canvas-primary-background:linear-gradient(135deg,#65c8be,#46aea5);--canvas-primary-hover:linear-gradient(135deg,#78d3ca,#54bdb3);--canvas-primary-ink:#102724;--canvas-primary-shadow:rgba(63,167,157,.3);--canvas-theme-active-border:#80683c;--canvas-theme-active-background:#4a402c;--canvas-theme-active-background-2:#393540;--canvas-theme-toolgroup-border:#655e6b;--canvas-theme-toolgroup-background:#3a3540;--canvas-theme-layer-border:#68616f;--canvas-theme-layer-background:#38343e;--canvas-theme-emphasis:#e8bd68;--canvas-theme-emphasis-strong:#f2dba8;--canvas-theme-badge-background:#4a402b;--canvas-theme-badge-ink:#f2dba8;--canvas-theme-user-background:#70552f;--canvas-theme-guide-primary:#65d1c7;--canvas-theme-guide-secondary:#e6b65f;--canvas-guide-primary:#65d1c7;--canvas-guide-secondary:#e6b65f;--canvas-theme-shadow:rgba(80,184,174,.4)}
.x-canvas{--canvas-icon-color:var(--canvas-icon-root)}.x-canvas-topbar{--canvas-icon-color:var(--canvas-icon-topbar)}.x-canvas-ribbon{--canvas-icon-color:var(--canvas-icon-ribbon)}.x-canvas-tools{--canvas-icon-color:var(--canvas-icon-tools)}.x-canvas-inspector{--canvas-icon-color:var(--canvas-icon-inspector)}.x-canvas-statusbar{--canvas-icon-color:var(--canvas-icon-status)}
.x-canvas .x-canvas-primary{background:var(--canvas-primary-background)!important;color:var(--canvas-primary-ink)!important;box-shadow:0 5px 18px var(--canvas-primary-shadow)!important}.x-canvas .x-canvas-primary:hover{background:var(--canvas-primary-hover)!important;box-shadow:0 7px 22px var(--canvas-primary-shadow)!important}.x-canvas-brand em{background:var(--canvas-theme-badge-background);color:var(--canvas-theme-badge-ink)}
.x-canvas-tools button.is-active{border-color:var(--canvas-theme-active-border);background:var(--canvas-theme-active-background);color:#fff}.x-canvas-stage:after{border-color:var(--canvas-theme-emphasis);background:color-mix(in srgb,var(--canvas-theme-active-background) 84%,transparent);color:var(--canvas-theme-emphasis-strong)}.x-canvas-mobile-sheet [data-mobile-sheet-panel]>button .x-canvas-icon,.x-canvas-kicker,.x-canvas-window-icon,.x-canvas-layer-heading>.x-canvas-icon,.x-canvas-layers-panel .x-canvas-layer-group-icon{color:var(--canvas-theme-emphasis)}
.x-canvas-curve polyline{stroke:var(--canvas-guide-primary)}.x-canvas-curve circle{stroke:var(--canvas-accent-strong)}.x-canvas-curve circle:focus{stroke:var(--canvas-guide-secondary)}.x-canvas-group-mask,.x-canvas-layers-panel .x-canvas-group-mask{background:var(--canvas-theme-badge-background);color:var(--canvas-theme-badge-ink)}.x-canvas-assistant-message.is-user{background:var(--canvas-theme-user-background);color:#fff}
.x-canvas .x-canvas-tool-group.is-active>.x-canvas-tool-group-current,.x-canvas .x-canvas-tool-group-menu>button.is-active,.x-canvas .x-canvas-color-studio-wells button.is-active,.x-canvas .x-canvas-library-filters button.is-active{border-color:var(--canvas-theme-toolgroup-border);background:var(--canvas-theme-toolgroup-background);color:#fff}.x-canvas .x-canvas-ribbon-group button[data-command=toggle-vertical-guides][aria-pressed=true],.x-canvas .x-canvas-ribbon-group button[data-command=toggle-horizontal-guides][aria-pressed=true],.x-canvas .x-canvas-ribbon-group button[data-command=toggle-smart-alignment][aria-pressed=true],.x-canvas .x-canvas-ribbon-group button[data-command=toggle-spacing-guides][aria-pressed=true],.x-canvas .x-canvas-ribbon-group button[data-command=toggle-distance-guides][aria-pressed=true]{border-color:var(--canvas-theme-toolgroup-border);background:var(--canvas-theme-active-background-2);color:#fff}
.x-canvas .x-canvas-layers-panel .x-canvas-layer.is-active,.x-canvas .x-canvas-layers-panel .x-canvas-layer-group.is-active{border-color:var(--canvas-theme-layer-border);background:var(--canvas-theme-layer-background);color:#fff;box-shadow:none}.x-canvas-layer.is-drop-above:before,.x-canvas-layer-group.is-drop-above:before,.x-canvas-layer.is-drop-below:after,.x-canvas-layer-group.is-drop-below:after{box-shadow:0 0 7px var(--canvas-theme-shadow)}.x-canvas-brush-preset.is-active,.x-canvas-brush-preset[aria-pressed=true]{border-color:var(--canvas-accent);background:linear-gradient(180deg,color-mix(in srgb,var(--canvas-accent) 22%,#302e33),color-mix(in srgb,var(--canvas-accent) 10%,#29272d));box-shadow:0 0 0 1px color-mix(in srgb,var(--canvas-accent) 14%,transparent),inset 0 1px rgba(255,255,255,.06)}
.x-canvas:not([data-theme=canvas]) select{background-image:linear-gradient(45deg,transparent 50%,#bdbdbd 50%),linear-gradient(135deg,#bdbdbd 50%,transparent 50%),linear-gradient(#211f24,#1b191e)}.x-canvas:not([data-theme=canvas]) input[type=checkbox]:checked{background-color:var(--canvas-accent-strong);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.2 6.5 11.7 13 4.7' fill='none' stroke='%23282828' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.x-canvas:not([data-theme=canvas]) .x-canvas-dropdown-chevron:before{border-color:#c7c7c7}.x-canvas:not([data-theme=canvas]) .x-canvas-dropdown-trigger:focus-visible,.x-canvas:not([data-theme=canvas]) .x-canvas-dropdown.is-open .x-canvas-dropdown-trigger{box-shadow:0 0 0 2px rgba(190,190,190,.18),inset 0 1px rgba(255,255,255,.035)}.x-canvas:not([data-theme=canvas]) .x-canvas-dropdown-option.is-selected:after{border-color:#d8d8d8}.x-canvas:not([data-theme=canvas]) .x-canvas-app-menu-popover button>b{background:#424242;color:#dcdcdc}
/** [CODEX - 2026-09-01 02:45:00] Legacy role-specific accent selectors are explicitly neutralized in Default without weakening the corresponding Canvas-theme palette. */
.x-canvas:not([data-theme=canvas]) .x-canvas-recent button:hover{border-color:#777;background:#353535}.x-canvas:not([data-theme=canvas]) .x-canvas-history-saved button:hover{border-color:#818181;background:#373737}.x-canvas:not([data-theme=canvas]) .x-canvas-library-tabs button.is-active{background:#3d3d3d}.x-canvas:not([data-theme=canvas]) .x-canvas-library-item:hover,.x-canvas:not([data-theme=canvas]) .x-canvas-library-content .x-canvas-library-item:hover{border-color:#737373;background:#323232}.x-canvas:not([data-theme=canvas]) .x-canvas-library-state{border-color:#6d6d6d!important;color:#ccc!important}.x-canvas:not([data-theme=canvas]) .x-canvas-window-destination,.x-canvas:not([data-theme=canvas]) .x-canvas-export-summary{color:#c9c9c9}.x-canvas:not([data-theme=canvas]) .x-canvas-layer-add{border-color:#5a5a5a;background:#333;color:#eee}.x-canvas:not([data-theme=canvas]) .x-canvas-layer-add:hover,.x-canvas:not([data-theme=canvas]) .x-canvas-layer-add:focus-visible{border-color:#737373;background:#3d3d3d}
/** [CODEX - 2026-09-01 02:45:00] Appearance uses the established framed-window system with a stable section hierarchy and tactile theme previews rather than a generic popup. */
.x-canvas-appearance-card.x-canvas-window{width:min(760px,calc(100vw - 40px));height:min(530px,calc(100dvh - 40px))}.x-canvas-appearance-body{display:grid;min-height:0;grid-template-columns:174px minmax(0,1fr);background:#25232a}.x-canvas-appearance-nav{display:flex;min-height:0;flex-direction:column;gap:5px;padding:18px 11px;border-right:1px solid #423d48;background:#211f25}.x-canvas-appearance-nav>span{padding:0 9px 7px;color:#98929d;font-size:11px;font-weight:750;letter-spacing:.055em;text-transform:uppercase}.x-canvas-appearance-nav>button{display:flex;width:100%;height:39px;align-items:center;gap:9px;padding:0 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:#b8b2bd;font:650 13px/1 Outfit,"Segoe UI",sans-serif;text-align:left}.x-canvas-appearance-nav>button.is-active{border-color:#555159;background:#333138;color:#fff}.x-canvas-appearance-nav .x-canvas-icon{width:18px;height:18px;color:var(--canvas-icon-inspector)}.x-canvas-appearance-content{min-height:0;overflow:auto;padding:24px}.x-canvas-appearance-content .x-canvas-window-intro{margin-bottom:18px}.x-canvas-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.x-canvas-theme-option{display:grid;min-width:0;grid-template-rows:118px auto 24px;gap:10px;padding:10px;border:1px solid #4a4650;border-radius:9px;background:#29272e;color:#eeeaf2;text-align:left;cursor:pointer;transition:border-color .14s ease,background .14s ease,transform .14s ease}.x-canvas-theme-option:hover,.x-canvas-theme-option:focus-visible{border-color:#68636d;background:#302e35;outline:none;transform:translateY(-1px)}.x-canvas-theme-option.is-active{border-color:var(--canvas-accent);background:#323037;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--canvas-accent) 24%,transparent)}.x-canvas-theme-option>span:nth-child(2){display:grid;gap:3px}.x-canvas-theme-option strong{font-size:14px}.x-canvas-theme-option small{color:#aaa4af;font-size:13px;line-height:1.35}.x-canvas-theme-option>em{display:none;align-items:center;gap:5px;color:var(--canvas-accent-soft);font-size:12px;font-style:normal;font-weight:700}.x-canvas-theme-option.is-active>em{display:flex}.x-canvas-theme-option>em .x-canvas-icon{width:15px;height:15px}.x-canvas-theme-preview{position:relative;display:grid;height:118px;grid-template-columns:31px minmax(0,1fr) 38px;grid-template-rows:24px minmax(0,1fr) 15px;overflow:hidden;border:1px solid #555159;border-radius:6px;background:#18181a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}.x-canvas-theme-preview:before{content:"";grid-column:1/-1;border-bottom:1px solid #4b4b4d;background:#29292c}.x-canvas-theme-preview:after{content:"";grid-column:2;grid-row:2;border:8px solid #202124;background:#e2e2e2;box-shadow:inset 0 0 0 1px #aaa}.x-canvas-theme-preview>i{display:block}.x-canvas-theme-preview>i:nth-child(1){grid-column:1;grid-row:2/4;border-right:1px solid #46474a;background:#242528}.x-canvas-theme-preview>i:nth-child(2){grid-column:3;grid-row:2/4;border-left:1px solid #46474a;background:#26272a}.x-canvas-theme-preview>i:nth-child(3){position:absolute;top:9px;left:48px;width:48px;height:3px;border-radius:3px;background:#aeb2b5}.x-canvas-theme-preview>b{grid-column:2;grid-row:3;border-top:1px solid #444549;background:#292a2d}.x-canvas-theme-preview.is-canvas>i:nth-child(3){background:linear-gradient(90deg,#50b8ae,#e6b65f)}.x-canvas-theme-preview.is-canvas:after{border-color:#2f4c49;box-shadow:inset 0 0 0 1px #50b8ae}.x-canvas-theme-preview.is-canvas>i:nth-child(1){box-shadow:inset -2px 0 #50b8ae}.x-canvas-theme-preview.is-canvas>i:nth-child(2){box-shadow:inset 2px 0 #e6b65f}
/** [CODEX - 2026-09-01 03:07:13] Contextual typography remains compact in the ribbon while direct editing preserves document-space geometry, native selection, and a theme-aware caret without rasterizing text. */
.x-canvas-ribbon-tabs [data-context-ribbon=text]{color:var(--canvas-theme-emphasis-strong)}.x-canvas-text-ribbon .x-canvas-ribbon-group{gap:5px}.x-canvas-text-ribbon label{min-width:72px}.x-canvas-text-ribbon input[type=number]{width:66px}.x-canvas-text-ribbon input[type=color]{width:34px;min-width:34px;padding:2px}.x-canvas-text-font-group label:first-of-type{min-width:168px}.x-canvas-text-font-group select{min-width:160px}.x-canvas-text-style-group button{min-width:44px}.x-canvas-text-style-group button>b,.x-canvas-text-style-group button>i{font-size:15px}.x-canvas-text-ribbon button.is-active{border-color:var(--canvas-theme-toolgroup-border);background:var(--canvas-theme-active-background);color:#fff}.x-canvas-text-editor{position:absolute;z-index:5;box-sizing:border-box;margin:0;padding:0;border:0;border-radius:0;outline:2px solid var(--canvas-focus);outline-offset:3px;background:transparent;box-shadow:none;caret-color:var(--canvas-accent);resize:none;overflow:hidden;white-space:pre-wrap;transform-origin:center center;tab-size:4;-webkit-text-fill-color:currentColor}.x-canvas-text-editor:focus{outline:2px solid var(--canvas-focus);box-shadow:0 0 0 5px color-mix(in srgb,var(--canvas-focus) 18%,transparent)}.x-canvas.is-text-editing .x-canvas-stage{cursor:text}
@media(max-width:900px){.x-canvas-text-ribbon label{display:flex;min-width:max-content}.x-canvas-text-ribbon .x-canvas-text-font-group label:first-of-type{min-width:150px}.x-canvas-text-ribbon .x-canvas-text-font-group select{min-width:142px}.x-canvas-text-ribbon .x-canvas-ribbon-group>span{display:none}.x-canvas-text-ribbon .x-canvas-text-style-group button{min-width:42px;padding:0 7px}}
@media(max-width:680px){.x-canvas-appearance-card.x-canvas-window{height:min(620px,calc(100dvh - 24px))}.x-canvas-appearance-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.x-canvas-appearance-nav{min-height:auto;flex-direction:row;padding:8px;border-right:0;border-bottom:1px solid #423d48}.x-canvas-appearance-nav>span{display:none}.x-canvas-appearance-nav>button{width:auto}.x-canvas-theme-grid{grid-template-columns:1fr}.x-canvas-appearance-content{padding:18px}}

/** [CODEX - 2026-09-02 02:03:11] Professional print setup uses the established Canvas application-window grammar, dense but readable measurement groups, and a dedicated physical output sheet that never prints editor chrome. */
.x-canvas-window-print{width:min(900px,calc(100vw - 40px));height:min(760px,calc(100dvh - 40px))}.x-canvas-print-body{display:block;overflow:auto}.x-canvas-print-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.x-canvas-print-grid>label,.x-canvas-print-measurements label{display:grid;min-width:0;gap:6px;color:#bcb7c1;font-size:13px;font-weight:650}.x-canvas-print-grid>label>small{color:#938e98;font-size:12px;font-weight:500}.x-canvas-print-grid input,.x-canvas-print-grid select,.x-canvas-print-measurements input{box-sizing:border-box;width:100%;height:34px;padding:0 9px;border:1px solid #4d4853;border-radius:5px;background:#211f25;color:#f0edf2;font:600 13px/1 Outfit,"Segoe UI",sans-serif;outline:none}.x-canvas-print-grid input:focus,.x-canvas-print-grid select:focus,.x-canvas-print-measurements input:focus{border-color:var(--canvas-focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--canvas-focus) 18%,transparent)}.x-canvas-print-summary{margin-top:11px;padding:10px 12px;border:1px solid #48434d;border-radius:6px;background:#29272d;color:#d4cfd8;font-size:13px;line-height:1.4}.x-canvas-print-custom-paper{margin-top:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.x-canvas-print-measurements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.x-canvas-print-measurements fieldset{display:grid;min-width:0;margin:0;padding:10px;border:1px solid #48434e;border-radius:7px;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;background:#28262c}.x-canvas-print-measurements legend{padding:0 5px;color:#aaa5ae;font-size:11px;font-weight:750;letter-spacing:.045em;text-transform:uppercase}.x-canvas-inline-checks{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:11px}.x-canvas-inline-checks .x-canvas-check{margin:0;font-size:13px}.x-canvas-new-resolution{display:grid;grid-template-columns:1fr 1fr;gap:10px}.x-canvas-print-stage{display:none}
@media(max-width:720px){.x-canvas-window-print{width:calc(100vw - 20px);height:calc(100dvh - 20px)}.x-canvas-print-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.x-canvas-print-measurements{grid-template-columns:1fr}.x-canvas-new-resolution{grid-template-columns:1fr}}
@media(max-width:470px){.x-canvas-print-grid{grid-template-columns:1fr}.x-canvas-print-measurements fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media print{
	@page{margin:0}
	html,body{width:auto!important;height:auto!important;margin:0!important;padding:0!important;background:#fff!important;overflow:visible!important}
	body>*:not(.x-canvas-print-stage){display:none!important}
	.x-canvas-print-stage{display:block!important;width:var(--canvas-print-paper-width);height:var(--canvas-print-paper-height);margin:0;padding:0;background:#fff;color:#000;print-color-adjust:exact;-webkit-print-color-adjust:exact}
	.x-canvas-print-sheet{position:relative;display:flex;box-sizing:border-box;width:100%;height:100%;align-items:flex-start;justify-content:flex-start;overflow:hidden;padding:var(--canvas-print-margin-top) var(--canvas-print-margin-right) var(--canvas-print-margin-bottom) var(--canvas-print-margin-left);background:#fff}
	.x-canvas-print-sheet.is-centered{align-items:center;justify-content:center}
	.x-canvas-print-sheet>img{display:block;max-width:none;max-height:none;object-fit:fill;transform-origin:center center}
	.x-canvas-print-sheet.is-mirrored>img{transform:scaleX(-1)}
	.x-canvas-print-sheet>small{position:absolute;right:max(2mm,var(--canvas-print-margin-right));bottom:max(2mm,var(--canvas-print-margin-bottom));font:7pt/1.2 Outfit,"Segoe UI",sans-serif;color:#111}
	.x-canvas-print-crop{position:absolute;width:8mm;height:8mm}.x-canvas-print-crop:before,.x-canvas-print-crop:after{content:"";position:absolute;background:#111}.x-canvas-print-crop:before{width:8mm;height:.2mm}.x-canvas-print-crop:after{width:.2mm;height:8mm}.x-canvas-print-crop.top-left{top:var(--canvas-print-margin-top);left:var(--canvas-print-margin-left);transform:translate(-8mm,-8mm)}.x-canvas-print-crop.top-right{top:var(--canvas-print-margin-top);right:var(--canvas-print-margin-right);transform:translate(8mm,-8mm) rotate(90deg)}.x-canvas-print-crop.bottom-right{right:var(--canvas-print-margin-right);bottom:var(--canvas-print-margin-bottom);transform:translate(8mm,8mm) rotate(180deg)}.x-canvas-print-crop.bottom-left{bottom:var(--canvas-print-margin-bottom);left:var(--canvas-print-margin-left);transform:translate(-8mm,8mm) rotate(270deg)}
	.x-canvas-print-registration{position:absolute;top:3mm;left:50%;width:6mm;height:6mm;border:.2mm solid #111;border-radius:50%;transform:translateX(-50%)}.x-canvas-print-registration:before,.x-canvas-print-registration:after{content:"";position:absolute;background:#111}.x-canvas-print-registration:before{top:2.8mm;left:-1mm;width:8mm;height:.2mm}.x-canvas-print-registration:after{top:-1mm;left:2.8mm;width:.2mm;height:8mm}
	.x-canvas-print-color-bars{position:absolute;right:3mm;bottom:3mm;width:36mm;height:4mm;background:linear-gradient(90deg,#00ffff 0 16.66%,#ff00ff 16.66% 33.33%,#ffff00 33.33% 50%,#000 50% 66.66%,#777 66.66% 83.33%,#fff 83.33%);border:.2mm solid #111}
	.x-canvas-print-stage[data-output-color=gray] .x-canvas-print-sheet>img{filter:grayscale(1)}
}
/** [CODEX - 2026-09-02 05:05:00] Unequal persona segments size to their complete icon-label content, suppress generic title-button hover rectangles, and expose measured indicator geometry for a continuous width-and-position slide. */
.x-canvas-editor-mode{display:flex;width:max-content;min-width:0;flex:0 0 auto;grid-template-columns:none;overflow:hidden;--canvas-mode-indicator-x:3px;--canvas-mode-indicator-width:68px}.x-canvas .x-canvas-editor-mode .x-canvas-editor-mode-indicator{left:0;width:var(--canvas-mode-indicator-width);transform:translate3d(var(--canvas-mode-indicator-x),0,0);transition:transform .22s cubic-bezier(.2,.8,.2,1),width .22s cubic-bezier(.2,.8,.2,1),background .18s}.x-canvas-editor-mode button{width:auto;min-width:max-content;flex:0 0 auto;padding:0 11px;overflow:visible;white-space:nowrap}.x-canvas .x-canvas-topbar .x-canvas-editor-mode button:hover,.x-canvas .x-canvas-topbar .x-canvas-editor-mode button:focus-visible{border-color:transparent;background:transparent;box-shadow:none}.x-canvas-editor-mode button>span{overflow:visible;text-overflow:clip}@media(max-width:620px){.x-canvas-editor-mode{width:max-content;flex-basis:auto}.x-canvas-editor-mode button{min-width:38px;padding:0 10px}} /* [CODEX - 2026-09-02 19:26:43] The measured selector rule wins by normal specificity, allowing Web Animations to interpolate it instead of being blocked by an important declaration. */
/** [CODEX - 2026-09-02 05:20:00] Saturated Studio gives each active persona a distinct restrained jewel tone while preserving the dark selector track and white selected content. */
.x-canvas[data-editor-mode=vector] .x-canvas-editor-mode-indicator{background:#405785}.x-canvas[data-editor-mode=pixel] .x-canvas-editor-mode-indicator{background:#287067}.x-canvas[data-editor-mode=template] .x-canvas-editor-mode-indicator{background:#76532e}
/** [CODEX - 2026-09-02 19:26:43] Explicit motion ownership prevents competing CSS geometry interpolation while preserving the selector's color transition and fallback behavior. */
.x-canvas .x-canvas-editor-mode .x-canvas-editor-mode-indicator.is-motion-owned{transition:background .18s} /* [CODEX - 2026-09-02 19:26:43] Match the measured geometry rule's specificity so script-owned movement cannot be delayed by the fallback transition. */
/** [CODEX - 2026-09-10 03:05:00] Focused AI workspace retains both inspector regions, removes the tool rail, and overrides complexity hiding only for its required surfaces. */
.x-canvas[data-editor-mode=ai] [data-ribbon]:not([data-ribbon=ai]),.x-canvas[data-editor-mode=ai] [data-ribbon-panel]:not([data-ribbon-panel=ai]),.x-canvas[data-editor-mode=ai] .x-canvas-inspector-lower [data-panel]:not([data-panel=assistant]),.x-canvas[data-editor-mode=ai] .x-canvas-inspector-lower [data-panel-content]:not([data-panel-content=assistant]){display:none!important}
.x-canvas[data-editor-mode=ai] [data-ribbon-panel=ai]{display:flex!important}.x-canvas[data-editor-mode=ai] [data-panel-content=assistant]{display:grid!important;grid-template-rows:37px minmax(0,1fr) auto auto} /* [CODEX - 2026-09-10 04:30:00] Preserve vertical conversation/composer layout even before active-panel classes are applied. */
.x-canvas[data-editor-mode=ai] .x-canvas-tools,.x-canvas[data-editor-mode=ai] [data-panel-resizer=left],.x-canvas[data-editor-mode=ai] .x-canvas-contextbar,.x-canvas[data-editor-mode=ai] .x-canvas-mouse-menu,.x-canvas[data-editor-mode=ai] .x-canvas-text-editor{display:none!important}
.x-canvas[data-editor-mode=ai] .x-canvas-body{grid-template-columns:minmax(0,1fr) var(--canvas-inspector-width)!important}
.x-canvas[data-editor-mode=ai][data-workspace] [data-ribbon=ai],.x-canvas[data-editor-mode=ai][data-workspace] [data-panel=assistant],.x-canvas[data-editor-mode=ai][data-workspace] [data-panel=history]{display:block!important}
.x-canvas[data-editor-mode=ai] .x-canvas-inspector-lower>.x-canvas-panel-tabs{grid-auto-columns:1fr}.x-canvas[data-editor-mode=ai] .x-canvas-editor-mode-indicator{background:#803c4b}.x-canvas[data-editor-mode=ai] .x-canvas-stage,.x-canvas[data-editor-mode=ai] #x-canvas-surface{cursor:default!important}
.x-canvas[data-editor-mode=ai] .x-canvas-mobile-nav [data-command=mobile-add],.x-canvas[data-editor-mode=ai] .x-canvas-mobile-nav [data-command=mobile-draw]{display:none!important}
@media(max-width:900px){.x-canvas[data-editor-mode=ai] .x-canvas-body{grid-template-columns:minmax(0,1fr)!important}.x-canvas[data-editor-mode=ai] .x-canvas-mobile-nav{grid-template-columns:repeat(2,1fr)}}
/** [CODEX - 2026-09-02 19:26:43] Lower Studio tabs remain a bounded horizontal rail, while every active panel and existing control grid shrinks inside the inspector instead of leaking across its edge. */
.x-canvas-inspector-lower,.x-canvas-inspector-lower>.x-canvas-panel-tabs,.x-canvas-inspector-lower>.x-canvas-panel{width:100%;min-width:0;max-width:100%}.x-canvas-inspector-lower>.x-canvas-panel-tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(66px,1fr);overflow-x:auto;overflow-y:hidden}.x-canvas-inspector-lower>.x-canvas-panel-tabs>button{min-width:0;white-space:nowrap}.x-canvas-inspector-lower>.x-canvas-panel{overflow-x:hidden;overflow-y:auto}.x-canvas-inspector-lower>.x-canvas-panel>*,.x-canvas-inspector-lower .x-canvas-properties,.x-canvas-inspector-lower .x-canvas-tool-settings,.x-canvas-inspector-lower .x-canvas-color-studio,.x-canvas-inspector-lower .x-canvas-assistant-panel>*{min-width:0;max-width:100%}.x-canvas-inspector-lower .x-canvas-property-grid,.x-canvas-inspector-lower .x-canvas-properties .x-canvas-inline-actions,.x-canvas-inspector-lower .x-canvas-color-studio-wells,.x-canvas-inspector-lower .x-canvas-color-model-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.x-canvas-inspector-lower .x-canvas-color-model-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.x-canvas-inspector-lower .x-canvas-properties label,.x-canvas-inspector-lower .x-canvas-color-studio label,.x-canvas-inspector-lower .x-canvas-setting-range,.x-canvas-inspector-lower .x-canvas-filter-row,.x-canvas-inspector-lower .x-canvas-assistant-form{min-width:0;max-width:100%}.x-canvas-inspector-lower input,.x-canvas-inspector-lower select,.x-canvas-inspector-lower textarea,.x-canvas-inspector-lower button{max-width:100%}.x-canvas-inspector-lower .x-canvas-color-studio canvas[data-color-wheel]{max-width:100%;height:auto;aspect-ratio:1}