/* پوشه — gallery stone, ink, ultramarine. Naskh display for an editorial voice, Instrument Serif for the Latin mark. */
:root{--bg:#E9E8E4;--panel:#F7F7F5;--ink:#16161A;--ink2:#5E5E66;--ultra:#3730A3;--line:#D6D4CE;--r:18px}
body{background:var(--bg);color:var(--ink);font:400 15px/1.8 "Vazirmatn",system-ui,sans-serif}
h1,h2,h3{font-family:"Naskh","Vazirmatn",serif;margin:0;line-height:1.35}
.pbtn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.3rem;border-radius:0;border:0;background:var(--ink);color:#fff;font-weight:800;width:100%}
.ph{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1.6rem;padding:.7rem max(1rem,calc(50% - 700px));background:var(--bg);border-bottom:1px solid var(--line)}
.ph__logo{display:flex;align-items:baseline;gap:.6rem;color:var(--ink);text-decoration:none;font:700 1.7rem/1 "Naskh",serif}
.ph__logo span{font:italic 1.15rem "Instrument Serif",serif;color:var(--ink2)}
.ph nav{display:flex;gap:1.2rem}
.ph nav a{color:var(--ink2);text-decoration:none;font-weight:700;font-size:.92rem}
.ph nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.ph__bag{margin-inline-start:auto;border:1.5px solid var(--ink);background:none;padding:.35rem .9rem;font-weight:800}
.ph__bag b{display:inline-grid;place-items:center;min-width:1.3rem;height:1.3rem;margin-inline-start:.3rem;background:var(--ultra);color:#fff;font-size:.72rem}
@media (max-width:760px){.ph nav{display:none}}

.try{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);min-height:calc(100dvh - 58px)}
.stage{position:sticky;top:58px;height:calc(100dvh - 58px);min-height:520px;background:
  radial-gradient(ellipse 60% 45% at 50% 92%,rgb(22 22 26/.07),transparent 70%),
  radial-gradient(circle at 50% 35%,#FAFAF8,#E4E2DD 70%);overflow:hidden;cursor:grab;touch-action:pan-y}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s}
.stage.is-ready canvas{opacity:1}
.stage__load{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.8rem;color:var(--ink2);font-weight:700}
.stage__load span{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--ultra);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage__fail{position:absolute;inset:auto 1rem 5rem;padding:1rem;background:#fff;text-align:center}
.views{position:absolute;top:1rem;inset-inline-start:1rem;display:flex;background:rgb(255 255 255/.75);backdrop-filter:blur(6px);border:1px solid var(--line)}
.views button{border:0;background:none;padding:.4rem .8rem;font-weight:700;font-size:.85rem;color:var(--ink2)}
.views button[aria-pressed="true"]{background:var(--ink);color:#fff}
.stage__tag{position:absolute;bottom:5.5rem;inset-inline-start:1rem;margin:0;display:flex;align-items:center;gap:.6rem;padding:.4rem .8rem .4rem .4rem;background:#fff;border:1px solid var(--line);font-size:.82rem;font-weight:700;color:var(--ink2)}
.stage__tag b{display:grid;place-items:center;min-width:2rem;height:2rem;background:var(--ultra);color:#fff;font:700 1rem "Instrument Serif",serif}
@media (max-width:900px){.try{grid-template-columns:1fr}.stage{position:relative;top:0;height:68vh;min-height:420px}}

.panel{background:var(--panel);border-inline-start:1px solid var(--line);padding:1rem 1.2rem 6rem;display:grid;gap:1rem;align-content:start}
.pbox{display:grid;gap:.7rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.pbox__h{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.pbox h2{font-size:1.45rem}
.hint{font-size:.78rem;color:var(--ink2)}
.presets,.looks{display:flex;flex-wrap:wrap;gap:.4rem}
.presets button,.looks button{border:1.5px solid var(--line);background:#fff;padding:.4rem .9rem;font-weight:700}
.presets button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.looks button:hover{border-color:var(--ink)}
.looks__ai{border-color:var(--ultra)!important;color:var(--ultra)}
.looks__why{margin:0;font-size:.85rem;color:var(--ink2);min-height:1.4em}
.sliders{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem}
.sliders label{display:grid;gap:.1rem;font-size:.8rem;font-weight:700;color:var(--ink2)}
.sliders output{color:var(--ink)}
.sliders input{accent-color:var(--ultra);width:100%}
.wtabs{display:flex;gap:0;border-bottom:1.5px solid var(--line);overflow-x:auto;scrollbar-width:none}
.wtabs button{flex-shrink:0;border:0;background:none;padding:.45rem .8rem;font-weight:700;color:var(--ink2);border-bottom:2.5px solid transparent;margin-bottom:-1.5px}
.wtabs button[aria-selected="true"]{color:var(--ink);border-color:var(--ink)}
.items{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.item{display:flex;align-items:center;gap:.6rem;padding:.4rem;border:1.5px solid transparent;background:#fff}
.item.is-on{border-color:var(--ink)}
.item__main{flex:1;display:flex;align-items:center;gap:.7rem;border:0;background:none;text-align:start;padding:0}
.item__main svg{width:52px;height:52px;flex-shrink:0;background:var(--bg)}
.item__main span{display:grid;flex:1}
.item__main small{color:var(--ink2)}
.item__main em{font-style:normal;font-size:.75rem;font-weight:800;padding:.15rem .5rem;border:1px solid var(--line)}
.item.is-on em{background:var(--ink);color:#fff;border-color:var(--ink)}
.sw{display:flex;gap:.3rem}
.sw button{width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:var(--c);box-shadow:0 0 0 1px var(--line)}
.sw button[aria-checked="true"]{box-shadow:0 0 0 2px var(--ink)}
.outfit{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.outfit li{display:grid;grid-template-columns:14px 1fr auto auto;gap:.6rem;align-items:center;font-size:.88rem}
.outfit i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.outfit small{font-weight:800;color:var(--ultra)}
.sum{display:flex;justify-content:space-between;align-items:baseline;padding-top:.4rem;border-top:1px dashed var(--line)}
.sum b{font:700 1.3rem "Naskh",serif}
.pbox--sum{border:0}
@media (max-width:420px){.sliders{grid-template-columns:1fr}.item{flex-wrap:wrap}}

.how,.size{max-width:1100px;margin:auto;padding:3rem 1.2rem}
.how h2,.size h2{font-size:2.2rem;margin-bottom:1rem}
.how ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;counter-reset:h}
.how li{counter-increment:h;display:grid;gap:.3rem;padding:1.2rem;background:var(--panel);border-top:3px solid var(--ink)}
.how li::before{content:counter(h,persian);font:700 2.2rem/1 "Naskh",serif;color:var(--ultra)}
.how span{color:var(--ink2)}
@media (max-width:760px){.how ol{grid-template-columns:1fr}}
.tablewrap{overflow-x:auto}
.size table{width:100%;border-collapse:collapse;background:var(--panel);min-width:420px}
.size th,.size td{padding:.6rem .9rem;border-bottom:1px solid var(--line);text-align:start}
.size thead th{font-size:.8rem;color:var(--ink2)}
.size tbody th{font:700 1.1rem "Instrument Serif",serif}
.note{color:var(--ink2);font-size:.88rem}
.pf{text-align:center;color:var(--ink2);padding:1.5rem 1rem 6rem;border-top:1px solid var(--line);font-size:.88rem}
.pf span{font:700 1.2rem "Naskh",serif;color:var(--ink)}
.toast{position:fixed;top:1rem;left:50%;z-index:60;transform:translate(-50%,calc(-100% - 2rem));padding:.7rem 1.2rem;background:var(--ink);color:#fff;font-weight:800;transition:transform .35s cubic-bezier(.2,.8,.2,1);max-width:92vw}
.toast.is-on{transform:translate(-50%,0)}