:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f5f1e8;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#0d0d0c;--shell:#141414;--shell-2:#1a1b1b;--shell-3:#202121;--line:#ffffff1f;--line-strong:#f2e8d385;--paper:#f1e8d0;--paper-shadow:#00000061;--muted:#aaa49a;--accent:#bd322e;--accent-strong:#db4139;--success:#69cf68;background:#111;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{min-width:320px;overflow:hidden}button,input{font:inherit}button{border:0}.app-shell{color:#f7efe3;background:radial-gradient(circle at 52% -20%,#fff6de14,#0000 28rem),linear-gradient(#181818,#101010);grid-template-rows:72px minmax(0,1fr) 54px;width:100%;height:100%;min-height:620px;display:grid}.top-bar,.status-bar{border-color:var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#141414f5;border-style:solid;border-width:0 0 1px;align-items:center;min-width:0;display:flex}.top-bar{justify-content:space-between;padding:0 28px}.brand{align-items:center;gap:16px;min-width:0;display:flex}.brand-mark{background:linear-gradient(135deg,#f2e8d32e,#f2e8d30a);border:1px solid #f6ecd761;border-radius:5px;place-items:center;width:24px;height:24px;display:grid}.brand-mark span{background:#f4ead7;border-radius:70% 35% 65%;width:10px;height:15px;transform:rotate(26deg)}h1{color:#f5e8cf;text-shadow:0 0 20px #f2e8d329;margin:0;font-family:Songti SC,STSong,Noto Serif CJK SC,serif;font-size:30px;font-weight:720;line-height:1.1}.top-actions{align-items:center;gap:10px;display:flex}.top-actions button,.rail-utility button{color:#e8e0d2;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:7px;place-items:center;width:38px;height:38px;transition:background .16s,border-color .16s,transform .16s,color .16s;display:grid}.top-actions button:hover,.rail-utility button:hover{color:#fff7e8;background:#ffffff12;border-color:#f2e8d333}.top-actions button:active,.rail-utility button:active,.tool-button:active,.panel-actions button:active{transform:translateY(1px)}.top-actions button:disabled{color:#f5f1e845;cursor:not-allowed;background:0 0;border-color:#0000}.top-actions .ghost-action{color:#f5f1e8}.top-actions .zoom-menu{color:#cfc7ba;width:64px;font-size:14px}.divider{background:var(--line);width:1px;height:28px;margin:0 4px}.workbench{grid-template-columns:118px minmax(360px,1fr) 328px;min-height:0;display:grid}.tool-rail{background:linear-gradient(180deg, #ffffff09, #ffffff02), var(--shell-2);border-right:1px solid var(--line);grid-template-rows:1fr auto auto;gap:20px;padding:30px 22px 24px;display:grid}.tool-stack{flex-direction:column;gap:20px;display:flex}.tool-button{color:#f4eadc;cursor:pointer;background:linear-gradient(#ffffff0e,#0000001f);border:1px solid #ffffff1a;border-radius:8px;place-items:center;gap:8px;width:74px;min-height:86px;transition:border-color .18s,background .18s,box-shadow .18s,color .18s;display:grid;box-shadow:inset 0 1px #ffffff0d}.tool-button span{color:currentColor;white-space:nowrap;max-width:100%;font-size:15px;font-weight:650;line-height:1.1}.tool-button:hover{background:#ffffff12;border-color:#f2e8d357}.tool-button.is-active{color:#fff5df;background:linear-gradient(#f2e8d324,#ffffff09),#ffffff0a;border-color:#ffecbee0;box-shadow:0 0 0 1px #ffecbe1f,0 14px 32px #00000038}.rail-utility{border-top:1px solid var(--line);gap:10px;padding-top:16px;display:grid}.active-colors{width:54px;height:54px;position:relative}.active-colors span{border:2px solid #f7ead3;border-radius:6px;width:36px;height:36px;position:absolute;box-shadow:0 10px 18px #00000040}.active-colors span:first-child{z-index:2;bottom:12px;left:0}.active-colors span:last-child{bottom:0;right:0}.canvas-stage{background-color:var(--paper-tint);background-blend-mode:multiply;touch-action:none;background-image:linear-gradient(#ffffff05,#00000008),url(/assets/xuan-paper.png);background-position:50%,50%;background-size:auto,cover;min-width:0;min-height:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #0000002e,inset 0 0 80px #34210f1a}.canvas-stage:before{pointer-events:none;content:"";mix-blend-mode:multiply;background:linear-gradient(90deg,#14141429,#0000 7% 93%,#14141424),linear-gradient(#14141414,#0000 8% 92%,#1414141a);position:absolute;inset:0}.canvas-stage canvas{z-index:1;cursor:crosshair;width:100%;height:100%;display:block;position:relative}.inspector{overscroll-behavior:contain;background:linear-gradient(180deg, #ffffff09, #fff0), var(--shell);border-left:1px solid var(--line);flex-direction:column;min-width:0;min-height:0;padding:24px 24px 20px;display:flex;overflow-y:auto;box-shadow:-24px 0 42px #00000038}.panel-title{justify-content:space-between;align-items:center;gap:16px;min-width:0;display:flex}.panel-title span,.control-group h2{color:#d9cfbd;margin:0 0 7px;font-size:14px;font-weight:720;display:block}.panel-title strong{color:#fff7e8;font-size:22px;font-weight:760;line-height:1.1;display:block}.brush-preview{background:linear-gradient(#2a2b2b,#1a1a1a);border:1px solid #ffffff26;border-radius:7px;align-items:center;height:64px;margin:18px 0 24px;padding:0 18px;display:flex;overflow:hidden}.brush-preview span{clip-path:polygon(0 48%,8% 34%,18% 26%,34% 21%,52% 27%,72% 38%,100% 52%,72% 65%,48% 62%,32% 58%,12% 56%);opacity:.92;background:linear-gradient(90deg,#0000,#fffffff2,#0000),radial-gradient(at 38% 54%,#ffffffd1,#0000 50%);width:100%;height:28px;display:block}.control-group{padding:0 0 23px}.control-group+.control-group{padding-top:4px}.swatches{grid-template-columns:repeat(4,minmax(36px,1fr));gap:10px;display:grid}.swatches button,.paper-grid button{cursor:pointer;border:1px solid #ffffff21;border-radius:7px;transition:border-color .16s,box-shadow .16s,transform .16s}.swatches button{height:34px}.swatches button:hover,.paper-grid button:hover{border-color:#ffecbe8c}.swatches button.is-selected,.paper-grid button.is-selected{border-color:#ffecbef5;box-shadow:0 0 0 2px #ffecbe1f,0 10px 24px #0000003d}.slider-row{color:#eee5d7;grid-template-columns:74px minmax(0,1fr) 44px;align-items:center;gap:12px;min-height:46px;display:grid}.slider-label{white-space:nowrap;align-items:center;gap:8px;min-width:0;font-size:14px;font-weight:650;display:inline-flex}.slider-row input{width:100%;accent-color:var(--accent-strong)}.slider-row output{color:#e9dfd0;background:#ffffff0a;border:1px solid #ffffff1f;border-radius:7px;place-items:center;min-width:40px;height:32px;font-size:13px;display:grid}.paper-grid{grid-template-columns:repeat(3,minmax(56px,1fr));gap:11px;display:grid}.paper-grid button{background-blend-mode:multiply;background-image:url(/assets/xuan-paper.png);background-position:50%;background-size:cover;min-height:58px}.panel-actions{flex-shrink:0;grid-template-columns:1fr 1.1fr;gap:12px;margin-top:auto;padding-top:18px;display:grid}.panel-actions button{color:#f7eadb;cursor:pointer;border-radius:7px;justify-content:center;align-items:center;gap:10px;min-height:54px;font-size:16px;font-weight:720;transition:background .16s,border-color .16s,transform .16s;display:inline-flex}.secondary-action{background:#ffffff09;border:1px solid #ffffff24}.secondary-action:hover{background:#ffffff12;border-color:#ffffff42}.primary-action{background:linear-gradient(#d84039,#a92220);border:1px solid #ff6e656b;box-shadow:0 14px 30px #a11e194d}.primary-action:hover{background:linear-gradient(#e44b42,#b72724)}.status-bar{color:#bdb5a8;border-width:1px 0 0;gap:24px;padding:0 28px;font-size:14px}.status-bar span{white-space:nowrap;align-items:center;gap:9px;min-width:0;display:inline-flex}.status-live{color:#e8dece;font-size:16px;font-weight:700}.status-live i{background:var(--success);border-radius:999px;width:12px;height:12px;box-shadow:0 0 20px #69cf6873}.footer-spacer{flex:1}.footer-icon{color:#dad1c3;font-weight:650}@media (width<=1080px){.app-shell{grid-template-rows:68px minmax(0,1fr) 50px}.top-bar{padding:0 18px}h1{font-size:25px}.workbench{grid-template-columns:94px minmax(320px,1fr) 286px}.tool-rail{padding:22px 13px 18px}.tool-button{width:66px;min-height:78px}.inspector{padding:20px 18px}}@media (width<=820px){body{overflow:auto}.app-shell{grid-template-rows:auto auto auto;height:auto;min-height:100%}.top-bar{flex-wrap:wrap;gap:12px;padding:14px}.brand{width:100%}.top-actions{justify-content:flex-end;width:100%}.workbench{grid-template-rows:auto minmax(420px,1fr) auto;grid-template-columns:1fr;min-height:0}.tool-rail{border-right:0;border-bottom:1px solid var(--line);grid-template-rows:auto;grid-template-columns:1fr auto;align-items:center;padding:12px}.tool-stack{flex-flow:row;gap:10px;overflow-x:auto}.tool-button{width:72px;min-width:72px;min-height:68px}.rail-utility{display:none}.active-colors{width:48px;height:48px}.canvas-stage{min-height:420px}.inspector{border-top:1px solid var(--line);border-left:0}.status-bar{flex-wrap:wrap;gap:12px 18px;padding:13px 14px}.footer-spacer,.footer-icon{display:none}}