:root{color-scheme:dark;--bg:#101416;--panel:#181f22;--line:#ffffff14;--text:#eef3f3;--muted:#91a3a8;--accent:#b3edcf;font-family:'Segoe UI','Microsoft YaHei',system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;color:var(--text);background:var(--bg);font-size:14px;line-height:1.5}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}a{color:inherit}h1,h2,p{margin:0}[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.site-shell{width:calc(100% - 48px);max-width:1500px;margin:22px auto 36px}
.toolNav{display:block;margin-bottom:18px}.toolNavRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.toolNavRow+.toolNavRow{margin-top:12px}.toolCard{display:flex;gap:12px;align-items:center;min-width:0;padding:14px 16px;min-height:80px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#ffffff0d,#ffffff05);text-decoration:none}.toolCard:hover{border-color:#b3edcf60}.toolCard.active{border-color:#b3edcf70;background:#b3edcf0c}.toolIcon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:#20332e;font-weight:700;font-size:20px;color:var(--accent)}.toolCard strong{display:block;font-size:14px}.toolCard small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.toolCard>span:last-child{min-width:0}.licenseBar{border-radius:12px}.licenseBar button,.licenseGate button{color:var(--text);background:#1e2c28;border:1px solid var(--line);padding:10px 14px;border-radius:7px}
.ghost-editor{border:1px solid var(--line);border-radius:18px;background:#121719;overflow:clip}.ghost-header{padding:16px 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.ghost-brand{display:flex;gap:12px;align-items:center}.brand-mark{display:grid;place-items:center;position:relative;width:42px;height:42px;background:#b3edcf10;border:1px solid #b3edcf38;border-radius:10px;color:var(--accent);font:italic 700 27px Georgia,serif}.brand-mark span{position:absolute;right:4px;bottom:0;font-size:16px}.ghost-brand strong{font-size:17px;letter-spacing:.5px}.ghost-brand small{display:block;font-size:9px;letter-spacing:1.5px;color:var(--muted);margin-top:3px}.local-tag{font-size:11px;color:#91b5a5}.ghost-content{padding:26px}.intro{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:24px}.eyebrow{color:var(--accent);font-size:10px;letter-spacing:2.2px;margin-bottom:8px}.intro h1{font-size:31px;letter-spacing:-.5px;line-height:1.35}.intro>div>p:last-child{font-size:12px;color:var(--muted);margin-top:9px}.experiment-tag{border:1px solid var(--line);padding:7px 12px;border-radius:50px;color:var(--muted);font-size:11px;white-space:nowrap}
.workbench{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px;align-items:start}.controls,.export-panel,.download-panel{padding:20px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.section-label{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}.section-label h2{font-size:12px;font-weight:650;letter-spacing:.3px}.text-button{background:none;border:0;padding:6px 4px;color:#abbeb6;font-size:11px}.text-button:hover{color:var(--accent)}.field{display:block;min-width:0}.field>span{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#b5c2c6;margin-bottom:8px}.field small{font-size:10px;color:var(--muted)}.field textarea,.field select{width:100%;border:1px solid #ffffff18;background:#0e1619;color:var(--text);border-radius:7px;padding:10px 12px}.field textarea{font-size:23px;letter-spacing:2px;line-height:1.55;resize:vertical;min-height:98px;max-height:175px}.field select{font-size:12px}.hint{font-size:10px;color:var(--muted);line-height:1.8;margin-top:9px}.divider{height:1px;background:var(--line);margin:22px 0}.mode-options{display:grid;gap:8px}.mode-options button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border:1px solid var(--line);border-radius:9px;background:#10181b;color:#a4b2b8}.mode-options button[aria-pressed=true]{border-color:#b3edcf70;background:#b3edcf09;color:var(--accent)}.mode-symbol{font-size:23px;min-width:25px;text-align:center}.mode-options b{display:block;font-size:12px;font-weight:600}.mode-options small{display:block;font-size:10px;opacity:.7;margin-top:4px}.slider{display:block;margin:18px 0 0}.slider>span{display:flex;justify-content:space-between;font-size:11px;color:#b5c2c6}.slider output{color:var(--accent);font-variant-numeric:tabular-nums}.slider input{width:100%;margin:12px 0 0;accent-color:var(--accent);height:18px}
.result-column{display:grid;gap:16px;min-width:0}.preview-panel{border:1px solid var(--line);border-radius:13px;background:#181f22;overflow:hidden}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px}.live-label{display:flex;gap:8px;align-items:center;font-size:11px}.live-label i{width:5px;height:5px;border-radius:50%;background:var(--accent)}.live-label strong{font-weight:500}.live-label span{font-size:10px;color:#91ac9f;background:#b3edcf0a;border-radius:4px;padding:4px 8px}.canvas-wrap{position:relative;display:flex;align-items:center;justify-content:center;background:#090d10;margin:0 16px;border:1px solid #ffffff08;border-radius:8px;overflow:hidden;min-height:220px}#ghost-canvas{display:block;max-width:100%;max-height:540px;width:100%;height:auto;object-fit:contain;image-rendering:pixelated}#guide-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}#paused-badge{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:#182b27eb;border:1px solid #b3edcf38;color:#c1ead7;font-size:11px;padding:7px 12px;border-radius:6px;white-space:nowrap}.preview-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;font-size:10px;color:var(--muted)}.preview-footer>div{display:flex;gap:15px}.guide-line{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#b7c7c1;gap:12px}.guide-line input{accent-color:var(--accent);vertical-align:middle}.guide-line small,.guide-line>span{font-size:10px;color:var(--muted)}.guide-line small{margin-left:5px}.export-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.export-actions{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}.primary,.secondary{padding:10px 16px;border-radius:8px;font-size:12px;font-weight:600;line-height:1.4;text-decoration:none;text-align:center}.primary{border:1px solid var(--accent);background:var(--accent);color:#142e24}.primary:hover{background:#c9f7de}.secondary{border:1px solid #ffffff20;color:#c2d1ce;background:#0e171a}.secondary:hover{border-color:#b3edcf70}.preview-toolbar .secondary{padding:7px 12px;font-size:11px}#status{font-size:11px;color:var(--muted);margin-top:13px}#status[data-state=error],#input-error{color:#ffb4a7}#input-error{font-size:11px;margin-top:10px}progress{width:100%;height:7px;accent-color:var(--accent);margin-top:16px}.download-panel img{display:block;width:auto;max-width:100%;max-height:360px;margin:0 auto;border:1px solid var(--line);image-rendering:pixelated}.download-actions{display:flex;gap:12px;margin-top:16px}#file-info{font-size:10px;color:var(--muted)}.bottom-note{font-size:10px;color:#7e9298;line-height:1.8}
@media(max-width:1040px){.workbench{grid-template-columns:250px minmax(0,1fr);gap:16px}.ghost-content{padding:20px}.controls{padding:17px}.toolCard{padding:12px}.toolCard strong{font-size:13px}.guide-line>span{display:none}}
@media(max-width:800px){.site-shell{width:calc(100% - 24px);margin:12px auto 24px}.toolNavRow{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.toolNavRow+.toolNavRow{margin-top:8px}.toolCard{min-height:58px;padding:10px;border-radius:10px;gap:9px}.toolCard small{display:none}.toolIcon{width:29px;height:29px;flex-basis:29px;border-radius:8px;font-size:17px}.workbench{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.controls>.section-label,.controls>.field,.controls>.hint,.controls>.divider,.controls>.mode-options,#input-error{grid-column:1/-1}.mode-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.mode-options button{padding:10px 5px;display:block;text-align:center}.mode-options small{font-size:9px}.mode-symbol{display:block}.ghost-header{padding:14px 18px}.ghost-header>.local-tag{display:none}.intro h1{font-size:26px}.intro .experiment-tag{display:none}.ghost-content{padding:20px 14px}.preview-panel{order:0}.result-column{gap:13px}.canvas-wrap{min-height:160px;margin:0 10px}.preview-toolbar{padding:12px}.live-label>span{display:none}.export-panel{padding:16px}.export-settings{gap:8px}.field select{font-size:11px;padding:9px 5px}.guide-line small{font-size:9px}.preview-footer{padding:9px 12px}.preview-footer>div{gap:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.clarity-setting{grid-column:1/-1;border:1px solid #b3edcf30;border-radius:8px;padding:0 12px 12px;margin-top:14px;background:#b3edcf05}.clarity-presets{display:flex;gap:14px;justify-content:space-between}.video-format{max-width:320px;margin-top:16px}.download-panel video{display:block;width:100%;max-height:400px;background:#0c1115;border-radius:7px}.download-panel video[hidden]{display:none}.export-actions .primary{white-space:nowrap}


.motion-only-note{grid-column:1/-1;padding:12px;border:1px solid #b3edcf30;border-radius:8px;background:#b3edcf05;margin-top:14px}.motion-only-note strong{font-size:12px;color:var(--accent)}.motion-only-note .hint{font-size:11px}.guide-line>span{display:block!important}

.font-style{margin-top:14px}.canvas-wrap{min-height:0}#ghost-canvas{width:auto;max-height:min(64vh,640px);max-width:100%;object-fit:contain}
@media(max-width:800px){.mode-options{grid-template-columns:repeat(2,minmax(0,1fr))}}