:root{
  --bg:#0a0a0b;
  --s1:#141416; --s2:#1c1c20; --ln:#26262b; --ln2:#33333a;
  --tx:#ececef; --mu:#8b8b94; --a:#8ab4ff; --ok:#6fd08c; --wa:#f0b64a; --er:#ff7b72;
  --r:13px; --w:1240px;
  /* One card, whatever it holds: media on top, caption under it. */
  --tileh:286px; --capH:62px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
input,textarea,[contenteditable]{user-select:text;-webkit-user-select:text}
html{height:100%;-webkit-text-size-adjust:100%;overflow:hidden}
/* 100vh is the tall viewport on phones (address bar hidden), which pushes the
   bottom of the page off screen. 100dvh is what is actually visible. */
body{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;max-width:100%}
body,html{background:var(--bg);color:var(--tx);font:13.5px/1.4 "Google Sans",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
:focus{outline:0}
:focus-visible{outline:2px solid rgba(138,180,255,.5);outline-offset:2px}
button:focus,select:focus{outline:0}
button:focus-visible,select:focus-visible{outline:2px solid rgba(138,180,255,.5);outline-offset:2px}
[hidden]{display:none!important}

/* header */
header{position:relative;flex:none;z-index:20;padding:0 14px;padding-top:calc(env(safe-area-inset-top) + 12px);border-bottom:1px solid transparent;transition:background .2s,border-color .2s,backdrop-filter .2s}
header.stuck{background:rgba(10,10,11,.78);backdrop-filter:blur(16px);border-bottom-color:var(--ln)}
.bar{max-width:var(--w);margin:0 auto;display:flex;gap:10px;align-items:center;min-height:54px;min-width:0}
.bar>*{min-width:0}
.sp{flex:1;min-width:0}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;letter-spacing:-.015em;padding:6px 11px 6px 7px;border-radius:11px;white-space:nowrap;flex:none;text-decoration:none}
.mark{width:18px;height:18px;border-radius:6px;flex:none;background:conic-gradient(from 200deg,#7b5cff,#2bd4ff 32%,#5cffb0 58%,#ffb45c 78%,#7b5cff);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.logo:hover{background:var(--s2)}
.pill{display:flex;align-items:center;gap:7px;padding:5px 9px;border-radius:9px;background:var(--s1);border:1px solid var(--ln);font-size:13px;transition:background .15s,border-color .15s;min-width:0}
.pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pill::after{content:"";width:5px;height:5px;border:solid var(--mu);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);flex:none}
.pill:hover{background:var(--s2);border-color:var(--ln2)}
/* "Open studio" points up and right instead of down */
#resume::after{content:"\2197";width:auto;height:auto;border:0;transform:none;color:var(--mu);font-size:14px;line-height:1}
#resume:hover::after{color:var(--tx)}
/* category + model read as one control, not two loose chips */
.group{display:flex;align-items:stretch;background:var(--s1);border:1px solid var(--ln);border-radius:11px;padding:2px;flex:none;min-width:0;max-width:min(56vw,470px)}
.group .pill{background:none;border:0;border-radius:8px;padding:5px 10px}
.group .pill+.pill{border-left:1px solid var(--ln);border-radius:0 8px 8px 0}
#catBtn{flex:none}
#modelBtn{flex:1 1 auto}
.seg{display:flex;background:var(--s1);border:1px solid var(--ln);border-radius:11px;padding:2px;flex:none}
.seg button{padding:5px 11px;border-radius:8px;color:var(--mu);font-size:12.5px;transition:background .15s,color .15s;white-space:nowrap}
.seg .on{background:var(--s2);color:var(--tx)}
body[data-view=home] .st,body[data-view=studio] .hm,body[data-view=model] .st,body[data-view=model] .hm{display:none}
body:not([data-view=model]) .mp{display:none}

/* home */
.wrap{max-width:var(--w);margin:0 auto;padding:4px 14px 48px}
/* A fixed frame with one scrolling pane, so the header stays put and the
   composer never floats over the results. */
#home,#studio,#mpage{flex:1 1 0;min-height:0;width:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.lead{color:var(--mu);margin-bottom:16px}
.hero{position:relative;margin:20px 0 16px;border:1px solid var(--ln);border-radius:18px;overflow:hidden;background:var(--s1)}
.track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.slide{flex:0 0 100%;min-width:100%;padding:44px 40px 52px;display:flex;flex-direction:column;justify-content:center;gap:12px;position:relative;isolation:isolate;overflow:hidden;min-height:250px}
.slide::before{content:"";position:absolute;inset:-40%;z-index:-1;background:radial-gradient(60% 55% at 22% 32%,var(--g1),transparent 68%),radial-gradient(55% 60% at 82% 74%,var(--g2),transparent 66%);animation:drift 18s ease-in-out infinite alternate;opacity:.95}
.slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,rgba(10,10,11,.28),rgba(10,10,11,.72) 62%,rgba(10,10,11,.9))}
@keyframes drift{from{transform:translate3d(-4%,-2%,0) scale(1)}to{transform:translate3d(5%,3%,0) scale(1.16)}}
.slide h2{font-size:clamp(24px,3.2vw,36px);font-weight:600;letter-spacing:-.025em;line-height:1.12}
.slide p{color:#c3c3cc;max-width:52ch;font-size:clamp(14px,1.15vw,16.5px);line-height:1.55}
.slide{cursor:pointer}
.hero{min-height:252px}
/* Crawler copy of the page. The app removes it on load; hiding it here stops it flashing first. */
#seo{display:none}
.slide:focus-visible{outline-offset:-3px}
.hero-nav{position:absolute;bottom:9px;width:26px;height:26px;border-radius:50%;background:rgba(10,10,11,.45);border:1px solid rgba(236,236,239,.16);color:var(--tx);font-size:16px;line-height:1;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s,background .15s}
.hero:hover .hero-nav,.hero:focus-within .hero-nav{opacity:1;pointer-events:auto}
.hero-nav:hover{background:rgba(10,10,11,.75)}
#heroPrev{right:62px}
#heroNext{right:30px}
.dots{position:absolute;left:26px;bottom:8px;display:flex;align-items:center;gap:2px}
.dots button{display:grid;place-items:center;width:18px;height:22px;border-radius:8px;transition:width .25s}
.dots button::before{content:"";width:6px;height:6px;border-radius:999px;background:rgba(236,236,239,.3);transition:width .25s,background .25s}
.dots button:hover::before{background:rgba(236,236,239,.6)}
.dots button.on{width:32px}
.dots button.on::before{width:20px;background:var(--tx)}
.tools{display:flex;gap:8px;margin-bottom:10px}
/* type selector: tappable chips under the search box */
.types{display:flex;gap:6px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:2px 2px 3px}
.types::-webkit-scrollbar{display:none}
/* Chips stay on one line and slide. The row running off the right edge is the
   hint that there is more, which wrapping onto a second line never gave. */
.types>button{scroll-snap-align:start;flex:none}
.types button{display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;background:var(--s1);border:1px solid var(--ln);color:var(--mu);font-size:12.5px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.types button small{font-size:11px;opacity:.65;font-variant-numeric:tabular-nums}
.types button:hover{background:var(--s2);color:var(--tx)}
.types button.on{background:var(--tx);border-color:var(--tx);color:#08080a}
.mcount{color:var(--mu);font-size:12.5px;margin:0 2px 10px}
.in{background:var(--s1);border:1px solid var(--ln);border-radius:9px;padding:8px 12px;flex:1;min-width:0;outline:0;transition:border-color .15s;-webkit-appearance:none;appearance:none}
.in::placeholder{color:var(--mu)}
.in:focus{border-color:var(--ln2)}
.mg{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:9px}
.mc{text-align:left;background:var(--s1);border:1px solid var(--ln);border-radius:var(--r);padding:11px 12px;display:flex;flex-direction:column;gap:3px;transition:border-color .15s,background .15s,transform .15s}
.mc:hover{border-color:var(--ln2);background:var(--s2);transform:translateY(-1px)}
.mc small{color:var(--a);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}
.mc b{font-size:14px;font-weight:600}
.mc p{color:var(--mu);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.mc i{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-style:normal;font-size:11.5px;margin-top:2px}
.mc .au{color:#c7b8ff;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mc .pr{color:var(--tx);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.mc .pr.free{color:var(--ok)}
.mc .pr.none{color:var(--mu);font-weight:500}

/* Legal links, at the end of the public pages only. */
.foot{border-top:1px solid var(--ln);margin-top:34px;padding:18px 0 8px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 20px}
.foot nav{display:flex;flex-wrap:wrap;gap:14px}
.foot a{color:var(--mu);font-size:12.5px;text-decoration:none}
.foot a:hover{color:var(--tx);text-decoration:underline}
.foot p{color:#6e6e78;font-size:11.5px;line-height:1.5;max-width:56ch}
.foot p a{color:#8b8b94;text-decoration:underline}
.mp .foot,.doc .foot{margin-top:26px}
@media(max-width:640px){.foot{flex-direction:column;align-items:flex-start}}

/* studio */
#studio{padding:10px 14px 210px;max-width:var(--w);margin:0 auto}
/* One row of equal cards. Every tile is the same height whatever it holds, so a
   player, a transcript and a picture line up and the grid never looks ragged.
   The picture keeps its own shape inside the box (object-fit:contain), so a 9:16
   clip is shown whole rather than cropped to fill. */
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,186px),1fr));gap:11px;align-items:stretch}
.tile{position:relative;height:var(--tileh);background:var(--s1);border:1px solid var(--ln);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s,transform .18s,box-shadow .18s}
.tile:hover{border-color:var(--ln2);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.media{position:relative;flex:1 1 auto;min-height:0;background:#0d0d10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.media video,.media img{width:100%;height:100%;object-fit:contain;display:block}
.media .txt,.media .aud,.media .err{width:100%;height:100%}
/* Clicking the picture opens it, so it is a link, not a magnifier. */
.media img{cursor:pointer}
/* A video card shows a still frame, or a plain panel until one is saved. */
.vph{background:radial-gradient(120% 90% at 30% 20%,#1b1b22,#0d0d10 70%);cursor:pointer}
.media .play{position:absolute;inset:0;margin:auto;width:42px;height:42px;border-radius:50%;background:rgba(10,10,12,.62);backdrop-filter:blur(6px);border:1px solid rgba(236,236,239,.16);display:grid;place-items:center;color:#fff;pointer-events:none}
.media .play svg{width:17px;height:17px;margin-left:2px}
/* Blur-up: a 24px copy of the picture stands in while the full one decodes, so
   a card shows something the moment it exists instead of an empty box. */
.media img{background-size:cover;background-position:center;transition:filter .28s ease,transform .28s ease}
.media img.loading{filter:blur(10px);transform:scale(1.06)}

/* what it is, quietly in the corner */
.kind{position:absolute;left:7px;bottom:7px;padding:2px 7px;border-radius:999px;background:rgba(8,8,10,.66);backdrop-filter:blur(6px);color:#d6d6dd;font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;pointer-events:none}

/* Actions sit on the media instead of in a strip under it, so the card is one
   clean block. They stay out of the way until the card is hovered. */
.ovl{position:absolute;top:7px;right:7px;display:flex;flex-direction:column;gap:5px;z-index:2;opacity:0;transform:translateX(4px);transition:opacity .18s,transform .18s}
.tile:hover .ovl,.tile:focus-within .ovl{opacity:1;transform:none}
.ovb{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(10,10,12,.72);backdrop-filter:blur(8px);border:1px solid rgba(236,236,239,.13);color:#ececef;text-decoration:none;transition:background .15s,color .15s}
.ovb:hover{background:rgba(236,236,239,.94);color:#08080a}
.ovb svg{width:15px;height:15px}
.ovb.busy{pointer-events:none;opacity:1}
.ovb.busy svg{display:none}
.ovb.busy::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.ovb[data-a=del]:hover{background:#ff7b72;color:#1a0b0a}
/* Without a hover to reveal them, the actions have to be there already. */
@media(hover:none){.ovl{opacity:1;transform:none}}

/* audio: the native player ignores the page colours, so it is drawn here */
.aud{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px 14px;background:linear-gradient(160deg,#15151a,#101014)}
.aud audio{display:none}
.apl{display:flex;align-items:center;gap:9px}
.pb{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--tx);color:#08080a;transition:background .15s}
.pb:hover{background:#fff}
.pb svg{width:17px;height:17px}
.tc,.td{font-size:11px;color:var(--mu);font-variant-numeric:tabular-nums;flex:none;min-width:30px}
.td{text-align:right}
/* The track is a plain div rather than <input type=range> so it can be styled
   to match and can grow a filled portion with a single custom property. */
.sk{position:relative;flex:1;min-width:0;height:16px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.sk::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:999px;background:var(--s2)}
.sk i{position:absolute;left:0;width:var(--p,0%);max-width:100%;height:4px;border-radius:999px;background:var(--a)}
.sk i::after{content:"";position:absolute;right:0;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--tx);box-shadow:0 1px 4px rgba(0,0,0,.5)}
.sk:focus-visible i::after{box-shadow:0 0 0 3px rgba(138,180,255,.45)}

/* a transcript or a reply: readable, scrollable, and the same height as the
   picture cards beside it */
.txt{padding:13px 14px;max-height:100%;overflow:auto;white-space:pre-wrap;word-break:break-word;align-self:stretch;width:100%;font-size:12.5px;line-height:1.55;color:#dcdce2;background:linear-gradient(160deg,#15151a,#101014);scrollbar-width:thin}

.cap{padding:9px 11px 11px;display:flex;flex-direction:column;gap:3px;flex:0 0 auto;min-height:var(--capH)}
.caprow{display:flex;align-items:baseline;gap:8px}
.cap .nm{font-size:11px;color:var(--a);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.cap .paid{font-size:11px;font-weight:600;color:var(--ok);font-variant-numeric:tabular-nums;flex:none;white-space:nowrap}
.cap p{color:var(--mu);font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cap p:empty{display:none}
.processing .media{background:var(--s2)}
.completed{animation:pop .35s ease-out}
@keyframes pop{from{transform:scale(.97);opacity:.6}}

/* processing */
.shim{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(138,180,255,.14) 50%,transparent 70%);background-size:250% 100%;animation:sh 1.6s linear infinite}
@keyframes sh{from{background-position:150% 0}to{background-position:-100% 0}}
.ring{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--ln);border-top-color:var(--a);animation:spin 1s linear infinite;position:absolute;top:calc(50% - 22px)}
@keyframes spin{to{transform:rotate(360deg)}}
.lbl{position:absolute;top:calc(50% + 14px);color:var(--mu);font-size:11px;animation:pulse 1.8s ease-in-out infinite;white-space:nowrap}
@keyframes pulse{50%{opacity:.4}}
.bar-i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ln)}
.bar-i::after{content:"";display:block;width:35%;height:100%;background:var(--wa);animation:slide 1.5s ease-in-out infinite}
@keyframes slide{from{margin-left:-35%}to{margin-left:100%}}
.err{padding:14px;text-align:center;display:flex;flex-direction:column;gap:4px;color:var(--er);font-size:12px;word-break:break-word}
.err span{color:var(--mu)}
.failed{border-color:#432624}
#empty{text-align:center;color:var(--mu);padding:16vh 20px}
#empty b{display:block;color:var(--tx);font-size:17px;margin-bottom:4px;font-weight:600}

/* composer */
#composer{position:fixed;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));width:min(740px,calc(100% - 24px));background:rgba(20,20,22,.93);backdrop-filter:blur(18px);border:1px solid var(--ln);border-radius:18px;padding:9px 10px 8px;z-index:30;box-shadow:0 14px 44px rgba(0,0,0,.6)}
#prompt{width:100%;background:none;border:0;resize:none;outline:0;padding:3px 6px;max-height:150px;font-size:15px;line-height:1.45}
/* Speech-to-text has nothing to type. The box still sits there and still says
   what the model is doing, but it takes no pointer and no keystrokes. */
#prompt.locked{cursor:default;color:var(--mu);background:var(--s2);border:1px dashed var(--ln2);border-radius:11px;padding:8px 10px;min-height:38px}
#prompt.locked::placeholder{color:var(--mu);opacity:.9}
#att{display:flex;flex-wrap:wrap;gap:6px;padding:0 6px 6px}
#att div{display:flex;align-items:center;gap:7px;background:var(--s2);border-radius:9px;padding:3px 7px 3px 3px;font-size:12px;max-width:100%}
/* The role the picture plays (first frame, reference) over its filename. */
#att span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
#att span b{font-weight:600;font-size:11.5px;white-space:nowrap}
#att span em{font-style:normal;color:var(--mu);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:16ch}
#att img{width:28px;height:28px;object-fit:cover;border-radius:6px}
#att button{color:var(--mu);font-size:14px}
.row{display:flex;align-items:center;gap:6px;margin-top:3px}
.rnd{width:32px;height:32px;border-radius:50%;background:var(--s2);border:1px solid var(--ln);font-size:17px;line-height:1;flex:none;display:grid;place-items:center;transition:background .15s}
.rnd:hover{background:#24242a}
#send{background:var(--tx);color:#000;border-color:var(--tx);font-weight:600}
#send:hover{background:#fff}
#send:disabled{opacity:.5}

.cost{padding:5px 9px;border-radius:8px;background:transparent;border:1px dashed var(--ln2);color:var(--wa);font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.cost .cb{color:var(--mu);font-weight:500;margin-right:5px}
.cost.free{color:var(--ok)}
.cost.unknown{color:var(--mu);font-weight:500}
#hint{color:var(--er);font-size:12px;padding:0 6px 2px}

/* menu + lightbox */
#menu{position:fixed;z-index:50;background:var(--s1);border:1px solid var(--ln2);border-radius:12px;padding:5px;min-width:190px;max-width:min(340px,calc(100vw - 16px));box-shadow:0 16px 44px rgba(0,0,0,.7);display:none}
#menu.open{display:block;animation:pop .15s}
.ml{max-height:min(52vh,380px);max-height:min(52dvh,380px);overflow:auto;scrollbar-width:thin}
.ml button{display:block;width:100%;text-align:left;padding:7px 9px;border-radius:8px;font-size:13px}
.ml button:hover{background:var(--s2)}
.ml button.on{color:var(--a)}
.ml small{display:block;color:var(--mu);font-size:11.5px}
.ms,.mi{width:calc(100% - 6px);margin:2px 3px 5px;background:var(--s2);border:1px solid var(--ln);border-radius:8px;padding:7px 9px;outline:0;font-size:13px}
.ms::placeholder,.mi::placeholder{color:var(--mu)}
/* full-size viewer */
#lb{position:fixed;inset:0;z-index:60;background:rgba(6,6,8,.96);backdrop-filter:blur(6px);display:none;padding:0}
#lb.on{display:grid;place-items:center}
/* The one track is capped to the space left, so a large picture or clip is scaled
   to fit inside it instead of overflowing and being cropped by the screen. */
.lbstage{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);place-items:center;padding:58px 72px 74px;cursor:zoom-out}
.lbstage img,.lbstage video{max-width:100%;max-height:100%;width:auto;height:auto;min-width:0;min-height:0;object-fit:contain;border-radius:10px;background:transparent}
.lbstage img.soft{opacity:.85}
.lbspin{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid rgba(236,236,239,.3);border-top-color:#ececef;border-radius:50%;animation:spin .8s linear infinite;pointer-events:none}
.lbstage img{background-size:cover;background-position:center;transition:filter .28s ease,transform .28s ease}
.lbstage img.loading{filter:blur(10px);transform:scale(1.03)}
/* Audio and text open full size too, at a size worth reading or listening to. */
.lbstage .aud.big{width:min(620px,100%);border-radius:16px;border:1px solid var(--ln);padding:26px 22px;gap:20px}
.lbstage .aud.big .pb{width:52px;height:52px}
.lbstage .aud.big .pb svg{width:24px;height:24px}
.lbstage .aud.big .tc,.lbstage .aud.big .td{font-size:13px;min-width:38px}
.lbstage .aud.big .sk{height:22px}
.lbstage .aud.big .sk i{height:6px}
.lbstage .aud.big .sk i::after{width:14px;height:14px;margin-top:-7px}
.lbstage .txt.big{width:min(760px,100%);max-height:100%;overflow:auto;padding:26px 28px;border-radius:16px;border:1px solid var(--ln);font-size:16px;line-height:1.65;color:#e4e4ec;white-space:pre-wrap;word-break:break-word;scrollbar-width:thin}
.lbx{position:absolute;top:12px;right:16px;z-index:3;width:36px;height:36px;border-radius:50%;background:rgba(20,20,22,.8);border:1px solid var(--ln);color:var(--tx);font-size:21px;line-height:1;display:grid;place-items:center}
.lbx:hover{background:var(--s2)}
.lbnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:64px;border-radius:12px;background:rgba(20,20,22,.72);border:1px solid var(--ln);color:var(--tx);display:grid;place-items:center;transition:background .15s}
.lbnav:hover{background:var(--s2)}
.lbnav[hidden]{display:none}
.lbnav.prev{left:12px}
.lbnav.next{right:12px}
.lbnav svg{width:22px;height:22px}
.lbfoot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:linear-gradient(transparent,rgba(6,6,8,.9) 40%)}
.lbmeta{color:var(--mu);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lbacts{flex:none}
/* In the viewer the actions are always shown: there is no hover to reveal them. */
.lbacts .ovl{position:static;opacity:1;transform:none;flex-direction:row}

@media(max-width:640px){
  .logo{padding:6px 8px}
  .pill span{max-width:13ch}
  /* Studio header on a phone: logo and account on the first row, the model
     picker and the This type / All switch on the second. One row of everything
     is wider than the screen. */
  body[data-view=studio] .bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l a" "g s";gap:6px 8px;min-height:0;padding-bottom:8px}
  body[data-view=studio] .logo{grid-area:l;justify-self:start}
  body[data-view=studio] .acct{grid-area:a;justify-self:end}
  body[data-view=studio] .group{grid-area:g;max-width:none;min-width:0}
  body[data-view=studio] .seg{grid-area:s}
  body[data-view=studio] .sp{display:none}
  .group #modelBtn span,.group #catBtn span{max-width:none}
  .group #modelBtn{min-width:0}
  /* Under 16px iOS zooms the page when a field is focused and leaves it
     pannable sideways. */
  #prompt,.in,.ms,.mi,.sheet input,.sheet textarea{font-size:16px}
  #studio{padding:8px 12px 200px}
  .wrap{padding-left:12px;padding-right:12px}
  #mpage .seo{padding:24px 16px 48px}
  .seg button{padding:4px 8px;font-size:12px}
  .cost .cb{display:none}
  .slide{padding:32px 22px 40px;min-height:200px}
  .slide p{font-size:13.5px}
  .hero{min-height:202px}
  #composer{border-radius:16px}
  .acct .bal{display:none}
  /* Viewer on a phone: the picture gets the whole width, and the arrows become
     small round buttons over its edges instead of columns beside it. */
  .lbstage{padding:54px 8px 64px}
  .lbstage img,.lbstage video{border-radius:6px}
  .lbnav{width:34px;height:34px;border-radius:50%;background:rgba(20,20,22,.55)}
  .lbnav svg{width:18px;height:18px}
  .lbnav.prev{left:6px}
  .lbnav.next{right:6px}
  .lbx{top:10px;right:10px}
}
@media(max-height:480px){.lbstage{padding-top:46px;padding-bottom:52px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}

/* gallery header link — home only, hidden in studio */
body[data-view=studio] #galleryLink{display:none}
#galleryLink{background:none;border:0;padding:5px 4px;font-size:13px;color:var(--mu);text-decoration:none;border-radius:0}
#galleryLink:hover{color:var(--tx)}
#galleryLink::after{display:none}

/* active-param summary tags in composer row */
.psum{display:flex;gap:4px;flex-wrap:nowrap;overflow:hidden;flex:1;min-width:0;align-items:center}
.ptag{font-size:11px;font-weight:600;color:var(--a);background:#1a2a40;border:1px solid #2e3c55;border-radius:6px;padding:3px 7px;white-space:nowrap}

/* params bottom drawer */
#pdrawer{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
#pdrawer.open{pointer-events:auto}
#pdoverlay{position:absolute;inset:0;background:rgba(4,4,6,.7);backdrop-filter:blur(4px);opacity:0;transition:opacity .28s ease}
#pdrawer.open #pdoverlay{opacity:1}
#pdpanel{position:relative;background:var(--s1);border:1px solid var(--ln2);border-radius:22px 22px 0 0;padding:0 0 env(safe-area-inset-bottom);max-height:82vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,1,.6,1)}
#pdrawer.open #pdpanel{transform:translateY(0)}
.pd-handle{width:36px;height:4px;border-radius:2px;background:var(--ln2);margin:10px auto 0;flex:none}
.pd-head{display:flex;align-items:center;gap:8px;padding:14px 20px 12px;border-bottom:1px solid var(--ln);flex:none}
.pd-title{font-size:16px;font-weight:700;letter-spacing:-.015em;color:var(--tx)}
.pd-model{font-size:12px;color:var(--mu);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-close{width:28px;height:28px;border-radius:50%;background:var(--s2);border:1px solid var(--ln);color:var(--mu);font-size:14px;display:grid;place-items:center;flex:none;transition:background .15s}
.pd-close:hover{background:#2a2a30;color:var(--tx)}
.pd-body{overflow-y:auto;padding:8px 20px 20px;-webkit-overflow-scrolling:touch}
.pd-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--ln)}
.pd-row:last-child{border-bottom:0}
.pd-lbl{display:flex;flex-direction:column;gap:4px;padding-top:2px}
.pd-name{font-size:14px;font-weight:600;color:var(--tx)}
.pd-desc{font-size:12px;color:var(--mu);line-height:1.4;max-width:26ch}
.pd-opts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:200px}
.pd-opt{padding:6px 11px;border-radius:8px;background:var(--s2);border:1px solid var(--ln);font-size:12.5px;color:var(--mu);cursor:pointer;transition:border-color .15s,color .15s,background .15s;white-space:nowrap}
.pd-opt.on{background:#1a2a40;border-color:var(--a);color:var(--a);font-weight:600}
.pd-opt:hover:not(.on){border-color:var(--ln2);color:var(--tx)}
.pd-tog{padding:7px 18px;border-radius:20px;background:var(--s2);border:1px solid var(--ln);font-size:13px;font-weight:600;color:var(--mu);cursor:pointer;transition:background .15s,border-color .15s,color .15s;min-width:60px;text-align:center}
.pd-tog.on{background:#1a2a40;border-color:var(--a);color:var(--a)}
.pd-in{background:var(--s2);border:1px solid var(--ln);border-radius:9px;padding:8px 12px;font-size:14px;color:var(--tx);outline:0;width:160px;flex:none;transition:border-color .15s}
.pd-in:focus{border-color:var(--a)}
#paramsBtn.active{background:#1a2a40;border-color:var(--a);color:var(--a)}
@media(max-width:600px){.pd-opts{max-width:160px}.pd-in{width:130px}}

/* account controls in the header */
.acct{display:flex;align-items:center;gap:6px;flex:none;min-width:0}
.acct .pill::after{display:none}
.acct .signin{padding:6px 10px;font-weight:600}
.icon-btn{display:flex;align-items:center;justify-content:center;padding:6px 10px}
.icon-btn::after{display:none!important}
.acct .bal{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ok);background:transparent;border-color:transparent;padding:6px 9px}
.acct .bal:hover{background:var(--s1);border-color:var(--ln)}
.acct .bt{display:none;width:30px;height:30px;padding:0;justify-content:center;color:var(--mu)}
.acct .bt:hover{color:var(--tx)}
body[data-view=studio] .acct .bt{display:flex}
.acct .av{width:30px;height:30px;padding:0;justify-content:center;border-radius:9px;background:linear-gradient(140deg,#7b5cff,#2bd4ff);color:#08080a;font-weight:700;font-size:12.5px;letter-spacing:0}

/* modal */
#modal:empty{display:none}
.ov{position:fixed;inset:0;z-index:70;background:rgba(4,4,6,.72);backdrop-filter:blur(5px);display:grid;place-items:center;padding:16px;overflow:auto;animation:pop .18s ease-out}
.ov>.sheet{margin:auto}
/* The popup is a fixed box that centres. It does not scroll: a long popup
   scrolls the one list inside it that can grow, so the heading, the balance and
   the close button all stay put. */
.sheet{position:relative;width:100%;max-width:392px;background:var(--s1);border:1px solid var(--ln2);border-radius:17px;padding:22px 20px 18px;box-shadow:0 22px 60px rgba(0,0,0,.66);animation:pop .2s ease-out}
.sheet.wide{max-width:440px}
.sheet .x{position:absolute;top:11px;right:13px;color:var(--mu);font-size:19px;line-height:1;padding:2px 5px;border-radius:7px;z-index:2;background:linear-gradient(to bottom,var(--s1) 60%,transparent)}
.sheet .x:hover{background:var(--s2);color:var(--tx)}
.sheet h2{font-size:17px;font-weight:600;letter-spacing:-.015em}
.sheet h3{font-size:12px;font-weight:600;color:var(--mu);text-transform:uppercase;letter-spacing:.05em;margin:18px 0 7px}
.sub{color:var(--mu);font-size:12.5px;margin-top:3px}
.fine{color:var(--mu);font-size:11.5px;line-height:1.45;margin-top:12px}
.tabs{display:flex;gap:3px;background:var(--s2);border-radius:10px;padding:3px;margin:15px 0 13px}
.tabs button{flex:1;padding:6px 9px;border-radius:8px;color:var(--mu);font-size:12.5px;transition:background .15s,color .15s}
.tabs button.on{background:var(--ln);color:var(--tx)}
.tabs button[disabled]{opacity:.4;cursor:not-allowed}
.tabs.sm button{flex:none;padding:5px 12px}
.sheet form{display:flex;flex-direction:column;gap:10px}
.sheet label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--mu)}
.sheet input{background:var(--s2);border:1px solid var(--ln);border-radius:9px;padding:9px 11px;outline:0;font-size:13.5px;color:var(--tx);transition:border-color .15s;width:100%}
.sheet input::placeholder{color:#5f5f68}
.sheet input:focus{border-color:var(--a)}
.go{width:100%;margin-top:4px;padding:10px 14px;border-radius:10px;background:var(--tx);color:#08080a;font-weight:600;font-size:13.5px;transition:background .15s}
.go:hover{background:#fff}
.go:disabled{opacity:.5;cursor:default}
/* The secondary button. It was only ever defined for the admin sheet, so a link
   carrying it in the app kept the browser's own underline instead of reading as
   a button. */
.go.sec{width:auto;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 13px;font-size:12.5px;font-weight:500;background:var(--s2);color:var(--tx);border:1px solid var(--ln2);text-decoration:none;transition:background .15s,border-color .15s}
.go.sec:hover{background:#24242a;border-color:var(--ln2)}
.go.sec svg{width:15px;height:15px;flex:none;opacity:.85}
.msg{margin-top:12px;padding:8px 10px;border-radius:9px;font-size:12px;line-height:1.4;background:#3a1d1c;color:#ffb3ae;border:1px solid #58302e}
.msg.ok{background:#15301f;color:#9fe0b6;border-color:#245336}
.auth-row{display:flex;align-items:center;gap:8px;margin-top:4px}
.auth-row .go{flex:1;margin-top:0}
.forgot-link{background:none;border:0;padding:4px 0;font-size:12px;color:var(--mu);cursor:pointer;text-decoration:none;white-space:nowrap;transition:color .15s}
.forgot-link:hover{color:var(--a)}
.forgot-link[disabled]{opacity:.55;cursor:default}
.forgot-link[disabled]:hover{color:var(--mu)}
.forgot-link.back{align-self:flex-start;margin-top:2px}
.rs-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--mu);margin-top:2px}
.sheet input.codein{text-align:center;font:700 24px/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.5em;padding:12px 11px 12px calc(11px + .5em);-webkit-user-select:text;user-select:text}
.sheet input.codein::placeholder{letter-spacing:.35em;color:var(--ln2);font-weight:400}
.sheet form[hidden],.sheet .tabs[hidden],.sheet #au-more[hidden],.sheet .sub[hidden]{display:none}
.msg.on{display:block}

/* wallet */
.bal-big{display:flex;flex-direction:column;gap:1px;margin:13px 0 15px;padding:13px 15px;background:var(--s2);border-radius:13px}
.bal-big b{font-size:27px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.bal-big small{color:var(--mu);font-size:11.5px}
.amt{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.amt button{padding:9px 4px;border-radius:9px;background:var(--s2);border:1px solid var(--ln);font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s}
.amt button:hover{border-color:var(--ln2);background:#24242a}
.amt-in{margin-top:8px}
/* Paddle's inline frame and the totals the page has to show itself, because an
   inline frame does not display the items. */
.pdSum{margin-top:12px;padding:10px 12px;background:var(--s2);border:1px solid var(--ln);border-radius:10px;font-size:12.5px}
.pdSum>div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--mu)}
.pdSum .tot{border-top:1px solid var(--ln);margin-top:5px;padding-top:7px;color:var(--tx);font-weight:600}
.pdSum b{font-variant-numeric:tabular-nums}
.pdMsg{margin-top:10px;font-size:12.5px;color:var(--wa);min-height:1px}
/* Paddle paints a light checkout form. It gets its own light surface with a
   border and corners of its own, so it reads clearly against the dark wallet
   instead of bleeding into it. */
.checkout-container{margin-top:12px;background:#141416;border:1px solid var(--ln2);border-radius:12px;overflow:hidden;min-height:0}
.checkout-container:empty{display:none}
.checkout-container iframe{display:block;min-width:0!important;max-width:100%!important;width:100%!important}
@media(max-width:480px){.sheet.pd{padding-left:10px;padding-right:10px}}
.amt-locked{margin-top:8px;font-size:12px;color:var(--a)}
.tabs button .off{font-size:10px;opacity:.6;margin-left:3px}

/* Said plainly in the wallet, because a tester with a real card in front of them should not have to guess. */
.sandboxNote{margin-top:9px;padding:8px 10px;border-radius:9px;background:#3a2f12;border:1px solid #6b5620;color:#ffd98a;font-size:12px;line-height:1.45}
.ins{background:var(--s2);border:1px solid var(--ln);border-radius:9px;padding:9px 11px;font-size:12px;color:var(--mu);line-height:1.5;margin-bottom:10px;white-space:pre-wrap}
/* Where to send a manual payment. Each line is typed into a banking app, so
   every one carries its own copy button rather than making the buyer select it. */
.paybox{background:var(--s2);border:1px solid var(--ln);border-radius:12px;padding:12px 13px;margin-bottom:12px}
.paybox.warn{border-color:#4a3a1e;background:#221c12}
.paybox-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.paybox-h b{font-size:13px;font-weight:600}
.paybox-h span{color:var(--mu);font-size:11px;text-align:right}
.paydl{margin:0;display:flex;flex-direction:column;gap:1px}
.paydl>div{display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid var(--ln)}
.paydl>div:first-child{border-top:0}
.paydl dt{color:var(--mu);font-size:11.5px;flex:none;width:47%;max-width:150px}
.paydl dd{margin:0;font-size:13px;font-weight:500;word-break:break-all;display:flex;align-items:center;gap:6px;min-width:0;flex:1;justify-content:space-between}
.paydl .cpy{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--s1);border:1px solid var(--ln);color:var(--mu);transition:color .15s,border-color .15s}
.paydl .cpy:hover{color:var(--tx);border-color:var(--ln2)}
.paybox .ins{background:var(--s1);margin:10px 0 0}
/* The one long list in the wallet. It scrolls, the popup around it does not. */
.hist{border-top:1px solid var(--ln);margin-top:16px;max-height:min(38vh,290px);overflow-y:auto;overscroll-behavior:contain;padding-right:3px}
.hist .load{color:var(--mu);font-size:12px;padding:12px 0}
.tx{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--ln);font-size:12.5px}
.tx:last-child{border-bottom:0}
.tx .k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:5px;background:var(--s2);color:var(--mu);flex:none}
.tx .k.topup{color:var(--ok)}
.tx .k.usage{color:var(--wa)}
.tx .w{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mu)}
.tx .d{color:#5f5f68;font-size:11px;flex:none}
.tx b{flex:none;font-variant-numeric:tabular-nums;font-weight:600}
.tx b.up{color:var(--ok)}
.tx b.dn{color:var(--tx)}
.tx.pending{opacity:.9}
.sheet .back{position:absolute;top:11px;left:13px;color:var(--mu);font-size:22px;line-height:1;padding:0 7px 3px;border-radius:7px;z-index:2}
.sheet .back:hover{background:var(--s2);color:var(--tx)}
/* Auth popup: the "Back to sign in" link shares the .back class with the arrow button above,
   so it was being pulled out of the layout and enlarged. Restore it as a normal small text link,
   and give the code / reset views the spacing the tabs give sign-in. */
.sheet .forgot-link.back{position:static;top:auto;left:auto;z-index:auto;align-self:flex-start;font-size:12px;line-height:1.4;padding:4px 0;margin-top:4px;border-radius:0;color:var(--mu)}
.sheet .forgot-link.back:hover{background:none;color:var(--a)}
.sheet form[data-v="verify"],.sheet form[data-v="forgot"],.sheet form[data-v="reset"]{margin-top:16px}
.sheet form[data-v="verify"] .rs-row,.sheet form[data-v="reset"] .rs-row{margin-top:4px}
/* Step 2 starts below the back arrow and the close button, which float over its top corners. */
#stepPay{padding-top:26px}
#payManual{margin-top:16px}
.sheet.act .hist{border-top:0;margin-top:6px;max-height:min(60vh,460px)}
.tx .k.wa{color:var(--wa)}
.tx b.wa{color:var(--wa);font-weight:600}

/* toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:80;background:var(--s2);border:1px solid var(--ln2);border-radius:11px;padding:9px 15px;font-size:12.5px;box-shadow:0 12px 34px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* --------------------------------------------------------- google + verify */
.or{display:flex;align-items:center;gap:10px;margin:15px 0 12px;color:var(--mu);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--ln)}
.gbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:10px 14px;border-radius:10px;background:#fff;color:#1a1a1e;font-weight:600;font-size:13.5px;text-decoration:none;transition:background .15s,transform .15s}
.gbtn:hover{background:#f1f1f3}
.gbtn:active{transform:scale(.99)}
.vbar{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:65;display:flex;align-items:center;gap:12px;padding:9px 12px 9px 16px;border-radius:12px;background:#33290f;border:1px solid #56441a;color:#f0c674;font-size:12.5px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:calc(100% - 24px)}
.vbar .mini{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#f0c674}

/* payment proof */
.shot{display:flex;flex-direction:column;gap:7px}
.shotT{font-size:12px;color:var(--mu)}
.sheet .shotDrop{flex-direction:column;gap:3px;min-height:120px;padding:16px 12px;border:1.5px dashed var(--ln2);border-radius:13px;background:var(--s2);color:var(--mu);font-size:12px;text-align:center}
.sheet .shotDrop:focus-visible{outline:0;border-color:var(--a)}
.shotDrop .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ln);color:var(--tx);margin-bottom:5px;transition:background .15s,color .15s}
.shotDrop .ic svg{width:19px;height:19px}
.shotDrop:hover .ic,.shotDrop.over .ic{background:var(--a);color:#08080a}
.shotDrop b{font-size:13px;font-weight:600;color:var(--tx)}
.shotDrop small{font-size:11px;color:#5f5f68}
.proofCard{display:flex;align-items:center;gap:11px;padding:10px;background:var(--s2);border:1px solid var(--ln2);border-radius:13px}
.proofCard img{width:58px;height:58px;object-fit:cover;border-radius:9px;border:1px solid var(--ln);background:#000;flex:none}
.proofCard .pi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.proofCard .pi b{font-size:12.5px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proofCard .pi small{font-size:11px;color:var(--mu)}
.proofCard .mini{flex:none;padding:6px 12px;border-radius:8px;background:var(--ln);color:var(--tx);font-size:12px;transition:background .15s}
.proofCard .mini:hover{background:#2a2a30}
.shot-tag{font-style:normal;font-size:10.5px;color:var(--a);background:rgba(138,180,255,.12);padding:1px 6px;border-radius:5px;margin-left:5px}

/* ------------------------------------------------- crawlable model page */
.seo{max-width:760px;margin:0 auto;padding:38px 20px 60px}
.seo .crumbs{display:flex;flex-wrap:wrap;gap:7px;font-size:12px;color:var(--mu);margin-bottom:16px}
.seo .crumbs a{color:var(--a);text-decoration:none}
.seo .crumbs a:hover{text-decoration:underline}
.seo h1{font-size:clamp(24px,4vw,34px);font-weight:600;letter-spacing:-.028em;line-height:1.15;margin-bottom:5px}
.seo .seo-by{color:var(--mu);font-size:13.5px;margin-bottom:22px}
.seo .seo-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:9px;margin:0 0 24px}
.seo .seo-facts div{background:var(--s1);border:1px solid var(--ln);border-radius:11px;padding:10px 12px}
.seo .seo-facts dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mu);margin-bottom:3px}
.seo .seo-facts dd{margin:0;font-size:13.5px;font-weight:600;word-break:break-word}
.seo .seo-lede{font-size:15.5px;line-height:1.6;color:#d6d6de;margin:0 0 24px}
.seo h2{font-size:16px;font-weight:600;margin:30px 0 12px;letter-spacing:-.01em}
.seo .seo-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.seo .seo-caps h3{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mu);margin-bottom:5px}
.seo .seo-caps ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.seo .seo-caps li{background:var(--s1);border:1px solid var(--ln);border-radius:7px;padding:3px 8px;font-size:11.5px}
.seo .seo-cta{margin:30px 0;padding:20px;background:linear-gradient(135deg,rgba(123,92,255,.14),rgba(43,212,255,.08));border:1px solid var(--ln2);border-radius:15px;text-align:center}
.seo .seo-cta .go{display:inline-block;width:auto;margin:0 0 10px;padding:11px 22px;border-radius:10px;background:var(--tx);color:#08080a;font-weight:600;font-size:14px}
.seo .seo-cta p{color:var(--mu);font-size:12.5px;margin:0}
.seo .seo-cta strong{color:var(--ok);font-variant-numeric:tabular-nums}
.seo .seo-more{color:var(--mu);font-size:13px}
.seo .seo-more a{color:var(--a)}
.seo>ul{padding-left:18px;color:var(--mu);font-size:13px;line-height:1.8}
.seo>ul a{color:var(--tx)}

/* --------------------------------------------------------- legal documents */
.doc{max-width:720px;width:100%;margin:0 auto;padding:44px 20px 70px;flex:1 1 0;min-height:0;overflow-y:auto}
.doc h1{font-size:clamp(24px,4vw,32px);font-weight:600;letter-spacing:-.028em;margin-bottom:6px}
.doc .doc-meta{color:var(--mu);font-size:12.5px;margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--ln)}
.doc .prose{font-size:14.5px;line-height:1.68;color:#cfcfd8}
.doc .prose h2{font-size:18px;font-weight:600;margin:32px 0 10px;color:var(--tx);letter-spacing:-.015em}
.doc .prose h3{font-size:15.5px;font-weight:600;margin:24px 0 8px;color:var(--tx)}
.doc .prose p{margin:0 0 14px}
.doc .prose ul,.doc .prose ol{margin:0 0 16px;padding-left:22px}
.doc .prose li{margin-bottom:6px}
.doc .prose a{color:var(--a)}
.doc .prose strong{color:var(--tx);font-weight:600}
.doc .prose pre{background:var(--s1);border:1px solid var(--ln);border-radius:11px;padding:14px 16px;overflow:auto;font-size:12.5px;margin:0 0 16px}
.doc .prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.doc-foot{text-align:center;margin-top:34px}
.doc-foot a{color:var(--mu);font-size:12.5px;text-decoration:none}
.doc-foot a:hover{color:var(--tx)}
/* ------------------------------------------------------------- batch */
.rnd.batch{font-size:19px;line-height:1;letter-spacing:-2px;padding-bottom:3px}
.btns{display:flex;gap:7px;margin:14px 0 12px}
.btns .go.sec{width:auto;margin:0;flex:1;text-align:center}
.drop{display:flex;align-items:center;justify-content:center;min-height:56px;border:1px dashed var(--ln2);border-radius:12px;background:var(--s2);cursor:pointer;transition:border-color .15s,background .15s;font-size:12.5px;color:var(--mu);text-align:center;padding:8px}
.drop:hover,.drop.over{border-color:var(--a);background:#191a20;color:var(--tx)}
.sheet .paste{margin-top:11px}
.sheet .paste textarea{background:var(--s2);border:1px solid var(--ln);border-radius:9px;padding:8px 11px;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical;width:100%;color:var(--tx);outline:0}
.sheet .paste textarea:focus{border-color:var(--a)}
.btInfo{margin-top:14px}
#batchInfo.empty{margin-top:14px;padding:16px 14px;border:1px solid var(--ln);border-radius:11px;background:var(--s1);color:var(--mu);font-size:12.5px;line-height:1.5;text-align:center}
.btSum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 10px}
.btSum div{background:var(--s2);border:1px solid var(--ln);border-radius:11px;padding:10px 11px}
.btSum small{display:block;color:var(--mu);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.btSum b{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.btPrev{margin-top:10px}
.btPrev summary{cursor:pointer;font-size:12px;color:var(--mu);padding:5px 0}
.btPrev table{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:7px;table-layout:fixed}
.btPrev table{display:block;max-height:min(24vh,190px);overflow-y:auto;overscroll-behavior:contain}
.btPrev thead{position:sticky;top:0;background:var(--s1);z-index:1}
.btPrev th{text-align:left;color:var(--mu);font-weight:500;padding:5px 7px;border-bottom:1px solid var(--ln);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.btPrev td{padding:5px 7px;border-bottom:1px solid var(--ln);color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.btPrev .num{text-align:right;color:var(--tx);font-variant-numeric:tabular-nums}

/* a card waiting its turn */
.qmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:600;color:var(--mu);font-variant-numeric:tabular-nums}
.qmark small{font-size:12px;font-weight:400;opacity:.7}
.tile.queued .media{background:repeating-linear-gradient(135deg,#111116,#111116 9px,#15151b 9px,#15151b 18px)}
.tile.queued{border-style:dashed}

/* the progress strip */
#batchBar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:75;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 14px;border-radius:12px;background:var(--s2);border:1px solid var(--ln2);font-size:12.5px;box-shadow:0 12px 34px rgba(0,0,0,.55);min-width:250px}
.bbFill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(123,92,255,.35),rgba(43,212,255,.3));border-radius:12px;transition:width .3s}
#batchBar span{position:relative;font-variant-numeric:tabular-nums}
#batchBar button{position:relative;padding:4px 10px;border-radius:7px;background:var(--s1);border:1px solid var(--ln);color:var(--mu);font-size:11.5px}
#batchBar button:hover{color:var(--tx)}

@media(max-width:640px){:root{--tileh:252px}.btSum{grid-template-columns:1fr}}

/* ------------------------------------------------------- batch validation */
.btErr{margin:12px 0;padding:11px 13px;border-radius:11px;background:#3a1d1c;border:1px solid #5a2e2b}
.btErr b{color:#ffb3ae;font-size:12.5px}
.btErr ul{list-style:none;padding:0;margin:7px 0 0;display:flex;flex-direction:column;gap:4px;max-height:min(22vh,150px);overflow-y:auto;overscroll-behavior:contain}
.btErr li{color:#e8a9a4;font-size:11.5px;line-height:1.4;padding-left:11px;position:relative}
.btErr li::before{content:"";position:absolute;left:0;top:6px;width:4px;height:4px;border-radius:50%;background:#e8a9a4}
.btErr p{margin:8px 0 0;color:var(--mu);font-size:11.5px}
.btPrev tr.bad td{color:#e8a9a4}
.btPrev tr.bad td:first-child{color:#ff8a80;font-weight:600}
.btPrev tr.bad .num{color:#e8a9a4;font-size:11px}

/* ---------------------------------------------------- thin themed scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--ln2) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ln2);border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#45454e;background-clip:content-box}
::-webkit-scrollbar-thumb:active{background:#55555f;background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
/* header link to the gallery */
.nl{display:flex;align-items:center;padding:6px 11px;border-radius:9px;font-size:13px;color:var(--mu);text-decoration:none;white-space:nowrap;flex:none;transition:background .15s,color .15s}
.nl:hover,.nl.on{background:var(--s2);color:var(--tx)}
.nl.cta{background:var(--s1);border:1px solid var(--ln);color:var(--tx)}
.nl.cta:hover{background:var(--s2);border-color:var(--ln2)}
@media(max-width:640px){body[data-view=studio] .nl{display:none}}

/* gallery page */
.gal{flex:1 1 0;min-height:0;width:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.gal-in{max-width:var(--w);margin:0 auto;padding:22px 14px 48px}
.gal h1{font-size:clamp(24px,4vw,34px);font-weight:600;letter-spacing:-.028em;line-height:1.15;margin-bottom:6px}
.gal-lede{color:var(--mu);max-width:62ch;margin-bottom:18px;font-size:14.5px;line-height:1.55}
.gal-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.gbtn{padding:6px 14px;border-radius:9px;border:1px solid var(--ln);font-size:13px;transition:background .15s,border-color .15s}
.gbtn:disabled{opacity:.6;cursor:default}
.gg{columns:4 210px;gap:9px;orphans:1;widows:1}
.gt{position:relative;display:block;width:100%;padding:0;border-radius:var(--r);overflow:hidden;background:var(--s1);border:1px solid var(--ln);break-inside:avoid;margin-bottom:9px}
.gt img{display:block;width:100%;height:auto;transition:transform .35s}
.gt:hover img{transform:scale(1.04)}
.gt:hover{border-color:var(--ln2)}
.gt .gp{position:absolute;right:9px;bottom:9px;width:30px;height:30px;border-radius:50%;background:rgba(10,10,11,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gt .gp::after{content:"";position:absolute;left:11.5px;top:8.5px;border-style:solid;border-width:6.5px 0 6.5px 10px;border-color:transparent transparent transparent #ececef}
.gt .gml{position:absolute;bottom:0;left:0;right:0;padding:20px 8px 7px;background:linear-gradient(to top,rgba(6,6,8,.82) 0%,transparent 100%);font-size:11px;color:rgba(236,236,239,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;line-height:1;pointer-events:none}
.gt:hover .gml{color:#ececef}
.gal-empty{color:var(--mu);padding:40px 0;text-align:center}
.gal-more{display:flex;justify-content:center;margin-top:18px}
.gal .foot{margin-top:34px}
@media(max-width:640px){.gal-in{padding:16px 12px 40px}.gg{columns:2 150px}}

/* gallery viewer */
.glb{position:fixed;inset:0;z-index:100;background:rgba(6,6,8,.94);display:flex;align-items:center;justify-content:center;padding:56px 64px 60px}
.glb[hidden]{display:none}
.glb-stage{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0}
.glb-stage img,.glb-stage video{max-width:100%;max-height:100%;border-radius:8px;object-fit:contain;background:#000}
.glb-stage img.soft{opacity:.85}
.glb-err{color:var(--mu)}
.glb-x{position:absolute;top:12px;right:14px;width:38px;height:38px;border-radius:50%;font-size:26px;line-height:1;color:var(--tx);background:rgba(28,28,32,.7)}
.glb-n{position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:50%;font-size:28px;line-height:1;color:var(--tx);background:rgba(28,28,32,.7)}
.glb-n.prev{left:12px}
.glb-n.next{right:12px}
.glb-x:hover,.glb-n:hover{background:rgba(51,51,58,.9)}
.glb-meta{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:var(--mu);font-size:12px;padding:0 70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){
  .glb{padding:54px 8px 56px}
  .glb-n{width:34px;height:34px;margin-top:-17px;font-size:24px}
  .glb-n.prev{left:6px}
  .glb-n.next{right:6px}
}