:root{--app-font:var(--font-heading-cn);--app-font-display:var(--font-display-cn);--app-font-body:var(--font-body-cn);--app-font-mono:"JetBrains Mono", "SF Mono", Consolas, monospace;--app-ink:var(--color-text-primary);--app-ink-2:var(--color-text-secondary);--app-ink-3:var(--color-text-muted);--app-bg:var(--color-bg-base);--app-bg-raised:var(--color-bg-raised);--app-bg-overlay:var(--color-bg-overlay);--app-border:var(--color-border-subtle);--app-border-strong:var(--color-border-default);--app-accent:var(--color-accent-orange);--app-accent-warm:var(--color-accent-warm)}*{outline:none}body{background-color:var(--app-bg);color:var(--app-ink);font-family:var(--app-font);font-size:var(--text-base);line-height:var(--leading-cn-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;margin:0;padding:0;position:relative}body:before{content:"";z-index:-1;pointer-events:none;background:0 0;position:fixed;inset:0}::selection{background:var(--app-accent);color:#fff}.app-container{max-width:1600px;margin:0 auto;padding:clamp(32px,4vw,64px) clamp(24px,4vw,40px) clamp(32px,4vw,48px)}.header{text-align:center;max-width:860px;animation:fadeInDown .9s var(--ease-default);margin:0 auto clamp(28px,3.6vw,48px)}.header-eyebrow{font-family:var(--app-font);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:.14em;text-transform:uppercase;color:var(--app-ink-2);margin-bottom:var(--space-4);align-items:center;gap:10px;display:inline-flex}.header-eyebrow:before,.header-eyebrow:after{content:"";background:var(--app-border-strong);width:28px;height:1px}.header h1{font-family:var(--app-font-display);font-weight:var(--weight-regular);font-size:clamp(2rem,4.4vw,3.4rem);line-height:var(--leading-cn-tight);letter-spacing:-.015em;color:var(--app-ink);margin:0 0 var(--space-4) 0}@media (width>=769px){.header h1{white-space:nowrap}}.header h1 em{color:var(--app-accent-warm);font-style:normal;font-weight:var(--weight-regular)}.header p{font-family:var(--app-font-body);color:var(--app-ink-2);font-size:clamp(1rem,1.15vw,1.12rem);line-height:var(--leading-cn-loose);max-width:48em;margin:0 auto}.header-hint{font-weight:var(--weight-medium);letter-spacing:.1em;text-transform:uppercase;flex-direction:column;align-items:center;gap:8px;display:flex;font-family:var(--app-font)!important;font-size:var(--text-xs)!important;color:var(--app-ink-3)!important;margin:var(--space-5) auto 0!important;line-height:1!important}.header-hint-row{white-space:nowrap;align-items:center;gap:10px;display:inline-flex}.header-hint-row:first-child:before,.header-hint-row:first-child:after{content:"";background:var(--app-border-strong);width:22px;height:1px}.header-hint-row--secondary{color:var(--app-ink-3);opacity:.85}.main-content{animation:fadeInUp .9s var(--ease-default) .15s backwards;grid-template-columns:440px 1fr;align-items:stretch;gap:clamp(20px,2.4vw,32px);display:grid}.card{background:var(--app-bg-raised);border:1px solid var(--app-border);border-radius:var(--radius-xl);height:100%;transition:border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);flex-direction:column;display:flex;overflow:hidden;box-shadow:0 2px 12px #1414130d}.card:hover{border-color:var(--app-border-strong);box-shadow:0 8px 28px #14141312}.card-header{border-bottom:1px solid var(--app-border);background:var(--app-bg-overlay);justify-content:space-between;align-items:center;min-height:66px;padding:18px 24px;display:flex}.card-title{font-family:var(--app-font-display);font-weight:var(--weight-medium);color:var(--app-ink);letter-spacing:-.01em;align-items:center;gap:10px;margin:0;font-size:1.18rem;display:flex}.card-title span{font-size:1.2rem}.card-content{flex-direction:column;flex:1;gap:20px;padding:24px;display:flex}.inline-label{font-family:var(--app-font);font-size:var(--text-sm);color:var(--app-ink-2);letter-spacing:.01em}.input-textarea{border:1px solid var(--app-border);border-radius:var(--radius-md);width:100%;min-height:480px;font-family:var(--app-font-mono);background:var(--app-bg-overlay);color:var(--app-ink);resize:none;transition:border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);flex:1;padding:18px;font-size:13.5px;line-height:1.65}.input-textarea:focus{border-color:var(--app-accent);box-shadow:0 0 0 3px #d9775733}.btn{border-radius:var(--radius-full);height:46px;font-family:var(--app-font);font-size:.92rem;font-weight:var(--weight-medium);letter-spacing:.01em;cursor:pointer;white-space:nowrap;width:100%;transition:transform var(--duration-fast) var(--ease-default), background var(--duration-normal) var(--ease-default), color var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:0 18px;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none!important;transform:none!important}.btn-primary{background:var(--app-accent);color:#fff;box-shadow:0 6px 18px #d977574d}.btn-primary:hover{background:var(--app-accent-warm);transform:translateY(-2px);box-shadow:0 10px 26px #c9644261}.btn-primary:active{transform:translateY(0)}.btn-secondary{color:var(--app-ink);border-color:var(--app-border-strong);background:0 0}.btn-secondary:hover{background:var(--app-bg-overlay);border-color:var(--app-ink);transform:translateY(-2px)}.btn-secondary:active{background:var(--app-bg-raised);transform:translateY(0)}.btn-sm{width:auto;height:36px;padding:0 16px;font-size:.82rem}.btn-accent{color:var(--app-accent-warm);background:#d9775714;border:1px solid #d9775738}.btn-accent:hover{background:#d9775724;border-color:#d9775761;transform:translateY(-1px)}.btn-accent:active{background:#d977572e;transform:translateY(0)}.button-group{flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;display:flex}.button-group .btn-primary{flex:1 1 0;width:auto;min-width:0;overflow:hidden}.button-group .btn-secondary{flex:1;min-width:140px}.btn-primary-label-stack{pointer-events:none;white-space:nowrap;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative}.btn-primary-label-stack .label-long,.btn-primary-label-stack .label-short{will-change:opacity, transform;transition:opacity .24s,transform .34s cubic-bezier(.32,.72,0,1)}.btn-primary-label-stack .label-short{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.btn-primary-label-stack .label-long{opacity:1;transform:translateY(0)}.btn-primary-label-stack .label-short,.btn-primary-label-stack[data-compact=true] .label-long{opacity:0;transform:translateY(6px)}.btn-primary-label-stack[data-compact=true] .label-short{opacity:1;transform:translateY(0)}.diagram-container{width:100%;min-height:600px;transition:background-image var(--duration-normal) var(--ease-default);background-color:#fff;background-image:radial-gradient(#14141324 1.5px,#0000 1.5px);background-size:24px 24px;border:none;border-radius:0;flex:1;position:relative;overflow:hidden;box-shadow:inset 0 1px #14141305}.diagram-container.no-grid{background-color:#fff;background-image:none}.diagram-container.fullscreen{background-color:#fff;z-index:9999!important;width:100vw!important;height:100vh!important;box-shadow:none!important;border-radius:0!important;margin:0!important;position:fixed!important;inset:0!important}.fullscreen-toggle,.background-toggle,.colorize-toggle,.attrs-toggle,.history-toggle,.force-toggle,.smart-layout-toggle,.force-align-toggle,.drawio-export-toggle{border:1px solid var(--app-border);background:color-mix(in srgb, var(--app-bg-overlay) 92%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;z-index:100;width:40px;height:40px;transition:transform var(--duration-fast) var(--ease-default), background var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);border-radius:50%;place-items:center;display:grid;position:absolute;left:16px;box-shadow:0 2px 8px #1414130f}.fullscreen-toggle{top:16px}.background-toggle{top:64px}.colorize-toggle{top:112px}.attrs-toggle{top:160px}.history-toggle{top:208px}.force-toggle{top:256px}.smart-layout-toggle{top:304px}.force-align-toggle{top:352px}.drawio-export-toggle{top:400px}.fullscreen-toggle:hover,.background-toggle:hover,.colorize-toggle:hover,.attrs-toggle:hover,.history-toggle:hover,.force-toggle:hover,.smart-layout-toggle:hover,.force-align-toggle:hover,.drawio-export-toggle:hover{border-color:var(--app-accent);transform:scale(1.06);box-shadow:0 6px 16px #1414131a}.fullscreen-toggle:active,.background-toggle:active,.colorize-toggle:active,.attrs-toggle:active,.history-toggle:active,.force-toggle:active,.smart-layout-toggle:active,.force-align-toggle:active,.drawio-export-toggle:active{transform:scale(.95)}.fullscreen-toggle>svg,.background-toggle>svg,.colorize-toggle>svg,.attrs-toggle>svg,.history-toggle>svg,.force-toggle>svg,.smart-layout-toggle>svg,.force-align-toggle>svg,.drawio-export-toggle>svg{color:var(--app-ink-2);transition:color var(--duration-fast) var(--ease-default);font-size:16px;display:block}.fullscreen-toggle:hover>svg,.background-toggle:hover>svg,.colorize-toggle:hover>svg,.attrs-toggle:hover>svg,.history-toggle:hover>svg,.force-toggle:hover>svg,.smart-layout-toggle:hover>svg,.force-align-toggle:hover>svg,.drawio-export-toggle:hover>svg{color:var(--app-accent-warm)}.fullscreen-toggle.active{background:var(--app-accent);border-color:var(--app-accent-warm);box-shadow:0 4px 14px #d9775738}.fullscreen-toggle.active>svg{color:#fff}.force-toggle.active{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 50%,#fed7aa 100%);border-color:#d9775766;box-shadow:0 4px 14px #d9775738}.force-toggle.active>svg{color:#c96442}.force-toggle.active:hover{background:linear-gradient(135deg,#fde68a 0%,#fcd34d 50%,#fdba74 100%);border-color:#d977578c}.force-toggle.active:hover>svg{color:#b04a2c}.colorize-toggle.active{background:linear-gradient(135deg,#dbeafe 0%,#f3e8ff 50%,#ffe4e6 100%);border-color:#0ea5e94d;box-shadow:0 4px 14px #8b5cf62e}.colorize-toggle.active>svg{color:#0ea5e9}.colorize-toggle.active:hover{background:linear-gradient(135deg,#bfdbfe 0%,#e9d5ff 50%,#fecdd3 100%);border-color:#0ea5e973}.colorize-toggle.active:hover>svg{color:#0284c7}.attrs-toggle,.colorize-toggle,.force-toggle{overflow:hidden}.attrs-toggle:after,.colorize-toggle:after,.force-toggle:after{content:"";background:var(--app-ink-2);transform-origin:50%;width:28px;height:2px;transition:transform var(--duration-normal) var(--ease-default), background var(--duration-fast) var(--ease-default);pointer-events:none;border-radius:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-45deg)scaleX(0)}.attrs-toggle.active:after,.colorize-toggle:not(.active):after,.force-toggle:not(.active):after{transform:translate(-50%,-50%)rotate(-45deg)scaleX(1)}.attrs-toggle:hover:after,.colorize-toggle:hover:after,.force-toggle:hover:after{background:var(--app-accent-warm)}.loading-overlay{background:color-mix(in srgb, var(--app-bg-overlay) 78%, transparent);z-index:10;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);place-items:center;display:grid;position:absolute;inset:0}.spinner{border:3px solid #d977572e;border-top-color:var(--app-accent);width:44px;height:44px;animation:spin 1s var(--ease-gentle) infinite;border-radius:50%}.error-message{color:var(--color-error);border-radius:var(--radius-md);background:#c0453a14;border:1px solid #c0453a38;align-items:center;gap:10px;padding:14px 18px;font-size:.95rem;display:flex}.diagram-error-overlay{z-index:8;pointer-events:none;place-items:center;padding:24px;display:grid;position:absolute;inset:0}.diagram-error-overlay .error-message{pointer-events:auto;background:var(--app-bg-overlay);max-width:min(520px,90%);box-shadow:0 6px 24px #00000014}.legend-item{background:var(--app-bg-overlay);border:1px solid var(--app-border);font-family:var(--app-font);color:var(--app-ink-2);transition:color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:.78rem;display:flex}.legend-item:hover{color:var(--app-ink);border-color:var(--app-border-strong)}.cm-host{border-radius:var(--radius-md);height:480px;box-shadow:0 0 0 1px var(--app-border);transition:box-shadow var(--duration-normal) var(--ease-default);background:var(--app-bg-overlay);overflow:hidden}.cm-host:focus-within{box-shadow:0 0 0 1.5px var(--app-accent), 0 0 0 4.5px #d9775738}.cm-host .cm-editor{height:100%;font-family:var(--app-font-mono);color:var(--app-ink);background:0 0;font-size:13.5px}.cm-host .cm-editor.cm-focused{outline:none}.cm-host .cm-scroller{font-family:inherit;line-height:1.65}.cm-host .cm-gutters{background:var(--app-bg-raised);border-right:1px solid var(--app-border);color:var(--app-ink-3)}.cm-host .cm-lineNumbers .cm-gutterElement{color:var(--app-ink-3)}.cm-host .cm-cursor,.cm-host .cm-dropCursor{border-left:1.5px solid var(--app-accent-warm)}.cm-host,.cm-host .cm-editor,.cm-host .cm-scroller,.cm-host .cm-content,.cm-host .cm-line{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='20' viewBox='0 0 13 20'><g fill='none' stroke-linecap='round'><g stroke='white' stroke-width='2.6'><line x1='6.5' y1='2.5' x2='6.5' y2='17.5'/><line x1='3.5' y1='2.75' x2='9.5' y2='2.75'/><line x1='3.5' y1='17.25' x2='9.5' y2='17.25'/></g><g stroke='black' stroke-width='1.2'><line x1='6.5' y1='2.5' x2='6.5' y2='17.5'/><line x1='3.5' y1='2.75' x2='9.5' y2='2.75'/><line x1='3.5' y1='17.25' x2='9.5' y2='17.25'/></g></g></svg>") 6 10,text}.cm-host .cm-selectionBackground,.cm-host .cm-editor .cm-selectionLayer .cm-selectionBackground,.cm-host .cm-editor.cm-focused>.cm-scroller>.cm-selectionLayer .cm-selectionBackground{background:0 0!important}.cm-host .cm-content ::selection{color:currentColor!important;background-color:#d9775747!important}.cm-host .cm-content::selection{color:currentColor!important;background-color:#d9775747!important}.cm-host .cm-line ::selection{color:currentColor!important;background-color:#d9775747!important}.cm-host .cm-line::selection{color:currentColor!important;background-color:#d9775747!important}.cm-host .cm-content ::-moz-selection{color:currentColor!important;background-color:#d9775747!important}.cm-host .cm-content::-moz-selection{color:currentColor!important;background-color:#d9775747!important}.cm-host .cm-line ::-moz-selection{color:currentColor!important;background-color:#d9775747!important}.cm-host .cm-line::-moz-selection{color:currentColor!important;background-color:#d9775747!important}.cm-host .cm-activeLine{background:#d977570d}.cm-host .cm-activeLineGutter{color:var(--app-ink-2);background:#d9775714}.switch-control{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;display:inline-flex}.switch-control.is-disabled{cursor:not-allowed;opacity:.55}.switch-control-input{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.switch-control-track{width:30px;height:18px;transition:background var(--duration-normal) var(--ease-default);background:#0f172a2e;border-radius:999px;flex:none;display:inline-block;position:relative}.switch-control-thumb{width:14px;height:14px;transition:transform var(--duration-normal) var(--ease-default);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0f172a2e}.switch-control-input:checked+.switch-control-track{background:var(--app-accent)}.switch-control-input:checked+.switch-control-track .switch-control-thumb{transform:translate(12px)}.switch-control:hover .switch-control-input:checked+.switch-control-track{background:var(--app-accent-warm)}.switch-control-input:focus-visible+.switch-control-track{box-shadow:0 0 0 2px var(--app-bg-overlay), 0 0 0 4px #d9775773}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--app-border-strong);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong)}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=1200px){.main-content{grid-template-columns:1fr}}@media (width<=768px){.btn-primary:hover,.btn-secondary:hover,.btn-accent:hover{transform:none}.btn-primary:hover{background:var(--app-accent);box-shadow:0 6px 18px #d977574d}.btn-secondary:hover{border-color:var(--app-border-strong);background:0 0}.btn-accent:hover{background:#d9775714;border-color:#d9775738}.background-toggle:hover,.colorize-toggle:hover,.attrs-toggle:hover,.history-toggle:hover,.force-toggle:hover{border-color:var(--app-border);transform:none;box-shadow:0 2px 8px #1414130f}.btn-primary:active,.btn-secondary:active,.btn-accent:active{transform:scale(1.04)}.background-toggle:active,.colorize-toggle:active,.attrs-toggle:active,.history-toggle:active,.force-toggle:active{transform:scale(1.1)}.app-container{padding:20px 16px 24px}.header{margin-bottom:28px}.header h1{font-size:clamp(1.8rem,6vw,2.4rem)}.header p{font-size:.96rem}.header-hint-row{white-space:normal}.main-content{gap:20px}.card-header{min-height:56px;padding:14px 18px}.card-content{gap:16px;padding:18px}.card-title{font-size:1.02rem}.cm-host{height:320px}.cm-host .cm-editor{font-size:13px}.button-group{gap:10px}.btn{height:44px;font-size:.9rem}.btn-sm{height:36px;font-size:.78rem}.diagram-container{min-height:420px}}@media (width<=480px){.app-container{padding:16px 12px 24px}.header{margin-bottom:22px}.header-eyebrow{font-size:.68rem}.header h1{letter-spacing:-.02em;font-size:1.7rem}.header p{font-size:.88rem}.main-content{gap:16px}.card{border-radius:var(--radius-lg)}.card-header{padding:12px 14px}.card-content{gap:12px;padding:14px}.card-title{font-size:.96rem}.cm-host{height:260px}.cm-host .cm-editor{font-size:12px}.diagram-container{background-size:18px 18px;min-height:320px}.legend-item{padding:3px 9px;font-size:.72rem}.btn{height:42px;padding:0 14px;font-size:.85rem}.btn-sm{height:32px;padding:0 12px;font-size:.72rem}.output-section .card-header>div:first-child>div:last-child{display:none!important}.output-section .card-header{flex-wrap:wrap;justify-content:center!important}.output-section .card-header>div:last-child{flex-wrap:wrap;justify-content:center;gap:8px!important;margin:0!important}.card-header>div:last-child .switch-control{transform:scale(.92)}}.lang-switch{z-index:9999;background:color-mix(in srgb, var(--app-bg-overlay) 92%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--app-border);transition:opacity var(--duration-slow) var(--ease-default), border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);border-radius:999px;align-items:center;gap:0;padding:4px;display:inline-flex;position:absolute;top:20px;right:20px;box-shadow:0 2px 10px #1414130f}body.history-open .lang-switch{opacity:0;pointer-events:none}.lang-switch:hover{border-color:var(--app-border-strong);box-shadow:0 6px 16px #14141314}.lang-switch .lang-option{z-index:1;cursor:pointer;width:32px;height:32px;font-family:var(--app-font);font-size:.78rem;font-weight:var(--weight-medium);letter-spacing:.02em;color:var(--app-ink-3);transition:color .26s var(--ease-default);background:0 0;border:0;border-radius:50%;place-items:center;margin:0;padding:0;display:grid;position:relative}.lang-switch .lang-option:hover{color:var(--app-ink-2)}.lang-switch .lang-option.is-active{color:var(--app-ink)}.lang-switch .lang-thumb{background:var(--app-bg-raised);width:32px;height:32px;box-shadow:0 1.5px 4px #1414131a, 0 0 0 1px var(--app-border);pointer-events:none;border-radius:50%;transition:transform .38s cubic-bezier(.32,.72,.28,1);position:absolute;top:4px;left:4px}.lang-switch[data-lang=en] .lang-thumb{transform:translate(32px)}.lang-switch:focus-within{border-color:var(--app-accent);box-shadow:0 0 0 3px #d977572e}.lang-switch .lang-option:focus-visible{outline:none}.lang-fade-target{transition:opacity .22s var(--ease-default)}body.is-lang-fading .lang-fade-target{opacity:.28}@media (width<=500px){.lang-switch{top:14px;right:14px}.lang-switch .lang-option,.lang-switch .lang-thumb{width:28px;height:28px;font-size:.72rem}.lang-switch[data-lang=en] .lang-thumb{transform:translate(28px)}}.github-corner{z-index:9999;border:0;width:68px;height:68px;display:block;position:absolute;top:0;left:0;overflow:hidden}.github-corner svg{width:68px;height:68px;fill:var(--app-accent);color:#faf9f5;transition:fill var(--duration-normal) var(--ease-default);border:0;position:absolute;top:0;left:0;transform:scaleX(-1)}.github-corner:hover svg{fill:var(--app-accent-warm)}.github-corner .octo-arm{transform-origin:130px 106px}.github-corner:hover .octo-arm{animation:octocat-wave .64s var(--ease-default)}.github-corner:focus-visible{outline:none}.github-corner:focus-visible svg{fill:var(--app-accent-warm)}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (width<=500px){.github-corner,.github-corner svg{width:54px;height:54px}.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave .64s var(--ease-default)}}@media (prefers-color-scheme:dark){body:before{background:radial-gradient(60% 50% at 12% 0,#d977571f 0%,#0000 60%),radial-gradient(45% 45% at 100% 100%,#6a9bcc14 0%,#0000 55%)}.input-textarea,.cm-host{background:var(--color-bg-overlay);color:var(--app-ink)}.diagram-container{background-color:#fff}::-webkit-scrollbar-thumb{background:var(--color-border-default)}}.export-btn-wrap{flex:none;justify-content:flex-end;align-items:center;display:flex}.export-btn{color:#fff;cursor:pointer;white-space:nowrap;height:52px;font-family:var(--app-font);background:linear-gradient(#262626,#171717);border:0;border-radius:9999px;justify-content:center;align-items:center;padding:0;transition:width .56s cubic-bezier(.32,.72,0,1),transform .56s cubic-bezier(.32,.72,0,1),box-shadow .56s cubic-bezier(.32,.72,0,1);display:flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff1a,0 16px 32px -10px #0000004d}.export-btn[data-state=idle]{width:140px}.export-btn[data-state=open]{cursor:default;width:296px}.export-btn[data-state=loading]{cursor:default;width:200px}.export-btn[data-state=success]{cursor:default;width:180px}.export-btn[data-state=idle]:hover{transform:scale(1.02);box-shadow:inset 0 1px #ffffff1a,0 20px 40px -10px #0006}.export-btn[data-state=idle]:active{transform:scale(.97)}.export-btn:focus-visible{box-shadow:inset 0 1px 0 #ffffff1a, 0 16px 32px -10px #0000004d, 0 0 0 2px var(--app-bg), 0 0 0 4px var(--app-accent);outline:none}.export-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}.export-progress{pointer-events:none;background:#ffffff1a;width:0;transition:width .3s cubic-bezier(0,0,.2,1);position:absolute;top:0;bottom:0;left:0}.export-view{opacity:0;pointer-events:none;white-space:nowrap;justify-content:center;align-items:center;gap:8px;width:100%;transition:opacity .24s,transform .34s cubic-bezier(.32,.72,0,1);display:flex;position:absolute;inset:0;transform:translateY(6px)}.export-view.is-on{opacity:1;pointer-events:auto;transform:translateY(0)}.export-view-idle .idle-label{letter-spacing:.14em;font-size:15px;font-weight:600}.export-view-idle .arrow-icon{color:#d4d4d4;transition:transform .34s cubic-bezier(.32,.72,0,1)}.export-btn[data-state=idle]:hover .export-view-idle .arrow-icon{transform:translateY(2px)}.export-view-open{justify-content:space-between;gap:0;padding:0 6px}.export-opt{cursor:pointer;border-radius:9999px;flex:1;justify-content:center;align-items:center;height:40px;transition:background .2s;display:flex}.export-opt:hover{background:#40404080}.export-opt-label{letter-spacing:.06em;color:#d4d4d4;pointer-events:none;font-size:13px;font-weight:700;transition:color .2s}.export-opt[data-fmt=PNG]:hover .export-opt-label{color:#60a5fa}.export-opt[data-fmt=SVG]:hover .export-opt-label{color:#34d399}.export-opt[data-fmt=XML]:hover .export-opt-label{color:#f59e0b}.export-sep{background:#404040;flex:0 0 1px;width:1px;height:18px;margin:0 2px;transition:opacity .2s}.export-view-open:hover .export-sep{opacity:.4}.export-cancel{color:#a3a3a3;cursor:pointer;border-radius:9999px;flex:0 0 40px;justify-content:center;align-items:center;width:40px;height:40px;transition:background .2s,color .2s;display:flex}.export-cancel:hover{color:#fff;background:#40404080}.export-cancel svg{pointer-events:none}.export-view-loading .export-spinner{color:#a3a3a3;width:16px;height:16px;animation:.8s linear infinite export-spin}@keyframes export-spin{to{transform:rotate(360deg)}}.export-view-loading .loading-label{color:#e5e5e5;letter-spacing:.02em;font-size:14px;font-weight:500}.export-view-success .check-icon{color:#34d399;width:16px;height:16px}.export-view-success .check-icon path{stroke-dasharray:18;stroke-dashoffset:18px}.export-view-success.is-on .check-icon path{animation:.46s cubic-bezier(.32,.72,0,1) .18s forwards export-draw}@keyframes export-draw{to{stroke-dashoffset:0}}.export-view-success .success-label{color:#34d399;letter-spacing:.02em;font-size:14px;font-weight:500}.btn:focus-visible,.background-toggle:focus-visible,.colorize-toggle:focus-visible,.attrs-toggle:focus-visible,.history-toggle:focus-visible,.force-toggle:focus-visible,.github-corner:focus-visible{outline:2px solid var(--app-accent);outline-offset:3px}.history-overlay{z-index:1000;background:color-mix(in srgb, var(--app-bg) 96%, transparent);-webkit-backdrop-filter:blur(20px)saturate(135%);color:var(--app-ink);-webkit-user-select:none;user-select:none;touch-action:none;opacity:0;pointer-events:none;transition:opacity var(--duration-slow) var(--ease-default);position:fixed;inset:0;overflow:hidden}.history-overlay.is-open{opacity:1;pointer-events:auto}.history-overlay:not(.is-open) *{pointer-events:none!important}.history-overlay:before{content:"";filter:blur(40px);pointer-events:none;background:radial-gradient(#d9775742 0%,#0000 65%);width:55%;height:70%;position:absolute;inset:auto auto -18% -10%}.history-overlay:after{content:"";filter:blur(40px);pointer-events:none;background:radial-gradient(#c4b99a57 0%,#0000 70%);width:48%;height:58%;position:absolute;inset:-10% -12% auto auto}.history-header{z-index:5;pointer-events:none;font-family:var(--app-font-display);font-weight:var(--weight-regular);font-size:clamp(1.5rem,2vw,1.85rem);line-height:var(--leading-cn-tight);letter-spacing:-.015em;color:var(--app-ink);align-items:baseline;gap:14px;display:flex;position:absolute;top:clamp(24px,3vw,36px);left:clamp(24px,3vw,40px)}.history-header>svg{width:.78em;height:.78em;color:var(--app-accent-warm);position:relative;top:2px}.history-header .history-count{font-family:var(--app-font);font-weight:var(--weight-light);letter-spacing:.04em;color:var(--app-ink-2);font-size:.72em}.history-close{z-index:5;border:1px solid var(--app-border-strong);background:var(--app-bg-overlay);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:40px;height:40px;color:var(--app-ink);cursor:pointer;transition:transform var(--duration-fast) var(--ease-default), background var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default), color var(--duration-normal) var(--ease-default);border-radius:50%;place-items:center;display:grid;position:absolute;top:clamp(20px,2.4vw,28px);right:clamp(20px,2.4vw,32px);box-shadow:0 4px 12px #14141314}.history-close:hover{background:var(--app-bg-overlay);border-color:var(--app-accent);color:var(--app-accent-warm);transform:scale(1.06)}.history-close:active{transform:scale(.95)}.history-close:focus-visible{outline:2px solid var(--app-accent);outline-offset:3px}.history-hint{z-index:5;border-radius:var(--radius-full);border:1px solid var(--app-border-strong);background:var(--app-bg-overlay);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--app-ink-2);font-family:var(--app-font);font-size:var(--text-cn-sm);letter-spacing:.01em;pointer-events:none;transition:opacity .6s var(--ease-default);align-items:center;gap:10px;padding:10px 22px;display:flex;position:absolute;bottom:clamp(28px,4vw,44px);left:50%;transform:translate(-50%);box-shadow:0 10px 28px #1414131a}.history-hint>svg{color:var(--app-accent);animation:1.4s ease-in-out infinite history-bounce}@keyframes history-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.history-empty{pointer-events:none;text-align:center;place-items:center;display:grid;position:absolute;inset:0}.history-empty-card{align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-10);flex-direction:column;max-width:360px;display:flex}.history-empty-icon-wrap{background:color-mix(in srgb, var(--app-accent) 10%, var(--app-bg-overlay));border:1px solid color-mix(in srgb, var(--app-accent) 28%, transparent);width:88px;height:88px;margin-bottom:var(--space-2);border-radius:50%;place-items:center;display:grid;box-shadow:0 8px 24px #d977571f}.history-empty-icon-wrap>svg{width:30px;height:30px;color:var(--app-accent-warm)}.history-empty-title{font-family:var(--app-font-display);font-weight:var(--weight-regular);font-size:var(--text-xl);line-height:var(--leading-cn-snug);letter-spacing:-.01em;color:var(--app-ink)}.history-empty-hint{font-family:var(--app-font);font-size:var(--text-cn-sm);line-height:var(--leading-cn-normal);color:var(--app-ink-2)}.history-track{perspective:1400px;perspective-origin:50%;transform-style:preserve-3d;cursor:grab;position:absolute;inset:0}.history-track.is-dragging{cursor:grabbing}.history-card{border-radius:var(--radius-lg);background:var(--app-bg-overlay);width:320px;height:420px;transform-style:preserve-3d;will-change:transform;transition:box-shadow var(--duration-slow) var(--ease-default);position:absolute;top:50%;left:50%;overflow:hidden;box-shadow:0 30px 60px -16px #14141352,0 8px 16px -8px #1414132e}@media (width<=768px){.history-card{width:260px;height:360px}}.history-card-thumb{background-color:var(--app-bg-overlay);pointer-events:none;background-position:top;background-repeat:no-repeat;background-size:contain;position:absolute;inset:18px 16px 38%}.history-card-thumb.is-empty{background:linear-gradient(135deg, var(--app-bg-raised) 0%, color-mix(in srgb, var(--color-accent-sand) 22%, var(--app-bg-raised)) 100%);color:var(--app-ink-3);place-items:center;font-size:36px;display:grid}.history-card-track-overlay{background:color-mix(in srgb, var(--app-bg) 55%, transparent);pointer-events:none;opacity:calc(.55 - var(--shift,0) * .55);position:absolute;inset:0}.history-card-shade{background:linear-gradient(to top, var(--app-bg-overlay) 0%, color-mix(in srgb, var(--app-bg-overlay) 70%, transparent) 30%, transparent 58%);pointer-events:none;position:absolute;inset:0}.history-card-meta{z-index:2;pointer-events:none;font-family:var(--app-font);flex-direction:column;gap:10px;padding:20px 22px 22px;display:flex;position:absolute;inset:auto 0 0}.history-card-eyebrow{letter-spacing:.18em;text-transform:uppercase;font-size:11px;font-weight:var(--weight-semibold);color:var(--app-accent-warm)}.history-card-tags{flex-wrap:wrap;gap:6px;display:flex}.history-card-tags span{border-radius:var(--radius-full);background:color-mix(in srgb, var(--app-bg-raised) 80%, transparent);border:1px solid var(--app-border);color:var(--app-ink-2);letter-spacing:.02em;align-items:center;padding:3px 10px;font-size:11px;display:inline-flex}.history-card-actions{pointer-events:auto;opacity:var(--shift,0);transform:translateY(calc((1 - var(--shift,0)) * 16px));align-items:center;gap:12px;margin-top:4px;display:flex}.history-card-restore{border-radius:var(--radius-full);border:1px solid var(--app-accent);background:var(--app-accent);color:#fff;font-family:var(--app-font);font-size:13px;font-weight:var(--weight-medium);letter-spacing:.01em;cursor:pointer;transition:transform var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);align-items:center;gap:8px;padding:9px 18px;display:inline-flex;box-shadow:0 6px 16px #d9775747}.history-card-restore:hover{background:var(--app-accent-warm);border-color:var(--app-accent-warm);transform:translateY(-1px);box-shadow:0 10px 22px #c9644252}.history-card-restore:active{transform:translateY(0)scale(.97)}.history-card-delete{border-radius:var(--radius-full);border:1px solid var(--app-border);color:var(--app-ink-2);font-family:var(--app-font);cursor:pointer;transition:color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default);background:0 0;align-items:center;gap:6px;padding:8px 14px;font-size:12px;display:inline-flex}.history-card-delete:hover{color:var(--color-error);border-color:color-mix(in srgb, var(--color-error) 45%, transparent);background:color-mix(in srgb, var(--color-error) 8%, transparent)}.history-card-restore:focus-visible,.history-card-delete:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px}.history-card-frame{border-radius:var(--radius-lg);border:1px solid color-mix(in srgb, var(--app-ink) 8%, transparent);pointer-events:none;position:absolute;inset:0}