/* XALO STUDIO V42 — independent local-first studio workspaces. */
:root{color-scheme:dark;--v42-cyan:#8beaf4;--v42-violet:#9a91ff;--v42-card:rgba(14,24,49,.92);--v42-line:rgba(143,191,239,.2)}
html{scroll-padding-top:105px}body.x42-page{background:radial-gradient(ellipse 76% 39% at 69% -7%,#39306745,transparent),radial-gradient(ellipse 58% 40% at -10% 33%,#0089b224,transparent),#060b18!important;color:#eaf5ff!important;min-height:100vh;font-family:Manrope,Inter,'Segoe UI',system-ui,sans-serif!important}.x42-wrap{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:118px 0 56px}.x42-crumb{color:#8dacca;font-size:12px;margin-bottom:27px}.x42-crumb a{color:#9ae8ef;text-decoration:none}.x42-hero{position:relative;padding:32px 0 36px;max-width:840px}.x42-kicker{display:inline-flex;align-items:center;gap:7px;color:#9ce9fc;letter-spacing:.23em;font-size:11px;text-transform:uppercase;font-weight:800}.x42-hero h1{font-size:clamp(32px,5.2vw,64px)!important;line-height:1.09!important;letter-spacing:-.035em!important;margin:13px 0 18px!important;color:#f5fbff!important;font-weight:850!important}.x42-hero h1 em{font-style:normal;background:linear-gradient(106deg,#90eef8,#aca0fc);color:transparent;background-clip:text}.x42-hero p{font-size:15px;line-height:1.78;max-width:730px;color:#b2c5da}.x42-flag{display:inline-flex;gap:7px;align-items:center;padding:7px 12px;border:1px solid #70bcce65;border-radius:100px;background:#82d2f612;font-size:11px;color:#aedfee;margin-top:15px}.x42-stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:20px}.x42-panel{border:1px solid var(--v42-line);border-radius:23px;background:linear-gradient(150deg,#101b35ed,#0b1429e8);padding:25px;box-shadow:0 20px 60px #0003;min-width:0}.x42-panel h2{margin:0 0 7px!important;font-size:21px!important;font-weight:800!important;color:#f0f9ff!important}.x42-panel p{color:#a4bed6;line-height:1.65;font-size:13px;margin:6px 0 18px}.x42-field{display:block;margin:17px 0}.x42-field>span,.x42-label{display:block;color:#d7e8f9;font-size:12px;font-weight:750;margin-bottom:8px}.x42-field input,.x42-field select,.x42-field textarea,.x42-panel input[type=number],.x42-panel select,.x42-panel textarea{width:100%;max-width:100%;min-width:0;min-height:43px;padding:10px 12px;border-radius:12px;background:#060d1f;color:#eefaff;border:1px solid #86bce349;outline:none;font-family:inherit;font-size:13px;box-sizing:border-box}.x42-field input:focus,.x42-field textarea:focus,.x42-field select:focus{border-color:#a0edff;box-shadow:0 0 0 3px #74d7fa19}.x42-field textarea{min-height:84px;resize:vertical}.x42-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}.x42-row>*{flex:1 1 100px}.x42-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:1px solid #8adeff6d;border-radius:13px;background:linear-gradient(115deg,#44d6e9,#7075e5);color:#071224!important;text-decoration:none!important;font:800 13px Manrope,system-ui;cursor:pointer;transition:filter .15s,transform .15s}.x42-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.x42-btn:disabled{opacity:.48;cursor:not-allowed;transform:none}.x42-btn.ghost{background:#20334d;color:#dcf6ff!important}.x42-btn.small{min-height:37px;font-size:12px;padding:7px 11px}.x42-preview{min-height:340px;display:grid;place-items:center;padding:20px;border-radius:17px;border:1px dashed #93caff5e;background:radial-gradient(circle at 50% 46%,#193a6375,transparent 69%),linear-gradient(140deg,#0d1729,#070e20);overflow:hidden;position:relative}.x42-preview canvas,.x42-preview img,.x42-preview video,.x42-preview svg{max-width:100%;max-height:520px;object-fit:contain;display:block}.x42-preview svg{max-height:340px;width:min(280px,100%)}.x42-placeholder{text-align:center;color:#91aec7;max-width:300px;font-size:13px;line-height:1.7}.x42-placeholder b{display:block;font-size:48px;color:#73d7ef;margin-bottom:15px}.x42-status{margin:13px 0!important;min-height:1em;color:#9ee6d4!important;font-size:12px!important}.x42-status.error{color:#ffb5af!important}.x42-foot{display:flex;justify-content:space-between;gap:14px;color:#8aacc6;border-top:1px solid var(--v42-line);padding-top:18px;margin-top:36px;font-size:11px}.x42-foot a{color:#80ddec}.x42-templates{display:flex;gap:7px;flex-wrap:wrap}.x42-templates button{background:#172946;color:#d8f4ff;border:1px solid #81bce844;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:12px}.x42-templates button:hover{background:#21416b}.x42-tilegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.x42-tile{display:flex;flex-direction:column;padding:20px;background:#101b34;border:1px solid var(--v42-line);border-radius:18px;color:inherit;text-decoration:none!important;min-height:170px}.x42-tile strong{font-size:16px;color:#f7fbff}.x42-tile p{font-size:12px;color:#9cb6d0;line-height:1.6;flex:1;margin:10px 0}.x42-tile span{font-size:10px;letter-spacing:.04em;color:#91e3f5}.x42-tile .x42-emoji{font-size:27px;margin-bottom:12px}.x42-range{width:100%;accent-color:#75dfe9}.x42-panel input[type=color]{width:100%;height:43px;padding:3px;background:#071327;border:1px solid #86bce349;border-radius:12px}.x42-check{display:flex;align-items:center;gap:8px;font-size:12px;color:#c3d7e9}.x42-check input{accent-color:#7dd9e5}.x42-steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px;min-width:350px}.x42-steps button{aspect-ratio:1;border:1px solid #51718d;border-radius:6px;background:#182c45;color:#ccdeed;cursor:pointer;font-size:10px}.x42-steps button.on{background:#54d6d4;color:#082438;border-color:#72f0f5}.x42-beatrow{overflow:auto;padding:7px 0;border-bottom:1px solid #83b0de24}.x42-beatrow strong{display:block;white-space:nowrap;font-size:12px;color:#d8eefb;margin-bottom:8px}.x42-swatch{display:flex;gap:8px;align-items:center}.x42-note{padding:13px 15px;border:1px solid #f0d1934f;background:#ac842912;color:#e7d69c;border-radius:11px;font-size:12px;line-height:1.6}.x42-panel[hidden],.x42-preview [hidden]{display:none!important}@media(max-width:800px){.x42-stack{grid-template-columns:1fr}.x42-tilegrid{grid-template-columns:repeat(2,minmax(0,1fr))}.x42-wrap{padding-top:102px}.x42-panel{padding:18px}.x42-preview{min-height:285px}}@media(max-width:480px){.x42-tilegrid{grid-template-columns:1fr}.x42-wrap{width:calc(100% - 22px)}.x42-hero h1{font-size:35px!important}.x42-row>*{flex:1 1 145px}}[dir=rtl] .x42-wrap,[dir=rtl] .x42-panel{text-align:right}[dir=rtl] .x42-crumb{direction:rtl}*:focus-visible{outline:2px solid #9eeafd;outline-offset:3px}