/* ---------------------------------------------------------------------------
ORB-KIT — Jervis orb'unun beş tasarımı, TEK kopya.
İki sayfa aynı orb'u gösteriyor:
/assets/orb-designs.html beş orb, yan yana, seçilmek için
/assets/orb-ui-designs.html on yerleşim, orb'u içlerinde görmek için
İkisine iki kopya CSS koymak, ilk kopyanın bozulduğu güne kadar çalışırdı.
Bu dosya o yüzden var; sayfalar `` ile alıyor
(CSP: style-src 'self' — aynı kökten stil serbest).
Taban, Sesera panelindeki asistan orb'u (`components/ui/siri-orb.tsx`):
bulanıklığın altında dönen renk lekeleri, üstüne `contrast()` — çakışan
yerler griye çalmaz, yeni bir renk üretir. Beşi de o teknikten türedi;
ikisi (04 Kor, 05 Prizma) onu bilerek kırıyor.
Saf CSS, WebGL yok. Sebep Sesera'daki ile aynı: telefonda ikinci bir GL
bağlamı gerçek bir bedel, ve bu efektin ona ihtiyacı yok.
Kullanımı — beş tasarım AYNI DOM'u ister, fark yalnız `oN` sınıfı:
Ölçü tek değişkenden: `--s`. Durum `data-st` ile: idle · listen · think ·
speak · mic.
------------------------------------------------------------------------ */
/* =========================================================================
ORB — ortak iskelet.
Beş tasarımın hepsi AYNI DOM'u kurar; fark yalnız üstteki `oN` sınıfı.
Bu, sayfanın verdiği sözün kendisi: "bunu seçtim" demek master-orb.css'e
bir blok demek, master-orb.js'in yeniden yazılması değil.
.o__base — opak zemin (küre gövdesi / faset)
.o__fx — BULANIK grup: içindeki üç leke burada erir
.o__ring — halka / kenar parıltısı / kıvılcım katmanı
.o__core — çekirdek / gözbebeği
.o__sheen — tek keskin katman: parlama ve alt gölge
Ölçü tek bir değişkenden türer (--s). 132 pikselli orb, 34 piksellinin
bulanık hâli değil; aynı resmin büyüğü.
====================================================================== */
/* ---------------------------------------------------------------------------
YUMUŞAK GEÇİŞ.
Durum değişince iki şey değişiyordu ve ikisi de SIÇRIYORDU:
1) RENK. Özel değişkenler (`--c1/--c2/--c3/--glow`) varsayılan olarak
geçişlenmez — tarayıcı onları "bir metin parçası" sayar, dolayısıyla
boştan dinliyora geçiş tek karede oluyordu. `@property` ile tipini
diye kaydedince interpolasyona giriyorlar ve `transition`
çalışıyor. Kayıt burada, tek yerde; iki sayfa da bunu alıyor.
2) HIZ. `animation-duration`u değiştirmek dönüş AÇISINI zıplatır: aynı
geçmiş süre yeni süreye bölününce ilerleme yüzdesi değişir. Süreyi
CSS'te durumdan bağımsız tutup hızı Web Animations API'nin
`playbackRate`'iyle sürmek gerekiyor — o, o anki konumu koruyup yalnız
hızı değiştirir. Onu `orb-kit.js` yapıyor; JS varsa `.js-hiz` sınıfını
koyup CSS'in süre çarpanını nötrler. JS YOKSA bu dosya tek başına yine
doğru çalışır, geçiş sadece sert olur — master-orb.css'e bu kit'i
koyup JS'i sonra bağlamak mümkün kalsın diye.
------------------------------------------------------------------------ */
@property --c1 { syntax: ""; inherits: true; initial-value: #d8e8fc; }
@property --c2 { syntax: ""; inherits: true; initial-value: #7c8cff; }
@property --c3 { syntax: ""; inherits: true; initial-value: #22386e; }
@property --glow { syntax: ""; inherits: true; initial-value: rgba(159, 200, 245, .28); }
.orb2 {
position: relative; flex: none;
width: var(--s); height: var(--s);
border-radius: 50%;
overflow: hidden; /* .o__fx taşar; kenarı çember kesiyor */
isolation: isolate; /* bulanık katman arkadaki sahneye bulaşmasın */
cursor: pointer;
--s: 56px;
--blur: max(calc(var(--s) * .075), 3px);
--ctr: 1.45;
--dur: 16s;
/* Dış hâle. box-shadow overflow:hidden'dan etkilenmez — kesilen şey
çocuklardır, elemanın kendi gölgesi değil. */
box-shadow: 0 0 calc(var(--s) * .34) calc(var(--s) * .035) var(--glow);
/* Kit kendi easing'ini taşır: `var(--ease)` sayfadan geliyordu ve
tanımsız kaldığı yerde bütün bildirim geçersiz olurdu. */
--ease-orb: cubic-bezier(.4, 0, .2, 1);
--spring-orb: cubic-bezier(.34, 1.3, .5, 1);
--gecis: .95s;
transition:
box-shadow var(--gecis) var(--ease-orb),
--c1 var(--gecis) var(--ease-orb),
--c2 var(--gecis) var(--ease-orb),
--c3 var(--gecis) var(--ease-orb),
--glow var(--gecis) var(--ease-orb);
}
.orb2 > span { position: absolute; inset: 0; display: block; border-radius: 50%; pointer-events: none; }
.orb2 i { position: absolute; inset: 0; display: block; border-radius: 50%; will-change: transform; }
/* ---- DURUM PALETİ — beş tasarımda da aynı, master-orb.css ile aynı ------
Bu tablo bilerek tasarımın DIŞINDA: renk "ne yapıyor"u söyler, form
"hangi orb"u. İkisi karışırsa beş tasarım yine tek tasarım olur. */
/* Üç ton bilerek AÇIK / ORTA / KOYU. Aynı hüzmeden üç eşit ton alınırsa
bulanıklığın altında hepsi tek renge çöker — 01'in içindeki hareket tam
olarak bu açıklık farkından okunuyor. */
/* Her durum ÜÇ ton taşır ve üçü aynı hüzmeden DEĞİL: açık ton bir yana,
orta ton komşu bir hüzmeye kayar (boşta buz mavi + periwinkle, dinlerken
yeşil + camgöbeği...). Tek hüzmeden alınan üç ton bulanıklığın altında
tek renge çöküyordu — 01'in bütün numarası iki rengin çakışıp ÜÇÜNCÜ bir
renk üretmesi, ve tek hüzmede üretecek bir şey yok. Durum yine tek renkle
okunuyor; çift olan şey o rengin içi. */
.orb2 { --c1: #d8e8fc; --c2: #7c8cff; --c3: #22386e; --glow: rgba(159,200,245,.28); --spd: 1; }
.orb2[data-st="listen"] { --c1: #d6f7e8; --c2: #3fbf8f; --c3: #10514f; --glow: rgba(127,209,168,.40); --spd: .60; }
.orb2[data-st="think"] { --c1: #ffeeb4; --c2: #e0932c; --c3: #5c3f0e; --glow: rgba(224,185,60,.42); --spd: .34; }
.orb2[data-st="speak"] { --c1: #d4e2ff; --c2: #7aa2f7; --c3: #2c2f8c; --glow: rgba(122,162,247,.44); --spd: .26; }
.orb2[data-st="mic"] { --c1: #ffdcd4; --c2: #ef5f52; --c3: #6d2a12; --glow: rgba(255,123,107,.52); --spd: .20; }
/* JS hızı devraldı: süre çarpanı sabitlenir, hız playbackRate'ten gelir.
Palet bloğuyla aynı ağırlıkta olduğu için ONDAN SONRA gelmek zorunda. */
.orb2.js-hiz { --spd: 1; }
@keyframes o-spin { to { rotate: 360deg; } }
@keyframes o-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
@keyframes o-core { 0%, 100% { scale: .90; opacity: .82; } 50% { scale: 1.10; opacity: 1; } }
@keyframes o-flick { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes o-swell { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
/* ---------------------------------------------------------------- 01 SIVI
Sesera'nın orb'u, Terman'ın rengiyle. Üç leke merkezin çevresinde döner;
BULANIKLIK onları eritir, `contrast()` çakışmayı geri doyurur. Kontrastı
düşürmek efekti bir lekeye çevirir — asıl numara orada. */
.o1 .o__base { display: none; }
.o1 .o__fx {
/* Çemberden taşar: bulanığın yumuşak dış kenarı içeride halka gibi
görünmesin diye kırpılıyor. */
inset: -20%;
/* OPAK. contrast() bu katmanda ne birikmişse ona bakar; saydamın üstünde
lekeleri yalnızca grileştirir. Taban rengi burada olmak ZORUNDA. */
background: radial-gradient(circle at 50% 50%, var(--c3) 0%, #0a0d14 82%);
filter: blur(var(--blur)) contrast(var(--ctr));
}
/* Lekeler merkezden UZAK duruyor. İlk denemede üçü de ortaya yığılıyordu ve
contrast() birleşimi tek renge indiriyordu — çakışma kenarda olmalı. */
.o1 .b1 {
background: radial-gradient(circle at 50% 14%, var(--c1) 0%, transparent 46%);
animation: o-spin calc(var(--dur) * var(--spd)) linear infinite;
}
.o1 .b2 {
background: radial-gradient(circle at 82% 72%, var(--c2) 0%, transparent 44%);
animation: o-spin calc(var(--dur) * var(--spd) * 1.45) linear infinite reverse;
}
.o1 .b3 {
background: radial-gradient(circle at 18% 72%, var(--c3) 0%, transparent 48%);
/* rotate + scale AYRI özellikler: iki animasyon tek transform'da
birbirini ezerdi. */
animation: o-spin calc(var(--dur) * var(--spd) * .78) linear infinite,
o-breathe calc(var(--dur) * var(--spd) * .36) ease-in-out infinite;
}
.o1 .o__ring { display: none; }
.o1 .o__core { display: none; }
/* Bulanık grubun dışında: bir küre keskin bir parlamaya ihtiyaç duyar,
yoksa içi ne kadar iyi olursa olsun düz bir daire olarak okunur. */
.o1 .o__sheen {
background:
radial-gradient(circle at 33% 24%, rgba(255,255,255,.30) 0%, transparent 38%),
radial-gradient(circle at 50% 132%, rgba(0,0,0,.28) 0%, transparent 52%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
/* ------------------------------------------------------------ 02 ÇEKİRDEK
Koyu cam bir küre, içinde asılı duran parlak bir çekirdek. Dış kabuk
SABİT; hareket eden şey içeridedir. Hacmi veren şey iç gölge: alt kenarda
koyu, üst kenarda ince bir ışık. */
.o2 .o__base {
background: radial-gradient(circle at 50% 38%, #18202f 0%, #0a0d14 76%, #05070b 100%);
}
.o2 .o__fx {
inset: 12%;
background: radial-gradient(circle at 50% 50%, rgba(10,13,20,1) 0%, rgba(10,13,20,1) 100%);
filter: blur(calc(var(--blur) * .8)) contrast(1.25);
opacity: .92;
}
.o2 .b1 {
background: radial-gradient(circle at 38% 34%, var(--c2) 0%, transparent 46%);
animation: o-spin calc(var(--dur) * var(--spd) * .9) linear infinite;
}
.o2 .b2 {
background: radial-gradient(circle at 68% 62%, var(--c3) 0%, transparent 44%);
animation: o-spin calc(var(--dur) * var(--spd) * 1.6) linear infinite reverse;
}
.o2 .b3 { display: none; }
/* Cam kenarı: içeriden bir kırılma çizgisi + alttan dolan gölge. */
.o2 .o__ring {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.13),
inset 0 calc(var(--s) * -.07) calc(var(--s) * .14) rgba(0,0,0,.6),
inset 0 calc(var(--s) * .035) calc(var(--s) * .09) rgba(255,255,255,.09);
}
.o2 .o__core {
inset: 31%;
background: radial-gradient(circle at 50% 42%,
#ffffff 0%, var(--c1) 22%, var(--c2) 52%, transparent 76%);
filter: blur(calc(var(--s) * .028));
animation: o-core calc(var(--dur) * var(--spd) * .28) ease-in-out infinite;
}
.o2 .o__sheen {
background:
radial-gradient(circle at 31% 21%, rgba(255,255,255,.48) 0%, transparent 24%),
radial-gradient(circle at 62% 112%, rgba(0,0,0,.42) 0%, transparent 46%);
}
/* ---------------------------------------------------------------- 03 İRİS
Bir diyafram: dışta dönen renkli halka, ortada koyu gözbebeği. Gözbebeği
duruma göre AÇILIR/DARALIR — dinlerken büyük, düşünürken iğne ucu. Bu,
durumun renkten bağımsız ikinci bir kanalı. */
.o3 .o__base { background: radial-gradient(circle at 50% 50%, #0d121c 0%, #05070c 100%); }
/* Halkanın içeri sızan hâlesi. */
.o3 .o__fx { filter: blur(calc(var(--s) * .085)); opacity: .5; }
.o3 .b1 {
background: conic-gradient(from 0deg, var(--c3), var(--c1) 25%, var(--c2) 52%, var(--c3) 78%, var(--c3));
animation: o-spin calc(var(--dur) * var(--spd) * .5) linear infinite;
}
.o3 .b2, .o3 .b3 { display: none; }
.o3 .o__ring {
background: conic-gradient(from 0deg,
var(--c3) 0deg, var(--c1) 62deg, var(--c2) 128deg, var(--c3) 196deg,
rgba(255,255,255,.06) 250deg, var(--c2) 300deg, var(--c3) 360deg);
-webkit-mask: radial-gradient(circle, transparent 0 55%, #000 58%, #000 96%, transparent 99%);
mask: radial-gradient(circle, transparent 0 55%, #000 58%, #000 96%, transparent 99%);
animation: o-spin calc(var(--dur) * var(--spd) * .5) linear infinite;
}
.o3 .o__core {
inset: 34%;
background: radial-gradient(circle at 50% 44%, #121826 0%, #04060a 72%);
box-shadow: 0 0 0 1px rgba(255,255,255,.10), inset 0 0 calc(var(--s) * .09) rgba(0,0,0,.9);
transition: inset var(--gecis) var(--spring-orb);
}
.orb2.o3[data-st="listen"] .o__core { inset: 27%; } /* diyafram açılır */
.orb2.o3[data-st="think"] .o__core { inset: 41%; } /* iğne ucu */
.orb2.o3[data-st="mic"] .o__core { inset: 25%; }
.o3 .o__sheen {
background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.20) 0%, transparent 30%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
/* ----------------------------------------------------------------- 04 KOR
Kenarı OLMAYAN tek tasarım. Çember yok, cam yok, parlama yok: yalnız
sıcaklığı olan bir bulut ve içinde savrulan kıvılcımlar. contrast()
bilerek yok — burada istenen şey ayrılma değil erime. */
.o4 { overflow: visible; box-shadow: none; }
.o4 .o__base { display: none; }
/* Taşma ölçülü: -38%'te 40 piksellik orb komşusunun üstüne biniyordu
(şeritteki boşluk 14 piksel). Bulut hâlâ kenarsız, ama kendi kutusunda. */
.o4 .o__fx {
inset: -26%;
filter: blur(calc(var(--s) * .11));
opacity: .95;
}
.o4 .b1 {
background: radial-gradient(circle at 46% 38%, var(--c1) 0%, transparent 40%);
animation: o-spin calc(var(--dur) * var(--spd) * 1.1) linear infinite,
o-breathe calc(var(--dur) * var(--spd) * .5) ease-in-out infinite;
}
.o4 .b2 {
background: radial-gradient(circle at 62% 60%, var(--c2) 0%, transparent 38%);
animation: o-spin calc(var(--dur) * var(--spd) * 1.7) linear infinite reverse;
}
.o4 .b3 {
background: radial-gradient(circle at 38% 63%, var(--c3) 0%, transparent 44%);
animation: o-spin calc(var(--dur) * var(--spd) * .82) linear infinite;
}
/* Kıvılcımlar: nokta boyu da --s'ten türer, yoksa küçük orb'da leke olur. */
.o4 .o__ring {
background:
radial-gradient(circle calc(var(--s) * .022) at 24% 30%, var(--c1), transparent),
radial-gradient(circle calc(var(--s) * .016) at 74% 32%, var(--c2), transparent),
radial-gradient(circle calc(var(--s) * .019) at 66% 74%, var(--c1), transparent),
radial-gradient(circle calc(var(--s) * .013) at 32% 70%, var(--c2), transparent),
radial-gradient(circle calc(var(--s) * .015) at 52% 18%, var(--c1), transparent);
animation: o-spin calc(var(--dur) * var(--spd) * 2.4) linear infinite,
o-flick calc(var(--dur) * var(--spd) * .22) ease-in-out infinite;
}
/* Çekirdek beyaz DEĞİL: bembeyaz bir merkez bulutun rengini yıkıyordu,
orb boşta buz gibi bir lekeye dönüyordu. Beyaz yalnız iğne ucunda. */
.o4 .o__core {
inset: 34%;
background: radial-gradient(circle at 50% 50%, #ffffff 0%, var(--c1) 18%, var(--c2) 46%, transparent 74%);
filter: blur(calc(var(--s) * .018));
animation: o-core calc(var(--dur) * var(--spd) * .3) ease-in-out infinite;
}
.o4 .o__sheen { display: none; }
/* ------------------------------------------------------------- 05 PRİZMA
Kesilmiş bir taş: sert kenarlı fasetler, yavaşça dönen bir kütle, kenarda
gezinen bir parıltı. Beşi içinde tek "nesne", tek katı olan. Bulanıklık
YOK — burada okunması gereken şey kenarın kendisi.
Kritik olan şey KATI DÖNMEK: taban, taç ve masa faseti AYNI süre, AYNI
yönde döner. İlk denemede taç ters yönde ve başka hızda dönüyordu ve orb
bir taş değil bir fırıldak olarak okundu — bir taşın fasetleri birbirine
göre kımıldamaz. Bağımsız hareket eden tek şey kenardaki parıltı, çünkü
o taş değil ışık. */
.o5 .o__base {
background: conic-gradient(from -18deg,
var(--c3) 0deg 45deg, var(--c1) 45deg 90deg,
var(--c2) 90deg 135deg, var(--c3) 135deg 180deg,
var(--c1) 180deg 225deg, var(--c2) 225deg 270deg,
var(--c3) 270deg 315deg, var(--c1) 315deg 360deg);
filter: brightness(.82) saturate(1.06);
animation: o-spin calc(var(--dur) * var(--spd) * 2.4) linear infinite;
}
.o5 .o__fx { filter: none; }
/* Taç: fasetleri tabanınkiyle HİZALI DEĞİL (from 4deg vs -18deg), yani
kenarlar üst üste düşmüyor — kesim iki katmanlı okunuyor. */
.o5 .b1 {
background: conic-gradient(from 4deg,
rgba(255,255,255,.22) 0deg 45deg, rgba(0,0,0,.30) 45deg 90deg,
rgba(255,255,255,.13) 90deg 135deg, rgba(0,0,0,.22) 135deg 180deg,
rgba(255,255,255,.27) 180deg 225deg, rgba(0,0,0,.28) 225deg 270deg,
rgba(255,255,255,.11) 270deg 315deg, rgba(0,0,0,.20) 315deg 360deg);
-webkit-mask: radial-gradient(circle, transparent 0 25%, #000 28%);
mask: radial-gradient(circle, transparent 0 25%, #000 28%);
animation: o-spin calc(var(--dur) * var(--spd) * 2.4) linear infinite;
}
/* Küre gölgesi: kenara doğru koyulaşma olmadan fasetler düz bir pasta olur. */
.o5 .b2 { background: radial-gradient(circle at 44% 36%, transparent 26%, rgba(0,0,0,.58) 100%); }
/* Kenarda gezinen parıltı — taşın "canlı" olduğunu söyleyen TEK bağımsız
hareket. */
.o5 .o__ring {
background: conic-gradient(from 0deg,
transparent 0deg 62deg, rgba(255,255,255,.72) 80deg,
transparent 98deg 360deg);
-webkit-mask: radial-gradient(circle, transparent 0 79%, #000 84%);
mask: radial-gradient(circle, transparent 0 79%, #000 84%);
animation: o-spin calc(var(--dur) * var(--spd) * .55) linear infinite;
}
/* Masa faseti — taşın üst yüzü, ve SEKİZGEN. Daire olduğu sürece altındaki
ışınsal fasetler bir pasta grafiği gibi okunuyordu; pırlantayı üstten
pasta yapmayan şey tam olarak masanın köşeli olması. .b3 onun bir gömlek
büyüğü: pah (bevel) çizgisi. */
.o5 .b3 {
display: block;
inset: 27%;
border-radius: 0;
clip-path: polygon(96.2% 69.1%, 69.1% 96.2%, 30.9% 96.2%, 3.8% 69.1%,
3.8% 30.9%, 30.9% 3.8%, 69.1% 3.8%, 96.2% 30.9%);
background: rgba(255,255,255,.34);
animation: o-spin calc(var(--dur) * var(--spd) * 2.4) linear infinite;
}
.o5 .o__core {
inset: 29%;
border-radius: 0;
clip-path: polygon(96.2% 69.1%, 69.1% 96.2%, 30.9% 96.2%, 3.8% 69.1%,
3.8% 30.9%, 30.9% 3.8%, 69.1% 3.8%, 96.2% 30.9%);
background: conic-gradient(from 10deg,
var(--c1), var(--c2) 26%, var(--c1) 52%, var(--c3) 76%, var(--c1));
filter: brightness(1.1) saturate(.95);
animation: o-spin calc(var(--dur) * var(--spd) * 2.4) linear infinite,
o-swell calc(var(--dur) * var(--spd) * .42) ease-in-out infinite;
}
.o5 .o__sheen {
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,.30) 0%, transparent 26%),
radial-gradient(circle at 62% 110%, rgba(0,0,0,.42) 0%, transparent 46%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
/* ------------------------------------------------------- 01 + CAM (d1)
Canlı ana ekranın orb'u (10 Eyl). Mira: *"şu anki dizaynı mükemmel.
Sadece 3D'yimsi olmasını istiyorum"* — yedi 3B hâl çizildi
(/assets/orb-3d-designs.html), seçilen 01 · Cam küre.
01 · SIVI'NIN ÜSTÜNE bir değiştirici, ayrı bir tasarım DEĞİL: lekeler,
bulanıklık, contrast(), dönüş ve durum paleti olduğu gibi o1'den geliyor.
d1 yalnız o1'in kapattığı üç katmanı (.o__ring, .o__core, .o__sheen)
cama çeviriyor: kenarda içeri koyulaşan bant + en dışta ince ışık çizgisi
(Fresnel), üstte lambanın pencere yansıması, altta ışığın camdan geçip
toplandığı hilal (kostik). Hepsinin rengi --c1'den, yani durumla dönüyor.
Kullanımı: ``. Sınıf düşerse orb bugünkü düz
Sıvı'ya döner — geri almak tek kelime. */
.orb2.o1.d1 .o__ring,
.orb2.o1.d1 .o__core { display: block; }
.orb2.o1.d1 {
box-shadow:
0 0 calc(var(--s) * .34) calc(var(--s) * .035) var(--glow),
0 calc(var(--s) * .06) calc(var(--s) * .14) rgba(0, 0, 0, .38);
}
.orb2.o1.d1 .o__ring {
/* Kostik: alt kenarın hemen içinde, durum renginin açık tonuyla. */
background:
radial-gradient(ellipse 44% 20% at 50% 86%,
color-mix(in srgb, var(--c1) 80%, transparent) 0%,
color-mix(in srgb, var(--c1) 26%, transparent) 50%, transparent 100%);
mix-blend-mode: screen;
opacity: .5;
}
.orb2.o1.d1 .o__core {
/* Pencere yansıması: üstte yatay, yumuşak, yukarıdan aşağı sönen. */
inset: 6% 21% 63% 21%;
border-radius: 50% / 62% 62% 38% 38%;
background: linear-gradient(180deg, rgba(255, 255, 255, .40) 0%,
rgba(255, 255, 255, .09) 58%,
rgba(255, 255, 255, 0) 100%);
filter: blur(calc(var(--s) * .006));
}
.orb2.o1.d1 .o__sheen {
background:
radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .16) 0%, transparent 26%),
radial-gradient(circle at 50% 50%, transparent 58%, rgba(2, 3, 8, .42) 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, .20),
inset 0 0 calc(var(--s) * .05) calc(var(--s) * .006)
color-mix(in srgb, var(--c1) 45%, transparent),
inset 0 calc(var(--s) * -.03) calc(var(--s) * .10) rgba(0, 0, 0, .35);
}