/* anything marked hidden stays hidden, whatever display a class gives it (the empty quick bar showed as a dot on every page) */
[hidden]{display:none!important}
/* DALFAST Studio — forest/gold identity */
:root{--bg:#f7f7f8;--surface:#ffffff;--surface2:#f0f1f2;--ink:#131517;--muted:#2f7d8f;--line:#e3e4e6;--accent:#0079b8;--accent-soft:#dff7ff;--accent-ink:#fff;--forest:#131517;--forest2:#131517;--ok:#2f7d4f;--warn:#9a5d00;--err:#b3261e;--focus:#2b6cb0;--canvas:#e8e9eb;--sel:#00b3ff;--shadow:0 1px 2px rgba(19,21,23,.06),0 8px 24px rgba(19,21,23,.08);--sidew:232px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#131517;--surface:#1c1e20;--surface2:#23262a;--ink:#f7f7f8;--muted:#c4c6cc;--line:#2c2f33;--accent:#00e5ff;--accent-soft:#0e2e36;--accent-ink:#04222a;--forest:#0f1113;--forest2:#23262a;--ok:#5cc28a;--warn:#e3aa4c;--err:#ef6b62;--focus:#00e5ff;--canvas:#0f1113;--sel:#00e5ff;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#131517;--surface:#1c1e20;--surface2:#23262a;--ink:#f7f7f8;--muted:#c4c6cc;--line:#2c2f33;--accent:#00e5ff;--accent-soft:#0e2e36;--accent-ink:#04222a;--forest:#0f1113;--forest2:#23262a;--ok:#5cc28a;--warn:#e3aa4c;--err:#ef6b62;--focus:#00e5ff;--canvas:#0f1113;--sel:#00e5ff;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.45 Inter,"Segoe UI",system-ui,Arial,sans-serif;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.app{display:grid;grid-template-columns:var(--sidew) 1fr;grid-template-rows:56px 46px 1fr;height:100vh}
.app.collapsed{--sidew:64px}
.top{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--forest);color:#eef3ee;border-bottom:1px solid #00000030}
.top .iconbtn:hover{background:#ffffff1a;border-color:transparent}
.iconbtn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;border:1px solid transparent;background:none}
.iconbtn:hover{background:var(--surface2);border-color:var(--line)}
.iconbtn:disabled{opacity:.4;cursor:default}
.logo{font-weight:700;letter-spacing:.28em;font-size:13px;margin:0 10px 0 4px;white-space:nowrap;color:#f3e6c9}
.logo small{letter-spacing:.08em;font-weight:500;color:#b8c7bd;margin-left:6px}
.projname{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.projname input{min-width:0;max-width:360px;width:100%;border:1px solid transparent;background:none;border-radius:8px;padding:6px 8px;font-weight:600;color:#fff}
.projname input:hover,.projname input:focus{border-color:#ffffff40;background:#ffffff12}
.saved{color:#b8c7bd;font-size:12px;white-space:nowrap}
.pocbadge{font-size:11px;font-weight:700;letter-spacing:.06em;color:#dfc294;border:1px solid #dfc294;border-radius:99px;padding:2px 8px;white-space:nowrap}
.side{grid-row:2/4;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;padding:10px 8px 20px;display:flex;flex-direction:column;gap:2px}
.side h2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:14px 10px 6px;font-weight:600}
.side h2:first-child{margin-top:4px}
.nav{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:9px;text-decoration:none;color:var(--ink);position:relative;white-space:nowrap}
.nav:hover{background:var(--surface2)}
.nav[aria-current="page"]{background:var(--accent-soft);font-weight:600}
.nav[aria-current="page"]::before{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent)}
.collapsed .side h2{font-size:0;margin:12px 0 4px;border-top:1px solid var(--line)}
.collapsed .nav span{display:none}
.collapsed .nav{justify-content:center}
.scrim{display:none}
.stagebar{display:flex;align-items:center;gap:4px;padding:0 14px;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.stage{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;text-decoration:none;color:var(--muted);white-space:nowrap;position:relative}
.stage b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;font-size:11px}
.stage.done b{background:var(--ok);border-color:var(--ok);color:#fff}
.stage[aria-current="step"]{color:var(--ink);background:var(--accent-soft);font-weight:600}
.stage[aria-current="step"] b{border-color:var(--accent)}
.stage:hover{color:var(--ink)}
.arrow{color:var(--line);flex:none}
.stage .tip{display:none;position:absolute;top:calc(100% + 6px);left:0;width:280px;white-space:normal;background:var(--ink);color:var(--bg);padding:8px 10px;border-radius:8px;font-size:12px;font-weight:400;z-index:30;box-shadow:var(--shadow)}
.stage:hover .tip,.stage:focus-visible .tip{display:block}
.stagehint{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap;padding-left:12px}
main{overflow:auto;min-width:0;position:relative}
.page-wrap{max-width:none;margin:0 auto;padding:28px 28px 60px}
h1{font-size:26px;line-height:1.2;margin:0 0 6px;letter-spacing:-.01em}
.lead{color:var(--muted);margin:0 0 22px;max-width:70ch}
h3{font-size:15px;margin:26px 0 12px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.grid.sm{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid.tpl{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.card{text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow);text-align:left;display:flex;flex-direction:column;gap:6px;min-width:0;position:relative}
button.card:hover,a.card:hover,.card.hov:hover{border-color:var(--accent)}
.card .t{font-weight:600}
.card .d{color:var(--muted);font-size:12.5px}
.card.selected{outline:2px solid var(--sel);outline-offset:1px}
.card.dropping{outline:2px dashed var(--accent)}
.card .chk{position:absolute;top:8px;left:8px;width:20px;height:20px;z-index:2;accent-color:var(--forest2);opacity:0}
.card:hover .chk,.card .chk:checked,.bulk-on .card .chk{opacity:1}
.tile{flex-direction:row;align-items:flex-start;gap:12px}
.tile .ic{width:22px;height:22px;color:var(--accent);margin-top:2px}
.thumb{background:var(--canvas);border-radius:8px;display:grid;place-items:center;padding:10px;aspect-ratio:4/3;overflow:hidden;border:0;width:100%}
.thumb svg{max-width:100%;max-height:100%;width:auto;height:100%;box-shadow:0 2px 8px rgba(0,0,0,.18);border-radius:1px}
.tplcard{padding:8px;gap:4px}
.tplcard .thumb{aspect-ratio:1/1;padding:12px;cursor:pointer}
.tplcard .t{font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 12px;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--forest2);border-color:var(--forest2);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--forest)}
.btn.sm{padding:4px 9px;font-size:12.5px}
.btn.ghost{border-color:transparent;background:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:4px 11px;font-size:12.5px}
.chip[aria-pressed="true"]{background:var(--forest);color:#fff;border-color:var(--forest)}
.chip .n{opacity:.6;margin-left:4px;font-size:11px}
.search{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 12px;min-width:240px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tab{border:0;background:none;padding:9px 12px;border-bottom:2px solid transparent;color:var(--muted);white-space:nowrap;text-decoration:none}
.tab[aria-selected="true"]{color:var(--ink);border-color:var(--accent);font-weight:600}
.empty{border:1px dashed var(--line);border-radius:12px;padding:28px;text-align:center;color:var(--muted)}
.note-poc{font-size:12px;color:var(--muted);border-left:3px solid var(--accent);padding:4px 10px;margin:10px 0}
.pill{display:inline-block;font-size:11px;border-radius:99px;padding:1px 8px;border:1px solid var(--line);color:var(--muted)}
.pill.ok{color:var(--ok);border-color:currentColor}.pill.warn{color:var(--warn);border-color:currentColor}.pill.err{color:var(--err);border-color:currentColor}
.prog{display:flex;gap:3px}.prog i{flex:1;height:4px;border-radius:2px;background:var(--line)}.prog i.on{background:var(--ok)}
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-bottom:8px}
.aibox{display:flex;gap:8px;margin-top:12px}
.aibox input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}
.activity{list-style:none;margin:0;padding:0;font-size:13px}
.activity li{padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:10px}
.activity time{color:var(--muted);flex:none;width:64px}
.swatch{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.15);display:inline-block}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
label.f input,label.f select,label.f textarea{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 8px;color:var(--ink);font-size:13px}
.bulkbar{position:sticky;top:0;z-index:5;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--forest);color:#fff;border-radius:10px;padding:8px 12px;margin-bottom:12px}
.bulkbar .btn{background:#ffffff14;border-color:#ffffff30;color:#fff}
.folders{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.folder{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:6px 10px;font-size:13px}
.folder[aria-pressed="true"]{border-color:var(--forest2);background:var(--accent-soft);font-weight:600}
.folder.dropping{outline:2px dashed var(--accent)}
.rename{border:1px solid var(--focus);border-radius:6px;padding:2px 6px;font:inherit;width:100%;background:var(--surface)}
/* build */
.build{display:flex;height:100%;min-height:0}
.toolpanel{width:300px;flex:none;border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:0}
.toolhead{display:flex;align-items:center;gap:2px;padding:6px;border-bottom:1px solid var(--line);overflow-x:auto}
.toolhead a{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;color:var(--muted)}
.toolhead a[aria-current="true"]{background:var(--accent-soft);color:var(--ink)}
.toolbody{padding:12px;overflow-y:auto;flex:1}
.toolbody h4{margin:14px 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.toolbody h4:first-child{margin-top:0}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tgrid button,.tgrid .dragitem{border:1px solid var(--line);background:var(--surface2);border-radius:8px;padding:8px 4px;font-size:11.5px;display:flex;flex-direction:column;align-items:center;gap:4px}
.tgrid button:hover{border-color:var(--accent)}
[draggable="true"]{cursor:grab}
.tlist{display:flex;flex-direction:column;gap:6px}
.tlist button{border:1px solid var(--line);background:var(--surface2);border-radius:8px;padding:8px 10px;text-align:left}
.tlist button:hover{border-color:var(--accent)}
.pages{width:140px;flex:none;border-right:1px solid var(--line);background:var(--surface2);overflow-y:auto;padding:10px 8px;display:flex;flex-direction:column;gap:6px}
.secthead{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700;padding:6px 4px 0;border-top:1px solid var(--line);cursor:text}
.pthumb{border:2px solid transparent;border-radius:8px;background:none;padding:4px;display:flex;flex-direction:column;gap:3px;align-items:center;font-size:11px;color:var(--muted);position:relative}
.pthumb svg{width:100%;height:auto;max-height:120px;box-shadow:0 1px 4px rgba(0,0,0,.2);background:#fff;pointer-events:none}
.pthumb[aria-current="true"]{border-color:var(--accent);color:var(--ink)}
.pthumb.multi{border-color:var(--sel);background:#2f8f6b14}
.pthumb.drop-before::before,.pthumb.drop-after::after{content:"";position:absolute;left:0;right:0;height:3px;background:var(--sel);border-radius:2px}
.pthumb.drop-before::before{top:-5px}.pthumb.drop-after::after{bottom:-5px}
.pagectl{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.pagectl button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:3px 0;font-size:12px}
.canvaswrap{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.canvasbar{display:flex;gap:4px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.menubtn{border:0;background:none;padding:5px 9px;border-radius:7px;font-size:13px}
.menubtn:hover,.menubtn[aria-expanded="true"]{background:var(--surface2)}
.canvas{flex:1;overflow:auto;background:var(--canvas);display:grid;place-items:center;padding:40px;min-height:0;position:relative}
.canvas.dragover{box-shadow:inset 0 0 0 3px var(--sel)}
.pg{position:relative;box-shadow:0 4px 24px rgba(0,0,0,.25);flex:none;background:#fff}
.pg>#svgHost,.pg>#svgHost>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ov{position:absolute;inset:0}
.bx{position:absolute;outline:1px solid transparent;cursor:move;min-height:4px;transform-origin:50% 50%}
.bx:hover{outline:1px dashed var(--sel)}
.bx.on{outline:2px solid var(--sel)}
.bx.locked{cursor:default}
.bx.locked.on{outline-style:dashed}
.bx.grp{outline:1px dotted var(--sel)}
.selbox{position:absolute;outline:2px solid var(--sel);pointer-events:none;transform-origin:50% 50%}
.selbox i{position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--sel);border-radius:3px;pointer-events:auto}
.selbox i[data-h="nw"]{left:-7px;top:-7px;cursor:nwse-resize}.selbox i[data-h="ne"]{right:-7px;top:-7px;cursor:nesw-resize}
.selbox i[data-h="sw"]{left:-7px;bottom:-7px;cursor:nesw-resize}.selbox i[data-h="se"]{right:-7px;bottom:-7px;cursor:nwse-resize}
.selbox i[data-h="n"]{left:calc(50% - 8px);top:-6px;width:16px;height:8px;cursor:ns-resize}.selbox i[data-h="s"]{left:calc(50% - 8px);bottom:-6px;width:16px;height:8px;cursor:ns-resize}
.selbox i[data-h="w"]{top:calc(50% - 8px);left:-6px;height:16px;width:8px;cursor:ew-resize}.selbox i[data-h="e"]{top:calc(50% - 8px);right:-6px;height:16px;width:8px;cursor:ew-resize}
.selbox i[data-h="rot"]{left:calc(50% - 8px);top:-34px;width:16px;height:16px;border-radius:50%;cursor:grab}
.selbox i[data-h="rot"]::after{content:"";position:absolute;left:5px;top:16px;width:2px;height:16px;background:var(--sel)}
.marquee{position:absolute;border:1px solid var(--sel);background:#2f8f6b22;pointer-events:none}
.guide{position:absolute;background:#e0218a;pointer-events:none;z-index:4}
.guide.v{width:1px;top:0;bottom:0}.guide.h{height:1px;left:0;right:0}
.dimtip{position:absolute;background:var(--ink);color:var(--bg);font-size:11px;padding:2px 6px;border-radius:5px;pointer-events:none;white-space:nowrap;z-index:6}
.tedit{position:absolute;border:0;outline:2px solid var(--sel);background:transparent;resize:none;overflow:hidden;padding:0;margin:0;z-index:5;transform-origin:50% 50%}
.qbar{position:absolute;z-index:7;display:flex;gap:2px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px;box-shadow:var(--shadow);white-space:nowrap}
.qbar button,.qbar select{border:0;background:none;border-radius:7px;padding:4px 7px;font-size:12.5px;min-width:26px}
.qbar button:hover,.qbar button[aria-pressed="true"]{background:var(--surface2)}
.qbar select{max-width:130px;border:1px solid var(--line)}
.qbar .sz{width:44px;border:1px solid var(--line);border-radius:6px;padding:3px 4px;text-align:center}
.qbar .dot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.25);display:inline-block;vertical-align:middle}
.qbar .sep{width:1px;height:20px;background:var(--line);margin:0 2px}
.insp{width:280px;flex:none;border-left:1px solid var(--line);background:var(--surface);overflow-y:auto;display:flex;flex-direction:column}
.insptabs{display:flex;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2}
.insptabs button{flex:1;border:0;background:none;padding:10px 0;border-bottom:2px solid transparent;color:var(--muted);font-size:13px}
.insptabs button[aria-selected="true"]{color:var(--ink);border-color:var(--accent);font-weight:600}
.inspbody{padding:12px;display:flex;flex-direction:column;gap:10px}
.insp h4{margin:4px 0 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.layers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.layers li{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:5px 6px;background:var(--surface2);font-size:12.5px;cursor:pointer}
.layers li.on{border-color:var(--sel);background:#2f8f6b18}
.layers li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layers li button{border:0;background:none;padding:2px 4px;border-radius:5px;opacity:.7}
.layers li button:hover{opacity:1;background:var(--surface)}
.layers li.drop-before{box-shadow:0 -3px 0 var(--sel)}.layers li.drop-after{box-shadow:0 3px 0 var(--sel)}
.layers li.hid .nm{opacity:.45;text-decoration:line-through}
.two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sw{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.sw button{width:24px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,.2);padding:0}
.sw button[aria-pressed="true"]{outline:2px solid var(--focus);outline-offset:1px}
.sw input[type=color]{width:28px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:5px 10px;font-size:12.5px}
.seg button[aria-pressed="true"]{background:var(--forest);color:#fff}
.startcanvas{max-width:560px;text-align:center}
/* menus */
.menu{position:fixed;z-index:80;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.25);padding:5px;font-size:13px;max-height:min(70vh,560px);overflow-y:auto}
.menu button{display:flex;width:100%;align-items:center;gap:10px;border:0;background:none;padding:7px 10px;border-radius:7px;text-align:left}
.menu button:hover,.menu button:focus{background:var(--surface2);outline:none}
.menu button:disabled{opacity:.4;cursor:default;background:none}
.menu button .k{margin-left:auto;color:var(--muted);font-size:11.5px}
.menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.menu .sub::after{content:"›";margin-left:auto;color:var(--muted)}
/* review */
.review{display:flex;height:100%;min-height:0}
.qa{width:340px;flex:none;border-right:1px solid var(--line);background:var(--surface);overflow-y:auto;padding:16px}
.qa details{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--surface2)}
.qa summary{padding:9px 12px;cursor:pointer;display:flex;gap:8px;align-items:center}
.qa ul{margin:0;padding:0 12px 10px;list-style:none;font-size:12.5px}
.qa li{display:flex;gap:8px;align-items:flex-start;padding:5px 0;border-top:1px solid var(--line)}
.qa li span{flex:1}
.prev{flex:1;overflow:auto;background:var(--canvas);padding:24px;min-width:0}
.prevgrid{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;align-items:flex-start}
.prevgrid.z-fit{flex-direction:column;align-items:center}.prevgrid.z-fit figure{width:100%}.prevgrid.z-fit .spread{width:100%;justify-content:center}.prevgrid figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.prevgrid svg{width:var(--pw,240px);height:auto;box-shadow:0 3px 14px rgba(0,0,0,.25);display:block}
.spread{display:flex}
.phone{width:390px;height:720px;border:10px solid #111;border-radius:34px;overflow:hidden;background:#fff;margin:0 auto;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.phone iframe{width:100%;height:100%;border:0}
.pubgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fmt{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.fmt label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--surface)}
.fmt label.off{opacity:.55}
.fmt b{display:block}
.fmt small{color:var(--muted);font-size:11.5px}
table.res{width:100%;border-collapse:collapse;font-size:13px}
table.res td,table.res th{border-bottom:1px solid var(--line);padding:7px 6px;text-align:left}
.notes{display:grid;grid-template-columns:280px 1fr;gap:16px;min-height:60vh}
.notes textarea{width:100%;min-height:340px;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface);resize:vertical}
.modal{position:fixed;inset:0;background:rgba(8,14,11,.6);display:grid;place-items:center;z-index:50;padding:16px}
.modal[hidden]{display:none}
.dialog{background:var(--surface);border-radius:14px;max-width:960px;width:100%;max-height:90vh;overflow:auto;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
#toasts{position:fixed;bottom:16px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:90}
.toast{background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;max-width:380px;box-shadow:var(--shadow);font-size:13px}
.toast.warn{background:var(--warn);color:#fff}
.kbd{display:inline-block;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px;font-size:12px;background:var(--surface2)}
table.keys{width:100%;border-collapse:collapse;font-size:13px}table.keys td{padding:5px 4px;border-bottom:1px solid var(--line)}
.loadmore{display:flex;justify-content:center;padding:20px;color:var(--muted)}
@media (max-width:1100px){.insp{width:240px}.toolpanel{width:260px}.hero{grid-template-columns:1fr}}
@media (max-width:900px){
 .app,.app.collapsed{grid-template-columns:1fr;--sidew:260px}
 .side{position:fixed;top:56px;bottom:0;left:0;width:260px;z-index:40;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
 .app.drawer .side{transform:none}
 .app.drawer .scrim{display:block;position:fixed;inset:56px 0 0;background:rgba(0,0,0,.35);z-index:39}
 .collapsed .nav span{display:inline}.collapsed .nav{justify-content:flex-start}.collapsed .side h2{font-size:11px}
 .stagebar{grid-column:1}
 .logo small,.saved,.stagehint{display:none}
 .logo{letter-spacing:.1em;margin:0 2px}.top{gap:2px;padding:0 6px}.projname input{min-width:90px}
 .page-wrap{padding:18px 16px 50px}
 .build,.review{flex-direction:column;height:auto}
 .toolpanel{width:auto;border-right:0;border-bottom:1px solid var(--line);max-height:44vh}
 .pages{width:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
 .pthumb{width:84px;flex:none}.secthead{writing-mode:vertical-rl;border-top:0;border-left:1px solid var(--line)}
 .canvas{min-height:58vh;padding:18px}
 .insp{width:auto;border-left:0;border-top:1px solid var(--line)}
 .qa{width:auto;border-right:0}
 .pubgrid,.notes{grid-template-columns:1fr}
 .phone{width:100%;max-width:390px}
 .search{min-width:0;width:100%}
 .grid.tpl{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* publishing workspace */
.bookws{display:flex}
.bookside{width:290px;flex:none;border-right:1px solid var(--line);background:var(--surface);overflow-y:auto}
.chapters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.chapters li{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--surface2);font-size:13px;cursor:pointer}
.chapters li.on{border-color:var(--forest2);background:var(--accent-soft);font-weight:600}
.chapters li .cn{width:18px;text-align:right;color:var(--muted);font-size:12px}
.chapters li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chapters li.drop-before{box-shadow:0 -3px 0 var(--sel)}.chapters li.drop-after{box-shadow:0 3px 0 var(--sel)}
.bookeditor{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--surface)}
.chtitle{flex:1;font:600 20px/1.2 'Playfair Display',Georgia,serif;border:1px solid transparent;border-radius:8px;padding:6px 8px;background:none;color:var(--ink)}
.chtitle:hover,.chtitle:focus{border-color:var(--line);background:var(--surface2)}
.mdbar{display:flex;gap:3px;flex-wrap:wrap;align-items:center;border:1px solid var(--line);border-radius:9px;padding:4px;background:var(--surface2)}
.mdbar button{border:0;background:none;border-radius:6px;padding:4px 8px;font-size:12.5px}
.mdbar button:hover{background:var(--surface)}
.mstext{flex:1;min-height:320px;border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:var(--surface);color:var(--ink);font:16px/1.7 'Crimson Pro',Georgia,serif;resize:none}
.bookprev{width:330px;flex:none;border-left:1px solid var(--line);background:var(--canvas);overflow-y:auto;padding:14px}
.bookpages{display:flex;flex-direction:column;gap:14px;align-items:center}
.bookpages figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font-size:11px}
.bookpages svg{box-shadow:0 3px 14px rgba(0,0,0,.25);background:#fff;display:block}
@media (max-width:1100px){.bookprev{width:260px}.bookside{width:240px}}
@media (max-width:900px){.bookws{flex-direction:column}.bookside,.bookprev{width:auto;border:0;border-bottom:1px solid var(--line)}.bookprev{max-height:60vh}.mstext{min-height:50vh}}
/* ---------- cloud: account, share, history, comments, approval ---------- */
.acct .avatar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;letter-spacing:.02em}
.projname .btn{color:#fff;border-color:#ffffff40;background:#ffffff12;white-space:nowrap}.projname .btn.ghost{background:none;border-color:transparent}.projname .btn:hover{background:#ffffff26}
.projname .btn .ic{width:15px;height:15px}
.linkbtn{background:none;border:0;padding:0;color:var(--focus);text-decoration:underline;cursor:pointer;font:inherit}
.err{color:var(--err);min-height:1em;margin:0}
.sharelist{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sharelist li{display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface)}
.sharelist li>span:first-child{min-width:0;flex:1}
.cloudsec{margin-top:28px}.cloudsec h2{font-size:16px;margin:18px 0 6px}
.histgrid{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:16px;min-height:300px}
.histlist{list-style:none;margin:0;padding:0;max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:4px}
.histlist button{width:100%;text-align:left;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);cursor:pointer;color:var(--ink)}
.histlist button.on{border-color:var(--sel);box-shadow:0 0 0 2px var(--sel) inset}
.histprev{min-width:0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}.histprev .prevgrid{justify-content:flex-start;gap:12px}
.cloudpanel{margin-top:12px}.cloudpanel textarea{width:100%;resize:vertical}
.cmlist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.cm{border-left:3px solid var(--accent);padding:4px 0 4px 10px;display:flex;flex-direction:column;gap:4px;font-size:13px}.cm.done{border-left-color:var(--line);opacity:.75}
.cm .reply{margin-left:10px;padding-left:8px;border-left:2px solid var(--line)}
@media (max-width:700px){.histgrid{grid-template-columns:1fr}.projname .btn{padding:4px 8px;font-size:12px}.projname .btn .ic{display:none}}
/* ---------- marketplace ---------- */
.packgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pack{display:flex;flex-direction:column;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;padding:0;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
.pack:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,40,30,.08),0 14px 30px rgba(20,40,30,.12)}
.pack-cover{aspect-ratio:4/3;background:var(--surface2);display:grid;place-items:center;overflow:hidden;padding:12px}.pack-cover svg{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.pack-ph{font-size:13px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.pack-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}.pack-body b{font-size:15px;line-height:1.3}
.pack-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:4px}
.price{font-weight:700;color:var(--ink)}.price.free{color:var(--ok)}.price.big{font-size:22px}
.packhead{margin:10px 0 16px}.packhead h1{margin:2px 0}
.packgallery{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 16px;margin-bottom:12px;scroll-snap-type:x mandatory}
.packgallery figure{margin:0;flex:0 0 auto;scroll-snap-align:start}.packgallery svg{display:block;max-height:340px;width:auto;height:auto;box-shadow:var(--shadow);border-radius:4px;background:#fff}
.picklist{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto;padding:6px 0}.picklist.imgs{flex-direction:row;flex-wrap:wrap}
.pick{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer}.pick.img{position:relative}.pick.img img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}.pick.img input{position:absolute;top:4px;left:4px}
.chips .pick{border:1px solid var(--line);border-radius:99px;padding:3px 10px}
.sw{display:inline-flex;gap:2px;vertical-align:middle}.sw i{width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid #0001}
/* ---------- website builder ---------- */
.webws{display:grid;grid-template-columns:260px 1fr 320px;height:calc(100vh - 112px);min-height:0}
.webside{overflow:auto;border-right:1px solid var(--line);background:var(--surface);padding:12px}.webside.right{border-right:0;border-left:1px solid var(--line)}
.webside h4{margin:4px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.wlist{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:2px}.wlist li{display:flex;align-items:center;border-radius:8px}.wlist li.on{background:var(--accent-soft)}
.wlist li>button{flex:1;min-width:0;text-align:left;background:none;border:0;padding:7px 8px;display:flex;flex-direction:column;cursor:pointer;color:var(--ink);font:inherit;font-size:13px}.wlist li>button span:first-child{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wlist .d{font-size:11px}.wmove{display:flex}.wmove .iconbtn{width:24px;height:24px;font-size:12px}
.webstage{display:flex;flex-direction:column;min-width:0;background:var(--canvas)}.webbar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.webframe{flex:1;display:flex;justify-content:center;overflow:auto;padding:14px}.webframe iframe{width:100%;height:100%;border:0;background:#fff;border-radius:6px;box-shadow:var(--shadow);transition:width .25s}
.webframe.tablet iframe{width:820px;max-width:100%}.webframe.mobile iframe{width:390px}
.wpanel .f{margin-bottom:10px}.wpanel textarea,.wpanel input:not([type=checkbox]),.wpanel select{width:100%}
.witem{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:0 0 8px}.witem legend{font-size:11px;color:var(--muted)}
.wimg{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.wimg img{width:72px;height:54px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.wpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:12px}.wpick button{padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:var(--surface2);aspect-ratio:4/3}.wpick button:hover{border-color:var(--sel)}.wpick img{width:100%;height:100%;object-fit:cover}
.wsecgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.wsecgrid .card{cursor:pointer;color:var(--ink)}.wsecgrid .card:hover{border-color:var(--sel)}
.wtable{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:10px}.wtable th,.wtable td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
@media (max-width:1100px){.webws{grid-template-columns:220px 1fr 280px}}
@media (max-width:820px){.webws{grid-template-columns:1fr;height:auto}.webstage{height:70vh}.webside{border:0;max-height:none}}
/* ---------- prototypes ---------- */
.protowrap{display:flex;flex-direction:column;align-items:center}
.protophone{padding:14px;background:#111;border-radius:46px;box-shadow:0 20px 50px rgba(0,0,0,.35)}.protophone .protostage{border-radius:32px;overflow:hidden}
.protodesk{padding:10px 10px 14px;background:#2a2d2b;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.protostage{position:relative;background:#fff}.protostage>svg{display:block;width:100%;height:100%}
.protostage .hot{position:absolute;background:transparent;border:0;padding:0;cursor:pointer;border-radius:6px}.protostage .hot:hover,.protostage .hot:focus-visible{background:rgba(43,108,176,.18);outline:2px solid rgba(43,108,176,.6)}
.insp-proto{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
/* ---------- media ---------- */
.prompter{max-height:220px;overflow:auto;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:14px 18px;font-size:20px;line-height:1.55;margin-bottom:10px}.prompter.tall{max-height:46vh}
.recmeter{width:100%;height:46px;background:#16201b;border-radius:8px;display:block;margin:6px 0}
.podgrid{display:grid;grid-template-columns:260px 1fr;gap:20px;margin-top:14px}.podgrid aside{border-right:1px solid var(--line);padding-right:12px}.podgrid section .card{margin:10px 0}
.wave{width:100%;height:90px;background:var(--surface2);border-radius:8px;display:block;margin:6px 0}
.vslines{display:flex;flex-direction:column;gap:10px;padding-left:22px}.vslines li{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}.vslines li.done{border-left:4px solid var(--ok)}.vstext{font-size:17px;margin-bottom:8px}
.acx{list-style:none;padding:0;display:flex;flex-direction:column;gap:4px}
@media (max-width:820px){.podgrid{grid-template-columns:1fr}.podgrid aside{border:0}}
/* ---------- brand hub ---------- */
.bhgrid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}.bhlist{display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 220px);overflow:auto}
.bhkit{cursor:pointer;color:var(--ink)}.bhkit.on{box-shadow:0 0 0 2px var(--sel)}.bhlogo{height:64px;border-radius:8px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}.bhlogo img{max-height:48px;max-width:80%;object-fit:contain}.bhlogo span{font-size:20px}
.bhed h4{margin:18px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.bhname{font:inherit;font-size:24px;border:1px solid transparent;background:none;color:inherit;border-radius:8px;padding:2px 6px}.bhname:hover,.bhname:focus{border-color:var(--line)}
.bhslots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.bhslot{border:1px solid var(--line);border-radius:10px;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px}.bhslot img{max-height:60px;max-width:90%;object-fit:contain}
.bhcolors{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}.bhcol{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px;cursor:pointer}.bhcol input{width:44px;height:44px;border:0;padding:0;background:none;cursor:pointer}.bhcol span{display:flex;flex-direction:column;font-size:12px}
.bhtype{border-radius:10px;padding:20px;margin-top:10px;border:1px solid var(--line)}.cgrid td{white-space:nowrap}.cgrid .pill{font-size:10px}
@media (max-width:900px){.bhgrid{grid-template-columns:1fr}.bhslots{grid-template-columns:1fr}}

.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);margin:0 auto 12px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}
/* ---------- builder gallery ---------- */
.bcard{padding:0;overflow:hidden;gap:0}.bcard>*:not(.bthumb){padding:0 14px}.bcard>.row{padding-top:12px}.bcard>.d{padding-bottom:14px}
.bthumb{aspect-ratio:4/3;background:var(--surface2);display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line);opacity:.0;transition:opacity .25s}.bthumb.on{opacity:1}
.bthumb svg{max-width:88%;max-height:86%;width:auto;height:auto;box-shadow:0 2px 10px rgba(0,0,0,.12);border-radius:2px;background:#fff}
.bcard:hover .bthumb svg{transform:translateY(-2px);transition:transform .2s}
/* ---------- narrow screens: nothing may push the page wider than the screen ---------- */
.app{grid-template-columns:var(--sidew) minmax(0,1fr)}.app>*{min-width:0}
.top{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}.top::-webkit-scrollbar{display:none}/* the bar scrolls sideways when the window is too narrow (js/topbar-scroll.js: mouse wheel, edge fades) */.hsr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}.hsl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}.hsl.hsr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}.top>*{flex-shrink:0}.top .projname{flex:1 1 0;min-width:0;overflow:hidden}.projname input{min-width:60px;text-overflow:ellipsis}
.stagebar{min-width:0}main#main{min-width:0;overflow-x:hidden}
@media (max-width:900px){.app,.app.collapsed{grid-template-columns:minmax(0,1fr)}.projname .saved{display:none}.projname .btn{padding:6px 8px;font-size:0;gap:0}.projname .btn .ic{display:inline-block;width:16px;height:16px;margin:0}}
@media (max-width:640px){.pocbadge,.top [data-act="shortcuts"],.top [data-act="back"],.top [data-act="fwd"]{display:none}.logo small{display:none}.stagebar .stage:not([aria-current]) span:not(.n){display:none}h1{font-size:clamp(1.5rem,6.5vw,2.2rem);overflow-wrap:anywhere}}
/* ---------- editors on tablets and phones: preview first, panels beneath ---------- */
@media (max-width:1100px){
 .webws{display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-areas:"stage stage" "left right";height:auto!important;min-height:0}
 .webstage{grid-area:stage;height:62vh;min-height:360px;border-bottom:1px solid var(--line)}
 .webside{grid-area:left;max-height:none;border-right:1px solid var(--line);border-left:0}.webside.right{grid-area:right;border-right:0}
 .webws:not(:has(#webLeft)):not(:has(#vLeft)) .webside.right{grid-column:1/-1}
 .webbar{flex-wrap:wrap;row-gap:6px}}
@media (max-width:700px){
 .webws{grid-template-columns:1fr!important;grid-template-areas:"stage" "right" "left"}
 .webstage{height:56vh}.webside{border-right:0;border-top:1px solid var(--line)}
 .webbar .d{display:none}}

.prevgrid figcaption,.review figcaption{color:var(--ink)}

/* ---------- pro editor: colour panel, effects, photo editing ---------- */
.cpanel{position:fixed;z-index:85;width:268px;max-height:min(560px,calc(100vh - 16px));overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.28);padding:12px;font-size:13px}
.cpanel h5{margin:12px 0 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.cprow{display:flex;gap:6px;align-items:center}
.cprow input[type=color]{width:36px;height:32px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer}
.cprow #cpHex{flex:1;min-width:0;font:13px/1 ui-monospace,Consolas,monospace;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.cpgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.cpsw{aspect-ratio:1;width:100%;min-width:22px;border-radius:7px;border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);padding:0;cursor:pointer;transition:transform .08s}
.prosec .cpsw{width:28px;height:28px}
.cpsw:hover{transform:scale(1.1)}.cpsw.on{outline:2px solid var(--focus);outline-offset:2px}
.cpang{margin-top:8px}
.swmore{width:26px;height:26px;border-radius:6px;border:1px dashed var(--muted);background:none;color:var(--ink);font-size:16px;line-height:1;padding:0;cursor:pointer}
.prosec{border-top:1px solid var(--line);margin-top:12px;padding-top:2px;transition:background .4s}
.prosec.flash{background:var(--accent-soft)}
.prosec h5{margin:12px 0 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.fxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.fxtile{display:flex;flex-direction:column;gap:3px;align-items:stretch;padding:4px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:11px;cursor:pointer}
.fxtile svg{width:100%;height:auto;border-radius:6px;display:block;background:var(--surface2)}
.fxtile:hover{border-color:var(--muted)}.fxtile.on{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.prosl{display:block}.prosl span{display:flex;justify-content:space-between}.prosl output{color:var(--muted);font-variant-numeric:tabular-nums}.prosl input{width:100%}
.bgrm{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:start}
.bgprev{border-radius:12px;border:1px solid var(--line);min-height:260px;display:grid;place-items:center;overflow:hidden}
.bgprev img,.bgprev canvas{display:block}
@media (max-width:760px){.bgrm{grid-template-columns:1fr}}
.bgstage{position:relative;display:inline-block;max-width:100%}
.bgstage canvas{cursor:crosshair}
#bgDots i{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none}
#bgDots i.keep{background:#2f9e6b}#bgDots i.drop{background:#d64545}
/* ---------- quick actions ---------- */
.qagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin:8px 0 22px}
.qagrid.compact{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.qatile{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.qagrid.compact .qatile{padding:11px 12px;align-items:center;border-radius:11px}
.qatile:hover{border-color:var(--muted);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.qatile b{display:block;font-size:15px;margin-bottom:3px}.qagrid.compact .qatile b{font-size:14px;margin:0}
.qaic{flex:none;width:38px;height:38px;padding:8px;border-radius:10px;background:var(--accent-soft);fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qagrid.compact .qaic{width:32px;height:32px;padding:7px}
.qaws{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:24px;align-items:start;margin-top:8px}
.qactl{display:flex;flex-direction:column;gap:10px}
.qadrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:190px;padding:18px;border:2px dashed var(--line);border-radius:14px;cursor:pointer;text-align:center;background:var(--surface);transition:border-color .15s,background .15s}
.qadrop:hover,.qadrop.over{border-color:var(--focus);background:var(--accent-soft)}
.qadrop .qaic{width:44px;height:44px;background:none}
.qadrop.has{padding:8px;min-height:0}.qadrop img{max-width:100%;max-height:260px;border-radius:8px;display:block}
.qaprev{border:1px solid var(--line);border-radius:14px;min-height:340px;display:grid;place-items:center;padding:14px;background:var(--surface2);overflow:hidden}
.qaprev img{max-width:100%;max-height:62vh;display:block;border-radius:6px;box-shadow:0 6px 22px rgba(0,0,0,.12)}
.qaprev.empty{border-style:dashed}
@media (max-width:820px){.qaws{grid-template-columns:1fr}}
/* icon library */
.icq{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);margin:2px 0 8px}
.icgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;max-height:260px;overflow:auto;padding:2px}
.icbtn{aspect-ratio:1;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;background:var(--surface2);color:var(--ink);cursor:pointer;padding:0}
.icbtn:hover{border-color:var(--muted);background:var(--surface)}
.icold{margin:6px 0}.icold summary{cursor:pointer;color:var(--muted);font-size:12px}
.icprev{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:9px}
/* smart resize */
.rsgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.rsgroups h4{margin:4px 0 6px}
.rslist{display:flex;flex-direction:column;gap:4px}
.rsopt{display:flex;gap:10px;align-items:center;padding:7px 9px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.rsopt:hover{border-color:var(--muted)}.rsopt:has(input:checked){border-color:var(--focus);background:var(--accent-soft)}.rsopt.cur{opacity:.55;cursor:default}
.rsopt b{display:block;font-size:13px;font-weight:600}.rsopt .d{font-size:12px}
.rsshape{flex:none;width:32px;height:32px;display:grid;place-items:center}.rsshape i{display:block;border:1.5px solid var(--muted);border-radius:3px}
.rsres{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.rsres figure{margin:0}.rsres .thumb{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface2);display:grid;place-items:center;aspect-ratio:1}
.rsres .thumb svg{max-width:100%;max-height:100%;width:auto;height:auto}
.rsres figcaption{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}.rsres figcaption b{flex:1 1 100%;font-size:13px}
/* live co-editing */
.livepeople{display:inline-flex;align-items:center;gap:0;margin-right:8px}
.livepeople .lp{width:28px;height:28px;border-radius:50%;border:2px solid var(--surface);background:var(--c);color:#fff;font:600 11px/1 Inter,system-ui,sans-serif;margin-left:-6px;cursor:pointer;padding:0;box-shadow:0 0 0 1px var(--c)}
.livepeople .lp:first-child{margin-left:0}.lpmore{font-size:12px;color:var(--muted);margin-left:4px}
.lplive{margin-left:8px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ok);display:inline-flex;align-items:center;gap:5px}
.lplive::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ok);animation:lpPulse 1.6s ease-in-out infinite}
@keyframes lpPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.lplive::before{animation:none}}
.lsel{position:absolute;outline:2px solid var(--c);outline-offset:1px;pointer-events:none;border-radius:2px}
.lsel span{position:absolute;left:-2px;top:-20px;background:var(--c);color:#fff;font:600 11px/1 Inter,system-ui,sans-serif;padding:4px 6px;border-radius:4px 4px 4px 0;white-space:nowrap}

/* edit entry */
#qbar .qedit{display:inline-flex;align-items:center;gap:5px;font-weight:600}
/* photo tools */
.ptsec{margin:14px 0 8px;font-size:15px}
.ptgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px 8px}
.pttile{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:0;color:var(--ink);font-size:13px;text-align:center;cursor:pointer;padding:4px;border-radius:12px}
.pttile:hover .ptic{transform:scale(1.06);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.ptic{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c) 55%,#fff),var(--c));transition:transform .15s,box-shadow .15s}
.ptic svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pttile.off{opacity:.5}.pttile.off span:last-child::after{content:' · not set up';display:block;font-size:11px;color:var(--muted)}
.ptws{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);gap:18px;align-items:start}
.ptstage{position:relative;display:grid;place-items:center;min-height:300px;border:1px solid var(--line);border-radius:12px;background:repeating-conic-gradient(#e9e9e9 0 25%,#fff 0 50%) 50%/16px 16px;padding:4px;overflow:hidden}
.ptstage canvas{display:block;grid-area:1/1}.ptmask{cursor:crosshair;touch-action:none}
.ptbusy{position:absolute;inset:0;display:flex;gap:10px;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;font-weight:600}
.ptbusy[hidden]{display:none}
.ptbd{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.ptsw{aspect-ratio:1;border-radius:8px;border:1px solid var(--line);cursor:pointer;font-size:11px;color:#fff}
@media (max-width:760px){.ptws{grid-template-columns:1fr}}
/* image toolbar (js/image-toolbar.js) */
#qbar button{display:inline-flex;align-items:center;justify-content:center;gap:5px}
#qbar .itbsw{display:inline-flex;gap:3px;margin:0 3px}
#qbar .itbsw button{width:20px;height:20px;min-width:20px;padding:0;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
#qbar .itbsw button:hover{transform:scale(1.12);background-clip:padding-box}
#qbar .itbcl{font-weight:600;font-size:12.5px;padding:0 6px}
#qbar .itbz{display:inline-flex;align-items:center;gap:4px;font-size:13px;padding:0 4px}
#qbar .itbz input{width:110px}
.itbpop{width:248px}
.itbpop .itbgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.itbpop .itbgrid .btn{justify-content:center}
.itbpop .itbnum{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.itbpop .itbnum input{width:100%}
.itbpop .itbanim{grid-template-columns:repeat(3,1fr)}
.itbpop .itbanim .fxtile span{padding:8px 2px}
.itbprev{border-radius:8px;overflow:hidden;background:var(--surface2);margin-bottom:8px}
.itbstage{position:relative;width:100%}
.itbstage svg{position:absolute;inset:0;width:100%;height:100%}
.itbstage .itbbase{opacity:.4}
.itbstage .itbone{position:absolute;inset:0}
.itbone.sp-slow{--d:1.3s}.itbone.sp-normal{--d:.8s}.itbone.sp-fast{--d:.45s}
.itbone.an-fade{animation:itbFade var(--d) ease-out .3s both}
.itbone.an-rise{animation:itbRise var(--d) cubic-bezier(.2,.8,.2,1) .3s both}
.itbone.an-pop{animation:itbPop var(--d) cubic-bezier(.3,1.5,.5,1) .3s both}
.itbone.an-slide{animation:itbSlide var(--d) cubic-bezier(.2,.8,.2,1) .3s both}
.itbone.an-wipe{animation:itbWipe var(--d) ease-in-out .3s both}
.itbone.an-breathe{animation:itbFade var(--d) ease-out .3s both,itbBreathe 2.4s ease-in-out calc(.3s + var(--d)) infinite}
@keyframes itbFade{from{opacity:0}}
@keyframes itbRise{from{opacity:0;transform:translateY(6%)}}
@keyframes itbPop{from{opacity:0;transform:scale(.8)}}
@keyframes itbSlide{from{opacity:0;transform:translateX(-10%)}}
@keyframes itbWipe{from{clip-path:inset(0 calc(100% - var(--bx)) 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes itbBreathe{50%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.itbone{animation:none!important}}
#cropGhost{position:absolute;z-index:6;cursor:move;touch-action:none}
#cropGhost img{width:100%;height:100%;opacity:.38;display:block;pointer-events:none}
#cropGhost i{position:absolute;inset:0}
#qbar{flex-wrap:wrap;white-space:normal;row-gap:2px;width:max-content}
/* photos panel (js/photos-pro.js) */
.phpanel .phq{width:100%;margin-bottom:8px}
.phpanel .chips{margin-bottom:8px;flex-wrap:wrap}
.phpanel .phf{gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.phfam{display:inline-flex;flex-wrap:wrap;gap:4px}
.phsw{width:18px;height:18px;min-width:18px;padding:0;border-radius:50%;border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.phsw[aria-pressed="true"]{outline:2px solid var(--accent,#b07d3a);outline-offset:2px}
.phgrid{columns:2;column-gap:6px}
.phgrid.wide{columns:5 160px}
.phtile{position:relative;display:block;width:100%;margin:0 0 6px;padding:0;border:0;border-radius:6px;overflow:hidden;break-inside:avoid;cursor:grab}
.phtile img{width:100%;height:100%;object-fit:cover;display:block}
.phtile:hover img{filter:brightness(.92)}
.phtile:focus-visible{outline:2px solid var(--accent,#b07d3a);outline-offset:2px}
.phb{position:absolute;left:5px;top:5px;font-size:10px;font-weight:600;letter-spacing:.03em;padding:1px 6px;border-radius:9px;background:rgba(255,255,255,.88);color:#222}
.phb.inl{position:static;display:inline-block;border:1px solid var(--line)}
.phb-ai{background:rgba(32,60,50,.88);color:#fff}
.phcr{position:absolute;left:0;right:0;bottom:0;padding:10px 6px 3px;font-size:10px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));text-align:left;opacity:0;transition:opacity .15s}
.phtile:hover .phcr,.phtile:focus-visible .phcr{opacity:1}
.phcount{margin:0 0 6px}
.phnote{margin-top:10px;font-size:11.5px}
@media (hover:none){.phcr{opacity:1}}
/* text toolbar (js/text-toolbar.js) */
#qbar .txa{display:inline-block;font:700 14px/1 Georgia,serif;padding-bottom:2px;border-bottom:3px solid var(--c);box-shadow:0 1px 0 0 rgba(128,128,128,.55);min-width:12px;text-align:center}
#qbar .txpaste{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:0 6px;color:var(--accent,#b07d3a)}
#qbar .txpaste button{font-weight:600}
body.txpasting #pageEl,body.txpasting #pageEl *{cursor:copy!important}
.itbpop .seg{display:flex;gap:4px}.itbpop .seg button{flex:1}
/* shape / line / icon toolbar (js/element-toolbar.js) */
#qbar .elsw{display:inline-block;width:18px;height:18px;border-radius:5px;background:var(--c);border:1px solid rgba(128,128,128,.55)}
#qbar .elsw.ring{background:transparent;border:4px solid var(--c);box-shadow:0 0 0 1px rgba(128,128,128,.55)}
#qbar .elsw.none{background:linear-gradient(135deg,transparent 45%,#d33 45%,#d33 55%,transparent 55%);border:1px solid rgba(128,128,128,.55);box-shadow:none}
.elshapes{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.elshapes button{padding:6px;border-radius:7px;border:1px solid var(--line);background:none;color:var(--ink,currentColor)}
.elshapes button[aria-pressed="true"]{border-color:var(--accent,#b07d3a);background:var(--surface2)}
.elshapes svg{width:100%;height:auto;display:block}
/* page toolbar + Present (js/page-toolbar.js) */
#qbar .pglbl{font-size:12px;font-weight:600;padding:0 6px;color:var(--muted)}
.pthumb.pghidden{opacity:.45}
.pthumb.pghidden::after{content:"Hidden";position:absolute;left:6px;top:6px;font-size:10px;font-weight:600;padding:1px 6px;border-radius:9px;background:rgba(0,0,0,.6);color:#fff}
.pthumb{position:relative}
#presenter{position:fixed;inset:0;z-index:300;background:#0d0f0e;display:flex;flex-direction:column;color:#eee}
#presenter .prstage{flex:1;position:relative;display:grid;place-items:center;overflow:hidden;cursor:pointer}
#presenter .prpage{grid-area:1/1;position:relative;width:min(100vw,calc((100vh - 52px) * var(--ar,1.7778)));max-width:100vw;max-height:calc(100vh - 52px);box-shadow:0 20px 60px rgba(0,0,0,.5)}
#presenter .prpage>svg{display:block;width:100%;height:100%}
#presenter .prpage .itbone{position:absolute;inset:0}#presenter .prpage .itbone svg{width:100%;height:100%;display:block}
#presenter .prbar{display:flex;gap:6px;align-items:center;justify-content:center;padding:8px;background:#151816}
#presenter .prbar button{background:#232825;color:#eee;border:0;border-radius:8px;padding:6px 12px;font-size:14px}
#presenter .prbar button:hover{background:#2f3632}
#presenter .prnum{min-width:64px;text-align:center;font-size:13px;opacity:.8}
#presenter .prnotes{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);width:min(820px,92vw);max-height:30vh;overflow:auto;background:rgba(20,22,21,.94);border:1px solid #333;border-radius:10px;padding:12px 16px;font-size:16px;line-height:1.5;white-space:pre-wrap}
.prpage.tr-fade{animation:prFade var(--td) ease both}.prpage.tr-slide{animation:prSlide var(--td) cubic-bezier(.2,.8,.2,1) both}.prpage.tr-slide.back{animation-name:prSlideB}
.prpage.tr-rise{animation:prRise var(--td) cubic-bezier(.2,.8,.2,1) both}.prpage.tr-zoom{animation:prZoom var(--td) ease both}.prpage.tr-wipe{animation:prWipe var(--td) ease-in-out both}
@keyframes prFade{from{opacity:0}}@keyframes prSlide{from{transform:translateX(100%)}}@keyframes prSlideB{from{transform:translateX(-100%)}}
@keyframes prRise{from{opacity:0;transform:translateY(8%)}}@keyframes prZoom{from{opacity:0;transform:scale(.88)}}@keyframes prWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.prpage[class*="tr-"],#presenter .itbone{animation:none!important}}
/* table / chart editor (js/data-toolbar.js) */
.dtwrap{overflow:auto;max-height:55vh;border:1px solid var(--line);border-radius:8px}
.dtgrid{border-collapse:collapse;min-width:100%;font-size:13px}
.dtgrid th{position:sticky;top:0;background:var(--surface2);font-weight:600;font-size:11.5px;color:var(--muted);padding:4px 6px;text-align:left;white-space:nowrap;z-index:1}
.dtgrid tbody th{position:sticky;left:0;top:auto;text-align:right;min-width:34px}
.dtgrid td{border:1px solid var(--line);padding:0}
.dtgrid td input{width:100%;min-width:110px;border:0;border-radius:0;padding:6px 8px;background:transparent;font:inherit;color:inherit}
.dtgrid td input:focus{outline:2px solid var(--accent,#b07d3a);outline-offset:-2px;background:var(--surface)}
.dtgrid tr.hd td input{font-weight:600}
.dtgrid .dtx{border:0;background:none;color:var(--muted);padding:0 3px;font-size:13px;cursor:pointer}.dtgrid .dtx:hover{color:#c0392b}
.dterr{color:#c0392b}
/* quick actions hub (js/quick-more.js) */
.qaq{width:100%;max-width:520px;margin:4px 0 14px}
.qagroup{margin:0 0 22px}.qagroup h3{margin:0 0 10px;font-size:15px}.qagroup h3 .d{font-weight:400;font-size:12.5px;margin-left:6px}
.qmmk{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:260px;overflow:auto;margin:6px 0 10px}
.qmmk button{padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:none;aspect-ratio:1}
.qmmk button[aria-pressed="true"]{border-color:var(--accent,#b07d3a)}
.qmmk img{width:100%;height:100%;object-fit:cover;display:block}
.qathumbs{display:flex;flex-wrap:wrap;gap:4px;padding:6px}.qathumbs img{width:56px;height:56px;object-fit:cover;border-radius:6px}
/* review fixes (js/review-fixes.js) */
.rfbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;margin:8px 0 12px;font-size:13px}
.rfbar.ok{background:rgba(46,125,50,.12);border:1px solid rgba(46,125,50,.35)}.rfbar.no{background:rgba(180,138,78,.12);border:1px solid rgba(180,138,78,.4)}
.review .qa summary .rfcheck{margin-left:auto;padding:2px 8px;font-size:11.5px}
.review .qa li{display:flex;gap:6px;align-items:center}.review .qa li>span{flex:1}
/* phone and tablet: finger-sized controls (js/touch.js) */
@media (pointer:coarse){
 .selbox i{width:22px;height:22px;border-radius:6px}
 .selbox i[data-h="nw"]{left:-12px;top:-12px}.selbox i[data-h="ne"]{right:-12px;top:-12px}.selbox i[data-h="sw"]{left:-12px;bottom:-12px}.selbox i[data-h="se"]{right:-12px;bottom:-12px}
 .selbox i[data-h="n"],.selbox i[data-h="s"]{width:28px;height:14px;left:calc(50% - 14px)}.selbox i[data-h="n"]{top:-9px}.selbox i[data-h="s"]{bottom:-9px}
 .selbox i[data-h="w"],.selbox i[data-h="e"]{width:14px;height:28px;top:calc(50% - 14px)}.selbox i[data-h="w"]{left:-9px}.selbox i[data-h="e"]{right:-9px}
 .selbox i[data-h="rot"]{width:26px;height:26px;left:calc(50% - 13px);top:-46px}.selbox i[data-h="rot"]::after{left:11px;top:26px;height:20px}
 .qbar button,.qbar select{min-height:38px;min-width:38px}
 .menu button{min-height:42px}
 #pageEl{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}
/* plans & pricing (js/pricing.js) */
.prpage h3{margin-top:28px}
.prgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.prplan{display:flex;flex-direction:column;gap:6px}.prplan.cur{outline:2px solid var(--accent,#b07d3a)}
.prprice b{font-size:30px;letter-spacing:-.01em}.prsub{min-height:2.6em;margin:0}
.prlist{margin:6px 0 12px;padding-left:18px;font-size:13px;line-height:1.55}
.prmine{margin:10px 0}.prmeter{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin-top:10px;font-size:13px}.prmeter i{grid-column:1/-1;height:6px;border-radius:4px;background:var(--surface2);overflow:hidden}.prmeter em{display:block;height:100%;background:var(--accent,#b07d3a)}.prmeter em.hot{background:#c0392b}
.prcomm{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.prtablewrap{overflow:auto}.prtable{border-collapse:collapse;width:100%;font-size:13px}.prtable th,.prtable td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:center}.prtable th[scope="row"],.prtable thead th:first-child{text-align:left;font-weight:500}.prtable .ok{color:var(--ok);font-weight:700}
.prfaq details{border-bottom:1px solid var(--line);padding:10px 0}.prfaq summary{cursor:pointer;font-weight:600}
/* AI images (js/ai-image.js) */
.aiimggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:14px}
.aiimg{margin:0;display:flex;flex-direction:column;gap:8px}.aiimg img{width:100%;border-radius:10px;object-fit:cover;display:block;background:var(--surface2)}
.aiimg figcaption{font-size:12.5px}
/* Create with AI, full experience (js/ai-studio.js) */
.aisx{margin:10px 0 4px}.aisex{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.aisex .chip{white-space:normal;text-align:left;max-width:100%}
.aisq{background:var(--surface2);border-radius:10px;padding:8px 12px;margin:6px 0}.aisq ul{margin:4px 0 0;padding-left:18px}
.aiscfg,.aishist{margin:8px 0}.aiscfg summary,.aishist summary{cursor:pointer;font-weight:600}.aisgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-top:8px}
.aishist ul{list-style:none;padding:0;margin:6px 0}.aishist li{display:flex;gap:6px;align-items:center;margin:4px 0;font-size:13px}
.aisfollow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.aisbusy{display:flex;gap:8px;align-items:center;margin:10px 0}.aiscred{font-size:12px}
/* Create with AI → Anything (js/ai-anything.js) */
.anrow{gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.androp{display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--line);border-radius:10px;padding:6px 10px;cursor:pointer;min-height:44px}
.androp img{width:44px;height:44px;object-fit:cover;border-radius:6px}.androp.has{border-style:solid}
.anlist{margin:10px 0;padding-left:20px}.anlist ul{margin:4px 0 8px;padding-left:16px;font-size:13px}
.anbuilt{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.anbuilt .thumb svg{width:100%;height:auto;display:block}
/* ---------- AI in the editor (js/ai-editor.js) ---------- */
#qbar .mwbtn{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--accent,#b48a4e)}
#qbar .mwbtn .ic{width:16px;height:16px}
.mwpop{width:330px;max-height:min(560px,80vh);overflow:auto}
.mwacts{display:flex;flex-wrap:wrap;gap:5px}
.mwpop select{flex:1;min-width:0}
.mwout{display:grid;gap:6px;margin-top:10px}
.mwopt{text-align:left;border:1px solid var(--line);background:var(--surface);color:inherit;border-radius:10px;padding:9px 11px;font-size:13px;line-height:1.4;cursor:pointer;display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
button.mwopt:hover{border-color:var(--accent,#b48a4e)}
.terms .termsec{max-width:none;margin:0 0 14px}.terms .termsec h3{margin:0 0 4px;font-size:16px}.terms .termsec p{margin:0;line-height:1.55}
/* ---------- Talk to edit (js/talk-edit.js) ---------- */
.ttebar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 10px 2px;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.ttebar .ttei{color:var(--accent,#b48a4e);display:inline-flex}.ttebar .ttei .ic{width:18px;height:18px}
.ttebar input{flex:1;min-width:160px;border:0;background:transparent;color:inherit;font-size:14px;padding:6px 4px;outline:none}
.ttebar .iconbtn.on{color:#c0392b;animation:ttepulse 1s infinite}@keyframes ttepulse{50%{opacity:.4}}
.ttebar .tteout{flex-basis:100%;font-size:13px;padding:4px 2px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ttebar .tteex{flex-basis:100%;display:flex;gap:5px;flex-wrap:wrap;padding-top:2px}.ttebar .tteex.hide{display:none}
@media (pointer:coarse){.ttebar .tteex{display:none}}
/* ---------- Translate the whole design (js/translate-design.js) ---------- */
.trdlangs{display:flex;flex-wrap:wrap;gap:6px}.trdlangs .chip[aria-pressed="true"]{background:var(--accent,#b48a4e);color:var(--accent-ink,#fff);border-color:transparent}
.trddone{margin-top:14px;display:grid;gap:8px}.trddone h4{margin:0}
/* ---------- Design director (js/design-director.js) ---------- */
.ddhead{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.ddscore{width:74px;height:74px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--c) calc(var(--s)*1%),var(--line) 0);position:relative;--c:#3bb273}
.ddscore::before{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
.ddscore b,.ddscore span{position:relative;line-height:1}.ddscore b{font-size:22px}.ddscore span{font-size:11px;opacity:.7}
.ddscore.good{--c:#6aa84f}.ddscore.warn{--c:#e0a030}.ddscore.bad{--c:#c0392b}
.ddthumb{width:92px;max-height:120px;object-fit:contain;border:1px solid var(--line);border-radius:6px;background:#fff}
.ddlist{margin:4px 0 0 18px;padding:0}.ddlist li{margin:2px 0}
.ddissues{display:grid;gap:8px;margin-top:8px}
.ddissue{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.ddissue.done{opacity:.55}.ddissue .pill{text-transform:capitalize;font-size:11px;padding:2px 8px;border-radius:99px;border:1px solid var(--line)}
.ddissue .pill.high{background:#c0392b;color:#fff;border-color:transparent}.ddissue .pill.medium{background:#e0a030;color:#222;border-color:transparent}
.ddcta{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px}
@media (max-width:560px){.ddhead{grid-template-columns:auto 1fr}.ddthumb{display:none}}
/* ---------- Narrated video (js/narrate.js) ---------- */
.nrvoices{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.nrv{display:grid;text-align:left;gap:2px;border:1px solid var(--line);background:var(--surface);color:inherit;border-radius:10px;padding:7px 10px;cursor:pointer}
.nrv[aria-pressed="true"]{border-color:var(--accent,#b48a4e);box-shadow:0 0 0 1px var(--accent,#b48a4e)}
.nrscripts{display:grid;gap:6px;max-height:42vh;overflow:auto;padding-right:4px}
.nrscripts textarea{width:100%;resize:vertical}
.nrnote{margin:10px 0}
/* ---------- Product photo studio (js/product-studio.js) ---------- */
.psbgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.psrow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:10px}.psrow .f{min-width:150px;flex:1}
.psgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:10px}
.psgrid figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.psgrid img{width:100%;display:block;aspect-ratio:1/1;object-fit:contain;background:#fff}
.psgrid figcaption{display:flex;justify-content:space-between;align-items:center;gap:4px;padding:4px 6px;font-size:12px}
.psgrid figure.err figcaption{padding:10px;color:#c0392b}
.psgrid figure.warn{border-color:#e0a030}.pswarn{margin:0;padding:4px 6px;font-size:12px;background:#fff4dd;color:#6b4a00;display:flex;gap:6px;align-items:center;justify-content:space-between}
.psfix{border:1px dashed var(--accent,#b48a4e);border-radius:10px;padding:8px;margin-top:10px;display:grid;gap:6px}.psfix img{max-width:100%;max-height:50vh;object-fit:contain;cursor:crosshair;justify-self:center}
/* ---------- Brand brain (js/brand-brain.js) ---------- */
.bbbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 14px;background:var(--surface)}
.bbdrops{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin:8px 0}@media (max-width:560px){.bbdrops{grid-template-columns:1fr}}
.bblogo{width:64px;height:64px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff}
.bbsws{display:flex;flex-wrap:wrap;gap:8px}.bbsw{display:grid;justify-items:center;gap:2px;font-size:11px}.bbsw input{width:46px;height:46px;border:1px solid var(--line);border-radius:10px;padding:0;background:none}
.bbunk{border-left:3px solid #e0a030;padding:6px 10px;background:var(--surface);font-size:13px}
/* ---------- Campaign in one click (js/campaign.js) ---------- */
.cpfmts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.cpfmt{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer}.cpfmt span{display:grid}.cpfmt.cur{opacity:.55}
.cpposts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.cppost{border:1px solid var(--line);border-radius:10px;padding:8px 10px}.cptext{white-space:pre-wrap;font-size:13px;line-height:1.45;margin-top:4px}
/* ---------- Sell it (js/sell-it.js) ---------- */
.sllist{display:grid;gap:10px;margin-top:10px}.slcard{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:6px}
.slfield>span{display:flex;gap:8px;align-items:center}.slcount{font-size:11px;opacity:.75;font-variant-numeric:tabular-nums}.slcount.over{color:#c0392b;opacity:1;font-weight:700}
/* ---------- Review links (js/review-links.js) ---------- */
body.rlguest header.top,body.rlguest #side,body.rlguest #stagebar,body.rlguest .scrim{display:none!important}
body.rlguest #app{display:block!important;height:auto!important}
body.rlguest #main{margin:0 auto!important;padding:12px 16px 0!important;height:100vh!important;height:100dvh!important;overflow:auto!important;max-width:820px}
.rlpage{max-width:none}.rlnote{border-left:3px solid var(--accent,#b48a4e);padding:6px 12px;font-style:italic}
.rlname{max-width:360px}
.rlsheet{margin:14px 0}.rlpagewrap{position:relative;width:100%;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,.25);cursor:crosshair}
.rlpagewrap svg{width:100%!important;height:100%!important;display:block}
.rlpin{position:absolute;transform:translate(-50%,-100%);min-width:26px;height:26px;border-radius:13px 13px 13px 2px;background:#c0392b;color:#fff;font:700 12px/26px system-ui;text-align:center;padding:0 6px;box-shadow:0 2px 6px rgba(0,0,0,.35);cursor:default}
.rlpin.done{background:#6aa84f}.rlpin.new{background:var(--accent,#b48a4e)}
.rlform{display:grid;gap:6px;margin:8px 0}.rlform textarea{width:100%}
.rlcomments{margin:8px 0 0 20px;padding:0;display:grid;gap:6px;font-size:14px}.rlcomments li.done{opacity:.6}
.rldecide{position:sticky;bottom:0;display:flex;gap:8px;flex-wrap:wrap;padding:12px 0;background:var(--bg,#14231d);border-top:1px solid var(--line);margin-top:16px}
.rllinks{display:grid;gap:8px}.rllink{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:grid;gap:4px}.rllink code{font-size:12px;word-break:break-all}
/* ---------- Content calendar (js/content-calendar.js) ---------- */
.ccform{max-width:none}.cctable{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}.cctable th,.cctable td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.ccgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:12px 0}
.cchead{font-size:12px;opacity:.7;text-align:center;padding:4px 0}
.ccday{min-height:92px;border:1px solid var(--line);border-radius:8px;padding:4px;display:flex;flex-direction:column;gap:4px;background:var(--surface)}.ccday.off{border:0;background:none}
.ccnum{font-size:11px;opacity:.7}
.ccpost{display:grid;gap:2px;border:0;background:none;padding:0;cursor:pointer;color:inherit;text-align:left}
.ccthumb{display:block;border-radius:4px;overflow:hidden;background:#fff;border:2px solid transparent}.ccthumb svg{width:100%!important;height:auto!important;display:block}
.ccpost.posted .ccthumb{border-color:#6aa84f;opacity:.7}.ccpost.planned .ccthumb{border-color:#e0a030}
.ccplat{font-size:10px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccpostview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px}.ccbig svg{width:100%!important;height:auto!important;border-radius:6px}
@media (max-width:700px){.ccgrid{grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}.ccday{min-height:60px;padding:2px}.ccplat{display:none}.ccpostview{grid-template-columns:1fr}}
/* ---------- Send to a printer (js/print-handoff.js) ---------- */
.phlist{list-style:none;margin:6px 0;padding:0;display:grid;gap:6px;font-size:13.5px}.phlist li{border:1px solid var(--line);border-radius:8px;padding:6px 8px}.phlist li.err{border-color:#c0392b}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
/* ---------- Book cover studio (js/cover-studio.js) ---------- */
.cvsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:12px}
.cvsgrid figure{margin:0;display:grid;gap:6px}.cvsgrid figcaption{display:grid;gap:4px;font-size:13px}
.cvsthumb{border-radius:3px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.35)}.cvsthumb svg{width:100%!important;height:auto!important;display:block}
.cvs3d{perspective:1200px;display:flex;justify-content:center;padding:24px 0}
.cvsbook{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:rotateY(-28deg) rotateX(4deg);transition:transform .15s}
.cvsbook>div{position:absolute;top:0;background-size:100% 100%}
.cvsbook .f{left:0;width:var(--w);height:var(--h);transform:translateZ(calc(var(--s)/2));box-shadow:0 18px 40px rgba(0,0,0,.45);border-radius:0 3px 3px 0}
.cvsbook .sp{left:calc(var(--s)/-2);width:var(--s);height:var(--h);transform:rotateY(-90deg)}
.cvsbook .pg{left:calc(var(--w) - var(--s)/2);width:var(--s);height:calc(var(--h) - 6px);top:3px;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#f4efe4 0 1px,#e2dccd 1px 2px)}
/* ---------- Live co-editing upgrades (js/live-plus.js) ---------- */
.lcur{position:absolute;pointer-events:none;z-index:30;transition:left .9s linear,top .9s linear;transform:translate(-2px,-2px)}
.lcur svg{width:16px;height:16px;fill:var(--c);stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.lcur span{position:absolute;left:14px;top:12px;background:var(--c);color:#fff;font:600 11px/1 system-ui;padding:3px 6px;border-radius:6px;white-space:nowrap}
.lcur.followed svg{stroke:var(--c);stroke-width:2.6}
.lpfollow{position:sticky;top:0;z-index:5;margin:6px 10px;padding:6px 10px;border-radius:10px;border:2px solid var(--c);background:var(--surface);display:flex;gap:8px;align-items:center;font-size:13px}
.lpchatbtn{position:relative;border:1px solid var(--line);background:var(--surface);color:inherit;border-radius:99px;padding:2px 10px;font-size:12px;cursor:pointer}
.lpchatbtn i{position:absolute;top:-6px;right:-6px;background:#c0392b;color:#fff;font-style:normal;font-size:10px;border-radius:99px;min-width:16px;height:16px;line-height:16px;text-align:center}
.lpchat{position:fixed;right:16px;bottom:16px;width:min(340px,calc(100vw - 32px));max-height:min(480px,70vh);display:flex;flex-direction:column;gap:8px;background:var(--bg,#14231d);border:1px solid var(--line);border-radius:14px;padding:10px;z-index:900;box-shadow:0 12px 40px rgba(0,0,0,.45)}
.lpchat header{display:flex;align-items:center;gap:8px}.lpchat header .d{flex:1;font-size:12px}
.lpmsgs{overflow:auto;display:grid;gap:8px;font-size:13.5px;padding-right:4px}.lpmsg div{white-space:pre-wrap}.lpmsg.me{text-align:right}
/* ---------- Studio in other languages (js/i18n.js) ---------- */
.i18nbtn{display:inline-flex;align-items:center;gap:3px;width:auto!important;padding:0 6px}.i18nbtn span{font:600 11px/1 system-ui}
[dir="rtl"] .canvaswrap,[dir="rtl"] #pageEl,[dir="rtl"] .thumb,[dir="rtl"] .pthumb{direction:ltr}
.tw .twbar{width:180px;height:8px;border-radius:99px;background:var(--line);overflow:hidden;align-self:center}.tw .twbar span{display:block;height:100%;background:#6aa84f}
.twlist{display:grid;gap:6px}.twrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:start;border:1px solid var(--line);border-radius:10px;padding:8px}
.twrow.rev{border-color:#6aa84f}.twen{display:grid;gap:2px;font-size:13.5px}.twen .d{font-size:11px}.twrow textarea{width:100%;resize:vertical;font-size:13.5px}.twopts{display:grid;gap:2px;font-size:12px}
@media (max-width:760px){.twrow{grid-template-columns:1fr}}
/* ---------- Offline and install (js/offline.js) ---------- */
.offbar{position:sticky;top:0;z-index:950;background:#8a5a12;color:#fff;font-size:13px;padding:7px 14px;text-align:center}
.offbtn.can{color:var(--accent,#b48a4e)}
/* ---------- Privacy and your data (js/privacy.js) ---------- */
.privbox{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}
.btn.danger{background:#a5281b;color:#fff;border-color:transparent}.btn.ghost.danger{background:transparent;color:#e0796d;border-color:#a5281b}

/* ---------- help centre, tour, welcome ---------- */
.hlbtn{font-weight:700;font-size:16px}
.hlpage{max-width:none}
.hlcats{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:14px}
.hlcats h4{margin:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hllink{display:block;width:100%;text-align:left;background:none;border:0;padding:5px 0;color:var(--ink);cursor:pointer;font:inherit}
.hllink:hover{color:var(--accent);text-decoration:underline}
.hlart{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:10px;background:var(--surface)}
.hlart h3{margin:0 0 6px;font-size:16px}.hlart p{margin:0;line-height:1.55}
.hlans{border-left:3px solid var(--accent);padding:8px 12px;margin-top:10px;background:var(--surface)}
.hlpanel{position:fixed;top:56px;right:12px;bottom:12px;width:min(400px,calc(100vw - 24px));z-index:60;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.18);display:flex;flex-direction:column}
.hlpanel header{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}.hlpanel header b{flex:1}
#hlPanelBody{overflow:auto;padding:12px}#hlPanelBody .hlcats{grid-template-columns:1fr}
.tourhole{position:fixed;z-index:70;border-radius:10px;box-shadow:0 0 0 9999px rgba(10,20,16,.55);pointer-events:none;transition:all .2s}
.tourbox{position:fixed;z-index:71;width:min(320px,calc(100vw - 20px));background:var(--bg);color:var(--ink);border-radius:12px;padding:14px;box-shadow:0 14px 40px rgba(0,0,0,.3)}
.tourbox p{margin:6px 0 12px;line-height:1.5}
.welgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.welopt{padding:14px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font:inherit;text-align:left;font-weight:600}
.welopt:hover{border-color:var(--accent)}

/* ---------- whiteboard, mind map, flowchart ---------- */
.dgbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 10px;margin:6px 0;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.dgbar .sep{width:1px;height:20px;background:var(--line);margin:0 2px}
.dgbar .btn.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.dgnotes{display:inline-flex;align-items:center;gap:4px}
.dgdot{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0}
.dgdot.on{outline:2px solid var(--accent);outline-offset:1px}
.dghint{margin-left:auto;font-size:12px}
#ov.dgpen,#ov.dgpen .bx{cursor:crosshair}

/* ---------- animated GIF ---------- */
.gifout{margin-top:12px;padding:12px;border:1px dashed var(--line);border-radius:12px;text-align:center;min-height:80px}
.gifbar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}.gifbar i{display:block;height:100%;background:var(--accent);transition:width .2s}

/* ---------- rulers and guides ---------- */
.rulers{position:absolute;pointer-events:none;z-index:5}
.rulers canvas,.rulcorner{position:absolute;pointer-events:auto}
.rulh{left:0;top:0;cursor:s-resize}.rulv{left:0;top:0;cursor:e-resize}
.rulcorner{left:0;top:0;width:20px;height:20px;border:0;padding:0;font:600 8px system-ui,sans-serif;background:var(--surface);color:var(--muted);border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer}
.canvas.withrulers{padding-top:52px;padding-left:52px}
.guidelayer{position:absolute;inset:0;pointer-events:none;z-index:4}
.gd{position:absolute;pointer-events:auto}
.gdx{top:0;bottom:0;width:7px;margin-left:-3px;cursor:ew-resize;background:linear-gradient(90deg,transparent 3px,#00b4d8 3px,#00b4d8 4px,transparent 4px)}
.gdy{left:0;right:0;height:7px;margin-top:-3px;cursor:ns-resize;background:linear-gradient(180deg,transparent 3px,#00b4d8 3px,#00b4d8 4px,transparent 4px)}
.gd.live{pointer-events:none;background-image:linear-gradient(90deg,transparent 3px,#e03131 3px,#e03131 4px,transparent 4px)}.gdy.live{background-image:linear-gradient(180deg,transparent 3px,#e03131 3px,#e03131 4px,transparent 4px)}
.gd.live b{position:absolute;left:8px;top:8px;font:600 11px system-ui,sans-serif;background:#e03131;color:#fff;padding:1px 5px;border-radius:4px;white-space:nowrap}.gdy.live b{left:8px;top:8px}

/* ---------- touch drag ghost ---------- */
.ddghost{position:fixed;z-index:200;pointer-events:none;opacity:.85;transform:scale(.9);box-shadow:0 10px 30px rgba(0,0,0,.35);border-radius:10px;overflow:hidden;max-height:140px}
@media (max-width:900px){body.tddrag .toolpanel{display:none}}

/* ---------- analytics ---------- */
.anpage{max-width:none}
.anstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.anstats>div{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface)}.anstats b{display:block;font-size:26px}.anstats span{color:var(--muted);font-size:13px}
.anchart{width:100%;height:auto;margin:6px 0 10px}.anbar{fill:var(--accent);opacity:.35}.anbaru{fill:var(--accent)}.anax{font:10px system-ui,sans-serif;fill:var(--muted)}
.angrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.anbox{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface)}.anbox h4{margin:0 0 6px;font-size:13px}
.anrow{position:relative;display:flex;gap:8px;padding:4px 6px;font-size:13px}.anrow i{position:absolute;left:0;top:2px;bottom:2px;background:var(--accent);opacity:.12;border-radius:4px}
.ank{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.annum{font-variant-numeric:tabular-nums}
.anempty{padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
.anform{display:grid;grid-template-columns:2fr 1fr auto;gap:8px;align-items:end;margin-top:10px}@media(max-width:700px){.anform{grid-template-columns:1fr}}
.antable{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}.antable th,.antable td{padding:6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.antable tr.on{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.anurl{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.linkish{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font:inherit;text-decoration:underline}
.antip{margin-top:12px}

/* ---------- import from Drive / Dropbox ---------- */
.cigrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}@media(max-width:560px){.cigrid{grid-template-columns:1fr}}
.ciopt{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;font:inherit;color:inherit}
.ciopt:hover{border-color:var(--accent)}.ciopt b{font-size:16px}.ciopt span{color:var(--muted);font-size:13px}

/* ---------- builder start: facts + three directions ---------- */
#dialog.bswide{max-width:min(1040px,96vw)}
.bsform{max-width:560px}.bsrow{display:grid;grid-template-columns:1fr 1fr;gap:8px}@media(max-width:520px){.bsrow{grid-template-columns:1fr}}
.bsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}@media(max-width:760px){.bsgrid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.bsgrid{grid-template-columns:1fr}}
.bsdir{display:flex;flex-direction:column;gap:6px;align-items:center;padding:10px;border:2px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;font:inherit;color:inherit}
.bsdir:hover,.bsdir:focus-visible{border-color:var(--accent)}.bsprev{display:flex;align-items:center;justify-content:center;width:100%;height:300px}.bsprev svg{max-width:100%;max-height:300px;height:auto;width:auto;box-shadow:0 4px 18px rgba(0,0,0,.18)}

/* ---------- smart fields ---------- */
.sfchips{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 8px}
.sfchip{font:inherit;font-size:12px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap}
.sfchip:hover{border-color:var(--accent)}.sfchip:disabled{opacity:.6}
.sfresults{display:flex;flex-direction:column;gap:2px;margin:-4px 0 10px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.sfresults button{font:inherit;text-align:left;padding:6px 8px;border:0;border-radius:6px;background:none;color:var(--ink);cursor:pointer}.sfresults button:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.sfresults small{display:block;color:var(--muted);font-size:11px}

/* ---------- calmer filters ---------- */
.dc-hidden{display:none!important}
.dcbar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.dcbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer}
.dcbtn:hover{border-color:var(--accent)}.dcbtn .dcl{color:var(--muted)}.dcbtn.set{border-color:var(--accent)}.dcbtn.set .dcl::after{content:':'}.dcbtn b{font-weight:600}.dcbtn .dcv{font-size:10px;color:var(--muted)}
.dcmenu{position:fixed;z-index:90;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--bg);box-shadow:0 14px 40px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:1px}
.dcmenu button{display:flex;justify-content:space-between;gap:16px;font:inherit;font-size:13px;text-align:left;padding:7px 10px;border:0;border-radius:8px;background:none;color:var(--ink);cursor:pointer}
.dcmenu button:hover,.dcmenu button:focus{background:color-mix(in srgb,var(--accent) 12%,transparent);outline:none}.dcmenu button.on{font-weight:600;color:var(--accent)}.dcmenu small{color:var(--muted)}
.chips.chips-scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 28px),transparent);padding:2px 14px}
.chips.chips-scroll::-webkit-scrollbar{display:none}.chips.chips-scroll>*{flex:none}
/* ---------- editing essentials: layer thumbnails, background library ---------- */
.layers li{display:flex;align-items:center;gap:8px}
.layers .ecthumb{flex:0 0 34px;height:24px;border-radius:5px;background:repeating-conic-gradient(#ffffff0f 0 25%,transparent 0 50%) 0 0/8px 8px,var(--surface-2,#ffffff0a);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.layers .ecthumb svg{width:100%;height:100%;display:block}
.layers .ectxt{font:600 13px/1 Georgia,serif;color:var(--muted)}
.layers .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ectabs{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 8px}
.ectabs button{font:500 11px/1 var(--font,inherit);padding:5px 8px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.ectabs button[aria-selected="true"]{background:var(--accent-soft,#b48a4e22);color:var(--text);border-color:var(--accent,#b48a4e)}
/* ---------- settings: appearance applied to the whole Studio ---------- */
html.st-font body{font-family:var(--st-font)}
html.st-scaled .side,html.st-scaled header.top,html.st-scaled #stagebar,html.st-scaled main>.page-wrap,html.st-scaled .toolpanel,html.st-scaled .insp,html.st-scaled .canvasbar,html.st-scaled .menu,html.st-scaled .dialog{zoom:var(--st-scale,1)}
html.st-reduce *,html.st-reduce *::before,html.st-reduce *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html.st-contrast{--muted:var(--ink);--line:color-mix(in srgb,var(--ink) 45%,transparent)}
html.st-contrast :focus-visible{outline:3px solid var(--focus)!important;outline-offset:2px}
html.st-translucent .side{background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(14px) saturate(1.2)}
html.st-nopointer button,html.st-nopointer a,html.st-nopointer [data-act]{cursor:default}
html.st-wide .page-wrap{max-width:none}
html.st-nohints .menu .k{display:none}
html[data-backdrop="light"]{--canvas:#e9eae7}html[data-backdrop="mid"]{--canvas:#9a9d99}html[data-backdrop="dark"]{--canvas:#121413}
html[data-backdrop="check"] .canvas{background:repeating-conic-gradient(#0000000d 0 25%,transparent 0 50%) 0 0/20px 20px,var(--canvas)}
/* ---------- settings page ---------- */
.stlayout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.stnav{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px}
.stnav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:500}
.stnav a:hover{background:var(--surface2);color:var(--ink)}.stnav a[aria-current="page"]{background:var(--surface2);color:var(--ink)}
.stmain{max-width:760px}.stmain h2{font-size:26px;margin:4px 0 16px;letter-spacing:-.01em}.stmain h3{font-size:14px;margin:26px 0 8px;color:var(--muted);font-weight:600}
.stcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.strow{display:flex;align-items:center;gap:20px;padding:15px 18px;border-top:1px solid var(--line)}.stcard>.strow:first-child,.stcard>:first-child{border-top:0}
.stlab{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.stlab b{font-weight:600}.stlab span{color:var(--muted);font-size:13px}
.stctl{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.stseg{display:inline-flex;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.stseg button{border:0;background:transparent;padding:6px 12px;border-radius:7px;color:var(--muted);font-weight:500}
.stseg button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.sttog{width:42px;height:24px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);position:relative;padding:0}
.sttog i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:left .15s,background .15s}
.sttog[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}.sttog[aria-checked="true"] i{left:20px;background:var(--accent-ink,#fff)}
.stsel{min-width:190px;padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:var(--surface2);color:var(--ink)}
.stmoderow{align-items:center}.stmodes{gap:10px}
.stmode{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;padding:0;color:var(--muted);font-size:12px}
.stmode svg{width:96px;height:60px;border-radius:9px;border:2px solid var(--line);display:block}.stmode.on svg{border-color:var(--accent)}.stmode.on{color:var(--ink)}
.staccents{display:flex;flex-wrap:wrap;gap:8px}.staccents button{width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:0 0 0 1px var(--line)}
.staccents button[aria-checked="true"]{box-shadow:0 0 0 2px var(--ink)}
.sthcard{padding:16px 18px}.sthhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.stcard>.sthhead{padding:14px 18px 0}
.sthmodes{display:flex;gap:14px}.sthmodes button{border:0;background:transparent;color:var(--muted);padding:2px 0;font-weight:500}.sthmodes button[aria-pressed="true"]{color:var(--ink)}
.sthwrap{overflow-x:auto}.stheat{width:100%;min-width:640px;height:auto;display:block}.sthl{font-size:9px;fill:var(--muted)}
.sth0{fill:var(--surface2);background:var(--surface2)}.sth1{fill:color-mix(in srgb,var(--accent) 30%,var(--surface2));background:color-mix(in srgb,var(--accent) 30%,var(--surface2))}.sth2{fill:color-mix(in srgb,var(--accent) 55%,var(--surface2));background:color-mix(in srgb,var(--accent) 55%,var(--surface2))}.sth3{fill:color-mix(in srgb,var(--accent) 78%,var(--surface2));background:color-mix(in srgb,var(--accent) 78%,var(--surface2))}.sth4{fill:var(--accent);background:var(--accent)}
.sthlegend{display:flex;align-items:center;gap:4px;justify-content:flex-end;font-size:11px;color:var(--muted);margin-top:6px}.sthlegend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.ststats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 8px}.ststats div{background:var(--surface2);border-radius:10px;padding:10px 12px}.ststats b{display:block;font-size:20px}.ststats span{color:var(--muted);font-size:12px}
.stbar{display:flex;height:12px;border-radius:999px;background:var(--surface2);overflow:hidden;margin:6px 18px 12px;border:1px solid var(--line)}.stbar.sm{height:8px;margin:0;width:160px}
.stbar i{display:block;height:100%}.stb1{background:var(--accent)}.stb2{background:color-mix(in srgb,var(--accent) 55%,#3a7bd5)}.stb3{background:color-mix(in srgb,var(--muted) 60%,transparent)}
.stkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 18px}.stkey{display:grid;grid-template-columns:10px 1fr;column-gap:8px;row-gap:2px;align-items:center}.stkey i{width:10px;height:10px;border-radius:3px;grid-row:1/3}.stkey b{font-size:13px}.stkey span{grid-column:2;font-size:13px}.stkey small{grid-column:2;color:var(--muted);font-size:11px}
.stcard>p.d,.stcard>.row{padding:0 18px}.stcard>.row{padding-bottom:16px}.stcard>p.d{margin:12px 0}
.stcloud{display:flex;align-items:center;gap:10px;font-size:13px}
@media (max-width:820px){.stlayout{grid-template-columns:minmax(0,1fr)}.stnav{position:static;flex-direction:row;overflow-x:auto;min-width:0;scrollbar-width:none}.stnav a{flex:0 0 auto;white-space:nowrap}.stmain{min-width:0}.strow{flex-wrap:wrap;gap:12px 20px}.stlab{flex:1 1 190px;min-width:min(190px,100%)}.stctl{flex-wrap:wrap;max-width:100%}.stkeys,.ststats{grid-template-columns:1fr 1fr}.stmodes{flex-wrap:wrap}}
/* ---------- family & safety ---------- */
.fmpad{padding:16px 18px}.fmintro{margin:-6px 0 14px}
.fmadd{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}.fmadd>div:first-child{display:flex;flex-direction:column;gap:3px;max-width:460px}
.fmcode{display:flex;align-items:center;gap:8px}.fmcode code{font:600 20px/1 ui-monospace,Consolas,monospace;letter-spacing:.12em;padding:8px 12px;border-radius:9px;background:var(--surface2);border:1px dashed var(--line)}
.fmwho{display:flex;align-items:center;gap:12px}.fmwho>div{display:flex;flex-direction:column}.fmav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink,#fff);font-weight:700}
.fmpill{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--surface2);border:1px solid var(--line)}.fmpill.ok{color:var(--ok)}.fmpill.off{color:var(--err)}
.fmq{display:flex;align-items:center;gap:6px}.fmq input{padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:var(--surface2);color:var(--ink)}
.fmjoin{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}.fmjoin .f{margin:0}.fmjoin input{font-family:ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.fmpause{position:fixed;inset:0;z-index:200;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px}
.fmpbox{max-width:440px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}.fmpbox h2{margin:0 0 8px}
/* ---------- Design page: every size drawn as what it is ---------- */
.dpcustom{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:4px 0 18px}
.dpform{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}.dpform .f{margin:0}.dpform input[type=number]{width:96px}
.dpcl{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:200px;align-self:center}
.dpswap{margin-bottom:2px}.dpcprev svg{width:50px;height:40px;display:block}
.dptools{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.dpsearch{width:100%;max-width:520px;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.dpchips{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.dpchips button{flex:0 0 auto;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font-weight:500}
.dpchips button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dpsec{margin-top:22px}.dphead{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}.dphead h3{margin:0;font-size:16px}.dphead span{color:var(--muted);font-size:13px}
.dpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.dptile{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:10px 10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:border-color .15s,transform .15s,box-shadow .15s}
.dptile:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));transform:translateY(-2px);box-shadow:var(--shadow)}
.dptile:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.dpart{width:100%;height:auto;aspect-ratio:160/110;display:block;margin-bottom:8px;border-radius:9px;background:color-mix(in srgb,var(--surface2) 70%,transparent)}
.dpn{font-weight:600;font-size:13px;line-height:1.3}.dpd{font-size:12px;color:var(--muted);margin-top:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dpd i{font-style:normal;font-size:10px;letter-spacing:.04em;padding:1px 6px;border-radius:999px;border:1px solid var(--line)}
.dpb{fill:var(--surface);stroke:color-mix(in srgb,var(--ink) 28%,transparent);stroke-width:1.1;stroke-linejoin:round}
.dpl{fill:none;stroke:color-mix(in srgb,var(--ink) 28%,transparent);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.dpl2{fill:color-mix(in srgb,var(--ink) 25%,transparent)}
.dpa{fill:color-mix(in srgb,var(--accent) 16%,transparent);stroke:var(--accent);stroke-width:1;stroke-dasharray:3 2}
.dps{fill:color-mix(in srgb,var(--accent) 10%,var(--surface2));stroke:none}
.dpk{fill:color-mix(in srgb,var(--ink) 22%,transparent)}.dpk2{fill:color-mix(in srgb,var(--accent) 45%,transparent)}.dpk3{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round}
.dpplay{fill:var(--surface)}.dpspine{fill:color-mix(in srgb,var(--ink) 12%,transparent)}
@media (max-width:640px){.dpgrid{grid-template-columns:repeat(2,1fr)}.dpform input[type=number]{width:80px}}
/* ---------- Quick actions page ---------- */
.qptools{display:flex;flex-direction:column;gap:10px;margin:2px 0 4px}.qpchips small{opacity:.6;font-size:11px;margin-left:2px}
.qpsec{margin-top:22px}.qpsec[hidden]{display:none}
.qpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.qptile{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.qptile:hover{border-color:color-mix(in srgb,var(--qc) 55%,var(--line));transform:translateY(-2px);box-shadow:var(--shadow)}.qptile[hidden]{display:none}
.qpic{flex:0 0 40px;height:40px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--qc) 16%,transparent);color:var(--qc)}
.qpic .qaic{width:21px;height:21px;padding:0;background:none;border-radius:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qptx{display:flex;flex-direction:column;gap:3px;min-width:0}.qptx b{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.qptx>span{font-size:12.5px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qpai{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:999px;color:var(--qc);border:1px solid color-mix(in srgb,var(--qc) 45%,transparent)}
/* ---------- checkout and receipts ---------- */
.ckpage{max-width:none}.ckcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:12px 0}
.ckline{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.ckline>div{display:flex;flex-direction:column;gap:2px}
.cktotal{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:12px;padding-top:12px;font-size:16px}.cktotal b{font-size:20px}
.cktest{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--warn);border:1px dashed var(--warn);border-radius:8px;padding:5px 10px}.cktest.big{display:block;text-align:center;padding:10px}
.ckdone{text-align:center;padding:18px 0 4px}.ckok{width:54px;height:54px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;font-size:26px;background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.ckrh{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0}.ckrh span{font:12px ui-monospace,Consolas,monospace;color:var(--muted)}
.ckdl{display:grid;grid-template-columns:110px 1fr;gap:8px 14px;margin:0}.ckdl dt{color:var(--muted)}.ckdl dd{margin:0}.ckmsg{text-align:center;padding:12px}
/* Marketplace filters: same calm style as the rest of the Studio */
select[data-mkf],select[data-mks],.mkrow select{appearance:none;-webkit-appearance:none;padding:9px 34px 9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--ink);font:inherit;min-height:40px}
select[data-mkf]:focus-visible,select[data-mks]:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
/* ---------- Smart Create, redrawn ---------- */
.scpage .sctypes{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin:14px 0 10px;overflow:visible;mask:none;-webkit-mask:none}
.scpage a.sctype{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px 8px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-size:13px;font-weight:500;text-align:center;transition:border-color .15s,transform .15s}
.scpage a.sctype:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));transform:translateY(-1px)}
.scpage a.sctype[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--ink);box-shadow:0 0 0 1px var(--accent) inset}
.scpage a.sctype svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.scpage a.sctype[aria-pressed="true"] svg{color:var(--accent);opacity:1}
.scpage .scdesc{margin:2px 0 12px!important;font-size:13px}
.scpage .scbox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:6px 6px 0;box-shadow:var(--shadow);transition:border-color .15s}
.scpage .scbox:focus-within{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.scpage .scbox textarea{width:100%;border:0;background:transparent;color:var(--ink);font:400 16px/1.55 inherit;padding:14px 14px 8px;resize:vertical;min-height:110px;outline:none}
.scpage .scbar{margin:0!important;padding:10px 10px 12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.scpage .scbar .f{margin:0;color:var(--muted);font-size:13px}.scpage .scbar select{padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:var(--surface2);color:var(--ink)}
.scpage .scbar .btn.primary{margin-left:auto;padding:10px 18px;border-radius:11px}
.scpage .scsugg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0 6px}.scpage .scsugg .chip{border-radius:999px;font-size:12.5px;padding:6px 12px;background:transparent;text-decoration:none}
.scpage .aiscfg{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--surface)}.scpage .aiscfg summary{cursor:pointer;font-weight:600}
.scpage>p.d,.scpage .aisx>p.d{font-size:12px;color:var(--muted)}
/* ---------- Intelligence Studio ---------- */
.ispage .istabs{margin:4px 0 16px}.ispage .istabs a{flex:0 0 auto;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);text-decoration:none;font-weight:500}
.ispage .istabs a[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.iscard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.isask{display:flex;flex-direction:column;gap:10px;padding:0;overflow:hidden}
.islog{max-height:min(56vh,520px);overflow:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.isempty{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:12px 2px}.isstarts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.isstarts .chip{border-radius:999px;font-size:12.5px}
.ismsg{display:flex;gap:10px;align-items:flex-start;max-width:86%}.ismsg>div{padding:10px 14px;border-radius:14px;line-height:1.5}
.ismsg.me{align-self:flex-end}.ismsg.me>div{background:var(--accent);color:var(--accent-ink,#fff);border-bottom-right-radius:4px}
.ismsg.ai>div{background:var(--surface2);border:1px solid var(--line);border-bottom-left-radius:4px}.ismsg.err>div{border-color:var(--err)}
.isai{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 6px;border-radius:999px;border:1px solid var(--line);color:var(--muted);margin-top:8px}
.isact{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);align-items:flex-start}
.isform{display:flex;gap:10px;align-items:flex-end;padding:12px 14px;border-top:1px solid var(--line);background:var(--surface)}
.isform textarea{flex:1;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--surface2);color:var(--ink);resize:none;font:inherit}
.isnote{padding:0 18px 14px;margin:0}
.ishero{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.ishero>div:first-child{display:flex;flex-direction:column;gap:3px;min-width:220px;flex:1}.istypes{display:flex;flex-wrap:wrap;gap:6px}.istypes .chip{border-radius:999px;text-decoration:none;font-size:12.5px}
.isby{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* ---------- room makeover ---------- */
.moadd{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}.moadd .qadrop{flex:1;min-width:260px}.moadd>.btn{align-self:center}
.mofr{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.mof{position:relative;padding:0;border-radius:12px;overflow:hidden;border:2px solid var(--line);background:var(--surface);aspect-ratio:4/3}.mof img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55;transition:opacity .15s}
.mof.on{border-color:var(--accent)}.mof.on img{opacity:1}.mof span{position:absolute;left:6px;bottom:6px;font-size:11px;padding:2px 7px;border-radius:999px;background:#000a;color:#fff}
.mopad{padding:16px 18px;margin-top:14px}
.mostyles{display:flex;flex-wrap:wrap;gap:8px}.mostyle{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.mostyle.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.mosw{display:inline-flex}.mosw i{width:12px;height:12px;border-radius:50%;margin-right:-3px;border:1px solid #0002}
.moai{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:14px 0 8px}
.moaic{position:relative;display:flex;flex-direction:column;gap:6px;align-items:flex-start}.moaic img,.moaiph{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;background:var(--surface2)}
.moaic .isai{position:absolute;top:6px;left:6px;margin:0;background:#000a;color:#fff;border-color:transparent}.moaiph .mosw i{width:22px;height:22px}
.moadd .qadrop{min-height:0;padding:20px 16px}
/* ---------- Intelligence Studio: research, data, assistants ---------- */
.rssrc{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface2);color:var(--ink);font:inherit;resize:vertical}
.rsurl{display:flex;gap:6px;flex:1;min-width:260px}.rsurl input{flex:1;padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:var(--surface2);color:var(--ink)}
.rsres{margin-top:12px}.rsres h4{margin:14px 0 6px;font-size:13px}.rspts{margin:6px 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.rsref{border:0;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border-radius:6px;padding:0 5px;font-size:11px;margin-left:2px}
.rspara{margin:10px 0;padding:10px 12px;border-left:3px solid var(--accent);background:var(--surface2);border-radius:6px}.rspara p{margin:4px 0 0}
.rsconf{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:1px 6px;border-radius:999px;margin-right:6px;border:1px solid var(--line)}.rsconf.high{color:var(--ok)}.rsconf.medium{color:var(--warn)}.rsconf.low{color:var(--err)}
.dacols{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.dacharts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px;margin-top:10px}
.dacharts figure{margin:0;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);display:flex;flex-direction:column;gap:8px;align-items:flex-start}.dacharts figcaption{font-weight:600;font-size:13px}
.dachart{width:100%;height:auto}.dachart .anbar{fill:var(--accent)}.dachart .anax{font-size:9px;fill:var(--muted)}.daai{margin-top:12px;background:var(--surface2)}
.aslayout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px;align-items:start}.aslist{display:flex;flex-direction:column;gap:6px}
.asitem{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}.asitem span{font-size:12px;color:var(--muted)}
.asitem.on{border-color:var(--accent)}.asnew{border-style:dashed}
@media (max-width:760px){.aslayout{grid-template-columns:1fr}}
/* ---------- command search (Ctrl+K) ---------- */
.skpal{position:fixed;inset:0;z-index:300;background:color-mix(in srgb,#000 38%,transparent);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.skbox{width:min(640px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 70px #0007;overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.skq{border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:400 17px/1.4 inherit;padding:16px 18px;outline:none}
.skres{overflow:auto;padding:6px}.skres button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);padding:9px 12px;border-radius:9px}
.skres button span:first-child{flex:1}.skres small{color:var(--muted);font-size:11px}.skres button.on{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.skfoot{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
/* ---------- share to social ---------- */
.shwrap{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:16px;align-items:start}.shimg{width:100%;border-radius:10px;border:1px solid var(--line)}
.shplats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}.shplat{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}.shplat .d{font-size:12px}
.shrem input[type=time]{padding:4px 6px;border-radius:7px;border:1px solid var(--line);background:var(--surface2);color:var(--ink)}
.shpub{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;margin:10px 0 16px}.shpub>div{display:flex;flex-direction:column;gap:2px}
@media (max-width:640px){.shwrap{grid-template-columns:1fr}}
/* ---------- docked editing toolbar ---------- */
.qdock{flex:none;min-height:50px;display:flex;align-items:center;justify-content:center;padding:4px 10px;border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden}
.qdock .qbar.qdocked{position:static!important;left:auto!important;top:auto!important;max-width:100%!important;overflow-x:auto;overflow-y:hidden;box-shadow:none;scrollbar-width:thin;flex-wrap:nowrap}
.qdock.empty::before{content:'Select something on the page to edit it';color:var(--muted);font-size:12.5px}
/* ---------- Settings → Developers ---------- */
.dvform{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--line)}.dvform.col{flex-direction:column;align-items:flex-start}
.dvform input[name=name],.dvform input[type=url]{flex:1;min-width:240px;width:100%;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--surface2);color:var(--ink)}
.dvevents{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px}.dvonce{margin:12px 18px;padding:12px 14px;border:1px dashed var(--accent);border-radius:12px;display:flex;flex-direction:column;gap:6px}
.dvonce code{font:12.5px ui-monospace,Consolas,monospace;word-break:break-all;padding:6px 8px;background:var(--surface2);border-radius:7px}
.dvlog{display:flex;gap:4px;align-items:center;font-size:11px}.dvlog i{width:9px;height:9px;border-radius:50%;background:var(--muted)}.dvlog i.ok{background:var(--ok)}.dvlog i.off{background:var(--err)}
.dvpre{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:12px/1.5 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-all}
.dvtable td{padding:6px 8px;vertical-align:top}.dvtable code{font-size:12px}
/* ---------- quick guides ---------- */
.qgslot{margin-left:auto;align-self:flex-start}.canvasbar .qgbtn{margin-left:auto}
.qgbtn span:not(.qglbl){display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;font-size:11px;font-weight:700;margin-right:4px}
.qgpop{position:fixed;z-index:250;width:min(360px,calc(100vw - 20px));background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px #0006;padding:14px 16px 12px}
.qghead{display:flex;flex-direction:column;gap:2px;position:relative;padding-right:28px}.qgk{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--accent)}.qghead b{font-size:16px}.qgx{position:absolute;right:-6px;top:-6px}
.qgpop ol{margin:10px 0 8px;padding-left:20px;display:flex;flex-direction:column;gap:6px;line-height:1.45}.qgpop li::marker{color:var(--accent);font-weight:700}
.qgtip{margin:6px 0 10px;padding:8px 10px;border-radius:9px;background:var(--surface2);font-size:12.5px;color:var(--muted)}
.qgfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px}
/* ---------- video timeline ---------- */
.vthost{border-top:1px solid var(--line);background:var(--surface);flex:none}
.vtbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:8px 10px;border-bottom:1px solid var(--line)}.vtgrp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.vtzoom{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}.vtzoom input{width:110px}
.vtl{overflow-x:auto;overflow-y:hidden;position:relative;max-height:240px}.vtinner{position:relative;padding:0 30px 6px 86px;min-width:100%}
.vtruler{position:relative;height:22px;border-bottom:1px solid var(--line);cursor:pointer;margin-left:0}.vtruler span{position:absolute;top:4px;font-size:10px;color:var(--muted);transform:translateX(-50%)}
.vtrow{position:relative;height:44px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}.vtrow>b{position:absolute;left:-80px;top:0;width:74px;height:100%;display:flex;align-items:center;font-size:11px;font-weight:600;color:var(--muted)}
.vtlane{position:absolute;inset:0;cursor:pointer}.vtlane em{position:absolute;left:8px;top:13px;font-size:11.5px;color:var(--muted);font-style:normal;pointer-events:none}
.vtb{position:absolute;top:5px;height:34px;border-radius:7px;background:color-mix(in srgb,var(--accent) 22%,var(--surface2));border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);overflow:hidden;display:flex;align-items:center;gap:6px;padding:0 8px;font-size:11.5px;color:var(--ink);cursor:grab;user-select:none}
.vtb img{height:100%;width:auto;margin-left:-8px;object-fit:cover;opacity:.9}.vtb span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vtb.on{outline:2px solid var(--ink);outline-offset:-1px}.vtb.sc.clip{background:color-mix(in srgb,#3a7bd5 26%,var(--surface2));border-color:color-mix(in srgb,#3a7bd5 55%,transparent)}
.vtb.tx{background:color-mix(in srgb,#b06ad5 26%,var(--surface2));border-color:color-mix(in srgb,#b06ad5 55%,transparent)}.vtb.sb{background:color-mix(in srgb,#d5a03a 24%,var(--surface2));border-color:color-mix(in srgb,#d5a03a 55%,transparent)}
.vtb.au{background:color-mix(in srgb,#3aa57b 24%,var(--surface2));border-color:color-mix(in srgb,#3aa57b 55%,transparent);top:8px;height:28px}.vtb.au.mu{opacity:.75}.vtb.au.vo{top:22px;height:16px;font-size:10px}
.vth{position:absolute;top:0;bottom:0;width:7px;cursor:ew-resize;background:transparent}.vth.l{left:0}.vth.r{right:0}.vtb:hover .vth{background:color-mix(in srgb,var(--ink) 30%,transparent)}
.vthead{position:absolute;top:0;bottom:0;width:2px;background:#ff4d4d;margin-left:86px;pointer-events:none;box-shadow:0 0 0 1px #0003}.vthead::before{content:'';position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:#ff4d4d}
.vtdrop{margin:4px 12px 8px;font-size:11.5px}
.cvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:12px}.cvt{display:flex;flex-direction:column;gap:10px}.cvth{display:flex;flex-direction:column;gap:3px}.cvth b{font-size:15px}
.cvres{grid-column:1/-1}.cvinto{display:flex;flex-wrap:wrap;gap:6px}
/* ---------- free music & sounds ---------- */
.smmoods{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}.smmood{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--ink)}.smmood span{font-size:12px;color:var(--muted)}.smmood.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface2))}
.smprev{margin-top:12px;display:flex;flex-direction:column;gap:8px}.smprev audio{width:100%}
.smfx{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}.smfxi{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface2)}.smfxi span{flex:1;font-size:13px}
/* ---------- Send to… ---------- */
#dialog.sndwide{max-width:760px}
.sndfmt{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:6px 0 14px}
.sndf{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:inherit;cursor:pointer;font:inherit}
.sndf span{font-size:12px;color:var(--muted)}.sndf.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.sndgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.sndt{position:relative;display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);color:inherit;cursor:pointer;font:inherit;transition:border-color .15s,transform .15s}
.sndt:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}.sndt:disabled{opacity:.45;cursor:not-allowed}
.sndt svg{grid-row:1/3;width:36px;height:36px;padding:7px;border-radius:10px;background:var(--surface);fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sndt span{font-size:12px;color:var(--muted);line-height:1.35}.sndt i{position:absolute;top:8px;right:10px;font-style:normal;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.sndt.last{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.sndmsg{min-height:1.4em;margin:12px 0 0;font-size:13px}.sndbtn .ic{width:15px;height:15px;margin-right:5px;vertical-align:-3px}
.sndpub{margin-bottom:14px}
@media (max-width:560px){.sndgrid{grid-template-columns:1fr}}
/* ---------- Phone Kit ---------- */
.pkgrid{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:16px;align-items:start}
@media (max-width:900px){.pkgrid{grid-template-columns:1fr}}
@media (min-width:901px){.pktheme{position:sticky;top:12px}}.pklab{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
.pkpals{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pkpal{display:flex;height:30px;border-radius:9px;overflow:hidden;border:1px solid var(--line);padding:0;cursor:pointer;background:none}.pkpal i{flex:1}
.pkpal.on{outline:2px solid var(--accent);outline-offset:2px}.pkfrom{grid-column:span 4;height:auto;padding:7px;justify-content:center;font:inherit;font-size:13px;color:inherit;background:var(--surface2)}
.pkstyles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pksty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);cursor:pointer;font:inherit;font-size:12px;color:inherit}
.pksty canvas{width:100%;height:auto;aspect-ratio:66/140;border-radius:8px;display:block}.pksty.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.pktabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.pktab{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:inherit;font:inherit;font-size:14px;cursor:pointer}.pktab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pkphones{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin:16px 0}
.pkphone{position:relative;width:min(220px,42vw);border-radius:28px;padding:7px;background:#111;box-shadow:var(--shadow)}
.pkphone canvas{width:100%;height:100%;display:block;border-radius:22px}
.pkover{position:absolute;inset:7px;border-radius:22px;overflow:hidden;pointer-events:none;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.pkclock{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.pkclock small{font-size:11px;font-weight:600}.pkclock b{font-size:46px;font-weight:600;line-height:1;letter-spacing:-.02em}
.pkzone{position:absolute;left:0;right:0;border:1px dashed rgba(255,255,255,.75);background:rgba(255,255,255,.07)}
.pkhome{position:absolute;left:7%;right:7%;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;align-content:start}
.pkhome span,.pkdock span{aspect-ratio:1;border-radius:24%;background:rgba(255,255,255,.22);overflow:hidden}.pkhome img,.pkdock img{width:100%;height:100%;display:block}
.pkdock{position:absolute;left:5%;right:5%;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:6px 9px;align-items:center;border-radius:20px;background:rgba(255,255,255,.18)}
.pkcap{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:12px;color:var(--muted)}
.pkchk{gap:6px;align-items:center;font-size:14px}
.pkicons{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px;margin:14px 0}
.pkicons figure,.pkstk figure{position:relative;margin:0;text-align:center}.pkicons canvas{width:64px;height:64px;display:block;margin:0 auto 4px}.pkicons figcaption{font-size:12px}
.pkx{position:absolute;top:-4px;right:6px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:inherit;cursor:pointer;line-height:1;opacity:0;transition:opacity .15s}
figure:hover>.pkx,.pkx:focus{opacity:1}@media (hover:none){.pkx{opacity:1}}
.pkwidgets{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:14px 0}.pkwidgets figure{margin:0}.pkwidgets canvas{border-radius:22px;display:block;box-shadow:var(--shadow);max-width:100%}.pkwidgets figcaption{font-size:12px;color:var(--muted);margin-top:4px}
.pksounds{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.pksounds h4{margin:0 0 4px}.pkchips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.pksnd{margin-top:10px;display:flex;flex-direction:column;gap:6px}.pksnd audio{width:100%}
.pkstk{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin:14px 0;padding:12px;border-radius:14px;background:repeating-conic-gradient(var(--surface2) 0 25%,var(--surface) 0 50%) 50%/18px 18px}.pkstk img{width:100%;display:block}
.pkhow{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}.pkhow summary{cursor:pointer;font-weight:600}.pkhow p{font-size:14px;margin:8px 0}
/* ---------- History, explained ---------- */
#dialog.hswide{max-width:1000px;width:calc(100vw - 32px)}
.hsgrid{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:18px}@media (max-width:760px){.hsgrid{grid-template-columns:1fr}}
.hsscrub input{width:100%;accent-color:var(--accent)}.hsscrub .d{font-size:12px}
.hsnamed{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.hslist{list-style:none;margin:8px 0 0;padding:0;max-height:52vh;overflow:auto;padding-left:22px;background:linear-gradient(var(--line),var(--line)) 8px 0/2px 100% no-repeat}
.hsday{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
.hsstep{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;padding:8px 10px;margin:2px 0;border:1px solid transparent;border-radius:10px;background:none;color:inherit;font:inherit;cursor:pointer}
.hsstep::before{content:'';position:absolute;left:-20px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.hsstep.now::before{background:var(--accent);border-color:var(--accent)}.hsstep:hover{background:var(--surface2)}.hsstep.on{background:var(--surface2);border-color:var(--accent)}.hsstep.on::before{border-color:var(--accent)}
.hsstep b{font-weight:600;font-size:14px;line-height:1.35}.hsstep span{font-size:12px;color:var(--muted)}
.hscmp{display:grid;gap:12px}.hscmp.two{grid-template-columns:1fr 1fr}.hscmp figure{margin:0}
.hsth{display:grid;place-items:center;min-height:200px;padding:12px;border-radius:14px;background:var(--canvas)}.hsth svg{max-width:100%;height:auto;max-height:46vh;box-shadow:var(--shadow);background:#fff}
.hscmp figcaption{font-size:12px;color:var(--muted);text-align:center;margin-top:4px}
.hsdesc{margin-top:12px}.hsdesc ul,.hsdiff ul{margin:6px 0;padding-left:18px;font-size:14px}.hsdiff{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--surface2)}
/* ---------- Who made this ---------- */
.pvbadge{gap:6px;display:inline-flex;align-items:center}.pvbadge i{width:8px;height:8px;border-radius:50%;background:#2f8f6b}.pvbadge.ai i{background:#7b5cd6}
.pvbar{display:flex;height:14px;border-radius:999px;overflow:hidden;margin:6px 0 8px;background:var(--surface2)}.pvbar i{display:block}
.pvlegend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;padding:0;margin:0 0 12px;font-size:13px}.pvlegend li{display:flex;align-items:center;gap:6px}.pvlegend i{width:10px;height:10px;border-radius:3px}
.pvsays p{margin:6px 0 0}.pvlist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.pvlist li{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px}.pvlist li>span:nth-child(2){flex:1}.pvdot{width:10px;height:10px;border-radius:50%;flex:none}
.pvsnd{margin:-4px 0 12px}
/* ---------- Private mode ---------- */
.pmchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:inherit;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.pmchip .ic{width:15px;height:15px}.pmchip.private{background:var(--forest);border-color:var(--forest);color:#fff}.pmchip.synced .ic{color:var(--ok)}
@media (max-width:640px){.pmchip span{display:none}.pmchip{padding:0 8px}}
#dialog.pmwide{max-width:960px;width:calc(100vw - 32px)}
.pmhero{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--surface2)}.pmhero>div{flex:1;display:flex;flex-direction:column;gap:4px}.pmhero b{font-size:17px}.pmhero span{color:var(--muted);font-size:14px}
.pmhero.on{background:color-mix(in srgb,var(--forest) 14%,var(--surface));border-color:var(--forest)}
.pmswitch{position:relative;width:56px;height:32px;border-radius:999px;border:0;background:var(--line);cursor:pointer;flex:none;transition:background .2s}.pmswitch i{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s}
.pmswitch[aria-checked="true"]{background:var(--forest2)}.pmswitch[aria-checked="true"] i{left:28px}.pmswitch .sr,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pmcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:12px}.pmcols h4,.iscard h4{margin:0 0 8px}
.pmfacts{list-style:none;padding:0;margin:0;display:grid;gap:4px}.pmfacts b{display:inline-block;min-width:56px}
.pmlog{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:4px;font-size:14px}.pmlog li{display:flex;justify-content:space-between;gap:8px}.pmlog span{color:var(--muted);font-size:12px}
.pmlocal{display:flex;flex-wrap:wrap;gap:6px;margin:0}.pmlocal span{padding:4px 10px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);font-size:13px}
.qpdev{font-style:normal;font-size:10px;letter-spacing:.04em;text-transform:uppercase;margin-left:6px;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);vertical-align:2px}
/* ---------- Brand guard ---------- */
.bdgbadge{display:inline-flex;align-items:center;gap:6px}.bdgbadge i{width:8px;height:8px;border-radius:50%;background:var(--ok)}.bdgbadge.warn i{background:var(--warn)}.bdgbadge.err i{background:var(--err)}
.bdgok{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--ok) 12%,var(--surface))}.bdgok .ic{width:28px;height:28px;color:var(--ok)}.bdgok div{display:flex;flex-direction:column;gap:2px}.bdgok span{color:var(--muted);font-size:14px}
.bdgh{margin:12px 0 6px}.bdglist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.bdglist li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px}.bdglist li>span:nth-child(2){flex:1;min-width:200px}
.bdgdot{width:9px;height:9px;border-radius:50%;background:var(--warn);flex:none}.bdglist li.error .bdgdot{background:var(--err)}
.bdgrules{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}.bdgrules h4{margin:0}
.bdgopt{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.bdgopt input{margin-top:3px}.bdgopt span{display:flex;flex-direction:column}.bdgopt small{color:var(--muted);font-size:13px}
/* ---------- Design coach ---------- */
#coOv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
.cozone{fill:rgba(220,60,60,.16);stroke:rgba(220,60,60,.75);stroke-dasharray:1.5 1;stroke-width:.35;vector-effect:non-scaling-stroke}.cozt{fill:rgba(160,30,30,.9);font-family:system-ui,sans-serif;font-weight:600}
.coal{stroke:#e0218a;stroke-width:1.5;vector-effect:non-scaling-stroke}.coal.miss{stroke-dasharray:4 3}
.cono{fill:#7b5cd6;stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke}.conot{fill:#fff;font-family:system-ui,sans-serif;font-weight:700}
.canvaswrap{position:relative}
.cocard{position:absolute;right:12px;bottom:12px;width:min(360px,calc(100% - 24px));max-height:min(62vh,560px);overflow:auto;z-index:30;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.cohead{display:flex;gap:10px;align-items:center}.cohead>div:nth-child(2){flex:1;display:flex;flex-direction:column}.cohead .d{font-size:12.5px}
.coscore{display:flex;align-items:baseline;gap:1px;padding:6px 9px;border-radius:12px;background:var(--surface2)}.coscore b{font-size:20px}.coscore span{font-size:11px;color:var(--muted)}.coscore.ok b{color:var(--ok)}.coscore.warn b{color:var(--warn)}.coscore.err b{color:var(--err)}
.cotoggles{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 6px;font-size:13px}.cotoggles label{display:flex;gap:5px;align-items:center}
.colist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.colist li{display:flex;flex-direction:column;gap:4px;padding:9px 11px;border-radius:12px;background:var(--surface2);border-left:3px solid var(--line);font-size:13.5px}
.colist li span{color:var(--muted);line-height:1.45}.colist li .btn{align-self:flex-start}.colist .co-bad{border-left-color:var(--err)}.colist .co-warn{border-left-color:var(--warn)}.colist .co-info{border-left-color:var(--focus)}.colist .co-good{border-left-color:var(--ok)}
.colist .cosep{background:none;border:0;padding:6px 0 0;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cobtn.on{border-color:var(--accent);color:var(--accent)}
@media (max-width:700px){.cocard{max-height:45vh}}
.cocard.below{position:static;width:auto;max-height:none;margin:10px 12px;box-shadow:none}
/* ---------- Every format, linked ---------- */
#dialog.lkwide{max-width:980px;width:calc(100vw - 32px)}
.lkbadge{display:inline-flex;align-items:center;gap:5px}.lkbadge .ic{width:14px;height:14px}.lkbadge.on{border-color:var(--accent);color:var(--accent)}
.lkpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.lkopt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);cursor:pointer}.lkopt:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface2))}
.lkopt span{display:flex;flex-direction:column}.lkopt small{color:var(--muted);font-size:12px}
.lkframe{display:inline-block;flex:none;border:1.5px solid var(--accent);border-radius:3px;background:color-mix(in srgb,var(--accent) 14%,transparent);margin:0 2px}
.lkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.lkcard{margin:0;display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}.lkcard.on{border-color:var(--accent)}
.lkth{position:relative;display:grid;place-items:center;height:150px;border-radius:10px;background:var(--canvas);overflow:hidden}.lkth svg{display:block;box-shadow:var(--shadow)}
.lkth.lkweb{display:flex;flex-direction:column;gap:6px;color:var(--muted)}.lkth.lkweb .ic{width:26px;height:26px}
.lkplay{position:absolute;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55)}.lkplay::after{content:'';position:absolute;left:15px;top:11px;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.lkcard figcaption{display:flex;flex-direction:column}.lkcard figcaption span{font-size:12px;color:var(--muted)}
/* ---------- Live data ---------- */
#dialog.ldwide{max-width:920px;width:calc(100vw - 32px)}
.ldbadge{display:inline-flex;align-items:center;gap:5px}.ldbadge .ic{width:14px;height:14px}.ldbadge.on{border-color:var(--ok);color:var(--ok)}
.ldsrc{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}.ldtile{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);cursor:pointer}.ldtile span{font-size:13px;color:var(--muted)}
.ldhead{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}.ldhead>div:first-child{display:flex;flex-direction:column;gap:2px}.ldwarn{color:var(--warn);font-size:13px}
.ldh{margin:16px 0 6px}.ldh .d{font-weight:400;font-size:13px;margin-left:6px}.ldfields{display:flex;flex-wrap:wrap;gap:6px}.ldfields .chip{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
.ldprev{overflow:auto;border:1px solid var(--line);border-radius:10px}.ldprev table{border-collapse:collapse;width:100%;font-size:13px}.ldprev th,.ldprev td{padding:6px 9px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.ldprev th{background:var(--surface2)}.ldprev tr.on td{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ldlog{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:13px}.ldlog b{margin-right:6px}
/* ---------- Snap & send ---------- */
.qkpage{max-width:none}.qksteps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.qksteps h4{display:flex;align-items:center;gap:10px;margin:0 0 10px}.qksteps h4 span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:14px}
.qksteps li.done h4 span{background:var(--ok);color:#fff}
.qkpick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}@media (max-width:560px){.qkpick{grid-template-columns:1fr}}
.qkbig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;padding:14px;border:1.5px dashed var(--line);border-radius:16px;background:var(--surface2);cursor:pointer;text-align:center}.qkbig .ic{width:30px;height:30px;color:var(--accent)}.qkbig:hover{border-color:var(--accent)}
.qkmedia{display:flex;gap:12px;align-items:flex-end}.qkmedia img,.qkmedia video{max-width:min(320px,70vw);max-height:260px;border-radius:14px;display:block}
.qksay{display:flex;gap:8px;align-items:flex-start}.qksay textarea{flex:1;font-size:16px}.qkmic{width:48px;height:48px;border-radius:50%}.qkmic.on{background:var(--err);color:#fff;animation:qkpulse 1.2s infinite}@keyframes qkpulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--err) 25%,transparent)}}
.qkparse{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.qkparse span{display:flex;gap:6px;align-items:baseline;padding:4px 10px;border-radius:999px;background:var(--surface2);font-size:13px}.qkparse i{font-style:normal;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.qkgo{margin-top:12px;min-width:160px;min-height:44px;font-size:16px}
.qkready{font-weight:600;color:var(--ok);margin:14px 0 8px}.qkvars{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.qkvar{margin:0;display:flex;flex-direction:column;gap:6px}
.qkth{display:grid;place-items:center;padding:10px;border-radius:12px;background:var(--canvas)}.qkth svg{display:block;max-width:100%;height:auto;box-shadow:var(--shadow)}.qkvar figcaption{font-size:13px;color:var(--muted)}
/* ---------- Calm editor ---------- */
.canvasbar{position:relative}
.cepill{display:inline-flex;align-items:center;gap:6px}.cepill .ic{width:13px;height:13px}
.cedot{width:8px;height:8px;border-radius:50%;background:var(--ok)}.cedot.warn{background:var(--warn)}.cedot.err{background:var(--err)}
.cechecks.err{border-color:color-mix(in srgb,var(--err) 45%,var(--line))}
.cepop{position:absolute;z-index:60;min-width:220px;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.cepop[hidden]{display:none!important}.cepop>button,.cepop>a{justify-content:flex-start;width:100%;text-align:left;border:0}.cepop>span.d{padding:4px 10px}
#cePop_zoom{flex-direction:row;align-items:center;min-width:0;gap:4px}#cePop_zoom>button{width:auto}
body.ce-calm .ttebar .tteex{display:none}body.ce-calm .ttebar:focus-within .tteex{display:flex}
/* guided first design */
#dialog.gfwide{max-width:900px;width:calc(100vw - 32px)}
.gfdots{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 12px}.gfdots li{flex:1;padding:6px 0 0;border-top:3px solid var(--line);font-size:12px;color:var(--muted)}.gfdots li.on{border-color:var(--accent);color:var(--ink);font-weight:600}.gfdots li.done{border-color:var(--ok)}
#gfBody h2{margin:4px 0 12px}
.gfkinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.gfkind{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);color:inherit;font:inherit;cursor:pointer}.gfkind:hover{border-color:var(--accent)}
.gfkind .lkframe{grid-row:1/3;justify-self:center}.gfkind span{font-size:12.5px;color:var(--muted)}
.gfform{display:flex;flex-direction:column;gap:12px;max-width:560px}.gfphoto{display:flex;gap:10px;align-items:center}.gfphoto img{height:80px;border-radius:10px}
.gflooks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.gflook{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--canvas);cursor:pointer;color:inherit;font:inherit}.gflook:hover{border-color:var(--accent);transform:translateY(-2px)}.gflook svg{display:block;max-width:100%;height:auto;box-shadow:var(--shadow);background:#fff}
.gfcard{display:flex;align-items:center;gap:14px;margin:6px 0 16px;border-color:var(--accent)}.gfcard>div{flex:1;display:flex;flex-direction:column;gap:2px}
.gftip{position:fixed;z-index:200;width:min(300px,calc(100vw - 16px));display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:var(--forest);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.gftip span{font-size:13.5px;opacity:.92}.gftip .d{color:#fff;opacity:.7}.gftip .btn.ghost{color:#fff}
.gftip::before{content:'';position:absolute;left:calc(var(--ax,50%) - 7px);width:14px;height:14px;background:var(--forest);transform:rotate(45deg)}.gftip.below::before{top:-7px}.gftip.above::before{bottom:-7px}
/* ---------- Phones, tablets and touch ---------- */
@media (pointer:coarse){
 .btn.sm,.chip,.menubtn,.cepill,.stseg button{min-height:40px}
 .btn.sm,.chip{padding-left:12px;padding-right:12px}
 .iconbtn{min-width:40px;min-height:40px}
 input[type=checkbox],input[type=radio]{width:20px;height:20px}
 .sttog{width:50px;height:30px}
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px}
 .swmore,.swatches button,.cpsw button,.sw>button{min-width:34px;min-height:34px}
 form button:not(.iconbtn){min-height:40px}
 .pkx{opacity:1;width:28px;height:28px}
}
.tp-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.tp-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.tp-l.tp-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
@supports (height:100dvh){.dialog{max-height:calc(100dvh - 32px)}}
@media (max-width:560px){.dialog{padding:16px;border-radius:14px}}
@media (max-width:600px){.canvasbar{gap:4px;row-gap:6px}.canvasbar>span.d,.canvasbar>.sep{display:none}.canvasbar .menubtn{padding:0 7px}.canvasbar .spacer{display:none}.canvasbar .sndbtn .ic{display:none}}
/* ---------- Two-step sign-in ---------- */
.tscode{font-size:22px!important;letter-spacing:.2em;font-family:ui-monospace,Consolas,monospace;max-width:220px}
.tserr{color:var(--err);font-size:14px;margin:0;min-height:1em}
.tsqr{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}#tsQR{width:200px;height:200px;display:grid;place-items:center;background:#fff;border-radius:12px;padding:6px}
.tskey{font-size:15px;letter-spacing:.06em;word-break:break-all}
.tslist{columns:2;font-size:17px;padding-left:22px;margin:12px 0}.tslist code{letter-spacing:.06em}
.tsform{display:flex;flex-direction:column;gap:10px;max-width:380px;margin-top:8px}.tsmore{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}.tsmore summary{cursor:pointer;font-weight:600}
.tsok .ic{width:28px;height:28px;color:var(--ok)}.btn.danger.primary{background:var(--err);border-color:var(--err)}
/* ---------- Earnings ---------- */
.erpage{max-width:none}.erpage .iscard{margin-bottom:12px}.erpage h3{margin:0 0 8px}
.erbal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.erbox{display:flex;flex-direction:column;gap:4px}.erbig{font-size:30px;font-weight:700;letter-spacing:-.01em}
.erbox ul{list-style:none;padding:0;margin:8px 0;display:grid;gap:3px;font-size:14px}.erbox .btn{align-self:flex-start}
.ertest{display:inline-block;padding:1px 8px;border-radius:6px;background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);font-size:12.5px;font-weight:600}
.erok{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:600}.erok .ic{width:18px;height:18px}
.erform{display:flex;flex-direction:column;gap:10px;max-width:460px;margin-top:10px}
.ertable{overflow:auto}.ertable table{border-collapse:collapse;width:100%;font-size:13.5px}.ertable th,.ertable td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.ertable tr.refund td{color:var(--err)}.ertable i{font-style:normal;font-size:11px;padding:0 5px;border-radius:5px;background:var(--surface2)}
.erpays{list-style:none;padding:0;margin:0;display:grid;gap:6px}.erpays li{display:flex;gap:10px;align-items:baseline}.erpays span{color:var(--muted);font-size:13px}
/* ---------- Support desk ---------- */
.sdpage{max-width:none}.sdfind{display:flex;gap:8px;margin:6px 0 16px;flex-wrap:wrap}.sdfind input{flex:1;min-width:220px;font-size:16px}
.sdperson{margin-bottom:12px}.sdhead{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}.sdhead h3{margin:0}
.sdtags{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}.sdtag{font-size:12.5px;padding:3px 9px;border-radius:999px;background:var(--surface2);border:1px solid var(--line)}.sdtag.on{border-color:var(--ok);color:var(--ok)}
.sdconfirm{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:13px}.sdlog{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:14px}
/* ---------- Where you're signed in ---------- */
.sesslist{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px}.sesslist li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:12px}.sesslist li>div{display:flex;flex-direction:column;min-width:0}.sesslist li.cur{border-color:var(--ok)}
/* ---------- The Ask bar ---------- */
#omniHost{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:45;width:min(760px,calc(100vw - 24px));pointer-events:none}
#omniHost>*{pointer-events:auto}
body.has-omni main{padding-bottom:84px}
.omnibar{display:flex;align-items:center;gap:6px;padding:7px 8px 7px 8px;border-radius:999px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.omniq{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:8px 6px;outline:none}
.omnibar:focus-within{border-color:var(--accent)}
.omnibtn{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;border:0;background:transparent;color:var(--ink);cursor:pointer}.omnibtn:hover{background:var(--surface2)}.omnibtn .ic{width:20px;height:20px}
.omnibtn.rec{background:var(--err);color:#fff;animation:qkpulse 1.2s infinite}
/* the arrow is bright (ink on the page colour, clear in every theme) once there is something to send, quiet before that */
.omnisend{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;border:0;background:var(--ink);color:var(--surface);cursor:pointer;transition:opacity .15s,transform .15s}.omnisend .ic{width:18px;height:18px}.omnisend:hover{transform:scale(1.06)}.omnisend:disabled{opacity:.6}
.omnibar:not(:has(.omnichip)):has(.omniq:placeholder-shown) .omnisend{opacity:.28;transform:none}
/* hide sits inside the bar, quiet, after a thin divider (it used to hang off the corner over the border) */
.omniclose{flex:none;width:30px;height:30px;margin-left:2px;display:grid;place-items:center;border:0;border-left:1px solid var(--line);border-radius:0 999px 999px 0;background:transparent;color:var(--muted);cursor:pointer;line-height:1;font-size:18px;padding:0 0 0 4px}.omniclose:hover{color:var(--ink)}
.omnibar{position:relative}.omniplus{position:relative}
.omnimenu{position:absolute;bottom:52px;left:0;min-width:270px;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:14px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.omniopt{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;cursor:pointer;font-size:14px}.omniopt:hover{background:var(--surface2)}.omniopt .ic{width:18px;height:18px}
.omnichip{display:inline-flex;align-items:center;gap:6px;max-width:45%;padding:4px 6px 4px 4px;border-radius:999px;background:var(--surface2);font-size:13px;flex:none}.omnichip img{width:26px;height:26px;border-radius:50%;object-fit:cover}.omnichip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.omnichip button{border:0;background:none;color:inherit;cursor:pointer;font-size:15px}
.omnimini{position:absolute;right:0;bottom:0;width:52px;height:52px;border-radius:50%;border:0;background:var(--forest);color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25);display:grid;place-items:center;cursor:pointer}.omnimini .ic{width:22px;height:22px}
@media (max-width:560px){.omnichip{max-width:38%}.omnichip span{display:none}}
/* ---------- My library ---------- */
.libcard{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}.libcard>div{display:flex;flex-direction:column;gap:4px;flex:1;min-width:220px}
.libbar{height:8px;border-radius:999px;background:var(--surface2);overflow:hidden;max-width:420px}.libbar i{display:block;height:100%;background:var(--accent)}
[data-acard]{position:relative}.libmark{position:absolute;bottom:8px;right:8px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--surface);color:var(--muted);box-shadow:var(--shadow)}.libmark.in{color:var(--ok)}.libmark .ic{width:15px;height:15px}
.libdel{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;opacity:0;transition:opacity .15s}[data-acard]:hover .libdel,.libdel:focus{opacity:1}@media (hover:none){.libdel{opacity:1}}
.libconfirm{position:absolute;left:6px;right:6px;top:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 8px;border-radius:10px;background:var(--surface);box-shadow:var(--shadow);font-size:12.5px;z-index:2}
/* ---------- Public profile settings ---------- */
.pfform h3{margin:20px 0 8px}.pfform .stcard{display:flex;flex-direction:column;gap:12px}
.pfpub{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--surface2)}.pfpub>div{display:flex;flex-direction:column;gap:2px}.pfpub.on{background:color-mix(in srgb,var(--ok) 12%,var(--surface))}
.pfaddr{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}.pfaddr span{padding:0 4px 0 10px;color:var(--muted);font-size:14px;white-space:nowrap}.pfaddr input{border:0;flex:1;min-width:0}
.pfavs{display:flex;gap:10px;flex-wrap:wrap}.pfav input{position:absolute;opacity:0}.pfav img,.pfavimg{width:58px;height:58px;border-radius:50%;object-fit:cover;display:grid;place-items:center;color:#fff;font-weight:700;font-size:22px;border:3px solid transparent;cursor:pointer}.pfav input:checked+img,.pfav input:checked+.pfavimg{border-color:var(--accent)}.pfav input:focus-visible+*{outline:2px solid var(--focus)}
.pfaccents{display:flex;gap:8px;flex-wrap:wrap}.pfaccents input{position:absolute;opacity:0}.pfaccents i{display:block;width:30px;height:30px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line);cursor:pointer}.pfaccents input:checked+i{box-shadow:0 0 0 2px var(--ink)}
.pfdesigns{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
/* ---------- Before you buy ---------- */
.bcon{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);margin:12px 0;cursor:pointer}.bcon input{width:20px;height:20px;margin-top:2px;flex:none}
.ckconsent{padding:10px 12px;border-radius:10px;background:var(--surface2)}
/* accessibility (js/a11y.js) */
.a11yskip{position:fixed;left:12px;top:-60px;z-index:10000;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none;transition:top .15s}
.a11yskip:focus{top:12px;outline:3px solid var(--ink,#000);outline-offset:2px}
.a11ysr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-act][role]:focus-visible,#main:focus-visible,#dialog:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#main:focus:not(:focus-visible),#dialog:focus:not(:focus-visible){outline:none}
/* Marketplace reports (js/pack-reports.js) */
.rpcats{border:0;padding:0;margin:0 0 6px;display:grid;gap:4px}.rpcats legend{font-weight:600;margin-bottom:6px}
.rplink input{width:100%;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.rpreport{margin-top:10px}.rpnav{margin:0 0 14px 8px}.rpcard{margin-bottom:12px}.rpdet{white-space:pre-wrap;background:var(--bg);border-radius:8px;padding:8px 10px}
.rpappeal{border-left:3px solid var(--accent);padding-left:10px;margin-top:10px}
/* touch screens: tick boxes and radio buttons at least 24 px (WCAG 2.2 target size) */
@media (pointer:coarse){input[type=checkbox],input[type=radio]{min-width:24px;min-height:24px}}
/* Everyday designs (js/everyday-builders.js) */
.evgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.evcard{text-decoration:none;color:inherit;display:block}
.evform{max-width:720px}.evform textarea{font-family:inherit;min-height:110px}
/* "What do you do?" on Home (js/org-start.js) */
.ospick{margin:18px 0}.ospick h2{margin:0 0 4px}.osfind{max-width:420px}
.oslist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;max-height:320px;overflow:auto;margin-top:10px;padding:2px}
.osorg{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;min-height:44px}
.osorg span{font-size:12px;color:var(--muted)}.osorg:hover,.osorg:focus-visible{border-color:var(--accent)}
.osfor{margin:18px 0}.ostiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:8px}
.ostile{text-align:left;font:inherit;cursor:pointer;min-height:56px;display:flex;align-items:center}
/* rich text editing (js/rich-text.js): the editing box keeps line breaks; the style bar floats above it */
div.tedit{white-space:pre-wrap;overflow-wrap:break-word;cursor:text}
.rtbar{position:absolute;z-index:6;display:flex;gap:2px;align-items:center;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:9px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.rtbar button{min-width:30px;height:30px;border:0;border-radius:6px;background:transparent;color:var(--ink);font:600 13px/1 var(--ui-font,inherit);cursor:pointer;padding:0 6px}
.rtbar button:hover,.rtbar button:focus-visible{background:var(--soft,rgba(0,0,0,.06))}
.rtbar .rtsw{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.25);vertical-align:middle}
.rtbar .rtsep{width:1px;height:18px;background:var(--line);margin:0 3px}
/* presenting with an audience (js/audience.js) */
#presenter .aqover{position:absolute;right:24px;bottom:72px;max-height:calc(100% - 96px);overflow:auto;z-index:3;background:#fff;color:#111;border-radius:16px;padding:18px 22px;box-shadow:0 12px 40px rgba(0,0,0,.35);max-width:min(560px,calc(100% - 48px))}
#presenter .aqover[hidden]{display:none}
.aqjoin{display:flex;gap:18px;align-items:center}.aqjoin svg{flex:none;width:min(160px,24vh);height:min(160px,24vh)}
.aqjoin p{margin:0 0 4px}.aqcode{font-size:40px;font-weight:700;letter-spacing:.18em;line-height:1.1}.aqurl{font-size:13px;color:#444;word-break:break-all}.aqhint{font-size:12px;color:#555}
.aqres{min-width:min(460px,80vw)}.aqres h2{margin:0 0 12px;font-size:22px}
.aqbar{position:relative;display:flex;justify-content:space-between;gap:10px;padding:8px 10px;margin:6px 0;border-radius:8px;background:color-mix(in srgb,currentColor 7%,transparent);overflow:hidden}
.aqbar i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--accent,#2f6f4f) 28%,transparent);z-index:0}.aqbar span,.aqbar b{position:relative;z-index:1}
.aqbar.small{padding:5px 8px;font-size:14px}.aqbar.mine{outline:2px solid var(--accent,#2f6f4f)}
.jn{max-width:640px}.jn .card{margin-bottom:12px}.jnopts{display:grid;gap:8px;margin-top:8px}.jnopts .btn{justify-content:flex-start;min-height:44px;text-align:left}
.jnq{display:flex;gap:12px;align-items:flex-start}.jnq p{margin:0 0 4px}.jnq.done{opacity:.7}
.jnup{flex:none;min-width:52px;min-height:44px;border-radius:10px;border:1px solid var(--line,#ccc);background:transparent;color:inherit;font-weight:600;cursor:pointer}
.jnup[disabled]{background:color-mix(in srgb,var(--accent,#2f6f4f) 18%,transparent);cursor:default}
.pvwrap{padding:12px}.pvmain{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
.pvnow svg,.pvnext svg{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.15);background:#fff}
.pvside{display:grid;gap:12px}.pvtime{margin-left:auto;font-size:28px;font-variant-numeric:tabular-nums;font-weight:600}
.pvbottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}.pvbottom h3{margin:0 0 8px}
.pvnotes{white-space:pre-wrap;font-size:18px;line-height:1.5;max-height:40vh;overflow:auto}
.pvq{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line,#ddd)}.pvq span{flex:1}.pvq.done{opacity:.6}
@media (max-width:820px){.pvmain,.pvbottom{grid-template-columns:1fr}}
@media (max-width:520px){.aqjoin{flex-direction:column;text-align:center}}
@media (max-height:520px){.aqcode{font-size:28px}#presenter .aqover{padding:10px 14px}}
/* the join page and presenter view stand alone: no Studio menus for the audience */
body.aq-bare #app{display:block;height:100vh}body.aq-bare #app>:not(#main),body.aq-bare #omniHost{display:none!important}
body.aq-bare #main{height:100vh;overflow:auto;padding-bottom:24px}
/* direct links (js/live-rtc.js): pointers update ~30 times a second, so they barely glide; a dragged item's outline moves live */
.lcur.direct{transition:left .07s linear,top .07s linear}
.lghost{outline-style:dashed;background:color-mix(in srgb,var(--c) 12%,transparent)}
/* accessibility check (js/a11y-check.js) */
.axrow{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line,#ddd)}
.axlv{flex:none;font:600 11px/1 system-ui;padding:4px 7px;border-radius:6px;margin-top:2px;background:var(--soft,#eee);color:var(--ink,#111)}
.ax-error .axlv{background:#b3261e;color:#fff}.ax-warn .axlv{background:#f2c94c;color:#1a1a1a}.ax-info .axlv{background:var(--soft,#e8eef0)}
.axbar{position:sticky;top:6px;z-index:40;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px auto;width:max-content;max-width:calc(100% - 16px);padding:6px 10px;border-radius:10px;background:var(--surface,#fff);color:var(--ink,#111);box-shadow:0 4px 18px rgba(0,0,0,.18);font-size:13px}
.axnum{position:absolute;z-index:35;transform:translate(-40%,-40%);min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#1f5fbf;color:#fff;font:700 12px/22px system-ui;text-align:center;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.axnum.wait{background:#7a7a7a}
.axinsp{margin-top:10px;padding-top:10px;border-top:1px solid var(--line,#ddd)}
/* timeline snapping guide (js/video-edit.js) */
.vusnap{position:absolute;top:0;bottom:0;width:0;border-left:1.5px dashed var(--accent,#e0a100);pointer-events:none;z-index:20}
/* transcript editing (js/video-words.js) */
.wdhost{margin-top:10px;padding:10px 12px;border:1px solid var(--line,#ddd);border-radius:12px;background:var(--surface,#fff)}.wdhost[hidden]{display:none}
.wdtext{margin-top:8px;max-height:180px;overflow:auto;line-height:1.9;font-size:15px;user-select:none;outline-offset:2px}
.wdtext span{padding:2px 1px;border-radius:4px;cursor:pointer}.wdtext span:hover{background:color-mix(in srgb,var(--accent,#e0a100) 18%,transparent)}
.wdtext span.cur{background:color-mix(in srgb,var(--accent,#e0a100) 35%,transparent)}.wdtext span.sel{background:#1f5fbf;color:#fff}.wdtext span.fill{text-decoration:underline dotted;opacity:.75}
.wdstale{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:#fff4d6;color:#4a3a00}
/* scene look panel (js/video-look.js) */
.vlbox{border:1px solid var(--line,#ddd);border-radius:10px;padding:6px 10px;margin:8px 0}.vlbox summary{cursor:pointer;font-weight:600;padding:4px 0}
.vlr span{float:right;font-variant-numeric:tabular-nums}.vlcols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* flashing warning (js/flash-check.js) */
.fzwarn{color:#8a1c12;background:#fde8e4;padding:6px 8px;border-radius:8px;display:inline-block}
/* stock video (js/stock-video.js) */
.xvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px}
.xvtile{position:relative;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#111;aspect-ratio:16/10;cursor:pointer}.xvtile.on{border-color:var(--accent,#e0a100)}
.xvtile img{width:100%;height:100%;object-fit:cover;display:block}.xvdur,.xvsrc{position:absolute;bottom:5px;font:600 11px/1 system-ui;color:#fff;background:rgba(0,0,0,.65);padding:3px 6px;border-radius:5px}.xvdur{right:5px}.xvsrc{left:5px}
.xvcred{white-space:pre-wrap;font-size:13px;background:var(--soft,#f3f3f3);padding:8px;border-radius:8px;max-height:140px;overflow:auto}
/* company line and brands (js/site-footer.js), as on the other DALFAST sites */
.sftfoot{margin:40px 0 16px;font-size:13px;color:#b9c7d3;background:#0f2538;border:1px solid #1f3a52;border-radius:14px;overflow:hidden}/* one panel: brands, then links and the company line */
.sftbrands{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:16px 22px;border-bottom:1px solid #1f3a52}
.sftbrands a{color:#cfdbe6;text-decoration:none;font-weight:600}.sftbrands a:hover,.sftbrands a:focus-visible{color:#fff;text-decoration:underline}
.sftlabel{color:var(--cy,#00b3ff);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:11px;margin-right:6px}.sftbrands a.sfteco{color:var(--cy,#00b3ff)}
.sftlinks{margin:0;padding:14px 22px 6px}.sftlinks a{color:#e6eef5}.sftlinks a:hover,.sftlinks a:focus-visible{color:#fff}.sftco{margin:0;padding:2px 22px;line-height:1.55}.sftco:last-child{padding-bottom:16px}
body.has-omni .sftfoot{margin-bottom:96px}/* the floating Ask bar must not cover the company line */
/* "The Studio has been updated" (js/offline.js) */
.offupd{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:400;display:flex;gap:10px;align-items:center;padding:8px 10px 8px 14px;border-radius:12px;background:var(--surface,#fff);color:var(--ink,#111);box-shadow:0 8px 28px rgba(0,0,0,.3);font-size:14px;max-width:calc(100% - 24px)}
/* the footer sits in the page column; on its own it gets the standard centred column */
.sftfoot.solo{max-width:none;margin:40px auto 16px}body.has-omni .sftfoot.solo{margin-bottom:96px}
@media (max-width:760px){.sftfoot.solo{margin-left:16px;margin-right:16px}.sftbrands{padding:12px 16px;gap:8px 16px}.sftlinks{padding:12px 16px 6px}.sftco{padding:2px 16px}}
/* page & content library (js/page-library.js) */
#dialog.plwide{max-width:min(1180px,96vw);width:96vw}
.pllib .plsec{margin:14px 0 6px}.pllib .plsec h3{margin:0 0 8px;font-size:14px;letter-spacing:.02em}
.pllib .grid.sm{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}.plcard .thumb svg{width:100%;height:auto;display:block}.plcard[hidden],.plsec[hidden]{display:none}
/* Pages & blocks side panel: drag into the workspace */
.plpgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.plpc{display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid var(--line);border-radius:8px;background:transparent;cursor:grab;text-align:left;font:inherit;color:inherit}
.plpc:hover,.plpc:focus-visible{border-color:var(--accent)}.plpc:active,.plpc.dragging{cursor:grabbing;opacity:.6}
.plpc .thumb{display:block;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}.plpc .thumb svg{width:100%;height:auto;display:block}
.plpc .t{font-size:12px;line-height:1.25}.plpc[hidden],.plpanel .plsec[hidden]{display:none}
.plpanel .plsec h4{margin:12px 0 6px}
.pthumb.pldrop-before{box-shadow:-4px 0 0 var(--accent)}.pthumb.pldrop-after{box-shadow:4px 0 0 var(--accent)}

/* library previews: no 4:3 box; the page itself, as large as the card allows */
.pllib .plcard .thumb{aspect-ratio:auto;padding:8px;min-height:0}.pllib .plcard .thumb svg{max-height:260px;width:auto;max-width:100%}
.pllib.plwidepg .grid.sm{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.plpanel.plwidepg .plpgrid{grid-template-columns:1fr}
/* template preview: one page shown large; similar designs at their own shape, not a thin strip in a square box */
.tplpv.one{grid-template-columns:minmax(0,760px)}.tplpv.one .thumb{padding:0;background:none}.tplpv.one .thumb svg{width:100%;height:auto;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.tplsim .tplcard .thumb{aspect-ratio:auto;min-height:0;padding:10px}.tplsim .tplcard .thumb svg{width:100%;height:auto}
.ddnote{background:var(--accent-soft);border-radius:8px;padding:10px 12px;margin:0 0 12px}
/* a dropdown never grows past its row because of a long option (Convert → Voice was cut off on phones) */
select{max-width:100%}.row>.f{min-width:0;max-width:100%}.f select{width:100%;min-width:0;text-overflow:ellipsis}
/* sidebar groups: More tools and Editor panels open and close */
.side h2.sgfold{margin:14px 0 2px}.sgfold button{display:flex;align-items:center;gap:6px;width:100%;background:none;border:0;padding:4px 10px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;border-radius:6px}
.sgfold button:hover{color:var(--ink)}.sgfold .sgcount{font-size:10px;letter-spacing:0;background:var(--surface2);border-radius:999px;padding:0 6px;margin-left:2px}.sgfold .sgchev{width:14px;height:14px;margin-left:auto;transition:transform .15s}
.sgfold button[aria-expanded="true"] .sgchev{transform:rotate(180deg)}.sggroup[hidden]{display:none}
.collapsed .sgfold button{font-size:0;padding:0}.collapsed .sgfold .sgcount{display:none}
/* ===== video editor (js/video-studio.js) ===== */
.vstudio{display:grid;grid-template-columns:72px 300px minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr) 330px;grid-template-areas:"rail panel stage insp" "tl tl tl tl";height:calc(100vh - 112px);min-height:560px;background:var(--canvas)}
.vsrail{grid-area:rail;display:flex;flex-direction:column;gap:2px;padding:8px 6px;overflow-y:auto;background:var(--surface);border-right:1px solid var(--line)}
.vsrail button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;flex:none;border:0;border-radius:10px;background:none;color:var(--muted);font:inherit;font-size:11px;cursor:pointer}
.vsrail button .ic{width:22px;height:22px}.vsrail button:hover{background:var(--surface2);color:var(--ink)}.vsrail button[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink)}
.vspanel{grid-area:panel;overflow:auto;padding:14px 14px 20px;background:var(--surface);border-right:1px solid var(--line)}
.vshead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.vshead h3{margin:0;font-size:16px}
.vspanel h4{margin:16px 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vstiles{display:grid;gap:8px}.vstile{display:flex;gap:12px;align-items:center;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--ink);font:inherit;cursor:pointer}
.vstile:hover{border-color:var(--accent)}.vstile .ic{width:22px;height:22px;flex:none;color:var(--accent)}.vstile b{display:block;font-size:14px}.vstile small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.vsscenes{list-style:none;margin:0;padding:0;display:grid;gap:6px}.vsscenes li button{display:flex;gap:10px;align-items:center;width:100%;padding:6px;border:1px solid transparent;border-radius:10px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.vsscenes li button:hover{background:var(--surface2)}.vsscenes li.on button{background:var(--accent-soft);border-color:var(--accent)}
.vsthumb{width:64px;height:40px;flex:none;border-radius:6px;overflow:hidden;background:var(--surface2);display:grid;place-items:center;color:var(--muted)}.vsthumb img{width:100%;height:100%;object-fit:cover}
.vsmeta{min-width:0}.vsmeta b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vsmeta small{color:var(--muted);font-size:11.5px}
.vsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.vsasset{display:flex;flex-direction:column;gap:3px;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface2);color:var(--ink);cursor:pointer;font:inherit}
.vsasset img,.vsasset .ic{width:100%;aspect-ratio:16/10;object-fit:cover}.vsasset .ic{padding:14px;color:var(--muted)}.vsasset small{font-size:10.5px;padding:0 5px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vsasset:hover{border-color:var(--accent)}
.vschips{display:flex;flex-wrap:wrap;gap:6px}.vscheck{display:flex;gap:8px;align-items:center;margin-top:14px;font-size:14px}.vscard{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:var(--surface2)}
.vssm{font-size:13px}
.vsstage{grid-area:stage;display:flex;flex-direction:column;min-width:0;min-height:0}
.vstop{display:flex;align-items:center;gap:12px;padding:10px 16px}.vstop .vsdur{flex:1;color:var(--muted);font-size:13px}.vsfmt button{min-width:52px}
.vsview{flex:1;min-height:0;display:grid;place-items:center;padding:4px 20px}.vsview canvas{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.35);background:#000}
.vstransport{display:flex;align-items:center;gap:10px;padding:10px 16px 12px}.vstransport input[type=range]{flex:1}.vstime{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);min-width:96px;text-align:right}
.vsplaybtn{height:40px;min-width:84px;padding:0 18px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;cursor:pointer}
.vsinsp{grid-area:insp;overflow:auto;padding:12px 14px 20px;background:var(--surface);border-left:1px solid var(--line)}
.vsinsp .wpanel h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vstl{grid-area:tl;display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--line);background:var(--surface)}
.vstl .vtbar{flex:none}.vstl .vtl{flex:1;min-height:0;overflow:auto}
.vsbtn .ic{width:15px;height:15px;margin-right:4px;vertical-align:-3px}
body.vs-on .omni-host,body.vs-on #omniHost{display:none}/* the Ask bar covered the timeline */
@media (max-width:1280px){.vstudio{grid-template-columns:64px 260px minmax(0,1fr) 270px}}
@media (max-width:1000px){.vstudio{grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto minmax(320px,50vh) auto 260px;grid-template-areas:"rail stage" "rail stage" "panel insp" "tl tl";height:auto}.vspanel,.vsinsp{grid-column:auto}.vstudio{grid-template-areas:"rail stage" "rail stage" "panel panel" "insp insp" "tl tl";grid-template-rows:auto minmax(300px,48vh) auto auto 260px}}
@media (max-width:640px){.vstudio{grid-template-columns:1fr;grid-template-areas:"stage" "rail" "panel" "insp" "tl";grid-template-rows:minmax(260px,42vh) auto auto auto 260px}.vsrail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}.vsrail button{min-width:64px}}
body.vs-on #main:focus{outline:none}/* the page itself takes focus after navigation; its outline framed the whole editor */
/* the music maker inside the narrow Audio panel: heading on its own line, cards full width */
.vssm .iscard{padding:0;border:0;background:none}.vssm .sthhead{display:block;text-align:left;margin:0 0 8px}.vssm .sthhead b{display:none}.vssm .sthhead .d{display:block;font-size:12.5px}
.vssm .smmoods{display:grid;grid-template-columns:1fr;gap:6px}.vssm .smmood{text-align:left}
/* the picture stays above the play controls; the time is never cut off */
.vsview{position:relative}.vsview canvas{position:absolute;inset:0;margin:auto;max-width:calc(100% - 40px);max-height:calc(100% - 8px)}
.vstransport{padding-right:20px}.vstime{flex:none}
/* free stock photos (js/stock-photos.js) */
.xpsearch{display:flex;gap:6px;margin:4px 0 10px}.xpsearch input{flex:1;min-width:0}
.xpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.toolpanel .xpgrid{grid-template-columns:1fr 1fr}
.xpitem{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface2);display:flex;flex-direction:column}
.xpitem img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.xpitem figcaption{padding:6px;display:flex;flex-direction:column;gap:4px}
.xpbtns{display:flex;gap:4px}.xpbtns .btn.primary{flex:1}.xpbtns .ic{width:15px;height:15px}.xpcred{font-size:11px;color:var(--muted);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.xpcred:hover{text-decoration:underline}
.xpnote{font-size:11.5px;margin-top:8px}.xpsec>summary{display:flex;align-items:baseline;gap:8px;cursor:pointer;list-style:none}.xpsec>summary h4{margin:10px 0 6px}.xpsec>summary::-webkit-details-marker{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* video templates and brand (js/video-templates.js) */
.vtpgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.vtpcard{display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.vtpcard:hover{border-color:var(--accent)}.vtpcard.busy{opacity:.6;pointer-events:none}.vtpcard b{font-size:13px;line-height:1.2}.vtpcard small{font-size:11px;color:var(--muted)}
.vtpthumb{display:grid;place-items:center;height:118px;background:var(--canvas);border-radius:6px;overflow:hidden}.vtpthumb svg{display:block;max-width:100%;max-height:110px;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.vtpthumb.landscape svg{width:100%}.vtpthumb.portrait svg{height:110px}.vtpthumb.square svg{height:100px}
.vtpbrands{display:grid;gap:6px}.vtpbrand{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.vtpbrand[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}.vtpbrand .sw{display:flex;flex:none}.vtpbrand .sw i{width:12px;height:28px;display:block}.vtpbrand .sw i:first-child{border-radius:5px 0 0 5px}.vtpbrand .sw i:last-child{border-radius:0 5px 5px 0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.vtpbrand b{display:block;font-size:14px}.vtpbrand small{color:var(--muted);font-size:11.5px}
.vtplogo{display:flex;gap:10px;align-items:center}.vtplogo img{width:64px;height:40px;object-fit:contain;background:var(--surface2);border-radius:6px;padding:4px}
/* animated text styles (js/video-motion.js): each card plays its style */
.vfxgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.vfxcard{display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.vfxcard:hover,.vfxcard.on{border-color:var(--accent)}.vfxcard small{font-size:11.5px;color:var(--muted)}
.vfxprev{display:grid;place-items:center;height:64px;border-radius:6px;background:var(--vfx-bg);overflow:hidden}
.vfxw{font:700 17px/1.1 var(--vfx-head);color:#fff;text-align:center;display:inline-block;animation:2.4s ease-out infinite both}
.vfx-words,.vfx-letters{animation-name:vfxRise}.vfx-glow{animation-name:vfxGlow;text-shadow:0 0 10px var(--vfx-acc)}.vfx-underline{animation-name:vfxRise;box-shadow:inset 0 -3px 0 var(--vfx-acc)}
.vfx-highlight{background:var(--vfx-acc);padding:1px 6px;animation-name:vfxWipe}.vfx-track{animation-name:vfxTrack}.vfx-bounce{animation-name:vfxBounce}.vfx-zoom{animation-name:vfxZoom}
.vfx-split{animation-name:vfxRise;font-size:14px}.vfx-box{background:color-mix(in srgb,var(--vfx-bg) 70%,#000);border-bottom:3px solid var(--vfx-acc);padding:3px 8px;animation-name:vfxWipe;font-family:var(--vfx-body);font-size:14px}
.vfx-outline{-webkit-text-stroke:1px var(--vfx-acc);color:transparent;animation-name:vfxFill}.vfx-retro{text-shadow:3px 3px 0 var(--vfx-acc);animation-name:vfxBounce}
@keyframes vfxRise{0%{opacity:0;transform:translateY(10px)}25%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vfxGlow{0%{opacity:0}25%{opacity:1;text-shadow:0 0 4px var(--vfx-acc)}55%{text-shadow:0 0 16px var(--vfx-acc)}85%{opacity:1}100%{opacity:0}}
@keyframes vfxWipe{0%{clip-path:inset(0 100% 0 0)}30%,85%{clip-path:inset(0 0 0 0);opacity:1}100%{opacity:0}}
@keyframes vfxTrack{0%{opacity:0;letter-spacing:.5em}35%,85%{opacity:1;letter-spacing:0}100%{opacity:0}}
@keyframes vfxBounce{0%{opacity:0;transform:translateY(-30px)}20%{opacity:1;transform:translateY(0)}28%{transform:translateY(-8px)}36%,85%{transform:none;opacity:1}100%{opacity:0}}
@keyframes vfxZoom{0%{opacity:0;transform:scale(1.5)}30%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vfxFill{0%{opacity:0}20%{opacity:1;color:transparent}50%,85%{color:#fff;opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.vfxw{animation:none}}
/* picture in picture */
.vtb.ov{background:color-mix(in srgb,var(--accent) 35%,var(--surface2))}.pipgrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
/* sound waves on the timeline (js/video-polish.js) */
.vtb.au{position:absolute}.vtb .vtwave{position:absolute;inset:2px 0;width:100%;height:calc(100% - 4px);fill:color-mix(in srgb,#3aa57b 70%,var(--ink));opacity:.55;pointer-events:none}.vtb.au span{position:relative;z-index:1;text-shadow:0 1px 2px var(--surface2)}
/* transitions you can see */
.trgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.trcard{display:flex;flex-direction:column;gap:3px;padding:4px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--ink);font:inherit;cursor:pointer}
.trcard.on,.trcard:hover{border-color:var(--accent)}.trcard small{font-size:10.5px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trprev{position:relative;display:block;aspect-ratio:16/10;border-radius:5px;overflow:hidden;background:#000}.trprev i{position:absolute;inset:0;display:grid;place-items:center;font:700 13px/1 sans-serif;font-style:normal;color:#fff}
.trprev .a{background:var(--trA)}.trprev .b{background:var(--trB)}
.tr-fade .b{animation:trFade 2.4s infinite}.tr-slide .b{animation:trSlide 2.4s infinite}.tr-push .a{animation:trPushA 2.4s infinite}.tr-push .b{animation:trSlide 2.4s infinite}
.tr-zoom .b{animation:trZoom 2.4s infinite}.tr-wipe .b{animation:trWipe 2.4s infinite}.tr-dip .a{animation:trDipA 2.4s infinite}.tr-dip .b{animation:trDipB 2.4s infinite}.tr-blur .a{animation:trBlurA 2.4s infinite}.tr-blur .b{animation:trBlurB 2.4s infinite}.tr-none .b{animation:trCut 2.4s infinite steps(1)}
@keyframes trFade{0%,30%{opacity:0}60%,100%{opacity:1}}@keyframes trSlide{0%,30%{transform:translateX(100%)}60%,100%{transform:none}}@keyframes trPushA{0%,30%{transform:none}60%,100%{transform:translateX(-100%)}}
@keyframes trZoom{0%,30%{opacity:0;transform:scale(1.6)}60%,100%{opacity:1;transform:none}}@keyframes trWipe{0%,30%{clip-path:inset(0 100% 0 0)}60%,100%{clip-path:inset(0 0 0 0)}}
@keyframes trDipA{0%,25%{opacity:1}45%,100%{opacity:0}}@keyframes trDipB{0%,50%{opacity:0}75%,100%{opacity:1}}@keyframes trBlurA{0%,30%{filter:none}55%,100%{filter:blur(6px);opacity:0}}@keyframes trBlurB{0%,40%{opacity:0;filter:blur(6px)}70%,100%{opacity:1;filter:none}}@keyframes trCut{0%{opacity:0}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.trprev i{animation:none!important}}
/* DALFAST originals on Home (new-images.js) */
.nisec{margin:18px 0 8px}.nigrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin:10px 0}
.nicard{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--panel,#fff);border:1px solid var(--line,#e5e0d8);border-radius:12px;padding:8px;cursor:pointer;color:inherit;font:inherit}
.nicard:hover,.nicard:focus-visible{border-color:var(--accent,#b48a4e);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.nithumb{display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:var(--soft,#f3efe8);border-radius:8px;overflow:hidden}.nithumb svg{max-width:100%;max-height:100%;height:auto;width:auto}
.nicard b{font-size:13px;line-height:1.25}.nicard small{font-size:11.5px;opacity:.75;line-height:1.3}
.ninew{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;line-height:1;padding:3px 6px;border-radius:999px;background:#e8603c;color:#fff;vertical-align:middle;text-transform:uppercase}
.ninew.corner{position:absolute;top:8px;left:8px;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.tplcard,.phtile,.nicard{position:relative}
.nidot{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:auto;border-radius:999px;background:#e8603c;color:#fff;font-size:10.5px;font-weight:700}
.nifilter{margin:0 0 8px;align-items:center}.nilabel{min-width:52px;font-size:12px}
/* Marketing Studio (marketing-studio.js) */
.mssteps{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 14px;flex-wrap:wrap}.mssteps button{border:1px solid var(--line,#ddd);background:none;border-radius:999px;padding:6px 14px;color:inherit;font:inherit;cursor:pointer}
.mssteps li.on button{background:var(--accent,#b48a4e);color:#fff;border-color:transparent}.mssteps li.done button{opacity:.8}.mssteps button:disabled{opacity:.45;cursor:default}
.mscard{background:var(--panel,#fff);border:1px solid var(--line,#e5e0d8);border-radius:14px;padding:18px;margin-bottom:14px}
.msgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin:8px 0 14px}.msout{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin:10px 0}
.msopt{border:2px solid transparent;border-radius:10px;padding:2px;background:none;cursor:pointer}.msopt.on{border-color:var(--accent,#b48a4e)}.msopt.plain .msimg{display:flex;align-items:center;justify-content:center;width:104px;height:104px;font-size:12px;color:#333}
.msimg{display:block;border-radius:8px;overflow:hidden;background:repeating-conic-gradient(#e9e6e1 0 25%,#fff 0 50%) 50%/14px 14px}.msimg img{width:100%;height:100%;object-fit:cover;display:block}.msgrid .msopt .msimg img{object-fit:contain}
.msprod{display:flex;gap:14px;align-items:center;margin-top:12px}.msprod .msimg{width:120px;height:120px}.msprod .msimg img{object-fit:contain}.msup{margin-top:6px}.msfmts{display:grid;gap:8px;margin:8px 0 14px}
/* plans page, premium look (pricing.js): coloured plan cards, real saving pill, seats for Teams */
:root{--pop:#c6f432;--pop-ink:#12210a;--pop2:#ff3d8b}
.prpage .prgrid{gap:14px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}/* five plans in one row on a laptop (Basic added 27 Oct 2026) */
.prpage .prplan{position:relative;overflow:hidden;border-radius:18px;padding:22px;border:1px solid var(--line,#e5e0d8);transition:transform .15s,box-shadow .15s}
.prpage .prplan:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.prpage .prplan .prprice b{font-size:34px;letter-spacing:-.02em}
.prpage .prplan.pl-plus{background:linear-gradient(160deg,rgba(80,160,255,.10),transparent 55%)}
.prpage .prplan.pl-pro{background:linear-gradient(160deg,rgba(198,244,50,.22),rgba(198,244,50,.03) 60%);border-color:var(--pop)}
.prpage .prplan.pl-teams{background:linear-gradient(160deg,rgba(255,61,139,.12),transparent 55%)}
.prpage .prplan.pl-pro .btn.primary,.prpage .prplan.pl-pro [data-act="prTrial"]{background:var(--pop);color:var(--pop-ink);border-color:var(--pop);font-weight:700}
.prsave{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--pop);color:var(--pop-ink);font-size:11px;font-weight:800;letter-spacing:.02em}
.prseats{display:flex;align-items:center;gap:8px;margin:10px 0;padding:8px 10px;border-radius:12px;background:rgba(127,127,127,.08);flex-wrap:wrap}.prseats b{min-width:72px;text-align:center}.prseats .d{margin-left:auto}.prpage .prseats{justify-content:center}.prpage .prseats b{min-width:0;flex:1}.prpage .prseats .iconbtn{flex:0 0 auto}.prpage .prseats .d{flex-basis:100%;margin-left:0;text-align:center}
/* pop-ups (promo-popups.js): a corner card, never blocking the page */
.pp{position:fixed;right:18px;bottom:18px;z-index:9000;width:min(360px,calc(100vw - 36px));padding:0;overflow:hidden;border-radius:18px;background:#14181d;color:#f3f4f1;box-shadow:0 18px 50px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);animation:ppIn .35s ease-out}
.pp p{margin:6px 0 10px;color:#c9ccd1;font-size:13.5px;line-height:1.45}.pph{display:block;font-size:19px;line-height:1.2;margin-top:8px}
.ppbadge{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--pop,#c6f432);color:var(--pop-ink,#12210a);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.ppbadge.new{background:#e8603c;color:#fff}
.pp .btn.primary{background:var(--pop,#c6f432);color:var(--pop-ink,#12210a);border-color:transparent;font-weight:700}
/* the moving picture on top (Higgsfield-style pop-ups, Oct 2026) */
.ppbody{padding:16px 18px 16px}.ppmedia{position:relative;aspect-ratio:16/9;background:#0b0e11;overflow:hidden}.ppmedia video{width:100%;height:100%;object-fit:cover;display:block}.ppmedia::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,#14181d)}
.pp .ppx{z-index:2;background:rgba(0,0,0,.45);color:#fff;border-radius:999px}.pp .ppacts{display:flex;flex-wrap:wrap;gap:8px}.pp .btn.ghost{background:transparent;color:#f3f4f1;border:1px solid rgba(255,255,255,.22)}
.ppbadge.xm{background:linear-gradient(135deg,#5ff0ff,#00b3ff);color:#04222a}.ppbadge.sp{background:#fff;color:#14181d}
.ppx{position:absolute;top:8px;right:8px;color:#c9ccd1}.pptime{font-variant-numeric:tabular-nums}.pptime b{color:var(--pop2,#ff3d8b)}
@keyframes ppIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.pp{animation:none}}
/* Share (#/share): the design large on the left, the check and every way out on the right */
.share .shgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr);gap:28px;align-items:start;margin-top:14px}
.shpv{position:sticky;top:0}
.shpage{background:var(--canvas);border-radius:16px;padding:28px;display:grid;place-items:center}
.shpage svg{width:100%;height:auto;max-height:calc(100vh - 300px);box-shadow:0 2px 6px #0000001f,0 18px 40px #00000024;border-radius:3px}
.shthumbs{display:flex;gap:8px;overflow-x:auto;padding:12px 2px 4px}
.shthumbs button{flex:none;width:76px;padding:4px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);display:grid;gap:2px;justify-items:center}
.shthumbs button[aria-selected="true"]{border-color:var(--accent)}
.shthumbs svg{width:100%;height:auto}.shthumbs span{font-size:11px;color:var(--muted)}
.shside{display:grid;gap:14px}
.shcheck{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:start;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.shcheck>div:nth-child(2){display:grid;gap:2px}.shcheck b{font-size:16px}
.shbadge{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:18px;color:#fff;background:var(--ok)}
.shcheck.warn .shbadge{background:var(--warn)}.shcheck.err .shbadge{background:var(--err)}
.shlist{grid-column:1/-1;list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.shlist li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:var(--surface2)}
.shcheck>.btn{grid-column:1/-1;justify-self:start}
.shh{margin:6px 0 -4px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.shtiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shtile{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.shtile .ic{grid-row:1/3;width:24px;height:24px;align-self:center;color:var(--accent)}
.shtile b{font-size:15px}.shtile span{font-size:12px;color:var(--muted)}
.shtile:hover{border-color:var(--accent)}.shtile:disabled{opacity:.5}
.shtile.main{grid-column:1/-1;background:var(--forest);border-color:var(--forest);color:#fff}.shtile.main span{color:#cfe0d5}.shtile.main .ic{color:#f3e6c9}
.shsend{display:flex;flex-wrap:wrap;gap:8px}
.shchip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:99px;border:1px solid var(--line);background:var(--surface)}
.shchip:hover{border-color:var(--accent)}.shchip:disabled{opacity:.5}
.shprint{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:14px;background:var(--accent-soft)}
.shprint>div{display:grid;gap:2px}
.shmore{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.btn.big{padding:14px 20px;font-size:16px;justify-content:center}
.shback{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
@media (max-width:900px){.share .shgrid{grid-template-columns:1fr}.shpv{position:static}.shtiles{grid-template-columns:1fr}}
.shalso{margin:-4px 0 0}
.share .shgrid>div{min-width:0}.shpage svg{max-width:100%}
@media (max-width:600px){.shpage{padding:14px}.share .shgrid{gap:16px}.shprint{flex-direction:column;align-items:flex-start}}
/* the last step: three equal choices, then the options for the chosen one */
.shtabs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.shtabs button{display:grid;justify-items:start;gap:2px;text-align:left;padding:12px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface)}
.shtabs button .ic{width:22px;height:22px;color:var(--accent);margin-bottom:2px}
.shtabs button b{font-size:15px}.shtabs button span{font-size:12px;color:var(--muted);line-height:1.3}
.shtabs button[aria-selected="true"]{border-color:var(--forest2);background:var(--forest);color:#fff}
.shtabs button[aria-selected="true"] span{color:#cfe0d5}.shtabs button[aria-selected="true"] .ic{color:#f3e6c9}
.shpanel{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface2)}
.shopts{display:grid;gap:8px}
.shopt{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;text-align:left;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.shopt .ic{width:24px;height:24px;color:var(--accent)}.shopt span{display:grid;gap:2px}.shopt b{font-size:15px}.shopt small{color:var(--muted);font-size:12.5px;line-height:1.35}
.shopt:first-child{background:var(--forest);border-color:var(--forest);color:#fff}.shopt:first-child small{color:#cfe0d5}.shopt:first-child .ic{color:#f3e6c9}
.shopt:hover,.shtabs button:hover{border-color:var(--accent)}.shopt:disabled{opacity:.5}
@media (max-width:600px){.shtabs{grid-template-columns:1fr}.shtabs button{grid-template-columns:24px 1fr;column-gap:10px}.shtabs button .ic{grid-row:1/3}}
/* Upload anything */
.topup{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;margin-right:6px;border-radius:99px;border:1px solid #ffffff40;background:#ffffff14;color:#fff;font-weight:600}
.topup:hover{background:#ffffff26}
@media (max-width:700px){.topup span{display:none}.topup{padding:7px 9px}}
.updrop{display:grid;justify-items:center;gap:4px;width:100%;padding:28px 16px;margin-top:10px;border:2px dashed var(--line);border-radius:16px;background:var(--surface2);text-align:center}
.updrop:hover{border-color:var(--accent)}.updrop .ic{width:32px;height:32px;color:var(--accent)}.updrop b{font-size:17px}.updrop span{color:var(--muted);font-size:13px}
.upkinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}
.upkinds div{display:grid;grid-template-columns:24px 1fr;column-gap:8px;padding:10px;border-radius:12px;background:var(--surface2)}
.upkinds .ic{grid-row:1/3;color:var(--accent)}.upkinds b{font-size:13.5px}.upkinds span{font-size:12px;color:var(--muted)}
.uplist{display:grid;gap:8px;margin-top:10px}
.upcard{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center}
.upthumb{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:13px}
.upthumb img{width:100%;height:100%;object-fit:cover}.upthumb i{position:absolute;right:3px;bottom:3px;font-style:normal;font-size:10px;font-weight:600;padding:1px 5px;border-radius:6px;background:#000000b0;color:#fff}
.upthumb.aud{background:var(--forest);color:#f3e6c9;font-size:20px;cursor:pointer}.upthumb.aud.on{background:var(--accent);color:var(--accent-ink)}
.upthumb.doc{background:var(--accent-soft);color:var(--accent)}.upthumb.e-pdf{background:#f6dcd8;color:#a3271d}.upthumb.e-docx,.upthumb.e-doc{background:#dbe6f6;color:#24508f}.upthumb.e-pptx,.upthumb.e-ppt{background:#f7e2d2;color:#a24a14}.upthumb.e-xlsx,.upthumb.e-xls,.upthumb.e-csv{background:#dcefe1;color:#226a3c}
.upmeta{display:grid;gap:2px;min-width:0;justify-items:start}.upmeta b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.upmeta span{font-size:12px;color:var(--muted)}.upmeta .btn{margin-top:4px}
.card .upcard{grid-template-columns:1fr;justify-items:stretch}.card .upthumb{width:100%;height:110px}
.updrag{position:fixed;inset:0;z-index:9000;display:none;place-items:center;background:#203c32cc;pointer-events:none}
.updrag.on{display:grid}.updrag div{display:grid;justify-items:center;gap:6px;padding:36px 48px;border:3px dashed #f3e6c9;border-radius:24px;color:#fff;text-align:center}
.updrag .ic{width:44px;height:44px;color:#f3e6c9}.updrag b{font-size:24px}
/* DALFAST originals page */
.ogbar{margin:4px 0 10px}.ogsearch{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.oggroups .chip small{opacity:.7;margin-left:4px}
.oggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:8px 0 6px}
.ogtile{display:grid;gap:6px;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);text-align:left}
.ogtile img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--surface2)}
.ogtile.cut img,.ogimg.cut{object-fit:contain;background:repeating-conic-gradient(#e7ebe6 0 25%,#f7f9f6 0 50%) 0 0/16px 16px}
.ogtile span{padding:0 10px 10px;font-size:12px;color:var(--muted);line-height:1.3}
.ogtile:hover{border-color:var(--accent)}
.ogsub{margin:22px 0 4px;font-size:16px}.ogsub small{color:var(--muted);font-weight:500}
.modal.ogmodal .box,.ogmodal>div{max-width:min(1200px,96vw)}
.ogview{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:20px;align-items:start}
.ogimg{border-radius:12px;overflow:hidden;background:var(--surface2);display:grid;place-items:center}
.ogimg img{max-width:100%;max-height:72vh;display:block}
.ogside{display:grid;gap:10px}.ogside h2{font-size:18px;margin:0}.ognav{justify-content:space-between;margin-top:8px}
@media (max-width:800px){.ogview{grid-template-columns:1fr}.oggrid{grid-template-columns:repeat(2,1fr)}}
.oggroups{flex-wrap:wrap;gap:6px}
.ogmode{margin:2px 0 12px}.ogmode button small{opacity:.7;margin-left:4px}
/* calm layer: the step bar only while a design is open; Home's secondary sections quieter */
.app.noproj{grid-template-rows:56px 0 1fr}.app.noproj #stagebar{visibility:hidden;height:0;min-height:0;padding:0;border:0;overflow:hidden}
.calmsub{margin-top:34px;color:var(--muted);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.calmorg{margin-top:28px}
#side .nidot{display:none}
.hero.calmsolo{grid-template-columns:1fr}.gfcard{margin:6px 0 18px}
.nidot{display:none}
#side .calmback{margin-bottom:10px;border-bottom:1px solid var(--line);border-radius:10px 10px 0 0;padding-bottom:12px}
/* the editor toolbar in one row */
.canvasbar.calmbar{flex-wrap:nowrap;gap:6px;align-items:center}
.calmbar .cbmenu{position:relative;flex:none}
.calmbar .cbpop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;display:grid;gap:2px;min-width:210px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.calmbar .cbpop>button{display:flex;align-items:center;gap:8px;justify-content:flex-start;width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:0;background:none;font-size:13.5px}
.calmbar .cbpop>button:hover{background:var(--surface2)}
.calmbar .ttebar.inbar{flex:1 1 220px;min-width:140px;margin:0;padding:3px 4px 3px 10px;height:34px;border-radius:99px}
.calmbar .ttebar.inbar input{min-width:0}
.calmbar>.cepill,.calmbar>a.btn{flex:none}
/* the edit bar keeps its place (owner, 1 Nov 2026: "anything you click move specially when you want to edit, click of images"):
   it was hidden with nothing selected, so selecting a picture opened it and pushed the whole page 71px down. Now it is always
   there at one height, saying what to do until something is selected */
@media (min-width:701px){.qdock{height:72px;min-height:72px;box-sizing:border-box}}
@media (max-width:700px){.qdock{height:50px;min-height:50px;box-sizing:border-box}}
/* one-row toolbar v2: the Ask box is an icon until clicked, then opens to its full width */
.calmbar .ttebar.inbar{flex:0 0 38px;width:38px;min-width:38px;padding:0;justify-content:center;cursor:text;overflow:hidden;transition:flex-basis .18s ease}
.calmbar .ttebar.inbar>:not(.ttei){display:none}
.calmbar .ttebar.inbar:focus-within{flex:1 1 260px;width:auto;padding:3px 4px 3px 10px;justify-content:flex-start}
.calmbar .ttebar.inbar:focus-within>:not(.ttei){display:revert}
.calmbar>.spacer{flex:1}
/* never hide a control: when the editor column is narrow the bar takes a second row instead */
.canvasbar.calmbar{flex-wrap:wrap;row-gap:4px}
.calmbar>.menubtn{padding-left:9px;padding-right:9px}
.calmbar .ttebar.inbar.open{flex:1 1 260px;width:auto;padding:3px 4px 3px 10px;justify-content:flex-start}
.calmbar .ttebar.inbar.open>:not(.ttei){display:revert}
/* the price beside "Do it" on one line: the bar is one line tall, so a second line was cut off (owner, 9 Nov 2026) */
.calmbar .ttebar.inbar .btn.primary:has(.pslcr){display:inline-flex;flex-direction:row;align-items:center;gap:6px;white-space:nowrap;height:28px;min-height:0;padding:0 12px;flex:0 0 auto;line-height:1}
.calmbar .ttebar.inbar .btn.primary .pslcr{display:inline;font-size:11px;line-height:1;opacity:.8;margin:0}
.calmbar .ttebar.inbar .btn.primary .pslcr::before{content:"· ";opacity:.7}
.ttebar .btn.primary:has(.pslcr){height:auto;min-height:30px}
/* opened, the ask bar takes its own row under the tools, so the words typed have room (it was squeezed to a few letters) */
.calmbar .ttebar.inbar.open,.calmbar .ttebar.inbar:focus-within{flex:1 1 100%;order:99}
.calmsign{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.bhgrid.bhall{grid-template-columns:1fr}.bhgrid.bhall>div:last-child{display:none}
.bhgrid.bhall .bhlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
/* folded Ask button sits in the bottom-right corner, not over the middle of the page */
body:not(.has-omni) #omniHost{left:auto;right:18px;transform:none;width:52px;height:52px}
@media (max-width:640px){body:not(.has-omni) #omniHost{right:12px;width:46px;height:46px}body:not(.has-omni) .omnimini{width:46px;height:46px}}
/* DALFAST Store, always visible in the top bar (calm.js) */
.top .storebtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;background:#f3ead9;color:var(--forest);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;border:1px solid #f3ead9}
.top .storebtn .ic{width:17px;height:17px}
.top .storebtn:hover{background:#fff}
.top .storebtn[aria-current="page"]{background:transparent;color:#f3ead9;border-color:#f3ead9}
@media (max-width:640px){.top .storebtn{padding:0 9px}.top .storebtn span{display:none}}
@media (max-width:480px){.top .i18nbtn span{display:none}.top .i18nbtn{padding:0 4px}}/* phones: the top bar fits 360px with the Ask button */
/* Builders · Design · Marketing Studio in the top bar (calm.js) */
.top .toplinks{display:flex;align-items:center;gap:2px;margin-right:6px}
.top .toplinks[hidden]{display:none}
.top .toplinks a{color:#eef3ee;text-decoration:none;font-weight:600;font-size:14px;padding:7px 11px;border-radius:999px;white-space:nowrap}
.top .toplinks a:hover{background:#ffffff1a}
.top .toplinks a[aria-current="page"]{background:#ffffff24;color:#fff}
@media (max-width:1279px){.top .toplinks{display:none}}
/* theme and colours menu (settings.js) */
.thmenu{position:fixed;z-index:400;width:300px;max-width:calc(100vw - 16px);max-height:calc(100vh - 70px);overflow-y:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow),0 18px 40px rgba(0,0,0,.18);padding:12px}
.thmenu .thh{margin:2px 4px 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.thmenu .thmodes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.thmenu .thmode{height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.thmenu .thmode[aria-checked="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.thmenu .thsws{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.thmenu .thsw{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;border-radius:10px;border:1px solid transparent;background:none;color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.thmenu .thsw:hover{background:var(--surface2)}
.thmenu .thsw i{width:40px;height:40px;border-radius:50%;border:1px solid #0000001f}
.thmenu .thsw[aria-checked="true"]{border-color:var(--accent);background:var(--surface2)}
.thmenu .thmore{display:block;margin:12px 4px 2px;font-size:13px;color:var(--muted)}
/* ---------- Design page: every size shows a real design (design-page.js) ---------- */
.dphero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:6px 0 22px}
.dphero h1{font-size:clamp(30px,3.4vw,44px);line-height:1.05;letter-spacing:-.02em;margin:0 0 8px}
.dphero p{margin:0;color:var(--muted);font-size:16px;max-width:560px}
.dppage .dpsec{margin-top:40px}
.dppage .dphead{align-items:baseline;gap:12px;margin-bottom:14px}
.dppage .dphead h3{font-size:24px;letter-spacing:-.01em}
.dppage .dphead span{font-size:14px}
.dppage .dphead em{margin-left:auto;font-style:normal;font-size:13px;color:var(--muted)}
.dppage .dpgrid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px} /* owner 11 Nov 2026: "Images must be big": rows fill the width and cards grow */
.dpcard{max-width:520px;display:flex;flex-direction:column;text-align:left;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:16px}
.dpcard:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.dpstage{position:relative;display:block;width:100%;aspect-ratio:5/4;border-radius:16px;overflow:hidden;margin-bottom:10px;
 background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--surface2) 85%,#fff 6%) 0%,var(--surface) 60%,color-mix(in srgb,var(--bg) 70%,#000 10%) 100%);border:1px solid var(--line);transition:border-color .2s}
.dpcard:hover .dpstage{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.dpframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.2,.7,.2,1);overflow:hidden;background:#fff;border-radius:3px;box-shadow:0 18px 40px rgba(0,0,0,.38),0 2px 6px rgba(0,0,0,.25)}
.dpcard:hover .dpframe,.dpcard:hover .dpprod{transform:translate(-50%,-50%) scale(1.04)}
.dpshot,.dpshot svg{display:block;width:100%;height:100%}
.dpf-phone{border:5px solid #0b0d0c;border-radius:16px;background:#0b0d0c}.dpf-phone .dpshot{border-radius:11px;overflow:hidden}
.dpf-tablet{border:6px solid #0b0d0c;border-radius:13px;background:#0b0d0c}.dpf-tablet .dpshot{border-radius:7px;overflow:hidden}
.dpf-browser,.dpf-mail{border-top:11px solid #e8e6e1;border-radius:7px}
.dpf-browser::before,.dpf-mail::before{content:"";position:absolute;top:-8px;left:7px;width:5px;height:5px;border-radius:50%;background:#c9c5bd;box-shadow:8px 0 #c9c5bd,16px 0 #c9c5bd}
.dpf-screen,.dpf-video{border:4px solid #0b0d0c;border-radius:7px}
.dpf-video::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23203c32'/%3E%3C/svg%3E") center/18px no-repeat;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.dpf-social,.dpf-podcast{border-radius:10px}
.dpf-book{border-radius:2px 5px 5px 2px}.dpf-book::after{content:"";position:absolute;inset:0 auto 0 0;width:7%;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0))}
.dpprod{position:absolute;left:50%;top:50%;width:88%;height:88%;transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
.dpprod .dpb{fill:#efe9df;stroke:#d8cfbf;stroke-width:.8}
.dpprod .dpl{stroke:#c8bfae;stroke-width:1}
.dpprod .dpl2{fill:#c8bfae}
.dpprod .dpa{fill:#e2d9c8;stroke:none}
.dpstage>.dpart{position:absolute;inset:0;margin:0;width:100%;height:100%;background:none;border-radius:0}
.dpcard .dpn{font-size:14.5px;font-weight:650;line-height:1.3}
.dpcard .dpd{font-size:13px;margin-top:3px}
@media (max-width:640px){.dppage .dpgrid{grid-template-columns:repeat(2,1fr);gap:12px}.dphero{flex-direction:column;align-items:flex-start}.dppage .dphead em{display:none}.dppage .dphead h3{font-size:20px}}
/* ---------- Builders: each builder shows what it makes, photo-led (builder-gallery.js) ---------- */
.bpage>.row:first-child h1{font-size:clamp(30px,3.4vw,44px);line-height:1.05;letter-spacing:-.02em}
.bpage>.row:first-child .lead{font-size:16px;max-width:620px}
.bpage>h3{font-size:24px;letter-spacing:-.01em;margin:40px 0 14px}.bpage>h3 .d{font-size:14px}
.bpage .grid.sm{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px 18px}
.bpage .bcard{background:none;border:0;box-shadow:none;padding:0;overflow:visible;border-radius:16px}
.bpage .bcard:hover{transform:none;box-shadow:none;background:none}
.bpage .bcard>*:not(.bthumb){padding:0}.bpage .bcard>.row{padding-top:0}
.bpage .bthumb{aspect-ratio:5/4;border-radius:16px;margin-bottom:10px;border:1px solid var(--line);
 background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--surface2) 85%,#fff 6%) 0%,var(--surface) 60%,color-mix(in srgb,var(--bg) 70%,#000 10%) 100%);transition:opacity .25s,border-color .2s}
.bpage .bcard:hover .bthumb{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.bpage .bthumb svg{max-width:82%;max-height:80%;box-shadow:none;border-radius:2px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.4));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.bpage .bthumb svg.bfull{max-width:none;max-height:none;width:100%;height:100%;filter:none;border-radius:0;background:none}
.bpage .bcard:hover .bthumb svg{transform:scale(1.04)}
.bpage .bcard .t{font-size:14.5px;font-weight:650}
.bpage .bcard .d{font-size:13px;line-height:1.4;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){.bpage .grid.sm{grid-template-columns:repeat(2,1fr);gap:16px 12px}.bpage>h3{font-size:20px}}
.bpage .bthumb svg.bbook{background:none;max-width:90%;max-height:88%}
/* ---------- Marketing Studio: the result first (marketing-studio.js) ---------- */
.mspage .mscard{background:var(--surface);color:var(--ink);border-color:var(--line);border-radius:18px;padding:22px 24px}
.mspage .mscard h3{font-size:22px;letter-spacing:-.01em;margin:0 0 6px}.mspage .mscard h4{font-size:15px}
.mshero{margin:6px 0 22px}.mshero h1{font-size:clamp(32px,4vw,52px);line-height:1.04;letter-spacing:-.025em;margin:0 0 12px}
.mshero p{color:var(--muted);font-size:17px;max-width:620px;margin:0 0 18px}
.msshow{margin:0 0 34px}
.msx{margin:0}.msx svg{display:block;width:100%;height:100%}
.msban{width:100%;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);margin-bottom:22px}
.msrow{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.msrow .msx{flex:1 1 0;min-width:120px;display:flex;flex-direction:column;align-items:center}
.msrow .msfr{display:block;height:260px;max-width:100%;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.msrow .msx:hover .msfr{transform:translateY(-4px)}
.msx figcaption{margin-top:10px;text-align:center;display:flex;flex-direction:column;gap:2px}.msx figcaption b{font-size:14px}.msx figcaption span{font-size:12.5px;color:var(--muted)}
.msnote{color:var(--muted);font-size:13.5px;margin:18px 0 0;text-align:center}
.mspage .mssteps button{padding:8px 16px;font-weight:600}
.mspage .mssteps li.on button{background:var(--ink);color:var(--bg)}
.mspage .msgrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.mspage .msgrid .msimg{background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--surface2) 70%,#fff 12%),var(--surface2))}
.mspage .msopt{border-radius:12px}.mspage .msopt:hover .msimg{outline:1px solid color-mix(in srgb,var(--accent) 60%,transparent)}
@media (max-width:900px){.msrow .msfr{height:200px}}
@media (max-width:640px){.msrow{gap:12px}.msrow .msx{flex:0 0 calc(50% - 6px)}.msrow .msfr{height:180px}.mshero h1 br{display:none}}
.bpage .bthumb{position:relative}
.bpage .bthumb svg.bprod{max-width:none;max-height:none;background:none;border-radius:0;filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
.bpage .bcard:hover .bthumb svg.bprod{transform:translate(-50%,-50%) scale(1.04)}
/* ---------- one heading style on every page (premium, minimal) ---------- */
main .page-wrap>.row:first-child h1{font-size:clamp(28px,3.2vw,42px);line-height:1.06;letter-spacing:-.02em;margin-bottom:8px}
main .page-wrap>.row:first-child .lead{font-size:16px;max-width:640px}
/* ---------- Smart Create: each type shows what it makes (showcase.js) ---------- */
.showpage .sctypes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.showpage .sctype.scmedia{display:flex;flex-direction:column;align-items:stretch;gap:0;height:auto;padding:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);text-align:left}
.showpage .sctype.scmedia>svg:not(.sclogo):not(.bbook){display:none}
.showpage .sctype.scmedia>span:last-child{padding:10px 12px 12px;font-weight:650;font-size:14px}
.scvis{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--surface2) 85%,#fff 6%),var(--surface) 70%)}
.scvis>.scimg.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.scvis>.scshot{position:absolute;left:12%;right:12%;top:10%;bottom:10%;border-radius:4px;overflow:hidden;box-shadow:0 12px 26px rgba(0,0,0,.35)}
.scvis>.scshot svg{width:100%;height:100%;display:block}
.scvis>svg.bbook{position:absolute;inset:6% 0;width:100%;height:88%;filter:drop-shadow(0 12px 18px rgba(0,0,0,.4))}
.scvis>svg.sclogo{position:absolute;inset:0;width:100%;height:100%}
.showpage .sctype.scmedia:hover .scvis>*{transform:scale(1.04)}.scvis>*{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.showpage .sctype.scmedia[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* ---------- Assets: the empty library invites (showcase.js) ---------- */
.asempty{display:grid;grid-template-columns:minmax(260px,1.1fr) 1fr;gap:34px;align-items:center;padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--surface);margin-top:8px}
.ascoll{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:110px;gap:10px}
.ascoll img{width:100%;height:100%;object-fit:cover;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.3)}
.ascoll .a0{grid-row:span 2}.ascoll .a4{grid-column:span 2}
.astext h2{font-size:30px;letter-spacing:-.02em;margin:0 0 10px}.astext p{color:var(--muted);font-size:15.5px;margin:0 0 18px;max-width:440px}
@media (max-width:760px){.asempty{grid-template-columns:1fr;padding:18px}.ascoll{grid-auto-rows:80px}}
/* ---------- Brand Hub: each kit on real designs (showcase.js) ---------- */
.showpage .bhkit .bhlogo.bhshots{position:relative;height:auto;aspect-ratio:16/9;padding:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--surface2) 85%,#fff 6%),var(--surface) 70%)!important;border-radius:12px}
.bhm{position:absolute;display:block;border-radius:4px;overflow:hidden;box-shadow:0 12px 24px rgba(0,0,0,.35)}
.bhm svg{display:block;width:100%;height:100%}
.bhm1{left:9%;top:10%;height:80%;aspect-ratio:1}
.bhm2{right:7%;bottom:12%;width:44%;aspect-ratio:85/55;transform:rotate(-4deg)}
/* ---------- Quick actions: most-used jobs with a real picture (showcase.js) ---------- */
.qpfeat{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin:4px 0 26px}
.qpfcard{display:flex;flex-direction:column;gap:4px;color:var(--ink);text-decoration:none}
.qpfvis{position:relative;display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-bottom:8px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--surface2) 70%,#fff 12%),var(--surface2))}
.qpfvis .scimg.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qpfvis .scimg.cut{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.35))}
.qpfvis .scshot{position:absolute;left:28%;right:28%;top:8%;bottom:8%;border-radius:4px;overflow:hidden;box-shadow:0 12px 26px rgba(0,0,0,.35)}.qpfvis .scshot svg{width:100%;height:100%;display:block}
.qpfcard b{font-size:15px}.qpfcard>span:last-child{font-size:13px;color:var(--muted)}
.qpfcard:hover .qpfvis{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.scvis>.scshot,.qpfvis .scshot{left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)}
.showpage .sctype.scmedia:hover .scvis>.scshot{transform:translate(-50%,-50%) scale(1.04)}
.showpage .sctype .scvis svg{width:100%;height:100%;max-width:none;max-height:none;margin:0;stroke:none;stroke-width:initial;stroke-linecap:initial;stroke-linejoin:initial;fill:initial;display:block;opacity:1}
.showpage .sctype .scvis img{width:100%;height:100%;max-width:none;margin:0}
/* ---------- the other pages (showcase.js) ---------- */
.scempty{display:grid;grid-template-columns:minmax(240px,1fr) 1.1fr;gap:34px;align-items:center;padding:30px;border:1px solid var(--line);border-radius:22px;background:var(--surface);margin-top:8px}
.scempty .scetx h2{font-size:30px;letter-spacing:-.02em;margin:0 0 10px}.scempty .scetx p{color:var(--muted);font-size:15.5px;margin:0 0 18px;max-width:460px}
.scevis{position:relative;min-height:240px;border-radius:16px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--surface2) 85%,#fff 6%),var(--surface) 70%)}
.scevis>.scimg.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scfan{position:absolute;inset:0}.scfan .scmini{position:absolute;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%)}
.scfan .scmini:nth-child(1){left:28%;transform:translate(-50%,-50%) rotate(-6deg)}.scfan .scmini:nth-child(2){left:50%;z-index:2;width:30%;aspect-ratio:148/210}.scfan .scmini:nth-child(3){left:72%;width:22%;aspect-ratio:9/16;transform:translate(-50%,-50%) rotate(5deg)}
.scfan .scshot{position:absolute;inset:0!important;width:100%!important;height:100%!important;transform:none!important;left:0!important;top:0!important;border-radius:6px;overflow:hidden;box-shadow:0 16px 34px rgba(0,0,0,.4)}.scfan .scshot svg{width:100%;height:100%;display:block}
.sccoll{position:absolute;inset:0;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:8px;padding:8px}.sccoll img{width:100%;height:100%;object-fit:cover;border-radius:10px}.sccoll img:first-child{grid-row:span 2}
.scquiet{color:var(--muted);font-size:14px;padding:18px 0;margin:0}
@media (max-width:760px){.scempty{grid-template-columns:1fr;padding:18px}.scevis{min-height:200px}}
.showpage .grid>button.card[data-act="newDoc"],.showpage .grid>button.card[data-act="newDeck"]{background:none;border:0;box-shadow:none;padding:0}
.showpage button.card[data-act="newDoc"] .thumb,.showpage button.card[data-act="newDeck"] .thumb{aspect-ratio:5/4;border-radius:16px;border:1px solid var(--line);display:grid;place-items:center;margin-bottom:10px;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--surface2) 85%,#fff 6%) 0%,var(--surface) 60%,color-mix(in srgb,var(--bg) 70%,#000 10%) 100%)}
.showpage button.card[data-act="newDoc"] .thumb svg,.showpage button.card[data-act="newDeck"] .thumb svg{max-width:78%;max-height:78%;width:auto;height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.4));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.showpage button.card[data-act="newDoc"]:hover .thumb svg,.showpage button.card[data-act="newDeck"]:hover .thumb svg{transform:scale(1.04)}
.showpage button.card[data-act="newDoc"] .t,.showpage button.card[data-act="newDeck"] .t{font-size:14.5px;font-weight:650}
.cvtvis{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin:-4px 0 12px;background:#16241f}
.cvtvis>.scimg.cover,.cvtvis>svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cvtvis .scshot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:4px;overflow:hidden;box-shadow:0 12px 26px rgba(0,0,0,.35)}.cvtvis .scshot svg{width:100%;height:100%;display:block}
.scstack{position:absolute;inset:0}.scstack img{position:absolute;width:52%;height:70%;object-fit:cover;border-radius:6px;box-shadow:0 10px 22px rgba(0,0,0,.4);top:15%}.scstack img:nth-child(1){left:6%;transform:rotate(-5deg)}.scstack img:nth-child(2){left:24%;z-index:2}.scstack img:nth-child(3){left:42%;transform:rotate(5deg)}
.scplay{position:absolute;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);border-radius:50%;z-index:3;background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23203c32'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.sccap{position:absolute;left:10%;right:10%;bottom:9%;z-index:2;text-align:center;font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.55);border-radius:6px;padding:4px 8px}
.scmic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:#203c32}.scmic .ic{width:20px;height:20px}
.showpage .qkpick .qkbig{position:relative;overflow:hidden;padding:0;display:flex;flex-direction:column;align-items:stretch;gap:0}
.qkvis{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}.qkvis .scimg.cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.showpage .qkpick .qkbig:hover .qkvis img{transform:scale(1.04)}
.showpage .qkpick .qkbig>.ic{position:absolute;left:12px;top:12px;width:34px;height:34px;padding:8px;border-radius:50%;background:rgba(255,255,255,.92);color:#203c32;z-index:2}
.showpage .qkpick .qkbig>b{padding:12px 14px}
.ccshow{margin:0 0 22px}.ccrow{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.ccrow figure{margin:0;flex:0 0 150px;display:flex;flex-direction:column;gap:6px}.ccdaylbl{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.ccpost{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;box-shadow:0 12px 26px rgba(0,0,0,.35)}.ccpost svg{width:100%;height:100%;display:block}
/* ---------- Home: the front door (showcase.js) ---------- */
.hmpage .hmhero{display:grid!important;grid-template-columns:minmax(320px,1.05fr) 1fr;gap:34px;align-items:center;padding:34px 34px 30px;border-radius:24px;border:1px solid var(--line);background:radial-gradient(110% 120% at 100% 0%,color-mix(in srgb,var(--surface2) 80%,#fff 5%),var(--surface) 55%);overflow:hidden;margin-bottom:26px}
.hmpage .hmhero h1{font-size:clamp(34px,4vw,56px);line-height:1.02;letter-spacing:-.03em;margin:0 0 12px}
.hmeye{display:block;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:12px}
.hmpage .hmhero .lead{font-size:16px}
.hmpage .hmhero .aibox input{height:52px;font-size:16px;border-radius:14px}
.hmwall{position:relative;height:340px}
.hmw{position:absolute;display:block;border-radius:6px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45)}.hmw .dpshot,.hmw .dpshot svg{display:block;width:100%;height:100%}
.hmw0{height:44%;left:2%;top:4%;transform:rotate(-4deg)}.hmw1{height:58%;left:30%;top:0;z-index:3}.hmw2{height:70%;left:62%;top:2%;transform:rotate(3deg)}
.hmw3{width:46%;left:0;top:56%;z-index:2}.hmw4{width:30%;left:44%;top:66%;z-index:4;transform:rotate(-3deg)}.hmw5{height:36%;left:76%;top:62%;z-index:2}
.hmw6,.hmw7{display:none}
@media (max-width:980px){.hmpage .hmhero{grid-template-columns:1fr}.hmwall{height:260px}}
@media (max-width:640px){.hmpage .hmhero{padding:20px}.hmwall{height:200px}}
.hmpage .hmstart{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.hmpage .hmstart a.card.tile{flex-direction:column;align-items:stretch;padding:0;gap:0;overflow:hidden;border-radius:16px}
.hmpage .hmstart a.card.tile>svg.ic{display:none}
.hmpage .hmstart a.card.tile>div{padding:10px 12px 12px}
.hmpage .hmstart .scvis svg{width:100%;height:100%;display:block}
.hmpage .hmstart .scvis>svg.bbook{position:absolute;inset:6% 0;height:88%}
.hmpage .hmstart .scvis>svg:not(.bbook){position:absolute;inset:0}
.hmpage .hmstart a.card.tile:hover .scvis>*{transform:scale(1.04)}
.hmpage .ospick.hmfold:not(.open){max-height:360px;overflow:hidden;position:relative}
.hmpage .ospick.hmfold:not(.open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,var(--surface));pointer-events:none}
.hmpage .ospick .hmmore{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2}.hmpage .ospick.open .hmmore{position:static;transform:none;margin-top:12px}
.hmpage .qagrid.hmqa>*:nth-child(n+11){display:none}
.hmqall{margin-top:12px}
/* ---------- Templates: featured collections + stage cards (showcase.js) ---------- */
.tpfeat{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin:6px 0 30px}
.tpfcard{display:flex;flex-direction:column;gap:3px;text-align:left;padding:0;border:0;background:none;color:var(--ink);text-decoration:none;cursor:pointer}
.tpfvis{position:relative;display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-bottom:8px;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--surface2) 85%,#fff 6%),var(--surface) 70%)}
.tpf{position:absolute;top:50%;height:78%;aspect-ratio:3/4;border-radius:5px;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.45)}.tpf .dpshot,.tpf .dpshot svg{display:block;width:100%;height:100%}
.tpf0{left:24%;transform:translate(-50%,-50%) rotate(-6deg)}.tpf1{left:50%;transform:translate(-50%,-50%);z-index:2;height:86%}.tpf2{left:76%;transform:translate(-50%,-50%) rotate(6deg)}
.tpfart{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:6px;padding:6px}.tpfart img{width:100%;height:100%;object-fit:cover;border-radius:10px}.tpfart img:first-child{grid-row:span 2}
.tpfcard b{font-size:15.5px}.tpfcard>span:last-child{font-size:13px;color:var(--muted)}
.tpfcard:hover .tpfvis{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.tpallh{font-size:24px;letter-spacing:-.01em;margin:6px 0 14px}
.showpage .grid.tpl{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px 18px}
.showpage .grid.tpl .tplcard{background:none;border:0;box-shadow:none;padding:0}
.showpage .grid.tpl .tplcard .thumb{aspect-ratio:5/4;border-radius:16px;border:1px solid var(--line);padding:9% 11%;margin-bottom:8px;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--surface2) 85%,#fff 6%) 0%,var(--surface) 60%,color-mix(in srgb,var(--bg) 70%,#000 10%) 100%)}
.showpage .grid.tpl .tplcard .thumb svg{filter:drop-shadow(0 14px 22px rgba(0,0,0,.4));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.showpage .grid.tpl .tplcard:hover .thumb svg{transform:scale(1.04)}
.showpage .grid.tpl .tplcard:hover .thumb{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.showpage .grid.tpl .tplcard .t{font-size:14px;font-weight:650}
@media (max-width:640px){.showpage .grid.tpl{grid-template-columns:repeat(2,1fr);gap:14px 12px}.tpfeat{grid-template-columns:1fr 1fr;gap:12px}}
/* Home, all in one: the organisation's designs inside the opening card (showcase.js) */
.hmpage .hmhero .osfor.hmfor{grid-column:1/-1;margin:6px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.hmpage .osfor.hmfor h3{font-size:20px;margin:0}
.hmpage .osfor.hmfor>.row{align-items:center!important}
.hmarrows{display:inline-flex;gap:6px;margin-left:10px}.hmarrows .iconbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);font-size:18px;line-height:1}
.hmrail{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(170px,190px);grid-template-columns:none!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 2px 8px;scrollbar-width:none}
.hmrail::-webkit-scrollbar{display:none}
.hmrail .ostile{scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;padding:0;gap:0;min-height:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface);text-align:left;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .2s}
.hmrail .ostile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.hmrail .ostile .t{padding:10px 12px 12px;font-size:14px;font-weight:650;line-height:1.3}
.hmrail .scvis svg{width:100%;height:100%;display:block}
.hmrail .scvis>svg:not(.dpprod):not(.bbook){position:absolute;inset:0}
.hmrail .scvis>svg.bbook{position:absolute;inset:6% 0;height:88%}
.hmrail .scvis>svg.dpprod{position:absolute;left:50%;top:50%;width:86%;height:86%;transform:translate(-50%,-50%)}
.hmrail .scvis .scshot svg{width:100%;height:100%}
.hmgf{margin:8px 0 0;font-size:14px}.hmgf .linkbtn{color:var(--accent)}
.hmpage .hmhero>*{min-width:0}.hmpage .hmhero .osfor.hmfor{min-width:0;max-width:100%}.hmrail{max-width:100%}
@media (max-width:980px){.hmpage .hmhero{grid-template-columns:minmax(0,1fr)!important}}
/* Templates: one calm filter bar (showcase.js) */
.tppage .tpsearch{margin-bottom:14px!important}
.tppage .tpsearch input.search{height:54px;font-size:16px;border-radius:16px;padding-left:48px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b2a8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 16px center/20px no-repeat}
.tppage .dcbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.tppage .dcbar .dcbtn{height:40px;border-radius:999px;padding:0 16px;font-size:14px}
.tppage .dcbar .tpcol{display:inline-flex;align-items:center;gap:6px;margin-left:auto;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.tppage .dcbar .tpcol .dcl{color:var(--muted)}
.tppage .dcbar .tpcol select{border:0;background:transparent;color:var(--ink);font:inherit;font-weight:650;padding:0 2px;cursor:pointer;height:auto;min-height:0}
.tppage .dcbar+.chips,.tppage .dcbar~p.d{font-size:13px}
@media (max-width:640px){.tppage .dcbar .tpcol{margin-left:0}}
/* ---------- the editor: one navigation, more room for the page (calm.js) ---------- */
.app.edrail{--sidew:84px}
.app.edrail #side{padding:10px 6px}
.app.edrail #side h2{display:none}
.app.edrail #side a.nav{flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px 2px;text-align:center;font-size:11px;line-height:1.15;border-radius:12px;min-height:58px}
.app.edrail #side a.nav .ic{width:22px;height:22px;margin:0}
.app.edrail #side a.nav span{white-space:normal;overflow-wrap:anywhere}
.app.edrail #side a.calmback{margin-bottom:8px;border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;padding-bottom:12px}
.app.edrail .toolpanel .toolhead{justify-content:flex-end;border-bottom:0;padding:6px 6px 0}
.app.edrail .toolpanel .toolhead>a{display:none}
/* photos in the panel: two across, not one huge picture */
.toolpanel .phgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.toolpanel .phgrid .phtile{width:auto}
/* Elements: shapes in the brand's colour on light tiles */
.toolpanel .tgrid>button,.toolpanel .tgrid>.tile{border-radius:12px}
/* ---------- Marketing Studio: the gallery of looks (marketing-studio.js) ---------- */
.mslcats{margin:6px 0 16px;flex-wrap:wrap!important;overflow:visible!important;row-gap:8px}/* every kind visible, on a second line if needed (owner, 27 Oct: "some not visible") */
.mslooks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.mslook{display:flex;flex-direction:column;gap:3px;text-align:left;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.mslvis{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/5;border-radius:14px;border:1px solid var(--line);margin-bottom:6px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--surface2) 85%,#fff 6%),var(--surface) 70%);transition:border-color .2s}
.mslfr{display:block;max-width:84%;max-height:86%;height:86%;border-radius:4px;overflow:hidden;box-shadow:0 12px 26px rgba(0,0,0,.4)}.mslfr svg{display:block;width:100%;height:100%}
.mslook:hover .mslvis{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.mslook.on .mslvis{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.msltick{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink,#fff);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px}
.mslook b{font-size:14px}.mslook>span:last-child{font-size:12.5px;color:var(--muted)}
.msmakebar{justify-content:space-between;align-items:center;margin-top:18px;position:sticky;bottom:0;background:var(--surface);padding:12px 0 2px}
/* Marketing Studio: motion looks (marketing-studio.js) */
.mslplay{position:absolute;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23203c32'/%3E%3C/svg%3E") center/22px no-repeat;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.msldur{position:absolute;left:8px;bottom:8px;font-size:11.5px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);border-radius:999px;padding:3px 8px}
/* Marketing Studio phase 3: AI words and scenes (marketing-studio.js) */
.msvars{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px}
.msampick{display:flex;gap:8px;flex-wrap:wrap}.msampick button{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;width:72px;height:72px;background:none;cursor:pointer}.msampick button[aria-pressed="true"]{border-color:var(--accent,#111)}.msampick img{width:100%;height:100%;object-fit:cover;display:block}.msamjobs{margin:0 0 14px}.msgex.noex video{display:none}
.msvar{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);cursor:pointer}
.msvar:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}.msvar.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.msvar .msang{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700}
.msvar b{font-size:16px;line-height:1.25}.msvar>span:not(.msang){font-size:13.5px;color:var(--muted)}.msvar i{font-style:normal;font-size:12.5px;font-weight:700;margin-top:4px}
.msaiscene{padding:14px 16px;border:1px dashed color-mix(in srgb,var(--accent) 50%,var(--line));border-radius:14px;margin-bottom:16px}
.mslai{position:absolute;right:8px;bottom:8px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.6);border-radius:999px;padding:3px 8px}
/* Marketing Studio, AI first: the AI ad photos step (marketing-studio.js) */
.msstyles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:14px 0}
.msstyle{display:flex;flex-direction:column;gap:6px;text-align:left;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.msstv{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface2)}
.msstv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}.msstyle:hover .msstv img{transform:scale(1.05)}
.msstv em{position:absolute;left:8px;bottom:8px;font-style:normal;font-size:10.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.5);border-radius:999px;padding:2px 7px}
.msstyle.on .msstv{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.msstyle b{font-size:14px}
.msaiopts{gap:10px;align-items:center;margin:4px 0 6px;flex-wrap:wrap}
.msaimine{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.msaimine figure{position:relative;margin:0}.msaimine img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.msaimine figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:13px}
.msaimine .mslai{bottom:auto;top:8px}
/* editor tool panels: search boxes and pickers match the rest of Studio (no browser-default inset boxes) */
.toolpanel input[type=search],.toolpanel input[type=text]:not([class*=sw]),.toolpanel input:not([type]){width:100%;height:40px;padding:0 12px 0 38px;border:1px solid var(--line);border-radius:12px;color:var(--ink);font-size:13.5px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3b2a8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 12px center/16px no-repeat;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.toolpanel input[type=text]:not([class*=sw]),.toolpanel input:not([type]){padding-left:12px;background-image:none}
.toolpanel input[type=search]::placeholder,.toolpanel input[type=text]::placeholder{color:var(--muted);opacity:.85}
.toolpanel input:focus-visible{outline:none;border-color:var(--accent,#b07d3a);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#b07d3a) 22%,transparent)}
.toolpanel select:not([multiple]){appearance:none;-webkit-appearance:none;height:34px;padding:0 30px 0 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:12.5px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3b2a8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 11px center/12px no-repeat;cursor:pointer}
.toolpanel select:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:1px}
.phpanel .phq{margin-bottom:10px}
.phpanel .phf{gap:10px}
.phpanel .dcbar{margin-bottom:10px}
/* Make it yours (js/brand-start.js) */
.brsentry{display:flex;gap:8px;max-width:520px;margin:4px 0 16px}
.brsentry input{flex:1;min-width:0;height:50px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:16px}
.brsentry input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.brsentry .btn{height:50px;border-radius:14px;padding:0 18px;white-space:nowrap}
.brsentry .btn svg,.brsback svg{width:16px;height:16px}
a.brsback{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink)}
a.brsback span{color:var(--muted)}a.brsback:hover{border-color:var(--accent)}
.brspage{max-width:none}
.brshero{padding:30px 0 8px}.brshero h1{font-size:clamp(32px,4vw,52px);line-height:1.03;letter-spacing:-.03em;margin:6px 0 10px}.brshero p{max-width:620px;color:var(--muted);font-size:16px;margin:0}
.brseye{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.brsform{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 16px;align-items:end;margin:20px 0 26px;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.brsform label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.brsform label.f small{font-weight:400;color:var(--muted)}
.brsform label.f input{height:44px;font-size:14.5px;border-radius:12px;padding:0 12px}
.brslogo{grid-column:span 2;display:flex;gap:14px;align-items:center}
.brslg{width:64px;height:64px;flex:none;border-radius:14px;border:1px dashed var(--line);display:grid;place-items:center;background:#fff;overflow:hidden;color:var(--muted)}
.brslg img{max-width:84%;max-height:84%;object-fit:contain}.brslg svg{width:24px;height:24px}
.brslogo>div{display:flex;flex-direction:column;gap:3px}.brslogo .row{gap:10px;align-items:center;margin-top:4px}
.brscols{display:flex;gap:16px}
.brscol{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.brscol input[type=color]{width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:none;cursor:pointer;overflow:hidden}
.brscol input[type=color]::-webkit-color-swatch-wrapper{padding:0}.brscol input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.brsgo{height:46px;border-radius:12px;justify-content:center}
.brsnote{grid-column:1/-1;margin:0}
.brshint{color:var(--muted);text-align:center;padding:10px 0}
.brsbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 16px}.brsbar h2{margin:0;font-size:24px;letter-spacing:-.02em}
.brsact{margin-left:auto;display:flex;gap:8px}
.brsgrid{columns:4 230px;column-gap:16px}
.brscard{display:block;width:100%;break-inside:avoid;margin:0 0 16px;padding:0;border:0;background:none;text-align:left;color:var(--ink);cursor:pointer}
.brsvis{display:grid;place-items:center;padding:18px;border-radius:16px;background:var(--surface2,var(--surface));border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.brsvis svg{width:100%;height:auto;max-height:340px;display:block;box-shadow:0 10px 26px rgba(0,0,0,.22);border-radius:3px}
.brscard:hover .brsvis{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.brscard b{display:block;margin:9px 2px 0;font-size:14px}.brscard em{display:block;margin:1px 2px 0;font-style:normal;font-size:12px;color:var(--muted)}
.brsph .brsvis{height:220px;background:linear-gradient(100deg,var(--surface) 30%,var(--surface2,#2a2a2a) 50%,var(--surface) 70%) 0 0/300% 100%;animation:brsshim 1.4s linear infinite}
@keyframes brsshim{to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.brsph .brsvis{animation:none}.brscard:hover .brsvis{transform:none}}
@media (max-width:900px){.brsform{grid-template-columns:1fr 1fr}.brslogo{grid-column:1/-1}}
@media (max-width:560px){.brsform{grid-template-columns:1fr;padding:16px}.brsentry{flex-direction:column}.brsentry input{flex:none;min-height:50px}/* stacked: flex:1 with a 0 basis squashed the box to 20px */.brsact{margin-left:0}}
.brsnopic{margin:-4px 0 16px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:13.5px;color:var(--ink)}
/* Ready check (js/ready-check.js) */
.rdmark{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em;color:#1f5130;background:rgba(236,248,239,.94);box-shadow:0 1px 4px rgba(0,0,0,.18);pointer-events:none}
.rdchip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;margin-left:8px;border-radius:999px;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;border:1px solid var(--line)}
.rdchip svg{width:13px;height:13px}
.rdchip.ok{color:#8fd19e;border-color:color-mix(in srgb,#8fd19e 45%,transparent)}
.rdchip.no{color:var(--ink);background:color-mix(in srgb,var(--accent) 16%,transparent)}
:root[data-theme="light"] .rdchip.ok{color:#1f6b35}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .rdchip.ok{color:#1f6b35}}
@media (max-width:700px){.rdchip{display:none}}
/* pre-drawn previews (js/home-shots.js) */
img.shotimg{display:block;width:100%;height:auto}
img.shotimg.cover{height:100%;object-fit:cover}
/* service notice from Admin → Operations (js/service-signals.js) */
.svcnotice{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:90;display:flex;align-items:flex-start;gap:10px;width:min(640px,calc(100vw - 32px));padding:10px 10px 10px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-left:4px solid #C2410C;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.svcnotice p{margin:2px 0;flex:1;font-size:14px;line-height:1.45}.svcnotice b{margin-right:6px}
/* the corner pop-up on a phone: a slim bar at the bottom (the corner is the whole width there, so the card covered the page) */
@media (max-width:600px){.pp{left:10px;right:10px;bottom:10px;width:auto;border-radius:14px}.pp .ppbody{padding:10px 14px}.pp .ppmedia{aspect-ratio:21/9}.pp p{font-size:12px;margin:2px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}/* the terms (no card, nothing to cancel) stay visible */.pp .ppbadge{display:none}.pph{font-size:15px;margin:0 0 6px}.pp .ppacts{margin:0}.pp .ppacts .btn{padding:6px 12px;min-height:34px}}
/* "What do you do?" folded on Home: two whole rows of choices, not a fade over half a row (the search and filter used most of the 360px) */
.hmpage .ospick.hmfold:not(.open){max-height:none;overflow:visible}
.hmpage .ospick.hmfold:not(.open)::after{display:none}
.hmpage .ospick.hmfold:not(.open) .oslist{overflow:hidden}/* height set to two whole rows by calmOsRows() */
/* merchandise builder cards: a photo of the product with a design on it (mockup-photo.js) */
.bthumb:has(.bphoto){position:relative}.bthumb .bphoto{width:100%;height:100%;object-fit:cover;display:block}
.bpai{position:absolute;right:8px;bottom:8px;font:600 10px/1 system-ui,sans-serif;letter-spacing:.04em;padding:4px 6px;border-radius:4px;background:rgba(255,255,255,.85);color:#333}
.mkpnote{text-align:center;max-width:560px;margin:8px auto 0;font-size:12px}
/* Publish anywhere: where is this book going? (publish-anywhere.js) */
.pubanywhere{margin:8px 0 24px}.pubgroup h4{margin:14px 0 8px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pubdests{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.pubdest{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:inherit;cursor:pointer;font:inherit}
.pubdest span{font-size:12.5px;color:var(--muted);line-height:1.4}.pubdest:hover{border-color:var(--accent)}
.pubdest[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.pubsel{margin-top:14px}.pubsteps{margin:10px 0 14px 18px;line-height:1.55;font-size:13.5px}
.shpubh{margin:14px 0 8px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}.shpubh:first-child{margin-top:0}
.shtiles.shpubtiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.shpubtiles .shtile{display:flex;flex-direction:column;gap:3px}
/* ---------- Phase 3: first impression (first-impression.js) ---------- */
/* builder cards that show a made document: the page at its own shape, lifted off the card */
.bthumb .bdocimg{max-width:86%;max-height:86%;width:auto;height:auto;box-shadow:0 2px 10px rgba(0,0,0,.18);border-radius:2px;background:#fff}
.bthumb:has(.bdocimg){position:relative}
/* template cards: the design fills the card; wide formats span two columns at their true shape */
.showpage .grid.tpl{grid-auto-flow:row dense}
.showpage .grid.tpl .tplcard .thumb{padding:6% 7%}
.showpage .grid.tpl .tplcard.tpltall .thumb{padding:4% 7%}
.showpage .grid.tpl .tplcard.tplwide{grid-column:span 2}
.showpage .grid.tpl .tplcard.tplwide .thumb{aspect-ratio:5/2;padding:4% 4%}
@media (max-width:600px){.showpage .grid.tpl .tplcard.tplwide .thumb{aspect-ratio:2/1}}
/* Home, DALFAST Studio images: the card took a white fallback in the dark theme and hid its light caption */
.nicard{background:var(--surface);color:var(--text,inherit)}
/* phones: the describe box shrinks instead of pushing its button off screen; the top bar keeps to the width */
.aibox input{min-width:0}
@media (max-width:480px){.top .offbtn,.top .iconbtn[aria-label="Theme and colours"]{display:none}.top{gap:2px;padding:0 4px}}
.showpage .grid.tpl .tplcard .thumb>svg,.showpage .grid.tpl .tplcard .thumb>img{max-width:100%;max-height:100%;width:auto;height:auto}
/* Logo Studio (logo-studio.js) */
.lgform{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:10px;align-items:end;margin:6px 0 14px}
@media (max-width:700px){.lgform{grid-template-columns:1fr}}
.lggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.lgcard{display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.lgthumb{display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface2)}
.lgthumb svg{display:block;width:100%;height:100%}
.lgcard:hover .lgthumb,.lgcard:focus-visible .lgthumb{border-color:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.lgmeta{font-size:12px;color:var(--muted)}
/* phones: the page controls beside the page strip are a 2 × 2 block of finger-sized buttons, not four 13 px slivers */
@media (max-width:900px){.pages .pagectl{grid-template-columns:repeat(2,40px);grid-auto-rows:40px;align-content:center;flex:0 0 auto;gap:4px}.pages .pagectl button{font-size:16px;padding:0}}
/* merchandise guide (mockup-photo.js) */
.mgx{margin:6px 0 22px;padding:22px;border-radius:22px;background:radial-gradient(120% 140% at 0 0,rgba(0,229,255,.10),transparent 55%),#131517;border:1px solid rgba(0,229,255,.22)}
.mgxhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.mgxkick{display:inline-flex;align-items:center;gap:10px;font:800 11px/1 "DF Head",Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#00e5ff}.mgxkick::before{content:"";width:22px;height:1.5px;background:#00b3ff}
.mgxh{margin:10px 0 0;font:800 clamp(24px,2.6vw,36px)/1.05 "DF Head",Inter,sans-serif;letter-spacing:-.02em;color:#fff}.mgxh em{font-style:normal;background:linear-gradient(90deg,#00f0ff,#00b3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.mgxact{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.mgxdpi{font-size:13px;color:#bff8ff;padding:9px 14px;border-radius:999px;border:1px solid rgba(0,229,255,.3);background:rgba(0,229,255,.06)}
.mgxgo{border:0;cursor:pointer;padding:12px 20px;border-radius:12px;background:linear-gradient(135deg,#00f0ff,#00b3ff);color:#04222a;font:800 14px/1 Inter,sans-serif;box-shadow:0 8px 26px -10px #00e5ff}.mgxgo:hover{filter:brightness(1.08)}
.mgxrow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.mgxcard{position:relative;aspect-ratio:3/4;border:0;padding:0;border-radius:18px;overflow:hidden;cursor:pointer;background:#1b1e21;text-align:left;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.mgxcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.mgxcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,12,14,.92))}
.mgxt{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:16px;display:flex;flex-direction:column;gap:4px}.mgxt b{font:800 17px/1.15 "DF Head",Inter,sans-serif;letter-spacing:-.01em}.mgxt span{font-size:13px;color:#d6dde3;line-height:1.35}
.mgxt i{font-style:normal;font-weight:700;font-size:12.5px;color:#00e5ff;margin-top:6px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.mgxcard:hover,.mgxcard:focus-visible{transform:translateY(-6px);box-shadow:inset 0 0 0 1.5px #00e5ff,0 18px 40px -18px #00e5ff;outline:0}.mgxcard:hover img,.mgxcard:focus-visible img{transform:scale(1.07)}.mgxcard:hover i,.mgxcard:focus-visible i{opacity:1;transform:none}
@media (max-width:900px){.mgxrow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}.mgxrow::-webkit-scrollbar{display:none}.mgxcard{scroll-snap-align:start}.mgxt i{opacity:1;transform:none}}
@media (max-width:520px){.mgx{padding:16px}.mgxrow{grid-auto-columns:72%}}
@media (prefers-reduced-motion:reduce){.mgxcard,.mgxcard img,.mgxt i{transition:none}}
/* phones: two logos per row, so they can be compared at a glance */
@media (max-width:560px){.lggrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lgmeta{font-size:11px}.lgthumb{border-radius:10px}}
/* Brand Hub: a kit shown at work (business card, post, tote) at its own shape, not squeezed into the old name strip */
.bhlogo.bhscenebox{height:auto;aspect-ratio:300/170;padding:0;border:0;display:block}.bhscene{width:100%;height:100%;display:block}
.bhkit.bhnew{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;border:1px dashed var(--line);background:transparent}.bhkit.bhnew .bhnewart{width:100%;aspect-ratio:300/170;border-radius:8px;display:grid;place-items:center;background:var(--surface2);font-size:28px;color:var(--accent)}
/* Marketing Studio, looks first (owner, Oct 2026: "this can never attract customers… all is down below"): the title is one
   line, "Start with your product" one slim row, and the looks start on the first screen; the label and own-photo links
   move below the gallery */
.mspage:has(.msgal) .mshero{margin:0 0 12px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.mspage:has(.msgal) .mshero h1{font-size:clamp(24px,2.4vw,32px);margin:0}.mspage:has(.msgal) .mshero h1 br{display:none}
.mspage:has(.msgal) .mshero p{font-size:14px;margin:0}
.mspage:has(.msgal) #msBody{display:flex;flex-wrap:wrap;column-gap:10px}.mspage:has(.msgal) #msBody>*{flex:1 1 100%;min-width:0}.mspage:has(.msgal) #msBody>.msglabelbar{flex:0 0 auto;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.mspage .msgprod{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:10px 14px;margin-bottom:12px}
.mspage .msgprod .msgpt{display:flex;flex-direction:column;gap:2px;min-width:0}.mspage .msgprod:not(:has(.chk)) .msgpt .d{font-size:12.5px}
.mspage .msgprod .msgours{display:flex;align-items:center;gap:6px;flex:1 1 300px;min-width:0;overflow-x:auto;scrollbar-width:none;order:1}.mspage .msgprod .msgours::-webkit-scrollbar{display:none}
.mspage .msgprod .msgours>.d{white-space:nowrap}.mspage .msgprod .msgours .msopt{flex:0 0 44px;width:44px;padding:0}.mspage .msgprod .msgours .msimg{width:44px;height:44px}
.mspage .msgprod>label.btn{order:2;padding:6px 12px;font-size:13.5px}
.mspage .msgprod .msgpt{flex:0 0 auto;white-space:nowrap}.mspage .msgprod:not(:has(.chk)) .msgpt .d{display:none}
.mspage .msgprod .msgours{flex:1 1 0!important;flex-wrap:nowrap!important}
@media (max-width:700px){.mspage:has(.msgal) .mshero p{display:none}.mspage .msgprod:not(:has(.chk)) .msgpt{display:none}.mspage .msgprod .msgours{flex:1 1 100%!important;order:0}
 .mspage .msgprod>label.btn{flex:1 1 0;justify-content:center;padding:6px 8px;font-size:13px;white-space:nowrap}}
@media (max-width:700px){.mspage .msgprod>label.btn{flex:1 1 40%!important;width:auto!important;min-width:0}.mspage .msgprod:not(:has(.chk)) .msgours>.d{display:none}}
@media (max-width:700px){.mspage .msgprod>label.btn{white-space:normal;line-height:1.15;text-align:center;overflow:hidden}}
/* Pages open on their content (owner, Oct 2026, Marketing then Templates: "all is down below"): the page title is
   smaller, its line under it is one short line, and the space above the content is halved. Every page with the shared
   header gets it. */
main .page-wrap>.row.phead:first-child h1,main .page-wrap>.row:first-child>div>h1{font-size:clamp(24px,2.4vw,32px);margin-bottom:2px}
main .page-wrap>.row.phead:first-child .lead,main .page-wrap>.row:first-child .lead{font-size:14px;margin:0 0 10px;max-width:90ch;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tppage .tpsearch input.search{height:42px;font-size:15px;border-radius:12px}
/* owner: "Put my label…" and "Add my own photo" at the top, easy to see: two buttons side by side under the product row */
.mspage .msglabelbar .linkbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:9px;text-decoration:none;color:inherit;font-weight:600;font-size:13.5px;background:var(--surface)}
.mspage .msglabelbar .linkbtn:hover{border-color:var(--accent,#b48a4e)}.mspage .msglabelbar>.d{display:none}
@media (max-width:700px){.mspage:has(.msgal) #msBody>.msglabelbar{flex:1 1 40%}.mspage .msglabelbar .linkbtn,.mspage .msglabelbar label.btn{width:100%;height:auto;min-height:40px;padding:6px 8px;font-size:12.5px;line-height:1.15;white-space:normal;text-align:center;justify-content:center}}
/* Builders: search, Category and Import a manuscript on one line; the first section close under it */
.bqbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 4px}.bqbar .search{flex:1 1 320px;margin:0}.bqbar>.chips{margin:0;flex:0 0 auto}.bqbar>.btn{flex:0 0 auto}
.bqbar+h3{margin-top:14px}
/* phones: the page title keeps its line; Quick guide becomes a "?" beside it instead of a row of its own */
@media (max-width:700px){main .page-wrap>.row.phead:first-child{flex-wrap:nowrap;align-items:flex-start;gap:8px}main .page-wrap>.row.phead:first-child>div{min-width:0!important}.qgbtn .qglbl{display:none}.qgbtn{flex:0 0 auto}
 /* screen-size review 12 Nov 2026: a page with its own button beside the title (Notes: "New note") squeezed the title to 43px on a
    320px phone, a few letters per line. The title keeps the line (only the small help button beside it); other buttons go underneath. */
 main .page-wrap>.row.phead:first-child{flex-wrap:wrap}main .page-wrap>.row.phead:first-child>div:first-child{flex:1 1 calc(100% - 64px)!important}}
/* Design page, content first (owner, Oct 2026): title and "?" on one line, one short line under it, a slim size bar */
.dphero{margin:0 0 12px;align-items:center}.dphero>div{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;flex:1;min-width:0}
.dphero h1{font-size:clamp(24px,2.4vw,32px);margin:0}.dphero>div>p{flex:1 1 100%;order:2;font-size:14px}.dphero .qgslot{margin-left:0}
.dphero>.btn{flex:0 0 auto;padding:6px 12px;font-size:13.5px}
.dppage .dpcustom{padding:10px 14px}.dppage .dpcl .d{display:none}
.dppage .dptools{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px}.dppage .dptools .dpsearch{flex:0 1 320px;padding:8px 12px}.dppage .dptools>.chips{margin:0;flex:1 1 400px;min-width:0}
@media (max-width:700px){.dppage .dpcl{display:none}.dppage .dpform{display:grid!important;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end}.dppage .dpform .f{margin:0;min-width:0}.dppage .dpform .f input,.dppage .dpform .f select{width:100%}.dppage .dpform .dpcprev{justify-self:center;align-self:center}.dppage .dpform>button.btn{width:100%}
 .dppage .dptools .dpsearch{flex:1 1 100%}}
/* Add scenes (video): photos as pictures with a tick in the corner and the name under them */
.picklist.imgs{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.pick.img{display:flex;flex-direction:column;gap:3px;cursor:pointer;min-width:0}.pick.img img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;border:2px solid transparent;background:var(--surface2)}
.pick.img img.bad{visibility:hidden}.pick.img:has(input:checked) img{border-color:var(--accent,#b48a4e)}
.pick.img input{position:absolute;top:6px;left:6px;width:18px;height:18px;margin:0;accent-color:var(--accent,#b48a4e)}
.pick.img span{font-size:11.5px;line-height:1.2;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aibox.asbig{display:flex;gap:8px}.aibox.asbig input{flex:1;height:48px;font-size:15px;border-radius:12px}.aibox.asbig .btn{height:48px;padding:0 22px}
.grid>.card>.pill{align-self:flex-start;justify-self:start;width:max-content}
/* Top bar in colour (owner, Oct 2026: "give them crazy attractive colour to attract customers"): each main button its own
   bright gradient, a soft glow on hover, a ring on the page you are on. Text colours chosen for contrast on each gradient. */
.top .toplinks a,.top .storebtn,.top .topup{position:relative;border:0!important;font-weight:700;letter-spacing:.005em;transition:transform .15s,box-shadow .2s,filter .2s;text-shadow:none}
.top .toplinks{gap:6px}
.top .toplinks a[href="#/builders"]{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff}
.top .toplinks a[href="#/design"]{background:linear-gradient(135deg,#f97316,#facc15);color:#2a1300}
.top .toplinks a[href="#/marketing"]{background:linear-gradient(135deg,#06b6d4,#22d3ee 55%,#a7f3d0);color:#04232b}
.top .storebtn{background:linear-gradient(135deg,#fde68a,#f59e0b 60%,#ea580c)!important;color:#2a1300!important}
.top .topup[data-act="akOpen"]{background:linear-gradient(135deg,#3b82f6,#6366f1 50%,#a855f7);color:#fff}
.top .topup[data-act="upAny"]{background:linear-gradient(135deg,#10b981,#84cc16);color:#062b12}
.top .toplinks a:hover,.top .storebtn:hover,.top .topup:hover{transform:translateY(-1px);filter:saturate(1.15) brightness(1.06);box-shadow:0 4px 18px -4px currentColor}
.top .toplinks a[href="#/builders"]:hover{box-shadow:0 4px 20px -4px #ec4899}.top .toplinks a[href="#/design"]:hover{box-shadow:0 4px 20px -4px #f97316}.top .toplinks a[href="#/marketing"]:hover{box-shadow:0 4px 20px -4px #22d3ee}
.top .storebtn:hover{box-shadow:0 4px 20px -4px #f59e0b}.top .topup[data-act="akOpen"]:hover{box-shadow:0 4px 20px -4px #8b5cf6}.top .topup[data-act="upAny"]:hover{box-shadow:0 4px 20px -4px #10b981}
.top .toplinks a[aria-current="page"],.top .storebtn[aria-current="page"]{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(255,255,255,.18)}
.top .topup .ic,.top .topup svg{color:inherit;stroke:currentColor}
@media (prefers-reduced-motion:reduce){.top .toplinks a,.top .storebtn,.top .topup{transition:none}.top .toplinks a:hover,.top .storebtn:hover,.top .topup:hover{transform:none}}
/* Home in colour: "What do you do?" (each kind of organisation its own colour) and Quick tools (a bright chip per tool) */
.ospick{background:radial-gradient(120% 140% at 0% 0%,rgba(139,92,246,.18),transparent 55%),radial-gradient(120% 140% at 100% 100%,rgba(249,115,22,.14),transparent 55%),var(--surface)}
.ospick h2{background:linear-gradient(90deg,#fde68a,#f472b6 45%,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%}
.ospick .osbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px}.ospick .osbar .osfind{flex:1 1 280px;margin:0}.ospick .osbar>.chips{margin:0}
.ospick .osorg{position:relative;border:1px solid color-mix(in srgb,var(--sc) 35%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--sc) 16%,transparent),transparent 70%);padding-left:16px;transition:transform .15s,box-shadow .2s,border-color .2s}
.ospick .osorg::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--sc)}
.ospick .osorg span{color:color-mix(in srgb,var(--sc) 75%,#fff)!important;font-weight:600}
.ospick .osorg:hover{transform:translateY(-2px);border-color:var(--sc);box-shadow:0 6px 22px -8px var(--sc)}
.ospick .chip[style*="--sc"][aria-pressed="true"]{background:var(--sc);border-color:var(--sc);color:#fff}
.qagrid.compact .qatile{--qc1:#8b5cf6;--qc2:#ec4899;border-color:color-mix(in srgb,var(--qc1) 30%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--qc1) 12%,transparent),transparent 65%),var(--surface)}
.qagrid.compact .qatile .qaic{background:linear-gradient(135deg,var(--qc1),var(--qc2));color:#fff;stroke:#fff;border-radius:9px;padding:6px;box-sizing:content-box}
.qagrid.compact .qatile:hover{border-color:var(--qc1);box-shadow:0 6px 22px -8px var(--qc1)}
.qagrid.compact .qatile:nth-child(8n+2){--qc1:#f97316;--qc2:#facc15}.qagrid.compact .qatile:nth-child(8n+3){--qc1:#06b6d4;--qc2:#22d3ee}.qagrid.compact .qatile:nth-child(8n+4){--qc1:#10b981;--qc2:#84cc16}
.qagrid.compact .qatile:nth-child(8n+5){--qc1:#3b82f6;--qc2:#a855f7}.qagrid.compact .qatile:nth-child(8n+6){--qc1:#f43f5e;--qc2:#fb923c}.qagrid.compact .qatile:nth-child(8n+7){--qc1:#eab308;--qc2:#f97316}.qagrid.compact .qatile:nth-child(8n+8){--qc1:#14b8a6;--qc2:#3b82f6}
/* The same colours through the rest of the top bar and the side menu (owner: "crazy, charming, minimalist and premium",
   "in all the site"): colour lives in the icons, not whole rows; the page you are on is a soft gradient pill. */
:root{--g1:linear-gradient(135deg,#8b5cf6,#ec4899);--g2:linear-gradient(135deg,#f97316,#facc15);--g3:linear-gradient(135deg,#06b6d4,#67e8f9);--g4:linear-gradient(135deg,#f59e0b,#ea580c);
 --g5:linear-gradient(135deg,#3b82f6,#a855f7);--g6:linear-gradient(135deg,#10b981,#84cc16);--g7:linear-gradient(135deg,#f43f5e,#fb923c);--g8:linear-gradient(135deg,#14b8a6,#3b82f6)}
.side a.nav{--ng:var(--g5);border-radius:12px;transition:background .2s}
.side a.nav>.ic{box-sizing:content-box;width:16px;height:16px;padding:5px;border-radius:9px;background:var(--ng);color:#fff;stroke:#fff;flex:0 0 auto;box-shadow:0 2px 10px -4px rgba(0,0,0,.6)}
.side a.nav:hover{background:rgba(255,255,255,.05)}
.side a.nav[aria-current="page"]{background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.02));box-shadow:inset 3px 0 0 #fde68a}
.side .sggroup>a.nav:nth-child(8n+1){--ng:var(--g1)}.side .sggroup>a.nav:nth-child(8n+2){--ng:var(--g2)}.side .sggroup>a.nav:nth-child(8n+3){--ng:var(--g3)}.side .sggroup>a.nav:nth-child(8n+4){--ng:var(--g6)}
.side .sggroup>a.nav:nth-child(8n+5){--ng:var(--g5)}.side .sggroup>a.nav:nth-child(8n+6){--ng:var(--g7)}.side .sggroup>a.nav:nth-child(8n+7){--ng:var(--g4)}.side .sggroup>a.nav:nth-child(8n+8){--ng:var(--g8)}
/* the main places keep the colour they have in the top bar */
.side a.nav[href="#/home"]{--ng:var(--g8)}.side a.nav[href="#/market"]{--ng:var(--g4)}.side a.nav[href="#/builders"]{--ng:var(--g1)}.side a.nav[href="#/design"]{--ng:var(--g2)}.side a.nav[href="#/marketing"]{--ng:var(--g3)}.side a.nav[href="#/ai"]{--ng:var(--g5)}
.side h2{letter-spacing:.14em;opacity:.55}
/* top bar: the smaller buttons */
.top .iconbtn{border-radius:50%;transition:background .2s,box-shadow .2s,color .2s}
.top .iconbtn:hover{background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.top .hlbtn{color:#fde68a}.top .acct{color:#a5b4fc}.top .offbtn{color:#6ee7b7}.top .i18nbtn{color:#67e8f9}.top .iconbtn[data-act="theme"]{color:#f9a8d4}
.top .aimc-top{border:1px solid transparent!important;background:linear-gradient(var(--forest),var(--forest)) padding-box,var(--g5) border-box!important;border-radius:999px;padding:0 12px}
.top .pmchip.device{border:1px solid transparent!important;background:linear-gradient(#0d1d16,#0d1d16) padding-box,var(--g6) border-box!important;border-radius:999px}
.top .pmchip.device .ic,.top .pmchip.device svg{color:#6ee7b7;stroke:#6ee7b7}
.top .projname input,.top .projname{font-weight:700}
/* "What do you do?" tidy (owner: "fix it"): tiles grow with their text, whole rows, a small Show fewer, no big gaps */
.ospick .oslist{grid-auto-rows:minmax(58px,auto);align-items:stretch;gap:8px;margin-top:4px}
.ospick .osorg{height:auto;min-height:58px;justify-content:center;gap:3px;padding:9px 12px 9px 16px;line-height:1.25;box-sizing:border-box}
.ospick .osorg span{line-height:1.2}
.ospick>.d{margin:0 0 4px}.ospick .osbar{margin:4px 0 8px}
.hmpage .ospick.open .oslist{max-height:min(62vh,560px);overflow:auto;-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent);padding-bottom:28px}
.hmpage .ospick .hmmore,.hmpage .ospick.open .hmmore{display:inline-flex;width:auto;max-width:max-content}
.hmpage .ospick.open .hmmore{margin:10px 0 0}
.ospick>.row{margin-top:6px!important}
.hmpage .ospick.open .oslist{max-height:min(62vh,560px)!important}
/* Filter chips everywhere in the Studio (owner: "crazy, charming, minimalist and premium… in all the site"): each chip in a row
   has its own colour, shown as a small glowing dot and a faint tint; the chosen chip is filled with its gradient. */
:is(.chips>.chip,.dpchips>button){--cg:var(--g5);--cc:#8b5cf6;position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid color-mix(in srgb,var(--cc) 32%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 10%,transparent),transparent 70%),var(--surface);transition:transform .15s,box-shadow .2s,border-color .2s,background .2s}
:is(.chips>.chip,.dpchips>button)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cg);box-shadow:0 0 8px var(--cc);flex:0 0 auto}
:is(.chips>.chip,.dpchips>button):hover{border-color:var(--cc);transform:translateY(-1px);box-shadow:0 4px 16px -6px var(--cc)}
:is(.chips>.chip,.dpchips>button)[aria-pressed="true"],:is(.chips>.chip,.dpchips>button)[aria-selected="true"]{background:var(--cg);border-color:transparent;color:#0b0d10;box-shadow:0 4px 18px -6px var(--cc);font-weight:600}
:is(.chips>.chip,.dpchips>button)[aria-pressed="true"]::before,:is(.chips>.chip,.dpchips>button)[aria-selected="true"]::before{background:#fff;box-shadow:none}
:is(.chips>.chip,.dpchips>button)[aria-pressed="true"] .n,:is(.chips>.chip,.dpchips>button)[aria-selected="true"] .n{opacity:.85;color:#fff}
:is(.chips>.chip,.dpchips>button):nth-child(8n+1){--cg:var(--g8);--cc:#14b8a6}:is(.chips>.chip,.dpchips>button):nth-child(8n+2){--cg:var(--g1);--cc:#d946ef}:is(.chips>.chip,.dpchips>button):nth-child(8n+3){--cg:var(--g2);--cc:#f97316}:is(.chips>.chip,.dpchips>button):nth-child(8n+4){--cg:var(--g3);--cc:#06b6d4}
:is(.chips>.chip,.dpchips>button):nth-child(8n+5){--cg:var(--g6);--cc:#10b981}:is(.chips>.chip,.dpchips>button):nth-child(8n+6){--cg:var(--g7);--cc:#f43f5e}:is(.chips>.chip,.dpchips>button):nth-child(8n+7){--cg:var(--g5);--cc:#6366f1}:is(.chips>.chip,.dpchips>button):nth-child(8n+8){--cg:var(--g4);--cc:#f59e0b}
/* chips that already carry their own colour (kinds of organisation) keep it */
:is(.chips>.chip,.dpchips>button)[style*="--sc"]{--cc:var(--sc);--cg:linear-gradient(135deg,var(--sc),color-mix(in srgb,var(--sc) 60%,#fff))}
@media (prefers-reduced-motion:reduce){:is(.chips>.chip,.dpchips>button){transition:none}:is(.chips>.chip,.dpchips>button):hover{transform:none}}
.dpchips>button{color:var(--ink)}
/* the drop-down filter buttons (Style, Collection, Format, Category…): a gradient outline each, filled softly once set */
.dcbar>.dcbtn{--cg:var(--g5);--cc:#6366f1;border:1px solid transparent!important;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--cg) border-box!important;transition:box-shadow .2s,transform .15s}
.dcbar>.dcbtn:hover{box-shadow:0 4px 16px -6px var(--cc);transform:translateY(-1px)}
.dcbar>.dcbtn.set{background:linear-gradient(135deg,color-mix(in srgb,var(--cc) 26%,var(--surface)),var(--surface)) padding-box,var(--cg) border-box!important}
.dcbar>.dcbtn:nth-child(5n+1){--cg:var(--g1);--cc:#d946ef}.dcbar>.dcbtn:nth-child(5n+2){--cg:var(--g2);--cc:#f97316}.dcbar>.dcbtn:nth-child(5n+3){--cg:var(--g3);--cc:#06b6d4}.dcbar>.dcbtn:nth-child(5n+4){--cg:var(--g6);--cc:#10b981}.dcbar>.dcbtn:nth-child(5n+5){--cg:var(--g7);--cc:#f43f5e}
/* the site footer, Oct 2026: full width at the bottom of the page, in the Studio's own colours (js/site-footer.js) */
.sftfoot,.sftfoot.solo{max-width:none;margin:56px 0 0;padding:0;border:0;border-radius:0;background:none;font-size:13px;color:var(--mut,#9fb0a8);overflow:visible;position:relative}
.sftfoot::before{content:"";display:block;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink,#fff) 18%,transparent) 15%,color-mix(in srgb,var(--ink,#fff) 18%,transparent) 85%,transparent)}
.sftin{max-width:none;margin:0 auto;padding:22px 8px 18px}
.sftrow{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 40px}
.sftme{display:flex;flex-direction:column;gap:10px}.sftname{font-size:13px;letter-spacing:.24em;color:var(--ink,#fff);font-weight:800}.sftname span{font-weight:400;opacity:.7}
.sftfoot .sftlinks{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0}.sftfoot .sftlinks a{color:var(--ink,#fff);opacity:.8;text-decoration:none}.sftfoot .sftlinks a:hover,.sftfoot .sftlinks a:focus-visible{opacity:1;text-decoration:underline}
.sftfoot .sftbrands{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0;border:0}
.sftfoot .sftbrands a{padding:5px 12px;border:1px solid color-mix(in srgb,var(--ink,#fff) 16%,transparent);border-radius:99px;color:var(--ink,#fff);font-weight:600;font-size:12.5px;text-decoration:none;transition:border-color .15s,background .15s}
.sftfoot .sftbrands a:hover,.sftfoot .sftbrands a:focus-visible{border-color:var(--cy,#00b3ff);background:color-mix(in srgb,var(--cy,#00b3ff) 10%,transparent);text-decoration:none}
.sftfoot .sftbrands a.sfteco{border-color:transparent;color:var(--cy,#00b3ff);padding-left:4px}.sftfoot .sftlabel{color:var(--cy,#00b3ff);font-size:10.5px;letter-spacing:.2em;margin-right:4px}
.sftfoot .sftco{margin:18px 0 0;padding:0;font-size:11.5px;line-height:1.6;opacity:.65}
body.has-omni .sftfoot,body.has-omni .sftfoot.solo{margin-bottom:0}body.has-omni .sftin{padding-bottom:96px}/* the floating Ask bar must not cover the company line */
@media (max-width:760px){.sftrow{flex-direction:column}.sftin{padding:18px 4px 16px}body.has-omni .sftin{padding-bottom:110px}}
/* Smart Create and DALFAST Studio in the top bar (owner, 27 Oct 2026) */
.top .toplinks a[href="#/ai"]{background:linear-gradient(135deg,#e11d48,#fb7185);color:#fff}
.top .toplinks a[href="#/originals"]{background:linear-gradient(135deg,#1e3a8a,#3b82f6);color:#fff}
.top .toplinks a[href="#/templates"]{background:linear-gradient(135deg,#f8fafc,#dbe4f0);color:#0f172a}
.top .pricebtn{display:inline-flex;align-items:center;height:34px;padding:0 13px;margin-left:6px;border-radius:999px;white-space:nowrap;font-weight:700;font-size:14px;text-decoration:none;color:#fde68a;box-shadow:inset 0 0 0 1.5px #00e5ff;transition:background .15s,transform .15s}.top .pricebtn:hover{background:rgba(0,229,255,.12);transform:translateY(-1px)}.top .pricebtn[aria-current="page"]{background:rgba(0,229,255,.16);box-shadow:inset 0 0 0 1.5px #00e5ff,0 0 0 2px #fff}@media (max-width:900px){.top .pricebtn{display:none}}
/* one page frame everywhere (27 Oct 2026 review): Earnings, Analytics and Help were centred in narrower frames, so their titles
   jumped sideways against every other page; their reading width stays, their left edge now matches. A Sign in button is its own width. */
.page-wrap.erpage,.page-wrap.anpage,.page-wrap.hlpage{margin-left:0;margin-right:auto}
.page-wrap.anpage .btn.primary{width:auto;align-self:flex-start;justify-self:start}
/* the DALFAST logo (DF monogram, the owner's choice, 27 Oct 2026): mark + drawn wordmark + the brand's name, in the top bar */
.top .logo{display:flex;align-items:center;gap:7px;letter-spacing:0;color:#f4f1fb}
.top .logo .lgmark{width:28px;height:28px;flex:none}.top .logo .lgword{height:13px;width:auto;flex:none}
.top .logo small{font-size:10px;font-weight:700;letter-spacing:.24em;opacity:.75;padding-left:7px;border-left:1.5px solid currentColor}
@media (max-width:640px){.top .logo .lgword,.top .logo small{display:none}}

/* DALFAST green & Ultra cyan (27 Oct 2026, owner's choice): the brand's main buttons are the cyan of the logo, with dark letters */
:root.st-brand .btn.primary{background:linear-gradient(135deg,#00f0ff,#00b3ff);border-color:#00c8ff;color:#062a33}:root.st-brand .btn.primary:hover{filter:brightness(1.08)}
/* the master logo in the top bar: Ultra cyan DF monogram, Montserrat SemiBold DALFAST, a gold rule, STUDIO spaced wide */
.top .logo{color:#f7f7f7}.top .logo .lgword{height:14px}.top .logo .lgrule{width:1.5px;height:16px;background:#00b3ff;margin:0 2px 0 3px}.top .logo .lgsub{height:8px;width:auto;flex:none;opacity:.85}
@media (max-width:640px){.top .logo .lgrule,.top .logo .lgsub{display:none}}
/* one brand in the chrome (owner, 27 Oct 2026: "proceed with the top bar and others"): in the DALFAST theme the top bar and the
   sidebar stop being a rainbow. Upload is the one main action (Ultra cyan, dark letters); Store, Plans & pricing and Ask are calm
   outlines with a cyan icon; every sidebar icon is the same cyan line on a quiet tile, the page you are on filled cyan. */
:root.st-brand header.top .tbgrp{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
:root.st-brand header.top .storebtn,:root.st-brand header.top .pricebtn,:root.st-brand header.top .topup[data-act="akOpen"]{background:transparent!important;background-image:none!important;color:#f7f7f7!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;text-shadow:none!important}
:root.st-brand header.top .storebtn:hover,:root.st-brand header.top .pricebtn:hover,:root.st-brand header.top .topup[data-act="akOpen"]:hover{border-color:#00c8ff!important;background:rgba(0,200,255,.08)!important}
:root.st-brand header.top .storebtn svg,:root.st-brand header.top .pricebtn svg,:root.st-brand header.top .topup[data-act="akOpen"] svg{color:#00f0ff;stroke:#00f0ff}
:root.st-brand header.top .topup[data-act="upAny"]{background:linear-gradient(135deg,#00f0ff,#00b3ff)!important;color:#062a33!important;border:0!important;box-shadow:0 6px 18px -8px rgba(0,200,255,.7)!important;text-shadow:none!important}
:root.st-brand header.top .topup[data-act="upAny"] svg{color:#062a33;stroke:#062a33}
:root.st-brand #side a.nav svg.ic{background:rgba(0,200,255,.08)!important;background-image:none!important;color:#5ff6ff;stroke:#5ff6ff;box-shadow:inset 0 0 0 1px rgba(0,200,255,.18)}
:root.st-brand #side a.nav[aria-current="page"] svg.ic{background:linear-gradient(135deg,#00f0ff,#00b3ff)!important;color:#062a33;stroke:#062a33;box-shadow:0 4px 14px -6px rgba(0,200,255,.8)}
:root.st-brand[data-theme="light"] #side a.nav svg.ic{color:#0079b8;stroke:#0079b8;background:rgba(0,150,214,.08)!important}
@media (prefers-color-scheme:light){:root.st-brand:not([data-theme="dark"]) #side a.nav svg.ic{color:#0079b8;stroke:#0079b8;background:rgba(0,150,214,.08)!important}:root.st-brand:not([data-theme="dark"]) header.top .storebtn,:root.st-brand:not([data-theme="dark"]) header.top .pricebtn,:root.st-brand:not([data-theme="dark"]) header.top .topup[data-act="akOpen"]{color:#f7f7f7!important}}
/* the rotating rainbow on chips, filter menus and nav tiles becomes one cyan family in the DALFAST theme (owner, 27 Oct 2026) */
:root.st-brand{--g1:linear-gradient(135deg,#00f0ff,#00b3ff);--g2:linear-gradient(135deg,#5ff6ff,#00c8ff);--g3:linear-gradient(135deg,#00e0ff,#0094d6);--g4:linear-gradient(135deg,#00f0ff,#00a3e8);--g5:linear-gradient(135deg,#7ff8ff,#00b3ff);--g6:linear-gradient(135deg,#00d8ff,#0079b8);--g7:linear-gradient(135deg,#3ff3ff,#00a0e0);--g8:linear-gradient(135deg,#00f0ff,#0088cc)}
:root.st-brand :is(.chips>.chip,.dpchips>button,.dcbar>.dcbtn,.qpchips>button){--cc:#00c8ff!important}
:root.st-brand .mslcats .abchip{background:linear-gradient(135deg,#00f0ff,#00b3ff)!important;color:#062a33!important}:root.st-brand .mslcats .abchip[aria-pressed="true"]{box-shadow:0 0 0 2px #7ff8ff!important}
/* every sidebar item looks like the current one (owner, 27 Oct 2026: "all tool bar must look like this"): a filled Ultra cyan tile with
   a dark icon and a white label; the page you are on keeps its highlighted row and a brighter glow */
:root.st-brand #side a.nav svg.ic,:root.st-brand[data-theme="light"] #side a.nav svg.ic{background:linear-gradient(135deg,#00f0ff,#00b3ff)!important;color:#062a33!important;stroke:#062a33!important;box-shadow:none}
@media (prefers-color-scheme:light){:root.st-brand:not([data-theme="dark"]) #side a.nav svg.ic{background:linear-gradient(135deg,#00f0ff,#00b3ff)!important;color:#062a33!important;stroke:#062a33!important}}
:root.st-brand #side a.nav span{color:#f7f7f7;font-weight:600}
:root.st-brand #side a.nav[aria-current="page"] svg.ic{box-shadow:0 0 0 2px rgba(0,240,255,.35),0 4px 14px -4px rgba(0,200,255,.9)}
/* the top bar's named buttons follow the same look: a filled cyan icon tile, white label */
:root.st-brand header.top :is(.storebtn,.pricebtn,.topup[data-act="akOpen"]) svg{background:linear-gradient(135deg,#00f0ff,#00b3ff);color:#062a33!important;stroke:#062a33!important;border-radius:7px;padding:3px;box-sizing:content-box}
:root.st-brand header.top :is(.storebtn,.pricebtn,.topup[data-act="akOpen"]){font-weight:600}
/* ONE colour, three uses (owner, 27 Oct 2026: apply the brand colour the way the leading creative platforms do):
   1 main actions = solid Ultra cyan, dark letters; 2 secondary actions and selected chips = a soft cyan tint with cyan letters;
   3 everything else = faint white glass with white letters. No other colours in the chrome. */
:root.st-brand{--cy:#00e5ff;--cy-ink:#04222a;--glass:rgba(255,255,255,.06);--glass2:rgba(255,255,255,.10)}
:root.st-brand .btn.primary,:root.st-brand .pfbtn:not(.ghost),:root.st-brand .qvaskrow .btn,:root.st-brand header.top .topup[data-act="upAny"]{background:var(--cy)!important;background-image:none!important;border:0!important;color:var(--cy-ink)!important;border-radius:12px;font-weight:600;box-shadow:none!important}
:root.st-brand .btn.primary:hover,:root.st-brand .pfbtn:not(.ghost):hover,:root.st-brand .qvaskrow .btn:hover,:root.st-brand header.top .topup[data-act="upAny"]:hover{filter:none;background:#5ff0ff!important}
:root.st-brand .btn:not(.primary){background:var(--glass);border:1px solid transparent;color:#f7f7f8;border-radius:12px}
:root.st-brand .btn:not(.primary):hover{background:var(--glass2)}
:root.st-brand header.top :is(.storebtn,.pricebtn,.topup[data-act="akOpen"]){background:var(--glass)!important;border:0!important;border-radius:10px!important}
:root.st-brand header.top :is(.storebtn,.pricebtn,.topup[data-act="akOpen"]):hover{background:var(--glass2)!important}
:root.st-brand header.top .tbgrp{background:transparent;box-shadow:none}
/* chips and filter menus: glass; the chosen one tinted cyan (no gradient borders) */
:root.st-brand :is(.chips>.chip,.dpchips>button,.qpchips>button,.dcbar>.dcbtn,.mslcats>button){background:var(--glass)!important;border:1px solid transparent!important;color:#f7f7f8!important;border-radius:10px!important;box-shadow:none!important}
:root.st-brand :is(.chips>.chip,.dpchips>button,.qpchips>button,.mslcats>button)::before{display:none!important}
:root.st-brand :is(.chips>.chip[aria-pressed="true"],.dpchips>button[aria-selected="true"],.qpchips>button[aria-selected="true"],.dcbar>.dcbtn.set,.mslcats>button[aria-pressed="true"]){background:rgba(0,229,255,.18)!important;color:var(--cy)!important}
:root.st-brand :is(.chips,.dpchips,.qpchips,.mslcats) small{color:inherit;opacity:.6}
:root.st-brand .mslcats .abchip{background:var(--cy)!important;color:var(--cy-ink)!important}
/* labels and small highlights in the colour */
:root.st-brand .hmhello,:root.st-brand .eyebrow,:root.st-brand .qvfeat h3{color:var(--cy)}
:root.st-brand .qvask{background:var(--glass)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:none!important}
:root.st-brand .qvtry button{background:rgba(0,229,255,.10)!important;border:0!important;color:var(--cy)!important;border-radius:10px!important}
:root.st-brand .qvtry button:hover{background:rgba(0,229,255,.22)!important}
:root.st-brand .nav[aria-current="page"]::before{background:var(--cy)!important}
:root.st-brand #side a.nav[aria-current="page"]{background:rgba(0,229,255,.10)!important}
:root.st-brand header.top .iconbtn{color:#f7f7f8!important}:root.st-brand header.top .iconbtn svg{stroke:currentColor!important}
:root.st-brand header.top .iconbtn:hover{background:var(--glass2)!important}

/* the Higgsfield way, our colour (owner, 27 Oct 2026: "work how Higgsfield is and apply our own colour as they do theirs"):
   neutral charcoal everywhere (page #131517, cards #1C1E20, raised #23262A, header #0F1113), white text, grey secondary text;
   Ultra cyan only for main actions, tints and highlights. */
:root.st-brand header.top{background:#0f1113!important;border-bottom:1px solid rgba(255,255,255,.06)}
:root.st-brand #side{background:#0f1113!important;border-right:1px solid rgba(255,255,255,.06)}
:root.st-brand #side a.nav[aria-current="page"]{box-shadow:none!important}
/* the Ask bar in DALFAST colour (owner, 28 Oct 2026): cyan send button with dark arrow (faint until there is text), cyan +, cyan focus ring */
:root.st-brand .omnisend{background:var(--cy)!important;color:var(--cy-ink)!important}
:root.st-brand .omnisend svg{stroke:var(--cy-ink)!important}
:root.st-brand .omniplus>button,:root.st-brand [data-act="omniPlus"]{color:var(--cy)!important}:root.st-brand [data-act="omniPlus"] svg{stroke:var(--cy)!important}
:root.st-brand .omnibar:focus-within{border-color:rgba(0,229,255,.55)!important;box-shadow:0 0 0 3px rgba(0,229,255,.16)!important}
:root.st-brand .omniq::placeholder{color:var(--muted)}
/* cards across the Studio (28 Oct 2026, owner approved the recommendation): title white and bold, the line beneath soft white; cyan stays for actions only */
:root.st-brand main :is(.bcard,.tpfcard,.dpcard,.rcard,.qptile,.qvfcard,.pscard,.gbcard,.evcard,.tplcard,.msgcard,.pack,.oncard,.bgtile,.qatile) :is(.t,b,strong,h3,h4):not(.qvtag *):not(.rcplay){color:#f7f7f8!important;font-weight:700}
:root.st-brand main :is(.bcard,.tpfcard,.dpcard,.rcard,.qptile,.qvfcard,.pscard,.gbcard,.evcard,.tplcard,.msgcard,.pack,.oncard,.bgtile,.qatile) :is(.d,.bdesc,.dpd,small,figcaption span,.qptx>span,.qvfx>span>span){color:#c4c6cc!important;opacity:1}
/* the seasonal banner in DALFAST colour (28 Oct 2026): charcoal glass, cyan star and links, soft chips */
:root.st-brand .seasban{background:linear-gradient(135deg,rgba(0,229,255,.10),rgba(255,255,255,.03))!important;border:1px solid rgba(0,229,255,.25)!important;color:#f7f7f8!important}
:root.st-brand .seasban .seasic{background:var(--cy)!important;color:var(--cy-ink)!important}
:root.st-brand .seasban small{color:#c4c6cc!important}
:root.st-brand .seasban::after{background:radial-gradient(circle at 85% 20%,rgba(0,229,255,.16),transparent 45%)!important}
:root.st-brand .seasban .seaschip{background:rgba(255,255,255,.08)!important;color:#f7f7f8!important;border:0!important}:root.st-brand .seasban .seaschip:hover{background:rgba(0,229,255,.18)!important;color:var(--cy)!important}
:root.st-brand .seasban .seasall{color:var(--cy)!important;background:transparent!important}
/* one chip style everywhere (owner, 28 Oct 2026: "colour not align"): every chip, toggle and segmented choice is white glass with
   white text; the chosen one is a soft cyan tint with cyan text. No solid cyan chips (solid cyan is only for the main button). */
:root.st-brand :is(.chip,.seg>button,.qvtry button,.trdlangs>button,.seaschip,.dpchips>button,.qpchips>button){background:rgba(255,255,255,.06)!important;color:#f7f7f8!important;border:1px solid transparent!important;box-shadow:none!important}
:root.st-brand :is(.chip,.seg>button,.qvtry button,.trdlangs>button,.seaschip,.dpchips>button,.qpchips>button):hover{background:rgba(255,255,255,.10)!important}
:root.st-brand :is(.chip,.seg>button,.trdlangs>button,.dpchips>button,.qpchips>button):is([aria-pressed="true"],[aria-selected="true"],.on,.active){background:rgba(0,229,255,.18)!important;color:var(--cy)!important}
:root.st-brand .seg{background:rgba(255,255,255,.03)!important;border:1px solid rgba(255,255,255,.08)!important}
:root.st-brand .mslcats .abchip{background:var(--cy)!important;color:var(--cy-ink)!important}
/* Speak instead of typing (js/voice-type.js) */
.vtmic{display:inline-grid;place-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--ink);cursor:pointer;padding:0}
.vtmic:hover{border-color:var(--cy,#00e5ff);color:var(--cy,#00e5ff)}
.vtmic:focus-visible{outline:2px solid var(--cy,#00e5ff);outline-offset:2px}
.vtmic.vtask{width:50px;border-radius:14px}
.vtmic.vtfloat{position:fixed;z-index:9000;border-radius:50%;background:var(--surface2,#23262a)}
.vtmic.vtfloat svg{width:15px;height:15px}
.vtmic.rec{background:var(--cy,#00e5ff)!important;color:var(--cy-ink,#04222a)!important;border-color:transparent;animation:vtpulse 1.2s ease-in-out infinite}
@keyframes vtpulse{0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,.55)}50%{box-shadow:0 0 0 8px rgba(0,229,255,0)}}
@media (prefers-reduced-motion:reduce){.vtmic.rec{animation:none}}
input.vthas{padding-right:40px}
:root:not(.st-brand) .vtmic{border-color:rgba(0,0,0,.15);background:rgba(0,0,0,.04)}
/* phone: the ask box keeps the full width for words; microphone + Go share the row below */
@media (max-width:520px){.qvaskrow{flex-wrap:wrap!important}.qvaskrow input{flex:1 1 100%!important}.qvaskrow .btn{flex:1 1 auto!important}.vtmic.vtask{height:46px}}

:root header.top .toplinks.tbcreate a[aria-current="page"]::before,:root header.top .toplinks.tbcreate a[aria-current="true"]::before{opacity:1;box-shadow:0 0 10px #00e5ff}/* the studio pills in the top bar, rebranded in place (owner, 28 Oct 2026: "we do not want you to move it, we just want a rebrand"):
   same pills, same order, same size; the six unrelated rainbow colours become one DALFAST family — white, Ultra cyan, deep cyan,
   ocean blue and charcoal with a cyan ring — so they still stand apart from each other but read as one brand. */
.top .toplinks a[href="#/templates"]{background:linear-gradient(135deg,#ffffff,#d9f7ff);color:#04222a}
.top .toplinks a[href="#/builders"]{background:linear-gradient(135deg,#00f0ff,#00b3ff);color:#04222a}
.top .toplinks a[href="#/design"]{background:linear-gradient(135deg,#00b3ff,#0a6cff);color:#fff}
.top .toplinks a[href="#/marketing"]{background:linear-gradient(135deg,#0b2f3a,#0e5566);color:#bff8ff;box-shadow:inset 0 0 0 1px rgba(0,229,255,.55)}
.top .toplinks a[href="#/ai"]{background:#131517;color:#fff;box-shadow:inset 0 0 0 1.5px #00e5ff}
.top .toplinks a[href="#/originals"]{background:linear-gradient(135deg,#062a4d,#0a6cff);color:#fff}
.top .toplinks a[href="#/video"]{background:linear-gradient(135deg,#0a2a33,#00838f);color:#e6fdff;box-shadow:inset 0 0 0 1px rgba(0,229,255,.4)}
.top .toplinks a[href="#/sound"]{background:#0e1012;color:#7ff4ff;box-shadow:inset 0 0 0 1px rgba(0,229,255,.55)}
.top .toplinks a[href="#/video"]:hover,.top .toplinks a[href="#/sound"]:hover{box-shadow:0 4px 20px -4px #00e5ff,inset 0 0 0 1px rgba(0,229,255,.6)}
.top .toplinks a[href="#/templates"]:hover,.top .toplinks a[href="#/builders"]:hover,.top .toplinks a[href="#/design"]:hover,.top .toplinks a[href="#/marketing"]:hover,.top .toplinks a[href="#/ai"]:hover,.top .toplinks a[href="#/originals"]:hover{box-shadow:0 4px 20px -4px #00e5ff,inset 0 0 0 1px rgba(0,229,255,.6)}
/* the page you are on: a small bar under the words, in the pill's own text colour (an outline ring was clipped by the bar and
   crowded its neighbours, owner 28 Oct 2026: "fix it") */
.top .toplinks a[aria-current="page"]{position:relative;outline:0;box-shadow:0 6px 18px -8px #00e5ff}.top .toplinks a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:3px;width:18px;height:2.5px;margin-left:-9px;border-radius:2px;background:currentColor}
.top .toplinks a[href="#/marketing"][aria-current="page"]{box-shadow:inset 0 0 0 1px rgba(0,229,255,.55),0 6px 18px -8px #00e5ff}.top .toplinks a[href="#/ai"][aria-current="page"]{box-shadow:inset 0 0 0 1.5px #00e5ff,0 6px 18px -8px #00e5ff}
/* the top bar organised with the logo's own mark (owner, 28 Oct 2026, pointing at the cyan rule in "DALFAST | STUDIO"): a thin
   Ultra-blue rule before the Shop group, before Ask and Upload, and before the account icons — the groups stay where they are */
:root header.top .tbshop::before,:root header.top .tbact::before,:root header.top .tbact::after{content:"";flex:none;width:1.5px;height:22px;background:#00b3ff;border-radius:1px}
:root header.top .tbshop::before,:root header.top .tbact::before{margin-right:3px!important}
:root header.top .tbact::after{margin-left:3px!important}
:root header.top .tbshop,:root header.top .tbact{background:transparent!important;box-shadow:none!important;margin:0 2px!important;padding:0!important}
:root header.top .toplinks.tbcreate{padding:0!important;gap:4px!important;background:transparent!important;box-shadow:none!important}

/* the open project's name never shrinks to just its mark (owner, 28 Oct 2026: "what is this? look strange" — a lone cyan square
   by the logo): the name keeps room for itself; when the bar is full the studio pills step aside (they are in the side menu) */
@media (min-width:1100px){:root header.top .projname:has(.pnchip){flex:0 1 auto;min-width:200px;max-width:340px}}
:root header.top.pnnone .projname{display:none}
:root header.top.pnaway .projname{display:none}
@media (max-width:700px){:root header.top .tbshop::before,:root header.top .tbact::before,:root header.top .tbact::after{display:none}}
/* Voiceover, rebranded (owner, 28 Oct 2026: "rebrand this"): a studio panel with a headline, bright group chips, larger voice
   cards with their orb and waveform, a calm script box and the Ultra-cyan button */
main .msgal.msvo{padding:26px;border-radius:22px;background:radial-gradient(110% 140% at 100% 0,rgba(0,229,255,.10),transparent 55%),#131517;border:1px solid rgba(0,229,255,.22)}
main .msvo>h3{display:inline-flex;align-items:center;gap:10px;margin:0;font:800 11px/1 "DF Head",Inter,sans-serif!important;letter-spacing:.2em;text-transform:uppercase;color:#00e5ff}main .msvo>h3::before{content:"";width:22px;height:1.5px;background:#00b3ff}
main .msvo .msvh{margin:10px 0 6px;font:800 clamp(26px,2.6vw,38px)/1.05 "DF Head",Inter,sans-serif;letter-spacing:-.02em;color:#fff}main .msvo .msvh em{font-style:normal;background:linear-gradient(90deg,#00f0ff,#00b3ff);-webkit-background-clip:text;background-clip:text;color:transparent}
main .msvo .msvlead{margin:0 0 18px!important;font-size:15px;color:#c3cad1}
main .msvo .chips{gap:8px;flex-wrap:wrap}:root main .msvo .chips .chip{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#e9ecef;font-weight:600;font-size:13.5px}
main .msvo .chips .chip:hover{border-color:rgba(0,229,255,.5);color:#fff}:root.st-brand main .msvo .chips > .chip[aria-pressed="true"],main .msvo .chips .chip[aria-pressed="true"]{background:linear-gradient(135deg,#00f0ff,#00b3ff)!important;border-color:transparent!important;color:#04222a!important;box-shadow:0 8px 22px -10px #00e5ff}
main .msvo .msvgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:16px}
main .msvo .msvcard{min-height:118px;padding:16px!important;grid-template-columns:52px minmax(0,1fr)!important;transition:transform .25s,border-color .25s}main .msvo .msvcard:hover{transform:translateY(-3px);border-color:rgba(0,229,255,.45)!important}
main .msvo .msvorb{width:52px;height:52px}main .msvo .msvpick b{font:800 17px/1.15 "DF Head",Inter,sans-serif;color:#fff}main .msvo .msvpick span{font-size:13px;color:#aeb6be;line-height:1.35}
main .msvo .msvcard .msvplay{width:38px!important;height:38px!important;background:rgba(0,229,255,.14)!important;color:#00e5ff!important;border:1px solid rgba(0,229,255,.4)!important}main .msvo .msvcard .msvplay:hover{background:#00e5ff!important;color:#04222a!important}
main .msvo label.f{display:flex!important;flex-direction:column!important;align-items:stretch!important;margin-top:20px!important;font-weight:700;color:#fff}main .msvo label.f textarea{width:100%!important;max-width:none!important}main .msvo label.f .d{font-weight:400}
main .msvo textarea{margin-top:8px;border-radius:14px!important;background:#0e1012!important;border:1px solid rgba(255,255,255,.1)!important;padding:14px 16px!important;font-size:15px;line-height:1.5;color:#fff}main .msvo textarea:focus{border-color:#00e5ff!important;box-shadow:0 0 0 3px rgba(0,229,255,.18)!important;outline:0}
main .msvo .btn.primary{padding:12px 20px;border-radius:12px;background:linear-gradient(135deg,#00f0ff,#00b3ff)!important;color:#04222a!important;border:0!important;font-weight:800;box-shadow:0 10px 26px -12px #00e5ff}main .msvo .btn.primary:disabled{opacity:.5;box-shadow:none}
main .msvo .msvwave{grid-column:2}
@media (max-width:640px){main .msgal.msvo{padding:18px}main .msvo .msvgrid{grid-template-columns:1fr}}
/* the model menu ("Who writes your words"), rebranded (owner, 29 Oct 2026): a dark glass panel, each model with a short line,
   the chosen one lit in cyan, credits as a quiet cyan figure, effort as one segmented control */
:root .aimc-pop{padding:8px!important;border-radius:18px!important;background:rgba(19,21,23,.96)!important;backdrop-filter:blur(14px);border:1px solid rgba(0,229,255,.25)!important;box-shadow:0 24px 60px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04)!important;color:#fff!important}
:root .aimc-pop .aimc-ph{padding:10px 12px 12px!important;border-bottom:1px solid rgba(255,255,255,.07)!important;margin-bottom:6px}
:root .aimc-pop .aimc-ph b{font:800 15px/1.2 "DF Head",Inter,sans-serif!important;color:#fff}
:root .aimc-pop .aimc-ph span{color:#8f99a3!important;font-size:12.5px!important}
:root .aimc-pop .aimc-o{display:flex!important;align-items:center;gap:10px;width:100%;padding:10px 12px!important;border-radius:12px!important;border:0!important;background:transparent!important;color:#e9ecef!important;text-align:left;position:relative}
:root .aimc-pop .aimc-o b{display:flex;flex-direction:column;gap:2px;flex:1;font-weight:700!important;font-size:14px}
:root .aimc-pop .aimc-o b small{font-weight:500;font-size:12px;color:#8f99a3}
:root .aimc-pop .aimc-o em{font-style:normal;font-weight:700;font-size:12.5px;color:#9ff3ff;opacity:.85}
:root .aimc-pop .aimc-o:hover,:root .aimc-pop .aimc-o:focus-visible{background:rgba(255,255,255,.05)!important;outline:0}
:root .aimc-pop .aimc-o.on{background:rgba(0,229,255,.1)!important;box-shadow:inset 3px 0 0 #00e5ff}
:root .aimc-pop .aimc-o.on b::after{content:none}
:root .aimc-pop .aimc-eff{display:flex!important;align-items:center;gap:4px;margin-top:6px;padding:10px 8px 4px!important;border-top:1px solid rgba(255,255,255,.07)!important}
:root .aimc-pop .aimc-eff span{margin-right:auto;font-size:12.5px;color:#8f99a3}
:root .aimc-pop .aimc-eff button{padding:6px 10px!important;border-radius:999px!important;border:1px solid transparent!important;background:transparent!important;color:#c3cad1!important;font-size:12.5px;font-weight:600}
:root .aimc-pop .aimc-eff button.on{background:linear-gradient(135deg,#00f0ff,#00b3ff)!important;color:#04222a!important}
:root .aimc-pop .aimc-o b{align-items:flex-start;text-align:left}
/* every "What would you like to do?" box, rebranded (owner, 29 Oct 2026: "i mean those"): one box instead of a box in a card,
   the question as a cyan label, the same glowing composer as Smart Create, the ideas as calm outlined suggestions */
:root main section.qvask,:root.st-brand main section.qvask{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:8px 0 26px!important}
:root main section.qvask>label{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;font:800 11px/1 "DF Head",Inter,sans-serif!important;letter-spacing:.2em;text-transform:uppercase;color:#00e5ff!important}
:root main section.qvask>label::before{content:"";width:22px;height:1.5px;background:#00b3ff}
:root main section.qvask .qvaskrow{padding:14px 14px 12px!important;border-radius:22px!important;background:linear-gradient(180deg,#191c20,#131517)!important;border:1px solid rgba(0,229,255,.3)!important;box-shadow:0 20px 50px -30px #00e5ff!important;transition:box-shadow .3s,border-color .3s}
:root main section.qvask .qvaskrow:focus-within{border-color:#00e5ff!important;box-shadow:0 0 0 4px rgba(0,229,255,.14),0 24px 60px -28px #00e5ff!important}
:root main section.qvask .qvaskrow input{font-size:18px!important;color:#fff!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:6px 8px!important;outline:0}
:root main section.qvask .qvaskrow input::placeholder{color:#7f8a94}
:root main section.qvask .askbgo{width:44px!important;height:44px!important;border-radius:50%!important;background:linear-gradient(135deg,#00f0ff,#00b3ff)!important;color:#04222a!important;border:0!important;box-shadow:0 8px 24px -8px #00e5ff!important}
:root main section.qvask .qvtry{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
:root main section.qvask .qvtry>span{font-size:0!important;margin-right:4px}:root main section.qvask .qvtry>span::before{content:"Ideas";font:800 10.5px/1 "DF Head",Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8f99a3}
:root.st-brand main section.qvask .qvtry>button,:root main section.qvask .qvtry>button{padding:9px 14px!important;border-radius:12px!important;background:transparent!important;border:1px solid rgba(255,255,255,.12)!important;color:#e9ecef!important;font-size:13.5px;font-weight:600;transition:border-color .2s,color .2s,background .2s}
:root main section.qvask .qvtry>button::after{content:" →";color:#00e5ff;opacity:0;transition:opacity .2s}
:root.st-brand main section.qvask .qvtry>button:hover,:root main section.qvask .qvtry>button:hover{border-color:rgba(0,229,255,.55)!important;background:rgba(0,229,255,.06)!important;color:#fff!important}
:root main section.qvask .qvtry>button:hover::after{opacity:1}
/* drop-down lists open dark with light words everywhere (owner, 29 Oct 2026: Smart Create's Style list opened white with pale words) */
:root:not([data-theme="light"]) select{color-scheme:dark}:root:not([data-theme="light"]) select option,:root:not([data-theme="light"]) select optgroup{background-color:#1b1e21;color:#e9ecef}:root:not([data-theme="light"]) select option:checked{background-color:#0e5566;color:#fff}
/* the engine choices under the Home box: Words and Pictures, small and named */
.h2eng{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px auto 0;width:min(760px,100%)}
.h2eng .aimc{background:rgba(10,12,14,.55)!important;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14)!important}
.h2eng .aimc:not(.aimm)::before{content:"Words";font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9aa4ad;margin-right:8px}
/* Voiceover in the panel style (owner, 29 Oct 2026: "rebrand the Voiceover the same way"): the script as a panel with its label
   inside, the voice engine as a pill, one wide cyan button */
main .msvo .msvscript{display:flex;flex-direction:column;gap:4px;margin-top:18px;padding:16px 18px;border-radius:18px;background:#0e1012;border:1px solid rgba(255,255,255,.1);transition:border-color .2s,box-shadow .2s}
main .msvo .msvscript:focus-within{border-color:#00e5ff;box-shadow:0 0 0 3px rgba(0,229,255,.14)}
main .msvo .msvscript b{font:800 15px/1.2 "DF Head",Inter,sans-serif;color:#fff}main .msvo .msvscript>span{font-size:13px;color:#8f99a3}
main .msvo .msvscript textarea{margin-top:8px!important;border:0!important;background:transparent!important;padding:0!important;box-shadow:none!important;min-height:110px;font-size:16px;color:#fff;outline:0;resize:vertical}
main .msvo .msvgo{flex-direction:column;align-items:stretch}main .msvo .msvgo .aimc{order:-1;align-self:flex-start;height:40px;border-radius:12px!important}
main .msvo .msvgo .btn.primary{justify-content:center;min-height:54px;font-size:16px}

/* ---------- Store search bar (30 Oct 2026) ---------- */
.mkbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 14px}
.mksearch{flex:1 1 320px;display:flex;align-items:center;gap:10px;height:50px;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);transition:border-color .15s,box-shadow .15s}
.mksearch:focus-within{border-color:#00e5ff;box-shadow:0 0 0 3px rgba(0,229,255,.16)}
.mksearch svg{width:19px;height:19px;flex:none;fill:none;stroke:#8b93a1;stroke-width:2;stroke-linecap:round}
.mksearch input{flex:1;min-width:0;height:100%;border:0;background:none;color:inherit;font:500 15.5px/1 inherit;outline:none}
.mksearch input::placeholder{color:#7c8493}
.mkseg{display:flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.mkseg button{height:40px;padding:0 18px;border:0;border-radius:999px;background:none;color:#b4bac4;font:600 14px/1 inherit;cursor:pointer}
.mkseg button[aria-pressed="true"]{background:#fff;color:#131517}
.mkseg button:focus-visible,.mkcats button:focus-visible{outline:2px solid #00e5ff;outline-offset:2px}
.mksort{display:flex;align-items:center;gap:6px;height:50px;padding:0 6px 0 18px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:#a9b0bb;font:600 13px/1 inherit}
.mksort select[data-mkf]{border:0;background-color:transparent;padding:8px 30px 8px 4px;color:#fff;font:600 14px/1 inherit}
.mkcats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 18px;padding-bottom:2px;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.mkcats::-webkit-scrollbar{display:none}
.mkcats button{flex:none;height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:none;color:#c9ced6;font:600 13.5px/1 inherit;cursor:pointer;transition:background .15s,border-color .15s}
.mkcats button:hover{border-color:rgba(255,255,255,.25)}
.mkcats button[aria-pressed="true"]{background:linear-gradient(90deg,#00e5ff,#00b3ff);border-color:transparent;color:#071318}
@media (max-width:640px){.mksearch{flex-basis:100%}.mkseg{flex:1}.mkseg button{flex:1;padding:0 10px}.mksort{flex:1}}
.mkgood{margin:10px 0 0;color:#c9ced6}.mkgood b{color:#fff}.mkbadges{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 14px}.mkbadges span{padding:7px 12px;border-radius:999px;border:1px solid rgba(0,229,255,.35);color:#bff6ff;font:600 12.5px/1 inherit;background:rgba(0,229,255,.06)}
/* The Store's product viewer (js/market-zoom.js; owner, 30 Oct 2026: let customers look closely at what they buy) */
.mzg{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);gap:22px;margin:4px 0 22px;align-items:start}
.mzstage{position:relative;background:radial-gradient(120% 90% at 50% 0%,#1f2328,#131517);border:1px solid rgba(255,255,255,.08);border-radius:18px;--sh:min(588px,calc(70vw - 52px));height:calc(var(--sh) + 52px);display:grid;place-items:center;padding:26px;overflow:hidden;cursor:zoom-in}
.mzimg{position:relative;width:min(100%,calc(var(--sh) * var(--ar)));aspect-ratio:var(--ar);box-shadow:0 24px 60px -20px rgba(0,0,0,.7);border-radius:4px;overflow:hidden;background:#fff;transition:transform .18s ease-out;will-change:transform}
.mzimg>img,.mzimg>svg{display:block;width:100%;height:100%;object-fit:contain}
.mzstage.zoomed .mzimg{transition:none;box-shadow:none;border-radius:0}.mzstage.zoomed .mzhint,.mzstage.zoomed .mzarr{opacity:0}
.mzhint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;white-space:nowrap;background:rgba(19,21,23,.78);backdrop-filter:blur(8px);color:#e9edf1;border:1px solid rgba(255,255,255,.12);font-size:12.5px;padding:7px 12px 7px 9px;border-radius:999px;pointer-events:none;transition:opacity .2s}
.mzhint svg,.mztools svg,.mzq svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.mzhint svg{stroke:#00e5ff}
.mzht{display:none}@media (hover:none),(pointer:coarse){.mzhf{display:none}.mzht{display:inline}}
.mzarr{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(19,21,23,.7);color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:opacity .2s,background .15s}.mzarr:hover{background:#00b3ff;color:#06141a}.mzarr.l{left:12px}.mzarr.r{right:12px}
.mzside{display:flex;flex-direction:column;gap:14px;min-width:0}
.mzcap{display:flex;flex-direction:column;gap:2px}.mzcap b{font-size:17px}.mzcap span{color:var(--muted);font-size:13px}
.mzthumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:10px}
.mzt{aspect-ratio:1;padding:6px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);cursor:pointer;display:grid;place-items:center;overflow:hidden;transition:border-color .15s,transform .15s}
.mzt svg{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:3px}.mzt:hover{transform:translateY(-2px)}.mzt.on{border-color:#00b3ff;box-shadow:0 0 0 2px rgba(0,179,255,.35)}
.mztools{display:flex;gap:8px;flex-wrap:wrap}.mztools .btn{display:inline-flex;gap:7px;align-items:center}.mznote{margin:0;font-size:12.5px}
@media (max-width:860px){.mzg{grid-template-columns:minmax(0,1fr)}.mzg>*,.mzg .mzleft>*{min-width:0;max-width:100%}.mzstage{--sh:min(488px,calc(110vw - 32px));height:calc(var(--sh) + 32px);padding:16px}}
/* Quick look on Store cards */
.mdcv,.pack-cover{position:relative}
.mzq{position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;gap:6px;align-items:center;padding:7px 12px 7px 10px;border-radius:999px;background:rgba(19,21,23,.82);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.18);font:600 12.5px/1 Inter,sans-serif;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s,background .15s;cursor:zoom-in}
.mdc:hover .mzq,.pack:hover .mzq,.mdc:focus-visible .mzq,.pack:focus-visible .mzq{opacity:1;transform:none}.mzq:hover{background:#00b3ff;color:#06141a;border-color:#00b3ff}.mzq.busy{opacity:1;cursor:progress}
@media (hover:none){.mzq{opacity:1;transform:none;padding:6px 10px}}
/* full screen */
html.mzlock,html.mzlock body{overflow:hidden}
#mzbox{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:#0c0d0f;color:#e9edf1;animation:mzin .18s ease-out}
@keyframes mzin{from{opacity:0}to{opacity:1}}
.mzhead{display:flex;gap:14px;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.mzti{flex:1;min-width:0;display:flex;gap:12px;align-items:baseline}.mzti b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mzcount{color:#9aa0a8;font-size:13px;white-space:nowrap}
.mzctl,.mzseg{display:flex;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:3px}
.mzctl button,.mzseg button{background:none;border:0;color:#e9edf1;min-width:34px;height:32px;border-radius:999px;font:600 15px/1 Inter,sans-serif;cursor:pointer;padding:0 10px}.mzctl button:hover:not(:disabled),.mzseg button:hover{background:rgba(255,255,255,.1)}
.mzctl button:disabled{opacity:.35;cursor:default}.mzpct{min-width:52px;text-align:center;font:600 13px/1 Inter,sans-serif;color:#9aa0a8}.mzctl .mzfit{font-size:13px}
.mzseg button{font-size:13px}.mzseg button[aria-pressed="true"]{background:#00e5ff;color:#06141a}
.mzx{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:none;color:#fff;font-size:16px;cursor:pointer}.mzx:hover{background:rgba(255,255,255,.1)}
.mzview{position:relative;overflow:hidden;touch-action:none;cursor:zoom-in;user-select:none}#mzbox.zin .mzview{cursor:grab}#mzbox.zin .mzview:active{cursor:grabbing}#mzbox.room .mzview{cursor:default}
.mzc{position:absolute;transform-origin:0 0;will-change:transform;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.mzc>img,.mzc>svg{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
#mzbox.room .mzc{inset:0;background:none;box-shadow:none}
.mznav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(19,21,23,.75);color:#fff;font-size:30px;line-height:1;cursor:pointer}.mznav:hover{background:#00b3ff;color:#06141a}.mznav.l{left:16px}.mznav.r{right:16px}
.mzfoot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:10px 16px 12px;border-top:1px solid rgba(255,255,255,.07)}
.mzcap2{display:flex;gap:10px;align-items:baseline;min-width:0}.mzcap2 b{font-size:15px}.mzcap2 span{color:#9aa0a8;font-size:13px}
.mzstrip{grid-column:1/-1;grid-row:2;display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:thin}
.mzstrip button{flex:0 0 64px;height:64px;padding:4px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#1b1e22;cursor:pointer;display:grid;place-items:center;opacity:.6;transition:opacity .15s}
.mzstrip button svg{max-width:100%;max-height:100%;width:auto;height:auto}.mzstrip button:hover{opacity:1}.mzstrip button.on{opacity:1;border-color:#00e5ff;box-shadow:0 0 0 2px rgba(0,229,255,.35)}
.mzcta{display:flex;gap:10px;align-items:center;justify-self:end}.mzcta .price{color:#fff}.mzcta .price.free{color:#00e5ff}
.mzmark{grid-column:1/-1;margin:0;color:#7d838b;font-size:12px}
/* an example room for wall art */
.mzroom{position:absolute;inset:0;background:linear-gradient(#e7e1d8 0%,#ddd5ca 72%,#b59b7d 72%,#a88d70 100%);overflow:hidden}
.mzroom::after{content:"";position:absolute;left:0;right:0;top:72%;height:3px;background:rgba(0,0,0,.12)}
.mzframe{position:absolute;left:50%;top:7%;height:38%;transform:translateX(-50%);background:#fbfaf7;border:clamp(6px,1vw,12px) solid #2c2420;padding:clamp(10px,2.4%,26px);box-shadow:0 18px 30px -12px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.2)}
.mzframe>img,.mzframe>svg{display:block;width:100%;height:100%;object-fit:cover}
/* the sofa is sized by the room height, so the picture always hangs a clear gap above its back (owner, 30 Oct 2026: "the frame is too close with the seat") */
.mzsofa{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);height:24%;width:auto;max-width:92%;filter:drop-shadow(0 16px 18px rgba(0,0,0,.25))}
@media (max-width:700px){.mzhead{flex-wrap:wrap;gap:8px}.mzti{flex-basis:calc(100% - 52px)}.mzctl,.mzseg{order:2}.mznav{width:42px;height:42px;font-size:24px}.mzfoot{grid-template-columns:1fr}.mzcta{justify-self:stretch}.mzcta .btn{flex:1}}
@media (prefers-reduced-motion:reduce){#mzbox,.mzimg,.mzq{animation:none;transition:none}}

/* the product page: viewer left, buy panel right (owner, 30 Oct 2026: "too much writeup") */
.mzg2{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:28px;margin-top:10px}
.mzleft{display:flex;flex-direction:column;gap:12px;min-width:0}.mzg2 .mzstage{--sh:min(500px,max(300px,calc(100vh - 330px)),calc(70vw - 52px));min-height:0}
.mzrow{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.mzg2 .mzthumbs{display:flex;gap:8px;overflow-x:auto;padding:2px;flex:1;min-width:0}.mzg2 .mzt{flex:0 0 64px;height:64px;padding:4px;border-radius:10px}
.mzg2 .mzcap{margin:0;flex-direction:row;gap:10px;align-items:baseline;flex-wrap:wrap}.mzg2 .mzcap b{font-size:14px}.mzg2 .mzcap span{font-size:12.5px}
.mkbuy{position:sticky;top:12px;margin:0;display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.mkey{font:600 12px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#00b3ff}
.mkbuy h1{margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.12;letter-spacing:-.015em}
.mkline{margin:0;color:var(--muted);font-size:15.5px;line-height:1.45}
.mksave{margin:0;align-self:flex-start;padding:6px 11px;border-radius:999px;background:rgba(0,229,255,.12);color:#00b3ff;font:600 13px/1.2 Inter,sans-serif}
.mkprice .price.big{font-size:34px;letter-spacing:-.02em}
.mkact{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.mkact .btn{min-height:46px;padding:0 22px;font-size:15.5px}.mkact .btn.primary{flex:1 1 200px;justify-content:center}
.mkact p{flex-basis:100%;margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.mkticks{list-style:none;margin:4px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:7px;font-size:14px}
.mkticks li{display:flex;gap:9px;align-items:center}.mkticks li::before{content:"";flex:0 0 16px;height:16px;border-radius:50%;background:#00b3ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%2306141a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.mkfacts{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:4px 0 0;padding:14px 0 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.4}.mkfacts dt{color:var(--muted);font-weight:500;white-space:nowrap}.mkfacts dd{margin:0;color:var(--ink)}@media(max-width:420px){.mkfacts{grid-template-columns:1fr;gap:2px}.mkfacts dd{margin-bottom:8px}}
.mkabout{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);max-width:68ch}.mkabout h2{font-size:19px;margin:0 0 10px}.mkabout h3{font-size:14.5px;margin:18px 0 8px;color:var(--ink)}.mkdesc{margin:0;line-height:1.6;font-size:15px;color:var(--ink)}.mkabout p{line-height:1.55}
.mkinc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 18px}.mkinc li{display:flex;flex-direction:column;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}.mkinc li span{color:var(--muted);font-size:12.5px}
.mkhow{margin:0;padding-left:20px;display:grid;gap:5px;font-size:14px;line-height:1.5}.mkabout .mkgood{margin-top:16px}
@media (max-width:860px){.mzg2 .mzleft{display:contents}.mzg2 .mzleft>*{order:1}.mzg2>.mkbuy{order:2}.mzg2 .mzleft>.mkabout{order:3;margin-top:0}}
.mkbuy .rpreport{margin:0}.mkbuy .rpreport .btn{padding-left:0;opacity:.7}
@media (max-width:980px){.mzg2{grid-template-columns:minmax(0,1fr)}.mkbuy{position:static}}@media (max-width:860px){.mzg2 .mzstage{--sh:min(488px,calc(110vw - 32px))}.mzg2 .mzthumbs{flex-basis:100%}}



/* the stage zoom stays inside the picture's frame; sizes and shapes under it */
.mzstage.zoomed .mzimg{transition:none;box-shadow:0 24px 60px -20px rgba(0,0,0,.7);border-radius:4px}
.mzimg>img,.mzimg>svg{transition:transform .12s ease-out;will-change:transform}.mzimg.crop>img{object-fit:cover}
.mzsz{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.mzshape,.mzsizes{display:flex;gap:6px;flex-wrap:wrap}
.mzshape button,.mzsizes button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:600 13px/1 Inter,sans-serif;cursor:pointer}
.mzshape button[aria-pressed="true"]{background:#00e5ff;border-color:#00e5ff;color:#06141a}.mzsizes button[aria-pressed="true"]{border-color:#00b3ff;box-shadow:0 0 0 2px rgba(0,179,255,.3)}
.mzsh{display:inline-block;border:1.6px solid currentColor;border-radius:2px}.mzsh.orig{width:11px;height:11px;border-style:dashed}.mzsh.portrait{width:9px;height:13px}.mzsh.landscape{width:14px;height:9px}.mzsh.square{width:11px;height:11px}
.mzsz .q{display:inline-block;width:8px;height:8px;border-radius:50%;flex:0 0 8px}.q.sharp{background:#22c55e}.q.good{background:#f5b301}.q.soft{background:#f97316}
.mzszline{margin:0;font-size:13px;color:var(--muted);line-height:1.5}.mzszline b{color:var(--ink)}.mzszline .q{margin:0 4px 0 2px;vertical-align:0}
.mkbuy .mzsz{padding:12px;gap:8px;background:var(--surface2)}.mkbuy .mzshape button,.mkbuy .mzsizes button{height:30px;padding:0 10px;font-size:12.5px}

/* collections: one card per collection, and the options on the product page */
.mkfam{display:inline-block;margin-top:3px;font:600 12px/1.3 Inter,sans-serif;color:#00b3ff}.mdct .mkfam{margin:2px 0 0}
.mkopts{display:flex;flex-direction:column;gap:6px}.mkopts>b{font-size:13px;margin-bottom:2px}
.mkopts>button[data-act="mkOpen"]{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n p" "d p";gap:1px 12px;align-items:center;text-align:left;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);cursor:pointer;font:inherit}
.mkopts>button[aria-pressed="true"]{border-color:#00b3ff;box-shadow:0 0 0 2px rgba(0,179,255,.3)}.mkopts>button:hover{border-color:#00b3ff}
.mkon{grid-area:n;display:flex;gap:8px;align-items:center;font-weight:600;font-size:14px}.mkopts .d{grid-area:d;font-size:12.5px}.mkopts .price{grid-area:p;font-size:15px}
.mkon em{font-style:normal;font:700 11px/1 Inter,sans-serif;padding:4px 8px;border-radius:999px;background:#00e5ff;color:#06141a}
.mkopts .linkbtn{align-self:flex-start;font-size:13px}

/* full screen: one-row footer (owner's customer review, 30 Oct 2026: the picture was small above a tall footer) */
.mzti{flex-direction:column;align-items:flex-start;gap:3px}.mzt1{display:flex;gap:12px;align-items:baseline;min-width:0;max-width:100%}.mzt1 b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mzbox .mzmark{grid-column:auto;color:#8c939b;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mzfoot{grid-template-columns:minmax(150px,auto) minmax(0,1fr) auto;gap:16px;padding:10px 16px}
.mzstrip{grid-column:auto;grid-row:auto;padding:2px 0}.mzstrip button{flex:0 0 54px;height:54px}
.mzcap2{flex-direction:column;gap:2px}.mzcta{flex-wrap:wrap;justify-content:flex-end}
.mzup{display:inline-flex;gap:6px;align-items:center;border-color:#00b3ff;color:#00e5ff}.mzup em{font-style:normal;font:700 11px/1 Inter,sans-serif;padding:4px 7px;border-radius:999px;background:#00e5ff;color:#06141a}
@media (max-width:860px){.mzfoot{grid-template-columns:1fr}.mzcta{justify-content:stretch}.mzcta .btn{flex:1}}

/* the Store's showcase: five product covers of one shape in a straight, centred row (owner, 30 Oct 2026) */
.pcstage.mkshow{gap:18px;align-items:center;height:clamp(240px,26vw,380px)}
.mkshc{position:relative;flex:none;height:72%;aspect-ratio:480/374;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer;background:#16181b;box-shadow:0 22px 46px -22px rgba(0,0,0,.9);opacity:.55;transition:opacity .3s,transform .3s,box-shadow .3s}
.mkshc.s0,.mkshc.s4{height:58%;opacity:.35}.mkshc:hover{opacity:.9}
.mkshc.on{height:100%;opacity:1;box-shadow:0 34px 70px -24px rgba(0,0,0,.95),0 0 0 2px rgba(0,229,255,.55),0 0 60px -14px rgba(0,229,255,.45)}
.mkshv,.mkshv>svg{display:block;width:100%;height:100%}.mkshv>svg{object-fit:cover}
.mkshl{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:40px 18px 14px;background:linear-gradient(0deg,rgba(10,12,14,.88),transparent);color:#fff;text-align:left}
.mkshl b{font:800 17px/1.2 "DF Head",Inter,sans-serif;letter-spacing:-.01em}.mkshl i{font-style:normal;font:700 14px/1 Inter,sans-serif;color:#00e5ff;white-space:nowrap}
.mkshc.on{animation:mkshIn .45s ease}@keyframes mkshIn{from{transform:scale(.97);opacity:.6}to{transform:none;opacity:1}}
@media (max-width:900px){.mkshc.s0,.mkshc.s4{display:none}}@media (max-width:600px){.mkshc.s1,.mkshc.s3{display:none}.mkshc.on{height:auto;width:100%}}
@media (prefers-reduced-motion:reduce){.mkshc,.mkshc.on{animation:none;transition:none}}
.pcstage>.pchid{display:none!important}
/* the Store showcase, sized by width (owner, 30 Oct 2026: one card alone "does not look good"): five always fit, the name
   and price sit under the middle card, never over its pictures */
.pcstage.mkshow{height:auto!important;align-items:center;gap:1.4%;padding:0 1% 64px;overflow:visible}
.mkshc{height:auto!important;flex:none;aspect-ratio:480/374;overflow:visible;background:none;box-shadow:none}
.mkshc .mkshv{border-radius:14px;overflow:hidden;box-shadow:0 22px 46px -22px rgba(0,0,0,.9);border:1px solid rgba(255,255,255,.10)}
.mkshc.s0,.mkshc.s4{width:13.5%;height:auto!important;opacity:.45}.mkshc.s1,.mkshc.s3{width:19%;opacity:.75}.mkshc.on{width:34%;opacity:1;box-shadow:none}
.mkshc.on .mkshv{border:2px solid rgba(0,229,255,.55);box-shadow:0 34px 70px -24px rgba(0,0,0,.95),0 0 60px -14px rgba(0,229,255,.4)}
.mkshc .mkshl{position:absolute;top:calc(100% + 12px);bottom:auto;left:0;right:0;padding:0;background:none;justify-content:center;gap:12px;align-items:baseline}
.mkshc .mkshl b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:75%}
.pcstage.mkshow>.pchid{display:flex!important}
@media (max-width:700px){.mkshc.s0,.mkshc.s4{display:none}.mkshc.s1,.mkshc.s3{width:22%}.mkshc.on{width:50%}}

/* the print files list on a picture pack's page */
.mkplist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}.mkplist li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line,rgba(255,255,255,.1));padding-top:6px}.mkplist a{font-weight:600}
/* compact page openings (owner, 31 Oct 2026: the opening took the whole first screen and pushed each page's own tool below
   it, "lots of the pages has same issues"): the film or cards on the left, the title, line and button on the right, about a
   quarter of the screen, so the page's box or tools show without scrolling. Phones stack it, short. */
main .pfilm.pfcov{display:grid!important;grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:center;gap:8px 34px;padding:22px 30px!important;min-height:0!important;height:auto!important;margin-bottom:20px!important}
main .pfilm.pfcov .pcstage,main .pfilm.pfcov .pfwall{height:200px!important;margin:0!important;width:100%}
main .pfilm.pfcov .pfin{align-items:flex-start!important;text-align:left!important;max-width:none!important;margin:0!important}
main .pfilm.pfcov .pfin h1{font-size:clamp(26px,2.5vw,38px)!important;margin:4px 0 8px!important;line-height:1.05!important}
main .pfilm.pfcov .pfin p{margin:0 0 14px!important;font-size:15px!important;max-width:560px}
main .pfilm.pfcov .pfin .pfacts{justify-content:flex-start!important;margin:0!important}
main .pfilm.pfcov .pckick{justify-content:flex-start!important}
@media (max-width:760px){main .pfilm.pfcov{grid-template-columns:1fr;gap:14px;padding:16px!important}main .pfilm.pfcov .pcstage,main .pfilm.pfcov .pfwall{height:150px!important}}
main .pfilm.pfcov .pcstage,main .pfilm.pfcov .pfwall{overflow:hidden;border-radius:18px}
/* Smart Create's kinds (Anything, Image, Poster…): a slim row of tabs, not a wall of picture tiles; the box below reads the
   words and offers goals and ideas itself (31 Oct 2026) */
main .chips.sctypes{display:flex!important;flex-wrap:wrap!important;gap:8px!important;grid-template-columns:none!important;margin:0 0 14px!important}
main .chips.sctypes .sctype{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:7px;width:auto!important;min-height:0!important;height:auto!important;padding:8px 14px!important;border-radius:999px!important;font-size:13.5px!important}
main .chips.sctypes .sctype .scvis{display:none!important}
main .chips.sctypes .sctype svg{width:16px!important;height:16px!important;margin:0!important}
main form[data-form="aiany"] textarea[name="q"],main form[data-form="aireal"] textarea[name="q"]{min-height:84px!important;height:auto;field-sizing:content;max-height:340px}
@media (max-width:760px){html body main .pfilm.pfcov .pcstage,html body main .pfilm.pfcov .pfwall{display:none!important}html body main .pfilm.pfcov{padding:14px 16px!important}
 html body main .chips.sctypes{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;grid-template-columns:none!important;scrollbar-width:none;margin-right:-16px!important;padding-right:16px}
 html body main .chips.sctypes .sctype{flex:none!important;min-height:0!important;height:auto!important;padding:8px 13px!important}}
/* phones (owner, 1 Nov 2026: "make sure they stay in the center"): the top bar's icons spread evenly across the whole width instead
   of bunching on one side; iOS must not resize the words on its own (js/phone-text.js keeps every interface word at 13px or more) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:700px){header.top{justify-content:space-between;padding:0 8px}header.top>*{margin-left:0!important;margin-right:0!important}}
/* the logo is a link to Home (owner, 1 Nov 2026: "when you click on logo it takes you to home") */
.top a.logo{text-decoration:none;cursor:pointer;border-radius:8px}.top a.logo:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* phones (owner, 1 Nov 2026: "CONNECTED · ONE BRAND, EVERYWHERE … does not look good in mobile view"): the bar of section names
   stops sticking (it slid over every Home heading), and the Connected strip's buttons become an even two-column grid with
   the arrow shown, over a dimmer moving background */
@media (max-width:700px){
 .pgidx{position:static!important}
 .h2con{padding:22px 18px!important;gap:16px!important}
 .h2con .h2conband{opacity:.12!important}
 .h2con ul{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
 .h2con li:last-child:nth-child(odd){grid-column:1/-1}
 .h2con li button{width:100%;justify-content:space-between;padding:12px 14px!important;border-radius:14px!important;font-size:14px!important;animation:none!important}
 .h2con li button em{opacity:.75!important;transform:none!important}
}
/* the sign-up agreement reads as one sentence beside its tick box (owner, 1 Nov 2026: each part sat in its own column) */
.pick.suterms{display:block;border:0;border-radius:0;padding:0;margin:4px 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink)}
.pick.suterms input{margin:0 8px 0 0;vertical-align:-2px}.pick.suterms a{color:var(--accent);text-decoration:underline}
/* a browser's saved details keep the Studio's dark field colour (the browser painted them olive yellow) */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);caret-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--surface2) inset;box-shadow:0 0 0 1000px var(--surface2) inset;transition:background-color 9999s}
/* wide screens: the small icons sit at the right edge, not in the middle of the bar (owner, 1 Nov 2026: "lots of spacing") */
@media (min-width:701px){header.top .hlbtn{margin-left:auto!important}}
/* Home's "Now playing" bar on a phone (owner review, 1 Nov 2026): its button ("See Christmas designs") ran off the card's right edge.
   The bar keeps inside the card; the title shortens with "…" and a long button moves under it instead of being cut off */
@media (max-width:700px){body .h2cine .rccap{right:12px!important;flex-wrap:wrap!important}body .h2cine .rccap b{flex:1 1 130px;min-width:0}body .h2cine .rccap .rcbtn{max-width:100%;white-space:normal;text-align:left}}
/* hint words inside boxes (owner, 1 Nov 2026: "here is very dark it hides writeups for all devices", Home's ask box): with no colour
   set, browsers drew them #757575, about 3.4:1 on the Studio's charcoal. A lighter shade of the box's own words instead: about 9:1
   on dark boxes, and still dark grey in any light box */
::placeholder{color:color-mix(in srgb,currentColor 72%,transparent)!important;opacity:1!important}
/* contrast sweep, 1 Nov 2026 (owner: "check any like that", after the ask box's hint words were too dark): every word at least 4.5:1 */
.sftfoot .sftco{opacity:.9}                                   /* footer copyright: 4.1:1 → 6:1 */
.psv .psglyph em{color:#2a2f34}                               /* "Drop files here, or press to choose" sat light grey on a light box: 1.3:1 */
.shbadge{color:#06120c}                                       /* Print & share check badges: white on green / amber was 2.1:1 */
.stagebar .stage b{font-size:13px}.stagebar .stage.done b{color:#06120c} /* the step circles: 11px digits, white ✓ on green */
.msvpick span,.msvcard span{opacity:.92!important}                   /* voice choices (Grace · warm): 70% faded words were 4:1 */
main:has(.prjshelf):has(.pfacts [data-act="pfAlt"]) .pfextra a[data-studio-href="#/create"]{display:none} /* Projects showed "New design" twice, one above the other (owner review, 1 Nov 2026) */
:root main section.qvask .askbar .askbgo:has(.calmcr),:root main .askbar .askbgo:has(.calmcr){width:auto!important;min-width:44px;padding:0 14px!important;grid-auto-flow:column;gap:6px;align-items:center;border-radius:999px!important;white-space:nowrap} /* the ask box button with its price ("1–4 credits") grows into a pill instead of the price spilling out of the round 44px button */
.seg.pmkpaltabs{flex-wrap:wrap}.seg.pmkpaltabs button{min-width:max-content} /* Smart Home plan maker: "Windows" was cut short in its tab */
@media (min-width:701px) and (max-width:1180px){body:has(main .build) header.top .logo :is(.lgword,.lgrule,.lgsub){display:none}} /* in the editor on a tablet the top bar ran 80-106px past the screen and pushed Sign in / Save / Theme off it: the DF mark alone there (1 Nov 2026) */
@media (pointer:coarse){.menu .k,[role="menu"] .k{display:none}} /* phones and tablets: no keyboard shortcuts beside menu items ("Undo Ctrl+Z"), there is no keyboard (1 Nov 2026) */
body.phed .qdock{display:none!important} /* the phone editor keeps its tools in the bottom bar, so this strip only ever said "Select something…": on a phone turned sideways it took 72 of the 375px (1 Nov 2026) */
/* touch screens: everything tappable is at least about 32-44px to a finger, without changing how it looks (owner review, 1 Nov 2026:
   the editor's page dots were 8px, Add a page 30px, Settings colour swatches 26px, a design's ⋯ menu 37×27px) */
@media (pointer:coarse){
 body .phdot[data-act="phPage"]{box-sizing:content-box!important;padding:12px!important;background-clip:content-box!important;margin:-12px -6px!important}
 [data-act="addPageMenu"]{min-width:40px;min-height:40px}
 .staccents [data-act="stSet"]{min-width:36px;min-height:36px}
 [data-act="projMenu"]{min-width:44px;min-height:40px}
 [data-act="sideFold"]{min-height:40px}
}
/* touch screens, the editor's panels too: colour filter dots 18px, brand colour dots 24px, align buttons 22px wide, Undo/Redo 31px,
   small buttons and chips 30px tall (1 Nov 2026). Sizes only grow on touch; computers are unchanged */
@media (pointer:coarse){
 [data-act="phFam"],[data-act="roleColor"]{min-width:32px;min-height:32px}
 [data-act="align"]{min-width:36px;min-height:36px}
 [data-act="undo"],[data-act="redo"]{min-width:40px;min-height:40px}
 .btn.sm,[data-act="upF"],[data-act="present"].btn,[data-act="uploadLogo"],[data-act="upToVideo"]{min-height:36px}
}
/* touch screens: tick boxes and in-text links are big enough for a finger (the sign-up "I accept the Terms" box was 13px; 1 Nov 2026) */
@media (pointer:coarse){
 input[type=checkbox],input[type=radio]{width:22px;height:22px;min-width:22px}
 .linkbtn,#modal p a[href],#modal label a[href]{display:inline-block;min-height:32px;line-height:32px}
}
@media (pointer:coarse){header.top a.logo{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}} /* the DF logo takes you Home from every page, the editor too; a finger-sized target (owner, 1 Nov 2026) */
/* touch: boxes in forms (sign in, create account, settings, help) are finger-sized, 44px like the platform keyboards expect; was 36px (1 Nov 2026) */
@media (pointer:coarse){.seasall{min-height:36px;padding-left:10px;padding-right:10px}.shmore a{display:inline-flex;align-items:center;min-height:40px}.sftlinks a{display:inline-flex;align-items:center;min-height:32px}.rcdot{box-sizing:border-box;height:28px!important;padding:12px 0!important;background-clip:content-box!important}input[type=color]{min-width:34px;min-height:34px}}
@media (pointer:coarse){form label.f input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),form label.f select{min-height:44px}}
/* phones: a template's "Customise this template" stays at the bottom of the preview while you scroll the set below it, big enough for a thumb (1 Nov 2026) */
@media (max-width:700px){#dialog:has(>.row>[data-act="useTpl"]){display:flex;flex-direction:column}#dialog:has(>.row>[data-act="useTpl"])>*{flex-shrink:0}
 #dialog>.row:has(>[data-act="useTpl"]){order:99;position:sticky;bottom:-16px;z-index:3;margin:14px -16px -16px!important;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);flex-wrap:nowrap}
 #dialog>.row>[data-act="useTpl"]{flex:1;min-height:48px;font-size:16px!important}#dialog>.row:has(>[data-act="useTpl"])>.d{display:none}}
/* the Help panel (the "?" in the top bar) is narrow: its "Most asked" cards were page-sized (313px each, two per phone screen).
   In the panel they are a compact row, a small picture beside the title, and the search box is finger-sized (1 Nov 2026) */
#hlPanel .rbpgrid{grid-template-columns:1fr!important;gap:8px}
#hlPanel .rbpcard{flex-direction:row;align-items:center;min-height:56px}
#hlPanel .rbpcard img{width:72px;flex:0 0 72px;aspect-ratio:1;height:56px}
#hlPanel .rbpcard>span{padding:8px 12px}
#hlPanel input[data-help="q"]{min-height:44px}
/* touch: a link at the end of a panel hint ("Rebuild layout…") was an 18px line of text (1 Nov 2026) */
@media (pointer:coarse){.toolbody .d a{display:inline-block;padding:8px 0;min-height:32px}}
/* touch: ordinary buttons were 35px (Sign in on Withdraw, many page buttons); 40px is easier for a thumb. Small (.sm) buttons keep their own touch size (1 Nov 2026) */
@media (pointer:coarse){main .btn:not(.sm):not(.iconbtn),#modal .btn:not(.sm):not(.iconbtn){min-height:40px}}
/* "Withdraw from a contract": EU law (Consumer Rights Directive art. 11a, from 19 June 2026) wants it clearly labelled and always
   there; the owner wants it quiet (1 Nov 2026). Last of the legal links, a little dimmer than the rest, same size */
.sftfoot .sftlinks a.sftwdr{opacity:.62}
/* boxes to type in were the colour of the window behind them, with a border hardly darker (sign-in email and password,
   owner's screenshots, 1 Nov 2026): a darker inside, a border you can see, and a cyan ring while typing */
label.f input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),label.f select,label.f textarea,
#modal input[type=text],#modal input[type=email],#modal input[type=password],#modal input[type=search],#modal input[type=number],#modal input:not([type]),#modal textarea,#modal select{
 background:#0f1113;border:1px solid #4a5058;color:var(--ink)}
label.f input:focus,label.f select:focus,label.f textarea:focus,#modal input:focus,#modal textarea:focus,#modal select:focus{
 border-color:var(--accent,#00e5ff);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#00e5ff) 25%,transparent);outline:none}
label.f input::placeholder,#modal input::placeholder,#modal textarea::placeholder{color:#8b939b}
/* top-bar round buttons, premium (owner, 2 Nov 2026: "give them a premium look"): save to this device, theme and colours, help.
   A soft glass disc with a hairline edge; on hover the DALFAST cyan edge and glow */
header.top :is([data-act="offOpen"],[data-act="theme"],[data-act="helpOpen"]){width:38px;height:38px;min-width:38px;border-radius:50%;color:#e9eef3;
 background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.11);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 16px -10px rgba(0,0,0,.9);transition:border-color .18s,box-shadow .18s,color .18s,transform .18s}
header.top :is([data-act="offOpen"],[data-act="theme"],[data-act="helpOpen"]):hover,header.top :is([data-act="offOpen"],[data-act="theme"],[data-act="helpOpen"]):focus-visible{color:#00F0FF;border-color:rgba(0,240,255,.5);
 background:linear-gradient(160deg,rgba(0,240,255,.12),rgba(0,179,255,.03));box-shadow:0 0 0 3px rgba(0,240,255,.10),0 8px 20px -10px rgba(0,200,255,.75);transform:translateY(-1px)}
header.top :is([data-act="offOpen"],[data-act="theme"],[data-act="helpOpen"]):active{transform:none}
header.top :is([data-act="offOpen"],[data-act="theme"],[data-act="helpOpen"]) svg{width:18px;height:18px;stroke-width:1.9}
header.top [data-act="helpOpen"]{font:700 16px/1 inherit}
@media (prefers-reduced-motion:reduce){header.top :is([data-act="offOpen"],[data-act="theme"],[data-act="helpOpen"]){transition:none;transform:none!important}}
@media (max-width:600px){header.top :is([data-act="offOpen"],[data-act="theme"],[data-act="helpOpen"]){width:36px;height:36px;min-width:36px}}
/* owner, 2 Nov 2026 ("lots of free space"): the editing strip floats over the margin above the page instead of taking a 72px row
   of its own, and shows only while something is selected. The canvas keeps a fixed top margin for it, so the page never moves
   when you select or deselect. The phone editor still hides it (body.phed). */
@media (min-width:701px){.canvaswrap.dkon>.qdock{position:absolute;left:12px;right:12px;height:72px;min-height:72px;margin-top:6px;z-index:6;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px -14px rgba(0,0,0,.7)}
 .canvaswrap.dkon>.qdock.empty{display:none}.canvaswrap.dkon>.canvas{padding-top:88px}}
/* owner, 2 Nov 2026 ("eliminate such space"): under a page's cover, a row that held only the Quick guide button took a whole line.
   It now takes no height; the button sits in the cover's lower-right corner. The row stays (other parts place themselves after it) */
main .page-wrap>.pfextra:not(:has(>:not(.qgslot))){height:0;margin:0!important;padding:0;position:relative;z-index:3;overflow:visible}
main .page-wrap>.pfextra:not(:has(>:not(.qgslot)))>.qgslot{position:absolute;right:16px;bottom:14px}
/* owner, 2 Nov 2026 ("eliminate such space"): the microphone (and the add button) under a one-line box took a line of their own
   under every field; they now sit inside the box, at its right edge */
label.askbhost>input~.askbmini,.askbhost>input~.askbmini{position:absolute;right:6px;bottom:6px;margin:0;gap:4px}
.askbhost>input:has(~.askbmini){padding-right:46px!important}
.askbhost>input:has(~.askbmini:has(>:nth-child(2))){padding-right:84px!important}
main section.pfilm{position:relative}main section.pfilm>.mseng.msengin{position:absolute;top:14px;right:14px;margin:0;z-index:4}
/* screen-size review 12 Nov 2026: on a phone the corner model picker sat on top of the page's label ("MARKET⇄G STUDIO"). Below 600px it
   takes its own place under the buttons instead of floating over the title. */
@media (max-width:600px){main section.pfilm>.mseng.msengin{position:static;justify-content:flex-start;width:auto;margin:2px 16px 14px}}
/* full screen never wider than the screen (staging check 8, 2 Nov 2026: at 360–430 px it was 491 px wide, so the picture ran off
   the right edge and ✕ was off-screen). The grid's one column had no limit, so the long one-line pack note set its width. */
#mzbox{grid-template-columns:minmax(0,1fr)}#mzbox>*{min-width:0;max-width:100%}
@media (max-width:860px){.mzcta{flex-wrap:wrap}.mzcta .btn{min-width:0;white-space:normal}}
@media (max-width:860px){.mzcta .mzup{flex:1 0 100%;justify-content:center;white-space:nowrap;min-height:40px}}
/* short screens (a phone on its side): the picture gets the height; the pictures strip and the note go (‹ › and swipe still move
   between pictures), and the footer is one row */
@media (max-height:520px){#mzbox .mzmark,.mzstrip,.mzcap2{display:none}.mzhead{padding:6px 12px;gap:8px;flex-wrap:nowrap}.mzti{flex-basis:auto}.mzctl{order:0}.mzx{width:36px;height:36px}
 .mzfoot{grid-template-columns:minmax(0,1fr);padding:6px 12px}.mzcta{flex-wrap:nowrap;justify-content:flex-end;justify-self:stretch}.mzcta .btn,.mzcta .mzup{flex:0 1 auto;min-height:36px;white-space:nowrap}.mzcta .mzup{overflow:hidden;text-overflow:ellipsis}}
/* Top bar, right-hand group (owner's design review, 2 Nov 2026: "the circles look basic, consumer-grade"): rounded squares on a
   glass surface with a hairline border, one icon colour, a soft cyan lift on hover, and the account as the strongest item (our
   Ultra cyan with a ring). Brand colours only; the saved-state shield keeps its green because the colour is the message. */
html:root header.top.top :is(.hlbtn,.pmchip,.acct,.offbtn,.i18nbtn,[data-act="theme"],[data-act="shortcuts"]){border-radius:12px!important;width:38px;height:38px;padding:0;justify-content:center;
 background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 8px -4px rgba(0,0,0,.7)!important;
 color:#e8edf2!important;transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease}
html:root header.top.top :is(.hlbtn,.pmchip,.acct,.offbtn,.i18nbtn,[data-act="theme"],[data-act="shortcuts"]):is(:hover,:focus-visible){transform:translateY(-1px);background:rgba(255,255,255,.07)!important;
 border-color:rgba(0,200,255,.38)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 20px -6px rgba(0,200,255,.4)!important}
html:root header.top.top :is(.hlbtn,.pmchip,.acct,.offbtn,.i18nbtn,[data-act="theme"],[data-act="shortcuts"]):active{transform:none}
html:root header.top.top :is(.hlbtn,.offbtn,.i18nbtn,[data-act="theme"],[data-act="shortcuts"],.acct) svg{width:18px;height:18px;stroke:currentColor!important;stroke-width:1.75}
html:root header.top.top .hlbtn{font-size:16px;font-weight:700}
html:root header.top.top .pmchip.device svg{color:#6ee7b7!important;stroke:#6ee7b7!important}
/* the account: signed in, the initials sit on our cyan with a ring, the one bright thing in the group */
html:root header.top.top .acct:has(.avatar){background:transparent!important;border-color:transparent!important;box-shadow:none!important}
html:root header.top.top .acct .avatar{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#00f0ff,#00b3ff);color:#062a33;font-size:12.5px;font-weight:800;letter-spacing:.04em;
 box-shadow:0 0 0 2px #131517,0 0 0 3px rgba(0,220,255,.55),0 6px 18px -6px rgba(0,200,255,.6)}
html:root header.top.top .acct:hover .avatar{box-shadow:0 0 0 2px #131517,0 0 0 3px #00f0ff,0 8px 22px -6px rgba(0,200,255,.75)}
html:root header.top.top{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
@media (prefers-reduced-motion:reduce){html:root header.top.top :is(.hlbtn,.pmchip,.acct,.offbtn,.i18nbtn,[data-act="theme"],[data-act="shortcuts"]){transition:none;transform:none!important}}
html:root header.top.top .pmchip.device{width:38px!important;height:38px!important;min-width:38px;padding:0!important}
html:root header.top.top .i18nbtn{width:auto!important;min-width:38px;padding:0 10px!important;display:inline-flex;flex-direction:row;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em}
html:root header.top.top .i18nbtn svg{width:16px;height:16px}
/* template preview on a phone (staging review, 2 Nov 2026): the button that opens your copy stays in reach below the pictures */
@media (max-width:700px){#dialog .tplgo{position:sticky;bottom:-1px;z-index:2;margin:14px -16px 0!important;padding:10px 16px;background:var(--panel,#131517);border-top:1px solid var(--line);flex-wrap:wrap;gap:6px}#dialog .tplgo .btn{flex:1 0 100%}}
/* selected filters and styles show it in shape as well as colour (staging review, 2 Nov 2026; WCAG 1.4.1): a tick, and bolder words */
:is(.chip,.mostyle)[aria-pressed="true"],.mostyle.on{font-weight:700}
:is(.chip,.mostyle)[aria-pressed="true"]::after,.mostyle.on::after{content:"✓";margin-left:6px;font-weight:800;line-height:1}
.ogempty{min-height:50vh;display:grid;align-content:start;justify-items:start;gap:10px;padding-top:12px}
/* the logo, bigger (owner, 3 Nov 2026: "readjust the size of the logo to be bigger … it is small"): the DF mark 28 → 38 px, the
   DALFAST word 14 → 20 px, STUDIO 8 → 11 px, inside the 56 px bar; on phones the mark alone, 28 → 34 px */
header.top .logo{gap:10px}
header.top .logo .lgmark{width:38px;height:38px}
header.top .logo .lgword{height:20px}
header.top .logo .lgrule{height:24px;width:2px}
header.top .logo .lgsub{height:11px}
@media (max-width:640px){header.top .logo .lgmark{width:34px;height:34px}}
/* the top bar, aligned (owner, 3 Nov 2026, phone screenshot: "review them all to align"; it showed a circle, a pill, a square
   inside a square and three heights). One row of equals: every control 38 px high with 12 px corners, centred on the same line,
   6 px apart. Upload stays the one solid cyan action; Sign in is the same height and corners. On phones the labelled buttons
   are icons alone, in the same 38 px square, with the icon drawn in cyan instead of a tile inside the button. */
html:root header.top.top{align-items:center;column-gap:6px}
html:root header.top.top .tbgrp{display:flex;align-items:center;gap:6px;height:38px}
html:root header.top.top :is(.iconbtn,.storebtn,.pricebtn,.topup,.pmchip,#acctBtn){height:38px!important;min-height:38px;border-radius:12px!important;box-sizing:border-box;align-items:center;justify-content:center;vertical-align:middle}/* no display here: the phone layout hides some of these */
html:root header.top.top :is(.iconbtn,.pmchip,#acctBtn:not(.sgtopbtn)){width:38px!important;min-width:38px;padding:0!important}
html:root header.top.top :is([data-act="toggleSide"],[data-act="back"],[data-act="fwd"]){background:transparent!important;border-color:transparent!important;box-shadow:none!important}
html:root header.top.top #acctBtn.sgtopbtn{width:auto!important;padding:0 14px!important;border-radius:12px!important;border:0!important}
html:root header.top.top #acctBtn.sgtopbtn .sgtop{font-size:13px;line-height:1}
html:root header.top.top .hlbtn .hlic{width:22px;height:22px;color:#fff}
@media (max-width:640px){
 html:root header.top.top{column-gap:4px}
 html:root header.top.top .tbgrp{gap:4px}
 html:root header.top.top :is(.storebtn,.pricebtn,.topup){width:38px!important;min-width:38px;padding:0!important}
 html:root header.top.top :is(.storebtn,.pricebtn,.topup[data-act="akOpen"]) svg{background:none!important;padding:0!important;width:20px;height:20px;color:#00e5ff!important;stroke:#00e5ff!important}
 html:root header.top.top :is(.tbshop,.tbact)::before,html:root header.top.top .tbact::after{display:none}
}
@media (max-width:400px){html:root header.top.top .pmchip.device{display:none!important}}/* the narrowest phones: the bar fits without scroll arrows (the saving still happens; Settings shows where your work is) */
@media (max-width:380px){html:root header.top.top .topup[data-act="akOpen"]{display:none!important}}/* and Ask, which stays on the page as the floating Ask button */
@media (max-width:640px){html:root header.top.top :is(.tbshop,.tbact){margin:0!important}html:root header.top.top{padding-left:6px;padding-right:6px}}/* the group edges, not more gaps, made the bar 2-4 px too wide */
/* staging check 23 (3 Nov 2026): on phones the 1 Nov sticky bar hid "Opens your own copy to edit. The template stays as it is.";
   it says what the button does, so it stays: a small line under the button, which keeps its full width */
@media (max-width:700px){#dialog>.row:has(>[data-act="useTpl"]){flex-wrap:wrap!important;row-gap:6px}#dialog>.row:has(>[data-act="useTpl"])>.d{display:block!important;flex:1 0 100%;margin:0;text-align:center;font-size:12.5px}}
/* staging 6D check 27: when making from words is not available, the box says so plainly and shows no cost for a button that cannot be used */
form:has(.pill.navail) .scest{display:none!important}
.annote{flex:1 0 100%;margin-top:6px;font-size:13px}
form:has(.pill.navail) .scinfow{display:none!important}/* and no "What a press uses" costs while nothing can be made */

/* company accounts (4 Nov 2026): the company fields show only when "A company or organisation" is chosen */
.acctfor{border:0;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}.acctfor legend{font-size:13px;color:var(--muted);margin-bottom:4px;padding:0}
.acctfor .pick{display:inline-flex;align-items:center;gap:6px}
.cofields{display:none;gap:8px}form:has(input[name="account"][value="company"]:checked) .cofields{display:grid}

/* "Install the app" (owner, 4 Nov 2026): an outlined pill in the top bar until the Studio is installed; icon only where the bar is tight */
header.top .offpill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:transparent;border:1.5px solid rgba(255,255,255,.26);color:#e8edf2;font-family:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;flex:none;transition:border-color .16s,background-color .16s}
header.top .offpill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
header.top .offpill:is(:hover,:focus-visible){border-color:#00e5ff;background:rgba(0,229,255,.06)}
@media (max-width:1280px){header.top .offpill{width:38px;padding:0;justify-content:center}header.top .offpill span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* "What do you do?", premium (owner, 6 Nov 2026: "rebrand this. does not look premium"): our charcoal and Ultra cyan, a white title,
   one calm search, and each kind of organisation as a card with a real photo of that kind of place. Replaces the rainbow title and the
   coloured bars of 28 Oct. */
html:root .ospick{position:relative;padding:28px 28px 22px;border-radius:22px;border:1px solid rgba(255,255,255,.07);background:radial-gradient(90% 120% at 0% 0%,rgba(0,229,255,.09),transparent 55%),radial-gradient(70% 90% at 100% 100%,rgba(0,179,255,.06),transparent 60%),#15171a;box-shadow:0 24px 60px -36px rgba(0,0,0,.9)}
html:root .ospick .oskick{display:block;margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#00e5ff}
html:root .ospick h2{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff;-webkit-text-fill-color:#fff;font-size:28px;font-weight:750;letter-spacing:-.01em;margin:0 0 6px;width:auto}
html:root .ospick>p.d{color:#a7b0ba;font-size:14.5px;margin:0 0 16px}
html:root .ospick .osbar{gap:10px;margin:0 0 18px}
html:root .ospick .osfind input{height:48px;border-radius:14px;padding:0 48px 0 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:15px}
html:root .ospick .osfind input:focus{outline:none;border-color:#00e5ff;box-shadow:0 0 0 3px rgba(0,229,255,.15)}
html:root .ospick .osbar select,html:root .ospick .osbar>.chips .chip{height:48px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#e8edf2}
html:root .ospick .oslist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
html:root .ospick .osorg{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:8px 14px 8px 8px;min-height:72px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);color:#fff;text-align:left;cursor:pointer;transition:border-color .18s,background-color .18s,transform .18s,box-shadow .18s}
html:root .ospick .osorg::before{display:none}
html:root .ospick .osorg img,html:root .ospick .osorg .osph{grid-row:1 / 3;width:56px;height:56px;border-radius:12px;object-fit:cover;background:linear-gradient(135deg,rgba(0,240,255,.25),rgba(0,179,255,.08))}
html:root .ospick .osorg b{font-size:14.5px;font-weight:650;line-height:1.25;color:#fff;align-self:end}
html:root .ospick .osorg span{font-size:12.5px;font-weight:500!important;color:#8f99a4!important;align-self:start;margin-top:2px}
html:root .ospick .osorg:is(:hover,:focus-visible){border-color:rgba(0,229,255,.55);background:rgba(0,229,255,.05);transform:translateY(-2px);box-shadow:0 12px 28px -18px rgba(0,229,255,.6)}
html:root .ospick .btn.ghost.sm,html:root .ospick .hmmore{border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#e8edf2;padding:8px 16px}
html:root .ospick .hmmore:hover{border-color:#00e5ff}
@media (max-width:640px){html:root .ospick{padding:20px 16px 16px;border-radius:18px}html:root .ospick h2{font-size:23px}html:root .ospick .oslist{grid-template-columns:1fr 1fr;gap:8px}
 html:root .ospick .osorg{grid-template-columns:44px 1fr;min-height:60px;padding:6px 10px 6px 6px;column-gap:9px}html:root .ospick .osorg img,html:root .ospick .osorg .osph{width:44px;height:44px;border-radius:10px}html:root .ospick .osorg b{font-size:13.5px}}
@media (prefers-reduced-motion:reduce){html:root .ospick .osorg{transition:none}html:root .ospick .osorg:hover{transform:none}}

/* phones: the "Now playing" card sits at the top of the opening film and covered the greeting under it (customer review, 7 Nov 2026) */
@media (max-width:640px){html:root .h2cine .h2eye{margin-top:44px}}

/* "Start here" cards with a drawing instead of a picture (Upload your files, From Drive or Dropbox, Import): the dark panel fills
   the card and its words are readable; it showed as a white smudge with dark words on dark (customer review, 7 Nov 2026) */
html:root .pscard .psv:has(>.psglyph){background:#1c1e20}
html:root .pscard .psv>.psglyph{align-self:stretch;justify-self:stretch;width:100%;height:100%;padding:12px;box-sizing:border-box;text-align:center}
html:root .pscard .psv .psglyph em{color:#c4ccd4}

/* phone pass, 7 Nov 2026: the Smart Create "i" (What a press uses) was 26 px wide; a fingertip needs ~40 */
@media (max-width:640px){html:root main .scinfo{min-width:40px;min-height:40px}}

/* owner, 7 Nov 2026 ("it need scrolling to see all"): the Store categories wrap, every one in sight, no faded edge */
html:root main .mkcats{flex-wrap:wrap;overflow:visible;-webkit-mask-image:none;mask-image:none}

.rdchip.pend{color:var(--muted);opacity:.7;pointer-events:none;min-width:96px;justify-content:center}
/* Home film dots (launch review, 7 Nov 2026: 22 x 28 px to tap on phones): the same 4 px bars, inside a 44 px tall tap area */
html:root .rcdots{gap:0}html:root .rcdots .rcdot{box-sizing:content-box;height:4px;padding:20px 4px;background-clip:content-box}
/* own voices (6X, 8 Nov 2026) */main .msvo .msvcard.msvadd{grid-template-columns:1fr!important;border-style:dashed!important}main .msvo .msvadd b{display:block;font:800 17px/1.15 "DF Head",Inter,sans-serif;color:#fff}main .msvo .msvadd .d{display:block;font-size:13px;line-height:1.4;margin-top:4px}main .msvo .msvadd input{width:100%;margin-top:10px}main .msvo .msvdel{grid-column:2;justify-self:start;font-size:13px}main .msvo .msvok{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:14px;color:#d5dbe0}

/* marketing consent (6X, 8 Nov 2026) */.pick.sumkt{margin-top:-4px}.pick.sumkt .d{font-size:12.5px}.mktbox .mktsw{display:block;border:0;padding:0;font-size:14px;line-height:1.5}.mktbox .mktsw input{margin:0 8px 0 0;vertical-align:-2px}
.mktinvite{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:16px max(16px,calc((100% - 1100px) / 2)) 8px;padding:16px 18px;border:1px solid rgba(0,229,255,.35);border-radius:14px;background:rgba(0,229,255,.06)}.mktinvite b{color:#fff;font-size:16px}.mktinvite p{margin:4px 0 0;color:#c9d1d7;font-size:14px;line-height:1.5;max-width:640px}

/* ---------- top-bar utility icons, one matching set (owner, 8 Nov 2026: "they look too cheap") ----------
   one size, one quiet glass button, one icon colour (they were yellow, indigo, cyan and pink, the shield in a glowing ring and the
   help mark in another drawing style); the save status is a small dot on the shield; hover lifts to the DALFAST cyan */
html:root header.top.top :is(.hlbtn,.pmchip,.acct,.offbtn,.i18nbtn,[data-act="theme"],[data-act="shortcuts"],.offpill){position:relative;height:36px!important;min-width:36px;border-radius:10px!important;
 background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02))!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.35)!important;color:#cfd6dc!important;transition:border-color .18s,background .18s,color .18s,box-shadow .18s}
html:root header.top.top :is(.hlbtn,.pmchip,.acct,.offbtn,.i18nbtn,[data-act="theme"],[data-act="shortcuts"]){width:36px!important;padding:0!important}
html:root header.top.top :is(.hlbtn,.pmchip,.acct,.offbtn,.i18nbtn,[data-act="theme"],[data-act="shortcuts"],.offpill) svg{width:18px!important;height:18px!important;color:inherit!important;stroke:currentColor!important;stroke-width:1.7!important;fill:none}
html:root header.top.top :is(.hlbtn,.pmchip,.acct,.offbtn,.i18nbtn,[data-act="theme"],[data-act="shortcuts"],.offpill):is(:hover,:focus-visible){color:#fff!important;border-color:rgba(0,229,255,.5)!important;background:linear-gradient(180deg,rgba(0,229,255,.12),rgba(0,229,255,.04))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 3px rgba(0,229,255,.10)!important}
html:root header.top.top .hlbtn .hlic{width:18px!important;height:18px!important;color:inherit!important}
html:root header.top.top .i18nbtn{width:auto!important;padding:0 10px!important;gap:6px}html:root header.top.top .i18nbtn span{font:600 12px/1 Inter,sans-serif;letter-spacing:.04em;color:inherit}
/* the save status: the shield like the others, a dot for the state */
html:root header.top.top .pmchip span{display:none}
html:root header.top.top .pmchip.device,html:root header.top.top .pmchip.synced,html:root header.top.top .pmchip.private{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02))!important}
html:root header.top.top .pmchip::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 2px #131517}
html:root header.top.top .pmchip.private::after{background:#a78bfa}html:root header.top.top .pmchip.device::after{background:#94a3b8}
/* the account: the person's initials or photo in a round mark inside the same button */
html:root header.top.top .acct .avatar{width:26px;height:26px;border-radius:50%;font:700 11px/26px Inter,sans-serif;background:linear-gradient(135deg,#00F0FF,#00B3FF);color:#06222a;box-shadow:none;border:0}
html:root header.top.top .acct img{width:26px;height:26px;border-radius:50%;object-fit:cover}
html:root header.top.top .offpill{padding:0 14px!important;border-radius:999px!important}
@media (max-width:1280px){html:root header.top.top .offpill{width:36px!important;padding:0!important}}

/* ---------- video colour grading panel (Round 3, 8 Nov 2026) ---------- */
.vgbox .vgtabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}.vgbox .vgtabs .chip{font-size:12.5px;padding:5px 10px}
.vgbox .vgr{display:block;margin:0 0 10px}.vgbox .vgr span{float:right;font-variant-numeric:tabular-nums;color:#aeb6be}.vgbox .vgr input{width:100%;display:block;margin-top:4px}
.vgbox .vgwheels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vgbox .vgwheel{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.vgbox .vgwheel canvas{width:78px;height:78px;touch-action:none;cursor:crosshair}
.vgbox .vgwheel span{font-size:11.5px;line-height:1.25;color:#cfd6dc}.vgbox .vgwheel .linkbtn{font-size:11.5px}
.vgbox .vgcurve{width:100%;max-width:240px;aspect-ratio:1;display:block;margin:6px 0;border-radius:8px;border:1px solid rgba(255,255,255,.1);touch-action:none;cursor:crosshair}
.vgbox .vglooks{display:flex;flex-wrap:wrap;gap:6px}.vgbox .vglooks .chip{font-size:12.5px;padding:5px 10px}
.vgbox .vgdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#00e5ff;margin-left:6px;vertical-align:1px}
/* "What do you do?" as large photo cards (owner, 11 Nov 2026: "not looking modern"): the trade's photo fills the card, its name over a
   soft fade, the card lifts and the photo zooms on hover */
html:root .ospick h2{font-size:clamp(28px,2.8vw,46px)!important;letter-spacing:-.02em}
html:root .ospick .oslist{grid-template-columns:repeat(auto-fill,minmax(clamp(200px,13vw,270px),1fr))!important;gap:clamp(12px,1vw,18px)!important;max-height:none!important;-webkit-mask-image:none!important;mask-image:none!important;overflow:visible!important}
html:root .ospick .osorg{position:relative;display:block!important;aspect-ratio:4/3;min-height:0!important;padding:0!important;border-radius:20px!important;overflow:hidden;background:#16191c!important;border:1px solid rgba(255,255,255,.08)!important;transition:transform .3s,box-shadow .3s,border-color .2s}
html:root .ospick .osorg img,html:root .ospick .osorg .osph{position:absolute;inset:0;width:100%!important;height:100%!important;border-radius:0!important;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
html:root .ospick .osorg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,11,13,.92))}
html:root .ospick .osorg b,html:root .ospick .osorg span{position:absolute;left:14px;right:14px;z-index:1}
html:root .ospick .osorg b{bottom:30px;font:800 clamp(15px,1.1vw,18px)/1.2 "DF Head",Inter,sans-serif!important}
html:root .ospick .osorg span{bottom:12px;font-size:12.5px!important;color:#9ff3ff!important;margin:0!important}
html:root .ospick .osorg:is(:hover,:focus-visible){transform:translateY(-4px);border-color:rgba(0,229,255,.55)!important;box-shadow:0 24px 44px -24px rgba(0,229,255,.55)}
html:root .ospick .osorg:hover img{transform:scale(1.07)}
@media (max-width:640px){html:root .ospick .oslist{grid-template-columns:1fr 1fr!important}}
html:root .ospick.hmfold:not(.open) .oslist>:nth-child(n+16){display:none!important}
/* side menu, rebranded like the pages (owner, 12 Nov 2026): thin icons on no box, white on hover, cyan only where you are */
html:root #side#side a.nav svg.ic{background:none!important;color:#a9b2bc!important;stroke:#a9b2bc!important;box-shadow:none!important}
html:root #side#side a.nav:hover svg.ic{color:#fff!important;stroke:#fff!important}
html:root #side#side a.nav[aria-current="page"] svg.ic{background:rgba(0,229,255,.14)!important;color:#00e5ff!important;stroke:#00e5ff!important}
/* screen-size review 12 Nov 2026: on tablets and desktops a few labels were 9.5–11.5 px (side menu group names, "What would you like to
   do?", credit hints, card corner tags, "Recommended", the phone kit date). Phones already have a 13 px floor; this is the floor from
   701 px up: nothing a person has to read under 12 px. */
@media (min-width:701px){
 #side h2,#side h2 button,:root main section.qvask>label,.pslcr,.rlymo,.aimc-k,.cbl,.uceye,.tlxl,main kbd,main a.pill,main span.pill,.pvchoose button i{font-size:12px!important}
}
/* owner, 12 Nov 2026 ("make sure this does not cut off in mobile view", the footer with the app buttons, links and brands): it wraps at
   every width; what was covered was its last line, under the round floating button (#omniHost, 46 px, bottom right). The old
   body.has-omni rule above no longer matched (that class is not set any more), so the footer keeps room for the button on phones/tablets. */
@media (max-width:1100px){#main>footer.sftfoot{padding-bottom:76px!important}
 /* real phones and tablets (owner, 12 Nov 2026 "real phones … tablets"): the footer's 8 px inner edge put "Get the DALFAST Studio app", the
    buttons, links and company line flush against the glass, so they looked cut off. Same 16 px edge as the rest of the page. */
 #main>footer.sftfoot .sftin{padding-left:16px!important;padding-right:16px!important}}
/* screen-size review 12 Nov 2026, last spots on a 320–400 px phone: the Audio voice button and its voice picker would not wrap (436 px);
   the custom top-up row ran past its card; the Smart Home plan hint was one long line wider than the plan. */
@media (max-width:600px){
 .msvgo>*{max-width:100%;min-width:0}.msvgo .btn.primary{white-space:normal;text-align:center}.msvgo .aimc{white-space:normal;height:auto!important;min-height:40px;flex-wrap:wrap}
 .paygcusrow{flex-wrap:wrap}.paygcusrow>*{min-width:0;max-width:100%}
 .shphint{white-space:normal;text-align:center;width:max-content;max-width:calc(100% - 24px)}
}
/* the "Install DALFAST Studio" card (js/offline.js) is on screen for up to 30 s: meanwhile the footer's last lines can scroll clear of it
   (a bar on phones, a taller card on tablets) */
@media (max-width:700px){html.instpop-on #main>footer.sftfoot{padding-bottom:100px!important}}
@media (min-width:701px) and (max-width:1100px){html.instpop-on #main>footer.sftfoot{padding-bottom:200px!important}}
/* tablets (owner, 12 Nov 2026 "real phones … tablets"): between phone and laptop width the top bar held 880 px of buttons in 768 px, so it
   scrolled sideways and "Sign up" sat half off the edge on an iPad. There the Back/Forward arrows (the tablet has its own back gesture)
   and the small Install icon (the footer's app buttons and the install card remain) step aside. */
@media (min-width:601px) and (max-width:1023px){.top>[data-act="back"],.top>[data-act="fwd"],.top>.offpill{display:none!important}.top{column-gap:4px!important}}
/* folding phones opened (Galaxy Z Fold, ~690 px): the colour-theme button also steps aside (it is in Settings → Appearance too) */
@media (min-width:601px) and (max-width:759px){.top>[data-act="theme"]{display:none!important}}