/* =====================================================================
Gülce Vibes — design layer
Loaded after styles.css. Removing the restores the old look.
1. Tokens 6. Karaoke lyrics
2. Readability 7. Interaction layer (juice.js hooks)
3. Functional colour 8. Desktop hover preview of the stage
4. Song identity 9. Homepage panels share one width
5. The stage: a playing card turns into a lit stage
10. Reduced motion
===================================================================== */
/* Registered so the stage can cross-fade colours smoothly. */
@property --stage{syntax:'';inherits:true;initial-value:0}
/* ---------------------------------------------------------------------
1. Tokens
--------------------------------------------------------------------- */
:root{
--gv-ink:#311418;
--gv-ink-soft:#4A2A27; /* 4.5:1 even on the mid blush surface */
--gv-paper:#E9DED5;
--gv-paper-deep:#DCCBBE;
/* One action colour. Cherry means: you can press this, or it is live. */
--gv-cherry:#8E2343; /* 6.0:1 on paper, 7.9:1 with cream text */
--gv-cherry-press:#7A1E3A;
--gv-cherry-glow:#F2A0B5; /* the same role on dark surfaces */
--gv-on-cherry:#FFF3F5;
--gv-stage-top:#3A1A1F;
--gv-stage-bottom:#1F0E10;
--gv-on-stage:#F6ECE3;
--gv-on-stage-soft:#D8C2B6;
--gv-ease-out:cubic-bezier(.16,1,.3,1);
--gv-ease-spring:cubic-bezier(.34,1.56,.64,1);
--gv-ease-in:cubic-bezier(.55,0,1,.45);
--gv-press:80ms;
--gv-fast:180ms;
--gv-base:300ms;
--gv-slow:560ms;
/* Re-point the existing caption tokens to the readable ink. */
--ink-secondary:var(--gv-ink-soft);
--ink-caption:var(--gv-ink-soft);
--polish-caption:var(--gv-ink-soft);
}
/* ---------------------------------------------------------------------
2. Readability: nothing below 12px, secondary text that passes AA
--------------------------------------------------------------------- */
main .eyebrow,
main .section-meta,
body[data-page=home] main .collection-kicker{
font-size:12px;letter-spacing:.14em;font-weight:600;color:var(--gv-ink-soft);
}
.hero .hero-topline{font-size:13px;letter-spacing:.02em}
.hero .portrait figcaption,
.hero .floating-guitar figcaption{font-size:12px;letter-spacing:.12em;font-weight:600}
.hero .hero-bottom a{font-size:12px;letter-spacing:.14em;font-weight:600}
.message-form .form-status{font-size:13px;line-height:1.5;color:var(--gv-ink-soft)}
.social-link>span:last-child{font-size:12px}
.message-form .form-note{font-size:13px;line-height:1.6;color:var(--gv-ink-soft)}
.message-form label{font-size:13px;font-weight:600}
footer>p{font-size:12px;opacity:.85}
main .text-link{font-size:14px;font-weight:600}
.music-section .demo .track-name .eyebrow{font-size:12px;letter-spacing:.16em}
.music-section .demo .recording-time{font-size:13px;line-height:16px;font-weight:600}
.music-section .demo .track-index{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
/* ---------------------------------------------------------------------
3. Functional colour: cherry marks the main actions
--------------------------------------------------------------------- */
.hero .hero-cta .circle-arrow,
.hero .hero-cta:hover .circle-arrow{
background:var(--gv-cherry);color:var(--gv-on-cherry);
transition:background var(--gv-fast) ease,scale var(--gv-base) var(--gv-ease-spring);
}
.hero .hero-cta:hover .circle-arrow{background:var(--gv-cherry-press);scale:1.08}
.hero .hero-cta:active .circle-arrow{scale:.92;transition-duration:var(--gv-press)}
.hero a.voice-tag{background:var(--gv-cherry);color:var(--gv-on-cherry);border-color:transparent}
.hero a.voice-tag:hover,.hero a.voice-tag:focus-visible{background:var(--gv-cherry-press)}
body[data-page=home] .collection-aside .discover-cta,
.journey-next .discover-cta{
background:var(--gv-cherry);color:var(--gv-on-cherry);border-color:var(--gv-cherry);
box-shadow:0 8px 20px #8E234333;
}
body[data-page=home] .collection-aside .discover-cta:is(:hover,:focus-visible),
.journey-next .discover-cta:is(:hover,:focus-visible){
background:var(--gv-cherry-press);color:var(--gv-on-cherry);border-color:var(--gv-cherry-press);
box-shadow:0 12px 26px #8E234340;
}
body[data-page=home] .collection-aside .discover-cta:active,
.journey-next .discover-cta:active{transform:translateY(0) scale(.97);transition-duration:var(--gv-press)}
.message-form .button{background:var(--gv-cherry);color:var(--gv-on-cherry)}
.message-form .button:not(:disabled):hover{background:var(--gv-cherry-press)}
.message-form .button:disabled{background:#8A5B5933;color:var(--gv-ink-soft);opacity:1;cursor:not-allowed}
main :is(a,button,summary,input):focus-visible{outline-color:var(--gv-cherry)}
/* ---------------------------------------------------------------------
4. Song identity: every recording owns one colour
--------------------------------------------------------------------- */
[data-song="0"]{--song:#F1AAB9;--song-deep:#812F47;--song:oklch(.81 .085 5);--song-deep:oklch(.43 .115 5)}
[data-song="1"]{--song:#ECB38C;--song-deep:#7E3A00;--song:oklch(.81 .085 55);--song-deep:oklch(.43 .11 55)}
[data-song="2"]{--song:#CCB5E8;--song-deep:#5D3F7D;--song:oklch(.81 .075 305);--song-deep:oklch(.43 .1 305)}
[data-song="3"]{--song:#D6BF85;--song-deep:#694A00;--song:oklch(.81 .08 88);--song-deep:oklch(.43 .1 88)}
[data-song="4"]{--song:#A9C3DE;--song-deep:#24527A;--song:oklch(.81 .055 240);--song-deep:oklch(.43 .085 240)}
[data-song="5"]{--song:#AECAA9;--song-deep:#2F5C31;--song:oklch(.81 .055 142);--song-deep:oklch(.43 .085 142)}
/* The record label carries the colour at rest. */
.demo[data-song] .vinyl-label{
background:radial-gradient(circle at 30% 22%,#FFF8F066,transparent 68%),var(--song);
}
/* The sleeve window takes a muted tint of the same colour. */
.demo[data-song] .track-art.vinyl-art{
background:
radial-gradient(ellipse at 12% 0%,#F3E8DE66,transparent 70%),
linear-gradient(125deg,
color-mix(in oklab,var(--song-deep) 32%,#A88880),
color-mix(in oklab,var(--song-deep) 40%,#6E4B4A));
}
/* A small colour key next to the number links card, record and player. */
.demo[data-song] .track-index{display:inline-flex;align-items:center;gap:8px}
.demo[data-song] .track-index::before{
content:"";width:8px;height:8px;border-radius:50%;background:var(--song-deep);
box-shadow:0 0 0 3px color-mix(in oklab,var(--song) 45%,transparent);
}
/* The turntable is driven by juice.js; CSS keeps it still by default. */
.demo .vinyl-disc,
.collection-preview .vinyl-disc{animation:none;will-change:rotate}
/* ---------------------------------------------------------------------
5. The stage: the playing card dims the house lights
--------------------------------------------------------------------- */
.music-section .kinetic-slot>.demo[data-demo]{
--demo-fill:
radial-gradient(130% 75% at 50% 14%,
color-mix(in oklab,var(--song) calc(var(--stage) * (20% + var(--level,0) * 22%)),transparent),
transparent 72%),
linear-gradient(160deg,
color-mix(in oklab,var(--gv-stage-top) calc(var(--stage) * 100%),var(--gv-paper)),
color-mix(in oklab,var(--gv-stage-bottom) calc(var(--stage) * 100%),var(--gv-paper-deep)));
--demo-ink:color-mix(in oklab,var(--gv-on-stage) calc(var(--stage) * 100%),var(--gv-ink));
--demo-soft:color-mix(in oklab,var(--gv-on-stage-soft) calc(var(--stage) * 100%),var(--gv-ink-soft));
--demo-edge:color-mix(in oklab,var(--song) calc(var(--stage) * 55%),#6D403540);
background:var(--demo-fill);
border-color:var(--demo-edge);
color:var(--demo-ink);
transition:--stage var(--gv-slow) var(--gv-ease-out),box-shadow var(--gv-base) ease,opacity var(--gv-slow) ease;
}
.music-section .kinetic-slot>.demo[data-demo].is-playing{
--stage:1;
box-shadow:
0 26px 60px #1F0E1055,
0 0 0 1px color-mix(in oklab,var(--song) 35%,transparent),
0 0 calc(30px + var(--level,0) * 40px) color-mix(in oklab,var(--song) 22%,transparent);
}
.demo[data-demo] :is(h3,.track-index,.recording-time,.recording-status,.volume-icon,.discussion-label,.discussion-icon),
.music-section .demo[data-demo] .track-name .eyebrow,
.gallery-page .demo[data-demo] .recording-favorite,
.gallery-page .demo[data-demo] .recording-favorite:hover{color:var(--demo-ink)}
.music-section .demo[data-demo] .track-name .eyebrow{color:var(--demo-soft)}
.demo[data-demo] .track-art.vinyl-art{
box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--song) calc(var(--stage) * 40%),transparent);
transition:box-shadow var(--gv-slow) ease;
}
.demo[data-demo].is-playing .track-art.vinyl-art{
background:
radial-gradient(ellipse at 50% 50%,color-mix(in oklab,var(--song-deep) 45%,transparent),transparent 70%),
linear-gradient(160deg,#2A1418,#140809);
}
/* Light bloom behind the record: opacity and scale only, so it composites cheaply. */
/* Sized to the record (116% of the window height) so the halo rims its edge. */
.gv-bloom{
position:absolute;left:50%;top:50%;height:175%;aspect-ratio:1;translate:-50% -50%;
border-radius:50%;pointer-events:none;z-index:0;
background:radial-gradient(circle,var(--song) 0% 30%,color-mix(in oklab,var(--song) 45%,transparent) 36%,transparent 62%);
opacity:calc(var(--stage) * (.4 + var(--level,0) * .5));
scale:calc(.94 + var(--kick,0) * .1);
will-change:opacity,scale;
}
.demo[data-demo] .vinyl-label{scale:calc(1 + var(--kick,0) * .035)}
/* The playing card's light spills onto the panel around it. */
.gv-spill{
position:absolute;inset:0 calc(-1 * var(--section-bleed,4vw));z-index:-1;border-radius:44px;pointer-events:none;
background:radial-gradient(circle 620px at var(--spill-x,50%) var(--spill-y,30%),
color-mix(in oklab,var(--song,#D5AE99) 58%,transparent),color-mix(in oklab,var(--song,#D5AE99) 18%,transparent) 55%,transparent 100%);
opacity:0;transition:opacity .9s ease;
}
.gv-spill.is-lit{opacity:1}
/* Other cards step back while one song plays. */
.gallery-page .tracks:has(.demo.is-playing) .kinetic-slot>.demo[data-demo]:not(.is-playing){opacity:.72}
.gallery-page .tracks:has(.demo.is-playing) .kinetic-slot>.demo[data-demo]:not(.is-playing):is(:hover,:focus-within){opacity:1}
/* Transport: press fast, release with a spring, glow with the music. */
.demo[data-demo] .transport-play{
transition:background var(--gv-base) ease,color var(--gv-base) ease,border-color var(--gv-base) ease,
scale var(--gv-base) var(--gv-ease-spring),box-shadow var(--gv-fast) ease;
}
.demo[data-demo] .transport-play:hover{scale:1.08}
.demo[data-demo] .transport-play:active{scale:.88;transition:scale var(--gv-press) ease-out}
.demo[data-demo].is-playing .transport-play{
background:var(--song);color:var(--gv-ink);border-color:transparent;
box-shadow:
0 0 0 calc(3px + var(--kick,0) * 6px) color-mix(in oklab,var(--song) 26%,transparent),
0 0 calc(12px + var(--level,0) * 26px) color-mix(in oklab,var(--song) 60%,transparent);
}
.demo[data-demo].is-playing .transport-play:hover{background:var(--song)}
.demo[data-demo].is-playing .transport-play:focus-visible{outline-color:var(--song)}
/* Progress rail: the played part takes the song colour on stage. */
.demo[data-demo] input.recording-progress{
--gv-played:color-mix(in oklab,var(--song) calc(var(--stage) * 100%),var(--gv-ink));
--gv-rail:color-mix(in oklab,#F6ECE32E calc(var(--stage) * 100%),#8A5B5940);
background-image:linear-gradient(90deg,var(--gv-played) var(--played,0%),var(--gv-rail) var(--played,0%));
}
.demo[data-demo] input.recording-progress::-webkit-slider-thumb{
background:var(--gv-played);border-color:color-mix(in oklab,var(--gv-stage-bottom) calc(var(--stage) * 100%),var(--gv-paper));
transition:scale var(--gv-fast) var(--gv-ease-spring);
}
.demo[data-demo] input.recording-progress::-moz-range-thumb{background:var(--gv-played)}
.demo[data-demo] input.recording-progress:is(:hover,:active,:focus-visible)::-webkit-slider-thumb{scale:1.45}
.demo[data-demo] .recording-volume input{accent-color:color-mix(in oklab,var(--song) calc(var(--stage) * 100%),var(--gv-ink))}
/* Scrub preview: the time under the pointer. */
.gv-scrub-tip{
position:absolute;z-index:6;translate:-50% calc(-100% - 6px);
padding:4px 8px;border-radius:999px;pointer-events:none;
font:700 12px/1 Manrope,Arial,sans-serif;font-variant-numeric:tabular-nums;
background:var(--demo-ink,var(--gv-ink));color:color-mix(in oklab,var(--gv-stage-bottom) calc(var(--stage) * 100%),var(--gv-paper));
opacity:0;scale:.85;transition:opacity var(--gv-fast) ease,scale var(--gv-fast) var(--gv-ease-spring);
}
.gv-scrub-tip.is-visible{opacity:1;scale:1}
/* Vote: the heart is the biggest moment on the page. */
.gallery-page .demo[data-demo] .recording-favorite{position:relative;overflow:visible;transition:scale var(--gv-base) var(--gv-ease-spring),color var(--gv-base) ease}
.gallery-page .demo[data-demo] .recording-favorite:active{scale:.86;transition-duration:var(--gv-press)}
.demo[data-demo] .recording-favorite[aria-pressed=true]{animation:none}
.gallery-page .demo[data-demo] .recording-favorite[aria-pressed=true]{
color:color-mix(in oklab,var(--gv-cherry-glow) calc(var(--stage) * 100%),var(--gv-cherry));
}
.demo[data-demo] .recording-favorite .favorite-heart{transition:fill var(--gv-base) ease}
.demo[data-demo] .recording-favorite .vote-count{display:inline-block;min-width:1ch;font-size:13px;font-weight:700}
.gv-burst{position:absolute;width:0;height:0;pointer-events:none;z-index:3}
.gv-burst>i{
position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;
border:2px solid currentColor;opacity:0;
}
.gv-burst>b{position:absolute;left:0;top:0;width:14px;height:14px;opacity:0}
.gv-burst>b svg{display:block;width:100%;height:100%;fill:currentColor}
/* Comments toggle reads as part of the card on stage. */
.demo[data-demo] summary.discussion-toggle{
border-color:color-mix(in oklab,var(--gv-on-stage) calc(var(--stage) * 24%),#6D403552);
background:color-mix(in oklab,#F6ECE3 calc(var(--stage) * 8%),#D6C7B82B);
}
/* ---------------------------------------------------------------------
6. Karaoke lyrics: the phrase is visible, the sung word fills in colour
--------------------------------------------------------------------- */
.demo[data-demo]{
--lyric-hi:color-mix(in oklab,var(--song) calc(var(--stage) * 100%),var(--gv-cherry));
--lyric-on:var(--lyric-hi);
--lyric-dim:color-mix(in oklab,var(--demo-ink) 40%,transparent);
}
.demo .track-name .lyric-caption[data-active=true]{height:52px;margin-top:8px}
.demo .track-name .lyric-caption .lyric-line{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
font:400 18px/1.4 Chilanka,Manrope,sans-serif;
}
.demo .track-name .lyric-caption.is-font-fallback .lyric-line{font-family:Manrope,Arial,sans-serif;font-weight:500}
.demo .track-name .lyric-caption .lyric-line .lyric-word{
display:inline;position:static;font:inherit;padding:0;margin:0;transform:none;text-shadow:none;
color:var(--lyric-dim);transition:none;
}
.demo .track-name .lyric-caption .lyric-word[data-state=sung]{color:var(--lyric-hi)}
.demo .track-name .lyric-caption .lyric-word[data-state=current]{
color:transparent;
background:linear-gradient(90deg,var(--lyric-hi) 0%,var(--lyric-hi) calc(var(--fill,0%) - 2%),var(--lyric-dim) calc(var(--fill,0%) + 2%),var(--lyric-dim) 100%);
-webkit-background-clip:text;background-clip:text;
}
/* ---------------------------------------------------------------------
7. Navigation ink and the now-playing bar
--------------------------------------------------------------------- */
@media (min-width:851px){
header #nav.has-ink{position:relative}
header #nav.has-ink>a::after{display:none}
.gv-nav-ink{
position:absolute;left:0;top:0;height:2px;width:0;border-radius:2px;pointer-events:none;
transform:translate3d(var(--nav-ink-center,0px),0,0) translateX(-50%);
background:var(--gv-cherry-glow);box-shadow:0 1px 5px #F2A0B540;
transition:transform 380ms cubic-bezier(.16,1,.3,1),width 380ms cubic-bezier(.16,1,.3,1),opacity 180ms ease-out;
}
.gv-nav-ink.is-instant{transition:none}
}
@media (max-width:850px){.gv-nav-ink{display:none}}
.gv-now{
position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:40;
display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 32px));
padding:8px 18px 8px 8px;border-radius:999px;
background:linear-gradient(160deg,var(--gv-stage-top),var(--gv-stage-bottom));color:var(--gv-on-stage);
box-shadow:0 18px 40px #1F0E1066,0 0 0 1px color-mix(in oklab,var(--song,#D5AE99) 40%,transparent);
translate:-50% calc(100% + 32px);opacity:0;
transition:translate var(--gv-slow) var(--gv-ease-spring),opacity var(--gv-base) ease;
overflow:hidden;
}
.gv-now.is-shown{translate:-50% 0;opacity:1}
.gv-now-toggle{
position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;padding:0;
background:var(--song,#D5AE99);color:var(--gv-ink);cursor:pointer;
box-shadow:0 0 calc(8px + var(--level,0) * 22px) color-mix(in oklab,var(--song,#D5AE99) 60%,transparent);
transition:scale var(--gv-base) var(--gv-ease-spring);
}
.gv-now-toggle:hover{scale:1.08}
.gv-now-toggle:active{scale:.88;transition-duration:var(--gv-press)}
.gv-now-toggle svg{position:absolute;width:20px;height:20px}
.gv-now-toggle .pause-icon,.gv-now.is-playing .gv-now-toggle .play-icon{opacity:0}
.gv-now.is-playing .gv-now-toggle .pause-icon{opacity:1}
.gv-now-title{
display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;border:0;padding:4px 2px;
background:none;color:inherit;cursor:pointer;text-align:left;font:inherit;
}
.gv-now-kicker{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--song,#D5AE99)}
.gv-now-name{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gv-now-time{flex:none;margin-left:auto;padding-left:8px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--gv-on-stage-soft)}
.gv-now-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#F6ECE31F}
.gv-now-progress>i{display:block;height:100%;width:100%;background:var(--song,#D5AE99);transform-origin:left;scale:var(--progress,0) 1}
.gv-now :focus-visible{outline:2px solid var(--gv-cherry-glow);outline-offset:3px}
/* ---------------------------------------------------------------------
8. Desktop preview: hovering a card shows its stage colour.
Mouse-only, so touch screens keep the play-only behaviour unchanged.
Playing keeps the colour; after a pause the card returns to paper
once the pointer leaves.
--------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
.music-section .kinetic-slot>.demo[data-demo]:hover{--stage:1}
.demo[data-demo]:hover .transport-play,
.demo[data-demo]:hover .transport-play:hover{
background:var(--song);color:var(--gv-ink);border-color:transparent;
box-shadow:
0 0 0 calc(3px + var(--kick,0) * 6px) color-mix(in oklab,var(--song) 26%,transparent),
0 0 calc(12px + var(--level,0) * 26px) color-mix(in oklab,var(--song) 60%,transparent);
}
/* The sleeve window fades with the card instead of switching at once. */
.music-section .demo[data-demo] .track-art.vinyl-art{
background:
radial-gradient(ellipse at 12% 0%,color-mix(in oklab,#F3E8DE66 calc((1 - var(--stage)) * 100%),transparent),transparent 70%),
radial-gradient(ellipse at 50% 50%,color-mix(in oklab,var(--song-deep) calc(var(--stage) * 45%),transparent),transparent 70%),
linear-gradient(125deg,
color-mix(in oklab,#2A1418 calc(var(--stage) * 100%),color-mix(in oklab,var(--song-deep) 32%,#A88880)),
color-mix(in oklab,#140809 calc(var(--stage) * 100%),color-mix(in oklab,var(--song-deep) 40%,#6E4B4A)));
}
}
/* ---------------------------------------------------------------------
9. Homepage panels share one width.
The hero clips its panel to its own box (overflow:clip), so it sat
narrower than the panels below. Its box now reaches the same panel
edges and its padding keeps the content where it was.
--------------------------------------------------------------------- */
main{--panel-out:calc(var(--section-bleed) - 16px);--hero-pad:clamp(24px,3.2vw,58px)}
main>.hero{margin-inline:calc(-1 * var(--panel-out));padding-inline:calc(var(--hero-pad) + var(--panel-out))}
main>.hero::before{inset:0}
@media (max-width:850px){main{--hero-pad:24px}}
@media (max-width:580px){main{--panel-out:calc(var(--section-bleed) - 10px);--hero-pad:20px}}
/* ---------------------------------------------------------------------
10. Reduced motion: colour still changes, nothing travels or pulses
--------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.music-section .kinetic-slot>.demo[data-demo],
.demo[data-demo] .transport-play,
.gv-scrub-tip,.gv-now,.gv-now-toggle,.gv-nav-ink,.gv-spill,
.hero .hero-cta .circle-arrow{transition:none}
.demo[data-demo] .transport-play:is(:hover,:active),
.gv-now-toggle:is(:hover,:active),
.hero .hero-cta:is(:hover,:active) .circle-arrow{scale:1}
.gv-bloom,.demo[data-demo] .vinyl-label{scale:1}
.demo .track-name .lyric-caption .lyric-word[data-state=current]{background:none;color:var(--lyric-hi)}
.gv-now{translate:-50% 0}
}
/* Turkish inline hints for empty and invalid required fields. */
:is(.message-form,.recording-comment-form) :is(input,textarea)[aria-invalid=true]{border-color:var(--gv-cherry)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--gv-cherry) 14%,transparent)}
:is(.message-form,.recording-comment-form) :is(input,textarea)[aria-invalid=true]::placeholder{color:var(--gv-cherry);opacity:1}
/* A quiet collaboration invitation at the end of the demos gallery. */
.demo-collaboration-invite{max-width:1000px;margin:38px auto 0;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-radius:26px;background:color-mix(in srgb,var(--gv-paper) 78%,transparent);box-shadow:var(--shadow-rest),var(--surface-light)}
.demo-collaboration-invite p{max-width:680px;margin:0;font-size:16px;line-height:1.65;color:var(--gv-ink-soft)}
.demo-collaboration-invite a{flex:0 0 auto;white-space:nowrap}
@media(max-width:600px){.demo-collaboration-invite{margin-top:28px;padding:20px;align-items:flex-start;flex-direction:column;gap:12px}.demo-collaboration-invite p{font-size:15px}}