@charset "UTF-8";
/* Community Wall — mock styling. Layers on top of create.css brand tokens. */

.wall{padding:40px 43px 70px;max-width:1420px;margin:auto}

/* ---------- Prize hero ---------- */
.wall-hero{position:relative;overflow:hidden;border:1px solid #ffffff12;border-radius:20px;padding:40px 44px;display:flex;align-items:center;gap:48px;background:
  radial-gradient(900px 340px at 12% -20%,#8f74ee26,transparent 70%),
  radial-gradient(700px 320px at 92% 120%,#6ab0d029,transparent 70%),
  linear-gradient(140deg,#1a1c2a,#14161f 60%)}
.wall-hero::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");pointer-events:none;mix-blend-mode:overlay}
.wall-hero-copy{flex:1;min-width:0;position:relative;z-index:1}
.wall-hero h1{font-size:40px;line-height:1.07;letter-spacing:-1.6px;font-weight:600;margin:0 0 14px;max-width:15ch}
.wall-hero h1 em{font-style:normal;background:linear-gradient(105deg,#c5a8f9,#9274ee 38%,#698ce9 70%,#99cbe6);-webkit-background-clip:text;background-clip:text;color:transparent}
.wall-hero p{font-size:13px;line-height:1.65;color:#a9a8bd;max-width:48ch;margin:0 0 26px}
.wall-hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wall-hero .create-button{font-size:12px;padding:13px 22px}

/* prize card — one row per category */
.prize{position:relative;z-index:1;flex:none;width:322px;padding:22px;border:1px solid #ffffff14;border-radius:18px;background:linear-gradient(170deg,#ffffff0d,#ffffff03);backdrop-filter:blur(10px)}
.prize::before{content:"";position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(160deg,#c5a8f966,transparent 45%,#99cbe64d);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.prize-top{display:flex;align-items:center;gap:13px;margin-bottom:17px}
.prize-heart{width:42px;height:42px;flex:none;filter:drop-shadow(0 6px 18px #8a6ff04d)}
.prize-eyebrow{font-size:6.5px;letter-spacing:2px;color:#9b95c0;font-weight:600;margin:0 0 5px}
.prize-top strong{display:block;font-size:22px;letter-spacing:-1px;font-weight:600;line-height:1;background:linear-gradient(140deg,#efe8ff,#bcd2ef);-webkit-background-clip:text;background-clip:text;color:transparent}
.prize-top span{display:block;font-size:9px;color:#8287a0;margin-top:5px}
.prize-lanes{list-style:none;margin:0 0 15px;padding:0;display:grid;gap:7px}
.prize-lanes li{display:flex;align-items:center;gap:12px;border:1px solid #ffffff10;background:#ffffff05;border-radius:11px;padding:11px 13px}
.prize-lanes li>div{flex:1;min-width:0}
.prize-lanes b{display:block;font-size:11.5px;font-weight:600;color:#ddd9ef;margin-bottom:3px}
.prize-lanes small{display:block;font-size:8.5px;line-height:1.5;color:#767b94}
.prize-lanes em{flex:none;font-style:normal;font-size:19px;font-weight:600;letter-spacing:-.7px;color:#c9d6ee;display:flex;align-items:baseline;gap:3px}
.prize-lanes em i{font-style:normal;font-size:7.5px;letter-spacing:1.2px;color:#7d829c;font-weight:600}
.prize-lanes li:nth-child(1) em{color:#a8d8c6}
.prize-lanes li:nth-child(2) em{color:#bdc7ef}
.prize-lanes li:nth-child(3) em{color:#d8c2ff}
.prize-note{font-size:9px;line-height:1.55;color:#7d829c;border-top:1px solid #ffffff10;padding-top:12px;margin:0;text-align:center}
.prize-note b{color:#c6c3dc;font-weight:600}

/* ---------- Stat strip ---------- */
.wall-stats{display:flex;gap:10px;margin:16px 0 34px;flex-wrap:wrap}
.wall-stat{display:flex;align-items:center;gap:9px;border:1px solid #ffffff0e;background:#ffffff05;border-radius:10px;padding:11px 15px}
.wall-stat strong{font-size:15px;letter-spacing:-.4px;font-weight:600;color:#eae7f6}
.wall-stat span{font-size:8px;letter-spacing:1.5px;color:#7b7f96;font-weight:600}
.wall-stat.is-clock strong{color:#c9b6ff;font-variant-numeric:tabular-nums}

/* ---------- Who is leading each category ---------- */
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:38px}
.podium-card{border:1px solid #ffffff0e;border-radius:15px;background:linear-gradient(130deg,#ffffff07,#ffffff02);overflow:hidden}
.podium-card[data-lane="vertical"]{background:linear-gradient(130deg,#a6d5c414,#ffffff02);border-color:#a6d5c42b}
.podium-card[data-lane="music"]{background:linear-gradient(130deg,#98b6ea16,#ffffff02);border-color:#98b6ea2b}
.podium-card[data-lane="film"]{background:linear-gradient(130deg,#c5a8f918,#ffffff02);border-color:#c5a8f933}
.podium-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-bottom:1px solid #ffffff0b}
.podium-lane{font-size:9px;letter-spacing:1.4px;font-weight:600;color:#c2c0d6;text-transform:uppercase}
.podium-prize{font-size:7px;letter-spacing:1.1px;font-weight:700;padding:4px 7px;border-radius:5px;color:#241f38;background:linear-gradient(140deg,#d3baf5,#aabfea)}
.podium-card[data-lane="vertical"] .podium-prize{background:linear-gradient(140deg,#b6e0d0,#8fc3c9)}
.podium-card[data-lane="music"] .podium-prize{background:linear-gradient(140deg,#c3d2f4,#9fb0e0)}
.podium-body{display:flex;gap:13px;align-items:center;padding:13px;width:100%;text-align:left;background:none;border-radius:0}
.podium-body:hover:not(:disabled){filter:none;background:#ffffff06}
/* the whole row plays (.podium-hit lies over it); the creator's name is its own button on top */
.podium-body{position:relative}
.podium-hit{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;border-radius:0;background:none}
.podium-hit:hover{filter:none}
.podium-hit:focus-visible{outline:2px solid #c5a8f9;outline-offset:-2px}
.podium-by{position:relative;z-index:2;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 0 7px;padding:0;border:0;border-radius:0;background:none;font-size:9px;color:#9a9eb5;text-align:left;transition:color .2s}
.podium-by:hover{filter:none;color:#e4e0f5;text-decoration:underline;text-underline-offset:2px}
.podium-body.is-empty{min-height:73px}
.podium-thumb{flex:none;position:relative;width:84px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#1b202b}
.podium-thumb img{width:100%;height:100%;object-fit:cover}
.podium-thumb.is-vertical img{position:absolute;inset:0;margin:auto;width:auto;height:100%;aspect-ratio:9/16;object-fit:cover;border-radius:3px}
.podium-thumb .film-bg{filter:blur(12px) saturate(1.3) brightness(.45)}
.podium-meta{min-width:0}
.podium-meta h3{font-size:12.5px;font-weight:600;margin:0 0 3px;color:#e6e4f1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium-meta p{font-size:8.5px;color:#7a7e95;margin:0 0 7px}
.podium-score{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:#c2b8e6;font-weight:600}
.podium-score svg{width:12px;height:12px}

/* ---------- Filter bar ---------- */
.wall-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px;flex-wrap:wrap;position:sticky;top:0;z-index:5;padding:10px 0;background:linear-gradient(#10121b 72%,#10121b00)}
.wall-tabs{display:flex;gap:6px;flex-wrap:wrap}
.wall-tab{display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff0d;background:#ffffff04;border-radius:99px;padding:9px 15px;font-size:10.5px;color:#9a9ab0;transition:background .2s,color .2s,border-color .2s}
.wall-tab small{font-size:8px;color:#6b7089;background:#ffffff08;border-radius:99px;padding:2px 6px}
.wall-tab.is-active{background:linear-gradient(110deg,#d3baf5,#aabfea);color:#262339;border-color:#ffffff22;font-weight:650}
.wall-tab.is-active small{background:#1f1c3320;color:#3b3552}
.wall-bar-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-left:auto}

.wall-sort{display:flex;align-items:center;gap:8px;font-size:9px;color:#6f748c;letter-spacing:.6px}
.wall-sort select{background:#171b26;border:1px solid #ffffff0d;border-radius:8px;color:#b8b7c9;font-size:10.5px;padding:8px 11px}

/* ---------- The wall ----------
   community.js (layoutWall) gives every tile its size: the film's own shape, one height per
   row, a small gap. The --aspect fallback keeps tiles the right shape before that runs. */
.wall-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--wall-gap,8px)}
.film-card{position:relative;flex:none;min-width:0;height:240px;width:calc(240px * var(--aspect,1.778));border-radius:10px;overflow:hidden;background:#1b202b;isolation:isolate;container-type:inline-size;animation:filmIn .5s both}
@keyframes filmIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.film-card::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff10;pointer-events:none}
/* the whole tile plays; it sits underneath everything written on it */
.film-art{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;border:0;border-radius:0;background:#151823}
.film-art:focus-visible{outline:2px solid #c5a8f9;outline-offset:-2px}
.film-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(#0b0d1480,#0b0d1400 24%,#0b0d1400 50%,#0b0d14e6)}
.film-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#151823;transition:transform .8s ease,opacity .35s}
.film-card:hover img.film-frame{transform:scale(1.045)}
video.film-frame{z-index:1;transform:none!important}
.film-art.is-previewing img.film-frame{opacity:0;transform:none}
.film-play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%) scale(.85);opacity:0;display:grid;place-items:center;width:46px;height:46px;border:1px solid #ffffff59;border-radius:50%;background:#ffffff1f;backdrop-filter:blur(8px);transition:opacity .25s,transform .25s;pointer-events:none}
.film-card:hover .film-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.film-play svg{width:15px;height:15px;fill:#fff;stroke:none;margin-left:2px}

/* written on the picture: chip and ribbon along the top, title, creator and heart along the
   bottom. Only the creator and the heart catch clicks — everything else falls through to play. */
.film-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:6px;padding:9px;pointer-events:none}
.film-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 10px 10px;pointer-events:none}
.film-foot .film-by,.film-foot .heart-vote{pointer-events:auto}
.film-chip{flex:none;white-space:nowrap;background:#111823ad;border:1px solid #ffffff20;backdrop-filter:blur(8px);border-radius:5px;padding:4px 7px;font-size:7px;letter-spacing:1.1px;color:#ded9e3;font-weight:600;font-variant-numeric:tabular-nums}
.film-ribbon-slot{flex:none;min-width:0}
.film-ribbon{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:7.5px;letter-spacing:1px;font-weight:700;color:#241f38;background:linear-gradient(140deg,#d3baf5,#aabfea);border-radius:5px;padding:4px 7px}
.film-ribbon[data-rank="featured"]{color:#10231d;background:linear-gradient(140deg,#a6d5c4,#a9c4f0)}
.film-ribbon[data-rank="2"],.film-ribbon[data-rank="3"]{color:#ded9ef;background:#111823c4;border:1px solid #ffffff22;backdrop-filter:blur(8px);font-weight:600}
.film-mine{white-space:nowrap;font-size:7.5px;letter-spacing:1.1px;font-weight:600;color:#a6d5c4;background:#12211ec4;border:1px solid #a6d5c43d;border-radius:5px;padding:4px 7px}

/* vertical films on the podium: a real 9:16 panel on an ambient blur of their own frame */
.film-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(30px) saturate(1.3) brightness(.45);transform:scale(1.35)}

.film-title{font-size:14px;font-weight:600;letter-spacing:-.2px;margin:0 0 7px;color:#f4f2fb;line-height:1.25;text-shadow:0 1px 10px #0009;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.film-body{display:flex;align-items:center;justify-content:space-between;gap:8px}
.film-by{display:flex;align-items:center;gap:7px;font-size:9.5px;color:#767b93;min-width:0;background:none;padding:3px 6px 3px 3px;margin-left:-3px;border-radius:99px;text-align:left;transition:background .2s,color .2s}
.film-by:hover{filter:none;background:#ffffff09;color:#c3c2d6}
.film-by:hover b{color:#e4e0f5;text-decoration:underline;text-underline-offset:2px}
.film-by b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .2s;min-width:0}
.film-age{white-space:nowrap}
.by-follow{flex:none;font-size:6.5px;letter-spacing:1.1px;font-weight:700;color:#9fd3c0;background:#a6d5c418;border:1px solid #a6d5c433;border-radius:99px;padding:2px 5px}
.film-avatar{background:linear-gradient(140deg,hsl(var(--hue,265) 70% 78%),hsl(calc(var(--hue,265) + 48) 62% 72%))}
.film-avatar{width:17px;height:17px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:7.5px;font-weight:700;color:#221f35;background:linear-gradient(140deg,#c5a8f9,#99cbe6)}
.film-by b{color:#9a9ab3;font-weight:500}

/* on the picture, the creator and the heart are frosted pills so they read on any frame */
.film-foot .film-by{margin-left:0;padding:3px 9px 3px 3px;font-size:10px;color:#d9d7e6;background:#0e111a8c;border:1px solid #ffffff1c;backdrop-filter:blur(10px)}
.film-foot .film-by b{color:#eeecf7;font-weight:550}
.film-foot .film-by:hover{background:#262a3bd9;border-color:#ffffff33}
.film-foot .film-avatar{width:19px;height:19px;font-size:8px}
.film-foot .heart-vote{gap:6px;padding:5px 10px 5px 8px;background:#0e111a8c;border-color:#ffffff1c;backdrop-filter:blur(10px)}
.film-foot .heart-vote:hover:not(:disabled){background:#2a2440d9}
.film-foot .heart-mark{width:18px;height:18px}
.film-foot .hm-stroke{stroke:#cfcde0}
.film-foot .heart-count{font-size:10.5px;color:#e4e2ef}
.film-foot .heart-burst{left:17px;width:18px;height:18px}

/* a narrow tile (a vertical film, or a phone) keeps the essentials and drops the extra words */
@container (max-width:250px){
  .chip-kind,.ribbon-more,.film-foot .by-follow{display:none}
  .film-top{padding:7px}
  .film-foot{padding:0 7px 7px}
  .film-foot .film-title{font-size:12px;margin-bottom:6px}
  /* the name comes first; the heart takes the next line when both will not fit */
  .film-foot .film-body{flex-wrap:wrap;gap:5px}
  .film-foot .film-by{max-width:100%}
  .film-foot .film-by{padding-right:7px;font-size:9.5px}
  .film-foot .heart-vote{padding:4px 8px 4px 6px}
}
@container (max-width:150px){
  .film-foot .film-title{-webkit-line-clamp:1}
}

/* ---------- The heart vote ---------- */
.heart-vote{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff12;background:#ffffff05;border-radius:99px;padding:7px 13px 7px 10px;transition:border-color .25s,background .25s}
.heart-vote:hover:not(:disabled){filter:none;border-color:#c5a8f94d;background:#c5a8f912}
.heart-vote .heart-count{font-size:11px;font-weight:650;color:#9b9bb2;font-variant-numeric:tabular-nums;transition:color .25s}
.heart-mark{width:22px;height:22px;overflow:visible;display:block}
.hm-stroke{fill:none;stroke:#8b8ba4;stroke-width:9;transition:stroke .25s,opacity .25s}
.hm-fill,.hm-face{opacity:0;transition:opacity .25s}
.hm-shine{opacity:0;transition:opacity .25s}
.heart-vote:hover:not(:disabled) .hm-stroke{stroke:#cbb7ff}
.heart-vote[aria-pressed="true"]{border-color:#c5a8f954;background:linear-gradient(110deg,#c5a8f91f,#99cbe614)}
.heart-vote[aria-pressed="true"] .hm-stroke{opacity:0}
.heart-vote[aria-pressed="true"] .hm-fill,
.heart-vote[aria-pressed="true"] .hm-face,
.heart-vote[aria-pressed="true"] .hm-shine{opacity:1}
.heart-vote[aria-pressed="true"] .heart-count{color:#d9cdff}
.heart-vote:disabled{opacity:.42;cursor:not-allowed}
.heart-mark.is-popping{animation:heartPop .58s cubic-bezier(.2,1.5,.4,1)}
@keyframes heartPop{0%{transform:scale(1)}30%{transform:scale(1.42)}55%{transform:scale(.9)}75%{transform:scale(1.08)}100%{transform:scale(1)}}
.heart-burst{position:absolute;left:21px;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);pointer-events:none}
.heart-burst i{position:absolute;inset:0;border-radius:50%;border:2px solid #c5a8f9;opacity:0}
.heart-burst.is-on i{animation:burstRing .62s ease-out}
@keyframes burstRing{0%{transform:scale(.4);opacity:.85}100%{transform:scale(2.9);opacity:0}}
.heart-burst b{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:#c9b6ff;opacity:0}
.heart-burst.is-on b{animation:burstDot .6s ease-out}
.heart-burst b:nth-child(2){--bx:-13px;--by:-11px}
.heart-burst b:nth-child(3){--bx:13px;--by:-12px}
.heart-burst b:nth-child(4){--bx:-15px;--by:7px}
.heart-burst b:nth-child(5){--bx:14px;--by:8px}
.heart-burst b:nth-child(6){--bx:0px;--by:-17px}
@keyframes burstDot{0%{transform:translate(-50%,-50%);opacity:1}100%{transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by)));opacity:0}}

/* signed-out nudge */
.vote-nudge{position:fixed;z-index:60;width:232px;padding:14px 15px;border-radius:13px;border:1px solid #ffffff1a;background:#1b1f2ef2;backdrop-filter:blur(14px);box-shadow:0 18px 44px #06070cab;animation:nudgeIn .22s ease-out}
@keyframes nudgeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vote-nudge strong{display:block;font-size:11.5px;color:#eeebf8;margin-bottom:5px;font-weight:600}
.vote-nudge p{font-size:9.5px;line-height:1.55;color:#8b8fa6;margin:0 0 11px}
.vote-nudge .create-button{width:100%;font-size:10.5px;padding:9px 12px}

/* ---------- Share row + rules ---------- */
.wall-share{flex:0 0 100%;display:flex;align-items:center;gap:20px;padding:26px 28px;border:1px dashed #ffffff1a;border-radius:16px;background:radial-gradient(ellipse at 20% 0%,#b4a6e211,transparent 65%);margin-top:6px}
.wall-share .prize-heart{width:38px;height:38px;margin:0}
.wall-share div{flex:1;min-width:0}
.wall-share h3{font-size:15px;margin:0 0 4px;font-weight:600;letter-spacing:-.3px}
.wall-share p{font-size:10.5px;color:#83879f;margin:0}

.rules{margin-top:46px;border-top:1px solid var(--line);padding-top:30px}
.rules-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:18px}
.rules-grid h4{font-size:10px;letter-spacing:1.4px;color:#b7aee0;margin:0 0 7px;font-weight:600}
.rules-grid p{font-size:10px;line-height:1.7;color:#767a92;margin:0}
.rules-foot{font-size:9px;color:#5f6377;margin:26px 0 0;line-height:1.7}

/* mock-only control */
.mock-switch{display:inline-flex;align-items:center;gap:8px;border:1px solid #c9b6ff2e;background:#c9b6ff0d;border-radius:99px;padding:6px 11px;font-size:9px;letter-spacing:.8px;color:#a99ed4}
.mock-switch i{width:6px;height:6px;border-radius:50%;background:#a6d5c4;box-shadow:0 0 8px #a6d5c4a8;display:block}
.mock-switch.is-out i{background:#6b7089;box-shadow:none}

@media(max-width:1100px){
  .wall{padding:30px 24px 60px}
  .wall-hero{flex-direction:column;align-items:flex-start;gap:28px;padding:32px 28px}
  .wall-hero h1{font-size:32px}
  .prize{width:100%;padding:20px}
  .prize-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .prize-lanes li{flex-direction:column;align-items:flex-start;gap:8px}
  .rules-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .podium{grid-template-columns:1fr}
  .prize-lanes{grid-template-columns:1fr}
  .prize-lanes li{flex-direction:row;align-items:center;gap:12px}
}
@media(max-width:640px){
  .wall{padding:22px 16px 80px}
  .wall-hero h1{font-size:26px;letter-spacing:-1px}
  .wall-bar-right{width:100%;justify-content:space-between}
  .prize{display:block;padding:22px 18px}
  .prize-top{flex-direction:column;text-align:center;gap:10px}
  .prize-heart{margin:0 auto}
  .prize-lanes li>div{text-align:left}
  .rules-grid{grid-template-columns:1fr}
  .wall-share{flex-direction:column;align-items:flex-start;text-align:left}
  .section-heading{flex-direction:column;align-items:flex-start;gap:6px}
  .wall-bar{position:static;padding:6px 0}
}


/* ---------- The player: native 9:16 and 16:9, never letterboxed ---------- */
body.is-locked{overflow:hidden}
.viewer{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:28px;animation:viewerIn .22s ease-out}
@keyframes viewerIn{from{opacity:0}to{opacity:1}}
.viewer-backdrop{position:absolute;inset:0;background:#070810e8;backdrop-filter:blur(16px)}
.viewer-panel{position:relative;display:flex;gap:30px;align-items:center;max-width:1180px;width:100%;justify-content:center}
.viewer-panel.is-wide{flex-direction:column;align-items:stretch;max-width:980px;gap:22px}
.viewer-stage{flex:none;display:flex;justify-content:center}
.viewer-panel.is-tall .viewer-stage video{height:min(78vh,860px);width:auto;aspect-ratio:9/16}
.viewer-panel.is-wide .viewer-stage video{width:100%;max-width:980px;height:auto;aspect-ratio:16/9}
.viewer-stage video{display:block;background:#05070c;border-radius:14px;border:1px solid #ffffff14;box-shadow:0 30px 80px #04050bd6;max-width:100%}
.viewer-meta{flex:1;min-width:0;max-width:390px}
.viewer-panel.is-wide .viewer-meta{max-width:none;display:grid;column-gap:34px;align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"chip acts" "title acts" "by acts" "lane lane" "note note"}
.viewer-panel.is-wide .film-chip.is-static{grid-area:chip;justify-self:start;margin:0 0 9px}
.viewer-panel.is-wide .viewer-meta h2{grid-area:title;margin:0 0 9px}
.viewer-panel.is-wide .film-by{grid-area:by}
.viewer-panel.is-wide .viewer-actions{grid-area:acts;justify-self:end}
.viewer-panel.is-wide .viewer-lane{grid-area:lane;margin:20px 0 0}
.viewer-panel.is-wide .viewer-note{grid-area:note}
.film-chip.is-static{position:static;display:inline-block;margin-bottom:12px;backdrop-filter:none}
.viewer-meta h2{font-size:27px;letter-spacing:-1px;font-weight:600;margin:0 0 10px;line-height:1.15}
.viewer-lane{margin:18px 0;padding:13px 15px;border:1px solid #ffffff10;background:#ffffff05;border-radius:11px}
.viewer-lane b{display:block;font-size:11px;font-weight:600;color:#ddd9ef;margin-bottom:4px}
.viewer-lane span{font-size:9.5px;color:#7f849d;line-height:1.55}
.viewer-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.viewer-hint{font-size:9px;color:#7b7f98;max-width:190px;line-height:1.5}
.heart-vote.is-large{padding:11px 18px 11px 14px}
.heart-vote.is-large .heart-mark{width:27px;height:27px}
.heart-vote.is-large .heart-count{font-size:14px}
.heart-vote.is-large .heart-burst{left:26px;width:27px;height:27px}
.viewer-note{font-size:8.5px;color:#5f6377;margin:18px 0 0;line-height:1.6}
.viewer-close{position:absolute;top:-6px;right:-6px;width:34px;height:34px;border-radius:50%;background:#1b1f2ee6;border:1px solid #ffffff1c;color:#c9c8da;font-size:13px;backdrop-filter:blur(10px)}
.viewer-panel.is-wide .viewer-close{top:-14px;right:-14px}
@media(max-width:900px){
  .viewer{padding:16px;align-items:start;overflow:auto}
  .viewer-panel,.viewer-panel.is-wide{flex-direction:column;align-items:stretch;gap:18px;margin:44px 0}
  .viewer-panel.is-tall .viewer-stage video{height:auto;width:100%;max-width:420px;margin:auto}
  .viewer-panel.is-wide .viewer-meta{grid-template-columns:1fr;grid-template-areas:"chip" "title" "by" "lane" "acts" "note"}
  .viewer-panel.is-wide .viewer-actions{justify-self:start}
  .viewer-meta{max-width:none}
  .viewer-meta h2{font-size:21px}
  .viewer-close{top:-38px;right:0}
  .viewer-panel.is-wide .viewer-close{top:-38px;right:0}
}


/* ---------- Follow ---------- */
.follow-button{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff22;background:linear-gradient(110deg,#d3baf5,#aabfea);color:#262339;border-radius:99px;padding:10px 20px;font-size:11px;font-weight:650;transition:background .2s,color .2s,border-color .2s}
.follow-button.is-small{padding:7px 14px;font-size:10px}
.follow-button.is-on{background:#ffffff07;border-color:#ffffff1c;color:#b6b5c8}
.follow-button.is-on:hover{filter:none;background:#e5738d14;border-color:#e5738d4d;color:#f0a8b6}
.follow-hover{display:none}
.follow-button.is-on:hover .follow-label{display:none}
.follow-button.is-on:hover .follow-hover{display:inline}

.wall-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:90;max-width:380px;padding:13px 19px;border-radius:12px;border:1px solid #ffffff1a;background:#1c2030f2;backdrop-filter:blur(14px);box-shadow:0 18px 44px #06070cab;font-size:11px;color:#ded9f2;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.wall-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- A creator's public page ---------- */
.crumb-link{background:none;padding:0;font:inherit;color:inherit}
.crumb-link:hover{filter:none;color:#c9b6ff}
.back-link{display:inline-flex;align-items:center;gap:7px;background:none;font-size:10.5px;color:#8e92a8;padding:6px 0;margin-bottom:18px}
.back-link:hover{filter:none;color:#c9b6ff}

.profile-head{position:relative;border:1px solid #ffffff12;border-radius:20px;overflow:hidden;padding:0 30px 26px;margin-bottom:30px;background:linear-gradient(150deg,#1a1c2a,#14161f 60%)}
/* Shaped like a Facebook cover, so people know what to give it: 820×312 on a computer,
   640×360 on a phone. Shown at full strength, fading into the card only where the name sits. */
.profile-cover{aspect-ratio:820/312;margin:0 -30px 0}
/* the cover editor's preview shares the page cover's look, so what you pick is what shows */
.profile-cover,.cover-preview-img{background-size:cover;background-repeat:no-repeat;background-position:center;-webkit-mask-image:linear-gradient(#000 64%,#0000);mask-image:linear-gradient(#000 64%,#0000)}
.profile-id{display:flex;align-items:flex-end;gap:18px;margin-top:-46px;position:relative;z-index:1}
.profile-avatar{flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:27px;font-weight:700;color:#221f35;border:3px solid #14161f;background:linear-gradient(140deg,hsl(var(--hue,265) 70% 78%),hsl(calc(var(--hue,265) + 48) 62% 72%));box-shadow:0 10px 30px #05060c8c}
.profile-name{flex:1;min-width:0;padding-bottom:6px}
.profile-name h1{font-size:27px;letter-spacing:-1px;font-weight:600;margin:0 0 5px;display:flex;align-items:center;gap:10px}
.you-tag{font-size:7px;letter-spacing:1.4px;font-weight:700;color:#a6d5c4;background:#a6d5c41c;border:1px solid #a6d5c43d;border-radius:4px;padding:3px 6px}
.profile-name p{font-size:10px;color:#7d819a;margin:0}
.profile-self{flex:none;font-size:9.5px;color:#8287a0;border:1px dashed #ffffff1c;border-radius:99px;padding:9px 16px;margin-bottom:5px}
.profile-bio{font-size:12.5px;line-height:1.7;color:#a8a7bd;max-width:62ch;margin:20px 0 0}
.profile-stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid #ffffff0d}
.profile-stats strong{display:block;font-size:19px;letter-spacing:-.6px;font-weight:600;color:#eae7f6;margin-bottom:4px}
.profile-stats span{font-size:7.5px;letter-spacing:1.5px;color:#767a92;font-weight:600}
.profile-running{list-style:none;margin:22px 0 0;padding:16px 18px;border:1px solid #ffffff10;background:#ffffff05;border-radius:13px;display:grid;gap:9px}
.running-head{font-size:6.5px;letter-spacing:2px;color:#9b95c0;font-weight:600}
.profile-running li:not(.running-head){display:flex;align-items:center;gap:12px;font-size:10.5px}
.profile-running b{flex:none;width:118px;color:#ddd9ef;font-weight:600}
.profile-running span{flex:1;min-width:0;color:#8287a0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-running em{flex:none;font-style:normal;font-size:7px;letter-spacing:1.1px;font-weight:700;color:#241f38;background:linear-gradient(140deg,#d3baf5,#aabfea);border-radius:5px;padding:4px 7px}
.profile-tabs{display:flex;gap:6px;margin-bottom:24px;flex-wrap:wrap}
.profile-empty{font-size:11px;color:#767a92;padding:40px 0}

.asset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.asset-card{margin:0}
.asset-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;border:1px solid #ffffff0c;background:#1b202b;transition:transform .6s}
.asset-card:hover img{transform:scale(1.03)}
.asset-card figcaption{font-size:10px;color:#7d819a;margin-top:10px}

.track-list{display:grid;gap:10px}
.track-card{display:flex;align-items:center;gap:16px;border:1px solid #ffffff0e;background:#ffffff04;border-radius:13px;padding:14px 18px}
.track-play{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#ddd4ff;background:#c5a8f91c;border:1px solid #c5a8f93d}
.track-card>div{flex:none;width:210px;min-width:0}
.track-card b{display:block;font-size:12px;font-weight:600;color:#e4e1f2;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.track-card small{font-size:9px;color:#767a92}
.track-wave{flex:1;min-width:0;display:flex;align-items:center;gap:2px;height:28px}
.track-wave i{flex:1;background:linear-gradient(#c5a8f9a1,#698ce958);border-radius:1px;min-width:2px}
.track-time{flex:none;font-size:10px;color:#8287a0;font-variant-numeric:tabular-nums}

@media(max-width:860px){
  .asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .track-card>div{width:150px}
}
@media(max-width:640px){
  .profile-head{padding:0 18px 22px;border-radius:16px}
  .profile-cover{margin:0 -18px;aspect-ratio:640/360}
  .profile-id{flex-direction:column;align-items:flex-start;gap:12px;margin-top:-34px}
  .profile-avatar{width:66px;height:66px;font-size:21px}
  .profile-name h1{font-size:22px}
  .profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}
  .profile-running b{width:auto}
  .link-field{flex-direction:column;align-items:flex-start;gap:0;padding:10px 14px}
  .link-field input{width:100%;padding:6px 0 4px}
  .profile-running li:not(.running-head){flex-wrap:wrap;gap:7px}
  .asset-grid{grid-template-columns:1fr}
  .track-wave{display:none}
}


/* ---------- Changing your cover ---------- */
.cover-change{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff24;background:#111823b5;backdrop-filter:blur(10px);color:#ded9ef;border-radius:99px;padding:8px 14px;font-size:10px;font-weight:600;opacity:.82;transition:opacity .2s,background .2s}
.cover-change:hover{filter:none;opacity:1;background:#1b2334d9}
.cover-change svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.cover-panel{position:relative;width:min(620px,100%);max-height:88vh;overflow:auto;padding:30px;border-radius:20px;border:1px solid #ffffff14;background:linear-gradient(160deg,#1c1f2d,#15171f);box-shadow:0 30px 80px #04050bd6}
.cover-panel h2{font-size:24px;letter-spacing:-.9px;font-weight:600;margin:0 0 20px}
/* The preview is the page's header, scaled down. community.js (fitCoverPreview) copies the real
   cover's shape and the avatar's spot off the page behind the editor; these are the desktop
   numbers it starts from. */
.cover-preview{position:relative;border-radius:14px;overflow:hidden;border:1px solid #ffffff12;background:linear-gradient(150deg,#1a1c2a,#14161f 60%);padding-bottom:26px}
.cover-preview-img{aspect-ratio:820/312}
.cover-preview-face{position:absolute;left:13px;top:194px;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#221f35;border:1px solid #14161f;background:linear-gradient(140deg,hsl(var(--hue,265) 70% 78%),hsl(calc(var(--hue,265) + 48) 62% 72%))}
.cover-slider{display:flex;align-items:center;gap:14px;margin:26px 0 22px}
.auto-crop{flex:none;border:1px solid #ffffff16;background:#ffffff05;color:#9a9ab0;border-radius:99px;padding:6px 13px;font-size:9.5px;font-weight:600;letter-spacing:.4px}
.auto-crop.is-on{border-color:#a6d5c440;background:#a6d5c414;color:#a6d5c4}
.cover-slider>span{font-size:7px;letter-spacing:2px;color:#8388a1;font-weight:600;flex:none}
.cover-slider input{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;background:linear-gradient(90deg,#c5a8f9,#99cbe6);outline-offset:6px}
.cover-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:#efeaff;border:2px solid #7d6ab5;cursor:grab;box-shadow:0 2px 8px #05060c8f}
.cover-label{font-size:7px;letter-spacing:2px;color:#8388a1;font-weight:600;margin:0 0 11px}
.cover-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:24px}
.cover-choice{position:relative;padding:0;border-radius:9px;overflow:hidden;border:1px solid #ffffff0f;background:#1b202b;aspect-ratio:16/10}
.cover-choice img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.cover-choice:hover img{filter:none;opacity:.8}
.cover-choice.is-chosen{border-color:#c5a8f9;box-shadow:0 0 0 2px #c5a8f94d}
.cover-choice.is-chosen::after{content:"✓";position:absolute;top:5px;right:5px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:9px;color:#241f38;background:linear-gradient(140deg,#d3baf5,#aabfea)}
.cover-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid #ffffff0d;padding-top:20px}
.cover-hint{flex:1;min-width:120px;font-size:8.5px;line-height:1.5;color:#6c7188}

@media(max-width:640px){
  .cover-panel{padding:22px 18px;border-radius:16px}
  .cover-panel h2{font-size:20px}
  .cover-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cover-actions{justify-content:space-between}
  .cover-hint{order:5;flex-basis:100%}
  .cover-change{padding:7px 11px;font-size:9px;top:10px;right:10px}
}


/* ---------- Faces: the circle beside a name ----------
   A creator's photo, or their Kynd drawn from the studio's own artwork (avatar.css styles the
   mark). The .face classes win over each spot's older initials styling. */
.face.is-kynd,.face.is-photo{display:block;overflow:hidden;border-radius:50%;flex:none}
.face.is-kynd{background:radial-gradient(ellipse at 50% 22%,#b99ce726,transparent 70%),#171a25}
.face.is-photo{background:#1b1e2b}
.face.is-photo img{width:100%;height:100%;max-width:none;object-fit:cover}
.face .kynd-avatar-mark{width:100%;height:100%}
/* where a Kynd is measured to frame it: laid out, never seen */
.face-measure{position:fixed;left:-300px;top:0;width:64px;height:64px;overflow:hidden;visibility:hidden;pointer-events:none}
.account-face{width:100%;height:100%}

/* your own circle is the way in to changing it */
.face-edit{position:relative;flex:none;display:block;padding:0;border:0;border-radius:50%;background:none}
.face-edit:hover{filter:none}
.face-edit .profile-avatar{transition:box-shadow .2s}
.face-edit:hover .profile-avatar{box-shadow:0 0 0 2px #c5a8f973,0 10px 30px #05060c8c}
.face-badge{position:absolute;right:-2px;bottom:2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid #14161f;background:#232738;color:#e4dcff;box-shadow:0 4px 12px #05060c99;transition:background .2s}
.face-edit:hover .face-badge{background:#352d52}
.face-badge svg,.face-tabs svg,.face-drop svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.face-badge svg{width:14px;height:14px}

/* the picker: your Kynd (the studio's wardrobe) or a photo you crop into the circle */
.face-editor .face-panel{width:min(860px,100%)}
.face-tabs{display:inline-flex;gap:4px;padding:4px;margin:0 0 22px;border:1px solid #ffffff12;border-radius:99px;background:#ffffff05}
.face-tabs button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;background:none;color:#9a9ab0;font-size:11px;font-weight:600}
.face-tabs button:hover{filter:none;color:#e4dcff}
.face-tabs button[aria-selected=true]{background:linear-gradient(110deg,#d3baf5,#aabfea);color:#262339}
.face-tabs svg{width:15px;height:15px}
.face-tabs .icon{fill:currentColor;stroke:none}
/* the wardrobe brings its own heading for the studio's dialog; here the panel's heading says it */
.face-pane .avatar-creator>.eyebrow,.face-pane .avatar-creator>h2,.face-pane .avatar-creator>.dialog-description{display:none}
/* a little tighter than the studio's dialog, so Save stays on screen on a laptop */
.face-pane .kas-options{max-height:250px}
.face-pane .kas-save{min-height:0;margin-top:12px;padding-top:12px}
.face-photo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:30px;padding:4px 0 18px}
.face-crop{position:relative;width:240px;height:240px;border-radius:50%;overflow:hidden;border:1px solid #ffffff17;background:radial-gradient(ellipse at 50% 30%,#b49be41c,transparent 68%),#11141d;box-shadow:0 0 0 7px #ffffff05;touch-action:none;cursor:grab;transition:border-color .2s,box-shadow .2s}
.face-crop:focus-visible{outline:2px solid var(--lilac);outline-offset:6px}
.face-crop.is-dragging{cursor:grabbing}
.face-crop img{position:absolute;left:50%;top:50%;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.face-drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;border-radius:50%;background:none;color:#d8ccf7;font-size:12px}
.face-drop:hover{filter:none;background:#c5a8f90a}
.face-drop svg{width:30px;height:30px;margin-bottom:5px;color:#b9a3ec}
.face-drop span{font-size:10px;color:#7d819a}
.face-editor.is-dropping .face-crop{border-color:#c5a8f9;box-shadow:0 0 0 7px #c5a8f92e}
.face-photo-side{display:grid;justify-items:start;gap:18px;min-width:0}
.face-zoom{width:100%;margin:0}
.face-zoom input:disabled{opacity:.35}
.face-note{margin:0;max-width:40ch;font-size:10px;line-height:1.7;color:#7d819a}
.face-remove{padding:0;font-size:10px;color:#d99aa8}
.face-remove:hover{filter:none;color:#f0b4c0}

@media(max-width:640px){
  .face-badge{width:24px;height:24px}
  .face-badge svg{width:12px;height:12px}
  .face-tabs{display:flex}
  .face-tabs button{flex:1;justify-content:center;padding:8px 10px}
  .face-photo{grid-template-columns:1fr;justify-items:center;gap:22px}
  .face-crop{width:210px;height:210px}
  .face-photo-side{justify-items:center;text-align:center}
}


/* ---------- Bio ---------- */
.profile-bio{position:relative}
.bio-edit{margin-left:10px;vertical-align:2px;background:none;border:1px solid #ffffff14;border-radius:99px;padding:3px 10px;font-size:8.5px;letter-spacing:.6px;color:#8287a0;font-weight:600}
.bio-edit:hover{filter:none;border-color:#c9b6ff4d;color:#c9b6ff}
.bio-empty{display:block;margin:20px 0 0;padding:14px 18px;border:1px dashed #ffffff1c;border-radius:12px;background:none;font-size:11.5px;color:#8287a0;text-align:left;width:100%;max-width:420px}
.bio-empty:hover{filter:none;border-color:#c9b6ff4d;color:#c9b6ff}
.profile-link-row{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.profile-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:1px solid #c5a8f92e;background:#c5a8f90f;border-radius:99px;padding:8px 14px;font-size:11px;color:#c6bbe8;transition:background .2s,border-color .2s,color .2s;max-width:100%}
.profile-link:hover{background:#c5a8f91f;border-color:#c5a8f959;color:#e2d9ff}
.profile-link svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.profile-link span{color:#8e86b4;font-size:9px}
.bio-editor{margin-top:20px;max-width:560px}
.bio-editor textarea{width:100%;resize:vertical;min-height:62px;background:#0f1119;border:1px solid #ffffff1c;border-radius:12px;color:#e6e3f3;font:12.5px/1.65 var(--font);padding:13px 15px}
.bio-editor textarea:focus{outline:none;border-color:#c9b6ff66;box-shadow:0 0 0 3px #c9b6ff1a}
.bio-editor textarea::placeholder{color:#5f6377}
.link-field{display:flex;align-items:center;gap:12px;margin-top:11px;border:1px solid #ffffff1c;border-radius:12px;background:#0f1119;padding:0 15px}
.link-field>span{flex:none;font-size:7px;letter-spacing:1.8px;color:#8388a1;font-weight:600}
.link-field input{flex:1;min-width:0;background:none;border:0;color:#e6e3f3;font:12px/1 var(--font);padding:13px 0}
.link-field input:focus{outline:none}
.link-field:focus-within{border-color:#c9b6ff66;box-shadow:0 0 0 3px #c9b6ff1a}
.link-field input::placeholder{color:#5f6377}
.link-help{font-size:9px;color:#6c7188;margin:9px 0 0}
.link-error{font-size:9.5px;color:#f0a8b6;margin:9px 0 0}
.bio-foot{display:flex;align-items:center;gap:12px;margin-top:11px}
.bio-foot>span{flex:1;font-size:9px;color:#6c7188;font-variant-numeric:tabular-nums}

/* sound-on fallback, only when the browser refuses to start unmuted */
.unmute{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:4;border:1px solid #ffffff2e;background:#111823d9;backdrop-filter:blur(10px);color:#ecebf6;border-radius:99px;padding:9px 18px;font-size:11px;font-weight:600;box-shadow:0 10px 30px #04050bab}
.viewer-stage{position:relative}


/* ---------- Putting a film on the wall ---------- */
.share-intro{font-size:11.5px;line-height:1.7;color:#8b8fa6;margin:0 0 20px;max-width:56ch}
.share-picks{display:grid;gap:9px;margin-bottom:20px}
.share-pick{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid #ffffff10;background:#ffffff04;border-radius:13px;padding:11px 13px;transition:border-color .2s,background .2s}
.share-pick:hover{filter:none;background:#ffffff08}
.share-pick.is-chosen{border-color:#c5a8f959;background:linear-gradient(110deg,#c5a8f916,#99cbe60d)}
.share-thumb{position:relative;flex:none;width:86px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#1b202b;display:block}
.share-thumb img{width:100%;height:100%;object-fit:cover}
.share-thumb.is-vertical img{position:absolute;inset:0;margin:auto;width:auto;height:100%;aspect-ratio:9/16;border-radius:2px}
.share-meta{min-width:0}
.share-meta b{display:block;font-size:12.5px;font-weight:600;color:#e4e1f2;margin-bottom:3px}
.share-meta small{font-size:9px;color:#767a92}
.share-lands{border:1px solid #ffffff10;background:#ffffff05;border-radius:13px;padding:14px 16px;margin-bottom:22px}
.share-lands-head{font-size:6.5px;letter-spacing:2px;color:#9b95c0;font-weight:600;margin:0 0 9px}
.share-lands-row{display:flex;align-items:center;gap:13px}
.share-lands-row b{flex:none;font-size:12px;font-weight:600;color:#ddd9ef}
.share-lands-row span{flex:1;min-width:0;font-size:9.5px;line-height:1.5;color:#8287a0}
.share-lands-row em{flex:none;font-style:normal;font-size:7px;letter-spacing:1.1px;font-weight:700;color:#241f38;background:linear-gradient(140deg,#d3baf5,#aabfea);border-radius:5px;padding:4px 7px}
@media(max-width:640px){
  .share-lands-row{flex-wrap:wrap;gap:8px}
  .share-lands-row span{flex-basis:100%;order:3}
}

/* A PHONE IS NEVER STRANDED ON THE WALL (Matt, 4 Oct 2026: "accessing the walls profile page leaves you stranded with
   no way back on mobile"). The site's bottom menu (create.css) is on this page too, the mark goes home, the page clears
   the menu, and a long name wraps rather than pushing YOU off the edge. */
a.mobile-brand{text-decoration:none}
.mobile-nav a[aria-current="page"]{color:#d0b3ec}
.mobile-nav a>span{font-size:25px;line-height:19px;color:#b1c9e0}
@media(max-width:650px){main{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
.profile-name{min-width:0}
.profile-name h1{flex-wrap:wrap;overflow-wrap:anywhere;row-gap:6px}

.viewer-stage{position:relative}.viewer-compare{display:inline-flex}