/* The customer studio shares one draft; operator controls remain in /admin/. */
.home-page .unified-studio{padding-top:24px;padding-bottom:42px}
.studio-anchor{position:absolute;top:0;left:0}
.home-page .unified-studio .studio-heading h2{font-size:43px;letter-spacing:-1.6px}
.studio-tabs{display:flex;justify-content:flex-end;gap:0;margin:14px 0 12px}
.studio-tabs button{border:1px solid var(--line);background:#fff;padding:10px 20px;font-weight:700;font-size:13px;color:var(--muted)}
.studio-tabs button:first-child{border-radius:9px 0 0 9px}
.studio-tabs button:last-child{border-radius:0 9px 9px 0}
.studio-tabs button[aria-pressed=true]{color:var(--coral);background:#f2f5ff;box-shadow:inset 0 -3px var(--coral)}
.home-page .unified-studio .studio-shell{grid-template-columns:174px minmax(0,1fr) 285px;height:auto;gap:9px}
.home-page .unified-studio .studio-shell.is-making{grid-template-columns:245px minmax(0,1fr) 285px}
.home-page .unified-studio .studio-characters{padding:17px 13px}
.home-page .unified-studio .studio-characters h3{font-size:21px;margin:0 0 12px}
.home-page .unified-studio .studio-player{min-height:570px}
.home-page .unified-studio .demo-stage{min-height:360px;flex:1}
.home-page .unified-studio .stage-toolbar{height:52px;padding:12px 16px}
.home-page .unified-studio .stage-toolbar p{font-size:11px}
.home-page .unified-studio .studio-transport{height:52px;padding:9px 14px;gap:12px}
.home-page .unified-studio #demo-time,.home-page .unified-studio #demo-loop{font-size:12px}
.home-page .unified-studio .demo-character[data-framing="waist"] img{height:calc(100% - 8px);width:100%;left:0;top:4px;object-fit:contain;object-position:center bottom}
.home-page .unified-studio .demo-filmstrip{height:92px;padding:0 12px 12px;gap:6px}
.home-page .unified-studio .demo-filmstrip button{aspect-ratio:1.38}
.studio-preview-caption{text-align:center;color:#65728b;font-size:12px;line-height:1.5;padding:8px 17px;margin:0}
.home-page .unified-studio .studio-reactions{padding:18px 13px;display:flex;flex-direction:column}
.home-page .unified-studio .studio-reactions h3{font-size:24px;margin-bottom:5px}
.home-page .unified-studio .studio-reactions>p{font-size:13px;margin-bottom:14px}
.home-page .unified-studio .demo-actions{gap:8px;margin-bottom:20px}
.home-page .unified-studio .demo-action{height:113px}
.home-page .unified-studio .demo-action span{font-size:13px}
.home-page .unified-studio .studio-reactions>.button{font-size:17px;height:48px;min-height:48px}
.home-page .unified-studio .upload-zone{min-height:160px;border-color:#bdc9df;background:#f8faff;border-radius:9px}
.home-page .unified-studio .upload-zone img{height:160px;width:100%;object-fit:cover}
.home-page .unified-studio .upload-zone label>span:last-child{font-size:11px}
.home-page .unified-studio .upload-zone .button{font-size:10px;padding:6px 9px;min-height:28px;right:8px;bottom:8px}
.home-page .unified-studio .field-help{font-size:11px;line-height:1.5}
.home-page .unified-studio .field{margin-top:15px;font-size:12px}
.home-page .unified-studio .field input,.home-page .unified-studio .field textarea{font-family:inherit;border:1px solid var(--line);background:#fff;border-radius:7px;font-size:12px;padding:10px;width:100%;color:var(--ink);margin-top:6px}
.studio-control-label{font-size:13px;font-weight:750;margin:18px 0 9px}
.home-page .unified-studio .style-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px}
.home-page .unified-studio .style-option{padding:0 0 7px;overflow:hidden;gap:3px;font-size:11px;border-radius:8px;background:#fff}
.home-page .unified-studio .style-option[aria-pressed=true]{padding:0 0 6px;border-color:var(--coral);background:#f1f5ff}
.style-thumb{display:block;width:100%;height:77px;background-image:url('/release-assets/styles/previews-v3.png');background-size:800% auto;background-repeat:no-repeat}
.studio-details{margin-top:17px;border-top:1px solid var(--line);padding-top:13px}
.studio-details summary{cursor:pointer;font-size:13px;font-weight:700;line-height:1.5;list-style:none}
.studio-details summary:before{content:'＋';font-size:17px;margin-right:7px;color:var(--coral)}
.studio-details[open] summary:before{content:'−'}
.studio-details summary #selection-count{display:block;font-size:11px;font-weight:400;color:var(--muted);padding-left:24px;margin-top:3px}
.style-reference-upload{display:flex;align-items:center;flex-direction:column;gap:4px;font-size:12px;font-weight:650;background:#f5f8ff;border:1px dashed #aebddb;padding:12px;border-radius:7px;margin:13px 0;position:relative;cursor:pointer}
.style-reference-upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.style-reference-upload span{font-size:10px;color:var(--muted);font-weight:400}
.style-reference-upload:focus-within{outline:2px solid var(--coral);outline-offset:2px}
#style-reference-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:10px}
.style-reference-card{position:relative;background:#f4f7fc;border:1px solid var(--line);border-radius:6px;overflow:hidden;aspect-ratio:1}
.style-reference-card img{width:100%;height:100%;object-fit:contain}
.style-reference-card button{position:absolute;right:3px;top:3px;width:22px;height:22px;border:1px solid var(--line);border-radius:50%;padding:0;background:#fff;color:var(--ink)}
#use-custom-style{font-size:11px;min-height:32px;padding:7px 12px}
.crop-switch{display:flex;gap:5px}
.crop-switch button{border:1px solid var(--line);background:#fff;padding:8px 10px;border-radius:7px;flex:1;font-size:12px;color:var(--muted)}
.crop-switch button[aria-pressed=true]{border-color:var(--coral);background:#f0f5ff;color:var(--coral);font-weight:700}
.crop-switch button{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 6px}
.crop-badge{font-size:10px;font-weight:700;line-height:1;padding:3px 6px;border-radius:99px;background:var(--butter);color:var(--ink);white-space:nowrap}
.home-page .unified-studio .reaction-preview{display:flex;flex-wrap:wrap;gap:5px;padding:0;margin:0 0 4px}
.home-page .unified-studio .reaction-preview span{font-size:20px;width:33px;height:33px;display:grid;place-items:center;padding:0;border:1px solid var(--line);background:#fff;box-shadow:none;border-radius:7px;transform:none}
.home-page .unified-studio .action-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.home-page .unified-studio .action-option{min-height:60px;border-radius:7px;gap:4px}
.home-page .unified-studio .action-option>span:first-child{font-size:23px}
.home-page .unified-studio .action-option[aria-pressed=true]{background:#edf3ff;border-color:var(--coral)}
.home-page .unified-studio .action-option[aria-pressed=true]:after{color:var(--coral)}
.home-page .unified-studio .selection-heading{margin-top:12px}
.studio-purchase{grid-column:1/-1;border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:#fff;margin-top:4px}
.studio-purchase-row{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:auto auto auto 1fr;grid-template-areas:"title summary" "picker summary" "selection summary" "options summary";column-gap:22px;align-items:start}
.studio-purchase-title{grid-area:title;font-size:19px;letter-spacing:-.6px;margin:0 0 12px}
.studio-pack-picker{grid-area:picker}
.studio-consents{grid-area:consents;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
#studio-pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.studio-pack-option{display:grid;grid-template-columns:1fr auto;gap:6px;background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:11px 12px;text-align:left;min-width:0}
.studio-pack-option strong{grid-column:1/-1;font-size:13px}
.studio-pack-option span{font-size:11px;color:var(--muted)}
.studio-pack-option b{font-size:13px}
.studio-pack-option[aria-pressed=true]{border:2px solid var(--coral);padding:10px 11px;background:#f3f6ff}
.studio-order-summary{grid-area:summary;display:grid;grid-template-columns:1fr auto;gap:4px;align-content:start;background:#f6f8fc;border:1px solid var(--line);border-radius:10px;padding:14px 16px 12px}
.studio-order-summary>strong{font-size:14px}
.studio-order-summary>p{grid-column:1/-1;color:var(--muted);font-size:11px;margin:2px 0 10px}
.studio-order-summary .button{grid-column:1/-1;background:var(--butter);color:var(--ink);border-color:var(--butter);font-size:14px;min-height:48px;padding:12px}
.studio-order-summary .button:hover{background:#efff86;border-color:#efff86}
.studio-order-summary #checkout-note{font-size:11px;line-height:1.5;margin:5px 0 0}
.home-page .unified-studio .consent{margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--line);font-size:11px}
.studio-payment-note{font-size:11px;color:var(--muted);margin:0}
.studio-order-summary>:not(strong){grid-column:1/-1}
.studio-pay-methods{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin:8px 0 0;font-size:12px;color:var(--ink)}
.studio-pay-marks{display:inline-flex;align-items:center;gap:8px}
.studio-pay-marks img{display:block;height:16px;width:auto}
.studio-order-summary #form-error{margin:8px 0 0}
.studio-order-summary .studio-payment-note,.studio-order-summary #checkout-note{text-align:center}
.studio-order-summary .studio-payment-note{margin:2px 0 0}
.home-page .unified-studio .studio-consents .consent{margin:0 0 10px;padding:0;border:0}
.studio-consents #telegram-sharing{margin:4px 0 0}
.home-page .unified-studio .notice,.home-page .unified-studio .error{font-size:12px;padding:12px;margin:10px 0}
.home-page .unified-studio #protected-preview{z-index:2;object-fit:contain;padding:15px;background:#fff}
@media(max-width:1200px){.home-page .unified-studio .studio-shell{grid-template-columns:140px minmax(0,1fr) 255px}.home-page .unified-studio .studio-shell.is-making{grid-template-columns:215px minmax(0,1fr) 255px}.studio-purchase-row{grid-template-columns:minmax(0,1fr) 320px;column-gap:20px}.home-page .unified-studio .stage-backgrounds>span{display:none}.home-page .unified-studio #demo-time,.home-page .unified-studio #demo-loop{font-size:10px}.home-page .unified-studio .studio-transport{gap:7px;padding-inline:10px}}
@media(max-width:960px){.home-page .unified-studio .studio-shell{grid-template-columns:108px minmax(0,1fr) 205px}.home-page .unified-studio .studio-shell.is-making{grid-template-columns:190px minmax(0,1fr) 205px}.home-page .unified-studio .studio-characters,.home-page .unified-studio .studio-reactions{padding:13px 9px}.home-page .unified-studio .studio-heading h2{font-size:38px}.home-page .unified-studio .studio-reactions h3{font-size:20px}.home-page .unified-studio .demo-action{height:102px}.studio-purchase-row{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"title" "picker" "selection" "options" "summary"}.studio-order-summary{margin-top:14px}.studio-order-summary{grid-template-columns:1fr auto}.studio-order-summary .button{grid-column:1/-1}.studio-pack-option{padding:10px 8px}.studio-pack-option[aria-pressed=true]{padding:9px 7px}.style-thumb{height:65px}.home-page .unified-studio .studio-transport{flex-wrap:wrap;height:auto;min-height:52px}.home-page .unified-studio #demo-scrubber{order:4;flex-basis:100%}.home-page .unified-studio #demo-loop{margin-left:auto}}
@media(max-width:700px){.home-page .unified-studio .studio-shell,.home-page .unified-studio .studio-shell.is-making{grid-template-columns:minmax(0,1fr)}.home-page .unified-studio .studio-heading h2{font-size:35px}.studio-tabs{justify-content:stretch}.studio-tabs button{flex:1}.home-page .unified-studio .studio-characters{display:block;padding:13px}.home-page .unified-studio #studio-example-controls{display:flex;align-items:center;gap:9px}.home-page .unified-studio #studio-example-controls h3{display:none}.home-page .unified-studio .studio-player{min-height:0}.home-page .unified-studio .demo-stage{min-height:335px;height:335px;flex:none}.home-page .unified-studio .style-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.style-thumb{height:87px}.home-page .unified-studio .upload-zone{min-height:145px}.home-page .unified-studio .studio-transport{flex-wrap:nowrap;height:52px;padding:8px 12px}.home-page .unified-studio #demo-scrubber{order:0;flex-basis:auto}.home-page .unified-studio #demo-loop{margin-left:0}.home-page .unified-studio .demo-filmstrip{height:auto;min-height:58px}.home-page .unified-studio .demo-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.home-page .unified-studio .demo-action{height:110px}.home-page .unified-studio .action-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.studio-purchase{padding:17px 13px}.studio-pack-option{display:flex;flex-direction:column;gap:5px;align-items:flex-start}.studio-pack-option b{font-size:15px}.studio-pack-option strong{font-size:12px}.home-page .unified-studio .studio-reactions{padding:17px 13px}}
@media(max-width:360px){.home-page .unified-studio .studio-heading h2{font-size:29px}.home-page .unified-studio .action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.style-thumb{height:72px}.studio-pack-option span{font-size:10px}.home-page .unified-studio .demo-action{height:98px}}
.unified-studio .studio-style-preview{width:300px;height:300px;max-width:85%;background-repeat:no-repeat;border-radius:24px;background-color:#fff;display:grid;place-items:center;padding:28px}
.unified-studio .studio-style-preview[hidden]{display:none}
.unified-studio .studio-style-preview p{font-size:17px;color:#40506d;text-align:center;line-height:1.5}
@media(min-width:701px){.home-page .unified-studio .is-making .studio-player{position:static;align-self:stretch}.home-page .unified-studio .is-making .demo-stage{height:auto;min-height:420px;flex:1 0 420px}.home-page .unified-studio .is-making .studio-reactions{align-self:stretch}}
.home-page .unified-studio #demo-canvas{object-fit:contain}
.sticker-framing-row{display:flex;justify-content:space-between;align-items:center;gap:7px;font-size:11px;margin:9px 0}.sticker-framing-row select{border:1px solid var(--line);border-radius:6px;background:#fff;padding:6px;color:var(--ink);font-size:11px;max-width:100px}
.unified-studio .studio-style-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
@media(min-width:701px){.home-page .unified-studio .style-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.home-page .unified-studio .style-thumb{height:65px}.home-page .unified-studio .style-option{font-size:10px}}
/* Ukrainian labels need their full height in the compact reaction column. */
html[lang=uk] .home-page .unified-studio #reaction-help{flex-shrink:0}
html[lang=uk] .home-page .unified-studio .studio-reactions>.button{font-size:16px;gap:8px}
@media(min-width:701px) and (max-width:960px){html[lang=uk] .home-page .unified-studio #characters-title{font-size:17px}}
.home-page .unified-studio .upload-zone img{object-position:center 20%}
/* Show the animated proof in the first mobile viewport. */
@media(max-width:700px){
  .home-page .unified-studio .studio-heading h2{font-size:29px}
  .home-page .unified-studio .studio-shell:not(.is-making) .studio-player{grid-row:1}
  .home-page .unified-studio .studio-shell:not(.is-making) .demo-stage{min-height:260px;height:260px}
}
@media(prefers-color-scheme:dark){
  .home-page .header,.home-page .studio-section,.home-page .unified-studio .studio-characters,.home-page .unified-studio .studio-reactions,.home-page .unified-studio .studio-player{background:var(--paper);color:var(--ink)}
  .home-page .studio-heading p,.home-page .unified-studio #reaction-help,.home-page .unified-studio .stage-toolbar,.home-page .unified-studio .studio-preview-caption{color:var(--muted)}
  .home-page .studio-mode,.home-page .studio-mode button,.home-page .studio-tabs button{background:var(--paper);color:var(--muted);border-color:var(--line)}
  .home-page .studio-mode button[aria-pressed=true],.home-page .studio-tabs button[aria-pressed=true]{background:var(--coral);color:#fff}
  .home-page .header .button.dark{background:#eaff54;color:#10121b}
  .home-page .packs-section{background:#1c2536}
  .home-page .unified-studio .demo-action,.home-page .unified-studio .demo-character,.home-page .unified-studio .style-option{color:#10121b}
  .home-page .unified-studio .upload-zone{background:#ffffff0d;border-color:var(--line)}
  .home-page .unified-studio .field input,.home-page .unified-studio .field textarea{background:#0e1421}
  .style-reference-upload{background:#ffffff0d;border-color:var(--line)}
  .home-page .unified-studio .upload-icon{color:#8fb0ff}
}

/* Thumbnails keep their proportions even when the card is resized after painting. */
.demo-action canvas,.demo-filmstrip canvas{object-fit:contain}
/* Sticker examples sit in a chat, as they do in Telegram. */
.chat-scene{display:none}
.demo-stage[data-view=chat]{background:linear-gradient(160deg,#dbe8cf,#c9dcc0 55%,#b9d1b4)}
.demo-stage[data-view=chat][data-background=dark]{background:#0e1621}
.demo-stage[data-view=chat][data-background=transparent]{background-color:white;background-image:conic-gradient(#edf0f5 25%,transparent 0 50%,#edf0f5 0 75%,transparent 0);background-size:18px 18px}
.demo-stage[data-view=chat]:before{content:none}
.demo-stage[data-view=chat] .chat-scene{display:block;position:absolute;inset:0;pointer-events:none}
.chat-bubble{position:absolute;left:22px;bottom:calc(min(256px,100% - 96px) + 34px);max-width:62%;margin:0;padding:9px 12px 8px 13px;border-radius:16px 16px 16px 5px;background:#fff;color:#10121b;font-size:15px;line-height:1.35;box-shadow:0 1px 2px #0000001f}
.chat-bubble time{float:right;margin:5px 0 0 10px;font-size:11px;color:#8a94a3}
.chat-time{position:absolute;right:30px;bottom:26px;z-index:2;padding:2px 8px;border-radius:10px;background:#0000004d;color:#fff;font-size:11px;line-height:16px}
.demo-stage[data-view=chat][data-background=dark] .chat-bubble{background:#182533;color:#f2f5f8}
.demo-stage[data-view=chat][data-background=dark] .chat-bubble time{color:#6d8296}
.home-page .unified-studio .demo-stage[data-view=chat]>canvas,.home-page .unified-studio .demo-stage[data-view=chat]>#demo-poster{inset:auto 22px 22px auto;width:auto;height:min(256px,calc(100% - 96px));aspect-ratio:1/1;padding:0;object-fit:contain}
/* An animated sticker (release-studio.js stickerGeometry) sits where paint() would draw it in that square: its cell is
   scaled to --sticker-h of the square's side and shifted from the square's bottom-right corner by --sticker-x/-y. */
.home-page .unified-studio .demo-stage[data-view=chat] #demo-poster.is-sticker{position:absolute;inset:auto 22px 22px auto;width:auto;max-width:none;height:calc(min(256px,100% - 96px)*var(--sticker-h));aspect-ratio:var(--sticker-ratio);padding:0;object-fit:contain;object-position:50% 100%;transform:translate(var(--sticker-x),var(--sticker-y));clip-path:inset(-6px -6px var(--sticker-clip,0%) -6px)}
/* Sticker reactions crop their poster the way paint() framed a portrait preview (no atlas download). */
/* The next sticker is still on its way: the current one dims so the click visibly took. */
.home-page .unified-studio #demo-poster.is-switching{opacity:.45;transition:opacity .2s}
.home-page .unified-studio .demo-action.has-sticker-thumb{container-type:size}
.home-page .unified-studio .demo-action img.sticker-thumb{position:absolute;left:50%;top:calc((100cqh - 26px)*.02);margin:0;max-width:none;height:auto;aspect-ratio:var(--cell-w)/var(--cell-h);object-fit:contain;object-position:50% 100%;transform:translateX(-50%);width:min(96cqw,(100cqh - 26px)*.94*var(--cell-w)/var(--ref))}
.home-page .unified-studio .demo-action[data-framing=full] img.sticker-thumb{width:min(150cqw,(100cqh - 26px)*2.5*var(--cell-w)/var(--ref))}
/* A full-figure thumb is a 2.5× crop that runs past the tile; it stops at the label (--tile-label tall) so the name stays readable. */
.home-page .unified-studio .demo-action img.sticker-thumb{clip-path:inset(0 0 max(0px,calc(100% - 100cqh + var(--tile-label,26px) + (100cqh - 26px)*.02)) 0)}
#studio .demo-action{--tile-label:39px}
@media(prefers-color-scheme:dark){.studio-purchase{color-scheme:light;--ink:#10121b;--muted:#657084;--line:#dce2ec;color:var(--ink)}}
.studio-order-summary{position:sticky;top:16px}
.studio-selection,.studio-pack-options{min-width:0;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.studio-selection{grid-area:selection}
.studio-pack-options:not(:has(>:not([hidden]))){display:none}
.studio-pack-options{grid-area:options;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.home-page .unified-studio .studio-selection .studio-control-label,.home-page .unified-studio .studio-pack-options .studio-control-label{margin-top:0}
.home-page .unified-studio .studio-pack-options .field-help{margin-bottom:0}
.home-page .unified-studio .studio-selection .studio-details{margin-top:12px}
.home-page .unified-studio #studio-selection-controls .action-grid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))}
@media(max-width:700px){.studio-order-summary{position:static}.studio-pack-options{grid-template-columns:minmax(0,1fr);gap:14px}}
.studio-purchase-row{column-gap:28px}
.studio-order-summary{gap:6px;padding:20px 22px 18px;border-radius:12px}
.studio-order-summary>strong{font-size:16px}
.studio-order-summary>#summary-detail{font-size:12px;line-height:1.5;margin:0 0 12px}
.home-page .unified-studio .studio-order-summary .studio-consents{grid-area:auto;grid-column:1/-1;margin:14px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.home-page .unified-studio .studio-order-summary .studio-consents .consent{font-size:12px;line-height:1.5;margin:0 0 10px;color:var(--ink)}
.home-page .unified-studio .studio-order-summary .studio-consents .consent:last-of-type{margin-bottom:0}
.studio-order-summary .studio-consents #telegram-sharing{margin:10px 0 0;font-size:11px;line-height:1.5}
.home-page .unified-studio .studio-pack-option{align-items:baseline}
.home-page .unified-studio .studio-pack-option b{font-size:17px;letter-spacing:-.3px}
.studio-order-summary{align-items:baseline}
.studio-order-summary>#summary-price{font-size:24px;letter-spacing:-.6px}
@media(max-width:700px){.home-page .unified-studio .studio-pack-option b{font-size:16px}}

/* The character preview is being drawn: the customer's photo is "redrawn" under a scan beam
   inside a spinning colour frame, while the examples step aside (is-own). */
.home-page .unified-studio .studio-shell.is-own .studio-reactions{display:none}
@media(min-width:701px){.home-page .unified-studio .studio-shell.is-making.is-own{grid-template-columns:245px minmax(0,1fr)}}
.unified-studio .studio-generating{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;background:radial-gradient(circle at 50% 42%,#e9eeff 0,#f7f9ff 45%,#fff 75%)}
.unified-studio .studio-generating[hidden]{display:none}
.unified-studio .generating-card{position:relative;width:min(220px,52%);aspect-ratio:3/4;border-radius:24px;padding:4px;overflow:hidden;isolation:isolate;box-shadow:0 18px 50px rgba(10,74,255,.22)}
.unified-studio .generating-card::before{content:"";position:absolute;inset:-60%;z-index:-1;background:conic-gradient(from 0deg,#0a4aff,#8f6bff,#ff7ad9,#d8f36a,#0a4aff);animation:rk-gen-spin 3.2s linear infinite;will-change:transform}
.unified-studio .generating-card::after{content:"";position:absolute;inset:4px;border-radius:20px;z-index:1;background:linear-gradient(135deg,rgba(10,74,255,.28),rgba(255,122,217,.22));pointer-events:none;animation:rk-gen-tint 4s ease-in-out infinite;will-change:opacity}
.unified-studio .generating-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:20px;background:#dfe5f5;filter:blur(4px) saturate(.75);animation:rk-gen-redraw 4s ease-in-out infinite;will-change:transform}
.unified-studio .generating-card img[hidden]{display:block;visibility:hidden}
.unified-studio .generating-beam{position:absolute;left:4px;right:4px;top:0;height:34%;z-index:2;border-radius:20px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.85) 50%,transparent);animation:rk-gen-scan 2.6s cubic-bezier(.65,0,.35,1) infinite}
.unified-studio .generating-card i{position:absolute;z-index:3;width:14px;height:14px;background:#fff;opacity:0;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 4px #fff);animation:rk-gen-twinkle 2.4s ease-in-out infinite}
.unified-studio .generating-card i:nth-of-type(1){top:12%;left:14%}
.unified-studio .generating-card i:nth-of-type(2){top:22%;right:12%;animation-delay:.5s;width:10px;height:10px}
.unified-studio .generating-card i:nth-of-type(3){top:55%;left:10%;animation-delay:1s;width:9px;height:9px}
.unified-studio .generating-card i:nth-of-type(4){bottom:16%;right:16%;animation-delay:1.5s}
.unified-studio .generating-card i:nth-of-type(5){bottom:34%;left:46%;animation-delay:1.9s;width:8px;height:8px}
.unified-studio .generating-step{margin:0;font-size:17px;font-weight:700;color:#1d2a44;text-align:center;min-height:1.4em}
.unified-studio .generating-step.is-new{animation:rk-gen-step .5s ease-out}
.unified-studio .generating-bar{width:min(260px,70%);height:6px;border-radius:6px;background:#e3e8f4;overflow:hidden}
.unified-studio .generating-bar span{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(.03);background:linear-gradient(90deg,#0a4aff,#8f6bff,#ff7ad9);animation:rk-gen-progress 50s cubic-bezier(.08,.6,.2,1) forwards}
@keyframes rk-gen-spin{to{transform:rotate(1turn)}}
@keyframes rk-gen-scan{0%{transform:translateY(-100%)}100%{transform:translateY(300%)}}
@keyframes rk-gen-redraw{0%,100%{transform:scale(1.05)}50%{transform:scale(1)}}
@keyframes rk-gen-tint{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes rk-gen-twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes rk-gen-step{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes rk-gen-progress{0%{transform:scaleX(.03)}100%{transform:scaleX(.94)}}
@media(prefers-reduced-motion:reduce){.unified-studio .generating-card::before,.unified-studio .generating-beam,.unified-studio .generating-card i,.unified-studio .generating-card img,.unified-studio .generating-step.is-new{animation:none}.unified-studio .generating-card::after{animation:none}.unified-studio .generating-bar span{animation-duration:50s}}

/* Smooth, steady controls: a pressed choice gets a ring instead of a thicker border,
   so nothing inside it moves, and every press answers at once. */
.studio-tabs button,.studio-mode button,.home-page .unified-studio .style-option,.home-page .unified-studio .action-option,.home-page .unified-studio .demo-action,.home-page .unified-studio .demo-character,.studio-pack-option,.crop-switch button,.stage-backgrounds button,.demo-filmstrip button,.studio-order-preview .text-button{transition:border-color .16s,background-color .16s,box-shadow .16s,color .16s,transform .12s ease-out}
.studio-tabs button:active:not(:disabled),.studio-mode button:active:not(:disabled),.home-page .unified-studio .style-option:active:not(:disabled),.home-page .unified-studio .action-option:active:not(:disabled),.home-page .unified-studio .demo-action:active,.home-page .unified-studio .demo-character:active,.studio-pack-option:active:not(:disabled),.crop-switch button:active:not(:disabled),.demo-filmstrip button:active{transform:scale(.97)}
.home-page .unified-studio .style-option[aria-pressed=true]{padding:0 0 7px;border-width:1px;box-shadow:0 0 0 1px var(--coral)}
.home-page .unified-studio .demo-character[aria-pressed=true],.home-page .unified-studio .demo-action[aria-pressed=true]{border-width:1px;border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.home-page .unified-studio .studio-pack-option[aria-pressed=true]{border-width:1px;padding:11px 12px;box-shadow:0 0 0 1px var(--coral)}
.home-page .unified-studio .action-option[aria-pressed=true]{box-shadow:0 0 0 1px var(--coral)}
.studio-tabs button:has(+button[hidden]){border-radius:0 9px 9px 0}
.studio-tab-dot{display:none;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--coral);vertical-align:1px;animation:rk-pulse 1.4s ease-in-out infinite}
.studio-tabs .is-working .studio-tab-dot{display:inline-block}
@keyframes rk-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
/* The label of an optional field reads "Name · optional", not the hint first. */
.home-page .unified-studio .field>span:first-child{float:none;font-size:inherit;color:inherit;font-weight:inherit}
.home-page .unified-studio #protected-preview{opacity:0;transition:opacity .35s ease-out}
.home-page .unified-studio #protected-preview.is-shown{opacity:1}
/* While the preview is drawn, the pay card says so next to the button. */
.studio-order-preview{display:flex;align-items:center;gap:10px;margin:0 0 10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12px;font-weight:650;line-height:1.35;animation:rk-studio-in .25s ease-out}
.studio-order-preview[hidden]{display:none}
.order-preview-thumb{position:relative;width:40px;height:40px;flex:none;border-radius:8px;overflow:hidden;background:#eef2fb}
.order-preview-thumb:has(img[hidden]){display:none}
.studio-order-preview img{display:block;width:100%;height:100%;object-fit:cover}
/* A ready character is a full figure: the thumbnail shows its head, so it is clear who was drawn. */
.studio-order-preview[data-state=ready] img{position:absolute;left:50%;top:0;width:200%;max-width:none;height:auto;transform:translateX(-50%)}
@media(max-width:700px){.order-preview-thumb{width:56px;height:56px;border-radius:12px}}
.studio-order-preview[data-state=drawing] img{filter:blur(2px) saturate(.7)}
.order-preview-spinner{display:none;width:14px;height:14px;flex:none;border:2px solid #c9d4ee;border-top-color:var(--coral);border-radius:50%;animation:rk-spin .8s linear infinite}
.studio-order-preview[data-state=drawing] .order-preview-spinner{display:block}
.studio-order-preview #order-preview-text{flex:1;min-width:0}
.studio-order-preview .text-button{flex:none;color:var(--coral);font-size:12px;font-weight:700;white-space:nowrap}
.studio-order-preview[data-state=failed]{border-color:#f0c4b8;background:#fff6f3}
.studio-order-summary #create-button.is-working{position:relative;overflow:hidden;opacity:1;cursor:progress}
.studio-order-summary #create-button.is-working::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-100%);animation:rk-shimmer 1.6s ease-in-out infinite;will-change:transform}
@keyframes rk-shimmer{to{transform:translateX(100%)}}
@keyframes rk-spin{to{transform:rotate(1turn)}}
@keyframes rk-studio-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* A creation opens in the studio, right under its tabs, in place of the order form. */
.home-page .unified-studio.is-creation{padding-bottom:0}
.unified-studio.is-creation .demo-benefits{display:none}
.home-page .studio-creation.results-section{width:calc(100% - 120px);max-width:1320px;padding:4px 0 64px;animation:rk-studio-in .28s ease-out}
.studio-creation .section-heading{margin-bottom:18px}
.studio-creation .section-heading h2{font-size:34px;letter-spacing:-1.2px}
@media(max-width:1000px){.home-page .studio-creation.results-section{width:calc(100% - 60px)}}
@media(max-width:700px){.home-page .studio-creation.results-section{width:calc(100% - 36px);padding-bottom:40px}.studio-creation .section-heading h2{font-size:28px}}
@media(prefers-color-scheme:dark){.studio-order-preview{background:#fff;color:#10121b}}

/* ── Studio, light3 ──────────────────────────────────────────────────────────
   One white workshop: a big "Studio" title, the cobalt stage with a phone chat in
   the middle, characters or the order steps on the left and die-cut reaction tiles
   on the right. Lime marks only the choice that is on and the main action. Rules
   start with #studio so they outrank the older layers above and in release.css. */
#studio,#results{--st-card:#fff;--st-surface:#f1f1ee;--st-line:#e4e4df;--st-ink:#111;--st-muted:#6c6e74;--st-blue:#064aff;--st-blue-deep:#0030b0;--st-lime:#eaff54;--st-radius:18px;color:var(--st-ink)}
#studio .visually-hidden{position:absolute!important;clip:rect(0 0 0 0);width:1px;height:1px;margin:-1px;overflow:hidden;white-space:nowrap}
#studio .studio-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 26px}
#studio .studio-heading h2{font-family:'DM Sans',sans-serif;font-weight:1000;font-size:clamp(64px,8.6vw,128px);line-height:.84;letter-spacing:-.06em;margin:0 0 0 -4px;color:var(--st-ink)}
#studio .studio-heading p{font-size:clamp(19px,2.2vw,32px);line-height:1.15;color:var(--st-muted);margin:10px 0 0;letter-spacing:-.025em;font-weight:500}
#studio .studio-switches{display:flex;flex-direction:column-reverse;align-items:flex-end;gap:10px;flex:none}
#studio .studio-tabs{display:flex;margin:0;padding:5px;gap:0;border:1px solid var(--st-line);border-radius:999px;background:var(--st-card)}
#studio .studio-tabs button{border:0;border-radius:999px;padding:15px 30px;font:800 17px/1 'DM Sans',sans-serif;color:var(--st-ink);background:none;box-shadow:none;transition:background-color .25s,transform .12s}
#studio .studio-tabs button[aria-pressed=true]{background:var(--st-lime);color:#111;box-shadow:none}
#studio .studio-tabs button:not([aria-pressed=true]):hover{background:var(--st-surface)}
#studio .studio-mode{padding:3px;border-color:var(--st-line);background:var(--st-card)}
#studio .studio-mode button{padding:7px 13px;font-size:11px;font-weight:700;color:var(--st-muted)}
#studio .studio-mode button[aria-pressed=true]{background:var(--st-ink);color:#fff}
#studio .studio-label{font:800 12px/1.2 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--st-muted);margin:0 0 14px}

#studio .studio-shell{display:grid;grid-template-columns:268px minmax(0,1fr) 356px;grid-template-rows:clamp(600px,74vh,720px) auto auto;grid-template-areas:"left stage right" "cta cta cta" "buy buy buy";gap:16px;height:auto;align-items:stretch}
#studio .studio-shell.is-making{grid-template-columns:300px minmax(0,1fr) 356px}
#studio .studio-characters{grid-area:left}
#studio .studio-player{grid-area:stage}
#studio .studio-reactions{grid-area:right}
#studio .studio-cta{grid-area:cta}
#studio .studio-purchase{grid-area:buy}
#studio .studio-characters,#studio .studio-reactions{display:flex;flex-direction:column;background:var(--st-card);border:1px solid var(--st-line);border-radius:var(--st-radius);padding:22px 20px;min-height:0;overflow:auto;scrollbar-width:thin}
#studio .studio-player{display:flex;flex-direction:column;min-height:0;background:none;border:0;border-radius:0;overflow:visible}
/* The landing shows the whole cast: its side panels grow with their content instead of scrolling. */
body[data-page=home] #studio .studio-characters,body[data-page=home] #studio .studio-reactions{overflow:visible}
@media(min-width:1001px){body[data-page=home] #studio .studio-shell{grid-template-rows:minmax(clamp(600px,74vh,720px),auto) auto auto}}

/* Left column, examples: round characters and what the pack gives. */
#studio #studio-example-controls{display:flex;flex-direction:column;flex:1}
#studio #demo-characters{display:flex;flex-direction:column;align-items:center;gap:14px}
#studio .demo-character{width:104px;height:104px;flex:none;border-radius:50%;border:0;background:var(--st-surface);overflow:hidden;box-shadow:none;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
#studio .demo-character img,#studio .demo-character[data-framing=waist] img{position:absolute;left:50%;top:7%;width:150%;height:auto;max-width:none;transform:translateX(-50%);object-fit:contain;object-position:center top}
#studio .demo-character[data-framing=waist] img{width:120%;top:5%}
#studio .demo-character:hover{transform:scale(1.05)}
#studio .demo-character[aria-pressed=true]{border:0;background:#f6f8e6;box-shadow:0 0 0 4px #fff,0 0 0 8px var(--st-lime)}
#studio .studio-upload{align-self:center;width:104px;height:104px;min-height:0;margin:14px 0 34px;border-radius:50%;border:2px dashed #c5c6c0;background:none;position:relative;color:var(--st-ink);gap:0;transition:border-color .2s,transform .2s}
#studio .studio-upload:hover{border-color:var(--st-blue);transform:rotate(-6deg)}
#studio .studio-upload span{font-size:40px;font-weight:300}
#studio .studio-upload-label{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:15px;font-weight:700}
#studio .studio-gets{margin-top:auto;padding-top:18px;border-top:1px solid var(--st-line)}
#studio .studio-gets ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
#studio .studio-gets li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.3}
#studio .gets-icon{width:24px;height:24px;flex:none;display:grid;place-items:center;font-size:20px;line-height:1}
#studio .gets-checker{width:20px;height:20px;margin:2px;background:conic-gradient(#111 25%,#fff 0 50%,#111 0 75%,#fff 0) 0 0/10px 10px;border-radius:3px}

/* Left column, create: numbered steps, the photo and the styles. */
#studio .upload-zone{min-height:150px;border:2px dashed #cfd0ca;background:#fbfbf9;border-radius:14px;transition:border-color .2s,background-color .2s}
#studio .upload-zone:hover,#studio .upload-zone.dragging{border-color:var(--st-blue);background:#f4f7ff}
#studio .upload-zone strong{font-size:16px}
#studio .upload-icon{color:var(--st-ink)}
#studio .style-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}
#studio .style-option{border:0;background:none;padding:0;gap:6px;font-size:12px;font-weight:600;border-radius:12px;box-shadow:none}
#studio .style-option .style-thumb{border-radius:12px;background-color:var(--st-surface);height:86px;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
#studio .style-option:hover .style-thumb{transform:translateY(-2px) rotate(-1.5deg)}
#studio .style-option[aria-pressed=true]{padding:0;background:none;box-shadow:none}
#studio .style-option[aria-pressed=true] .style-thumb{box-shadow:0 0 0 3px var(--st-lime),0 0 0 4px #c9dc2e}
#studio .style-option{position:relative}
#studio .style-option[aria-pressed=true]:after{content:'✓';position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:6px;background:var(--st-lime);color:#111;font-size:12px;font-weight:900;display:grid;place-items:center}

/* The stage: a cobalt block with a phone in real proportions; the sticker sits in the chat at Telegram's size. */
#studio .stage-toolbar{display:none}
#studio .studio-player:has(.demo-stage[data-view=stage]) .stage-toolbar{display:flex;border:1px solid var(--st-line);border-bottom:0;border-radius:var(--st-radius) var(--st-radius) 0 0;background:var(--st-card)}
#studio .demo-stage{flex:1;min-height:0;height:auto;border-radius:var(--st-radius);overflow:hidden;container-type:size}
#studio .studio-player:has(.demo-stage[data-view=stage]) .demo-stage{border-radius:0}
#studio .demo-stage[data-view=chat],#studio .demo-stage[data-view=chat][data-background]{background:var(--st-blue)}
#studio .demo-stage[data-view=chat] .chat-scene{display:block}
:is(#studio,#results) .phone{color:#111;position:absolute;left:50%;top:var(--phone-top);height:var(--phone-h);width:var(--phone-w);transform:translateX(-50%);display:flex;flex-direction:column;background:#fff;border-radius:46px;padding:10px;box-shadow:16px 16px 0 var(--st-blue-deep);animation:st-phone-in .6s cubic-bezier(.2,1.2,.4,1) both}
#studio .phone>*{flex:none}
/* An iPhone screen is 393 × 852 pt: the phone takes the stage's height at that ratio, and a sent sticker is
   about half the screen wide, at the bottom right of the chat above the composer, with its time below it. */
#studio .demo-stage,#results .creation-stage{--phone-w:min(calc((100cqh - 44px)*.4613),88cqw);--phone-h:calc(var(--phone-w)/.4613);--phone-top:calc((100cqh - var(--phone-h))/2);--sq:calc(var(--phone-w)*.5);--sq-right:calc((100cqw - var(--phone-w))/2 + 20px);--sq-bottom:calc(var(--phone-top) + 66px + 38px)}
#results .creation-frame.is-working .creation-stage{--sq-bottom:calc(var(--phone-top) + 66px + 84px)}
:is(#studio,#results) .phone-status{display:flex;justify-content:space-between;align-items:center;padding:8px 22px 6px;font-size:14px;color:#111}
:is(#studio,#results) .phone-icons{display:flex;gap:4px;align-items:flex-end}
:is(#studio,#results) .phone-icons i{display:block;width:4px;background:#111;border-radius:1px}
:is(#studio,#results) .phone-icons i:nth-child(1){height:6px}:is(#studio,#results) .phone-icons i:nth-child(2){height:9px}:is(#studio,#results) .phone-icons i:nth-child(3){height:12px;width:20px;border-radius:3px}
:is(#studio,#results) .phone-header{display:flex;align-items:center;gap:10px;padding:8px 12px 10px;border-bottom:1px solid #eef0f2}
:is(#studio,#results) .phone-back{font-size:30px;line-height:.8;color:#2a7cf6;width:14px}
#studio #chat-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 12%;background:#e9ecef}
#studio #chat-avatar:not([src]){visibility:hidden}
:is(#studio,#results) .phone-who{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1}
:is(#studio,#results) .phone-who b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#studio,#results) .phone-who small{font-size:12px;color:#8a9099}
:is(#studio,#results) .phone-who small.is-typing{color:#2a7cf6}
:is(#studio,#results) .phone-more{font-size:20px;color:#2a7cf6;font-weight:900}
:is(#studio,#results) .phone-chat{flex:1;position:relative;background:#e8edf1;border-radius:0 0 4px 4px;overflow:hidden}
:is(#studio,#results) .chat-bubble{position:absolute;left:12px;top:14px;bottom:auto;max-width:78%;padding:10px 13px 9px;border-radius:16px 16px 16px 5px;background:#fff;color:#111;font-size:15px;box-shadow:0 1px 1px #0000001a;animation:st-bubble .5s .25s cubic-bezier(.2,1.3,.4,1) both}
:is(#studio,#results) .chat-time{right:12px;bottom:12px;background:#fff;color:#7a8794;box-shadow:0 1px 1px #0000001a;font-size:12px;z-index:4}
:is(#studio,#results) .phone-compose{display:flex;align-items:center;gap:8px;padding:10px 8px 8px}
:is(#studio,#results) .phone-clip{font-size:22px;color:#9aa1a9;transform:rotate(-45deg)}
:is(#studio,#results) .phone-input{flex:1;border:1px solid #e3e6ea;border-radius:999px;padding:10px 14px;font-size:14px;color:#9aa1a9}
:is(#studio,#results) .phone-send{width:38px;height:38px;border-radius:50%;background:#9aa6b2;color:#fff;display:grid;place-items:center;font-size:15px}
/* Sticker square: the area release-studio.js stickerGeometry() frames the cell in. */
#studio .demo-stage[data-view=chat]>canvas,#studio .demo-stage[data-view=chat]>picture>#demo-poster,#studio .demo-stage[data-view=chat] #demo-poster{position:absolute;inset:auto var(--sq-right) var(--sq-bottom) auto;width:var(--sq);height:var(--sq);padding:0;z-index:3}
#studio .demo-stage[data-view=chat] #demo-poster.is-sticker{inset:auto var(--sq-right) var(--sq-bottom) auto;width:auto;height:calc(var(--sq)*var(--sticker-h));animation:st-sticker-in .55s cubic-bezier(.2,1.4,.4,1)}
#studio .demo-stage[data-view=chat] #demo-poster.is-switching{opacity:.5}
#studio .studio-preview-caption{margin:10px 2px 0;padding:0;text-align:left;font-size:13px;color:var(--st-muted)}
#studio .studio-transport,#studio .demo-filmstrip{background:var(--st-card);border:1px solid var(--st-line);border-top:0}
#studio .demo-filmstrip{border-radius:0 0 var(--st-radius) var(--st-radius)}
#studio .demo-status{z-index:5}
#studio #protected-preview{z-index:4;padding:24px;background:var(--st-blue)}
#studio .studio-style-preview{z-index:4;box-shadow:12px 12px 0 var(--st-blue-deep);border-radius:28px}
#studio .studio-generating{z-index:5;background:var(--st-blue)}
#studio .studio-generating .generating-step{color:#fff}
#studio .studio-generating .generating-bar{background:#ffffff33}
#studio .studio-generating .generating-bar span{background:var(--st-lime)}

/* Right column: die-cut reaction tiles, a little crooked, like stickers on a sheet. */
#studio .reactions-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#studio .reactions-head p{margin:0;font-size:13px;color:var(--st-muted)}
#studio .studio-reactions h3{margin:0 0 14px;font-size:12px}
#studio .demo-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
#studio .demo-action{height:auto;aspect-ratio:1/.92;border:0;border-radius:16px;background:var(--st-surface);color:var(--st-ink);box-shadow:none;transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .2s;animation:st-tile-in .5s cubic-bezier(.2,1.3,.4,1) both}
#studio .demo-action:nth-child(4n+1){--tilt:-1.6deg}#studio .demo-action:nth-child(4n+2){--tilt:1.2deg}#studio .demo-action:nth-child(4n+3){--tilt:.8deg}#studio .demo-action:nth-child(4n+4){--tilt:-1deg}
#studio .demo-action{rotate:var(--tilt,0deg)}
#studio .demo-action:nth-child(2){animation-delay:.04s}#studio .demo-action:nth-child(3){animation-delay:.08s}#studio .demo-action:nth-child(4){animation-delay:.12s}#studio .demo-action:nth-child(5){animation-delay:.16s}#studio .demo-action:nth-child(6){animation-delay:.2s}#studio .demo-action:nth-child(7){animation-delay:.24s}#studio .demo-action:nth-child(8){animation-delay:.28s}
#studio .demo-action:hover{transform:translateY(-3px) scale(1.03);rotate:0deg}
#studio .demo-action[aria-pressed=true]{border:0;background:#f7f9e2;box-shadow:0 0 0 3px var(--st-lime),0 0 0 4px #c9dc2e,6px 6px 0 #0000000f;rotate:calc(var(--tilt,0deg)*1.6)}
#studio .demo-action span{background:none;font-size:14px;font-weight:600;padding:6px 4px 9px}
#studio .demo-action[aria-pressed=true] span{background:none}
#studio .demo-action img.sticker-thumb,#studio .demo-action img{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)}
#studio .demo-action .tile-check{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:7px;background:var(--st-lime);color:#111;display:grid;place-items:center;font-size:13px;font-weight:900;z-index:2;animation:st-pop .35s cubic-bezier(.2,1.6,.4,1) both}

/* The call to action under the frame. */
#studio .studio-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 4px 4px;border-top:1px solid var(--st-line);margin-top:6px}
#studio .studio-cta p{margin:0;display:flex;flex-direction:column;gap:2px}
#studio .studio-cta b{font-size:clamp(20px,2vw,28px);font-weight:900;letter-spacing:-.03em}
#studio .studio-cta .studio-help{font-size:13px;color:var(--st-muted);margin:0;text-align:left}
#studio .studio-cta .button{min-height:58px;padding:0 34px;font-size:18px;font-weight:800;border-radius:999px;background:var(--st-lime);border-color:var(--st-lime);color:#111;transition:transform .15s,box-shadow .15s}
#studio .studio-cta .button:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #111}
#studio .is-making .studio-cta{display:none}
/* A coming-soon mode is not for sale: its upload and "make your own" give way to a note. */
#studio:not([data-soon=true]) .studio-soon,#studio[data-soon=true] .studio-cta>:not(.studio-soon),#studio[data-soon=true] .studio-upload{display:none}
#studio .studio-cta .studio-soon{flex-direction:row;align-items:center;gap:10px;min-height:58px;font-size:17px;font-weight:700}
#studio .studio-cta .studio-soon .soon-badge{margin:0;font-size:11px}
#studio~.demo-benefits,#studio .demo-benefits{display:none}

@keyframes st-phone-in{from{opacity:0;transform:translateX(-50%) translateY(24px) rotate(-2deg)}to{opacity:1;transform:translateX(-50%)}}
@keyframes st-bubble{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
@keyframes st-sticker-in{from{opacity:0;scale:.82;rotate:-4deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes st-tile-in{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes st-pop{from{transform:scale(0)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){:is(#studio,#results) .phone,:is(#studio,#results) .chat-bubble,#studio .demo-stage #demo-poster.is-sticker,#studio .demo-action,#studio .tile-check{animation:none}}
#studio .demo-action span.tile-check{position:absolute;inset:8px 8px auto auto;left:auto;bottom:auto;width:22px;height:22px;padding:0;background:var(--st-lime);font-size:13px;line-height:22px;text-align:center}

/* The order bar: hairline card, pill choices, lime only on what is chosen. */
#studio .studio-purchase{border:1px solid var(--st-line);border-radius:var(--st-radius);padding:24px;background:var(--st-card);margin-top:0;animation:st-tile-in .45s cubic-bezier(.2,1.2,.4,1) both}
#studio .studio-purchase-title{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--st-muted);margin:0 0 14px}
#studio #studio-pack-grid{gap:10px}
#studio .studio-pack-option{border:1px solid var(--st-line);border-radius:14px;padding:14px 16px;background:var(--st-card);transition:border-color .2s,background-color .2s,transform .15s}
#studio .studio-pack-option:hover{border-color:#bfc0ba;transform:translateY(-1px)}
#studio .studio-pack-option strong{font-size:15px}
#studio .studio-pack-option b{font-size:18px;font-weight:900;letter-spacing:-.02em}
#studio .studio-pack-option[aria-pressed=true]{border:2px solid var(--st-ink);padding:13px 15px;background:#fbfdea;box-shadow:4px 4px 0 var(--st-lime)}
#studio .studio-selection,#studio .studio-pack-options{border-top-color:var(--st-line)}
#studio .crop-switch{gap:0;padding:4px;border:1px solid var(--st-line);border-radius:999px;background:var(--st-card)}
#studio .crop-switch button{border:0;border-radius:999px;padding:11px 14px;font-size:14px;font-weight:600;color:var(--st-ink);background:none;transition:background-color .2s}
#studio .crop-switch button[aria-pressed=true]{background:var(--st-lime);color:#111;font-weight:800}
#studio .crop-badge{background:var(--st-ink);color:#fff;border-radius:999px;padding:2px 7px;font-size:10px}
#studio .studio-order-summary{background:var(--st-surface);border:0;border-radius:var(--st-radius);padding:20px}
#studio .studio-order-summary>strong{font-size:17px}
#studio .studio-order-summary #summary-price{font-size:26px;font-weight:1000;letter-spacing:-.03em}
#studio .studio-order-summary .button{min-height:56px;border-radius:999px;font-size:16px;font-weight:800;background:var(--st-lime);border-color:var(--st-lime);color:#111;transition:transform .15s,box-shadow .15s}
#studio .studio-order-summary .button:not(:disabled):hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #111;background:var(--st-lime)}
#studio .studio-order-summary .button:disabled{opacity:.45}
#studio .studio-order-summary .consent{font-size:12px}

@media(prefers-color-scheme:dark){
  #studio,#results{--st-card:#171a23;--st-surface:#222632;--st-line:#2e3342;--st-ink:#f3f4f7;--st-muted:#9ba3b4;--st-blue-deep:#001f7a}
  #studio .studio-characters,#studio .studio-reactions,#studio .studio-purchase,#studio .studio-cta{color:var(--st-ink)}
  #studio .studio-tabs button[aria-pressed=true],#studio .crop-switch button[aria-pressed=true],#studio .studio-order-summary .button,#studio .studio-cta .button{color:#111}
  #studio .studio-mode button[aria-pressed=true]{background:var(--st-ink);color:#111}
  #studio .demo-character[aria-pressed=true]{background:#2a2f1a;box-shadow:0 0 0 4px var(--st-card),0 0 0 8px var(--st-lime)}
  #studio .demo-action[aria-pressed=true],#studio .studio-pack-option[aria-pressed=true]{background:#262b18}
  #studio .studio-pack-option[aria-pressed=true]{border-color:var(--st-lime)}
  #studio .upload-zone{background:var(--st-surface);border-color:#424858}
  #studio .studio-upload{border-color:#4a5062}
  #studio .gets-checker{background:conic-gradient(#f3f4f7 25%,#171a23 0 50%,#f3f4f7 0 75%,#171a23 0) 0 0/10px 10px}
  #studio .studio-purchase{color-scheme:dark;--ink:var(--st-ink);--muted:var(--st-muted);--line:var(--st-line)}
  #studio .studio-cta .button:hover,#studio .studio-order-summary .button:not(:disabled):hover{box-shadow:4px 4px 0 #fff}
}

@media(max-width:1200px){
  #studio .studio-shell,#studio .studio-shell.is-making{grid-template-columns:232px minmax(0,1fr) 300px}
}
@media(max-width:1000px){
  #studio .studio-shell,#studio .studio-shell.is-making{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto clamp(520px,70vh,640px) auto auto;grid-template-areas:"left left" "stage right" "cta cta" "buy buy"}
  #studio #demo-characters{flex-direction:row;justify-content:flex-start;flex-wrap:wrap}
  #studio #studio-example-controls{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:0 24px}
  #studio #studio-example-controls>.studio-label{grid-column:1/-1}
  #studio .studio-upload{margin:0 0 28px}
  #studio .studio-gets{margin:0;padding:0 0 0 24px;border-top:0;border-left:1px solid var(--st-line)}
}
@media(max-width:700px){
  #studio .studio-heading{flex-direction:column;align-items:stretch;gap:18px}
  #studio .studio-heading h2{font-size:clamp(56px,19vw,84px)}
  #studio .studio-switches{align-items:stretch}
  #studio .studio-tabs button{flex:1;padding:14px 10px;font-size:15px}
  #studio .studio-mode{align-self:flex-start}
  #studio .studio-shell,#studio .studio-shell.is-making{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 560px auto auto auto;grid-template-areas:"left" "stage" "right" "cta" "buy";gap:12px}
  #studio .studio-characters,#studio .studio-reactions{overflow:visible;padding:18px 16px}
  #studio #studio-example-controls{display:flex}
  #studio #demo-characters{flex-direction:row;flex-wrap:nowrap;gap:12px;overflow-x:auto;padding:6px 6px 10px;margin:0 -6px}
  #studio .demo-character{width:76px;height:76px}
  #studio #studio-example-controls .studio-upload{display:none}
  #studio .studio-gets{padding:14px 0 0;border-left:0;border-top:1px solid var(--st-line)}
  #studio .demo-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #studio .demo-action span{font-size:12px}
  #studio .studio-cta{flex-direction:column;align-items:stretch}
  #studio .studio-cta .button{justify-content:center}
  #studio .studio-purchase{padding:16px}
  #studio .studio-purchase-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "picker" "selection" "options" "summary"}
  #studio #studio-pack-grid{grid-template-columns:minmax(0,1fr)}
  #studio .studio-pack-options{grid-template-columns:minmax(0,1fr)}
  #studio .studio-order-summary{position:static}
}

/* ── The creation in the studio frame (release.js renderCreationFrame) ─────── */
#results .job-panel.has-frame{padding:0;border:0;background:none;box-shadow:none}
/* The panel's quiet links (refund, receipt, access, stop) share one size; each stays whole and is tall enough to tap. */
#results .job-panel>.text-button{display:inline-block;margin-right:20px;padding:6px 0;font-size:13px;text-align:left}
#results .has-frame>.job-status h3{display:none}
#results .has-frame>.job-status{margin:14px 0 0;padding:0;border:0;background:none;color:var(--st-muted);font-size:14px}
#results .has-frame>.progress{display:none}
#results .creation-frame{display:grid;grid-template-columns:268px minmax(0,1fr) 356px;grid-template-rows:clamp(600px,74vh,720px) auto;grid-template-areas:"left stage right" "bar bar bar";gap:16px;color:var(--st-ink)}
#results .creation-character,#results .creation-reactions{display:flex;flex-direction:column;min-height:0;overflow:auto;background:var(--st-card);border:1px solid var(--st-line);border-radius:var(--st-radius);padding:22px 20px;scrollbar-width:thin}
#results .creation-character{grid-area:left}
#results .creation-reactions{grid-area:right}
#results .studio-label{font:800 12px/1.2 'DM Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--st-muted);margin:0 0 14px}
#results .creation-card{margin:0;border-radius:14px;background:var(--st-surface);padding:14px 12px 16px;text-align:center;animation:st-tile-in .5s cubic-bezier(.2,1.3,.4,1) both}
#results .creation-card img{display:block;width:100%;height:clamp(220px,34vh,330px);object-fit:contain;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)}
#results .creation-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;font-size:15px}
#results .creation-steps li{display:flex;align-items:center;gap:12px;color:var(--st-muted)}
#results .creation-steps i{width:24px;height:24px;flex:none;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:900}
#results .creation-steps li.is-done{color:var(--st-ink)}
#results .creation-steps li.is-done i{background:var(--st-ink);border-color:var(--st-ink);color:var(--st-card)}
#results .creation-steps li.is-done i:after{content:'✓'}
#results .creation-steps li.is-now{color:var(--st-ink);font-weight:700}
#results .creation-steps li.is-now i{border-color:var(--st-blue);border-top-color:transparent;animation:st-spin .9s linear infinite}
#results .creation-note{margin:auto 0 0;padding-top:16px;font-size:13px;color:var(--st-muted)}
#results .creation-stage{grid-area:stage;position:relative;min-height:0;border-radius:var(--st-radius);background:var(--st-blue);overflow:hidden;container-type:size}
#results .phone-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 8%;background:#e9ecef}
#results .phone-chat{display:block}
#results .chat-time{position:absolute;padding:3px 8px;border-radius:999px}
#results .creation-progress{position:absolute;left:14px;right:14px;bottom:14px;z-index:4;display:grid;gap:6px;justify-items:center;padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 1px 2px #0000001f}
#results .creation-progress span{justify-self:stretch;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--st-lime),#d4f03a);box-shadow:inset 0 0 0 1px #0000000f;transition:width .8s cubic-bezier(.3,1,.4,1)}
#results .creation-progress{background-image:linear-gradient(#eceee8,#eceee8);background-size:calc(100% - 24px) 10px;background-position:12px 10px;background-repeat:no-repeat}
#results .creation-progress b{font-size:14px;color:#111}
#results .creation-sticker{position:absolute;z-index:3;width:var(--sq);height:var(--sq);right:var(--sq-right);bottom:var(--sq-bottom);display:grid;place-items:end center;pointer-events:none;animation:st-sticker-in .55s cubic-bezier(.2,1.4,.4,1)}
#results .creation-sticker video,#results .creation-sticker img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right bottom}
#results .creation-waiting{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:8px;padding:14px 18px;border-radius:999px;background:#fff}
#results .creation-waiting span{width:10px;height:10px;border-radius:50%;background:#9aa1a9;animation:st-dot 1.2s infinite}
#results .creation-waiting span:nth-child(2){animation-delay:.15s}#results .creation-waiting span:nth-child(3){animation-delay:.3s}
#results .reactions-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#results .reactions-head p{margin:0;font-size:13px;color:var(--st-muted)}
#results .creation-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#results .creation-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;aspect-ratio:1/.92;padding:6px 6px 0;border:0;border-radius:16px;background:var(--st-surface);color:var(--st-ink);overflow:hidden;cursor:pointer;rotate:var(--tilt,0deg);animation:st-tile-in .5s calc(var(--i)*.04s) cubic-bezier(.2,1.3,.4,1) both;transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
#results .creation-tile:nth-child(4n+1){--tilt:-1.6deg}#results .creation-tile:nth-child(4n+2){--tilt:1.2deg}#results .creation-tile:nth-child(4n+3){--tilt:.8deg}#results .creation-tile:nth-child(4n+4){--tilt:-1deg}
#results .creation-tile img,#results .creation-tile video{flex:1;min-height:0;width:100%;object-fit:contain;filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)}
#results .creation-tile:not(:disabled):hover{transform:translateY(-3px) scale(1.03);rotate:0deg}
#results .creation-tile[aria-pressed=true]{background:#f7f9e2;box-shadow:0 0 0 3px var(--st-lime),0 0 0 4px #c9dc2e,6px 6px 0 #0000000f}
#results .creation-tile-label{padding:6px 4px 9px;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#results .creation-tile.is-waiting,#results .creation-tile.is-next{cursor:default;background:none;border:2px dashed #d3d4ce;rotate:0deg}
#results .creation-tile.is-next{border:0;background:linear-gradient(100deg,var(--st-surface) 30%,#fbfbf8 50%,var(--st-surface) 70%) 0 0/250% 100%;animation:st-tile-in .5s calc(var(--i)*.04s) both,st-shimmer 1.4s linear infinite}
#results .creation-tile.is-next:before{content:'';position:absolute;left:22%;right:22%;top:14%;bottom:30%;border-radius:45% 45% 18% 18%;background:#dfe0db}
#results .creation-tile.is-next:after{content:'';position:absolute;left:0;bottom:0;height:4px;width:60%;background:var(--st-lime);animation:st-grow 2.4s ease-in-out infinite}
#results .creation-tile.is-failed{border-color:#f0b4b4}
#results .creation-tag{position:absolute;top:8px;right:8px;padding:4px 9px;border-radius:999px;background:var(--st-lime);color:#111;font:800 12px/1 'DM Sans',sans-serif;font-style:normal;animation:st-pop .4s cubic-bezier(.2,1.6,.4,1) both}
#results .creation-bar{grid-area:bar;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 4px 4px;border-top:1px solid var(--st-line);margin-top:6px}
#results .creation-bar .job-delivery-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0}
#results .creation-bar .button{min-height:54px;padding:0 28px;border-radius:999px;font-size:16px;font-weight:800;transition:transform .15s,box-shadow .15s}
#results .creation-bar .button.primary{background:#111;border-color:#111;color:var(--st-lime)}
#results .creation-bar .button.light{background:var(--st-card);border:1.5px solid var(--st-ink);color:var(--st-ink)}
#results .creation-bar .button:not(:disabled):hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--st-lime)}
#results .creation-regenerate{margin-left:auto;font-size:15px;text-decoration:underline;text-underline-offset:3px}
#results .creation-more{margin-top:24px;border:1px solid var(--st-line);border-radius:var(--st-radius);padding:0 20px;background:var(--st-card)}
#results .creation-more>summary{cursor:pointer;padding:18px 0;font-weight:800}
#results .creation-more[open]{padding-bottom:20px}
@keyframes st-spin{to{transform:rotate(1turn)}}
@keyframes st-shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
@keyframes st-grow{0%{width:8%}60%{width:72%}100%{width:8%}}
@keyframes st-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}
@media(prefers-reduced-motion:reduce){#results .creation-tile,#results .creation-card,#results .creation-sticker,#results .creation-tag,#results .creation-waiting span,#results .creation-steps li.is-now i{animation:none}#results .creation-tile.is-next{animation:none}#results .creation-tile.is-next:after{animation:none;width:40%}}
@media(prefers-color-scheme:dark){
  #results .creation-tile[aria-pressed=true]{background:#262b18}
  #results .creation-tile.is-waiting{border-color:#3a4050}
  #results .creation-tile.is-next{background:linear-gradient(100deg,var(--st-surface) 30%,#2e3442 50%,var(--st-surface) 70%) 0 0/250% 100%}
  #results .creation-tile.is-next:before{background:#30364a}
  #results .creation-bar .button.primary{background:var(--st-lime);border-color:var(--st-lime);color:#111}
  #results .creation-bar .button:not(:disabled):hover{box-shadow:4px 4px 0 #fff}
}
@media(max-width:1200px){#results .creation-frame{grid-template-columns:232px minmax(0,1fr) 300px}}
@media(max-width:1000px){#results .creation-frame{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto clamp(520px,70vh,640px) auto;grid-template-areas:"left left" "stage right" "bar bar"}#results .creation-card{display:flex;align-items:center;justify-content:center;gap:16px;text-align:left}#results .creation-card img{width:120px;height:150px}}
@media(max-width:700px){
  #results .creation-frame{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 640px auto auto;grid-template-areas:"left" "stage" "right" "bar";gap:12px}
  #results .creation-character,#results .creation-reactions{overflow:visible;padding:18px 16px}
  #results .creation-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #results .creation-tile-label{font-size:12px}
  #results .creation-bar{flex-direction:column;align-items:stretch}
  #results .creation-bar .job-delivery-actions{flex-direction:column}
  #results .creation-regenerate{margin:0 auto}
}

/* The phone's own light/dark switch (release.js applyPhoneTheme), in Telegram's night colours. */
:is(#studio,#results) .phone-theme{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;width:46px;height:24px;padding:0 5px;border:0;border-radius:999px;background:#eef1f4;box-shadow:inset 0 0 0 1px #0000000d;font:700 11px/1 system-ui,sans-serif;color:#9aa3ad;cursor:pointer;pointer-events:auto;transition:background .35s}
:is(#studio,#results) .phone-theme span{position:relative;z-index:1;width:13px;text-align:center;transition:color .35s,transform .35s}
:is(#studio,#results) .phone-theme-sun{color:#f2a316}
:is(#studio,#results) .phone-theme i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000038;transition:transform .4s cubic-bezier(.3,1.5,.5,1),background .35s}
:is(#studio,#results) .phone-theme:hover i{box-shadow:0 0 0 3px #2a7cf633,0 1px 3px #00000038}
:is(#studio,#results) .phone-theme:focus-visible{outline:2px solid #2a7cf6;outline-offset:2px}
:is(#studio,#results) .phone,:is(#studio,#results) .phone-chat,:is(#studio,#results) .chat-bubble,:is(#studio,#results) .phone-input,:is(#studio,#results) .phone-header,:is(#studio,#results) .chat-time{transition:background-color .35s,color .35s,border-color .35s}
:is(#studio,#results) .phone[data-chat=dark]{background:#17212b;color:#f5f5f5}
:is(#studio,#results) .phone[data-chat=dark] .phone-status{color:#f5f5f5}
:is(#studio,#results) .phone[data-chat=dark] .phone-icons i{background:#f5f5f5}
:is(#studio,#results) .phone[data-chat=dark] .phone-header{border-bottom-color:#0e1621}
:is(#studio,#results) .phone[data-chat=dark] .phone-back,:is(#studio,#results) .phone[data-chat=dark] .phone-who small.is-typing{color:#6ab2f2}
:is(#studio,#results) .phone[data-chat=dark] .phone-who small{color:#7d8b99}
:is(#studio,#results) .phone[data-chat=dark] .phone-chat{background:#0e1621}
:is(#studio,#results) .phone[data-chat=dark] .chat-bubble{background:#182533;color:#f5f5f5;box-shadow:none}
:is(#studio,#results) .phone[data-chat=dark] .chat-bubble time{color:#6d8296}
:is(#studio,#results) .phone[data-chat=dark] .chat-time{background:#182533;color:#7d8b99;box-shadow:none}
:is(#studio,#results) .phone[data-chat=dark] .phone-input{background:#242f3d;border-color:#242f3d;color:#7d8b99}
:is(#studio,#results) .phone[data-chat=dark] .phone-send{background:#2b5278}
:is(#studio,#results) .phone[data-chat=dark] .phone-theme{background:#242f3d;box-shadow:inset 0 0 0 1px #ffffff12;color:#5d6d7e}
:is(#studio,#results) .phone[data-chat=dark] .phone-theme i{transform:translateX(22px);background:#2b5278}
:is(#studio,#results) .phone[data-chat=dark] .phone-theme-moon{color:#fff;transform:rotate(-20deg)}
:is(#studio,#results) .phone[data-chat=dark] .phone-theme-sun{color:#5d6d7e}
#results .phone[data-chat=dark] .creation-progress{background-color:#182533;background-image:linear-gradient(#242f3d,#242f3d);box-shadow:none}
#results .phone[data-chat=dark] .creation-progress b{color:#f5f5f5}
@media(prefers-reduced-motion:reduce){:is(#studio,#results) .phone-theme i,:is(#studio,#results) .phone-theme span{transition:none}}
:is(#studio,#results) .phone-who small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The look of the stickers is chosen under the phone, where the choice shows at once; the purchase keeps only what is bought. */
#studio .studio-look-options{grid-area:auto;margin:12px 0 0;padding:0;border:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#studio .studio-look-options .studio-control-label{margin:0 0 6px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--st-muted)}
#studio .studio-look-options .crop-switch button{padding:8px 10px;font-size:13px;flex-wrap:nowrap;white-space:nowrap}
#studio .crop-badge{background:none;color:var(--st-muted);border:1px solid currentColor;padding:1px 6px;font-weight:700}
#studio .crop-switch button[aria-pressed=true] .crop-badge{background:#111;color:var(--st-lime);border-color:#111}
@media(max-width:700px){#studio .studio-look-options{grid-template-columns:minmax(0,1fr)}}
/* Reactions: one line of emoji with the editor's link beside the heading. */
#studio .studio-selection{position:relative}
#studio .studio-selection>.studio-control-label{margin:0 0 8px}
#studio .reaction-preview{gap:4px 8px;margin:0}
#studio .reaction-preview span{width:auto;height:auto;border:0;background:none;font-size:24px;line-height:1.2;border-radius:0}
#studio .studio-selection .studio-details{margin:0;padding:0;border:0}
#studio .studio-selection .studio-details>summary{position:absolute;top:14px;right:0;display:block;font-size:13px;font-weight:700;color:var(--st-ink)}
#studio .studio-selection .studio-details>summary:before{content:none}
#studio .studio-selection .studio-details>summary{text-decoration:underline;text-underline-offset:3px}
#studio .studio-selection .studio-details summary #selection-count{display:inline-block;padding:0;margin:0 0 0 8px;font-weight:500;color:var(--st-muted)}
#studio .studio-selection .studio-details[open]>summary{color:var(--st-blue,#2453ff)}
#studio .studio-selection .studio-details[open]>:not(summary):first-of-type{margin-top:14px}
/* A phone has no room beside the heading: the link sits under the emoji. */
@media(max-width:700px){#studio .studio-selection .studio-details>summary{position:static;margin-top:12px}}
/* Style names and the regeneration panel follow the site's light or dark theme. */
#studio .style-option{color:var(--st-ink)}
#results .regeneration-panel{background:var(--st-card);border-color:var(--st-line);color:var(--st-ink)}
#results .regeneration-panel legend{color:var(--st-ink);background:var(--st-card);border-radius:6px}
#results .regeneration-panel .field-help{color:var(--st-muted)}
#results .regeneration-panel textarea{background:var(--st-surface);border-color:var(--st-line);color:var(--st-ink)}
#results .regeneration-panel textarea::placeholder{color:var(--st-muted)}
#results .regeneration-panel .sticker-versions,#results .regeneration-panel .sticker-version{border-color:var(--st-line)}
/* Regeneration and versions: one quiet line above the pack, the pack itself, the add-on folded below. */
#results .creation-more .regeneration-panel{margin:4px 0 16px;padding:14px 16px;border-radius:14px;background:var(--st-surface);border-color:transparent}
#results .creation-more .regeneration-panel legend{float:left;width:100%;padding:0;margin:0 0 4px;font-size:15px;background:none}
#results .creation-more .regeneration-panel legend+*{clear:both}
#results .creation-more .regeneration-panel>.field-help{margin:0;font-size:13px;line-height:1.45}
#results .regeneration-selection{margin-top:8px;gap:6px 16px}
#results .regeneration-selection .field-help{font-size:13px;color:var(--st-ink);font-weight:700}
#results .regeneration-selection .text-button{font-size:13px;font-weight:700;color:var(--st-ink)}
#results .regeneration-compose{position:sticky;bottom:12px;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:end;margin-top:12px;padding:12px 14px;border:1px solid var(--st-line);border-radius:14px;background:var(--st-card);box-shadow:0 10px 30px rgba(0,0,0,.18);color:var(--st-ink)}
#results .regeneration-compose .field{margin:0;font-size:13px;font-weight:700}
#results .regeneration-compose textarea{min-height:44px;height:44px;margin-top:6px;padding:10px 12px;resize:none}
#results .regeneration-compose textarea{display:block;width:100%;border:1px solid;border-radius:10px;font:inherit;font-weight:400;line-height:1.5;background:var(--st-surface);border-color:var(--st-line);color:var(--st-ink)}
#results .regeneration-compose .field-help{color:var(--st-muted)}
#results .regeneration-compose textarea:focus{height:76px}
#results .regeneration-compose>.button{margin:0;min-height:44px}
#results .regeneration-compose>.field-help{display:none;grid-column:1/-1;order:3;margin:0;font-size:12px}
#results .regeneration-compose:focus-within>.field-help{display:block}
#results .regeneration-compose>.regeneration-item-select{grid-column:1/-1;padding:0}
/* Each card: a check in its corner picks it; report and download share the footer. */
#results .creation-more .result-toolbar{margin:0 0 12px}
#results .creation-more .result-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
#results .creation-more .result-grid.with-versions{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
#results .creation-more .result-item{position:relative;border-color:var(--st-line);border-radius:14px;background:var(--st-card)}
#results .creation-more .result-item:has(.card-select input:checked){border-color:var(--st-blue);box-shadow:0 0 0 1px var(--st-blue)}
#results .creation-more .sticker-chat-grid .result-stage{height:150px}
#results .creation-more .sticker-chat-grid .result-stage video,#results .creation-more .sticker-chat-grid .result-stage img{width:128px;height:128px}
#results .creation-more .result-item-footer{padding:9px 10px;gap:6px;color:var(--st-ink)}
#results .creation-more .result-item-footer strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
#results .result-item-tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
#results .result-item-tools a{color:var(--st-muted);text-decoration:none;font-size:15px;line-height:1}
#results .result-item-tools a:hover{color:var(--st-ink)}
#results .result-report{font-size:0!important}
#results .result-report:before{content:"⚑";font-size:14px}
#results .card-select{position:absolute;top:8px;left:8px;padding:0;margin:0}
#results .card-select span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#results .card-select input{appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:50%;border:2px solid rgba(17,17,17,.35);background:rgba(255,255,255,.85);cursor:pointer;display:grid;place-items:center}
#results .card-select input:checked{background:var(--st-blue);border-color:var(--st-blue)}
#results .card-select input:checked:after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
#results .card-select input:disabled{opacity:.4}
#results .result-item .quality-note{padding:0 10px 10px}
/* 8 more reactions: one line with its price until opened. */
#results .addon-fold{margin-top:16px;border:1px solid var(--st-line);border-radius:14px;background:var(--st-card)}
#results .addon-fold>summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;list-style:none;color:var(--st-ink)}
#results .addon-fold>summary::-webkit-details-marker{display:none}
#results .addon-fold>summary:after{content:"";margin-left:auto;width:8px;height:8px;border:solid var(--st-muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .16s}
#results .addon-fold[open]>summary:after{transform:rotate(-135deg)}
#results .addon-fold .addon-price{font-size:13px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--st-lime);color:#111}
#results .addon-fold .regeneration-panel{margin:0;padding:0 16px 16px;border:0;background:none}
#results .addon-fold .field-help{margin:0 0 10px;font-size:13px}
#results .addon-fold .action-grid{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
#results .addon-fold .action-option{min-height:0;height:auto;flex-direction:row;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--st-line);background:var(--st-surface);color:var(--st-ink);font-size:12px}
#results .addon-fold .action-option>span:first-child{font-size:16px}
#results .addon-fold .action-option[aria-pressed=true]{border-color:var(--st-blue);box-shadow:0 0 0 1px var(--st-blue)}
#results .addon-fold .action-option:after{content:none}
#results .addon-fold .regeneration-item-select{padding:6px 0;color:var(--st-ink)}
#results .addon-fold .button{margin-top:6px}
@media(max-width:560px){#results .regeneration-compose{grid-template-columns:minmax(0,1fr);padding:10px 12px}#results .regeneration-compose>.button{min-height:40px;padding:8px 14px}#results .creation-more .result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* On a wide screen the phone is drawn larger than the stage: its top with the theme switch stays, the composer
   runs off the bottom edge, and the sticker and its time rise to the visible bottom, so the sticker reads ~1.45× bigger. */
@media(min-width:701px){
  #studio .demo-stage,#results .creation-stage{--phone-zoom:1.45;--phone-w:min(calc((100cqh - 44px)*.4613*var(--phone-zoom)),88cqw);--phone-top:22px;--phone-bottom:calc(100cqh - var(--phone-top) - var(--phone-h));--time-bottom:max(calc(var(--phone-bottom) + 78px),22px);--sq-bottom:calc(var(--time-bottom) + 26px)}
  #studio .demo-stage .chat-time,#results .creation-stage .chat-time,#results .creation-progress{bottom:calc(var(--time-bottom) - var(--phone-bottom) - 66px)}
  #results .creation-frame.is-working .creation-stage{--sq-bottom:calc(var(--time-bottom) + 72px)}
}

/* ── The studio page (/studio) ─────────────────────────────────────────────
   No hero above it, so the workshop takes the screen: "My creations" as a row of
   round avatars at the very top, a one-line heading with the steps, a workspace as
   tall as the window, and a pay bar that follows when the order card is out of view. */
body[data-page=studio] .header>.button{display:none}
body[data-page=studio] .studio-section.unified-studio{padding-top:18px}

#studio .creations-strip{display:flex;align-items:center;gap:18px;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--st-line)}
#studio .creations-strip[hidden]{display:none}
#studio .creations-strip>.studio-label{margin:0;flex:none;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px}
#studio .creations-list{display:flex;gap:10px;overflow-x:auto;padding:6px 4px 2px;scrollbar-width:thin;min-width:0}
#studio .creation-chip{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:78px;flex:none;padding:0;border:0;background:none;box-shadow:none;color:var(--st-muted);cursor:pointer;font:600 12px/1.2 'DM Sans',sans-serif}
#studio .creation-face{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--st-surface);color:var(--st-ink);font:900 22px/1 'DM Sans',sans-serif;box-shadow:0 0 0 2px var(--st-card),0 0 0 4px var(--st-line);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
#studio .creation-face img{position:absolute;left:0;top:0;max-width:none;height:auto;opacity:0;transition:opacity .2s}
#studio .creation-face.is-ready img{opacity:1}
#studio .creation-face.is-whole img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:1}
#studio .creation-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#studio .creation-chip:hover .creation-face{transform:scale(1.06)}
#studio .creation-chip:focus-visible{outline:none}
#studio .creation-chip:focus-visible .creation-face{box-shadow:0 0 0 2px var(--st-card),0 0 0 4px var(--st-blue)}
#studio .creation-chip[data-state=waiting] .creation-face{box-shadow:0 0 0 2px var(--st-card),0 0 0 4px var(--st-blue)}
#studio .creation-chip[data-state=failed] .creation-face{box-shadow:0 0 0 2px var(--st-card),0 0 0 4px #ff5a4e}
#studio .creation-chip[data-state=off] .creation-face{filter:grayscale(1);opacity:.55}
#studio .creation-chip[data-state=new] .creation-face{background:none;box-shadow:none;border:2px dashed var(--st-line);font-weight:300;font-size:30px;color:var(--st-muted)}
#studio .creation-chip[data-state=new]:hover .creation-face{border-color:var(--st-blue);color:var(--st-blue)}
#studio .creation-chip.is-current{color:var(--st-ink);font-weight:800}
#studio .creation-chip.is-current .creation-face{box-shadow:0 0 0 3px var(--st-card),0 0 0 6px var(--st-lime)}
/* A creation at work spins a ring; one that waits for the customer wears a dot. */
#studio .creation-chip[data-state=working]:before{content:'';position:absolute;top:-5px;left:calc(50% - 37px);width:74px;height:74px;border-radius:50%;background:conic-gradient(var(--st-blue) 0 28%,transparent 0 50%,var(--st-lime) 0 78%,transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));animation:st-spin 1.4s linear infinite;pointer-events:none}
#studio .creation-chip:is([data-state=waiting],[data-state=failed]):after{content:'';position:absolute;top:0;right:9px;width:14px;height:14px;border-radius:50%;background:var(--st-blue);box-shadow:0 0 0 3px var(--st-card)}
#studio .creation-chip[data-state=failed]:after{background:#ff5a4e}
@keyframes st-spin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){#studio .creation-chip[data-state=working]:before{animation:none}}

body[data-page=studio] #studio .studio-heading{align-items:center;margin:0 0 16px;gap:20px}
body[data-page=studio] #studio .studio-title{display:flex;align-items:baseline;gap:14px;min-width:0;flex:none}
body[data-page=studio] #studio .studio-heading h2{font-size:clamp(34px,3.4vw,48px);line-height:1;letter-spacing:-.05em;margin:0}
body[data-page=studio] #studio .studio-heading p{display:none}
body[data-page=studio] #studio .studio-switches{flex-direction:row-reverse;align-items:center}
body[data-page=studio] #studio .studio-tabs button{padding:11px 18px;font-size:14px}
body[data-page=studio] #studio .studio-shell{grid-template-rows:minmax(clamp(560px,calc(100vh - 250px),860px),auto) auto auto}
body[data-page=studio] #studio:has(.creations-strip:not([hidden])) .studio-shell{grid-template-rows:minmax(clamp(560px,calc(100vh - 340px),860px),auto) auto auto}
body[data-page=studio] #studio .studio-characters,body[data-page=studio] #studio .studio-reactions{overflow:visible}
#studio #studio-customer-controls .field+.studio-control-label,#studio #studio-customer-controls .field+.field-help+.studio-control-label{margin-top:22px}

#studio .studio-stepper{display:flex;align-items:center;gap:2px;list-style:none;margin:0 auto;padding:4px;border:1px solid var(--st-line);border-radius:999px;background:var(--st-card);min-width:0}
#studio .studio-stepper[hidden]{display:none}
#studio .studio-stepper li{display:flex;align-items:center}
#studio .studio-stepper li+li:before{content:'';width:10px;height:1px;background:var(--st-line);margin:0 2px}
#studio .studio-stepper button{display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border:0;border-radius:999px;background:none;box-shadow:none;color:var(--st-muted);font:700 13px/1 'DM Sans',sans-serif;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
#studio .studio-stepper button:hover{background:var(--st-surface);color:var(--st-ink)}
#studio .studio-stepper b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--st-surface);color:var(--st-ink);font-size:12px;font-weight:800}
#studio .studio-stepper [data-state=done] button{color:var(--st-ink)}
#studio .studio-stepper [data-state=done] b{background:var(--st-lime);color:#111}
#studio .studio-stepper [data-state=current] button{background:var(--st-ink);color:var(--st-card)}
#studio .studio-stepper [data-state=current] b{background:var(--st-lime);color:#111}

#studio .studio-paybar{position:fixed;left:50%;bottom:18px;z-index:60;display:flex;align-items:center;gap:18px;width:min(620px,calc(100% - 32px));padding:9px 9px 9px 24px;border-radius:999px;background:var(--st-ink);color:var(--st-card);box-shadow:0 14px 40px rgba(10,12,20,.28);transform:translateX(-50%);animation:st-paybar-in .35s cubic-bezier(.2,1.2,.4,1) both}
#studio .studio-paybar[hidden]{display:none}
#studio .paybar-info{display:flex;flex-direction:column;gap:3px;min-width:0}
#studio .paybar-info strong{font-size:13px;font-weight:700;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#studio .paybar-info span{font-size:20px;font-weight:1000;letter-spacing:-.03em}
#studio .studio-paybar .button{margin-left:auto;min-height:50px;padding:0 24px;border-radius:999px;border-color:var(--st-lime);background:var(--st-lime);color:#111;font-size:15px;font-weight:800;white-space:nowrap;box-shadow:none}
#studio .studio-paybar .button:disabled{opacity:.5}
#studio .studio-paybar .button.is-working{cursor:progress}
body.has-paybar{padding-bottom:84px}
@keyframes st-paybar-in{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translateX(-50%)}}

#results .results-actions{display:flex;align-items:center;gap:22px}
#results #delete-creation{font-size:12px;color:var(--st-muted)}
#results #delete-creation:hover{color:#ff5a4e}
/* On a phone the two links sit under the heading: a gap from it, one size, tall enough to tap. */
@media(max-width:700px){#results .results-actions{margin-top:8px}#results .results-actions .text-button{padding:6px 0;font-size:14px}}
.release-account-guest .recovery-tools{margin-top:18px;padding-top:14px;border-top:1px solid var(--line,#e4e4df);font-size:13px}
.release-account-guest .recovery-tools summary{cursor:pointer;font-weight:700}
.release-account-guest .recovery-tools .field input{width:100%}
.release-account-guest .recovery-feedback{margin-top:10px}

#studio .steps-compact .studio-stepper li:not([data-state=current]) span{display:none}
#studio .steps-compact .studio-stepper button{padding:5px}
#studio .steps-compact .studio-stepper [data-state=current] button{padding-right:14px}
body[data-page=studio] #studio .studio-heading.steps-stacked{flex-wrap:wrap;row-gap:12px}
#studio .steps-stacked .studio-stepper{order:3;margin:0;flex-basis:100%;justify-content:space-between}
@media(max-width:1000px){
  body[data-page=studio] #studio .studio-heading{flex-wrap:wrap}
  body[data-page=studio] #studio .studio-shell,body[data-page=studio] #studio:has(.creations-strip:not([hidden])) .studio-shell{grid-template-rows:auto clamp(520px,70vh,640px) auto auto}
  #studio .studio-stepper{order:3;margin:0;flex-basis:100%;justify-content:space-between;overflow-x:auto}
}
@media(max-width:700px){
  body[data-page=studio] #studio .studio-heading{flex-direction:column;align-items:stretch;gap:12px}
  body[data-page=studio] #studio .studio-switches{flex-direction:column-reverse;align-items:stretch}
  body[data-page=studio] #studio .studio-shell,body[data-page=studio] #studio:has(.creations-strip:not([hidden])) .studio-shell{grid-template-rows:auto 560px auto auto auto}
  #studio .creations-strip{gap:10px;margin:0 0 12px;padding:0 0 10px}
  #studio .creation-chip{width:62px;font-size:11px}
  #studio .creation-face{width:52px;height:52px;font-size:18px}
  #studio .creation-chip[data-state=working]:before{top:-5px;left:calc(50% - 31px);width:62px;height:62px}
  #studio .creation-chip:is([data-state=waiting],[data-state=failed]):after{right:4px}
  #studio .studio-stepper button{padding:4px;gap:6px}
  #studio .studio-stepper [data-state=current] button{padding-right:12px}
  #studio .studio-stepper li:not([data-state=current]) span{display:none}
  #studio .studio-paybar{bottom:10px;gap:12px;width:calc(100% - 20px);padding:7px 7px 7px 18px}
  #studio .paybar-info strong{font-size:11px}
  #studio .paybar-info span{font-size:17px}
  #studio .studio-paybar .button{min-height:46px;padding:0 16px;font-size:14px}
}

/* ── On a phone ───────────────────────────────────────────────────────────
   The visitor already holds a phone, so the mock goes: the stage is the Telegram chat
   itself, the reactions are its sticker panel right under it, and the pay bar is
   Telegram's "Add stickers" sheet. The chat and the panel follow the chat's day/night switch. */
.tg-tabs{display:none}
@media(max-width:700px){
  #studio .studio-shell,#studio .studio-shell.is-making,body[data-page=studio] #studio .studio-shell,body[data-page=studio] #studio:has(.creations-strip:not([hidden])) .studio-shell{grid-template-rows:auto auto auto auto auto}
  #studio .studio-player{min-height:480px}
  /* Whatever it shows (the chat, the preview being drawn, the drawn character), the stage keeps its height. */
  #studio .demo-stage{flex:none;height:480px}
  #results .creation-frame{grid-template-rows:auto 500px auto auto}
  #studio .demo-stage[data-view=chat],#results .creation-stage{border-radius:var(--st-radius) var(--st-radius) 0 0;--compose:58px;--sq:min(62cqw,calc(100cqh - 250px));--sq-right:12px;--sq-bottom:calc(var(--compose) + 42px)}
  #results .creation-frame.is-working .creation-stage{--sq-bottom:calc(var(--compose) + 78px)}
  :is(#studio,#results) .phone{left:0;top:0;width:100%;height:100%;transform:none;padding:0;border-radius:0;box-shadow:none;animation:none}
  :is(#studio,#results) .phone-status{display:none}
  :is(#studio,#results) .phone-header{padding:9px 12px;background:inherit;box-shadow:0 1px 0 #0000000f;position:relative;z-index:5}
  :is(#studio,#results) .phone-chat{border-radius:0;background:radial-gradient(circle at 30% 30%,#ffffff59 0 2px,transparent 2.5px) 0 0/38px 38px,radial-gradient(circle at 70% 70%,#ffffff40 0 3px,transparent 3.5px) 0 0/38px 38px,linear-gradient(165deg,#d6e6b9,#b2d3a2 48%,#8fc1a9)}
  :is(#studio,#results) .phone[data-chat=dark] .phone-chat{background:radial-gradient(circle at 30% 30%,#ffffff0d 0 2px,transparent 2.5px) 0 0/38px 38px,#0e1621}
  :is(#studio,#results) .chat-bubble{left:10px;top:12px;max-width:72%;font-size:15px}
  /* "These are examples" becomes the chat's service note at the top, as Telegram dates a conversation. */
  #studio .studio-player{position:relative}
  #studio .studio-player:has(.demo-stage[data-view=chat]) #studio-preview-caption:not([hidden]){position:absolute;z-index:4;top:70px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 48px);margin:0;padding:4px 10px;border-radius:12px;background:#0000003d;color:#fff;font-size:12px;font-weight:600;line-height:1.35;text-align:center}
  #studio .studio-player:has(.demo-stage[data-view=chat] .phone[data-chat=dark]) #studio-preview-caption{background:#ffffff1a}
  #studio .studio-player:has(#studio-preview-caption:not([hidden])) .demo-stage[data-view=chat] .chat-bubble{top:58px}
  :is(#studio,#results) .chat-time{right:12px;bottom:12px}
  :is(#studio,#results) .phone-compose{height:var(--compose);padding:8px 10px;gap:10px;box-shadow:0 -1px 0 #0000000f}
  :is(#studio,#results) .phone-input{position:relative;padding:9px 40px 9px 14px;font-size:15px}
  :is(#studio,#results) .phone-send{background:#3390ec}
  :is(#studio,#results) .phone[data-chat=dark] .phone-send{background:#5288c1}
  #studio .demo-stage[data-view=chat] #demo-poster.is-sticker{filter:drop-shadow(0 2px 3px #00000026)}

  /* The sticker panel: no cards, no tilt, the pack's tab chosen; a pressed sticker gets Telegram's soft square. */
  :is(#studio,#results) .tg-panel{margin-top:-12px;border:0;border-radius:0 0 var(--st-radius) var(--st-radius);padding:0 8px 14px;background:#fff;color:#111;box-shadow:0 -1px 0 #0000000f}
  /* The studio's panel lives inside the player on a phone (release.js placePanel), right under the chat. */
  #studio .studio-shell,#studio .studio-shell.is-making{grid-template-areas:"left" "stage" "cta" "buy"}
  #studio .studio-player>.tg-panel{margin-top:0}
  #studio .studio-player>.tg-panel+*{margin-top:14px}
  /* Closed with the keyboard button, the chat ends with its own rounded corners. */
  :is(#studio,#results) .tg-panel[data-chat=dark]{background:#17212b;color:#f5f5f5;box-shadow:0 -1px 0 #0e1621}
  :is(#studio,#results) .tg-tabs{display:flex;align-items:center;gap:6px;padding:8px 4px;margin:0 0 4px;border-bottom:1px solid #0000000f}
  :is(#studio,#results) .tg-panel[data-chat=dark] .tg-tabs{border-bottom-color:#0e1621}
  :is(#studio,#results) .tg-tab{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;font-size:20px;color:#8e959d}
  :is(#studio,#results) .tg-tab.is-on{background:#0000000d}
  :is(#studio,#results) .tg-panel[data-chat=dark] .tg-tab.is-on{background:#ffffff12}
  :is(#studio,#results) .tg-tab img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 10%}
  :is(#studio,#results) .tg-tab img:not([src]){visibility:hidden}
  :is(#studio,#results) .tg-panel .reactions-head{padding:6px 6px 8px}
  :is(#studio,#results) .tg-panel h3{margin:0;font-size:13px;letter-spacing:0;text-transform:none;font-weight:700;color:#8e959d}
  :is(#studio,#results) .tg-panel .reactions-head p{font-size:13px;color:#8e959d}
  /* Three a row: at four the longest names (Сором’язливість, Підморгування) lost their ends. */
  #studio .tg-panel .demo-actions,#results .tg-panel .creation-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
  #studio .tg-panel .demo-action,#results .tg-panel .creation-tile{aspect-ratio:1/1.12;height:auto;min-height:0;padding:4px 2px 0;border:0;border-radius:12px;background:none;box-shadow:none;rotate:0deg;color:inherit;animation:none}
  #studio .tg-panel .demo-action:hover,#results .tg-panel .creation-tile:not(:disabled):hover{transform:none}
  #studio .tg-panel .demo-action img,#results .tg-panel .creation-tile :is(img,video){filter:none}
  #studio .tg-panel .demo-action[aria-pressed=true],#results .tg-panel .creation-tile[aria-pressed=true]{background:#0000000d;box-shadow:none;rotate:0deg}
  :is(#studio,#results) .tg-panel[data-chat=dark] :is(.demo-action,.creation-tile)[aria-pressed=true]{background:#ffffff12}
  #studio .tg-panel .demo-action span,#results .tg-panel .creation-tile-label{padding:2px 2px 6px;font-size:11px;font-weight:500;color:#8e959d}
  /* A name longer than the tile (Сором’язливість) wraps under its emoji instead of losing its end. */
  #studio .tg-panel .demo-action span:not(.tile-check),#results .tg-panel .creation-tile-label{white-space:normal;line-height:1.25;text-align:center}
  #studio .tg-panel .demo-action{--tile-label:23px}
  #studio .tg-panel .demo-action span.tile-check{inset:4px 4px auto auto;width:18px;height:18px;border-radius:50%;background:#3390ec;color:#fff;font-size:11px;line-height:18px}
  #results .tg-panel .creation-tile.is-waiting{border:0;background:none}
  #results .tg-panel .creation-tile.is-waiting:before{content:'';display:block;width:70%;aspect-ratio:1;margin:6px auto 2px;border-radius:50%;background:#0000000a}
  #results .tg-panel[data-chat=dark] .creation-tile.is-waiting:before{background:#ffffff0d}
  #results .tg-panel .creation-tile.is-next{border-radius:12px;min-height:84px}
  #results .tg-panel .creation-tag{top:4px;right:4px;padding:3px 7px;font-size:10px}

  /* The pay bar as Telegram's sheet: docked to the bottom, a grabber, the pack and its price, one wide blue button. */
  #studio .studio-paybar{left:0;right:0;bottom:0;width:auto;transform:none;flex-wrap:wrap;gap:10px 12px;padding:16px 16px calc(12px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;background:#fff;color:#111;box-shadow:0 -8px 30px #0000002e;animation:tg-sheet-in .35s cubic-bezier(.2,1,.3,1) both}
  #studio .studio-paybar:before{content:'';position:absolute;top:6px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:#d3d7dc}
  #studio .paybar-info{flex:1 1 100%;flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
  #studio .paybar-info strong{font-size:16px;font-weight:700;opacity:1}
  #studio .paybar-info span{font-size:16px;font-weight:700;letter-spacing:0;color:#3390ec}
  #studio .studio-paybar .button{flex:1 1 100%;margin:0;min-height:48px;justify-content:center;border-radius:10px;border-color:#3390ec;background:#3390ec;color:#fff;font-size:15px;font-weight:700}
  body.has-paybar{padding-bottom:132px}
}
@media(max-width:700px) and (prefers-color-scheme:dark){
  #studio .studio-paybar{background:#17212b;color:#f5f5f5}
  #studio .studio-paybar:before{background:#3a4654}
  #studio .paybar-info span{color:#6ab2f2}
  #studio .studio-paybar .button{border-color:#5288c1;background:#5288c1}
}
@keyframes tg-sheet-in{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){#studio .studio-paybar{animation:none}}
/* Telegram panel on a phone: while making, the drawing styles are its sticker packs and + opens the style builder. */
.tg-pack-name{display:none}
@media(max-width:700px){
  #studio .tg-tabs{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  #studio .tg-tabs::-webkit-scrollbar{display:none}
  #studio .tg-tab{flex:none}
  #studio .tg-add{display:none}
  :is(#studio,#results) .phone-clip{display:none}
  #studio .is-making .tg-pack,#studio .is-making [data-i18n="form.chooseStyle"],#studio .is-making #reactions-title{display:none}
  #studio .is-making .tg-add{display:grid;border:0;padding:0 0 2px;background:none;box-shadow:none;font:300 28px/1 system-ui,sans-serif;color:#8e959d;cursor:pointer}
  #studio .is-making .tg-add[aria-pressed=true]{background:#0000000d;color:#3390ec}
  #studio .tg-tabs .style-grid{display:flex!important;flex:none;gap:6px;margin:0}
  #studio .studio-shell:not(.is-making) .tg-tabs .style-grid{display:none!important}
  #studio .tg-tabs .style-option{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:10px;background:none;box-shadow:none}
  #studio .tg-tabs .style-option>span:not(.style-thumb){display:none}
  #studio .tg-tabs .style-option .style-thumb{width:30px;height:30px;border-radius:50%;background-color:#eef1f4}
  #studio .tg-tabs .style-option:hover .style-thumb{transform:none}
  #studio .tg-tabs .style-option[aria-pressed=true]{background:#0000000d}
  #studio .tg-tabs .style-option[aria-pressed=true] .style-thumb{box-shadow:0 0 0 2px #3390ec}
  #studio .tg-tabs .style-option[aria-pressed=true]:after{display:none}
  #studio .tg-tabs .style-option:focus-visible,#studio .tg-add:focus-visible{outline:2px solid #3390ec;outline-offset:1px}
  #studio .tg-panel[data-chat=dark] .style-option[aria-pressed=true],#studio .tg-panel[data-chat=dark] .tg-add[aria-pressed=true]{background:#ffffff12}
  #studio .tg-panel[data-chat=dark] .style-option[aria-pressed=true] .style-thumb{box-shadow:0 0 0 2px #6ab2f2}
  #studio .is-making .tg-pack-name{display:block;margin:0;font:600 14px/1.3 system-ui,sans-serif;color:#3390ec}
  #studio .tg-panel[data-chat=dark] .tg-pack-name{color:#6ab2f2}
}
/* Demo character thumbnails: the face in the middle at one size (see POSTER_FACES). */
#studio .demo-character[data-face] img{left:50%;top:44%;width:auto;height:calc(60% / var(--face-h));max-width:none;transform:translate(calc(var(--face-x) * -100%),calc(var(--face-y) * -100%))}
/* Phone: the example characters are the Telegram panel's packs while looking at the examples. */
@media(max-width:700px){
  #studio .tg-pack{display:none}
  #studio #studio-example-controls .studio-gets{border-top:0;padding-top:0;margin-top:0}
  #studio .tg-tabs #demo-characters{display:flex;flex:none;flex-direction:row;flex-wrap:nowrap;gap:14px;overflow:visible;padding:0 4px;margin:0}
  #studio .is-making .tg-tabs #demo-characters{display:none}
  #studio .tg-tabs .demo-character{width:30px;height:30px;margin:4px 0;background:#eef1f4;box-shadow:none}
  #studio .tg-tabs .demo-character:hover{transform:none}
  #studio .tg-tabs .demo-character[aria-pressed=true]{background:#eef1f4;box-shadow:0 0 0 2px #3390ec}
  #studio .tg-panel[data-chat=dark] .demo-character{background:#242f3d}
  #studio .tg-panel[data-chat=dark] .demo-character[aria-pressed=true]{background:#242f3d;box-shadow:0 0 0 2px #6ab2f2}
  #studio .tg-tabs .demo-character:focus-visible{outline:2px solid #3390ec;outline-offset:3px}
}