/* axiom page renderer — how a profile page built in the editor looks.
   Shared by the editor preview (my-editor-v2.html) and the published
   examples on the landing page (index.html), so both always match.
   Editor-only chrome (maximize / immersive / panels) stays in the editor. */
.ed-phone{
  position:relative;
  width:var(--pw,404px);height:var(--ph,459px);border-radius:38px;padding:14px;
  background:#0c0c0c;border:1px solid transparent;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.6);
  transition:border-color .15s ease;
}
.ed-phone.ed-frame-bordered{border:var(--ed-border,1px solid rgba(255,255,255,.1))}
.ed-phone.is-resizing{transition:none;user-select:none}
.ed-phone.ed-hide-avatar .ed-phone-avatar{display:none}

.ed-resize-edge{position:absolute;z-index:2}
.ed-resize-edge.t{top:-7px;left:18px;right:18px;height:14px;cursor:ns-resize}
.ed-resize-edge.b{bottom:-7px;left:18px;right:18px;height:14px;cursor:ns-resize}
.ed-resize-edge.l{left:-7px;top:18px;bottom:18px;width:14px;cursor:ew-resize}
.ed-resize-edge.r{right:-7px;top:18px;bottom:18px;width:14px;cursor:ew-resize}

.ed-resize-corner{
  position:absolute;z-index:3;width:16px;height:16px;border-radius:50%;
  background:#6F7684;border:2px solid #0c0c0c;
  opacity:0;transition:opacity .15s ease;
}
.ed-phone:hover .ed-resize-corner{opacity:1}
.ed-resize-corner.tl{top:-8px;left:-8px;cursor:nwse-resize}
.ed-resize-corner.tr{top:-8px;right:-8px;cursor:nesw-resize}
.ed-resize-corner.bl{bottom:-8px;left:-8px;cursor:nesw-resize}
.ed-resize-corner.br{bottom:-8px;right:-8px;cursor:nwse-resize}

.ed-phone-screen{
  position:relative;height:100%;border-radius:26px;overflow:hidden;
  color:var(--profile-text,#fff);transition:color .2s ease;
}
.ed-phone-bg{
  position:absolute;inset:0;z-index:0;
  background:var(--profile-bg,#111111);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transition:background .2s ease;
}
.ed-phone-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(0,0,0,0);transition:background .2s ease;
}
.ed-phone-content{
  position:relative;z-index:2;height:100%;padding:30px 22px 22px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:padding .2s ease;
}
.ed-phone-header-row{display:contents}
.ed-phone-identity{display:flex;flex-direction:column;align-items:center}
.ed-phone-text{display:contents}
.ed-phone-banner{display:none}
.ed-phone-stats{display:none}
.ed-phone-stories{display:none}
.ed-phone-actions{display:none}
.ed-phone-handle{display:none;font-family:var(--mono);font-size:calc(var(--text-size,12px) * .83);color:var(--profile-muted,#B2AEAE);margin:0 0 6px}
.ed-phone-avatar{
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:var(--profile-accent,#6F7684);color:var(--profile-on-accent,#fff);font:700 28px var(--sans);
  margin-bottom:14px;flex:none;
}
.ed-phone-name{font-size:var(--name-size,19px);letter-spacing:-.03em;margin:0 0 4px;font-weight:var(--name-weight,700)}
.ed-phone-bio{font-size:var(--text-size,12px);line-height:1.5;color:var(--profile-muted,#B2AEAE);margin:0 0 22px}
.ed-phone-skills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0}
.ed-phone-skills:not(:empty){margin-bottom:22px}
.ed-phone-skill{
  padding:4px 11px;border-radius:999px;font-size:calc(var(--text-size,12px) * .83);
  border:1px solid color-mix(in srgb, var(--profile-muted,#B2AEAE), transparent 65%);color:var(--profile-muted,#B2AEAE);
}
.ed-phone[data-align="left"] .ed-phone-skills{justify-content:flex-start}

/* Click-to-edit affordance — editor only (its preview phone is .ed-can-edit):
   hovering a preview element that opens a settings panel gets a soft dashed
   highlight so it reads as clickable. Visitors never see these lines. */
.ed-can-edit :is(.ed-phone-avatar,.ed-phone-name,.ed-phone-bio,.ed-phone-handle,.ed-phone-banner,.ed-phone-player,.ed-phone-gallery,.ed-phone-video,.ed-phone-stats,.ed-phone-skills:not(:empty)){cursor:pointer;transition:outline-color .15s ease,background .15s ease}
.ed-can-edit :is(.ed-phone-avatar,.ed-phone-name,.ed-phone-bio,.ed-phone-handle,.ed-phone-skills:not(:empty)):hover{outline:2px dashed color-mix(in srgb, var(--profile-accent,#6F7684) 55%, transparent);outline-offset:3px;border-radius:6px}
.ed-can-edit :is(.ed-phone-banner,.ed-phone-player,.ed-phone-gallery,.ed-phone-video,.ed-phone-stats):hover{outline:2px dashed color-mix(in srgb, var(--profile-accent,#6F7684) 55%, transparent);outline-offset:-2px}
.ed-phone-links{display:flex;flex-direction:column;gap:var(--link-gap,8px);width:100%}
.ed-phone-link{
  display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:12px;
  border:1px solid transparent;background:rgba(255,255,255,.04);
  font-size:var(--text-size,12px);color:inherit;text-decoration:none;
  transition:border-color .15s ease;
}
.ed-phone-link-left{display:flex;align-items:center;gap:9px;min-width:0}
.ed-phone-link-ico{flex:none;display:flex;color:var(--profile-accent,#6F7684)}
.ed-phone-link-text{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.ed-phone-link-text b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-phone-link-url{font-size:calc(var(--text-size,12px) * .75);color:var(--profile-muted,#B2AEAE);opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-phone-link-arrow{flex:none;display:flex;align-items:center;justify-content:center;color:var(--profile-accent,#6F7684)}
.ed-phone-link-arrow.is-circled{width:22px;height:22px;border-radius:50%;background:color-mix(in srgb, var(--profile-accent,#6F7684) 16%, transparent)}
.ed-phone-btn{
  height:28px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb, var(--profile-muted,#B2AEAE), transparent 70%);
  background:transparent;color:inherit;font:11px var(--sans);cursor:pointer;
}
.ed-phone-btn-primary{background:var(--profile-accent,#6F7684);border-color:transparent;color:var(--profile-on-accent,#fff)}

/* ── Template: Bento — profile tile (horizontal) + stats tile + link tiles, all as a grid ── */
.ed-phone[data-template="bento"] .ed-phone-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--link-gap,8px);text-align:left;align-content:start}
.ed-phone[data-template="bento"] .ed-phone-header-row{
  display:flex;grid-column:1/-1;background:rgba(255,255,255,.05);border-radius:14px;padding:14px;
}
.ed-phone[data-template="bento"] .ed-phone-identity{flex-direction:row;align-items:center;gap:12px}
.ed-phone[data-template="bento"] .ed-phone-avatar{width:52px;height:52px;font-size:20px;margin-bottom:0}
.ed-phone[data-template="bento"] .ed-phone-text{display:flex;flex-direction:column}
.ed-phone[data-template="bento"] .ed-phone-handle{display:block;order:-1;margin:0 0 1px}
.ed-phone[data-template="bento"] .ed-phone-bio{margin-bottom:0;font-size:calc(var(--text-size,12px) * .9)}
.ed-phone[data-template="bento"] .ed-phone-links{display:contents}
.ed-phone[data-template="bento"] .ed-phone-link{
  position:relative;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;
  height:74px;background:rgba(255,255,255,.05);
}
.ed-phone[data-template="bento"] .ed-phone-link-arrow{position:absolute;right:12px;bottom:10px}
.ed-phone[data-template="bento"] .ed-phone-link-left{max-width:100%}
/* The arrow sits in the tile's bottom-right corner, level with the address line
   under the name. That line always keeps clear of it (--arrow-room); the name
   keeps its full width unless the tile is low enough for the arrow to reach it
   too (--name-room: compact tiles, a hidden address, a custom tile height). */
.ed-phone[data-template="bento"] .ed-phone-link:not(.is-featured):not(.is-wide):has(.ed-phone-link-arrow){--arrow-room:14px;--arrow-block:22px}
.ed-phone[data-template="bento"] .ed-phone-link:not(.is-featured):not(.is-wide):has(.ed-phone-link-arrow.is-circled){--arrow-room:24px;--arrow-block:30px}
.ed-phone[data-template="bento"]:is([data-linksize="s"],.ed-links-nourl) .ed-phone-link{--name-room:var(--arrow-block,22px)}
.ed-phone[data-template="bento"] .ed-phone-link:not(.is-featured):not(.is-wide):has(.ed-phone-link-arrow) .ed-phone-link-left{max-width:calc(100% - var(--name-room,0px))}
.ed-phone[data-template="bento"] .ed-phone-link:not(.is-featured):not(.is-wide):has(.ed-phone-link-arrow) .ed-phone-link-url{padding-right:max(0px, var(--arrow-room,14px) - var(--name-room,0px))}
.ed-phone[data-template="bento"] .ed-phone-link.is-wide{grid-column:1/-1}
/* A tile alone in its row is a full-width row: text on the left, arrow centred on the right. */
.ed-phone[data-template="bento"] .ed-phone-link.is-wide{flex-direction:row;align-items:center;justify-content:space-between}
.ed-phone[data-template="bento"] .ed-phone-link.is-wide .ed-phone-link-arrow{position:static}

/* ── Template: Glass — ported from the old site's renderGlass(): a hero
   card and each link as its own separate frosted-glass panel (not one
   big pane), so the canvas background ("Фон") shows through the gaps
   between them and is genuinely blurred by each panel individually. ── */
.ed-phone[data-template="glass"]{background:transparent;padding:0;box-shadow:none}
.ed-phone[data-template="glass"] .ed-phone-bg{background:transparent !important}
.ed-phone[data-template="glass"] .ed-phone-scrim{background:transparent !important}
.ed-phone[data-template="glass"] .ed-phone-screen{border-radius:38px}
.ed-phone[data-template="glass"] .ed-phone-content{
  margin:0;height:100%;padding:26px 20px;border-radius:38px;
  background:transparent;gap:14px;overflow-y:auto;
}
.ed-phone[data-template="glass"] .ed-phone-identity{
  flex-direction:row;align-items:flex-start;gap:14px;text-align:left;width:100%;margin-bottom:0;
  padding:var(--box-pad,20px);border-radius:var(--box-radius,22px);flex:none;
  background:var(--box-bg,rgba(255,255,255,.1));border:var(--box-border,1px solid rgba(255,255,255,.22));
  backdrop-filter:blur(var(--box-blur,24px)) saturate(1.3);-webkit-backdrop-filter:blur(var(--box-blur,24px)) saturate(1.3);
}
.ed-phone[data-template="glass"] .ed-phone-avatar{margin-bottom:0}
.ed-phone[data-template="glass"] .ed-phone-text{display:flex;flex-direction:column;flex:1;min-width:0}
.ed-phone[data-template="glass"] .ed-phone-handle{display:block}
.ed-phone[data-template="glass"] .ed-phone-bio{margin-bottom:0}
.ed-phone[data-template="glass"] .ed-phone-links{gap:var(--link-gap,10px)}
.ed-phone[data-template="glass"] .ed-phone-link{
  position:relative;padding:calc(var(--box-pad,20px) * .65) calc(var(--box-pad,20px) * .7);
  border-radius:calc(var(--box-radius,22px) * .73);overflow:hidden;
  background:var(--box-bg,rgba(255,255,255,.08));border:var(--box-border,1px solid rgba(255,255,255,.2));
  backdrop-filter:blur(calc(var(--box-blur,24px) * .75)) saturate(1.3);-webkit-backdrop-filter:blur(calc(var(--box-blur,24px) * .75)) saturate(1.3);
  transition:background .2s ease,transform .2s ease;
}
.ed-phone[data-template="glass"] .ed-phone-link:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.ed-phone[data-template="glass"] .ed-phone-link::after{
  content:'';position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--profile-accent,#6F7684),transparent);
  opacity:0;transition:opacity .2s ease;
}
.ed-phone[data-template="glass"] .ed-phone-link:hover::after{opacity:1}
.ed-phone[data-template="glass"] .ed-phone-link-ico{
  width:28px;height:28px;align-items:center;justify-content:center;border-radius:9px;
  background:color-mix(in srgb, var(--profile-accent,#6F7684) 18%, transparent);
}


/* ── Template: Sidebar — identity column (with handle) beside a compact link list ── */
.ed-phone[data-template="sidebar"] .ed-phone-content{flex-direction:row;align-items:flex-start;text-align:left;gap:12px;flex-wrap:wrap}
.ed-phone[data-template="sidebar"] .ed-phone-header-row{display:contents}
.ed-phone[data-template="sidebar"] .ed-phone-identity{align-items:flex-start;flex:0 0 42%}
.ed-phone[data-template="sidebar"] .ed-phone-handle{display:block}
.ed-phone[data-template="sidebar"] .ed-phone-bio{text-align:left}
.ed-phone[data-template="sidebar"] .ed-phone-links{min-width:0}
.ed-phone[data-template="sidebar"] .ed-phone-link{padding:8px 10px}
.ed-phone[data-template="sidebar"] .ed-phone-link-text b{font-size:calc(var(--text-size,12px) * .92)}

/* ── Alignment / layout modifiers — apply on top of whichever template is active ── */
.ed-phone[data-align="left"] .ed-phone-content{align-items:flex-start;text-align:left}
.ed-phone[data-align="left"] .ed-phone-identity{align-items:flex-start;text-align:left}
.ed-phone[data-layout="simple"] .ed-phone-handle{display:none !important}
.ed-phone.ed-no-handle .ed-phone-handle{display:none !important}
.ed-phone[data-layout="simple"] .ed-phone-bio{margin-bottom:14px}
.ed-phone[data-layout="simple"] .ed-phone-link{padding-top:8px;padding-bottom:8px}

/* ── Avatar decoration ── */
.ed-phone-avatar{position:relative}
.ed-phone-avatar[data-deco="glow"]{box-shadow:0 0 18px var(--profile-accent,#6F7684),0 0 36px color-mix(in srgb, var(--profile-accent,#6F7684) 40%, transparent)}
.ed-phone-avatar[data-deco="ring"]{outline:2px solid var(--profile-accent,#6F7684);outline-offset:3px}
.ed-phone-avatar[data-deco="border"]{border:3px solid var(--profile-text,#fff)}
.ed-phone-avatar[data-deco="halo"]::after{
  content:'';position:absolute;inset:-14px;z-index:-1;border-radius:inherit;
  background:radial-gradient(circle,var(--profile-accent,#6F7684) 0%,transparent 65%);opacity:.55;
}

/* ── Name sparkle shimmer ── */
.ed-phone-name.ed-sparkle{
  background:linear-gradient(90deg, var(--profile-text,#fff) 0%, var(--profile-accent,#6F7684) 50%, var(--profile-text,#fff) 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:edSparkle 3s linear infinite;
}
@keyframes edSparkle{to{background-position:-220% center}}

/* ── Text font override — applies to every visible text run in the card ── */
.ed-phone[data-font] .ed-phone-name,.ed-phone[data-font] .ed-phone-bio,.ed-phone[data-font] .ed-phone-link-text,
.ed-phone[data-font] .ed-phone-handle,.ed-phone[data-font] .ed-phone-player-info{font-family:var(--phone-font,inherit)}
.ed-phone[data-font="sans"]{--phone-font:'Unbounded',sans-serif}
.ed-phone[data-font="inter"]{--phone-font:'Inter',sans-serif}
.ed-phone[data-font="grotesk"]{--phone-font:'Space Grotesk',sans-serif}
.ed-phone[data-font="serif"]{--phone-font:'DM Serif Display',Georgia,serif}
.ed-phone[data-font="playfair"]{--phone-font:'Playfair Display',Georgia,serif}
.ed-phone[data-font="mono"]{--phone-font:'DM Mono',monospace}
.ed-phone[data-font="jetbrains"]{--phone-font:'JetBrains Mono',monospace}
.ed-phone[data-font="bebas"]{--phone-font:'Bebas Neue',sans-serif}
.ed-phone[data-font="caveat"]{--phone-font:'Caveat',cursive}
.ed-phone[data-font="bebas"] .ed-phone-name{letter-spacing:.03em}
.ed-phone[data-font="caveat"] .ed-phone-name{font-size:calc(var(--name-size,19px) * 1.35)}

/* ── Banner strip above the identity row ── */
.ed-phone-banner{
  display:none;position:relative;overflow:hidden;
  width:calc(100% + 44px);margin:-30px -22px 16px;height:var(--banner-h,88px);flex:none;
  border-radius:var(--banner-radius,0px);
  background:linear-gradient(135deg,#3a2f28 0%,#8a6a4f 45%,#d8b98a 100%);background-size:cover;background-position:center;
  transition:filter .2s ease,opacity .2s ease,height .2s ease;
}
.ed-phone-banner.is-active{display:block}
.ed-phone-banner.has-fade::after{
  content:'';position:absolute;inset:auto 0 0 0;height:65%;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.6));
}
.ed-phone[data-template="glass"] .ed-phone-banner{margin:-26px -20px 14px;width:calc(100% + 40px);border-radius:38px 38px var(--banner-radius,0px) var(--banner-radius,0px)}
.ed-phone[data-template="bento"] .ed-phone-banner.is-active{grid-column:1/-1;width:100%;margin:0;border-radius:var(--banner-radius,14px)}
.ed-phone[data-template="bento"] .ed-phone-player.is-active{grid-column:1/-1;margin-bottom:0}
.ed-phone[data-template="sidebar"] .ed-phone-banner.is-active{width:100%;margin:0 0 14px;border-radius:var(--banner-radius,14px)}

/* ── Track player: 5 visual styles, real playback when a file is
   uploaded (object URL), fake/static progress otherwise. ── */
.ed-phone-player{display:none;width:100%;margin-bottom:8px;text-align:left}
.ed-phone-player.is-active{display:block}
.ed-mp{width:100%;font-size:11px;color:inherit;box-sizing:border-box}
.ed-mp-play{
  flex:none;border:0;cursor:pointer;background:var(--profile-accent,#6F7684);color:var(--profile-on-accent,#fff);
  display:flex;align-items:center;justify-content:center;font-size:10px;
}
.ed-mp-play:disabled{opacity:.45;cursor:not-allowed}
.ed-mp-title{font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-mp-artist{font-style:normal;font-size:9px;color:var(--profile-muted,#B2AEAE);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-mp-time{flex:none;font-size:9px;color:var(--profile-muted,#B2AEAE)}
.ed-mp-seek{flex:1;height:3px;accent-color:var(--profile-accent,#6F7684);min-width:0}
.ed-mp-row{display:flex;align-items:center;gap:10px}
.ed-mp-body{display:flex;flex-direction:column;overflow:hidden}
.ed-mp-eyebrow{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--profile-muted,#B2AEAE);margin-bottom:8px}

.ed-mp-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05)}
.ed-mp-bar .ed-mp-play{width:24px;height:24px;border-radius:50%}
.ed-mp-bar .ed-mp-body{flex:1;min-width:0}
.ed-mp-bar .ed-mp-seek{width:100%;margin-top:5px;display:block}

.ed-mp-minimal{display:flex;align-items:center;gap:9px}
.ed-mp-minimal .ed-mp-play{width:22px;height:22px;border-radius:50%;background:transparent;color:var(--profile-accent,#6F7684);font-size:12px}
.ed-mp-minimal .ed-mp-body{flex:1;min-width:0}

.ed-mp-glass{padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.05)}
.ed-mp-glass .ed-mp-title-lg{font-size:13px;margin-bottom:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-mp-glass .ed-mp-play{width:30px;height:30px;border-radius:50%}

.ed-mp-wave .ed-mp-row{margin-bottom:8px}
.ed-mp-wave .ed-mp-play{width:22px;height:22px;border-radius:50%;font-size:9px}
.ed-mp-wave .ed-mp-title{flex:1}
.ed-mp-bars{display:flex;align-items:flex-end;gap:2px;height:26px}
.ed-mp-bars i{flex:1;background:var(--profile-accent,#6F7684);opacity:.35;border-radius:1px;transition:opacity .15s ease}
.ed-mp-bars i.is-played{opacity:.95}
.ed-mp-wave.is-playing .ed-mp-bars i{animation:edMpWave 1s ease-in-out infinite}

.ed-mp-cassette{padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.ed-mp-reel{
  flex:none;width:36px;height:36px;border-radius:8px;background:rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
}
.ed-mp-reel i{
  display:block;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--profile-muted,#B2AEAE);border-top-color:var(--profile-accent,#6F7684);
}
.ed-mp-cassette.is-playing .ed-mp-reel i{animation:edMpSpin 1.1s linear infinite}
.ed-mp-cassette .ed-mp-row+.ed-mp-row{margin-top:12px}
.ed-mp-cassette .ed-mp-play{
  flex:none;height:26px;padding:0 12px;border-radius:6px;font-size:10px;letter-spacing:.03em;
}
@keyframes edMpSpin{to{transform:rotate(360deg)}}
@keyframes edMpWave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

.ed-phone[data-template="glass"] .ed-mp{background:var(--box-bg,rgba(255,255,255,.08));backdrop-filter:blur(calc(var(--box-blur,24px) * .6));-webkit-backdrop-filter:blur(calc(var(--box-blur,24px) * .6));border:var(--box-border,1px solid rgba(255,255,255,.2))}

/* ── Reveal / entrance gate over the phone screen ── */
.ed-phone-reveal{
  position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:30px;text-align:center;cursor:pointer;
  background:rgba(0,0,0,.55);backdrop-filter:blur(var(--reveal-blur,15px));-webkit-backdrop-filter:blur(var(--reveal-blur,15px));
}
.ed-phone-reveal.is-active{display:flex}
.ed-phone-reveal-text{font-size:13px;line-height:1.7;color:#fff;white-space:pre-wrap}
.ed-phone-reveal-hint{font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6)}

/* The entrance animation, the cursor trail and the click sound are drawn by
   app/utils/pageEffects.js (Web Animations + one canvas), not by rules here. */

/* ── Whole-phone tilt (static + on-hover listening) ── */
.ed-phone{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.ed-phone.ed-tilt-live{transition:none}
.ed-phone:not(.ed-tilt-live){transition:border-color .15s ease,transform .3s ease}

/* ── Polish: layout details every template shares ── */
/* Link captions read left-aligned next to their icon, even inside the
   centered Minimal layout (they used to inherit text-align:center). */
.ed-phone-link-text{text-align:left}
/* Left-aligned identity blocks keep skill chips on the same left edge. */
.ed-phone[data-template="bento"] .ed-phone-skills,
.ed-phone[data-template="glass"] .ed-phone-skills,
.ed-phone[data-template="sidebar"] .ed-phone-skills{justify-content:flex-start}
.ed-phone[data-template="glass"] .ed-phone-skills:not(:empty){margin:10px 0 0}
/* Bento: skills sit inside the profile tile — no extra gap under them. */
.ed-phone[data-template="bento"] .ed-phone-skills:not(:empty){margin:8px 0 0}
/* The page font applies to all page text — skills, stats and the player too. */
.ed-phone[data-font] .ed-phone-skill,.ed-phone[data-font] .ed-phone-stats,.ed-phone[data-font] .ed-mp{font-family:var(--phone-font,inherit)}
/* Glass: every player style sits in the same frosted panel as the links. */
.ed-phone[data-template="glass"] .ed-mp{padding:calc(var(--box-pad,20px) * .65) calc(var(--box-pad,20px) * .7);border-radius:calc(var(--box-radius,22px) * .73)}
/* Glass spaces its panels with the content gap, so the player needs no extra margin. */
.ed-phone[data-template="glass"] .ed-phone-player{margin-bottom:0}

/* ── Content blocks: gallery, stats, video — every template ── */
.ed-phone-main{display:contents}
.ed-phone-gallery{display:none;flex-wrap:wrap;width:100%;justify-content:center;gap:6px;margin:0 0 16px}
.ed-phone-gallery.is-active{display:flex}
.ed-phone[data-align="left"] .ed-phone-gallery{justify-content:flex-start}
.ed-phone-shot{flex:none;width:calc((100% - 18px) / 4);aspect-ratio:1;border-radius:12px;background:color-mix(in srgb, var(--profile-muted,#B2AEAE) 20%, transparent) center/cover no-repeat}
.ed-phone-stats.is-active{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;width:100%;margin:0 0 20px;
  text-align:center;font-size:calc(var(--text-size,12px) * .8);line-height:1.3;color:var(--profile-muted,#B2AEAE);
}
.ed-phone-stats b{display:block;margin-bottom:3px;font-size:calc(var(--name-size,19px) * 1.05);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--profile-text,#fff)}
.ed-phone-video{display:none;width:100%;margin:0 0 12px}
.ed-phone-video.is-active{display:block}
.ed-phone-video-cover{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#2b2b30,#101013) center/cover no-repeat}
.ed-phone-video-play{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;background:var(--profile-accent,#6F7684);transform:translate(-50%,-50%);box-shadow:0 10px 28px -8px rgba(0,0,0,.6)}
.ed-phone-video-play::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-35%,-50%);border-left:12px solid var(--profile-on-accent,#fff);border-top:7.5px solid transparent;border-bottom:7.5px solid transparent}
.ed-phone-video-meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:28px 12px 10px;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.6));color:#fff;text-align:left}
.ed-phone-video-meta b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:calc(var(--text-size,12px) * 1.02)}
.ed-phone-video-meta i{flex:none;font-style:normal;font-size:calc(var(--text-size,12px) * .78);padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.45)}
.ed-phone[data-font] .ed-phone-video-meta{font-family:var(--phone-font,inherit)}
.ed-phone[data-template="bento"] .ed-phone-gallery.is-active,
.ed-phone[data-template="bento"] .ed-phone-video.is-active{grid-column:1/-1;margin:0}
.ed-phone[data-template="bento"] .ed-phone-stats.is-active{grid-column:1/-1;margin:0;padding:14px;border-radius:14px;background:rgba(255,255,255,.05)}
.ed-phone[data-template="glass"] .ed-phone-gallery.is-active,
.ed-phone[data-template="glass"] .ed-phone-video.is-active{margin:0}
.ed-phone[data-template="glass"] .ed-phone-stats.is-active{
  margin:0;padding:calc(var(--box-pad,20px) * .7);border-radius:calc(var(--box-radius,22px) * .73);
  background:var(--box-bg,rgba(255,255,255,.08));border:var(--box-border,1px solid rgba(255,255,255,.2));
  backdrop-filter:blur(calc(var(--box-blur,24px) * .75)) saturate(1.3);-webkit-backdrop-filter:blur(calc(var(--box-blur,24px) * .75)) saturate(1.3);
}
.ed-phone[data-template="glass"] .ed-phone-shot,.ed-phone[data-template="glass"] .ed-phone-video-cover{border-radius:calc(var(--box-radius,22px) * .73)}
.ed-phone[data-template="glass"] .ed-phone-skill{
  border-color:color-mix(in srgb, var(--profile-text,#fff) 26%, transparent);
  color:color-mix(in srgb, var(--profile-text,#fff) 82%, transparent);
  background:color-mix(in srgb, var(--profile-text,#fff) 5%, transparent);
}

/* ── Main (featured) link: filled with the accent and set apart from the rest ── */
.ed-phone-links .ed-phone-link.is-featured{background:var(--profile-accent,#6F7684);color:var(--profile-on-accent,#fff);border:1px solid transparent}
.ed-phone-link.is-featured .ed-phone-link-ico,.ed-phone-link.is-featured .ed-phone-link-arrow,.ed-phone-link.is-featured .ed-phone-link-url{color:inherit}
.ed-phone-link.is-featured .ed-phone-link-url{opacity:.72}
.ed-phone-link.is-featured .ed-phone-link-text b{font-weight:600}
.ed-phone-link.is-featured .ed-phone-link-arrow.is-circled{background:color-mix(in srgb, currentColor 18%, transparent)}
.ed-phone-link-cover{flex:none;width:38px;height:38px;border-radius:10px;background:color-mix(in srgb, var(--profile-muted,#B2AEAE) 20%, transparent) center/cover no-repeat}
.ed-phone-link.is-featured.has-cover .ed-phone-link-left{gap:12px}
.ed-phone-link.is-featured.has-cover .ed-phone-link-cover{width:52px;height:52px;border-radius:12px}
.ed-phone-link.is-featured.has-cover .ed-phone-link-text b{font-size:calc(var(--text-size,12px) * 1.12)}
.ed-phone[data-template="bento"] .ed-phone-links .ed-phone-link.is-featured{grid-column:1/-1;height:auto;min-height:56px;flex-direction:row;align-items:center;justify-content:space-between;margin:0}
.ed-phone[data-template="bento"] .ed-phone-link.is-featured .ed-phone-link-arrow{position:static}
/* Glass keeps the main link frosted: an accent-tinted pane with a soft glow */
.ed-phone[data-template="glass"] .ed-phone-links .ed-phone-link.is-featured{
  color:var(--profile-text,#fff);
  background:color-mix(in srgb, var(--profile-accent,#6F7684) 16%, var(--box-bg,rgba(255,255,255,.08)));
  border:1px solid color-mix(in srgb, var(--profile-accent,#6F7684) 55%, transparent);
  box-shadow:0 0 30px -10px color-mix(in srgb, var(--profile-accent,#6F7684) 70%, transparent);
}
.ed-phone[data-template="glass"] .ed-phone-link.is-featured .ed-phone-link-ico,
.ed-phone[data-template="glass"] .ed-phone-link.is-featured .ed-phone-link-arrow{color:var(--profile-accent,#6F7684)}
.ed-phone[data-template="glass"] .ed-phone-link.is-featured .ed-phone-link-url{color:var(--profile-muted,#B2AEAE);opacity:.9}

/* ── Sidebar: content blocks + links form the right-hand column; a narrow
   (phone-width) page stacks both columns into one. ── */
.ed-phone-screen{container-type:inline-size}
.ed-phone[data-template="sidebar"] .ed-phone-main{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.ed-phone[data-template="sidebar"] .ed-phone-main > *{margin:0}
@container (max-width: 480px){
  .ed-phone[data-template="sidebar"] .ed-phone-content{flex-direction:column;flex-wrap:nowrap}
  .ed-phone[data-template="sidebar"] .ed-phone-identity{flex:none;width:100%}
  .ed-phone[data-template="sidebar"] .ed-phone-main{flex:none;width:100%}
}

/* ── Terminal-style blinking caret after the bio ── */
.ed-phone-bio.has-caret::after{content:'▌';margin-left:3px;color:var(--profile-accent,#6F7684);animation:edCaret 1.05s steps(1) infinite}
@keyframes edCaret{50%{opacity:0}}

/* ── Phone body off: just the page card, no bezel around it ── */
.ed-phone.ed-no-device:not([data-template="glass"]){padding:0;background:transparent;border-radius:26px;box-shadow:0 30px 80px -30px rgba(0,0,0,.55)}

/* ── Video playing inline (YouTube player replaces the cover) ── */
.ed-phone-video-cover.is-playing{background:#000}
.ed-phone-video-cover iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── Link look: shape, size and outline are the person's choice and win over
   every template's own defaults (Minimal, Bento, Glass, Sidebar alike). ── */
.ed-phone .ed-phone-links.ed-links-bordered .ed-phone-link:not(.is-featured){border:var(--ed-border, 1px solid color-mix(in srgb, var(--profile-muted,#B2AEAE), transparent 75%))}
.ed-phone:not([data-template="glass"]) .ed-phone-links.ed-links-bordered .ed-phone-link:not(.is-featured){background:transparent}
/* The main link takes a border of the same width (its own colour), so its icon
   and text line up with the links around it instead of sitting a few pixels off. */
.ed-phone .ed-phone-links.ed-links-bordered .ed-phone-link.is-featured{border:var(--ed-border,1px solid transparent);border-color:transparent}
.ed-phone[data-template="glass"] .ed-phone-links.ed-links-bordered .ed-phone-link.is-featured{border-color:color-mix(in srgb, var(--profile-accent,#6F7684) 55%, transparent)}
/* ── "Оформление → Карточка" outside Glass. The class appears once any of those
   values differs from its default, so an untouched page keeps its template's
   own look. Multipliers are chosen so the defaults (20 / 22 / 10%) reproduce
   it. Kept before the link shape/size rules below: those must win. ── */
.ed-phone.ed-box-custom:where(:not([data-template="glass"])) .ed-phone-links .ed-phone-link{
  padding:calc(var(--box-pad,20px) * .55) calc(var(--box-pad,20px) * .7);border-radius:calc(var(--box-radius,22px) * .55);
  backdrop-filter:blur(calc(var(--box-blur,0px) * .75));-webkit-backdrop-filter:blur(calc(var(--box-blur,0px) * .75));
}
.ed-phone.ed-box-custom:where(:not([data-template="glass"])) .ed-phone-links .ed-phone-link:not(.is-featured){background:color-mix(in srgb, var(--box-bg,rgba(255,255,255,.1)) 45%, transparent)}
.ed-phone.ed-box-custom[data-template="bento"] :is(.ed-phone-header-row,.ed-phone-stats.is-active){
  padding:calc(var(--box-pad,20px) * .7);border-radius:calc(var(--box-radius,22px) * .64);
  background:color-mix(in srgb, var(--box-bg,rgba(255,255,255,.1)) 50%, transparent);
  backdrop-filter:blur(var(--box-blur,0px));-webkit-backdrop-filter:blur(var(--box-blur,0px));
}
.ed-phone.ed-box-custom[data-template="bento"] .ed-phone-banner.is-active{border-radius:var(--banner-radius,calc(var(--box-radius,22px) * .64))}
.ed-phone[data-linkshape="square"] .ed-phone-links .ed-phone-link{border-radius:0}
.ed-phone[data-linkshape="square"] .ed-phone-links :is(.ed-phone-link-cover,.ed-phone-link-ico){border-radius:0}
.ed-phone[data-linkshape="square"] .ed-phone-links .ed-phone-link::after{border-radius:0}
.ed-phone[data-linkshape="pill"] .ed-phone-links .ed-phone-link{border-radius:999px;padding-left:20px;padding-right:20px}
.ed-phone[data-linkshape="pill"] .ed-phone-links .ed-phone-link-cover{border-radius:50%}
.ed-phone[data-linksize="l"] .ed-phone-links .ed-phone-link{padding-top:16px;padding-bottom:16px;font-size:calc(var(--text-size,12px) * 1.08)}
/* Compact is clearly smaller than regular: tighter rows and slightly smaller text. */
.ed-phone[data-linksize="s"] .ed-phone-links .ed-phone-link{padding-top:5px;padding-bottom:5px;font-size:calc(var(--text-size,12px) * .92)}
/* "Two in a row": links become half-width tiles. The main link, and a tile left
   alone in its row (.is-wide), take the whole row. Bento is two columns already. */
.ed-phone[data-linksize="half"]:not([data-template="bento"]) .ed-phone-links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--link-gap,8px)}
.ed-phone[data-linksize="half"]:not([data-template="bento"]) .ed-phone-links :is(.ed-phone-link.is-featured,.ed-phone-link.is-wide){grid-column:1/-1}
.ed-phone[data-linksize="half"]:not([data-template="bento"]) .ed-phone-links .ed-phone-link.is-featured{margin:0}
.ed-phone[data-linksize="half"]:not([data-template="bento"]) .ed-phone-links .ed-phone-link:not(.is-featured){padding-left:11px;padding-right:11px}
.ed-phone[data-linksize="half"] .ed-phone-links .ed-phone-link-text{min-width:0;overflow:hidden}
.ed-phone[data-linksize="half"] .ed-phone-links .ed-phone-link-text :is(b,.ed-phone-link-url){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Own link colour (Links → "Свой цвет ссылок"); the main link keeps the accent. */
/* (.ed-phone twice: has to outweigh the "bordered links are see-through" rule above) */
.ed-phone.ed-phone .ed-phone-links.ed-links-colored .ed-phone-link:not(.is-featured){background:var(--link-bg,rgba(255,255,255,.04))}
/* Crypto wallets: a row of chips under the links; a click copies the address. */
.ed-phone-wallets{display:none;flex-wrap:wrap;justify-content:center;gap:6px;width:100%;margin-top:10px}
.ed-phone-wallets.is-active{display:flex}
.ed-phone-wallet{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:7px 11px;border-radius:999px;border:1px solid color-mix(in srgb, var(--profile-muted,#B2AEAE), transparent 75%);background:rgba(255,255,255,.04);color:inherit;font:inherit;font-size:calc(var(--text-size,12px) * .9);cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.ed-phone-wallet:hover{border-color:color-mix(in srgb, var(--profile-muted,#B2AEAE), transparent 45%);background:rgba(255,255,255,.08)}
.ed-phone-wallet:focus-visible{outline:2px solid var(--profile-text,#fff);outline-offset:2px}
.ed-phone-wallet b{font-weight:600}
.ed-phone-wallet span{color:var(--profile-muted,#B2AEAE);font-family:"DM Mono",ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-phone[data-template="bento"] .ed-phone-wallets.is-active{grid-column:1/-1;justify-content:flex-start;margin-top:0}
.ed-phone[data-template="sidebar"] .ed-phone-wallets{justify-content:flex-start}
.ed-phone[data-template="bento"][data-linksize="s"] .ed-phone-links .ed-phone-link:not(.is-featured){height:58px}
.ed-phone[data-template="bento"][data-linksize="l"] .ed-phone-links .ed-phone-link:not(.is-featured){height:92px}

/* ── Reordering links by dragging them in the editor preview ── */
.ed-phone-link.is-sorting{opacity:.55;transform:scale(.97);transition:transform .12s ease,opacity .12s ease}
.ed-phone-links.is-sorting,.ed-phone-links.is-sorting *{cursor:grabbing !important;user-select:none;-webkit-user-select:none}

/* ── «Сделано в axiom»: pinned to the bottom of the screen, never scrolls ── */
.ed-axiom-badge{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  padding:6px 12px;border-radius:999px;
  font:11px/1 var(--mono,monospace);letter-spacing:.04em;text-decoration:none;
  color:rgba(255,255,255,.72);background:rgba(10,10,12,.55);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:color .15s ease,background .15s ease;
}
.ed-axiom-badge b{font-weight:600;color:#fff}
.ed-axiom-badge:hover{color:#fff;background:rgba(10,10,12,.75)}

/* ── Links → fine tuning. Each variable is set only when its slider is moved off
   the default, so untouched pages keep the template's own spacing. Kept last:
   these win over the shape and size presets above. ── */
.ed-phone-link-ico .icon{width:var(--link-ico,13px);height:var(--link-ico,13px)}
.ed-phone.ed-links-pad-y .ed-phone-links .ed-phone-link{padding-top:var(--link-pad-y);padding-bottom:var(--link-pad-y)}
.ed-phone.ed-links-pad-y[data-template="bento"] .ed-phone-links .ed-phone-link:not(.is-featured){height:calc(52px + 2 * var(--link-pad-y))}
/* …and a tile made lower than the template's own 74px lets the corner arrow reach
   the name, so the text block stops short of it (the clamp switches that on). */
.ed-phone.ed-links-pad-y[data-template="bento"] .ed-phone-link{--name-room:clamp(0px, (22px - 2 * var(--link-pad-y)) * 999, var(--arrow-block,22px))}
.ed-phone.ed-links-pad-y.ed-links-nourl[data-template="bento"] .ed-phone-link{--name-room:var(--arrow-block,22px)}
.ed-phone.ed-links-pad-x .ed-phone-links .ed-phone-link{padding-left:var(--link-pad-x);padding-right:var(--link-pad-x)}
.ed-phone.ed-links-nourl .ed-phone-links .ed-phone-link-url{display:none}
.ed-phone.ed-links-noico .ed-phone-links .ed-phone-link-ico{display:none}