@import url('./assets/mystic/alchemy.css');
.mystic-studio{--mystic-accent:#bba8f2;min-width:0;color:var(--paper,#fff7e9)}
.mystic-hero{padding:48px 40px 38px;border-bottom:1px solid var(--line,#ffffff18);background:radial-gradient(ellipse at 86% 17%,#6a4e8033,transparent 70%)}
.mystic-hero>.eyebrow{color:#b7a0d3}.mystic-hero h1{font:400 clamp(38px,4.2vw,59px)/1.05 Cormorant,Georgia,serif;letter-spacing:-1.2px;margin:24px 0 18px}.mystic-hero h1 em{font-weight:400;color:var(--ice,#8ec8e2)}.mystic-hero>p{max-width:550px;font:11px/1.9 Jakarta,sans-serif;color:#b9acc3;margin:0}
.mystic-feature{background:linear-gradient(125deg,#121320de,#11101bcc);border-bottom:1px solid var(--line,#ffffff18)}
.mystic-alchemy-stage,.mystic-windows-stage{height:350px;min-height:260px;position:relative;overflow:hidden;container-type:size;isolation:isolate;background:radial-gradient(ellipse at 50% 50%,#53456b38,transparent 67%),radial-gradient(ellipse at 10% 90%,#3a737120,transparent 60%),#080b16}
.mystic-alchemy-stage:before,.mystic-windows-stage:before{content:'';position:absolute;inset:0;opacity:.65;pointer-events:none;background-image:radial-gradient(circle at 12% 18%,#bd9ee378 0 .7px,transparent 1px),radial-gradient(circle at 71% 16%,#8ccbdd78 0 .8px,transparent 1.2px),radial-gradient(circle at 85% 74%,#edd29c8c 0 1px,transparent 1.4px),radial-gradient(circle at 22% 81%,#b59bcd70 0 .6px,transparent 1px),radial-gradient(circle at 58% 90%,#bd9ee370 0 .7px,transparent 1px)}
.mystic-stage-label{position:absolute;left:23px;top:20px;font:7px/1.5 Jet,monospace;letter-spacing:.15em;color:#978aa9;z-index:4;pointer-events:none}
.mystic-circle-wrap.alchemy-layer{width:min(calc(75cqw * var(--alchemy-scale,1)),calc(82cqh * var(--alchemy-scale,1)));max-width:92cqw;max-height:92cqh;z-index:1}
.mystic-selection-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:25px 28px 19px;border-top:1px solid #ffffff12}.mystic-selection-heading .eyebrow{color:#b9a1ce;font-size:7px}.mystic-selection-heading h2{font:400 31px/1.05 Cormorant,Georgia,serif;margin:10px 0}.mystic-selection-heading p{font:10px/1.8 Jakarta,sans-serif;color:#a99cb6;margin:0;max-width:420px}.mystic-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.mystic-actions button,.mystic-selection-heading>button,.mystic-controls>button{padding:10px 12px;border:1px solid #c4a3e536;font:8px/1.5 Jet,monospace;color:#d2badf;background:#b195d409;min-height:36px}.mystic-actions button:hover,.mystic-selection-heading>button:hover{border-color:#d9b9ed88;background:#b195d415}.mystic-actions button:disabled{opacity:.38;cursor:not-allowed}
.mystic-controls{display:flex;align-items:end;gap:18px;flex-wrap:wrap;padding:20px 28px 25px;border-top:1px solid #ffffff10}.mystic-controls label{display:grid;gap:9px;font:8px/1.5 Jet,monospace;color:#b9a8c5;position:relative;flex:1;min-width:95px}.mystic-controls label:has(input[type=color]){flex:0 0 70px;min-width:70px}.mystic-controls output{position:absolute;top:0;right:0;color:#e4d7ea}.mystic-controls input[type=color]{width:50px;height:35px;background:#11111c;border:1px solid #ffffff25;padding:4px}.mystic-controls input[type=range]{width:100%;max-width:180px;accent-color:#bba8f2;height:28px;cursor:pointer}.mystic-controls select,.mystic-filter-row select,.mystic-filter-row input{border:1px solid #c0a2d12e;background:#151321;color:#e3d6e9;padding:10px;min-height:37px;min-width:0;border-radius:0;font:9px/1.5 Jet,monospace}.mystic-controls label select{width:100%}.mystic-controls>button{background:none;border-color:transparent;text-decoration:underline;text-underline-offset:4px;font-size:8px}
.mystic-library{padding:33px 28px 30px}.mystic-library-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}.mystic-library-heading .eyebrow{color:#a68db8;font-size:7px}.mystic-library-heading h2{font:400 29px/1.15 Cormorant,Georgia,serif;margin:11px 0 22px}.mystic-tabs{display:flex;gap:17px}.mystic-tabs button{font:8px/1.5 Jet,monospace;padding:10px 0;border-bottom:1px solid transparent;color:#9f8eaf}.mystic-tabs button[aria-pressed=true]{color:#e1c8ed;border-color:#b6a2c8}.mystic-filter-row{display:flex;gap:15px;align-items:end;margin:8px 0 25px;flex-wrap:wrap}.mystic-filter-row label{display:grid;gap:9px;flex:1;font:8px/1.5 Jet,monospace;color:#b0a1bb;min-width:150px}.mystic-filter-row label:first-child{flex:1.3}.mystic-filter-row output{font:7px/1.5 Jet,monospace;color:#91839f;padding-bottom:13px;white-space:nowrap}.mystic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px 17px}.mystic-card{min-width:0;padding:0 0 12px;text-align:left;color:#e5d9ec;border-bottom:1px solid #b99bcc20;background:none;transition:border-color .2s}.mystic-card-art{display:block;padding:13px;aspect-ratio:1;background:radial-gradient(ellipse at center,#3e31563c,transparent 74%);border:1px solid transparent;transition:background .2s,border-color .2s}.mystic-card-art .alchemy-art{filter:none}.mystic-card[aria-pressed=true]{border-bottom-color:#bda7d6}.mystic-card[aria-pressed=true] .mystic-card-art{border-color:#bda7d655;background:#54406b24}.mystic-card:hover .mystic-card-art{background:#54406b26}.mystic-card-index{display:block;font:6px/1.7 Jet,monospace;letter-spacing:.03em;color:#927fa6;margin:11px 0 5px;white-space:normal}.mystic-card strong{display:block;font:9px/1.65 Jakarta,sans-serif;font-weight:500}.mystic-empty{font:11px/1.8 Jakarta,sans-serif;color:#aa9ab8;grid-column:1/-1;padding:25px 0}
.mystic-windows-stage{height:350px;background:radial-gradient(ellipse at 85% 80%,#50334766,transparent 70%),radial-gradient(ellipse at 15% 10%,#203d5c66,transparent 70%),#0c0e1d}.mystic-window-host{position:absolute;inset:48px 24px 23px}.mystic-window-canvas{position:absolute;inset:0}.mystic-sample-window{position:absolute;overflow:hidden;border:1px solid var(--window-border);background:#151723;box-sizing:border-box;box-shadow:0 7px 18px #02030b50;min-width:0}.mystic-sample-title{height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 9px;color:var(--window-text);background:var(--window-caption);font:8px/1.2 Jakarta,sans-serif;border-bottom:1px solid color-mix(in srgb,var(--window-border) 35%,transparent);gap:5px}.mystic-sample-title>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mystic-sample-title>i{font:8px/1 Jet,monospace;font-style:normal;white-space:nowrap;opacity:.8;flex-shrink:0}.mystic-sample-content{position:absolute;inset:24px 0 0;padding:13px 10px;overflow:hidden;background:linear-gradient(135deg,#1c1e2c,#121622)}.mystic-sample-content>i{display:block;width:64%;height:3px;background:#777a8d2b;margin:0 0 8px}.mystic-sample-content>i:nth-child(2){width:87%}.mystic-sample-content>i:nth-child(3){width:43%}.mystic-sample-content>span{position:absolute;bottom:8px;right:12px;color:var(--window-border);opacity:.5;font:30px Cormorant,serif}.mystic-window-selects label{min-width:180px}.mystic-compatibility{margin:0;padding:0 28px 25px;font:10px/1.8 Jakarta,sans-serif;color:#b9a7c5;max-width:750px}.mystic-view-mini{height:84px;border:1px solid var(--window-border);display:block;background:#141724;overflow:hidden;box-shadow:0 4px 14px #0003}.mystic-view-mini>span{display:flex;justify-content:space-between;gap:4px;background:var(--window-caption);color:var(--window-text);font:6px/1.4 Jakarta,sans-serif;white-space:nowrap;overflow:hidden;padding:7px}.mystic-view-mini>span>i{font:6px Jet,monospace;font-style:normal;flex-shrink:0}.mystic-view-mini>b{display:block;margin:9px 9px 0;width:60%;height:2px;background:#696b7e40}.mystic-view-mini>b:nth-child(3){width:80%}.mystic-view-mini>b:nth-child(4){width:44%}.mystic-layout-mini{position:relative;display:block;height:84px;padding:0;background:#171624;overflow:hidden;border:1px solid #a88bc22b}.mystic-layout-mini>i{position:absolute;box-sizing:border-box;background:#45375088;border:1px solid #a88bc2a6;box-shadow:0 2px 7px #0005}.mystic-view-card[aria-pressed=true] .mystic-view-mini,.mystic-layout-card[aria-pressed=true] .mystic-layout-mini{outline:1px solid #d5b8e7;outline-offset:4px}
.mystic-footnote{padding:35px 28px 40px;border-top:1px solid #ffffff18;display:flex;gap:28px;align-items:end;flex-wrap:wrap;background:linear-gradient(130deg,#31254455,transparent)}.mystic-footnote>div{flex:1;min-width:220px}.mystic-footnote h2{font:400 29px/1.15 Cormorant,Georgia,serif;margin:13px 0}.mystic-footnote p{font:10px/1.9 Jakarta,sans-serif;color:#b3a3be;max-width:530px}.mystic-footnote .mystic-scope-note{font-size:8px;color:#9889a4}.mystic-footnote>a{font-size:9px;flex-shrink:0}.mystic-status{font:7px/1.7 Jet,monospace;color:#9b87b1;margin:0;padding:13px 28px;border-top:1px solid #ffffff10}
.mystic-studio button:focus-visible,.mystic-studio input:focus-visible,.mystic-studio select:focus-visible{outline:2px solid var(--ice,#8ec8e2);outline-offset:4px}.mystic-motion-paused .alchemy-art *{animation-play-state:paused!important}
@media(max-width:1200px){.mystic-hero{padding:35px 27px}.mystic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 15px}.mystic-selection-heading{align-items:start;flex-direction:column;gap:15px}.mystic-controls{gap:15px}.mystic-library{padding-inline:25px}}
@media(max-width:600px){.mystic-hero{padding:36px 26px 28px}.mystic-hero h1{font-size:39px}.mystic-hero>p{font-size:10px}.mystic-alchemy-stage,.mystic-windows-stage{height:285px}.mystic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 17px}.mystic-controls,.mystic-selection-heading,.mystic-library,.mystic-footnote{padding-inline:24px}.mystic-controls label{min-width:110px}.mystic-controls label:has(input[type=color]){flex:1;min-width:110px}.mystic-library-heading h2{font-size:27px}.mystic-filter-row label{flex:1 1 100%}.mystic-filter-row output{padding:0}.mystic-window-host{inset:46px 14px 17px}.mystic-sample-title{height:20px;padding-inline:4px;font-size:6px}.mystic-sample-title>i{font-size:6px;letter-spacing:-1px}.mystic-sample-content{inset-block-start:20px;padding:9px 6px}.mystic-sample-content>span{font-size:22px}.mystic-card strong{font-size:10px}.mystic-card-index{font-size:7px}}
@media(prefers-reduced-motion:reduce){.mystic-studio *{transition:none!important}.mystic-studio .alchemy-art *{animation:none!important}}