.card-tilt-stage { --card-rotate-x: 0deg; --card-rotate-y: 0deg; --card-light-x: 50%; --card-light-y: 50%; position: relative; display: grid; justify-items: center; align-content: center; width: 100%; padding: 24px; perspective: 1200px; }
.card-tilt-stage:focus-visible { outline: 2px solid #7543c5; outline-offset: 3px; border-radius: 12px; }
/* The collectible root stays unified; only its printed surface tilts. */
.card-tilt-stage > .trading-card:not(.full-card-image),
.card-tilt-stage > .full-card-image > .card-art { transform: rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)); transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; transition: transform 140ms ease-out, box-shadow 180ms ease-out; }
.card-tilt-stage > .trading-card:not(.full-card-image) { box-shadow: 1px 1px 0 #63616c, 2px 2px 0 #38363e, 3px 3px 0 #25252d, 0 24px 40px #17132538; }
.card-tilt-stage > .trading-card.full-card-image { perspective: 1200px; background: transparent; box-shadow: none; }
/* Anything else put up for inspection, such as a bill or a coin from the wallet, tilts the same way. */
.card-tilt-stage > .inspector-object { position: relative; transform: rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)); transform-style: preserve-3d; will-change: transform; transition: transform 140ms ease-out; }
.full-card-tilt-stage { display: flex; flex-direction: column; gap: 12px; }
.full-card-tilt-stage > .trading-card.full-card-image { width: min(76vw, 340px); aspect-ratio: 4 / 7; }
.full-card-tilt-stage > .trading-card.full-card-image .card-art { height: 100%; margin-bottom: 0; }
/* The light that crosses an object as it tilts keeps to the object: it takes the corners of what it lies on (a card,
   a bill, an ID, a plaque, a round Locket), an image-only card's artwork (trading-card.css) and a medal's own outline
   (social.css). A coin, a passport and a watch are lit by their own drawing and have none. */
.card-inspector-glare { position: absolute; inset: 0; border-radius: inherit; grid-area: 1 / 1 / -1 / -1; z-index: 8; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at var(--card-light-x) var(--card-light-y), #fff8, #fff2 30%, transparent 68%); mix-blend-mode: screen; transition: opacity 180ms ease-out; }
.card-tilt-stage.is-tilting .card-inspector-glare { opacity: .4; }
/* A card turns over like a coin (card-inspector.js): it swings round its upright axis and the back of
   its set's cards, laid over it, comes round with it. Both tilt as quickly as any card; while it turns
   the tilt lets go (`.is-turning`) and only the turn takes its time. Each hides its back face. */
.card-tilt-stage[data-card-flip] { --card-turn: 0deg; }
.card-tilt-stage[data-card-flip] > .trading-card { cursor: pointer; }
.card-tilt-stage.is-flipped { --card-turn: 180deg; }
.card-tilt-stage[data-card-flip] > .trading-card:not(.full-card-image) { transform: rotateX(var(--card-rotate-x)) rotateY(calc(var(--card-rotate-y) + var(--card-turn))); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 140ms ease-out, box-shadow 180ms ease-out; }
/* An image-only card turns over whole, caption and all, but only its artwork tilts, as on one with no back to show:
   the caption under it stays put. The card carries the turn and its artwork the tilt. Turned over, the artwork is
   let go halfway round, behind the back that has come over it: left there it would lean the other way from the back
   and show past its edge. */
.card-tilt-stage[data-card-flip] > .full-card-image { transform: rotateY(var(--card-turn)); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 140ms ease-out, box-shadow 180ms ease-out; }
.card-tilt-stage[data-card-flip] > .full-card-image > .card-art { transition: transform 140ms ease-out, box-shadow 180ms ease-out, opacity 0s .35s; }
.card-tilt-stage.is-flipped > .full-card-image > .card-art { opacity: 0; }
.card-tilt-stage[data-card-flip].is-turning > .trading-card:not(.full-card-image),
.card-tilt-stage[data-card-flip].is-turning > .full-card-image,
.card-tilt-stage[data-card-flip].is-turning > .card-flip-back { transition: transform .7s cubic-bezier(.45, .05, .3, 1); }
.card-tilt-stage.is-flipped > .trading-card { pointer-events: none; }
.card-flip-back { position: absolute; z-index: 9; pointer-events: none; cursor: pointer; transform: rotateX(var(--card-rotate-x)) rotateY(calc(var(--card-rotate-y) + var(--card-turn) - 180deg)); backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; transition: transform 140ms ease-out; }
.card-tilt-stage.is-flipped > .card-flip-back { pointer-events: auto; }
.card-flip-back > .card-back-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.card-flip-back > .card-back { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; margin: 0; border: 6px solid #25252d; border-radius: 11px; background: radial-gradient(circle, #ffd166 0 14%, transparent 15%), repeating-conic-gradient(#8d55ef 0 12deg, #ff5d8f 12deg 24deg); color: #25252d; box-shadow: 1px 1px 0 #63616c, 2px 2px 0 #38363e, 3px 3px 0 #25252d, 0 24px 40px #17132538; animation: none; }
.card-flip-back > .card-back:not([data-pack-pattern]) b { background: #fff; border: 4px solid #25252d; padding: 9px 14px; font-size: 1.5rem; }
.notable-card-modal__panel { display: grid; grid-template-columns: minmax(0, 900px) minmax(220px, 300px); justify-content: center; align-content: center; gap: 20px 30px; align-items: start; width: 100%; padding: 44px 28px 28px; }
[data-notable-card-preview] { display: contents; }
.notable-card-modal__close { z-index: 20; }
/* A framed page has the whole window: the page inside is the stage (card-page.css). */
.notable-card-modal__panel.has-card-page { position: absolute; inset: 0; box-sizing: border-box; display: block; width: auto; height: auto; max-height: none; padding: 0; overflow: hidden; border-radius: 0; background: color-mix(in oklab, var(--felt-glow, var(--felt-rarity)) 12%, #17121f); box-shadow: none; }
.has-card-page .notable-card-modal__close { position: absolute; top: 12px; right: 14px; left: auto; padding: 0; box-shadow: 2px 2px 0 #25252d; }
.card-page-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
/* The copy of a card in flight between the page and the frame (news-ticker.js). */
.notable-card-modal .card-inspector-ghost { z-index: 25; }
.has-card-page [data-notable-card-actions], .has-card-page [data-notable-card-collector] { display: none; }
/* Inline, the whole window is the felt a page's stage is (card-page.css), as it is round a framed page (#962):
   the object lies on it with no box of its own, and what is said about it reads in light ink beside it. */
.notable-card-modal__panel:not(.has-card-page) { background: var(--felt-decor, none), var(--felt, radial-gradient(ellipse at 35% 35%, color-mix(in oklab, var(--felt-glow, var(--felt-rarity)) 46%, #3a2f50) 0, color-mix(in oklab, var(--felt-glow, var(--felt-rarity)) 26%, #241c31) 55%, color-mix(in oklab, var(--felt-glow, var(--felt-rarity)) 12%, #17121f) 100%)); color: #f1ecf7; }
/* The felt is tinted by the rarity of the card on it (news-ticker.js sets `--felt-rarity`), as a card's page is (card-page.css). */
.notable-card-modal__panel { --felt-rarity: #4a3b66; }

/* A card that wears an effect lies on that effect's felt (#1033), here and on its own page (`data-felt-effect`, set by
   news-ticker.js and card-page.js from what the card wears, `wornRarityEffect` in trading-card.js). Each effect gives the
   felt its glow (`--felt-glow`, in place of the rarity's colour) and throws something of its own on it (`--felt-decor`,
   the layers over the felt), or lays another felt (`--felt`): the light a card throws around it rather than the card's
   effect again, so the felt stays a felt and the type stays readable. An effect with no felt of its own lies on its
   rarity's. A "?" card lies on the dark of a dead screen, split red and cyan at its edges the way its frame is
   (set-gallery.css). The felt breathes slowly (`--felt-breath`) unless motion is reduced. */
@property --felt-breath { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes felt-breathe { 50% { --felt-breath: 1; } }
html:not(.motion-reduced) :is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect]:not(.has-card-page) { animation: felt-breathe 7s ease-in-out infinite; }
/* A chrome sweep: a cold steel light, one brushed band across the felt. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="chrome"] { --felt-glow: #7f9fd4; --felt-decor: linear-gradient(128deg, transparent 32%, #cfe3ff10 44%, color-mix(in srgb, #ffffff calc(10% + var(--felt-breath) * 8%), transparent) 50%, #cfe3ff10 56%, transparent 68%); }
/* The gilded sweep: warm gold, a sheen across and a halo under the card. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="gilded"] { --felt-glow: #d19a3a; --felt-decor: radial-gradient(ellipse 55% 45% at 50% 50%, color-mix(in srgb, #ffd37a calc(12% + var(--felt-breath) * 8%), transparent), transparent 70%), linear-gradient(110deg, transparent 30%, #ffd37a14 50%, transparent 70%); }
/* Unique energy: magenta and cyan, each from its own corner. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="unique-energy"] { --felt-glow: #c43a9c; --felt-decor: radial-gradient(ellipse 60% 50% at 0% 0%, color-mix(in srgb, #ff3dab calc(18% + var(--felt-breath) * 10%), transparent), transparent 70%), radial-gradient(ellipse 60% 50% at 100% 100%, color-mix(in srgb, #4deeeb calc(14% + var(--felt-breath) * 10%), transparent), transparent 70%); }
/* Crimson flames: embers under the card, the felt lit from below. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="crimson-flames"] { --felt-glow: #c42a1f; --felt-decor: radial-gradient(ellipse 90% 48% at 50% 104%, color-mix(in srgb, #ff6a2a calc(26% + var(--felt-breath) * 14%), transparent), #ff2d1a1c 45%, transparent 76%), linear-gradient(180deg, #0000 55%, #2a05044d 100%); }
/* A celestial ascension: indigo, with a few stars pricked in the felt. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="celestial-ascension"] { --felt-glow: #6a5fe0; --felt-decor: radial-gradient(circle at 18% 22%, #fff 0 1px, transparent 2px), radial-gradient(circle at 82% 18%, color-mix(in srgb, #fff calc(40% + var(--felt-breath) * 60%), transparent) 0 1px, transparent 2.5px), radial-gradient(circle at 70% 78%, #fff 0 1px, transparent 2px), radial-gradient(circle at 12% 72%, color-mix(in srgb, #fff calc(30% + var(--felt-breath) * 70%), transparent) 0 1px, transparent 2px), radial-gradient(circle at 44% 12%, #ffffffb0 0 1px, transparent 1.6px), radial-gradient(circle at 90% 55%, #ffffffa0 0 1px, transparent 1.6px), radial-gradient(circle at 30% 90%, #fff 0 1px, transparent 2px), radial-gradient(ellipse 70% 60% at 50% 0%, #9f8bff22, transparent 70%); }
/* A gilded hoard: the felt gleams from below, as a pile of gold does. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="gilded-hoard"] { --felt-glow: #d4a23a; --felt-decor: radial-gradient(ellipse 100% 50% at 50% 105%, color-mix(in srgb, #ffc24a calc(26% + var(--felt-breath) * 12%), transparent), #d4a23a1a 45%, transparent 75%), linear-gradient(100deg, transparent 40%, #fff2c010 50%, transparent 60%); }
/* Abyssal depths: light from the surface, dark water below. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="abyssal-depths"] { --felt-glow: #0f6c84; --felt-decor: linear-gradient(180deg, color-mix(in srgb, #4fd3ff calc(14% + var(--felt-breath) * 8%), transparent), transparent 45%), linear-gradient(0deg, #00050dcc, #0000 45%), radial-gradient(ellipse 40% 30% at 30% 0%, #8fe8ff18, transparent 70%); }
/* An overgrown bloom: moss in one corner, pollen in the other. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="overgrown-bloom"] { --felt-glow: #3f8f2c; --felt-decor: radial-gradient(ellipse 70% 60% at 0% 100%, color-mix(in srgb, #6bd36a calc(18% + var(--felt-breath) * 8%), transparent), transparent 70%), radial-gradient(ellipse 60% 50% at 100% 0%, #d8b24a1e, transparent 70%); }
/* An ink wash: the felt is paper, grey and vignetted, the ink pooled at its edges. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="ink-wash"] { --felt-glow: #5c5a66; --felt: radial-gradient(ellipse at 50% 45%, #4a4852 0, #2b2a31 55%, #121116 100%); --felt-decor: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 50%, color-mix(in srgb, #000 calc(30% + var(--felt-breath) * 10%), transparent) 100%); }
/* High voltage: a charge in two corners, blue and the yellow of a spark. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="high-voltage"] { --felt-glow: #2d63e8; --felt-decor: radial-gradient(ellipse 60% 34% at 12% 18%, color-mix(in srgb, #8ad8ff calc(16% + var(--felt-breath) * 16%), transparent), transparent 70%), radial-gradient(ellipse 50% 30% at 88% 82%, color-mix(in srgb, #ffe55a calc(10% + var(--felt-breath) * 10%), transparent), transparent 70%); }
/* A drafting table: blueprint blue, ruled in a faint grid. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="drafting-table"] { --felt-glow: #1f56a8; --felt-decor: repeating-linear-gradient(0deg, #9fc4ff12 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, #9fc4ff12 0 1px, transparent 1px 40px), radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in srgb, #6aa7ff calc(8% + var(--felt-breath) * 6%), transparent), transparent 70%); }
/* Signal lost: the dark of a dead screen, scanlines over it, split red and cyan at its edges. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="signal-lost"] { --felt-glow: #0d0d0f; --felt: radial-gradient(ellipse at 50% 45%, #26232c 0, #141317 55%, #08080a 100%); --felt-decor: repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px); box-shadow: inset 6px 0 90px -40px #ff2d5559, inset -6px 0 90px -40px #00e7ff59; }
/* Hot oil: the fryer's heat under the card, a greasy sheen over the felt. */
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect="hot-oil"] { --felt-glow: #c9701e; --felt-decor: radial-gradient(ellipse 85% 50% at 50% 104%, color-mix(in srgb, #ff9a3a calc(24% + var(--felt-breath) * 12%), transparent), transparent 72%), linear-gradient(115deg, transparent 35%, #ffd79a0e 50%, transparent 65%); }
/* Up close, the effect is the felt (#1074): the engine of a shaded effect (surface-engine.js) lays one more canvas under
   the felt's content, the panel's or the page's, and draws the card's scene across it, as wide as the window. The felt
   then keeps its glow and its base and loses what the stylesheet threw on it, which the shader throws itself; without
   WebGL, or under an effect that paints itself, the stylesheet's decor stays. The canvas lies under everything the felt
   carries and over its background, so the felt is a stacking context of its own; the stage no longer clips the
   card's own canvas, which runs out past it into the same scene. */
.rarity-felt { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
:is(.card-page-inspected, .notable-card-modal__panel)[data-felt-effect][data-felt-shaded] { --felt-decor: none; isolation: isolate; }
.notable-card-modal .card-tilt-stage { grid-column: 1; grid-row: 1 / span 3; align-self: stretch; box-sizing: border-box; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.notable-card-modal .card-tilt-stage:focus-visible { outline-color: var(--pastel-yellow, #f5d982); }
.notable-card-modal .trading-card { width: min(100%, 560px, calc((100dvh - 200px) * .57143)); max-width: none; margin: auto; }
.notable-card-modal .trading-card.full-card-image { grid-column: 1; grid-row: 1 / span 3; width: min(100%, 560px, calc((100dvh - 130px) * .57143)); }
.card-inspector-details { grid-column: 2; grid-row: 1; min-width: 0; margin: 12px 0 0; color: inherit; overflow-wrap: anywhere; }
.card-inspector-details h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.3; }
.card-inspector-details p { margin: 8px 0; font-size: 14px; }
.card-inspector-details .card-signer a { color: inherit; font-weight: 750; text-underline-offset: 3px; }
.card-inspector-details .card-modifiers { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0; }
.card-inspector-details .card-modifiers span { padding: 6px 9px; border: 1px solid #6f6385; border-radius: 5px; background: #2f2640; font-size: 14px; }
.card-inspector-details .card-modifiers + p { font-style: italic; }
.notable-card-modal [data-notable-card-actions] { grid-column: 2; grid-row: 2; margin-top: 0; }
.notable-card-modal [data-notable-card-collector] { grid-column: 2; grid-row: 3; margin: 0; }
.notable-card-modal .card-sale-form { grid-template-columns: 1fr; }
@media (max-width: 1000px) {
    .notable-card-modal__panel { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; padding: 44px 16px 24px; }
    .notable-card-modal .card-tilt-stage { padding: 12px; }
    .notable-card-modal .card-tilt-stage,
    .notable-card-modal .trading-card.full-card-image,
    .notable-card-modal .card-inspector-details,
    .notable-card-modal [data-notable-card-actions],
    .notable-card-modal [data-notable-card-collector] { grid-column: 1; grid-row: auto; }
}
.motion-reduced .card-tilt-stage > .trading-card:not(.full-card-image),
.motion-reduced .card-tilt-stage > .full-card-image > .card-art,
.motion-reduced .card-tilt-stage > .inspector-object,
.motion-reduced .card-tilt-stage[data-card-flip] > :is(.trading-card, .card-flip-back),
.motion-reduced .card-tilt-stage[data-card-flip].is-turning > :is(.trading-card, .card-flip-back) { transition: none; will-change: auto; }
.motion-reduced .card-inspector-glare { transition: none; }

/* On the felt (#962): what is said and done about the object belongs to the felt, not to a white page. Light
   ink, hairlines, quiet pills, as the label of a framed page (card-page.css); the same on an object's own page
   and in the inspector, desktop and phone. */
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) {
    --felt-ink: #ece6f3;
    --felt-muted: #b9afc9;
    --felt-line: #ffffff2e;
    --felt-fill: #ffffff0d;
    --felt-fill-strong: #ffffff1f;
}
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) :is(.set-wishlist-toggle, .set-bid-link, .set-sale-link, .card-holders-toggle, .card-holders-list a, .discussion-vote, .discussion-form button) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
    min-height: 34px; padding: 0 14px; border: 1px solid var(--felt-line); border-radius: 999px;
    background: var(--felt-fill); color: var(--felt-ink); box-shadow: none; transform: none;
    font: 700 12px/1 'Sora', system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) :is(.set-wishlist-toggle, .set-bid-link, .set-sale-link, .card-holders-toggle, .card-holders-list a, .discussion-vote, .discussion-form button):is(:hover, :focus-visible):not(:disabled) {
    border-color: #ffffff73; background: var(--felt-fill-strong); box-shadow: none; transform: none;
}
/* A holder is a row with an avatar, tapped to open their profile: it keeps a full tap height. */
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .card-holders-list a { justify-content: space-between; min-height: 44px; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .set-sale-link { border-color: var(--pastel-yellow, #f5d982); color: #fff; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) :is(.set-wishlist-toggle[aria-pressed="true"], .card-holders-toggle[aria-expanded="true"]) { border-color: #ffffff73; background: var(--felt-fill-strong); }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-vote { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-vote.is-up[aria-pressed="true"] { border-color: #9fe6b8; color: #9fe6b8; background: #9fe6b81f; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-vote.is-down[aria-pressed="true"] { border-color: #ff9fb3; color: #ff9fb3; background: #ff9fb31f; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-vote.is-puzzled[aria-pressed="true"] { border-color: #cbb6ff; color: #cbb6ff; background: #cbb6ff1f; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) :is(.set-discussion, .card-discussion, [data-discussion-votes]) {
    --ink: var(--felt-ink); --muted: var(--felt-muted);
}
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .card-discussion { border-top: 1px solid var(--felt-line); }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-title { color: var(--felt-ink); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-count { border: 1px solid var(--felt-line); background: var(--felt-fill-strong); color: var(--felt-ink); }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-sort { border: 1px solid var(--felt-line); border-radius: 999px; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-sort button { background: transparent; color: var(--felt-muted); font-size: 11px; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-sort button + button { border-left: 1px solid var(--felt-line); }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-sort button[aria-pressed="true"] { background: var(--felt-fill-strong); color: #fff; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) :is(.discussion-empty, .discussion-note, .discussion-status, .discussion-counter, .discussion-comment time) { color: var(--felt-muted); }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) :is(.discussion-note a, .discussion-sign-in a) { color: #fff; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-form textarea {
    border: 1px solid var(--felt-line); border-radius: 12px; background: #00000033; color: var(--felt-ink); box-shadow: none;
}
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-form textarea::placeholder { color: #8e82a3; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-comment { border: 1px solid var(--felt-line); background: var(--felt-fill); }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-comment.is-yours { border-color: #cbb6ff66; background: #cbb6ff14; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) :is(.discussion-body, .discussion-author) { color: var(--felt-ink); }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-action { color: var(--felt-muted); }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .discussion-action:is(:hover, :focus-visible) { color: #fff; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .set-card-owner { color: var(--felt-muted); text-align: left; }
:is(.card-page-inspected, .notable-card-modal__panel:not(.has-card-page)) .card-holders-list small { border: 1px solid var(--felt-line); background: var(--felt-fill-strong); color: inherit; }
.notable-card-modal__panel:not(.has-card-page) [data-notable-card-actions] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.notable-card-modal__panel:not(.has-card-page) .card-discussion { flex: 0 0 100%; }