/* Composite family: Vazirmatn remains primary; this local OFL face supplies Cyrillic only. */
@font-face{font-family:"Vazirmatn";src:url('/assets/NotoSans-Cyrillic.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0400-052F,U+2DE0-2DFF,U+A640-A69F}
/* VAZIN-UI 1.0.0 web-shell extension: creative workspace */
:root{color-scheme:light;--v-ui-bg:#f8f9fc;--v-ui-surface:#fff;--v-ui-text:#202638;--v-ui-muted:#626b7c;--v-ui-border:#e0e4ec;--v-ui-primary:#6043cc;--v-ui-accent:#d8ef88;--v-ui-success:#17694d;--v-ui-shadow:0 12px 36px #2026380d;--design-ink:#242c45;--design-lilac:#ece7ff;--design-peach:#ffe5d4}
body{font-size:14px}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,select{cursor:pointer}button,input,select,textarea{font-family:var(--v-ui-font)}button{border:1px solid var(--v-ui-border);background:var(--v-ui-surface);color:var(--v-ui-text);padding:10px 16px;border-radius:var(--v-ui-radius-md);min-height:44px;font-weight:600;transition:background .18s,transform .18s}button:hover{background:#f0edf8}button:disabled{cursor:not-allowed;opacity:.65}a{color:inherit;text-decoration:none}p{color:var(--v-ui-muted)}h1,h2,h3,p{margin-block:0 16px}h1{font-size:clamp(28px,3vw,44px);line-height:1.5;font-weight:800}h2{font-size:24px;line-height:1.5}h3{font-size:17px}small{color:var(--v-ui-muted)}bdi{unicode-bidi:isolate}input,select,textarea{background:#fff;border:1px solid var(--v-ui-border);border-radius:var(--v-ui-radius-sm);padding:10px 12px;color:var(--v-ui-text);min-height:44px;max-width:100%}textarea{resize:vertical}label{display:grid;gap:8px}input:focus,textarea:focus,select:focus{border-color:var(--v-ui-primary)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip{position:fixed;inset-block-start:-80px;inset-inline-start:16px;padding:12px 24px;background:white;z-index:100}.skip:focus{inset-block-start:8px}.primary{color:white;background:var(--v-ui-primary);border-color:var(--v-ui-primary)}.primary:hover{background:#4c31af}.topbar{height:80px;padding-inline:32px;display:flex;justify-content:space-between;align-items:center;background:var(--v-ui-surface);border-bottom:1px solid var(--v-ui-border);gap:16px}.logo{display:flex;align-items:center;gap:12px;font-size:21px;white-space:nowrap}.logo strong{font-weight:400}.mark{width:36px;height:36px;background:var(--v-ui-primary);color:white;font-weight:900;display:grid;place-items:center;border-radius:12px;transform:rotate(-7deg);font-size:25px}.top-actions{display:flex;align-items:center;gap:16px}.prototype{font-size:12px;background:#f0edf8;color:#5a438b;padding:4px 12px;border-radius:8px}.avatar{display:grid;place-items:center;background:var(--design-peach);border:3px solid white;outline:1px solid var(--v-ui-border);border-radius:50%;width:36px;height:36px;font-weight:800}.language select{border:0;background:transparent;padding:4px;font-size:13px}.shell{max-width:1800px;margin:auto;display:grid;grid-template-columns:236px minmax(0,1fr);min-height:calc(100vh - 130px)}.sidebar{background:white;border-inline-end:1px solid var(--v-ui-border);padding:24px 16px;display:flex;flex-direction:column;gap:24px}.workspace{display:flex;gap:12px;align-items:center;padding:0 8px}.workspace small{display:block;font-size:11px}.workspace-icon{display:grid;place-items:center;width:36px;height:36px;background:#f1f0f7;border-radius:12px;font-size:23px}.create{width:100%}nav{display:grid;gap:8px}nav a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;color:#555e70;min-height:48px}nav a svg{width:20px;height:20px;flex-shrink:0}nav a.active{background:var(--design-lilac);color:#4f35b0;font-weight:700}nav a:hover{background:#f4f1fc}.sidebar-note{margin-top:auto;padding:16px;background:linear-gradient(135deg,#f1eefa,#f6f8f2);border-radius:18px}.sidebar-note>span{font-size:28px;color:var(--v-ui-primary);display:block}.sidebar-note strong{font-size:13px}.sidebar-note p{font-size:12px;line-height:1.9;margin:8px 0 0}main{min-width:0;padding:32px 40px 48px;outline:none}.hero{position:relative;border-radius:24px;overflow:hidden;background:#ebe9f6;display:grid;grid-template-columns:1.05fr 1fr;min-height:340px}.hero-copy{padding:36px;position:relative;z-index:1}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.8px;color:#625485;margin-bottom:12px}[dir=rtl] .eyebrow{letter-spacing:normal}.hero h1{white-space:pre-line;font-size:clamp(26px,2.6vw,39px);margin-bottom:12px}.hero p{max-width:400px;font-size:14px;color:#51566b}.hero-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.hero-buttons button{font-size:13px}.hero-visual{position:relative;min-height:310px;direction:ltr;overflow:hidden;background:radial-gradient(ellipse at 40% 90%,#d4d0f2 0,transparent 70%)}.poster-stack{position:absolute;width:215px;height:260px;top:42px;left:32%;transform:rotate(9deg);background:#fa684f;box-shadow:0 24px 32px #27273a26;border:7px solid #fff}.poster-stack.back{left:8%;top:65px;transform:rotate(-14deg);background:#d9edb2;width:190px;height:235px}.poster-stack .orb{width:134px;height:134px;border:25px solid #f9c555;border-radius:50%;position:absolute;left:34px;top:24px;box-shadow:inset 0 0 0 14px #292c45}.poster-stack .art-line{height:8px;border-radius:4px;background:#292c45;position:absolute;left:25px;right:25px;bottom:38px}.poster-stack .art-line.short{right:80px;bottom:21px;height:5px}.back .arch-shape{height:158px;width:120px;border-radius:80px 80px 0 0;background:#486b58;position:absolute;left:30px;top:32px}.back .arch-shape:after{content:'';position:absolute;background:#e9b193;inset:32px 25px 0;border-radius:80px 80px 0 0}.float-chip{position:absolute;background:white;border:1px solid #ebe8f3;border-radius:12px;box-shadow:var(--v-ui-shadow);padding:8px 14px;bottom:20px;left:18%;font-size:11px;color:#594777;transform:rotate(-4deg)}.spark{position:absolute;right:8%;top:24px;color:#6f54bd;font-size:52px}.searchbox{display:flex;gap:12px;align-items:center;margin:24px 0;background:white;border:1px solid var(--v-ui-border);padding:6px 16px;border-radius:12px}.searchbox svg{width:22px;flex-shrink:0;color:var(--v-ui-muted)}.searchbox input{border:none;outline:none;width:100%;background:transparent;padding-inline:0}.searchbox:focus-within{outline:3px solid var(--v-ui-primary);outline-offset:3px}.quick-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-block:24px 32px}.quick-types button{display:flex;align-items:center;gap:12px;text-align:start;padding:16px 12px;font-size:13px}.type-icon{height:40px;width:40px;display:grid;place-items:center;border-radius:12px;background:var(--design-lilac);flex-shrink:0}.type-icon svg{width:21px}.quick-types button:nth-child(2) .type-icon{background:#ffe9dc}.quick-types button:nth-child(3) .type-icon{background:#e5eebd}.quick-types button:nth-child(4) .type-icon{background:#dfeafb}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-block:32px 20px}.section-head h2{margin:0}.section-head .eyebrow{margin:0 0 4px}.section-head a{font-size:13px;color:#593bb5}.filters{display:flex;flex-wrap:wrap;gap:8px;margin-block:16px 24px}.filters button{border-radius:24px;font-size:12px;min-height:40px;padding:8px 16px}.filters button[aria-pressed=true]{background:var(--design-ink);color:white;border-color:var(--design-ink)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.asset{min-width:0}.asset>button{padding:0;width:100%;display:block;overflow:hidden;border:0;border-radius:18px;background:#ececef;position:relative}.asset>button:hover{transform:translateY(-3px);box-shadow:var(--v-ui-shadow)}.artwork{height:210px;width:100%;display:block;object-fit:cover}.asset h3{margin:12px 0 4px;font-size:15px}.meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--v-ui-muted)}.badge{font-size:10px;font-weight:600;background:#f0f2f6;color:#505a6e;border-radius:8px;padding:3px 8px}.asset button .badge{position:absolute;inset-block-start:12px;inset-inline-end:12px;background:#fffffff0}.roadmap-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}.roadmap-card{padding:24px;border:1px solid var(--v-ui-border);border-radius:18px;background:white}.roadmap-card p{font-size:13px;margin-bottom:0}.roadmap-card h3{margin-block:8px}.roadmap-card .badge{background:var(--design-lilac);color:#594777}.empty{padding:64px 24px;text-align:center;background:white;border:1px dashed #c7cadd;border-radius:18px}.empty .empty-icon{font-size:48px;color:#7862ae}.empty p{max-width:470px;margin:0 auto 24px}.page-intro{max-width:760px}.page-intro h1{font-size:32px}.page-intro p{line-height:1.9}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}.tool-card{padding:24px;border:1px solid var(--v-ui-border);border-radius:18px;background:white}.tool-symbol{font-size:30px;font-weight:800;margin-bottom:24px;color:#6043cc}.tool-card h2{font-size:20px}.brand-board{background:white;border:1px solid var(--v-ui-border);border-radius:18px;padding:32px;margin-block:24px}.brand-board h2{font-size:40px}.swatches{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px}.swatch{width:90px;height:90px;border-radius:18px}.editor-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}.editor-header h1{font-size:24px;margin:0}.editor-actions{display:flex;gap:8px;flex-wrap:wrap}.editor-actions button{font-size:12px}.editor-grid{display:grid;grid-template-columns:245px minmax(0,1fr);border:1px solid var(--v-ui-border);border-radius:18px;overflow:hidden;background:white}.properties{padding:24px;border-inline-end:1px solid var(--v-ui-border);display:grid;gap:16px;align-content:start}.properties label{font-size:12px;font-weight:600}.properties input,.properties textarea{width:100%;font-weight:400}.properties input[type=color]{padding:4px;height:44px}.properties input[type=range]{padding:0}.canvas-area{display:grid;place-items:center;padding:40px 24px;min-height:520px;background-color:#eceef4;background-image:radial-gradient(#c7ccd8 .8px,transparent .8px);background-size:16px 16px;min-width:0}.canvas-area canvas{width:min(100%,420px);height:auto;box-shadow:0 16px 32px #28334b24;display:block}.editor-note{font-size:12px;margin-top:16px}.dimensions{text-align:center;font-size:11px;color:#596173;margin-top:12px;direction:ltr;unicode-bidi:isolate}.empty-result{grid-column:1/-1;padding:48px;text-align:center;background:#fff;border-radius:18px}dialog{border:1px solid var(--v-ui-border);border-radius:24px;padding:0;max-width:850px;width:calc(100% - 32px);max-height:calc(100vh - 48px);box-shadow:0 40px 100px #20263840;color:var(--v-ui-text);background:white}dialog::backdrop{background:#22283888;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--v-ui-border)}.dialog-head h2{font-size:20px;margin:0}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px}.detail-grid .artwork{height:auto;border-radius:12px}.detail-copy{align-self:center}.detail-copy p{font-size:13px}.detail-copy button{margin-top:8px;width:100%}.compatibility{padding:12px;border-radius:12px;background:#f3f1f8;font-size:12px}.detail-copy h3{margin-top:16px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:12px 24px;border-radius:12px;background:#252c40;color:white;box-shadow:var(--v-ui-shadow);z-index:100;display:none}#toast.show{display:block}footer{border-top:1px solid var(--v-ui-border);padding:16px 24px;font-size:11px;text-align:center;color:var(--v-ui-muted);background:white}
@media(min-width:1600px){main{padding-inline:56px}.artwork{height:250px}}
@media(max-width:1150px){.shell{grid-template-columns:205px minmax(0,1fr)}main{padding:24px}.hero-copy{padding:24px}.hero-visual{min-height:330px}.poster-stack{left:24%;width:180px}.poster-stack.back{left:2%;width:150px}.quick-types{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-grid{grid-template-columns:210px minmax(0,1fr)}.artwork{height:180px}}
@media(max-width:800px){.topbar{padding-inline:16px;height:72px}.logo{font-size:18px;gap:8px}.top-actions{gap:8px}.prototype,.avatar{display:none}.shell{display:block}.sidebar{padding:12px 16px;border:0;border-bottom:1px solid var(--v-ui-border);gap:12px}.workspace,.sidebar-note,.sidebar>.create{display:none}nav{display:flex;flex-wrap:wrap;gap:4px}nav a{padding:8px;font-size:11px;gap:4px;min-height:40px}nav a svg{width:16px;height:16px}main{padding:24px 16px 32px}.hero{grid-template-columns:1fr}.hero-copy{padding:24px}.hero h1{font-size:30px}.hero-visual{min-height:235px}.poster-stack{top:4px;left:44%;height:210px;width:165px}.poster-stack.back{top:16px;left:16%;height:200px;width:155px}.poster-stack .orb{width:112px;height:112px;left:20px;top:16px}.spark{right:12%;top:0}.float-chip{bottom:8px;left:22%}.hero-buttons{margin-top:16px}.quick-types{gap:8px}.quick-types button{padding:12px 8px;font-size:11px;gap:8px}.type-icon{width:32px;height:32px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.artwork{height:175px}.asset h3{font-size:13px}.meta{flex-wrap:wrap;font-size:10px}.section-head h2{font-size:21px}.roadmap-row,.tool-grid{grid-template-columns:1fr;gap:16px}.editor-grid{grid-template-columns:1fr}.properties{border:0;border-bottom:1px solid var(--v-ui-border);grid-template-columns:1fr 1fr;padding:16px;gap:12px}.properties .wide{grid-column:1/-1}.canvas-area{min-height:360px;padding:24px}.editor-actions{width:100%}.editor-actions button{flex:1;padding:8px}.detail-grid{grid-template-columns:1fr}.detail-grid .artwork{max-height:300px}.dialog-head{padding:16px}.dialog-head h2{font-size:16px}.brand-board{padding:24px}.page-intro h1{font-size:28px}.swatch{width:64px;height:64px}.empty{padding:40px 16px}}
@media(max-width:800px){.editor-grid>div{grid-row:1}.properties{grid-row:2;border-bottom:0;border-top:1px solid var(--v-ui-border)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


.export-preview{display:block;width:100%;height:auto;border-radius:12px}.download-link{display:block;text-align:center;padding:12px 16px;border-radius:12px}main:focus{outline:none}