/* Kumo — one input box, everything else out of the way. Porcelain ground, ink, one vermilion action. */
:root{
  --bg:#eef0f2; --surface:#ffffff; --sunk:#f5f6f8; --ink:#14161a; --muted:#5b616b; --line:#dadde2; --accent:#ff5a36; --accent-ink:#ffffff; --focus:#2f6bff; --bad:#c2321f; --ok:#1f8a55;
  --display:"Unbounded",system-ui,sans-serif; --body:"DM Sans",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#111317;--surface:#1a1d22;--sunk:#15181c;--ink:#eceef1;--muted:#9aa1ab;--line:#2b3037;--accent:#ff7350;--accent-ink:#1a0d08;--focus:#7aa2ff;--bad:#ff7b66;--ok:#4fc787;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#111317;--surface:#1a1d22;--sunk:#15181c;--ink:#eceef1;--muted:#9aa1ab;--line:#2b3037;--accent:#ff7350;--accent-ink:#1a0d08;--focus:#7aa2ff;--bad:#ff7b66;--ok:#4fc787;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;display:block}
button,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.top-in{display:flex;align-items:center;gap:14px;height:60px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font:700 19px var(--display);letter-spacing:-.02em;margin-right:auto}
.logo svg{width:30px;height:30px}
.quota{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.quota i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.quota.low i{background:var(--accent)}
.quota.out i{background:var(--bad)}
.lang{background:none;border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-weight:700;font-size:13px;cursor:pointer}
.lang:hover{border-color:var(--ink)}

/* hero + the one box */
.hero{padding-block:clamp(16px,3.5vw,40px) 12px;display:grid;justify-items:center;text-align:center}
.hero h1{font:700 clamp(26px,4.4vw,44px)/1.05 var(--display);letter-spacing:-.035em;margin:0 0 16px;text-wrap:balance}
.bar{position:relative;width:100%;max-width:760px;text-align:left}
.bar-box{background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:8px;box-shadow:0 10px 30px rgba(20,22,26,.06);transition:border-color .15s,box-shadow .15s}
.bar-box:focus-within{border-color:var(--ink);box-shadow:0 12px 34px rgba(20,22,26,.1)}
.bar-box.drag{border-color:var(--accent);border-style:dashed}
.bar-row{display:flex;align-items:flex-end;gap:4px}
.bar textarea{flex:1;min-width:0;border:0;outline:0;background:none;resize:none;font-size:18px;line-height:1.5;padding:9px 6px;max-height:180px;overflow-y:auto}
.bar textarea::placeholder{color:var(--muted);opacity:.85}
.icon-btn{flex:none;width:44px;height:44px;border-radius:14px;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.icon-btn svg{width:22px;height:22px;fill:currentColor}
.icon-btn:hover{background:var(--sunk);color:var(--ink)}
.icon-btn.on{color:var(--accent)}
.icon-btn.spin svg{animation:spin .5s ease-out}
@keyframes spin{to{transform:rotate(360deg)}}
.go{flex:none;height:44px;padding:0 22px;border-radius:14px;border:0;background:var(--accent);color:var(--accent-ink);font:700 15px var(--display);letter-spacing:-.01em;cursor:pointer;transition:filter .15s,transform .1s;white-space:nowrap}
.go:hover{filter:brightness(1.05)}
.go:active{transform:scale(.98)}
.go:disabled{opacity:.55;cursor:not-allowed}

/* suggestions dropdown */
.sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:15;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 18px 40px rgba(20,22,26,.14);display:grid;gap:2px}
.sugg-head{display:flex;align-items:center;gap:8px;padding:4px 10px 6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.sugg-head::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.sugg-head .link-btn{margin-left:auto}
.idea{display:flex;gap:12px;width:100%;text-align:left;background:none;border:0;border-radius:12px;padding:10px;font-size:15px;line-height:1.45;cursor:pointer;color:var(--ink)}
.idea svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--muted)}
.idea:hover,.idea[aria-selected="true"]{background:var(--sunk)}
.idea.skel{height:42px;margin:2px 0;cursor:default;background:linear-gradient(110deg,var(--surface) 30%,var(--sunk) 50%,var(--surface) 70%);background-size:250% 100%;animation:sh 1.4s linear infinite}
.link-btn{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:13px;padding:0}
.link-btn:hover{color:var(--ink)}

/* two small option buttons */
.opts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.pick{position:relative}
.pill{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:14px;cursor:pointer}
.pill:hover,.pill[aria-expanded="true"]{border-color:var(--ink);background:var(--surface)}
.pill .k{color:var(--muted)}
.pill i{font-style:normal;color:var(--muted);font-size:11px}
.pop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:16;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:0 18px 40px rgba(20,22,26,.16);text-align:left}
.styles{display:grid;grid-template-columns:repeat(4,96px);gap:8px}
.style{position:relative;border:2px solid transparent;border-radius:10px;padding:0;background:var(--sunk);cursor:pointer;overflow:hidden;aspect-ratio:1;max-width:100%}
.style img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.style span{position:absolute;inset:auto 0 0 0;padding:14px 6px 5px;font-size:11.5px;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.72));line-height:1.15;text-align:left}
.style.plain span{position:static;background:none;color:var(--muted);display:grid;place-items:center;height:100%;text-align:center}
.style em{position:absolute;top:5px;left:5px;font:700 9.5px var(--mono);font-style:normal;letter-spacing:.04em;background:var(--accent);color:var(--accent-ink);padding:2px 6px;border-radius:99px}
.style[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.uses{display:grid;gap:2px;min-width:260px}
.use{display:flex;align-items:center;gap:12px;border:0;background:none;border-radius:10px;padding:9px 12px;cursor:pointer;font-size:14.5px;text-align:left}
.use:hover{background:var(--sunk)}
.use .sh{width:22px;display:grid;place-items:center}
.use .sh i{display:block;border:2px solid currentColor;border-radius:3px;opacity:.6}
.use .sh i.round{border-radius:50%}
.use-n{display:grid;gap:1px}
.use-n small{font-size:12px;color:var(--muted);font-weight:400}
.use > svg{margin-left:auto;width:16px;height:16px;color:var(--accent)}
.use[aria-checked="true"]{font-weight:700}
.use[aria-checked="true"] .sh i{opacity:1;background:var(--accent);border-color:var(--accent)}

.err{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin:14px auto 0;padding:10px 16px;border-radius:12px;background:color-mix(in srgb,var(--bad) 12%,var(--surface));color:var(--bad);font-size:14px;max-width:760px}
.err .link-btn{color:var(--bad);font-weight:700;font-size:14px}

/* sections */
.head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:16px}
.head-btn{margin-left:auto;align-self:center;background:var(--ink);color:var(--bg);border:0;border-radius:99px;padding:7px 14px;font-weight:700;font-size:13px;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.head h2,.faq h2{font:700 clamp(19px,2.4vw,24px)/1.15 var(--display);letter-spacing:-.025em;margin:0}
.sub{color:var(--muted);font-size:14px}
.feed-wrap{padding-block:12px 28px}
.feed{columns:3 240px;column-gap:12px}
.card{break-inside:avoid;margin:0 0 12px;position:relative;border-radius:14px;overflow:hidden;background:var(--sunk)}
.card.round{background:none}
.card.round > button img{border-radius:50%}
.card > button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.card img{width:100%;height:auto;animation:reveal .6s ease-out}
@keyframes reveal{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:none}}
.card .tools{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .2s}
.card:hover .tools,.card:focus-within .tools{opacity:1}
@media (hover:none){.card .tools{opacity:1}}
.tb{width:36px;height:36px;border-radius:10px;border:0;background:rgba(10,12,16,.6);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);text-decoration:none}
.tb svg{width:17px;height:17px}
.tb:hover{background:rgba(10,12,16,.82)}
.card.loading{display:flex;flex-direction:column;justify-content:flex-end;padding:14px}
.card.loading::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,var(--sunk) 20%,color-mix(in srgb,var(--accent) 20%,var(--sunk)) 45%,var(--sunk) 70%);background-size:250% 100%;animation:sh 1.6s linear infinite}
.card.loading span{position:relative;font-size:14px;font-weight:700}
.card.loading small{position:relative;font:500 12px var(--mono);color:var(--muted)}
@keyframes sh{to{background-position:-150% 0}}

.ideas{padding-block:28px 8px}
.masonry{columns:4 200px;column-gap:12px}
.ex{break-inside:avoid;margin:0 0 12px;position:relative;border-radius:14px;overflow:hidden;cursor:pointer;display:block;width:100%;padding:0;border:0;background:var(--sunk);text-align:left}
.ex img{width:100%;height:auto;transition:transform .4s}
.ex:hover img{transform:scale(1.04)}
.ex .cap{position:absolute;inset:auto 0 0 0;padding:30px 12px 11px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font-size:13px;line-height:1.35;opacity:0;transform:translateY(6px);transition:.25s}
.ex .tag{position:absolute;top:9px;left:9px;background:rgba(0,0,0,.5);color:#fff;font:500 11px var(--mono);padding:3px 8px;border-radius:99px;backdrop-filter:blur(4px)}
.ex:hover .cap,.ex:focus-visible .cap{opacity:1;transform:none}
@media (hover:none){.ex .cap{opacity:1;transform:none}}

.faq{padding-block:36px 8px;max-width:760px}
.qa{display:grid;margin-top:10px}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font:500 20px var(--mono);color:var(--muted);line-height:1}
.qa details[open] summary::after{content:"–"}
.qa p{margin:0 0 16px;color:var(--muted)}

.foot{margin-top:48px;border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;padding-block:22px;color:var(--muted);font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot a{color:var(--muted)}

/* lightbox */
.lightbox{border:0;padding:0;background:transparent;max-width:min(1100px,calc(100vw - 24px));width:100%;color:var(--ink)}
.lightbox::backdrop{background:rgba(8,10,14,.8);backdrop-filter:blur(4px)}
.lb-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr);background:var(--surface);border-radius:18px;overflow:hidden;max-height:calc(calc(100vh - var(--kumo-bar, 0px)) - 48px)}
.lb-img{background:#0d0f12;display:grid;place-items:center;min-height:0}
.lb-img img{width:100%;height:100%;max-height:calc(calc(100vh - var(--kumo-bar, 0px)) - 48px);object-fit:contain}
.lb-img.round img{border-radius:50%;width:auto;max-width:90%;max-height:80%;aspect-ratio:1;object-fit:cover}
.lb-side{padding:24px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:auto}
.lb-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:0;background:var(--sunk);font-size:20px;cursor:pointer}
.lb-prompt{margin:0;padding-right:36px;font-size:16px;line-height:1.55;flex:1}
.lb-meta{font:500 12px var(--mono);color:var(--muted);display:flex;flex-wrap:wrap;gap:6px}
.lb-meta span{background:var(--sunk);padding:3px 9px;border-radius:99px}
.lb-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.act{display:inline-flex;align-items:center;justify-content:center;background:var(--sunk);border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-size:14px;font-weight:500;cursor:pointer;color:var(--ink);text-decoration:none}
.act:hover{border-color:var(--ink)}
.act.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.act.danger{color:var(--bad);background:none}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:12px;font-size:14px;z-index:60;max-width:calc(100vw - 32px)}

@media (max-width:640px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .bar-box{border-radius:20px}
  .bar-row{flex-wrap:wrap}
  .bar textarea{flex-basis:100%;order:-1;font-size:17px;padding:8px 8px 4px}
  #randomBtn{margin-right:auto}
  .go{flex:1;max-width:200px}
  .styles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pop{position:fixed;left:16px;right:16px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none;max-height:72vh;overflow:auto}
  .uses{min-width:0}
  .feed,.masonry{columns:2 140px;column-gap:8px}
  .card,.ex{margin-bottom:8px}
  .lb-in{grid-template-columns:1fr}
  .lb-img img{max-height:58vh}
}

/* gallery chips */
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:none;border-radius:99px;padding:6px 14px;font-size:13.5px;cursor:pointer;color:var(--ink)}
.chip:hover{border-color:var(--ink)}
.chip[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:700}

/* how it works */
.how h2{font:700 clamp(19px,2.4vw,24px)/1.15 var(--display);letter-spacing:-.025em;margin:0 0 16px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.steps li{display:grid;gap:6px;padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.steps em{font:700 22px var(--display);font-style:normal;color:var(--accent)}
.steps b{font-size:15.5px}
.steps span{color:var(--muted);font-size:14px;line-height:1.5}

/* video maker */
.vm{border:0;padding:0;background:transparent;width:100%;max-width:min(1040px,calc(100vw - 24px));color:var(--ink)}
.vm::backdrop{background:rgba(8,10,14,.82);backdrop-filter:blur(4px)}
.vm-in{background:var(--surface);border-radius:20px;overflow:hidden;max-height:calc(calc(100vh - var(--kumo-bar, 0px)) - 32px);display:flex;flex-direction:column}
.vm-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);position:relative}
.vm-head h2{margin:0;font:700 18px var(--display);letter-spacing:-.02em}
.vm-head .lb-x{top:50%;transform:translateY(-50%)}
.vm-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:0;overflow:auto}
.vm-stage{background:#0d0f12;display:grid;place-items:center;padding:18px;position:relative;min-height:320px}
.vm-stage canvas,.vm-stage video{max-width:100%;max-height:calc(calc(100vh - var(--kumo-bar, 0px)) - 160px);border-radius:12px;background:#16181d}
.vm-stage[data-size="tall"] canvas,.vm-stage[data-size="tall"] video{height:min(560px,calc(calc(100vh - var(--kumo-bar, 0px)) - 160px));width:auto}
.vm-stage[data-size="square"] canvas,.vm-stage[data-size="wide"] canvas{width:100%;height:auto}
.vm-prog{position:absolute;left:28px;right:28px;bottom:28px;height:30px;border-radius:99px;background:rgba(0,0,0,.6);overflow:hidden;display:grid;place-items:center}
.vm-prog i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);width:0;transition:width .2s}
.vm-prog span{position:relative;color:#fff;font:500 12.5px var(--mono)}
.vm-side{padding:18px 20px;display:flex;flex-direction:column;gap:16px;overflow:auto}
.vm-step h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:15px}
.vm-step h3 em{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:12px}
.vm-step h3 small{margin-left:auto;font:500 12px var(--mono);color:var(--muted)}
.vm-pics{max-height:236px;overflow:auto;padding-right:4px}
.vm-pics h4{margin:4px 0 6px;font-size:12px;color:var(--muted);font-weight:700}
.vp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin-bottom:8px}
.vp{position:relative;aspect-ratio:1;border:2px solid transparent;border-radius:10px;overflow:hidden;padding:0;background:var(--sunk);cursor:pointer}
.vp img{width:100%;height:100%;object-fit:cover}
.vp.on{border-color:var(--accent)}
.vp em{position:absolute;top:4px;right:4px;min-width:20px;height:20px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font:700 11px/20px var(--mono);font-style:normal;text-align:center}
.vm-row{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.vm-row > span:first-child{color:var(--muted)}
.vm-row input:not([type]){width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:inherit;background:var(--sunk);color:var(--ink)}
.vm-row.check{grid-template-columns:auto 1fr;cursor:pointer}
.vm-row.check input{width:18px;height:18px;accent-color:var(--accent)}
.vm-row.check span{color:var(--ink)!important}
.seg{display:inline-flex;background:var(--sunk);border-radius:10px;padding:3px;gap:2px;justify-self:start}
.seg button{border:0;background:none;border-radius:8px;padding:6px 12px;font-size:13.5px;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.vm-acts,.vm-done{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.vm-done{grid-template-columns:1fr 1fr}
.vm-done .act.primary{grid-column:1/-1}
.act:disabled{opacity:.5;cursor:wait}
.vm-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}

@media (max-width:760px){
  .steps{grid-template-columns:1fr;gap:8px}
  .steps li{grid-template-columns:30px minmax(0,1fr);column-gap:10px;padding:14px}
  .steps em{grid-row:1/3;font-size:20px}
  .vm-body{grid-template-columns:1fr}
  .vm-stage{padding:12px;min-height:0}
  .vm-stage[data-size="tall"] canvas,.vm-stage[data-size="tall"] video{height:min(46vh,420px)}
  .vm-in{max-height:calc(calc(100vh - var(--kumo-bar, 0px)) - 16px)}
  .vm{max-width:calc(100vw - 16px)}
}
.more{display:block;margin:6px auto 0;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:10px 22px;font-weight:700;font-size:14px;cursor:pointer;color:var(--ink)}
.more:hover{border-color:var(--ink)}

/* studio: mode tabs over one creation box */
.studio{width:100%;max-width:760px;display:grid;justify-items:center}
.tabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;max-width:100%}
.tab{display:inline-flex;align-items:center;gap:7px;border:0;background:none;border-radius:10px;padding:9px 16px;font-size:14.5px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap}
.tab svg{width:18px;height:18px}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg);font-weight:700}
.drop{margin-bottom:6px}
.drop-empty{width:100%;display:grid;justify-items:center;gap:4px;padding:22px 16px;border:1.5px dashed var(--line);border-radius:16px;background:var(--sunk);cursor:pointer;color:var(--ink);text-align:center}
.drop-empty:hover,.bar-box.drag .drop-empty{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--sunk))}
.drop-empty svg{width:28px;height:28px;color:var(--accent);margin-bottom:2px}
.drop-empty b{font-size:15.5px}
.drop-empty span{font-size:13px;color:var(--muted)}
.drop-full{display:flex;align-items:center;gap:14px;padding:6px;border-radius:14px;background:var(--sunk);text-align:left}
.drop-full img{width:76px;height:76px;object-fit:cover;border-radius:10px;flex:none}
.drop-full > div{display:grid;gap:2px;font-size:13px;color:var(--muted)}
.drop-full b{color:var(--ink);font-size:14.5px}
.drop-acts{display:flex;gap:16px;margin-top:4px}
.drop-acts .link-btn{font-size:13.5px;font-weight:700;color:var(--ink)}
.vpanel{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px;background:var(--surface);border:1.5px solid var(--line);border-radius:22px;text-align:left;box-shadow:0 10px 30px rgba(20,22,26,.06)}
.vp-thumbs{position:relative;display:flex}
.vp-thumbs img{width:46px;height:72px;object-fit:cover;border-radius:8px;border:2px solid var(--surface);box-shadow:0 4px 10px rgba(0,0,0,.15)}
.vp-thumbs img + img{margin-left:-16px}
.vp-play{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.vp-play::after{content:"";position:absolute;left:11px;top:8px;border-left:11px solid var(--accent);border-top:7px solid transparent;border-bottom:7px solid transparent}
.vp-txt{display:grid;gap:3px}
.vp-txt b{font-size:15.5px}
.vp-txt span{font-size:13.5px;color:var(--muted);line-height:1.45}
.pop-h{margin:0 2px 8px;font-size:12.5px;font-weight:700;color:var(--muted)}
.qnote{margin:12px 0 0;font-size:12.5px;color:var(--muted);text-wrap:balance}
.studio[data-mode="video"] .qnote{margin-top:14px}

/* style tiles: same cat in each style */
.style{aspect-ratio:1}
.style .tick,.sc .tick{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;gap:4px;background:var(--accent);color:var(--accent-ink);border-radius:99px;padding:3px;font-style:normal;font:700 11.5px var(--body)}
.style .tick svg,.sc .tick svg{width:12px;height:12px}
.sc .tick{padding:3px 9px 3px 6px}
.auto-tile{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;padding:10px;text-align:center;background:linear-gradient(135deg,var(--sunk),color-mix(in srgb,var(--accent) 10%,var(--sunk)))}
.auto-tile b{font:700 26px var(--display);color:var(--ink)}
.auto-tile small{font-size:11px;color:var(--muted);line-height:1.3}
.style .auto-tile small{display:none}
.style .auto-tile b{font-size:20px}
.styles-wrap,.uses-wrap,.how{padding-block:24px 6px}
.strip-wrap{position:relative}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:150px;gap:10px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin;scroll-padding-inline:2px}
.sc{position:relative;scroll-snap-align:start;border:2px solid transparent;border-radius:16px;padding:0;background:var(--sunk);overflow:hidden;cursor:pointer;aspect-ratio:1;transition:transform .15s}
.sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc:hover{transform:translateY(-2px)}
.sc > span:last-child{position:absolute;inset:auto 0 0 0;padding:26px 10px 9px;color:#fff;font-size:14px;font-weight:700;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.sc em{position:absolute;top:7px;left:7px;font:700 9.5px var(--mono);font-style:normal;background:rgba(0,0,0,.55);color:#fff;padding:2px 7px;border-radius:99px}
.sc.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.sc .auto-tile + span{color:var(--ink);background:none}
.arrow-btn{position:absolute;top:calc(50% - 26px);z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 6px 16px rgba(20,22,26,.14);display:grid;place-items:center;padding-bottom:3px}
.arrow-btn.prev{left:-14px}.arrow-btn.next{right:-14px}
.arrow-btn:disabled{opacity:0;pointer-events:none}
@media (hover:none),(max-width:640px){.arrow-btn{display:none}}

/* mockups: each size shown the way it will be used */
.mocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mock{display:grid;grid-template-rows:200px auto;padding:0;border:1.5px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;cursor:pointer;text-align:left;color:var(--ink)}
.mock:hover{border-color:var(--muted)}
.mock.on{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.mk{display:grid;place-items:center;background:var(--sunk);overflow:hidden;padding:14px}
.mk img{display:block;object-fit:cover}
.mk-cap{position:relative;display:grid;gap:2px;padding:12px 14px 14px}
.mk-cap b{font-size:15px}
.mk-cap span{font-size:13px;color:var(--muted)}
.mk-cap .tick{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:12px;font-weight:700;color:var(--accent)}
.mk-cap .tick svg{width:13px;height:13px}
.mk-prof{display:grid;justify-items:center;gap:8px;background:var(--surface);border-radius:14px;padding:14px 26px;box-shadow:0 6px 18px rgba(20,22,26,.08)}
.mk-prof img{width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line)}
.mk-lines{display:grid;justify-items:center;gap:5px}
.mk-lines b{font-size:13px}
.mk-lines i{width:70px;height:6px;border-radius:3px;background:var(--line)}
.mk-prof em{font-style:normal;font-size:11.5px;font-weight:700;background:var(--accent);color:var(--accent-ink);padding:3px 14px;border-radius:99px}
.mk-phone{position:relative;width:96px;height:172px;border-radius:18px;border:4px solid #15171b;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.22);background:#15171b}
.mk-phone img{width:100%;height:100%}
.mk-date{position:absolute;top:14px;left:0;right:0;text-align:center;color:#fff;font-size:8px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.mk-time{position:absolute;top:24px;left:0;right:0;text-align:center;color:#fff;font:700 28px/1 var(--body);letter-spacing:-.02em;text-shadow:0 2px 6px rgba(0,0,0,.35)}
.mk-home{position:absolute;bottom:6px;left:50%;width:36px;height:3px;margin-left:-18px;border-radius:2px;background:rgba(255,255,255,.85)}
.mk-note{display:grid;width:118px;background:var(--surface);border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(20,22,26,.1)}
.mk-note img{width:118px;height:132px;margin-top:0}
.mk-note b{font-size:11px;padding:6px 7px 2px;line-height:1.3}
.mk-by{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--muted);padding:2px 7px 7px}
.mk-by i{width:12px;height:12px;border-radius:50%;background:var(--accent)}
.mk-by em{margin-left:auto;font-style:normal}
.mk-post{display:grid;width:140px;background:var(--surface);border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(20,22,26,.1)}
.mk-ph{display:flex;align-items:center;gap:5px;padding:6px 8px;font-size:10px}
.mk-ph i{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#f5b041)}
.mk-post img{width:140px;height:140px}
.mk-acts{font-size:11px;padding:4px 8px 6px;color:var(--ink)}
.mk-laptop{display:grid;justify-items:center}
.mk-scr{position:relative;width:200px;height:112px;border:5px solid #15171b;border-bottom-width:7px;border-radius:8px 8px 2px 2px;overflow:hidden;background:#15171b}
.mk-scr img{width:100%;height:100%}
.mk-dock{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:3px 5px;border-radius:5px;background:rgba(255,255,255,.35);backdrop-filter:blur(4px)}
.mk-dock i{width:7px;height:7px;border-radius:2px;background:rgba(255,255,255,.9)}
.mk-base{width:232px;height:7px;border-radius:0 0 8px 8px;background:linear-gradient(#c9ccd2,#9ea3ab)}
.mk-article{display:grid;gap:5px;width:200px;background:var(--surface);border-radius:10px;padding:8px;box-shadow:0 6px 18px rgba(20,22,26,.1)}
.mk-article img{width:184px;height:123px;border-radius:6px}
.mk-article b{font-size:11px;line-height:1.3}
.mk-article i{height:5px;border-radius:3px;background:var(--line)}
.mk-article i.s{width:60%}

/* idea detail + result extras */
.lb-k{margin:0;font:500 11.5px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.exbox .lb-prompt{flex:none;font-size:17px}
.lb-acts.one{grid-template-columns:1fr}
.lb-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.card.fresh{box-shadow:0 0 0 3px var(--accent)}
.card.loading{gap:4px}
.lbar{position:relative;display:block;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ink) 10%,transparent);margin-top:6px;overflow:hidden}
.lbar u{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .3s}

/* selection bar */
.selbar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 24px);padding:8px 8px 8px 16px;border-radius:16px;background:var(--ink);color:var(--bg);box-shadow:0 14px 34px rgba(0,0,0,.28);font-size:13.5px}
.sel-txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px;min-width:0}
.sel-txt span{opacity:.6;font-size:12.5px}
.sel-txt b + span{margin-left:6px}
.sel-go{flex:none;border:0;border-radius:11px;background:var(--accent);color:var(--accent-ink);font:700 13.5px var(--body);padding:9px 14px;cursor:pointer;white-space:nowrap}
.selbar.flash{animation:selflash .6s ease-out}
@keyframes selflash{0%{transform:translateX(-50%) scale(1.06)}100%{transform:translateX(-50%)}}
body:has(dialog[open]) .selbar{display:none}

/* how-to */
.how-video{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 14px;margin-top:12px;padding:16px 18px;border-radius:16px;background:var(--surface);border:1px dashed var(--line)}
.how-video b{font-size:15px}
.how-video span{color:var(--muted);font-size:14px;line-height:1.5}
.how-video .link-btn{font-weight:700;color:var(--accent);font-size:14px;text-decoration:none;white-space:nowrap}

@media (max-width:900px){.mocks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .tab{flex-direction:column;gap:4px;padding:8px 4px;font-size:12.5px;justify-content:center}
  .vpanel{grid-template-columns:1fr;justify-items:start;gap:12px;padding:14px}
  .vpanel .go{width:100%;max-width:none}
  .drop-empty{padding:18px 12px}
  .strip{grid-auto-columns:118px;gap:8px}
  .mocks{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mock{grid-template-rows:150px auto;border-radius:14px}
  .mk{padding:8px}
  .mk-cap{padding:9px 10px 11px}
  .mk-cap b{font-size:13.5px}
  .mk-cap span{font-size:12px}
  .mk-cap .tick{position:static;margin-top:2px}
  .mk-prof{padding:10px 14px;gap:6px}.mk-prof img{width:60px;height:60px}.mk-lines i{width:50px}
  .mk-phone{width:74px;height:132px;border-radius:14px;border-width:3px}.mk-time{font-size:21px;top:20px}.mk-date{top:10px;font-size:7px}
  .mk-note{width:92px}.mk-note img{width:92px;height:96px}.mk-note b{font-size:9.5px}
  .mk-post{width:104px}.mk-post img{width:104px;height:104px}
  .mk-scr{width:138px;height:78px;border-width:4px}.mk-base{width:160px;height:6px}
  .mk-article{width:140px;padding:6px;gap:4px}.mk-article img{width:128px;height:85px}.mk-article b{font-size:9.5px}
  .how-video{grid-template-columns:1fr;padding:14px}
  .selbar{left:12px;right:12px;transform:none;max-width:none;justify-content:space-between}
  .selbar.flash{animation:none}
  .sel-txt{font-size:12.5px}
}
.studio[data-mode="photo"] .bar textarea{min-height:58px}
.studio[data-mode="photo"] .go{flex:1;max-width:none}
@media (min-width:641px){.studio[data-mode="photo"] .go{flex:none}}
.mk{padding:10px}
.mk-phone{height:166px;width:92px}
.mk-prof{padding:12px 24px}
@media (max-width:640px){
  .mk{padding:6px}
  .mk-phone{width:68px;height:122px}.mk-time{font-size:19px;top:19px}
  .mk-prof{padding:8px 12px;gap:4px}.mk-prof img{width:50px;height:50px}.mk-lines b{font-size:11px}
  .mk-note img{height:88px}
}

/* ===== studio v2: full form with a roomy description, settings under it ===== */
.bar textarea{font-size:17px;min-height:64px;padding:12px 10px 8px}
.bar-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 2px 2px;margin-top:2px;border-top:1px solid var(--line)}
.bar-foot .opts{margin:0;justify-content:flex-start;flex:1 1 auto;gap:6px}
.bar-foot .pop{left:0;transform:none}
.bar-foot .pick:last-child .pop{left:auto;right:auto}
.pill-th{width:22px;height:22px;border-radius:6px;object-fit:cover;margin:-3px 0 -3px -6px}
.count{font:500 12px var(--mono);color:var(--muted);margin-left:auto}
/* photo workspace: original and result side by side */
.pws{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:4px 4px 10px}
.pws-col{display:grid;gap:6px;align-content:start;min-width:0}
.pws-h{margin:0;font-size:12.5px;font-weight:700;color:var(--muted)}
.pws-h b{color:var(--ink)}
.pws .drop-empty{height:clamp(170px,28vh,280px);align-content:center}
.pws-img{height:clamp(170px,28vh,280px);width:100%;display:grid;place-items:center;background:var(--sunk);border-radius:14px;overflow:hidden;border:0;padding:6px;cursor:zoom-in}
.pws-img img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;display:block}
.drop-full{display:grid;gap:8px;padding:0;background:none}
.drop-full .pws-img{cursor:default}
.drop-full img{width:auto;height:auto;flex:initial}
.drop-acts{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0}
.drop-acts small{font-size:12px;color:var(--muted);flex-basis:100%}
.mini{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:5px 12px;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink)}
.mini:hover{border-color:var(--ink)}
.pws-empty{height:clamp(170px,28vh,280px);margin:0;display:grid;place-items:center;padding:18px;text-align:center;border:1.5px dashed var(--line);border-radius:14px;color:var(--muted);font-size:14px;line-height:1.55}
.pws-busy{height:clamp(170px,28vh,280px);display:grid;place-content:center;justify-items:center;gap:10px;border-radius:14px;background:var(--sunk);color:var(--muted);font-size:14px}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
.pstyles{padding:0 4px 8px;display:grid;gap:6px}
.pst-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.pst-row .style{width:72px;flex:none}
.pst-row .style span{font-size:11px;padding:12px 5px 4px}

/* my images */
.head{flex-wrap:wrap}
.head .link-btn{margin-left:auto;align-self:center}
.head .link-btn + .head-btn{margin-left:10px}

/* ===== detail viewer ===== */
.viewer{border:0;padding:0;margin:auto;width:calc(100vw - 32px);height:calc(calc(100dvh - var(--kumo-bar, 0px)) - 32px);max-width:1440px;max-height:none;background:var(--surface);color:var(--ink);border-radius:18px;overflow:hidden}
.viewer::backdrop{background:rgba(8,10,14,.82);backdrop-filter:blur(4px)}
.vw{display:grid;grid-template-rows:58px minmax(0,1fr) auto;height:100%}
.vw-top{display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);min-width:0}
.vw-back{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--ink);font:700 14px var(--body);padding:8px 10px 8px 4px;border-radius:10px;cursor:pointer}
.vw-back svg{width:20px;height:20px}
.vw-back:hover{background:var(--sunk)}
.vw-title{font:700 15px var(--display);letter-spacing:-.01em;white-space:nowrap}
.vw-pos{font:500 12.5px var(--mono);color:var(--muted)}
.vw-top .sp{flex:1}
.vw-nav{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--ink);font-size:20px;cursor:pointer}
.vw-nav:disabled{opacity:.35;cursor:default}
.vw-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,26vw,360px);min-height:0}
.vw-stage{position:relative;background:#0d0f12;min-height:0;min-width:0;display:flex}
.vw-canvas{flex:1;min-width:0;min-height:0;display:flex;overflow:auto;padding:18px 18px 70px}
.vw-canvas img{margin:auto;display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.vw-canvas.zoomed img{max-width:none;max-height:none;border-radius:0}
.vw-canvas.zoomed{cursor:grab}
.vw-stage.round .vw-canvas:not(.zoomed) img{border-radius:50%}
.vw-tools{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:4px;border-radius:12px;background:rgba(20,22,26,.86);color:#fff;backdrop-filter:blur(6px);max-width:calc(100% - 24px);overflow-x:auto}
.vw-tools button{border:0;background:none;color:#fff;padding:7px 10px;border-radius:8px;font-size:13px;white-space:nowrap;cursor:pointer}
.vw-tools button:hover,.vw-tools button[aria-pressed="true"]{background:rgba(255,255,255,.16)}
.vw-sep{width:1px;height:18px;background:rgba(255,255,255,.22);margin:0 3px;flex:none}
.vw-zl{font:500 12px var(--mono);min-width:46px;text-align:center}
.vw-fsx{display:none;position:absolute;top:14px;right:14px;z-index:3;align-items:center;gap:8px;padding:9px 14px;border:0;border-radius:10px;background:rgba(0,0,0,.7);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.vw-fsx kbd{font:600 11px var(--mono);padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.18)}
.vw-stage:fullscreen .vw-fsx,.viewer.vw-fs .vw-fsx{display:inline-flex}
.viewer.vw-fs .vw-stage{position:fixed;inset:0;z-index:5}
.vw-side{overflow:auto;padding:20px;display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--line);min-height:0}
.vw-prompt{margin:0;font-size:16px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.vw-edit{width:100%;font:inherit;font-size:15px;line-height:1.55;padding:10px 12px;border:1.5px solid var(--ink);border-radius:12px;background:var(--sunk);color:var(--ink);resize:vertical;min-height:96px}
.vw-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 16px;margin:2px 0;font-size:14px}
.vw-meta dt{color:var(--muted)} .vw-meta dd{margin:0;font-variant-numeric:tabular-nums}
.vw-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vw-acts .primary{grid-column:1/-1;gap:8px}
.vw-acts.two .primary{grid-column:auto}
.vw-acts.one{grid-template-columns:1fr}
.vw-acts .act svg{width:16px;height:16px}
.vw-src{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.vw-src img{width:52px;height:52px;object-fit:cover;border-radius:10px}
.vw-strip{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-top:1px solid var(--line)}
.vw-strip[hidden]{display:none}
.vw-strip button{flex:none;width:54px;height:54px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:var(--sunk);cursor:pointer;opacity:.75}
.vw-strip button.on{border-color:var(--accent);opacity:1}
.vw-strip button:hover{opacity:1}
.vw-strip img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== video maker: fixed-height window, list scrolls, actions stay visible ===== */
.vm{height:calc(calc(100dvh - var(--kumo-bar, 0px)) - 32px);max-height:none}
.vm-in{height:100%;max-height:none}
.vm-body{flex:1;min-height:0;overflow:hidden}
.vm-stage{min-height:0}
.vm-stage canvas,.vm-stage video{max-height:calc(calc(100dvh - var(--kumo-bar, 0px)) - 150px)}
.vm-stage[data-size="tall"] canvas,.vm-stage[data-size="tall"] video{height:min(600px,calc(calc(100dvh - var(--kumo-bar, 0px)) - 150px))}
.vm-side{min-height:0;overflow:auto;padding-bottom:0}
.vm-foot{position:sticky;bottom:0;margin-top:auto;display:grid;gap:8px;padding:12px 0 16px;background:var(--surface);border-top:1px solid var(--line)}
.vm-sel{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.vs{position:relative;width:78px}
.vs img{width:78px;height:78px;object-fit:cover;border-radius:10px;display:block;background:var(--sunk)}
.vs em{position:absolute;top:4px;left:4px;font:700 11px var(--mono);font-style:normal;background:var(--ink);color:var(--bg);border-radius:99px;padding:1px 7px}
.vs-acts{display:flex;justify-content:space-between;margin-top:4px}
.vs-acts button{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;cursor:pointer;padding:0}
.vs-acts button:disabled{opacity:.35;cursor:default}
.vs-empty{margin:0 0 6px;font-size:13.5px;color:var(--muted)}
.vm-add summary{cursor:pointer;font-weight:700;font-size:14px;padding:6px 0;list-style:none}
.vm-add summary::before{content:"＋ ";color:var(--accent)}
.vm-add summary::-webkit-details-marker{display:none}
.vm-pics{max-height:260px}

@media (max-width:760px){
  .pws{grid-template-columns:1fr 1fr;gap:8px}
  .pws .drop-empty,.pws-img,.pws-empty,.pws-busy{height:clamp(140px,36vw,200px)}
  .pws-empty{font-size:12.5px;padding:10px}
  .drop-acts small{display:none}
  .bar-foot .go{margin-left:auto}
  .count{display:none}
  .viewer{width:100vw;height:calc(100dvh - var(--kumo-bar, 0px));max-width:none;border-radius:0}
  .vw{grid-template-rows:52px minmax(0,1fr) auto}
  .vw-body{display:block;overflow:auto}
  .vw-stage{height:56dvh}
  .vw-canvas{padding:10px 10px 62px}
  .vw-side{border-left:0;overflow:visible;padding:16px}
  .vw-tools button{padding:7px 8px;font-size:12.5px}
  .vw-strip{padding:6px 10px}
  .vw-strip button{width:46px;height:46px}
  .vm{height:calc(100dvh - var(--kumo-bar, 0px));max-width:100vw;width:100vw;margin:0}
  .vm-in{border-radius:0}
  .vm-body{overflow:auto;display:block}
  .vm-stage canvas,.vm-stage video{max-height:44dvh}
  .vm-stage[data-size="tall"] canvas,.vm-stage[data-size="tall"] video{height:min(44dvh,420px)}
  .vm-side{overflow:visible}
}
.pws-img{display:flex;align-items:center;justify-content:center}
.pws .drop-empty,.pws-img,.pws-empty,.pws-busy{height:clamp(150px,24vh,260px)}
.drop-full > .drop-acts{display:flex}
.toast{top:calc(70px + env(safe-area-inset-top,0px));bottom:auto}
@media (max-width:760px){ .pws .drop-empty,.pws-img,.pws-empty,.pws-busy{height:clamp(140px,36vw,200px)} }
.drop-full > .pws-img{display:flex;gap:0}
@media (max-height:780px) and (min-width:761px){ .pws .drop-empty,.pws-img,.pws-empty,.pws-busy{height:clamp(120px,19vh,180px)} .hero h1{margin-bottom:10px} }

/* ===== landing v3: one container, an 8px scale, one card, one selected state =====
   container 1200px (24px sides, 16px on phones) · sections 64px top and bottom (48px on phones)
   heading → subtitle 8px · head → content 24px · cards: 16px radius, 1px line, no shadow, 24px padding
   controls in a row: 40px tall, 12px radius · selected: 2px accent ring + one round tick */
:root { --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --sec: 64px; --pad: 24px; --rad: 16px; --cpad: 24px; --ctl: 40px; }
.wrap { max-width: 1200px; padding-left: var(--pad); padding-right: var(--pad); }
.top-in { height: 64px; gap: var(--s2); }
.quota { font-size: 13px; }
.lang { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; }
main.wrap > section { padding-block: var(--sec); }
main.wrap > section + section { border-top: 0; }
/* alternating full-width bands so the sides are never empty */
.band { position: relative; box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); background: var(--surface); }
.band .sc, .band .mock, .band .steps li, .band .how-video, .band .ex { background: var(--bg); }
/* section heads: title, then the one-line subtitle under it; actions sit on the right */
.head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s2); row-gap: var(--s1); align-items: end; margin: 0 0 var(--s3); }
.head h2, .how .head h2, .faq .head h2 { grid-column: 1; margin: 0; font: 700 28px/1.2 var(--display); letter-spacing: -.025em; }
.head .sub { grid-column: 1; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.head-acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--s1); align-self: center; }
.head-btn { margin: 0; }
/* one control size */
.ctl { height: var(--ctl); padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 14px var(--body); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); white-space: nowrap; }
.ctl:hover:not(:disabled) { border-color: var(--ink); }
.ctl:disabled { opacity: .35; cursor: default; }
.ctl.sq { width: var(--ctl); padding: 0; font-size: 20px; }
.ctl.dark { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ctl.ghost { border-color: transparent; background: none; color: var(--muted); }
.ctl.ghost:hover { color: var(--ink); border-color: transparent; }

/* hero: mode switch and box share one width, centred in the column */
.hero { padding-block: var(--s6) var(--sec) !important; }
.hero h1 { margin: 0 0 var(--s3); }
.studio { max-width: 760px; margin: 0 auto; }
.tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin: 0 0 var(--s2); padding: 4px; gap: 4px; border-radius: var(--rad); }
.tab { justify-content: center; height: 40px; padding: 0 12px; border-radius: 12px; font-size: 14px; }
.bar, .vpanel { width: 100%; }
.bar-box { border-radius: var(--rad); border-width: 1px; padding: var(--s1); box-shadow: none; }
.bar textarea { min-height: 48px; padding: 12px 8px 8px; font-size: 17px; }
.bar-foot { gap: var(--s1); padding: var(--s1) 0 0; margin-top: 0; }
.bar-foot .opts { gap: var(--s1); }
.pill { height: var(--ctl); padding: 0 14px; border-radius: 12px; font-size: 14px; }
.pill-th { width: 24px; height: 24px; margin: 0 0 0 -6px; }
.icon-btn { width: var(--ctl); height: var(--ctl); border-radius: 12px; border: 1px solid var(--line); }
.icon-btn svg { width: 20px; height: 20px; }
.go { height: var(--ctl); padding: 0 20px; border-radius: 12px; font-size: 15px; }
.vpanel { border-radius: var(--rad); border-width: 1px; box-shadow: none; padding: var(--s2); gap: var(--s2); }
.qnote { margin: var(--s2) 0 0; font-size: 13px; text-align: center; }
.err { margin-top: var(--s2); }

/* selected: one ring, one tick, everywhere */
.sc, .mock, .style { position: relative; }
.sc.on, .mock.on, .style[aria-checked="true"] { border-color: var(--line) !important; box-shadow: none !important; }
.sc.on::after, .mock.on::after, .style[aria-checked="true"]::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: inherit; pointer-events: none; z-index: 3; }
.tick { position: absolute !important; top: var(--s1) !important; right: var(--s1) !important; left: auto !important; z-index: 4; display: grid !important; place-items: center; width: 24px; height: 24px; padding: 0 !important; border-radius: 50% !important; background: var(--accent) !important; color: var(--accent-ink) !important; }
.tick svg { width: 14px !important; height: 14px !important; }

/* style strip: the same card for every look — square picture, name underneath */
.strip { grid-auto-columns: calc((100% - 6 * var(--s2)) / 7); gap: var(--s2); padding: 0; scrollbar-width: none; scroll-snap-type: x mandatory; }
.strip::-webkit-scrollbar { display: none; }
.sc { display: grid; grid-template-rows: auto auto; aspect-ratio: auto; padding: 0; border: 1px solid var(--line); border-radius: var(--rad); background: var(--surface); overflow: hidden; text-align: left; transition: none; }
.sc:hover { transform: none; border-color: var(--muted); }
.sc-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--sunk); }
.sc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.sc-media .auto-tile { position: absolute; inset: 0; }
.sc-name { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); height: 40px; padding: 0 12px; font-size: 14px; font-weight: 700; color: var(--ink); }
.sc-name em { position: static; font: 700 10px var(--mono); font-style: normal; letter-spacing: .04em; background: var(--accent); color: var(--accent-ink); padding: 2px 6px; border-radius: 99px; }
.sc > span:last-child { position: static; padding: 0 12px; background: none; color: var(--ink); }
.sc .auto-tile small { font-size: 12px; max-width: 12em; }

/* shape mockups: every device centred in the same 224px stage at the same visual height */
.mocks { gap: var(--s2); }
.mock { grid-template-rows: 224px auto; border-width: 1px; border-radius: var(--rad); }
.mk { position: relative; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; height: 224px; }
.mk > span:first-child { flex: none; margin: 0; }
.mk-prof { padding: 16px 24px; gap: 8px; }
.mk-prof img { width: 88px; height: 88px; }
.mk-phone { width: 96px; height: 172px; }
.mk-note { width: 128px; }
.mk-note img { width: 128px; height: 132px; }
.mk-post { width: 136px; }
.mk-post img { width: 136px; height: 136px; }
.mk-scr { width: 256px; height: 144px; }
.mk-base { width: 296px; }
.mk-article { width: 232px; padding: 8px; }
.mk-article img { width: 216px; height: 144px; }
.mk-cap { padding: var(--s2) var(--cpad) var(--cpad); gap: 4px; }
.mk-cap b { font-size: 16px; }
.mk-cap span { font-size: 14px; }

/* idea gallery: justified rows — every picture keeps its real shape, each row shares one height */
.chips { flex-wrap: nowrap; gap: var(--s1); padding: 0; margin: 0 0 var(--s3); overflow-x: auto; }
.chip { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.chip[aria-selected="true"] { font-weight: 700; border-color: var(--ink); }
.masonry { columns: auto; display: flex; flex-wrap: wrap; gap: var(--s2); }
.masonry::after { content: ""; flex-grow: 100000; }
.ex { margin: 0; flex: var(--r) 1 calc(var(--r) * 240px); aspect-ratio: var(--r); border-radius: var(--rad); border: 1px solid var(--line); }
.ex img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ex .tag { top: var(--s1); left: var(--s1); }
.ex .cap { opacity: 1; transform: none; padding: 48px var(--s2) var(--s2); font-size: 14px; line-height: 1.45; background: linear-gradient(transparent, rgba(0, 0, 0, .82)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.more { display: flex; align-items: center; height: var(--ctl); margin: var(--s3) auto 0; padding: 0 24px; border-radius: 12px; border-width: 1px; }

/* how it works: three equal cards, then one wide card for the video maker */
.steps { gap: var(--s2); align-items: stretch; }
.steps li { align-content: start; gap: var(--s1); padding: var(--cpad); border-radius: var(--rad); }
.steps em { font-size: 24px; line-height: 1; }
.steps b { font-size: 16px; }
.steps span { font-size: 15px; line-height: 1.6; }
.how-video { margin-top: var(--s2); padding: var(--cpad); border-radius: var(--rad); border: 1px solid var(--line); grid-template-columns: 200px minmax(0, 1fr) auto; align-items: start; gap: var(--s1) var(--s3); }
.how-video b { font-size: 16px; line-height: 1.6; }
.how-video span { font-size: 15px; line-height: 1.6; }
.how-video .link-btn { line-height: 1.6; font-size: 15px; }

/* questions: same head as every section, reading width for the answers */
.faq { max-width: none; }
.faq .qa { max-width: 800px; margin: 0; border-top: 1px solid var(--line); }
.qa summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; column-gap: var(--s2); min-height: 64px; padding: var(--s2) 0; font-size: 16px; line-height: 1.5; }
.qa summary::after { content: "+"; width: 24px; text-align: center; font-size: 20px; }
.qa details[open] summary::after { content: "−"; }
.qa p { margin: 0; padding: 0 40px var(--s3) 0; line-height: 1.7; }
.foot { margin-top: 0; }
.foot-in { padding-block: var(--s3); }

/* my images */
.feed { columns: 3 260px; column-gap: var(--s2); }
.card { margin-bottom: var(--s2); border-radius: var(--rad); }

/* floating bar: centred on the page, one 32px height for everything, and the page leaves room for it */
.selbar { left: 0 !important; right: 0 !important; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px); transform: none !important; height: 48px; padding: 0 8px 0 8px; gap: var(--s1); border-radius: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.sel-txt { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s1); }
.sel-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); font-size: 13px; white-space: nowrap; }
.sel-chip span { opacity: .65; font-size: 13px; }
.sel-chip b { font-weight: 700; }
.sel-txt b + span { margin-left: 0; }
.sel-go { height: 32px; padding: 0 14px; border-radius: 10px; font-size: 13px; display: inline-flex; align-items: center; }
.selbar.flash { animation: selflash2 .6s ease-out; }
@keyframes selflash2 { 0% { box-shadow: 0 0 0 4px var(--accent); } 100% { box-shadow: 0 14px 34px rgba(0, 0, 0, .28); } }
body.selbar-on { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 1100px) { .strip { grid-auto-columns: calc((100% - 4 * var(--s2)) / 5); } }
@media (max-width: 900px) { .mocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  :root { --sec: 48px; --pad: 16px; --cpad: 16px; }
  .top-in { gap: var(--s1); }
  .quota { font-size: 12px; }
  .hero { padding-top: var(--s4) !important; }
  .head h2, .how .head h2, .faq .head h2 { font-size: 24px; }
  .head-acts .ctl:not(.sq) { padding: 0 12px; }
  .tab { height: 48px; flex-direction: column; gap: 2px; font-size: 12px; }
  .bar-foot .go { margin-left: auto; }
  .strip { grid-auto-columns: calc((100% - var(--s2)) / 2.4); gap: var(--s1); }
  .mocks { gap: var(--s1); }
  .mock { grid-template-rows: 168px auto; }
  .mk { height: 168px; }
  .mk > span:first-child { transform: scale(.66); }
  .mk-cap { padding: 12px var(--cpad) var(--cpad); }
  .mk-cap b { font-size: 14px; } .mk-cap span { font-size: 13px; }
  .masonry { gap: var(--s1); }
  .ex { flex-basis: calc(var(--r) * 150px); }
  .ex .cap { font-size: 13px; padding: 40px 12px 12px; }
  .steps { grid-template-columns: 1fr; gap: var(--s1); }
  .how-video { grid-template-columns: 1fr; }
  .feed { columns: 2 140px; column-gap: var(--s1); }
  .card { margin-bottom: var(--s1); }
  .selbar { left: 16px !important; right: 16px !important; width: auto; max-width: none; justify-content: space-between; }
  .sel-chip { padding: 0 8px; }
  .sel-chip span { display: none; }
  body.selbar-on { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
.ex .cap { display: block; -webkit-line-clamp: unset; overflow: visible; }
.ex .cap > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.faq .qa { max-width: none; }
.qa p { max-width: 72ch; }
@media (max-width: 640px) {
  .head { grid-template-columns: minmax(0, 1fr); }
  .head-acts { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s1); }
  .styles-wrap .head-acts { display: none; }
  .mk--desktop > span:first-child { transform: scale(.54); }
  .mk--landscape > span:first-child { transform: scale(.62); }
}
.ex .tag { max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }