/* Interface styles. <html data-style> is "styled" (default: glass project cards over an aurora sky, in a
   horizontal carousel) or "normal" (the original light card grid in index.html). */

.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Style switch, shared by both styles */
.style-switch { display:inline-flex; align-items:center; gap:2px; min-height:44px; padding:3px; border:1px solid var(--line); border-radius:12px; background:var(--white); }
.style-option { position:relative; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 11px; border-radius:9px; color:var(--muted); font-size:14px; white-space:nowrap; cursor:pointer; transition:background-color .2s ease, color .2s ease; }
.style-option input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.style-option svg { flex:none; width:16px; height:16px; }
.style-option:hover { color:var(--ink); }
.style-option:has(input:checked) { background:var(--soft-blue); color:var(--blue); font-weight:700; }
.style-option:has(input:focus-visible) { outline:3px solid var(--blue); outline-offset:2px; }

/* Styled-only pieces stay out of the normal style; card wrappers are transparent to its layout. */
.space, .project-dock { display:none; }
.slide-inner, .project-screen { display:contents; }

/* ---------- Styled ---------- */
:root[data-style="styled"] {
  color-scheme:dark;
  --space:#04050f;
  --s-ink:#eef0ff;
  --s-soft:#cdd1f5;
  --s-muted:#9ba3d6;
  --s-faint:#8088bf;
  --s-line:rgba(168, 178, 255, .2);
  --s-glass:rgba(17, 21, 52, .6);
  --s-glass-hover:rgba(31, 37, 86, .82);
  --s-cyan:#8fe3ff;
  --s-violet:#baa4ff;
  --s-pink:#ffa7d3;
  --s-peach:#ffc991;
  --s-teal:#7ff0d6;
  --s-bright:linear-gradient(115deg, #a4ecff, #c8b8ff 55%, #ffbddf);
  --gutter:clamp(16px, 4vw, 56px);
  --slide:clamp(400px, 34vw, 500px);
  --screen-h:clamp(140px, calc(100vh - 520px), 260px);
  --track-pad:52px;
  background:var(--space);
}
:root[data-style="styled"] body { background:var(--space); color:var(--s-ink); }

/* Sky: aurora glow, three star layers (drawn by styled.js) that drift with the carousel, a meteor,
   and a planet horizon along the bottom of the page */
:root[data-style="styled"] .space { display:block; position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:radial-gradient(120% 90% at 50% 30%, #0e1138 0%, #070920 50%, var(--space) 85%); }
:root[data-style="styled"] .nebula { position:absolute; inset:-12%; background:radial-gradient(40% 38% at 16% 24%, rgba(112, 80, 255, .42), transparent 70%), radial-gradient(34% 30% at 86% 18%, rgba(220, 80, 186, .3), transparent 70%), radial-gradient(46% 36% at 64% 56%, rgba(32, 196, 196, .2), transparent 72%), radial-gradient(30% 26% at 32% 70%, rgba(78, 116, 255, .24), transparent 70%); animation:nebula-drift 50s ease-in-out infinite alternate; }
:root[data-style="styled"] .stars { position:absolute; inset:0 -140px; background-repeat:repeat; transform:translate3d(calc(var(--ratio, 0) * var(--travel)), 0, 0); }
:root[data-style="styled"] .stars-far { --travel:-36px; opacity:.55; }
:root[data-style="styled"] .stars-mid { --travel:-72px; animation:twinkle 5s ease-in-out infinite alternate; }
:root[data-style="styled"] .stars-near { --travel:-130px; animation:twinkle 7s ease-in-out -3s infinite alternate; }
:root[data-style="styled"] .shooting-star { position:absolute; top:13%; left:78%; width:150px; height:1.5px; border-radius:2px; background:linear-gradient(90deg, #fff, rgba(190, 220, 255, .5) 30%, transparent); opacity:0; transform-origin:left center; animation:meteor 13s ease-in 5s infinite; }
:root[data-style="styled"] .horizon { position:absolute; top:82vh; left:50%; width:260vw; aspect-ratio:1; translate:-50% 0; border-radius:50%; background:radial-gradient(circle at 50% 0%, #1d2766 0%, #0c1132 14%, #05071a 34%); box-shadow:0 -1px 0 rgba(176, 228, 255, .75), 0 -16px 50px -6px rgba(96, 176, 255, .55), 0 -70px 170px -20px rgba(126, 96, 255, .45); }

/* Layout: title block top left, controls top right, the cards below */
:root[data-style="styled"] .shell { position:relative; z-index:1; display:flex; flex-direction:column; width:auto; min-height:100vh; margin:0; overflow-x:clip; }
:root[data-style="styled"] header { position:absolute; top:22px; right:var(--gutter); z-index:3; min-height:0; padding:0; border:0; }
:root[data-style="styled"] .brand { display:none; }
:root[data-style="styled"] #language,
:root[data-style="styled"] .style-switch { border-color:var(--s-line); background:var(--s-glass); color:var(--s-ink); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
:root[data-style="styled"] .style-option { color:var(--s-muted); }
:root[data-style="styled"] .style-option:hover { color:var(--s-ink); }
:root[data-style="styled"] .style-option:has(input:checked) { background:linear-gradient(120deg, rgba(143, 227, 255, .2), rgba(186, 164, 255, .3)); box-shadow:inset 0 0 0 1px rgba(186, 200, 255, .22); color:#fff; }
:root[data-style="styled"] .account-bar button,
:root[data-style="styled"] .account-bar a { border-color:var(--s-line); background:var(--s-glass); color:var(--s-ink); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
:root[data-style="styled"] .account-bar button:hover,
:root[data-style="styled"] .account-bar a:hover { border-color:rgba(143, 227, 255, .55); background:var(--s-glass-hover); color:#fff; }
:root[data-style="styled"] .account-bar .auth-signin { border-color:transparent; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
:root[data-style="styled"] .account-bar .auth-signup,
:root[data-style="styled"] .account-bar .auth-signup:hover { border-color:transparent; background:var(--s-bright); color:#0a0d26; font-weight:700; }
:root[data-style="styled"] .account-bar .auth-signup:hover { box-shadow:0 0 22px -4px rgba(186, 164, 255, .85); }
:root[data-style="styled"] .account-role { background:rgba(143, 227, 255, .12); color:var(--s-cyan); }
:root[data-style="styled"] .account-message { color:var(--s-peach); }

:root[data-style="styled"] main { flex:1; display:flex; flex-direction:column; }
:root[data-style="styled"] .hero { display:block; max-width:calc(510px + var(--gutter)); padding:22px 0 0 var(--gutter); }
:root[data-style="styled"] .hero-art { display:none; }
:root[data-style="styled"] h1 { margin:8px 0 2px; font-size:clamp(44px, 4.6vw, 64px); line-height:1.08; letter-spacing:-2.5px; background:linear-gradient(100deg, #8fe3ff 0%, #a9b5ff 36%, #d0a9ff 66%, #ffa7d3 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 26px rgba(150, 128, 255, .3)); }
:root[data-style="styled"] .hero-title { font-size:clamp(20px, 1.9vw, 25px); line-height:1.5; letter-spacing:-.3px; color:#e2ddff; }
:root[data-style="styled"] .hero-title span { background:linear-gradient(90deg, var(--s-peach), var(--s-pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
:root[data-style="styled"] .hero-title span::after { bottom:-3px; border-top:2px solid rgba(255, 184, 176, .75); }

:root[data-style="styled"] #projects { flex:1; display:flex; flex-direction:column; justify-content:center; padding:24px 0 12px; }

/* Carousel: a scroll-snap row. styled.js sets each slide's --focus (1 when centered, 0 a slide away) and
   --shift (signed offset); the motion lives on .slide-inner because scroll-snap measures the slide's
   transformed box. */
:root[data-style="styled"] .projects { position:relative; display:flex; gap:0; margin-top:calc(12px - var(--track-pad)); padding:var(--track-pad) 0 34px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; counter-reset:project; -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
:root[data-style="styled"] .projects::-webkit-scrollbar { display:none; }
:root[data-style="styled"] .projects::before,
:root[data-style="styled"] .projects::after { content:""; flex:0 0 calc(50% - var(--slide) / 2); }
:root[data-style="styled"] .project { --focus:0; flex:0 0 var(--slide); display:flex; min-height:0; margin:0; padding:0 22px; border:0; border-radius:0; background:none; box-shadow:none; color:var(--s-ink); text-align:left; overflow:visible; counter-increment:project; scroll-snap-align:center; scroll-snap-stop:always; transform:none; transition:none; -webkit-tap-highlight-color:transparent; }
:root[data-style="styled"] .project:first-child { --focus:1; }
:root[data-style="styled"] .project:hover,
:root[data-style="styled"] .project:active { border-color:transparent; box-shadow:none; transform:none; }
:root[data-style="styled"] .featured { grid-column:auto; padding:0 22px; }

/* Card palettes, shared by the cards and the dock */
:root[data-style="styled"] :is(.points, [data-project="points"]) { --p-glow:rgba(143, 115, 247, .6); --p-accent:#c9b9ff; --screen:radial-gradient(90% 95% at 50% 38%, #b9a6ff 0%, #7a5de6 46%, #3a2596 100%); }
:root[data-style="styled"] :is(.crown, [data-project="crown"]) { --p-glow:rgba(255, 150, 72, .5); --p-accent:#ffc996; --screen:radial-gradient(90% 95% at 50% 38%, #ffd19c 0%, #e98a45 48%, #8a3a14 100%); }
:root[data-style="styled"] :is(.spring, [data-project="spring"]) { --p-glow:rgba(176, 228, 92, .45); --p-accent:#d6f290; --screen:radial-gradient(90% 95% at 50% 38%, #e9f7a4 0%, #9fcb52 50%, #416b1b 100%); }
:root[data-style="styled"] :is(.finance, [data-project="finance"]) { --p-glow:rgba(56, 220, 186, .48); --p-accent:#95f3dc; --screen:radial-gradient(90% 95% at 50% 38%, #aaf6e2 0%, #36c09f 50%, #0d5b4d 100%); }
:root[data-style="styled"] :is(.network, [data-project="network"]) { --p-glow:rgba(88, 150, 255, .55); --p-accent:#b3cdff; --screen:radial-gradient(90% 95% at 50% 38%, #b4d0ff 0%, #5a88ea 48%, #172f78 100%); }
:root[data-style="styled"] :is(.kube, [data-project="kube"]) { --p-glow:rgba(140, 120, 255, .52); --p-accent:#cdc4ff; --screen:radial-gradient(90% 95% at 50% 38%, #d6cfff 0%, #8472f0 48%, #2b1f7c 100%); }
:root[data-style="styled"] :is(.blade, [data-project="blade"]) { --p-glow:rgba(240, 84, 104, .5); --p-accent:#ffb8c0; --screen:radial-gradient(90% 95% at 50% 38%, #ffd0c8 0%, #d9586a 48%, #5e1226 100%); }

/* Glass card: side cards turn toward the center, shrink and dim */
:root[data-style="styled"] .slide-inner { position:relative; flex:1; display:flex; flex-direction:column; min-width:0; transform:perspective(1200px) translateX(calc(var(--shift, 0) * var(--slide) * -.12)) rotateY(calc(var(--shift, 0) * -24deg)) scale(calc(.84 + .16 * var(--focus))); opacity:calc(.5 + .5 * var(--focus)); will-change:transform, opacity; }
:root[data-style="styled"] .slide-inner::before { content:""; position:absolute; inset:0; border:1px solid rgba(255, 255, 255, .16); border-radius:28px; background:linear-gradient(155deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .03) 62%, rgba(255, 255, 255, .08)), rgba(12, 14, 40, .45); box-shadow:inset 0 1px 0 rgba(255, 255, 255, .3), 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 90px -30px var(--p-glow); transition:border-color .3s ease, box-shadow .3s ease; }
:root[data-style="styled"] .slide-inner > * { position:relative; z-index:1; }
:root[data-style="styled"] .project.is-active:hover .slide-inner::before { border-color:rgba(255, 255, 255, .28); box-shadow:inset 0 1px 0 rgba(255, 255, 255, .34), 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 120px -24px var(--p-glow); }

/* Screen: the project's own art on a lit panel */
:root[data-style="styled"] .project-screen { order:-1; display:block; flex:none; height:var(--screen-h); margin:16px 16px 0; overflow:hidden; border-radius:18px; background:var(--screen); box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 -50px 70px -40px rgba(0, 0, 0, .4); }
:root[data-style="styled"] .project-screen::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(115deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 30%), repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 4px); }
:root[data-style="styled"] .project-screen::after { content:"NPH-" counter(project, decimal-leading-zero); position:absolute; top:12px; left:14px; z-index:3; color:rgba(255, 255, 255, .8); font:600 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing:1.5px; }
:root[data-style="styled"] .project-screen :is(.featured-art, .card-art) { position:absolute; top:50%; left:50%; right:auto; z-index:1; width:var(--art-w); max-width:none; height:auto; margin:0; transform:translate(-50%, -50%); filter:drop-shadow(0 14px 14px rgba(10, 8, 40, .35)); pointer-events:none; transition:scale .35s ease; }
:root[data-style="styled"] :is(.points, .blade) .project-screen { --art-w:min(84%, calc(var(--screen-h) * 2.1)); }
:root[data-style="styled"] :is(.crown, .network, .kube) .project-screen { --art-w:min(80%, calc(var(--screen-h) * 2)); }
:root[data-style="styled"] :is(.spring, .finance) .project-screen { --art-w:min(48%, calc(var(--screen-h) * .86)); }
:root[data-style="styled"] .spring .card-art { color:#34470f; }
:root[data-style="styled"] .finance .card-art { color:#0b4a3e; }
:root[data-style="styled"] .project.is-active:hover .project-screen :is(.featured-art, .card-art) { scale:1.04; }

/* Card text */
:root[data-style="styled"] :is(.project-top, .project-content, .project-bottom) { margin-inline:18px; }
:root[data-style="styled"] .project:not(.is-active) :is(.project-top, .project-content, .project-bottom) { pointer-events:none; }
:root[data-style="styled"] .project-top { justify-content:space-between; gap:10px; margin-top:16px; color:var(--s-muted); font-size:12px; letter-spacing:1.8px; }
:root[data-style="styled"] .project-content { width:auto; margin-top:10px; }
:root[data-style="styled"] .project h3 { margin:0 0 6px; color:var(--s-ink); font-size:clamp(24px, 2.1vw, 30px); }
:root[data-style="styled"] .project p { max-width:none; margin:0; color:var(--s-muted); font-size:14.5px; line-height:1.65; }
:root[data-style="styled"] .project-bottom { justify-content:space-between; gap:14px; margin-top:auto; padding:16px 0 20px; }
:root[data-style="styled"] .cta { gap:12px; min-height:46px; padding:6px 7px 6px 20px; border:1px solid rgba(255, 255, 255, .2); border-radius:999px; background:rgba(255, 255, 255, .08); color:var(--s-ink); font-size:15px; transition:border-color .2s ease, box-shadow .2s ease; }
:root[data-style="styled"] .arrow { width:34px; height:34px; background:var(--p-accent); color:#0a0d26; }
:root[data-style="styled"] .domain { color:var(--s-faint); font-size:12px; }
:root[data-style="styled"] .project.is-active:hover .cta { border-color:var(--p-accent); box-shadow:0 0 24px -6px var(--p-glow); }

/* Focus: a ring around the whole card */
:root[data-style="styled"] :is(a, button, select, input):focus-visible,
:root[data-style="styled"] .style-option:has(input:focus-visible) { outline-color:var(--s-cyan); }
:root[data-style="styled"] a.project:focus-visible,
:root[data-style="styled"] .project:has(.cta:focus-visible) { outline:none; }
:root[data-style="styled"] a.project:focus-visible .slide-inner::before,
:root[data-style="styled"] .project:has(.cta:focus-visible) .slide-inner::before { outline:3px solid var(--s-cyan); outline-offset:4px; }
:root[data-style="styled"] .project .cta:focus-visible { border-color:var(--s-cyan); }

/* Dock: previous / next around a glass bar that jumps straight to a project */
:root[data-style="styled"] .project-dock { display:flex; justify-content:center; align-items:center; gap:12px; margin:0 var(--gutter); }
:root[data-style="styled"] .project-dock ol { display:flex; gap:4px; margin:0; padding:5px; border:1px solid rgba(255, 255, 255, .14); border-radius:18px; background:rgba(255, 255, 255, .06); box-shadow:inset 0 1px 0 rgba(255, 255, 255, .14); list-style:none; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
:root[data-style="styled"] .project-dock ol button { display:flex; align-items:center; gap:8px; min-height:40px; margin:0; padding:8px 14px; border:0; border-radius:13px; background:none; color:var(--s-muted); font:inherit; font-size:13px; white-space:nowrap; cursor:pointer; transition:background-color .2s ease, color .2s ease; }
:root[data-style="styled"] .project-dock ol button:hover { background:rgba(255, 255, 255, .06); color:var(--s-ink); }
:root[data-style="styled"] .project-dock ol button[aria-current="true"] { background:rgba(255, 255, 255, .13); box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .18); color:var(--s-ink); font-weight:700; }
:root[data-style="styled"] .dock-dot { flex:none; width:10px; height:10px; border-radius:50%; background:var(--p-accent); box-shadow:0 0 8px -1px var(--p-glow); }
:root[data-style="styled"] [aria-current="true"] .dock-dot { box-shadow:0 0 12px 1px var(--p-glow); }
:root[data-style="styled"] .carousel-arrow { flex:none; display:grid; place-items:center; width:48px; height:48px; padding:0; border:1px solid var(--s-line); border-radius:50%; background:var(--s-glass); color:var(--s-ink); cursor:pointer; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .2s ease, border-color .2s ease, background-color .2s ease, opacity .2s ease; }
:root[data-style="styled"] .carousel-arrow svg { width:22px; height:22px; }
:root[data-style="styled"] .carousel-prev svg { transform:scaleX(-1); }
:root[data-style="styled"] .carousel-arrow:hover { border-color:rgba(143, 227, 255, .6); background:var(--s-glass-hover); transform:scale(1.06); }
:root[data-style="styled"] .carousel-arrow:active { transform:scale(.96); }
:root[data-style="styled"] .carousel-arrow[aria-disabled="true"] { border-color:var(--s-line); background:var(--s-glass); opacity:.3; cursor:default; transform:none; }

:root[data-style="styled"] footer { margin:0 var(--gutter); padding:18px 0 22px; border-top-color:var(--s-line); color:var(--s-muted); }
:root[data-style="styled"] .account-note { color:var(--s-faint); }
:root[data-style="styled"] .account-note a { color:var(--s-cyan); }

/* Dialogs */
:root[data-style="styled"] :is(.project-dialog, .auth-dialog) { border-color:var(--s-line); background:#0d1131; color:var(--s-ink); box-shadow:0 30px 100px rgba(0, 0, 0, .6); }
:root[data-style="styled"] :is(.project-dialog, .auth-dialog)::backdrop { background:rgba(3, 4, 14, .66); }
:root[data-style="styled"] .dialog-head { background:linear-gradient(145deg, #2a3a12, #121c0b 75%); color:#d6f290; }
:root[data-style="styled"] .dialog-head h2 { color:var(--s-ink); }
:root[data-style="styled"] .dialog-head .project-status { padding:5px 11px; border:1px solid rgba(214, 242, 144, .6); border-radius:20px; background:rgba(214, 242, 144, .12); color:#d6f290; box-shadow:none; font-size:12px; }
:root[data-style="styled"] .dialog-close { color:#d6f290; }
:root[data-style="styled"] .dialog-close:hover,
:root[data-style="styled"] .auth-dialog .auth-close:hover { background:rgba(255, 255, 255, .08); }
:root[data-style="styled"] .dialog-facts div { border-top-color:var(--s-line); }
:root[data-style="styled"] .dialog-facts dt { color:#d6f290; }
:root[data-style="styled"] .dialog-facts dd { color:var(--s-soft); }
:root[data-style="styled"] .dialog-note { background:rgba(255, 255, 255, .05); color:var(--s-muted); }
:root[data-style="styled"] .dialog-note svg { color:var(--s-cyan); }
:root[data-style="styled"] .dialog-ok,
:root[data-style="styled"] .dialog-ok:hover { border-color:transparent; background:var(--s-bright); color:#0a0d26; }
:root[data-style="styled"] .dialog-ok:hover { box-shadow:0 0 22px -4px rgba(186, 164, 255, .85); }
:root[data-style="styled"] .auth-intro,
:root[data-style="styled"] .auth-privacy { color:var(--s-muted); }
:root[data-style="styled"] .auth-dialog .auth-close { color:var(--s-ink); }
:root[data-style="styled"] .auth-dialog .auth-provider { border-color:var(--s-line); background:rgba(255, 255, 255, .04); color:var(--s-ink); }
:root[data-style="styled"] .auth-dialog .auth-provider:hover { border-color:var(--s-cyan); background:rgba(143, 227, 255, .08); }

@keyframes twinkle { from { opacity:.5; } to { opacity:1; } }
@keyframes nebula-drift { to { transform:translate3d(2.5%, -2%, 0) scale(1.06); } }
@keyframes meteor { 0%, 88% { opacity:0; transform:translate3d(0, 0, 0) rotate(-24deg); } 89% { opacity:1; } 97%, 100% { opacity:0; transform:translate3d(-360px, 160px, 0) rotate(-24deg); } }

@media (max-width:980px) {
  :root[data-style="styled"] { --slide:clamp(300px, 56vw, 440px); --screen-h:clamp(150px, calc(100vh - 600px), 240px); }
  :root[data-style="styled"] header { position:static; justify-content:flex-end; padding:16px var(--gutter) 0; }
  :root[data-style="styled"] .hero { max-width:none; padding:12px var(--gutter) 0; }
}
@media (max-width:600px) {
  .style-option { padding:0 10px; }
  .style-option span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  :root[data-style="styled"] { --slide:86vw; --screen-h:clamp(140px, 44vw, 190px); --track-pad:44px; }
  :root[data-style="styled"] header { min-height:0; padding:12px var(--gutter) 0; }
  :root[data-style="styled"] h1 { font-size:44px; letter-spacing:-2px; }
  :root[data-style="styled"] .hero-title { font-size:20px; }
  :root[data-style="styled"] .project, :root[data-style="styled"] .featured { padding:0 8px; }
  :root[data-style="styled"] .project h3 { font-size:24px; }
  :root[data-style="styled"] .project p { font-size:14px; }
  :root[data-style="styled"] .project-dock { gap:8px; }
  :root[data-style="styled"] .project-dock ol button { justify-content:center; min-width:44px; padding:8px 12px; }
  :root[data-style="styled"] .project-dock ol button [data-i18n] { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  :root[data-style="styled"] .dock-dot { width:13px; height:13px; }
  :root[data-style="styled"] .carousel-arrow { width:44px; height:44px; }
  :root[data-style="styled"] footer { flex-direction:column; gap:8px; }
}
@media (prefers-reduced-motion:reduce) {
  :root[data-style="styled"] *,
  :root[data-style="styled"] *::before,
  :root[data-style="styled"] *::after { animation:none !important; }
  :root[data-style="styled"] .stars { transform:none; }
  :root[data-style="styled"] .shooting-star { display:none; }
}

/* The destination is IP restricted; the project card remains public. */
:root[data-style="styled"] .project.kube .project-top { width:auto; }