/* Stories: viewer + composer (they reuse the Week story's frame/blobs/segments from social.css) */
.sring.mine .in{ position:relative; } .sring.add.mine{ border-style:dashed; }
.sring .wv.plus{ background:var(--accent); color:#fff; font:800 14px/1 var(--sans); border-color:var(--bg); }
.sring.add.mine .in{ border-color:transparent; opacity:.8; }

/* the card (same pieces while composing and while viewing) */
.sv-frame{ --u:1px; }
.sv-stage{ position:absolute; z-index:3; inset:0; padding:calc(88px + env(safe-area-inset-top)) 22px 150px; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.sv-song{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-top:2vh; }
.sv-cov{ width:min(58%,240px); aspect-ratio:1; border-radius:5px; background:rgba(255,255,255,.1) center/cover; overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.5); transform:perspective(900px) rotateY(-12deg) rotateX(3deg); }
.sv-cov img{ width:100%; height:100%; object-fit:cover; display:block; }
.sv-song b{ margin-top:22px; font:800 calc(var(--u) * 24)/1.15 var(--disp); letter-spacing:-.02em; }
.sv-song span{ margin-top:4px; font:600 calc(var(--u) * 14) var(--sans); color:rgba(255,255,255,.8); }
.sv-song em{ margin-top:8px; font:700 calc(var(--u) * 10.5) var(--sans); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.sv-text{ position:absolute; z-index:4; transform:translate(-50%,-50%); width:max-content; max-width:none;   /* without max-content an abspos box is only as wide as the space RIGHT of its left edge (≈50%) and wraps far too early */
  text-align:center; white-space:pre; overflow-wrap:normal; line-height:1.18;   /* never re-wrapped: only your own line breaks count, and it may run off the card */
  font-size:calc(var(--u) * var(--sz, 28)); pointer-events:auto; touch-action:none; cursor:grab; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.sv-text .ph{ font-style:normal; font:600 calc(var(--u) * 15) var(--sans); opacity:.6; text-shadow:none; }
.sv-root .sv-text{ pointer-events:none; cursor:default; }
.sf-sora{ font-family:var(--disp); font-weight:800; letter-spacing:-.02em; }
.sf-manrope{ font-family:var(--sans); font-weight:700; }
.sf-serif{ font-family:Georgia,"Times New Roman",serif; font-style:italic; font-weight:700; }
.sf-mono{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-weight:700; letter-spacing:-.02em; }
.sf-bold{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.sf-neon{ font-family:var(--disp); font-weight:700; text-shadow:0 0 .18em currentColor, 0 0 .55em currentColor, 0 0 1.1em currentColor; }
.sb-pill{ background:rgba(0,0,0,.5); padding:.3em .7em; border-radius:.7em; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); text-shadow:none; }
.sb-outline{ -webkit-text-stroke:.06em rgba(0,0,0,.55); paint-order:stroke fill; text-shadow:0 2px 0 rgba(0,0,0,.4); }

/* viewer */
.sv-views{ margin-left:auto; display:inline-flex; align-items:center; gap:5px; font:700 12px var(--sans); color:rgba(255,255,255,.8); }
.sv-del{ width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.2); color:#fff; display:grid; place-items:center; cursor:pointer; }
.sv-views + .sv-del{ margin-left:0; } .st-top .sv-del + .x{ margin-left:0; } .st-top .sv-views ~ .x{ margin-left:0; }
.sv-bot{ position:absolute; z-index:6; left:0; right:0; bottom:0; padding:0 16px calc(24px + env(safe-area-inset-bottom)); }
.sv-now{ text-align:center; font:700 11px var(--sans); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.65); min-height:16px; margin-bottom:10px; } .sv-now u{ text-decoration:none; color:var(--ok); }
.sv-btns{ display:flex; gap:10px; align-items:center; }
.sv-go{ flex:1; height:54px; border-radius:27px; border:0; background:#fff; color:#0b0b10; display:flex; align-items:center; justify-content:center; gap:9px; font:800 15px var(--sans); cursor:pointer; }
.sv-rep{ width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.14); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; display:grid; place-items:center; cursor:pointer; }

/* composer */
.sc-top{ position:absolute; z-index:7; top:calc(22px + env(safe-area-inset-top)); left:14px; right:14px; display:flex; align-items:center; gap:10px; font:800 13px var(--sans); }
.sc-top .x{ width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.2); color:#fff; display:grid; place-items:center; cursor:pointer; }
.sc-top span{ flex:1; text-align:center; letter-spacing:.06em; }
.sc-share{ height:34px; padding:0 16px; border-radius:17px; border:0; background:linear-gradient(100deg,#7c5cff,#c05cff); color:#fff; font:800 13px var(--sans); cursor:pointer; box-shadow:0 8px 20px rgba(124,92,255,.4); }
.sc-share:disabled{ opacity:.6; }
.sc-root .sv-stage{ padding-bottom:310px; }
.sc-tools{ position:absolute; z-index:7; left:0; right:0; bottom:0; padding:12px 14px calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, rgba(8,6,16,.78) 22%, rgba(8,6,16,.92)); display:flex; flex-direction:column; gap:10px; }
.sc-mood{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; } .sc-mood::-webkit-scrollbar{ display:none; }
.sc-mood button{ flex:none; border:0; border-radius:99px; padding:7px 12px; background:rgba(255,255,255,.12); color:#fff; font:700 12px var(--sans); cursor:pointer; }
.sc-line{ display:flex; gap:8px; }
.sc-in{ flex:1; height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.1); color:#fff; padding:0 14px; font:600 15px var(--sans); outline:0; }
.sc-in::placeholder{ color:rgba(255,255,255,.45); }
.sc-ab{ width:44px; height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.1); color:#fff; font:800 17px var(--sans); cursor:pointer; position:relative; }
.sc-ab.bg-pill{ background:rgba(0,0,0,.6); } .sc-ab.bg-outline{ -webkit-text-stroke:1px #000; color:#fff; background:rgba(255,255,255,.3); }
.sc-row{ display:flex; gap:8px; align-items:center; overflow-x:auto; scrollbar-width:none; } .sc-row::-webkit-scrollbar{ display:none; }
.sc-f{ flex:none; display:flex; flex-direction:column; align-items:center; gap:1px; min-width:54px; padding:6px 8px; border-radius:12px; border:1px solid transparent; background:rgba(255,255,255,.1); color:#fff; font-size:18px; cursor:pointer; }
.sc-f small{ font:600 9.5px var(--sans); color:rgba(255,255,255,.6); letter-spacing:.04em; text-transform:none; font-style:normal; text-shadow:none; }
.sc-f.on{ border-color:#fff; background:rgba(255,255,255,.2); }
.sc-lbl{ font:700 11px var(--sans); color:rgba(255,255,255,.6); min-width:30px; } .sc-val{ text-align:right; }
.sc-size{ flex:1; margin:0; }
.sc-dot{ flex:none; width:30px; height:30px; border-radius:50%; border:2px solid rgba(255,255,255,.25); background:var(--c); cursor:pointer; }
.sc-dot.on{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25); transform:scale(1.08); }
.sc-bgc{ flex:none; width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.25); cursor:pointer; }
.sc-bgc.cover{ background:conic-gradient(#ff7a45,#ff5c9a,#7c5cff,#38bdf8,#ff7a45); }
.sc-bgc.on{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.sc-song{ flex:none; margin-left:auto; border:1px solid rgba(255,255,255,.2); border-radius:99px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.6); padding:7px 12px; font:800 12px var(--sans); cursor:pointer; }
.sc-song.on{ background:#fff; color:#0b0b10; border-color:#fff; }
@media (max-height:700px){ .sc-root .sv-stage{ padding-bottom:280px; } .sv-cov{ width:min(46%,200px); } }

/* "Share to your story" in the player */
.pl-story{ display:flex; align-items:center; gap:12px; width:100%; margin:6px 0 4px; padding:11px 14px; border-radius:18px; border:1px solid rgba(255,255,255,.14); cursor:pointer; text-align:left; color:#fff;
  background:linear-gradient(100deg, rgba(124,92,255,.34), rgba(255,92,154,.2)); -webkit-tap-highlight-color:transparent; }
.pl-story .ic{ flex:none; width:40px; height:40px; border-radius:50%; background:conic-gradient(from 210deg,#7c5cff,#ff5c9a,#ffd76a,#7c5cff); display:grid; place-items:center; }
.pl-story .ic i{ width:34px; height:34px; border-radius:50%; background:#1a1626; display:grid; place-items:center; font:800 20px/1 var(--sans); font-style:normal; }
.pl-story b{ display:block; font:800 14px var(--sans); } .pl-story em{ display:block; font:500 12px var(--sans); font-style:normal; color:#cfc8ee; }
.pl-story .ch{ margin-left:auto; font:800 20px var(--sans); }
.pl-story:active{ background:linear-gradient(100deg, rgba(124,92,255,.46), rgba(255,92,154,.3)); }

.sa-left{ text-align:left; } .sa-right{ text-align:right; } .sa-center{ text-align:center; }
/* guide lines while dragging the text */
.sc-g{ position:absolute; z-index:6; pointer-events:none; opacity:0; transition:opacity .12s; background:rgba(255,255,255,.85); box-shadow:0 0 6px rgba(255,255,255,.6); }
.sc-g.v{ top:0; bottom:0; left:50%; width:1px; margin-left:-.5px; } .sc-g.h{ left:0; right:0; top:50%; height:1px; margin-top:-.5px; }
.sc-g.on{ opacity:.9; }
.sc-in{ resize:none; height:auto; min-height:56px; padding:10px 14px; line-height:1.3; }
.sc-abs{ display:flex; flex-direction:column; gap:6px; }
.sc-abs .sc-ab{ height:25px; width:44px; border-radius:10px; display:grid; place-items:center; font-size:13px; }

/* ---- composer, v2: tap to type in place · many texts · drag/pinch · bin ---- */
.sv-layers{ position:absolute; z-index:4; inset:0; pointer-events:none; }
.sc-root .sv-text{ pointer-events:auto; }
.sv-text.editing{ cursor:text; min-width:40px; }
.sv-text textarea{ display:block; background:transparent; border:0; outline:0; resize:none; padding:0; margin:0; color:inherit; caret-color:#fff; text-align:inherit; overflow:hidden;
  font:inherit; letter-spacing:inherit; text-transform:inherit; text-shadow:inherit; -webkit-text-stroke:inherit; line-height:inherit; width:100%; }
.sv-text textarea::placeholder{ color:rgba(255,255,255,.45); }
.sv-text.toss{ opacity:.6; transform:translate(-50%,-50%) scale(.82); transition:transform .12s, opacity .12s; }
.sv-text.gone{ opacity:0; transform:translate(-50%,-50%) scale(.2); transition:transform .22s, opacity .22s; }
.sc-root.editing .sv-song{ opacity:.35; transition:opacity .2s; }
.sc-root.editing .st-bg{ filter:brightness(.7); transition:filter .2s; }
.sc-hint{ position:absolute; z-index:3; left:0; right:0; top:64%; text-align:center; font:700 15px var(--sans); color:rgba(255,255,255,.6); pointer-events:none; opacity:0; transition:opacity .25s; }
.sc-root.empty .sc-hint{ opacity:1; animation:schint 2.6s ease-in-out infinite; } @keyframes schint{ 50%{ opacity:.45; } }
.sc-top .ttl{ flex:1; text-align:center; letter-spacing:.06em; }
.sc-done{ display:none; height:34px; padding:0 18px; border-radius:17px; border:0; background:#fff; color:#0b0b10; font:800 17px var(--sans); cursor:pointer; }
.sc-root.editing .sc-done{ display:block; } .sc-root.editing .sc-share{ display:none; } .sc-root.editing .sc-top .ttl{ visibility:hidden; }
.sc-trash{ position:absolute; z-index:8; left:50%; bottom:calc(120px + env(safe-area-inset-bottom)); width:54px; height:54px; margin-left:-27px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); opacity:0; transform:translateY(16px) scale(.8); pointer-events:none; transition:opacity .15s, transform .15s, background .15s; }
.sc-root.dragging .sc-trash{ opacity:1; transform:none; }
.sc-trash.hot{ background:#ff4d5e; border-color:#fff; transform:scale(1.25) !important; }
.sc-root .sc-tools{ bottom:var(--kb, 0px); }
.sc-idle{ flex-direction:row; align-items:center; gap:10px; padding-top:30px; }
.sc-root.editing .sc-idle{ display:none; } .sc-edit{ display:none; } .sc-root.editing .sc-edit{ display:flex; }
.sc-add{ flex:none; display:flex; align-items:center; gap:7px; height:40px; padding:0 14px; border-radius:20px; border:0; background:#fff; color:#0b0b10; font:800 13px var(--sans); cursor:pointer; }
.sc-add b{ font:800 16px var(--disp); }
.sc-bgs{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; flex:1; padding:2px; } .sc-bgs::-webkit-scrollbar{ display:none; }
.sc-idle .sc-song{ margin-left:0; }
.sc-edit .sc-row{ gap:8px; }
.sc-edit .sc-ab{ flex:none; width:40px; height:36px; border-radius:12px; display:grid; place-items:center; font-size:15px; }
.sc-root .st-frame{ touch-action:none; }

/* exact backgrounds (solid / gradient) */
.st-bg.flat{ background:linear-gradient(165deg, var(--ga,#7c5cff), var(--gb,#ff5c9a)) !important; } .st-bg.flat .st-blob{ display:none; }
.sc-bgpanel{ position:absolute; z-index:8; left:14px; right:14px; bottom:calc(86px + env(safe-area-inset-bottom)); display:none; align-items:center; gap:10px; padding:10px 12px; border-radius:18px;
  background:rgba(14,12,24,.88); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.sc-root.bgpanel .sc-bgpanel{ display:flex; }
.sc-seg{ display:flex; gap:4px; background:rgba(255,255,255,.08); border-radius:12px; padding:3px; }
.sc-seg button{ border:0; border-radius:9px; padding:7px 12px; background:none; color:rgba(255,255,255,.65); font:800 12px var(--sans); cursor:pointer; } .sc-seg button.on{ background:#fff; color:#0b0b10; }
.sc-cp{ display:flex; align-items:center; gap:8px; font:700 11.5px var(--sans); color:rgba(255,255,255,.7); }
.sc-cp input[type=color]{ width:38px; height:38px; padding:0; border:2px solid rgba(255,255,255,.35); border-radius:50%; background:none; cursor:pointer; overflow:hidden; -webkit-appearance:none; appearance:none; }
.sc-cp input[type=color]::-webkit-color-swatch-wrapper{ padding:0; } .sc-cp input[type=color]::-webkit-color-swatch{ border:0; border-radius:50%; } .sc-cp input[type=color]::-moz-color-swatch{ border:0; border-radius:50%; }
.sc-bgc.custom{ background:conic-gradient(#ff7a45,#ff5c9a,#7c5cff,#38bdf8,#38d39b,#ffd76a,#ff7a45); position:relative; }
.sc-bgc.custom::after{ content:"+"; position:absolute; inset:0; display:grid; place-items:center; font:800 16px/1 var(--sans); color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.sc-bgc.custom.on::after{ content:""; }
/* text colour: any colour */
.sc-dot.custom{ position:relative; background:conic-gradient(#ff7a45,#ff5c9a,#7c5cff,#38bdf8,#38d39b,#ffd76a,#ff7a45); overflow:hidden; }
.sc-dot.custom input{ position:absolute; inset:-6px; width:44px; height:44px; opacity:0; cursor:pointer; }
/* rows that scroll sideways must not clip the rings of the selected dot: air above and below instead of scaling it */
.sc-row, .sc-bgs{ padding:6px 4px; margin:-6px -4px; }
.sc-dot.on, .sc-bgc.on{ transform:none; box-shadow:0 0 0 3px rgba(255,255,255,.28); border-color:#fff; }
.sc-edit .sc-row{ gap:9px; }

/* ---- composer, v3: calm canvas, glass dock, pickers only when asked ---- */
.sc-top .x, .sc-ab{ background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.sc-share{ height:36px; padding:0 18px; font-size:13.5px; }
.sc-done{ height:36px; padding:0 18px; font-size:14px; letter-spacing:.02em; border-radius:18px; }
.sc-hint{ top:58%; display:flex; flex-direction:column; align-items:center; gap:6px; font:600 14px var(--sans); }
.sc-hint b{ font:800 38px/1 var(--disp); letter-spacing:-.02em; opacity:.85; }
/* dock */
.sc-dock{ position:absolute; z-index:7; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom)); display:flex; gap:4px; padding:7px 10px; border-radius:32px;
  background:rgba(14,12,24,.6); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 14px 40px rgba(0,0,0,.4); }
.sc-root.editing .sc-dock{ display:none; }
.sc-ib{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:72px; padding:4px 6px; border:0; background:none; color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sc-ib span{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.14); transition:background .15s, transform .15s; }
.sc-ib:active span{ transform:scale(.94); }
.sc-ib:first-child span{ background:#fff; color:#0b0b10; } .sc-ib span b{ font:800 18px var(--disp); }
.sc-ib em{ font:700 10.5px var(--sans); font-style:normal; color:rgba(255,255,255,.78); letter-spacing:.02em; }
.sc-ib.song span{ background:rgba(255,255,255,.14); } .sc-ib.song.on span{ background:#fff; color:#0b0b10; }
.sc-ib .pal.set{ box-shadow:inset 0 0 0 2px #fff; }
/* background tray: opens above the dock */
.sc-bgtray{ position:absolute; z-index:7; left:14px; right:14px; bottom:calc(106px + env(safe-area-inset-bottom)); display:none; padding:6px 8px; border-radius:24px;
  background:rgba(14,12,24,.7); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.sc-root.tray .sc-bgtray{ display:block; }
.sc-bgtray .sc-bgs{ margin:0; padding:8px 6px; gap:10px; }
.sc-bgc{ width:38px; height:38px; }
.sc-bgpanel{ bottom:calc(170px + env(safe-area-inset-bottom)); }
/* edit mode: Instagram-like — size on the left edge, A / alignment on the right, fonts and colours above the keyboard */
.sc-side{ position:absolute; z-index:7; right:14px; top:calc(76px + env(safe-area-inset-top)); display:none; flex-direction:column; gap:10px; }
.sc-root.editing .sc-side{ display:flex; }
.sc-side .sc-ab{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:#fff; font:800 17px var(--sans); cursor:pointer; }
.sc-ab.bg-pill{ background:rgba(0,0,0,.7); } .sc-ab.bg-outline{ background:rgba(255,255,255,.4); -webkit-text-stroke:1px #000; }
.sc-vs{ position:absolute; z-index:7; left:12px; top:calc(50% - 190px); width:40px; height:200px; display:none; touch-action:none; cursor:pointer; }
.sc-root.editing .sc-vs{ display:block; }
.sc-vs .trk{ position:absolute; left:50%; top:4px; bottom:4px; width:4px; margin-left:-2px; border-radius:4px; background:rgba(255,255,255,.38); box-shadow:0 0 10px rgba(0,0,0,.25); }
.sc-vs .thumb{ position:absolute; left:50%; top:50%; width:32px; height:32px; margin:-16px 0 0 -16px; border-radius:50%; background:#fff; color:#0b0b10; display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.4); }
.sc-vs .thumb em{ font:800 11px var(--disp); font-style:normal; }
.sc-edit{ flex-direction:column; gap:10px; padding:26px 12px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, rgba(8,6,16,.5) 30%, rgba(8,6,16,.8)); }
.sc-edit .sc-row{ padding:6px 4px; margin:0; gap:8px; }
.sc-f{ flex:none; display:block; min-width:0; padding:9px 16px; border-radius:99px; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:15px; letter-spacing:0; text-transform:none; cursor:pointer; white-space:nowrap; }
.sc-f.on{ background:#fff; color:#0b0b10; border:0; }
.sc-f.sf-neon.on{ text-shadow:none; } .sc-f.sf-bold{ letter-spacing:.04em; font-size:13.5px; }
.sc-dot{ width:32px; height:32px; }

/* an auto-sizing text box: the textarea sits on a hidden mirror of its own text, so box = text, at any size */
.ta-grow{ display:inline-grid; }
.ta-grow::after{ content:attr(data-v) " "; grid-area:1/1; visibility:hidden; white-space:pre; overflow-wrap:normal; font:inherit; letter-spacing:inherit; line-height:inherit; text-transform:inherit; min-width:.6em; }
.ta-grow textarea{ grid-area:1/1; width:100%; height:100%; min-width:0; }

.sv-text textarea{ white-space:pre; overflow:hidden; }

/* ---- tools ride on the right edge, so the bottom of the card (where text likes to sit) stays clear ---- */
.sc-dock{ left:auto; right:12px; top:50%; bottom:auto; transform:translateY(-50%); flex-direction:column; gap:6px; padding:8px 6px; border-radius:28px; }
.sc-ib{ min-width:0; padding:2px; gap:0; }
.sc-ib em{ display:none; }
.sc-ib span{ width:46px; height:46px; }
.sc-bgtray{ bottom:calc(20px + env(safe-area-inset-bottom)); right:74px; left:14px; }
.sc-bgpanel{ bottom:calc(92px + env(safe-area-inset-bottom)); right:74px; left:14px; flex-wrap:wrap; }
.sc-trash{ bottom:calc(36px + env(safe-area-inset-bottom)); }
.sc-root.preview .sc-top, .sc-root.preview .sc-dock, .sc-root.preview .sc-bgtray, .sc-root.preview .sc-bgpanel, .sc-root.preview .sc-hint, .sc-root.preview .sc-g{ opacity:0; pointer-events:none; transition:opacity .2s; }
.sc-root.preview::after{ content:"Tap to keep editing"; position:absolute; z-index:9; left:50%; bottom:calc(26px + env(safe-area-inset-bottom)); transform:translateX(-50%); font:700 12px var(--sans); color:rgba(255,255,255,.7); background:rgba(0,0,0,.35); padding:7px 14px; border-radius:99px; pointer-events:none; }

/* the textarea must not size the box (its own default width ~20 columns made the editor wider than the text): it is laid over the mirror */
.ta-grow{ position:relative; }
.ta-grow textarea{ position:absolute; inset:0; width:100%; height:100%; }

/* editing shows the text through the mirror (not clipped), the textarea only carries the caret — so glows (Neon) look as in the finished story */
.ta-grow::after{ visibility:visible; pointer-events:none; text-shadow:inherit; -webkit-text-stroke:inherit; }
.ta-grow textarea{ color:transparent !important; text-shadow:none !important; -webkit-text-stroke:0 !important; background:transparent; }
.ta-grow textarea::selection{ background:rgba(124,92,255,.45); color:transparent; }
/* manual size */
.sc-vs .thumb{ cursor:pointer; } .sc-vs .thumb em{ font-size:11px; letter-spacing:-.02em; }
.sc-szin{ position:absolute; left:46px; top:0; width:74px; height:36px; margin-top:-18px; border-radius:12px; border:1px solid rgba(255,255,255,.4); background:rgba(14,12,24,.92); color:#fff; font:800 16px var(--disp); text-align:center; outline:0; -moz-appearance:textfield; }
.sc-szin::-webkit-outer-spin-button, .sc-szin::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.sc-szin::after{ content:"px"; }