/* App shell: the prototype's phone frame becomes the real screen. Visual rules stay in proto.css. */
html,body{height:100%;background:#dce8ff;overscroll-behavior:none}
body{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;text-size-adjust:100%;-webkit-text-size-adjust:100%}
input,textarea{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none}
#device{position:fixed!important;left:0;top:0;right:0;bottom:0;width:100%!important;height:100%!important;border-radius:0!important;box-shadow:none!important;transform:none!important;contain:strict}
#device:before{display:none!important}
.homebar,.cbanner,#panel,#fab,#cmpbar{display:none!important}
button:focus-visible{outline:none}
button{touch-action:manipulation}
.scr.scroll{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* pressed state for every tappable control (the prototype relied on :hover) */
.primary,.ghost,.soft,.iconbtn,.rbtn,.pgo,.fbtn16,.mode2,.hero14,.rowB,.p17,.plan,.ht,.hs,.mg,.mr,.srow,.plist button,.fr1 .soft,.copy,.go14,.dice,.avgrid3 button,.frm1,.ti1,.em button,.seg14 button,.nav2 button,.w,.asl,.show15,.coll,.fcard,.inc15,.aboutrow,.why3,.link{transition:transform .12s ease,filter .12s ease}
.primary:active,.ghost:active,.soft:active,.iconbtn:active,.rbtn:active,.pgo:active,.fbtn16:active,.go14:active,.copy:active,.dice:active,.coll:active,.fcard:active,.inc15:active,.show15:active,.w:active,.asl:active{transform:scale(.97)}
.hero14:active,.rowB:active,.p17:active,.plan:active,.mg:active,.mr:active,.avgrid3 button:active,.frm1:active,.ti1:active,.em button:active{transform:scale(.97)}
.nav2 button:active .ico,.seg14 button:active{filter:brightness(.94)}
.primary[disabled],.primary.busy{pointer-events:none}
.primary.busy{filter:saturate(.6) brightness(1.05)}

/* ---------- performance: cheap replacements for expensive filters (same look) ---------- */
/* aura behind the painting: a tiny pre-blurred canvas scaled up instead of a 22px live blur */
.study2:not(.old) .artGlow canvas.aura{position:absolute;left:-6%;top:-8%;width:112%;height:116%;border-radius:0;opacity:.85;z-index:0}
/* backdrop blurs on overlays cost a full-screen blur every frame on mid-range GPUs */
body.lite #sheet .dim,body.lite .cdown,body.lite .coach3 .cdim,body.lite .mode2,body.lite .cp{backdrop-filter:none!important}
body.lite #sheet .dim{background:#1b184070}
body.lite .cdown{background:#1b18404d}
body.lite .coach3 .cdim{background:#1b184080}    /* no blur here, so a little darker to keep the focus effect */
/* prototype blurs foliage live (filter:blur(3px)); use the same blur baked into the asset (+20px pad = 8.6 css px) */
.foliage{filter:none;content:url(a/foliage-blur.webp);width:197.2px;height:207.2px;bottom:-48.6px}
.foliage.l{left:-78.6px}.foliage.r{right:-74.6px}
.scr>.foliage{will-change:auto}

/* ---------- elements added by the app layer ---------- */
.prep{position:absolute;inset:0;z-index:35;display:grid;place-items:center;background:#1b184055;animation:tin .25s ease}
.prep .pbox{width:260px;padding:18px 18px 16px;border-radius:26px;background:#fff;box-shadow:0 20px 50px #3a2a8a40;text-align:center;color:var(--ink)}
.prep .pino{display:block;width:84px;height:78px;margin:0 auto 6px}
.prep b{display:block;font-size:17px}
.prep small{display:block;margin-top:4px;font-size:13.5px;color:#6d6790;line-height:1.35}
.prep .bar{height:6px;border-radius:3px;background:#ece6fb;margin-top:12px;overflow:hidden}
.prep .bar i{display:block;height:100%;width:40%;border-radius:3px;background:linear-gradient(90deg,#9a5cff,#6721f6);animation:prepbar 1.1s ease-in-out infinite}
@keyframes prepbar{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.prep .ghost{margin-top:12px;height:42px;font-size:15px}

.fieldx{display:block;width:100%;height:50px;margin-top:10px;border:1.5px solid #d9ccf7;border-radius:16px;padding:0 14px;font:inherit;font-size:17px;color:var(--ink);background:#fff}
.fieldx:focus{outline:none;border-color:#7b1cf2;box-shadow:0 0 0 4px #7b1cf222}
.sheetnote{font-size:13.5px;color:#6d6790;line-height:1.4;margin:6px 0 0}
.sheeterr{font-size:13px;color:var(--red);font-weight:700;margin-top:6px;min-height:18px}
.evi{display:block;margin-top:5px;font-size:12.5px;line-height:1.35;color:#6d6790}
.livehint{font-size:12px;color:#8b83ad;margin-top:6px}
.study2 .artGlow .pic.loading{opacity:0}
.study2 .artGlow .pic{transition:opacity .25s}
.lvl.quiet i{animation-play-state:paused;transform:scaleY(.3)}
.netbar{position:absolute;left:12px;right:12px;top:calc(var(--safe-top,12px) + 6px);z-index:75;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:#1b1840e8;color:#fff;font-size:13px;font-weight:600;animation:tin .25s ease}
.netbar i{width:8px;height:8px;border-radius:50%;background:#ffc23d;flex:none;animation:blink 1s infinite}

/* screens painted once behind the live screen so their images are decoded before the first visit */
.prewarm{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.prewarm .scr{position:absolute;inset:0}
#app{z-index:1}

/* result: pictures keep the painting's proportions; versions are tappable */
.versions3.lvv{display:flex;justify-content:center;gap:10px}
.versions3.lvv .v3{flex:none;box-sizing:border-box}
.v3 .pic.picbtn{display:block;padding:0;border:0;margin:0 auto;cursor:zoom-in}
.v3 .pic.picbtn img,.orig3 img{object-fit:cover}
/* live painting sheet: the museum card is a link when the server has a page for it */
.art14 .aplace{width:calc(100% - 40px);text-align:left;font:inherit;color:inherit;cursor:default}
.art14 .aplace.link{cursor:pointer}.art14 .aplace.link:active{background:#f7f4ff}
.art14 .aplace em{margin-left:auto;font-style:normal;font-size:22px;color:#a19bbd;padding-left:8px}
.art14 .ahero{width:100%;aspect-ratio:var(--ar,4/3);max-height:min(66vh,420px)}.art14 .ahero img{width:100%;height:100%;max-height:none;object-fit:cover}   /* the hero takes the painting's proportions; only very tall paintings are trimmed a little — never bars */
.res15.lvres .spacer{flex:1 1 12px}   /* ratio-true boxes do not grow, so the free space goes above the button */
/* the "empty canvas" placeholder is square: never crop its caption */
.v3 .pic img[src$="empty.webp"],.canvas .rev[src$="empty.webp"],.art14 .ahero img[src$="empty.webp"]{object-fit:contain;background:#e9e5fb}
.astory .afact{margin-top:8px;font-size:14px;line-height:1.45;color:#5f5a80;background:#f7f4ff;border-radius:12px;padding:8px 12px}
/* browsers / iPhone home-screen app: the screen is whatever the web view gives us (fixed inset 0, no computed height),
   the notch and home-indicator insets come straight from CSS env() — the engine keeps them current, no JS probe */
html.web,html.web body{height:100vh;overflow:hidden}   /* iOS home-screen apps: only 100vh gives the whole screen with viewport-fit=cover (100% and 100dvh shrink the window) */
html.web #device{height:100vh!important;top:0;bottom:auto}
html.web .scr .safe{height:max(24px,env(safe-area-inset-top,0px))!important}   /* the status bar itself is the top margin */
html.web .scr{padding-bottom:env(safe-area-inset-bottom,0px)}
html.web #sheet .body{padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
#sheet .body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#sheet .body.drag{transition:none}
.proc2 .canvas .rev{object-fit:cover}
/* iPhone home-screen app: the status bar is a system band above the web view (status-bar-style default), the page fills the rest */
html.web,html.web body{background:#dce8ff linear-gradient(#dce8ff 10%,#e7eaff 62%,#fff 86%,#eef1ff)}   /* same vertical ramp as the screens: if iOS ever shows a bar outside the window it blends in */
/* pinned chrome: header and footer are flex items of the screen, the middle scrolls on its own */
.scr.pinned{overflow:hidden!important}
.scr.pinned>.scrollbody{flex:1 1 0!important;min-height:0;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.scr.pinned>.scrollbody::-webkit-scrollbar{display:none}
.scr.pinned>.scrollbody>*{flex-shrink:0}
.scr.pinned>.scrollbody>.spacer{flex:1 0 12px}
.scr.pinned>.scrollbody>.artGlow,.scr.pinned>.scrollbody>.canvas{flex-shrink:1}
.scr.pinned{padding-bottom:var(--safe-bottom,0px)}
.scr.pinned{--navb:calc(14px + var(--safe-bottom,0px))}
html.web .scr.pinned{--navb:14px}   /* the web screen has no bottom padding: the menu sits where it always sat, 14px above the edge */
.scr.pinned>nav.nav2{position:absolute!important;left:12px;right:12px;bottom:var(--navb);margin:0!important;z-index:30}   /* the menu floats at the same spot on every menu screen, without a background block */
.scr.pinned.navflush>.scrollbody{margin-bottom:88px}   /* the content ends just above the menu (menu 66px + gap); only the soft edge touches it */
/* soft edges instead of a hard cut where the scrolling content meets the header and the footer */
.scr.pinned>.scrollbody{--ft:0px;--fb:18px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ft),#000 calc(100% - var(--fb)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ft),#000 calc(100% - var(--fb)),transparent 100%)}
.scr.pinned>.scrollbody.up{--ft:26px}
.mic2.pinned .scrollbody>*,.ce17.pinned .scrollbody>*{position:relative;z-index:2}
:root{--safe-bottom:0px}
html.web{--safe-bottom:env(safe-area-inset-bottom,0px)}
html.web .scr{padding-bottom:0}

/* badge on the Friends tab: challenges waiting */
.nav2 .ico{position:relative}
.ndot{position:absolute;top:-3px;right:6px;min-width:17px;height:17px;border-radius:9px;background:#E8459B;color:#fff;font-size:10.5px;font-weight:800;line-height:1;display:grid;place-items:center;padding:0 4px;font-style:normal;border:2px solid #fff;z-index:2}
/* queue: the searching ring spins around its own centre (WebKit rotates a root <svg> around 0 0 unless told otherwise) */
/* WebKit sizes an inset:-9px <svg> to the padding box (73px) and just shifts it — the ring orbited 9px off the avatar's centre; give it an explicit square */
.pc14 .av.q svg{width:96px;height:96px;left:-11.5px;top:-11.5px;right:auto;bottom:auto;transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
/* result reward row: the text column shrinks, the points pill never gets cut off on narrow phones */
.reward>div{flex:1 1 auto;min-width:0}
.reward .plus{flex:none}
/* home: nothing ever overflows under the menu — on a short screen the duel card gives up height (252 → 176 px),
   the characters scale with it, and the main button stays whole above the menu */
.scr.pinned.home2>.scrollbody>.modesB{flex:0 1 auto;min-height:0}
.scr.pinned.home2 .modesB .hero14{flex:0 1 252px;height:auto;min-height:176px}
.scr.pinned.home2 .hero15 .hg15,.scr.pinned.home2 .hero15 .hb15{height:calc(100% - 76px)}
.scr.pinned.home2>.scrollbody>.spacer{flex:1 1 0;min-height:0}
/* incoming challenge: the speech bubble hugs its text and never leaves the screen */
.inbubble{width:auto!important;max-width:calc(50vw - 46px);min-width:96px}
/* result tally: the criterion name may wrap on narrow phones instead of being cut */
.tally .tt b{white-space:normal!important;line-height:1.15;overflow:visible!important}
/* collection set tiles: a long one-word set name ("Импрессионисты", "Impressionists") wraps with a hyphen instead of being cut */
.set1 b{white-space:normal;overflow:hidden;text-overflow:clip;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* confetti falls past the bottom edge of any phone and fades out — with a fixed 900px it came to rest on the button of tall screens */
.conf15 i{animation:fall15 1.9s ease-in forwards}
.conf i{animation-name:fall15}   /* same for the Plus celebration: 30 pieces rested over «Управлять подпиской…» on 944px-tall screens */
@keyframes fall15{80%{opacity:1}to{transform:translateY(calc(100vh + 40px)) rotate(540deg);opacity:0}}
/* locked collection cards: the set name ("Импрессионисты") is the whole caption — wrap with a hyphen instead of an ellipsis */
.asl.e b{white-space:normal;text-overflow:clip;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* paywall: the web version and the "prices loading" state show a note instead of the plans */
.pwweb{display:flex;flex-direction:column;gap:6px;padding:14px 16px;text-align:left;flex:none}
.pwweb b{font-size:16px;color:var(--ink)}.pwweb span{font-size:13.5px;line-height:1.4;color:#5b587a}
.cta17[disabled]{opacity:.55}
.docnote{font-size:13px;color:#77729a;margin:4px 2px 18px;line-height:1.4}
/* iPhone short launch (html.short: iOS gave the app 793 of 852 and paints the status-bar zone itself with theme-color = --strip):
   the page base takes the same colour and the screen's top edge fades into it — no hard stripe. A full launch never gets this class. */
html.web{--strip:#c9d7fa}
html.web.short,html.web.short body{background:var(--strip)}
html.web.short #device::after{content:'';position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(var(--strip),rgba(201,215,250,0));z-index:50;pointer-events:none}
/* narrow phones, owner's choices 26.09 (audit of small screens):
   «Who do we play with?» fits one line instead of pushing «Practice with Ino» under the main button;
   a long result title («Тренировка пройдена») goes to two lines instead of under the share button */
@media (max-width:376px){
.home2 .mtitle2{font-size:25px;letter-spacing:-.6px;gap:8px}
.res15 .vh{white-space:normal;font-size:25px;line-height:1.02;text-wrap:balance}
}
/* queue: «Тема выпадет случайно» on the left edge like the theme name under it, clear of the dice */
.theme14 .tt{padding-right:34px}.theme14 .tl{align-items:flex-start;text-align:left}
/* ===== as designed 27.09: every picture keeps its own proportions — the box follows the picture, never crops it, never letterboxes it ===== */
.pbx{display:block;position:relative;overflow:hidden;flex:none}
.pbx>img{display:block;width:100%;height:auto;aspect-ratio:auto var(--ar,1.33);object-fit:fill}
.ahero.fit{flex:none;overflow:visible;display:flex;justify-content:center;align-items:flex-start;background:none;padding:14px 16px 0;border-radius:28px 28px 0 0;max-height:none;aspect-ratio:auto}
.ahero.fit .pbx.phero{width:min(100%,calc(min(50vh,400px) * var(--ar)));border-radius:18px;box-shadow:0 10px 26px -10px #3a2a8a55;background:#efe8ff}
.ahero.fit .aclose{top:22px;right:24px;box-shadow:0 2px 8px #0003}
.art14 .ahero.fit img{height:auto;max-height:none;object-fit:fill}
.wkst{margin:12px 20px 0}.wkad{margin:12px 20px 0}
.hrow .pbx.hpx{width:calc(56px * var(--ar));max-width:96px;min-width:36px;border-radius:12px;margin-right:max(0px,calc(84px - 56px * var(--ar)))}
.show15 .pbx.shw{width:calc(70px * var(--ar));max-width:110px;min-width:44px;border-radius:14px}
.show15 .pbx.shw img{width:100%;height:auto;border-radius:0;object-fit:fill}
.pthumb img{width:auto;height:auto;max-width:62px;max-height:62px;object-fit:fill}
#device.short .pthumb img{max-width:50px;max-height:50px}
.scart{display:flex;align-items:center;justify-content:center;border:0;background:none;overflow:visible}
.scart img{width:auto;height:auto;max-width:100%;max-height:100%;border-radius:14px;border:2px solid #ffffff55;object-fit:fill}
.scpair figure{display:flex;flex-direction:column;align-items:center}.scpair img{width:auto;height:auto;max-width:100%;max-height:120px;object-fit:fill}
.v3 .pic.picbtn{flex:none}.v3 .pic.picbtn img{object-fit:fill}
/* collection: tiles in the picture's proportions (a masonry-like grid); empty slots in the original's proportions */
.cl15 .agrid{align-items:start}
.cl15 .asl.f .apic{aspect-ratio:auto;display:block}
.cl15 .asl.f .apic img{display:block;width:100%;height:auto;aspect-ratio:auto var(--ar,1);object-fit:fill}
.cl15 .asl.e .apic{aspect-ratio:var(--ar,1)}
.cl15 .asl.e.m .apic{display:block;border-style:dashed;opacity:.8}.cl15 .asl.e.m .apic img{width:100%;height:100%;object-fit:fill;filter:saturate(.5)}
.set1.done{border-color:#bfe8d1;background:#effaf4}.set1.done small{color:#16784f;font-weight:700}
/* rankings */
.lgnote{margin-top:8px;font-size:12px;color:#77729a;text-align:center}
.lghow small{font-size:11px;color:#8a84ab}
.lr .n small.lsub{color:#8a84ab;font-weight:600}
.zone.gapz{text-align:center;color:#8a84ab;background:none}
.lgempty{margin-top:12px}
.lu15.flat .lubadge{margin-top:40px}
/* invite sheet */
.qrbox .qr16{border-radius:10px}.qrwait{display:grid;place-items:center;height:100%;color:#8a84ab;font-size:13px}
.ivnow{display:block;width:100%;margin:10px 0 4px;text-align:center;font-size:13.5px}
/* empty blocks with a dashed outline sit inside the page gutter like the cards around them */
.gap{box-sizing:border-box;width:100%;align-self:stretch;flex:none}
.hrow .hx b{white-space:nowrap}
/* the album: works in their own proportions stack in three columns (no row gaps under short pictures) */
.cl15 .agrid.mas{display:flex;align-items:flex-start;gap:10px}
.cl15 .agrid.mas>.mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px}
/* «Кувшинка» — the frame of the Impressionists set */
.fr-lily{position:relative}
.bigav.fr-lily,.pfav.fr-lily img,.hav16.fr-lily,.pc14 .av.fr-lily{box-shadow:0 0 0 3px #fff,0 0 0 6px #6FC3A0,0 0 0 8px #F4A7C8,0 0 14px #9be0c399!important}
.pfav.fr-lily .ring{inset:-9px}

/* ---- Speakasso home (approved by the owner 27.09): a quiet glass friends card set lower, the accent on «С игроком» ---- */
.home2 .slot15{margin-top:20px}
.home2 .fcard.f16{background:linear-gradient(120deg,#ffffffd9,#ebe1ff8c);border:1.5px solid #fff;box-shadow:0 6px 18px #3a2a8a14;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.home2 .fcard.f16:before{display:none}
.home2 .f16 .ftxt b{color:#0c0d37}.home2 .f16 .ftxt small{color:#5b587a}
.home2 .fav16 img{box-shadow:0 3px 8px #3a2a8a22}
.home2 .fbtn16{background:#efe4ff;color:#6118d8;box-shadow:none}
.home2 .hero14.sel{border-color:#7b1cf2;box-shadow:0 0 0 2px #7b1cf2,0 16px 36px #7b1cf247,0 0 34px #b27bff66}
#device .home2 .hero14 .htxt{top:18px}
#device .home2 .hero14 strong.hm27{font-size:34px;line-height:1.05;letter-spacing:-1px;font-weight:900}
.home2 .rowB strong.hm27{font-size:20px}
/* 27.09 (owner): the main button kept touching «Тренировка» on common Android phones — the row keeps its height, there is always
   16 between it and the button, and the duel card gives way instead */
.scr.pinned.home2>.scrollbody>.spacer{flex:1 0 16px}
.scr.pinned.home2 .modesB .rowB{flex-shrink:0}
#device .scr.pinned.home2 .modesB .hero14{min-height:140px}
#device.short .scr.pinned.home2 .modesB .hero14{min-height:128px}
#device:not(.short) .scr.pinned.home2 .hero15 .hg15,#device:not(.short) .scr.pinned.home2 .hero15 .hb15{height:min(176px,calc(100% - 38px))}   /* the characters keep their size and stay below the large «С игроком» when the card gives way */
/* duels used up: the lock line sits under the title, so the characters and VS start lower */
#device:not(.short) .scr.pinned.home2 .hero15.lk27 .hg15,#device:not(.short) .scr.pinned.home2 .hero15.lk27 .hb15{height:min(176px,calc(100% - 64px));bottom:-22px}
#device .scr.pinned.home2 .hero15.lk27 .vs14.home15{top:68%}
#device.short .scr.pinned.home2 .hero15.lk27 .vs14.home15{top:76%}

/* ---- audit 27.09 (approved): round header, no zoom icon, «Соперник найден», achievement above the main button ---- */
.rt27 .st27{display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:inherit;color:inherit}
.rt27 .stl{font-size:16px;font-weight:800;line-height:1.15;color:#0c0d37;letter-spacing:-.2px;white-space:nowrap}
.rt27 .stl em{font-style:normal;color:#6721f6}
.rt27 .stb{display:flex;gap:5px}.rt27 .stb i{width:34px;height:5px;border-radius:3px;background:#d9ccf5}
.rt27 .stb i.on{background:#7b1cf2}.rt27 .stb i.done{background:#39B07A}
#app .zoom{display:none!important}
#app [data-act=zoom].plate,#app [data-act=zoom].gframe,#app .artWide[data-act=zoom]{cursor:zoom-in}
.q27 .pc14.op .av{box-shadow:0 0 0 3px #fff,0 0 0 6px #e8459b,0 0 28px 6px #e8459b80}
.q27 .gline27{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 0;padding:9px 16px;border-radius:18px;background:#ffffffcc;font-weight:700;font-size:15px;color:#0c0d37;width:max-content;max-width:100%;box-shadow:0 6px 16px #3a2a8a14;animation:tin .3s}
.q27 .gline27 i{font-style:normal;font-size:21px}
.q27 .gline27 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q27 .gline27.wait{visibility:hidden}
.q27 .theme14.lit27{box-shadow:0 0 0 2px #7b1cf2,0 12px 28px #7b1cf230}
.q27 .theme14.lit27 .tl{color:#7b1cf2;font-weight:800}
.achtoast.low27{top:auto;animation:atin27 .45s cubic-bezier(.22,.9,.3,1.2)}
.achtoast.low27.out{animation:atout27 .4s ease forwards}
@keyframes atin27{from{transform:translateY(40%) scale(.92);opacity:0}}
@keyframes atout27{to{transform:translateY(40%);opacity:0}}
/* logo (27.09.2026): same box as the old text — the share card keeps its height, the Plus badge stays in its row */
img.scbrand{display:block;height:15px;width:auto;margin:-2px 0;opacity:1}
.pwbadge .pwlogo{height:24px;width:auto;vertical-align:middle;margin-right:2px}
/* audit 27.09 · item 5: «Почему N?» / «Разбор» as buttons; history rows wrap instead of cutting a word */
#app .why3.pill27{display:flex;width:max-content;max-width:100%;align-items:center;gap:4px;margin:6px auto 0;padding:7px 12px;border-radius:12px;background:#efe4ff;color:#6118d8;font-size:14px;font-weight:800;white-space:nowrap;line-height:1.1}
#app .why3.pill27.hid{visibility:hidden}
.hi15 .hx small{flex-wrap:wrap;white-space:normal;row-gap:0;overflow:visible}
.hi15 .hx small span{white-space:nowrap}
.hi15 .hx small span:first-of-type{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hi15 .seg14 button{padding:0 4px;font-size:15px}