:root {
--grc-radius: 14px; --grc-border: rgba(0, 0, 0, 0.18);
--grc-surface: #ffffff;
--grc-surface-2: #f3f4f6;
--grc-text: #111111;
--grc-muted: rgba(0, 0, 0, 0.68);
--grc-accent: #2563eb;
--grc-accent-text: #ffffff;
} @supports (color: CanvasText) {
:root {
--grc-border: color-mix(in srgb, currentColor 18%, transparent);
--grc-surface: color-mix(in srgb, Canvas 92%, transparent);
--grc-surface-2: color-mix(in srgb, Canvas 84%, transparent);
--grc-text: CanvasText;
--grc-muted: color-mix(in srgb, CanvasText 68%, transparent);
--grc-accent: Highlight;
--grc-accent-text: HighlightText;
}
} html[data-grc-theme='dark'], body[data-grc-theme='dark'] {
--grc-border: rgba(255, 255, 255, 0.22);
--grc-surface: rgba(17, 17, 17, 0.92);
--grc-surface-2: rgba(30, 30, 30, 0.92);
--grc-text: #f5f5f5;
--grc-muted: rgba(245, 245, 245, 0.68);
}
@supports (color: CanvasText) {
html[data-grc-theme='dark'], body[data-grc-theme='dark'] {
--grc-border: color-mix(in srgb, currentColor 28%, transparent);
--grc-surface: color-mix(in srgb, Canvas 14%, transparent);
--grc-surface-2: color-mix(in srgb, Canvas 22%, transparent);
--grc-text: CanvasText;
--grc-muted: color-mix(in srgb, CanvasText 72%, transparent);
--grc-accent: Highlight;
--grc-accent-text: HighlightText;
}
} html.dark, body.dark,
html.dark-mode, body.dark-mode,
html.theme-dark, body.theme-dark,
body.is-dark-theme,
html[data-theme='dark'], body[data-theme='dark'] {
--grc-border: rgba(255, 255, 255, 0.22);
--grc-surface: rgba(17, 17, 17, 0.92);
--grc-surface-2: rgba(30, 30, 30, 0.92);
--grc-text: #f5f5f5;
--grc-muted: rgba(245, 245, 245, 0.68);
}
@supports (color: CanvasText) {
html.dark, body.dark,
html.dark-mode, body.dark-mode,
html.theme-dark, body.theme-dark,
body.is-dark-theme,
html[data-theme='dark'], body[data-theme='dark'] {
--grc-border: color-mix(in srgb, currentColor 28%, transparent);
--grc-surface: color-mix(in srgb, Canvas 88%, transparent);
--grc-surface-2: color-mix(in srgb, Canvas 80%, transparent);
--grc-text: CanvasText;
--grc-muted: color-mix(in srgb, CanvasText 68%, transparent);
}
}
.grc-card {
max-width: 700px;
margin: 2em auto;
padding: 20px;
border: 1px solid var(--grc-border);
border-radius: var(--grc-radius);
background: var(--grc-surface);
color: var(--grc-text);
font-family: inherit;
line-height: inherit;
}
.grc-card h2,
.grc-card h3 {
color: inherit;
}
.grc-image {
width: 100%;
height: auto;
border-radius: calc(var(--grc-radius) - 4px);
display: block;
margin-bottom: 14px;
}
.grc-card ul,
.grc-card ol {
margin-left: 1.1em;
}
.grc-rate-form {
display: flex;
flex-direction: column;
gap: 6px;
}
.grc-rate-labels,
.grc-rate-buttons {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
.grc-star {
font-size: 18px;
border: 1px solid var(--grc-border);
background: var(--grc-surface-2);
color: inherit;
border-radius: 10px;
padding: 6px 10px;
cursor: pointer;
}
.grc-star:hover {
background: color-mix(in srgb, var(--grc-surface-2) 80%, var(--grc-accent) 20%);
}
.grc-actions {
margin-top: 1em;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.grc-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 12px;
border: 1px solid var(--grc-border);
text-decoration: none;
font-weight: 600;
line-height: 1;
}
.grc-btn-primary {
background: color-mix(in srgb, var(--grc-accent) 88%, transparent);
color: var(--grc-accent-text);
border-color: color-mix(in srgb, var(--grc-accent) 65%, var(--grc-border));
}
.grc-btn-primary:hover {
background: color-mix(in srgb, var(--grc-accent) 100%, transparent);
}
.grc-btn-link {
background: transparent;
color: inherit;
}
.grc-btn-link:hover {
background: var(--grc-surface-2);
}  .grc-btn-jump { background: #111;
color: #fff;
border-color: color-mix(in srgb, #111 55%, var(--grc-border));
}
@supports (color: CanvasText) {
.grc-btn-jump {
background: CanvasText;
color: Canvas;
border-color: GrayText;
}
}
.grc-btn-jump:hover {
transform: translateY(-1px);
}
.grc-jump-auto {
margin: 0 0 14px 0;
} @media print {
.grc-actions,
.grc-btn-jump,
.grc-rate-form {
display: none !important;
}
.grc-card {
border: none;
background: #fff;
color: #000;
margin: 0;
max-width: none;
padding: 0;
}
} .grc-float-jump {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 99999;
display: inline-flex;
gap: 10px;
align-items: center;
padding: 12px 14px;
border-radius: 999px;
border: 1px solid var(--grc-border);
background: var(--grc-surface);
color: var(--grc-text);
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
text-decoration: none;
font: inherit;
line-height: 1;
cursor: pointer;
transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.grc-float-jump:hover {
transform: translateY(-1px);
background: color-mix(in srgb, var(--grc-surface) 85%, var(--grc-accent) 15%);
}
.grc-float-jump:focus-visible {
outline: 3px solid color-mix(in srgb, var(--grc-accent) 60%, transparent);
outline-offset: 3px;
}
.grc-float-jump[hidden] {
display: none !important;
}
.grc-float-jump .grc-float-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--grc-accent);
flex: 0 0 auto;
}
@media (max-width: 480px) {
.grc-float-jump {
right: 12px;
bottom: 12px;
padding: 12px 12px;
}
}