/* THEME · SINGULARITY — obsidian doors in a digital room being torn apart; beyond them, a round hall of stargates orbiting the viewer. All detail is generated: gradients + hand-authored SVG data-URIs (runes, lightning, debris). No assets, works offline. */ html[data-theme="singularity"] body { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; } :root { /* runic column etched into the obsidian */ --runes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 460'%3E%3Cg fill='none' stroke='%23aac4e8' stroke-opacity='.28' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M14 14 V46 M14 20 L32 12 M14 32 L32 24'/%3E%3Cpath d='M14 58 V90 M14 58 C30 60 30 74 30 90'/%3E%3Cpath d='M14 102 V134 M14 108 C34 112 34 126 14 130'/%3E%3Cpath d='M16 146 V178 M16 150 L32 158 M16 162 L32 170'/%3E%3Cpath d='M14 190 V222 M14 190 C32 192 32 202 14 206 L30 222'/%3E%3Cpath d='M28 234 L14 250 L28 266'/%3E%3Cpath d='M12 278 L32 310 M32 278 L12 310'/%3E%3Cpath d='M14 322 V354 M14 322 C34 324 34 340 14 342'/%3E%3Cpath d='M14 366 V398 M30 366 V398 M14 374 L30 390'/%3E%3Cpath d='M12 410 V442 M32 410 V442 M12 410 L22 426 L32 410'/%3E%3C/g%3E%3C/svg%3E"); /* lightning bolts (two variants alternate in the flicker) */ --bolt1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 500'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M40 0 L30 70 L48 120 L26 200 L44 260 L30 330 L46 400 L36 500 M30 70 L16 98 M44 260 L60 294 M30 330 L18 356' stroke='%23bfe9ff' stroke-opacity='.4' stroke-width='9'/%3E%3Cpath d='M40 0 L30 70 L48 120 L26 200 L44 260 L30 330 L46 400 L36 500 M30 70 L16 98 M44 260 L60 294 M30 330 L18 356' stroke='%23ffffff' stroke-width='2.6'/%3E%3C/g%3E%3C/svg%3E"); --bolt2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 500'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M36 0 L48 80 L28 140 L46 230 L26 300 L44 370 L32 500 M48 80 L64 108 M26 300 L12 330 M46 230 L58 258' stroke='%23bfe9ff' stroke-opacity='.4' stroke-width='9'/%3E%3Cpath d='M36 0 L48 80 L28 140 L46 230 L26 300 L44 370 L32 500 M48 80 L64 108 M26 300 L12 330 M46 230 L58 258' stroke='%23ffffff' stroke-width='2.6'/%3E%3C/g%3E%3C/svg%3E"); /* the room tearing apart: debris shards + glitch panels */ --shardfield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620'%3E%3Cg%3E%3Crect x='40' y='60' width='34' height='34' fill='%23141a28' stroke='%233c4b74' stroke-width='1.4' transform='rotate(24 57 77)'/%3E%3Crect x='520' y='110' width='22' height='22' fill='%23101522' stroke='%23364468' stroke-width='1.2' transform='rotate(-18 531 121)'/%3E%3Crect x='140' y='430' width='42' height='42' fill='%23161c2c' stroke='%23405082' stroke-width='1.4' transform='rotate(38 161 451)'/%3E%3Crect x='470' y='480' width='28' height='28' fill='%23121726' stroke='%233a4870' stroke-width='1.2' transform='rotate(-32 484 494)'/%3E%3Crect x='300' y='40' width='16' height='16' fill='%23101522' stroke='%23364468' transform='rotate(45 308 48)'/%3E%3Crect x='80' y='250' width='14' height='14' fill='%23121726' stroke='%233a4870' transform='rotate(-25 87 257)'/%3E%3Crect x='560' y='330' width='16' height='16' fill='%23141a28' stroke='%233c4b74' transform='rotate(12 568 338)'/%3E%3Cg transform='rotate(-8 210 180)'%3E%3Crect x='170' y='160' width='80' height='44' fill='%2357e6ff' fill-opacity='.06' stroke='%2357e6ff' stroke-opacity='.28' stroke-width='1'/%3E%3Cpath d='M178 172 h40 M178 180 h56 M178 188 h30' stroke='%2357e6ff' stroke-opacity='.3' stroke-width='2'/%3E%3C/g%3E%3Cg transform='rotate(14 470 240)'%3E%3Crect x='430' y='214' width='76' height='40' fill='%23ff4fd8' fill-opacity='.05' stroke='%23ff4fd8' stroke-opacity='.22' stroke-width='1'/%3E%3Cpath d='M438 226 h34 M438 234 h50 M438 242 h26' stroke='%23ff4fd8' stroke-opacity='.26' stroke-width='2'/%3E%3C/g%3E%3Cg transform='rotate(-20 300 540)'%3E%3Crect x='260' y='516' width='72' height='40' fill='%2357e6ff' fill-opacity='.05' stroke='%2357e6ff' stroke-opacity='.22' stroke-width='1'/%3E%3Cpath d='M268 528 h44 M268 536 h30 M268 544 h52' stroke='%2357e6ff' stroke-opacity='.26' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* ── the breach: a digital room coming apart around the doors ─────────── */ html[data-theme="singularity"] #scene-door .wall { background: var(--shardfield), radial-gradient(52vmax 40vmax at 80% 16%, rgba(110,44,190,.30), transparent 64%), radial-gradient(48vmax 36vmax at 14% 74%, rgba(30,80,180,.26), transparent 64%), radial-gradient(34vmax 30vmax at 62% 88%, rgba(200,60,190,.12), transparent 60%), radial-gradient(ellipse at 50% 45%, #0d1024 0%, #070818 55%, #03030c 100%); background-size: 620px 620px, auto, auto, auto, auto; } html[data-theme="singularity"] #scene-door .wall-age { background: var(--shardfield), radial-gradient(30vmax 40vmax at 30% 50%, rgba(120,60,220,.10), transparent 60%), radial-gradient(30vmax 40vmax at 70% 50%, rgba(60,120,255,.08), transparent 60%); background-size: 950px 950px, auto, auto; background-position: 47% 62%, 0 0, 0 0; opacity: .9; } html[data-theme="singularity"] #scene-door .floor { /* a shattered deck: dim code-litter mirrored under the breach */ background: var(--shardfield), repeating-linear-gradient(90deg, rgba(90,140,220,.05) 0 2px, transparent 2px 110px), linear-gradient(180deg, rgba(34,42,74,.55), rgba(4,6,14,.96) 72%); background-size: 620px 620px, auto, auto; transform: perspective(700px) rotateX(55deg); transform-origin: 50% 0; height: 32vh; bottom: -2vh; opacity: .9; } html[data-theme="singularity"] #scene-door .floor-pool { background: radial-gradient(30% 76% at 50% 0%, rgba(220,245,255,.30), rgba(160,210,255,.08) 52%, transparent 76%), radial-gradient(50% 40% at 50% 0%, rgba(150,120,255,.12), transparent 70%); height: 26vh; filter: blur(7px); } html[data-theme="singularity"] #scene-door .vignette { background: radial-gradient(ellipse at 50% 50%, transparent 32%, rgba(2,2,8,.45) 66%, rgba(0,0,4,.92) 96%); } /* ── the obsidian doors in their cracked stone frame ───────────────────── */ html[data-theme="singularity"] .burst { inset: -8% -26%; background: radial-gradient(closest-side, #ffffff 0%, #cfeaff 38%, rgba(120,170,255,.4) 64%, transparent 100%); filter: blur(28px); opacity: .5; transition: opacity 1.4s ease, transform 1.4s ease; } /* storm-cloud wisps drifting over the doorway, lit from within */ html[data-theme="singularity"] .rays i { position: absolute; width: 90%; height: 46%; background: radial-gradient(50% 60% at 50% 50%, rgba(150,175,225,.20), rgba(120,130,200,.08) 55%, transparent 80%); filter: blur(26px); opacity: .3; transform: none; } html[data-theme="singularity"] .rays i:nth-child(1) { left: -55%; top: -14%; animation: cloudflash-a 11s linear infinite; } html[data-theme="singularity"] .rays i:nth-child(2) { left: 32%; top: -22%; animation: cloudflash-b 13s linear infinite 2.5s; } html[data-theme="singularity"] .rays i:nth-child(3) { left: -12%; top: 74%; animation: cloudflash-a 17s linear infinite 6s; } /* the whole assembly strains against what's behind it */ @keyframes strain { 0%, 100% { transform: translate(0, 0); } 8% { transform: translate(.8px, -.5px); } 11% { transform: translate(-.6px, .4px); } 14% { transform: translate(.3px, .2px); } 46% { transform: translate(0, 0); } 52% { transform: translate(-.9px, .5px); } 55% { transform: translate(.7px, -.3px); } 58% { transform: translate(0, 0); } } html[data-theme="singularity"] .dframe { inset: -3% -9%; background: var(--noise), var(--blotch), linear-gradient(180deg, #4a4f60 0%, #34394a 40%, #232735 100%), linear-gradient(180deg, #454a5a 0%, #303446 45%, #1e2230 100%); background-size: auto, 600px 600px, auto, auto; background-blend-mode: overlay, multiply, normal, normal; border-radius: 6px; box-shadow: 0 0 0 2px #14161f, 0 2px 0 3px #565b6e, -3px 4px 0 2px #262a38, 6px -3px 0 1px #3a3f50, 0 26px 70px rgba(0,0,0,.85), inset 0 0 30px rgba(0,0,0,.75); animation: strain 6.5s ease-in-out infinite; } /* banks of dim gaseous fog hugging the stone, flashing from deep inside like a storm working through cloud */ html[data-theme="singularity"] .dframe::before, html[data-theme="singularity"] .dframe::after { content: ""; position: absolute; top: -18%; bottom: -14%; width: 62%; background: radial-gradient(42% 34% at 50% 24%, rgba(165,190,235,.24), transparent 75%), radial-gradient(50% 40% at 42% 66%, rgba(130,120,210,.16), transparent 78%), radial-gradient(36% 30% at 62% 44%, rgba(150,175,225,.12), transparent 80%); filter: blur(24px); pointer-events: none; z-index: 5; opacity: .35; } html[data-theme="singularity"] .dframe::before { left: -46%; animation: cloudflash-a 9s linear infinite 1.2s; } html[data-theme="singularity"] .dframe::after { right: -46%; animation: cloudflash-b 12s linear infinite 4.8s; } /* mostly a dim glow — then somewhere in the murk, a couple of hard pulses */ @keyframes cloudflash-a { 0%, 100% { opacity: .3; filter: blur(24px) brightness(1); } 40% { opacity: .34; filter: blur(26px) brightness(1); } 43% { opacity: .85; filter: blur(20px) brightness(2.1); } 44.5% { opacity: .4; filter: blur(24px) brightness(1.2); } 46% { opacity: .95; filter: blur(18px) brightness(2.6); } 49% { opacity: .35; filter: blur(24px) brightness(1); } 80% { opacity: .28; filter: blur(27px) brightness(.95); } } @keyframes cloudflash-b { 0%, 100% { opacity: .28; filter: blur(26px) brightness(.95); } 22% { opacity: .3; filter: blur(26px) brightness(1); } 25% { opacity: .9; filter: blur(19px) brightness(2.4); } 27% { opacity: .38; filter: blur(25px) brightness(1.1); } 64% { opacity: .3; filter: blur(26px) brightness(1); } 67% { opacity: .8; filter: blur(21px) brightness(2); } 68.5% { opacity: .45; filter: blur(24px) brightness(1.4); } 70% { opacity: .88; filter: blur(19px) brightness(2.3); } 73% { opacity: .3; filter: blur(26px) brightness(1); } } html[data-theme="singularity"] .dgap { inset: 5% 7%; border-radius: 3px; background: #eef9ff; box-shadow: 0 0 14px 3px rgba(210,240,255,.7), 0 0 46px 12px rgba(120,180,255,.3); } html[data-theme="singularity"] .door, html[data-theme="singularity"] .door-b { top: 5%; bottom: 5%; border-radius: 2px; background: radial-gradient(120% 60% at 30% 10%, rgba(140,170,230,.08), transparent 55%), linear-gradient(115deg, #10121c 0%, #090a12 45%, #06070d 75%, #030409 100%); box-shadow: inset 0 0 30px rgba(0,0,0,.9), inset 0 0 3px rgba(150,190,255,.22); transition: transform 2.1s cubic-bezier(.7,.02,.25,1); display: block; } html[data-theme="singularity"] .door { left: 7%; right: 50%; } html[data-theme="singularity"] .door-b { left: 50%; right: 7%; } /* rusted iron bands riding each slab */ html[data-theme="singularity"] .door::before, html[data-theme="singularity"] .door-b::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #4e2f1a 0%, #35200e 45%, #201207 100%) 0 16% / 100% 4.5% no-repeat, linear-gradient(180deg, #4e2f1a 0%, #35200e 45%, #201207 100%) 0 50% / 100% 4.5% no-repeat, linear-gradient(180deg, #4e2f1a 0%, #35200e 45%, #201207 100%) 0 84% / 100% 4.5% no-repeat, radial-gradient(3px 3px at 12% 17.5%, #1d1108 60%, transparent 70%), radial-gradient(3px 3px at 88% 17.5%, #1d1108 60%, transparent 70%), radial-gradient(3px 3px at 12% 51.5%, #1d1108 60%, transparent 70%), radial-gradient(3px 3px at 88% 51.5%, #1d1108 60%, transparent 70%), radial-gradient(3px 3px at 12% 85.5%, #1d1108 60%, transparent 70%), radial-gradient(3px 3px at 88% 85.5%, #1d1108 60%, transparent 70%); filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); pointer-events: none; } /* runes etched down each slab */ html[data-theme="singularity"] .door .etch, html[data-theme="singularity"] .door-b .etch { inset: 4% 16%; background: var(--runes) top center / 28px auto repeat; opacity: .55; mask-image: linear-gradient(180deg, #000 0 14%, transparent 15% 23%, #000 24% 48%, transparent 49% 57%, #000 58% 82%, transparent 83% 88%, #000 89%); } /* glassy obsidian sheen */ html[data-theme="singularity"] .door .grain { display: block; inset: 0; background: var(--noise), radial-gradient(90% 40% at 68% 12%, rgba(170,200,255,.14), transparent 60%); opacity: .22; mix-blend-mode: screen; } html[data-theme="singularity"] .door-b::after { content: ""; position: absolute; inset: 0; background: var(--noise), radial-gradient(90% 40% at 32% 12%, rgba(170,200,255,.14), transparent 60%); opacity: .22; mix-blend-mode: screen; pointer-events: none; } /* the central seam: light and lightning forcing their way through */ html[data-theme="singularity"] .door .seam { right: -7px; top: -4%; bottom: -4%; width: 15px; background: var(--bolt2) center / 100% 100% no-repeat; filter: drop-shadow(0 0 9px rgba(220,245,255,.95)) drop-shadow(0 0 22px rgba(140,190,255,.6)); animation: boltflick 2.2s linear infinite; animation-delay: .5s; } html[data-theme="singularity"] .dpanel, html[data-theme="singularity"] .hinge, html[data-theme="singularity"] .knob { display: none; } html[data-theme="singularity"] .keyhole { /* a quantum aperture riding the seam between the slabs */ left: 100%; top: 48%; width: 16%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; z-index: 4; background: radial-gradient(circle at 50% 50%, rgba(230,250,255,.95) 0 18%, rgba(110,160,255,.4) 40%, transparent 65%), conic-gradient(from 0deg, rgba(160,225,255,0), rgba(190,235,255,.8), rgba(160,225,255,0) 40%); filter: blur(.4px); animation: aperture 4.5s linear infinite; } @keyframes aperture { to { transform: translate(-50%,-50%) rotate(360deg); } } html[data-theme="singularity"] #scene-door.granted .keyhole { animation-duration: .6s; filter: drop-shadow(0 0 20px #dff4ff); } html[data-theme="singularity"] .threshold { left: -6%; right: -6%; bottom: -4px; height: 7px; border-radius: 50%; background: #e6f7ff; filter: blur(6px); opacity: .85; box-shadow: 0 0 36px 13px rgba(170,220,255,.5); } /* the slabs part */ html[data-theme="singularity"] #scene-door.opening .door { transform: translateX(-130%); } html[data-theme="singularity"] #scene-door.opening .door-b { transform: translateX(130%); } html[data-theme="singularity"] #scene-door.opening .dframe::before, html[data-theme="singularity"] #scene-door.opening .dframe::after, html[data-theme="singularity"] #scene-door.opening .door .seam { animation-duration: .5s; } #scene-door.opening .burst { opacity: 1; } html[data-theme="singularity"] #whiteout { background: radial-gradient(ellipse at 50% 55%, #f4ffff 0%, #cfeeff 45%, rgba(190,230,255,0) 72%); } /* ── the lockbox, holo console ─────────────────────────────────────────── */ html[data-theme="singularity"] #lockbox { background: repeating-linear-gradient(0deg, rgba(120,200,255,.03) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(10,16,30,.84), rgba(5,8,16,.92)); border: 1px solid rgba(110,200,255,.35); border-radius: 8px; box-shadow: 0 0 40px rgba(70,160,255,.18), inset 0 0 24px rgba(40,90,160,.12); color: #bfe6f5; } html[data-theme="singularity"] #lockbox .brand { color: #8fdcff; text-shadow: 0 0 16px rgba(110,220,255,.6); } html[data-theme="singularity"] #lockbox .tabs button { color: #57869c; } html[data-theme="singularity"] #lockbox .tabs button.on { color: #b8ecff; border-bottom: 1px solid rgba(110,220,255,.6); } html[data-theme="singularity"] #lockbox input { background: rgba(6,14,26,.7); border-color: rgba(110,200,255,.25); } html[data-theme="singularity"] #lockbox input:focus { border-color: rgba(140,230,255,.7); box-shadow: 0 0 16px rgba(110,220,255,.18); } html[data-theme="singularity"] #lockbox input::placeholder { color: rgba(130,180,205,.45); font-style: normal; } html[data-theme="singularity"] .keybtn svg { display: none; } html[data-theme="singularity"] .keybtn { flex-basis: 52px; height: 46px; border-radius: 50%; position: relative; background: radial-gradient(circle at 50% 50%, rgba(220,250,255,.95) 0 16%, rgba(70,150,255,.4) 34%, transparent 60%), conic-gradient(from 90deg, transparent, rgba(130,225,255,.9), transparent 55%); animation: aperture2 3.4s linear infinite; box-shadow: 0 0 18px rgba(110,220,255,.4); } @keyframes aperture2 { to { transform: rotate(360deg); } } @keyframes sigilspin { to { transform: rotate(360deg); } } html[data-theme="singularity"] .keybtn.turning { animation: sigilspin .7s linear infinite; box-shadow: 0 0 34px rgba(150,240,255,.9); } html[data-theme="singularity"] .forgebtn { color: #b8ecff; background: rgba(20,50,90,.4); border-color: rgba(110,200,255,.4); border-radius: 5px; } html[data-theme="singularity"] .forgebtn:hover { background: rgba(30,80,140,.5); } html[data-theme="singularity"] .msg { color: #6fb4d6; font-style: normal; } html[data-theme="singularity"] .msg.bad { color: #ff7d6e; } html[data-theme="singularity"] #door-theme { color: #bfe6f5; } /* ── the round hall: gates orbit the viewer ────────────────────────────── */ html[data-theme="singularity"] .hallwall { background: radial-gradient(58vmax 42vmax at 80% 14%, rgba(96,40,170,.30), transparent 62%), radial-gradient(52vmax 40vmax at 10% 78%, rgba(18,86,170,.26), transparent 62%), radial-gradient(34vmax 30vmax at 38% 30%, rgba(190,60,190,.09), transparent 60%), radial-gradient(26vmax 22vmax at 60% 60%, rgba(20,140,160,.08), transparent 60%), #02020c; } html[data-theme="singularity"] .hallwall::before { /* a distant spiral galaxy */ content: ""; position: absolute; right: 12%; top: 9%; width: 24vmax; height: 13vmax; background: radial-gradient(closest-side, rgba(255,250,235,.9) 0%, rgba(255,236,200,.4) 8%, transparent 16%), conic-gradient(from 30deg, transparent 0 40deg, rgba(200,215,255,.16) 60deg 110deg, transparent 130deg 220deg, rgba(200,215,255,.13) 240deg 290deg, transparent 310deg), radial-gradient(closest-side, rgba(170,190,255,.22), transparent 72%); border-radius: 50%; filter: blur(6px); transform: rotate(-18deg) scaleY(.5); opacity: .8; pointer-events: none; } html[data-theme="singularity"] .hallwall::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, transparent 44%, rgba(1,1,8,.5) 84%, rgba(0,0,4,.8) 100%); } html[data-theme="singularity"] #scene-gallery { color: #bfe6f5; } html[data-theme="singularity"] #topbar { background: linear-gradient(180deg, rgba(3,3,16,.85), rgba(3,3,16,0)); } html[data-theme="singularity"] #topbar select, html[data-theme="singularity"] #topbar button { color: #9fd8ef; border-color: rgba(110,200,255,.3); background: rgba(8,18,34,.6); border-radius: 5px; } html[data-theme="singularity"] #topbar select:hover, html[data-theme="singularity"] #topbar button:hover { border-color: rgba(140,230,255,.7); box-shadow: 0 0 12px rgba(110,220,255,.2); } html[data-theme="singularity"] #filters .chip { color: #9fd8ef; border-color: rgba(110,200,255,.25); background: rgba(8,18,34,.5); } html[data-theme="singularity"] #filters .chip.on { border-color: rgba(140,230,255,.8); background: rgba(20,50,90,.6); box-shadow: 0 0 10px rgba(110,220,255,.25); } html[data-theme="singularity"] #pulse { color: #6fa8c4; } /* the carousel geometry (transforms are driven per-frame from app.js) */ #hall.ring { overflow: visible; perspective: 1150px; perspective-origin: 50% 46%; } #hall.ring #rail { position: absolute; left: 50%; top: 46%; width: 0; height: 0; padding: 0; gap: 0; transform-style: preserve-3d; } #hall.ring .pic { position: absolute; left: 0; top: 0; backface-visibility: hidden; will-change: transform, opacity; } /* manage-mode: quiver the gate, not the 3D-positioned wrapper */ html[data-theme="singularity"] #scene-gallery.deleting .pic { animation: none; } html[data-theme="singularity"] #scene-gallery.deleting .pic .frame4 { animation: quiver 1.2s ease-in-out infinite; } /* stargates: segmented rings holding spinning plasma vortices */ html[data-theme="singularity"] .pic { width: clamp(230px, 27vw, 305px); } html[data-theme="singularity"] .pic .frame4 { padding: 0; background: none; box-shadow: none; border: 0; } html[data-theme="singularity"] .pic .mat { padding: 0; background: none; box-shadow: none; } html[data-theme="singularity"] .pic .art { aspect-ratio: 1; border-radius: 50%; position: relative; display: grid; place-items: center; overflow: visible; border: 13px solid transparent; background: conic-gradient(from 10deg, #4a5570 0 11%, #1e2434 11% 12.5%, #6a7694 12.5% 23%, #232a3e 23% 25%, #444f68 25% 36%, #1e2434 36% 37.5%, #5e6a86 37.5% 48%, #232a3e 48% 50%, #4a5570 50% 61%, #1e2434 61% 62.5%, #6a7694 62.5% 73%, #232a3e 73% 75%, #444f68 75% 86%, #1e2434 86% 87.5%, #5e6a86 87.5% 98%, #232a3e 98% 100%) border-box; box-shadow: 0 0 0 2px rgba(150,220,255,.28), 0 0 46px rgba(90,160,255,.32), 0 0 110px rgba(80,120,255,.14), inset 0 0 34px rgba(0,8,30,.85); } html[data-theme="singularity"] .pic .art::before { /* glowing pods studding the ring */ content: ""; position: absolute; inset: -13px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(170,240,255,.95) 0deg 2.4deg, transparent 2.4deg 30deg); mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px)); animation: gatespin 34s linear infinite; opacity: .95; filter: drop-shadow(0 0 5px rgba(150,230,255,.9)); } @keyframes gatespin { to { transform: rotate(360deg); } } html[data-theme="singularity"] .pic .art .horizon { position: absolute; inset: 3px; border-radius: 50%; overflow: hidden; background: #05071c; transition: filter .4s ease; } html[data-theme="singularity"] .pic .art .horizon::before { /* the plasma vortex: white-hot eye, spiral arms */ content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 50% 50%, #ffffff 0%, #eaf8ff 3%, rgba(170,215,255,.92) 9%, rgba(96,120,255,.55) 26%, rgba(52,44,150,.5) 52%, rgba(8,10,40,.95) 80%), repeating-conic-gradient(from 0deg, rgba(200,235,255,.5) 0deg 7deg, rgba(80,90,225,.12) 7deg 26deg, rgba(170,120,255,.38) 26deg 33deg, rgba(28,28,95,.1) 33deg 52deg); filter: blur(7px) saturate(1.25); animation: vortex 7.5s linear infinite; } @keyframes vortex { to { transform: rotate(360deg); } } html[data-theme="singularity"] .pic .art .horizon::after { /* electric filaments crawling the surface, counter-spinning */ content: ""; position: absolute; inset: -6%; background: repeating-conic-gradient(from 45deg, transparent 0deg 16deg, rgba(255,255,255,.55) 17deg 18.2deg, transparent 19deg 41deg); mask: radial-gradient(circle, transparent 16%, #000 34% 74%, transparent 88%); mix-blend-mode: screen; filter: blur(1.2px); animation: vortex 12s linear reverse infinite; } /* eight wormholes, eight tints */ html[data-theme="singularity"] .art-0 .horizon { filter: hue-rotate(0deg); } html[data-theme="singularity"] .art-1 .horizon { filter: hue-rotate(300deg) saturate(1.15); } html[data-theme="singularity"] .art-2 .horizon { filter: hue-rotate(45deg) saturate(1.1); } html[data-theme="singularity"] .art-3 .horizon { filter: hue-rotate(140deg); } html[data-theme="singularity"] .art-4 .horizon { filter: hue-rotate(20deg) saturate(1.2); } html[data-theme="singularity"] .art-5 .horizon { filter: hue-rotate(230deg); } html[data-theme="singularity"] .art-6 .horizon { filter: hue-rotate(330deg) saturate(1.2); } html[data-theme="singularity"] .art-7 .horizon { filter: hue-rotate(265deg); } html[data-theme="singularity"] .pic:hover .art .horizon { filter: brightness(1.3) saturate(1.4); } html[data-theme="singularity"] .pic:hover .art .horizon::before { animation-duration: 2.6s; } html[data-theme="singularity"] .pic:hover .art::before { animation-duration: 8s; } html[data-theme="singularity"] .pic .art .glyph { position: relative; z-index: 2; font-size: clamp(40px, 6vw, 62px); color: rgba(244,252,255,.97); text-shadow: 0 0 22px rgba(140,225,255,.9), 0 0 8px rgba(20,40,120,.95), 0 2px 4px rgba(0,6,30,.9); filter: drop-shadow(0 3px 8px rgba(0,10,40,.85)); font-style: normal; } html[data-theme="singularity"] .pic .art .lock-badge { position: absolute; z-index: 2; right: 12%; bottom: 10%; font-size: 15px; filter: drop-shadow(0 0 6px rgba(140,230,255,.9)); } html[data-theme="singularity"] .pic .plaque { margin: 16px auto 0; width: fit-content; max-width: 94%; padding: 4px 14px; border-radius: 4px; text-align: center; font-size: 11px; letter-spacing: .28em; color: #bdf0ff; background: rgba(10,24,44,.72); border: 1px solid rgba(110,200,255,.35); box-shadow: 0 0 14px rgba(80,170,255,.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="singularity"] .pic .cat { text-align: center; font-size: 9px; letter-spacing: .34em; margin-top: 7px; color: rgba(130,190,220,.55); text-transform: uppercase; } /* the kawoosh */ html[data-theme="singularity"] .pic.kawoosh .art .horizon::before { animation: kawoosh .8s ease-in forwards; } @keyframes kawoosh { 0% { transform: scale(1); filter: blur(5px) brightness(1); } 55% { transform: scale(1.7); filter: blur(2px) brightness(2.4); } 100% { transform: scale(1.3); filter: blur(0) brightness(3.2); } } html[data-theme="singularity"] #zoomer-art::after { /* wormhole streaks on the way in */ content: ""; position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0deg 1deg, transparent 1deg 9deg); animation: warp 1s linear infinite; mask: radial-gradient(circle, transparent 12%, #000 60%); } @keyframes warp { from { transform: rotate(0) scale(1); } to { transform: rotate(14deg) scale(1.25); } } /* modal + app window, holo skin */ html[data-theme="singularity"] .modal-card, html[data-theme="singularity"] .appwin-card { background: linear-gradient(180deg, rgba(9,15,30,.96), rgba(5,8,17,.98)); color: #bfe6f5; border: 1px solid rgba(110,200,255,.35); box-shadow: 0 0 60px rgba(70,160,255,.25); } html[data-theme="singularity"] .modal-card input, html[data-theme="singularity"] .modal-card select, html[data-theme="singularity"] #app-body input, html[data-theme="singularity"] #app-body textarea { background: rgba(6,14,26,.7); border: 1px solid rgba(110,200,255,.25); color: #bfe6f5; } html[data-theme="singularity"] .modal-row button, html[data-theme="singularity"] #app-body button.act { border: 1px solid rgba(110,200,255,.35); color: #9fd8ef; background: rgba(8,18,34,.6); border-radius: 5px; } html[data-theme="singularity"] .modal-row button.primary, html[data-theme="singularity"] #app-body button.act.primary { background: linear-gradient(180deg, rgba(60,140,220,.7), rgba(30,80,150,.7)); color: #eaffff; } html[data-theme="singularity"] .appwin-card header { background: rgba(8,18,34,.8); border-bottom: 1px solid rgba(110,200,255,.3); color: #8fdcff; } html[data-theme="singularity"] #app-body .item { background: rgba(8,18,34,.55); border: 1px solid rgba(110,200,255,.2); } html[data-theme="singularity"] #app-body pre { background: rgba(6,14,26,.7); border: 1px solid rgba(110,200,255,.2); color: #bfe6f5; } html[data-theme="singularity"] .share-row { border-color: rgba(110,200,255,.3); }