.button-lab-link{margin-left:auto;font-size:11px;color:#9ca6c8;white-space:nowrap}.button-lab-link>span{font:9px var(--mono);padding:3px 5px;border:1px solid #454c78;border-radius:5px;margin-left:5px}.reconstruction-action{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;gap:11px;min-height:46px;padding:0 17px;color:#ececff;font-size:13px;font-weight:500;white-space:nowrap;line-height:1.2;border:1px solid transparent;box-sizing:border-box;text-decoration:none}.reconstruction-action:hover{filter:brightness(1.15)}.action-symbol{display:grid;place-items:center;flex-shrink:0;font-size:24px;line-height:1}.action-symbol .symbol-upload,.action-symbol .symbol-play,.action-symbol .symbol-logo{display:none}.action-copy{display:flex;flex-direction:column;gap:4px}.action-copy small{display:none;font:8px var(--mono);letter-spacing:1.2px;color:#a7a9d9}.action-arrow{font-size:17px;color:#b8b4ff;margin-left:5px}.button-1{border-color:#8e8bf19c;border-radius:11px;background:#25264c;padding-left:8px}.button-1 .action-symbol{width:31px;height:31px;border-radius:7px;background:#6663da;color:white}
.button-2{padding:0;background:#6764e8;border-radius:9px;gap:0;overflow:hidden;border:0}.button-2 .action-symbol{align-self:stretch;width:47px;background:#ffffff17;border-right:1px solid #d9d7ff30}.button-2 .action-copy{padding:0 17px}.button-2 .action-arrow{display:none}
.button-3{border-radius:28px;background:#d8d6ff;color:#222047;padding:0 20px;gap:9px;border:0}.button-3 .action-symbol{font-size:22px}.button-3 .action-arrow{color:#5d568d;font-size:16px}
.button-4{border:1px solid #40496f;border-left:4px solid #8c82ff;border-radius:3px;background:#151e39;padding:0 16px}.button-4 .action-symbol{display:none}.button-4 .action-arrow{color:#a49afa;margin-left:20px}
.button-5{background:transparent;border:0;border-radius:0;position:relative;padding:0 4px;color:#bbb7ff}.button-5:after{content:'';position:absolute;bottom:4px;left:0;right:0;height:1px;background:linear-gradient(90deg,#8d84ed,#8d84ed30)}.button-5 .action-symbol{font-size:22px}.button-5 .action-arrow{margin-left:17px}
.button-6{background:#080e22;border:1px solid #353e63;border-radius:12px;box-shadow:inset 0 2px 6px #0005,0 1px 0 #adb4ff0b;padding-right:8px}.button-6 .action-symbol{display:none}.button-6 .action-arrow{display:grid;place-items:center;width:31px;height:30px;background:#252e51;border:1px solid #5d65955c;border-radius:6px;color:#c1c4ff;margin-left:12px}
.button-7{background:#eff0ff;color:#20253f;border:1px solid #fff;border-radius:7px;box-shadow:0 2px 0 #aaa9ce;padding:0 17px}.button-7 .action-symbol{color:#6662c5}.button-7 .action-arrow{display:none}
.button-8{position:relative;border:0;border-radius:0;background:#6366f10b;color:#b5b7ff;padding:0 18px}.button-8:before,.button-8:after{content:'';position:absolute;top:5px;bottom:5px;width:7px;border-top:1px solid #8b8df0;border-bottom:1px solid #8b8df0}.button-8:before{left:0;border-left:1px solid #8b8df0}.button-8:after{right:0;border-right:1px solid #8b8df0}.button-8 .action-symbol .symbol-plus{display:none}.button-8 .action-symbol .symbol-upload{display:block}.button-8 .action-arrow{display:none}.button-8 .action-copy{font:12px var(--mono)}
.button-9{min-height:51px;border:0;border-radius:10px;background:#272449;padding:8px 15px 8px 9px;gap:11px;text-align:left}.button-9 .action-copy small{display:block}.button-9 .action-symbol{width:32px;height:32px;border:1px dashed #8680bf;border-radius:50%;color:#bcb4ff;font-size:21px}.button-9 .action-arrow{display:none}.button-9 .action-copy>span{font-size:12px}
.button-10{border:1px solid #666bb24d;background:linear-gradient(105deg,#303359,#171f3a);border-radius:13px;padding-left:10px;gap:13px}.button-10 .symbol-plus{display:none}.button-10 .action-symbol .symbol-logo{display:block;width:30px;height:30px}.button-10 .action-arrow{font-size:14px;color:#8d95bd}
.button-lab{padding-top:30px;padding-bottom:40px}.button-lab-heading{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:24px}.button-lab-heading a{font-size:12px;color:#a9b0d4}.button-lab h1{font-size:30px;letter-spacing:-1px;margin-top:18px}.button-lab-heading p{font-size:12px;color:#8f9abd;line-height:1.7;margin-top:10px}#button-choice-note{font:11px var(--mono);padding:9px 12px;background:#1c2444;border:1px solid #61699b45;border-radius:7px;white-space:nowrap;color:#c1c3ff}.button-options-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.button-option{border:1px solid #323b603d;border-radius:13px;background:#111936;overflow:hidden}.button-option.chosen{border-color:#9390ed}.button-option-title{display:flex;align-items:center;gap:12px;padding:15px 17px}.button-option-title>span{font:10px var(--mono);color:#7c86aa}.button-option-title h2{font-size:13px;letter-spacing:0;font-weight:500;color:#aeb7d5}.button-option-stage{height:112px;display:flex;align-items:center;justify-content:center;background:#0c132b;margin:0 10px;border-radius:8px}.choose-button-style{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 17px;border:0;background:none;color:#929dbf;font-size:11px}.choose-button-style[aria-pressed=true]{color:#b9b6ff}.choice-check{visibility:hidden}.choose-button-style[aria-pressed=true] .choice-check{visibility:visible}
@media(max-width:1100px){.button-options-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-header-inner{gap:18px}}
@media(max-width:760px){.button-lab-heading{align-items:flex-start;flex-direction:column;gap:14px}.button-lab h1{font-size:27px}.button-lab-heading p{font-size:11px}.button-lab-link{font-size:10px}.workspace-header-inner{flex-wrap:wrap;padding:12px 14px;gap:12px}.workspace-header-inner>.reconstruction-action{margin-left:auto;min-height:44px;font-size:12px}.button-options-grid{grid-template-columns:1fr}.button-option-stage{height:108px}.button-lab{padding-top:24px}.workspace-header .brand{font-size:20px}.workspace-header-inner>.button-lab-link{margin-left:auto}.workspace-header-inner>.reconstruction-action{width:100%}.workspace-header nav{display:none}}
/* Further explorations of the original play-mark action, using the supplied logo. */
.button-collection-heading{grid-column:1/-1;font-size:15px;font-weight:500;letter-spacing:0;display:flex;align-items:center;gap:12px;color:#c6cde6;margin:7px 0 0}.button-collection-heading>span{font:10px var(--mono);color:#808aac}.button-collection-heading#original-buttons{margin-top:20px;border-top:1px solid #293151;padding-top:25px}
.logo-variation{position:relative;isolation:isolate}.logo-variation .symbol-plus{display:none}.logo-variation .action-symbol .symbol-logo{display:block;width:30px;height:30px}.logo-variation .action-arrow{font-size:14px}.logo-variation .action-copy{position:relative;z-index:1}
.button-11{background:#222949;border:1px solid #737bb252;border-radius:12px;padding:6px 16px 6px 6px;gap:12px}.button-11 .action-symbol{width:37px;height:35px;border-radius:8px;background:#41416a;border:1px solid #b0a9f126}.button-11 .symbol-logo{width:27px!important;height:27px!important}.button-11 .action-arrow{display:none}
.button-12{background:#171f3c;border:1px solid #464e7b;border-radius:8px;padding:0 16px 0 0;gap:14px;overflow:hidden}.button-12 .action-symbol{align-self:stretch;width:49px;border-right:1px solid #5a608d;background:#2d3155}.button-12 .action-arrow{margin-left:9px;color:#858db7}
.button-13{border-radius:30px;border:1px solid #8d85c552;background:#2c294a;padding:0 18px 0 11px;gap:11px}.button-13 .action-symbol{width:30px;height:30px;border-radius:50%;background:#b1a0f313}.button-13 .symbol-logo{width:25px!important;height:25px!important}.button-13 .action-arrow{color:#bbaee7}
.button-14{background:#10172c66;border:1px solid #777fa123;border-radius:10px;padding:0 13px 0 7px;gap:11px;color:#c5cbe4}.button-14 .symbol-logo{opacity:.7;width:35px!important;height:35px!important}.button-14 .action-arrow{display:none}.button-14:hover{background:#202743}
.button-15{background:#5b56c4;border:1px solid #a49af052;border-radius:11px;padding:0 16px 0 10px;gap:11px;color:#fff}.button-15 .action-symbol{padding-right:3px}.button-15 .symbol-logo{filter:brightness(1.35)}.button-15 .action-arrow{color:#ded9ff}
.button-16{background:#0b1128;border:1px solid #3e486c;border-radius:12px;padding:6px 8px 6px 14px;gap:12px;box-shadow:inset 0 2px 6px #0003}.button-16 .action-symbol{order:2;display:grid;place-items:center;background:#252e4e;width:34px;height:32px;border-radius:7px;border:1px solid #5b628647}.button-16 .symbol-logo{width:24px!important;height:24px!important}.button-16 .action-arrow{display:none}
.button-17{background:#717699;border:0;border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));padding:0 17px 0 10px;gap:11px}.button-17:before{content:'';position:absolute;inset:1px;z-index:-1;background:#222945;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}.button-17 .symbol-logo{width:27px!important;height:27px!important}.button-17 .action-arrow{display:none}
.button-18{background:transparent;border:0;border-radius:8px;padding:0 6px;gap:13px;color:#c6c8ee}.button-18 .symbol-logo{width:40px!important;height:40px!important}.button-18 .action-copy>span{border-bottom:1px solid #8885bc55;padding-bottom:5px;margin-top:5px}.button-18 .action-arrow{margin-left:4px;color:#888ab8}
.button-19{overflow:hidden;background:#242948;border:1px solid #646d9b52;border-radius:12px;padding:0 55px 0 17px;min-height:49px}.button-19 .action-symbol{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:-1}.button-19 .symbol-logo{width:58px!important;height:58px!important;opacity:.15}.button-19 .action-arrow{display:none}
.button-20{background:#11193633;border:1px solid #a39aed91;border-radius:11px;padding:0 16px 0 10px;gap:11px;box-shadow:inset 0 1px 0 #cdc6ff0a}.button-20 .action-symbol{width:32px;height:32px}.button-20 .symbol-logo{width:29px!important;height:29px!important}.button-20 .action-arrow{color:#aea4f2}.button-20:hover{background:#8170d01c}
@media(max-width:760px){.button-collection-heading{font-size:14px}.workspace-header-inner>.button-16 .action-symbol{margin-left:auto}.workspace-header-inner>.button-19{padding-right:55px}}
/* The supplied tiled mark is split into its seven original pieces for motion. */
.animated-play-mark{display:none}.button-21 .action-symbol .symbol-logo{display:none}.button-21 .animated-play-mark{display:block;width:31px;height:32px;overflow:visible;flex-shrink:0}.animated-logo-tile{fill:#b9b4ef;transform-box:fill-box;transform-origin:center}.animated-logo-tile.logo-tip{fill:#f1d9bd}
.button-21{min-height:49px;gap:13px;padding:0 17px 0 12px;border:1px solid #bc94803b;border-radius:12px;color:#f2e8e6;background:radial-gradient(ellipse at 14% 110%,#78505673,transparent 65%),radial-gradient(ellipse at 92% -15%,#b686514d,transparent 62%),#302638;box-shadow:inset 0 1px 0 #f3d8bc12,0 3px 12px #05071622;transition:border-color .25s,background-color .25s;isolation:isolate;overflow:hidden}.button-21 .action-copy>span{font-size:13px;letter-spacing:.05px;font-weight:500}.button-21 .action-symbol{position:relative;z-index:1}.button-21 .action-arrow{color:#c7a594;margin-left:9px;font-size:15px}.button-21:after{content:'';position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(ellipse at 75% 15%,#e9ba7830,transparent 75%);transition:opacity .35s}.button-21:hover{filter:none;border-color:#d9b39a70;background-color:#382b3b}.button-21:hover:after,.button-21:focus-visible:after{opacity:1}.button-21:active{background-color:#292233}.button-option[data-option="21"]{grid-column:1/-1}.button-option[data-option="21"] .button-option-stage{height:150px}
@media(prefers-reduced-motion:reduce){.button-21,.button-21:after{transition:none}}
/* Independently mix a restrained material palette with logo motion. */
[data-palette=ember],.palette-ember{--finish-base:#302638;--finish-left:#78505673;--finish-right:#b686514d;--finish-border:#bc948050;--finish-tip:#f1d9bd;--finish-icon:#b9b4ef}
[data-palette=rose],.palette-rose{--finish-base:#322631;--finish-left:#9b53604a;--finish-right:#d4a6943d;--finish-border:#c1939857;--finish-tip:#f3d5ce;--finish-icon:#ceacc4}
[data-palette=olive],.palette-olive{--finish-base:#292e29;--finish-left:#6e805e4a;--finish-right:#c7a36a47;--finish-border:#b5af8052;--finish-tip:#f0dfb5;--finish-icon:#bcc9b0}
[data-palette=wine],.palette-wine{--finish-base:#2c2438;--finish-left:#9152704a;--finish-right:#a58aba3d;--finish-border:#b995b554;--finish-tip:#efc9d8;--finish-icon:#c6afe6}
[data-palette=graphite],.palette-graphite{--finish-base:#252b32;--finish-left:#6a747d33;--finish-right:#b6aaa03b;--finish-border:#afb0b44d;--finish-tip:#f2e9dd;--finish-icon:#b9c3d2}
[data-palette=cocoa],.palette-cocoa{--finish-base:#322b2d;--finish-left:#8a665141;--finish-right:#cbbfab42;--finish-border:#c0ab9752;--finish-tip:#f3e8d6;--finish-icon:#c7b7b6}
.button-21[data-palette]{background:radial-gradient(ellipse at 14% 110%,var(--finish-left),transparent 65%),radial-gradient(ellipse at 92% -15%,var(--finish-right),transparent 62%),var(--finish-base);border-color:var(--finish-border)}.button-21[data-palette] .animated-logo-tile{fill:var(--finish-icon)}.button-21[data-palette] .logo-tip{fill:var(--finish-tip)}.button-21[data-palette] .action-arrow{color:var(--finish-tip);opacity:.7}.button-21[data-palette]:after{background:radial-gradient(ellipse at 75% 15%,var(--finish-right),transparent 75%)}.button-21[data-palette]:hover{border-color:var(--finish-tip)}
.motion-mixer{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-bottom:24px;padding:22px;background:#111936;border:1px solid #454b713d;border-radius:14px}.mixer-group h2{font-size:13px;letter-spacing:0;font-weight:500;margin-bottom:14px;color:#c7cee5}.palette-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.palette-options button{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid #39415d;background:#0c142b;border-radius:8px;color:#aab4d1;font-size:10px;text-align:left}.palette-options i{width:26px;height:26px;flex-shrink:0;border-radius:6px;border:1px solid var(--finish-border);background:radial-gradient(ellipse at 0 100%,var(--finish-left),transparent 80%),radial-gradient(ellipse at 100% 0,var(--finish-right),transparent 80%),var(--finish-base)}.palette-options button[aria-pressed=true]{border-color:#a69ab7;color:#f1e7ef;background:#29263f}.motion-options{display:flex;gap:7px;flex-wrap:wrap}.motion-options button{padding:10px 12px;border:1px solid #39415d;border-radius:7px;background:#0c142b;color:#aab4d1;font-size:11px}.motion-options button[aria-pressed=true]{border-color:#a69ab7;background:#29263f;color:#f1e7ef}.motion-mixer-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.motion-mixer-footer p{font-size:10px;color:#8f9abb;line-height:1.6}.motion-mixer-footer button{white-space:nowrap;background:none;border:0;color:#c5b6d2;font-size:10px;padding:7px 0}
@media(max-width:1050px){.motion-mixer{grid-template-columns:1fr}.motion-options{gap:9px}}
@media(max-width:500px){.motion-mixer{padding:15px;gap:20px}.palette-options{grid-template-columns:1fr 1fr}.motion-options button{font-size:10px;padding:9px 10px}.motion-mixer-footer{align-items:flex-start;flex-direction:column;gap:6px}}
/* App-native finishes: navy foundations, desaturated violet and pearl light. */
[data-palette=iris],.palette-iris{--finish-base:#20263e;--finish-left:#6c62a74f;--finish-right:#9297bb42;--finish-border:#9496c752;--finish-tip:#e2dff5;--finish-icon:#b6b0eb}
[data-palette=lavender],.palette-lavender{--finish-base:#24243f;--finish-left:#7970be57;--finish-right:#c5bce13b;--finish-border:#b3a5dd57;--finish-tip:#ece4fa;--finish-icon:#c7bef3}
[data-palette=ink],.palette-ink{--finish-base:#121b32;--finish-left:#46567b42;--finish-right:#b2b2c43b;--finish-border:#8996b64d;--finish-tip:#e3e7f0;--finish-icon:#acb8dc}
[data-palette=amethyst],.palette-amethyst{--finish-base:#27223a;--finish-left:#8d6d9e42;--finish-right:#7776b857;--finish-border:#a198c154;--finish-tip:#e8dcef;--finish-icon:#c1afe6}
[data-palette=moonstone],.palette-moonstone{--finish-base:#202a3b;--finish-left:#708a9342;--finish-right:#9b91be42;--finish-border:#94a1bb4d;--finish-tip:#e3e8e7;--finish-icon:#bac5de}
/* Richer color accents while retaining dark, readable surfaces. */
[data-palette=orchid],.palette-orchid{--finish-base:#38213e;--finish-left:#a158c389;--finish-right:#ec8d786b;--finish-border:#d291c075;--finish-tip:#ffd3b9;--finish-icon:#d4a6ff}
[data-palette=jade],.palette-jade{--finish-base:#183a35;--finish-left:#2baf9278;--finish-right:#e0b35070;--finish-border:#9dc58f70;--finish-tip:#ffe1a1;--finish-icon:#a0eed6}
[data-palette=apricot],.palette-apricot{--finish-base:#3c2738;--finish-left:#9560bb85;--finish-right:#f6aa687d;--finish-border:#d9a38578;--finish-tip:#ffe4b6;--finish-icon:#dcc0ff}
[data-palette=opal],.palette-opal{--finish-base:#263341;--finish-left:#5fc8b574;--finish-right:#c18cf18a;--finish-border:#a0c8d375;--finish-tip:#f1d5ff;--finish-icon:#b0f1df}
/* More saturated finishes drawn from the app's violet/navy palette. */
[data-palette=electric-iris],.palette-electric-iris{--finish-base:#25214b;--finish-left:#7871f5b0;--finish-right:#bca1f77d;--finish-border:#a59afa9c;--finish-tip:#e9d8ff;--finish-icon:#c4c0ff}
[data-palette=violet-bloom],.palette-violet-bloom{--finish-base:#30204a;--finish-left:#885ee6a1;--finish-right:#d786da83;--finish-border:#bb8ee791;--finish-tip:#ffe0f5;--finish-icon:#d4b8ff}
[data-palette=periwinkle],.palette-periwinkle{--finish-base:#222b50;--finish-left:#727cefb0;--finish-right:#bab8ff8c;--finish-border:#a7aff59c;--finish-tip:#e8eaff;--finish-icon:#c2ceff}
[data-palette=ultraviolet],.palette-ultraviolet{--finish-base:#282047;--finish-left:#655bf0b5;--finish-right:#b57cfa8c;--finish-border:#a18bf5a1;--finish-tip:#f0d8ff;--finish-icon:#c4b7ff}
/* Quiet navigation beside the primary reconstruction action. */
.workspace-header nav .workspace-home-link{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;min-height:40px;border:1px solid transparent;border-radius:9px;color:#a3acc9;font-size:12px;transition:background-color .16s,color .16s,border-color .16s}.workspace-home-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;flex-shrink:0;transition:transform .16s}.workspace-header nav .workspace-home-link:hover{background:#9c9bfa12;color:#e0e2ff;border-color:#a2a5dc20}.workspace-home-link:hover svg{transform:translateY(-1px)}.workspace-header nav .workspace-home-link[aria-current=page]{color:#c0c0f4;background:#9291f30c}.workspace-header nav .workspace-home-link[aria-current=page]:hover{background:#9c9bfa1a;color:#f0efff}.workspace-header nav .workspace-home-link:active{background:#9c9bfa23}.workspace-home-link:focus-visible{outline:2px solid #aaa8f3;outline-offset:3px}
@media(max-width:760px){.workspace-header nav{display:flex;margin-left:auto}.workspace-header nav .workspace-home-link{padding:8px;min-height:36px;font-size:11px;gap:6px}.workspace-home-link svg{width:15px;height:15px}.workspace-header-inner>.button-lab-link{margin-left:0;font-size:9px}.button-lab-link>span{display:none}}
@media(max-width:360px){.workspace-header-inner{gap:7px}.workspace-header .brand{font-size:18px}.workspace-header nav .workspace-home-link{padding:7px 6px}.workspace-header-inner>.button-lab-link{font-size:8px}}
@media(prefers-reduced-motion:reduce){.workspace-header nav .workspace-home-link,.workspace-home-link svg{transition:none}.workspace-home-link:hover svg{transform:none}}
/* The chosen action replaces the temporary style-navigation link. */
.workspace-header-inner>.reconstruction-action{margin-left:auto}