/* styles/base.css */
/* Reset and base typography */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* the app fills the window and scrolls inside (the note, the lists); the page itself never does */
html, body { overflow: hidden; overscroll-behavior: none; }
/* thin scrollbars, no track */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
body { font: 14px/1.5 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
/* the light page color from the first paint, so there's no white flash while the app loads */
body { background: #f6f5f2; }
/* no padding either: an icon in a 22px button would start 7px in and sit off center */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* a phone's own tap flash is a dark square that ignores the corners; the button's hover look shows on a tap instead */
* { -webkit-tap-highlight-color: transparent; }
svg { display: block; }
[contenteditable] { outline: none; }

/* the installed app draws its own title bar (app.titlebar = overlay, desktop Chrome and Edge): the
   window buttons float over the top corner. These say where; without the overlay they're 0 */
:root {
  --bar-left: env(titlebar-area-x, 0px);
  --bar-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw));
  --bar-height: env(titlebar-area-height, 0px);
}
/* the band the window is dragged by; first in the page, so the buttons after it carve out of it */
.titlebar-drag { position: fixed; top: 0; left: 0; right: 0; height: var(--bar-height); pointer-events: none; -webkit-app-region: drag; app-region: drag; }
@media (display-mode: window-controls-overlay) {
  button, a, input, select, textarea, label, [contenteditable] { -webkit-app-region: no-drag; app-region: no-drag; }
}

/* phones: one column, the sidebar slides over the content */
.app .scrim { display: none; }
@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  /* it slides and the page dims behind it together, on the compositor: the shadow is always there,
     the closed sheet far enough off the edge that it isn't, and the dim fades rather than snapping on */
  .app .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; z-index: 60; box-shadow: 0 10px 40px rgba(0,0,0,.25);
                  transform: translateX(calc(-100% - 48px)); transition: transform var(--pn-dlg) cubic-bezier(.2, .9, .3, 1); }
  .app.menu .sidebar { transform: none; }
  .app .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--veil); opacity: 0; visibility: hidden;
                transition: opacity var(--pn-dlg) ease, visibility 0s linear var(--pn-dlg); }
  .app.menu .scrim { opacity: 1; visibility: visible; transition: opacity var(--pn-dlg) ease, visibility 0s; }
}

/* the editor on the landing page: it doesn't scroll (the wheel scrolls the page, the demo
   note fits its frame), so no zoom bar either */
.app.demo .stage { overflow: hidden; }
.demo .board .status { display: none; }

/* switching light and dark: every color changes at once, nothing fades in after the rest */
.app.instant, .app.instant *, .app.instant *::before, .app.instant *::after { transition: none !important; }

/* light and dark: the new look grows as a circle out of the top right, where the theme button is
   (App.setTheme runs the switch inside a view transition). The circle ends exactly at the far
   corner, so every moment of it shows on screen */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-reveal .6s cubic-bezier(.65, 0, .35, 1); }
@keyframes theme-reveal {
  from { clip-path: circle(0 at calc(100% - 34px) 32px); }
  to { clip-path: circle(hypot(100vw, 100vh) at calc(100% - 34px) 32px); }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-new(root) { animation: none; } }

/* popups come in softly: menus drop a few px from where they open, dialogs grow a touch, backdrops
   fade. Only opacity, scale and translate move, so each one's own transform (centring) stays.
   The scale happens about transform-origin in the box before that transform: one centred with
   left: 50% and translateX(-50%) has its middle at its left edge, so it takes transform-origin
   left (top left, bottom left); "center" would make it slide sideways as it grows */
:root { --pn-in: .14s; --pn-dlg: .22s; --pn-out: .12s; }
@media (prefers-reduced-motion: reduce) { :root { --pn-in: 0s; --pn-dlg: 0s; --pn-out: 0s; } }
@keyframes pn-fade { from { opacity: 0; } }
@keyframes pn-drop { from { opacity: 0; translate: 0 -4px; scale: .98; } }
@keyframes pn-rise { from { opacity: 0; translate: 0 4px; scale: .98; } }
/* dialogs float up a little as they fade in, and sink back as they go (no scaling: text stays sharp) */
@keyframes pn-dialog { from { opacity: 0; translate: 0 10px; } }
@keyframes pn-dialog-out { to { opacity: 0; translate: 0 6px; } }
@keyframes pn-fade-out { to { opacity: 0; } }
/* one dialog handing over to another (ui/Dialogs): the veil behind them stays put. Its fade is
   made instant rather than taken away: taking it away and giving it back would play it again */
.handoff .backdrop { animation-duration: 0s !important; }
/* what waits on the network: its place pulses softly until the real thing fades in over it */
@keyframes pn-pulse { 50% { background-color: color-mix(in srgb, var(--hover) 35%, transparent); } }


/* styles/blocks.css */
/* Content inside text blocks. Global on purpose: pasted and inserted HTML carries no component scope. */
/* headings scale with the block's own size (a 20px block has a 32px H1), like everything else in it */
.ed h1 { font-size: 1.6em; line-height: 1.2; margin: 2px 0 8px; font-weight: 700; letter-spacing: -.01em; }
.ed h2 { font-size: 1.3em; line-height: 1.25; margin: 2px 0 6px; font-weight: 650; }
.ed h3 { font-size: 1.1em; margin: 0 0 6px; font-weight: 600; }
/* a block the slash menu made is empty; until something is typed it shows what it is
   (::after: the to-do's box is its ::before) */
.ed [data-ph]:has(> br:only-child) { position: relative; }
.ed [data-ph]:has(> br:only-child)::after { content: attr(data-ph); position: absolute; left: 0; top: 0; color: var(--text-3); pointer-events: none; white-space: nowrap; }
.ed .todo li[data-ph]:has(> br:only-child)::after { left: 26px; top: 3px; }
.ed blockquote[data-ph]:has(> br:only-child)::after { left: 12px; top: 2px; }
.ed .formula[data-ph]:has(> br:only-child)::after { left: 14px; top: 10px; }
.ed .callout > div[data-ph] { flex: 1; }
.ed blockquote { margin: 6px 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--text-3); color: var(--text-2); }
.ed code { font: .88em "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--code); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.ed p { margin: 0 0 8px; }
.ed ul, .ed ol { margin: 0; padding-left: 20px; }
.ed li { margin: 2px 0; }
.ed a { color: var(--accent); }
/* a click opens a link unless the caret is in the box (TextBox.opens) */
.ed:not(:focus) a { cursor: pointer; }
/* a link to another note (the link picker): a plain click opens it, typing or not */
.ed a.note { text-decoration: none; font-weight: 500; border-bottom: 1.5px solid var(--accent-soft); cursor: pointer; }
.ed a.note:hover { border-bottom-color: var(--accent); }
.ed .formula {
  font: 500 17px "JetBrains Mono", monospace; padding: 10px 14px; margin: 10px 0 0;
  background: var(--hover); border-radius: 8px; display: inline-block;
}
.ed .todo { list-style: none; padding: 0; margin: 0; }
.ed .callout {
  display: flex; gap: 10px; padding: 12px 14px;
  background: var(--callout); border: 1px solid var(--callout-line); border-radius: 10px;
}
.ed ol { padding-left: 22px; }
/* to-dos: the box is the line's own ::before, a click left of the text ticks it (TextBox) */
.ed .todo li { position: relative; display: block; padding: 3px 0 3px 26px; }
.ed .todo li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 5px;
  border: 1.5px solid var(--text-3); cursor: pointer;
}
.ed .todo li.done { color: var(--text-3); text-decoration: line-through; }
.ed .todo li.done::before {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ed .todo ul { list-style: none; padding-left: 0; }
.ed .todo .check { display: none; }   /* notes from before: the box was a span */
/* code: an opaque card over the paper; lines don't wrap, the block scrolls sideways.
   Past one line a gutter shows the numbers kept in data-lines (TextBox / Html::numbered);
   it floats beside the text and sticks to the left while scrolling. The copy icon in the
   corner is drawn here and hit-tested in TextBox */
.ed pre {
  /* the block's font; a block on the default font sets --code-font (TextBox) */
  position: relative; font-size: .82em; line-height: 1.65; font-family: var(--code-font, inherit); white-space: pre; tab-size: 2; overflow-x: auto;
  color: var(--text); background: var(--code); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 44px 10px 14px; margin: 8px 0; scrollbar-width: thin;
}
.ed pre[data-lines]:not([data-lines=""])::before {
  content: attr(data-lines); float: left; position: sticky; left: -14px; z-index: 1;   /* sticky counts from inside the padding */
  min-width: 2ch; margin: 0 16px 0 -14px; padding: 0 8px 0 8px; text-align: right;
  color: var(--text-3); background: var(--code); border-right: 1px solid var(--line); white-space: pre; user-select: none;
}
.ed pre::after {
  content: ""; position: absolute; right: 8px; top: 7px; width: 26px; height: 26px; border-radius: 6px; opacity: 0; transition: opacity .12s; cursor: pointer;
  background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a1 1 0 0 1 1-1h10'/%3E%3C/svg%3E") center / 15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a1 1 0 0 1 1-1h10'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.ed pre:hover::after { opacity: .8; }
.ed pre.copied::after {
  opacity: 1; background: var(--green);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.ed hr { border: none; border-top: 1px solid var(--line); margin: 10px 0; }

/* someone else's caret, where they type in a box they hold (TextBox puts it there) */
.ed .rcaret { display: inline-block; width: 2px; height: 1.15em; margin: 0 -1px; vertical-align: -.2em; border-radius: 1px; background: var(--who); animation: pn-blink 1s steps(1) infinite; pointer-events: none; }
@keyframes pn-blink { 50% { opacity: 0; } }

/* someone else's text boxes under a note of yours that's on theirs (Stage.showUnder): placed as
   their TextBox is (.block: padding, the width without it), never picked */
.under-block { position: absolute; border-radius: 8px; padding: 6px 10px; }
/* tables (the slash menu's, or pasted): thin lines in the theme's colour, cells that wrap */
/* a gutter on the right, as the line under it is below: room for the column strip inside the box (TextBox) */
.ed table { border-collapse: collapse; margin: 6px 0; width: calc(100% - 24px); table-layout: fixed; }
.ed td, .ed th { border: 1px solid var(--line); padding: 5px 8px; vertical-align: top; text-align: left; overflow-wrap: anywhere; min-width: 40px; }
.ed th { font-weight: 600; background: var(--hover); }

/* styles/fonts.css */
/* shipped in assets/fonts so text looks the same offline; latin and latin-ext only */
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/atkinson-hyperlegible-next-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/atkinson-hyperlegible-next-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: block; src: url(assets/fonts/caveat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: block; src: url(assets/fonts/caveat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/fraunces-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/fraunces-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/lora-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(assets/fonts/lora-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/fonts/nunito-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(assets/fonts/nunito-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* styles/theme.css */
/* Design tokens. Light by default, dark when .app has the dark class. */
.app {
  --bg: #f6f5f2; --sidebar: #efede8; --panel: #ffffff; --sheet: #fffdf8; --dot: #e3dfd5;
  --text: #24221e; --text-2: #6b675e; --text-3: #9b968b; --line: #e4e0d7;
  --hover: rgba(36, 34, 30, 0.06); --active: rgba(36, 34, 30, 0.09);
  --accent: #825fff; --accent-soft: #ece7fb; --peach: #ffb0aa;
  --callout: #fbf3db; --callout-line: #ecd9a0; --green-soft: #e3f4ec; --green: #2f7d5c; --ink: #1f2933;
  --red: #e5484d; --amber: #b5651d;
  --code: #f1efe9;
  --tint-yellow: #fbf4d6; --tint-blue: #eaf1fa; --tint-green: #eaf3e7; --tint-pink: #fbecef; --tint-gray: #efeeeb;
  --veil: rgba(20, 18, 16, .35);
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --shadow-drop: drop-shadow(0 1px 2px rgba(0,0,0,.06)) drop-shadow(0 8px 24px rgba(0,0,0,.08));   /* --shadow for a drawn shape */
  --radius: 10px;
  color-scheme: light;
}
.app.dark {
  --bg: #171716; --sidebar: #1c1c1b; --panel: #232321; --sheet: #1f1f1d; --dot: #33322f;
  --text: #ecebe7; --text-2: #a6a39b; --text-3: #75726b; --line: #2f2e2b;
  --hover: rgba(255,255,255,.06); --active: rgba(255,255,255,.1);
  --accent: #9477ff; --accent-soft: #2b2545;
  --callout: #2c2817; --callout-line: #4d4425; --green-soft: #1d3329; --green: #6cc7a0; --ink: #e8eaed;
  --amber: #f0a868;
  --code: #26262a;
  --tint-yellow: #2d2a1b; --tint-blue: #1b2431; --tint-green: #1c281e; --tint-pink: #2f2027; --tint-gray: #2a2a28;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
  --shadow-drop: drop-shadow(0 1px 2px rgba(0,0,0,.4)) drop-shadow(0 8px 24px rgba(0,0,0,.4));
  color-scheme: dark;
}

/* App */
  .app[coi-scope="App"]{ display: grid; grid-template-columns: 264px 1fr; grid-template-rows: minmax(0, 1fr); grid-auto-rows: 0; height: 100vh; height: 100dvh; color: var(--text); background: var(--bg); }
 .app.closed[coi-scope="App"]{ grid-template-columns: 1fr; }
 .main[coi-scope="App"]{ display: flex; flex-direction: column; min-width: 0; min-height: 0; }
 .main[coi-scope="App"]{ position: relative; }
 .lesson-pills[coi-scope="App"]{ position: absolute; inset: 0; z-index: 30; pointer-events: none; }
 .shared-main[coi-scope="App"]{ display: flex; flex-direction: column; min-height: 0; height: 100%; }
  .edit-together[coi-scope="App"]{ position: absolute; right: 18px; bottom: 84px; z-index: 31; display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; box-shadow: var(--shadow); animation: pn-drop var(--pn-in) ease-out both; }
 .edit-together[coi-scope="App"]:hover{ filter: brightness(1.08); }
  .lapse[coi-scope="App"]{ flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 9px 16px; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 13px; line-height: 1.45; color: var(--text-2); animation: pn-fade var(--pn-in) ease-out both; }
 .lapse span[coi-scope="App"]{ flex: 1; min-width: 220px; }
 .lapse a[coi-scope="App"],.lapse button[coi-scope="App"]{ padding: 5px 11px; border-radius: 7px; font-size: 12.5px; white-space: nowrap; text-decoration: none; }
 .lapse .go[coi-scope="App"]{ background: var(--accent); color: #fff; font-weight: 600; }
 .lapse button[coi-scope="App"]{ border: 1px solid var(--line); color: var(--text-2); }
 .lapse button[coi-scope="App"]:hover{ background: var(--hover); color: var(--text); }
 .main.hidden[coi-scope="App"]{ display: none; }
 @media (max-width: 1000px) {
.app[coi-scope="App"]{ grid-template-columns: 1fr; }
}


/* Sidebar */
 .sidebar[coi-scope="Sidebar"]{ background: var(--sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
 .brand[coi-scope="Sidebar"]{ display: flex; align-items: center; gap: 8px; padding: 16px 10px 6px 16px; }
 .home-link[coi-scope="Sidebar"]{ flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 6px 2px 2px; margin: -2px 0 -2px -2px; border-radius: 10px; text-align: left; }
 .home-link[coi-scope="Sidebar"]:hover{ background: var(--hover); }
 .wordmark[coi-scope="Sidebar"]{ font: 600 21px/1 Fraunces, Georgia, serif; letter-spacing: -.02em; font-variation-settings: "opsz" 40; flex: 1; }
  .top[coi-scope="Sidebar"]{ position: relative; padding: 0 10px 6px; }
 .spacebtn[coi-scope="Sidebar"]{ max-width: 100%; display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 8px; text-align: left; color: var(--text-2); }
 .spacebtn[coi-scope="Sidebar"]:hover,.spacebtn.on[coi-scope="Sidebar"]{ background: var(--hover); color: var(--text); }
 .spacebtn .sp[coi-scope="Sidebar"]{ color: var(--c); display: grid; place-items: center; flex: none; }
 .spacebtn .nm[coi-scope="Sidebar"]{ font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .spacebtn .chev[coi-scope="Sidebar"]{ color: var(--text-3); transform: rotate(90deg); display: grid; place-items: center; flex: none; }
 .ib[coi-scope="Sidebar"]{ width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); flex: none; }
 .ib[coi-scope="Sidebar"]:hover{ background: var(--hover); color: var(--text); }
 .veil[coi-scope="Sidebar"]{ position: fixed; inset: 0; z-index: 70; }
 .wsmenu[coi-scope="Sidebar"]{ position: absolute; left: 10px; right: 10px; top: 100%; margin-top: -2px; z-index: 71; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
 .wsmenu .lbl[coi-scope="Sidebar"]{ height: 24px; box-sizing: border-box; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 6px 8px 2px; }
 .wsmenu button[coi-scope="Sidebar"]{ display: flex; align-items: center; gap: 8px; width: 100%; height: 31px; box-sizing: border-box; padding: 7px 8px; border-radius: 6px; text-align: left; color: var(--text); }
 .wsmenu button[coi-scope="Sidebar"]:hover{ background: var(--hover); }
 .wsmenu button .sp[coi-scope="Sidebar"]{ color: var(--c); display: grid; place-items: center; flex: none; }
 .wsmenu .pond[coi-scope="Sidebar"]{ user-select: none; }
 .wsmenu .pond.drop-in[coi-scope="Sidebar"]{ background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
 .wsmenu button .on[coi-scope="Sidebar"]{ margin-left: auto; color: var(--accent); display: grid; place-items: center; }
 .wsmenu .sep[coi-scope="Sidebar"]{ height: 1px; background: var(--line); margin: 6px 4px; }
 .wsmenu button.soft[coi-scope="Sidebar"]{ color: var(--text-2); }
 .search[coi-scope="Sidebar"]{ margin: 4px 12px 10px; padding: 7px 10px; display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--text) 5%, transparent); border-radius: 8px; color: var(--text-3); font-size: 13px; }
 .search input[coi-scope="Sidebar"]{ flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; }
 .search input[coi-scope="Sidebar"]::placeholder{ color: var(--text-3); }
 .search kbd[coi-scope="Sidebar"]{ font: 11px Inter; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
 .nav[coi-scope="Sidebar"]{ flex: 1; overflow: auto; padding: 0 8px 12px; }
 .nav-label[coi-scope="Sidebar"]{ display: flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 14px 8px 4px; }
 .nav-label span[coi-scope="Sidebar"]{ flex: 1; }
 .nav-label button[coi-scope="Sidebar"]{ width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); }
 .nav-label button[coi-scope="Sidebar"]:hover{ background: var(--hover); color: var(--text); }
 .nav-item[coi-scope="Sidebar"]{ display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border-radius: 6px; text-align: left; color: var(--text-2); }
 .nav-item[coi-scope="Sidebar"]:hover{ background: var(--hover); color: var(--text); }
 .nav-item.active[coi-scope="Sidebar"]{ background: var(--active); color: var(--text); font-weight: 500; }
  .group[coi-scope="Sidebar"]{ margin-top: 4px; }
 .group.hidden[coi-scope="Sidebar"]{ display: none; }
 .nb[coi-scope="Sidebar"]{ position: relative; display: flex; align-items: center; border-radius: 6px; }
 .nb .more[coi-scope="Sidebar"]{ width: 24px; height: 24px; margin-right: 2px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); opacity: 0; flex: none; }
 .nb .more.on[coi-scope="Sidebar"]{ opacity: 1; }
 .nb .more[coi-scope="Sidebar"]:hover{ background: var(--active); color: var(--accent); }
 .nb-naming[coi-scope="Sidebar"]{ flex: 1; margin: 2px 4px 2px 0; }
  .rowmenu[coi-scope="Sidebar"]{ position: absolute; right: 4px; top: 100%; z-index: 71; min-width: 150px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top right; }
 .rowmenu button[coi-scope="Sidebar"]{ display: flex; align-items: center; gap: 8px; width: 100%; height: 31px; box-sizing: border-box; padding: 7px 8px; border-radius: 6px; text-align: left; color: var(--text); font-size: 13px; }
 .rowmenu button[coi-scope="Sidebar"]:hover{ background: var(--hover); }
 .rowmenu button.danger[coi-scope="Sidebar"]:hover{ color: var(--red); }
 .rowmenu .key[coi-scope="Sidebar"]{ margin-left: auto; color: var(--text-3); font-size: 11px; }
 .rowmenu .sep[coi-scope="Sidebar"]{ height: 1px; background: var(--line); margin: 6px 4px; }
  @media (hover: none) {
.nb .more[coi-scope="Sidebar"],.prow .more[coi-scope="Sidebar"]{ opacity: .7; }
.nb .add[coi-scope="Sidebar"]{ display: none; }
}
 .nb[coi-scope="Sidebar"]:hover{ background: var(--hover); }
 .nb.active[coi-scope="Sidebar"]{ background: var(--active); }
 .nb .fold[coi-scope="Sidebar"]{ width: 22px; height: 28px; display: grid; place-items: center; color: var(--text-3); flex: none; transition: transform .15s; }
 .nb .fold.open[coi-scope="Sidebar"]{ transform: rotate(90deg); }
 .nb .name[coi-scope="Sidebar"]{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 0; font-weight: 500; color: var(--text); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .nb .dot[coi-scope="Sidebar"]{ width: 9px; height: 12px; border-radius: 2px 3px 3px 2px; flex: none; background: var(--c); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--c) 60%, #000); }
 .nb .count[coi-scope="Sidebar"]{ font-size: 11px; color: var(--text-3); padding-right: 8px; }
 .nb .add[coi-scope="Sidebar"]{ width: 24px; height: 24px; margin-right: 2px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); opacity: 0; flex: none; }
 .nb .add[coi-scope="Sidebar"]:hover{ background: var(--active); color: var(--accent); }
 .nav-item.page[coi-scope="Sidebar"]{ padding-left: 30px; gap: 7px; white-space: nowrap; }
  .nav-item.page.new[coi-scope="Sidebar"]{ color: var(--text-3); }
 .nav-item.page.new .pg[coi-scope="Sidebar"]{ color: inherit; }
 .nav-item.page.new[coi-scope="Sidebar"]:hover{ color: var(--accent); }
 .new-nb[coi-scope="Sidebar"]{ display: flex; align-items: center; gap: 8px; width: calc(100% - 8px); margin: 10px 4px 6px; padding: 7px 10px; box-sizing: border-box; border: 1.5px dashed var(--line); border-radius: 9px; color: var(--text-3); font-size: 13px; font-weight: 500; text-align: left; }
 .new-nb[coi-scope="Sidebar"]:hover{ border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .prow[coi-scope="Sidebar"]{ position: relative; }
 .prow.hidden[coi-scope="Sidebar"]{ display: none; }
 .prow .nav-item.page[coi-scope="Sidebar"]{ padding-right: 30px; }
 .prow .more[coi-scope="Sidebar"]{ position: absolute; right: 4px; top: 4px; width: 23px; height: 23px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); opacity: 0; }
 .prow .more.on[coi-scope="Sidebar"]{ opacity: 1; }
 .prow .more[coi-scope="Sidebar"]:hover{ background: var(--active); color: var(--accent); }
  @media (hover: hover) {
.nb:hover .more[coi-scope="Sidebar"],.prow:hover .more[coi-scope="Sidebar"],.nb:hover .add[coi-scope="Sidebar"]{ opacity: 1; }
.nb:hover .count[coi-scope="Sidebar"]{ display: none; }
}
 .page-naming[coi-scope="Sidebar"]{ padding-left: 26px; }
 .nav-item.page .pg[coi-scope="Sidebar"]{ color: var(--text-3); display: grid; place-items: center; flex: none; }
 .nav-item.page .t[coi-scope="Sidebar"]{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .mk[coi-scope="Sidebar"]{ margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; padding-left: 6px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
 .mk.from[coi-scope="Sidebar"]{ color: var(--text-3); }
 .mk.shared[coi-scope="Sidebar"]{ color: var(--accent); }
 .mk.paused[coi-scope="Sidebar"]{ color: var(--amber); }
 .mk.live[coi-scope="Sidebar"]{ color: var(--green); }
 .mk.live i[coi-scope="Sidebar"]{ width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
 .nav-item.page .t > span[coi-scope="Sidebar"]{ display: block; overflow: hidden; text-overflow: ellipsis; }
  .nav-item.page.hit[coi-scope="Sidebar"]{ height: auto; align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
 .nav-item.page.hit .pg[coi-scope="Sidebar"]{ margin-top: 2px; }
 .snip[coi-scope="Sidebar"]{ display: block; font-size: 11.5px; line-height: 1.35; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
 .shared-head[coi-scope="Sidebar"]{ margin: 14px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
 .nav-item.page.shared[coi-scope="Sidebar"]{ padding-left: 8px; }
 .nav-item.page.shared .by[coi-scope="Sidebar"]{ margin-left: auto; padding-left: 6px; font-size: 11.5px; color: var(--text-3); flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
 .nav-item.hidden[coi-scope="Sidebar"]{ display: none; }
 .nav-item.new[coi-scope="Sidebar"]{ color: var(--text-3); padding-left: 30px; font-size: 13px; }
 .nav-item.new[coi-scope="Sidebar"]:hover{ color: var(--accent); }
 .nav-item.trash[coi-scope="Sidebar"]{ margin-top: 14px; color: var(--text-3); }
 .nav-item.trash .count[coi-scope="Sidebar"]{ margin-left: auto; font-size: 11px; }
 .naming[coi-scope="Sidebar"]{ margin: 6px 8px; }
 .naming input[coi-scope="Sidebar"]{ width: 100%; padding: 5px 8px; border: 1px solid var(--accent); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; outline: none; }
  .foot[coi-scope="Sidebar"]{ display: flex; align-items: center; gap: 4px; padding: 8px 10px 10px; border-top: 1px solid var(--line); }
 .me[coi-scope="Sidebar"]{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 9px; text-align: left; }
 .me[coi-scope="Sidebar"]:hover{ background: var(--hover); }
 .me .pic[coi-scope="Sidebar"]{ width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 14px; }
 .me .who[coi-scope="Sidebar"]{ min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
 .me b[coi-scope="Sidebar"]{ font-weight: 600; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .me small[coi-scope="Sidebar"]{ font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .me small .warn[coi-scope="Sidebar"]{ color: var(--amber); }
  .me.plus .pic[coi-scope="Sidebar"]{ box-shadow: 0 0 0 2px var(--sidebar), 0 0 0 3.5px var(--accent); }
  .me .plus-tag[coi-scope="Sidebar"]{ display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 650; vertical-align: top; }
  .nb[coi-scope="Sidebar"],.nav-item.page[coi-scope="Sidebar"]{ height: 31px; }
 .nb .name[coi-scope="Sidebar"]{ align-self: stretch; }
 .nb .name[coi-scope="Sidebar"],.nav-item.page[coi-scope="Sidebar"]{ user-select: none; }
 .held[coi-scope="Sidebar"]{ opacity: .4; }
  .lifted[coi-scope="Sidebar"]{ background: var(--hover); box-shadow: var(--shadow); transition: box-shadow var(--pn-in) ease-out; }
 .drop-before[coi-scope="Sidebar"]{ box-shadow: inset 0 2px 0 var(--accent); border-radius: 0; }
 .drop-after[coi-scope="Sidebar"]{ box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
 .nb.drop-in[coi-scope="Sidebar"]{ background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
 .nav.dragging[coi-scope="Sidebar"],.nav.dragging *[coi-scope="Sidebar"]{ cursor: grabbing; }
 @media (min-width: 1001px) {
.app.closed .sidebar[coi-scope="Sidebar"]{ display: none; }
}
  .wsmenu[coi-scope="Sidebar"]{ animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top left; }


/* Home */
 .home[coi-scope="Home"]{ position: relative; flex: 1; min-height: 0; overflow: auto; padding: 56px 64px 80px; }
 .inner[coi-scope="Home"]{ max-width: 1040px; }
  .hero[coi-scope="Home"]{ position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 240px; margin-bottom: 20px; }
 .hi[coi-scope="Home"]{ font: 500 56px/1.05 Fraunces, Georgia, serif; letter-spacing: -.025em; margin: 0; }
 .hi em[coi-scope="Home"]{ font-style: italic; color: var(--accent); }
 .date[coi-scope="Home"]{ margin-top: 12px; color: var(--text-2); font-size: 15px; }
 .sum[coi-scope="Home"]{ margin-top: 6px; color: var(--text-3); font-size: 13px; }
 .go[coi-scope="Home"]{ margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
 .go[coi-scope="Home"]:hover{ filter: brightness(1.08); }
  .go small[coi-scope="Home"]{ font-weight: 500; opacity: .8; margin-left: 8px; }
 .pondbox[coi-scope="Home"]{ flex: none; width: 380px; height: 260px; margin: -24px -32px -24px 0; }
 .label[coi-scope="Home"]{ display: flex; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 32px 0 14px; }
 .label i[coi-scope="Home"]{ flex: 1; height: 1px; background: var(--line); }
  .label.folder[coi-scope="Home"]{ text-transform: none; letter-spacing: 0; font-size: 14px; }
 .label.folder button[coi-scope="Home"]{ display: flex; align-items: center; gap: 8px; color: var(--c); font-weight: 600; padding: 2px 6px; margin-left: -6px; border-radius: 6px; }
 .label.folder button[coi-scope="Home"]:hover{ background: var(--hover); }
 .label.folder small[coi-scope="Home"]{ font-weight: 500; color: var(--text-3); font-size: 12px; }
  .recent[coi-scope="Home"]{ display: flex; flex-direction: column; gap: 2px; max-width: 760px; }
 .row[coi-scope="Home"]{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-align: left; }
 .row[coi-scope="Home"]:hover{ background: var(--hover); }
 .row .dot[coi-scope="Home"]{ width: 9px; height: 12px; border-radius: 2px 3px 3px 2px; background: var(--c); flex: none; box-shadow: inset 2px 0 0 color-mix(in srgb, var(--c) 60%, #000); }
 .row .th[coi-scope="Home"]{ display: block; width: 34px; height: 48px; border-radius: 4px; border: 1px solid var(--line); background: var(--sheet); object-fit: cover; flex: none; }
 .app.dark img.th[coi-scope="Home"]{ filter: invert(0.9) hue-rotate(180deg); }
 .row b[coi-scope="Home"]{ font-weight: 500; }
 .row .nb[coi-scope="Home"]{ color: var(--text-3); font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--hover); }
 .row .t[coi-scope="Home"]{ margin-left: auto; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
 .row.hidden[coi-scope="Home"]{ display: none; }
 .empty[coi-scope="Home"]{ color: var(--text-3); font-size: 13px; padding: 6px 12px; }
 .menu-btn[coi-scope="Home"],.side-btn[coi-scope="Home"]{ display: none; position: absolute; left: 12px; top: 12px; width: 36px; height: 36px; border-radius: 9px; place-items: center; color: var(--text-2); background: var(--panel); border: 1px solid var(--line); }
 .side-btn.show[coi-scope="Home"]{ display: grid; }
 .side-btn[coi-scope="Home"]:hover{ color: var(--text); }
 @media (max-width: 1000px) {
.home[coi-scope="Home"]{ padding: 64px 20px 60px; }
.menu-btn[coi-scope="Home"]{ display: grid; }
.side-btn[coi-scope="Home"],.side-btn.show[coi-scope="Home"]{ display: none; }
.hero[coi-scope="Home"]{ flex-direction: column; align-items: flex-start; min-height: 0; }
.hi[coi-scope="Home"]{ font-size: 40px; }
.pondbox[coi-scope="Home"]{ width: 100%; height: 190px; margin: 0; }
}


/* AllSpaces */
 .all-spaces[coi-scope="AllSpaces"]{ position: relative; flex: 1; min-height: 0; overflow: auto; padding: 56px 64px 80px; }
 .inner[coi-scope="AllSpaces"]{ max-width: 1040px; }
 .hi[coi-scope="AllSpaces"]{ font: 500 52px/1.05 Fraunces, Georgia, serif; letter-spacing: -.025em; margin: 0; }
 .sum[coi-scope="AllSpaces"]{ margin-top: 10px; color: var(--text-3); font-size: 14px; }
 .label[coi-scope="AllSpaces"]{ display: flex; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 36px 0 14px; }
 .label i[coi-scope="AllSpaces"]{ flex: 1; height: 1px; background: var(--line); }
 .spaces[coi-scope="AllSpaces"]{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
 .space[coi-scope="AllSpaces"]{ position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; transition: transform .18s, box-shadow .18s, border-color .18s; }
 @media (hover: hover) {
.space[coi-scope="AllSpaces"]:hover{ transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
}
 .space.here[coi-scope="AllSpaces"]{ border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
 .water[coi-scope="AllSpaces"]{ display: block; height: 170px; padding: 4px 0 0; background: color-mix(in srgb, var(--c) 4%, var(--panel)); }
 .foot[coi-scope="AllSpaces"]{ display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
 .foot .ic[coi-scope="AllSpaces"]{ color: var(--c); display: grid; place-items: center; }
 .foot b[coi-scope="AllSpaces"]{ font: 500 18px/1.2 Fraunces, Georgia, serif; letter-spacing: -.01em; color: var(--text); }
 .foot small[coi-scope="AllSpaces"]{ display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; }
 .tag[coi-scope="AllSpaces"]{ margin-left: auto; font-size: 11px; font-weight: 600; color: var(--c); padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 12%, transparent); }
 .new[coi-scope="AllSpaces"]{ border-style: dashed; background: transparent; align-items: center; justify-content: center; gap: 10px; min-height: 230px; color: var(--text-3); font-weight: 500; }
 .new[coi-scope="AllSpaces"]:hover{ color: var(--accent); border-color: var(--accent); }
 .new .plus[coi-scope="AllSpaces"]{ width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--hover); }
 .new:hover .plus[coi-scope="AllSpaces"]{ background: var(--accent-soft); }
 .naming[coi-scope="AllSpaces"]{ min-height: 230px; justify-content: center; padding: 22px; gap: 10px; border-color: var(--accent); }
 .naming .lbl[coi-scope="AllSpaces"]{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
 .naming input[coi-scope="AllSpaces"]{ width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 500 15px var(--font); outline: none; }
 .naming input[coi-scope="AllSpaces"]:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 .naming small[coi-scope="AllSpaces"]{ color: var(--text-3); font-size: 12px; }
 .recent[coi-scope="AllSpaces"]{ display: flex; flex-direction: column; gap: 2px; max-width: 760px; }
 .row[coi-scope="AllSpaces"]{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-align: left; }
 .row[coi-scope="AllSpaces"]:hover{ background: var(--hover); }
 .row.hidden[coi-scope="AllSpaces"]{ display: none; }
 .row .th[coi-scope="AllSpaces"]{ width: 34px; height: 48px; border-radius: 4px; border: 1px solid var(--line); background: var(--sheet); object-fit: cover; flex: none; }
 .app.dark img.th[coi-scope="AllSpaces"]{ filter: invert(0.9) hue-rotate(180deg); }
 .row .dot[coi-scope="AllSpaces"]{ width: 9px; height: 12px; border-radius: 2px 3px 3px 2px; background: var(--c); flex: none; }
 .row b[coi-scope="AllSpaces"]{ font-weight: 500; }
 .row .nb[coi-scope="AllSpaces"]{ color: var(--text-3); font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--hover); }
 .row .t[coi-scope="AllSpaces"]{ margin-left: auto; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }
 .empty[coi-scope="AllSpaces"]{ color: var(--text-3); font-size: 13px; padding: 6px 12px; }
 .links[coi-scope="AllSpaces"]{ display: flex; gap: 8px; margin-top: 36px; }
 .link[coi-scope="AllSpaces"]{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); color: var(--text-2); font-weight: 500; }
 .link[coi-scope="AllSpaces"]:hover{ background: var(--hover); color: var(--text); }
 .link small[coi-scope="AllSpaces"]{ color: var(--text-3); font-weight: 500; }
 .menu-btn[coi-scope="AllSpaces"],.side-btn[coi-scope="AllSpaces"]{ display: none; position: absolute; left: 12px; top: 12px; width: 36px; height: 36px; border-radius: 9px; place-items: center; color: var(--text-2); background: var(--panel); border: 1px solid var(--line); }
 .side-btn.show[coi-scope="AllSpaces"]{ display: grid; }
 .side-btn[coi-scope="AllSpaces"]:hover{ color: var(--text); }
 @media (max-width: 1000px) {
.all-spaces[coi-scope="AllSpaces"]{ padding: 64px 20px 60px; }
.menu-btn[coi-scope="AllSpaces"]{ display: grid; }
.side-btn[coi-scope="AllSpaces"],.side-btn.show[coi-scope="AllSpaces"]{ display: none; }
.hi[coi-scope="AllSpaces"]{ font-size: 38px; }
}


/* Landing */
 .site[coi-scope="Landing"]{ --bg: #f6f5f2; --panel: #ffffff; --text: #24221e; --text-2: #5f5b53; --text-3: #9b968b; --line: #e4e0d7; --accent: #825fff; --accent-soft: #ece7fb; --peach: #ffb0aa; --green: #2f7d5c; --sheet: #fffdf8; --dot: #e3dfd5;  height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden; background: var(--bg); color: var(--text); font: 400 16px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; color-scheme: light; scroll-behavior: smooth; }
 .wrap[coi-scope="Landing"]{ max-width: 1160px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
 a[coi-scope="Landing"]{ color: inherit; text-decoration: none; }
 img[coi-scope="Landing"]{ display: block; max-width: 100%; height: auto; }
 .btn[coi-scope="Landing"]{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 11px; font: 600 15px/1.2 Inter, system-ui, sans-serif; box-sizing: border-box; cursor: pointer; white-space: nowrap; }
 .btn.primary[coi-scope="Landing"]{ background: var(--text); color: #fff; }
 .btn.primary[coi-scope="Landing"]:hover{ background: #000; }
 .btn.secondary[coi-scope="Landing"]{ background: var(--panel); color: var(--text); border: 1px solid var(--line); }
 .btn.secondary[coi-scope="Landing"]:hover{ border-color: var(--text-3); }
 .btn.small[coi-scope="Landing"]{ padding: 8px 15px; font-size: 14px; border-radius: 9px; }
  .top[coi-scope="Landing"]{ position: sticky; top: 0; z-index: 10; background: rgba(246, 245, 242, .82); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; }
 .top .wrap[coi-scope="Landing"]{ display: flex; align-items: center; gap: 28px; height: 64px; }
 .brand[coi-scope="Landing"]{ display: flex; align-items: center; gap: 10px; font: 600 21px/1 Fraunces, Georgia, serif; letter-spacing: -.02em; }
 .links[coi-scope="Landing"]{ display: flex; gap: 22px; font-size: 14.5px; color: var(--text-2); }
 .links a[coi-scope="Landing"]:hover{ color: var(--text); }
 .top .end[coi-scope="Landing"]{ margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14.5px; }
 .top .end .open[coi-scope="Landing"]{ color: var(--text-2); }
 .top .end .open[coi-scope="Landing"]:hover{ color: var(--text); }
  .hero[coi-scope="Landing"]{ position: relative; text-align: center; padding: 88px 0 0; }
  .banks[coi-scope="Landing"]{ position: absolute; top: 150px; width: 250px; height: 327px; pointer-events: none; }
 .banks.l[coi-scope="Landing"]{ left: -20px; }
 .banks.r[coi-scope="Landing"]{ right: -20px; }
 h1[coi-scope="Landing"]{ font: 500 clamp(42px, 5.8vw, 70px)/1.04 Fraunces, Georgia, serif; letter-spacing: -.035em; margin: 0 auto; max-width: 11em; text-wrap: balance; }
 h1 .hand[coi-scope="Landing"]{ position: relative; display: inline-block; font: 600 1.18em/0.9 Caveat, cursive; letter-spacing: 0; color: var(--accent); padding: 0 .04em; }
 h1 .hand svg[coi-scope="Landing"]{ position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .28em; overflow: visible; }
 .lead[coi-scope="Landing"]{ color: var(--text-2); font-size: clamp(17px, 1.5vw, 19px); margin: 24px auto 34px; max-width: 31em; text-wrap: pretty; }
 .ctas[coi-scope="Landing"]{ display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
 .steps[coi-scope="Landing"]{ margin: 14px 0 0; color: var(--text-2); font-size: 14px; animation: pn-fade var(--pn-in) ease both; }
 .store[coi-scope="Landing"]{ display: inline-block; margin: 22px 0 0; border-radius: 9px; }
 .store img[coi-scope="Landing"]{ height: 48px; width: auto; }
 .soon[coi-scope="Landing"]{ display: flex; justify-content: center; align-items: center; gap: 5px; margin: 12px 0 0; color: var(--text-3); font-size: 14px; }
 .soon svg[coi-scope="Landing"]{ color: var(--text-3); }
  .devices[coi-scope="Landing"]{ position: relative; margin: 56px auto 0; max-width: 1080px; padding-bottom: 40px; }
 .devices[coi-scope="Landing"]::before{ content: ""; position: absolute; left: 4%; right: 4%; top: 22%; bottom: -6%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, #d9ece4, rgba(217, 236, 228, 0)); filter: blur(8px); }
 .laptop[coi-scope="Landing"]{ position: relative; z-index: 1; width: 80%; margin: 0 auto; }
 .laptop .lid[coi-scope="Landing"]{ background: #1d1c1a; border-radius: 18px 18px 6px 6px; padding: 12px 12px 14px; box-shadow: 0 40px 80px -30px rgba(30, 25, 15, .35); }
 .laptop .lid img[coi-scope="Landing"]{ border-radius: 6px; }
 .laptop .base[coi-scope="Landing"]{ height: 14px; margin: 0 -5%; background: linear-gradient(#d9d6cf, #b9b5ac); border-radius: 0 0 14px 14px; box-shadow: 0 18px 30px -18px rgba(30, 25, 15, .5); }
 .laptop .base[coi-scope="Landing"]::after{ content: ""; display: block; width: 16%; height: 6px; margin: 0 auto; background: #a8a39a; border-radius: 0 0 8px 8px; }
 .tablet[coi-scope="Landing"]{ position: absolute; z-index: 2; right: 1%; bottom: 0; width: 27%; transform: rotate(3deg); }
 .tablet .body[coi-scope="Landing"]{ background: #1d1c1a; border-radius: 26px; padding: 11px; box-shadow: 0 40px 70px -24px rgba(30, 25, 15, .45); }
 .tablet .body img[coi-scope="Landing"]{ border-radius: 16px; }
 .pen[coi-scope="Landing"]{ position: absolute; z-index: 3; left: 88%; top: 56%; width: 25%; transform: rotate(38deg); transform-origin: 0 50%; pointer-events: none; filter: drop-shadow(0 18px 14px rgba(30, 25, 15, .28)); }
  section.block[coi-scope="Landing"]{ padding: 112px 0 0; }
 .kicker[coi-scope="Landing"]{ color: var(--accent); font-weight: 600; font-size: 14px; letter-spacing: .02em; margin: 0 0 10px; }
 h2[coi-scope="Landing"]{ font: 500 clamp(32px, 4.2vw, 50px)/1.08 Fraunces, Georgia, serif; letter-spacing: -.03em; margin: 0; max-width: 16em; }
 .intro[coi-scope="Landing"]{ color: var(--text-2); font-size: 18px; margin: 16px 0 0; max-width: 36em; }
 .center[coi-scope="Landing"]{ text-align: center; }
 .center h2[coi-scope="Landing"],.center .intro[coi-scope="Landing"]{ margin-left: auto; margin-right: auto; }
  .tabs[coi-scope="Landing"]{ display: flex; justify-content: center; gap: 6px; margin: 36px auto 0; padding: 5px; width: max-content; max-width: 100%; box-sizing: border-box; overflow-x: auto; background: #ebe8e1; border-radius: 13px; scrollbar-width: none; }
 .tabs button[coi-scope="Landing"]{ padding: 9px 16px; border-radius: 9px; font: 500 14.5px/1 Inter, system-ui, sans-serif; color: var(--text-2); white-space: nowrap; cursor: pointer; }
 .tabs button[coi-scope="Landing"]:hover{ color: var(--text); }
 .tabs button.on[coi-scope="Landing"]{ background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
 .tour[coi-scope="Landing"]{ display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; margin-top: 40px; text-align: left; }
 .tour h3[coi-scope="Landing"]{ font: 600 24px/1.25 Inter, system-ui, sans-serif; letter-spacing: -.01em; margin: 0 0 12px; }
 .tour p[coi-scope="Landing"]{ color: var(--text-2); margin: 0; font-size: 16.5px; }
 .window[coi-scope="Landing"]{ border-radius: 14px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(30, 25, 15, .3); }
 .window .bar[coi-scope="Landing"]{ display: flex; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fbfaf7; }
 .window .bar i[coi-scope="Landing"]{ width: 10px; height: 10px; border-radius: 50%; background: #e2ded5; }
 .shots[coi-scope="Landing"]{ position: relative; }
 .shots img[coi-scope="Landing"]{ transition: opacity .25s; }
 .shots img.off[coi-scope="Landing"]{ position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .stage[coi-scope="Landing"]{ --z: 2; display: inline-block; margin-top: 44px; border-radius: calc(14px * var(--z)); box-shadow: 0 30px 60px -30px rgba(30, 25, 15, .3); }
 .stage .z[coi-scope="Landing"]{ zoom: var(--z); }
  .cards[coi-scope="Landing"]{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
 .card[coi-scope="Landing"]{ background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
 .card .ic[coi-scope="Landing"]{ width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; }
 .card h3[coi-scope="Landing"]{ font: 600 17px/1.3 Inter, system-ui, sans-serif; margin: 0 0 6px; }
 .card p[coi-scope="Landing"]{ margin: 0; color: var(--text-2); font-size: 15px; }
 .pond[coi-scope="Landing"]{ display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; margin-top: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
 .pond .say[coi-scope="Landing"]{ padding: 32px; }
 .pond h3[coi-scope="Landing"]{ font: 500 28px/1.15 Fraunces, Georgia, serif; letter-spacing: -.02em; margin: 0 0 10px; }
 .pond p[coi-scope="Landing"]{ margin: 0; color: var(--text-2); }
 .pond .water[coi-scope="Landing"]{ display: block; height: 300px; }
  .plans[coi-scope="Landing"]{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 820px; margin: 44px auto 0; text-align: left; }
 .plan[coi-scope="Landing"]{ background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; }
 .plan.plus[coi-scope="Landing"]{ background: #24221e; color: #f6f5f2; border-color: #24221e; }
 .plan h3[coi-scope="Landing"]{ font: 600 18px/1.2 Inter, system-ui, sans-serif; margin: 0; display: flex; align-items: center; gap: 10px; }
 .plan .tag[coi-scope="Landing"]{ font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--accent); color: #fff; }
 .plan .price[coi-scope="Landing"]{ font: 500 40px/1 Fraunces, Georgia, serif; margin: 16px 0 4px; letter-spacing: -.02em; }
 .plan .per[coi-scope="Landing"]{ color: var(--text-3); font-size: 14px; }
 .plan.plus .per[coi-scope="Landing"]{ color: #a9a49a; }
  .amt[coi-scope="Landing"]{ border-radius: 8px; }
 .amt.sk[coi-scope="Landing"]{ --hover: #ebe8e1; color: transparent; background-color: var(--hover); animation: pn-pulse calc(var(--pn-dlg) * 6) ease-in-out infinite; }
 .plan.plus .amt.sk[coi-scope="Landing"]{ --hover: #3a3832; }
 .amt.in[coi-scope="Landing"]{ animation: pn-fade var(--pn-in) ease-out; }
 .plan ul[coi-scope="Landing"]{ list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; font-size: 15px; }
 .plan li[coi-scope="Landing"]{ display: flex; gap: 10px; align-items: flex-start; }
 .plan li .tick[coi-scope="Landing"]{ flex: none; margin-top: 3px; color: var(--accent); }
 .plan.plus li .tick[coi-scope="Landing"]{ color: #b9a6ff; }
 .plan .btn[coi-scope="Landing"]{ margin-top: auto; }
 .plan.plus .btn[coi-scope="Landing"]{ background: #f6f5f2; color: #24221e; }
 .plan.plus .btn[coi-scope="Landing"]:hover{ background: #fff; }
  .closing[coi-scope="Landing"]{ margin: 120px 0 0; padding: 64px 24px; border-radius: 24px; text-align: center; background: linear-gradient(160deg, #e6f1ec, #efeafc); }
 .closing h2[coi-scope="Landing"]{ margin: 0 auto 12px; }
 .closing p[coi-scope="Landing"]{ color: var(--text-2); margin: 0 auto 28px; font-size: 18px; }
 footer[coi-scope="Landing"]{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding: 56px 0 48px; color: var(--text-2); font-size: 14px; }
 footer .brand[coi-scope="Landing"]{ margin-bottom: 12px; color: var(--text); }
 footer h4[coi-scope="Landing"]{ font: 600 13px/1 Inter, system-ui, sans-serif; color: var(--text); margin: 4px 0 14px; }
 footer ul[coi-scope="Landing"]{ list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
 footer a[coi-scope="Landing"]:hover{ color: var(--text); }
 footer .soon[coi-scope="Landing"]{ display: block; margin: 0; font-size: inherit; color: var(--text-3); }
 .legal[coi-scope="Landing"]{ border-top: 1px solid var(--line); padding: 20px 0 36px; color: var(--text-3); font-size: 13px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
 .legal .pages[coi-scope="Landing"]{ display: flex; gap: 18px; }
 .legal a[coi-scope="Landing"]:hover{ color: var(--text); }
 @media (max-width: 1080px) {
.banks[coi-scope="Landing"]{ display: none; }
}
 @media (max-width: 900px) {
.links[coi-scope="Landing"]{ display: none; }
.tour[coi-scope="Landing"]{ grid-template-columns: 1fr; gap: 20px; text-align: center; }
.cards[coi-scope="Landing"]{ grid-template-columns: 1fr 1fr; }
.stage[coi-scope="Landing"]{ --z: 1.5; }
.pond[coi-scope="Landing"]{ grid-template-columns: 1fr; }
.pond .water[coi-scope="Landing"]{ height: 220px; }
footer[coi-scope="Landing"]{ grid-template-columns: 1fr 1fr; }
footer .about[coi-scope="Landing"]{ grid-column: 1 / -1; }
}
 @media (max-width: 600px) {
.top .end .open[coi-scope="Landing"]{ display: none; }
.hero[coi-scope="Landing"]{ padding-top: 40px; }
.laptop[coi-scope="Landing"]{ width: 92%; margin: 0; }
.laptop .lid[coi-scope="Landing"]{ padding: 6px 6px 8px; border-radius: 10px 10px 4px 4px; }
.tablet[coi-scope="Landing"]{ width: 34%; right: -3%; bottom: -6%; }
.soon[coi-scope="Landing"]{ flex-wrap: wrap; font-size: 13px; }
.tablet .body[coi-scope="Landing"]{ border-radius: 14px; padding: 5px; }
.tablet .body img[coi-scope="Landing"]{ border-radius: 9px; }
.pen[coi-scope="Landing"]{ display: none; }
.tabs[coi-scope="Landing"]{ justify-content: flex-start; }
.cards[coi-scope="Landing"],.plans[coi-scope="Landing"]{ grid-template-columns: 1fr; }
.stage[coi-scope="Landing"]{ --z: .85; }
.card[coi-scope="Landing"]{ display: grid; grid-template-columns: 38px 1fr; gap: 2px 14px; padding: 18px; }
.card .ic[coi-scope="Landing"]{ grid-row: span 2; margin: 0; }
section.block[coi-scope="Landing"]{ padding-top: 80px; }
.closing[coi-scope="Landing"]{ margin-top: 80px; padding: 48px 20px; }
}


/* Bank */
 .bank[coi-scope="Bank"]{ display: block; width: 100%; height: 100%; overflow: visible; --w: color-mix(in srgb, var(--green) 16%, var(--bg)); --shine: color-mix(in srgb, #fff 70%, var(--w)); --reed: color-mix(in srgb, #5f8a52 55%, var(--bg)); --leaf: color-mix(in srgb, #6f9a5e 42%, var(--bg)); --tail: color-mix(in srgb, #7a5c3c 60%, var(--bg)); --pad: color-mix(in srgb, #5f9e6c 55%, var(--bg)); --rim: color-mix(in srgb, #4a8257 55%, var(--bg)); }
 .water[coi-scope="Bank"]{ fill: url(#bankWater); }
 .s1[coi-scope="Bank"]{ stop-color: var(--w); }
 .s2[coi-scope="Bank"]{ stop-color: var(--w); stop-opacity: 0; }
 .stem[coi-scope="Bank"]{ fill: none; stroke: var(--reed); stroke-width: 2; stroke-linecap: round; }
 .leaf[coi-scope="Bank"]{ fill: var(--leaf); }
 .cattail[coi-scope="Bank"]{ fill: var(--tail); }
 .sway[coi-scope="Bank"]{ transform-origin: 0 0; animation: sway 5s ease-in-out infinite; }
 .sway.c1[coi-scope="Bank"]{ animation-duration: 6.5s; animation-delay: -2s; }
 .sway.c2[coi-scope="Bank"]{ animation-duration: 4.2s; animation-delay: -1s; }
 @keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } } .pad[coi-scope="Bank"]{ fill: var(--pad); stroke: var(--rim); stroke-width: 1; stroke-linejoin: round; }
 .bob[coi-scope="Bank"]{ transform-origin: 0 0; animation: bob 9s ease-in-out infinite; }
 .bob.c1[coi-scope="Bank"]{ animation-duration: 12s; animation-delay: -4s; animation-direction: reverse; }
 .bob.c2[coi-scope="Bank"]{ animation-duration: 7s; animation-delay: -2s; }
 @keyframes bob { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 35% { transform: translate(1.6px, -.8px) rotate(3deg); } 70% { transform: translate(-.8px, .9px) rotate(-1.5deg); } } .petal[coi-scope="Bank"]{ fill: #f7c4d2; stroke: #eba3b8; stroke-width: .6; }
 .petal.in[coi-scope="Bank"]{ fill: #fde3ea; }
 .heart[coi-scope="Bank"]{ fill: #f2cd5c; }
 .plip[coi-scope="Bank"]{ fill: none; stroke: var(--shine); stroke-width: 1.2; opacity: 0; transform-origin: 0 0; animation: plip 9s ease-out infinite; }
 .plip.late[coi-scope="Bank"]{ animation-delay: .5s; }
 .plip.c1[coi-scope="Bank"]{ animation-duration: 13s; animation-delay: -5s; }
 .plip.c1.late[coi-scope="Bank"]{ animation-delay: -4.5s; }
 @keyframes plip { 0% { transform: scale(.15); opacity: .8; } 30% { transform: scale(1); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) {
.bank *[coi-scope="Bank"]{ animation: none !important; }
}


/* InviteView */
 .invite[coi-scope="InviteView"]{ --bg: #f6f5f2; --panel: #ffffff; --text: #24221e; --text-2: #5f5b53; --text-3: #9b968b; --line: #e4e0d7; --accent: #825fff; --green: #3a9a6a; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 16px 40px; color: var(--text); color-scheme: light; background: var(--bg); font: 400 16px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-y: auto; height: 100vh; height: 100dvh; }
 a[coi-scope="InviteView"]{ color: inherit; text-decoration: none; }
 .home[coi-scope="InviteView"]{ position: fixed; top: 20px; left: 24px; display: flex; align-items: center; gap: 9px; font: 600 19px/1 Fraunces, Georgia, serif; letter-spacing: -.02em; }
 .card[coi-scope="InviteView"]{ width: 100%; max-width: 440px; box-sizing: border-box; padding: 40px 32px 30px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(30, 25, 15, .25), 0 1px 2px rgba(30, 25, 15, .04); animation: pn-fade var(--pn-in) ease-out both; }
 .card.wait[coi-scope="InviteView"]{ background: #efece6; border-color: transparent; box-shadow: none; pointer-events: none; animation: pn-pulse calc(var(--pn-dlg) * 6) ease-in-out infinite; }
 .card.wait > *[coi-scope="InviteView"],.what.wait[coi-scope="InviteView"]{ visibility: hidden; }
 .mark[coi-scope="InviteView"]{ display: flex; justify-content: center; margin-bottom: 18px; }
 .kicker[coi-scope="InviteView"]{ text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
 h1[coi-scope="InviteView"]{ font: 500 30px/1.15 Fraunces, Georgia, serif; letter-spacing: -.025em; margin: 0 0 10px; text-align: center; text-wrap: balance; }
 .sub[coi-scope="InviteView"]{ color: var(--text-2); font-size: 15px; margin: 0 0 22px; text-align: center; text-wrap: balance; }
 ul[coi-scope="InviteView"]{ list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; font-size: 14.5px; color: var(--text-2); }
 li[coi-scope="InviteView"]{ display: flex; gap: 10px; align-items: flex-start; }
 li .tick[coi-scope="InviteView"]{ color: var(--green); flex: none; margin-top: 3px; display: grid; }
 li b[coi-scope="InviteView"]{ color: var(--text); font-weight: 600; }
 .providers[coi-scope="InviteView"]{ display: grid; gap: 10px; }
 .as[coi-scope="InviteView"]{ display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; font-size: 14px; color: var(--text-2); }
 .as b[coi-scope="InviteView"]{ color: var(--text); font-weight: 600; }
 .as .pic[coi-scope="InviteView"]{ width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #efeaff; color: var(--accent); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; flex: none; }
 .other[coi-scope="InviteView"]{ display: block; margin: 12px auto 0; font-size: 13.5px; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
 .other[coi-scope="InviteView"]:hover{ color: var(--text); }
 .go[coi-scope="InviteView"]{ display: flex; align-items: center; justify-content: center; height: 50px; width: 100%; border-radius: 12px; background: var(--accent); color: #fff; font: 600 15px/1 Inter, system-ui, sans-serif; }
 .go[coi-scope="InviteView"]:hover{ filter: brightness(1.08); }
 .fine[coi-scope="InviteView"]{ margin: 20px 0 0; color: var(--text-3); font-size: 12.5px; line-height: 1.5; text-align: center; }
 .fine a[coi-scope="InviteView"]{ text-decoration: underline; text-underline-offset: 2px; }
 .what[coi-scope="InviteView"]{ margin-top: 18px; color: var(--text-3); font-size: 13.5px; max-width: 400px; text-align: center; }
 .what a[coi-scope="InviteView"]{ color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }


/* Checkout */
 .checkout[coi-scope="Checkout"]{ --bg: #f6f5f2; --panel: #ffffff; --text: #24221e; --text-2: #6b675e; --text-3: #9b968b; --line: #e4e0d7; --hover: rgba(36, 34, 30, .06); --accent: #825fff; --accent-soft: #ece7fb; --green: #2f7d5c; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08); min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); color-scheme: light; font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums lining-nums; -webkit-font-smoothing: antialiased; }
 .checkout.dark[coi-scope="Checkout"]{ --bg: #171716; --panel: #232321; --text: #ecebe7; --text-2: #a6a39b; --text-3: #75726b; --line: #2f2e2b; --hover: rgba(255,255,255,.06); --accent: #9477ff; --accent-soft: #2b2545; --green: #6cc7a0; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4); color-scheme: dark; }
 a[coi-scope="Checkout"]{ color: inherit; }
 button[coi-scope="Checkout"]{ font: inherit; color: inherit; }
 header[coi-scope="Checkout"]{ max-width: 1040px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; }
 .brand[coi-scope="Checkout"]{ display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 19px/1 Fraunces, Georgia, serif; }
 .back[coi-scope="Checkout"]{ padding: 7px 12px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 14px; }
 .back[coi-scope="Checkout"]:hover{ background: var(--hover); color: var(--text); }
 main[coi-scope="Checkout"]{ max-width: 1040px; margin: 0 auto; padding: 12px 24px 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; align-items: start; }
 main.solo[coi-scope="Checkout"]{ max-width: 560px; grid-template-columns: minmax(0, 1fr); }
 .subscribe[coi-scope="Checkout"]{ display: block; width: 100%; padding: 13px 18px; border: 0; border-radius: 12px; cursor: pointer; text-align: center; font-size: 15.5px; }
 .subscribe[coi-scope="Checkout"]:disabled{ opacity: .6; cursor: default; }
 @media (max-width: 860px) {
main[coi-scope="Checkout"]{ grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
 h1[coi-scope="Checkout"]{ font: 500 34px/1.15 Fraunces, Georgia, serif; margin: 18px 0 8px; }
 .lead[coi-scope="Checkout"]{ margin: 0 0 22px; color: var(--text-2); font-size: 15.5px; }
  .plans[coi-scope="Checkout"]{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 24px; }
 .plan[coi-scope="Checkout"]{ position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 16px 14px; text-align: left; cursor: pointer; border: 1.5px solid var(--line); border-radius: 14px; background: var(--panel); transition: border-color var(--pn-in), background-color var(--pn-in); }
 .plan[coi-scope="Checkout"]:hover{ border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
 .plan.on[coi-scope="Checkout"]{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
 .plan .name[coi-scope="Checkout"]{ display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
 .plan .dot[coi-scope="Checkout"]{ width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--text-3); flex: none; display: grid; place-items: center; }
 .plan.on .dot[coi-scope="Checkout"]{ border-color: var(--accent); }
 .plan.on .dot[coi-scope="Checkout"]::after{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
 .plan .price[coi-scope="Checkout"]{ font-size: 13.5px; color: var(--text-2); }
 .plan .price b[coi-scope="Checkout"]{ font: 600 24px/1.1 Inter, system-ui, sans-serif; color: var(--text); letter-spacing: -.01em; }
 .plan .price s[coi-scope="Checkout"]{ margin-left: 4px; color: var(--text-3); }
 .plan .sub[coi-scope="Checkout"]{ font-size: 12.5px; color: var(--text-3); }
 .plan .save[coi-scope="Checkout"]{ position: absolute; top: -10px; right: 12px; padding: 2px 9px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent); animation: pn-rise calc(var(--pn-dlg) * 2) cubic-bezier(.16, 1, .3, 1) both; }
 .plan .per[coi-scope="Checkout"]{ white-space: nowrap; }
 @media (max-width: 480px) {
.plan .price b[coi-scope="Checkout"]{ font-size: 20px; }
.plan .price s[coi-scope="Checkout"]{ display: block; margin: 0; }
}
 ul[coi-scope="Checkout"]{ margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 14.5px; }
 li[coi-scope="Checkout"]{ display: flex; gap: 10px; align-items: center; }
 li .tick[coi-scope="Checkout"]{ color: var(--green); flex: none; display: grid; }
 .summary[coi-scope="Checkout"]{ padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
 .row[coi-scope="Checkout"]{ display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; color: var(--text-2); font-size: 14px; }
 .row.item[coi-scope="Checkout"]{ color: var(--text); font-weight: 600; font-size: 15px; padding-bottom: 10px; }
 .row.item small[coi-scope="Checkout"]{ display: block; font-weight: 400; color: var(--text-3); font-size: 13px; }
 .row.total[coi-scope="Checkout"]{ margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 16px; }
 .then[coi-scope="Checkout"]{ margin: 10px 0 0; font-size: 13px; color: var(--text-3); }
  .sk[coi-scope="Checkout"]{ border-radius: 5px; transition: color var(--pn-dlg) ease-out, background-color var(--pn-dlg) ease-out; }
 .plans.wait .sk[coi-scope="Checkout"],.summary.wait .sk[coi-scope="Checkout"]{ color: transparent; background-color: var(--hover); animation: pn-pulse calc(var(--pn-dlg) * 6) ease-in-out infinite; }
 .fine[coi-scope="Checkout"]{ margin: 16px 0 0; font-size: 12.5px; color: var(--text-3); }
 .pay[coi-scope="Checkout"]{ padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); min-height: 420px; }
 .pay.bare[coi-scope="Checkout"]{ min-height: 0; }
 .pay-frame[coi-scope="Checkout"]{ animation: pn-fade var(--pn-in) ease-out both; }
  .test[coi-scope="Checkout"]{ margin: 8px 8px 12px; padding: 16px; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 12px; }
 .test b[coi-scope="Checkout"]{ display: block; font-size: 14px; }
 .test p[coi-scope="Checkout"]{ margin: 4px 0 12px; color: var(--text-2); font-size: 13.5px; }
 .test .btn[coi-scope="Checkout"]{ width: 100%; border: 0; cursor: pointer; }
 .note[coi-scope="Checkout"]{ max-width: 460px; margin: 80px auto; padding: 0 24px; text-align: center; animation: pn-fade var(--pn-in) ease-out both; }
 .note h1[coi-scope="Checkout"]{ margin-top: 0; }
 .note p[coi-scope="Checkout"]{ color: var(--text-2); margin: 0 0 22px; }
  .paid[coi-scope="Checkout"]{ max-width: 420px; margin: 72px auto; padding: 0 24px; text-align: center; }
 .paid .mark[coi-scope="Checkout"]{ width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); animation: pn-rise calc(var(--pn-dlg) * 2) cubic-bezier(.16, 1, .3, 1) both; }
 .paid h1[coi-scope="Checkout"]{ margin: 0 0 8px; animation: pn-rise var(--pn-dlg) ease-out var(--pn-dlg) both; }
 .paid p[coi-scope="Checkout"]{ margin: 0 0 24px; color: var(--text-2); min-height: 1.5em; animation: pn-rise var(--pn-dlg) ease-out calc(var(--pn-dlg) * 1.5) both; }
 .paid .btn[coi-scope="Checkout"]{ animation: pn-fade var(--pn-dlg) ease-out calc(var(--pn-dlg) * 2) both; }
 .btn[coi-scope="Checkout"]{ display: inline-block; padding: 10px 18px; border-radius: 10px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; font-size: 14.5px; }
 .btn[coi-scope="Checkout"]:hover{ filter: brightness(1.08); }


/* LoginScreen */
 .login[coi-scope="LoginScreen"]{ --bg: #f6f5f2; --panel: #ffffff; --text: #24221e; --text-2: #5f5b53; --text-3: #9b968b; --line: #e4e0d7; --accent: #825fff; --peach: #ffb0aa; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 16px 40px; color: var(--text); color-scheme: light; background: var(--bg); font: 400 16px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-y: auto; height: 100vh; height: 100dvh; }
 a[coi-scope="LoginScreen"]{ color: inherit; text-decoration: none; }
 .home[coi-scope="LoginScreen"]{ position: fixed; top: 20px; left: 24px; display: flex; align-items: center; gap: 9px; font: 600 19px/1 Fraunces, Georgia, serif; letter-spacing: -.02em; }
 .card[coi-scope="LoginScreen"]{ width: 100%; max-width: 400px; box-sizing: border-box; padding: 40px 32px 30px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(30, 25, 15, .25), 0 1px 2px rgba(30, 25, 15, .04); }
 .mark[coi-scope="LoginScreen"]{ display: flex; justify-content: center; margin-bottom: 18px; }
 h1[coi-scope="LoginScreen"]{ font: 500 30px/1.15 Fraunces, Georgia, serif; letter-spacing: -.025em; margin: 0 0 8px; }
 .sub[coi-scope="LoginScreen"]{ color: var(--text-2); font-size: 15px; margin: 0 0 28px; text-wrap: balance; }
 .providers[coi-scope="LoginScreen"]{ display: grid; gap: 10px; }
 .back[coi-scope="LoginScreen"]{ display: inline-block; margin: 0 0 18px; color: var(--accent); font-weight: 600; font-size: 14.5px; }
 .error[coi-scope="LoginScreen"]{ margin: 0 0 18px; padding: 11px 14px; border-radius: 10px; background: #fdecec; border: 1px solid #f5c6c6; color: #a12b2b; font-size: 14px; text-align: left; }
 .note[coi-scope="LoginScreen"]{ margin: 0 0 18px; padding: 11px 14px; border-radius: 10px; background: #fbf3db; border: 1px solid #ecd9a0; color: #6b5a23; font-size: 14px; text-align: left; }
 .note code[coi-scope="LoginScreen"]{ font: 12.5px JetBrains Mono, monospace; }
 .fine[coi-scope="LoginScreen"]{ margin: 22px 0 0; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
 .fine a[coi-scope="LoginScreen"]{ text-decoration: underline; text-underline-offset: 2px; }
 .code[coi-scope="LoginScreen"]{ width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: 500 20px/1.2 JetBrains Mono, monospace; letter-spacing: .14em; text-align: center; }
 .code.review[coi-scope="LoginScreen"]{ font-size: 15px; letter-spacing: .02em; }
 .code[coi-scope="LoginScreen"]:focus{ outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
 .go[coi-scope="LoginScreen"]{ width: 100%; margin-top: 10px; padding: 11px 16px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; }
 .go[coi-scope="LoginScreen"]:disabled{ opacity: .5; }
 .privacy[coi-scope="LoginScreen"]{ margin-top: 18px; color: var(--text-3); font-size: 13px; max-width: 360px; text-align: center; }


/* LegalPage */
 .legal[coi-scope="LegalPage"]{ --bg: #f6f5f2; --panel: #ffffff; --text: #24221e; --text-2: #5f5b53; --text-3: #9b968b; --line: #e4e0d7; --accent: #825fff; --peach: #ffb0aa; min-height: 100vh; box-sizing: border-box; background: var(--bg); color: var(--text); color-scheme: light; font: 400 16px/1.65 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-y: auto; height: 100vh; height: 100dvh; }
 a[coi-scope="LegalPage"]{ color: inherit; }
 .top[coi-scope="LegalPage"]{ max-width: 760px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; }
 .home[coi-scope="LegalPage"]{ display: flex; align-items: center; gap: 9px; font: 600 19px/1 Fraunces, Georgia, serif; letter-spacing: -.02em; text-decoration: none; }
 nav[coi-scope="LegalPage"]{ display: flex; gap: 18px; font-size: 14px; color: var(--text-2); }
 nav a[coi-scope="LegalPage"]{ text-decoration: none; }
 nav a.on[coi-scope="LegalPage"],nav a[coi-scope="LegalPage"]:hover{ color: var(--text); }
 article[coi-scope="LegalPage"]{ max-width: 760px; margin: 0 auto; padding: 24px 24px 80px; box-sizing: border-box; }
 h1[coi-scope="LegalPage"]{ font: 500 40px/1.1 Fraunces, Georgia, serif; letter-spacing: -.025em; margin: 18px 0 6px; }
 .date[coi-scope="LegalPage"]{ color: var(--text-3); font-size: 14px; margin: 0 0 36px; }
 h2[coi-scope="LegalPage"]{ font: 600 18px/1.3 Inter, system-ui, sans-serif; margin: 36px 0 10px; }
 p[coi-scope="LegalPage"],li[coi-scope="LegalPage"]{ color: var(--text-2); }
 p[coi-scope="LegalPage"]{ margin: 0 0 14px; }
 ul[coi-scope="LegalPage"]{ margin: 0 0 14px; padding-left: 22px; }
 li[coi-scope="LegalPage"]{ margin-bottom: 6px; }
 b[coi-scope="LegalPage"]{ color: var(--text); font-weight: 600; }
 address[coi-scope="LegalPage"]{ font-style: normal; color: var(--text); margin: 0 0 14px; }
 @media (max-width: 600px) {
h1[coi-scope="LegalPage"]{ font-size: 32px; }
nav[coi-scope="LegalPage"]{ gap: 12px; font-size: 13px; }
}


/* SharedView */
 .app.shared-view[coi-scope="SharedView"]{ display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--bg); color: var(--text); }
 header[coi-scope="SharedView"]{ display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
 .home[coi-scope="SharedView"]{ display: flex; align-items: center; gap: 8px; font: 600 17px/1 Fraunces, Georgia, serif; color: var(--text); text-decoration: none; }
 .what[coi-scope="SharedView"]{ flex: 1; min-width: 0; }
 .what b[coi-scope="SharedView"]{ display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .what small[coi-scope="SharedView"]{ color: var(--text-3); font-size: 12.5px; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }
  .what.wait b[coi-scope="SharedView"],.what.wait small[coi-scope="SharedView"]{ width: fit-content; color: transparent; border-radius: 6px; box-shadow: inset 0 2px var(--panel), inset 0 -2px var(--panel); background-color: var(--hover); animation: pn-pulse calc(var(--pn-dlg) * 6) ease-in-out infinite; }
 .live[coi-scope="SharedView"]{ width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: inline-block; flex: none; }
 .copy[coi-scope="SharedView"]{ text-decoration: none; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
 .copy[coi-scope="SharedView"]:hover{ filter: brightness(1.08); }
  .report[coi-scope="SharedView"]{ display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 9px; font-size: 13px; color: var(--text-3); white-space: nowrap; }
 .report[coi-scope="SharedView"]:hover{ background: var(--hover); color: var(--text-2); }
  .follow[coi-scope="SharedView"]{ display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; transition: background var(--pn-in), color var(--pn-in), border-color var(--pn-in); }
 .follow[coi-scope="SharedView"]:hover{ background: var(--hover); color: var(--text); }
 .follow .live[coi-scope="SharedView"]{ background: var(--text-3); }
 .follow.on[coi-scope="SharedView"]{ border-color: var(--green); color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
 .follow.on .live[coi-scope="SharedView"]{ background: var(--green); }
 .follow.on[coi-scope="SharedView"]:hover{ background: color-mix(in srgb, var(--green) 20%, transparent); }
 .notes-btn[coi-scope="SharedView"]{ display: none; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 13px; }
  .sep[coi-scope="SharedView"]{ width: 1px; height: 24px; background: var(--line); flex: none; }
  .app.shared-view.inapp[coi-scope="SharedView"]{ height: 100%; min-height: 0; flex: 1; }
 .signin[coi-scope="SharedView"]{ padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
 .signin[coi-scope="SharedView"]:hover{ background: var(--hover); }
 .main[coi-scope="SharedView"]{ flex: 1; min-height: 0; display: flex; }
 .list[coi-scope="SharedView"]{ width: 248px; flex: none; border-right: 1px solid var(--line); background: var(--sidebar); overflow: auto; padding: 14px 10px; box-sizing: border-box; }
 .list h3[coi-scope="SharedView"]{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 4px 8px 10px; }
 .item[coi-scope="SharedView"]{ display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 9px; border-radius: 8px; font-size: 14px; color: var(--text-2); }
 .item[coi-scope="SharedView"]:hover{ background: var(--hover); color: var(--text); }
 .item.on[coi-scope="SharedView"]{ background: var(--active); color: var(--text); font-weight: 500; }
 .item span[coi-scope="SharedView"]{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .body[coi-scope="SharedView"]{ flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
 .empty[coi-scope="SharedView"]{ flex: 1; display: grid; place-items: center; text-align: center; padding: 24px; }
 .empty h2[coi-scope="SharedView"]{ font: 500 26px/1.2 Fraunces, Georgia, serif; margin: 0 0 8px; }
 .empty p[coi-scope="SharedView"]{ color: var(--text-2); margin: 0 0 18px; }
 .empty a[coi-scope="SharedView"]{ color: var(--accent); font-weight: 600; text-decoration: none; }
 .empty button[coi-scope="SharedView"]{ padding: 10px 18px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14.5px; }
 .hide[coi-scope="SharedView"]{ display: none; }
 .msg[coi-scope="SharedView"]{ position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: flex; gap: 10px; align-items: center; padding: 9px 10px 9px 16px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 13px; box-shadow: var(--shadow); }
 .msg button[coi-scope="SharedView"]{ opacity: .7; display: grid; }
 .msg a[coi-scope="SharedView"]{ color: var(--bg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
  .back[coi-scope="SharedView"]{ position: fixed; left: 50%; top: 70px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); animation: pn-drop var(--pn-in) ease-out both; transform-origin: top left; }
 .back .live[coi-scope="SharedView"]{ background: #7ee2a8; }
 @media (max-width: 800px) {
.list[coi-scope="SharedView"]{ position: fixed; top: 57px; bottom: 0; left: 0; z-index: 60; box-shadow: var(--shadow); }
.list.closed[coi-scope="SharedView"]{ display: none; }
.notes-btn[coi-scope="SharedView"]{ display: flex; }
}
 @media (max-width: 640px) {
header[coi-scope="SharedView"]{ gap: 8px; padding: 8px 10px; }
.home span[coi-scope="SharedView"]{ display: none; }
.copy span[coi-scope="SharedView"],.follow span[coi-scope="SharedView"],.report span[coi-scope="SharedView"]{ display: none; }
}


/* Icon */
 .icon[coi-scope="Icon"]{ display: inline-grid; place-items: center; line-height: 0; }


/* Following */
  .pills[coi-scope="Following"]{ position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 30; display: flex; gap: 8px; pointer-events: none; }
 .pills > *[coi-scope="Following"]{ pointer-events: auto; }
 .pill[coi-scope="Following"]{ display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); box-shadow: var(--shadow); animation: pn-drop var(--pn-in) ease-out both; transition: background var(--pn-in), color var(--pn-in), border-color var(--pn-in); }
 .pill[coi-scope="Following"]:hover{ color: var(--text); }
 .live[coi-scope="Following"]{ width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); display: inline-block; flex: none; }
 .pill.on[coi-scope="Following"]{ border-color: var(--green); color: var(--green); }
 .pill.on .live[coi-scope="Following"]{ background: var(--green); }
 .pill.back[coi-scope="Following"]{ background: var(--text); color: var(--bg); border-color: var(--text); }
 .pill.back .live[coi-scope="Following"]{ background: #7ee2a8; }
 .pill.fresh[coi-scope="Following"]{ color: var(--accent); }
 .pill.fresh button[coi-scope="Following"]{ color: inherit; font: inherit; }
 .pill.paused[coi-scope="Following"]{ color: var(--amber); }
 .pill.fresh .x[coi-scope="Following"]{ display: grid; opacity: .6; margin-right: -4px; }


/* WorkspaceView */
 .fv[coi-scope="WorkspaceView"]{ position: relative; flex: 1; min-height: 0; overflow: auto; padding: 48px 64px 80px; }
 .inner[coi-scope="WorkspaceView"]{ max-width: 1040px; }
 .top[coi-scope="WorkspaceView"]{ display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
 .menu-btn[coi-scope="WorkspaceView"],.side-btn[coi-scope="WorkspaceView"]{ width: 32px; height: 32px; border-radius: 8px; display: none; place-items: center; color: var(--text-2); }
 .menu-btn[coi-scope="WorkspaceView"]:hover,.side-btn[coi-scope="WorkspaceView"]:hover{ background: var(--hover); color: var(--text); }
 .side-btn.show[coi-scope="WorkspaceView"]{ display: grid; }
 .head[coi-scope="WorkspaceView"]{ display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
 .mark[coi-scope="WorkspaceView"]{ width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--panel)); flex: none; }
 .name[coi-scope="WorkspaceView"]{ font: 500 40px/1.1 Fraunces, Georgia, serif; letter-spacing: -.02em; margin: 0; flex: 1; min-width: 0; }
 .name input[coi-scope="WorkspaceView"]{ width: 100%; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 2px solid var(--accent); outline: none; padding: 0; }
 .name button[coi-scope="WorkspaceView"]{ font: inherit; text-align: left; border-radius: 6px; padding: 0 6px; margin-left: -6px; }
 .name button[coi-scope="WorkspaceView"]:hover{ background: var(--hover); }
 .sub[coi-scope="WorkspaceView"]{ color: var(--text-3); font-size: 13px; margin: 0 0 22px 68px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; }
 .swatches[coi-scope="WorkspaceView"]{ display: flex; gap: 6px; }
 .sw[coi-scope="WorkspaceView"]{ width: 16px; height: 16px; border-radius: 50%; background: var(--c); border: 2px solid transparent; }
 .sw.on[coi-scope="WorkspaceView"]{ border-color: var(--text); }
 .gear[coi-scope="WorkspaceView"]{ width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); }
 .gear[coi-scope="WorkspaceView"]:hover,.gear.on[coi-scope="WorkspaceView"]{ background: var(--hover); color: var(--text); }
 .veil[coi-scope="WorkspaceView"]{ position: fixed; inset: 0; z-index: 9; }
 .wset[coi-scope="WorkspaceView"]{ position: absolute; left: 0; top: 34px; z-index: 10; width: 300px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); color: var(--text-2); }
 .wset .lbl[coi-scope="WorkspaceView"]{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; }
 .wset .foot[coi-scope="WorkspaceView"]{ display: flex; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
 .link[coi-scope="WorkspaceView"]{ color: var(--text-3); padding: 2px 6px; border-radius: 5px; }
 .link[coi-scope="WorkspaceView"]:hover{ color: var(--text); background: var(--hover); }
 .link.danger[coi-scope="WorkspaceView"]:hover{ color: var(--red); }
 .confirm[coi-scope="WorkspaceView"]{ display: flex; align-items: center; gap: 8px; }
 .confirm b[coi-scope="WorkspaceView"]{ color: var(--text); font-weight: 500; }
 .confirm .yes[coi-scope="WorkspaceView"]{ padding: 3px 10px; border-radius: 6px; background: var(--red); color: #fff; font-weight: 600; font-size: 12px; }
 .confirm .no[coi-scope="WorkspaceView"]{ padding: 3px 10px; border-radius: 6px; background: var(--hover); font-size: 12px; }
 @media (max-width: 1000px) {
.fv[coi-scope="WorkspaceView"]{ padding: 16px 20px 60px; }
.menu-btn[coi-scope="WorkspaceView"]{ display: grid; }
.side-btn[coi-scope="WorkspaceView"],.side-btn.show[coi-scope="WorkspaceView"]{ display: none; }
.name[coi-scope="WorkspaceView"]{ font-size: 30px; }
.sub[coi-scope="WorkspaceView"]{ margin-left: 0; }
}
  .wset[coi-scope="WorkspaceView"]{ animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top right; }


/* NotebookView */
  .mk[coi-scope="NotebookView"]{ display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
 .mk.from[coi-scope="NotebookView"]{ color: var(--text-2); }
 .mk.shared[coi-scope="NotebookView"]{ color: var(--accent); }
 .mk.paused[coi-scope="NotebookView"]{ color: var(--amber); }
 .mk.live[coi-scope="NotebookView"]{ color: var(--green); }
 .mk.live i[coi-scope="NotebookView"]{ width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
 .nbv[coi-scope="NotebookView"]{ position: relative; flex: 1; min-height: 0; overflow: auto; padding: 48px 64px 80px; }
 .inner[coi-scope="NotebookView"]{ max-width: 1040px; }
 .top[coi-scope="NotebookView"]{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
 .menu-btn[coi-scope="NotebookView"],.side-btn[coi-scope="NotebookView"]{ width: 32px; height: 32px; border-radius: 8px; display: none; place-items: center; color: var(--text-2); }
 .menu-btn[coi-scope="NotebookView"]:hover,.side-btn[coi-scope="NotebookView"]:hover{ background: var(--hover); color: var(--text); }
 .side-btn.show[coi-scope="NotebookView"]{ display: grid; }
  .hero[coi-scope="NotebookView"]{ display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 220px; }
 .lead[coi-scope="NotebookView"]{ min-width: 0; flex: 1; }
 .cover[coi-scope="NotebookView"]{ flex: none; display: grid; width: 150px; margin-right: 24px; transform: rotate(3deg); pointer-events: none; }
 .name[coi-scope="NotebookView"]{ font: 500 56px/1.05 Fraunces, Georgia, serif; letter-spacing: -.025em; margin: 0; min-width: 0; overflow-wrap: anywhere; }
 .name input[coi-scope="NotebookView"]{ width: 100%; font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 2px solid var(--accent); outline: none; padding: 0; }
 .name button[coi-scope="NotebookView"]{ font: inherit; text-align: left; border-radius: 6px; padding: 0 6px; margin-left: -6px; }
 .name button[coi-scope="NotebookView"]:hover{ background: var(--hover); }
 .sub[coi-scope="NotebookView"]{ color: var(--text-2); font-size: 15px; margin-top: 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; position: relative; }
  .gear[coi-scope="NotebookView"]{ width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); }
 .gear[coi-scope="NotebookView"]:hover,.gear.on[coi-scope="NotebookView"]{ background: var(--hover); color: var(--text); }
 .nbset[coi-scope="NotebookView"]{ position: absolute; left: 0; top: 34px; z-index: 10; width: min(520px, calc(100vw - 48px)); padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); color: var(--text-2); }
 .nbset .lbl[coi-scope="NotebookView"]{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; }
 .nbset .lbl + .lbl[coi-scope="NotebookView"],.nbset .sec[coi-scope="NotebookView"]{ margin-top: 14px; }
 .nbset .foot[coi-scope="NotebookView"]{ display: flex; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
 .swatches[coi-scope="NotebookView"]{ display: flex; gap: 6px; }
 .sw[coi-scope="NotebookView"]{ width: 16px; height: 16px; border-radius: 50%; background: var(--c); border: 2px solid transparent; }
 .sw.on[coi-scope="NotebookView"]{ border-color: var(--text); }
 .link[coi-scope="NotebookView"]{ color: var(--text-3); padding: 2px 6px; border-radius: 5px; display: inline-flex; align-items: center; gap: 5px; }
 .link[coi-scope="NotebookView"]:hover{ color: var(--text); background: var(--hover); }
 .link.danger[coi-scope="NotebookView"]:hover{ color: var(--red); }
 .link.folder[coi-scope="NotebookView"]{ color: var(--text-2); font-weight: 500; }
 .link.folder .sp[coi-scope="NotebookView"]{ color: var(--c); display: grid; place-items: center; }
 .link.share[coi-scope="NotebookView"]{ color: var(--text-2); font-weight: 500; margin-left: 4px; }
  .defaults[coi-scope="NotebookView"]{ display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-3); }
 .defaults div[coi-scope="NotebookView"]{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
 .defaults span[coi-scope="NotebookView"]{ width: 60px; }
 .pill[coi-scope="NotebookView"]{ padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); color: var(--text-2); font-size: 12px; }
 .pill[coi-scope="NotebookView"]:hover{ background: var(--hover); color: var(--text); }
 .pill.on[coi-scope="NotebookView"]{ border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
 .veil[coi-scope="NotebookView"]{ position: fixed; inset: 0; z-index: 9; }
 .fmenu[coi-scope="NotebookView"]{ position: absolute; left: 0; top: 28px; z-index: 10; min-width: 200px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
 .fmenu .lbl[coi-scope="NotebookView"]{ font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 6px 8px 2px; }
 .fmenu button[coi-scope="NotebookView"],.pmenu button[coi-scope="NotebookView"]{ display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 6px; text-align: left; font-size: 13px; color: var(--text); }
 .fmenu button[coi-scope="NotebookView"]:hover,.pmenu button[coi-scope="NotebookView"]:hover{ background: var(--hover); }
 .fmenu .on[coi-scope="NotebookView"]{ color: var(--accent); }
 .go[coi-scope="NotebookView"]{ margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent); }
 .go[coi-scope="NotebookView"]:hover{ filter: brightness(1.08); }
 .label[coi-scope="NotebookView"]{ display: flex; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 24px 0 16px; }
 .label i[coi-scope="NotebookView"]{ flex: 1; height: 1px; background: var(--line); }
  .notes[coi-scope="NotebookView"]{ position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 148px)); gap: 28px 24px; padding-top: 4px; }
 .notes.dragging[coi-scope="NotebookView"],.notes.dragging *[coi-scope="NotebookView"]{ cursor: grabbing; }
 .note .open[coi-scope="NotebookView"]{ user-select: none; -webkit-user-select: none; }
  .note.held[coi-scope="NotebookView"]{ opacity: .3; }
 @media (hover: hover) {
.notes.dragging .note:hover .th[coi-scope="NotebookView"],.notes.dragging .note.more:hover .th[coi-scope="NotebookView"]{ transform: none; box-shadow: 0 0 0 1px var(--line); }
}
 @media (hover: hover) {
.notes.dragging .note.more:hover .th[coi-scope="NotebookView"]{ box-shadow: 0 0 0 1px var(--line), 3px 3px 0 -1px var(--sheet), 3px 3px 0 0 var(--line); }
}
 .notes.dragging .dots[coi-scope="NotebookView"]{ opacity: 0; }
 .note.ghost[coi-scope="NotebookView"]{ position: absolute; z-index: 5; pointer-events: none; opacity: .95; transform: rotate(1.5deg) scale(1.03); transform-origin: center; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .28)); }
 .note.ghost .th[coi-scope="NotebookView"]{ box-shadow: 0 0 0 1px var(--line); }
 .note.before[coi-scope="NotebookView"]::after,.note.after[coi-scope="NotebookView"]::after{ content: ""; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--accent); }
 .note.before[coi-scope="NotebookView"]::after{ left: -14px; }
 .note.after[coi-scope="NotebookView"]::after{ right: -14px; }
 .note[coi-scope="NotebookView"]{ position: relative; display: flex; flex-direction: column; gap: 8px; text-align: left; min-width: 0; }
 .note .open[coi-scope="NotebookView"]{ display: flex; flex-direction: column; gap: 8px; text-align: left; min-width: 0; }
 .note .th[coi-scope="NotebookView"]{ aspect-ratio: 1080 / 1527; width: 100%; border-radius: 4px; background: var(--sheet); object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--line), 0 8px 16px -12px rgba(0,0,0,.3); transition: transform .2s, box-shadow .2s; }
 .note .th.blank[coi-scope="NotebookView"]{ background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 10px 10px; }
 .note.more .th[coi-scope="NotebookView"]{ box-shadow: 0 0 0 1px var(--line), 3px 3px 0 -1px var(--sheet), 3px 3px 0 0 var(--line), 0 8px 16px -12px rgba(0,0,0,.3); }
 @media (hover: hover) {
.note:hover .th[coi-scope="NotebookView"]{ transform: translateY(-4px); box-shadow: 0 0 0 1px var(--line), 0 14px 22px -14px rgba(0,0,0,.35); }
}
 @media (hover: hover) {
.note.more:hover .th[coi-scope="NotebookView"]{ box-shadow: 0 0 0 1px var(--line), 3px 3px 0 -1px var(--sheet), 3px 3px 0 0 var(--line), 0 14px 22px -14px rgba(0,0,0,.35); }
}
 .app.dark img.th[coi-scope="NotebookView"]{ filter: invert(0.9) hue-rotate(180deg); }
  .add[coi-scope="NotebookView"]{ display: flex; flex-direction: column; gap: 8px; text-align: left; color: var(--text-3); }
 .add .sheet[coi-scope="NotebookView"]{ aspect-ratio: 1080 / 1527; border-radius: 4px; border: 1.5px dashed var(--line); display: grid; place-items: center; transition: border-color .2s, background .2s; }
 .add .plus[coi-scope="NotebookView"]{ width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--hover); transition: background .2s, transform .2s; }
 .add[coi-scope="NotebookView"]:hover{ color: var(--accent); }
 .add:hover .sheet[coi-scope="NotebookView"]{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
 @media (hover: hover) {
.add:hover .plus[coi-scope="NotebookView"]{ background: var(--accent-soft); transform: scale(1.06); }
}
 .add b[coi-scope="NotebookView"]{ font-size: 12px; font-weight: 500; padding-left: 2px; }
 .note .retitle[coi-scope="NotebookView"]{ width: 100%; padding: 4px 6px; margin: -3px 0; border-radius: 6px; border: 1px solid var(--accent); background: var(--bg); color: var(--text); font: 500 14px var(--font); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
 .note b[coi-scope="NotebookView"]{ font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; margin-top: 2px; }
 .note .t[coi-scope="NotebookView"]{ color: var(--text-3); font-size: 12px; padding: 0 2px; margin-top: -5px; }
 .note .pin[coi-scope="NotebookView"]{ position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--accent); background: var(--panel); border: 1px solid var(--line); pointer-events: none; }
 .note .dots[coi-scope="NotebookView"]{ position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--text-2); background: var(--panel); border: 1px solid var(--line); opacity: 0; }
 .note .dots.on[coi-scope="NotebookView"]{ opacity: 1; }
 .note .dots[coi-scope="NotebookView"]:hover,.note .dots.on[coi-scope="NotebookView"]{ background: var(--hover); color: var(--text); }
  @media (hover: hover) {
.note:hover .dots[coi-scope="NotebookView"]{ opacity: 1; }
}
 @media (hover: none) {
.note .dots[coi-scope="NotebookView"]{ opacity: .8; }
}
 .pmenu[coi-scope="NotebookView"]{ position: absolute; right: 8px; top: 40px; z-index: 10; min-width: 200px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
 .pmenu .lbl[coi-scope="NotebookView"]{ font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 6px 8px 2px; }
 .pmenu button.danger[coi-scope="NotebookView"]{ color: var(--red); }
 .dot[coi-scope="NotebookView"]{ width: 8px; height: 8px; border-radius: 3px; background: var(--c); flex: none; }
 @media (max-width: 1000px) {
.nbv[coi-scope="NotebookView"]{ padding: 16px 20px 60px; }
.menu-btn[coi-scope="NotebookView"]{ display: grid; }
.side-btn[coi-scope="NotebookView"],.side-btn.show[coi-scope="NotebookView"]{ display: none; }
.hero[coi-scope="NotebookView"]{ min-height: 0; }
.name[coi-scope="NotebookView"]{ font-size: 40px; }
.cover[coi-scope="NotebookView"]{ width: 96px; margin-right: 4px; }
.notes[coi-scope="NotebookView"]{ grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}
  .nbset[coi-scope="NotebookView"]{ animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top right; }
 .fmenu[coi-scope="NotebookView"]{ animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top right; }
 .pmenu[coi-scope="NotebookView"]{ animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top right; }


/* TrashView */
 .trash[coi-scope="TrashView"]{ position: relative; flex: 1; min-height: 0; overflow: auto; padding: 48px 64px 80px; }
 .inner[coi-scope="TrashView"]{ max-width: 760px; }
 .top[coi-scope="TrashView"]{ display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
 .menu-btn[coi-scope="TrashView"],.side-btn[coi-scope="TrashView"]{ width: 32px; height: 32px; border-radius: 8px; display: none; place-items: center; color: var(--text-2); }
 .menu-btn[coi-scope="TrashView"]:hover,.side-btn[coi-scope="TrashView"]:hover{ background: var(--hover); color: var(--text); }
 .side-btn.show[coi-scope="TrashView"]{ display: grid; }
 h1[coi-scope="TrashView"]{ font: 500 40px/1.1 Fraunces, Georgia, serif; letter-spacing: -.02em; margin: 0 0 8px; }
 .sub[coi-scope="TrashView"]{ color: var(--text-3); font-size: 13px; margin: 0 0 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 28px; }
 .link[coi-scope="TrashView"]{ color: var(--text-3); padding: 3px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; }
 .link[coi-scope="TrashView"]:hover{ color: var(--text); background: var(--hover); }
 .link.danger[coi-scope="TrashView"]:hover{ color: var(--red); }
 .confirm[coi-scope="TrashView"]{ display: flex; align-items: center; gap: 8px; }
 .confirm b[coi-scope="TrashView"]{ color: var(--text); font-weight: 500; }
 .yes[coi-scope="TrashView"]{ padding: 3px 10px; border-radius: 6px; background: var(--red); color: #fff; font-weight: 600; font-size: 12px; }
 .no[coi-scope="TrashView"]{ padding: 3px 10px; border-radius: 6px; background: var(--hover); font-size: 12px; }
 .row[coi-scope="TrashView"]{ display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; }
 .row[coi-scope="TrashView"]:hover{ background: var(--hover); }
 .row .th[coi-scope="TrashView"]{ width: 44px; height: 62px; border-radius: 5px; border: 1px solid var(--line); background: var(--sheet); object-fit: cover; flex: none; }
 .app.dark img.th[coi-scope="TrashView"]{ filter: invert(0.9) hue-rotate(180deg); }
  .row .th.nb[coi-scope="TrashView"]{ display: grid; place-items: center; background: color-mix(in srgb, var(--c) 18%, var(--sheet)); border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
 .row .th.nb .dot[coi-scope="TrashView"]{ width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
 .row .what[coi-scope="TrashView"]{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
 .row b[coi-scope="TrashView"]{ font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .row small[coi-scope="TrashView"]{ color: var(--text-3); font-size: 12px; }
 .row .acts[coi-scope="TrashView"]{ display: flex; gap: 4px; opacity: 0; }
 .row.asking .acts[coi-scope="TrashView"]{ opacity: 1; }
  @media (hover: hover) {
.row:hover .acts[coi-scope="TrashView"]{ opacity: 1; }
}
 @media (hover: none) {
.row .acts[coi-scope="TrashView"]{ opacity: 1; }
}
 .empty[coi-scope="TrashView"]{ color: var(--text-3); font-size: 13px; padding: 6px 12px; }
 @media (max-width: 1000px) {
.trash[coi-scope="TrashView"]{ padding: 16px 20px 60px; }
.menu-btn[coi-scope="TrashView"]{ display: grid; }
.side-btn[coi-scope="TrashView"],.side-btn.show[coi-scope="TrashView"]{ display: none; }
h1[coi-scope="TrashView"]{ font-size: 30px; }
.row .acts[coi-scope="TrashView"]{ opacity: 1; }
}


/* NewNotebookDialog */
 .wrap[coi-scope="NewNotebookDialog"]{ position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
  .veil[coi-scope="NewNotebookDialog"]{ position: absolute; inset: 0; background: var(--veil); animation: pn-fade var(--pn-dlg) ease-out both; }
 .dlg[coi-scope="NewNotebookDialog"]{ position: relative; width: 700px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; display: grid; grid-template-columns: 220px 1fr; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.4); animation: pn-dialog var(--pn-dlg) cubic-bezier(.16, 1, .3, 1) both; }
 .stage[coi-scope="NewNotebookDialog"]{ display: grid; place-items: center; padding: 32px 28px; background: color-mix(in srgb, var(--c) 8%, var(--bg)); border-radius: 16px 0 0 16px; transition: background .2s; }
 .book[coi-scope="NewNotebookDialog"]{ position: relative; width: 150px; aspect-ratio: 3 / 4; border-radius: 4px 12px 12px 4px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 20%, var(--panel)), color-mix(in srgb, var(--c) 32%, var(--panel))); box-shadow: 3px 3px 0 -1px var(--sheet), 3px 3px 0 0 var(--line), 6px 6px 0 -2px var(--sheet), 6px 6px 0 -1px var(--line), 0 14px 22px -14px rgba(0,0,0,.35); transition: background .2s; }
 .book[coi-scope="NewNotebookDialog"]::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; border-radius: 4px 0 0 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 85%, #000), var(--c) 70%, color-mix(in srgb, var(--c) 70%, #fff)); }
 .book[coi-scope="NewNotebookDialog"]::after{ content: ""; position: absolute; right: 14px; top: 0; bottom: 0; width: 4px; background: color-mix(in srgb, var(--c) 45%, transparent); }
 .tag[coi-scope="NewNotebookDialog"]{ position: absolute; left: 20px; right: 24px; top: 18%; padding: 8px 9px 10px; border-radius: 4px; background: #fbf8f1; color: #24221e; box-shadow: 0 1px 2px rgba(0,0,0,.1); font: 500 15px/1.2 Fraunces, Georgia, serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
  .name[coi-scope="NewNotebookDialog"]{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 .tag.empty[coi-scope="NewNotebookDialog"]{ color: #a8a397; }
 .tag[coi-scope="NewNotebookDialog"]::after{ content: ""; display: block; height: 1px; margin-top: 8px; background: color-mix(in srgb, var(--c) 45%, transparent); }
 .fish[coi-scope="NewNotebookDialog"]{ position: absolute; left: 20px; right: 20px; bottom: 12%; display: flex; justify-content: center; transform: rotate(-24deg); }
 .form[coi-scope="NewNotebookDialog"]{ padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
 h2[coi-scope="NewNotebookDialog"]{ margin: 0; font: 500 22px/1.2 Fraunces, Georgia, serif; letter-spacing: -.01em; color: var(--text); }
 .lbl[coi-scope="NewNotebookDialog"]{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; }
 input[coi-scope="NewNotebookDialog"]{ width: 100%; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 500 15px var(--font); outline: none; }
 input[coi-scope="NewNotebookDialog"]:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 .swatches[coi-scope="NewNotebookDialog"]{ display: flex; gap: 8px; flex-wrap: wrap; padding: 3px; }
 .sw[coi-scope="NewNotebookDialog"]{ width: 22px; height: 22px; border-radius: 50%; background: var(--s); transition: box-shadow .15s, transform .15s; }
 @media (hover: hover) {
.sw[coi-scope="NewNotebookDialog"]:hover{ transform: scale(1.1); }
}
 .sw.on[coi-scope="NewNotebookDialog"]{ box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--s); }
 .kois[coi-scope="NewNotebookDialog"]{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
 .k[coi-scope="NewNotebookDialog"]{ display: grid; place-items: center; height: 44px; border-radius: 9px; border: 1px solid var(--line); background: color-mix(in srgb, var(--c) 14%, var(--bg)); }
 .k[coi-scope="NewNotebookDialog"]:hover{ background: var(--hover); }
 .k.on[coi-scope="NewNotebookDialog"]{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
 .opts[coi-scope="NewNotebookDialog"]{ display: flex; gap: 6px; flex-wrap: wrap; }
 .opt[coi-scope="NewNotebookDialog"]{ display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px; border-radius: 8px; border: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
 .opt.plain[coi-scope="NewNotebookDialog"]{ padding: 6px 10px; }
 .opt[coi-scope="NewNotebookDialog"]:hover{ background: var(--hover); }
 .opt.on[coi-scope="NewNotebookDialog"]{ border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent); }
 .opt small[coi-scope="NewNotebookDialog"]{ color: var(--text-3); font-size: 11px; }
 .pp[coi-scope="NewNotebookDialog"]{ width: 16px; height: 20px; border-radius: 3px; background-color: var(--sheet); border: 1px solid var(--line); }
 .pp.dots[coi-scope="NewNotebookDialog"]{ background-image: radial-gradient(var(--text-3) 0.7px, transparent 0.7px); background-size: 5px 5px; }
 .pp.lines[coi-scope="NewNotebookDialog"]{ background-image: linear-gradient(var(--text-3) 1px, transparent 1px); background-size: 100% 5px; background-position: 0 4px; }
 .pp.grid[coi-scope="NewNotebookDialog"]{ background-image: linear-gradient(var(--text-3) 1px, transparent 1px), linear-gradient(90deg, var(--text-3) 1px, transparent 1px); background-size: 5px 5px; }
 .foot[coi-scope="NewNotebookDialog"]{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
 .no[coi-scope="NewNotebookDialog"]{ padding: 8px 14px; border-radius: 9px; color: var(--text-2); font-weight: 500; }
 .no[coi-scope="NewNotebookDialog"]:hover{ background: var(--hover); color: var(--text); }
 .ok[coi-scope="NewNotebookDialog"]{ padding: 8px 16px; border-radius: 9px; background: var(--accent); color: #fff; font-weight: 600; }
 .ok.off[coi-scope="NewNotebookDialog"]{ opacity: .5; }
 @media (max-width: 640px) {
.dlg[coi-scope="NewNotebookDialog"]{ grid-template-columns: 1fr; }
.stage[coi-scope="NewNotebookDialog"]{ border-radius: 16px 16px 0 0; padding: 20px; }
.book[coi-scope="NewNotebookDialog"]{ width: 110px; }
}


/* Settings */
  .backdrop[coi-scope="Settings"]{ position: fixed; inset: 0; z-index: 80; background: var(--veil); animation: pn-fade var(--pn-dlg) ease-out both; }
  .dlg[coi-scope="Settings"]{ position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(780px, calc(100vw - 32px)); height: min(640px, calc(100vh - 32px)); display: flex; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); animation: pn-dialog var(--pn-dlg) cubic-bezier(.16, 1, .3, 1) both; }
 .out .backdrop[coi-scope="Settings"]{ animation: pn-fade-out var(--pn-out) ease-in both; }
 .out .dlg[coi-scope="Settings"]{ animation: pn-dialog-out var(--pn-out) ease-in both; }
  .side[coi-scope="Settings"]{ width: 200px; flex: none; box-sizing: border-box; padding: 24px 12px; background: var(--sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
  .community[coi-scope="Settings"]{ margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; transition: color var(--pn-in), border-color var(--pn-in); }
 .community[coi-scope="Settings"]:hover{ color: var(--text); border-color: color-mix(in srgb, var(--text) 22%, var(--line)); }
 .side h2[coi-scope="Settings"]{ font: 500 24px Fraunces, Georgia, serif; margin: 0 10px 18px; }
 .tabs[coi-scope="Settings"]{ display: flex; flex-direction: column; gap: 2px; }
 .tabs button[coi-scope="Settings"]{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text-2); text-align: left; white-space: nowrap; }
 .tabs button[coi-scope="Settings"]:hover{ background: var(--hover); color: var(--text); }
 .tabs button.on[coi-scope="Settings"]{ background: var(--active); color: var(--text); font-weight: 600; }
 .tabs button.news[coi-scope="Settings"]::after{ content: ""; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--accent); }
 .ti[coi-scope="Settings"]{ display: grid; }
 .main[coi-scope="Settings"]{ flex: 1; min-width: 0; overflow: auto; position: relative; padding: 26px 32px 30px; }
  .x[coi-scope="Settings"]{ position: absolute; z-index: 2; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
 .x[coi-scope="Settings"]:hover{ background: var(--hover); color: var(--text); }
 .pane[coi-scope="Settings"]{ animation: pn-fade var(--pn-in) ease-out both; }
 .pane h3[coi-scope="Settings"]{ font: 500 22px Fraunces, Georgia, serif; margin: 2px 0 18px; }
 .sub[coi-scope="Settings"]{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 24px 0 10px; }
  .group[coi-scope="Settings"]{ border: 1px solid var(--line); border-radius: 12px; }
 .group.apart[coi-scope="Settings"]{ margin-top: 20px; }
 .row[coi-scope="Settings"]{ display: flex; align-items: center; gap: 10px 14px; padding: 13px 16px; }
 .row.wide[coi-scope="Settings"]{ flex-wrap: wrap; }
 .row + .row[coi-scope="Settings"]{ border-top: 1px solid var(--line); }
 .what[coi-scope="Settings"]{ flex: 1 1 180px; min-width: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
 .what b[coi-scope="Settings"]{ display: block; color: var(--text); font-size: 13.5px; font-weight: 600; }
 .mark[coi-scope="Settings"]{ width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--hover); color: var(--text-2); }
 .mark.on[coi-scope="Settings"]{ background: var(--green-soft); color: var(--green); }
 .btn[coi-scope="Settings"]{ display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; color: var(--text-2); white-space: nowrap; text-decoration: none; }
 .btn[coi-scope="Settings"]:hover{ background: var(--hover); color: var(--text); }
 .ok[coi-scope="Settings"]{ display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--green); white-space: nowrap; }
 .hint[coi-scope="Settings"]{ font-size: 12px; color: var(--text-3); margin-top: 10px; line-height: 1.5; }
 .warn[coi-scope="Settings"]{ color: var(--amber); }
  .me[coi-scope="Settings"]{ display: flex; align-items: center; gap: 14px; }
 .me .pic[coi-scope="Settings"]{ width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 20px; font-weight: 600; }
 .me .who[coi-scope="Settings"]{ flex: 1; min-width: 0; }
 .me .who b[coi-scope="Settings"]{ display: block; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .me .who small[coi-scope="Settings"]{ color: var(--text-3); font-size: 12.5px; }
 .danger .btn[coi-scope="Settings"]{ color: #d13c41; }
 .app.dark .danger .btn[coi-scope="Settings"]{ color: #ff7b7f; }
  .card[coi-scope="Settings"]{ display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 12px; background: var(--accent-soft); }
 .card .badge[coi-scope="Settings"]{ width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--panel); color: var(--accent); }
 .card .what[coi-scope="Settings"]{ color: var(--text-2); }
 .card .what b[coi-scope="Settings"]{ font-size: 15px; }
  .card.pitch[coi-scope="Settings"]{ flex-direction: column; align-items: stretch; gap: 12px; }
 .pitch .top[coi-scope="Settings"]{ display: flex; align-items: center; gap: 14px; }
 .perks[coi-scope="Settings"]{ margin: 0 0 2px 52px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
 .perks li[coi-scope="Settings"]{ display: flex; gap: 8px; align-items: center; }
 .perks .tick[coi-scope="Settings"]{ display: grid; flex: none; color: var(--accent); }
  .backs[coi-scope="Settings"]{ margin-top: 2px; padding: 12px 0 0 52px; border-top: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); font-size: 12px; line-height: 1.5; color: var(--text-3); }
 .go[coi-scope="Settings"]{ padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--accent); color: #fff; white-space: nowrap; text-decoration: none; }
 .go[coi-scope="Settings"]:hover{ filter: brightness(1.08); }
  .go.buy[coi-scope="Settings"]{ display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 650; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px color-mix(in srgb, var(--accent) 38%, transparent), 0 1px 2px rgba(0,0,0,.15); transition: transform var(--pn-in), box-shadow var(--pn-in), filter var(--pn-in); }
 @media (hover: hover) {
.go.buy[coi-scope="Settings"]:hover{ filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 22px color-mix(in srgb, var(--accent) 45%, transparent), 0 1px 2px rgba(0,0,0,.15); }
}
 .go.buy[coi-scope="Settings"]:active{ transform: translateY(0); }
 .go.quiet[coi-scope="Settings"]{ background: var(--panel); color: var(--text-2); border: 1px solid var(--line); font-weight: 500; }
 .go.quiet[coi-scope="Settings"]:hover{ color: var(--text); filter: none; }
  .meter + .meter[coi-scope="Settings"]{ margin-top: 16px; }
 .meter .row[coi-scope="Settings"]{ justify-content: space-between; gap: 12px; padding: 0; font-size: 13px; color: var(--text-2); }
 .meter .row small[coi-scope="Settings"]{ font-size: 12px; color: var(--text-3); }
 .meter .row b[coi-scope="Settings"]{ color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
 .bar[coi-scope="Settings"]{ margin-top: 8px; height: 8px; border-radius: 99px; background: var(--hover); overflow: hidden; display: flex; gap: 2px; }
 .bar span[coi-scope="Settings"]{ display: block; height: 100%; flex: none; background: var(--accent); transition: width calc(var(--pn-dlg) * 2) cubic-bezier(.2, .8, .2, 1); }
 .bar span[coi-scope="Settings"]:first-child{ border-radius: 99px 0 0 99px; }
 .bar .media[coi-scope="Settings"]{ background: color-mix(in srgb, var(--accent) 50%, var(--panel)); }
 .bar .trash[coi-scope="Settings"],.key.trash[coi-scope="Settings"]{ background: var(--text-3); opacity: .45; }
 .parts[coi-scope="Settings"]{ display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; font-size: 12px; color: var(--text-3); }
 .parts > span[coi-scope="Settings"]{ display: inline-flex; align-items: center; gap: 6px; }
 .parts b[coi-scope="Settings"]{ color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
 .key[coi-scope="Settings"]{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
 .more[coi-scope="Settings"]{ padding: 0; font-size: 12px; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
 .more[coi-scope="Settings"]:hover{ color: var(--text); }
  .big[coi-scope="Settings"]{ padding: 6px 8px; }
 .big button[coi-scope="Settings"]{ display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 7px 8px; box-sizing: border-box; border-radius: 8px; text-align: left; }
 .big button[coi-scope="Settings"]:hover{ background: var(--hover); }
 .big .t[coi-scope="Settings"]{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text); }
 .big small[coi-scope="Settings"]{ color: var(--text-3); font-size: 12px; white-space: nowrap; }
 .big .n[coi-scope="Settings"]{ color: var(--text-2); font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .sk[coi-scope="Settings"]{ background-color: var(--hover); animation: pn-pulse calc(var(--pn-dlg) * 6) ease-in-out infinite; }
 .num.sk[coi-scope="Settings"]{ display: inline-block; width: 44px; height: 10px; border-radius: 99px; vertical-align: middle; }
 .big .n.sk[coi-scope="Settings"]{ align-self: center; }
 .in[coi-scope="Settings"]{ animation: pn-fade var(--pn-dlg) ease-out both; }
   .seg[coi-scope="Settings"]{ display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--hover); flex: none; }
 .seg button[coi-scope="Settings"]{ display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--text-2); }
 .seg button[coi-scope="Settings"]:hover{ color: var(--text); }
 .seg button.on[coi-scope="Settings"]{ background: var(--panel); color: var(--text); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .06); }
  .lang[coi-scope="Settings"]{ position: relative; flex: none; }
 .pick[coi-scope="Settings"]{ display: flex; align-items: center; gap: 8px; min-width: 170px; box-sizing: border-box; padding: 7px 10px 7px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; color: var(--text); }
 .pick[coi-scope="Settings"]:hover,.pick.on[coi-scope="Settings"]{ border-color: color-mix(in srgb, var(--text) 22%, var(--line)); }
 .pick .gl[coi-scope="Settings"]{ color: var(--text-3); display: grid; }
 .pick .cur[coi-scope="Settings"]{ flex: 1; text-align: left; white-space: nowrap; }
 .pick .cur small[coi-scope="Settings"]{ color: var(--text-3); font-size: 12px; margin-left: 4px; }
 .pick .chev[coi-scope="Settings"]{ color: var(--text-3); display: grid; transform: rotate(90deg); transition: transform var(--pn-in) ease-out; }
 .pick.on .chev[coi-scope="Settings"]{ transform: rotate(-90deg); }
 .veil[coi-scope="Settings"]{ position: fixed; inset: 0; z-index: 2; }
 .menu[coi-scope="Settings"]{ position: absolute; z-index: 3; right: 0; top: calc(100% + 6px); width: 240px; padding: 6px; box-sizing: border-box; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top right; }
 .opt[coi-scope="Settings"]{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; }
 .opt[coi-scope="Settings"]:hover{ background: var(--hover); }
 .opt .nm[coi-scope="Settings"]{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
 .opt b[coi-scope="Settings"]{ font-size: 13.5px; font-weight: 500; color: var(--text); }
 .opt small[coi-scope="Settings"]{ font-size: 12px; color: var(--text-3); }
 .opt .tick[coi-scope="Settings"]{ color: var(--accent); display: grid; visibility: hidden; }
 .opt.on .tick[coi-scope="Settings"]{ visibility: visible; }
 .opt.on b[coi-scope="Settings"]{ font-weight: 600; }
 .menu .sep[coi-scope="Settings"]{ height: 1px; background: var(--line); margin: 5px 8px; }
  .status[coi-scope="Settings"]{ display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--hover); margin-bottom: 20px; }
 .status .mark[coi-scope="Settings"]{ background: var(--green-soft); color: var(--green); }
 .status .what[coi-scope="Settings"]{ font-size: 13px; color: var(--text-2); }
 .status .what b[coi-scope="Settings"]{ font-size: 14px; margin-bottom: 2px; }
 .ver[coi-scope="Settings"]{ font-variant-numeric: tabular-nums; }
  @media (max-width: 640px) {
.dlg[coi-scope="Settings"]{ inset: 0; transform: none; width: auto; height: auto; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; }
.side[coi-scope="Settings"]{ width: auto; padding: calc(18px + env(safe-area-inset-top)) 0 0; background: var(--panel); border-right: 0; border-bottom: 1px solid var(--line); }
.side h2[coi-scope="Settings"]{ margin: 0 16px 12px; font-size: 22px; }
.tabs[coi-scope="Settings"]{ flex-direction: row; overflow-x: auto; gap: 4px; padding: 0 16px 12px; scrollbar-width: none; }
.tabs button[coi-scope="Settings"]{ flex: none; padding: 7px 10px; }
.tabs .ti[coi-scope="Settings"]{ display: none; }
.community[coi-scope="Settings"]{ display: none; }
.main[coi-scope="Settings"]{ padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); position: static; }
.x[coi-scope="Settings"]{ top: calc(12px + env(safe-area-inset-top)); right: 10px; }
.pane h3[coi-scope="Settings"]{ display: none; }
.row[coi-scope="Settings"]{ padding: 12px 14px; }
.menu[coi-scope="Settings"]{ right: auto; left: 0; transform-origin: top left; }
}


/* ThemeButton */
 .theme-btn[coi-scope="ThemeButton"]{ position: fixed; right: 16px; top: 14px; z-index: 40; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--text-2); }
 .theme-btn[coi-scope="ThemeButton"]:hover{ color: var(--text); background: var(--hover); }
  @media (display-mode: window-controls-overlay) {
.theme-btn[coi-scope="ThemeButton"]{ width: 30px; height: 30px; border-radius: 7px; right: calc(8px + var(--bar-right)); top: max(0px, calc((var(--bar-height) - 30px) / 2)); }
}


/* Confirm */
  .backdrop[coi-scope="Confirm"]{ position: fixed; inset: 0; z-index: 90; background: var(--veil); animation: pn-fade var(--pn-dlg) ease-out both; }
 .dlg[coi-scope="Confirm"]{ position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 32px)); box-sizing: border-box; padding: 24px 24px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); animation: pn-dialog var(--pn-dlg) cubic-bezier(.16, 1, .3, 1) both; }
 .out .backdrop[coi-scope="Confirm"]{ animation: pn-fade-out var(--pn-out) ease-in both; }
 .out .dlg[coi-scope="Confirm"]{ animation: pn-dialog-out var(--pn-out) ease-in both; }
 h2[coi-scope="Confirm"]{ font: 500 22px/1.2 Fraunces, Georgia, serif; margin: 0 0 8px; }
 p[coi-scope="Confirm"]{ margin: 0 0 22px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
 .row[coi-scope="Confirm"]{ display: flex; justify-content: flex-end; gap: 8px; }
 button[coi-scope="Confirm"]{ padding: 9px 16px; border-radius: 9px; font-weight: 600; font-size: 14px; }
 .no[coi-scope="Confirm"]{ color: var(--text-2); border: 1px solid var(--line); }
 .no[coi-scope="Confirm"]:hover{ background: var(--hover); color: var(--text); }
 .yes[coi-scope="Confirm"]{ background: var(--red); color: #fff; }
 .yes[coi-scope="Confirm"]:hover{ background: color-mix(in srgb, var(--red) 92%, #000); }
 .yes[coi-scope="Confirm"]:focus-visible{ outline: 2px solid var(--red); outline-offset: 2px; }
 .yes.locked[coi-scope="Confirm"]{ opacity: .35; cursor: not-allowed; }
 .yes.locked[coi-scope="Confirm"]:hover{ background: var(--red); }
 .lock[coi-scope="Confirm"]{ margin: -8px 0 18px; }


/* Upgrade */
 .backdrop[coi-scope="Upgrade"]{ position: fixed; inset: 0; z-index: 90; background: var(--veil); animation: pn-fade var(--pn-dlg) ease-out both; }
 .dlg[coi-scope="Upgrade"]{ position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); box-sizing: border-box; max-height: calc(100vh - 32px); overflow: auto; padding: 26px 26px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); animation: pn-dialog var(--pn-dlg) cubic-bezier(.16, 1, .3, 1) both; }
 .out .backdrop[coi-scope="Upgrade"]{ animation: pn-fade-out var(--pn-out) ease-in both; }
 .out .dlg[coi-scope="Upgrade"]{ animation: pn-dialog-out var(--pn-out) ease-in both; }
 .x[coi-scope="Upgrade"]{ position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
 .x[coi-scope="Upgrade"]:hover{ background: var(--hover); color: var(--text); }
 h2[coi-scope="Upgrade"]{ font: 500 23px/1.2 Fraunces, Georgia, serif; margin: 0 34px 8px 0; }
 p[coi-scope="Upgrade"]{ margin: 0 0 16px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
 ul[coi-scope="Upgrade"]{ margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; }
 li[coi-scope="Upgrade"]{ display: flex; gap: 9px; align-items: center; }
 li .tick[coi-scope="Upgrade"]{ color: var(--green); flex: none; display: grid; }
  .go[coi-scope="Upgrade"]{ display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 12px; background: var(--accent); color: #fff; text-decoration: none; font-size: 15.5px; font-weight: 650; letter-spacing: .005em; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px color-mix(in srgb, var(--accent) 38%, transparent), 0 1px 2px rgba(0,0,0,.15); transition: transform var(--pn-in), box-shadow var(--pn-in), filter var(--pn-in); }
 @media (hover: hover) {
.go[coi-scope="Upgrade"]:hover{ filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 22px color-mix(in srgb, var(--accent) 45%, transparent), 0 1px 2px rgba(0,0,0,.15); }
}
 .go[coi-scope="Upgrade"]:active{ transform: translateY(0); }
 .later[coi-scope="Upgrade"]{ display: block; margin: 14px auto 0; padding: 7px 14px; border-radius: 8px; color: var(--text-2); font-size: 13.5px; }
 .later[coi-scope="Upgrade"]:hover{ background: var(--hover); color: var(--text); }
 .fine[coi-scope="Upgrade"]{ margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--text-3); }
 .scene[coi-scope="Upgrade"]{ margin: 4px 0 18px; }
 .perks li[coi-scope="Upgrade"]{ align-items: flex-start; line-height: 1.4; }
 .perks .tick[coi-scope="Upgrade"]{ margin-top: 1px; }


/* Welcome */
 @keyframes ink { from { stroke-dashoffset: 1; } } .backdrop[coi-scope="Welcome"]{ position: fixed; inset: 0; z-index: 90; background: var(--veil); animation: pn-fade var(--pn-dlg) ease-out both; }
 .dlg[coi-scope="Welcome"]{ position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); box-sizing: border-box; max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); animation: pn-dialog var(--pn-dlg) cubic-bezier(.16, 1, .3, 1) both; }
 .out .backdrop[coi-scope="Welcome"]{ animation: pn-fade-out var(--pn-out) ease-in both; }
 .out .dlg[coi-scope="Welcome"]{ animation: pn-dialog-out var(--pn-out) ease-in both; }
 .water[coi-scope="Welcome"]{ display: block; height: 170px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); border-bottom: 1px solid var(--line); }
 .body[coi-scope="Welcome"]{ padding: 22px 26px 20px; }
 h2[coi-scope="Welcome"]{ font: 500 26px/1.2 Fraunces, Georgia, serif; margin: 0 0 8px; }
  .ink[coi-scope="Welcome"]{ position: relative; white-space: nowrap; }
 .ink svg[coi-scope="Welcome"]{ position: absolute; left: -3%; bottom: -7px; width: 106%; height: 10px; overflow: visible; color: var(--accent); }
 .ink path[coi-scope="Welcome"]{ stroke-dasharray: 1; animation: ink calc(var(--pn-dlg) * 3) cubic-bezier(.5, 0, .2, 1) calc(var(--pn-dlg) * 1.5) both; }
 p[coi-scope="Welcome"]{ margin: 0 0 16px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
 ul[coi-scope="Welcome"]{ margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
 li[coi-scope="Welcome"]{ display: flex; gap: 9px; align-items: center; animation: pn-rise var(--pn-dlg) ease-out both; }
 li[coi-scope="Welcome"]:nth-child(1){ animation-delay: calc(var(--pn-dlg) * 2); }
 li[coi-scope="Welcome"]:nth-child(2){ animation-delay: calc(var(--pn-dlg) * 2.5); }
 li[coi-scope="Welcome"]:nth-child(3){ animation-delay: calc(var(--pn-dlg) * 3); }
 li[coi-scope="Welcome"]:nth-child(4){ animation-delay: calc(var(--pn-dlg) * 3.5); }
 li .tick[coi-scope="Welcome"]{ color: var(--green); flex: none; display: grid; }
 .go[coi-scope="Welcome"]{ display: block; width: 100%; padding: 11px 16px; border-radius: 10px; background: var(--accent); color: #fff; text-align: center; font-size: 14.5px; font-weight: 600; }
 .go[coi-scope="Welcome"]:hover{ filter: brightness(1.08); }
 .fine[coi-scope="Welcome"]{ margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--text-3); }


/* CreatorInvite */
 .backdrop[coi-scope="CreatorInvite"]{ position: fixed; inset: 0; z-index: 90; background: var(--veil); animation: pn-fade var(--pn-dlg) ease-out both; }
 .dlg[coi-scope="CreatorInvite"]{ position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); box-sizing: border-box; padding: 28px 28px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); animation: pn-dialog var(--pn-dlg) cubic-bezier(.16, 1, .3, 1) both; }
 .out .backdrop[coi-scope="CreatorInvite"]{ animation: pn-fade-out var(--pn-out) ease-in both; }
 .out .dlg[coi-scope="CreatorInvite"]{ animation: pn-dialog-out var(--pn-out) ease-in both; }
 .ic[coi-scope="CreatorInvite"]{ width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; }
 .kicker[coi-scope="CreatorInvite"]{ font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; }
 h2[coi-scope="CreatorInvite"]{ font: 500 25px/1.2 Fraunces, Georgia, serif; margin: 0 0 8px; }
 p[coi-scope="CreatorInvite"]{ margin: 0 0 20px; color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
 .row[coi-scope="CreatorInvite"]{ display: flex; justify-content: flex-end; gap: 8px; }
 .row button[coi-scope="CreatorInvite"]{ padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; }
 .later[coi-scope="CreatorInvite"]{ color: var(--text-2); border: 1px solid var(--line); }
 .later[coi-scope="CreatorInvite"]:hover{ background: var(--hover); }
 .go[coi-scope="CreatorInvite"]{ background: var(--accent); color: #fff; }
 .go[coi-scope="CreatorInvite"]:hover{ filter: brightness(1.08); }


/* TwoStepDialog */
 .backdrop[coi-scope="TwoStepDialog"]{ position: fixed; inset: 0; z-index: 90; background: var(--veil); animation: pn-fade var(--pn-dlg) ease-out both; }
 .dlg[coi-scope="TwoStepDialog"]{ position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; padding: 30px 32px 26px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); color: var(--text); animation: pn-dialog var(--pn-dlg) cubic-bezier(.16, 1, .3, 1) both; }
 .out .backdrop[coi-scope="TwoStepDialog"]{ animation: pn-fade-out var(--pn-out) ease-in both; }
 .out .dlg[coi-scope="TwoStepDialog"]{ animation: pn-dialog-out var(--pn-out) ease-in both; }
 .x[coi-scope="TwoStepDialog"]{ position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
 .x[coi-scope="TwoStepDialog"]:hover{ background: var(--hover); color: var(--text); }
 .ic[coi-scope="TwoStepDialog"]{ width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; }
 h2[coi-scope="TwoStepDialog"]{ font: 500 26px/1.2 Fraunces, Georgia, serif; margin: 0 0 8px; }
 p[coi-scope="TwoStepDialog"]{ margin: 0 0 18px; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
  .scan[coi-scope="TwoStepDialog"]{ display: flex; gap: 22px; align-items: center; margin: 4px 0 22px; }
 .qr[coi-scope="TwoStepDialog"]{ width: 188px; aspect-ratio: 1; flex: none; border-radius: 16px; background: #fff; padding: 8px; box-sizing: border-box; overflow: hidden; border: 1px solid var(--line); --qr-body: #1f2933; --qr-rings: var(--accent); --qr-pupils: var(--accent); --qr-back: #fff; animation: pn-fade var(--pn-in) ease-out both; }
 .qr.sk[coi-scope="TwoStepDialog"]{ background-color: var(--hover); border-color: transparent; animation: pn-pulse calc(var(--pn-dlg) * 6) ease-in-out infinite; }
 .key small[coi-scope="TwoStepDialog"]{ display: block; color: var(--text-3); font-size: 12.5px; margin-bottom: 6px; }
 .key code[coi-scope="TwoStepDialog"]{ display: block; font: 14px/1.7 JetBrains Mono, monospace; color: var(--text); word-break: break-word; user-select: all; }
  .key code.sk[coi-scope="TwoStepDialog"]{ color: transparent; user-select: none; border-radius: 8px; background-color: var(--hover); animation: pn-pulse calc(var(--pn-dlg) * 6) ease-in-out infinite; }
 .sk.still[coi-scope="TwoStepDialog"]{ animation: none; }
 label.what[coi-scope="TwoStepDialog"]{ display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
 input[coi-scope="TwoStepDialog"]{ width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: 500 22px/1.2 JetBrains Mono, monospace; letter-spacing: .16em; text-align: center; }
 input[coi-scope="TwoStepDialog"]:focus{ outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
 .error[coi-scope="TwoStepDialog"]{ margin: 10px 0 0; color: var(--red); font-size: 13.5px; }
 .codes[coi-scope="TwoStepDialog"]{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 0 0 18px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font: 15px/1.5 JetBrains Mono, monospace; font-variant-numeric: tabular-nums; user-select: all; }
 .row[coi-scope="TwoStepDialog"]{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
 .row button[coi-scope="TwoStepDialog"]{ padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; }
 .quiet[coi-scope="TwoStepDialog"]{ color: var(--text-2); border: 1px solid var(--line); }
 .quiet[coi-scope="TwoStepDialog"]:hover{ background: var(--hover); }
 .go[coi-scope="TwoStepDialog"]{ background: var(--accent); color: #fff; }
 .go[coi-scope="TwoStepDialog"]:hover{ filter: brightness(1.08); }
 .go.danger[coi-scope="TwoStepDialog"]{ background: var(--red); }
 .go[coi-scope="TwoStepDialog"]:disabled{ opacity: .5; cursor: default; filter: none; }
 @media (max-width: 520px) {
.scan[coi-scope="TwoStepDialog"]{ flex-direction: column; align-items: stretch; }
.qr[coi-scope="TwoStepDialog"]{ align-self: center; }
}


/* FeedbackDialog */
  .backdrop[coi-scope="FeedbackDialog"]{ position: fixed; inset: 0; z-index: 90; background: var(--veil); animation: pn-fade var(--pn-dlg) ease-out both; }
 .dlg[coi-scope="FeedbackDialog"]{ position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); animation: pn-dialog var(--pn-dlg) cubic-bezier(.16, 1, .3, 1) both; }
 .out .backdrop[coi-scope="FeedbackDialog"]{ animation: pn-fade-out var(--pn-out) ease-in both; }
 .out .dlg[coi-scope="FeedbackDialog"]{ animation: pn-dialog-out var(--pn-out) ease-in both; }
 h2[coi-scope="FeedbackDialog"]{ margin: 0; font: 500 22px/1.2 Fraunces, Georgia, serif; letter-spacing: -.01em; }
 .intro[coi-scope="FeedbackDialog"]{ margin: -6px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
 .lbl[coi-scope="FeedbackDialog"]{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 6px; }
 textarea[coi-scope="FeedbackDialog"],input[coi-scope="FeedbackDialog"]{ width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 14px var(--font); outline: none; }
 textarea[coi-scope="FeedbackDialog"]{ min-height: 120px; resize: vertical; line-height: 1.45; }
 textarea[coi-scope="FeedbackDialog"]:focus,input[coi-scope="FeedbackDialog"]:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 .hint[coi-scope="FeedbackDialog"]{ margin: 6px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.4; }
 .add[coi-scope="FeedbackDialog"]{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 9px; border: 1px dashed var(--line); font-size: 13px; color: var(--text-2); }
 .add[coi-scope="FeedbackDialog"]:hover{ background: var(--hover); color: var(--text); }
 .add.busy[coi-scope="FeedbackDialog"]{ opacity: .6; cursor: default; }
 .pic[coi-scope="FeedbackDialog"]{ position: relative; display: inline-block; max-width: 100%; }
 .pic img[coi-scope="FeedbackDialog"]{ display: block; max-width: 100%; max-height: 160px; border-radius: 9px; border: 1px solid var(--line); animation: pn-fade var(--pn-in) ease-out both; }
 .pic button[coi-scope="FeedbackDialog"]{ position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); color: var(--text-2); border: 1px solid var(--line); box-shadow: var(--shadow); }
 .pic button[coi-scope="FeedbackDialog"]:hover{ color: var(--text); }
 .along[coi-scope="FeedbackDialog"]{ margin: 0; font-size: 12px; color: var(--text-3); line-height: 1.4; }
 .error[coi-scope="FeedbackDialog"]{ margin: 0; font-size: 13px; color: var(--amber); }
 .acts[coi-scope="FeedbackDialog"]{ display: flex; justify-content: flex-end; gap: 8px; }
 .acts button[coi-scope="FeedbackDialog"]{ padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; }
 .cancel[coi-scope="FeedbackDialog"]{ color: var(--text-2); }
 .cancel[coi-scope="FeedbackDialog"]:hover{ background: var(--hover); }
 .send[coi-scope="FeedbackDialog"]{ background: var(--accent); color: #fff; }
 .send.off[coi-scope="FeedbackDialog"]{ opacity: .45; cursor: default; }
 .done[coi-scope="FeedbackDialog"]{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 8px 0 4px; }
 .done p[coi-scope="FeedbackDialog"]{ margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
  .done circle[coi-scope="FeedbackDialog"]{ stroke: var(--green); stroke-dasharray: 76; stroke-dashoffset: 76; animation: pn-draw calc(var(--pn-dlg) * 2) cubic-bezier(.65, 0, .35, 1) forwards; }
 .done path[coi-scope="FeedbackDialog"]{ stroke: var(--green); stroke-dasharray: 20; stroke-dashoffset: 20; animation: pn-draw var(--pn-dlg) cubic-bezier(.65, 0, .35, 1) calc(var(--pn-dlg) * 1.6) forwards; }
 .done h2[coi-scope="FeedbackDialog"],.done p[coi-scope="FeedbackDialog"]{ animation: pn-rise var(--pn-dlg) ease-out calc(var(--pn-dlg) * .8) both; }
 @keyframes pn-draw { to { stroke-dashoffset: 0; } }

/* ShareDialog */
 .backdrop[coi-scope="ShareDialog"]{ position: fixed; inset: 0; z-index: 90; background: var(--veil); animation: pn-fade var(--pn-dlg) ease-out both; }
  .dlg[coi-scope="ShareDialog"]{ position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(540px, calc(100vw - 32px)); box-sizing: border-box; max-height: calc(100vh - 32px); overflow: auto; padding: 22px 22px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); animation: pn-dialog var(--pn-dlg) cubic-bezier(.16, 1, .3, 1) both; }
 .out .backdrop[coi-scope="ShareDialog"]{ animation: pn-fade-out var(--pn-out) ease-in both; }
 .out .dlg[coi-scope="ShareDialog"]{ animation: pn-dialog-out var(--pn-out) ease-in both; }
 .x[coi-scope="ShareDialog"]{ position: absolute; z-index: 2; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
 .x[coi-scope="ShareDialog"]:hover{ background: var(--hover); color: var(--text); }
 h2[coi-scope="ShareDialog"]{ display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0 38px 16px 2px; font: 500 22px/1.2 Fraunces, Georgia, serif; }
 h2 span[coi-scope="ShareDialog"]{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14.5px Inter, system-ui, sans-serif; color: var(--text-3); }
  .ways[coi-scope="ShareDialog"]{ border: 1px solid var(--line); border-radius: 12px; }
 .way + .way[coi-scope="ShareDialog"]{ border-top: 1px solid var(--line); }
  .way[coi-scope="ShareDialog"]{ --tone: var(--accent); --tone-soft: var(--accent-soft); }
 .way.copies[coi-scope="ShareDialog"]{ --tone: var(--green); --tone-soft: var(--green-soft); }
  .row[coi-scope="ShareDialog"]{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px 16px; }
 .ic[coi-scope="ShareDialog"]{ width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--hover); color: var(--text-2); transition: background var(--pn-in), color var(--pn-in); }
 .ic.on[coi-scope="ShareDialog"]{ background: var(--tone-soft); color: var(--tone); }
 .ic.paused[coi-scope="ShareDialog"]{ background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
 .txt[coi-scope="ShareDialog"]{ flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
 .txt b[coi-scope="ShareDialog"]{ display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
 .txt span[coi-scope="ShareDialog"]{ font-size: 13px; color: var(--text-2); line-height: 1.4; }
  .txt .tag[coi-scope="ShareDialog"]{ display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; line-height: 1.5; }
 .switch[coi-scope="ShareDialog"]{ width: 40px; height: 24px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background .15s; }
 .switch i[coi-scope="ShareDialog"]{ position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
 .switch.on[coi-scope="ShareDialog"]{ background: var(--tone); }
 .switch.on i[coi-scope="ShareDialog"]{ left: 19px; }
  .more[coi-scope="ShareDialog"]{ display: grid; grid-template-rows: 1fr; padding: 0 16px 16px 64px; animation: share-open var(--pn-dlg) cubic-bezier(.16, 1, .3, 1) both; transition: opacity var(--pn-in); }
 .more > .in[coi-scope="ShareDialog"]{ min-height: 0; display: flex; flex-direction: column; gap: 12px; animation: share-clip var(--pn-dlg) cubic-bezier(.16, 1, .3, 1); }
 .more.fold[coi-scope="ShareDialog"]{ animation: share-fold var(--pn-out) ease-in both; }
 .more.still[coi-scope="ShareDialog"],.more.still > .in[coi-scope="ShareDialog"]{ animation: none; }
 .more.fold > .in[coi-scope="ShareDialog"]{ clip-path: inset(-6px -24px 0 -24px); }
 @keyframes share-open { from { grid-template-rows: 0fr; padding-bottom: 0; opacity: 0; } } @keyframes share-fold { to { grid-template-rows: 0fr; padding-bottom: 0; opacity: 0; } } @keyframes share-clip { from, to { clip-path: inset(-6px -24px 0 -24px); } }  .more.wait[coi-scope="ShareDialog"]{ opacity: .35; pointer-events: none; }
 .row .txt span.ask[coi-scope="ShareDialog"]{ color: var(--text); }
 .btns[coi-scope="ShareDialog"]{ display: flex; gap: 6px; flex: none; margin-left: auto; animation: pn-fade var(--pn-in) ease-out both; }
  .join[coi-scope="ShareDialog"]{ display: flex; align-items: center; gap: 14px; }
 .qr[coi-scope="ShareDialog"]{ width: 92px; aspect-ratio: 1; flex: none; border-radius: 10px; background: #fff; padding: 4px; box-sizing: border-box; overflow: hidden; cursor: zoom-in; border: 1px solid var(--line); --qr-body: #1f2933; --qr-rings: var(--tone); --qr-pupils: var(--tone); --qr-back: #fff; }
 .qr.wait[coi-scope="ShareDialog"],.sk[coi-scope="ShareDialog"]{ background-color: var(--hover); animation: pn-pulse calc(var(--pn-dlg) * 6) ease-in-out infinite; }
 .howto[coi-scope="ShareDialog"]{ display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
 .step[coi-scope="ShareDialog"]{ font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
 .step b[coi-scope="ShareDialog"]{ color: var(--text); font-weight: 600; }
 .code[coi-scope="ShareDialog"]{ height: 34px; display: flex; align-items: center; font: 600 26px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; color: var(--text); }
 .code.sk[coi-scope="ShareDialog"]{ width: 130px; border-radius: 8px; }
 .life[coi-scope="ShareDialog"]{ font-size: 12px; color: var(--text-3); }
 .acts[coi-scope="ShareDialog"]{ display: flex; flex-wrap: wrap; gap: 8px; }
 .act[coi-scope="ShareDialog"]{ display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text); }
 .act[coi-scope="ShareDialog"]:hover{ background: var(--hover); }
 .act.main[coi-scope="ShareDialog"]{ background: var(--tone); border-color: var(--tone); color: #fff; }
 .act.main[coi-scope="ShareDialog"]:hover{ filter: brightness(1.08); background: var(--tone); }
 .act.danger[coi-scope="ShareDialog"]{ color: var(--red); }
 .act.danger[coi-scope="ShareDialog"]:hover{ background: color-mix(in srgb, var(--red) 10%, transparent); }
 .act.off[coi-scope="ShareDialog"]{ color: var(--text-3); cursor: default; }
 .act.off[coi-scope="ShareDialog"]:hover{ background: none; }
  .people[coi-scope="ShareDialog"]{ max-height: 188px; overflow-y: auto; margin: -4px -6px 0; padding: 0 6px; overscroll-behavior: contain; }
 .person[coi-scope="ShareDialog"]{ display: flex; align-items: center; gap: 10px; padding: 5px 6px; margin: 0 -6px; border-radius: 9px; }
 .person[coi-scope="ShareDialog"]:hover{ background: var(--hover); }
 .av[coi-scope="ShareDialog"]{ width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600; }
 .dot[coi-scope="ShareDialog"]{ width: 9px; height: 9px; border-radius: 50%; flex: none; }
 .pname[coi-scope="ShareDialog"]{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
 .pname b[coi-scope="ShareDialog"]{ font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .pname small[coi-scope="ShareDialog"]{ font-size: 12px; color: var(--text-3); }
 .can[coi-scope="ShareDialog"]{ display: flex; align-items: center; gap: 6px; color: var(--text-3); }
 .can .switch[coi-scope="ShareDialog"]{ transform: scale(.85); }
 .rm[coi-scope="ShareDialog"]{ width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); }
 .rm[coi-scope="ShareDialog"]:hover{ background: var(--hover); color: var(--red); }
 .sub[coi-scope="ShareDialog"]{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: -6px; }
  .link[coi-scope="ShareDialog"]{ display: flex; gap: 8px; }
 .link input[coi-scope="ShareDialog"]{ flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 13px Inter, system-ui, sans-serif; }
 .link button[coi-scope="ShareDialog"]{ display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
 .ver[coi-scope="ShareDialog"]{ display: flex; align-items: center; gap: 10px; }
 .ver span[coi-scope="ShareDialog"]{ flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-3); }
 .error[coi-scope="ShareDialog"]{ margin: 12px 0 0; font-size: 13px; color: var(--amber); }
  .moderated[coi-scope="ShareDialog"]{ margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--text); background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); }
  .ways.wait .switch[coi-scope="ShareDialog"]{ opacity: .45; pointer-events: none; }
 @media (max-width: 480px) {
.more[coi-scope="ShareDialog"]{ padding-left: 16px; }
.join[coi-scope="ShareDialog"]{ align-items: flex-start; }
}
  .room[coi-scope="ShareDialog"]{ position: fixed; inset: 0; z-index: 95; background: #fff; color: #1f2933; display: flex; align-items: center; justify-content: center; gap: 6vmin; padding: 4vmin; box-sizing: border-box; cursor: zoom-out; animation: pn-fade var(--pn-dlg) ease-out both; --qr-body: #1f2933; --qr-rings: #825fff; --qr-pupils: #825fff; --qr-back: #fff; }
 .room-qr[coi-scope="ShareDialog"]{ width: min(82vh, 60vw); aspect-ratio: 1; flex: none; }
 .room-side[coi-scope="ShareDialog"]{ display: flex; flex-direction: column; gap: 1.6vmin; max-width: 36vw; }
 .room-scan[coi-scope="ShareDialog"]{ font: 500 clamp(28px, 5vmin, 64px)/1.1 Fraunces, Georgia, serif; }
 .room-step[coi-scope="ShareDialog"]{ font-size: clamp(16px, 2.4vmin, 30px); color: #52606d; }
 .room-step b[coi-scope="ShareDialog"]{ color: #1f2933; }
 .room-code[coi-scope="ShareDialog"]{ font: 600 clamp(40px, 9vmin, 120px)/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; }
 .room-here[coi-scope="ShareDialog"]{ display: flex; align-items: center; gap: 10px; font-size: clamp(15px, 2.2vmin, 26px); color: #52606d; }
 .room-close[coi-scope="ShareDialog"]{ font-size: 13px; color: #9aa5b1; margin-top: 2vmin; }
 .room.copy[coi-scope="ShareDialog"]{ --qr-rings: var(--green); --qr-pupils: var(--green); }
 @media (orientation: portrait) {
.room[coi-scope="ShareDialog"]{ flex-direction: column; }
.room-qr[coi-scope="ShareDialog"]{ width: min(80vw, 60vh); }
.room-side[coi-scope="ShareDialog"]{ max-width: 90vw; align-items: center; text-align: center; }
}


/* JoinView */
 .join[coi-scope="JoinView"]{ --bg: #f6f5f2; --panel: #ffffff; --text: #24221e; --text-2: #5f5b53; --text-3: #9b968b; --line: #e4e0d7; --accent: #825fff; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 16px 40px; color: var(--text); color-scheme: light; background: var(--bg); font: 400 16px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
 .home[coi-scope="JoinView"]{ position: fixed; top: 20px; left: 24px; display: flex; align-items: center; gap: 9px; font: 600 19px/1 Fraunces, Georgia, serif; letter-spacing: -.02em; color: inherit; text-decoration: none; }
 .card[coi-scope="JoinView"]{ width: 100%; max-width: 420px; box-sizing: border-box; padding: 36px 30px 28px; background: var(--panel); display: flex; flex-direction: column; gap: 14px; text-align: center; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(30, 25, 15, .25), 0 1px 2px rgba(30, 25, 15, .04); animation: pn-fade var(--pn-in) ease-out both; }
 h1[coi-scope="JoinView"]{ font: 500 30px/1.15 Fraunces, Georgia, serif; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
 p[coi-scope="JoinView"]{ margin: 0; color: var(--text-2); font-size: 15px; text-wrap: balance; }
 input[coi-scope="JoinView"]{ width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); outline: none; font: 600 30px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
 input[coi-scope="JoinView"]:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(130, 95, 255, .18); }
 button[coi-scope="JoinView"]{ display: flex; align-items: center; justify-content: center; height: 50px; width: 100%; border-radius: 12px; background: var(--accent); color: #fff; font: 600 15px/1 Inter, system-ui, sans-serif; }
 button[coi-scope="JoinView"]:hover{ filter: brightness(1.08); }
 .err[coi-scope="JoinView"]{ color: #b4443a; font-size: 14px; }


/* Toast */
 .slot[coi-scope="Toast"]{ display: contents; }
 .toast[coi-scope="Toast"]{ position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 4px; padding: 8px 6px 8px 16px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 13px; box-shadow: var(--shadow); white-space: nowrap; }
 .toast span[coi-scope="Toast"]{ margin-right: 10px; }
 .toast .undo[coi-scope="Toast"]{ padding: 4px 10px; border-radius: 6px; font-weight: 600; color: var(--accent-soft); }
 .toast .undo[coi-scope="Toast"]:hover{ background: rgba(255,255,255,.12); }
 .toast .x[coi-scope="Toast"]{ width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; opacity: .7; }
 .toast .x[coi-scope="Toast"]:hover{ opacity: 1; background: rgba(255,255,255,.12); }
  .toast.update[coi-scope="Toast"]{ gap: 12px; padding: 10px 10px 10px 12px; border-radius: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--line); white-space: normal; max-width: min(460px, calc(100vw - 32px)); }
 .toast.update .ic[coi-scope="Toast"]{ width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
 .toast.update .txt[coi-scope="Toast"]{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; margin-right: 2px; }
 .toast.update .txt b[coi-scope="Toast"]{ font-size: 13.5px; font-weight: 600; }
 .toast.update .txt small[coi-scope="Toast"]{ font-size: 12px; color: var(--text-2); }
 .toast.update .go[coi-scope="Toast"]{ padding: 7px 12px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; }
 .toast.update .go[coi-scope="Toast"]:hover{ filter: brightness(1.08); }
 .toast.update .later[coi-scope="Toast"]{ padding: 7px 10px; border-radius: 8px; color: var(--text-2); font-size: 13px; white-space: nowrap; }
 .toast.update .later[coi-scope="Toast"]:hover{ background: var(--hover); color: var(--text); }
 @media (max-width: 1000px) {
.toast[coi-scope="Toast"]{ bottom: 64px; }
}
 @media (max-width: 640px) {
.toast.update[coi-scope="Toast"]{ flex-wrap: wrap; }
.toast.update .txt[coi-scope="Toast"]{ flex-basis: calc(100% - 44px); }
.toast.update .go[coi-scope="Toast"]{ margin-left: 44px; }
}
  .toast[coi-scope="Toast"]{ animation: pn-rise var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: bottom left; }


/* Topbar */
 .topbar[coi-scope="Topbar"]{ height: 48px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg); }
  @media (display-mode: window-controls-overlay) {
.topbar[coi-scope="Topbar"]{ height: max(var(--bar-height), 36px); padding-right: calc(10px + var(--bar-right)); -webkit-app-region: drag; app-region: drag; }
}
  .push[coi-scope="Topbar"]{ flex: 1; }
 .sync[coi-scope="Topbar"]{ display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
 .sync i[coi-scope="Topbar"]{ width: 7px; height: 7px; border-radius: 50%; background: #3fb27f; }
 .sync.saving i[coi-scope="Topbar"]{ background: #e0a43a; }
 .sync.error i[coi-scope="Topbar"]{ background: var(--red); }
  .room[coi-scope="Topbar"]{ font-size: 12px; color: var(--amber); padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
 .room[coi-scope="Topbar"]:hover{ background: var(--hover); }
 .btn[coi-scope="Topbar"]{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 500; }
 .btn[coi-scope="Topbar"]:hover,.btn.on[coi-scope="Topbar"]{ background: var(--hover); }
 .btn.linked[coi-scope="Topbar"]{ color: var(--accent); border-color: var(--accent); }
 .share.live[coi-scope="Topbar"]{ color: var(--green); border-color: var(--green); background: var(--green-soft); }
 .share.paused[coi-scope="Topbar"]{ color: var(--amber); border-color: var(--amber); }
 .share .dot[coi-scope="Topbar"]{ width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
 .exp[coi-scope="Topbar"]{ position: relative; }
  .from[coi-scope="Topbar"]{ display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 600; }
 .from[coi-scope="Topbar"]:hover{ filter: brightness(.95); }
 .from-menu[coi-scope="Topbar"]{ position: absolute; z-index: 41; left: 0; top: 36px; width: 260px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top left; }
 .from-menu .label-sm[coi-scope="Topbar"]{ font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 4px 8px 2px; }
 .from-menu button[coi-scope="Topbar"]{ display: flex; gap: 8px; align-items: center; width: 100%; padding: 6px 8px; border-radius: 6px; text-align: left; font-size: 13px; }
 .from-menu button[coi-scope="Topbar"]:hover{ background: var(--hover); }
 .from-menu button span[coi-scope="Topbar"]{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .from-menu .pg[coi-scope="Topbar"]{ color: var(--text-3); display: grid; place-items: center; flex: none; }
 .veil[coi-scope="Topbar"]{ position: fixed; inset: 0; z-index: 40; }
 .exp-menu[coi-scope="Topbar"]{ position: absolute; right: 0; top: 36px; z-index: 41; width: 250px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
 .exp-menu button[coi-scope="Topbar"]{ display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 7px 10px; border-radius: 6px; text-align: left; }
 .exp-menu button[coi-scope="Topbar"]:hover{ background: var(--hover); }
 .exp-menu b[coi-scope="Topbar"]{ font-weight: 500; color: var(--text); font-size: 13px; }
 .exp-menu small[coi-scope="Topbar"]{ color: var(--text-3); font-size: 11.5px; }
 .exp-menu hr[coi-scope="Topbar"]{ border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
 .exp-menu .row[coi-scope="Topbar"]{ flex-direction: row; align-items: center; gap: 10px; color: var(--text); font-size: 13px; font-weight: 500; }
 .exp-menu .row .ic[coi-scope="Topbar"]{ color: var(--text-2); display: grid; place-items: center; }
 .narrow[coi-scope="Topbar"]{ display: none; }
 @media (max-width: 640px) {
.topbar[coi-scope="Topbar"]{ gap: 8px; padding: 0 10px; }
.wide[coi-scope="Topbar"],.share .lbl[coi-scope="Topbar"]{ display: none; }
.narrow[coi-scope="Topbar"]{ display: block; }
.share[coi-scope="Topbar"]{ padding: 6px 9px; }
}
 .menu-btn[coi-scope="Topbar"],.side-btn[coi-scope="Topbar"]{ display: none; width: 32px; height: 32px; border-radius: 8px; place-items: center; color: var(--text-2); flex: none; }
 .menu-btn[coi-scope="Topbar"]:hover,.side-btn[coi-scope="Topbar"]:hover{ background: var(--hover); color: var(--text); }
 .side-btn.show[coi-scope="Topbar"]{ display: grid; }
  .mark[coi-scope="Topbar"]{ display: none; }
 .mark.show[coi-scope="Topbar"]{ display: grid; }
 @media (max-width: 1000px) {
.sync[coi-scope="Topbar"],.room[coi-scope="Topbar"]{ display: none; }
.menu-btn[coi-scope="Topbar"]{ display: grid; }
.side-btn[coi-scope="Topbar"],.side-btn.show[coi-scope="Topbar"]{ display: none; }
.mark[coi-scope="Topbar"]{ display: grid; }
}
  .exp-menu[coi-scope="Topbar"]{ animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top right; }


/* Board */
 .board[coi-scope="Board"]{ position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .lookers[coi-scope="Board"]{ position: absolute; right: 16px; top: 76px; bottom: 60px; width: 10px; z-index: 6; pointer-events: none; }
 .looker[coi-scope="Board"]{ position: absolute; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; padding: 0; background: var(--who); border: 2px solid var(--sheet); box-shadow: 0 0 0 1px var(--line); pointer-events: auto; cursor: pointer; animation: pn-fade var(--pn-in) ease-out both; }
 @media (hover: hover) {
.looker[coi-scope="Board"]:hover{ transform: scale(1.3); }
}
 .looker.off[coi-scope="Board"]{ display: none; }
  .tools[coi-scope="Board"]{ position: absolute; top: 14px; left: 12px; right: 12px; z-index: 20; height: 0; display: flex; flex-direction: column; align-items: center; container-type: inline-size; clip-path: polygon(-100vw -14px, 200vw -14px, 200vw 200vh, -100vw 200vh); }
 .tools.hidden[coi-scope="Board"]{ display: none; }
  .tools.arrived[coi-scope="Board"]{ animation: pn-drop var(--pn-in) ease-out both; }
 .status[coi-scope="Board"]{ position: fixed; right: 16px; bottom: 14px; z-index: 30; display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 5px 10px; font-size: 12px; color: var(--text-2); box-shadow: var(--shadow); }
 .status b[coi-scope="Board"]{ font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
  .veil[coi-scope="Board"]{ position: fixed; inset: 0; z-index: 19; }
 .veil.high[coi-scope="Board"]{ z-index: 30; }
 .status .paper-btn[coi-scope="Board"]{ padding: 0 8px; height: 22px; border-radius: 5px; font-size: 12px; color: var(--text-2); }
 .status .paper-btn[coi-scope="Board"]:hover,.status .paper-btn.on[coi-scope="Board"]{ background: var(--hover); color: var(--text); }
 .jump[coi-scope="Board"]{ display: flex; align-items: center; gap: 2px; padding-right: 6px; border-right: 1px solid var(--line); }
 .jump button[coi-scope="Board"]{ width: 24px; height: 22px; border-radius: 5px; color: var(--text-2); display: grid; place-items: center; }
 .jump button[coi-scope="Board"]:hover{ background: var(--hover); color: var(--text); }
 .zoom[coi-scope="Board"]{ display: flex; align-items: center; gap: 2px; }
 .zoom button[coi-scope="Board"]{ min-width: 22px; height: 22px; border-radius: 5px; color: var(--text-2); font-size: 14px; }
 .zoom button[coi-scope="Board"]:hover{ background: var(--hover); color: var(--text); }
 .zoom .pct[coi-scope="Board"]{ min-width: 46px; font-size: 12px; font-variant-numeric: tabular-nums; }
 @media (max-width: 1000px) {
.status[coi-scope="Board"]{ right: 10px; bottom: 10px; gap: 6px; padding: 3px 6px; }
}


/* Logo */
 .logo[coi-scope="Logo"]{ display: grid; place-items: center; flex: none; line-height: 0; }


/* Shelf */
 .grid[coi-scope="Shelf"]{ display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 132px)); gap: 26px 24px; padding-top: 4px; }
  @media (max-width: 640px) {
.grid[coi-scope="Shelf"]{ grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 22px 18px; }
}


/* Pond */
 .pond[coi-scope="Pond"]{  position: relative; display: block; width: 100%; height: 100%; overflow: clip; --w1: color-mix(in srgb, var(--green) 7%, var(--bg)); --w2: color-mix(in srgb, var(--green) 19%, var(--bg)); --pad: color-mix(in srgb, #5f9e6c 60%, var(--bg)); --rim: color-mix(in srgb, #4a8257 55%, var(--bg)); --vein: color-mix(in srgb, #fff 28%, var(--pad)); --old: color-mix(in srgb, #a8ad5e 55%, var(--bg)); --old-rim: color-mix(in srgb, #8a8f44 55%, var(--bg)); --young: color-mix(in srgb, #86c07f 58%, var(--bg)); --reed: color-mix(in srgb, #5f8a52 55%, var(--bg)); --tail: color-mix(in srgb, #7a5c3c 60%, var(--bg)); --koi-w: color-mix(in srgb, #fbf7ee 75%, var(--w2)); --shine: color-mix(in srgb, #fff 65%, var(--w2)); --weed: color-mix(in srgb, #7fb46f 50%, var(--w2)); }
  .app.dark .pond[coi-scope="Pond"]{ --w1: color-mix(in srgb, #7fb2c8 12%, var(--bg)); --w2: color-mix(in srgb, #7fb2c8 12%, var(--bg)); --pad: color-mix(in srgb, #5f9e6c 36%, var(--bg)); --rim: color-mix(in srgb, #4a8257 46%, var(--bg)); --vein: color-mix(in srgb, #fff 12%, var(--pad)); --old: color-mix(in srgb, #a8ad5e 30%, var(--bg)); --old-rim: color-mix(in srgb, #8a8f44 38%, var(--bg)); --young: color-mix(in srgb, #86c07f 34%, var(--bg)); --reed: color-mix(in srgb, #5f8a52 40%, var(--bg)); --tail: color-mix(in srgb, #7a5c3c 50%, var(--bg)); --koi-w: color-mix(in srgb, #fbf7ee 50%, var(--w2)); --shine: color-mix(in srgb, #fff 30%, var(--w2)); --weed: color-mix(in srgb, #7fb46f 30%, var(--w2)); }
 .app.dark .pond .petal[coi-scope="Pond"]{ fill: color-mix(in srgb, #f5b3c6 50%, var(--bg)); stroke: color-mix(in srgb, #e892ab 50%, var(--bg)); }
 .app.dark .pond .petal.in[coi-scope="Pond"]{ fill: color-mix(in srgb, #fcdde6 50%, var(--bg)); }
 .app.dark .pond .heart[coi-scope="Pond"]{ fill: color-mix(in srgb, #f2c94c 50%, var(--bg)); }
  .world[coi-scope="Pond"]{ position: absolute; left: 0; top: 0; width: 400px; height: 240px; transform-origin: 0 0; }
 .world div[coi-scope="Pond"]{ position: absolute; left: 0; top: 0; width: 0; height: 0; }
 .art[coi-scope="Pond"]{ position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
 .bed[coi-scope="Pond"]{ position: absolute; left: 0; top: 0; width: 400px; height: 240px; overflow: visible; }
 .pond .s1[coi-scope="Pond"]{ stop-color: var(--w2); }
 .pond .s2[coi-scope="Pond"]{ stop-color: var(--w1); }
 .pond .water[coi-scope="Pond"]{ fill: url(#pondWater); filter: url(#pondSoft); }
  .app.dark .pond .water[coi-scope="Pond"]{ filter: url(#pondSoftDark); }
 .app.dark .pond .s1[coi-scope="Pond"],.app.dark .pond .s2[coi-scope="Pond"]{ stop-color: var(--w2); }
 .pond .weed[coi-scope="Pond"]{ fill: var(--weed); }
  .pond .fish[coi-scope="Pond"]{ animation: 0s linear infinite; animation-duration: calc(var(--dur) * 1s); animation-delay: calc(0s - var(--ph) * 1s - var(--t) * 1s); opacity: .9; }
 .pond .fish.p1[coi-scope="Pond"]{ animation-name: swim-p1; }
 .pond .fish.p2[coi-scope="Pond"]{ animation-name: swim-p2; }
 .pond .fish.p3[coi-scope="Pond"]{ animation-name: swim-p3; }
 .pond .fish.p4[coi-scope="Pond"]{ animation-name: swim-p4; }
 .pond .fish.p5[coi-scope="Pond"]{ animation-name: swim-p5; }
 .pond .fish.p6[coi-scope="Pond"]{ animation-name: swim-p6; }
  .pond .fish.rev[coi-scope="Pond"]{ animation-direction: reverse; }
  @keyframes swim-p1 { 0%{transform:translate(96.0px,132.0px) rotate(-84.3deg)} 2.083%{transform:translate(99.0px,119.8px) rotate(-67.4deg)} 4.167%{transform:translate(105.3px,109.0px) rotate(-52.3deg)} 6.25%{transform:translate(114.0px,99.9px) rotate(-41.1deg)} 8.333%{transform:translate(124.1px,92.4px) rotate(-32.9deg)} 10.42%{transform:translate(135.0px,86.2px) rotate(-26.6deg)} 12.5%{transform:translate(146.5px,81.1px) rotate(-21.6deg)} 14.58%{transform:translate(158.3px,76.9px) rotate(-17.3deg)} 16.67%{transform:translate(170.4px,73.6px) rotate(-13.7deg)} 18.75%{transform:translate(182.7px,70.9px) rotate(-10.4deg)} 20.83%{transform:translate(195.2px,69.0px) rotate(-7.3deg)} 22.92%{transform:translate(207.7px,67.8px) rotate(-4.3deg)} 25%{transform:translate(220.2px,67.2px) rotate(-1.3deg)} 27.08%{transform:translate(232.8px,67.2px) rotate(1.7deg)} 29.17%{transform:translate(245.3px,67.9px) rotate(4.9deg)} 31.25%{transform:translate(257.8px,69.4px) rotate(8.3deg)} 33.33%{transform:translate(270.2px,71.5px) rotate(11.8deg)} 35.42%{transform:translate(282.4px,74.6px) rotate(16.3deg)} 37.5%{transform:translate(294.3px,78.6px) rotate(21.6deg)} 39.58%{transform:translate(305.7px,83.9px) rotate(28.0deg)} 41.67%{transform:translate(316.4px,90.5px) rotate(36.2deg)} 43.75%{transform:translate(325.8px,98.8px) rotate(46.8deg)} 45.83%{transform:translate(333.3px,108.9px) rotate(60.7deg)} 47.92%{transform:translate(337.8px,120.6px) rotate(78.0deg)} 50%{transform:translate(338.3px,133.1px) rotate(96.6deg)} 52.08%{transform:translate(335.1px,145.2px) rotate(113.0deg)} 54.17%{transform:translate(328.8px,156.1px) rotate(125.9deg)} 56.25%{transform:translate(320.6px,165.5px) rotate(135.6deg)} 58.33%{transform:translate(310.8px,173.4px) rotate(146.9deg)} 60.42%{transform:translate(299.8px,179.4px) rotate(154.8deg)} 62.5%{transform:translate(288.1px,184.2px) rotate(160.8deg)} 64.58%{transform:translate(276.1px,187.8px) rotate(165.5deg)} 66.67%{transform:translate(263.8px,190.5px) rotate(169.3deg)} 68.75%{transform:translate(251.4px,192.5px) rotate(172.5deg)} 70.83%{transform:translate(238.9px,193.8px) rotate(175.3deg)} 72.92%{transform:translate(226.4px,194.6px) rotate(177.9deg)} 75%{transform:translate(213.8px,194.8px) rotate(180.2deg)} 77.08%{transform:translate(201.2px,194.5px) rotate(182.5deg)} 79.17%{transform:translate(188.7px,193.7px) rotate(184.8deg)} 81.25%{transform:translate(176.2px,192.4px) rotate(187.1deg)} 83.33%{transform:translate(163.7px,190.5px) rotate(189.7deg)} 85.42%{transform:translate(151.4px,188.1px) rotate(192.6deg)} 87.5%{transform:translate(139.2px,185.0px) rotate(196.2deg)} 89.58%{transform:translate(127.3px,180.9px) rotate(203.6deg)} 91.67%{transform:translate(116.3px,175.0px) rotate(213.4deg)} 93.75%{transform:translate(106.7px,166.9px) rotate(227.2deg)} 95.83%{transform:translate(99.6px,156.6px) rotate(244.7deg)} 97.92%{transform:translate(96.1px,144.5px) rotate(262.3deg)} 100%{transform:translate(96.0px,132.0px) rotate(275.7deg)} } @keyframes swim-p2 { 0%{transform:translate(300.0px,118.0px) rotate(-83.0deg)} 2.083%{transform:translate(299.8px,110.6px) rotate(-100.0deg)} 4.167%{transform:translate(297.5px,103.7px) rotate(-117.6deg)} 6.25%{transform:translate(293.2px,97.7px) rotate(-132.4deg)} 8.333%{transform:translate(287.7px,92.7px) rotate(-143.7deg)} 10.42%{transform:translate(281.4px,88.8px) rotate(-152.2deg)} 12.5%{transform:translate(274.7px,85.8px) rotate(-158.8deg)} 14.58%{transform:translate(267.7px,83.5px) rotate(-164.2deg)} 16.67%{transform:translate(260.5px,81.7px) rotate(-168.8deg)} 18.75%{transform:translate(253.2px,80.6px) rotate(-173.0deg)} 20.83%{transform:translate(245.8px,79.9px) rotate(-176.7deg)} 22.92%{transform:translate(238.4px,79.7px) rotate(-180.3deg)} 25%{transform:translate(231.0px,80.0px) rotate(-183.7deg)} 27.08%{transform:translate(223.7px,80.7px) rotate(-187.1deg)} 29.17%{transform:translate(216.3px,81.8px) rotate(-190.5deg)} 31.25%{transform:translate(209.1px,83.4px) rotate(-193.9deg)} 33.33%{transform:translate(202.0px,85.4px) rotate(-197.4deg)} 35.42%{transform:translate(195.0px,87.8px) rotate(-201.3deg)} 37.5%{transform:translate(188.3px,90.8px) rotate(-206.8deg)} 39.58%{transform:translate(181.9px,94.5px) rotate(-213.3deg)} 41.67%{transform:translate(175.9px,98.9px) rotate(-220.8deg)} 43.75%{transform:translate(170.7px,104.1px) rotate(-229.7deg)} 45.83%{transform:translate(166.5px,110.2px) rotate(-240.1deg)} 47.92%{transform:translate(163.5px,116.9px) rotate(-252.2deg)} 50%{transform:translate(162.1px,124.1px) rotate(-266.0deg)} 52.08%{transform:translate(162.5px,131.5px) rotate(-280.7deg)} 54.17%{transform:translate(164.8px,138.5px) rotate(-295.4deg)} 56.25%{transform:translate(168.7px,144.8px) rotate(-308.9deg)} 58.33%{transform:translate(173.9px,150.0px) rotate(-320.7deg)} 60.42%{transform:translate(180.0px,154.1px) rotate(-330.7deg)} 62.5%{transform:translate(186.7px,157.3px) rotate(-338.9deg)} 64.58%{transform:translate(193.8px,159.5px) rotate(-345.8deg)} 66.67%{transform:translate(201.0px,160.9px) rotate(-350.9deg)} 68.75%{transform:translate(208.4px,161.9px) rotate(-354.1deg)} 70.83%{transform:translate(215.7px,162.4px) rotate(-357.2deg)} 72.92%{transform:translate(223.1px,162.6px) rotate(-360.4deg)} 75%{transform:translate(230.5px,162.3px) rotate(-363.7deg)} 77.08%{transform:translate(237.9px,161.6px) rotate(-367.0deg)} 79.17%{transform:translate(245.2px,160.5px) rotate(-370.5deg)} 81.25%{transform:translate(252.4px,158.9px) rotate(-374.3deg)} 83.33%{transform:translate(259.5px,156.9px) rotate(-378.3deg)} 85.42%{transform:translate(266.4px,154.3px) rotate(-382.7deg)} 87.5%{transform:translate(273.1px,151.1px) rotate(-387.7deg)} 89.58%{transform:translate(279.5px,147.4px) rotate(-393.5deg)} 91.67%{transform:translate(285.4px,142.9px) rotate(-400.4deg)} 93.75%{transform:translate(290.7px,137.8px) rotate(-408.7deg)} 95.83%{transform:translate(295.1px,131.8px) rotate(-418.6deg)} 97.92%{transform:translate(298.3px,125.2px) rotate(-430.2deg)} 100%{transform:translate(300.0px,118.0px) rotate(-443.0deg)} } @keyframes swim-p3 { 0%{transform:translate(200.0px,58.0px) rotate(-5.1deg)} 2.083%{transform:translate(212.2px,57.0px) rotate(-3.4deg)} 4.167%{transform:translate(224.4px,56.6px) rotate(-0.3deg)} 6.25%{transform:translate(236.6px,56.9px) rotate(3.1deg)} 8.333%{transform:translate(248.8px,57.9px) rotate(6.7deg)} 10.42%{transform:translate(260.8px,59.7px) rotate(10.6deg)} 12.5%{transform:translate(272.7px,62.4px) rotate(15.0deg)} 14.58%{transform:translate(284.4px,66.1px) rotate(19.9deg)} 16.67%{transform:translate(295.7px,70.8px) rotate(25.6deg)} 18.75%{transform:translate(306.4px,76.7px) rotate(32.4deg)} 20.83%{transform:translate(316.2px,83.9px) rotate(40.7deg)} 22.92%{transform:translate(324.7px,92.6px) rotate(51.1deg)} 25%{transform:translate(331.3px,102.9px) rotate(64.2deg)} 27.08%{transform:translate(335.1px,114.5px) rotate(79.8deg)} 29.17%{transform:translate(335.5px,126.6px) rotate(96.2deg)} 31.25%{transform:translate(332.6px,138.5px) rotate(110.9deg)} 33.33%{transform:translate(327.2px,149.4px) rotate(123.0deg)} 35.42%{transform:translate(319.5px,158.8px) rotate(135.0deg)} 37.5%{transform:translate(310.1px,166.7px) rotate(144.8deg)} 39.58%{transform:translate(299.7px,173.0px) rotate(152.6deg)} 41.67%{transform:translate(288.5px,178.0px) rotate(158.8deg)} 43.75%{transform:translate(276.9px,181.9px) rotate(164.0deg)} 45.83%{transform:translate(265.1px,184.8px) rotate(168.4deg)} 47.92%{transform:translate(253.0px,186.8px) rotate(172.2deg)} 50%{transform:translate(240.9px,188.1px) rotate(175.7deg)} 52.08%{transform:translate(228.7px,188.7px) rotate(178.9deg)} 54.17%{transform:translate(216.5px,188.6px) rotate(182.0deg)} 56.25%{transform:translate(204.3px,187.8px) rotate(185.1deg)} 58.33%{transform:translate(192.2px,186.4px) rotate(188.2deg)} 60.42%{transform:translate(180.1px,184.3px) rotate(191.5deg)} 62.5%{transform:translate(168.2px,181.5px) rotate(195.1deg)} 64.58%{transform:translate(156.6px,177.9px) rotate(200.0deg)} 66.67%{transform:translate(145.3px,173.2px) rotate(205.5deg)} 68.75%{transform:translate(134.6px,167.3px) rotate(212.0deg)} 70.83%{transform:translate(124.7px,160.2px) rotate(219.7deg)} 72.92%{transform:translate(116.0px,151.7px) rotate(229.3deg)} 75%{transform:translate(109.0px,141.7px) rotate(241.3deg)} 77.08%{transform:translate(104.5px,130.3px) rotate(256.4deg)} 79.17%{transform:translate(103.5px,118.2px) rotate(274.2deg)} 81.25%{transform:translate(106.3px,106.4px) rotate(292.5deg)} 83.33%{transform:translate(112.5px,95.9px) rotate(308.3deg)} 85.42%{transform:translate(121.1px,87.3px) rotate(320.0deg)} 87.5%{transform:translate(130.9px,80.0px) rotate(326.4deg)} 89.58%{transform:translate(141.4px,73.7px) rotate(332.4deg)} 91.67%{transform:translate(152.5px,68.6px) rotate(337.9deg)} 93.75%{transform:translate(164.0px,64.5px) rotate(342.9deg)} 95.83%{transform:translate(175.8px,61.4px) rotate(347.6deg)} 97.92%{transform:translate(187.9px,59.3px) rotate(352.0deg)} 100%{transform:translate(200.0px,58.0px) rotate(354.9deg)} } @keyframes swim-p4 { 0%{transform:translate(210.0px,120.0px) rotate(-50.9deg)} 2.083%{transform:translate(217.4px,112.2px) rotate(-41.5deg)} 4.167%{transform:translate(226.1px,105.7px) rotate(-32.6deg)} 6.25%{transform:translate(235.6px,100.5px) rotate(-24.7deg)} 8.333%{transform:translate(245.7px,96.6px) rotate(-17.6deg)} 10.42%{transform:translate(256.2px,93.9px) rotate(-10.9deg)} 12.5%{transform:translate(266.9px,92.5px) rotate(-4.3deg)} 14.58%{transform:translate(277.7px,92.3px) rotate(2.8deg)} 16.67%{transform:translate(288.4px,93.6px) rotate(11.2deg)} 18.75%{transform:translate(298.8px,96.7px) rotate(22.1deg)} 20.83%{transform:translate(308.2px,102.0px) rotate(38.0deg)} 22.92%{transform:translate(315.2px,110.1px) rotate(61.5deg)} 25%{transform:translate(318.0px,120.5px) rotate(88.0deg)} 27.08%{transform:translate(315.7px,130.9px) rotate(117.8deg)} 29.17%{transform:translate(308.6px,138.9px) rotate(143.7deg)} 31.25%{transform:translate(299.0px,143.9px) rotate(159.8deg)} 33.33%{transform:translate(288.6px,146.7px) rotate(170.3deg)} 35.42%{transform:translate(277.8px,147.7px) rotate(178.2deg)} 37.5%{transform:translate(267.0px,147.4px) rotate(184.9deg)} 39.58%{transform:translate(256.3px,145.9px) rotate(191.2deg)} 41.67%{transform:translate(245.8px,143.2px) rotate(197.5deg)} 43.75%{transform:translate(235.7px,139.4px) rotate(204.4deg)} 45.83%{transform:translate(226.2px,134.2px) rotate(212.1deg)} 47.92%{transform:translate(217.5px,127.8px) rotate(221.2deg)} 50%{transform:translate(210.0px,120.0px) rotate(230.9deg)} 52.08%{transform:translate(202.6px,112.2px) rotate(221.5deg)} 54.17%{transform:translate(193.9px,105.7px) rotate(212.6deg)} 56.25%{transform:translate(184.4px,100.5px) rotate(204.7deg)} 58.33%{transform:translate(174.3px,96.6px) rotate(197.6deg)} 60.42%{transform:translate(163.8px,93.9px) rotate(190.9deg)} 62.5%{transform:translate(153.1px,92.5px) rotate(184.3deg)} 64.58%{transform:translate(142.3px,92.3px) rotate(177.2deg)} 66.67%{transform:translate(131.6px,93.6px) rotate(168.8deg)} 68.75%{transform:translate(121.2px,96.7px) rotate(157.9deg)} 70.83%{transform:translate(111.8px,102.0px) rotate(142.0deg)} 72.92%{transform:translate(104.8px,110.1px) rotate(118.5deg)} 75%{transform:translate(102.0px,120.5px) rotate(92.0deg)} 77.08%{transform:translate(104.3px,130.9px) rotate(62.2deg)} 79.17%{transform:translate(111.4px,138.9px) rotate(36.3deg)} 81.25%{transform:translate(121.0px,143.9px) rotate(20.2deg)} 83.33%{transform:translate(131.4px,146.7px) rotate(9.7deg)} 85.42%{transform:translate(142.2px,147.7px) rotate(1.8deg)} 87.5%{transform:translate(153.0px,147.4px) rotate(-4.9deg)} 89.58%{transform:translate(163.7px,145.9px) rotate(-11.2deg)} 91.67%{transform:translate(174.2px,143.2px) rotate(-17.5deg)} 93.75%{transform:translate(184.3px,139.4px) rotate(-24.4deg)} 95.83%{transform:translate(193.8px,134.2px) rotate(-32.1deg)} 97.92%{transform:translate(202.5px,127.8px) rotate(-41.2deg)} 100%{transform:translate(210.0px,120.0px) rotate(-50.9deg)} } @keyframes swim-p5 { 0%{transform:translate(150.0px,110.0px) rotate(-43.9deg)} 2.083%{transform:translate(153.3px,105.8px) rotate(-47.9deg)} 4.167%{transform:translate(157.1px,102.1px) rotate(-40.1deg)} 6.25%{transform:translate(161.3px,99.0px) rotate(-33.0deg)} 8.333%{transform:translate(165.9px,96.4px) rotate(-26.5deg)} 10.42%{transform:translate(170.8px,94.2px) rotate(-20.8deg)} 12.5%{transform:translate(175.8px,92.6px) rotate(-15.5deg)} 14.58%{transform:translate(181.0px,91.4px) rotate(-10.6deg)} 16.67%{transform:translate(186.2px,90.6px) rotate(-6.0deg)} 18.75%{transform:translate(191.5px,90.3px) rotate(-1.5deg)} 20.83%{transform:translate(196.8px,90.4px) rotate(3.0deg)} 22.92%{transform:translate(202.1px,90.9px) rotate(7.7deg)} 25%{transform:translate(207.3px,91.8px) rotate(12.7deg)} 27.08%{transform:translate(212.4px,93.2px) rotate(18.3deg)} 29.17%{transform:translate(217.4px,95.1px) rotate(24.7deg)} 31.25%{transform:translate(222.0px,97.7px) rotate(32.4deg)} 33.33%{transform:translate(226.3px,100.8px) rotate(41.9deg)} 35.42%{transform:translate(229.8px,104.8px) rotate(53.7deg)} 37.5%{transform:translate(232.5px,109.4px) rotate(67.5deg)} 39.58%{transform:translate(233.8px,114.5px) rotate(82.1deg)} 41.67%{transform:translate(234.0px,119.7px) rotate(95.2deg)} 43.75%{transform:translate(232.9px,124.9px) rotate(108.2deg)} 45.83%{transform:translate(230.7px,129.7px) rotate(120.2deg)} 47.92%{transform:translate(227.6px,134.1px) rotate(130.5deg)} 50%{transform:translate(223.9px,137.8px) rotate(138.9deg)} 52.08%{transform:translate(219.7px,141.0px) rotate(145.8deg)} 54.17%{transform:translate(215.1px,143.8px) rotate(151.6deg)} 56.25%{transform:translate(210.4px,146.1px) rotate(156.6deg)} 58.33%{transform:translate(205.4px,148.0px) rotate(161.0deg)} 60.42%{transform:translate(200.4px,149.6px) rotate(165.0deg)} 62.5%{transform:translate(195.2px,150.8px) rotate(168.9deg)} 64.58%{transform:translate(190.0px,151.6px) rotate(172.5deg)} 66.67%{transform:translate(184.7px,152.1px) rotate(176.2deg)} 68.75%{transform:translate(179.4px,152.3px) rotate(179.9deg)} 70.83%{transform:translate(174.1px,152.1px) rotate(183.8deg)} 72.92%{transform:translate(168.8px,151.6px) rotate(187.8deg)} 75%{transform:translate(163.6px,150.7px) rotate(192.2deg)} 77.08%{transform:translate(158.5px,149.4px) rotate(197.0deg)} 79.17%{transform:translate(153.5px,147.6px) rotate(202.4deg)} 81.25%{transform:translate(148.7px,145.3px) rotate(207.9deg)} 83.33%{transform:translate(144.1px,142.6px) rotate(214.0deg)} 85.42%{transform:translate(140.0px,139.3px) rotate(223.6deg)} 87.5%{transform:translate(136.6px,135.2px) rotate(239.5deg)} 89.58%{transform:translate(134.9px,130.3px) rotate(264.0deg)} 91.67%{transform:translate(135.6px,125.0px) rotate(289.0deg)} 93.75%{transform:translate(138.1px,120.4px) rotate(305.9deg)} 95.83%{transform:translate(141.6px,116.4px) rotate(316.2deg)} 97.92%{transform:translate(145.6px,113.0px) rotate(323.0deg)} 100%{transform:translate(150.0px,110.0px) rotate(316.1deg)} } @keyframes swim-p6 { 0%{transform:translate(250.0px,90.0px) rotate(-24.3deg)} 2.083%{transform:translate(255.9px,87.9px) rotate(-17.9deg)} 4.167%{transform:translate(261.9px,86.2px) rotate(-14.0deg)} 6.25%{transform:translate(268.0px,84.9px) rotate(-9.9deg)} 8.333%{transform:translate(274.1px,84.0px) rotate(-5.8deg)} 10.42%{transform:translate(280.4px,83.6px) rotate(-1.6deg)} 12.5%{transform:translate(286.6px,83.7px) rotate(2.7deg)} 14.58%{transform:translate(292.8px,84.2px) rotate(7.2deg)} 16.67%{transform:translate(299.0px,85.2px) rotate(11.8deg)} 18.75%{transform:translate(305.0px,86.8px) rotate(16.6deg)} 20.83%{transform:translate(310.9px,88.8px) rotate(21.7deg)} 22.92%{transform:translate(316.6px,91.4px) rotate(27.2deg)} 25%{transform:translate(322.0px,94.5px) rotate(33.2deg)} 27.08%{transform:translate(327.0px,98.2px) rotate(39.9deg)} 29.17%{transform:translate(331.5px,102.5px) rotate(47.4deg)} 31.25%{transform:translate(335.4px,107.4px) rotate(56.0deg)} 33.33%{transform:translate(338.4px,112.9px) rotate(65.8deg)} 35.42%{transform:translate(340.4px,118.8px) rotate(76.6deg)} 37.5%{transform:translate(341.3px,124.9px) rotate(88.1deg)} 39.58%{transform:translate(340.9px,131.2px) rotate(99.3deg)} 41.67%{transform:translate(339.3px,137.2px) rotate(109.1deg)} 43.75%{transform:translate(336.8px,142.9px) rotate(118.0deg)} 45.83%{transform:translate(333.5px,148.2px) rotate(127.2deg)} 47.92%{transform:translate(329.3px,152.8px) rotate(136.3deg)} 50%{transform:translate(324.5px,156.7px) rotate(144.9deg)} 52.08%{transform:translate(319.1px,160.0px) rotate(152.9deg)} 54.17%{transform:translate(313.4px,162.4px) rotate(160.2deg)} 56.25%{transform:translate(307.4px,164.2px) rotate(167.0deg)} 58.33%{transform:translate(301.3px,165.2px) rotate(173.4deg)} 60.42%{transform:translate(295.1px,165.6px) rotate(179.5deg)} 62.5%{transform:translate(288.8px,165.4px) rotate(185.5deg)} 64.58%{transform:translate(282.7px,164.4px) rotate(191.4deg)} 66.67%{transform:translate(276.6px,162.9px) rotate(197.5deg)} 68.75%{transform:translate(270.8px,160.7px) rotate(203.7deg)} 70.83%{transform:translate(265.2px,157.9px) rotate(210.3deg)} 72.92%{transform:translate(260.0px,154.4px) rotate(217.2deg)} 75%{transform:translate(255.3px,150.3px) rotate(223.9deg)} 77.08%{transform:translate(250.9px,145.9px) rotate(226.2deg)} 79.17%{transform:translate(246.7px,141.3px) rotate(229.3deg)} 81.25%{transform:translate(242.8px,136.4px) rotate(233.2deg)} 83.33%{transform:translate(239.3px,131.3px) rotate(238.2deg)} 85.42%{transform:translate(236.3px,125.8px) rotate(244.9deg)} 87.5%{transform:translate(234.1px,120.0px) rotate(254.1deg)} 89.58%{transform:translate(233.0px,113.9px) rotate(266.9deg)} 91.67%{transform:translate(233.5px,107.7px) rotate(283.4deg)} 93.75%{transform:translate(235.9px,101.9px) rotate(300.9deg)} 95.83%{transform:translate(239.8px,97.0px) rotate(315.4deg)} 97.92%{transform:translate(244.6px,93.1px) rotate(325.9deg)} 100%{transform:translate(250.0px,90.0px) rotate(335.7deg)} } .pond .head[coi-scope="Pond"]{ transform-origin: 0 0; animation: yaw 1.8s ease-in-out infinite alternate; animation-delay: calc(0s - var(--t) * 1s); }
 .pond .rear[coi-scope="Pond"]{ transform-origin: -5px 0; animation: yaw2 1.8s ease-in-out infinite alternate; animation-delay: calc(-.45s - var(--t) * 1s); }
 .pond .tail[coi-scope="Pond"]{ transform-origin: -36px 0; animation: yaw3 1.8s ease-in-out infinite alternate; animation-delay: calc(-.9s - var(--t) * 1s); }
 .pond .k2 .head[coi-scope="Pond"],.pond .k2 .rear[coi-scope="Pond"],.pond .k2 .tail[coi-scope="Pond"]{ animation-duration: 2.8s; }
 .pond .k2 .head[coi-scope="Pond"]{ animation-delay: calc(-1.9s - var(--t) * 1s); }
 .pond .k2 .rear[coi-scope="Pond"]{ animation-delay: calc(-2.6s - var(--t) * 1s); }
 .pond .k2 .tail[coi-scope="Pond"]{ animation-delay: calc(-3.3s - var(--t) * 1s); }
 .pond .k3 .head[coi-scope="Pond"],.pond .k3 .rear[coi-scope="Pond"],.pond .k3 .tail[coi-scope="Pond"]{ animation-duration: 2.75s; }
 .pond .k3 .head[coi-scope="Pond"]{ animation-delay: calc(-.9s - var(--t) * 1s); }
 .pond .k3 .rear[coi-scope="Pond"]{ animation-delay: calc(-1.4s - var(--t) * 1s); }
 .pond .k3 .tail[coi-scope="Pond"]{ animation-delay: calc(-1.9s - var(--t) * 1s); }
  .pond .lobe[coi-scope="Pond"]{ transform-origin: -36px 0; animation: fold 4.7s ease-in-out infinite; animation-delay: calc(0s - var(--t) * 1s); }
 .pond .k2 .lobe[coi-scope="Pond"]{ animation-duration: 7.3s; animation-delay: calc(-3s - var(--t) * 1s); }
 .pond .k3 .lobe[coi-scope="Pond"]{ animation-duration: 7.2s; animation-delay: calc(-4.4s - var(--t) * 1s); }
 @keyframes yaw { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } } @keyframes yaw2 { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } } @keyframes yaw3 { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } } @keyframes fold { 0%, 100% { transform: skewY(4deg) scaleY(1); } 30% { transform: skewY(-3deg) scaleY(1.1); } 52% { transform: skewY(2deg) scaleY(.95); } 68% { transform: skewY(-2deg) scaleY(1.5); } 82% { transform: skewY(5deg) scaleY(1.1); } } .pond .pec[coi-scope="Pond"]{ transform-origin: 24px -11px; animation: paddle 2.8s ease-in-out infinite alternate; animation-delay: calc(0s - var(--t) * 1s); }
 .pond .k2 .pec[coi-scope="Pond"]{ animation-duration: 4s; animation-delay: calc(-1.5s - var(--t) * 1s); }
 .pond .k3 .pec[coi-scope="Pond"]{ animation-duration: 3.9s; animation-delay: calc(-.7s - var(--t) * 1s); }
 .pond .pec.r[coi-scope="Pond"]{ transform-origin: 24px 11px; animation-name: paddle-r; }
 @keyframes paddle { from { transform: rotate(-8deg); } to { transform: rotate(6deg); } } @keyframes paddle-r { from { transform: rotate(8deg); } to { transform: rotate(-6deg); } }  .pond .fish[coi-scope="Pond"]{ --body: color-mix(in srgb, var(--c) 75%, var(--w2)); }
 .app.dark .pond .fish[coi-scope="Pond"]{ --body: color-mix(in srgb, var(--c) 55%, var(--w2)); }
 .pond .koi[coi-scope="Pond"]{ fill: var(--body); }
 .pond .fin[coi-scope="Pond"]{ fill: var(--body); opacity: .6; }
 .pond .spot[coi-scope="Pond"]{ fill: var(--koi-w); }
  .pond .ring[coi-scope="Pond"]{ fill: none; stroke: var(--shine); stroke-width: 1; }
 .pond .plip[coi-scope="Pond"]{ opacity: 0; transform-origin: 0 0; animation: plip 9s ease-out infinite; animation-delay: calc(0s - var(--t) * 1s); }
 .pond .plip.late[coi-scope="Pond"]{ animation-delay: calc(.5s - var(--t) * 1s); }
 .pond .p2 .plip[coi-scope="Pond"]{ animation-duration: 13s; animation-delay: calc(-5s - var(--t) * 1s); }
 .pond .p2 .plip.late[coi-scope="Pond"]{ animation-delay: calc(-4.5s - var(--t) * 1s); }
 .pond .p3 .plip[coi-scope="Pond"]{ animation-duration: 11s; animation-delay: calc(-8s - var(--t) * 1s); }
 .pond .p3 .plip.late[coi-scope="Pond"]{ animation-delay: calc(-7.5s - var(--t) * 1s); }
 @keyframes plip { 0% { transform: scale(.15); opacity: .7; } 30% { transform: scale(1); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }  .pond .pad[coi-scope="Pond"]{ fill: var(--pad); stroke: var(--rim); stroke-width: .9; stroke-linejoin: round; }
 .pond .pad.old[coi-scope="Pond"]{ fill: var(--old); stroke: var(--old-rim); }
 .pond .pad.young[coi-scope="Pond"]{ fill: var(--young); }
 .pond .vein[coi-scope="Pond"]{ fill: none; stroke: var(--vein); stroke-width: .8; opacity: .8; stroke-linecap: round; }
 .pond .bob[coi-scope="Pond"]{ transform-origin: 0 0; animation: bob 9s ease-in-out infinite; animation-delay: calc(0s - var(--t) * 1s); }
 .pond .bob.b[coi-scope="Pond"]{ animation-duration: 12s; animation-delay: calc(-4s - var(--t) * 1s); animation-direction: reverse; }
 .pond .bob.c[coi-scope="Pond"]{ animation-duration: 7s; animation-delay: calc(-2s - var(--t) * 1s); }
 .pond .bob.d[coi-scope="Pond"]{ animation-duration: 14s; animation-delay: calc(-9s - var(--t) * 1s); animation-direction: reverse; }
 .pond .bob.e[coi-scope="Pond"]{ animation-duration: 10s; animation-delay: calc(-6s - var(--t) * 1s); }
 @keyframes bob { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 35% { transform: translate(1.6px, -.8px) rotate(3deg); } 70% { transform: translate(-.8px, .9px) rotate(-1.5deg); } } .pond .wander[coi-scope="Pond"]{ animation: wander 23s ease-in-out infinite alternate; animation-delay: calc(0s - var(--t) * 1s); }
 .pond .wander.b[coi-scope="Pond"]{ animation-duration: 31s; animation-delay: calc(-11s - var(--t) * 1s); }
 @keyframes wander { from { transform: translate(0, 0); } to { transform: translate(9px, -4px); } } .pond .petal[coi-scope="Pond"]{ fill: color-mix(in srgb, #f5b3c6 80%, var(--bg)); stroke: color-mix(in srgb, #e892ab 80%, var(--bg)); stroke-width: .6; }
 .pond .petal.in[coi-scope="Pond"]{ fill: color-mix(in srgb, #fcdde6 80%, var(--bg)); }
 .pond .heart[coi-scope="Pond"]{ fill: color-mix(in srgb, #f2c94c 80%, var(--bg)); }
 .pond .gleam[coi-scope="Pond"]{ stroke: var(--shine); stroke-width: 1.4; stroke-linecap: round; }
 .pond .glint[coi-scope="Pond"]{ opacity: 0; animation: glint 6s ease-in-out infinite; animation-delay: calc(0s - var(--t) * 1s); }
 .pond .glint.b[coi-scope="Pond"]{ animation-delay: calc(-2s - var(--t) * 1s); animation-duration: 7.5s; }
 .pond .glint.c[coi-scope="Pond"]{ animation-delay: calc(-4s - var(--t) * 1s); animation-duration: 5s; }
 @keyframes glint { 0%, 100% { opacity: 0; } 50% { opacity: .75; } }  .pond .reed[coi-scope="Pond"]{ fill: none; stroke: var(--reed); stroke-width: 1.6; stroke-linecap: round; }
 .pond .cattail[coi-scope="Pond"]{ fill: var(--tail); }
 .pond .sway[coi-scope="Pond"]{ transform-origin: 0 0; animation: sway 5s ease-in-out infinite; animation-delay: calc(0s - var(--t) * 1s); }
 .pond .sway.b[coi-scope="Pond"]{ animation-duration: 6.5s; animation-delay: calc(-2s - var(--t) * 1s); }
 .pond .sway.c[coi-scope="Pond"]{ animation-duration: 4.2s; animation-delay: calc(-1s - var(--t) * 1s); }
 @keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } } .pond.still *[coi-scope="Pond"]{ animation-play-state: paused; }
 .wakes:hover .pond.still *[coi-scope="Pond"],.wakes:focus-visible .pond.still *[coi-scope="Pond"]{ animation-play-state: running; }
 @media (prefers-reduced-motion: reduce) {
.pond *[coi-scope="Pond"]{ animation: none !important; }
}


/* TogetherDemo */
  .demo[coi-scope="TogetherDemo"]{ position: relative; width: 388px; max-width: 100%; height: 204px; overflow: hidden; box-sizing: border-box; background-color: var(--sheet); background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size: 24px 24px; border: 1px solid var(--line); border-radius: 14px; }
 .demo .ink[coi-scope="TogetherDemo"]{ position: absolute; left: 0; top: 0; width: 388px; height: 204px; overflow: visible; }
 .demo .w[coi-scope="TogetherDemo"]{ fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
 .demo .wa[coi-scope="TogetherDemo"]{ stroke: #2f9e74; }
 .demo .wm[coi-scope="TogetherDemo"]{ stroke: #e5484d; }
 .demo .block[coi-scope="TogetherDemo"]{ position: absolute; left: 22px; top: 32px; width: 140px; border-radius: 8px; padding: 6px 10px; box-shadow: 0 0 0 2px var(--held); --held: #3a6ff0; }
 .demo .holder[coi-scope="TogetherDemo"]{ position: absolute; left: -2px; bottom: 100%; margin-bottom: 4px; padding: 2px 8px; border-radius: 6px; background: var(--held); color: #fff; font: 600 11.5px/1.4 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
 .demo .ed[coi-scope="TogetherDemo"]{ font: 16px/1.5 Inter, system-ui, sans-serif; color: var(--text); white-space: nowrap; }
 .demo .typed[coi-scope="TogetherDemo"]{ animation: pn-again 16s linear -4.5s infinite; }
 .demo .key[coi-scope="TogetherDemo"]{ display: inline-block; vertical-align: bottom; overflow: hidden; max-width: 1em; }
 .demo .rcaret[coi-scope="TogetherDemo"]{ display: inline-block; width: 2px; height: 1.15em; margin: 0 -1px; vertical-align: -.2em; border-radius: 1px; background: var(--held); animation: pn-blink 1s steps(1) infinite; }
 .demo .who[coi-scope="TogetherDemo"]{ position: absolute; left: 0; top: 0; z-index: 3; }
 .demo .who svg[coi-scope="TogetherDemo"]{ display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
 .demo .who span[coi-scope="TogetherDemo"]{ position: absolute; left: 14px; top: 15px; padding: 2px 7px; border-radius: 6px; background: var(--who); color: #fff; font: 600 11.5px/1.4 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
 @keyframes pn-blink { 50% { opacity: 0; } } @keyframes pn-again { 0%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } } @keyframes pn-anna { 0.00% { transform: translate(195.2px, 51.9px); } 6.00% { transform: translate(195.2px, 51.9px); } 6.39% { transform: translate(189.4px, 56.4px); } 6.78% { transform: translate(198.8px, 53.6px); } 6.98% { transform: translate(198.8px, 54.0px); } 7.58% { transform: translate(202.4px, 40.7px); } 8.18% { transform: translate(198.8px, 58.5px); } 8.38% { transform: translate(198.8px, 58.5px); } 8.84% { transform: translate(206.9px, 52.3px); } 9.29% { transform: translate(212.3px, 54.0px); } 9.51% { transform: translate(212.3px, 52.8px); } 10.23% { transform: translate(214.5px, 43.0px); } 10.95% { transform: translate(219.5px, 52.8px); } 11.24% { transform: translate(224.9px, 49.9px); } 11.87% { transform: translate(227.2px, 55.0px); } 12.49% { transform: translate(232.1px, 53.5px); } 12.69% { transform: translate(232.1px, 53.1px); } 13.08% { transform: translate(238.1px, 53.6px); } 13.46% { transform: translate(243.8px, 53.1px); } 13.76% { transform: translate(249.2px, 49.2px); } 14.38% { transform: translate(251.5px, 54.3px); } 15.01% { transform: translate(256.4px, 52.8px); } 15.20% { transform: translate(256.4px, 52.8px); } 15.61% { transform: translate(256.7px, 56.3px); } 16.02% { transform: translate(252.8px, 68.1px); } 16.47% { transform: translate(258.2px, 51.9px); } 16.74% { transform: translate(264.7px, 50.7px); } 17.02% { transform: translate(261.8px, 57.3px); } 17.27% { transform: translate(258.2px, 56.4px); } 17.49% { transform: translate(264.6px, 56.6px); } 17.71% { transform: translate(269.9px, 52.8px); } 17.91% { transform: translate(269.9px, 53.0px); } 18.51% { transform: translate(273.5px, 39.8px); } 19.11% { transform: translate(269.9px, 57.5px); } 19.30% { transform: translate(269.9px, 57.5px); } 19.76% { transform: translate(277.9px, 51.3px); } 20.22% { transform: translate(283.4px, 53.0px); } 20.42% { transform: translate(283.4px, 52.5px); } 20.74% { transform: translate(284.1px, 56.7px); } 21.07% { transform: translate(291.5px, 51.6px); } 21.31% { transform: translate(292.3px, 48.9px); } 22.01% { transform: translate(283.9px, 67.5px); } 22.71% { transform: translate(296.9px, 52.5px); } 22.91% { transform: translate(296.8px, 52.4px); } 23.63% { transform: translate(299.1px, 42.6px); } 24.35% { transform: translate(304.1px, 52.4px); } 24.56% { transform: translate(304.0px, 52.1px); } 25.28% { transform: translate(306.3px, 42.3px); } 26.00% { transform: translate(311.3px, 52.1px); } 47.50% { transform: translate(311.3px, 52.1px); } 48.00% { transform: translate(318.3px, 50.1px); } 48.60% { transform: translate(304.3px, 54.1px); } 49.20% { transform: translate(317.3px, 50.1px); } 49.80% { transform: translate(305.3px, 54.1px); } 50.40% { transform: translate(315.3px, 50.1px); } 51.00% { transform: translate(308.3px, 54.1px); } 51.60% { transform: translate(311.3px, 50.1px); } 52.40% { transform: translate(311.3px, 52.1px); } 56.70% { transform: translate(195.2px, 51.9px); } 57.00% { transform: translate(195.2px, 51.9px); } 57.39% { transform: translate(189.4px, 56.4px); } 57.78% { transform: translate(198.8px, 53.6px); } 57.98% { transform: translate(198.8px, 54.0px); } 58.58% { transform: translate(202.4px, 40.7px); } 59.18% { transform: translate(198.8px, 58.5px); } 59.38% { transform: translate(198.8px, 58.5px); } 59.84% { transform: translate(206.9px, 52.3px); } 60.29% { transform: translate(212.3px, 54.0px); } 60.51% { transform: translate(212.3px, 52.8px); } 61.23% { transform: translate(214.5px, 43.0px); } 61.95% { transform: translate(219.5px, 52.8px); } 62.24% { transform: translate(224.9px, 49.9px); } 62.87% { transform: translate(227.2px, 55.0px); } 63.49% { transform: translate(232.1px, 53.5px); } 63.69% { transform: translate(232.1px, 53.1px); } 64.08% { transform: translate(238.1px, 53.6px); } 64.46% { transform: translate(243.8px, 53.1px); } 64.76% { transform: translate(249.2px, 49.2px); } 65.38% { transform: translate(251.5px, 54.3px); } 66.01% { transform: translate(256.4px, 52.8px); } 66.20% { transform: translate(256.4px, 52.8px); } 66.61% { transform: translate(256.7px, 56.3px); } 67.02% { transform: translate(252.8px, 68.1px); } 67.47% { transform: translate(258.2px, 51.9px); } 67.74% { transform: translate(264.7px, 50.7px); } 68.02% { transform: translate(261.8px, 57.3px); } 68.27% { transform: translate(258.2px, 56.4px); } 68.49% { transform: translate(264.6px, 56.6px); } 68.71% { transform: translate(269.9px, 52.8px); } 68.91% { transform: translate(269.9px, 53.0px); } 69.51% { transform: translate(273.5px, 39.8px); } 70.11% { transform: translate(269.9px, 57.5px); } 70.30% { transform: translate(269.9px, 57.5px); } 70.76% { transform: translate(277.9px, 51.3px); } 71.22% { transform: translate(283.4px, 53.0px); } 71.42% { transform: translate(283.4px, 52.5px); } 71.74% { transform: translate(284.1px, 56.7px); } 72.07% { transform: translate(291.5px, 51.6px); } 72.31% { transform: translate(292.3px, 48.9px); } 73.01% { transform: translate(283.9px, 67.5px); } 73.71% { transform: translate(296.9px, 52.5px); } 73.91% { transform: translate(296.8px, 52.4px); } 74.63% { transform: translate(299.1px, 42.6px); } 75.35% { transform: translate(304.1px, 52.4px); } 75.56% { transform: translate(304.0px, 52.1px); } 76.28% { transform: translate(306.3px, 42.3px); } 77.00% { transform: translate(311.3px, 52.1px); } 90.00% { transform: translate(311.3px, 52.1px); } 98.00% { transform: translate(195.2px, 51.9px); } 100.00% { transform: translate(195.2px, 51.9px); } } .demo .anna[coi-scope="TogetherDemo"]{ --who: #2f9e74; transform: translate(311.3px, 52.1px); animation: pn-anna 16s linear -4.5s infinite; }
 @keyframes pn-a0 { 0%, 6.00% { stroke-dashoffset: 1.01; opacity: 1; } 6.78%, 45.35% { stroke-dashoffset: 0; opacity: 1; } 45.65% { stroke-dashoffset: 0; opacity: 0; } 45.75%, 57.00% { stroke-dashoffset: 1.01; opacity: 0; } 57.01% { stroke-dashoffset: 1.01; opacity: 1; } 57.78%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a0[coi-scope="TogetherDemo"]{ animation: pn-a0 16s linear -4.5s infinite; }
 @keyframes pn-a1 { 0%, 6.98% { stroke-dashoffset: 1.01; opacity: 1; } 8.18%, 44.90% { stroke-dashoffset: 0; opacity: 1; } 45.20% { stroke-dashoffset: 0; opacity: 0; } 45.30%, 57.98% { stroke-dashoffset: 1.01; opacity: 0; } 57.99% { stroke-dashoffset: 1.01; opacity: 1; } 59.18%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a1[coi-scope="TogetherDemo"]{ animation: pn-a1 16s linear -4.5s infinite; }
 @keyframes pn-a2 { 0%, 8.38% { stroke-dashoffset: 1.01; opacity: 1; } 9.29%, 44.55% { stroke-dashoffset: 0; opacity: 1; } 44.85% { stroke-dashoffset: 0; opacity: 0; } 44.95%, 59.38% { stroke-dashoffset: 1.01; opacity: 0; } 59.39% { stroke-dashoffset: 1.01; opacity: 1; } 60.29%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a2[coi-scope="TogetherDemo"]{ animation: pn-a2 16s linear -4.5s infinite; }
 @keyframes pn-a3 { 0%, 9.51% { stroke-dashoffset: 1.01; opacity: 1; } 10.95%, 44.30% { stroke-dashoffset: 0; opacity: 1; } 44.60% { stroke-dashoffset: 0; opacity: 0; } 44.70%, 60.51% { stroke-dashoffset: 1.01; opacity: 0; } 60.52% { stroke-dashoffset: 1.01; opacity: 1; } 61.95%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a3[coi-scope="TogetherDemo"]{ animation: pn-a3 16s linear -4.5s infinite; }
 @keyframes pn-a4 { 0%, 11.24% { stroke-dashoffset: 1.01; opacity: 1; } 12.49%, 43.60% { stroke-dashoffset: 0; opacity: 1; } 43.90% { stroke-dashoffset: 0; opacity: 0; } 44.00%, 62.24% { stroke-dashoffset: 1.01; opacity: 0; } 62.25% { stroke-dashoffset: 1.01; opacity: 1; } 63.49%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a4[coi-scope="TogetherDemo"]{ animation: pn-a4 16s linear -4.5s infinite; }
 @keyframes pn-a5 { 0%, 12.69% { stroke-dashoffset: 1.01; opacity: 1; } 13.46%, 43.20% { stroke-dashoffset: 0; opacity: 1; } 43.50% { stroke-dashoffset: 0; opacity: 0; } 43.60%, 63.69% { stroke-dashoffset: 1.01; opacity: 0; } 63.70% { stroke-dashoffset: 1.01; opacity: 1; } 64.46%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a5[coi-scope="TogetherDemo"]{ animation: pn-a5 16s linear -4.5s infinite; }
 @keyframes pn-a6 { 0%, 13.76% { stroke-dashoffset: 1.01; opacity: 1; } 15.01%, 42.40% { stroke-dashoffset: 0; opacity: 1; } 42.70% { stroke-dashoffset: 0; opacity: 0; } 42.80%, 64.76% { stroke-dashoffset: 1.01; opacity: 0; } 64.77% { stroke-dashoffset: 1.01; opacity: 1; } 66.01%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a6[coi-scope="TogetherDemo"]{ animation: pn-a6 16s linear -4.5s infinite; }
 @keyframes pn-a7 { 0%, 15.20% { stroke-dashoffset: 1.01; opacity: 1; } 16.02%, 42.35% { stroke-dashoffset: 0; opacity: 1; } 42.65% { stroke-dashoffset: 0; opacity: 0; } 42.75%, 66.20% { stroke-dashoffset: 1.01; opacity: 0; } 66.21% { stroke-dashoffset: 1.01; opacity: 1; } 67.02%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a7[coi-scope="TogetherDemo"]{ animation: pn-a7 16s linear -4.5s infinite; }
 @keyframes pn-a8 { 0%, 16.47% { stroke-dashoffset: 1.01; opacity: 1; } 17.02%, 42.20% { stroke-dashoffset: 0; opacity: 1; } 42.50% { stroke-dashoffset: 0; opacity: 0; } 42.60%, 67.47% { stroke-dashoffset: 1.01; opacity: 0; } 67.48% { stroke-dashoffset: 1.01; opacity: 1; } 68.02%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a8[coi-scope="TogetherDemo"]{ animation: pn-a8 16s linear -4.5s infinite; }
 @keyframes pn-a9 { 0%, 17.27% { stroke-dashoffset: 1.01; opacity: 1; } 17.71%, 42.15% { stroke-dashoffset: 0; opacity: 1; } 42.45% { stroke-dashoffset: 0; opacity: 0; } 42.55%, 68.27% { stroke-dashoffset: 1.01; opacity: 0; } 68.28% { stroke-dashoffset: 1.01; opacity: 1; } 68.71%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a9[coi-scope="TogetherDemo"]{ animation: pn-a9 16s linear -4.5s infinite; }
 @keyframes pn-a10 { 0%, 17.91% { stroke-dashoffset: 1.01; opacity: 1; } 19.11%, 41.65% { stroke-dashoffset: 0; opacity: 1; } 41.95% { stroke-dashoffset: 0; opacity: 0; } 42.05%, 68.91% { stroke-dashoffset: 1.01; opacity: 0; } 68.92% { stroke-dashoffset: 1.01; opacity: 1; } 70.11%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a10[coi-scope="TogetherDemo"]{ animation: pn-a10 16s linear -4.5s infinite; }
 @keyframes pn-a11 { 0%, 19.30% { stroke-dashoffset: 1.01; opacity: 1; } 20.22%, 41.20% { stroke-dashoffset: 0; opacity: 1; } 41.50% { stroke-dashoffset: 0; opacity: 0; } 41.60%, 70.30% { stroke-dashoffset: 1.01; opacity: 0; } 70.31% { stroke-dashoffset: 1.01; opacity: 1; } 71.22%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a11[coi-scope="TogetherDemo"]{ animation: pn-a11 16s linear -4.5s infinite; }
 @keyframes pn-a12 { 0%, 20.42% { stroke-dashoffset: 1.01; opacity: 1; } 21.07%, 41.10% { stroke-dashoffset: 0; opacity: 1; } 41.40% { stroke-dashoffset: 0; opacity: 0; } 41.50%, 71.42% { stroke-dashoffset: 1.01; opacity: 0; } 71.43% { stroke-dashoffset: 1.01; opacity: 1; } 72.07%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a12[coi-scope="TogetherDemo"]{ animation: pn-a12 16s linear -4.5s infinite; }
 @keyframes pn-a13 { 0%, 21.31% { stroke-dashoffset: 1.01; opacity: 1; } 22.71%, 40.05% { stroke-dashoffset: 0; opacity: 1; } 40.35% { stroke-dashoffset: 0; opacity: 0; } 40.45%, 72.31% { stroke-dashoffset: 1.01; opacity: 0; } 72.32% { stroke-dashoffset: 1.01; opacity: 1; } 73.71%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a13[coi-scope="TogetherDemo"]{ animation: pn-a13 16s linear -4.5s infinite; }
 @keyframes pn-a14 { 0%, 22.91% { stroke-dashoffset: 1.01; opacity: 1; } 24.35%, 39.85% { stroke-dashoffset: 0; opacity: 1; } 40.15% { stroke-dashoffset: 0; opacity: 0; } 40.25%, 73.91% { stroke-dashoffset: 1.01; opacity: 0; } 73.92% { stroke-dashoffset: 1.01; opacity: 1; } 75.35%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a14[coi-scope="TogetherDemo"]{ animation: pn-a14 16s linear -4.5s infinite; }
 @keyframes pn-a15 { 0%, 24.56% { stroke-dashoffset: 1.01; opacity: 1; } 26.00%, 39.65% { stroke-dashoffset: 0; opacity: 1; } 39.95% { stroke-dashoffset: 0; opacity: 0; } 40.05%, 75.56% { stroke-dashoffset: 1.01; opacity: 0; } 75.57% { stroke-dashoffset: 1.01; opacity: 1; } 77.00%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .a15[coi-scope="TogetherDemo"]{ animation: pn-a15 16s linear -4.5s infinite; }
 @keyframes pn-mia { 0.00% { transform: translate(125.0px, 147.5px); } 15.00% { transform: translate(125.0px, 147.5px); } 15.63% { transform: translate(117.1px, 148.3px); } 16.25% { transform: translate(124.1px, 151.1px); } 16.77% { transform: translate(125.9px, 144.8px); } 18.01% { transform: translate(117.5px, 163.2px); } 19.24% { transform: translate(130.4px, 148.3px); } 19.62% { transform: translate(130.4px, 147.3px); } 20.89% { transform: translate(132.6px, 137.5px); } 22.17% { transform: translate(137.6px, 147.3px); } 22.52% { transform: translate(137.6px, 147.7px); } 23.09% { transform: translate(138.3px, 151.9px); } 23.66% { transform: translate(145.7px, 146.8px); } 24.08% { transform: translate(146.6px, 144.1px); } 24.54% { transform: translate(145.3px, 151.7px); } 25.00% { transform: translate(151.1px, 147.7px); } 25.52% { transform: translate(157.4px, 146.3px); } 26.21% { transform: translate(151.6px, 150.8px); } 26.90% { transform: translate(161.0px, 148.1px); } 27.42% { transform: translate(166.3px, 143.9px); } 28.52% { transform: translate(168.7px, 149.0px); } 29.62% { transform: translate(173.5px, 147.5px); } 29.99% { transform: translate(173.6px, 148.3px); } 30.42% { transform: translate(177.0px, 146.8px); } 30.85% { transform: translate(177.2px, 152.8px); } 31.29% { transform: translate(173.6px, 151.9px); } 31.64% { transform: translate(179.4px, 152.5px); } 31.99% { transform: translate(183.5px, 148.3px); } 32.39% { transform: translate(184.3px, 150.1px); } 33.20% { transform: translate(183.5px, 147.4px); } 34.00% { transform: translate(192.4px, 147.4px); } 57.50% { transform: translate(192.4px, 147.4px); } 58.00% { transform: translate(199.4px, 145.4px); } 58.60% { transform: translate(185.4px, 149.4px); } 59.20% { transform: translate(198.4px, 145.4px); } 59.80% { transform: translate(186.4px, 149.4px); } 60.40% { transform: translate(196.4px, 145.4px); } 61.00% { transform: translate(189.4px, 149.4px); } 61.60% { transform: translate(192.4px, 145.4px); } 62.40% { transform: translate(192.4px, 147.4px); } 65.70% { transform: translate(125.0px, 147.5px); } 66.00% { transform: translate(125.0px, 147.5px); } 66.59% { transform: translate(117.1px, 148.3px); } 67.19% { transform: translate(124.1px, 151.1px); } 67.68% { transform: translate(125.9px, 144.8px); } 68.85% { transform: translate(117.5px, 163.2px); } 70.02% { transform: translate(130.4px, 148.3px); } 70.38% { transform: translate(130.4px, 147.3px); } 71.58% { transform: translate(132.6px, 137.5px); } 72.79% { transform: translate(137.6px, 147.3px); } 73.13% { transform: translate(137.6px, 147.7px); } 73.66% { transform: translate(138.3px, 151.9px); } 74.20% { transform: translate(145.7px, 146.8px); } 74.60% { transform: translate(146.6px, 144.1px); } 75.04% { transform: translate(145.3px, 151.7px); } 75.48% { transform: translate(151.1px, 147.7px); } 75.97% { transform: translate(157.4px, 146.3px); } 76.62% { transform: translate(151.6px, 150.8px); } 77.27% { transform: translate(161.0px, 148.1px); } 77.77% { transform: translate(166.3px, 143.9px); } 78.81% { transform: translate(168.7px, 149.0px); } 79.85% { transform: translate(173.5px, 147.5px); } 80.20% { transform: translate(173.6px, 148.3px); } 80.61% { transform: translate(177.0px, 146.8px); } 81.02% { transform: translate(177.2px, 152.8px); } 81.44% { transform: translate(173.6px, 151.9px); } 81.77% { transform: translate(179.4px, 152.5px); } 82.10% { transform: translate(183.5px, 148.3px); } 82.47% { transform: translate(184.3px, 150.1px); } 83.24% { transform: translate(183.5px, 147.4px); } 84.00% { transform: translate(192.4px, 147.4px); } 90.00% { transform: translate(192.4px, 147.4px); } 98.00% { transform: translate(125.0px, 147.5px); } 100.00% { transform: translate(125.0px, 147.5px); } } .demo .mia[coi-scope="TogetherDemo"]{ --who: #e5484d; transform: translate(192.4px, 147.4px); animation: pn-mia 16s linear -4.5s infinite; }
 @keyframes pn-m0 { 0%, 15.00% { stroke-dashoffset: 1.01; opacity: 1; } 16.25%, 51.05% { stroke-dashoffset: 0; opacity: 1; } 51.35% { stroke-dashoffset: 0; opacity: 0; } 51.45%, 66.00% { stroke-dashoffset: 1.01; opacity: 0; } 66.01% { stroke-dashoffset: 1.01; opacity: 1; } 67.19%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .m0[coi-scope="TogetherDemo"]{ animation: pn-m0 16s linear -4.5s infinite; }
 @keyframes pn-m1 { 0%, 16.77% { stroke-dashoffset: 1.01; opacity: 1; } 19.24%, 51.15% { stroke-dashoffset: 0; opacity: 1; } 51.45% { stroke-dashoffset: 0; opacity: 0; } 51.55%, 67.68% { stroke-dashoffset: 1.01; opacity: 0; } 67.69% { stroke-dashoffset: 1.01; opacity: 1; } 70.02%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .m1[coi-scope="TogetherDemo"]{ animation: pn-m1 16s linear -4.5s infinite; }
 @keyframes pn-m2 { 0%, 19.62% { stroke-dashoffset: 1.01; opacity: 1; } 22.17%, 51.40% { stroke-dashoffset: 0; opacity: 1; } 51.70% { stroke-dashoffset: 0; opacity: 0; } 51.80%, 70.38% { stroke-dashoffset: 1.01; opacity: 0; } 70.39% { stroke-dashoffset: 1.01; opacity: 1; } 72.79%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .m2[coi-scope="TogetherDemo"]{ animation: pn-m2 16s linear -4.5s infinite; }
 @keyframes pn-m3 { 0%, 22.52% { stroke-dashoffset: 1.01; opacity: 1; } 23.66%, 52.20% { stroke-dashoffset: 0; opacity: 1; } 52.50% { stroke-dashoffset: 0; opacity: 0; } 52.60%, 73.13% { stroke-dashoffset: 1.01; opacity: 0; } 73.14% { stroke-dashoffset: 1.01; opacity: 1; } 74.20%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .m3[coi-scope="TogetherDemo"]{ animation: pn-m3 16s linear -4.5s infinite; }
 @keyframes pn-m4 { 0%, 24.08% { stroke-dashoffset: 1.01; opacity: 1; } 25.00%, 52.40% { stroke-dashoffset: 0; opacity: 1; } 52.70% { stroke-dashoffset: 0; opacity: 0; } 52.80%, 74.60% { stroke-dashoffset: 1.01; opacity: 0; } 74.61% { stroke-dashoffset: 1.01; opacity: 1; } 75.48%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .m4[coi-scope="TogetherDemo"]{ animation: pn-m4 16s linear -4.5s infinite; }
 @keyframes pn-m5 { 0%, 25.52% { stroke-dashoffset: 1.01; opacity: 1; } 26.90%, 53.15% { stroke-dashoffset: 0; opacity: 1; } 53.45% { stroke-dashoffset: 0; opacity: 0; } 53.55%, 75.97% { stroke-dashoffset: 1.01; opacity: 0; } 75.98% { stroke-dashoffset: 1.01; opacity: 1; } 77.27%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .m5[coi-scope="TogetherDemo"]{ animation: pn-m5 16s linear -4.5s infinite; }
 @keyframes pn-m6 { 0%, 27.42% { stroke-dashoffset: 1.01; opacity: 1; } 29.62%, 53.40% { stroke-dashoffset: 0; opacity: 1; } 53.70% { stroke-dashoffset: 0; opacity: 0; } 53.80%, 77.77% { stroke-dashoffset: 1.01; opacity: 0; } 77.78% { stroke-dashoffset: 1.01; opacity: 1; } 79.85%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .m6[coi-scope="TogetherDemo"]{ animation: pn-m6 16s linear -4.5s infinite; }
 @keyframes pn-m7 { 0%, 29.99% { stroke-dashoffset: 1.01; opacity: 1; } 30.85%, 54.35% { stroke-dashoffset: 0; opacity: 1; } 54.65% { stroke-dashoffset: 0; opacity: 0; } 54.75%, 80.20% { stroke-dashoffset: 1.01; opacity: 0; } 80.21% { stroke-dashoffset: 1.01; opacity: 1; } 81.02%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .m7[coi-scope="TogetherDemo"]{ animation: pn-m7 16s linear -4.5s infinite; }
 @keyframes pn-m8 { 0%, 31.29% { stroke-dashoffset: 1.01; opacity: 1; } 31.99%, 54.25% { stroke-dashoffset: 0; opacity: 1; } 54.55% { stroke-dashoffset: 0; opacity: 0; } 54.65%, 81.44% { stroke-dashoffset: 1.01; opacity: 0; } 81.45% { stroke-dashoffset: 1.01; opacity: 1; } 82.10%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .m8[coi-scope="TogetherDemo"]{ animation: pn-m8 16s linear -4.5s infinite; }
 @keyframes pn-m9 { 0%, 32.39% { stroke-dashoffset: 1.01; opacity: 1; } 34.00%, 55.15% { stroke-dashoffset: 0; opacity: 1; } 55.45% { stroke-dashoffset: 0; opacity: 0; } 55.55%, 82.47% { stroke-dashoffset: 1.01; opacity: 0; } 82.48% { stroke-dashoffset: 1.01; opacity: 1; } 84.00%, 90% { stroke-dashoffset: 0; opacity: 1; } 97%, 100% { stroke-dashoffset: 0; opacity: 0; } } .demo .m9[coi-scope="TogetherDemo"]{ animation: pn-m9 16s linear -4.5s infinite; }
 @keyframes pn-eric { 0.00% { transform: translate(428.0px, 50.5px); } 37.00% { transform: translate(428.0px, 50.5px); } 40.00% { transform: translate(310.0px, 50.5px); } 41.00% { transform: translate(294.0px, 36.5px); } 42.00% { transform: translate(276.0px, 70.5px); } 43.00% { transform: translate(256.0px, 36.5px); } 44.00% { transform: translate(236.0px, 70.5px); } 45.00% { transform: translate(216.0px, 36.5px); } 46.00% { transform: translate(198.0px, 68.5px); } 47.00% { transform: translate(184.0px, 44.5px); } 51.00% { transform: translate(112.0px, 134.5px); } 52.00% { transform: translate(126.0px, 166.5px); } 53.00% { transform: translate(142.0px, 130.5px); } 54.00% { transform: translate(158.0px, 166.5px); } 55.00% { transform: translate(174.0px, 130.5px); } 56.00% { transform: translate(190.0px, 164.5px); } 57.00% { transform: translate(206.0px, 138.5px); } 61.00% { transform: translate(428.0px, 116.5px); } 100.00% { transform: translate(428.0px, 50.5px); } } .demo .eric[coi-scope="TogetherDemo"]{ --who: #d9734e; transform: translate(428.0px, 50.5px); animation: pn-eric 16s linear -4.5s infinite; }
 @keyframes pn-k0 { 0%, 2.50% { max-width: 0; } 2.51%, 100% { max-width: 1em; } } .demo .k0[coi-scope="TogetherDemo"]{ animation: pn-k0 16s linear -4.5s infinite; }
 @keyframes pn-k1 { 0%, 3.46% { max-width: 0; } 3.47%, 100% { max-width: 1em; } } .demo .k1[coi-scope="TogetherDemo"]{ animation: pn-k1 16s linear -4.5s infinite; }
 @keyframes pn-k2 { 0%, 4.53% { max-width: 0; } 4.54%, 100% { max-width: 1em; } } .demo .k2[coi-scope="TogetherDemo"]{ animation: pn-k2 16s linear -4.5s infinite; }
 @keyframes pn-k3 { 0%, 8.02% { max-width: 0; } 8.03%, 100% { max-width: 1em; } } .demo .k3[coi-scope="TogetherDemo"]{ animation: pn-k3 16s linear -4.5s infinite; }
 @keyframes pn-k4 { 0%, 8.78% { max-width: 0; } 8.79%, 100% { max-width: 1em; } } .demo .k4[coi-scope="TogetherDemo"]{ animation: pn-k4 16s linear -4.5s infinite; }
 @keyframes pn-k5 { 0%, 9.76% { max-width: 0; } 9.77%, 100% { max-width: 1em; } } .demo .k5[coi-scope="TogetherDemo"]{ animation: pn-k5 16s linear -4.5s infinite; }
 @keyframes pn-k6 { 0%, 11.38% { max-width: 0; } 11.39%, 100% { max-width: 1em; } } .demo .k6[coi-scope="TogetherDemo"]{ animation: pn-k6 16s linear -4.5s infinite; }
 @keyframes pn-k7 { 0%, 12.86% { max-width: 0; } 12.87%, 100% { max-width: 1em; } } .demo .k7[coi-scope="TogetherDemo"]{ animation: pn-k7 16s linear -4.5s infinite; }
 @keyframes pn-k8 { 0%, 14.17% { max-width: 0; } 14.18%, 100% { max-width: 1em; } } .demo .k8[coi-scope="TogetherDemo"]{ animation: pn-k8 16s linear -4.5s infinite; }
 @keyframes pn-k9 { 0%, 15.47% { max-width: 0; } 15.48%, 100% { max-width: 1em; } } .demo .k9[coi-scope="TogetherDemo"]{ animation: pn-k9 16s linear -4.5s infinite; }
 @keyframes pn-k10 { 0%, 16.68% { max-width: 0; } 16.69%, 100% { max-width: 1em; } } .demo .k10[coi-scope="TogetherDemo"]{ animation: pn-k10 16s linear -4.5s infinite; }
 @keyframes pn-k11 { 0%, 20.21% { max-width: 0; } 20.22%, 100% { max-width: 1em; } } .demo .k11[coi-scope="TogetherDemo"]{ animation: pn-k11 16s linear -4.5s infinite; }
 @keyframes pn-k12 { 0%, 21.62% { max-width: 0; } 21.63%, 100% { max-width: 1em; } } .demo .k12[coi-scope="TogetherDemo"]{ animation: pn-k12 16s linear -4.5s infinite; }
 @keyframes pn-k13 { 0%, 24.82% { max-width: 0; } 24.83%, 100% { max-width: 1em; } } .demo .k13[coi-scope="TogetherDemo"]{ animation: pn-k13 16s linear -4.5s infinite; }
 @keyframes pn-k14 { 0%, 26.33% { max-width: 0; } 26.34%, 100% { max-width: 1em; } } .demo .k14[coi-scope="TogetherDemo"]{ animation: pn-k14 16s linear -4.5s infinite; }
 @keyframes pn-k15 { 0%, 27.71% { max-width: 0; } 27.72%, 100% { max-width: 1em; } } .demo .k15[coi-scope="TogetherDemo"]{ animation: pn-k15 16s linear -4.5s infinite; }
 @media (prefers-reduced-motion: reduce) {
.demo *[coi-scope="TogetherDemo"]{ animation: none !important; }
}


/* ProviderButton */
 .prov[coi-scope="ProviderButton"]{ display: flex; align-items: center; justify-content: center; gap: 12px; height: 50px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font: 600 15px/1 Inter, system-ui, sans-serif; color: var(--text); text-decoration: none; transition: border-color .15s, background .15s; }
 .prov[coi-scope="ProviderButton"]:hover{ border-color: color-mix(in srgb, var(--text) 22%, var(--line)); background: color-mix(in srgb, var(--panel) 96%, var(--text)); }
 .prov.discord[coi-scope="ProviderButton"]{ background: #5865f2; border-color: #5865f2; color: #fff; }
 .prov.discord[coi-scope="ProviderButton"]:hover{ background: #4f5bdb; border-color: #4f5bdb; }
 .prov.dev[coi-scope="ProviderButton"]{ border-style: dashed; color: var(--text-2); }
 .prov svg[coi-scope="ProviderButton"]{ flex: none; }


/* ProviderMark */
 .pm[coi-scope="ProviderMark"]{ display: grid; place-items: center; flex: none; }


/* CreatorTerms */
 ul[coi-scope="CreatorTerms"]{ margin: 0; padding-left: 20px; display: grid; gap: 8px; }
 li[coi-scope="CreatorTerms"]{ line-height: 1.55; }
 b[coi-scope="CreatorTerms"]{ font-weight: 600; }


/* CopyDialog */
  .backdrop[coi-scope="CopyDialog"]{ position: fixed; inset: 0; z-index: 90; background: var(--veil); animation: pn-fade var(--pn-dlg) ease-out both; }
 .dlg[coi-scope="CopyDialog"]{ position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); animation: pn-dialog var(--pn-dlg) cubic-bezier(.16, 1, .3, 1) both; }
 .out .backdrop[coi-scope="CopyDialog"]{ animation: pn-fade-out var(--pn-out) ease-in both; }
 .out .dlg[coi-scope="CopyDialog"]{ animation: pn-dialog-out var(--pn-out) ease-in both; }
 h2[coi-scope="CopyDialog"]{ margin: 0; font: 500 22px/1.2 Fraunces, Georgia, serif; letter-spacing: -.01em; }
 .lbl[coi-scope="CopyDialog"]{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; }
 input[coi-scope="CopyDialog"]{ width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 500 15px var(--font); outline: none; }
 input[coi-scope="CopyDialog"]:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 .slot[coi-scope="CopyDialog"]{ height: min(184px, 34vh); }
 .places[coi-scope="CopyDialog"]{ display: flex; flex-direction: column; gap: 10px; height: 100%; box-sizing: border-box; overflow: auto; margin: 0 -8px; padding: 0 8px; }
 .places.sks[coi-scope="CopyDialog"]{ gap: 2px; overflow: hidden; }
 .group[coi-scope="CopyDialog"]{ display: flex; flex-direction: column; gap: 2px; }
 .space[coi-scope="CopyDialog"]{ display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 2px 8px; }
 .space i[coi-scope="CopyDialog"]{ width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
 .row[coi-scope="CopyDialog"]{ display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 8px; text-align: left; font-size: 14px; color: var(--text); }
 .row[coi-scope="CopyDialog"]:hover{ background: var(--hover); }
 .row.on[coi-scope="CopyDialog"]{ background: var(--active); }
 .row .name[coi-scope="CopyDialog"]{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .row .book[coi-scope="CopyDialog"]{ color: var(--c); }
 .row .tick[coi-scope="CopyDialog"]{ color: var(--accent); }
 .sk[coi-scope="CopyDialog"]{ height: 32px; border-radius: 8px; background-color: var(--hover); animation: pn-pulse calc(var(--pn-dlg) * 6) ease-in-out infinite; }
 .sk.short[coi-scope="CopyDialog"]{ width: 40%; height: 16px; margin: 3px 0; }
 p[coi-scope="CopyDialog"]{ margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
 .foot[coi-scope="CopyDialog"]{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
 button.no[coi-scope="CopyDialog"]{ padding: 9px 16px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--text-2); border: 1px solid var(--line); }
 button.no[coi-scope="CopyDialog"]:hover{ background: var(--hover); color: var(--text); }
 button.ok[coi-scope="CopyDialog"]{ padding: 9px 16px; border-radius: 9px; font-weight: 600; font-size: 14px; background: var(--accent); color: #fff; }
 button.ok[coi-scope="CopyDialog"]:hover{ filter: brightness(1.08); }
 button.ok.off[coi-scope="CopyDialog"]{ opacity: .5; filter: none; }


/* ReportDialog */
  .backdrop[coi-scope="ReportDialog"]{ position: fixed; inset: 0; z-index: 90; background: var(--veil); animation: pn-fade var(--pn-dlg) ease-out both; }
 .dlg[coi-scope="ReportDialog"]{ position: fixed; z-index: 91; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); animation: pn-dialog var(--pn-dlg) cubic-bezier(.16, 1, .3, 1) both; }
 .out .backdrop[coi-scope="ReportDialog"]{ animation: pn-fade-out var(--pn-out) ease-in both; }
 .out .dlg[coi-scope="ReportDialog"]{ animation: pn-dialog-out var(--pn-out) ease-in both; }
 h2[coi-scope="ReportDialog"]{ margin: 0; font: 500 22px/1.2 Fraunces, Georgia, serif; letter-spacing: -.01em; }
 .intro[coi-scope="ReportDialog"]{ margin: -6px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.45; }
 .reasons[coi-scope="ReportDialog"]{ display: flex; flex-direction: column; gap: 6px; }
 .reason[coi-scope="ReportDialog"]{ display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); text-align: left; font-size: 14px; color: var(--text); }
 .reason[coi-scope="ReportDialog"]:hover{ background: var(--hover); }
 .reason i[coi-scope="ReportDialog"]{ width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--text-3); flex: none; box-sizing: border-box; }
 .reason.on[coi-scope="ReportDialog"]{ border-color: var(--accent); background: var(--accent-soft); }
 .reason.on i[coi-scope="ReportDialog"]{ border: 4.5px solid var(--accent); }
 .lbl[coi-scope="ReportDialog"]{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 6px; }
 textarea[coi-scope="ReportDialog"],input[coi-scope="ReportDialog"]{ width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 14px var(--font); outline: none; }
 textarea[coi-scope="ReportDialog"]{ min-height: 80px; resize: vertical; }
 textarea[coi-scope="ReportDialog"]:focus,input[coi-scope="ReportDialog"]:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
 .hint[coi-scope="ReportDialog"]{ margin: 6px 0 0; font-size: 12px; color: var(--text-3); }
 .error[coi-scope="ReportDialog"]{ margin: 0; font-size: 13px; color: var(--amber); }
 .acts[coi-scope="ReportDialog"]{ display: flex; justify-content: flex-end; gap: 8px; }
 .acts button[coi-scope="ReportDialog"]{ padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; }
 .cancel[coi-scope="ReportDialog"]{ color: var(--text-2); }
 .cancel[coi-scope="ReportDialog"]:hover{ background: var(--hover); }
 .send[coi-scope="ReportDialog"]{ background: var(--accent); color: #fff; }
 .send.off[coi-scope="ReportDialog"]{ opacity: .45; cursor: default; }
 .done[coi-scope="ReportDialog"]{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 8px 0 4px; }
 .done .ic[coi-scope="ReportDialog"]{ width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
 .done p[coi-scope="ReportDialog"]{ margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }


/* Crumbs */
 .crumbs[coi-scope="Crumbs"]{ display: flex; align-items: center; gap: 2px; color: var(--text-2); font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; }
 .crumbs button[coi-scope="Crumbs"],.crumbs .here[coi-scope="Crumbs"]{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; color: var(--text-2); min-width: 0; }
 .crumbs button[coi-scope="Crumbs"]:hover{ background: var(--hover); color: var(--text); }
 .crumbs .here[coi-scope="Crumbs"]{ color: var(--text); font-weight: 500; }
 .crumbs .label[coi-scope="Crumbs"]{ overflow: hidden; text-overflow: ellipsis; }
 .crumbs .sep[coi-scope="Crumbs"]{ color: var(--text-3); flex: none; display: grid; place-items: center; }
 .crumbs .sp[coi-scope="Crumbs"]{ color: var(--c); display: grid; place-items: center; flex: none; }
 .crumbs .book[coi-scope="Crumbs"]{ width: 9px; height: 12px; border-radius: 2px 3px 3px 2px; background: var(--c); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--c) 60%, #000); flex: none; }
 .crumbs .pg[coi-scope="Crumbs"]{ color: var(--text-3); display: grid; place-items: center; flex: none; }
 .crumbs .back[coi-scope="Crumbs"]{ display: none; color: var(--text-3); transform: rotate(180deg); }
 @media (max-width: 640px) {
.crumbs.note .space[coi-scope="Crumbs"],.crumbs.note .sep[coi-scope="Crumbs"],.crumbs.note .here[coi-scope="Crumbs"]{ display: none; }
.crumbs.note .back[coi-scope="Crumbs"]{ display: grid; }
.crumbs.note .up[coi-scope="Crumbs"]{ padding-left: 2px; color: var(--text); font-weight: 500; }
}


/* NotebookCover */
 .nbc[coi-scope="NotebookCover"]{ position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 0; min-width: 0; }
 .nbc.held[coi-scope="NotebookCover"]{ opacity: .4; }
  .nbc.before[coi-scope="NotebookCover"]::after,.nbc.after[coi-scope="NotebookCover"]::after{ content: ""; position: absolute; top: 0; height: calc(100% - 26px); width: 3px; border-radius: 2px; background: var(--accent); }
 .nbc.before[coi-scope="NotebookCover"]::after{ left: -14px; }
 .nbc.after[coi-scope="NotebookCover"]::after{ right: -14px; }
 .nbc.hidden[coi-scope="NotebookCover"]{ display: none; }
  .nbc[coi-scope="NotebookCover"]{ container-type: inline-size; }
 .book[coi-scope="NotebookCover"]{ --u: calc(100cqi / 132); position: relative; display: block; aspect-ratio: 3 / 4; border-radius: calc(4 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 20%, var(--panel)), color-mix(in srgb, var(--c) 32%, var(--panel)));  box-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 calc(-1 * var(--u)) var(--sheet), calc(3 * var(--u)) calc(3 * var(--u)) 0 0 var(--line), calc(6 * var(--u)) calc(6 * var(--u)) 0 calc(-2 * var(--u)) var(--sheet), calc(6 * var(--u)) calc(6 * var(--u)) 0 calc(-1 * var(--u)) var(--line), 0 calc(8 * var(--u)) calc(16 * var(--u)) calc(-12 * var(--u)) rgba(0,0,0,.3); transition: transform .2s, box-shadow .2s; }
 .book[coi-scope="NotebookCover"]::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(10 * var(--u)); border-radius: calc(4 * var(--u)) 0 0 calc(4 * var(--u)); background: linear-gradient(90deg, color-mix(in srgb, var(--c) 85%, #000), var(--c) 70%, color-mix(in srgb, var(--c) 70%, #fff)); }
 .book[coi-scope="NotebookCover"]::after{ content: ""; position: absolute; right: calc(14 * var(--u)); top: 0; bottom: 0; width: calc(4 * var(--u)); background: color-mix(in srgb, var(--c) 45%, transparent); }
 @media (hover: hover) {
.nbc:hover .book[coi-scope="NotebookCover"]{ transform: translateY(calc(-4 * var(--u))); box-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 calc(-1 * var(--u)) var(--sheet), calc(3 * var(--u)) calc(3 * var(--u)) 0 0 var(--line), calc(6 * var(--u)) calc(6 * var(--u)) 0 calc(-2 * var(--u)) var(--sheet), calc(6 * var(--u)) calc(6 * var(--u)) 0 calc(-1 * var(--u)) var(--line), 0 calc(14 * var(--u)) calc(22 * var(--u)) calc(-14 * var(--u)) rgba(0,0,0,.35); }
}
 .tag[coi-scope="NotebookCover"]{ position: absolute; left: calc(20 * var(--u)); right: calc(24 * var(--u)); top: 18%; padding: calc(8 * var(--u)) calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(4 * var(--u)); background: #fbf8f1; color: #24221e; box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.1); font: 500 calc(14 * var(--u))/1.2 Fraunces, Georgia, serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
  .name[coi-scope="NotebookCover"]{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .tag[coi-scope="NotebookCover"]::after{ content: ""; display: block; height: max(1px, var(--u)); margin-top: calc(3 * var(--u)); background: color-mix(in srgb, var(--c) 45%, transparent); }
 .fish[coi-scope="NotebookCover"]{ position: absolute; left: calc(18 * var(--u)); right: calc(18 * var(--u)); bottom: 12%; display: flex; justify-content: center; }
 .fish svg[coi-scope="NotebookCover"]{ width: calc(72 * var(--u)); height: auto; }
 .meta[coi-scope="NotebookCover"]{ font-size: 12px; color: var(--text-3); padding-left: 2px; }


/* Koi */
 svg[coi-scope="Koi"]{ display: block; overflow: visible; }
  g.koi[coi-scope="Koi"]{ opacity: .8; }
 .body[coi-scope="Koi"]{ fill: color-mix(in srgb, var(--body) 80%, #fff); }
 .fin[coi-scope="Koi"]{ fill: color-mix(in srgb, var(--body) 45%, #fff); }
 .mark[coi-scope="Koi"]{ fill: #fbf7ee; }


/* CreatorsPane */
 .pane[coi-scope="CreatorsPane"]{ animation: pn-fade var(--pn-in) ease-out both; }
 h3[coi-scope="CreatorsPane"]{ font: 500 22px Fraunces, Georgia, serif; margin: 2px 0 18px; }
 .sub[coi-scope="CreatorsPane"]{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 24px 0 10px; }
 p[coi-scope="CreatorsPane"]{ margin: 0; }
  .hero[coi-scope="CreatorsPane"]{ padding: 20px 22px; border-radius: 14px; background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 60%), radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--green) 10%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--accent) 4%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line)); }
 .hero h4[coi-scope="CreatorsPane"]{ font: 500 21px/1.2 Fraunces, Georgia, serif; margin: 0 0 6px; letter-spacing: -.01em; }
 .lead[coi-scope="CreatorsPane"]{ color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
 .perks[coi-scope="CreatorsPane"]{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
 .perks li[coi-scope="CreatorsPane"]{ display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--text-2); line-height: 1.4; }
 .perks b[coi-scope="CreatorsPane"]{ color: var(--text); font-weight: 600; }
 .perks .ic[coi-scope="CreatorsPane"]{ width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--accent); flex: none; background: var(--panel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent); }
  .steps[coi-scope="CreatorsPane"]{ margin: 0; padding: 4px 0 0; list-style: none; display: grid; gap: 0; }
 .step[coi-scope="CreatorsPane"]{ position: relative; display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; padding-bottom: 18px; }
 .step[coi-scope="CreatorsPane"]:last-child{ padding-bottom: 0; }
 .step[coi-scope="CreatorsPane"]::before{ content: ""; position: absolute; left: 13.5px; top: 28px; bottom: 0; width: 1px; background: var(--line); }
 .step[coi-scope="CreatorsPane"]:last-child::before{ display: none; }
 .step.done[coi-scope="CreatorsPane"]::before{ background: color-mix(in srgb, var(--accent) 45%, var(--line)); }
 .dot[coi-scope="CreatorsPane"]{ grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--panel); color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--line); }
 .step b[coi-scope="CreatorsPane"]{ font-size: 13.5px; font-weight: 600; color: var(--text-2); padding-top: 4px; }
 .step small[coi-scope="CreatorsPane"]{ font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
 .step.done .dot[coi-scope="CreatorsPane"]{ background: var(--accent); color: #fff; box-shadow: none; }
 .step.done b[coi-scope="CreatorsPane"],.step.now b[coi-scope="CreatorsPane"]{ color: var(--text); }
 .step.now .dot[coi-scope="CreatorsPane"]{ color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
  .step.now .dot i[coi-scope="CreatorsPane"]{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pn-breathe calc(var(--pn-dlg) * 9) ease-in-out infinite; }
 .step.no .dot[coi-scope="CreatorsPane"]{ color: var(--amber); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--amber) 60%, var(--line)); }
 .step.no b[coi-scope="CreatorsPane"]{ color: var(--text); }
 @keyframes pn-breathe { 50% { transform: scale(.55); opacity: .5; } }  .sent[coi-scope="CreatorsPane"]{ display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 18px; border-radius: 14px; background: color-mix(in srgb, var(--green) 9%, var(--panel)); }
 .sent svg[coi-scope="CreatorsPane"]{ flex: none; }
 .sent circle[coi-scope="CreatorsPane"]{ stroke: var(--green); stroke-dasharray: 76; stroke-dashoffset: 76; animation: pn-draw calc(var(--pn-dlg) * 2) cubic-bezier(.65, 0, .35, 1) forwards; }
 .sent path[coi-scope="CreatorsPane"]{ stroke: var(--green); stroke-dasharray: 20; stroke-dashoffset: 20; animation: pn-draw var(--pn-dlg) cubic-bezier(.65, 0, .35, 1) calc(var(--pn-dlg) * 1.6) forwards; }
 .sent .what[coi-scope="CreatorsPane"]{ animation: pn-rise var(--pn-dlg) ease-out calc(var(--pn-dlg) * .8) both; }
 .sent .what b[coi-scope="CreatorsPane"]{ display: block; font-size: 14.5px; color: var(--text); }
 .sent .what span[coi-scope="CreatorsPane"]{ font-size: 13px; color: var(--text-2); }
 @keyframes pn-draw { to { stroke-dashoffset: 0; } } .group[coi-scope="CreatorsPane"]{ border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
 .card[coi-scope="CreatorsPane"]{ padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
 .sk[coi-scope="CreatorsPane"]{ background-color: var(--hover); border-color: transparent; animation: pn-pulse calc(var(--pn-dlg) * 6) ease-in-out infinite; }
 .row[coi-scope="CreatorsPane"]{ display: flex; gap: 8px; align-items: center; }
 .next[coi-scope="CreatorsPane"]{ display: flex; align-items: center; gap: 14px; margin-top: 18px; }
 .next > span[coi-scope="CreatorsPane"]{ flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
 .next a[coi-scope="CreatorsPane"]{ color: var(--text-2); }
 input[coi-scope="CreatorsPane"],textarea[coi-scope="CreatorsPane"]{ flex: 1; min-width: 0; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: 14px/1.5 Inter, system-ui, sans-serif; outline: none; }
 textarea[coi-scope="CreatorsPane"]{ resize: vertical; width: 100%; }
 input[coi-scope="CreatorsPane"]:focus,textarea[coi-scope="CreatorsPane"]:focus{ border-color: var(--accent); }
 .code[coi-scope="CreatorsPane"]{ display: flex; flex: 1; min-width: 0; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding-left: 12px; }
 .code[coi-scope="CreatorsPane"]:focus-within{ border-color: var(--accent); }
 .code span[coi-scope="CreatorsPane"]{ color: var(--text-3); font-size: 14px; white-space: nowrap; }
 .code input[coi-scope="CreatorsPane"]{ border: 0; padding-left: 0; background: none; }
 .go[coi-scope="CreatorsPane"]{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 16px; min-height: 36px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; }
 .go[coi-scope="CreatorsPane"]:hover{ filter: brightness(1.08); }
 .quiet[coi-scope="CreatorsPane"]{ display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; min-height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); font-size: 13px; white-space: nowrap; text-decoration: none; }
 .quiet[coi-scope="CreatorsPane"]:hover{ background: var(--hover); color: var(--text); }
  .quiet.off[coi-scope="CreatorsPane"]{ opacity: .5; cursor: default; }
 .quiet.off[coi-scope="CreatorsPane"]:hover{ background: var(--panel); color: var(--text-2); }
 .busy .go[coi-scope="CreatorsPane"],.busy .quiet[coi-scope="CreatorsPane"]{ opacity: .6; }
 .back[coi-scope="CreatorsPane"]{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 4px; margin: -4px 0 10px -4px; border-radius: 8px; font-size: 13px; color: var(--text-2); }
 .back[coi-scope="CreatorsPane"]:hover{ background: var(--hover); color: var(--text); }
 .field[coi-scope="CreatorsPane"]{ display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; font-weight: 600; color: var(--text); margin: 20px 0 8px; }
 .field small[coi-scope="CreatorsPane"]{ font-weight: 400; font-size: 12.5px; color: var(--text-3); }
 .chans[coi-scope="CreatorsPane"]{ display: grid; gap: 8px; }
 .chan[coi-scope="CreatorsPane"]{ display: flex; align-items: center; gap: 6px; }
 .drop[coi-scope="CreatorsPane"]{ width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); flex: none; }
 .drop[coi-scope="CreatorsPane"]:hover{ background: var(--hover); color: var(--text); }
 .add[coi-scope="CreatorsPane"]{ display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px 6px 8px; border-radius: 8px; font-size: 13px; color: var(--accent); font-weight: 500; }
 .add[coi-scope="CreatorsPane"]:hover{ background: var(--accent-soft); }
 .actions[coi-scope="CreatorsPane"]{ display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; }
  .seg[coi-scope="CreatorsPane"]{ display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--hover); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; }
 .seg button[coi-scope="CreatorsPane"]{ padding: 6px 12px; border-radius: 8px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
 .seg button[coi-scope="CreatorsPane"]:hover{ color: var(--text); }
 .seg button.on[coi-scope="CreatorsPane"]{ background: var(--panel); color: var(--text); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 1px 4px rgba(0, 0, 0, .06); }
 .intro[coi-scope="CreatorsPane"]{ margin: 0 0 14px; color: var(--text-3); font-size: 13px; line-height: 1.55; }
 .tiles[coi-scope="CreatorsPane"]{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
 .tile[coi-scope="CreatorsPane"]{ padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
 .tile small[coi-scope="CreatorsPane"]{ display: block; font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
 .tile b[coi-scope="CreatorsPane"]{ font-size: 20px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; }
 .chart-head[coi-scope="CreatorsPane"]{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
 .chart-head .seg[coi-scope="CreatorsPane"]{ margin: 0; }
 .chart-head span[coi-scope="CreatorsPane"]{ color: var(--text-3); font-size: 12.5px; }
 .bars[coi-scope="CreatorsPane"]{ display: flex; align-items: flex-end; gap: 3px; height: 130px; margin-top: 16px; padding-bottom: 1px; border-bottom: 1px solid var(--line); }
 .bars div[coi-scope="CreatorsPane"]{ flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: 3px; }
 .bars div[coi-scope="CreatorsPane"]:hover{ background: var(--hover); }
 .bars i[coi-scope="CreatorsPane"]{ display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--accent); transition: height var(--pn-dlg) ease-out; }
 .axis[coi-scope="CreatorsPane"]{ display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--text-3); }
 .money[coi-scope="CreatorsPane"]{ display: flex; align-items: center; gap: 14px; }
 .money p[coi-scope="CreatorsPane"]{ flex: 1; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
 .money b[coi-scope="CreatorsPane"]{ color: var(--text); font-weight: 600; }
 .payform[coi-scope="CreatorsPane"]{ display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
 .list[coi-scope="CreatorsPane"]{ display: grid; }
 .list div[coi-scope="CreatorsPane"]{ display: flex; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
 .list div[coi-scope="CreatorsPane"]:last-child{ border-bottom: 0; }
 .list span[coi-scope="CreatorsPane"]{ flex: 1; color: var(--text-2); }
 .list b[coi-scope="CreatorsPane"]{ font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
 .list .minus[coi-scope="CreatorsPane"]{ color: var(--text-3); }
 .fine[coi-scope="CreatorsPane"]{ margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.55; }
 .err[coi-scope="CreatorsPane"]{ margin: 10px 0 0; font-size: 13px; color: var(--amber); }
 .warn[coi-scope="CreatorsPane"]{ color: var(--amber); }
 .empty[coi-scope="CreatorsPane"]{ padding: 4px 2px; color: var(--text-3); font-size: 13px; }
 button.link[coi-scope="CreatorsPane"]{ padding: 0; font: inherit; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
 button.link[coi-scope="CreatorsPane"]:hover{ color: var(--text); }
 .terms[coi-scope="CreatorsPane"]{ font-size: 13px; color: var(--text-2); }
 .terms-in[coi-scope="CreatorsPane"]{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2); }
 .agree-row[coi-scope="CreatorsPane"]{ display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13.5px; flex-wrap: wrap; }
 .agree[coi-scope="CreatorsPane"]{ display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); text-align: left; }
 .agree .box[coi-scope="CreatorsPane"]{ width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line); display: grid; place-items: center; flex: none; color: #fff; }
 .agree.on .box[coi-scope="CreatorsPane"]{ background: var(--accent); border-color: var(--accent); }
 @media (max-width: 640px) {
h3[coi-scope="CreatorsPane"]{ display: none; }
.tiles[coi-scope="CreatorsPane"]{ grid-template-columns: repeat(2, 1fr); }
.money[coi-scope="CreatorsPane"]{ flex-direction: column; align-items: stretch; }
.next[coi-scope="CreatorsPane"]{ flex-direction: column; align-items: stretch; }
}


/* SlideConfirm */
  .slide[coi-scope="SlideConfirm"]{ position: relative; height: 44px; border-radius: 22px; background: var(--hover); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
 .label[coi-scope="SlideConfirm"]{ position: absolute; top: 0; bottom: 0; left: 0; display: grid; place-items: center; color: var(--text-3); font-size: 13.5px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; pointer-events: none; }
 .under[coi-scope="SlideConfirm"]{ right: 0; }
 .fill[coi-scope="SlideConfirm"]{ position: absolute; left: 0; top: 0; bottom: 0; overflow: hidden; border-radius: 22px; background: var(--red); }
 .fill .label[coi-scope="SlideConfirm"]{ color: #fff; font-weight: 600; }
  .knob[coi-scope="SlideConfirm"]{ position: absolute; top: 50%; margin-top: -18px; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--red); display: grid; place-items: center; cursor: grab; touch-action: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .1); }
 .knob[coi-scope="SlideConfirm"]:active{ cursor: grabbing; }
 .slide.done .knob[coi-scope="SlideConfirm"]{ cursor: default; }
  .slide.free .knob[coi-scope="SlideConfirm"],.slide.free .fill[coi-scope="SlideConfirm"]{ transition: left .3s cubic-bezier(.3, 1.25, .5, 1), width .3s cubic-bezier(.3, 1.25, .5, 1); }
 @media (prefers-reduced-motion: reduce) {
.slide.free .knob[coi-scope="SlideConfirm"],.slide.free .fill[coi-scope="SlideConfirm"]{ transition: none; }
}


/* IconButton */
 .icon-btn[coi-scope="IconButton"]{ width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--text-2); }
 .icon-btn[coi-scope="IconButton"]:hover{ background: var(--hover); color: var(--text); }


/* Toolbar */
  .toolbar[coi-scope="Toolbar"]{ flex: none; width: 880px; max-width: 100%; min-height: 46px; position: relative; isolation: isolate; display: flex; align-items: flex-start; padding: 5px 6px; border: 1px solid transparent; border-radius: 14px; transition: translate var(--pn-dlg) cubic-bezier(.16, 1, .3, 1); }
  .bg[coi-scope="Toolbar"]{ position: absolute; z-index: -1; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 18px); overflow: visible; pointer-events: none; filter: var(--shadow-drop); }
 .bg path[coi-scope="Toolbar"]{ fill: var(--panel); stroke: var(--line); stroke-width: 1px; }
 .bg .whole[coi-scope="Toolbar"]{ transition: opacity var(--pn-dlg); }
 .bg .alone[coi-scope="Toolbar"]{ visibility: hidden; transition: visibility 0s var(--pn-dlg); }
 .bg .alone.fill[coi-scope="Toolbar"]{ stroke: none; }
 .bg .alone.edge[coi-scope="Toolbar"]{ fill: none; }
 .body[coi-scope="Toolbar"],.end[coi-scope="Toolbar"]{ transition: opacity var(--pn-dlg); }
 .toolbar[coi-scope="Toolbar"]:not(.drawn){ background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }
  .toolbar.folded[coi-scope="Toolbar"]{ translate: 0 calc(-100% - 14px); pointer-events: none; }
 .toolbar.folded .body[coi-scope="Toolbar"],.toolbar.folded .end[coi-scope="Toolbar"]{ opacity: 0; visibility: hidden; transition: opacity var(--pn-dlg), visibility 0s var(--pn-dlg); }
 .toolbar.folded .bg .whole[coi-scope="Toolbar"]{ opacity: 0; }
 .toolbar.folded .bg .alone[coi-scope="Toolbar"]{ visibility: visible; transition: none; }
 .body[coi-scope="Toolbar"]{ flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; column-gap: 2px; }
 .group[coi-scope="Toolbar"]{ display: flex; align-items: center; gap: 2px; height: 34px; }
  .ctx[coi-scope="Toolbar"]{ display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 34px; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--line); row-gap: 4px; }
 .end[coi-scope="Toolbar"]{ display: flex; align-items: center; gap: 2px; height: 34px; }
  .set[coi-scope="Toolbar"]{ display: flex; align-items: center; gap: 2px; margin-left: 10px; }
 .tool[coi-scope="Toolbar"]{ width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--text-2); position: relative; }
 .tool[coi-scope="Toolbar"]:hover{ background: var(--hover); color: var(--text); }
 .tool.on[coi-scope="Toolbar"]{ background: var(--accent-soft); color: var(--accent); }
  .tool[data-tip][coi-scope="Toolbar"]::after{ content: attr(data-tip); position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 40; background: var(--text); color: var(--bg); font-size: 11px; padding: 3px 7px; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s; }
 @media (hover: hover) {
.tool[data-tip][coi-scope="Toolbar"]:hover::after{ opacity: 1; transition-delay: .45s; }
}
 .vsep[coi-scope="Toolbar"]{ width: 1px; height: 22px; background: var(--line); margin: 0 5px; }
 .swatches[coi-scope="Toolbar"]{ display: flex; align-items: center; }
 .swatch[coi-scope="Toolbar"]{ width: 22px; height: 22px; border-radius: 50%; margin: 0 2px; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); }
 .swatch.on[coi-scope="Toolbar"]{ box-shadow: 0 0 0 2px var(--accent); }
 .swatch.ink[coi-scope="Toolbar"]{ background: var(--ink); }
 .pop[coi-scope="Toolbar"]{ position: relative; }
 .swatches.pop[coi-scope="Toolbar"]{ position: relative; }
  .insert[coi-scope="Toolbar"]{ position: absolute; z-index: 45; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 12px; width: 300px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top left; }
 .insert button[coi-scope="Toolbar"]{ display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 8px; text-align: left; color: var(--text); }
 .insert button[coi-scope="Toolbar"]:hover{ background: var(--hover); }
 .insert button span[coi-scope="Toolbar"]{ display: flex; flex-direction: column; gap: 1px; }
 .insert b[coi-scope="Toolbar"]{ font-weight: 500; font-size: 13px; }
 .insert small[coi-scope="Toolbar"]{ color: var(--text-3); font-size: 11.5px; }
 .insert .ic[coi-scope="Toolbar"]{ color: var(--text-2); display: grid; place-items: center; }
  .shapes[coi-scope="Toolbar"]{ position: absolute; z-index: 45; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 12px; width: 252px; padding: 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top left; }
 .shapes button[coi-scope="Toolbar"]{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 64px; padding: 4px; border-radius: 8px; color: var(--text-2); font-size: 11px; line-height: 1.2; text-align: center; }
 .shapes button[coi-scope="Toolbar"]:hover{ background: var(--hover); color: var(--text); }
 .insert .hint[coi-scope="Toolbar"]{ padding: 6px 10px 4px; font-size: 11.5px; color: var(--text-3); border-top: 1px solid var(--line); margin-top: 4px; }
   .set.sizes[coi-scope="Toolbar"]{ position: relative; }
 .sizebtn[coi-scope="Toolbar"]{ width: 30px; height: 34px; border-radius: 8px; display: grid; place-items: center; }
 .sizebtn[coi-scope="Toolbar"]:hover{ background: var(--hover); }
 .sizebtn i[coi-scope="Toolbar"]{ display: block; border-radius: 50%; background: var(--text-2); }
 .sizebtn.on[coi-scope="Toolbar"]{ background: var(--accent-soft); }
 .sizebtn.on i[coi-scope="Toolbar"]{ background: var(--accent); }
 .sizepop[coi-scope="Toolbar"]{ position: absolute; z-index: 45; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; width: 256px; box-sizing: border-box; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top center; }
 .penbtn[coi-scope="Toolbar"]{ height: 30px; padding: 0 4px 0 6px; border-radius: 7px; color: var(--text-2); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
 .penbtn[coi-scope="Toolbar"]:hover{ background: var(--hover); color: var(--text); }
 .penbtn.on[coi-scope="Toolbar"]{ background: var(--accent-soft); color: var(--accent); }
 .penbtn svg[coi-scope="Toolbar"]{ display: block; flex: none; }
 .penbtn .nm[coi-scope="Toolbar"]{ max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .penbtn .down[coi-scope="Toolbar"]{ transform: rotate(90deg); color: var(--text-3); }
 select[coi-scope="Toolbar"]{ height: 28px; padding: 0 6px; min-width: 70px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); font: 500 12px Inter, system-ui, sans-serif; }
 .fontsel[coi-scope="Toolbar"]{ width: 190px; }
 .fmt[coi-scope="Toolbar"]{ min-width: 28px; height: 30px; padding: 0 7px; border-radius: 7px; color: var(--text-2); font-size: 13px; font-weight: 600; display: grid; place-items: center; touch-action: none; }
 .fmt[coi-scope="Toolbar"]:hover{ background: var(--hover); color: var(--text); }
 .fmt.on[coi-scope="Toolbar"]{ background: var(--accent-soft); color: var(--accent); }
 .fmt i[coi-scope="Toolbar"]{ font-style: italic; }
 .fmt u[coi-scope="Toolbar"]{ text-decoration: underline; }
 .fmt s[coi-scope="Toolbar"]{ text-decoration: line-through; }
 .fmt.a[coi-scope="Toolbar"]{ text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--red); }
 .fmt.hl[coi-scope="Toolbar"]{ background: linear-gradient(transparent 55%, #fff3a0 55%); }
  .modes[coi-scope="Toolbar"]{ display: flex; gap: 2px; }
 .modes .fmt[coi-scope="Toolbar"]{ width: 32px; padding: 0; }
 .selhint[coi-scope="Toolbar"]{ margin-left: 8px; font-size: 12px; color: var(--text-3); white-space: nowrap; }
 .erasehint[coi-scope="Toolbar"]{ padding: 0 6px; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .selcount[coi-scope="Toolbar"]{ font-size: 12px; font-weight: 500; color: var(--text-2); margin-right: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
 .fmt.act[coi-scope="Toolbar"]{ display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 12.5px; }
 .fmt.act.del[coi-scope="Toolbar"]:hover{ color: var(--red); }
 .fmt .dot[coi-scope="Toolbar"]{ width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(#d1453b, #e8b04a, #3a9a5b, #3b6fd1, #825fff, #d1453b); box-shadow: inset 0 0 0 2px var(--panel); }
  .fold[coi-scope="Toolbar"]{ position: absolute; top: 100%; left: 50%; translate: -50% 0; z-index: 2; width: 44px; height: 16px; padding: 0; display: grid; place-items: center; color: var(--text-3); pointer-events: auto; transition: color var(--pn-in); }
 .fold[coi-scope="Toolbar"]::before{ content: ""; position: absolute; inset: -6px -10px -10px; }
  .toolbar:not(.drawn) .fold[coi-scope="Toolbar"]{ background: var(--panel); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 9px 9px; }
 .fold[coi-scope="Toolbar"]:hover{ color: var(--text); }
 .chev[coi-scope="Toolbar"]{ display: grid; transition: transform var(--pn-in); }
 .chev.up[coi-scope="Toolbar"]{ transform: rotate(-90deg); }
 .chev.down[coi-scope="Toolbar"]{ transform: rotate(90deg); }
  @container (max-width: 860px) {
.fontsel[coi-scope="Toolbar"]{ width: 120px; }
.ctx[coi-scope="Toolbar"]{ margin-left: 2px; padding-left: 0; border-left: 0; }
}
  @container (max-width: 640px) {
.fontsel[coi-scope="Toolbar"]{ width: 96px; }
select[coi-scope="Toolbar"]{ min-width: 52px; padding: 0 4px; height: 32px; }
.ctx[coi-scope="Toolbar"]{ flex-basis: 100%; box-sizing: border-box; margin-left: 0; padding: 2px 0 0; min-height: 40px; gap: 2px; }
.set[coi-scope="Toolbar"]{ margin-left: auto; }
.vsep[coi-scope="Toolbar"],.penbtn .nm[coi-scope="Toolbar"],.fmt.strike[coi-scope="Toolbar"],.set.sizes[coi-scope="Toolbar"],.selhint[coi-scope="Toolbar"],.fmt.act span[coi-scope="Toolbar"]{ display: none; }
.swatches[coi-scope="Toolbar"]{ gap: 2px; }
.swatch[coi-scope="Toolbar"]{ width: 26px; height: 26px; margin: 0 4px; }
.swatch[coi-scope="Toolbar"]:nth-child(n+6):not(.on){ display: none; }
.penbtn[coi-scope="Toolbar"]{ height: 34px; padding: 0 6px 0 8px; }
.fmt[coi-scope="Toolbar"]{ min-width: 32px; height: 32px; padding: 0 6px; }
.fmt.bold[coi-scope="Toolbar"]{ margin-left: auto; }
.erasehint[coi-scope="Toolbar"]{ flex: 1; text-align: center; }
}


/* PaperMenu */
 .paper-menu[coi-scope="PaperMenu"]{ position: fixed; right: 16px; bottom: 56px; z-index: 31; width: 260px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
 .lbl[coi-scope="PaperMenu"]{ font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 4px 0 8px; }
 .row[coi-scope="PaperMenu"]{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
 .row.two[coi-scope="PaperMenu"]{ grid-template-columns: 1fr 1fr 1fr; margin-bottom: 0; }
 .opt[coi-scope="PaperMenu"]{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px; border-radius: 9px; border: 1px solid var(--line); font-size: 11px; color: var(--text-2); }
 .opt[coi-scope="PaperMenu"]:hover{ background: var(--hover); }
 .opt.on[coi-scope="PaperMenu"]{ border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent); }
 .sw[coi-scope="PaperMenu"]{ width: 36px; height: 51px; border-radius: 4px; background-color: var(--sheet); border: 1px solid var(--line); }
 .sw.dots[coi-scope="PaperMenu"]{ background-image: radial-gradient(var(--text-3) 0.8px, transparent 0.8px); background-size: 7px 7px; }
 .sw.lines[coi-scope="PaperMenu"]{ background-image: linear-gradient(var(--text-3) 1px, transparent 1px); background-size: 100% 8px; background-position: 0 7px; }
 .sw.grid[coi-scope="PaperMenu"]{ background-image: linear-gradient(var(--text-3) 1px, transparent 1px), linear-gradient(90deg, var(--text-3) 1px, transparent 1px); background-size: 7px 7px; }
 .row.two .opt[coi-scope="PaperMenu"]{ flex-direction: row; justify-content: center; padding: 8px; font-size: 12px; }
 .row.spacing[coi-scope="PaperMenu"]{ margin-bottom: 12px; }
 .tints[coi-scope="PaperMenu"]{ display: flex; gap: 8px; margin-bottom: 12px; }
 .tint[coi-scope="PaperMenu"]{ width: 26px; height: 26px; border-radius: 50%; background: var(--sheet); border: 1px solid var(--line); }
 @media (hover: hover) {
.tint[coi-scope="PaperMenu"]:hover{ box-shadow: 0 0 0 2px var(--hover); }
}
 .tint.on[coi-scope="PaperMenu"]{ box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
 @media (max-width: 1000px) {
.paper-menu[coi-scope="PaperMenu"]{ right: 10px; bottom: 48px; }
}
  .paper-menu[coi-scope="PaperMenu"]{ animation: pn-rise var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: bottom right; }


/* Stage */
  .stage[coi-scope="Stage"]{ position: relative; flex: 1; overflow: auto; min-height: 0; user-select: none; touch-action: none; }
 .stage.canvas[coi-scope="Stage"]{ background: var(--sheet); }
 .stage .title[coi-scope="Stage"]{ user-select: text; }
  .zoomwrap[coi-scope="Stage"]{ position: relative; margin: var(--top, 76px) auto 80px; transition: margin-top var(--top-ease, 0s) cubic-bezier(.16, 1, .3, 1); }
 .zoomwrap.canvas[coi-scope="Stage"]{ margin: 0; }
  .zoomwrap[coi-scope="Stage"]{ transform-origin: 0 0; }
 .stage.pinching .zoomwrap[coi-scope="Stage"]{ will-change: transform; }
 .stage.pinching .more[coi-scope="Stage"]{ visibility: hidden; }
 .sheet[coi-scope="Stage"]{ position: absolute; left: 0; top: 0; transform-origin: 0 0; }
  .origin[coi-scope="Stage"]{ position: absolute; left: 0; top: 0; width: 0; height: 0; }
  .lasso-layer[coi-scope="Stage"]{ position: absolute; z-index: 1; touch-action: none; cursor: text; }
  .pan[coi-scope="Stage"]{ position: fixed; inset: 0; z-index: 18; cursor: grab; touch-action: none; }
 .pan.on[coi-scope="Stage"]{ cursor: grabbing; }
 .stage.panning[coi-scope="Stage"]{ cursor: grabbing; }
 .paper[coi-scope="Stage"]{ position: absolute; left: 0; width: 1080px; height: 1527px; box-sizing: border-box; background-color: var(--sheet); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
 .paper.tint-yellow[coi-scope="Stage"]{ background-color: var(--tint-yellow); }
 .paper.tint-blue[coi-scope="Stage"]{ background-color: var(--tint-blue); }
 .paper.tint-green[coi-scope="Stage"]{ background-color: var(--tint-green); }
 .paper.tint-pink[coi-scope="Stage"]{ background-color: var(--tint-pink); }
 .paper.tint-gray[coi-scope="Stage"]{ background-color: var(--tint-gray); }
 .paper.canvas[coi-scope="Stage"]{ border: 0; border-radius: 0; box-shadow: none; }
 .paper.dots[coi-scope="Stage"]{ background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size: 24px 24px; }
 .paper.lines[coi-scope="Stage"],.paper.lines-college[coi-scope="Stage"],.paper.lines-wide[coi-scope="Stage"]{ background-image: linear-gradient(var(--dot) 1px, transparent 1px); background-size: 100% 28px; background-position: 0 27px; }
  .paper.lines-college[coi-scope="Stage"]{ background-size: 100% 37px; background-position: 0 36px; }
 .paper.lines-wide[coi-scope="Stage"]{ background-size: 100% 45px; background-position: 0 44px; }
 .paper.grid[coi-scope="Stage"]{ background-image: linear-gradient(var(--dot) 1px, transparent 1px), linear-gradient(90deg, var(--dot) 1px, transparent 1px); background-size: 24px 24px; }
  .break[coi-scope="Stage"]{ position: absolute; left: 24px; right: 24px; height: 0; z-index: 1; border-top: 1px dashed var(--line); pointer-events: none; }
 .more[coi-scope="Stage"]{ display: flex; align-items: center; justify-content: center; gap: 8px; margin: -48px auto 48px; height: 56px; border-radius: 14px; border: 2px dashed var(--line); color: var(--text-3); font-size: 14px; font-weight: 500; }
 .more[coi-scope="Stage"]:hover{ color: var(--accent); border-color: var(--accent); background: var(--panel); }
 .more.off[coi-scope="Stage"]{ opacity: .45; cursor: default; }
   .corner[coi-scope="Stage"]{ position: absolute; z-index: 8; width: 0; height: 0; transform-origin: 0 0; }
 .delpage[coi-scope="Stage"]{ position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); opacity: .18; transition: opacity .12s; }
 .paper:hover + .corner .delpage[coi-scope="Stage"]{ opacity: .5; }
 @media (hover: none) {
.delpage[coi-scope="Stage"]{ opacity: .4; }
}
 .delpage[coi-scope="Stage"]:hover,.delpage.on[coi-scope="Stage"]{ opacity: 1; color: var(--red); background: var(--hover); }
  .delask[coi-scope="Stage"]{ position: absolute; z-index: 1; right: 4px; top: 4px; width: 232px; box-sizing: border-box; padding: 12px; display: flex; flex-direction: column; gap: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
 .delask p[coi-scope="Stage"]{ margin: 0; font-size: 13px; line-height: 1.4; color: var(--text); }
 .delask .acts[coi-scope="Stage"]{ display: flex; justify-content: flex-end; gap: 6px; }
 .delask button[coi-scope="Stage"]{ height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
 .delask .yes[coi-scope="Stage"]{ background: var(--red); color: #fff; }
 .delask .no[coi-scope="Stage"]{ background: var(--hover); color: var(--text); }
 .more.off[coi-scope="Stage"]:hover{ color: var(--text-3); border-color: var(--line); background: transparent; }
  .under[coi-scope="Stage"]{ position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
 .paper.gone[coi-scope="Stage"]{ opacity: .55; }
  .addhere[coi-scope="Stage"]{ position: absolute; left: 0; width: 1080px; z-index: 7; display: flex; align-items: center; gap: 10px; padding: 0 40px; box-sizing: border-box; color: var(--text-3); opacity: 0; transition: opacity var(--pn-in); }
 .addhere[coi-scope="Stage"]:hover,.addhere[coi-scope="Stage"]:focus-visible{ opacity: 1; }
 .addhere i[coi-scope="Stage"]{ flex: 1; height: 0; border-top: 1px dashed currentColor; }
 .addhere span[coi-scope="Stage"]{ display: flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--text-2); }
 .removed[coi-scope="Stage"]{ position: absolute; left: 24px; width: 1032px; z-index: 4; pointer-events: none; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .titleblock[coi-scope="Stage"]{ position: absolute; z-index: 2; border-radius: 8px; padding: 6px 10px; left: 72px; top: 56px; width: 700px; }
  .titleblock.typing[coi-scope="Stage"]{ z-index: 8; }
 .title[coi-scope="Stage"]{ font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0; outline: none; }
 .title[coi-scope="Stage"]:empty::before{ content: attr(data-placeholder); color: var(--text-3); }
 .meta[coi-scope="Stage"]{ display: flex; gap: 8px; align-items: center; margin-top: 8px; color: var(--text-3); font-size: 13px; }
 @media (max-width: 1000px) {
.zoomwrap[coi-scope="Stage"]{ margin: var(--top, 104px) auto 60px; }
.zoomwrap.canvas[coi-scope="Stage"]{ margin: 0; }
.more[coi-scope="Stage"]{ margin: -36px auto 36px; height: 48px; }
}
  .who[coi-scope="Stage"]{ position: absolute; z-index: 12; pointer-events: none; transform-origin: 0 0; transition: left .09s linear, top .09s linear; }
 .who svg[coi-scope="Stage"]{ display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
 .who span[coi-scope="Stage"]{ position: absolute; left: 14px; top: 15px; padding: 2px 7px; border-radius: 6px; background: var(--who); color: #fff; font: 600 11.5px/1.4 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
 .delask[coi-scope="Stage"]{ animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top right; }


/* PageStrip */
 .strip[coi-scope="PageStrip"]{ position: absolute; right: 12px; top: 72px; bottom: 56px; z-index: 25; width: 168px; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); animation: pn-drop var(--pn-in) ease-out both; }
 .head[coi-scope="PageStrip"]{ display: flex; align-items: center; gap: 6px; padding: 10px 8px 6px 14px; font-size: 13px; font-weight: 600; }
 .head span[coi-scope="PageStrip"]{ color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
 .head .push[coi-scope="PageStrip"]{ flex: 1; }
 .x[coi-scope="PageStrip"]{ width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); }
 .x[coi-scope="PageStrip"]:hover{ background: var(--hover); color: var(--text); }
 .list[coi-scope="PageStrip"]{ position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
 .space[coi-scope="PageStrip"]{ position: relative; }
 canvas[coi-scope="PageStrip"]{ position: sticky; top: 0; display: block; pointer-events: none; }
 .pg[coi-scope="PageStrip"]{ position: absolute; }
 .thumb[coi-scope="PageStrip"]{ display: block; width: 100%; aspect-ratio: 1080 / 1527; border-radius: 6px; box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(0,0,0,.08); touch-action: none; cursor: grab; transition: box-shadow var(--pn-in); }
 @media (hover: hover) {
.thumb[coi-scope="PageStrip"]:hover{ box-shadow: 0 0 0 1px var(--text-3), 0 2px 6px rgba(0,0,0,.1); }
}
 .thumb.on[coi-scope="PageStrip"]{ box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0,0,0,.1); }
 .thumb.lifted[coi-scope="PageStrip"]{ opacity: .4; }
 .num[coi-scope="PageStrip"]{ display: block; text-align: center; margin-top: 4px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
 .on + .num[coi-scope="PageStrip"]{ color: var(--accent); font-weight: 600; }
  .tools[coi-scope="PageStrip"]{ position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
 .tools button[coi-scope="PageStrip"]{ width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: var(--text-2); }
 .tools button[coi-scope="PageStrip"]:hover{ background: var(--hover); color: var(--text); }
 .tools button.danger[coi-scope="PageStrip"]:hover{ color: var(--red); }
  @media (max-width: 700px) {
.strip[coi-scope="PageStrip"]{ top: 156px; right: 8px; width: 150px; }
}
 .drop[coi-scope="PageStrip"]{ position: absolute; height: 3px; margin-top: -2px; border-radius: 2px; background: var(--accent); pointer-events: none; }


/* NewNotebookButton */
 .nbc[coi-scope="NewNotebookButton"]{ display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 0; min-width: 0; color: var(--text-3); }
 .book[coi-scope="NewNotebookButton"]{ aspect-ratio: 3 / 4; border-radius: 4px 12px 12px 4px; border: 1.5px dashed var(--line); display: grid; place-items: center; transition: border-color .2s, background .2s, color .2s; }
 .plus[coi-scope="NewNotebookButton"]{ width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--hover); transition: background .2s, transform .2s; }
 .nbc[coi-scope="NewNotebookButton"]:hover{ color: var(--accent); }
 .nbc:hover .book[coi-scope="NewNotebookButton"]{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
 @media (hover: hover) {
.nbc:hover .plus[coi-scope="NewNotebookButton"]{ background: var(--accent-soft); transform: scale(1.06); }
}
 .meta[coi-scope="NewNotebookButton"]{ font-size: 12px; font-weight: 500; padding-left: 2px; }


/* Code */
 svg[coi-scope="Qr_Code"]{ display: block; width: 100%; height: auto; }
 .back[coi-scope="Qr_Code"]{ fill: var(--qr-back, #fff); }
 .body[coi-scope="Qr_Code"]{ fill: var(--qr-body, currentColor); }
 .rings[coi-scope="Qr_Code"]{ fill: var(--qr-rings, var(--qr-body, currentColor)); }
 .pupils[coi-scope="Qr_Code"]{ fill: var(--qr-pupils, var(--qr-body, currentColor)); }


/* ColorPalette */
 .palette[coi-scope="ColorPalette"]{ position: absolute; z-index: 45; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; padding: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(10, 16px); gap: 3px; }
 .cell[coi-scope="ColorPalette"]{ width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); padding: 0; min-width: 0; touch-action: none; }
 @media (hover: hover) {
.cell[coi-scope="ColorPalette"]:hover{ transform: scale(1.15); }
}
 .cell.on[coi-scope="ColorPalette"]{ box-shadow: 0 0 0 2px var(--accent); }
 .cell.none[coi-scope="ColorPalette"]{ background: linear-gradient(135deg, transparent 46%, var(--red) 46%, var(--red) 54%, transparent 54%); }
 .custom[coi-scope="ColorPalette"]{ grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 11px; color: var(--text-2); }
 .custom input[coi-scope="ColorPalette"]{ width: 26px; height: 20px; border: 0; padding: 0; background: none; cursor: pointer; }
  .palette[coi-scope="ColorPalette"]{ animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top left; }


/* PenSize */
 .pensize[coi-scope="PenSize"]{ display: grid; gap: 6px; }
 .line[coi-scope="PenSize"]{ border-radius: 8px; background: var(--sheet); border: 1px solid var(--line); display: grid; place-items: center; }
 .line svg[coi-scope="PenSize"]{ display: block; }
 .head[coi-scope="PenSize"]{ display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px; color: var(--text); font-weight: 500; font-size: 12px; }
 .head b[coi-scope="PenSize"]{ color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
 input[coi-scope="PenSize"]{ width: 100%; margin: 0; accent-color: var(--accent); }
  .ticks[coi-scope="PenSize"]{ display: flex; justify-content: space-between; align-items: center; height: 20px; padding: 0 3px; }
 .ticks button[coi-scope="PenSize"]{ width: 14px; height: 20px; padding: 0; display: grid; place-items: center; }
 .ticks i[coi-scope="PenSize"]{ display: block; border-radius: 50%; background: var(--text-3); }
 .ticks button:hover i[coi-scope="PenSize"]{ background: var(--text-2); }
 .ticks .on i[coi-scope="PenSize"]{ background: var(--accent); }


/* PenMenu */
 .panel[coi-scope="PenMenu"]{ position: absolute; z-index: 45; top: 100%; left: 0; margin-top: 12px; width: 264px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); font-size: 12px; color: var(--text-2); animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top left; }
 .label-sm[coi-scope="PenMenu"]{ font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 4px 8px 6px; }
 .pen[coi-scope="PenMenu"]{ display: flex; align-items: center; border-radius: 8px; color: var(--text); }
 .pen[coi-scope="PenMenu"]:hover{ background: var(--hover); }
 .pen.on[coi-scope="PenMenu"]{ background: var(--accent-soft); color: var(--accent); }
 .pick[coi-scope="PenMenu"]{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 5px 8px; text-align: left; color: inherit; font-size: 13px; font-weight: 500; }
 .pick svg[coi-scope="PenMenu"]{ flex: none; display: block; }
 .pick span[coi-scope="PenMenu"]{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .edit[coi-scope="PenMenu"]{ flex: none; width: 30px; height: 30px; margin-right: 2px; border-radius: 7px; display: grid; place-items: center; color: var(--text-3); }
 .edit[coi-scope="PenMenu"]:hover{ background: var(--active); color: var(--text); }
 .add[coi-scope="PenMenu"]{ display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; margin-top: 2px; border-radius: 8px; color: var(--text-2); font-size: 13px; font-weight: 500; }
 .add[coi-scope="PenMenu"]:hover{ background: var(--hover); color: var(--text); }
 .sep[coi-scope="PenMenu"]{ height: 1px; background: var(--line); margin: 6px 0; }
 .toggle[coi-scope="PenMenu"]{ display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 6px 8px; text-align: left; color: var(--text); font-weight: 500; }
 .sw[coi-scope="PenMenu"]{ flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--line); position: relative; }
 .sw[coi-scope="PenMenu"]::after{ content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
 .sw.on[coi-scope="PenMenu"]{ background: var(--accent); }
 .sw.on[coi-scope="PenMenu"]::after{ left: 14px; }
 .hint[coi-scope="PenMenu"]{ color: var(--text-3); font-size: 11px; padding: 0 8px 4px; }
 .top[coi-scope="PenMenu"]{ padding: 2px 0 6px; }
  @container (max-width: 640px) {
.panel[coi-scope="PenMenu"]{ left: 50%; transform: translateX(-50%); transform-origin: top center; width: min(264px, calc(100vw - 24px)); }
}
  .head[coi-scope="PenMenu"]{ display: flex; align-items: center; gap: 4px; }
 .back[coi-scope="PenMenu"]{ flex: none; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: var(--text-2); }
 .back[coi-scope="PenMenu"]:hover{ background: var(--hover); color: var(--text); }
 .name[coi-scope="PenMenu"]{ flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); font: 500 13px Inter, system-ui, sans-serif; }
 .name[coi-scope="PenMenu"]:focus{ outline: none; border-color: var(--accent); }
 .big[coi-scope="PenMenu"]{ margin: 8px 0 4px; border-radius: 8px; background: var(--sheet); border: 1px solid var(--line); color: var(--ink); display: grid; place-items: center; }
 .big svg[coi-scope="PenMenu"]{ display: block; }
 .row[coi-scope="PenMenu"]{ display: grid; gap: 2px; padding: 4px 8px; }
 .row label[coi-scope="PenMenu"]{ display: flex; justify-content: space-between; color: var(--text); font-weight: 500; }
 .row b[coi-scope="PenMenu"]{ color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
 input[type=range][coi-scope="PenMenu"]{ width: 100%; accent-color: var(--accent); }
 .foot[coi-scope="PenMenu"]{ display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0 0; }
 .del[coi-scope="PenMenu"]{ height: 30px; padding: 0 10px; border-radius: 7px; color: var(--text-3); font-size: 12.5px; font-weight: 500; }
 .del[coi-scope="PenMenu"]:hover{ background: var(--hover); color: var(--text); }
 .del.sure[coi-scope="PenMenu"]{ color: var(--red); }
 .done[coi-scope="PenMenu"]{ height: 30px; padding: 0 14px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; }


/* InkLayer */
 .band[coi-scope="InkLayer"]{ position: absolute; pointer-events: none; overflow: clip; }
 canvas[coi-scope="InkLayer"]{ position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; pointer-events: none; }
 .tiles[coi-scope="InkLayer"]{ position: absolute; z-index: 5; pointer-events: none; }
 .live[coi-scope="InkLayer"],.recent[coi-scope="InkLayer"]{ z-index: 6; left: 0; top: 0; width: 0; height: 0; }
 .input[coi-scope="InkLayer"]{ position: absolute; inset: 0; z-index: 6; pointer-events: none; touch-action: none; }
 .input.on[coi-scope="InkLayer"]{ pointer-events: auto; cursor: crosshair; }
 .input.erase[coi-scope="InkLayer"]{ cursor: cell; }
 .over[coi-scope="InkLayer"]{ z-index: 7; }
 .over.off[coi-scope="InkLayer"]{ display: none; }


/* BlockLayer */
  .blocks[coi-scope="BlockLayer"]{ position: absolute; left: 0; top: 0; width: 0; height: 0; }
  .guide[coi-scope="BlockLayer"]{ position: absolute; z-index: 9; pointer-events: none; border-radius: 2px; }
 .guide.v[coi-scope="BlockLayer"]{ width: 2px; margin-left: -1px; background: linear-gradient(to bottom, transparent, var(--accent) 18%, var(--accent) 82%, transparent); }
 .guide.h[coi-scope="BlockLayer"]{ height: 2px; margin-top: -1px; background: linear-gradient(to right, transparent, var(--accent) 18%, var(--accent) 82%, transparent); }


/* Selection */
 .selbox[coi-scope="Selection"]{ position: absolute; z-index: 7; border: 1.5px dashed var(--accent); border-radius: 3px; cursor: move; touch-action: none; background: color-mix(in srgb, var(--accent) 4%, transparent); }
 .h[coi-scope="Selection"]{ position: absolute; z-index: 8; box-sizing: border-box; border-radius: 30%; background: var(--panel); border-style: solid; border-color: var(--accent); touch-action: none; }
  .h[coi-scope="Selection"]::after{ content: ""; position: absolute; inset: -80%; }
 .h.nw[coi-scope="Selection"],.h.se[coi-scope="Selection"]{ cursor: nwse-resize; }
 .h.ne[coi-scope="Selection"],.h.sw[coi-scope="Selection"]{ cursor: nesw-resize; }
 .h.n[coi-scope="Selection"],.h.s[coi-scope="Selection"]{ cursor: ns-resize; }
 .h.e[coi-scope="Selection"],.h.w[coi-scope="Selection"]{ cursor: ew-resize; }
 .h.end[coi-scope="Selection"]{ border-radius: 50%; cursor: crosshair; }


/* VideoLayer */
  .videos[coi-scope="VideoLayer"]{ position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 8; pointer-events: none; }
 .video[coi-scope="VideoLayer"]{ position: absolute; pointer-events: none; }
 .play[coi-scope="VideoLayer"]{ position: absolute; left: 50%; top: 50%; border-radius: 50%; padding: 0; display: grid; place-items: center; background: rgba(20, 20, 24, .72); color: #fff; pointer-events: auto; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.25); transition: transform .12s ease, background .12s ease; }
 @media (hover: hover) {
.play[coi-scope="VideoLayer"]:hover{ transform: scale(1.08); background: #e5302a; }
}
 .play svg[coi-scope="VideoLayer"]{ width: 42%; height: 42%; margin-left: 8%; }
 .title[coi-scope="VideoLayer"]{ position: absolute; left: 0; right: 0; top: 0; color: #fff; background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
 .video iframe[coi-scope="VideoLayer"]{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: auto; background: #000; }
  .sk[coi-scope="VideoLayer"]{ position: absolute; inset: 0; border-radius: 6px; background-color: color-mix(in srgb, var(--text) 9%, var(--panel)); animation: pn-video-pulse calc(var(--pn-dlg) * 6) ease-in-out infinite; display: grid; place-items: center; color: var(--text-3); }
 @keyframes pn-video-pulse { 50% { background-color: color-mix(in srgb, var(--text) 4%, var(--panel)); } } .sk svg[coi-scope="VideoLayer"]{ opacity: .55; }
 .stop[coi-scope="VideoLayer"]{ position: absolute; right: 0; border-radius: 50%; padding: 0; display: grid; place-items: center; pointer-events: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer; }


/* TextBox */
 .block[coi-scope="TextBox"]{ position: absolute; z-index: 2; border-radius: 8px; padding: 6px 10px; }
 @media (hover: hover) {
.block[coi-scope="TextBox"]:hover{ box-shadow: 0 0 0 1px var(--line); }
}
 .frame[coi-scope="TextBox"]{ position: absolute; inset: -5px; z-index: 0; cursor: move; touch-action: none; }
 .grip[coi-scope="TextBox"]{ position: absolute; left: -26px; top: 8px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); opacity: 0; cursor: grab; touch-action: none; }
 .add[coi-scope="TextBox"]{ position: absolute; left: -50px; top: 8px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--text-3); opacity: 0; cursor: pointer; }
 .add[coi-scope="TextBox"]:hover{ background: var(--hover); color: var(--text); }
 .block:hover .grip[coi-scope="TextBox"],.block.dragging .grip[coi-scope="TextBox"],.block.menu .grip[coi-scope="TextBox"],.block:hover .add[coi-scope="TextBox"]{ opacity: 1; }
  .block.typing .grip[coi-scope="TextBox"],.block.typing .add[coi-scope="TextBox"]{ opacity: .55; }
  .bmenu[coi-scope="TextBox"]{ position: absolute; left: -26px; top: 32px; z-index: 40; min-width: 160px; padding: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
 .bmenu button[coi-scope="TextBox"]{ display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border-radius: 6px; text-align: left; font-size: 13px; color: var(--text); white-space: nowrap; }
 .bmenu button[coi-scope="TextBox"]:hover{ background: var(--hover); }
 .bmenu button.danger[coi-scope="TextBox"]{ color: var(--red); }
 .grip[coi-scope="TextBox"]:hover{ background: var(--hover); color: var(--text); }
  .rs[coi-scope="TextBox"]{ position: absolute; z-index: 2; right: -14px; top: 0; bottom: 0; width: 28px; cursor: ew-resize; touch-action: none; display: grid; place-items: center; }
 .rs i[coi-scope="TextBox"]{ display: block; width: 8px; height: 32px; border-radius: 4px; background: var(--text-3); border: 2px solid var(--sheet); box-shadow: 0 1px 3px rgba(0,0,0,.25); opacity: 0; transition: opacity .12s, background .12s; }
 .block:hover .rs i[coi-scope="TextBox"],.block.resizing .rs i[coi-scope="TextBox"]{ opacity: 1; }
 .rs:hover i[coi-scope="TextBox"],.block.resizing .rs i[coi-scope="TextBox"]{ background: var(--accent); }
 .rs b[coi-scope="TextBox"]{ position: absolute; top: -26px; right: 0; padding: 2px 6px; border-radius: 5px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 500; white-space: nowrap; display: none; }
 .block.resizing .rs b[coi-scope="TextBox"]{ display: block; }
 .block.dragging[coi-scope="TextBox"],.block.resizing[coi-scope="TextBox"]{ box-shadow: 0 0 0 1px var(--accent); }
  .block.intable .rs[coi-scope="TextBox"]{ display: none; }
 .block.selected[coi-scope="TextBox"]{ box-shadow: 0 0 0 1.5px var(--accent); }
  .block.menu[coi-scope="TextBox"]{ z-index: 8; }
  .block.typing[coi-scope="TextBox"]{ z-index: 8; }
  .block.held[coi-scope="TextBox"]{ box-shadow: 0 0 0 2px var(--held); }
 .holder[coi-scope="TextBox"]{ position: absolute; left: -2px; bottom: 100%; margin-bottom: 4px; padding: 2px 8px; border-radius: 6px; background: var(--held); color: #fff; font: 600 11.5px/1.4 Inter, system-ui, sans-serif; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
  .ed[coi-scope="TextBox"]{ position: relative; z-index: 1; outline: none; }
 .ed[coi-scope="TextBox"]:empty::before{ content: attr(data-placeholder); color: var(--text-3); }
  .tadd[coi-scope="TextBox"]{ position: absolute; z-index: 3; display: grid; place-items: center; border-radius: 5px; color: var(--text-3); background: var(--hover); border: 1px dashed var(--line); box-sizing: border-box; opacity: .8; touch-action: none; transition: opacity .12s, background .12s; animation: pn-fade var(--pn-in) ease-out both; }
 .tadd[coi-scope="TextBox"]:hover{ opacity: 1; background: var(--active); color: var(--text); }
  .tadd.col[coi-scope="TextBox"]{ cursor: col-resize; }
 .tadd.row[coi-scope="TextBox"]{ cursor: row-resize; }
 .thandle[coi-scope="TextBox"]{ position: absolute; z-index: 3; display: grid; place-items: center; border-radius: 5px; color: var(--text-3); background: var(--panel); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.08); touch-action: none; animation: pn-fade var(--pn-in) ease-out both; }
 .thandle[coi-scope="TextBox"]:hover,.thandle.on[coi-scope="TextBox"]{ color: var(--accent); border-color: var(--accent); }
 .thandle .up[coi-scope="TextBox"]{ display: grid; rotate: 90deg; }
 .tmenu[coi-scope="TextBox"]{ position: absolute; z-index: 40; min-width: 180px; padding: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top left; }
 .tmenu button[coi-scope="TextBox"]{ display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border-radius: 6px; text-align: left; font-size: 13px; color: var(--text); white-space: nowrap; touch-action: none; }
 .tmenu button[coi-scope="TextBox"]:hover{ background: var(--hover); }
 .tmenu button.danger[coi-scope="TextBox"]{ color: var(--red); }
 .tmenu i[coi-scope="TextBox"]{ display: block; height: 1px; margin: 4px 6px; background: var(--line); }
  .bmenu[coi-scope="TextBox"]{ animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top left; }


/* SlashMenu */
 .slash-menu[coi-scope="SlashMenu"]{ position: absolute; z-index: 40; transform-origin: top left; }
 .card[coi-scope="SlashMenu"]{ width: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top left; }
 .up .card[coi-scope="SlashMenu"]{ transform-origin: bottom left; animation-name: pn-rise; }
 .list[coi-scope="SlashMenu"]{ max-height: 356px; overflow-y: auto; padding: 6px; box-sizing: border-box; overscroll-behavior: contain; scrollbar-width: thin; }
 .label-sm[coi-scope="SlashMenu"]{ height: 28px; box-sizing: border-box; padding: 10px 8px 0; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
 .row[coi-scope="SlashMenu"]{ display: flex; gap: 10px; align-items: center; width: 100%; height: 40px; padding: 0 8px; box-sizing: border-box; border-radius: 7px; text-align: left; touch-action: pan-y !important;  }
 .row.sel[coi-scope="SlashMenu"]{ background: var(--hover); }
 .mi[coi-scope="SlashMenu"]{ flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--sheet); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--text-2); }
 .tx[coi-scope="SlashMenu"]{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
 .tx b[coi-scope="SlashMenu"]{ font-size: 13.5px; font-weight: 500; color: var(--text); }
 .tx small[coi-scope="SlashMenu"]{ font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 kbd[coi-scope="SlashMenu"]{ flex: none; font: 11px "JetBrains Mono", monospace; color: var(--text-3); }


/* LinkMenu */
 .link-menu[coi-scope="LinkMenu"]{ position: absolute; z-index: 40; width: 280px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
 .label-sm[coi-scope="LinkMenu"]{ font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 4px 8px 2px; }
 .link-menu button[coi-scope="LinkMenu"]{ display: flex; gap: 10px; align-items: center; width: 100%; padding: 6px 8px; border-radius: 6px; text-align: left; }
 .link-menu button[coi-scope="LinkMenu"]:hover,.link-menu button.sel[coi-scope="LinkMenu"]{ background: var(--hover); }
 .link-menu .pg[coi-scope="LinkMenu"]{ color: var(--text-3); display: grid; place-items: center; flex: none; }
 .link-menu b[coi-scope="LinkMenu"]{ font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .link-menu small[coi-scope="LinkMenu"]{ margin-left: auto; padding-left: 8px; flex: none; font-size: 11px; color: var(--text-3); }
 .none[coi-scope="LinkMenu"]{ padding: 6px 8px 8px; font-size: 13px; color: var(--text-3); }
  .link-menu[coi-scope="LinkMenu"]{ animation: pn-drop var(--pn-in) cubic-bezier(.2, .9, .3, 1) both; transform-origin: top left; }