@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");:root{font-family:var(--font-sans);color:var(--color-text);background:var(--color-page);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--color-primary-border);outline-offset:2px}.studio-hub{min-height:100vh;background:var(--color-page)}.studio-switcher{height:var(--size-studio-switcher);display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;background:#0f1824;border-bottom:1px solid #243247}.studio-tab{display:inline-flex;align-items:center;gap:10px;min-width:180px;height:46px;border:1px solid #2d3d53;border-radius:var(--radius-lg);background:#172335;color:#c6d4e5;padding:0 14px;text-align:left}.studio-tab:hover{border-color:#5d91ce;background:#1e3048}.studio-tab.active{background:#eef6ff;border-color:#8bc2fa;color:#16283d}.studio-tab svg{width:18px;height:18px;flex:none}.studio-tab span{display:flex;flex-direction:column;gap:2px;min-width:0}.studio-tab strong{font-size:12px;line-height:1.1}.studio-tab small{font-size:10px;color:inherit;opacity:.74;line-height:1.1}.studio-panel{display:none;min-height:calc(100vh - var(--size-studio-switcher))}.studio-panel.active{display:block}.studio-panel .app-shell{min-height:calc(100vh - var(--size-studio-switcher))}.studio-panel .workspace{min-height:calc(100vh - 143px)}.studio-panel .sidebar{max-height:calc(100vh - 143px)}.studio-panel .preview-area{min-height:calc(100vh - 143px)}.phone-panel{height:calc(100vh - var(--size-studio-switcher));min-height:520px;background:var(--color-surface)}.phone-studio-frame{display:block;width:100%;height:100%;border:0;background:var(--color-surface)}.app-shell{min-height:100vh}.topbar{height:var(--size-topbar);background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;padding:0 var(--space-page-x)}.brand,.topbar{align-items:center}.brand{display:inline-flex;gap:10px;text-decoration:none;color:var(--color-text-strong);font-size:21px;font-weight:800;letter-spacing:-1.1px}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:var(--radius-xl);overflow:hidden;background:var(--color-primary-soft)}.brand-mark svg{width:100%;height:100%}.brand-light{font-weight:500}.brand-dot{color:#5d9de6}.topbar-right{display:flex;align-items:center;gap:18px;color:#94a0ae;font-size:11px;font-weight:700;letter-spacing:.01em}.topbar-divider{width:1px;height:19px;background:#e6ebf0}.topbar-badge{display:flex;align-items:center;gap:7px;color:#5e6d7e}.status-dot{width:7px;height:7px;background:var(--color-success);border-radius:50%;box-shadow:0 0 0 3px #e4f7ee}.workspace{display:grid;grid-template-columns:385px minmax(0,1fr);min-height:calc(100vh - var(--size-topbar))}.sidebar{background:var(--color-surface);border-right:1px solid var(--color-border);padding:34px 30px 22px;overflow:auto;max-height:calc(100vh - var(--size-topbar))}.eyebrow{margin:0;color:#558bd0;font-size:10px;font-weight:800;letter-spacing:.18em}.sidebar-intro h1{margin:10px 0 9px;font-size:28px;line-height:1.25;letter-spacing:-1.3px;font-weight:800}.sidebar-intro h1 em{font-style:normal;color:#5d9de6}.intro-copy{font-size:11px;line-height:1.7;color:var(--color-text-muted);margin:0 0 27px;max-width:280px}.panel-section{border-top:1px solid #edf0f3;padding:24px 0}.section-heading,.section-title{display:flex;align-items:center;gap:12px}.section-heading{margin-bottom:19px}.section-heading h2{margin:0 0 2px;font-size:13px;letter-spacing:-.2px}.section-heading p{margin:0;color:#9ba6b3;font-size:10px}.section-icon{display:grid;place-items:center;flex:none;width:31px;height:31px;border-radius:var(--radius-lg);background:#ecf4fe;color:#5e9bdf;font-size:10px;font-weight:800}.section-heading-action{justify-content:space-between}.count-pill{display:grid;place-items:center;background:#edf4fc;border-radius:20px;color:#6f9fd8;font-size:10px;font-weight:800;min-width:25px;height:21px}.dimensions-grid{display:grid;grid-template-columns:1fr 14px 1fr;grid-gap:10px;gap:10px;align-items:end}.field{display:block}.field-label,.field>span{display:block;color:#607086;font-size:10px;font-weight:700;margin-bottom:8px}.field small{float:right;color:#aeb9c5;font-size:10px;font-weight:600}.field input{width:100%;height:37px;border:1px solid #e5eaf0;border-radius:var(--radius-lg);background:var(--color-surface-subtle);padding:0 11px;color:#2a3b51;font-size:11px;font-weight:700;outline:none}.field input:focus,.hex-input:focus{border-color:var(--color-primary-border);background:var(--color-surface)}.dimension-times{text-align:center;padding-bottom:9px;color:#aeb8c5;font-size:14px}.presets{display:flex;gap:6px;margin:11px 0 21px}.presets button{background:var(--color-surface-muted);border:1px solid transparent;border-radius:var(--radius-sm);padding:6px 10px;color:#93a0ae;font-size:9px;font-weight:700}.presets button.active,.presets button:hover{background:var(--color-primary-soft);color:#538dce;border-color:#d8eafb}.color-control{height:38px;display:flex;align-items:center;border:1px solid #e6eaf0;border-radius:var(--radius-lg);padding:4px 10px 4px 5px;background:var(--color-surface-subtle)}.color-swatch{position:relative;width:29px;height:27px;flex:none;border-radius:var(--radius-sm);background:#eaf5ff;border:1px solid #dce9f6;overflow:hidden}.color-swatch input{position:absolute;inset:-7px;width:43px;height:41px;cursor:pointer;opacity:0}.hex-input{width:100%;min-width:0;border:0;background:transparent;color:#40546e;font-size:11px;font-weight:700;text-transform:uppercase;padding:0 10px;outline:0!important}.color-control-label{color:#b6c0cb;font-size:9px;font-weight:800}.waves-section{padding-bottom:20px}.wave-list{display:flex;flex-direction:column;gap:8px}.wave-card{border:1px solid #e8edf3;border-radius:var(--radius-xl);background:var(--color-surface);overflow:hidden;transition:border-color .2s,box-shadow .2s}.wave-card.active{border-color:#bcd9fa;box-shadow:0 3px 14px #5f9bd915}.wave-summary{display:flex;align-items:center;gap:10px;width:100%;height:50px;padding:0 10px;border:0;background:transparent;text-align:left}.wave-swatch{width:28px;height:28px;border-radius:var(--radius-md);border:1px solid #00000010;flex:none}.wave-name{flex:1 1;display:flex;flex-direction:column;gap:2px;color:#35465b;font-size:11px;font-weight:800}.wave-name small{font-size:9px;color:#a1acb9;font-weight:600}.chevron{color:#abb7c5;font-size:15px;transition:transform .2s}.wave-card.active .chevron{transform:rotate(180deg)}.wave-settings{border-top:1px solid #eef1f5;padding:13px 11px 12px;background:#fcfdff}.wave-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}.slider-row>span,.wave-row>label{font-size:10px;color:#718094;font-weight:700}.wave-color-control{display:flex;align-items:center;gap:7px}.wave-color-control input[type=color]{width:25px;height:25px;padding:0;border:0;background:none;cursor:pointer}.wave-color-control input[type=text]{width:79px;border:1px solid #e6eaf0;border-radius:var(--radius-md);background:var(--color-surface);padding:5px 6px;font-size:10px;font-weight:700;color:#40546e;text-transform:uppercase}.wave-mode{display:flex;gap:4px}.wave-mode button{border:1px solid #e4ebf4;background:var(--color-surface);border-radius:var(--radius-sm);color:#8b99a9;font-size:9px;font-weight:700;padding:5px 8px}.wave-mode button.active{background:var(--color-primary-soft);border-color:#cfe5ff;color:#508bce}.slider-row{display:grid;grid-template-columns:76px 1fr 28px;align-items:center;grid-gap:8px;gap:8px;margin:10px 0}.slider-row input{width:100%;height:4px;accent-color:#6ca9ed}.slider-row output{text-align:right;font-size:9px;font-weight:800;color:#6b89aa}.wave-actions{border-top:1px solid #edf1f5;padding-top:11px;margin-top:12px;display:flex;justify-content:space-between;gap:5px}.wave-action{border:0;background:transparent;color:#6795ce;font-size:9px;font-weight:800;padding:4px 2px;display:inline-flex;align-items:center;gap:4px}.wave-action svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.wave-action.danger{color:var(--color-danger)}.wave-action:disabled{opacity:.35;cursor:not-allowed}.wave-order{display:flex;gap:2px}.add-wave{width:100%;height:38px;border:1px dashed #bad5f2;border-radius:var(--radius-lg);background:#f8fbff;color:#5c98da;font-size:10px;font-weight:800;margin-top:10px}.add-wave:hover{background:#edf6ff}.plus-icon{font-size:19px;font-weight:400;vertical-align:-2px;margin-right:6px}.palette-section{padding-bottom:12px}.palette-list{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:7px;gap:7px}.palette-button{padding:5px;border:1px solid #e6eaf0;border-radius:var(--radius-lg);background:#fff;text-align:left}.palette-button.active{border-color:#8fc0f2;box-shadow:0 0 0 2px #e8f4ff}.palette-sample{display:flex;height:27px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:6px}.palette-sample span{flex:1 1}.palette-name{display:block;font-size:9px;font-weight:700;color:#708094;padding-left:2px}.sidebar-footer{display:flex;justify-content:space-between;padding-top:13px;color:#b7c1ca;font-size:9px}.sidebar-footer span{color:#8db9ec}.preview-area{display:flex;flex-direction:column;padding:43px 51px 34px;min-width:0;min-height:calc(100vh - var(--size-topbar));background:radial-gradient(circle at 55% 38%,var(--color-surface) 0,#f8fafc 48%,#f4f7fa 100%)}.preview-bottom,.preview-header{display:flex;align-items:center;justify-content:space-between;gap:18px}.preview-header h2{font-size:20px;letter-spacing:-.7px;margin:5px 0 0}.preview-header-actions{display:flex;align-items:center;gap:15px}.dimensions-label{font-family:var(--font-alt);color:var(--color-text-soft);font-size:11px;font-weight:700}.ghost-button,.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-lg);font-size:10px;font-weight:800;white-space:nowrap}.ghost-button{border:1px solid #e2e9f0;background:var(--color-surface);height:35px;padding:0 12px;color:#627d9b}.ghost-button:hover,.secondary-button:hover{border-color:#add0f5;color:#4785c9}.ghost-button svg,.primary-button svg,.secondary-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.preview-stage{position:relative;display:grid;place-items:center;flex:1 1;min-height:330px;margin:26px 0 17px;border:1px solid #e6ebf1;border-radius:var(--radius-2xl);background-color:#f9fbfd;background-image:linear-gradient(#eaf0f5 1px,transparent 0),linear-gradient(90deg,#eaf0f5 1px,transparent 0);background-size:28px 28px;box-shadow:inset 0 0 40px #e9eef344;overflow:hidden}.stage-inner{width:100%;height:100%;padding:48px;display:flex;align-items:center;justify-content:center;min-height:0}.artwork{width:100%;max-height:100%;box-shadow:0 16px 45px #274f7a1f,0 2px 8px #274f7a13;overflow:hidden}.artwork svg{display:block;width:100%;height:100%}.stage-corner{position:absolute;width:13px;height:13px;border-color:#b8cce1;border-style:solid;pointer-events:none}.top-left{top:14px;left:14px;border-width:1px 0 0 1px}.top-right{top:14px;right:14px;border-width:1px 1px 0 0}.bottom-left{bottom:14px;left:14px;border-width:0 0 1px 1px}.bottom-right{bottom:14px;right:14px;border-width:0 1px 1px 0}.preview-bottom{min-height:42px}.preview-hint{display:flex;align-items:center;gap:8px;color:#9ba8b7;font-size:10px}.sparkle{font-size:16px;color:#86b7eb}.export-actions{display:flex;gap:8px}.primary-button,.secondary-button{height:36px;padding:0 14px}.secondary-button{background:var(--color-surface);border:1px solid var(--color-border-strong);color:#6381a3}.primary-button{background:var(--color-primary);border:1px solid var(--color-primary);color:var(--color-surface);box-shadow:var(--shadow-soft)}.primary-button:hover{background:var(--color-primary-hover)}.toast{position:fixed;right:24px;bottom:22px;padding:11px 16px;background:#243b55;color:var(--color-surface);border-radius:var(--radius-lg);font-size:12px;font-weight:700;box-shadow:var(--shadow-toast);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:20}.toast.show{opacity:1;transform:translateY(0)}@media(max-width:1000px){.workspace{grid-template-columns:330px minmax(0,1fr)}.sidebar{padding:30px 22px}.preview-area{padding:34px 28px}.stage-inner{padding:28px}.preview-hint{max-width:190px;line-height:1.5}}@media(max-width:720px){.topbar{height:62px;padding:0 20px}.topbar-caption,.topbar-divider{display:none}.workspace{display:flex;flex-direction:column}.sidebar{max-height:none;order:2;border-right:0;border-top:1px solid var(--color-border);padding:25px 22px}.sidebar-intro h1{font-size:25px}.preview-area{order:1;min-height:480px;padding:26px 20px 24px}.preview-stage{min-height:270px;margin:20px 0 15px}.stage-inner{padding:25px}.preview-header h2{font-size:17px}.dimensions-label,.preview-hint{display:none}.preview-bottom{justify-content:flex-end}.ghost-button span{display:none}.ghost-button{width:36px;padding:0}.palette-list{max-width:380px}}@media(max-width:420px){.preview-area{min-height:430px}.preview-stage{min-height:240px}.stage-inner{padding:20px}.primary-button,.secondary-button{padding:0 10px;font-size:9px}.preview-header h2{font-size:16px}}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:0 10px;border:1px solid #e4eaf1;border-radius:var(--radius-lg);background:var(--color-surface);color:#60768f;font-size:10px;font-weight:800;white-space:nowrap}.theme-toggle:hover{border-color:#afcff0;color:#4785c9}.theme-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.theme-toggle .sun-icon{display:none}:root[data-theme=dark]{color-scheme:dark;color:#e4ebf5;background:#0d1520}:root[data-theme=dark] .sidebar,:root[data-theme=dark] .topbar{background:#121e2c;border-color:#273648}:root[data-theme=dark] .brand{color:#f2f6fc}:root[data-theme=dark] .brand-mark{background:#263e5a}:root[data-theme=dark] .sidebar-footer,:root[data-theme=dark] .topbar-right{color:#8396aa}:root[data-theme=dark] .panel-section,:root[data-theme=dark] .topbar-divider{border-color:#29394b}:root[data-theme=dark] .topbar-divider{background:#29394b}:root[data-theme=dark] .intro-copy,:root[data-theme=dark] .preview-hint,:root[data-theme=dark] .section-heading p,:root[data-theme=dark] .topbar-badge{color:#99aabd}:root[data-theme=dark] .status-dot{box-shadow:0 0 0 3px #294b40}:root[data-theme=dark] .count-pill,:root[data-theme=dark] .section-icon{background:#213a56;color:#9ecbfa}:root[data-theme=dark] .section-heading h2,:root[data-theme=dark] .wave-name{color:#e1eaf5}:root[data-theme=dark] .field-label,:root[data-theme=dark] .field>span,:root[data-theme=dark] .slider-row>span,:root[data-theme=dark] .wave-row>label{color:#abbcd0}:root[data-theme=dark] .color-control-label,:root[data-theme=dark] .dimension-times,:root[data-theme=dark] .dimensions-label,:root[data-theme=dark] .field small,:root[data-theme=dark] .wave-name small{color:#8194a9}:root[data-theme=dark] .color-control,:root[data-theme=dark] .field input,:root[data-theme=dark] .wave-color-control input[type=text]{background:#1a2a3c;border-color:#34475c;color:#e5edf7}:root[data-theme=dark] .field input:focus,:root[data-theme=dark] .hex-input:focus{background:#203249;border-color:#78b6f4}:root[data-theme=dark] .hex-input{color:#e5edf7}:root[data-theme=dark] .presets button{background:#1b2a3b;color:#a6b8ca}:root[data-theme=dark] .presets button.active,:root[data-theme=dark] .presets button:hover{background:#254667;border-color:#3a648c;color:#b8ddff}:root[data-theme=dark] .palette-button,:root[data-theme=dark] .wave-card{background:#192838;border-color:#34475b}:root[data-theme=dark] .palette-button.active,:root[data-theme=dark] .wave-card.active{border-color:#69a4e0;box-shadow:0 0 0 2px #2a4b6b55}:root[data-theme=dark] .wave-settings{background:#152334;border-color:#34475b}:root[data-theme=dark] .wave-actions{border-color:#34475b}:root[data-theme=dark] .wave-mode button{background:#1c2c3f;border-color:#3a4f65;color:#aabbd0}:root[data-theme=dark] .wave-mode button.active{background:#25496f;border-color:#5186bc;color:#d2eaff}:root[data-theme=dark] .slider-row output,:root[data-theme=dark] .wave-action{color:#9ac7f4}:root[data-theme=dark] .wave-action.danger{color:#e1a0aa}:root[data-theme=dark] .add-wave{background:#172a3e;border-color:#4d789e;color:#a7d4ff}:root[data-theme=dark] .add-wave:hover{background:#203c59}:root[data-theme=dark] .palette-name{color:#a7b9cd}:root[data-theme=dark] .preview-area{background:radial-gradient(circle at 55% 38%,#182638 0,#111d2b 55%,#0e1825 100%)}:root[data-theme=dark] .preview-stage{border-color:#304257;background-color:#172536;background-image:linear-gradient(#27394d 1px,transparent 0),linear-gradient(90deg,#27394d 1px,transparent 0);box-shadow:inset 0 0 40px #0a121e55}:root[data-theme=dark] .stage-corner{border-color:#536d88}:root[data-theme=dark] .artwork{box-shadow:0 16px 45px #050b14aa,0 2px 8px #050b1466}:root[data-theme=dark] .ghost-button,:root[data-theme=dark] .secondary-button,:root[data-theme=dark] .theme-toggle{background:#1b2d41;border-color:#38516c;color:#bed9f4}:root[data-theme=dark] .ghost-button:hover,:root[data-theme=dark] .secondary-button:hover,:root[data-theme=dark] .theme-toggle:hover{background:#24415e;border-color:#72aee7;color:var(--color-surface)}:root[data-theme=dark] .theme-toggle .moon-icon{display:none}:root[data-theme=dark] .theme-toggle .sun-icon{display:block}@media(max-width:720px){.theme-toggle{width:34px;padding:0}.theme-label{display:none}.topbar-right{gap:10px}}.slider-row{grid-template-columns:76px minmax(0,1fr) 43px}.slider-row output{white-space:nowrap}.phone-studio{display:grid;grid-template-columns:minmax(0,1fr) 390px;height:calc(100vh - var(--size-studio-switcher));min-height:520px;color:var(--phone-text)}.phone-studio,.phone-viewport{background:var(--color-surface)}.phone-viewport{position:relative;min-width:0;overflow:hidden}.phone-canvas{position:absolute;inset:0}.phone-canvas canvas{display:block;width:100%;height:100%}.phone-error,.phone-loader{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:#778190;font-size:13px;font-weight:700;text-align:center}.phone-error{max-width:300px;color:#be4b5b;background:var(--color-surface);border:1px solid #f0c8ce;border-radius:var(--radius-lg);padding:12px 14px}.phone-spinner{width:28px;height:28px;border:3px solid var(--color-border-strong);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.phone-controls{display:flex;flex-direction:column;gap:16px;overflow:auto;background:var(--phone-panel);border-left:1px solid var(--phone-border);padding:22px 20px 24px}.phone-controls-header h1{margin:8px 0;color:var(--color-surface);font-size:22px;line-height:1.15;letter-spacing:0;font-weight:800}.phone-controls-header p:last-child{margin:0;color:var(--phone-muted);font-size:11px;line-height:1.55}.phone-group{gap:9px;padding-top:15px;border-top:1px solid var(--phone-border)}.phone-group,.phone-group label{display:flex;flex-direction:column}.phone-group label{gap:7px}.phone-group label>span,.phone-group-title{color:var(--phone-muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.phone-group select{height:38px;width:100%;border:1px solid var(--phone-border);border-radius:var(--radius-lg);background:var(--phone-panel-raised);color:var(--phone-text);padding:0 11px;font:inherit;font-size:12px;font-weight:700}.phone-segment{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px}.phone-preset-grid button,.phone-segment button{height:38px;border:1px solid var(--phone-border);border-radius:var(--radius-lg);background:var(--phone-panel-raised);color:var(--phone-text);font-size:12px;font-weight:800;text-align:center}.phone-file-button:hover,.phone-preset-grid button:hover,.phone-segment button:hover{border-color:#565676;background:var(--phone-panel-hover)}.phone-preset-grid button.active,.phone-segment button.active{background:var(--phone-accent);border-color:var(--phone-accent);color:var(--color-surface)}.phone-file-button{position:relative;display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;gap:8px;height:39px;border:1px solid var(--phone-border);border-radius:var(--radius-lg);background:var(--phone-panel-raised);color:var(--phone-text);font-size:12px;font-weight:800;cursor:pointer}.phone-file-button svg{width:15px;height:15px}.phone-file-button input{position:absolute;inset:0;opacity:0;cursor:pointer}.phone-slider{display:flex!important;gap:7px!important}.phone-slider span{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;letter-spacing:0!important;text-transform:none!important;color:#b9bac8!important}.phone-slider b{color:var(--color-surface);font-weight:800}.phone-slider input{width:100%;accent-color:var(--phone-accent)}.phone-preset-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:8px;gap:8px}.phone-actions{display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:8px;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid var(--phone-border)}.phone-actions .primary-button,.phone-actions .secondary-button{width:100%;height:38px;font-size:10px;padding:0 8px}.phone-actions svg{width:14px;height:14px}@media(max-width:900px){.studio-switcher{height:auto;min-height:var(--size-studio-switcher);align-items:stretch}.studio-tab{min-width:0;flex:1 1}.phone-studio{grid-template-columns:1fr;height:auto;min-height:calc(100vh - var(--size-studio-switcher))}.phone-viewport{height:58vh;min-height:360px}.phone-controls{border-left:0;border-top:1px solid var(--phone-border)}.phone-preset-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.studio-switcher{padding:8px}.studio-tab{padding:0 10px}.studio-tab small{display:none}.phone-controls{padding:18px 16px 22px}.phone-actions{grid-template-columns:1fr}.phone-viewport{height:50vh;min-height:300px}}:root{--font-sans:Manrope,Arial,sans-serif;--font-alt:"DM Sans",sans-serif;--color-page:#f7f8fa;--color-surface:#fff;--color-surface-subtle:#fbfcfe;--color-surface-muted:#f6f8fb;--color-text:#1c2c42;--color-text-strong:#182a40;--color-text-muted:#8a97a6;--color-text-soft:#a3adba;--color-border:#e9edf2;--color-border-strong:#dfe7f0;--color-primary:#3e89da;--color-primary-hover:#2e78cc;--color-primary-soft:#eaf4ff;--color-primary-border:#8fbefa;--color-success:#38bdf8;--color-danger:#be8890;--radius-xs:4px;--radius-sm:5px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-2xl:13px;--radius-round:999px;--shadow-focus:0 0 0 3px #8fbefa;--shadow-soft:0 5px 12px #3e89da29;--shadow-toast:0 8px 30px #213a5540;--size-topbar:75px;--size-studio-switcher:68px;--space-page-x:42px;--aso-bg:#111923;--aso-bg-subtle:#111b27;--aso-panel:#19232f;--aso-panel-raised:#22303f;--aso-panel-hover:#2e4256;--aso-border:#334252;--aso-border-strong:#52677d;--aso-dialog-bg:#182330;--aso-text:#eff4f9;--aso-text-soft:#e4edf6;--aso-muted:#a5b4c5;--aso-muted-strong:#92a6bb;--aso-accent:#38bdf8;--aso-accent-hover:#7dd3fc;--aso-focus:#38bdf8;--aso-accent-soft:#12344a;--aso-accent-border:#2d6f93;--aso-accent-muted:#9bdcfb;--aso-selection-fill:#18232f;--aso-guide-spacing:#fbbf24;--aso-guide-align:#f472b6;--aso-guide-safe:#cbd5e1;--aso-success-bg:#12344a;--aso-success-border:#2d6f93;--aso-success-text:#b7eaff;--aso-warning-bg:#3c3121;--aso-warning-border:#7e6334;--aso-warning-text:#fde3ac;--aso-error-bg:#382831;--aso-error-border:#6b3d4b;--aso-error-text:#ffb5b5;--aso-dialog-backdrop:#070e18c7;--aso-modal-backdrop:#070e18bb;--aso-shadow-dialog:0 28px 100px #000b;--aso-shadow-modal:0 24px 90px #0009;--aso-shadow-popover:0 10px 22px #0006;--phone-bg:#fff;--phone-panel:#1e1e26;--phone-panel-raised:#262631;--phone-panel-hover:#303040;--phone-border:#34343f;--phone-text:#e8e8ee;--phone-muted:#9a9aa8;--phone-accent:#38bdf8}:root[data-theme=dark]{--color-page:#0d1520;--color-surface:#121e2c;--color-surface-subtle:#1a2a3c;--color-surface-muted:#1b2a3b;--color-text:#e4ebf5;--color-text-strong:#f2f6fc;--color-text-muted:#99aabd;--color-text-soft:#8194a9;--color-border:#273648;--color-border-strong:#38516c;--color-primary-soft:#213a56;--color-primary-border:#78b6f4}.add-wave svg{width:15px;height:15px;vertical-align:-3px;margin-right:6px}.primary-button:disabled{opacity:.7;cursor:progress}