/* the account on every syringa page: faces, styled names, the corner and its panel. Its own colours, so any page can carry it. */
/* the palette, on the root so the panel's colour setting turns every page at once (me.ts `site colour`); violet until it does */
:root { --sy-bg: #0c0913; --sy-surface: #100c18; --sy-raised: #1d1528; --sy-line: #2a2039; --sy-text: #c8bedc; --sy-dim: #8a7ea0; --sy-bright: #ece6f7; --sy-pale: #cbb8ff; --sy-wave: #a35cf0; --sy-accent: #e04cd8; }
/* nothing hidden (a uid's tag waiting under the pointer, a sliding line) ever widens the page past the screen */
html { overflow-x: clip; }
.sy-corner, .sy-panel, .sy-face, .sy-name, .sy-doing { --sy-heart: url("/people/heart.svg"); }

/* a face: round, a hairline ring, its first letter until the picture comes */
.sy-face { position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: var(--sy-raised) center / cover no-repeat; color: var(--sy-dim); font: calc(var(--s) * .42) / 1 system-ui, -apple-system, "Segoe UI", sans-serif; text-transform: lowercase; }
.sy-face > b { position: relative; font-weight: 400; line-height: 1; text-box: trim-both ex alphabetic; }
/* centred on a lowercase letter, not its line, which leaves it low; trimmed where the browser can, nudged where not */
@supports not (text-box: trim-both ex alphabetic) { .sy-face > b { transform: translateY(-.1em); } }
.sy-face.sy-dressed > b { visibility: hidden; }
/* no picture: no round and no ring, a faint heart in their colour that breathes and shifts */
.sy-face.sy-plain { --h: var(--sy-wave); background: none; box-shadow: none; color: var(--sy-bright); }
.sy-face.sy-plain::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--h), var(--sy-accent), var(--h)) 0 0 / 220% 220%; opacity: .26; -webkit-mask: var(--sy-heart) center / contain no-repeat; mask: var(--sy-heart) center / contain no-repeat; animation: sy-beat 3.8s ease-in-out infinite, sy-flow 7s linear infinite; }
.sy-face.sy-plain > b { top: -1%; font-size: .78em; opacity: .85; }
@keyframes sy-beat { 0%, 100% { transform: scale(1); opacity: .22; } 50% { transform: scale(1.05); opacity: .34; } }
@keyframes sy-flow { to { background-position: 220% 220%; } }
/* a picture with see-through corners stands as drawn */
.sy-face.sy-clear { background-color: transparent; box-shadow: none; border-radius: 0; }
.sy-face.sy-clear:not(.sy-strip) { background-size: contain; }
.sy-face.sy-strip { background-size: calc(var(--n) * 100%) 100%; background-position: 0 0; animation: sy-turn var(--t) steps(var(--n), jump-none) infinite; }
@keyframes sy-turn { to { background-position: 100% 0; } }
/* a face cut to its owner's shape: the picture on a layer of its own, cut, the dot left whole over it */
.sy-face.sy-dressed[data-shape] { background-image: none !important; background-color: transparent; border-radius: 0; box-shadow: none; animation: none; }
.sy-face.sy-dressed[data-shape]::after { content: ""; position: absolute; inset: 0; background: var(--face) center / cover no-repeat; clip-path: var(--clip); }
.sy-face.sy-dressed.sy-strip[data-shape]::after { background-size: calc(var(--n) * 100%) 100%; background-position: 0 0; animation: sy-turn var(--t) steps(var(--n), jump-none) infinite; }
.sy-face[data-shape] > .sy-on { z-index: 1; }
/* on the ring at its lower right, never larger than a small dot */
.sy-on { --d: max(7px, min(26%, 16px)); position: absolute; right: calc(14.6% - var(--d) / 2); bottom: calc(14.6% - var(--d) / 2); width: var(--d); height: var(--d); border-radius: 50%; background: var(--sy-st-online); box-shadow: 0 0 0 2px var(--sy-bg); }

/* a name as its owner styled it */
.sy-name { --c: var(--sy-bright); color: var(--c); }
.sy-name.sy-bold { font-weight: 600; }
.sy-name.sy-italic { font-style: italic; }
.sy-name.sy-under { text-decoration: underline 1px var(--c); text-underline-offset: .18em; }
.sy-shimmer { background: linear-gradient(100deg, var(--c) 40%, #fff 50%, var(--c) 60%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sy-shimmer 3.2s linear infinite; }
@keyframes sy-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.sy-pulse { animation: sy-pulse 2.6s ease-in-out infinite; }
@keyframes sy-pulse { 50% { opacity: .55; text-shadow: 0 0 10px var(--c); } }
.sy-wave span { display: inline-block; animation: sy-wave 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * 90ms); }
@keyframes sy-wave { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-.18em); } }
.sy-rainbow { background: linear-gradient(90deg, #f07a9a, #e0a050, #7ad69a, #4fc8b8, #6fa8f0, var(--sy-wave), var(--sy-accent), #f07a9a) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sy-shimmer 6s linear infinite; }

/* what an open app says: `veromos - scene creator (thug pro)` */
.sy-doing { display: block; max-width: 100%; overflow: hidden; color: var(--sy-dim); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sy-doing::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--sy-wave); vertical-align: 1px; }

/* what someone says of themselves: the bio as written, then where and pronouns, then a site */
.sy-about { margin: 6px 0; }
.sy-bio { color: var(--sy-text); white-space: pre-line; overflow-wrap: anywhere; }
.sy-place { color: var(--sy-dim); font-size: 13px; }
.sy-site { color: var(--sy-bright); font-size: 13px; border-bottom: 1px solid var(--sy-wave); overflow-wrap: anywhere; }

/* the corner: the face alone, over everything */
.sy-corner { position: fixed; z-index: 60; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); cursor: pointer; line-height: 0; }
/* in a page's top bar: on the bar's middle line like the words beside it, the face no taller than they need */
[data-syringa-corner] { display: inline-flex; align-items: center; align-self: center; height: 26px; }
/* the apps under one arrow at the start of the corner (me.ts `apps`): a bare arrow, a glass list under it */
.apps-menu { position: relative; display: inline-flex; vertical-align: middle; margin-right: 10px; }
.apps-open { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 26px; padding: 0; border: 0; background: none; color: var(--dim); font: inherit; cursor: pointer; transition: color .2s; }
.apps-open:hover, .apps-open:focus-visible, .apps-open[aria-expanded="true"] { color: var(--bright); outline: none; }
.apps-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.apps-open[aria-expanded="true"] svg { transform: rotate(180deg); }
.apps-list { position: absolute; top: calc(100% + 10px); right: -6px; display: flex; flex-direction: column; min-width: 168px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid var(--sy-line); border-radius: 12px; background: color-mix(in srgb, var(--sy-surface) 56%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 16px 44px rgba(0, 0, 0, .55); animation: apps-in .14s ease-out; }
.apps-list[hidden] { display: none; }
.apps-list a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; color: var(--dim); font-size: 14px; white-space: nowrap; outline: none; transition: color .15s, text-shadow .15s; }
.apps-list a:hover, .apps-list a:focus-visible { color: var(--bright); text-shadow: 0 0 10px color-mix(in srgb, var(--sy-wave) 55%, transparent); }
.apps-list img { width: 20px; height: 20px; border-radius: 5px; }
@keyframes apps-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .apps-list, .apps-open svg { animation: none; transition: none; } }
/* a page with no bar of its own: the corner's row fixed in the top right */
.sy-bar { position: fixed; z-index: 60; top: max(14px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
[data-syringa-corner] .sy-corner { position: relative; top: auto; right: auto; display: inline-flex; align-items: center; }
@media (hover: hover) {
  .sy-corner:hover .sy-face { filter: drop-shadow(0 0 4px var(--sy-wave)); }
  .sy-corner:hover .sy-face.sy-plain, .sy-corner:hover .sy-face.sy-clear { box-shadow: none; filter: drop-shadow(0 0 4px var(--sy-wave)); }
}

/* the panel: a narrow sheet under the corner, the whole width on a phone */
.sy-panel { position: fixed; z-index: 61; top: calc(max(14px, env(safe-area-inset-top)) + 40px); right: max(16px, env(safe-area-inset-right)); width: 300px; max-height: calc(100dvh - 80px); overflow: auto; padding: 16px; border: 1px solid var(--sy-line); border-radius: 12px; background: color-mix(in srgb, var(--sy-surface) 48%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); color: var(--sy-text); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); text-transform: none; letter-spacing: normal; text-align: left; }
.sy-panel a { color: var(--sy-text); cursor: pointer; text-decoration: none; border-bottom: 1px solid transparent; }
.sy-panel a:hover, .sy-panel a.on { color: var(--sy-bright); border-bottom-color: var(--sy-wave); }
.sy-head { display: flex; align-items: center; gap: 12px; }
.sy-big { font-size: 18px; }
.sy-dim { color: var(--sy-dim); font-size: 12px; }
.sy-tabs { display: flex; align-items: center; gap: 2px; margin: 12px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--sy-line); }
.sy-row { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; }
/* the links and switches under the status: short words, one line each even on a phone */
.sy-links { gap: 4px 12px; margin: 4px 0; font-size: 13px; }
.sy-links.sy-dim a { color: var(--sy-dim); }
.sy-links.sy-dim a.on { color: var(--sy-bright); }
.sy-links > span:first-child { color: var(--sy-dim); }
.sy-look .sy-swatches { gap: 6px; }
.sy-links .sy-ghost-do { display: inline-flex; align-items: center; line-height: 0; }
.sy-links .sy-ghost-do .sy-icon { width: 15px; height: 15px; }
.sy-label { margin: 12px 0 4px; color: var(--sy-dim); font-size: 12px; }
.sy-file { color: var(--sy-text); cursor: pointer; border-bottom: 1px solid var(--sy-wave); }
.sy-swatches { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.sy-swatches a { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--sy-line); background: repeating-linear-gradient(45deg, var(--sy-line) 0 3px, #17111f 3px 6px); }
.sy-swatches a.on { box-shadow: 0 0 0 2px var(--sy-bg), 0 0 0 3px var(--sy-bright); }
.sy-swatches input { width: 20px; height: 20px; padding: 0; border: 1px solid var(--sy-line); border-radius: 50%; overflow: hidden; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sy-swatches input::-webkit-color-swatch-wrapper { padding: 0; }
.sy-swatches input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.sy-swatches input::-moz-color-swatch { border: 0; border-radius: 50%; }
.sy-friend { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.sy-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sy-who > a { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-now { margin-bottom: 6px; }
/* name and what they are doing sit close, the pair centred on the face */
.sy-who > a { line-height: 1.25; }
.sy-who .sy-doing { margin-top: 1px; line-height: 1.3; }
.sy-acts { display: flex; align-items: center; gap: 14px; flex: none; font-size: 12px; }
.sy-acts .sy-icon { display: block; width: 16px; height: 16px; }
.sy-add { display: flex; gap: 10px; margin-bottom: 8px; }
.sy-add input { flex: 1; min-width: 0; color: var(--sy-bright); background: transparent; border: 0; border-bottom: 1px solid var(--sy-line); padding: 5px 1px; font: inherit; outline: none; }
.sy-add input:focus { border-color: var(--sy-wave); }
.sy-add button { color: var(--sy-bright); background: none; border: 0; border-bottom: 1px solid var(--sy-wave); padding: 2px 0; font: inherit; cursor: pointer; }
.sy-about-edit { position: relative; display: flex; flex-direction: column; gap: 6px; }
/* the bio is one line until its words need more, then grows with them */
.sy-about-edit textarea[name=bio] { field-sizing: content; min-height: 0; max-height: 9em; padding-right: 26px; resize: none; overflow-y: auto; }
/* save as an icon, in the bio line's corner where the eye already is */
.sy-panel .sy-about-edit button.sy-save { position: absolute; top: 2px; right: 0; }
.sy-panel button.sy-save { display: grid; place-items: center; padding: 3px; border: 0; background: none; color: var(--sy-dim); cursor: pointer; transition: color .15s; }
.sy-panel button.sy-save:hover { color: var(--sy-wave); text-shadow: none; }
.sy-panel button.sy-save .sy-icon { width: 17px; height: 17px; }
.sy-about-edit textarea, .sy-about-edit input { width: 100%; color: var(--sy-bright); background: transparent; border: 0; border-bottom: 1px solid var(--sy-line); padding: 5px 1px; font: inherit; outline: none; resize: vertical; }
.sy-about-edit textarea:focus, .sy-about-edit input:focus { border-color: var(--sy-wave); }
/* a name and a password changed: the same quiet fields, the second typing coloured as it matches */
.sy-rename, .sy-pass, .sy-refund { display: flex; flex-direction: column; gap: 6px; }
/* the subscription part: vip now, then each pass bought, a refund asked for on its own line */
.sy-sub-now { color: var(--sy-bright); font-size: 14px; overflow-wrap: anywhere; }
.sy-orders { display: flex; flex-direction: column; gap: 8px; }
.sy-order { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.sy-order > a { align-self: flex-start; font-size: 12px; }
.sy-refund { margin-top: 4px; }
.sy-refund > span { display: flex; gap: 14px; align-items: baseline; }
.sy-rename input, .sy-pass input, .sy-refund input { width: 100%; color: var(--sy-bright); background: transparent; border: 0; border-bottom: 1px solid var(--sy-line); padding: 5px 1px; font: inherit; outline: none; transition: border-color .2s; }
.sy-rename input:focus, .sy-pass input:focus, .sy-refund input:focus { border-color: var(--sy-wave); }
.sy-pass input.sy-off { border-color: #e0607a; }
.sy-pass input.sy-match { border-color: #7ad69a; }
.sy-rename button, .sy-pass button, .sy-refund button { align-self: flex-start; color: var(--sy-bright); background: none; border: 0; border-bottom: 1px solid var(--sy-wave); padding: 2px 0; font: inherit; cursor: pointer; }
.sy-label .sy-peek { margin-left: 6px; vertical-align: middle; cursor: pointer; }
.sy-label .sy-peek:hover { color: var(--sy-bright); }
.sy-about-edit button { align-self: flex-start; color: var(--sy-bright); background: none; border: 0; border-bottom: 1px solid var(--sy-wave); padding: 2px 0; font: inherit; cursor: pointer; }
.sy-said { margin-top: 10px; color: var(--sy-accent); font-size: 12px; }
/* a picture being placed: the round it will be cut to, dragged and scrolled, two slides and the words under */
.sy-placing { display: flex; flex-direction: column; gap: 8px; }
.sy-frame { width: 220px; height: 220px; align-self: center; border-radius: 10px; cursor: grab; touch-action: none; }
.sy-frame:active { cursor: grabbing; }
.sy-slide { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; color: var(--sy-dim); font-size: 12px; }
.sy-slide.sy-volume { grid-template-columns: auto 1fr 34px; margin: 4px 0 8px; }
.sy-slide input { width: 100%; height: 16px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sy-slide input::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: var(--sy-line); }
.sy-slide input::-moz-range-track { height: 2px; border-radius: 1px; background: var(--sy-line); }
.sy-slide input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--sy-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sy-wave) 35%, transparent); -webkit-appearance: none; appearance: none; }
.sy-slide input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--sy-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sy-wave) 35%, transparent); }
/* icons: a stroke in the text's colour, the size of a letter */
.sy-icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
/* a status: green on, amber away, red busy, grey off, each in the viewer's shade */
.sy-on.sy-away, .sy-dot.sy-away { background: var(--sy-st-away); }
.sy-on.sy-busy, .sy-dot.sy-busy { background: var(--sy-st-busy); }
.sy-on.sy-offline, .sy-dot.sy-invisible, .sy-dot.sy-offline { background: var(--sy-st-offline); }
.sy-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--sy-st-online); vertical-align: 1px; }
/* a status's shade as the viewer picked it, in its own hue (`syringa.shade.<status>`, on the root as data-st-<status>) */
:root { --sy-st-online: #5fd38a; --sy-st-away: #e0a050; --sy-st-busy: #f07a9a; --sy-st-offline: #8a8796; }
:root[data-st-online="1"] { --sy-st-online: #3fb96b; }
:root[data-st-online="2"] { --sy-st-online: #86e3a6; }
:root[data-st-online="3"] { --sy-st-online: #2e9e5b; }
:root[data-st-online="4"] { --sy-st-online: #b0eec4; }
:root[data-st-away="1"] { --sy-st-away: #f0b860; }
:root[data-st-away="2"] { --sy-st-away: #e8903a; }
:root[data-st-away="3"] { --sy-st-away: #d4a72c; }
:root[data-st-away="4"] { --sy-st-away: #f5c98a; }
:root[data-st-busy="1"] { --sy-st-busy: #e5484d; }
:root[data-st-busy="2"] { --sy-st-busy: #f05a5a; }
:root[data-st-busy="3"] { --sy-st-busy: #c93a4a; }
:root[data-st-busy="4"] { --sy-st-busy: #ff9fb4; }
:root[data-st-offline="1"] { --sy-st-offline: #6a6876; }
:root[data-st-offline="2"] { --sy-st-offline: #a8a5b4; }
:root[data-st-offline="3"] { --sy-st-offline: #4e4c58; }
:root[data-st-offline="4"] { --sy-st-offline: #c4c1ce; }
.sy-shades { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.sy-shades span { display: inline-flex; align-items: center; gap: 5px; }
.sy-shades a { width: 11px; height: 11px; border-radius: 50%; cursor: pointer; opacity: .55; transition: opacity .2s, transform .2s; }
.sy-shades a:hover { opacity: .9; }
.sy-shades a.on { opacity: 1; transform: scale(1.2); }
.sy-shades a[data-shade="online 0"] { background: #5fd38a; }
.sy-shades a[data-shade="online 1"] { background: #3fb96b; }
.sy-shades a[data-shade="online 2"] { background: #86e3a6; }
.sy-shades a[data-shade="online 3"] { background: #2e9e5b; }
.sy-shades a[data-shade="online 4"] { background: #b0eec4; }
.sy-shades a[data-shade="away 0"] { background: #e0a050; }
.sy-shades a[data-shade="away 1"] { background: #f0b860; }
.sy-shades a[data-shade="away 2"] { background: #e8903a; }
.sy-shades a[data-shade="away 3"] { background: #d4a72c; }
.sy-shades a[data-shade="away 4"] { background: #f5c98a; }
.sy-shades a[data-shade="busy 0"] { background: #f07a9a; }
.sy-shades a[data-shade="busy 1"] { background: #e5484d; }
.sy-shades a[data-shade="busy 2"] { background: #f05a5a; }
.sy-shades a[data-shade="busy 3"] { background: #c93a4a; }
.sy-shades a[data-shade="busy 4"] { background: #ff9fb4; }
.sy-shades a[data-shade="offline 0"] { background: #8a8796; }
.sy-shades a[data-shade="offline 1"] { background: #6a6876; }
.sy-shades a[data-shade="offline 2"] { background: #a8a5b4; }
.sy-shades a[data-shade="offline 3"] { background: #4e4c58; }
.sy-shades a[data-shade="offline 4"] { background: #c4c1ce; }

.sy-status a { display: inline-flex; align-items: center; }
/* unread messages: a count on the corner's face and the chat tab */
.sy-badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--sy-accent); color: #fff; font: 600 10px/16px system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--sy-bg); }
.sy-unread { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--sy-accent); color: #fff; font-size: 11px; font-weight: 600; text-align: center; line-height: 18px; }
/* privacy: a row a part, an eye for the hover card and who sees it, all icons */
.sy-prefs { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 4px; }
.sy-pref { display: grid; grid-template-columns: 1fr 26px 92px; align-items: center; gap: 6px; padding: 3px 0; }
.sy-pref > span:first-child { color: var(--sy-text); font-size: 13px; }
.sy-tog { display: inline-flex; align-items: center; gap: 5px; color: var(--sy-dim); }
.sy-panel a.sy-tog { border: 0; }
.sy-panel a.sy-tog:hover, .sy-tog.on { color: var(--sy-bright); }
.sy-tog em { font-style: normal; font-size: 11.5px; }
.sy-panel .sy-dim .sy-icon { width: 1em; height: 1em; }
/* chats in the panel */
.sy-panel a.sy-talk { display: flex; align-items: center; gap: 10px; padding: 6px 0; border: 0; }
.sy-talk .sy-who .sy-dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the card under the pointer: who they are at a glance, and the way to their profile */
.sy-card, .sy-menu { position: fixed; z-index: 70; color: var(--sy-text); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: color-mix(in srgb, var(--sy-surface) 56%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); border: 1px solid var(--sy-line); border-radius: 12px; box-shadow: 0 16px 44px rgba(0, 0, 0, .55); text-align: left; text-transform: none; letter-spacing: normal; }
.sy-card { width: 270px; padding: 14px; animation: sy-rise .16s ease-out; }
.sy-card.sy-out { opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; pointer-events: none; }
.sy-card .sy-head { margin-bottom: 8px; }
/* a bit sizes to its words: held to the card's width, so a long doing line ends in an ellipsis rather than past the edge */
.sy-card .sy-bit { max-width: 100%; vertical-align: top; }
/* a status line is a block of the card width, cut short, never pushing past the edge on a phone */
.sy-card .sy-bit:has(> .sy-doing) { display: block; min-width: 0; }
.sy-card .sy-head > div { min-width: 0; }
.sy-card .sy-head .sy-dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-card { overflow-wrap: anywhere; }
.sy-card .sy-about { margin: 6px 0; }
.sy-card-acts { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--sy-line); }
.sy-card-acts a { color: var(--sy-bright); cursor: pointer; text-decoration: none; }
.sy-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.sy-go .sy-icon { animation: sy-nudge 1.6s ease-in-out infinite; }
.sy-go:hover .sy-icon { animation-duration: .7s; color: var(--sy-accent); }
@keyframes sy-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes sy-rise { from { opacity: 0; transform: translateY(4px); } }
.sy-menu { min-width: 170px; padding: 6px; }
.sy-menu a { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; color: var(--sy-text); cursor: pointer; text-decoration: none; font-size: 13.5px; }
.sy-menu a:hover { background: color-mix(in srgb, var(--sy-wave) 16%, transparent); color: var(--sy-bright); }

/* a chat: a small window at the foot of the page */
.sy-chat { position: fixed; z-index: 65; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; width: 330px; height: min(460px, calc(100dvh - 100px)); color: var(--sy-text); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: color-mix(in srgb, var(--sy-surface) 97%, transparent); border: 1px solid var(--sy-line); border-radius: 14px; box-shadow: 0 20px 56px rgba(0, 0, 0, .6); text-align: left; text-transform: none; letter-spacing: normal; animation: sy-rise .18s ease-out; }
.sy-chat[hidden] { display: none; }
.sy-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--sy-line); }
.sy-chat-who { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--sy-bright); text-decoration: none; line-height: 1.25; }
/* a long name or status cut short, never widening the window past the screen */
.sy-chat-head { min-width: 0; max-width: 100%; }
.sy-chat-head > :not(.sy-chat-who) { flex: none; }
.sy-chat-who > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-chat-who .sy-nameline > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sy-chat-x { color: var(--sy-dim); cursor: pointer; }
.sy-chat-x:hover { color: var(--sy-bright); }
.sy-chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
/* a bubble: theirs glass with a violet hair, mine the accent lit from inside; a run's corners meet where its lines do */
.sy-msg { position: relative; align-self: flex-start; max-width: 80%; padding: 7px 12px; border-radius: 6px 16px 16px 6px; background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sy-wave) 16%, transparent), 0 2px 10px rgba(0, 0, 0, .18); color: var(--sy-bright); line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.sy-line.first > .sy-msg { border-top-left-radius: 16px; }
.sy-line.last > .sy-msg { border-bottom-left-radius: 16px; }
.sy-msg.mine { align-self: flex-end; border-radius: 16px 6px 6px 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--sy-wave) 72%, transparent), color-mix(in srgb, var(--sy-accent) 58%, transparent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 16px color-mix(in srgb, var(--sy-wave) 22%, transparent); }
.sy-line.mine.first > .sy-msg { border-top-right-radius: 16px; }
.sy-line.mine.last > .sy-msg { border-bottom-right-radius: 16px; }
.sy-line.first:not(:first-child) { margin-top: 8px; }
.sy-line:not(.mine) { padding-left: 30px; }
.sy-line-face { position: absolute; left: -30px; bottom: 0; line-height: 0; }
.sy-stamp { margin: 3px 4px 0; color: var(--sy-dim); font-size: 10.5px; letter-spacing: .02em; }
.sy-day { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; color: var(--sy-dim); font-size: 11px; }
.sy-day::before, .sy-day::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sy-wave) 22%, transparent), transparent); }
.sy-line { animation: sy-rise .18s ease-out; }
.sy-seen { align-self: flex-end; display: flex; align-items: center; gap: 4px; color: var(--sy-dim); font-size: 11px; }
.sy-chat-empty { margin: auto; }
.sy-typing { align-self: flex-start; display: flex; gap: 4px; margin: 6px 0 0 30px; padding: 9px 12px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sy-wave) 16%, transparent); }
.sy-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sy-dim); animation: sy-hop 1.1s ease-in-out infinite; }
.sy-typing i:nth-child(2) { animation-delay: .15s; }
.sy-typing i:nth-child(3) { animation-delay: .3s; }
.sy-room-typing { display: flex; align-items: center; gap: 7px; padding: 4px 14px 0; color: var(--sy-dim); font-size: 11.5px; }
.sy-room-typing .sy-dots { display: flex; gap: 3px; }
.sy-room-typing .sy-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--sy-dim); animation: sy-hop 1.1s ease-in-out infinite; }
.sy-room-typing .sy-dots i:nth-child(2) { animation-delay: .15s; }
.sy-room-typing .sy-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sy-hop { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.sy-chat-say { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--sy-line); }
.sy-chat-say textarea { flex: 1; max-height: 120px; color: var(--sy-bright); background: transparent; border: 0; outline: none; resize: none; font: inherit; field-sizing: content; }
.sy-chat-say button { color: var(--sy-wave); background: none; border: 0; padding: 2px; cursor: pointer; }
.sy-chat-say button:hover { color: var(--sy-accent); }
.sy-chat-shut, .sy-chat .sy-said { padding: 10px 12px; }

/* the uid as worn, #0002: padding zeros faint, its own digits in the tag's ink, the tag named above it on hover */
.sy-uid { position: relative; font-variant-numeric: tabular-nums; cursor: default; }
.sy-uid i { font-style: normal; opacity: .5; }
.sy-uid b { font-weight: 500; color: var(--ink, inherit); }
/* the tag name lit in its own ink: a white-hot core, then the colour falling off wide, as light does; no box */
.sy-uid[data-tag]::after { content: attr(data-tag); position: absolute; left: calc(50% + var(--nudge, 0px)); bottom: calc(100% + 4px); z-index: 80; color: color-mix(in srgb, var(--ink, var(--sy-bright)) 72%, #fff); font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; text-shadow: 0 0 1px color-mix(in srgb, var(--ink, var(--sy-bright)) 85%, #fff), 0 0 4px color-mix(in srgb, var(--ink, var(--sy-bright)) 75%, transparent), 0 0 10px color-mix(in srgb, var(--ink, var(--sy-bright)) 50%, transparent), 0 0 22px color-mix(in srgb, var(--ink, var(--sy-bright)) 30%, transparent), 0 0 40px color-mix(in srgb, var(--ink, var(--sy-bright)) 16%, transparent); opacity: 0; pointer-events: none; translate: -50% 4px; transition: opacity .22s ease-out, translate .22s ease-out; }
.sy-uid[data-tag]:hover::after { opacity: 1; translate: -50% 0; }
.sy-uid.sy-below[data-tag]::after { bottom: auto; top: calc(100% + 4px); translate: -50% -4px; }
.sy-uid.sy-below[data-tag]:hover::after { translate: -50% 0; }

/* roles in the colour the owner set, else these */
.sy-role { color: var(--sy-dim); }
.sy-role.owner { color: var(--sy-accent); }
.sy-role.admin { color: var(--sy-wave); }
.sy-role.staff { color: #6fa8f0; }
.sy-role[data-ink][data-ink] { color: var(--ink); }
.sy-ink-row { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.sy-ink-row .sy-role { width: 44px; flex: none; font-size: 12px; }

/* flourishes: each person's three, played on the piece of their line under the pointer, in their tag's ink */
.sy-bit { display: inline-block; transition: translate .25s ease, letter-spacing .25s ease, color .25s, text-shadow .25s, filter .25s, transform .25s ease, text-decoration-color .25s; text-underline-offset: 3px; }
.sy-mv-lift .sy-bit:hover { translate: 0 -2px; }
.sy-mv-drift .sy-bit:hover { translate: 3px 0; }
.sy-mv-bounce .sy-bit:hover { animation: sy-fl-bounce .5s ease-out; }
.sy-mv-sway .sy-bit:hover { animation: sy-fl-sway 1.4s ease-in-out infinite; }
.sy-mv-glow .sy-bit:hover { text-shadow: 0 0 10px color-mix(in srgb, var(--ink, var(--sy-bright)) 70%, transparent); }
.sy-mv-ink .sy-bit:hover { color: var(--ink, inherit); }
.sy-mv-flicker .sy-bit:hover { animation: sy-fl-flicker 1.6s linear infinite; }
.sy-mv-bright .sy-bit:hover { filter: brightness(1.45); }
.sy-mv-spread .sy-bit:hover { letter-spacing: .06em; }
.sy-mv-slant .sy-bit:hover { transform: skewX(-9deg); }
/* drawn only under the pointer: a clear underline is not clear on a name clipped to a gradient, it shows the gradient */
.sy-mv-underline .sy-bit:hover { text-decoration: underline 1px var(--ink, currentColor); }
.sy-mv-sway.sy-mv-flicker .sy-bit:hover { animation: sy-fl-sway 1.4s ease-in-out infinite, sy-fl-flicker 1.6s linear infinite; }
.sy-mv-bounce.sy-mv-flicker .sy-bit:hover { animation: sy-fl-bounce .5s ease-out, sy-fl-flicker 1.6s linear infinite; }
@keyframes sy-fl-bounce { 0%, 100% { scale: 1; } 40% { scale: 1.08; } 70% { scale: .98; } }
@keyframes sy-fl-sway { 0%, 100% { rotate: 0deg; } 25% { rotate: -2deg; } 75% { rotate: 2deg; } }
@keyframes sy-fl-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .65; } 12% { opacity: 1; } 47% { opacity: .8; } 50% { opacity: 1; } 71% { opacity: .7; } 73% { opacity: 1; } }

@media (max-width: 520px) {
  .sy-panel { left: 12px; right: 12px; width: auto; }
  .sy-chat { left: 12px; right: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .sy-face.sy-strip, .sy-face.sy-strip[data-shape]::after, .sy-shimmer, .sy-pulse, .sy-wave span, .sy-rainbow, .sy-face.sy-plain::before, .sy-moves .sy-bit:hover { animation: none; } }
/* a lighter blur on a phone, where a wide one costs frames */
@media (max-width: 520px) { .sy-card, .sy-menu, .sy-panel { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }
/* the faces made for syringa, picked from a grid over the page: a character, then its scenes and moves */
.sy-presets { position: fixed; z-index: 64; top: 50%; left: 50%; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); overflow: auto; padding: 16px; border: 1px solid var(--sy-line); border-radius: 14px; background: color-mix(in srgb, var(--sy-surface) 84%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); color: var(--sy-text); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); transform: translate(-50%, -50%); animation: sy-presets-in .22s cubic-bezier(.2, .8, .2, 1); }
.sy-presets[hidden] { display: none; }
@keyframes sy-presets-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.97); } }
.sy-presets-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--sy-bright); }
.sy-presets-head b { flex: 1; font-weight: 500; }
.sy-presets-head a { display: inline-flex; color: var(--sy-dim); cursor: pointer; }
.sy-presets-head a:first-of-type .sy-icon { transform: scaleX(-1); }
.sy-presets-head a:hover { color: var(--sy-bright); }
.sy-presets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.sy-preset { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 50%; background: var(--sy-raised); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sy-bright) 14%, transparent); cursor: pointer; transition: transform .18s, box-shadow .18s; }
.sy-preset img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sy-preset em { position: absolute; left: 0; right: 0; bottom: 8%; color: var(--sy-bright); font-size: 11px; font-style: normal; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .9); opacity: 0; transition: opacity .18s; }
.sy-preset:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--sy-wave), 0 8px 22px rgba(0, 0, 0, .45); }
.sy-preset:hover em, .sy-preset.on em { opacity: 1; }
.sy-preset.on { box-shadow: 0 0 0 2px var(--sy-accent, var(--sy-accent)), 0 0 18px color-mix(in srgb, var(--sy-accent) 45%, transparent); }
.sy-preset.moving::after { content: ""; position: absolute; top: 12%; right: 12%; width: 7px; height: 7px; border-radius: 50%; background: var(--sy-wave); box-shadow: 0 0 6px var(--sy-wave); }
.sy-presets .sy-row { margin-top: 12px; }
.sy-presets .sy-row a { color: var(--sy-text); cursor: pointer; text-decoration: none; border-bottom: 1px solid var(--sy-wave); }
.sy-presets .sy-row a:hover { color: var(--sy-bright); }
.sy-presets .sy-row a.off { opacity: .4; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sy-presets { animation: none; } .sy-preset { transition: none; } }
/* a phone zooms into any field under 16px and stays there after it closes: every field holds 16px, and no double tap zooms */
@media (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* the panel's bar: an icon a tab, the open one lit with a short glowing line under it and named at the end */
.sy-panel .sy-tabs a { position: relative; display: inline-grid; place-items: center; width: 32px; height: 28px; color: var(--sy-dim); border: 0; transition: color .2s, filter .2s; }
.sy-tabs a .sy-icon { width: 18px; height: 18px; }
.sy-panel .sy-tabs a:hover { color: var(--sy-text); }
.sy-panel .sy-tabs a.on { color: var(--sy-bright); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sy-wave) 70%, transparent)); }
.sy-tabs a::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 0; height: 2px; border-radius: 1px; background: var(--sy-wave); box-shadow: 0 0 6px var(--sy-wave); translate: -50% 0; transition: width .22s ease; }
.sy-tabs a.on::after { width: 14px; }
.sy-tabs a .sy-unread { position: absolute; top: 0; right: 0; min-width: 0; padding: 0; background: none; color: var(--sy-accent); font-size: 10px; line-height: 1; text-shadow: 0 0 6px var(--sy-accent); }
.sy-tab-word { margin-left: auto; color: var(--sy-dim); font-size: 12px; }
/* back to the tab before, on a phone only, where the tabs sit far from the thumb */
.sy-panel .sy-tabs a.sy-back { display: none; margin-right: 4px; }
.sy-panel .sy-tabs a.sy-back::after { content: none; }
@media (max-width: 640px), (pointer: coarse) { .sy-panel .sy-tabs a.sy-back { display: inline-grid; } }
/* a section folded under its name: the arrow turns, the body slides open */
.sy-fold { border-bottom: 1px solid color-mix(in srgb, var(--sy-line) 60%, transparent); }
.sy-fold:last-child { border-bottom: 0; }
.sy-panel a.sy-fold-head { display: flex; align-items: center; gap: 8px; padding: 9px 0; color: var(--sy-text); border: 0; font-size: 13px; }
.sy-panel a.sy-fold-head:hover { color: var(--sy-bright); }
.sy-fold-head .sy-icon { width: 13px; height: 13px; color: var(--sy-dim); transition: rotate .22s ease, color .2s; }
.sy-fold.open > .sy-fold-head .sy-icon { rotate: 90deg; color: var(--sy-wave); }
.sy-fold-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; }
.sy-fold.open > .sy-fold-body { grid-template-rows: 1fr; }
.sy-fold-body > div { min-height: 0; overflow: hidden; }
.sy-fold.open > .sy-fold-body > div { padding-bottom: 10px; }
.sy-fold .sy-label:first-child { margin-top: 0; }
/* the name editor: the name as it will show, a hue and a lightness, each motion written in itself, three looks */
.sy-preview { margin: 0 0 10px; font-size: 22px; font-weight: 300; line-height: 1.3; }
.sy-hue { display: grid; gap: 10px; margin: 12px 0 8px; }
.sy-hue input { width: 100%; height: 6px; margin: 0; border-radius: 3px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sy-hue input[data-hue="h"] { background: linear-gradient(90deg, hsl(0 72% 62%), hsl(60 72% 62%), hsl(120 72% 62%), hsl(180 72% 62%), hsl(240 72% 62%), hsl(300 72% 62%), hsl(360 72% 62%)); }
.sy-hue input[data-hue="l"] { background: linear-gradient(90deg, #4a3560, var(--sy-bright)); }
.sy-hue input::-webkit-slider-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--sy-bright); box-shadow: 0 0 0 2px var(--sy-bg), 0 0 8px rgba(0, 0, 0, .5); -webkit-appearance: none; appearance: none; }
.sy-hue input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--sy-bright); box-shadow: 0 0 0 2px var(--sy-bg), 0 0 8px rgba(0, 0, 0, .5); }
.sy-motions, .sy-looks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.sy-panel .sy-motions a, .sy-panel .sy-looks a { border: 0; opacity: .5; transition: opacity .2s, filter .2s; }
.sy-panel .sy-motions a:hover, .sy-panel .sy-looks a:hover { opacity: .85; }
.sy-panel .sy-motions a.on, .sy-panel .sy-looks a.on { opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sy-wave) 60%, transparent)); }
.sy-looks a[data-look="bold"] { font-weight: 600; }
.sy-looks a[data-look="italic"] { font-style: italic; }
.sy-looks a[data-look="underline"] { text-decoration: underline 1px; text-underline-offset: 3px; }
/* the fonts iris takes, each a stack of the reader's own; none is fetched */
.sy-f-sans { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.sy-f-serif { font-family: ui-serif, Georgia, "Times New Roman", serif; }
.sy-f-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace; }
.sy-f-rounded { font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Segoe UI", sans-serif; }
.sy-f-hand { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; }
.sy-f-script { font-family: "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive; }
.sy-f-type { font-family: "American Typewriter", "Courier New", Courier, monospace; }
.sy-f-book { font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif; }
.sy-f-wide { font-family: Verdana, Geneva, sans-serif; }
.sy-f-narrow { font-family: "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", sans-serif-condensed, sans-serif; }
.sy-f-grand { font-family: Didot, "Bodoni MT", "Bodoni 72", serif; }
.sy-f-old { font-family: "Old English Text MT", "Goudy Old Style", Garamond, serif; }
.sy-f-pixel { font-family: "Lucida Console", "Courier New", monospace; letter-spacing: .02em; }
/* an app's mark or a game's icon before what it is doing, in place of the dot */
.sy-mark { width: 14px; height: 14px; margin-right: 6px; object-fit: contain; vertical-align: -2px; }
/* in a doing line it keeps the dot's slot, its middle on the middle of the letters */
.sy-doing .sy-mark { width: 13px; height: 13px; margin: 0 6px 0 0; border-radius: 3px; vertical-align: middle; }
.sy-doing:has(.sy-mark)::before { display: none; }
/* fonts and times in the edit tab: each font word written in itself, each way of writing a time shown as it reads */
.sy-fonts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0; font-size: 13px; }
.sy-fonts > span { width: 100%; color: var(--sy-dim); font-size: 11.5px; }
.sy-fonts a, .sy-times a { color: var(--sy-dim); cursor: pointer; transition: color .2s, text-shadow .2s; }
.sy-fonts a:hover, .sy-times a:hover { color: var(--sy-text); }
.sy-fonts a.on, .sy-times a.on { color: var(--sy-bright); text-shadow: 0 0 10px color-mix(in srgb, var(--sy-wave) 70%, transparent); }
.sy-times { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
/* the own way of writing a time: a line like the about's, no box */
.sy-panel input[data-pattern] { width: 100%; margin-top: 8px; color: var(--sy-bright); background: transparent; border: 0; border-bottom: 1px solid var(--sy-line); border-radius: 0; padding: 5px 1px; font: inherit; font-size: 12.5px; outline: none; transition: border-color .2s; }
.sy-panel input[data-pattern]:focus { border-color: var(--sy-wave); }
.sy-panel input[data-pattern]::placeholder { color: var(--sy-dim); }
/* the icon library over the page: a sheet of sets, each a grid of see-through icons */
.sy-library { position: fixed; z-index: 60; left: 50%; top: 50%; translate: -50% -50%; display: flex; flex-direction: column; width: min(760px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: 16px; border: 1px solid var(--sy-line); border-radius: 14px; background: color-mix(in srgb, var(--sy-bg) 82%, transparent); backdrop-filter: blur(22px); color: var(--sy-text); box-shadow: 0 30px 80px #0009; animation: sy-library-in .22s ease; }
.sy-library[hidden] { display: none; }
@keyframes sy-library-in { from { opacity: 0; translate: -50% calc(-50% + 10px); } }
.sy-library-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sy-library-head b { color: var(--sy-bright); font-weight: 500; }
.sy-library-head input { flex: 1; min-width: 0; padding: 6px 0; border: 0; border-bottom: 1px solid var(--sy-line); background: none; color: var(--sy-text); font: inherit; outline: none; }
.sy-library-head a { display: inline-flex; color: var(--sy-dim); cursor: pointer; }
.sy-library-head a:hover { color: var(--sy-bright); }
.sy-library-sets { overflow-y: auto; overscroll-behavior: contain; }
.sy-library section[hidden] { display: none; }
.sy-library h3 { margin: 12px 0 8px; color: var(--sy-dim); font-size: 12px; font-weight: 400; }
.sy-library h3 small { opacity: .6; }
.sy-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.sy-library-grid a { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; cursor: pointer; transition: transform .18s ease, filter .18s ease; }
.sy-library-grid a[hidden] { display: none; }
.sy-library-grid a:hover { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--sy-wave) 60%, transparent)); }
.sy-library-grid img { width: 80%; height: 80%; object-fit: contain; }
.sy-library-grid i { position: absolute; top: 2px; right: 2px; display: none; color: var(--sy-dim); }
.sy-library-grid i .sy-icon { width: 12px; height: 12px; }
.sy-library-grid a:hover i { display: inline-flex; }
.sy-library-grid i:hover { color: var(--sy-bright); }
.sy-library-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--sy-line); font-size: 13px; }
.sy-library-add input:not([type=file]) { width: 120px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--sy-line); background: none; color: var(--sy-text); font: inherit; outline: none; }
.sy-library-add .sy-file, .sy-library-add button { padding: 0; border: 0; background: none; color: var(--sy-text); font: inherit; cursor: pointer; }
.sy-library-add .sy-file:hover, .sy-library-add button:hover { color: var(--sy-bright); text-shadow: 0 0 10px var(--sy-wave); }
@media (pointer: coarse) { .sy-library input { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .sy-library { animation: none; } .sy-library-grid a { transition: none; } }

/* the globe beside the corner: three meridians turning (--spin a half turn), brighter the more are awake (--glow) */
.sy-globe { position: fixed; z-index: 60; top: max(16px, calc(env(safe-area-inset-top) + 2px)); right: calc(max(16px, env(safe-area-inset-right)) + 42px); width: 26px; height: 26px; color: var(--sy-wave); cursor: pointer; line-height: 0; --spin: 16s; --glow: 0; }
[data-syringa-corner] .sy-globe { position: relative; top: auto; right: auto; display: inline-flex; margin-right: 12px; vertical-align: middle; }
.sy-globe svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.1; filter: drop-shadow(0 0 calc(var(--glow) * 5px) var(--sy-wave)); transition: color .4s, filter .4s; }
.sy-globe .sy-globe-orb { stroke: none; }
.sy-globe .sy-globe-lines { opacity: .8; }
.sy-globe .sy-globe-m { transform-box: view-box; transform-origin: 12px 12px; animation: sy-meridian var(--spin) linear infinite; }
.sy-globe .sy-globe-m:nth-of-type(2) { animation-delay: calc(var(--spin) / -3); }
.sy-globe .sy-globe-m:nth-of-type(3) { animation-delay: calc(var(--spin) / -1.5); }
.sy-globe .sy-globe-ring { stroke: var(--sy-accent); opacity: 0; transform-box: view-box; transform-origin: 12px 12px; }
.sy-globe.new .sy-globe-ring { animation: sy-joined 2.6s ease-out infinite; }
.sy-globe.idle { color: var(--sy-dim); }
.sy-globe.lone { color: var(--sy-dim); }
.sy-globe:hover { color: var(--sy-accent); }
.sy-globe .sy-badge { top: -5px; right: -8px; }
.sy-globe .sy-badge[hidden] { display: none; }
/* a meridian seen as the globe turns: full, edge on, full again the other way */
@keyframes sy-meridian { 0% { transform: scaleX(1); } 25% { transform: scaleX(.7); } 50% { transform: scaleX(0); } 75% { transform: scaleX(-.7); } 100% { transform: scaleX(-1); } }
@keyframes sy-joined { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }

/* the rooms: a window under the corner, a room a word, messages run together by who said them */
.sy-room { position: fixed; z-index: 66; top: calc(max(14px, env(safe-area-inset-top)) + 42px); right: max(16px, env(safe-area-inset-right)); display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); height: min(540px, calc(100dvh - 90px)); color: var(--sy-text); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: color-mix(in srgb, var(--sy-surface) 97%, transparent); border: 1px solid var(--sy-line); border-radius: 14px; box-shadow: 0 20px 56px rgba(0, 0, 0, .6); text-align: left; text-transform: none; letter-spacing: normal; animation: sy-rise .18s ease-out; }
.sy-room[hidden] { display: none; }
.sy-room-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--sy-line); color: var(--sy-wave); }
.sy-room-tabs { display: flex; align-items: baseline; gap: 12px; flex: 1; line-height: 20px; }
.sy-room-tabs a { color: var(--sy-dim); cursor: pointer; transition: color .15s; }
.sy-room-tabs a:hover { color: var(--sy-text); }
.sy-room-tabs a.on { color: var(--sy-bright); text-shadow: 0 0 10px color-mix(in srgb, var(--sy-wave) 70%, transparent); }
.sy-room-on { font-size: 12px; }
.sy-room-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 8px 12px 12px; }
.sy-room-msg { display: flex; gap: 9px; padding-top: 8px; }
.sy-room-msg.joined { padding-top: 1px; }
.sy-room-face { flex: 0 0 26px; line-height: 0; }
.sy-room-body { min-width: 0; flex: 1; }
.sy-room-who { display: flex; align-items: baseline; gap: 8px; line-height: 1.3; }
.sy-room-who [data-who] { cursor: pointer; }
.sy-room-who small { color: var(--sy-dim); font-size: 11px; }
.sy-via { align-self: center; width: 13px; height: 13px; margin-left: -3px; opacity: .85; }
.sy-room-text { color: var(--sy-bright); white-space: pre-wrap; overflow-wrap: anywhere; }
.sy-room-msg.mine .sy-room-text { color: #f3e8ff; }
.sy-md-code, .sy-md-pre { font-family: ui-monospace, Consolas, monospace; font-size: .88em; background: rgba(255, 255, 255, .07); border-radius: 4px; }
.sy-md-code { padding: 1px 4px; }
.sy-md-pre { display: block; margin: 3px 0; padding: 6px 9px; white-space: pre-wrap; box-shadow: inset 0 0 0 1px var(--sy-line); }
.sy-md-quote { display: inline-block; padding-left: 9px; border-left: 3px solid var(--sy-line); }
.sy-md-h1, .sy-md-h2, .sy-md-h3 { font-weight: 700; line-height: 1.3; }
.sy-md-h1 { font-size: 1.4em; }
.sy-md-h2 { font-size: 1.22em; }
.sy-md-h3 { font-size: 1.08em; }
.sy-md-sub { color: var(--sy-dim); font-size: .8em; }
.sy-room-text b, .sy-msg b { font-weight: 700; }
.sy-spoiler { border-radius: 3px; background: var(--sy-line); cursor: pointer; transition: background .15s; }
.sy-spoiler > span { transition: opacity .15s; }
.sy-spoiler:not(:focus) > span { opacity: 0; }
.sy-spoiler:focus { outline: none; background: rgba(255, 255, 255, .06); }
.sy-emo { display: inline-block; height: 1.35em; width: auto; vertical-align: -.3em; font-size: 1.15em; line-height: 1; }
img.sy-emo { width: 1.35em; object-fit: contain; }
.sy-room-acts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 12px; color: var(--sy-dim); }
.sy-room-acts a { color: var(--sy-wave); cursor: pointer; }
.sy-room-acts a:hover { color: var(--sy-accent); }
.sy-room-smile { color: var(--sy-dim); cursor: pointer; line-height: 0; padding: 2px; }
.sy-room-smile:hover, .sy-room-smile.on { color: var(--sy-wave); }
.sy-room-shut { padding: 12px; border-top: 1px solid var(--sy-line); }
.sy-room-voice { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid color-mix(in srgb, var(--sy-wave) 12%, transparent); color: var(--sy-dim); font-size: 12.5px; }
.sy-room-voice > .sy-icon { width: 15px; height: 15px; flex: none; }
.sy-room-voice-faces { display: flex; align-items: center; flex: 1; min-width: 0; line-height: 0; }
.sy-room-voice-faces { gap: 4px; }
.sy-room-voice-faces small { margin-left: 6px; font-size: 11px; line-height: 1; }
.sy-room-voice a { flex: none; color: var(--sy-wave); cursor: pointer; transition: color .15s; }
.sy-room-voice a:hover { color: var(--sy-accent); }
.sy-room-voice a.on { color: var(--sy-bright); text-shadow: 0 0 10px color-mix(in srgb, var(--sy-wave) 70%, transparent); }
.sy-room .sy-said { padding: 0 12px 10px; margin: 0; }
.sy-tray-head { margin: 8px 0 4px; color: var(--sy-dim); font-size: 11px; }
.sy-tray-add { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.sy-tray-add input { flex: 1; min-width: 0; color: var(--sy-bright); background: transparent; border: 0; border-bottom: 1px solid var(--sy-line); outline: none; font: inherit; font-size: 12px; padding: 3px 0; }
.sy-tray-add input:focus { border-bottom-color: var(--sy-wave); }
.sy-tray-add button { color: var(--sy-wave); background: none; border: 0; padding: 2px; cursor: pointer; line-height: 0; }
@media (max-width: 520px) { .sy-room { top: auto; left: 12px; right: 12px; bottom: max(16px, env(safe-area-inset-bottom)); width: auto; height: min(460px, calc(100dvh - 100px)); border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .sy-globe .sy-globe-m, .sy-globe.new .sy-globe-ring, .sy-room { animation: none; } }
@media (pointer: coarse) { .sy-room textarea, .sy-tray-add input { font-size: 16px; } }
/* glass: the rooms and messages let the page show through, blurred */
.sy-room, .sy-chat, .sy-panel.sy-win { background: rgba(14, 10, 22, .62); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); border-color: color-mix(in srgb, var(--sy-wave) 18%, transparent); box-shadow: 0 20px 56px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04); }
/* the panel sits lighter over the page, more of the background through it */
.sy-panel.sy-win { background: rgba(14, 10, 22, .58); }
.sy-room-head, .sy-room-tray, .sy-room-shut, .sy-room .sy-chat-say { border-color: color-mix(in srgb, var(--sy-wave) 12%, transparent); }
/* every scroll on a syringa page: a hair of light that shimmers violet to pink, nothing behind it, brighter only while held or hovered */
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--sy-wave) 35%, transparent), color-mix(in srgb, var(--sy-accent) 30%, transparent), rgba(111, 168, 240, .3)) padding-box; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { border-width: 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--sy-wave) 75%, transparent), color-mix(in srgb, var(--sy-accent) 70%, transparent), rgba(111, 168, 240, .7)) padding-box; }
::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sy-wave) 35%, transparent) transparent; } }
/* choices and words to press carry no line: lit on hover, the chosen one bright with a soft violet glow, its dot breathing */
.sy-panel a, .sy-presets .sy-row a { border-bottom: 0; transition: color .15s, text-shadow .15s; }
.sy-panel a:hover { color: var(--sy-bright); }
.sy-panel a.on, .sy-presets .sy-row a.on { color: var(--sy-bright); text-shadow: 0 0 10px color-mix(in srgb, var(--sy-wave) 75%, transparent), 0 0 2px color-mix(in srgb, var(--sy-accent) 50%, transparent); }
.sy-add button, .sy-rename button, .sy-pass button, .sy-about-edit button { border-bottom: 0; color: var(--sy-wave); transition: color .15s, text-shadow .15s; }
.sy-add button:hover, .sy-rename button:hover, .sy-pass button:hover, .sy-about-edit button:hover { color: var(--sy-bright); text-shadow: 0 0 10px color-mix(in srgb, var(--sy-wave) 75%, transparent); }
.sy-status a.on .sy-dot { animation: sy-breathe 2.4s ease-in-out infinite; }
@keyframes sy-breathe { 50% { transform: scale(1.35); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .sy-status a.on .sy-dot { animation: none; } }
/* the emoji tray: a search, a shelf of groups, the grid, the name of what is under the pointer */
.sy-room-tray { display: flex; flex-direction: column; height: 250px; padding: 8px 12px 4px; border-top: 1px solid color-mix(in srgb, var(--sy-wave) 12%, transparent); }
.sy-tray-find { padding: 4px 0; color: var(--sy-bright); background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--sy-wave) 18%, transparent); outline: none; font: inherit; font-size: 13px; }
.sy-tray-find:focus { border-bottom-color: var(--sy-wave); }
.sy-tray-shelves { display: flex; gap: 1px; margin: 6px 0 4px; overflow-x: auto; scrollbar-width: none; }
.sy-tray-shelves::-webkit-scrollbar { display: none; }
.sy-tray-shelves a { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 2px; font-size: 15px; line-height: 1; color: var(--sy-dim); cursor: pointer; opacity: .55; filter: grayscale(.7); transition: opacity .15s, filter .15s, transform .15s; }
.sy-tray-shelves a.word { font-size: 11px; }
.sy-tray-shelves a .sy-icon { width: 16px; height: 16px; }
.sy-tray-shelves a:hover { opacity: .9; filter: none; }
.sy-tray-shelves a.on { opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sy-wave) 80%, transparent)); color: var(--sy-bright); transform: translateY(-1px); }
.sy-tray-grid { flex: 1; overflow-y: auto; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1px; }
.sy-tray-grid a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-size: 21px; line-height: 1; cursor: pointer; transition: transform .12s, background .12s; }
.sy-tray-grid a.wide { width: auto; padding: 0 8px; font-size: 13px; color: var(--sy-bright); white-space: nowrap; }
.sy-tray-grid a:hover { background: color-mix(in srgb, var(--sy-wave) 16%, transparent); transform: scale(1.18); }
.sy-tray-grid a.wide:hover { transform: none; }
.sy-tray-grid .sy-tray-head { flex-basis: 100%; }
.sy-tray-grid p { margin: 8px 2px; font-size: 12px; }
.sy-tray-grid .sy-tray-add { flex-basis: 100%; }
/* which set the grid draws in: plain words, the one in use lit */
.sy-tray-sets { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0 0 4px; font-size: 11px; }
.sy-tray-sets a { color: var(--sy-dim); cursor: pointer; }
.sy-tray-sets a:hover { color: var(--sy-text); }
.sy-tray-sets a.on { color: var(--sy-bright); }
.sy-tray-name { padding-top: 3px; min-height: 18px; color: var(--sy-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .sy-tray-grid a, .sy-tray-shelves a { transition: none; } }
/* every cell's mark on one middle: emoji, kaomoji, signs and icons sit centred in their square, in one font */
.sy-tray-shelves a, .sy-tray-grid a { display: inline-flex; align-items: center; justify-content: center; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif; line-height: 1; }
.sy-tray-shelves a > *, .sy-tray-grid a > * { display: block; flex: none; }
.sy-tray-shelves a .sy-icon { width: 15px; height: 15px; }
.sy-tray-grid a img.sy-emo { width: 24px; height: 24px; vertical-align: 0; }
.sy-tray-grid a.wide { font-family: system-ui, sans-serif; }
/* in a message, an emoji and an icon ride the same middle as the words */
.sy-emo { vertical-align: middle; margin-top: -.15em; }
/* the grid fills its width in even squares; a kaomoji takes as many as it needs, a heading or a note the whole row */
.sy-tray-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); grid-auto-rows: 34px; grid-auto-flow: row dense; gap: 1px; }
.sy-tray-grid a { width: auto; }
.sy-tray-grid .sy-tray-head, .sy-tray-grid p, .sy-tray-grid .sy-tray-add { grid-column: 1 / -1; align-self: end; }
.sy-tray-grid .sy-tray-head { margin: 4px 0 0; }
.sy-tray-grid a.w2 { grid-column: span 2; } .sy-tray-grid a.w3 { grid-column: span 3; } .sy-tray-grid a.w4 { grid-column: span 4; } .sy-tray-grid a.w5 { grid-column: span 5; }
.sy-tray-grid a.w6 { grid-column: span 6; } .sy-tray-grid a.w7 { grid-column: span 7; } .sy-tray-grid a.w8 { grid-column: span 8; }
/* a mention in its own colour, brighter when it names the reader; a message naming them carries a soft edge of it */
.sy-mention { color: #f2a6ec; text-decoration: none; cursor: pointer; transition: color .15s, text-shadow .15s; }
.sy-mention:hover { color: #fff; text-shadow: 0 0 6px color-mix(in srgb, var(--sy-accent) 38%, transparent); }
.sy-mention.sy-me { color: #ffc4f9; text-shadow: 0 0 5px color-mix(in srgb, var(--sy-accent) 32%, transparent); }
.sy-room-msg.named .sy-room-body { --c: color-mix(in srgb, var(--sy-accent) 75%, transparent); position: relative; padding: 4px 0 6px 13px; margin-bottom: 4px; }
.sy-room-call { cursor: pointer; }
.sy-room-call:hover .sy-room-text { color: #fff; }
.sy-room-tabs a.sy-room-at small { color: var(--sy-accent); font-size: 11px; }
.sy-room-tabs a.sy-room-at.lit { color: #f2a6ec; text-shadow: 0 0 10px color-mix(in srgb, var(--sy-accent) 60%, transparent); }
.sy-globe.named { color: var(--sy-accent); }
.sy-globe.named svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sy-accent) 80%, transparent)); }
/* a link in words, and its card: the site's colour as a thin edge, its words, its picture large or, for music, small at the side */
.sy-link { color: #b9a3ff; text-decoration: none; overflow-wrap: anywhere; transition: color .15s; }
.sy-link:hover { color: #fff; }
.sy-embed { --c: var(--sy-wave); }
.sy-embed:empty { display: none; }
.sy-embed-card { position: relative; display: flex; flex-direction: column; gap: 8px; max-width: 340px; margin: 8px 0 4px; padding: 10px 12px 11px 15px; color: var(--sy-text); text-decoration: none; white-space: normal; background: rgba(255, 255, 255, .035); border-radius: 4px 10px 10px 4px; transition: background .15s; }
.sy-embed-card:hover { background: rgba(255, 255, 255, .06); }
.sy-embed-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sy-embed-words small { color: var(--sy-dim); font-size: 10.5px; }
.sy-embed-words b { color: var(--sy-pale); font-weight: 600; font-size: 12.5px; line-height: 1.3; }
.sy-embed-card:hover .sy-embed-words b { color: #fff; }
.sy-embed-words span { color: var(--sy-text); font-size: 11.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sy-embed-pic { position: relative; display: block; line-height: 0; }
.sy-embed-pic img { width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: 220px; object-fit: cover; border-radius: 6px; }
.sy-embed-music { flex-direction: row; align-items: center; }
.sy-embed-music .sy-embed-words { flex: 1; }
.sy-embed-music .sy-embed-pic { flex: none; width: 72px; }
.sy-embed-music .sy-embed-pic img { height: 72px; aspect-ratio: 1; }
.sy-embed-only { padding: 0; background: none; }
.sy-embed-only::before { display: none; }
.sy-embed-only .sy-embed-pic img { width: auto; max-width: 100%; aspect-ratio: auto; max-height: 280px; }
.sy-embed-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.sy-embed-play .sy-icon { width: 34px; height: 34px; padding: 9px; border-radius: 50%; background: color-mix(in srgb, var(--sy-bg) 62%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .15s; }
.sy-embed-music .sy-embed-play .sy-icon { width: 26px; height: 26px; padding: 6px; }
.sy-embed-card:hover .sy-embed-play .sy-icon { transform: scale(1.1); }
.sy-msg .sy-embed-card { background: rgba(0, 0, 0, .18); }
/* a card of our own: a face or mark at the side, its facts in lines, and the nudging arrow to where it leads */
.sy-embed-native { flex-direction: row; align-items: flex-start; gap: 11px; --c: var(--sy-accent); }
.sy-embed-native .sy-embed-words { flex: 1; }
.sy-embed-native .sy-embed-words > span { -webkit-line-clamp: 2; }
.sy-embed-native .sy-embed-words span span { display: inline; -webkit-line-clamp: none; }
.sy-embed-face { flex: none; display: grid; place-items: center; width: 44px; height: 44px; line-height: 0; }
.sy-embed-face:empty { display: none; }
.sy-embed-face .sy-mark { width: 40px; height: 40px; border-radius: 9px; }
.sy-embed-globe .sy-icon { width: 30px; height: 30px; color: var(--sy-pale); }
.sy-embed-words .sy-embed-line { color: var(--sy-dim); font-size: 11px; display: block; }
.sy-embed-words .sy-embed-new { color: var(--sy-pale); font-size: 11px; }
.sy-embed-words .sy-embed-go { display: inline-flex; -webkit-line-clamp: none; margin-top: 4px; color: var(--sy-dim); font-size: 11px; transition: color .15s; }
.sy-embed-go .sy-icon { width: 13px; height: 13px; }
.sy-embed-native .sy-embed-words .sy-embed-gos { display: flex; flex-wrap: wrap; gap: 0 14px; -webkit-line-clamp: none; overflow: visible; }
.sy-embed-native .sy-embed-gos .sy-embed-go { display: inline-flex; }
.sy-embed-go[data-open]:hover { color: var(--sy-accent); }
.sy-embed-card:hover .sy-embed-go { color: #fff; }
.sy-embed-card:hover .sy-embed-go .sy-icon { animation-duration: .7s; color: var(--sy-accent); }
@media (prefers-reduced-motion: reduce) { .sy-embed-card, .sy-mention, .sy-link, .sy-embed-play .sy-icon { transition: none; } }
/* an edge whole on the left, its top and bottom hairs thinning out to the right and drifting like a breath of wind */
@property --sy-fade { syntax: "<percentage>"; inherits: false; initial-value: 70%; }
.sy-embed-card::before, .sy-room-msg.named .sy-room-body::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--c); border-left-width: 3px; border-right: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 12px, rgba(0, 0, 0, .55) 30%, transparent var(--sy-fade));
  mask-image: linear-gradient(90deg, #000 0, #000 12px, rgba(0, 0, 0, .55) 30%, transparent var(--sy-fade));
  animation: sy-wind 7s ease-in-out infinite alternate;
}
.sy-room-msg.named .sy-room-body::before { inset: 0 0 0 -2px; border-radius: 3px 0 0 3px; }
@keyframes sy-wind { from { --sy-fade: 55%; } to { --sy-fade: 96%; } }
@media (prefers-reduced-motion: reduce) { .sy-embed-card::before, .sy-room-msg.named .sy-room-body::before { animation: none; } }
/* sign out at the end of the bar, asked once: the icon becomes the two words */
.sy-panel .sy-tabs a.sy-out { margin-left: 6px; }
.sy-panel .sy-tabs a.sy-out:hover { color: var(--sy-accent); }
.sy-tabs .sy-leave { display: inline-flex; gap: 12px; margin-left: auto; font-size: 13px; animation: sy-rise .18s ease-out; }
.sy-panel .sy-tabs .sy-leave a { width: auto; color: var(--sy-text); }
.sy-panel .sy-tabs .sy-leave a:first-child { color: var(--sy-accent); }
@keyframes sy-rise { from { opacity: 0; translate: 4px 0; } }
/* your own face at the top opens your profile */
.sy-panel a.sy-own { position: relative; display: inline-flex; border: 0; border-radius: 50%; cursor: pointer; }
/* a pen on one's own face says a press changes it: shown on hover, faint always where there is no hover */
.sy-own-pen { position: absolute; z-index: 2; right: -3px; bottom: -3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sy-bg); color: var(--sy-wave); opacity: 0; transition: opacity .2s; pointer-events: none; }
.sy-own-pen .sy-icon { width: 13px; height: 13px; }
.sy-panel a.sy-own:hover .sy-own-pen { opacity: 1; }
@media (hover: none) { .sy-own-pen { opacity: .8; } }
/* the picture part of edit: the face large (a press or a drop on it chooses another), each way with its mark, the shapes */
.sy-pic { display: flex; gap: 14px; align-items: center; }
.sy-pic-now { position: relative; flex: none; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.sy-pic-now > i { position: absolute; inset: 0; display: grid; place-items: center; color: var(--sy-bright); opacity: 0; transition: opacity .2s; pointer-events: none; }
.sy-pic-now > i .sy-icon { width: 22px; height: 22px; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .9)); }
.sy-pic-now:hover > i, .sy-pic-now.sy-over > i { opacity: 1; }
.sy-pic-now.sy-over { outline: 1px dashed var(--sy-wave); outline-offset: 4px; }
/* the preview is the picture alone; whether one is on says nothing here */
.sy-pic-now .sy-on { display: none; }
.sy-pic-do { display: grid; gap: 10px; min-width: 0; }
.sy-pic-ways { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sy-pic-ways > a, .sy-pic-ways > label { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; color: var(--sy-dim); font-size: 11px; cursor: pointer; }
.sy-pic-ways > a:hover, .sy-pic-ways > label:hover { color: var(--sy-bright); }
.sy-pic-ways .sy-icon { width: 18px; height: 18px; }
.sy-pic-shapes { display: flex; flex-wrap: wrap; gap: 6px; }
.sy-pic-shapes > a { display: grid; place-items: center; width: 22px; height: 22px; color: var(--sy-dim); opacity: .6; cursor: pointer; }
.sy-pic-shapes > a:hover { color: var(--sy-text); opacity: 1; }
.sy-pic-shapes > a.on { color: var(--sy-wave); opacity: 1; }
.sy-pic-shapes span { width: 16px; height: 16px; background: currentColor; clip-path: var(--clip); }
/* under the pointer a thin ring of the wave and accent turns round the face, drawn in a mask so the face stays sharp */
.sy-panel a.sy-own::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from var(--sy-own-turn, 0deg), var(--sy-wave), var(--sy-accent), transparent 45%, var(--sy-wave) 70%, transparent 85%, var(--sy-wave)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.2px)); opacity: 0; transform: scale(.9); transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
@property --sy-own-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes sy-own-turn { to { --sy-own-turn: 360deg; } }
@media (hover: hover) { .sy-panel a.sy-own:hover::after { opacity: 1; transform: scale(1); animation: sy-own-turn 2.4s linear infinite; } }
@media (prefers-reduced-motion: reduce) { .sy-panel a.sy-own:hover::after { animation: none; } }
/* on a phone the page under it shows less, so its own edge reads the whole way round */
@media (max-width: 520px) { .sy-panel { background: color-mix(in srgb, var(--sy-surface) 80%, transparent); box-shadow: 0 0 0 1px var(--sy-line), 0 18px 50px rgba(0, 0, 0, .55); } }
/* windows: moved by the head, sized from the grip, folded to the head; the front one's edge a little lit */
.sy-win > .sy-head, .sy-win > .sy-room-head, .sy-win > .sy-chat-head { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.sy-win.sy-folded { height: auto !important; min-height: 0 !important; }
.sy-win.sy-folded > :not(.sy-head, .sy-room-head, .sy-chat-head) { display: none !important; }
.sy-win.sy-folded > .sy-room-head, .sy-win.sy-folded > .sy-chat-head { border-bottom: 0; }
.sy-win.sy-top.sy-placed { border-color: color-mix(in srgb, var(--sy-wave) 28%, transparent); }
/* edges are off unless turned on in the panel: glass alone, the shadow still lifting it off the page */
html:not(.sy-edged) .sy-win, html:not(.sy-edged) .sy-win.sy-top.sy-placed { border-color: transparent; }
.sy-panel a.sy-win-fold { align-self: flex-start; margin-left: auto; color: var(--sy-dim); line-height: 0; }
.sy-panel a.sy-win-fold:hover { color: var(--sy-bright); text-shadow: none; }
.sy-win-fold .sy-icon { width: 16px; height: 16px; }
/* the fold dash grows a stroke to a plus while folded; what a window holds eases out as it folds and in as it opens */
.sy-unfold { transform-box: fill-box; transform-origin: center; transform: scaleY(0); transition: transform .22s ease; }
.sy-folded [data-win=fold] .sy-unfold { transform: scaleY(1); }
.sy-win.sy-folding > :not(.sy-head, .sy-room-head, .sy-chat-head) { animation: sy-fold-out .16s ease-in both; }
.sy-win.sy-unfolding > :not(.sy-head, .sy-room-head, .sy-chat-head) { animation: sy-fold-in .26s ease-out both; }
@keyframes sy-fold-out { to { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes sy-fold-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .sy-unfold { transition: none; } .sy-win.sy-folding > *, .sy-win.sy-unfolding > * { animation: none; } }
.sy-grip { position: absolute; z-index: 3; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; border-bottom-right-radius: 10px; background: linear-gradient(135deg, transparent 56%, color-mix(in srgb, var(--sy-wave) 55%, transparent) 56% 63%, transparent 63% 74%, color-mix(in srgb, var(--sy-wave) 55%, transparent) 74% 81%, transparent 81%); opacity: .35; transition: opacity .15s; }
.sy-grip:hover, .sy-grip:active { opacity: 1; }
.sy-win.sy-full > .sy-grip { display: none; }
/* a phone: no grey flash on a tap, no zoom on a double tap, and a message held for its menu is not picked as text */
.sy-win { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* a place a part keeps in a window whether it shows or not; laid out as if it were not there */
.sy-slot { display: contents; }
@media (pointer: coarse) { .sy-room-msg, .sy-line { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .sy-grip { opacity: .25; } }
/* the tray's own close, beside its search */
.sy-tray-top { display: flex; align-items: center; gap: 8px; }
.sy-tray-top .sy-tray-find { flex: 1; min-width: 0; }
.sy-tray-shut { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--sy-dim); cursor: pointer; }
.sy-tray-shut:hover { color: var(--sy-bright); }
.sy-tray-look { display: inline-grid; place-items: center; color: var(--sy-dim); }
.sy-tray-look .sy-icon { width: 15px; height: 15px; }
/* the gifs shelf: a grid of moving pictures, a heart over each to keep it */
.sy-tray-gifs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.sy-tray-gif { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: color-mix(in srgb, var(--sy-wave) 6%, transparent); cursor: pointer; }
.sy-tray-gif img, .sy-tray-gif video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sy-gif-fav { position: absolute; top: 4px; right: 4px; display: inline-grid; place-items: center; color: color-mix(in srgb, var(--sy-bright) 70%, transparent); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8)); opacity: 0; transition: opacity .15s, color .15s; }
.sy-gif-fav .sy-icon { width: 16px; height: 16px; }
.sy-tray-gif:hover .sy-gif-fav, .sy-gif-fav.on { opacity: 1; }
.sy-gif-fav.on { color: var(--sy-wave); }
.sy-gif-fav.on .sy-icon { fill: currentColor; }
@media (pointer: coarse) { .sy-gif-fav { opacity: 1; } }
/* who an @ could be, over the words being typed */
.sy-at { position: fixed; z-index: 69; display: flex; flex-direction: column; padding: 4px 0; border: 1px solid var(--sy-line); border-radius: 10px; background: color-mix(in srgb, var(--sy-surface) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 34px rgba(0, 0, 0, .5); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; animation: sy-rise .14s ease-out; }
.sy-at[hidden] { display: none; }
.sy-at a { display: flex; align-items: center; gap: 8px; padding: 5px 10px; color: var(--sy-text); cursor: pointer; border-left: 2px solid transparent; transition: color .12s, text-shadow .12s; }
.sy-at a.on, .sy-at a:hover { color: var(--sy-bright); border-left-color: var(--sy-wave); text-shadow: 0 0 10px color-mix(in srgb, var(--sy-wave) 70%, transparent); }
.sy-at small { margin-left: auto; color: var(--sy-dim); font-size: 11px; white-space: nowrap; }
@media (pointer: coarse) { .sy-grip { width: 26px; height: 26px; } .sy-at a { padding: 9px 12px; } }
.sy-view { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 16px; background: rgba(8, 6, 14, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: sy-view-in .2s ease; }
.sy-view[hidden] { display: none; }
@keyframes sy-view-in { from { opacity: 0; } }
.sy-view-pic { display: grid; place-items: center; max-width: min(92vw, 1024px); max-height: calc(100dvh - 120px); }
.sy-view-pic img { display: block; min-width: min(320px, 80vw); max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; image-rendering: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .5)); }
.sy-view-bar { display: flex; align-items: center; gap: 16px; color: var(--sy-text); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.sy-view-bar b { margin-right: 6px; color: var(--sy-bright); font-weight: 500; }
.sy-view-bar a { display: inline-flex; color: var(--sy-dim); cursor: pointer; transition: color .2s, filter .2s; }
.sy-view-bar a[hidden] { display: none; }
.sy-view-bar a:hover, .sy-view-bar a.on { color: var(--sy-bright); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sy-wave) 60%, transparent)); }
.sy-view-bar .sy-icon { width: 18px; height: 18px; }
.card .sy-face[data-uid]:not([data-version="0"]):not([data-kept]) { cursor: zoom-in; }
/* a name's card wearing its own look: the look in a layer under the words, a redraw of the words leaving it be */
.sy-card-back { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.sy-card-back img, .sy-card-back video { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; }
.sy-card-back .pg-dim { position: absolute; inset: 0; background: #000; }
.sy-card-back .pg-float { position: absolute; inset: 0; width: 100%; height: 100%; }
.sy-card-body { position: relative; z-index: 1; }
.sy-card.sy-backed .sy-card-body { text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
@media (prefers-reduced-motion: reduce) { .sy-card-back video { display: none; } }
/* autosave, and the save or discard asked when leaving unsaved words */
.sy-auto { display: flex; justify-content: flex-end; margin: -2px 0 6px; font-size: 12px; }
.sy-auto a { display: inline-flex; align-items: center; gap: 5px; color: var(--sy-dim, var(--sy-dim)); cursor: pointer; }
.sy-auto em { font-style: normal; }
.sy-kept { align-self: center; font-size: 12px; }
.sy-ask { display: flex; align-items: center; gap: 12px; }
.sy-ask a { color: var(--sy-text); cursor: pointer; }
.sy-ask a:first-of-type { margin-left: auto; color: var(--sy-bright); }
.sy-room-notice { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0; color: var(--sy-dim); font-size: 12px; text-align: center; }
.sy-room-notice .sy-icon { width: 13px; height: 13px; flex: none; color: var(--sy-wave); opacity: .8; }
.sy-room-notice small { margin-left: 4px; font-size: 11px; opacity: .7; }
/* replies and reactions, the same in rooms and chats: a few icons on the pointer, what a message answers over
   it, its reactions under it as lit emoji and counts, faces beside them when chosen */
.sy-room-msg, .sy-line { position: relative; }
.sy-line { display: flex; flex-direction: column; align-items: flex-start; }
.sy-line.mine { align-items: flex-end; }
.sy-msg-tools { position: absolute; z-index: 1; top: -4px; right: 0; display: none; gap: 2px; padding: 1px 3px; border-radius: 8px; background: rgba(14, 10, 22, .88); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sy-wave) 20%, transparent); }
.sy-line.mine > .sy-msg-tools { right: auto; left: 0; }
@media (hover: hover) { .sy-room-msg:hover > .sy-msg-tools, .sy-line:hover > .sy-msg-tools { display: flex; } }
.sy-msg-tools a { color: var(--sy-dim); line-height: 0; padding: 3px; cursor: pointer; }
.sy-msg-tools a:hover { color: var(--sy-wave); }
.sy-msg-tools .sy-icon { width: 15px; height: 15px; }
.sy-reply-to { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; margin-bottom: 2px; color: var(--sy-dim); font-size: 12px; line-height: 1.3; cursor: pointer; }
.sy-reply-to:hover { color: var(--sy-text); }
.sy-reply-to .sy-icon { width: 12px; height: 12px; flex: none; color: var(--sy-wave); }
.sy-reply-to .sy-face, .sy-reply-to .sy-name { flex: none; }
.sy-reply-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.sy-msg .sy-reply-to { color: color-mix(in srgb, var(--sy-bright) 72%, transparent); }
.sy-msg .sy-reply-to .sy-icon { color: currentColor; }
.sy-reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 11px; margin-top: 3px; }
.sy-reacts a { display: inline-flex; align-items: center; gap: 4px; color: var(--sy-dim); font-size: 14px; line-height: 1.25; cursor: pointer; }
.sy-reacts a b { font-size: 12px; font-weight: 500; transition: color .15s; }
.sy-reacts a:hover b { color: var(--sy-bright); }
.sy-reacts a.on b { color: var(--sy-accent); text-shadow: 0 0 8px color-mix(in srgb, var(--sy-accent) 60%, transparent); }
.sy-reacts img.sy-emo { width: 16px; height: 16px; }
.sy-react-faces { display: inline-flex; }
.sy-react-faces .sy-face + .sy-face { margin-left: -5px; }
.sy-react-add { opacity: 0; transition: opacity .15s; }
.sy-room-msg:hover .sy-react-add, .sy-line:hover .sy-react-add { opacity: 1; }
@media (hover: none) { .sy-react-add { opacity: .7; } }
.sy-react-add .sy-icon { width: 14px; height: 14px; }
.sy-react-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; margin-top: 4px; font-size: 19px; line-height: 1.2; }
.sy-react-quick a { cursor: pointer; transition: transform .12s; }
.sy-react-quick a:hover { transform: scale(1.2); }
.sy-react-quick .sy-icon { width: 16px; height: 16px; color: var(--sy-wave); }
/* the row being set: each one swaps from the tray, the double tap after them in its own words */
.sy-react-quick.sy-tuning a { animation: sy-tune 1.6s ease-in-out infinite; }
.sy-react-quick.sy-tuning a:nth-child(2n) { animation-delay: -.8s; }
.sy-react-quick.sy-tuning a[data-tune=done], .sy-react-quick.sy-tuning a[data-tune=reset], .sy-react-quick.sy-tuning a[data-tune=drop], .sy-react-quick.sy-tuning a[data-tune=add] { animation: none; }
.sy-tune-double { display: inline-flex; align-items: center; gap: 6px; margin: 0 4px 0 8px; font-size: 12px; }
.sy-tune-double a { font-size: 19px; }
@keyframes sy-tune { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
/* a double tap's reaction rising from where it was given */
.sy-burst { position: fixed; z-index: 90; pointer-events: none; font-size: 34px; line-height: 1; transform: translate(-50%, -50%); animation: sy-burst .9s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.sy-burst img { width: 34px; height: 34px; }
@keyframes sy-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.25); } 60% { opacity: 1; transform: translate(-50%, -80%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(.9); } }
.sy-replying { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 12px 0; color: var(--sy-dim); font-size: 12px; }
.sy-replying > span:first-of-type { flex: none; }
.sy-replying .sy-reply-text { flex: 1; }
.sy-edited { margin-left: 6px; font-size: 10.5px; color: var(--sy-dim); opacity: .8; }
.sy-replying .sy-icon { width: 13px; height: 13px; flex: none; color: var(--sy-wave); }
.sy-replying a { line-height: 0; color: var(--sy-dim); cursor: pointer; }
.sy-replying a:hover { color: var(--sy-accent); }
.sy-flash { animation: sy-flash 1.6s ease-out; border-radius: 8px; }
@keyframes sy-flash { from { background: color-mix(in srgb, var(--sy-wave) 24%, transparent); } to { background: transparent; } }
.sy-room-prefs { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-bottom: 1px solid color-mix(in srgb, var(--sy-wave) 12%, transparent); font-size: 12px; }
.sy-room-prefs a { color: var(--sy-dim); cursor: pointer; }
.sy-room-prefs a.on { color: var(--sy-bright); text-shadow: 0 0 10px color-mix(in srgb, var(--sy-wave) 70%, transparent); }
.sy-chat-x.on { color: var(--sy-bright); }
/* the words, the emoji face and send sit on one line: each icon as tall as a line of words */
.sy-chat-say textarea { padding: 0; min-height: 22px; line-height: 22px; }
.sy-chat-say > a, .sy-chat-say > button { display: flex; align-items: center; height: 22px; padding: 0 2px; }
.sy-win.sy-full { border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .sy-flash { animation: none; } .sy-react-quick a, .sy-react-add { transition: none; } .sy-react-quick.sy-tuning a, .sy-burst { animation: none; } }
/* the tag in the account tab: the uid, its name lit in its ink, the dice for a new one */
.sy-tagrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.sy-tag-own { align-items: center; }
.sy-tag-own input[type=color] { flex: none; width: 24px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.sy-tagname { color: color-mix(in srgb, var(--ink, var(--sy-bright)) 80%, #fff); font-weight: 500; overflow-wrap: anywhere; }
.sy-tagrow .sy-icon { width: 17px; height: 17px; }
/* discord not linked yet: its mark beside the globe, a small hop and glow every few seconds */
.sy-cord { position: fixed; z-index: 60; top: max(17px, calc(env(safe-area-inset-top) + 3px)); right: calc(max(16px, env(safe-area-inset-right)) + 78px); width: 22px; height: 22px; line-height: 0; opacity: .7; transition: opacity .2s; animation: sy-cord 5s ease-in-out infinite; }
[data-syringa-corner] .sy-cord { position: relative; top: auto; right: auto; display: inline-flex; margin-right: 12px; vertical-align: middle; }
.sy-cord img { width: 100%; height: 100%; }
.sy-cord:hover { opacity: 1; animation-play-state: paused; }
@keyframes sy-cord { 0%, 78%, 100% { transform: none; filter: none; } 84% { transform: translateY(-3px) rotate(-8deg); filter: drop-shadow(0 0 6px #5865f2); } 90% { transform: translateY(0) rotate(6deg); filter: drop-shadow(0 0 4px #5865f2); } 95% { transform: rotate(-2deg); } }
/* the open profile: a coin turning between the globe and a caution, the sheet that asks first, the link's card as it unfolds */
.sy-heed { position: relative; display: inline-flex; width: 16px; height: 16px; justify-self: center; color: #e0a050; cursor: pointer; perspective: 60px; }
.sy-heed i { position: absolute; inset: 0; display: flex; animation: sy-heed 6s infinite; }
.sy-heed i:last-child { animation-delay: -3s; }
.sy-heed .sy-icon { width: 100%; height: 100%; }
.sy-heed:hover { color: #f0c070; }
@keyframes sy-heed { 0%, 42% { opacity: 1; transform: rotateY(0); } 50% { opacity: 0; transform: rotateY(90deg); } 50.1%, 92% { opacity: 0; transform: rotateY(-90deg); } 100% { opacity: 1; transform: rotateY(0); } }
.sy-open > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.sy-open-at { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-heed-sheet { position: sticky; top: 0; z-index: 3; margin: 0 0 10px; padding: 10px 12px; border: 1px solid rgba(224, 160, 80, .35); border-radius: 10px; background: rgba(20, 14, 28, .96); }
.sy-heed-head { display: flex; align-items: center; gap: 6px; }
.sy-heed-head .sy-heed { margin: 0; }
.sy-heed-all { margin: 8px 0 0; padding-left: 16px; color: #b8aecb; font-size: 12px; line-height: 1.45; }
.sy-heed-all li { margin: 3px 0; }
.sy-heed-short { margin: 8px 0 0; color: #b8aecb; font-size: 12px; }
.sy-heed-acts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; }
.sy-heed-acts a { color: var(--sy-dim); cursor: pointer; }
.sy-heed-acts a:hover { color: var(--sy-bright); }
.sy-heed-acts .sy-heed-go { color: #e0a050; }
.sy-open-field { display: block; width: 100%; box-sizing: border-box; margin: 6px 0 0; padding: 6px 9px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; background: color-mix(in srgb, var(--sy-surface) 50%, transparent); color: var(--sy-bright); font: inherit; font-size: 12px; resize: vertical; }
.sy-embed { --edge: var(--sy-wave); display: flex; gap: 10px; padding: 8px 10px; border-left: 3px solid var(--edge); border-radius: 4px; background: rgba(43, 45, 49, .9); color: #dbdee1; }
.sy-embed.large { flex-direction: column; }
.sy-embed-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: 12px; }
.sy-embed-text small { color: #b5bac1; font-size: 10px; }
.sy-embed-text b { color: #00a8fc; }
.sy-embed-text span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sy-embed-pic { flex: none; display: flex; }
.sy-embed.large .sy-embed-pic { justify-content: flex-start; }
.sy-row input[type=color] { width: 22px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .sy-heed i { animation: none; } .sy-heed i:last-child { display: none; } }

/* made with love: plain words at the very end of the page, under everything, a shimmer passing over them */
.sy-sign { position: relative; z-index: 1; margin: 0; padding: 0 max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: 10px; opacity: 0; font: 11px / 1.4 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em; color: var(--sy-dim); pointer-events: none; user-select: none; }
/* the page a column, so on a short one the line still sits at the bottom of the screen */
body.sy-signed { display: flex; flex-direction: column; min-height: 100dvh; }
body.sy-signed > .sy-sign { margin-top: auto; padding-top: 56px; }
.sy-sign-words { background: linear-gradient(100deg, var(--sy-dim) 40%, var(--sy-bright) 50%, var(--sy-dim) 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sy-sign 7s linear infinite; }
.sy-sign-heart { width: 11px; height: 11px; margin: 0 1px; vertical-align: -1px; color: var(--sy-bright); }
.sy-sign a { color: var(--sy-dim); text-decoration: none; pointer-events: auto; transition: color .2s; }
.sy-sign a:hover { color: var(--sy-accent); }
@keyframes sy-sign { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .sy-cord, .sy-sign-words { animation: none; } }
@media (max-width: 520px) { .sy-sign { font-size: 10px; } }

/* a streak: an icon turning through its kin, its count beside it only under the pointer (or a tap), no box */
.sy-nameline { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.sy-nameline > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.sy-streak { position: relative; display: inline-flex; align-items: center; flex: none; color: var(--sy-dim, var(--sy-dim)); line-height: 1; vertical-align: middle; outline: none; cursor: default; }
.sy-streak.on { color: var(--sy-accent, var(--sy-accent)); }
/* staff and up: three icons of their rank in turn, each spinning in as a coin, the role's colour */
.sy-rank { display: inline-flex; align-items: center; position: relative; top: -.07em; margin-left: 4px; color: var(--sy-dim); line-height: 1; vertical-align: middle; perspective: 60px; }
.sy-rank.owner { color: var(--sy-accent); }
.sy-rank.admin { color: var(--sy-wave); }
.sy-rank.staff { color: #6fa8f0; }
.sy-rank[data-ink] { color: var(--ink); }
.sy-rank-kin { position: relative; display: inline-block; width: .82em; height: .82em; min-width: 11px; min-height: 11px; }
/* the glow: a faint halo behind, not a filter, so the flip never cuts it square; it breathes on its own slow clock */
.sy-rank-kin::before { content: ""; position: absolute; inset: -45%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, currentColor 32%, transparent), transparent); opacity: .35; pointer-events: none; animation: sy-rank-halo 7.3s ease-in-out infinite; }
.sy-rank:nth-of-type(2n) .sy-rank-kin::before { animation-duration: 9.1s; animation-delay: -3s; }
@keyframes sy-rank-halo { 0%, 100% { opacity: .2; transform: scale(.85); } 37% { opacity: .45; transform: scale(1.05); } 61% { opacity: .3; transform: scale(.95); } 78% { opacity: .5; transform: scale(1.1); } }
.sy-rank-kin i { position: absolute; inset: 0; display: flex; opacity: 0; animation: sy-rank 14.4s infinite; }
.sy-rank-kin .sy-icon { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }
.sy-rank-kin .sy-k1 { animation-delay: 2.4s; }
.sy-rank-kin .sy-k2 { animation-delay: 4.8s; }
.sy-rank-kin .sy-k3 { animation-delay: 7.2s; }
.sy-rank-kin .sy-k4 { animation-delay: 9.6s; }
.sy-rank-kin .sy-k5 { animation-delay: 12s; }
@keyframes sy-rank { 0% { opacity: 0; transform: rotateY(-180deg) scale(.7); } 3% { opacity: 1; transform: rotateY(0) scale(1); } 14% { opacity: 1; transform: rotateY(0) scale(1); } 17% { opacity: 0; transform: rotateY(180deg) scale(.7); } 100% { opacity: 0; } }
/* the marks that move inside their turn */
.sy-rank-kin .sy-a-beat { animation: sy-a-beat 1.1s ease-in-out infinite; }
.sy-rank-kin .sy-a-spin { animation: sy-a-spin 8s linear infinite; }
.sy-rank-kin .sy-a-twinkle { animation: sy-a-twinkle 2s ease-in-out infinite; }
.sy-rank-kin .sy-a-flap { animation: sy-a-flap .7s ease-in-out infinite; }
.sy-rank-kin .sy-a-flick { animation: sy-a-flick .9s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes sy-a-beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1.04); } 45% { transform: scale(1.14); } }
@keyframes sy-a-spin { to { transform: rotate(360deg); } }
@keyframes sy-a-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.14) rotate(12deg); } }
@keyframes sy-a-flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.4); } }
@keyframes sy-a-flick { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.95, 1.07); } 60% { transform: scale(1.04, .96); } }
/* an icon measured for its own box, out of sight */
.sy-measure { position: absolute; left: -100px; top: 0; width: 24px; height: 24px; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .sy-rank-kin i, .sy-rank-kin .sy-icon, .sy-rank-kin::before { animation: none; } .sy-rank-kin .sy-k0 { opacity: 1; } }
.sy-kin { position: relative; display: inline-block; width: 13px; height: 13px; }
.sy-kin i { position: absolute; inset: 0; display: flex; opacity: 0; animation: sy-kin 10.8s infinite; }
.sy-kin .sy-icon { width: 100%; height: 100%; }
.sy-kin .sy-k1 { animation-delay: 1.8s; }
.sy-kin .sy-k2 { animation-delay: 3.6s; }
.sy-kin .sy-k3 { animation-delay: 5.4s; }
.sy-kin .sy-k4 { animation-delay: 7.2s; }
.sy-kin .sy-k5 { animation-delay: 9s; }
@keyframes sy-kin { 0% { opacity: 0; transform: scale(.7); } 3% { opacity: 1; transform: scale(1); } 15% { opacity: 1; transform: scale(1); } 18.5% { opacity: 0; transform: scale(.7); } 100% { opacity: 0; } }
.sy-streak em { position: absolute; left: 100%; margin-left: 3px; pointer-events: none; font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .2s; }
.sy-streak:hover em, .sy-streak:focus em, .sy-streak:active em { opacity: 1; }
.sy-tie { margin-top: 4px; line-height: 1.45; }
.sy-tie .sy-streak { margin-right: 5px; vertical-align: -2px; }
.sy-tie .sy-streak em { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sy-kin i { animation: none; }
  .sy-kin .sy-k0 { opacity: 1; }
}

/* the room's settings as icons: a word under the pointer, lit and breathing while on, a pop as they change */
.sy-room-prefs { gap: 14px; }
.sy-room-prefs a.sy-pref-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--sy-dim); text-shadow: none; }
.sy-room-prefs a.sy-pref-ico .sy-icon { width: 17px; height: 17px; transition: transform .25s ease, color .25s ease, opacity .25s ease; }
.sy-room-prefs a.sy-pref-ico:hover .sy-icon { transform: scale(1.15); color: var(--sy-bright); }
.sy-room-prefs a.sy-pref-ico.on { color: var(--sy-accent); }
.sy-room-prefs a.sy-pref-ico.on .sy-icon { animation: sy-pref-on 3.2s ease-in-out infinite; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sy-accent) 45%, transparent)); }
.sy-room-prefs a.sy-pref-ico:not(.on) .sy-icon { opacity: .7; }
.sy-room-prefs a.sy-pref-ico:not(.on) .sy-frame-in { opacity: 0; }
.sy-room-prefs a.sy-pref-ico small { position: absolute; right: -9px; bottom: -4px; font-size: 8px; line-height: 1; color: currentColor; font-variant-numeric: tabular-nums; }
@keyframes sy-pref-on { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .sy-room-prefs a.sy-pref-ico.on .sy-icon { animation: none; } }
.sy-party, .sy-call, .sy-stream { }
/* parties: a chat window with a crest, its voice channels under the head, a sheet behind the gear and a theme under it all */
.sy-party { overflow: hidden; }
.sy-party > :not(.sy-party-back, .sy-grip) { position: relative; z-index: 1; }
.sy-party-back { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.sy-party-back:empty { display: none; }
.sy-party-back img, .sy-party-back video { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; }
.sy-party-back .pg-dim { position: absolute; inset: 0; background: #000; }
.sy-party-back .pg-float { position: absolute; inset: 0; width: 100%; height: 100%; }
.sy-crest { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; overflow: hidden; border-radius: 9px; background: linear-gradient(140deg, color-mix(in srgb, var(--sy-wave) 55%, transparent), color-mix(in srgb, var(--sy-accent) 35%, transparent)); color: var(--sy-bright); }
.sy-crest[data-s="18"] { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
.sy-crest img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sy-crest b { font-weight: 500; text-transform: lowercase; }
.sy-party-voices { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-bottom: 1px solid var(--sy-line); }
.sy-party-voice { display: flex; align-items: center; gap: 7px; padding: 3px 4px; color: var(--sy-dim); font-size: 13px; cursor: pointer; transition: color .15s; }
.sy-party-voice:hover, .sy-party-voice.on { color: var(--sy-bright); }
.sy-party-voice.on .sy-icon { color: var(--sy-wave); filter: drop-shadow(0 0 5px var(--sy-wave)); }
.sy-party-voice > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-party-sitting { display: inline-flex; align-items: center; }
.sy-party-sitting > * + * { margin-left: -5px; }
.sy-party.sy-sheeted > .sy-room-list { display: none; }
.sy-party.sy-sheeted .sy-party-sheet { flex: 1; min-height: 0; }
.sy-party-sheet { overflow-y: auto; padding: 8px 12px; border-bottom: 1px solid var(--sy-line); background: color-mix(in srgb, var(--sy-surface) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: sy-fold-in .2s ease-out; }
.sy-party-sheet a { color: var(--sy-text); cursor: pointer; }
.sy-party-sheet a:hover, .sy-party-sheet a.on { color: var(--sy-bright); }
.sy-party-sheet .sy-row a.on { text-shadow: 0 0 8px var(--sy-wave); }
.sy-party-sheet .sy-row a:not(.on) { color: var(--sy-dim); }
.sy-party-sheet .sy-row a:not(.on):hover { color: var(--sy-text); }
.sy-party-sheet .sy-slide { grid-template-columns: 90px 1fr 22px; margin: 6px 0; }
.sy-party-tabs { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sy-party-tabs a { display: inline-grid; place-items: center; color: var(--sy-dim); }
.sy-party-tabs a .sy-icon { width: 16px; height: 16px; }
.sy-party-tabs .sy-dim { margin-left: auto; }
.sy-party-invite { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; }
.sy-party-invite code { color: var(--sy-bright); }
.sy-party-invite small { flex: 1; }
.sy-party-invite input { min-width: 0; color: var(--sy-bright); background: transparent; border: 0; border-bottom: 1px solid var(--sy-line); padding: 3px 1px; font: inherit; outline: none; }
.sy-party-invite input[data-vname] { flex: 1; }
.sy-party-invite input[type=number] { width: 36px; }
.sy-party-sheet .sy-add input { color: var(--sy-bright); }
.sy-party-sheet .sy-add button.sy-save { color: var(--sy-dim); background: none; border: 0; cursor: pointer; }
.sy-in-voice { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; color: var(--sy-wave); }
.sy-in-voice .sy-icon { width: 12px; height: 12px; }
/* the call: pictures above, everyone's seat under, the bar at the foot; each picture can leave for a window of its own */
.sy-call { left: max(16px, env(safe-area-inset-left)); right: auto; width: 360px; height: min(420px, calc(100dvh - 100px)); }
.sy-call-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; }
.sy-call-pictures { display: grid; gap: 6px; grid-template-columns: 1fr; }
.sy-call-pictures[data-n="2"], .sy-call-pictures[data-n="3"], .sy-call-pictures[data-n="4"] { grid-template-columns: 1fr 1fr; }
.sy-call-picture { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; background: #07050b; }
.sy-call-video, .sy-call-video video { width: 100%; height: 100%; }
.sy-call-video video { display: block; object-fit: contain; }
.sy-call-label { position: absolute; left: 6px; bottom: 5px; display: inline-flex; align-items: center; gap: 4px; color: var(--sy-bright); font-size: 11px; text-shadow: 0 1px 3px #000; }
.sy-call-ways { position: absolute; top: 5px; right: 6px; display: flex; gap: 8px; opacity: 0; transition: opacity .15s; }
.sy-call-picture:hover .sy-call-ways { opacity: 1; }
.sy-call-ways a { color: var(--sy-bright); cursor: pointer; filter: drop-shadow(0 1px 3px #000); }
.sy-call-seats { display: flex; flex-direction: column; gap: 2px; }
.sy-call-seat { display: flex; align-items: center; gap: 9px; padding: 4px 2px; border-radius: 8px; }
.sy-call-seat .sy-face, .sy-call-seat > :first-child { flex: none; border-radius: 50%; transition: box-shadow .12s; }
.sy-call-seat.speaking > :first-child { box-shadow: 0 0 0 2px var(--sy-wave), 0 0 12px var(--sy-wave); }
.sy-call-seat.ignored { opacity: .45; }
.sy-call-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sy-call-marks { display: inline-flex; gap: 4px; color: var(--sy-dim); }
.sy-call-marks .sy-icon { width: 14px; height: 14px; }
.sy-call-tools { display: none; align-items: center; gap: 8px; }
.sy-call-seat:hover .sy-call-tools, .sy-call-seat:focus-within .sy-call-tools { display: inline-flex; }
@media (pointer: coarse) { .sy-call-tools { display: inline-flex; } .sy-call-ways { opacity: 1; } }
.sy-call-tools a { color: var(--sy-dim); cursor: pointer; line-height: 0; }
.sy-call-tools a:hover, .sy-call-tools a.on { color: var(--sy-accent); }
.sy-call-tools .sy-icon { width: 15px; height: 15px; }
.sy-call-vol { display: inline-flex; align-items: center; gap: 3px; color: var(--sy-dim); }
.sy-call-vol input { width: 56px; height: 14px; margin: 0; accent-color: var(--sy-wave); }
.sy-call-tools select, .sy-call-pick select { max-width: 100%; color: var(--sy-text); background: transparent; border: 0; border-bottom: 1px solid var(--sy-line); font: inherit; font-size: 12px; outline: none; }
.sy-call-tools select option, .sy-call-pick select option { background: #140f1d; }
.sy-call-pick { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 8px; margin: 6px 0; color: var(--sy-dim); font-size: 12px; }
.sy-call-bar { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 12px; border-top: 1px solid var(--sy-line); }
.sy-call-bar a { display: inline-grid; place-items: center; color: var(--sy-text); cursor: pointer; transition: color .15s, filter .15s; }
.sy-call-bar a .sy-icon { width: 20px; height: 20px; }
.sy-call-bar a:hover { color: var(--sy-bright); }
.sy-call-bar a.on { color: var(--sy-accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sy-accent) 60%, transparent)); }
.sy-call-bar a.sy-call-end { color: #e0607a; }
.sy-call-bar a.sy-call-end:hover { color: #ff7a92; }
.sy-call.sy-sheeted > .sy-call-body { display: none; }
.sy-call.sy-sheeted .sy-call-sheet { flex: 1; min-height: 0; border-bottom: 0; }
/* a stream in its own window: the picture fills it, a double click takes the whole screen */
.sy-stream { width: 480px; height: 310px; right: auto; left: 30%; bottom: 30%; background: #07050b; }
.sy-stream video { flex: 1; min-height: 0; width: 100%; object-fit: contain; border-radius: 0 0 14px 14px; background: #000; }
.sy-crest[data-s="44"] { width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
.sy-party-tint { display: inline-flex; align-items: center; }
.sy-party-tint input { width: 18px; height: 18px; padding: 0; border: 1px solid var(--sy-line); border-radius: 50%; overflow: hidden; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sy-party-tint input::-webkit-color-swatch-wrapper { padding: 0; }
.sy-party-tint input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.sy-party-tint input::-moz-color-swatch { border: 0; border-radius: 50%; }
/* the call's settings: each line an icon and its control, a word only on hover */
.sy-call-line { display: flex; align-items: center; gap: 9px; margin: 7px 0; color: var(--sy-dim); }
.sy-call-line > .sy-icon { flex: none; width: 16px; height: 16px; }
.sy-call-line select { flex: 1; min-width: 0; color: var(--sy-text); background: transparent; border: 0; border-bottom: 1px solid var(--sy-line); font: inherit; font-size: 12px; outline: none; }
.sy-call-line select option { background: #140f1d; }
.sy-call-line input[type=range] { flex: 1; min-width: 0; height: 14px; margin: 0; accent-color: var(--sy-wave); }
.sy-call-line em { width: 26px; color: var(--sy-dim); font-size: 11px; font-style: normal; text-align: right; }
.sy-call-line a { display: inline-grid; place-items: center; color: var(--sy-dim); cursor: pointer; transition: color .15s, filter .15s; }
.sy-call-line a:hover { color: var(--sy-text); }
.sy-call-line a.on { color: var(--sy-bright); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--sy-wave) 70%, transparent)); }
.sy-call-line a .sy-icon { width: 17px; height: 17px; }
.sy-call-line .sy-call-key { min-width: 18px; padding: 0 3px; color: var(--sy-bright); font: 11px ui-monospace, monospace; border-bottom: 1px solid var(--sy-wave); }
.sy-call-gap { flex: 1; }
.sy-call-meter { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: var(--sy-line); }
.sy-call-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--sy-wave), var(--sy-accent)); transition: width .09s linear; }
/* a control's own settings, over the bar */
.sy-call-menu { padding: 4px 12px; border-top: 1px solid var(--sy-line); background: color-mix(in srgb, var(--sy-surface) 90%, transparent); animation: sy-fold-in .16s ease-out; }
.sy-call-pair { display: inline-flex; align-items: center; gap: 1px; }
.sy-call-bar a.sy-call-more { width: 12px; color: var(--sy-dim); }
.sy-call-bar a.sy-call-more .sy-icon { width: 12px; height: 12px; rotate: -90deg; transition: rotate .15s; }
.sy-call-bar a.sy-call-more.on { color: var(--sy-bright); filter: none; }
.sy-call-bar a.sy-call-more.on .sy-icon { rotate: 90deg; }
.sy-call-bar { gap: 14px; }
video.sy-mirror { transform: scaleX(-1); }
.sy-call-line input[type=range], .sy-call-vol input { -webkit-appearance: none; appearance: none; background: none; cursor: pointer; }
.sy-call-line input[type=range]::-webkit-slider-runnable-track, .sy-call-vol input::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: var(--sy-line); }
.sy-call-line input[type=range]::-moz-range-track, .sy-call-vol input::-moz-range-track { height: 2px; border-radius: 1px; background: var(--sy-line); }
.sy-call-line input[type=range]::-webkit-slider-thumb, .sy-call-vol input::-webkit-slider-thumb { width: 11px; height: 11px; margin-top: -4.5px; border: 0; border-radius: 50%; background: var(--sy-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sy-wave) 35%, transparent); -webkit-appearance: none; appearance: none; }
.sy-call-line input[type=range]::-moz-range-thumb, .sy-call-vol input::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--sy-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sy-wave) 35%, transparent); }
.sy-call-part + .sy-call-part { margin-top: 6px; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--sy-line) 70%, transparent); }
.sy-party-rights { flex-wrap: wrap; gap: 8px; }
.sy-party-rank { display: inline-grid; place-items: center; width: 22px; color: var(--sy-dim); }
.sy-party-rank .sy-icon { width: 16px; height: 16px; }
.sy-party-invite label { display: inline-flex; align-items: center; gap: 4px; }
.sy-party-rights a:not(.on) { opacity: .4; }
/* lydium: two notes left of the globe that bob, an arrow under them that drops while the box pulls, a count of links held */
.sy-lydium-note { position: fixed; z-index: 60; top: max(16px, calc(env(safe-area-inset-top) + 2px)); right: calc(max(16px, env(safe-area-inset-right)) + 78px); width: 24px; height: 26px; color: var(--sy-dim); cursor: pointer; line-height: 0; transition: color .3s; }
[data-syringa-corner] .sy-lydium-note { position: relative; top: auto; right: auto; display: inline-flex; margin-right: 12px; vertical-align: middle; }
body:has(.sy-lydium-note) .sy-cord { right: calc(max(16px, env(safe-area-inset-right)) + 114px); }
body:has(.sy-lydium-note) [data-syringa-corner] .sy-cord { right: auto; }
.sy-lydium-note svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sy-lydium-note .sy-lydium-notes { transform-box: view-box; transform-origin: 12px 10px; animation: sy-lydium-bob 3.2s ease-in-out infinite; }
.sy-lydium-note .sy-lydium-drop { opacity: .45; }
.sy-lydium-note:hover, .sy-lydium-note.held { color: var(--sy-wave); }
.sy-lydium-note:hover svg, .sy-lydium-note.busy svg { filter: drop-shadow(0 0 4px var(--sy-wave)); }
.sy-lydium-note.busy { color: var(--sy-accent); }
.sy-lydium-note.busy .sy-lydium-notes { animation-duration: 1.1s; }
.sy-lydium-note.busy .sy-lydium-drop { opacity: 1; animation: sy-lydium-drop .9s ease-in infinite; }
.sy-lydium-note .sy-badge { top: -5px; right: -8px; }
.sy-lydium-note .sy-badge[hidden] { display: none; }
@keyframes sy-lydium-bob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-1.6px) rotate(-6deg); } 65% { transform: translateY(.6px) rotate(4deg); } }
@keyframes sy-lydium-drop { 0% { transform: translateY(-3px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(2px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sy-lydium-note .sy-lydium-notes, .sy-lydium-note.busy .sy-lydium-drop { animation: none; } }
/* its window: the ask on top, pulls with a hair of progress, then the links with their minutes left */
.sy-lydium { width: 380px; height: auto; max-height: min(520px, calc(100dvh - 100px)); }
/* a phone has room for one window across: lydium and the call stand as the chat does, edge to edge */
/* a phone shows one window at a time, docked at the bottom above the keyboard; the rest wait in the strip under it */
@media (max-width: 520px) {
  .sy-win:not(.sy-panel) { left: calc(var(--sy-vleft, 0px) + 8px) !important; right: auto !important; max-width: calc(var(--sy-vw, 100vw) - 16px); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(14, 10, 22, .985) !important; top: auto !important; bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--sy-keys, 0px) + var(--sy-dock, 0px)) !important; width: calc(var(--sy-vw, 100vw) - 16px) !important; height: max(180px, min(560px, calc(var(--sy-vh, 100dvh) - 140px))) !important; max-height: none !important; }
  .sy-win.sy-lydium { height: auto !important; max-height: max(180px, min(560px, calc(100dvh - 140px - var(--sy-keys, 0px)))) !important; }
  .sy-win.sy-full:not(.sy-panel) { top: calc(var(--sy-vtop, 0px) + max(8px, env(safe-area-inset-top))) !important; bottom: auto !important; height: calc(var(--sy-vh, 100dvh) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom)) - 8px - var(--sy-dock, 0px)) !important; }
  .sy-win.sy-folded:not(.sy-panel) { height: auto !important; }
  html.sy-docked { --sy-dock: 40px; }
  html.sy-docked .sy-win:not(.sy-top) { display: none !important; }
  .sy-win > .sy-head, .sy-win > .sy-room-head, .sy-win > .sy-chat-head { cursor: default; touch-action: manipulation; }
  .sy-grip { display: none; }
}
/* inside an app's webview the call is the page; the app draws its head */
html.sy-app-call, html.sy-app-call body { background: var(--sy-bg); overflow: hidden; }
html.sy-app-call body > :not(.sy-call, .sy-stream, .sy-card, .sy-menu) { display: none !important; }
html.sy-app-call .sy-win.sy-call { position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important; background: var(--sy-bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.sy-app-call .sy-call > .sy-chat-head, html.sy-app-call .sy-grip { display: none !important; }
html.sy-app-call .sy-win.sy-call:not([hidden]) { display: flex !important; }
.sy-dock { position: fixed; z-index: 95; left: 8px; right: 8px; bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--sy-keys, 0px)); height: 34px; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; font: 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; background: rgba(14, 10, 22, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, var(--sy-wave) 18%, transparent); border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.sy-dock[hidden] { display: none; }
.sy-dock a { flex: none; padding: 9px 2px; color: var(--sy-dim); cursor: pointer; transition: color .15s; }
.sy-dock a.on { color: var(--sy-bright); text-shadow: 0 0 10px color-mix(in srgb, var(--sy-wave) 70%, transparent); }
/* a box under 16px makes a phone zoom the page in as it is touched */
@media (pointer: coarse) { .sy-win textarea, .sy-win input, .sy-panel textarea, .sy-panel input { font-size: 16px; } }
.sy-lydium .sy-chat-head { color: var(--sy-wave); }
.sy-lydium-title { color: var(--sy-bright); font-weight: 600; }
.sy-lydium .sy-chat-head .sy-dim { flex: 1; font-size: 11.5px; }
.sy-lydium-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; overflow-y: auto; }
.sy-lydium-ask { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--sy-wave) 12%, transparent); }
.sy-lydium-ask input { flex: 1; min-width: 0; padding: 5px 0; color: var(--sy-bright); font: inherit; background: none; border: 0; outline: 0; }
.sy-lydium-ask input::placeholder { color: var(--sy-dim); }
.sy-lydium-ask select { color: var(--sy-text); font: inherit; font-size: 12px; background: none; border: 0; outline: 0; cursor: pointer; }
.sy-lydium-ask select option { background: #140f1e; }
.sy-lydium-said { color: var(--sy-wave); font-size: 12px; overflow-wrap: anywhere; }
.sy-lydium-row { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 12.5px; animation: sy-rise .18s ease-out; }
.sy-lydium-row > svg { flex: none; width: 14px; height: 14px; color: var(--sy-wave); }
.sy-lydium-failed > svg { color: var(--sy-accent); }
.sy-lydium-name { flex: 1; min-width: 0; overflow: hidden; color: var(--sy-bright); white-space: nowrap; text-overflow: ellipsis; }
.sy-lydium-left { font-variant-numeric: tabular-nums; font-size: 11.5px; }
.sy-lydium-why { max-width: 55%; color: var(--sy-accent); font-size: 11.5px; overflow-wrap: anywhere; }
.sy-lydium-row progress { width: 90px; height: 2px; border: 0; background: color-mix(in srgb, var(--sy-wave) 15%, transparent); appearance: none; -webkit-appearance: none; }
.sy-lydium-row progress::-webkit-progress-bar { background: color-mix(in srgb, var(--sy-wave) 15%, transparent); }
.sy-lydium-row progress::-webkit-progress-value { background: linear-gradient(90deg, var(--sy-wave), var(--sy-accent)); }
.sy-lydium-row progress::-moz-progress-bar { background: linear-gradient(90deg, var(--sy-wave), var(--sy-accent)); }
.sy-lydium-none, .sy-lydium-foot { font-size: 11.5px; line-height: 1.45; }
.sy-lydium-foot { margin-top: 4px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--sy-wave) 10%, transparent); }
.sy-lydium-foot code { color: var(--sy-text); }
/* a page's song about: a bare speaker in the corner, lit while it plays, a press to stop or start it */
.sy-song { display: inline-flex; width: 22px; height: 26px; margin-right: 12px; vertical-align: middle; color: var(--sy-dim); cursor: pointer; line-height: 0; transition: color .3s; }
.sy-song[hidden] { display: none; }
.sy-song svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sy-song.on, .sy-song:hover { color: var(--sy-wave); }
.sy-song.on svg { animation: sy-song-beat 1.6s ease-in-out infinite; }
@keyframes sy-song-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .sy-song.on svg { animation: none; } }
/* a link that is a gif or a clip: the thing itself under the line, moving and quiet; alone, its words go */
.sy-embed-media { display: inline-block; max-width: min(100%, 320px); line-height: 0; border-radius: 8px; overflow: hidden; }
.sy-embed-media img, .sy-embed-media video { display: block; max-width: 100%; max-height: 260px; width: auto; height: auto; border-radius: 8px; }
.sy-embed:has(> .sy-embed-media) { margin-top: 4px; }
.sy-msg:has(> .sy-embed.sy-sole) { padding: 4px; background: none; box-shadow: none; }
.sy-msg:has(> .sy-embed.sy-sole) > a.sy-link, .sy-room-body:has(> .sy-embed.sy-sole) > .sy-room-text a.sy-link { display: none; }
.sy-msg:has(> .sy-embed.sy-sole) > .sy-embed { margin: 0; }
/* a chat's row: a pin and a close beside it, there on hover, the pin always where it holds */
.sy-talk-row { position: relative; }
.sy-talk-row .sy-talk { padding-right: 46px; }
.sy-talk-keep { position: absolute; right: 0; top: 50%; translate: 0 -50%; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.sy-talk-row:hover .sy-talk-keep, .sy-talk-keep:focus-within { opacity: 1; }
.sy-panel .sy-talk-keep a { width: 16px; height: 16px; color: var(--sy-dim); line-height: 0; border: 0; padding: 0; }
.sy-panel .sy-talk-keep a:hover, .sy-panel .sy-talk-keep a.on { color: var(--sy-wave); }
.sy-talk-keep svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sy-talk-row.pinned .sy-talk-keep { opacity: 1; }
.sy-talk-row.pinned .sy-talk-keep a:not(.on) { opacity: 0; transition: opacity .15s; }
.sy-talk-row.pinned:hover .sy-talk-keep a { opacity: 1; }
.sy-talk-row .sy-unread { margin-right: 4px; }
@media (hover: none) { .sy-talk-keep { opacity: 1; } }
/* the star by a friend: lit while they are a favourite */
.sy-panel a.sy-fav { color: var(--sy-dim); }
.sy-panel a.sy-fav.on, .sy-panel a.sy-fav:hover { color: #f5c46a; }
.sy-panel a.sy-fav.on svg { fill: currentColor; }
/* the other places in the about fold: a row each, then the kind, a name or link and a plus */
.sy-places { display: flex; flex-direction: column; gap: 6px; }
.sy-place { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.sy-place > .sy-icon, .sy-place-mark .sy-icon { width: 16px; height: 16px; flex: none; }
/* a place's mark is a filled shape wherever it shows, a page's icon block too */
.sy-icon.sy-brand { fill: currentColor; stroke: none; }
.sy-place > .sy-brand, .sy-place-mark .sy-brand { fill: var(--c, currentColor); stroke: none; }
.sy-place em { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sy-dim); font-style: normal; }
.sy-place a { width: 14px; height: 14px; color: var(--sy-dim); line-height: 0; border: 0; padding: 0; }
.sy-place a:hover { color: #f07a9a; }
.sy-place a svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sy-place-add { display: flex; align-items: center; gap: 6px; }
.sy-place-add select { flex: none; max-width: 120px; color: var(--sy-text); background: transparent; border: 0; border-bottom: 1px solid var(--sy-line); border-radius: 0; padding: 5px 1px; font: inherit; font-size: 12.5px; outline: none; cursor: pointer; }
.sy-place-add select option { color: var(--sy-text); background: var(--sy-bg); }
.sy-place-add input { flex: 1; min-width: 0; color: var(--sy-bright); background: transparent; border: 0; border-bottom: 1px solid var(--sy-line); border-radius: 0; padding: 5px 1px; font: inherit; font-size: 12.5px; outline: none; transition: border-color .2s; }
.sy-place-add input::placeholder { color: var(--sy-dim); }
.sy-place-add input:focus, .sy-place-add select:focus { border-color: var(--sy-wave); }
.sy-place-add input { flex: 1; min-width: 0; }
.sy-place-mark { line-height: 0; color: var(--sy-dim); }
/* the background of one's own page behind the site's other pages too (me.ts `backdrop`): every page that loads the panel loads this */
body.pg-on #hearts, html.sy-nohearts #hearts { display: none; }
body.pg-on { background: none; }
html:has(body.pg-on) { background: #000; }
/* the largest viewport, so a phone's floating bars show the page under them, not the plain ground */
.pg-back { position: fixed; top: 0; left: 0; right: 0; height: 100lvh; min-height: 100%; z-index: -1; overflow: hidden; pointer-events: none; }
/* a phone slides its bars over the page, and a layer only as tall as the screen leaves them black: it runs past both ends */
@media (max-width: 800px) { .pg-back { top: -300px; bottom: -300px; height: auto; } }
.pg-back img, .pg-back video { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; }
.pg-dim { position: absolute; inset: 0; background: #000; }
.pg-float { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .pg-back video { display: none; } }

/* a report: why, a few words, a yes; plain words that change colour, no buttons */
.sy-report { position: fixed; z-index: 72; box-sizing: border-box; width: min(270px, calc(100vw - 16px)); padding: 10px 14px 12px; color: var(--sy-text); font: 13.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: color-mix(in srgb, var(--sy-surface) 56%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); border: 1px solid var(--sy-line); border-radius: 12px; box-shadow: 0 16px 44px rgba(0, 0, 0, .55); text-align: left; text-transform: none; letter-spacing: normal; animation: sy-rise .14s ease-out; }
.sy-report p { margin: 0 0 6px; }
.sy-report-head { display: flex; align-items: center; gap: 7px; color: var(--sy-bright); }
.sy-report-head .sy-icon { width: 15px; height: 15px; color: var(--sy-wave); }
.sy-report-ask { color: var(--sy-dim); font-size: 12.5px; }
.sy-report > a { display: block; padding: 2px 0; color: var(--sy-text); cursor: pointer; text-decoration: none; transition: color .15s; }
.sy-report > a:hover { color: var(--sy-bright); }
.sy-report-words { display: block; width: 100%; box-sizing: border-box; margin: 2px 0 10px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--sy-line); border-radius: 0; background: none; color: var(--sy-bright); font: inherit; outline: none; }
.sy-report-words:focus { border-bottom-color: var(--sy-wave); }
.sy-report-words::placeholder { color: var(--sy-dim); }
.sy-report-row { display: flex; gap: 16px; }
.sy-report-row a { color: var(--sy-pale); cursor: pointer; text-decoration: none; transition: color .15s; }
.sy-report-row a:hover { color: var(--sy-bright); }
.sy-report-row a[data-report=not] { color: var(--sy-dim); }
.sy-report-row a[data-report=not]:hover { color: var(--sy-text); }
.sy-toast { position: fixed; z-index: 96; left: 50%; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 40px); transform: translateX(-50%); padding: 8px 14px; border: 1px solid var(--sy-line); border-radius: 10px; background: color-mix(in srgb, var(--sy-surface) 88%, transparent); color: var(--sy-text); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; pointer-events: none; animation: sy-toast 2.6s ease forwards; }
@keyframes sy-toast { 0% { opacity: 0; transform: translate(-50%, 8px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* a warning from staff, quiet over the page until its person says they saw it */
.sy-warned { position: fixed; z-index: 62; top: calc(max(14px, env(safe-area-inset-top)) + 44px); left: 0; right: 0; box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-height: 50dvh; margin: 0 auto; overflow: auto; padding: 12px 16px; color: var(--sy-text); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: color-mix(in srgb, var(--sy-surface) 48%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid color-mix(in srgb, var(--sy-wave) 30%, var(--sy-line)); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); text-align: left; text-transform: none; letter-spacing: normal; animation: sy-rise .18s ease-out; }
.sy-warned p { margin: 0 0 6px; }
.sy-warned-head { display: flex; align-items: center; gap: 7px; color: var(--sy-bright); }
.sy-warned-head .sy-icon { width: 16px; height: 16px; color: var(--sy-wave); }
.sy-warned-one { overflow-wrap: anywhere; white-space: pre-line; }
.sy-warned-when { margin-right: 8px; color: var(--sy-dim); font-size: 12.5px; white-space: nowrap; }
.sy-warned-row { display: flex; justify-content: flex-end; margin-top: 2px; }
.sy-warned-row a { color: var(--sy-pale); cursor: pointer; text-decoration: none; transition: color .15s; }
.sy-warned-row a:hover { color: var(--sy-bright); }
@media (max-width: 520px) { .sy-report, .sy-warned { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }