:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#e3e5e5;background:#111315;font-size:13px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:0}button,a,input{ -webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.card:focus-visible,[role=tabpanel]:focus-visible{outline:2px solid #bdddc0;outline-offset:3px}h1,h2,p,figure{margin:0}button:disabled{opacity:.3;cursor:default}.header{height:82px;padding:0 30px;border-bottom:1px solid #ffffff0c;display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{color:#efefea;text-decoration:none;font-weight:750;font-size:14px;letter-spacing:2px;white-space:nowrap}.brand span{display:block;color:#80878b;font-size:10px;font-weight:400;letter-spacing:.6px;margin-top:6px}.header-actions{display:flex;gap:8px}.button{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border:1px solid #ffffff1a;border-radius:5px;background:transparent;font-size:11px;color:#bdc7c7;cursor:pointer}.button:hover:not(:disabled){background:#ffffff08}.load-style{position:relative;overflow:hidden}.load-style input,.add-button input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.load-style:focus-within,.add-button:focus-within{outline:2px solid #b9dfbf;outline-offset:3px}.workshop{max-width:1800px;margin:auto;display:grid;grid-template-columns:170px minmax(300px,1fr) 400px;min-height:calc(100svh - 82px)}.panel{padding:25px 20px}.library{border-right:1px solid #ffffff0c}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}h2,h1{font-size:13px;font-weight:600}h1{font-size:16px}#preset-count{font-size:10px;color:#6c797b}.add-button{display:grid;place-items:center;width:27px;height:27px;border:1px solid #ffffff1a;border-radius:5px;font-size:21px;color:#adb4b6;position:relative;cursor:pointer}.card-list{display:grid;gap:10px}.library-card{display:grid;text-align:left;gap:8px;background:transparent;border:1px solid transparent;padding:8px;border-radius:6px;width:100%;color:#9aa3a7;font-size:11px;overflow:hidden}.library-card img{width:100%;aspect-ratio:2/2.6;object-fit:cover;border-radius:3px}.library-card span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-card[aria-pressed=true]{background:#202727;border-color:#b9dfbf38;color:#e5eae6}.library-card:hover{background:#ffffff06}.library-help,.save-note{font-size:10px;line-height:1.6;color:#727c80;margin-top:20px}.preview{display:flex;flex-direction:column;padding:26px 34px 24px;min-width:0;background:radial-gradient(ellipse at 50% 45%,#34403944,transparent 65%),#141819;position:sticky;top:0;height:calc(100svh - 82px);min-height:550px}.preview-heading,.preview-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:#a3acae}.display{display:grid;place-items:center;flex:1;padding:30px 20px;min-height:0}.stage{width:min(100%,410px,calc((100svh - 245px)*2/3));aspect-ratio:2/3;perspective:1100px}.card{--rx:0deg;--ry:0deg;--mx:50%;--my:35%;--dx:0px;--dy:0px;width:100%;height:100%;position:relative;transform:rotateX(var(--rx)) rotateY(var(--ry));border-radius:12px;box-shadow:0 30px 65px #000a;touch-action:pan-y;outline:none;will-change:transform}.card-face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#202527}.art{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.035) translate(var(--dx),var(--dy));user-select:none}.finish-fallback,.gpu-finish,.ink-layer,.light-layer,.particle-layer,.border-layer{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;border-radius:inherit}.gpu-finish{mix-blend-mode:screen}.gpu-finish canvas{width:100%!important;height:100%!important;display:block}.finish-fallback{mix-blend-mode:screen;background-size:250% 250%;background-position:var(--mx) var(--my)}.gpu-ready .finish-fallback{display:none}.light-layer{mix-blend-mode:screen}.card.original .finish-fallback,.card.original .gpu-finish,.card.original .ink-layer,.card.original .light-layer,.card.original .particle-layer,.card.original .border-layer{visibility:hidden}.preview-footer{color:#637175;font-size:10px;flex-wrap:wrap}.text-button{background:none;color:#b9cfbe;padding:8px 0;font-size:11px}.compact-toggle{display:flex;gap:6px;align-items:center;color:#97a5a2;cursor:pointer;font-size:10px}.compact-toggle input{accent-color:#bdd4b4;width:13px;height:13px}.inspector{border-left:1px solid #ffffff0c;padding:27px 22px}.inspector .section-heading{margin-bottom:22px}.layer-tabs{display:flex;gap:3px;border-bottom:1px solid #ffffff13;padding-bottom:10px;margin-bottom:20px}.layer-tab{flex:1;min-width:0;background:none;color:#79878a;font-size:10px;border-radius:4px;padding:9px 2px;position:relative}.layer-tab[aria-selected=true]{color:#d3e4d2;background:#bed6ad12}.layer-tab .active-dot{display:block;width:3px;height:3px;border-radius:50%;background:#b3ccae;margin:5px auto 0}.layer-tab .active-dot.off{background:#465052}.layer-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.layer-heading h2{font-size:12px;font-weight:500}.toggle-row{display:flex;align-items:center;position:relative;gap:9px;min-height:27px;font-size:10px;color:#8e9c99;cursor:pointer}.toggle-row input{position:absolute;right:0;width:32px;height:22px;opacity:0;cursor:pointer}.switch{width:29px;height:16px;background:#343c3f;border-radius:12px;pointer-events:none;transition:background .2s}.switch:after{content:'';display:block;width:10px;height:10px;margin:3px;background:#899397;border-radius:50%;transition:transform .2s}.toggle-row input:checked+.switch{background:#b6d0af}.toggle-row input:checked+.switch:after{background:#253124;transform:translateX(13px)}.toggle-row input:focus-visible+.switch{outline:2px solid #c9e9cd;outline-offset:4px}.preset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.preset{min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;padding:7px 3px 9px;background:#ffffff02;border:1px solid #ffffff0d;border-radius:5px;color:#9ba9aa;font-size:9px;line-height:1.3;text-align:center}.preset:hover{border-color:#ffffff33}.preset[aria-pressed=true]{border-color:#bed5afaa;background:#b7d3b10b;color:#e2e9df}.preset-sample{display:block;width:100%;height:54px;position:relative;border-radius:3px;overflow:hidden;background:#262e30}.preset-sample canvas{display:block;position:absolute;inset:0;width:100%;height:100%}.preset span:last-child{min-height:24px;display:grid;place-items:center}.layer-settings{margin-top:20px}.range-label{display:flex;justify-content:space-between;color:#98a1a4;font-size:11px}.range-label output{color:#bdc9c8}input[type=range]{display:block;width:100%;accent-color:#b8d5b6;height:3px;margin:16px 0 22px;cursor:pointer}.field-label{display:block;color:#98a1a4;font-size:10px;margin-bottom:9px}select{width:100%;border:1px solid #ffffff19;background:#1b2022;color:#c0cbcb;border-radius:5px;padding:9px;font-size:11px}.ink-settings{display:none;margin-bottom:16px}.ink-settings .button{margin-top:10px;width:100%}.motion-settings{border-top:1px solid #ffffff0c;padding-top:19px;margin-top:23px}.save-note{margin-top:15px;border-top:1px solid #ffffff0b;padding-top:16px}.save-note.error{color:#edb39e}[hidden]{display:none!important}#layer-panel{outline:none}
@media(min-width:1450px){.workshop{grid-template-columns:200px minmax(300px,1fr) 430px}.inspector{padding-left:28px;padding-right:28px}.preset-sample{height:62px}.preset{font-size:10px}.library-card{display:flex}.library-card img{width:45px;height:65px}}
.preset-sample{--mx:50%;--my:50%}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}
body{min-width:1120px}.page-nav{display:flex;align-items:center;gap:8px;margin-right:auto;margin-left:30px}.page-nav a{color:#7f8d8d;text-decoration:none;font-size:11px;padding:9px 12px;border-radius:5px}.page-nav a[aria-current=page]{color:#d7e6d3;background:#bad3b00d}.page-nav a:hover{color:#e0e9df}
/* Shared typography and Font Awesome Free control icons. */
.brand{font-weight:700}.button,.play-button{gap:7px}.button .fa-solid,.play-button .fa-solid{font-size:11px;line-height:1}.play-button{display:inline-flex;align-items:center;justify-content:center}.page-nav a{display:inline-flex;align-items:center;gap:7px}.page-nav .fa-solid{font-size:11px}.add-button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;font-size:13px;line-height:1}.add-button .fa-solid{display:block;line-height:1;pointer-events:none}.add-button:hover{color:#e0eddd;border-color:#b9dfbf66;background:#b9dfbf0b}
.add-button{background:transparent;color:#adb4b6}
/* Each layer can be toggled without selecting its settings tab. */
.layer-tab-group{flex:1;min-width:0;border-radius:4px}.layer-tab-group:has(.layer-tab[aria-selected=true]){background:#bed6ad12}.layer-tab-group .layer-tab{width:100%;display:block;padding:10px 2px 5px}.layer-tab-group .layer-tab[aria-selected=true]{background:transparent}.tab-toggle{position:relative;display:flex;align-items:center;justify-content:center;min-height:29px;padding:3px 0 9px;cursor:pointer}.tab-toggle input{position:absolute;width:42px;height:27px;opacity:0;margin:0;cursor:pointer}.tab-toggle input:checked+.switch{background:#b6d0af}.tab-toggle input:checked+.switch:after{background:#253124;transform:translateX(13px)}.tab-toggle input:focus-visible+.switch{outline:2px solid #c9e9cd;outline-offset:4px}
.border-types{display:flex;gap:3px;padding:3px;border:1px solid #ffffff12;border-radius:6px;margin:0 0 16px;background:#080e0e44}.border-types button{flex:1;background:transparent;border-radius:4px;padding:9px 12px;color:#7f9390;font-size:11px}.border-types button[aria-selected=true]{background:#bfd6b518;color:#deebd7}.border-types button:hover{color:#e2ecdf}
/* Rear lighting sits behind the opaque card face, outside its clipping mask. */
.card,.test-card{isolation:isolate}.backlight-layer{position:absolute;inset:-10px;z-index:-1;border-radius:inherit;pointer-events:none;filter:blur(20px)}.card.original .backlight-layer{visibility:hidden}.backlit-sample{background:#15201e!important;isolation:isolate}.backlit-sample .sample-glow{display:block;position:absolute;inset:7px;filter:blur(8px);min-height:0}.backlit-sample .sample-card{position:absolute;inset:11px 28%;display:block;min-height:0;background:#24312d;border:1px solid #ffffff22;border-radius:3px;box-shadow:0 2px 8px #0006}