@font-face{font-family:Hawaf Arabic;src:url('./vendor/noto-sans-arabic.woff') format('woff');font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:light;--paper:#f7f6f1;--white:#fff;--ink:#242036;--muted:#676279;--line:#e8e4ed;--purple:#30274a;--accent:#e2fa77;--tint:#f0edf8;--radius:22px;font-family:"Hawaf Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:18px}
body{margin:0;line-height:1.62}
button,input,select{font:inherit;color:inherit}
button,a,input,select,label{-webkit-tap-highlight-color:transparent}
button,select{cursor:pointer}
a{color:inherit;text-decoration:none}
button{border:0;background:none}
button:disabled{cursor:not-allowed;opacity:.43}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #8265c4;outline-offset:3px}
[hidden]{display:none!important}
h1,h2,h3,p,figure{margin:0}
.shell{max-width:1190px;margin-inline:auto;padding-inline:30px}
.sr-only,.svg-defs{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon{display:inline-block;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.topbar{border-bottom:1px solid #e9e6e0;background:#fbfaf7}
.topbar-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:850;font-size:23px;line-height:1.12}
.brand img{display:block}
.brand-text{display:flex;flex-direction:column;gap:6px}
.brand small{font-family:Arial,sans-serif;color:var(--muted);font-weight:750;font-size:8px;letter-spacing:.115em}
nav{display:flex;gap:27px;color:var(--muted);font-size:13px;font-weight:650}
nav a:hover,.footer a:hover{color:#655096}
.top-note{display:flex;align-items:center;gap:8px;border:1px solid #e8e4ed;border-radius:100px;padding:5px 11px;color:#4e4566;font-size:11px;font-weight:700;background:var(--white)}
.live-dot,.status-dot{width:7px;height:7px;border-radius:50%;background:#84a72b;flex:none}
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5.9vw,80px);align-items:center;padding-block:41px 30px}
.eyebrow{display:inline-flex;align-items:center;gap:6px;background:#ede9f6;padding:4px 11px;border-radius:100px;font-size:11px;font-weight:750;color:#5e4b8c}
.eyebrow .icon{width:15px;height:15px}
.intro h1{font-size:clamp(39px,5.4vw,69px);font-weight:870;line-height:1.16;letter-spacing:-.035em;margin-block:13px 14px}
.intro h1 span{color:#59457e}
.intro-copy>p{max-width:510px;color:var(--muted);font-size:clamp(14px,1.45vw,16px);line-height:1.85}
.upload-card{background:radial-gradient(ellipse at 0 110%,#493765 0%,transparent 65%),#282138;color:#f8f6fe;padding:13px;border-radius:26px;box-shadow:0 11px 23px #271d3b18;transition:box-shadow .18s,transform .18s}
.upload-card.dragging{box-shadow:0 0 0 4px #a9c84e;transform:translateY(-2px)}
.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:202px;gap:11px;padding:14px 18px;border:1px dashed #81729b;border-radius:16px;text-align:center;background-image:radial-gradient(#cfc4e324 1px,transparent 1px);background-size:15px 15px}
.upload-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#4d3c68;color:#f7f0ff}
.upload-icon .icon{width:22px;height:22px}
.upload-copy h2{font-size:21px;font-weight:800;line-height:1.25}
.upload-copy p{margin-top:5px;color:#d7cde7;font-size:12px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:11px;min-height:42px;padding:7px 18px;font-size:13px;font-weight:830;transition:background .15s,transform .15s}
.button-primary{color:#26213b;background:var(--accent);box-shadow:inset 0 0 0 1px #30400013}
.button-primary:hover:not(:disabled){background:#d4f15d}
.button-primary:active:not(:disabled){transform:translateY(1px)}
.upload-formats{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;color:#d0c3e1;font-size:10.5px;font-weight:650}
.upload-formats bdi{font-family:Arial,sans-serif;letter-spacing:.06em}
.upload-formats span::before{content:"·";margin-inline-end:8px;color:#cdbce5}
.upload-error{color:#ffdbd0;font-size:12px;font-weight:700;text-align:center}
.studio{border:1px solid var(--line);background:var(--white);border-radius:var(--radius);box-shadow:0 9px 29px #2f26470a;overflow:hidden}
.studio-header{display:flex;justify-content:space-between;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding:15px 18px}
.studio-heading{display:flex;align-items:center;gap:10px}
.section-icon{display:grid;place-items:center;border-radius:10px;width:37px;height:37px;background:var(--tint);color:#68528f}
.studio-header h2{font-size:17px;font-weight:830;line-height:1.4}
.studio-header p{font-size:10.5px;color:var(--muted)}
.segmented{display:flex;gap:3px;padding:3px;border-radius:11px;background:#f3f1f7}
.segmented button{display:flex;gap:6px;align-items:center;white-space:nowrap;font-size:11px;font-weight:740;padding:6px 9px;color:#60596f;border-radius:8px}
.segmented button[aria-pressed=true]{background:white;color:#45325f;box-shadow:0 1px 4px #2c254521}
.segmented .icon{width:16px;height:16px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 247px}
.workbench{min-width:0;padding:13px 17px 10px}
.status-row{min-height:34px;display:flex;align-items:center;gap:10px;margin-bottom:9px}
.file-chip{display:flex;align-items:center;gap:6px;min-width:0;color:#575064;font-size:11px;font-weight:720}
.file-chip .icon{width:16px;height:16px;color:#766293}
.file-chip bdi{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#replace-image{flex:none;white-space:nowrap;margin-inline-end:auto}
.status{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:650;color:#615575;line-height:1.55}
.status[data-kind="busy"] .status-dot{background:#997ad0;animation:breathe 1s infinite alternate}
.status[data-kind="error"]{color:#a13b29}
.status[data-kind="error"] .status-dot{background:#d8725d}
@keyframes breathe{to{opacity:.3}}
.boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.boards.is-single{grid-template-columns:minmax(0,1fr)}
.board{position:relative;min-width:0;border-radius:14px;overflow:hidden;border:1px solid #ded9e9}
.board-light{background:#f0edf6;color:#473959}
.board-dark{background:#2c253d;color:#f8f3ff;border-color:#342b46}
.board-transparent{background-color:#ece9f1;color:#493b60;border-color:#ded9e9;background-image:conic-gradient(#dcd6e6 25%,transparent 0 50%,#dcd6e6 0 75%,transparent 0);background-size:22px 22px}
.board-export{background-color:#efedf2;color:#493b60;border-color:#ded9e9}
.board figcaption{position:absolute;z-index:2;inset-block-start:8px;inset-inline-start:8px;pointer-events:none;font-size:9px;font-weight:800;padding:4px 7px;line-height:1.25;border-radius:6px;background:#ffffffdf;display:flex;align-items:center;gap:4px;box-shadow:0 1px 3px #27203913}
.board figcaption span{height:6px;width:6px;border-radius:50%;background:#b6a2ce}
.board-dark:not(.board-transparent,.board-export) figcaption{background:#54476a;color:#fff}
.board-dark:not(.board-transparent,.board-export) figcaption span{background:#decbfb}
.stage{height:clamp(183px,25vw,305px);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.stage canvas{display:block;transform-origin:center center;cursor:inherit}
.stage canvas[aria-busy=true]{opacity:.62}
.stage .initial-sample{position:absolute;inset:0;margin:auto;height:100%;width:100%;object-fit:contain;pointer-events:none}
.studio.is-ready .initial-sample,.studio.is-working .initial-sample{display:none}
.comparison-control{direction:ltr;display:flex;align-items:center;gap:10px;margin-block:6px;font-size:11px;font-weight:700;color:var(--muted)}
.comparison-control input{flex:1;min-width:0;margin:0;min-height:34px;accent-color:#72559b;cursor:ew-resize}
.controls{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-block:11px 5px}
.tool-group,.utility-group{display:flex;gap:4px;align-items:center}
.tool-group button,.icon-button,.zoom-label select{display:flex;align-items:center;justify-content:center;gap:5px;min-height:35px;padding:4px 8px;border:1px solid transparent;border-radius:8px;font-size:10.5px;font-weight:730;white-space:nowrap}
.tool-group button .icon,.icon-button .icon{width:16px;height:16px}
.tool-group button:not(:disabled):hover,.icon-button:not(:disabled):hover{background:#f6f3fa}
.tool-group button[aria-pressed=true]{background:#efeaf7;color:#543d7c;border-color:#e8e0f2}
.icon-button,.zoom-label select{border-color:var(--line);background:#fff}
.zoom-label select{direction:ltr;padding:3px 5px;min-width:50px}
.tool-tip{display:flex;min-height:27px;gap:8px;justify-content:space-between;align-items:center;font-size:10px;line-height:1.6;color:var(--muted)}
.tool-tip label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.tool-tip input{width:70px;accent-color:#72559b}
.inspector{display:flex;flex-direction:column;align-items:stretch;gap:11px;min-width:0;padding:18px 16px 12px;border-inline-start:1px solid var(--line);background:#fdfcfe}
.eyebrow-small{font-size:10px;color:#6d528f;font-weight:850}
.inspector h3{font-size:22px;font-weight:840;line-height:1.28;margin-block:3px}
.inspector p{font-size:11px;color:var(--muted);line-height:1.65}
.field{display:grid;gap:6px}
.field-label{font-size:11px;font-weight:800}
.ratios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.ratios button{display:flex;gap:4px;align-items:center;justify-content:center;min-height:30px;padding:3px 4px;border:1px solid var(--line);border-radius:7px;font-size:9.5px;white-space:nowrap;background:#fff}
.ratios button:hover,.ratios button[aria-pressed=true]{color:#503773;border-color:#b9a7d0;background:#f0eaf9;font-weight:800}
.ratios button span{display:block;border:1px solid currentColor;border-radius:2px;width:11px;height:11px;flex:none}
.ratios .ratio-original{border-style:dashed;width:12px}
.ratios .ratio-portrait{width:9px;height:12px}
.ratios .ratio-story{width:7px;height:13px}
.ratios .ratio-wide{width:13px;height:8px}
.field select{width:100%;min-width:0;font-size:12px;background:white;border:1px solid var(--line);border-radius:8px;min-height:36px;padding-inline:6px}
.background-options{display:flex;align-items:center;gap:6px}
.background-options input{flex:0 0 39px;width:39px;height:36px;padding:3px;border:1px solid var(--line);border-radius:8px;background:white;cursor:pointer}
.dimensions,.device-note{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--muted);font-size:10px}
.dimensions .icon,.device-note .icon{width:14px;height:14px}
.resolution-note{text-align:center}
.download{padding-inline:8px}
.text-button{font-size:11px;font-weight:750;color:#634987;text-decoration:underline;min-height:28px}
.text-button .icon{width:15px;height:15px}
.samples{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:10px 17px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.samples>span{margin-inline-end:3px}
.sample-button{display:flex;align-items:center;gap:6px;padding:2px 3px 2px 7px;border-radius:7px;border:1px solid var(--line);background:#fff;color:#443953;font-size:10px;font-weight:730}
.sample-button:hover{background:#f3eff9}
.sample-button img{object-fit:cover;width:24px;height:24px;border-radius:5px}
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-block:29px 24px}
.info-grid article{padding:10px 0 3px;border-top:1px solid #dfd9e8}
.info-num{font-family:Arial,sans-serif;letter-spacing:.055em;font-size:10px;font-weight:750;color:#715a91}
.info-grid h2{font-size:14px;font-weight:840;margin-block:4px 2px}
.info-grid p{font-size:11px;color:var(--muted);line-height:1.85}
.footer{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #e5e0ea;padding-block:15px 18px;color:#6a6077;font-size:11px}
.footer-brand{font-size:16px;color:var(--ink)}
.warning{margin-bottom:10px;padding:10px;color:#a13b29}
.credits{max-width:760px;padding-block:30px}
.credits h1{font-size:34px;margin-block:24px 8px}
.credits li{margin-block:9px}
.credits li a{color:#5e4587;text-decoration:underline}
@media(max-width:900px){
  .shell{padding-inline:20px}
  .workspace{grid-template-columns:minmax(0,1fr) 209px}
  .workbench{padding-inline:12px}
  .inspector{padding-inline:12px}
}
@media(max-width:700px){
  .shell{padding-inline:13px}
  .topbar-inner{min-height:58px}
  .topbar nav{display:none}
  .brand{font-size:20px}
  .brand img{width:34px;height:34px}
  .intro{grid-template-columns:1fr;gap:16px;padding-block:19px 16px}
  .intro h1{font-size:clamp(39px,10.8vw,59px);margin-block:9px}
  .intro-copy>p{max-width:430px;font-size:13px}
  .upload-card{padding:8px;border-radius:17px}
  .drop-zone{display:grid;grid-template-columns:auto minmax(0,1fr) auto;text-align:start;min-height:101px;padding:8px 9px;gap:8px}
  .upload-icon{width:33px;height:33px}
  .upload-icon .icon{width:18px;height:18px}
  .upload-copy h2{font-size:15px}
  .upload-copy p{font-size:10px}
  .upload-button{padding:4px 9px;font-size:12px;min-height:44px;white-space:nowrap}
  .upload-button .icon{display:none}
  .upload-formats{grid-column:1/-1;font-size:9px}
  .upload-error{grid-column:1/-1}
  .studio-header{padding:10px 8px;flex-wrap:wrap;gap:7px}
  .section-icon{width:29px;height:29px}
  .section-icon .icon{width:16px;height:16px}
  .studio-heading{gap:5px}
  .studio-header h2{font-size:14px;white-space:nowrap}
  .studio-header p{display:none}
  .segmented{flex-basis:100%}
  .segmented button{flex:1;justify-content:center;font-size:11px;padding:6px 5px;gap:4px;min-height:36px}
  .segmented .icon{width:13px;height:13px}
  .workspace{grid-template-columns:1fr}
  .workbench{padding:8px}
  .status-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px}
  #replace-image{min-height:38px}
  .status{grid-column:1/-1;min-height:22px}
  .boards{gap:5px}
  .board{border-radius:10px}
  .board figcaption{font-size:8px;inset-block-start:5px;inset-inline-start:5px;padding:3px 5px}
  .stage{height:clamp(145px,43vw,270px)}
  .is-single .stage{height:clamp(210px,62vw,360px)}
  .controls{margin-block:7px 4px;flex-wrap:wrap}
  .tool-group button,.icon-button,.zoom-label select{min-height:39px;font-size:10px;padding:3px 5px;gap:3px}
  .icon-button{min-width:39px}
  .tool-group button .icon,.icon-button .icon{width:13px;height:13px}
  .tool-tip{align-items:flex-start;flex-wrap:wrap}
  .inspector{padding:10px;border-inline-start:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .inspector-top,.field:not(.export-format,.export-background),.dimensions,.resolution-note,.download,.inspector .text-button,.device-note{grid-column:1/-1}
  .inspector h3{font-size:17px}
  .inspector p{font-size:10px}
  .ratios{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ratios button,.field select,.background-options input,.download{min-height:42px}
  .comparison-control input{min-height:42px}
  .samples{padding:8px;font-size:10px}
  .info-grid{grid-template-columns:1fr;gap:10px;padding-block:14px}
  .footer{flex-wrap:wrap}
}
@media(max-width:350px){
  .shell{padding-inline:8px}
  .drop-zone{grid-template-columns:minmax(0,1fr) auto}
  .upload-icon{display:none}
  .segmented .icon{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

.refinement-tools,.footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.refinement-tools .text-button{white-space:nowrap}
.guide-callout{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;margin-block:0 22px;border:1px solid var(--line);border-radius:13px;background:#fff}
.guide-callout h2{font-size:15px;font-weight:830}
.guide-callout p{font-size:12px;color:var(--muted)}
.guide-callout>a{flex:none;display:inline-flex;align-items:center;min-height:44px}
.reading-page{max-width:840px;padding-block:34px}
.reading-intro{padding-block-end:15px}
.reading-intro h1{margin-block:12px 7px;font-size:clamp(29px,5.4vw,46px);line-height:1.25;font-weight:870}
.reading-intro p,.reading-section p,.reading-section li,.reading-section dd{line-height:1.85;color:var(--muted)}
.reading-toc{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:14px}
.reading-toc a{display:inline-flex;align-items:center;min-height:40px;padding:4px 12px;border-radius:9px;background:var(--tint);color:#543d7c;font-size:13px;font-weight:750}
.reading-section{border-top:1px solid var(--line);padding-block:18px}
.reading-section h2{font-size:21px;line-height:1.4;margin-block-end:8px}
.reading-section ol{padding-inline-start:24px}
.reading-section li+li,.reading-section p+p{margin-block-start:9px}
.reading-section p a{color:#634987;text-decoration:underline}
.reading-section details{margin-block:8px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fff}
.reading-section summary{cursor:pointer;font-weight:750}
.reading-section details p{padding-block-start:6px}
.format-list{display:grid;gap:9px;margin:0}
.format-list>div{padding:11px 14px;background:#fff;border:1px solid var(--line);border-radius:10px}
.format-list dt{font-weight:800}
.format-list dd{margin:2px 0 0}
.ad-placement{margin-block:22px;padding:11px 13px;border:1px solid #e5e0ea;border-radius:12px;background:#fbfafc;text-align:center;color:var(--muted)}
.ad-label{display:block;font-size:10px;font-weight:800;margin-block-end:4px}
.ad-placement [data-ad-content]{overflow-wrap:anywhere}
.ad-placement a{font-weight:800;color:#543d7c;text-decoration:underline}
.ad-placement .adsbygoogle{display:block}
.ad-placement:has(ins[data-ad-status="unfilled"]){display:none}
.ad-layout-preview{min-height:105px;display:grid;place-content:center;border-style:dashed;font-size:13px}
@media(max-width:700px){
  .refinement-tools{flex:0 0 100%;justify-content:flex-end}
  .refinement-tools .text-button{min-height:42px;padding-inline:7px}
  .guide-callout{flex-wrap:wrap;gap:3px}
  .reading-page{padding-block:22px}
  .ad-desktop{display:none}
}

.top-actions{display:flex;align-items:center;gap:12px}
.language-link{display:inline-flex;align-items:center;min-height:40px;color:#5e4587;font-size:12px;font-weight:750;white-space:nowrap}
.language-link:hover{text-decoration:underline}
html[dir="ltr"]{font-family:system-ui,sans-serif}
html[dir="ltr"] .intro h1{font-size:clamp(38px,5.2vw,64px)}
html[dir="ltr"] .upload-button .icon{transform:scaleX(-1)}
@media(max-width:700px){
  .topbar-inner{gap:12px}
  .top-actions{gap:8px}
  .top-actions .top-note{display:none}
  html[dir="ltr"] .intro h1{font-size:clamp(36px,9vw,59px)}
}
@media(max-width:380px){
  html[dir="ltr"] .ratios .ratio-original{display:none}
}

.language-menu{position:relative;z-index:5;color:#4e386f;font-size:12px;font-weight:750;flex:none}
.language-menu summary{list-style:none;min-height:42px;display:flex;align-items:center;gap:7px;padding-inline:11px;cursor:pointer;border:1px solid var(--line);border-radius:10px;background:#fff;white-space:nowrap}
.language-menu summary::-webkit-details-marker{display:none}
.language-menu summary:focus-visible{outline:2px solid #8265c4;outline-offset:3px}
.language-caret{display:block;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
.language-options{position:absolute;inset-block-start:calc(100% + 5px);inset-inline-end:0;min-width:134px;display:grid;gap:2px;list-style:none;margin:0;padding:5px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 8px 28px #30274a26}
.language-options a{display:block;padding:7px 10px;border-radius:6px;white-space:nowrap}
.language-options a:hover,.language-options a[aria-current]{background:var(--tint)}
.language-options a[lang="hi"],.language-menu summary [lang="hi"]{font-family:"Hawaf Devanagari",system-ui,sans-serif}

.hero-demo{width:100%;max-width:410px;justify-self:center;position:relative;border:1px solid #d9d1e7;border-radius:17px;padding:5px;background:#fff;box-shadow:0 11px 25px #2c204520;color:#49395d}
.demo-stage{--demo-split:50%;position:relative;overflow:hidden;aspect-ratio:1.22;border-radius:12px;direction:ltr;background-color:#eae3f7;background-image:conic-gradient(#d9cee9 25%,transparent 0 50%,#d9cee9 0 75%,transparent 0);background-size:20px 20px;cursor:ew-resize;touch-action:pan-y;user-select:none}
.demo-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;pointer-events:none}
.demo-original{clip-path:inset(0 calc(100% - var(--demo-split)) 0 0)}
.demo-divider{position:absolute;top:0;bottom:0;left:var(--demo-split);width:3px;background:#f7ffcd;box-shadow:0 0 13px 3px #c5f26a;transform:translateX(-50%)}
.demo-divider::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#efffa7;color:#2e2547;font:800 17px/1 system-ui}
.demo-stage:focus-within .demo-divider::after{outline:2px solid #574075;outline-offset:2px}
.demo-badge{position:absolute;top:8px;padding:3px 7px;border-radius:6px;background:#2f2548eb;color:#fff;font-size:10px;font-weight:750}
.demo-before{left:8px}
.demo-after{right:8px}
.hero-demo figcaption{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:2px 6px 0;font-size:11px;font-weight:720}
.hero-demo label{display:grid;place-items:center;min-height:31px;cursor:pointer;color:#624c8d;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.demo-start,.demo-pause:checked ~ figcaption .demo-stop{display:none}
.demo-pause:checked ~ figcaption .demo-start{display:inline}
.demo-pause:focus-visible ~ figcaption label{outline:2px solid #8265c4;outline-offset:2px}
@media(min-width:961px){
  .intro{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr) minmax(0,1fr);gap:clamp(14px,2.6vw,34px)}
  html[dir] .intro h1{font-size:clamp(31px,3.7vw,52px)}
}
@media(min-width:701px) and (max-width:960px){
  .intro{grid-template-columns:1fr 1fr;gap:18px}
  .intro-copy{grid-column:1/-1;text-align:center}
  .intro-copy>p{margin-inline:auto}
}
@media(max-width:700px){
  .intro-copy{text-align:center}
  .intro-copy>p{margin-inline:auto}
  .hero-demo{max-width:315px}
  .demo-stage{aspect-ratio:1.27}
  .hero-demo label{min-height:36px}
}
@media(prefers-reduced-motion:reduce){
  .demo-pause,.hero-demo label{display:none}
}

.button-outline{border:1px solid #d9cfe6;background:#fff;color:#503773}
.button-outline:hover:not(:disabled){background:#f0eaf9;border-color:#b9a7d0}
.button-outline .icon,.edit-actions .icon{width:16px;height:16px}
.edit-start-row{display:flex}
#edit-start{margin-block-start:9px}
.edit-backgrounds{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-block-start:9px;font-size:11px;font-weight:750}
.edit-backgrounds>span{margin-inline-end:4px}
.edit-backgrounds button{min-height:34px;padding:3px 8px;border:1px solid var(--line);border-radius:8px;background:#fff}
.edit-backgrounds button[aria-pressed=true]{color:#543d7c;background:#efeaf7;border-color:#b9a7d0}
.edit-white{background:#fff;color:#473959;border-color:#ded9e9}
.board-dark.edit-white figcaption{background:#f0edf6;color:#473959}
.edit-black{background:#000}
.is-editing .stage{height:clamp(255px,35vw,430px)}
.is-editing .controls,.is-editing .tool-group{flex-wrap:wrap}
.is-editing #brush-size{width:clamp(85px,15vw,145px);margin:0}
.edit-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-block-start:8px}
.quality-field .button{min-height:36px}
.face-filters{min-width:0;display:grid;gap:4px;margin:0;padding:6px 9px 8px;border:1px solid var(--line);border-radius:8px;font-size:11px}
.face-filters legend{font-weight:800}
.face-filters label{display:flex;align-items:center;gap:6px;min-height:28px}
.face-filters input{accent-color:#72559b}
.face-filters p:empty{display:none}
.reward-dialog{width:min(430px,calc(100% - 28px));max-height:calc(100% - 28px);padding:0;border:1px solid #d9cfe6;border-radius:18px;color:var(--ink);box-shadow:0 18px 60px #17122244}
.reward-dialog::backdrop{background:#211833a6}
.reward-panel{padding:23px}
.reward-panel h2{font-size:clamp(19px,4vw,25px);line-height:1.35}
.reward-panel p{margin-block:10px;color:var(--muted);font-size:14px}
.reward-feedback{padding:8px 10px;border-radius:8px;background:#f2edf8}
.reward-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;margin-block-start:16px}
@media(max-width:700px){
  .is-editing .stage{height:clamp(235px,65vw,370px)}
  .is-editing .tool-group button,.is-editing .utility-group button,.is-editing .zoom-label select,.edit-backgrounds button,.edit-actions button,#edit-start,.quality-field .button{min-height:44px}
  .face-filters{grid-column:1/-1}
  .face-filters label{min-height:40px}
  .is-editing #brush-size{min-height:42px}
}

@font-face{font-family:"Hawaf Devanagari";src:url("./vendor/noto-sans-devanagari-regular.woff") format("woff");font-weight:400;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CFF,U+A8E0-A8FF,U+200C-200D,U+25CC}
@font-face{font-family:"Hawaf Devanagari";src:url("./vendor/noto-sans-devanagari-bold.woff") format("woff");font-weight:700;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CFF,U+A8E0-A8FF,U+200C-200D,U+25CC}
html[lang="hi"]{font-family:"Hawaf Devanagari",system-ui,sans-serif}
@media(max-width:700px){
  .segmented button{white-space:normal;line-height:1.2}
}

.offline-setup{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding-block-start:12px}
.offline-setup p{color:var(--muted);font-size:12px}
.offline-setup p:empty{display:none}

@media(prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --paper:#121214;
    --white:#1c1b20;
    --ink:#e8e6ef;
    --muted:#b2acbf;
    --line:#393542;
    --purple:#c4acec;
    --accent:#d6f56a;
    --tint:#322940;
    --surface-raised:#26232d;
  }

  .topbar,.inspector{background:#17161b;border-color:var(--line)}
  .top-note,.language-menu summary,.language-options{
    background:var(--surface-raised);border-color:var(--line);color:var(--ink)
  }
  .language-options{box-shadow:0 8px 28px #0009}
  nav a:hover,.footer a:hover,.language-link{color:var(--purple)}

  .eyebrow,.section-icon{background:var(--tint);color:var(--purple)}
  .intro h1 span,.eyebrow-small,.info-num,.text-button,.hero-demo label{color:var(--purple)}
  .text-button:hover,.hero-demo label:hover{color:#eadcff}
  .upload-card{background:radial-gradient(ellipse at 0 110%,#3a2d55 0%,transparent 65%),#1c1a22}
  .drop-zone{border-color:#786891;background-image:radial-gradient(#ffffff14 1px,transparent 1px)}
  .upload-formats span::before{color:#a799bb}
  .upload-error,.status[data-kind="error"],.warning{color:#ffad9a}
  .hero-demo{background:var(--white);border-color:var(--line);color:var(--ink);box-shadow:0 11px 25px #0006}

  .segmented,.field select,.zoom-label select,.background-options input,
  .ratios button,.icon-button,.button-outline,.edit-backgrounds button,.sample-button{
    background:var(--surface-raised);border-color:var(--line);color:var(--ink)
  }
  .tool-group button,.file-chip,.status,.footer{color:var(--muted)}
  .file-chip .icon{color:var(--purple)}
  .segmented button{color:var(--muted)}
  .segmented button[aria-pressed=true]{
    background:#3e384b;color:var(--ink);box-shadow:0 1px 4px #0006
  }
  .ratios button[aria-pressed=true],.tool-group button[aria-pressed=true],
  .edit-backgrounds button[aria-pressed=true]{
    background:var(--tint);color:#eadcff;border-color:#8870b8
  }
  .ratios button:hover,.icon-button:not(:disabled):hover,.sample-button:hover,
  .button-outline:hover:not(:disabled),.tool-group button:not(:disabled):hover{
    background:#41354f;color:var(--ink)
  }

  .guide-callout,.reading-section details,.format-list>div,.ad-placement{
    background:var(--white);border-color:var(--line)
  }
  .reading-toc a,.ad-placement a,.reading-section p a,.credits li a{color:var(--purple)}
  .footer,.info-grid article{border-color:var(--line)}

  .reward-dialog{background:var(--white);border-color:var(--line);box-shadow:0 18px 60px #000b}
  .reward-dialog::backdrop{background:#0a0812cc}
  .reward-panel .reward-feedback{background:var(--tint);color:var(--ink)}
  button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,
  .language-menu summary:focus-visible,.demo-pause:focus-visible ~ figcaption label{
    outline-color:var(--purple)
  }
}