/* редактор историй v37 — извлечено из макета */
/* Макет: тёплая страница блога «Живой Ярмарки», небесная шапка редактора, редактирование прямо в карточке поста */
#yrEd{
 --page:#f6ead9; --paper:#fffaf2; --card:#ffffff; --ink:#3a2a1c; --ink2:#6f5a45; --mute:#a88c6c;
 --tag:#c0623f; --tagbg:#f9dccf;
 --sky1:#5db2f5; --sky2:#2f86d6; --skyA:#bfe0fb; --skyB:#e8f3fd; --skyInk:#1f4e73; --skyLine:#cfe6fb; --skySoft:#eef6fe;
 --pk1:#ff8fbf; --pk2:#d94f8a; --or1:#ffb347; --or2:#f0862a; --ok:#2f9d5a; --cloud:#ffffff;
 --shadow:rgba(43,110,168,.28); --warm-shadow:rgba(176,122,64,.30);
 --f-disp:"Lora",Georgia,"Times New Roman",serif; --f-ui:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){#yrEd:not([data-theme="light"]){
 --page:#1d1712; --paper:#27201a; --card:#221c17; --ink:#f3e7d8; --ink2:#cdb89f; --mute:#9c8467; --tag:#ff9d7a; --tagbg:#4a2c22;
 --skyA:#1d3a55; --skyB:#162a3d; --skyInk:#cfe6fb; --skyLine:#2b4a66; --skySoft:#1b2c3c; --cloud:#e8f1fa;
 --shadow:rgba(0,0,0,.5); --warm-shadow:rgba(0,0,0,.5); color-scheme:dark; color:var(--ink)}}
#yrEd[data-theme="dark"]{
 --page:#1d1712; --paper:#27201a; --card:#221c17; --ink:#f3e7d8; --ink2:#cdb89f; --mute:#9c8467; --tag:#ff9d7a; --tagbg:#4a2c22;
 --skyA:#1d3a55; --skyB:#162a3d; --skyInk:#cfe6fb; --skyLine:#2b4a66; --skySoft:#1b2c3c; --cloud:#e8f1fa;
 --shadow:rgba(0,0,0,.5); --warm-shadow:rgba(0,0,0,.5); color-scheme:dark; color:var(--ink)}
*{box-sizing:border-box}



/* верх */
.top{display:flex;align-items:center;gap:12px;padding-block:16px 12px}
.top h1{margin:0;font-family:var(--f-disp);font-size:22px;color:var(--ink);flex:1}
.mode{display:flex;background:var(--paper);border-radius:999px;padding:4px;box-shadow:0 6px 16px -10px var(--warm-shadow)}
.mode button{border:0;background:none;font:800 14px var(--f-ui);color:var(--ink2);padding:8px 14px;border-radius:999px;cursor:pointer}
.mode button[aria-pressed="true"]{background:linear-gradient(180deg,var(--sky1),var(--sky2));color:#fff;box-shadow:0 6px 14px -8px var(--sky2)}
.mode button:focus-visible,.tb button:focus-visible,.pb button:focus-visible{outline:3px solid var(--or1);outline-offset:2px}
/* карточка-редактор */
.card{position:relative;background:var(--card);border-radius:28px;box-shadow:0 0 0 2px var(--skyLine),0 24px 50px -28px var(--shadow);overflow:visible}
.sky{position:relative;height:64px;border-radius:28px 28px 0 0;background:linear-gradient(180deg,var(--skyA),var(--skyB));overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.sky .lb{position:relative;z-index:1;font-weight:900;font-size:12px;letter-spacing:.08em;color:var(--tag);background:var(--card);border-radius:12px;padding:5px 11px}
.sky .st{position:relative;z-index:1;font-size:13px;color:var(--skyInk);font-weight:800;transition:opacity .3s}
.clouds{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.clouds i{position:absolute;background:var(--cloud);border-radius:50px;opacity:.9;animation:drift 14s ease-in-out infinite alternate}
.clouds i::before,.clouds i::after{content:"";position:absolute;background:var(--cloud);border-radius:50%}
.clouds .a{width:96px;height:24px}.clouds .a::before{width:40px;height:40px;left:12px;top:-19px}.clouds .a::after{width:30px;height:30px;left:48px;top:-12px}
@keyframes drift{from{transform:translateX(-18px)}to{transform:translateX(26px)}}
/* обложка: показ целиком */
#yrEd .cover{position:relative;margin:14px 14px 0;border-radius:20px;overflow:hidden;min-height:64px}
#yrEd .cover.empty{border:2px dashed var(--skyLine);background:var(--skySoft);display:grid;place-items:center;height:96px;cursor:pointer}
#yrEd .cover.empty span{font-weight:800;color:var(--sky2);font-size:14px}
#yrEd .cover .bg{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(20px) brightness(.8);transform:scale(1.1)}
#yrEd .cover img{position:relative;display:block;margin:0 auto;max-width:100%;max-height:340px;object-fit:contain;border-radius:6px}
#yrEd .cover .ctl{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
#yrEd .chip{border:0;border-radius:999px;padding:7px 12px;font:800 12.5px var(--f-ui);background:rgba(255,255,255,.92);color:var(--skyInk);cursor:pointer;box-shadow:0 4px 12px -6px rgba(0,0,0,.4)}
/* поля */
.fields{padding:16px 18px 120px;cursor:text}
#title{display:block;width:100%;border:0;outline:0;background:none;font:700 26px/1.25 var(--f-disp);color:var(--ink);padding:0;margin-bottom:6px}
#title::placeholder{color:var(--mute)}
#yrEd .date{font-weight:800;color:var(--mute);font-size:14px;margin-bottom:10px}
span.lw{word-break:break-all}
#ed{position:relative;min-height:max(180px,55vh);overflow-wrap:break-word;outline:0;font-family:var(--f-disp);font-size:18px;line-height:1.72;letter-spacing:.005em;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty;font-kerning:normal;font-variant-ligatures:common-ligatures;color:var(--ink);padding-bottom:10px;caret-color:var(--sky2)}
#ed::after,.pv-body::after{content:"";display:block;clear:both}
#ed p,.pv-body p{margin:0 0 .55em}
#ed h2,.pv-body h2{font-family:var(--f-disp);font-size:1.75em;line-height:1.25;font-weight:700;margin:.7em 0 .35em;text-wrap:balance}
#ed h3,.pv-body h3{font-family:var(--f-disp);font-size:1.35em;line-height:1.3;font-weight:700;margin:.6em 0 .3em;text-wrap:balance}
#ed h4,.pv-body h4{font-family:var(--f-disp);font-size:1.12em;line-height:1.35;font-weight:700;margin:.5em 0 .25em;color:var(--ink2);letter-spacing:.01em}
#ed blockquote,.pv-body blockquote{margin:6px 0 14px;padding:10px 16px;border-radius:16px;background:var(--skySoft);color:var(--skyInk);font-family:var(--f-disp);font-style:italic}
#ed:empty::before{content:"Расскажите историю…";color:var(--mute)}
/* фото */
figure.ph{position:relative;margin:6px 0 12px;width:var(--w,100%)}
figure.ph img{display:block;width:100%;border-radius:16px;box-shadow:0 12px 24px -16px rgba(0,0,0,.55)}
figure.ph figcaption{font-size:13.5px;color:var(--mute);font-style:italic;padding:6px 4px 0;min-height:1.2em;outline:0}
#ed figure.ph figcaption:empty::before{content:"Подпись к фото…";color:var(--mute);opacity:.7}
figure.ph[data-a="left"]{float:left;margin:4px 16px 8px 0;--w:46%;width:var(--w)}
figure.ph[data-a="right"]{float:right;margin:4px 0 8px 16px;--w:46%;width:var(--w)}
figure.ph[data-a="center"]{clear:both;margin:8px auto 14px;width:var(--w,72%)}
figure.ph[data-a="wide"]{clear:both;width:100%}
@property --w{syntax:"<length-percentage>";inherits:false;initial-value:100%}
figure.ph{transition:--w .55s cubic-bezier(.2,.8,.2,1),margin .4s;shape-margin:10px}
figure.ph img{object-fit:cover;transition:border-radius .4s}
figure.ph:not([data-s="rect"]) img{border-radius:0;box-shadow:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.28))}
figure.ph:not([data-s="rect"]) figcaption{text-align:center}
#ed figure.ph.sel:not([data-s="rect"]) img{box-shadow:none;filter:drop-shadow(0 0 3px var(--sky2)) drop-shadow(0 10px 18px var(--sky2))}
figure.ph[data-a="free"]{position:absolute;margin:0;width:var(--w,46%);z-index:2;transition:none}
figure.ph.lift img{transform:scale(1.03);filter:drop-shadow(0 22px 26px rgba(0,0,0,.35))}
figure.ph.lift{z-index:30}
/* клик рядом с фигурной фотографией (вне её формы) попадает в текст */
#ed figure.ph[data-a="free"]{pointer-events:none}#ed figure.ph[data-a="free"]>img,#ed figure.ph[data-a="free"]>figcaption,#ed figure.ph[data-a="free"]>.handle{pointer-events:auto}
.sp{display:inline-block;height:0;vertical-align:baseline;pointer-events:none;-webkit-user-select:none;user-select:none;background:transparent}
.sp::selection{background:transparent}
#ed [data-al],.pv-body [data-al]{text-align:left!important;text-align-last:auto!important}
#ed [data-al^=justify],.pv-body [data-al^=justify]{text-align:justify!important;text-align-last:left!important}
#ed.lay [data-al]{text-align:left!important;text-align-last:left!important}
.pv-body{position:relative}
#ed figure.ph img{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#ed figure.ph{cursor:grab}
figure.ph.pressing img{transform:scale(.96);transition:transform .35s}
body.dragmode,body.dragmode *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
body.dragmode ::selection{background:transparent}
.pv .handle{display:none}
@media (min-width:900px){#ed{font-size:19px}.pv-body{font-size:19px}.pb{left:auto;right:16px;width:440px}}

.handle{position:absolute;left:14px;top:14px;z-index:9;width:38px;height:38px;opacity:.85;border-radius:50%;border:0;background:var(--card);color:var(--sky2);font:900 20px var(--f-ui);box-shadow:0 6px 16px -6px rgba(0,0,0,.45),0 0 0 2px var(--sky1);cursor:grab;touch-action:none;animation:pop .3s both}
.handle::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--sky1);opacity:.5;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{to{transform:scale(1.35);opacity:0}}
.ghost{position:fixed;z-index:50;pointer-events:none;opacity:.88;transform:rotate(-1.5deg);filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.ghost img{display:block;width:100%}
.mark{position:fixed;z-index:49;width:3px;border-radius:3px;background:var(--pk2);box-shadow:0 0 0 4px rgba(217,79,138,.18);pointer-events:none;animation:bl2 .9s ease-in-out infinite}
@keyframes bl2{50%{opacity:.4}}
.zone{position:fixed;z-index:48;display:grid;grid-template-columns:36fr 28fr 36fr;pointer-events:none}
.zone i{border-radius:18px;margin:0 3px;background:transparent;transition:background .25s,box-shadow .25s}
.zone[data-z="left"] i:nth-child(1),.zone[data-z="right"] i:nth-child(3),.zone[data-z="center"] i:nth-child(2),.zone[data-z="wide"] i{background:rgba(93,178,245,.10);box-shadow:inset 0 0 0 2px rgba(93,178,245,.45)}
.dragtip b{color:var(--sky2)}
.dragtip{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:51;background:var(--card);color:var(--ink);border-radius:16px;padding:9px 14px;font-weight:800;font-size:13.5px;box-shadow:0 12px 30px -12px var(--shadow),0 0 0 1.5px var(--skyLine);pointer-events:none;white-space:nowrap}
.pb .shapes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.pb .shapes button{padding:6px 0 5px;font-size:10.5px}
.pb .shapes i{display:block;width:26px;height:26px;margin:0 auto 3px;background:linear-gradient(135deg,var(--or1),var(--pk2))}
.pb .shapes button[aria-pressed="true"] i{background:#fff}
#ed figure.ph{cursor:pointer}
#ed figure.ph.sel img{box-shadow:0 0 0 3px var(--sky2),0 16px 30px -12px var(--sky2)}
/* загрузка: облака + обод */
.loading img{filter:blur(10px) saturate(.6);transform:scale(1.04);transition:filter .9s,transform .9s}
.loading{animation:emerge 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes emerge{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(80% at 50% 50%)}}
.puff{position:absolute;z-index:3;width:92px;height:24px;border-radius:30px;background:var(--cloud);box-shadow:0 8px 16px -8px var(--shadow);animation:pf 3s ease-in-out infinite;pointer-events:none;transition:opacity .6s,transform .8s}
.puff::before,.puff::after{content:"";position:absolute;background:var(--cloud);border-radius:50%}
.puff::before{width:38px;height:38px;left:12px;top:-19px}.puff::after{width:28px;height:28px;left:46px;top:-12px}
@keyframes pf{50%{translate:8px -4px}}
.gone .puff{opacity:0;transform:scale(1.4)}
.ring{position:absolute;left:50%;top:50%;z-index:4;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
 background:conic-gradient(from -90deg,var(--or1),var(--pk1),var(--pk2) calc(var(--p,0)*1%),rgba(255,255,255,.5) 0);display:grid;place-items:center;
 box-shadow:0 12px 26px -10px var(--pk2);animation:pop .45s cubic-bezier(.2,.9,.3,1.4) both;transition:opacity .4s,transform .4s}
.ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px dashed rgba(255,143,191,.65);animation:spin 6s linear infinite}
.ring b{position:relative;font-size:18px;color:var(--pk2);font-variant-numeric:tabular-nums}
.ring small{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11.5px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.orb{position:absolute;left:50%;top:50%;z-index:5;width:10px;height:10px;margin:-5px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff,0 0 4px var(--pk1);animation:orbit 1.6s linear infinite}
@keyframes orbit{from{transform:rotate(0) translateY(-39px)}to{transform:rotate(360deg) translateY(-39px)}}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop{from{transform:scale(.4);opacity:0}}
.gone .ring,.gone .orb{opacity:0;transform:scale(1.3)}
.spark{position:absolute;z-index:5;font-size:18px;pointer-events:none;animation:sp 1.3s ease-out both}
@keyframes sp{0%{transform:scale(0);opacity:0}30%{opacity:1}100%{transform:translateY(-28px) scale(1.2);opacity:0}}
/* надпись «видео обрабатывается» — небесный стиль ys-sky */
.vid-proc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:inherit;background:rgba(238,246,254,.92);backdrop-filter:blur(6px);z-index:6;font:700 14px var(--f-ui,'Nunito',system-ui,sans-serif);color:#1f4e73;pointer-events:none;animation:pvrise .5s cubic-bezier(.2,.8,.2,1) both}
.vid-proc span{font-size:28px;display:inline-block;animation:spin 2.4s linear infinite}
/* панель фото */
.pb{position:absolute;z-index:20;left:12px;right:12px;background:var(--card);border-radius:20px;padding:10px;box-shadow:0 18px 40px -16px var(--shadow),0 0 0 1.5px var(--skyLine);animation:pop .3s both}
.pb .row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.pb button{border:0;border-radius:12px;padding:7px 0 6px;background:var(--skySoft);color:var(--sky2);font:800 11.5px var(--f-ui);cursor:pointer}
.pb button[aria-pressed="true"]{background:linear-gradient(180deg,var(--sky1),var(--sky2));color:#fff}
.pb svg{display:block;margin:0 auto 3px;width:34px;height:22px}
.pb .row2{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;font-weight:800;color:var(--skyInk)}
.pb input[type=range]{flex:1 1 60%;accent-color:var(--sky2);min-width:0}
.pb .sm{padding:7px 10px;font-size:13px}
.pb .del{color:#c94848}
/* панель инструментов */
.dock{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:15;margin:14px 10px 0;padding:8px;border-radius:22px;background:var(--card);box-shadow:0 14px 34px -14px var(--shadow),0 0 0 1.5px var(--skyLine)}
.tb{display:flex;gap:7px;align-items:center;overflow-x:auto;padding-bottom:4px}
.sbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding-top:7px;border-top:1px solid var(--skyLine)}
.sst{font-size:12.5px;font-weight:700;color:var(--mute);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb button{flex:none;border:0;border-radius:15px;padding:9px 12px;font:800 14px var(--f-ui);color:var(--sky2);background:var(--skySoft);cursor:pointer}
.tb .photo{color:#fff;background:linear-gradient(180deg,var(--sky1),var(--sky2));box-shadow:0 8px 16px -8px var(--sky2)}
.hl{--hc:255,214,64;color:inherit;border-radius:.35em .15em .4em .2em;background-image:linear-gradient(100deg,rgba(var(--hc),0) .6%,rgba(var(--hc),.85) 2.2%,rgba(var(--hc),.62) 30%,rgba(var(--hc),.8) 70%,rgba(var(--hc),.55) 96%,rgba(var(--hc),0) 99.5%);
 background-repeat:no-repeat;background-position:0 78%;background-size:100% 78%;-webkit-box-decoration-break:slice;box-decoration-break:slice}
.hl.paint{animation:paint var(--pd,.7s) cubic-bezier(.45,.05,.3,1) var(--dl,0s) both}
@keyframes paint{from{background-size:0% 78%}to{background-size:100% 78%}}
.hl[data-c="y"]{--hc:255,214,64}.hl[data-c="p"]{--hc:255,128,182}.hl[data-c="g"]{--hc:120,222,140}.hl[data-c="b"]{--hc:110,190,255}.hl[data-c="o"]{--hc:255,164,72}
.st{text-decoration:none;background-image:linear-gradient(var(--pk2),var(--pk2));background-repeat:no-repeat;background-position:0 58%;background-size:100% 2px}
.st.paint{animation:strike .5s cubic-bezier(.45,.05,.3,1) var(--dl,0s) both}
@keyframes strike{from{background-size:0% 2px}to{background-size:100% 2px}}
.st{color:var(--mute)}
.hdp{flex-direction:column;align-items:stretch;gap:6px;width:min(260px,calc(100vw - 48px))}.hdp button{width:auto!important;height:auto!important;border-radius:12px!important;padding:8px 12px!important;text-align:left;background:var(--skySoft);color:var(--ink);font-family:var(--f-disp);line-height:1.2}.hdp button[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--sky2)}
.ffp{flex-direction:column;align-items:stretch;width:min(360px,calc(100vw - 48px));gap:8px;max-height:min(70vh,560px);overflow:auto}
.ffp .ffl{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ffp button{width:auto!important;height:auto!important;min-height:0;border-radius:12px!important;flex:none}
.ffp .ffl button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;border-radius:12px;border:0;background:var(--skySoft);color:var(--ink);cursor:pointer;text-align:left}
.ffp .ffl button b{font-size:19px;font-weight:400;line-height:1.2}.ffp .ffl button small{font:800 10.5px var(--f-ui);color:var(--skyInk);opacity:.8}
.ffp .ffl button[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--sky2)}
.ffp .fsz{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ffp .fsz span{font:800 12px var(--f-ui);color:var(--skyInk);margin-right:2px}
.ffp .fsz button{min-width:38px;padding:6px 8px;border-radius:10px;border:0;background:var(--skySoft);color:var(--skyInk);font:800 13px var(--f-ui);cursor:pointer}
.ffp .fsz button[aria-pressed="true"]{background:linear-gradient(180deg,var(--sky1),var(--sky2));color:#fff}
.ffp .fman{display:flex;align-items:center;gap:4px;font:800 12px var(--f-ui);color:var(--skyInk)}.ffp .fman input{width:60px;padding:5px 6px;border-radius:10px;border:1.5px solid var(--skyLine);background:var(--card);color:var(--ink);font:800 13px var(--f-ui)}
::highlight(keepsel){background-color:rgba(47,134,214,.32)}
.ffp .fhint{font:700 11.5px var(--f-ui);color:var(--ink2)}
.alp{flex-wrap:wrap;width:min(330px,calc(100vw - 48px));gap:6px}.alp button{display:flex;align-items:center;gap:8px;flex:1 1 140px;padding:7px 9px;border-radius:12px;border:0;background:var(--skySoft);color:var(--skyInk);font:800 12px var(--f-ui);cursor:pointer;text-align:left}.alp button[aria-pressed="true"]{background:linear-gradient(180deg,var(--sky1),var(--sky2));color:#fff}.alp button small{font:inherit}
.pal{position:absolute;z-index:16;display:flex;gap:8px;padding:8px 10px;border-radius:18px;background:var(--card);box-shadow:0 14px 30px -12px var(--shadow),0 0 0 1.5px var(--skyLine);animation:pop .25s both}
.pal button{width:30px;height:30px;border-radius:50%;border:3px solid var(--card);box-shadow:0 0 0 1.5px var(--skyLine);cursor:pointer;padding:0}
.pal button[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--sky2)}
.tb .mk{display:inline-flex;align-items:center;gap:6px}
.tb .mk i{width:14px;height:14px;border-radius:4px;transform:skew(-12deg);background:rgb(var(--hc,255,214,64))}
.dp{clear:both;margin:10px 0 16px;border-radius:22px;background:var(--skySoft);box-shadow:0 0 0 2px var(--skyLine);padding:10px;animation:pop .35s both;-webkit-user-select:none;user-select:none}
.dp .bar1{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.dp button{border:0;border-radius:12px;padding:7px 10px;font:800 13px var(--f-ui);background:var(--card);color:var(--sky2);cursor:pointer;box-shadow:0 4px 10px -8px var(--shadow)}
.dp button[aria-pressed="true"]{background:linear-gradient(180deg,var(--sky1),var(--sky2));color:#fff}
.dp .col{width:28px;height:28px;padding:0;border-radius:50%;border:3px solid var(--card)}
.dp .col[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--sky2)}
.dp .sz{width:34px;display:grid;place-items:center}.dp .sz i{display:block;border-radius:50%;background:currentColor}
.dp canvas{display:block;width:100%;aspect-ratio:4/3;border-radius:16px;background:#fffdf8;touch-action:none;cursor:crosshair;box-shadow:inset 0 0 0 1.5px var(--skyLine)}
.dp .bar2{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.dp .ok{margin-left:auto;color:#fff;background:linear-gradient(180deg,var(--or1),var(--or2))}
figure.ph.sign img{box-shadow:none;border-radius:0}
.dp .sep{width:1px;height:24px;background:var(--skyLine);margin:0 2px}
[hidden]{display:none!important}
.pv-body figure.ph{cursor:zoom-in}
figure.ph.vid .vplay{position:absolute;left:50%;top:var(--vy,45%);width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;pointer-events:none;
 background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(255,255,255,.75));box-shadow:0 10px 26px -8px rgba(20,60,110,.55),0 0 0 3px rgba(255,143,191,.55);animation:vpulse 2.4s ease-in-out infinite}
figure.ph.vid .vplay::before{content:"";margin-left:5px;border-left:18px solid var(--sky2);border-top:11px solid transparent;border-bottom:11px solid transparent}
@keyframes vpulse{50%{box-shadow:0 10px 26px -8px rgba(20,60,110,.55),0 0 0 8px rgba(255,179,71,.35)}}
figure.ph.vid.vsm .vplay{width:38px;height:38px;margin:-19px 0 0 -19px}figure.ph.vid.vsm .vplay::before{border-left-width:12px;border-top-width:7px;border-bottom-width:7px;margin-left:4px}
figure.ph.vid .vdur{position:absolute;right:10px;top:10px;padding:3px 9px;border-radius:999px;background:rgba(20,40,70,.62);color:#fff;font:800 12px var(--f-ui);pointer-events:none;letter-spacing:.02em}
.pv-body figure.ph.vid video.vlive{position:absolute;object-fit:cover;pointer-events:none;border-radius:inherit}
.pv-body figure.ph.vid .vplay{width:40px;height:40px;margin:-20px 0 0 -20px;opacity:.85}.pv-body figure.ph.vid .vplay::before{border-left-width:13px;border-top-width:8px;border-bottom-width:8px;margin-left:4px}
#ed figure.ph.landed::before{content:"";position:absolute;left:-4px;right:-4px;top:-4px;bottom:22px;border-radius:22px;pointer-events:none;animation:land .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes land{0%{box-shadow:0 0 0 0 rgba(93,178,245,.55),0 0 0 0 rgba(255,143,191,.35)}100%{box-shadow:0 0 0 26px rgba(93,178,245,0),0 0 0 44px rgba(255,143,191,0)}}
@media (prefers-reduced-motion:reduce){#ed figure.ph.landed::before{animation:none}}
.lbx .vmsg{position:fixed;left:50%;bottom:max(64px,calc(env(safe-area-inset-bottom,0px) + 56px));transform:translateX(-50%);max-width:min(520px,90vw);padding:12px 18px;border-radius:16px;background:rgba(255,255,255,.95);color:#1f4e73;font:700 14px/1.4 var(--f-ui);text-align:center;box-shadow:0 14px 34px -12px rgba(0,0,0,.6)}
.lbx video{position:fixed;border-radius:14px;background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
@media (prefers-reduced-motion:reduce){figure.ph.vid .vplay{animation:none}}
.lbx{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(14,22,34,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .45s,backdrop-filter .45s,-webkit-backdrop-filter .45s;touch-action:none}
.lbx.on{background:rgba(14,22,34,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.lbx img{position:fixed;max-width:none;object-fit:cover;border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);transition:left .5s cubic-bezier(.2,.9,.25,1),top .5s cubic-bezier(.2,.9,.25,1),width .5s cubic-bezier(.2,.9,.25,1),height .5s cubic-bezier(.2,.9,.25,1),border-radius .5s,clip-path .5s,transform .25s;will-change:left,top,width,height}
.lbx .cap{position:fixed;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom,0px));text-align:center;color:#fff;font:italic 600 16px var(--f-disp);text-shadow:0 2px 12px rgba(0,0,0,.6);opacity:0;transform:translateY(10px);transition:opacity .4s .2s,transform .4s .2s;padding:0 60px}
.lbx.on .cap{opacity:1;transform:none}
.lbx .nav{position:fixed;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font:900 22px/1 var(--f-ui);cursor:pointer;opacity:0;transition:opacity .3s .25s,background .2s}
.lbx.on .nav{opacity:1}.lbx .nav:hover{background:rgba(255,255,255,.28)}
.lbx .prv{left:max(12px,env(safe-area-inset-left,0px))}.lbx .nxt{right:max(12px,env(safe-area-inset-right,0px))}
.lbx .cls{position:fixed;top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font:900 20px/1 var(--f-ui);cursor:pointer;opacity:0;transition:opacity .3s .25s}
.lbx.on .cls{opacity:1}
.lbx .cnt{position:fixed;top:max(20px,env(safe-area-inset-top,0px));left:0;right:0;text-align:center;color:rgba(255,255,255,.8);font:800 13px var(--f-ui);opacity:0;transition:opacity .3s .25s}.lbx.on .cnt{opacity:1}
@media (prefers-reduced-motion:reduce){.lbx img{transition:none}}
.fghost{position:fixed;z-index:95;pointer-events:none;border-radius:14px;background-size:cover;background-position:center;opacity:.55;box-shadow:0 26px 50px -18px rgba(0,0,0,.5);transform:rotate(-1.5deg) scale(.96)}
#ed figure.ph.moving{opacity:.35;outline:2.5px dashed var(--sky1);outline-offset:3px}
.delask{position:absolute;z-index:220;background:var(--card);color:var(--ink);border-radius:16px;padding:12px 14px;box-shadow:0 24px 50px -18px rgba(0,0,0,.45),0 0 0 1.5px var(--skyLine);display:flex;flex-direction:column;gap:6px;max-width:300px;animation:pop .2s both;text-align:center}
.delask b{font:900 15px var(--f-ui)}.delask span{font-size:12.5px;color:var(--mute)}.delask div{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.delask button{border:0;border-radius:12px;padding:8px 12px;font:800 13px var(--f-ui);cursor:pointer;background:var(--skySoft);color:var(--sky2)}.delask .dy{background:#c94848;color:#fff}
figure.ph.delq{outline:3px solid #c94848;outline-offset:3px;border-radius:12px}
.gap{display:inline-block;height:1em;vertical-align:baseline}
.ur{flex:none;display:flex;gap:6px}.ur button{width:36px;height:36px;border-radius:50%;border:0;background:var(--skySoft);color:var(--sky2);font:900 17px/1 var(--f-ui);cursor:pointer;display:grid;place-items:center;transition:transform .15s,opacity .2s}.ur button:hover{transform:scale(1.08)}.ur button:disabled{opacity:.35;cursor:default;transform:none}
.sbar .sst{flex:1}
.note.nh{font-family:var(--f-disp);font-size:21px;font-weight:800;line-height:1.35}
.note.nq{font-family:var(--f-disp);font-style:italic;color:var(--skyInk)}

/* окно рисунка — плавающее, раскрывается из места вызова (как в macOS) */
.padback{position:fixed;inset:0;z-index:69;background:rgba(25,45,70,.22);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeb .3s both}
@keyframes fadeb{from{opacity:0}}
.padback.out{opacity:0;transition:opacity .3s}
.dp.float{position:fixed;z-index:70;inset:0;margin:auto;width:min(780px,calc(100vw - 24px));height:fit-content;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;
 box-shadow:0 0 0 1.5px var(--skyLine),0 40px 90px -30px rgba(0,0,0,.55);animation:none;transition:transform .42s cubic-bezier(.2,.9,.25,1.04),opacity .3s,width .35s,max-height .35s}
.dp.float.maxi{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);height:calc(100dvh - 16px)}
.dp .pbtns{position:absolute;top:10px;right:10px;z-index:4;display:flex;gap:8px}
.dp .pbtns button{width:26px;height:26px;border-radius:50%;border:0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25),0 4px 10px -4px rgba(0,0,0,.3);cursor:pointer;display:grid;place-items:center;font:900 15px/1 var(--f-ui);color:rgba(0,0,0,.5);transition:transform .2s}
.dp .pbtns button:hover{transform:scale(1.12)}
.dp .pbtns .y{background:#febc2e}.dp .pbtns .g{background:#28c840}
.dp .dtitle{margin-right:76px}
body.padopen{overflow:hidden}

/* одна кнопка «свернуть» справа вверху окна рисунка */
.dp{position:relative}
.dp .pmin{position:absolute;top:10px;right:10px;z-index:4;width:28px;height:28px;border-radius:50%;border:0;background:#febc2e;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25),0 4px 10px -4px rgba(0,0,0,.3);cursor:pointer;display:grid;place-items:center;font:900 16px/1 var(--f-ui);color:rgba(0,0,0,.5);transition:transform .2s}
.dp .pmin:hover{transform:scale(1.12)}
.dp .ttl0{font:800 14px var(--f-ui);color:var(--ink2);margin:2px 44px 10px 4px}
/* кнопка «редактировать рисунок» справа вверху рисунка */
#ed figure.ph .edbtn{position:absolute;top:8px;right:8px;z-index:8;width:30px;height:30px;border-radius:50%;border:0;background:#febc2e;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25),0 6px 14px -6px rgba(0,0,0,.45);cursor:pointer;display:grid;place-items:center;font:900 14px/1 var(--f-ui);color:rgba(0,0,0,.6);opacity:0;transition:opacity .25s,transform .2s;pointer-events:none}
@media (hover:hover){#ed figure.ph:hover .edbtn{opacity:1;pointer-events:auto}}
#ed figure.ph.sel .edbtn{opacity:1;pointer-events:auto}
#ed figure.ph .edbtn:hover{transform:scale(1.12)}
/* «Пишите здесь…» — аккуратнее, как в macOS */
#ed .note{outline:0!important;background:none!important}
#ed .note.empty::before{content:"Пишите здесь";color:rgba(120,120,128,.55);font-weight:500}
#ed .note:focus-within{box-shadow:0 0 0 3px rgba(93,178,245,.18);border-radius:6px}

/* курсор как на Mac: тонкий, акцентного цвета, мягко мигает; пока печатаете — горит ровно */
#ed{caret-color:transparent}
.mcaret{position:absolute;z-index:40;width:2px;border-radius:2px;background:var(--sky2);pointer-events:none;animation:mblink 1.06s ease-in-out infinite}
.mcaret.typing{animation:none;opacity:1}
@keyframes mblink{0%,46%{opacity:1}54%,92%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.mcaret{animation:none}}
/* «светофор» окна рисунка, как в macOS */
.dp .lights{display:flex;gap:8px;align-items:center;margin:0 2px 10px}
.dp .lights button{width:14px;height:14px;padding:0;border-radius:50%;border:0;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25);display:grid;place-items:center;font:900 10px/1 var(--f-ui);color:transparent;cursor:pointer}
.dp .lights .lr{background:#ff5f57}.dp .lights .ly{background:#febc2e}.dp .lights .lg{background:#28c840}
.dp .lights:hover button{color:rgba(0,0,0,.55)}
.dp .lights .ttl{margin-left:6px;font:800 13px var(--f-ui);color:var(--ink2)}
.dp.mini>*:not(.lights){display:none!important}
.dp.mini{padding:10px 12px;cursor:pointer}
.dp.mini .lights{margin:0}
.dp.maxi{position:fixed;inset:max(8px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));z-index:60;margin:0;overflow:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.45)}
.ask{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(20,40,60,.28);animation:pop .2s both}
.ask .box{background:var(--card);color:var(--ink);border-radius:18px;padding:18px;max-width:340px;margin:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);text-align:center}
.ask b{display:block;font-size:16px;margin-bottom:6px}.ask p{margin:0 0 14px;font-size:13.5px;color:var(--ink2)}
.ask .row{display:flex;flex-direction:column;gap:8px}
.ask button{border:0;border-radius:12px;padding:10px;font:800 14px var(--f-ui);cursor:pointer;background:var(--skySoft);color:var(--sky2)}
.ask .pri{background:linear-gradient(180deg,var(--sky1),var(--sky2));color:#fff}.ask .dan{color:#c94848}

#ed figure.ph>.rz{opacity:0;pointer-events:none;transition:opacity .25s,transform .2s,background .2s}
@media (hover:hover){#ed figure.ph:hover>.rz{opacity:.95;pointer-events:auto}
 #ed figure.ph:not(.sel):hover img{animation:hov 1.8s ease-in-out infinite}}
#ed figure.ph.sel>.rz{opacity:1;pointer-events:auto}
@keyframes hov{0%,100%{filter:drop-shadow(0 0 0 rgba(93,178,245,0)) drop-shadow(0 10px 14px rgba(0,0,0,.2))}50%{filter:drop-shadow(0 0 2px rgba(93,178,245,1)) drop-shadow(0 0 10px rgba(93,178,245,.8))}}
.rz:hover{background:var(--sky1)!important;transform:scale(1.25)}
.rz[data-d="nw"],.rz[data-d="se"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='rotate(45 14 14)'%3E%3Cpath d='M2 14l6-6v4h12V8l6 6-6 6v-4H8v4z' fill='%232f86d6' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 14 14, nwse-resize}.rz[data-d="ne"],.rz[data-d="sw"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='rotate(-45 14 14)'%3E%3Cpath d='M2 14l6-6v4h12V8l6 6-6 6v-4H8v4z' fill='%232f86d6' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 14 14, nesw-resize}.rz[data-d="e"],.rz[data-d="w"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='rotate(0 14 14)'%3E%3Cpath d='M2 14l6-6v4h12V8l6 6-6 6v-4H8v4z' fill='%232f86d6' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 14 14, ew-resize}.rz[data-d="n"],.rz[data-d="s"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='rotate(90 14 14)'%3E%3Cpath d='M2 14l6-6v4h12V8l6 6-6 6v-4H8v4z' fill='%232f86d6' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 14 14, ns-resize}
.rz[data-d="sw"]{bottom:calc(var(--imgB,0px) - 9px)!important}.rz[data-d="se"]{bottom:calc(var(--imgB,0px) - 9px)!important}
.rz[data-d="n"]{left:calc(50% - 22px);top:-7px;width:44px;height:12px;border-radius:8px}
.rz[data-d="s"]{left:calc(50% - 22px);bottom:calc(var(--imgB,0px) - 7px);width:44px;height:12px;border-radius:8px}
.rz[data-d="e"],.rz[data-d="w"]{top:calc((100% - var(--imgB,0px))/2 - 22px)!important;height:44px!important}
@media (pointer:coarse){.rz[data-d="n"],.rz[data-d="s"]{width:52px;height:16px;left:calc(50% - 26px)}}
body.resizing,body.resizing *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='rotate(45 14 14)'%3E%3Cpath d='M2 14l6-6v4h12V8l6 6-6 6v-4H8v4z' fill='%232f86d6' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 14 14, nwse-resize!important;user-select:none!important}
/* текст в любом месте */
#ed .note{position:absolute;z-index:3;min-width:40px;max-width:var(--mw,240px);padding:0 4px;border-radius:6px;outline:1.5px dashed transparent;transition:outline-color .25s,background .25s;line-height:inherit}
#ed .note:hover,#ed .note:focus-within{outline-color:rgba(93,178,245,.6);background:rgba(232,243,253,.35)}
#ed .note.empty::before{content:"Пишите здесь…";color:var(--mute);position:absolute;left:4px;top:0;pointer-events:none;white-space:nowrap}
#ed p.typed{transition:margin-top .35s cubic-bezier(.2,.8,.2,1)}
.fields{position:relative}
.fields::after{content:"Нажмите в любом свободном месте — и пишите";position:absolute;left:18px;right:18px;bottom:34px;text-align:center;font-size:12.5px;color:var(--mute);opacity:.55;transition:opacity .3s;pointer-events:none;border-top:1.5px dashed var(--skyLine);padding-top:8px}
@media (hover:hover){.fields:hover::after{opacity:.8}}
/* кнопка «Сохранить» как в Mac */
.savebtn{flex:none;display:flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:9px 16px;font:900 13.5px var(--f-ui);cursor:pointer;
 color:#fff;background:linear-gradient(180deg,var(--or1),var(--or2));box-shadow:0 12px 26px -10px var(--or2);transition:background .35s,box-shadow .35s,transform .2s}
.savebtn:hover{transform:translateY(-2px)}
.savebtn[data-st="saved"],.savebtn[data-st="local"]{background:linear-gradient(180deg,#9fd0f7,#5db2f5);box-shadow:0 10px 22px -12px #2f86d6;cursor:default;transform:none}
.savebtn[data-st="saving"]{background:linear-gradient(180deg,#8cc6f4,#4a9de6);cursor:progress}
.savebtn[data-st="error"]{background:linear-gradient(180deg,#ff9a9a,#d65555)}
.savebtn .spin{width:14px;height:14px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sp 1s linear infinite;display:none}
.savebtn[data-st="saving"] .spin{display:block}
.savebtn small{font-weight:700;opacity:.85}
@keyframes sp{to{transform:rotate(360deg)}}
.savebtn:focus-visible{outline:3px solid var(--or1);outline-offset:3px}
.yr-toast .tb2{margin-left:4px}





/* ручки растягивания */
.rz{position:absolute;z-index:7;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px var(--sky2),0 4px 10px -3px rgba(0,0,0,.4);touch-action:none;animation:pop .25s both}
.rz::after{content:"";position:absolute;inset:-8px}
.rz[data-d="nw"]{left:-9px;top:-9px;cursor:nwse-resize}.rz[data-d="ne"]{right:-9px;top:-9px;cursor:nesw-resize}
.rz[data-d="sw"]{left:-9px;bottom:calc(var(--capH,0px) - 9px);cursor:nesw-resize}.rz[data-d="se"]{right:-9px;bottom:calc(var(--capH,0px) - 9px);cursor:nwse-resize}
.rz[data-d="e"]{right:-7px;top:calc(50% - 22px);width:12px;height:36px;border-radius:8px;cursor:ew-resize}.rz[data-d="w"]{left:-7px;top:calc(50% - 22px);width:12px;height:36px;border-radius:8px;cursor:ew-resize}
@media (pointer:coarse){.rz{width:26px;height:26px}.rz[data-d="nw"],.rz[data-d="sw"]{left:-13px}.rz[data-d="ne"],.rz[data-d="se"]{right:-13px}.rz[data-d="nw"],.rz[data-d="ne"]{top:-13px}.rz[data-d="e"],.rz[data-d="w"]{width:16px;height:44px}}
.sizebadge{position:absolute;z-index:8;left:50%;top:-34px;transform:translateX(-50%);background:var(--skyInk);color:#fff;border-radius:10px;padding:3px 8px;font:800 12px var(--f-ui);font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap}
#ed p.typed{min-height:1.65em}
.dp canvas{background:transparent!important;box-shadow:none!important}
.dp .dtitle .qk{display:inline-flex;gap:6px;margin-left:8px;vertical-align:middle;flex-wrap:wrap}.dp .dtitle.sm{font:700 12.5px var(--f-ui);color:var(--ink2)}
.dp .dtitle{font:800 15px var(--f-disp);color:var(--skyInk);margin:2px 4px 10px}
figure.ph.doc img{box-shadow:none;border-radius:0}
figure.ph.doc .replay{border-radius:0}
.docs{clear:both;margin:10px 0 16px;border-radius:22px;background:var(--skySoft);box-shadow:0 0 0 2px var(--skyLine);padding:12px;animation:pop .35s both}
.docs .dhd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 4px 10px;position:relative;padding-right:40px}
.docs .dhd b{font:700 18px var(--f-disp);color:var(--skyInk)}.docs .dhd span{font-size:13px;color:var(--ink2)}
.docs .dx{position:absolute;right:0;top:-2px;border:0;border-radius:50%;width:32px;height:32px;background:var(--card);color:var(--sky2);cursor:pointer}
.docs .dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.docs .dcard{border:0;background:var(--card);border-radius:16px;padding:8px 8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center;box-shadow:0 8px 18px -12px var(--shadow);animation:rise .5s both;transition:transform .25s,box-shadow .25s;font-family:var(--f-ui);color:var(--ink)}
.docs .dcard:hover,.docs .dcard:focus-visible{transform:translateY(-4px) rotate(-1deg);box-shadow:0 16px 26px -14px var(--shadow)}
.docs .dcard canvas{display:block;border-radius:6px}
.docs .dcard b{font-size:14px}.docs .dcard small{font-size:11px;color:var(--mute);text-align:center}
.dp .grp{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.dp .lbl{font:900 11px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:2px 2px 0}
.dp .tools{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.dp .tl{flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:76px;padding:7px 6px 6px;border-radius:14px}
.dp .tl svg{width:44px;height:24px}
.dp .tl small{font:700 10px var(--f-ui);opacity:.75}
.dp .tl[aria-pressed="true"] small{opacity:.95}
.dp .rng{display:flex;align-items:center;gap:8px;font:800 12.5px var(--f-ui);color:var(--skyInk);flex-wrap:wrap}
.dp .rng input{flex:1 1 120px;min-width:0;accent-color:var(--sky2)}
.dp .rng output{min-width:34px;font-variant-numeric:tabular-nums;text-align:right}
.dp .stage{position:relative}
.dp .fonts{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.dp .fonts button{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:84px;padding:6px 8px;border-radius:14px}
.dp .fonts button b{font-size:21px;font-weight:400;line-height:1.15;color:var(--ink)}
.dp .fonts button small{font:700 10px var(--f-ui);opacity:.75}
.dp .tstyle{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dp .tstyle button{min-width:40px;font:900 15px var(--f-disp)}
.dp .tstyle .hint{font:700 12px var(--f-ui);color:var(--ink2)}
.dp .ted{position:absolute;z-index:4;min-width:1.2em;min-height:1em;padding:0 2px;margin:-2px 0 0 -3px;outline:2px dashed var(--sky1);outline-offset:2px;border-radius:6px;background:rgba(255,255,255,.35);white-space:pre;display:inline-block;line-height:1.3;cursor:text;caret-color:var(--sky2)}
.dp .ted:empty::before{content:"Печатайте…";opacity:.45}
.dp.textmode canvas{cursor:text}
.dp .tool{position:absolute;left:0;top:0;width:64px;height:64px;pointer-events:none;z-index:3;opacity:0;transition:opacity .2s;transform-origin:4px 60px}
.dp .tool.on{opacity:1}
.dp .tool svg{width:64px;height:64px;filter:drop-shadow(2px 6px 6px rgba(0,0,0,.25));transition:transform .12s}
.dp .tool.down svg{transform:translate(-1px,2px) scale(.97)}
.dp .col.gold{background:linear-gradient(135deg,#7a5a14,#f5d37a 45%,#b8892b 60%,#fff1c2)!important}
.dp .col.silver{background:linear-gradient(135deg,#6d7680,#f2f5f8 45%,#9aa3ad 60%,#ffffff)!important}
figure.ph .replay{position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:auto;cursor:pointer}
figure.ph .rtool{position:absolute;left:0;top:0;width:56px;height:56px;pointer-events:none;transform-origin:4px 52px;transition:opacity .4s}
figure.ph .rtool svg{width:56px;height:56px;filter:drop-shadow(2px 6px 6px rgba(0,0,0,.25))}

.tb .pub{margin-left:auto;color:#fff;background:linear-gradient(180deg,var(--or1),var(--or2));box-shadow:0 8px 16px -8px var(--or2)}
.hint{margin:10px 6px 0;font-size:13px;color:var(--ink2)}
/* просмотр */
.pv{display:none}
body.view #yrEd .pv{display:block}body.view #yrEd .card,body.view #yrEd .hint{display:none}
#yrEd .post{background:var(--paper);border-radius:30px;overflow:hidden;box-shadow:0 22px 44px -26px var(--warm-shadow)}
.pv-cover{position:relative;overflow:hidden;animation:fadein .9s both}
.pv-cover .bg{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(22px) brightness(.8);transform:scale(1.1)}
.pv-cover img{position:relative;display:block;margin:0 auto;max-width:100%;max-height:420px;object-fit:contain;animation:coverin 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes coverin{from{transform:scale(1.06);filter:blur(6px)}}
@keyframes fadein{from{opacity:.2}}
.pv-in{padding:18px 20px 24px}
.tg{display:inline-block;font-weight:900;font-size:12px;letter-spacing:.08em;color:var(--tag);background:var(--tagbg);border-radius:12px;padding:5px 11px}
.pv h2{font:700 clamp(26px,6vw,34px)/1.2 var(--f-disp);margin:10px 0 4px;text-wrap:balance}
#yrEd .pv .date{margin-bottom:14px}
.pv-body{font-size:18px;line-height:1.72;max-width:62ch;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty;letter-spacing:.005em}
.pv-body > *{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:.001;transform:translateY(16px)}}
.pv-body figure.ph{overflow:hidden;border-radius:16px}
.pv-body figure.ph::after{content:"";position:absolute;inset:0 0 auto;height:calc(100% - 28px);background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;animation:glint 2.4s 1.1s ease-in-out both;pointer-events:none;border-radius:16px}
@keyframes glint{to{background-position:-60% 0}}
.pv-foot{display:flex;gap:10px;align-items:center;padding:0 20px 20px;color:var(--mute);font-weight:800;font-size:14px}
.pv-foot .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--or1),var(--pk2));display:grid;place-items:center;color:#fff}
/* тост */
.yr-toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;display:flex;gap:10px;align-items:center;background:var(--card);color:var(--ink);border-radius:18px;padding:10px 12px 10px 16px;box-shadow:0 16px 36px -14px var(--shadow),0 0 0 1.5px var(--skyLine);font-weight:700;font-size:14px;max-width:calc(100% - 32px);animation:pop .3s both}
.yr-toast button{border:0;border-radius:12px;padding:7px 12px;font:800 13px var(--f-ui);background:var(--skySoft);color:var(--sky2);cursor:pointer}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:440px){figure.ph[data-a="left"],figure.ph[data-a="right"]{--w:48%}#title{font-size:23px}}