:root{color-scheme:dark;--bg:#101214;--panel:#16191c;--line:#303539;--muted:#a39981;--ink:#f3f0e9;--accent:#d7ceb8;--serif:Georgia,'Songti SC',serif;font-family:Inter,'Microsoft YaHei',sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.38;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid #ddd5c3;outline-offset:3px}.bar{height:68px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;border-bottom:1px solid #303436;background:#141719;padding:0 28px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:650;letter-spacing:.04em;white-space:nowrap}.brand i{font-style:normal;color:#787263;margin:0 5px}.mark{display:grid;place-items:center;color:#dcd3c0;font-size:27px}.bar-center{display:flex;align-items:center;justify-content:center;gap:9px}.project-dot,.stage-note i{width:6px;height:6px;background:#b5ad99;border-radius:50%}.bar-center input{width:170px;background:none;border:0;color:#e3ddce;text-align:center;font-size:13px}.bar-actions{display:flex;justify-content:flex-end;align-items:center;gap:18px}.bar-actions span{font-size:11px;color:#aca28c}.button{padding:10px 15px;border-radius:6px;font-size:12px}.quiet{background:#2a2927;border:1px solid #565247;color:#ebe6db}.quiet:hover{background:#3d3932}.workspace{display:grid;grid-template-columns:250px minmax(320px,1fr) 330px;height:calc(100dvh - 68px);min-height:650px}.rail,.inspector{background:#191c1e}.rail{border-right:1px solid var(--line);padding:30px 20px}.eyebrow{font-size:9px;letter-spacing:.16em;color:#b1a894;font-weight:700;margin:0}.eyebrow span{float:right;color:#787263}.rail h1{font:normal 25px var(--serif);margin:15px 0 8px}.muted{color:var(--muted);font-size:12px;line-height:1.7;margin:0}.rail-intro{max-width:180px}.category{display:flex;justify-content:space-between;margin:35px 0 13px;color:#b6ad9a;font-size:11px}.template{position:relative;text-align:left;width:100%;padding:8px;background:#272725;color:var(--ink);border:1px solid #686255;border-radius:8px}.template-art{height:112px;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:15px 25px;background:radial-gradient(ellipse at 50% 15%,#524d43,#1c1c1b 70%);border-radius:4px}.template-art i{border:1px solid #a1967d;background:linear-gradient(140deg,#aba28c,#39362f)}.template-art i:nth-child(2){background:linear-gradient(20deg,#232221,#aca38d)}.template-art i:nth-child(3){background:linear-gradient(135deg,#8c8b74,#38352e)}.template-info{display:flex;flex-direction:column;gap:6px;padding:14px 4px 5px}.template-info strong{font-size:13px}.template-info small{font-size:9px;letter-spacing:.12em;color:#a0957c}.template-arrow{position:absolute;right:15px;bottom:20px;color:#d0c5ab}.rail-note{font-size:11px;color:#8c8166;line-height:1.7;margin:22px 3px}.center{min-width:0;display:flex;flex-direction:column;padding:31px clamp(22px,4vw,64px) 25px;background:radial-gradient(ellipse at 50% 44%,#282826 0%,#181817 50%,#111416 100%)}.canvas-heading{display:flex;justify-content:space-between;align-items:end}.canvas-heading h2,.inspector h2{font:normal 20px var(--serif);margin:10px 0 0}.canvas-heading h2 span{color:#92866a;font:11px Inter,'Microsoft YaHei',sans-serif}.canvas-badge{padding:7px 9px;border:1px solid #48443b;border-radius:4px;color:#beb6a5;font-size:10px}.canvas-well{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;padding:30px 0}.canvas-wrap{width:min(100%,860px);max-height:100%;aspect-ratio:16/9;position:relative;box-shadow:0 25px 70px #0009;background:#161b20;overflow:hidden}.canvas-wrap canvas{display:block;width:100%;height:100%;object-fit:contain}.canvas-loading{position:absolute;inset:0;display:grid;place-items:center;background:#1e1d1c;color:#d2c8b0;font-size:12px;letter-spacing:.08em}.canvas-loading[hidden]{display:none}.corner-label{position:absolute;bottom:12px;left:0;font-size:9px;letter-spacing:.15em;color:#726c5d}.transport{display:flex;align-items:center;gap:15px;border-top:1px solid #444038;padding-top:18px}.play{flex:none;width:35px;height:35px;border-radius:50%;border:1px solid #8e8267;color:#e7e1d4;background:#343330;font-size:12px}.clock{white-space:nowrap;color:#b9b19e;font-size:11px;font-variant-numeric:tabular-nums}.transport input{flex:1}.timeline-end{font-size:9px;letter-spacing:.12em;color:#8c8166}.stage-note{display:flex;justify-content:space-between;color:#928669;font-size:10px;margin-top:18px}.stage-note span:first-child{display:flex;align-items:center;gap:8px}.inspector{display:flex;flex-direction:column;border-left:1px solid var(--line);min-height:0}.inspector-title{padding:30px 24px 23px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.inspector-icon{font-size:23px;color:#a9a089}.inspector-scroll{overflow:auto;padding:0 24px}.control-section{padding:23px 0;border-bottom:1px solid #313638}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.section-title h3{font-size:13px;margin:0}.section-title>span{font-size:9px;letter-spacing:.12em;color:#9f947a}.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:15px}.slot{position:relative;aspect-ratio:1;min-width:0;background:#2e2d2b;border:1px solid #545045;border-radius:5px;overflow:hidden}.slot-main{border:0;width:100%;height:100%;padding:0;background:transparent;color:#e7e2d5}.slot-main img,.slot-main video{width:100%;height:100%;display:block;object-fit:cover}.slot-main .number{position:absolute;left:4px;bottom:4px;background:#181817cc;padding:2px 4px;font-size:9px;border-radius:2px}.slot-remove{position:absolute;right:3px;top:3px;border:0;border-radius:50%;background:#181817c9;color:white;width:20px;height:20px;line-height:20px;font-size:12px;padding:0}.slot-actions{display:flex;justify-content:space-between;gap:4px;margin-top:12px}.text-button{border:0;padding:3px 0;color:#dbd2be;background:transparent;font-size:11px}.muted-button{color:#a0967d}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#141413;border-radius:6px;padding:4px;margin:15px 0}.segmented button{color:#b1a894;border:0;background:transparent;border-radius:4px;padding:10px 4px;font-size:12px}.segmented button small{font-size:10px;color:#a1977e;margin-left:4px}.segmented button[aria-pressed=true]{background:#403d35;color:#f5f3ee}.field{display:block;margin:18px 0 0}.field>span{display:flex;justify-content:space-between;font-size:12px;color:#d8cfb9}.field output{color:#b0a791;font-size:11px}input[type=range]{width:100%;height:4px;appearance:none;border-radius:3px;background:#46433a;accent-color:#d5cbb3;margin:13px 0 0}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#e1dbcb;box-shadow:0 0 0 3px #887d63}.transport input{margin:0}.select-label,.color-label,.input-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#d8cfb9;margin-top:18px}select,.input-label input{background:#292927;border:1px solid #4a463c;border-radius:4px;color:#eeeae1;padding:8px}.input-label{align-items:stretch;flex-direction:column}.input-label input{width:100%}input[type=color]{border:1px solid #696356;border-radius:5px;background:#292927;padding:2px;width:43px;height:28px}.inspector-footer{margin-top:auto;padding:15px 24px;display:flex;justify-content:space-between;color:#94886b;font-size:9px;letter-spacing:.04em;border-top:1px solid var(--line)}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);background:#e4decf;color:#1d1d1c;padding:11px 17px;border-radius:6px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:5}.toast.show{opacity:1;transform:translate(-50%,0)}
.center{min-height:0;overflow:hidden}.canvas-well{overflow:hidden}.canvas-wrap.portrait{height:min(100%,650px);width:auto;max-width:100%}.slot.drag-over{outline:2px solid #e4ded0;outline-offset:2px}.slot-move{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);display:flex;gap:1px}.slot-move button{width:18px;height:18px;line-height:16px;padding:0;border:0;background:#181817c9;color:#f3f0ea;border-radius:2px}.slot-move button:disabled{visibility:hidden}.toggle-label{display:flex;align-items:center;justify-content:space-between;margin-top:18px;color:#d8cfb9;font-size:12px}.toggle-label input{accent-color:#d7cdb7;width:16px;height:16px}.background-label{font-size:12px;color:#d8cfb9;margin-top:23px}.background-tabs{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:3px;background:#141413;border-radius:6px;padding:4px;margin-top:10px}.background-tabs button{color:#b1a894;border:0;background:transparent;border-radius:4px;padding:9px 2px;font-size:11px}.background-tabs button[aria-pressed=true]{background:#403d35;color:#f5f3ee}.background-name{display:block;color:#a59a82;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:8px}.export-button{background:#ddd5c2;color:#1e1d1c;border:1px solid #ddd5c2;font-weight:650}.export-button:hover{background:#e9e4d8}.bar-actions{gap:10px}dialog{width:min(420px,calc(100% - 36px));border:1px solid #565146;border-radius:10px;padding:25px;background:#1f1e1c;color:#f3f0e9;box-shadow:0 25px 90px #000a}dialog::backdrop{background:#0a0a09cc;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:start}.dialog-head h2{font:normal 24px var(--serif);margin:11px 0}.dialog-close{background:none;border:0;color:#cabda0;font-size:24px;line-height:1}.dialog-copy,.export-meta{font-size:12px;line-height:1.7;color:#b3ab97}.export-meta{margin:17px 0}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.progress-heading{display:flex;justify-content:space-between;font-size:11px;color:#d4cab3;margin-bottom:10px}progress{width:100%;height:6px;accent-color:#d4cab3}
.recovery-item{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid #403d35;color:#e1daca;font-size:12px}.recovery-item input{max-width:100%;color:#bdb6a5;font-size:11px}.recovery-item input::file-selector-button{border:1px solid #635e51;border-radius:4px;background:#2f2e2c;color:#efebe2;padding:7px 10px;margin-right:9px}.export-button:disabled{opacity:.45;cursor:not-allowed}#recovery-list{max-height:40vh;overflow:auto}
.rail{overflow:auto}.template{margin-bottom:10px;border-color:#3e3a32}.template[aria-pressed=true]{border-color:#b2a995;background:#32312e}.stack-art{position:relative;display:block}.stack-art i{position:absolute;left:25%;width:50%;height:62%;top:19%;border-radius:3px;box-shadow:0 5px 12px #161514aa}.stack-art i:nth-child(1){transform:translate(12px,-7px);opacity:.5}.stack-art i:nth-child(2){transform:translate(8px,-4px);opacity:.7}.stack-art i:nth-child(3){transform:translate(4px,-2px);opacity:.85}.stack-art i:nth-child(4){transform:translate(0,0)}
@media(max-width:1100px){.workspace{grid-template-columns:195px minmax(280px,1fr) 300px}.rail{padding:25px 15px}.center{padding-left:24px;padding-right:24px}.inspector-scroll{padding:0 18px}}
@media(max-width:760px){.bar{padding:0 15px;grid-template-columns:1fr auto;height:60px}.bar-center{display:none}.bar-actions span{display:none}.workspace{height:auto;display:flex;flex-direction:column}.rail{border-right:0;border-bottom:1px solid var(--line);padding:20px}.rail h1{font-size:21px}.rail-intro,.category,.rail-note{display:none}.template{display:flex;align-items:center;margin-top:16px;max-width:300px}.template-art{width:82px;height:58px;flex:none;padding:8px 18px}.template-info{padding:0 14px}.center{min-height:440px;overflow:visible;padding:24px 18px}.canvas-well{height:300px;min-height:270px}.inspector{border-left:0;border-top:1px solid var(--line)}.inspector-title{padding:22px}.inspector-scroll{overflow:visible;padding:0 22px}.inspector-footer{padding:18px 22px}.stage-note{gap:10px}}

.slot-visibility{position:absolute;left:3px;top:3px;border:0;background:#181817c9;color:#efebe3;font-size:9px;padding:3px;border-radius:3px}.bar-actions #undo,.bar-actions #redo{padding:7px 10px;min-width:32px}.button:disabled{opacity:.45;cursor:not-allowed}

.animation-controls{border-top:1px solid #403d35;margin-top:20px;padding-top:14px}.animation-controls h3{font-size:13px}.keyframe-row{display:flex;justify-content:space-between;border-bottom:1px solid #3b3830;padding:7px 0}.animation-controls input[type=number]{width:85px;background:#292927;border:1px solid #5b564a;color:#eeeae1;padding:7px;border-radius:4px}@media(max-width:480px){.bar{padding:0 8px}.brand{font-size:12px}.bar-actions{gap:4px}.bar-actions .button{padding:7px 8px}.bar-actions #undo,.bar-actions #redo{min-width:25px;padding:7px 5px}}

fieldset{padding:0;margin:0;border:0;min-width:0}fieldset:disabled{opacity:.45}.input-label textarea{width:100%;resize:vertical;min-height:60px;background:#292927;border:1px solid #4a463c;border-radius:4px;color:#eeeae1;padding:9px;font:inherit;line-height:1.6}.segmented{grid-template-columns:repeat(3,minmax(0,1fr))}.layer-row{display:flex;align-items:center;gap:4px;border:1px solid #403d35;border-radius:5px;padding:5px;margin:6px 0;background:#252523}.layer-row.selected{border-color:#b6ad9a;background:#38352e}.layer-select{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;background:none;border:0;color:#e9e4d8;padding:5px;font-size:11px}.layer-actions{display:flex;gap:2px}.layer-actions button{border:0;background:transparent;color:#c9bc9f;padding:4px;font-size:11px}.layer-actions button:disabled{opacity:.2}.layer-background{font-size:11px;color:#9c9176;padding:10px;border-top:1px solid #403d35;margin-top:8px}#layer-list{max-height:280px;overflow:auto}.timeline-dock{border-top:1px solid #464239;margin-top:12px;padding-top:10px}.timeline-heading{display:flex;justify-content:space-between;font-size:10px;color:#a69c85;margin-bottom:7px}.timeline-heading span:last-child{font-size:9px;color:#7e7767}#timeline-tracks{max-height:126px;overflow:auto}.track-row{display:flex;gap:9px;align-items:center;height:31px}.track-name{width:102px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#b0a792}.track-lane{flex:1;position:relative;height:22px;background:repeating-linear-gradient(90deg,#32312e 0 1px,transparent 1px 25%),#1f1e1d;border-radius:3px;margin:0 7px}.track-lane:after{content:'';position:absolute;pointer-events:none;left:var(--playhead,0%);top:0;bottom:0;border-left:1px solid #eae5da}.keyframe-dot{position:absolute;top:6px;width:10px;height:10px;padding:0;border:1px solid #d1c6ac;background:#9d9278;transform:translateX(-50%) rotate(45deg);touch-action:none;z-index:1}.keyframe-dot.active{background:#f1d98c;border-color:#fff5cd}.keyframe-dot:focus-visible{outline:2px solid #f9ecc5;outline-offset:3px}.timeline-empty{font-size:10px;color:#8c8166;margin:5px 0}.animation-controls input[type=number]{width:90px}#selected-keyframe{border:1px solid #625d51;border-radius:5px;padding:8px;margin-top:10px}#text-selection-note{line-height:1.6;overflow-wrap:anywhere}
@media(max-width:760px){.timeline-dock{margin-top:16px}.track-name{width:86px}.center{min-height:520px}.canvas-well{height:300px;flex:none}.bar{height:auto;min-height:60px;gap:8px;flex-wrap:wrap}.bar-actions{flex-wrap:wrap;justify-content:flex-end}}

/* The preview and inspector remain beside each other at every viewport size. */
body{height:100dvh;overflow:hidden}.workspace{display:grid;grid-template-columns:240px minmax(0,1fr) 330px;min-height:0;height:calc(100dvh - 68px);overflow:hidden}.rail{display:block;overflow:auto}.center{min-width:0;min-height:0;overflow:hidden;padding:28px 30px 20px}.canvas-well{flex:1;height:auto;min-height:0;overflow:hidden;padding:20px 0}.inspector{min-width:0;min-height:0;overflow:hidden;border-left:1px solid var(--line)}.inspector-scroll{overflow:auto;min-height:0}.bar{height:68px;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;flex-wrap:nowrap}.bar-actions{flex-wrap:nowrap;gap:8px}.bar-actions #catalog-toggle{display:block}.catalog-collapsed .workspace{grid-template-columns:0 minmax(0,1fr) 330px}.catalog-collapsed .rail{visibility:hidden;padding:0;border:0}.wipe-art{position:relative;overflow:hidden;display:block}.wipe-art i{position:absolute;inset:12% 20%;transform:skew(-16deg)}.wipe-art i:nth-child(2){inset:12% 20% 12% 50%;background:#ccc0a4}.wipe-art i:nth-child(3),.wipe-art i:nth-child(4){display:none}
@media(max-width:1100px){.bar-center{display:none}#save-state{display:none}.bar{grid-template-columns:auto auto;justify-content:space-between}.workspace{grid-template-columns:195px minmax(0,1fr) 290px}.catalog-collapsed .workspace{grid-template-columns:0 minmax(0,1fr) 290px}.center{padding:23px 18px 18px}}
@media(max-width:1000px){.workspace,.catalog-collapsed .workspace{grid-template-columns:minmax(0,1fr) 290px}.rail,.catalog-collapsed .rail{display:none;visibility:visible}.catalog-open .rail{display:block;position:fixed;z-index:10;top:68px;bottom:0;left:0;width:230px;padding:22px;background:#1d1c1b;box-shadow:12px 0 40px #0009}.rail h1{font-size:23px}.template{display:block;max-width:none}.template-art{width:auto;height:100px;padding:14px 25px}.template-info{padding:12px 4px 5px}.rail-intro,.category,.rail-note{display:block}.canvas-heading h2 span{display:none}.center{min-height:0}.timeline-dock{margin-top:10px}.track-name{width:75px}.canvas-well{min-height:0;flex:1;height:auto}.inspector-title{padding:22px 18px}.inspector-scroll{padding:0 16px}}
@media(max-width:650px){.bar{height:60px;padding:0 8px;gap:5px}.brand{gap:0}.brand>span:last-child{display:none}.mark{font-size:24px}.bar-actions{gap:4px}.button{padding:8px 9px;font-size:10px}.bar-actions #undo,.bar-actions #redo{padding:8px 5px;min-width:25px}.workspace,.catalog-collapsed .workspace{grid-template-columns:minmax(0,1fr) clamp(176px,45vw,250px);height:calc(100dvh - 60px)}.catalog-open .rail{top:60px}.center{padding:16px 9px 12px}.canvas-heading{display:block}.canvas-heading .eyebrow{font-size:7px;letter-spacing:.08em}.canvas-heading h2{font-size:15px}.canvas-badge{display:inline-block;font-size:8px;margin-top:8px;padding:4px 6px}.canvas-well{padding:12px 0}.corner-label{display:none}.transport{gap:7px;padding-top:10px}.clock{font-size:8px}.play{width:28px;height:28px}.timeline-end{display:none}.timeline-heading{font-size:8px}.timeline-heading span:last-child{display:none}.track-name{width:54px;font-size:8px}.track-row{gap:4px;height:27px}.timeline-dock{margin-top:10px}.stage-note{font-size:8px}.stage-note span:last-child{display:none}.inspector-title{padding:17px 10px}.inspector-title h2{font-size:18px}.inspector-icon{display:none}.inspector-scroll{padding:0 10px}.control-section{padding:17px 0}.section-title{gap:5px}.section-title h3{font-size:11px}.section-title>span{font-size:8px}.muted{font-size:10px}.slots{grid-template-columns:repeat(2,minmax(0,1fr))}.field>span,.select-label,.input-label,.color-label{font-size:10px}.select-label{gap:5px}.select-label select{min-width:0;max-width:100px;padding:6px 4px}.layer-row{flex-wrap:wrap}.layer-select{flex-basis:100%}.layer-actions{width:100%;justify-content:flex-end}.inspector-footer{padding:10px;font-size:8px}.inspector-footer span:last-child{display:none}#text-selection-note{font-size:10px}.background-tabs{grid-template-columns:1fr 1fr}.background-tabs button:last-child{grid-column:span 2}.segmented button{padding:8px 2px;font-size:10px}.text-button{font-size:10px}}

/* Editor chrome: charcoal black, muted gold and silver-grey. */
:root{--bg:#0c0d10;--panel:#141518;--line:#35332e;--muted:#989794;--ink:#e8e5df;--accent:#c7a665;background:var(--bg);color:var(--ink)}
.bar{background:#101114;border-color:#343332}.rail,.inspector{background:#151619}.center{background:radial-gradient(ellipse at 50% 42%,#22242a 0%,#15171b 52%,#101216 100%)}.mark,.inspector-icon{color:#c7a665}.brand{color:#e7e3db}.project-dot,.stage-note i{background:#c7a665}.quiet{background:#222327;border-color:#4c473c;color:#e5dfd4}.quiet:hover{background:#2b2c30;border-color:#9c824d}.template{background:#1b1c20;border-color:#3a3936}.template[aria-pressed=true]{background:#232427;border-color:#b89a61}.template-art{background:radial-gradient(ellipse at 45% 10%,#49463e,#17191d 75%)}.template-art i{border-color:#a49a85;background:linear-gradient(140deg,#b5a785,#34363b)}.template-art i:nth-child(2){background:linear-gradient(20deg,#292c33,#baa77f)}.template-art i:nth-child(3){background:linear-gradient(135deg,#b7b7b4,#34373e)}.wipe-art i:nth-child(2){background:#c2aa77}.template-arrow,.text-button{color:#c9b27f}.template-info small,.eyebrow{color:#a7a29a}.canvas-wrap,.canvas-loading{background:#111318}.canvas-loading{color:#c6b791}.canvas-badge{color:#c9bea9;border-color:#514b3e}.play{background:#252629;border-color:#a18b5d;color:#dfcb9d}.segmented,.background-tabs{background:#101114}.segmented button[aria-pressed=true],.background-tabs button[aria-pressed=true]{background:#35322b;color:#f0dfbd}.slot{background:#24252a;border-color:#4b4840}.layer-row{background:#1d1e22;border-color:#3c3b37}.layer-row.selected{background:#27272b;border-color:#b49a65}.layer-actions button{color:#bfb29a}.input-label input,.input-label textarea,select,.animation-controls input[type=number]{background:#202126;color:#e6e1d7;border-color:#4a473f}.field>span,.select-label,.input-label,.color-label,.toggle-label{color:#c9c5bd}.field output{color:#baa87d}input[type=range]{background:#3e3d38;accent-color:#c7a665}input[type=range]::-webkit-slider-thumb{background:#d6bd89;box-shadow:0 0 0 3px #756443}.toggle-label input,progress{accent-color:#c7a665}.export-button{background:#c5a66b;color:#151516;border-color:#d6bc88}.export-button:hover{background:#d7bc86}.toast{background:#d2bc91;color:#17181b}.track-lane{background:repeating-linear-gradient(90deg,#3b3b3e 0 1px,transparent 1px 25%),#1b1d22}.keyframe-dot{background:#b89d66;border-color:#dbca9f}.track-name{color:#b5aa95}dialog{background:#1a1b20;border-color:#5c5342;color:#e9e3d9}.catalog-open .rail{background:#17181d}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:#d0ad6b}
.canvas-wrap,.canvas-wrap.portrait{flex:none;max-width:none;max-height:none}.animation-controls>summary{cursor:pointer;font-size:12px;color:#c9b27f;padding:3px 0;list-style-position:inside}.timeline-dock>summary{cursor:pointer;list-style-position:inside}.timeline-dock:not([open]){padding-top:8px}.timeline-dock:not([open]) .timeline-heading{margin-bottom:0}
.duration-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#c9c5bd;margin-top:18px}
.duration-head output{color:#baa87d;font-size:11px}
.duration-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:9px}
.duration-presets button{border:1px solid #3c3b37;background:#1b1c20;color:#b5aa95;border-radius:4px;padding:7px 0;font-size:10px}
.duration-presets button:hover{border-color:#6d6450;color:#ded3bb}
.duration-presets button[aria-pressed=true]{background:#35322b;border-color:#b89a61;color:#f0dfbd}
@media(max-width:650px){.duration-presets button{font-size:9px;padding:6px 0}.duration-head{font-size:10px;margin-top:14px}}
/* LOGO overlay */
.logo-empty{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:12px}
.logo-empty[hidden]{display:none}
.logo-empty span{font-size:10px;color:#8f8a7e;letter-spacing:.02em}
.logo-empty .button{padding:8px 14px}
.logo-actions{display:flex;align-items:center;gap:8px;margin-top:14px}
.logo-actions .button{padding:7px 12px;font-size:11px}
.logo-actions .background-name{flex:1;margin:0}
.logo-blends{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;background:#101114;border-radius:6px;padding:4px;margin-top:10px}
.logo-blends button{color:#b1a894;border:0;background:transparent;border-radius:4px;padding:7px 2px;font-size:10px}
.logo-blends button:hover{color:#e6dcc4}
.logo-blends button[aria-pressed=true]{background:#35322b;color:#f0dfbd}
.logo-positions{display:grid;grid-template-columns:repeat(3,26px);grid-template-rows:repeat(3,26px);gap:4px;margin-top:10px;background:#101114;border:1px solid #2c2b28;border-radius:6px;padding:6px;width:max-content}
.logo-positions button{position:relative;border:1px solid #3a3934;background:#1b1c1f;border-radius:4px;padding:0}
.logo-positions button::after{content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#6f695c;transform:translate(-50%,-50%)}
.logo-positions button:hover{border-color:#8f7a4f}
.logo-positions button[aria-pressed=true]{border-color:#c7a665;background:#35322b}
.logo-positions button[aria-pressed=true]::after{background:#e6c98d;box-shadow:0 0 0 2px #c7a66540}
@media(max-width:650px){.logo-blends{grid-template-columns:repeat(4,minmax(0,1fr))}.logo-blends button{font-size:9px;padding:6px 1px}.logo-positions{grid-template-columns:repeat(3,24px);grid-template-rows:repeat(3,24px)}}

.rows-art{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);gap:4px}
.ticker-art{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);gap:4px;transform:rotate(-4deg)}
.ticker-art i:nth-child(1){transform:translateX(-7px)}
.ticker-art i:nth-child(2){transform:translateX(7px)}
.ticker-art i:nth-child(3){transform:translateX(-7px)}
.drift-art{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px}
.drift-art i:nth-child(3n+1){transform:translateY(-4px)}
.drift-art i:nth-child(3n+2){transform:translateY(4px)}
.drift-art i:nth-child(3n){transform:translateY(-2px)}
.mosaic-art{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);gap:3px}
.mosaic-art i:nth-child(1){grid-column:span 2;grid-row:span 2}
.mosaic-art i:nth-child(2){grid-column:3;grid-row:1}
.mosaic-art i:nth-child(3){grid-column:3;grid-row:2}
.mosaic-art i:nth-child(4){grid-column:4/6;grid-row:span 2}
.focus-art{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;gap:4px}
.focus-art i:nth-child(1){transform:scale(.62) translateY(-5px)}
.focus-art i:nth-child(2){transform:scale(1.06)}
.focus-art i:nth-child(3){transform:scale(.62) translateY(5px)}.spotlight-art{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4px;padding:13px 22px}.spotlight-art i:nth-child(1){transform:scale(1.3);z-index:1}.spotlight-art i:nth-child(4){opacity:.52}

.parallax-art{grid-template-columns:1fr;grid-template-rows:1fr;padding:10px 18px}.parallax-art i{position:relative;box-shadow:0 0 0 1px #b89a61 inset,0 8px 22px #0007}.parallax-art i::after{content:"";position:absolute;inset:22%;border:1px solid #b89a61;opacity:.55;border-radius:2px}
.stage-art{display:flex;align-items:stretch;padding:12px 28px}.stage-art i{flex:1 1 auto;border-radius:5px}.stage-art i:nth-child(2){flex:0 0 9%;margin-left:5px;opacity:.46}.stage-art i:nth-child(3){flex:0 0 9%;margin-left:4px;opacity:.2}
.diagonal-art{display:block;position:relative;padding:0}.diagonal-art i{position:absolute;width:36%;height:36%;border-radius:3px}.diagonal-art i:nth-child(1){left:9%;top:11%;opacity:.5}.diagonal-art i:nth-child(2){left:23%;top:25%;opacity:.7}.diagonal-art i:nth-child(3){left:37%;top:39%}.diagonal-art i:nth-child(4){left:51%;top:53%;opacity:.8}
.deck-art{display:block;position:relative;padding:0}.deck-art i{position:absolute;border-radius:3px;box-shadow:0 6px 14px #0b0c0eaa}.deck-art i:nth-child(1){left:29%;top:11%;width:42%;height:42%;opacity:.46}.deck-art i:nth-child(2){left:27.5%;top:16%;width:45%;height:45%;opacity:.64}.deck-art i:nth-child(3){left:26%;top:21%;width:48%;height:48%;opacity:.82}.deck-art i:nth-child(4){left:25%;top:26%;width:50%;height:50%}.deck-art i:nth-child(5){left:28%;top:79%;width:44%;height:16%;transform:rotate(4deg);opacity:.9}

.pop-art{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4px;padding:8px 12px}.pop-art i:nth-child(1){transform:scale(1)}.pop-art i:nth-child(2){transform:scale(.58)}.pop-art i:nth-child(3){transform:scale(.76)}.pop-art i:nth-child(4){transform:scale(1.14)}
.cascade-art{display:block;position:relative;padding:0}.cascade-art i{position:absolute;width:44%;height:44%;border-radius:3px}.cascade-art i:nth-child(1){left:6%;top:6%;opacity:.5}.cascade-art i:nth-child(2){left:16%;top:16%;opacity:.7}.cascade-art i:nth-child(3){left:26%;top:26%;opacity:.85}.cascade-art i:nth-child(4){left:36%;top:36%}
.poster-art{display:block;position:relative;padding:0;overflow:hidden}.poster-art i{position:absolute;border-radius:4px}.poster-art i:nth-child(1){inset:7%;opacity:.45}.poster-art i:nth-child(2){left:30%;top:30%;width:40%;height:40%;border-radius:7px;opacity:.8}.poster-art i:nth-child(3){left:38%;top:38%;width:24%;height:24%;border-radius:5px}
.flow-art{display:flex;align-items:center;gap:3px;padding:10px 6px}.flow-art i{flex:0 0 30%;height:72%;border-radius:4px}.flow-art i:nth-child(1){transform:scale(.72);opacity:.55}.flow-art i:nth-child(2){flex-basis:34%;transform:scale(1.06);z-index:1}.flow-art i:nth-child(3){transform:scale(.82);opacity:.72}
.split-art{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:10px 12px;position:relative}.split-art i{border-radius:6px}.split-art i:nth-child(3){grid-column:1;grid-row:1;margin-left:58%;opacity:.5;z-index:1}.split-art i:nth-child(4){grid-column:1;grid-row:1;margin-left:72%;opacity:.28;z-index:2}
.flip-art{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4px;padding:9px 16px}.flip-art i:nth-child(2){transform:scaleX(.32)}.flip-art i:nth-child(3){transform:scaleX(.64)}.flip-art i:nth-child(4){transform:scaleX(.86)}
.stripe-art{display:flex;gap:2px;padding:12px 20px;align-items:stretch}.stripe-art i{flex:1 1 0;border-radius:2px}.stripe-art i:nth-child(odd){transform:scaleY(.56);transform-origin:top}.stripe-art i:nth-child(even){transform:scaleY(.56);transform-origin:bottom}.stripe-art i:nth-child(4){transform:scaleY(.9);transform-origin:top}

/* Mosaic Wipe: a grid where the windows open row by row (16 tiles). */
.mosaic-wipe-art{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:3px;padding:9px 16px}.mosaic-wipe-art i{background:currentColor;border-radius:1px;opacity:.42}.mosaic-wipe-art i:nth-child(-n+4){opacity:.95}.mosaic-wipe-art i:nth-child(n+5):nth-child(-n+8){opacity:.72}.mosaic-wipe-art i:nth-child(n+9):nth-child(-n+12){opacity:.52}

/* Wheel Spin: eight cards pinned round a circle, each turned to its own orbital angle. */
.wheel-art{display:block;position:relative;padding:0;overflow:hidden}.wheel-art i{position:absolute;left:50%;top:50%;width:31%;height:31%;border-radius:3px;transform-origin:50% 50%}.wheel-art i:nth-child(1){transform:translate(-50%,-50%) rotate(0deg) translateY(-64%);opacity:.62}.wheel-art i:nth-child(2){transform:translate(-50%,-50%) rotate(45deg) translateY(-64%);opacity:.8}.wheel-art i:nth-child(3){transform:translate(-50%,-50%) rotate(90deg) translateY(-64%)}.wheel-art i:nth-child(4){transform:translate(-50%,-50%) rotate(135deg) translateY(-64%);opacity:.72}.wheel-art i:nth-child(5){transform:translate(-50%,-50%) rotate(180deg) translateY(-64%)}.wheel-art i:nth-child(6){transform:translate(-50%,-50%) rotate(225deg) translateY(-64%);opacity:.76}.wheel-art i:nth-child(7){transform:translate(-50%,-50%) rotate(270deg) translateY(-64%)}.wheel-art i:nth-child(8){transform:translate(-50%,-50%) rotate(315deg) translateY(-64%);opacity:.9}


/* Card Tunnel: four concentric frames receding to the black hole at the end of the tube. */
.tunnel-art{display:block;position:relative;padding:0;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#14141a,#1f1e1c 74%)}
.tunnel-art i{position:absolute;border:1px solid #a1967d;border-radius:2px;background:none}
.tunnel-art i:nth-child(1){inset:7% 4%;opacity:.92}
.tunnel-art i:nth-child(2){inset:23% 13%;opacity:.78}
.tunnel-art i:nth-child(3){inset:35% 21%;opacity:.62}
.tunnel-art i:nth-child(4){inset:43% 30%;opacity:.95;background:#0c0c0e;border-color:#6f6858}

/* Cover Ring: eight upright cards standing on a circular ring, front card nearest the eye. */
.ring-art{display:block;position:relative;padding:0;overflow:hidden;background:radial-gradient(ellipse at 50% 58%,#1b1813,#0f1114 72%)}
.ring-art i{position:absolute;left:50%;top:50%;width:22%;height:30%;border-radius:3px;border:1px solid #a1967d;background:linear-gradient(150deg,#b6a884,#33363c);transform-origin:50% 50%;box-shadow:0 4px 10px #0b0b0caa}
.ring-art i:nth-child(1){transform:translate(-50%,-50%) rotate(180deg) translateY(-100%) rotate(-180deg) scale(1.08);opacity:1;z-index:8}
.ring-art i:nth-child(2){transform:translate(-50%,-50%) rotate(135deg) translateY(-100%) rotate(-135deg) scale(.96);opacity:.88;z-index:7}
.ring-art i:nth-child(3){transform:translate(-50%,-50%) rotate(225deg) translateY(-100%) rotate(-225deg) scale(.96);opacity:.88;z-index:7}
.ring-art i:nth-child(4){transform:translate(-50%,-50%) rotate(90deg) translateY(-100%) rotate(-90deg) scale(.85);opacity:.72;z-index:6}
.ring-art i:nth-child(5){transform:translate(-50%,-50%) rotate(270deg) translateY(-100%) rotate(-270deg) scale(.85);opacity:.72;z-index:6}
.ring-art i:nth-child(6){transform:translate(-50%,-50%) rotate(45deg) translateY(-100%) rotate(-45deg) scale(.72);opacity:.5;z-index:5}
.ring-art i:nth-child(7){transform:translate(-50%,-50%) rotate(315deg) translateY(-100%) rotate(-315deg) scale(.72);opacity:.5;z-index:5}
.ring-art i:nth-child(8){transform:translate(-50%,-50%) rotate(0deg) translateY(-100%) rotate(0deg) scale(.62);opacity:.4;z-index:4}

/* Cover Ring Vertical: the same eight cards on the ring stood upright, so they stack vertically and
   the front card sits just above centre. Static-art fallback kept for the catalogue convention; the
   live 256 px canvas thumbnail paints the real template through the WebGL2 channel. */
.vertical-art{display:block;position:relative;padding:0;overflow:hidden;background:radial-gradient(ellipse at 50% 46%,#1b1813,#0f1114 72%)}
.vertical-art i{position:absolute;left:50%;border-radius:3px;border:1px solid #a1967d;background:linear-gradient(150deg,#b6a884,#33363c);transform:translate(-50%,-50%);box-shadow:0 4px 10px #0b0b0caa}
.vertical-art i:nth-child(1){top:53%;width:42%;height:38%;z-index:9;opacity:1}
.vertical-art i:nth-child(2){top:25%;width:35%;height:32%;z-index:7;opacity:.88}
.vertical-art i:nth-child(3){top:81%;width:35%;height:32%;z-index:7;opacity:.88}
.vertical-art i:nth-child(4){top:3%;width:27%;height:25%;z-index:5;opacity:.64}
.vertical-art i:nth-child(5){top:97%;width:27%;height:25%;z-index:5;opacity:.64}
.vertical-art i:nth-child(6){top:50%;width:40%;height:3%;z-index:6;opacity:.42}
.vertical-art i:nth-child(7){top:50%;width:34%;height:2%;z-index:4;opacity:.28}
.vertical-art i:nth-child(8){top:50%;width:28%;height:2%;z-index:3;opacity:.2}

/* Orbit Globe: a dense sphere of small cards, front cards largest and fully lit. */
.orbit-art{display:block;position:relative;padding:0;overflow:hidden;background:radial-gradient(circle at 50% 52%,#1b1813,#0f1114 72%)}
.orbit-art i{position:absolute;border-radius:2px;border:1px solid #9b8f74;background:linear-gradient(150deg,#b6a884,#33363c);box-shadow:0 3px 8px #0b0b0caa}
.orbit-art i:nth-child(1){left:38%;top:40%;width:30%;height:30%;z-index:9;opacity:1}
.orbit-art i:nth-child(2){left:16%;top:34%;width:18%;height:18%;z-index:7;opacity:.9}
.orbit-art i:nth-child(3){left:66%;top:34%;width:18%;height:18%;z-index:7;opacity:.9}
.orbit-art i:nth-child(4){left:20%;top:16%;width:13%;height:13%;z-index:5;opacity:.75}
.orbit-art i:nth-child(5){left:66%;top:16%;width:13%;height:13%;z-index:5;opacity:.75}
.orbit-art i:nth-child(6){left:8%;top:52%;width:12%;height:12%;z-index:6;opacity:.8}
.orbit-art i:nth-child(7){left:82%;top:52%;width:12%;height:12%;z-index:6;opacity:.8}
.orbit-art i:nth-child(8){left:26%;top:62%;width:14%;height:14%;z-index:8;opacity:.95}
.orbit-art i:nth-child(9){left:60%;top:62%;width:14%;height:14%;z-index:8;opacity:.95}
.orbit-art i:nth-child(10){left:40%;top:72%;width:20%;height:20%;z-index:10;opacity:1}
.orbit-art i:nth-child(11){left:44%;top:10%;width:12%;height:12%;z-index:4;opacity:.6}
.orbit-art i:nth-child(12){left:72%;top:74%;width:8%;height:8%;z-index:3;opacity:.45}

/* Depth Stack Scroll: cards scattered across the frame, flying toward the camera at different depths. */
.depth-art{display:block;position:relative;padding:0;overflow:hidden;background:radial-gradient(circle at 50% 50%,#1b1813,#0f1114 72%)}
.depth-art i{position:absolute;aspect-ratio:1;height:auto;border-radius:3px;border:1px solid #9b8f74;background:linear-gradient(150deg,#b6a884,#33363c);box-shadow:0 3px 8px #0b0b0caa}
.depth-art i:nth-child(1){left:9%;top:15%;width:27%;z-index:9;opacity:1}
.depth-art i:nth-child(2){left:45%;top:31%;width:19%;z-index:7;opacity:.9}
.depth-art i:nth-child(3){left:71%;top:14%;width:11%;z-index:5;opacity:.78}
.depth-art i:nth-child(4){left:64%;top:57%;width:14%;z-index:8;opacity:.92}
.depth-art i:nth-child(5){left:19%;top:62%;width:9%;z-index:4;opacity:.7}
.depth-art i:nth-child(6){left:38%;top:72%;width:7%;z-index:3;opacity:.62}
.depth-art i:nth-child(7){left:86%;top:44%;width:6%;z-index:3;opacity:.58}
.depth-art i:nth-child(8){left:3%;top:43%;width:5%;z-index:2;opacity:.5}

/* Focus Shift: a large card on the left and a vertical rail of three smaller cards on the right. */
.focus-art{display:block;position:relative;padding:0;overflow:hidden;background:radial-gradient(circle at 42% 50%,#1b1813,#0f1114 72%)}
.focus-art i{position:absolute;border-radius:3px;border:1px solid #9b8f74;background:linear-gradient(150deg,#b6a884,#33363c);box-shadow:0 3px 8px #0b0b0caa}
.focus-art i:nth-child(1){left:6%;top:6%;width:62%;height:88%;z-index:5;opacity:1}
.focus-art i:nth-child(2){left:70.6%;top:6%;width:23.4%;height:27.6%;z-index:4;opacity:.9}
.focus-art i:nth-child(3){left:70.6%;top:36.2%;width:23.4%;height:27.6%;z-index:4;opacity:.8}
.focus-art i:nth-child(4){left:70.6%;top:66.4%;width:23.4%;height:27.6%;z-index:4;opacity:.7}

/* P06 rework: parameter rows and sliders.
   Row = [label][129 px slider][39 px right-aligned value], 16 px tall, 36 px pitch.
   Slider = 6 px #323234 track, 22x14 white pill thumb with two 1.5x6 grip lines. */
.inspector input[type=range]{-webkit-appearance:none;appearance:none;width:129px;height:16px;margin:0;padding:0;background:transparent;--track:#323234;accent-color:#323234}
.inspector input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:#323234}
.inspector input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:14px;border:0;border-radius:7px;margin-top:-4px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.2);background:linear-gradient(#6e6e73,#6e6e73) 7px 4px/1.5px 6px no-repeat,linear-gradient(#6e6e73,#6e6e73) 13.5px 4px/1.5px 6px no-repeat,#fff}
.inspector input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:#323234}
.inspector input[type=range]::-moz-range-thumb{width:22px;height:14px;border:0;border-radius:7px;box-sizing:border-box;background:linear-gradient(#6e6e73,#6e6e73) 7px 4px/1.5px 6px no-repeat,linear-gradient(#6e6e73,#6e6e73) 13.5px 4px/1.5px 6px no-repeat,#fff;box-shadow:0 1px 3px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.2)}
.inspector input[type=range]:focus-visible{outline:2px solid #ddd5c3;outline-offset:3px}
.field{display:grid;grid-template-columns:minmax(0,1fr) 129px 39px;align-items:center;column-gap:10px;min-height:16px;margin:20px 0 0}
.field>.field-label{display:block;font-size:12px;line-height:16px;color:#98989d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field>output{font-size:11px;line-height:16px;color:#98989d;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#duration{width:100%;height:16px;margin:12px 0 0}
.transport #timeline{-webkit-appearance:none;appearance:none;width:auto;height:16px;margin:0;background:transparent}
.transport #timeline::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,#c7a665 0 var(--timeline-fill,0%),#323234 var(--timeline-fill,0%) 100%)}
.transport #timeline::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border:0;border-radius:50%;margin-top:-3px;background:#f2ede2;box-shadow:0 0 0 2px #c7a665,0 1px 3px #0006;cursor:pointer}
.transport #timeline::-moz-range-track{height:6px;border-radius:999px;background:#323234}
.transport #timeline::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#f2ede2;box-shadow:0 0 0 2px #c7a665,0 1px 3px #0006}

/* P06 rework: three columns shrink in a fixed order - left rail narrows, left rail
   becomes the drawer, right column narrows, then everything stacks into one column.
   The middle column never goes below 320 px. */
.workspace,.catalog-collapsed .workspace{grid-template-columns:240px minmax(320px,1fr) 320px}
.catalog-collapsed .workspace{grid-template-columns:0 minmax(320px,1fr) 320px}
.inspector-scroll{padding:0}
.control-section{padding:16px;border-bottom:1px solid rgba(255,255,255,.08)}
@media(max-width:1180px){
  .workspace{grid-template-columns:220px minmax(320px,1fr) 320px}
  .catalog-collapsed .workspace{grid-template-columns:0 minmax(320px,1fr) 320px}
}
@media(max-width:1100px){
  .workspace{grid-template-columns:195px minmax(320px,1fr) 320px}
  .catalog-collapsed .workspace{grid-template-columns:0 minmax(320px,1fr) 320px}
}
@media(max-width:1000px){
  .workspace,.catalog-collapsed .workspace{grid-template-columns:minmax(320px,1fr) 320px}
}
@media(max-width:900px){
  .workspace,.catalog-collapsed .workspace{grid-template-columns:minmax(320px,1fr) 280px}
  .field{grid-template-columns:minmax(0,1fr) 104px 39px;column-gap:8px}
  .inspector input[type=range]{width:104px}
}
@media(max-width:760px){
  body{height:auto;overflow:auto}
  .workspace,.catalog-collapsed .workspace{display:flex;flex-direction:column;height:auto;min-height:0;overflow:visible}
  .rail,.catalog-collapsed .rail{display:none;visibility:visible}
  .catalog-open .rail{display:block;position:fixed;z-index:10;top:68px;bottom:0;left:0;width:230px;padding:22px;border:0;background:#17181d;box-shadow:12px 0 40px #0009}
  .center{min-height:0;overflow:visible;padding:24px 18px}
  .canvas-well{height:clamp(180px,58vw,430px);min-height:0;flex:none}
  .inspector{border-left:0;border-top:1px solid var(--line);overflow:visible}
  .inspector-scroll{overflow:visible;padding:0}
  .field{grid-template-columns:minmax(0,1fr) 129px 39px;column-gap:10px}
  .inspector input[type=range]{width:129px}
}

/* P06 rework: compact panel headers, collapsible TEXT section and the SHADOW sub-block.
   SHADOW sits inside the template section (details), not as a top-level section. */
.section-title{display:flex;align-items:center;gap:8px;justify-content:flex-start;margin-bottom:10px;min-height:16px}
.section-title h3{font-size:11px;font-weight:600;letter-spacing:.08em;margin:0;color:#98938a;white-space:nowrap}
.section-title>span{font-size:9px;letter-spacing:.12em;color:#6f6b63;white-space:nowrap;margin-left:auto}
.section-title .text-button{font-size:11px;color:#c9b27f;padding:0;white-space:nowrap}
details.control-section>summary.section-title{list-style:none;cursor:pointer;margin-bottom:0}
details.control-section>summary.section-title::-webkit-details-marker{display:none}
details.control-section>summary.section-title::after{content:'';flex:none;width:6px;height:6px;border-right:1.5px solid #7d786f;border-bottom:1.5px solid #7d786f;transform:rotate(45deg);margin:0 3px 3px 2px;transition:transform .15s ease}
details.control-section[open]>summary.section-title{margin-bottom:10px}
details.control-section[open]>summary.section-title::after{transform:rotate(225deg);margin-bottom:-3px}
.param-block{margin-top:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
.param-block-head{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;min-height:16px;font-size:11px;font-weight:600;letter-spacing:.09em;color:#98938a}
.param-block-head::-webkit-details-marker{display:none}
.param-block-head::after{content:'';width:6px;height:6px;border-right:1.5px solid #7d786f;border-bottom:1.5px solid #7d786f;transform:rotate(45deg);margin-right:3px;transition:transform .15s ease}
.param-block[open]>.param-block-head::after{transform:rotate(225deg);margin-top:4px}
.param-block-body{padding-top:12px}
.param-block .toggle-label{margin-top:0;font-size:12px;color:#c9c5bd}
.toggle-label input[type=checkbox]{width:14px;height:14px;accent-color:#c7a665}
.segmented[aria-label="画幅"]{grid-template-columns:repeat(6,minmax(0,1fr))}
.segmented[aria-label="画幅"] button{padding:9px 2px;font-size:11px}

/* Empty and error states: clearer than the reference, which hides both. */
.canvas-empty{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:24px;text-align:center;background:radial-gradient(ellipse at 50% 45%,rgba(28,30,36,.92),rgba(13,14,17,.96));color:#d8d2c6}
.canvas-empty[hidden]{display:none}
.canvas-empty p{margin:0;font-size:15px;letter-spacing:.04em;color:#efe9dd}
.canvas-empty span{font-size:11px;color:#a9a294}
.canvas-empty .button{margin-top:6px;padding:8px 14px;font-size:11px}
.slot-error{border-color:#b4544a;box-shadow:0 0 0 1px #b4544a inset}
.slot-error .slot-main{opacity:.55}
.slot-error-note{position:absolute;left:4px;right:4px;top:50%;transform:translateY(-50%);z-index:3;padding:3px 4px;border-radius:3px;background:#2b1614e6;color:#f0a9a0;font-size:9px;line-height:1.35;text-align:center}
.param-reset{display:block;width:100%;height:30px;margin-top:20px;border:1px solid #3a3936;border-radius:999px;background:#222327;color:#a9a294;font-size:11px;letter-spacing:.04em}
.param-reset:hover{border-color:#6d6450;color:#ded3bb}
/* Keep the local save-state read-out (the reference has none) down to tablet width. */
@media(max-width:1100px){#save-state{display:inline}}
@media(max-width:760px){#save-state{display:none}}

/* P06 round 39: grouped template catalogue with live canvas thumbnails.
   Structure follows the reference gallery (group header 29 px / 2 x 104 x 130 cards / 90 px thumb);
   colours stay on the confirmed dark-gold palette instead of the reference's neutral greys. */
.rail{display:flex;flex-direction:column;padding:26px 11px 14px;overflow:hidden;scrollbar-width:none}
.rail::-webkit-scrollbar{width:0;height:0}
.rail-head{flex:none;padding:0 1px}
.rail h1{margin:13px 0 7px}
.rail-intro{max-width:196px}
.category{display:flex;justify-content:space-between;gap:10px;margin:24px 0 8px}
.category span:last-child{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d7ceb8}
.template-catalog{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:6px;padding:2px 0 8px}
.template-catalog::-webkit-scrollbar{width:0;height:0}
.template-group{border-top:1px solid #2c2e31;padding-top:3px}
.template-group:first-child{border-top:0;padding-top:0}
.group-head{display:flex;align-items:center;gap:5px;width:100%;height:29px;padding:0 2px;border:0;background:none;color:#98938a;font-size:11px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;text-align:left}
.group-head:hover{color:#d3cab8}
.group-head:focus-visible{outline:1px solid #b89a61;outline-offset:1px;border-radius:4px}
.group-name{flex:none;white-space:nowrap}
.group-en{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:600;letter-spacing:.08em;color:#6f6b63}
.group-count{flex:none;opacity:.5;font-weight:600;letter-spacing:.06em}
.group-chevron{flex:none;width:10px;height:10px;margin:0 1px 4px 1px;border-right:1.5px solid #7d786f;border-bottom:1.5px solid #7d786f;transform:rotate(45deg);transition:transform .15s ease}
.group-head[aria-expanded="true"] .group-chevron{transform:rotate(225deg);margin-top:3px;margin-bottom:0}
.template-grid{display:grid;grid-template-columns:repeat(2,104px);gap:8px;padding:4px 0 8px}
.template-grid[hidden]{display:none}
.rail .template{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%;height:130px;margin:0;padding:6px;border:1px solid transparent;border-radius:12px;background:transparent;color:#f5f5f7;text-align:left}
.rail .template:hover{background:#1c1d21;border-color:#37363a}
.rail .template[aria-pressed="true"]{border-color:#b89a61;background:#232427}
.template-thumb{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:8px;background:#0b0c0f}
.template-thumb canvas{display:block;width:100%;height:100%}
.template-name{display:block;height:16px;padding:0 6px;font-size:12px;font-weight:600;line-height:16px;color:#f5f5f7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-note{flex:none;margin:10px 3px 0}
@media(max-width:1180px){
  .template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail .template{height:auto}
}
@media(max-width:1100px){
  .rail{padding:22px 9px 18px}
  .rail-intro{max-width:170px}
  .group-en{display:none}
  .template-grid{gap:7px}
}
@media(max-width:1000px){
  .rail,.catalog-collapsed .rail{display:none}
  .rail,.catalog-open .rail{padding:22px 9px 18px}
  .catalog-open .rail{display:flex;width:236px}
  .group-en{display:block}
}
@media(max-width:760px){
  .rail,.catalog-collapsed .rail{display:none}
  .catalog-open .rail{display:flex;width:236px;padding:22px 9px 18px;background:#17181d}
}

/* 瀑布落卡（CASCADE DROP）静态缩略兜底（活体缩略图走 canvas renderFrame；此块只在无 canvas 的旧预览路径兜底）。 */
.cascade-drop-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.cascade-drop-art i{position:absolute;left:16%;top:18%;width:62%;height:62%;border-radius:3px;background:#3a3c42}
.cascade-drop-art i:nth-child(1){transform:rotate(-3deg) translate(-9%,4%);opacity:.52}
.cascade-drop-art i:nth-child(2){transform:rotate(2deg) translate(5%,1%);opacity:.68}
.cascade-drop-art i:nth-child(3){transform:rotate(-1.5deg) translate(-6%,-1%);opacity:.82}
.cascade-drop-art i:nth-child(4){transform:rotate(2.5deg) translate(9%,-3%);opacity:.96}

/* 球壁漂移（SPHERE WALL）静态缩略兜底（活体缩略图走 canvas renderFrame；此块只在无 canvas 的旧预览路径兜底）。 */
.sphere-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.sphere-art i{position:absolute;width:26%;height:17%;border-radius:2px;background:#3a3c42}
.sphere-art i:nth-child(1){left:8%;top:12%;opacity:.5}
.sphere-art i:nth-child(2){left:37%;top:9%;opacity:.62}
.sphere-art i:nth-child(3){left:67%;top:13%;opacity:.52}
.sphere-art i:nth-child(4){left:-3%;top:36%;opacity:.7}
.sphere-art i:nth-child(5){left:30%;top:33%;opacity:.86}
.sphere-art i:nth-child(6){left:59%;top:35%;opacity:.72}
.sphere-art i:nth-child(7){left:12%;top:60%;opacity:.64}
.sphere-art i:nth-child(8){left:42%;top:57%;opacity:.9}
.sphere-art i:nth-child(9){left:73%;top:61%;opacity:.58}

/* 球壁阶梯（SPHERE CASCADE）静态缩略兜底（活体缩略图走 canvas renderFrame；此块只在无 canvas 的旧预览路径兜底）。
   与球壁漂移同族但纵向漂移：卡片更小更密，越靠上下越宽（球壁切向）。 */
.sphere-cascade-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.sphere-cascade-art i{position:absolute;width:17%;height:9.4%;border-radius:1.5px;background:#3a3c42}
.sphere-cascade-art i:nth-child(1){left:6%;top:6%;opacity:.5;transform:skewX(-4deg)}
.sphere-cascade-art i:nth-child(2){left:26%;top:5%;opacity:.6;transform:skewX(-2deg)}
.sphere-cascade-art i:nth-child(3){left:46%;top:6%;opacity:.66}
.sphere-cascade-art i:nth-child(4){left:66%;top:5%;opacity:.6;transform:skewX(2deg)}
.sphere-cascade-art i:nth-child(5){left:86%;top:6%;opacity:.5;transform:skewX(4deg)}
.sphere-cascade-art i:nth-child(6){left:-2%;top:26%;opacity:.72}
.sphere-cascade-art i:nth-child(7){left:20%;top:25%;opacity:.84}
.sphere-cascade-art i:nth-child(8){left:41%;top:26%;opacity:.92}
.sphere-cascade-art i:nth-child(9){left:62%;top:25%;opacity:.84}
.sphere-cascade-art i:nth-child(10){left:84%;top:26%;opacity:.7}
.sphere-cascade-art i:nth-child(11){left:9%;top:46%;opacity:.82}
.sphere-cascade-art i:nth-child(12){left:30%;top:45%;opacity:.95}
.sphere-cascade-art i:nth-child(13){left:51%;top:46%;opacity:.9}
.sphere-cascade-art i:nth-child(14){left:72%;top:45%;opacity:.8}
.sphere-cascade-art i:nth-child(15){left:15%;top:66%;opacity:.7}
.sphere-cascade-art i:nth-child(16){left:36%;top:65%;opacity:.86}
.sphere-cascade-art i:nth-child(17){left:57%;top:66%;opacity:.78}
.sphere-cascade-art i:nth-child(18){left:78%;top:65%;opacity:.66}

/* 卡片地球（CARD GLOBE）静态缩略兜底（活体缩略图走 canvas renderFrame；此块只在无 canvas 的旧预览路径兜底）。 */
.card-globe-art{display:block;position:relative;padding:0;overflow:hidden;background:radial-gradient(circle at 50% 50%,#17181d 0%,#0b0c0f 68%)}
.card-globe-art i{position:absolute;width:13%;height:7.2%;border-radius:1.6px;background:#3d4048;transform-origin:50% 50%}
.card-globe-art i:nth-child(1){left:44%;top:9%;opacity:.55;transform:skewX(-8deg)}
.card-globe-art i:nth-child(2){left:67%;top:16%;opacity:.62;transform:skewX(-14deg) rotate(-8deg)}
.card-globe-art i:nth-child(3){left:27%;top:17%;opacity:.58;transform:skewX(12deg) rotate(9deg)}
.card-globe-art i:nth-child(4){left:38%;top:29%;opacity:.78}
.card-globe-art i:nth-child(5){left:59%;top:30%;opacity:.74}
.card-globe-art i:nth-child(6){left:14%;top:36%;opacity:.66;transform:skewX(24deg) rotate(12deg)}
.card-globe-art i:nth-child(7){left:82%;top:37%;opacity:.64;transform:skewX(-24deg) rotate(-12deg)}
.card-globe-art i:nth-child(8){left:24%;top:46%;opacity:.9}
.card-globe-art i:nth-child(9){left:44%;top:46%;opacity:.98}
.card-globe-art i:nth-child(10){left:64%;top:46%;opacity:.9}
.card-globe-art i:nth-child(11){left:16%;top:58%;opacity:.7;transform:skewX(22deg) rotate(10deg)}
.card-globe-art i:nth-child(12){left:80%;top:59%;opacity:.68;transform:skewX(-22deg) rotate(-10deg)}
.card-globe-art i:nth-child(13){left:37%;top:66%;opacity:.76}
.card-globe-art i:nth-child(14){left:58%;top:67%;opacity:.74}
.card-globe-art i:nth-child(15){left:29%;top:78%;opacity:.56;transform:skewX(12deg) rotate(8deg)}
.card-globe-art i:nth-child(16){left:63%;top:79%;opacity:.55;transform:skewX(-12deg) rotate(-8deg)}

/* 主图轮播（HERO REEL）静态缩略兜底（活体缩略图走 canvas renderFrame；此块只在无 canvas 的旧预览路径兜底）。 */
.hero-reel-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.hero-reel-art::before{content:"";position:absolute;inset:-4%;background:linear-gradient(135deg,#3a4250 0%,#1b1f26 55%,#0b0c0f 100%);opacity:.55}
.hero-reel-art i{position:absolute;top:50%;width:10.4%;height:10.4%;border-radius:14%;background:#484b52;transform:translateY(-50%)}
.hero-reel-art i:nth-child(1){left:6%;opacity:.62}
.hero-reel-art i:nth-child(2){left:19.3%;opacity:.72}
.hero-reel-art i:nth-child(3){left:32.6%;opacity:.84}
.hero-reel-art i:nth-child(4){left:45.9%;width:11.3%;height:11.3%;top:48%;opacity:.96;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.hero-reel-art i:nth-child(5){left:60.9%;opacity:.78}
.hero-reel-art i:nth-child(6){left:74.2%;opacity:.66}
.hero-reel-art i:nth-child(7){left:87.5%;opacity:.56}

/* 下半轮盘（WHEEL SPIN BOTTOM）静态缩略兜底（活体缩略图走 canvas renderFrame；此块只在无 canvas 的旧预览路径兜底）。 */
.wheel-bottom-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.wheel-bottom-art i{position:absolute;width:20%;height:20%;border-radius:25%;background:#3a3c42;transform-origin:50% 50%}
.wheel-bottom-art i:nth-child(1){left:20.87%;top:43.81%;opacity:.52;transform:rotate(-22.5deg)}
.wheel-bottom-art i:nth-child(2){left:4.64%;top:54.64%;opacity:.62;transform:rotate(-45deg)}
.wheel-bottom-art i:nth-child(3){left:-6.19%;top:70.87%;opacity:.55;transform:rotate(-67.5deg)}
.wheel-bottom-art i:nth-child(4){left:-10%;top:90%;opacity:.5;transform:rotate(-90deg)}
.wheel-bottom-art i:nth-child(5){left:40%;top:40%;opacity:.96;transform:rotate(0deg)}
.wheel-bottom-art i:nth-child(6){left:59.13%;top:43.81%;opacity:.86;transform:rotate(22.5deg)}
.wheel-bottom-art i:nth-child(7){left:75.36%;top:54.64%;opacity:.72;transform:rotate(45deg)}
.wheel-bottom-art i:nth-child(8){left:86.19%;top:70.87%;opacity:.6;transform:rotate(67.5deg)}
.wheel-bottom-art i:nth-child(9){left:90%;top:90%;opacity:.54;transform:rotate(90deg)}

/* Card Toss: three tilted 3:4 cards in flight (live thumbnails use canvas renderFrame; this is the no-canvas fallback). */
.card-toss-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.card-toss-art i{position:absolute;width:26%;height:34.7%;border-radius:3px;background:#3a3c42}
.card-toss-art i:nth-child(1){left:18%;top:46%;opacity:.55;transform:rotate(-4deg)}
.card-toss-art i:nth-child(2){left:48%;top:26%;opacity:.82;transform:rotate(3deg)}
.card-toss-art i:nth-child(3){left:70%;top:56%;opacity:.66;transform:rotate(5deg)}

/* Image Trail: the measured 18-node arc, seven cards on stage at the local poster peak (live thumbnails
   use canvas renderFrame; this is the no-canvas fallback). Positions are the LUT u/v plus half a card. */
.image-trail-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.image-trail-art i{position:absolute;width:19%;height:19%;border-radius:2px;background:#3a3c42}
.image-trail-art i:nth-child(1){left:69.57%;top:29.39%;opacity:.55}
.image-trail-art i:nth-child(2){left:62.54%;top:21.06%;opacity:.68}
.image-trail-art i:nth-child(3){left:55.41%;top:12.72%;opacity:.8}
.image-trail-art i:nth-child(4){left:47.16%;top:6.42%;opacity:.9}
.image-trail-art i:nth-child(5){left:34.3%;top:3.38%;opacity:.96}
.image-trail-art i:nth-child(6){left:17.72%;top:7.45%;opacity:.72}
.image-trail-art i:nth-child(7){left:8.65%;top:11.79%;opacity:.5}

/* Totem Wall: a horizontal cylinder of 16:9 cards — the rows keep a flat x axis, every card pitches with
   the arc, and the size grows away from the equator (the measured 231 px centre row vs 244 px top row).
   Live thumbnails use canvas renderFrame; this is the no-canvas fallback. */
.totem-wall-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.totem-wall-art i{position:absolute;height:10.5%;border-radius:1.4px;background:#3a3c42;transform-origin:50% 50%}
.totem-wall-art i:nth-child(1){left:-9%;top:3%;width:24%;opacity:.5;transform:skewX(4deg) scale(1.06,1.06)}
.totem-wall-art i:nth-child(2){left:20%;top:2%;width:26%;opacity:.62;transform:skewX(2deg) scale(1.06,1.06)}
.totem-wall-art i:nth-child(3){left:50%;top:3%;width:26%;opacity:.6;transform:skewX(-1deg) scale(1.05,1.05)}
.totem-wall-art i:nth-child(4){left:80%;top:2%;width:28%;opacity:.5;transform:skewX(-3deg) scale(1.06,1.06)}
.totem-wall-art i:nth-child(5){left:-6%;top:24%;width:24%;opacity:.66;transform:skewX(2deg) scale(1.01,1.01)}
.totem-wall-art i:nth-child(6){left:22%;top:23%;width:26%;opacity:.84;transform:scale(1,1)}
.totem-wall-art i:nth-child(7){left:52%;top:24%;width:26%;opacity:.92;transform:scale(1,1)}
.totem-wall-art i:nth-child(8){left:82%;top:23%;width:26%;opacity:.7;transform:skewX(-2deg) scale(1.01,1.01)}
.totem-wall-art i:nth-child(9){left:-4%;top:46%;width:22%;opacity:.6;transform:scale(.97,.97)}
.totem-wall-art i:nth-child(10){left:23%;top:45%;width:24%;opacity:.78;transform:scale(.97,.97)}
.totem-wall-art i:nth-child(11){left:52%;top:46%;width:24%;opacity:.86;transform:scale(.97,.97)}
.totem-wall-art i:nth-child(12){left:80%;top:45%;width:24%;opacity:.64;transform:scale(.97,.97)}
.totem-wall-art i:nth-child(13){left:8%;top:67%;width:26%;opacity:.72;transform:skewX(-2deg) scale(1.02,1.02)}
.totem-wall-art i:nth-child(14){left:38%;top:66%;width:26%;opacity:.8;transform:scale(1.02,1.02)}
.totem-wall-art i:nth-child(15){left:68%;top:67%;width:26%;opacity:.66;transform:skewX(2deg) scale(1.02,1.02)}
.totem-wall-art i:nth-child(16){left:2%;top:88%;width:28%;opacity:.5;transform:skewX(3deg) scale(1.05,1.05)}
.totem-wall-art i:nth-child(17){left:34%;top:87%;width:28%;opacity:.58;transform:scale(1.05,1.05)}
.totem-wall-art i:nth-child(18){left:66%;top:88%;width:28%;opacity:.54;transform:skewX(-3deg) scale(1.05,1.05)}

/* Orbit Carousel: four cards on a flat screen-space orbit — front card centred, neighbours scaled down and faded. */
.orbit-carousel-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.orbit-carousel-art i{position:absolute;border-radius:6%;background:linear-gradient(150deg,#4a4034,#23262b)}
.orbit-carousel-art i:nth-child(1){left:29%;top:27%;width:42%;height:46%;opacity:1;z-index:4}
.orbit-carousel-art i:nth-child(2){left:68%;top:33%;width:35%;height:38%;opacity:.7;z-index:3}
.orbit-carousel-art i:nth-child(3){left:-3%;top:33%;width:35%;height:38%;opacity:.7;z-index:2}
.orbit-carousel-art i:nth-child(4){left:33%;top:37%;width:30%;height:33%;opacity:.4;z-index:1}

/* Photo Orbit: eight axis-aligned cards on a padded ellipse; the ring positions carry the measured
   size offsets, so the cards alternate big / small in slot order (last slot painted on top). */
.photo-orbit-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.photo-orbit-art i{position:absolute;border-radius:5%;background:linear-gradient(150deg,#4a4034,#23262b)}
.photo-orbit-art i:nth-child(1){left:38%;top:8%;width:24%;height:24%;z-index:1}
.photo-orbit-art i:nth-child(2){left:62.5%;top:17.4%;width:20.1%;height:20.1%;z-index:2}
.photo-orbit-art i:nth-child(3){left:67.4%;top:38.6%;width:22.8%;height:22.8%;z-index:3}
.photo-orbit-art i:nth-child(4){left:64%;top:64%;width:18.5%;height:18.5%;z-index:4}
.photo-orbit-art i:nth-child(5){left:37.5%;top:65.7%;width:25%;height:25%;z-index:5}
.photo-orbit-art i:nth-child(6){left:17.2%;top:61.7%;width:21.1%;height:21.1%;z-index:6}
.photo-orbit-art i:nth-child(7){left:10.6%;top:38.25%;width:23.5%;height:23.5%;z-index:7}
.photo-orbit-art i:nth-child(8){left:17.4%;top:17.4%;width:19.7%;height:19.7%;z-index:8}
.film-strip-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.film-strip-art i{position:absolute;top:32%;height:36%;background:linear-gradient(150deg,#4a4034,#23262b);border-radius:6%}
.film-strip-art i:nth-child(1){left:-9%;width:26%;clip-path:polygon(6% 0,100% 9%,100% 91%,6% 100%)}
.film-strip-art i:nth-child(2){left:18%;width:28%;clip-path:polygon(4% 0,100% 4%,100% 96%,4% 100%)}
.film-strip-art i:nth-child(3){left:47%;width:29%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.film-strip-art i:nth-child(4){left:77%;width:28%;clip-path:polygon(0 4%,96% 0,96% 100%,0 96%)}
.film-strip-art i:nth-child(5){left:106%;width:26%;clip-path:polygon(0 9%,94% 0,94% 100%,0 91%)}
/* Cover Flow: one card faces the viewer, the two neighbours are the measured pinhole trapezoids
   (vertical edges, outer edge shorter). */
.cover-flow-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.cover-flow-art i{position:absolute;top:27%;height:46%;background:linear-gradient(150deg,#4a4034,#23262b);border-radius:6%}
.cover-flow-art i:nth-child(1){left:-14%;width:34%;clip-path:polygon(0 6%,100% 0,100% 100%,0 94%);opacity:.85}
.cover-flow-art i:nth-child(2){left:33%;width:34%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);z-index:2}
.cover-flow-art i:nth-child(3){left:80%;width:34%;clip-path:polygon(0 0,100% 6%,100% 94%,0 100%);opacity:.85}

/* Card Totem: the measured vertical column, cards above/below the flat point taper towards the far
   edge (top card narrows upwards, bottom card narrows downwards). */
.card-totem-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.card-totem-art i{position:absolute;left:34%;width:32%;background:linear-gradient(150deg,#4a4034,#23262b);border-radius:6%}
.card-totem-art i:nth-child(1){top:-6%;height:46%;clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);opacity:.86}
.card-totem-art i:nth-child(2){top:27%;height:46%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);z-index:2}
.card-totem-art i:nth-child(3){top:60%;height:46%;clip-path:polygon(0 0,100% 0,91% 100%,9% 100%);opacity:.86}

/* Showcase Stream: a ring of tangent cards seen from outside the ring; the front card is widest and
   the back cards carry the measured 30 % back fade. */
.showcase-stream-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.showcase-stream-art i{position:absolute;width:26%;height:22%;left:37%;top:39%;background:linear-gradient(150deg,#4a4034,#23262b);border-radius:8%}
.showcase-stream-art i:nth-child(1){left:11%;top:57%;width:24%;height:20%;opacity:.74;transform:rotate(-24deg)}
.showcase-stream-art i:nth-child(2){left:24%;top:66%;width:27%;height:23%;opacity:.92;transform:rotate(-12deg)}
.showcase-stream-art i:nth-child(3){left:41%;top:68%;width:28%;height:24%;z-index:2;transform:rotate(6deg)}
.showcase-stream-art i:nth-child(4){left:57%;top:61%;width:27%;height:23%;opacity:.86;transform:rotate(20deg)}
.showcase-stream-art i:nth-child(5){left:68%;top:45%;width:23%;height:20%;opacity:.6;transform:rotate(32deg)}
.showcase-stream-art i:nth-child(6){left:53%;top:22%;width:22%;height:19%;opacity:.4;transform:rotate(44deg)}
.showcase-stream-art i:nth-child(7){left:31%;top:18%;width:21%;height:18%;opacity:.4;transform:rotate(56deg)}
/* Vortex Spin fallback art: three concentric rings of bent cards (the rail itself paints the real frame). */
.vortex-spin-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.vortex-spin-art i{position:absolute;border-radius:3px;background:linear-gradient(150deg,#4a4034,#23262b)}
.vortex-spin-art i:nth-child(1){left:41%;top:9%;width:18%;height:9%;transform:rotate(90deg)}
.vortex-spin-art i:nth-child(2){left:19%;top:24%;width:17%;height:8%;opacity:.86;transform:rotate(135deg)}
.vortex-spin-art i:nth-child(3){left:64%;top:24%;width:17%;height:8%;opacity:.86;transform:rotate(45deg)}
.vortex-spin-art i:nth-child(4){left:77%;top:46%;width:17%;height:8%;opacity:.86;transform:rotate(0deg)}
.vortex-spin-art i:nth-child(5){left:64%;top:68%;width:17%;height:8%;opacity:.86;transform:rotate(-45deg)}
.vortex-spin-art i:nth-child(6){left:41%;top:82%;width:18%;height:9%;transform:rotate(-90deg)}
.vortex-spin-art i:nth-child(7){left:19%;top:68%;width:17%;height:8%;opacity:.86;transform:rotate(-135deg)}
.vortex-spin-art i:nth-child(8){left:6%;top:46%;width:17%;height:8%;opacity:.86;transform:rotate(180deg)}
.vortex-spin-art i:nth-child(9){left:44%;top:36%;width:12%;height:6%;opacity:.55}
.vortex-spin-art i:nth-child(10){left:31%;top:44%;width:11%;height:6%;opacity:.55;transform:rotate(135deg)}
.vortex-spin-art i:nth-child(11){left:58%;top:44%;width:11%;height:6%;opacity:.55;transform:rotate(45deg)}
.vortex-spin-art i:nth-child(12){left:59%;top:56%;width:11%;height:6%;opacity:.55;transform:rotate(-45deg)}
.vortex-spin-art i:nth-child(13){left:31%;top:56%;width:11%;height:6%;opacity:.55;transform:rotate(-135deg)}
/* Sweep Ring fallback art: eight billboard cards on a ring (the rail itself paints the measured frame). */
.sweep-ring-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.sweep-ring-art i{position:absolute;width:24%;height:13.5%;border-radius:4px;background:linear-gradient(150deg,#4a4034,#23262b)}
.sweep-ring-art i:nth-child(1){left:70%;top:43%;background:linear-gradient(150deg,#55402e,#2a2724)}
.sweep-ring-art i:nth-child(2){left:58%;top:23%;opacity:.9}
.sweep-ring-art i:nth-child(3){left:38%;top:12%;opacity:.86}
.sweep-ring-art i:nth-child(4){left:18%;top:23%;opacity:.8}
.sweep-ring-art i:nth-child(5){left:6%;top:43%;opacity:.74}
.sweep-ring-art i:nth-child(6){left:18%;top:64%;opacity:.68}
.sweep-ring-art i:nth-child(7){left:38%;top:74%;opacity:.62}
.sweep-ring-art i:nth-child(8){left:58%;top:64%;opacity:.56}
/* Triple Scene fallback art: one hero card above a three-column wall of cards (the rail paints the measured
   frame itself; this static sketch only stands in when the canvas is unavailable). */
.triple-scene-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.triple-scene-art i{position:absolute;width:27%;height:15.2%;border-radius:4px;background:linear-gradient(150deg,#4a4034,#23262b)}
.triple-scene-art i:nth-child(1){left:36.5%;top:22%;width:33%;height:18.5%;background:linear-gradient(150deg,#5a4630,#2a2724)}
.triple-scene-art i:nth-child(2){left:4%;top:24%;opacity:.9}
.triple-scene-art i:nth-child(3){left:36.5%;top:24%;opacity:.86}
.triple-scene-art i:nth-child(4){left:69%;top:24%;opacity:.82}
.triple-scene-art i:nth-child(5){left:4%;top:45%;opacity:.78}
.triple-scene-art i:nth-child(6){left:36.5%;top:45%;opacity:.74}
.triple-scene-art i:nth-child(7){left:69%;top:45%;opacity:.7}
.triple-scene-art i:nth-child(8){left:4%;top:66%;opacity:.64}
.triple-scene-art i:nth-child(9){left:36.5%;top:66%;opacity:.6}
.triple-scene-art i:nth-child(10){left:69%;top:66%;opacity:.56}
.triple-scene-art i:nth-child(11){left:4%;top:87%;opacity:.5}
.triple-scene-art i:nth-child(12){left:36.5%;top:87%;opacity:.46}
/* Collage Reel fallback art: a dense offset collage of cards (the rail paints the measured frame). */
.collage-reel-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.collage-reel-art i{position:absolute;width:38%;height:21.5%;border-radius:3px;background:linear-gradient(150deg,#4a4034,#23262b)}
.collage-reel-art i:nth-child(1){left:30%;top:39%;width:40%;height:23%;background:linear-gradient(150deg,#5a4630,#2a2724)}
.collage-reel-art i:nth-child(2){left:2%;top:6%;opacity:.9}
.collage-reel-art i:nth-child(3){left:58%;top:8%;opacity:.86}
.collage-reel-art i:nth-child(4){left:16%;top:26%;opacity:.82}
.collage-reel-art i:nth-child(5){left:70%;top:40%;opacity:.76}
.collage-reel-art i:nth-child(6){left:4%;top:58%;opacity:.7}
.collage-reel-art i:nth-child(7){left:40%;top:68%;opacity:.64}
.collage-reel-art i:nth-child(8){left:66%;top:78%;opacity:.58}
/* Fan Shuffle fallback art: a diagonal fan deck (offsets, no self-rotation). */


.grid-zoom-strip-art{display:block;position:relative;padding:0;overflow:hidden;background:#0b0c0f}
.grid-zoom-strip-art i{position:absolute;width:27%;height:27%;border-radius:3px;background:linear-gradient(150deg,#4a4034,#23262b)}
.grid-zoom-strip-art i:nth-child(1){left:6%;top:6%}
.grid-zoom-strip-art i:nth-child(2){left:36.5%;top:6%;opacity:.92}
.grid-zoom-strip-art i:nth-child(3){left:67%;top:6%;opacity:.84}
.grid-zoom-strip-art i:nth-child(4){left:6%;top:36.5%;opacity:.92}
.grid-zoom-strip-art i:nth-child(5){left:36.5%;top:36.5%;opacity:.86}
.grid-zoom-strip-art i:nth-child(6){left:67%;top:36.5%;opacity:.8}
.grid-zoom-strip-art i:nth-child(7){left:6%;top:67%;opacity:.84}
.grid-zoom-strip-art i:nth-child(8){left:36.5%;top:67%;opacity:.8}
.grid-zoom-strip-art i:nth-child(9){left:67%;top:67%;opacity:.74}

/* Custom easing curve editor (only visible when the template's easing is "custom"). */
.curve-field{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07)}
.curve-field[hidden]{display:none}
.curve-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:11px;color:#98938a}
.curve-value{font-size:9px;line-height:14px;color:#baa87d;font-variant-numeric:tabular-nums;white-space:nowrap}
.curve-canvas{display:block;width:140px;height:140px;border:1px solid #3a3936;border-radius:6px;background:#111214;cursor:crosshair;touch-action:none}
.curve-canvas:focus-visible{outline:2px solid #b89a61;outline-offset:2px}
@media(max-width:650px){.curve-canvas{width:126px;height:126px}}
/* Export feedback: the save path / file name can be long and the fallback uses two lines. */
.toast{max-width:min(560px,calc(100vw - 40px));line-height:1.65;white-space:pre-line;text-align:center}
#export-filename{color:#c3b79d;font-size:11px;line-height:1.6;margin-top:-6px;overflow-wrap:anywhere;word-break:break-word}

/* Round 62: 390 px touch targets (P09 A-3 / P10 deep-audit A1).
   Below 650 px the inspector stacks under the preview, so this is the phone layout. Primary controls
   reach 44 px (WCAG 2.5.5); secondary rows, sliders and timeline lanes reach at least 39 px. Only box
   metrics change here - the dark-gold palette, type scale and the six-ratio geometry are untouched. */
@media(max-width:650px){
  /* Top bar: brand, catalogue toggle, undo/redo, save, export. */
  .brand{min-width:44px;min-height:44px;justify-content:center;gap:0}
  .bar-actions .button{min-height:44px;padding:0 10px}
  .bar-actions #undo,.bar-actions #redo{min-width:44px;padding:0}
  #catalog-toggle{min-width:44px}
  /* Six frame-ratio buttons: 54 x 44 instead of 54 x 33. */
  .segmented[aria-label="画幅"] button{min-height:44px;padding:0 2px;font-size:11px}
  /* Transport: play key 44 x 44, scrubber strip 39 px with a 20 px thumb. */
  .play{width:44px;height:44px;font-size:16px;line-height:1}
  .transport #timeline{height:39px}
  .transport #timeline::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7px}
  .transport #timeline::-moz-range-thumb{width:20px;height:20px}
  /* Advanced timeline: heading row, track rows and keyframe dots. */
  .timeline-heading{min-height:39px;align-items:center;margin-bottom:0}
  .timeline-dock:not([open]) .timeline-heading{margin-bottom:0}
  .track-row{height:39px}
  .track-lane{height:30px}
  .keyframe-dot{width:16px;height:16px;top:7px}
  /* Collapsible section headers and parameter sub-headers. */
  summary.section-title{min-height:39px;margin-bottom:4px}
  details.control-section[open]>summary.section-title{margin-bottom:8px}
  .param-block-head{min-height:39px}
  .group-head{height:39px}
  .group-head[aria-expanded="true"] .group-chevron{margin-top:0}
  .animation-controls>summary{padding:12px 0}
  /* Inspector sliders: 39 px strip, 28 x 24 thumb (grip lines re-centred). */
  .inspector input[type=range]{height:39px}
  .inspector input[type=range]::-webkit-slider-thumb{width:28px;height:24px;border-radius:12px;margin-top:-9px;background:linear-gradient(#6e6e73,#6e6e73) 9px 7px/1.5px 10px no-repeat,linear-gradient(#6e6e73,#6e6e73) 17px 7px/1.5px 10px no-repeat,#fff}
  .inspector input[type=range]::-moz-range-thumb{width:28px;height:24px;border-radius:12px}
  .field{min-height:39px}
  #duration{height:39px}
  /* Text buttons and segmented rows. */
  .text-button{min-height:39px;padding:9px 2px}
  .section-title .text-button{min-height:39px;padding:9px 2px}
  .duration-presets button{min-height:39px;padding:0}
  .background-tabs button{min-height:39px}
  select{min-height:39px}
  .select-label select{padding:0 6px}
  .color-label input[type=color]{min-height:39px}
  input[type=number],input[type=text],#layer-name{min-height:39px}
  .toggle-label{min-height:39px}
  .param-reset{height:44px}
  #logo-upload{min-height:44px}
  /* Slot tiles: visibility, remove and reorder buttons. */
  .slot-visibility{min-width:39px;min-height:39px;padding:0}
  .slot-remove{width:39px;height:39px;line-height:37px}
  .slot-move button{width:39px;height:39px;line-height:37px;font-size:13px}
  /* Layer rows. */
  .layer-select{min-height:39px}
  .layer-actions button{min-width:39px;min-height:39px;font-size:13px}
  /* Dialogs opened from the phone layout. */
  .dialog-close{min-width:44px;min-height:44px}
  .dialog-actions .button{min-height:44px}
  .canvas-empty .button{min-height:44px}
}

/* Round 62: missing-media notice (B-01) and first-frame error recovery (B-02). */
.asset-notice{position:fixed;z-index:30;left:50%;top:80px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:10px 14px;border:1px solid #6d5a35;border-radius:8px;background:#1d1a14f2;color:#e6dcc6;box-shadow:0 10px 40px #000a;font-size:12px;line-height:1.5}
.asset-notice[hidden]{display:none}
.asset-notice .text-button{color:#e2c68c;padding:4px 2px;white-space:nowrap}
.canvas-loading.is-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px;text-align:center;background:radial-gradient(ellipse at 50% 45%,rgba(28,30,36,.96),rgba(13,14,17,.98));color:#e8dfcb}
.canvas-loading.is-error .boot-error-text{max-width:420px;font-size:12px;line-height:1.7;color:#d8cfb9}
.canvas-loading.is-error #retry-boot{min-height:40px;padding:0 20px;border:1px solid #a18b5d;border-radius:6px;background:#252629;color:#e6d3a6;font-size:12px}
.canvas-loading.is-error #retry-boot:hover{border-color:#d3b77c;color:#f2e2bf}
@media(max-width:650px){.asset-notice{top:68px;gap:10px;padding:9px 12px;font-size:11px}}

/* Round 63 (RC5): char counter / auto-fit note, the 12-slot cap explanation, and the export filename
   wrap. Copy-only additions; colours stay inside the dark-gold palette. */
.input-label-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;width:100%}
.text-count{font-size:10px;color:#9d927c;font-variant-numeric:tabular-nums;white-space:nowrap}
.text-fit-note{margin-top:7px;font-size:11px;color:#b3a481}
.slot-cap-note{margin-top:7px;font-size:11px;color:#b3a481}
@media(max-width:650px){.text-count,.text-fit-note,.slot-cap-note{font-size:9px}}

/* 第 65 轮：我的项目。项目名旁的小菜单，列出主动保存的项目与最近 3 份会话草稿；非模态，点空白
   或 Esc 关闭，画布继续播放。颜色只用既有暗金黑与灰金层级，不引入绿色/木色。 */
.projects-wrap{position:relative;display:flex;align-items:center}
.projects-toggle{display:inline-flex;align-items:center;gap:7px;margin-left:5px;padding:6px 9px;border:1px solid #4c473c;border-radius:6px;background:#222327;color:#e5dfd4;font-size:11px;line-height:1.3;white-space:nowrap}
.projects-toggle:hover{background:#2b2c30;border-color:#9c824d}
.projects-toggle[aria-expanded=true]{background:#2b2c30;border-color:#b89a61;color:#f0dfbd}
.projects-chevron{width:6px;height:6px;border-right:1.5px solid #c9b27f;border-bottom:1.5px solid #c9b27f;transform:rotate(45deg) translateY(-1px);transition:transform .15s ease}
.projects-toggle[aria-expanded=true] .projects-chevron{transform:rotate(225deg) translateY(-1px)}
.projects-menu{position:absolute;z-index:70;top:calc(100% + 12px);right:0;width:min(380px,calc(100vw - 32px));max-height:min(560px,72vh);overflow:auto;padding:15px 16px 12px;border:1px solid #4b463b;border-radius:10px;background:#151619;box-shadow:0 20px 54px #000c,0 0 0 1px #0006;text-align:left}
.projects-menu[hidden]{display:none}
.projects-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid #34322d}
.projects-head strong{font-size:12px;letter-spacing:.06em;color:#ecd9ae}
.projects-head span{font-size:10px;color:#9b9384;font-variant-numeric:tabular-nums}
.projects-section{margin-top:12px}
.projects-section-title{display:flex;justify-content:space-between;margin:0 0 6px;font-size:9px;letter-spacing:.14em;color:#a7a29a;font-weight:700}
.projects-section-title span{color:#c9b27f;font-weight:600;letter-spacing:.04em}
.project-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.project-row{display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid #33322e;border-radius:7px;background:#1b1c20}
.project-row:hover{border-color:#4c473c;background:#1f2024}
.project-row-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.project-row-name{display:flex;align-items:center;gap:5px;font-size:12px;color:#e8e2d5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-row-name.is-stale{color:#b9ad93}
.project-current{padding:0 5px;border:1px solid #6d5a35;border-radius:99px;font-size:9px;line-height:14px;color:#dcc28c;white-space:nowrap}
.project-row-meta{font-size:10px;color:#948c7c;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-row-meta.is-stale{color:#a88d55}
.project-row-actions{display:flex;gap:4px;flex:none}
.project-row-button{padding:5px 8px;border:1px solid #4c473c;border-radius:5px;background:#25262a;color:#dcd3c2;font-size:10px;line-height:1.4;white-space:nowrap}
.project-row-button:hover{border-color:#9c824d;color:#f0dfbd}
.project-row-button.danger{color:#bfa98b}
.project-row-button.danger.is-armed{border-color:#a8663f;background:#2b211c;color:#e5b58f}
.project-empty{margin:0;padding:9px 2px;font-size:11px;line-height:1.6;color:#8e8779}
.projects-note{margin:12px 0 0;padding-top:10px;border-top:1px solid #34322d;font-size:10px;line-height:1.65;color:#8e8779}
@media(max-width:1100px){.projects-toggle{padding:6px 7px;font-size:10px}.projects-menu{right:-52px}}
/* The 761–1100 layout historically hid the whole project-name cell (A-05). Keep that, but the
   我的项目 entry must stay reachable on laptop widths: show only its button in the centre column. */
@media(max-width:1100px) and (min-width:761px){
  .bar{grid-template-columns:auto minmax(0,1fr) auto}
  .bar-center{display:flex}
  .bar-center .project-dot,.bar-center input{display:none}
}



/* header polish 2026-11-09 */
.bar{position:relative;background:linear-gradient(180deg,rgba(19,21,25,.94),rgba(12,13,16,.9));backdrop-filter:blur(14px);border-bottom:1px solid rgba(215,178,106,.14)}
.bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(215,178,106,.42),transparent);pointer-events:none}
.brand{gap:10px;letter-spacing:.03em}
.brand .mark{background:linear-gradient(135deg,#f3dfae,#c9a35a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(215,178,106,.4))}
.brand i{opacity:.42;font-style:normal;padding:0 3px}
.brand-tag{display:inline-flex;align-items:baseline;gap:0;margin-left:10px;padding:3px 9px 4px;border:1px solid rgba(215,178,106,.34);border-radius:4px;background:linear-gradient(180deg,rgba(215,178,106,.09),rgba(215,178,106,.02));font-family:Georgia,"Songti SC","Times New Roman",serif;font-size:12px;font-weight:600;letter-spacing:.09em;color:#eee0bd;text-decoration:none;line-height:1.25;text-transform:none;white-space:nowrap}
.export-button{background:linear-gradient(135deg,#e8cd86,#c9a35a);color:#191610;border:none;box-shadow:0 6px 18px rgba(201,163,90,.24)}
.export-button:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 8px 22px rgba(201,163,90,.32)}
@media(max-width:760px){.brand-tag{display:inline-flex;align-items:baseline;gap:0;margin-left:10px;padding:3px 9px 4px;border:1px solid rgba(215,178,106,.34);border-radius:4px;background:linear-gradient(180deg,rgba(215,178,106,.09),rgba(215,178,106,.02));font-family:Georgia,"Songti SC","Times New Roman",serif;font-size:12px;font-weight:600;letter-spacing:.09em;color:#eee0bd;text-decoration:none;line-height:1.25;text-transform:none;white-space:nowrap}}

.brand-tag em{font-style:normal;color:#b7a174;letter-spacing:.05em}
.brand-tag:hover{border-color:rgba(215,178,106,.6);color:#f6ecd2}
@media(max-width:900px){.brand-tag{font-size:11px;padding:2px 7px;margin-left:8px;letter-spacing:.07em}}
@media(max-width:760px){.brand-tag{display:inline-flex;font-size:10.5px;padding:2px 6px}}

/* brand tag fix 2026-11-09 */
.brand-tag{flex:0 0 auto;width:max-content;align-self:center;max-width:none}
.brand{min-width:0}
.bar-actions .button{white-space:nowrap}
@media(max-width:760px){.bar-actions .button{font-size:11.5px;padding:0 9px}.bar-actions{gap:6px}}

/* brand tag mobile fit 2026-11-09 */
@media(max-width:760px){
  .bar{overflow:hidden}
  .brand{gap:6px}
  .brand-tag{font-size:9.5px;padding:2px 5px;margin-left:4px;letter-spacing:0;border-radius:3px}
  .brand-tag em{letter-spacing:0}
}

/* keep header to three grid children */
.bar > .brand-tag{display:none}