:root {
color-scheme: dark;
--space-3xs: 0.125rem;
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-s: 0.75rem;
--space-m: 1rem;
--space-l: 1.5rem;
--space-xl: 2.5rem;
--space-2xl: 4rem;
--space-gutter: clamp(1rem, 4vw, 3rem);
--size-target-min: 2.75rem;
--size-content-max: 72rem;
--size-text-max: 68ch;
--size-measure: 38rem;
--img-ph-max: 30rem;
--col-icon-size: 1.25rem;
--font-latin: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-arabic: "Noto Sans Arabic", system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
--font-sc: "Noto Sans SC", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
--font-body: var(--font-latin);
--text-xs: 0.8125rem;
--text-s: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
--text-m: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--text-l: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
--text-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
--leading-body: 1.6;
--leading-heading: 1.2;
--radius-s: 0.25rem;
--radius-m: 0.5rem;
--radius-l: 1rem;
--border-width: 1px;
--focus-width: 3px;
--focus-offset: 2px;
--duration-fast: 120ms;
--duration-base: 220ms;
--duration-slow: 400ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--selector-edge-mask: linear-gradient(90deg, transparent, #000 var(--selector-edge-fade), #000 calc(100% - var(--selector-edge-fade)), transparent);
--selector-decor: 1;
--marble-image: none;
--hdr-h: var(--hdr-height-phone);
--tab-h: min(var(--tab-height), calc(var(--hdr-h) - var(--space-xs)));
--touch-safe-top: env(safe-area-inset-top, 0px);
--touch-safe-bottom: env(safe-area-inset-bottom, 0px);
--touch-edge: max(var(--space-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
--gold-line: linear-gradient(90deg, var(--color-gold-deep), var(--selector-icon) 30%, var(--selector-icon-active) 50%, var(--selector-icon) 70%, var(--color-gold-deep));
--stamp-font: "Playfair Display", Georgia, "Times New Roman", serif;
--badge-shift: -50%;
--badge-turn: var(--badge-tilt);
--marble-col: min(var(--size-text-max), min(var(--size-content-max), 100vw) - 2 * var(--space-gutter));
--column-cx: calc(max(0px, (100vw - var(--size-content-max)) / 2) + var(--space-gutter) + var(--marble-col) / 2);
--column-x: var(--column-cx);
--marble-x: var(--column-x);
--marble-calm: calc(var(--marble-col) / 2 + var(--marble-calm-margin));
--marble-fade: calc(max(0px, 50vw - var(--marble-calm)) * var(--marble-fade-share));
--marble-rx: calc(var(--marble-calm) + var(--marble-fade));
--marble-mask: radial-gradient(
ellipse var(--marble-rx) calc(var(--marble-rx) * var(--marble-calm-tall)) at var(--marble-x) 50%,
transparent var(--marble-calm),
rgba(0, 0, 0, 0.028) calc(var(--marble-calm) + var(--marble-fade) * 0.1),
rgba(0, 0, 0, 0.104) calc(var(--marble-calm) + var(--marble-fade) * 0.2),
rgba(0, 0, 0, 0.352) calc(var(--marble-calm) + var(--marble-fade) * 0.4),
rgba(0, 0, 0, 0.648) calc(var(--marble-calm) + var(--marble-fade) * 0.6),
rgba(0, 0, 0, 0.896) calc(var(--marble-calm) + var(--marble-fade) * 0.8),
rgba(0, 0, 0, 0.972) calc(var(--marble-calm) + var(--marble-fade) * 0.9),
#000 var(--marble-rx)
);
--light-stops:
color-mix(in srgb, var(--light-color) calc(var(--light-opacity) * 100%), transparent) 0%,
color-mix(in srgb, var(--light-color) calc(var(--light-opacity) * 82%), transparent) 18%,
color-mix(in srgb, var(--light-color) calc(var(--light-opacity) * 55%), transparent) 40%,
color-mix(in srgb, var(--light-color) calc(var(--light-opacity) * 28%), transparent) 62%,
color-mix(in srgb, var(--light-color) calc(var(--light-opacity) * 9%), transparent) 82%,
transparent 100%;
--page-light: radial-gradient(var(--light-width) var(--light-height) at var(--light-x) var(--light-y), var(--light-stops));
--page-light-floor: linear-gradient(color-mix(in srgb, var(--light-color) calc(var(--light-opacity) * var(--light-floor) * 100%), transparent), color-mix(in srgb, var(--light-color) calc(var(--light-opacity) * var(--light-floor) * 100%), transparent));
--page-light-touch: radial-gradient(var(--light-touch-width) var(--light-touch-height) at var(--light-touch-x) var(--light-touch-y), var(--light-stops));
--page-light-touch-floor: linear-gradient(color-mix(in srgb, var(--light-color) calc(var(--light-opacity) * var(--light-touch-floor) * 100%), transparent), color-mix(in srgb, var(--light-color) calc(var(--light-opacity) * var(--light-touch-floor) * 100%), transparent));
--box-glow: radial-gradient(var(--light-width) var(--light-height) at var(--light-x) var(--light-y),
color-mix(in srgb, var(--light-color) calc(var(--box-glow-strength) * 100%), transparent) 0%,
color-mix(in srgb, var(--light-color) calc(var(--box-glow-strength) * 82%), transparent) 18%,
color-mix(in srgb, var(--light-color) calc(var(--box-glow-strength) * 55%), transparent) 40%,
color-mix(in srgb, var(--light-color) calc(var(--box-glow-strength) * 28%), transparent) 62%,
color-mix(in srgb, var(--light-color) calc(var(--box-glow-strength) * 9%), transparent) 82%,
transparent 100%);
--box-glow-touch: linear-gradient(color-mix(in srgb, var(--light-color) calc(var(--box-glow-strength) * var(--box-glow-k, 0.5) * 100%), transparent), color-mix(in srgb, var(--light-color) calc(var(--box-glow-strength) * var(--box-glow-k, 0.5) * 100%), transparent));
--footer-gloss: linear-gradient(to bottom, color-mix(in srgb, var(--lacquer-gloss) var(--light-footer-gloss), transparent), transparent 70%);
}
:root {
--color-bg: #0b0808;
--color-surface: #1a1414;
--color-text: #efe6d4;
--color-text-muted: #aaa7a0;
--color-accent: #d4af37;
--color-accent-contrast: #0b0808;
--color-border: #74767d;
--color-focus: #f1e5c6;
--color-focus-halo: #000000;
--color-highlight: #3e2925;
--color-highlight-text: #f1e5c6;
--color-gold-deep: #a87e35;
--color-shadow: rgba(0, 0, 0, 0.6);
--selector-tile: #0b0b0c;
--selector-tile-active: #111112;
--selector-icon: #f0c75e;
--selector-icon-active: #ffd978;
--selector-edge-fade: 9%;
--selector-light: #ffe2bd;
--selector-rim-light: #ff0000;
--selector-icon-glow: #e8b84e;
--selector-icon-side-glow: #d9ad52;
--selector-cone: radial-gradient(ellipse 27% 36% at 50% 40%, rgba(255, 186, 108, 0.4), rgba(255, 170, 90, 0.14) 55%, transparent 100%);
--selector-glow: radial-gradient(ellipse 42% 40% at 50% 52%, rgba(227, 160, 80, 0.16), transparent 100%);
--selector-haze: linear-gradient(transparent, transparent);
--stage-light-span: 3.2;
--selector-stage-height: clamp(14rem, 30vw, 40rem);
--selector-stage-height-phone: clamp(12rem, 70vw, 18rem);
--marble-opacity: 0;
--marble-position: 50% 50%;
--marble-calm-margin: 4rem;
--marble-fade-share: 0.66;
--marble-calm-tall: 2.6;
--light-color: rgb(150, 20, 28);
--light-opacity: 0.32;
--light-width: 55%;
--light-height: 60%;
--light-x: var(--column-x);
--light-y: 0%;
--light-floor: 0;
--light-footer-gloss: 55%;
--light-touch-width: 140%;
--light-touch-height: 60%;
--light-touch-x: 50%;
--light-touch-y: -5%;
--light-touch-floor: 0;
--box-glow-strength: 0.45;
--box-glow-height: 0.75rem;
--selector-arrows-distance: 0.8;
--selector-arrows-min-distance: 6rem;
--selector-arrows-size: 3rem;
--selector-arrows-icon: 1.75rem;
--selector-arrows-dim: 0.95;
--selector-arrows-copper: 45%;
--selector-arrows-flash: 1.35;
--selector-arrows-stroke: 2.4;
--selector-arrows-relief: drop-shadow(0 1.5px 0 rgba(0, 0, 0, 0.95)) drop-shadow(0 -1px 0 rgba(255, 236, 196, 0.45)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
--selector-arrows-cut: 0.85;
--selector-arrows-cut-moving: 0.08;
--selector-arrows-cut-width: 3px;
--selector-arrows-cut-mix: 82%;
--duration-selector-arrows-light: 260ms;
--duration-selector-arrows-flash: 240ms;
--touch-icon-tilt: 6deg;
--touch-icon-perspective: 28rem;
--touch-icon-rim: inset 0 2px 0 rgba(255, 70, 70, 0.6), 0 -0.1rem 0.7rem -0.15rem rgba(255, 20, 20, 0.45);
--touch-icon-rim-active: inset 0 3px 0 rgba(255, 90, 90, 0.95), 0 -0.2rem 1.2rem rgba(255, 20, 20, 0.7);
--touch-icon-contact: 0 0.8rem 0.9rem -0.4rem rgba(0, 0, 0, 0.9);
--tab-height: 2.5rem;
--tab-active-rise: 0.25rem;
--tab-hover-lift: 0rem;
--tab-rim-width: 2px;
--duration-selector-move: 420ms;
--duration-selector-fade: 600ms;
--duration-selector-switch: 160ms;
--duration-selector-entry: 1000ms;
--duration-selector-exit: 350ms;
--duration-selector-exit-fade: 150ms;
--duration-selector-lost-fade: 600ms;
--duration-menu-open: 180ms;
--font-heading: var(--font-body);
--font-weight-gold: 600;
--gold-text-room: 0.25em;
--para-indent: 0;
--color-ivory-muted: #bdb5a4;
--hdr-height: 3.5rem;
--hdr-height-phone: 3rem;
--gold-line-width: 1px;
--hdr-tools-gap: 0.5rem;
--hdr-divider-width: 1px;
--hdr-divider-height: 1.5rem;
--lang-button-width: 7rem;
--sfx-button-width: 6.5rem;
--duration-sfx-intro: 4400ms;
--duration-page-leave: 200ms;
--duration-page-enter: 250ms;
--page-leave-scale: 0.98;
--duration-tile-arrive: 420ms;
--stamp-width: 130px;
--stamp-shift-x: 0px;
--stamp-shift-y: 0px;
--stamp-about-width: 120px;
--stamp-about-out: 0.5rem;
--stamp-card-share: 0.58;
--stamp-card-out: 1.25rem;
--stamp-height: 190;
--stamp-paper: #f4efe6;
--stamp-tooth-r: 6;
--stamp-tooth-gap: 16;
--stamp-margin: 22;
--stamp-red: #9e1b22;
--stamp-thread-inset: 7;
--stamp-thread-width: 1.6;
--stamp-thread-color: #f4efe6;
--stamp-ink: #f4efe6;
--stamp-text-size: 34;
--stamp-tracking: 0.05em;
--stamp-line-gap: 42;
--stamp-text-shift: 0;
--badge-tilt: -7deg;
--badge-impact-scale: 1.35;
--badge-squash: 0.9;
--duration-badge-stamp: 280ms;
--stage-shake: 3px;
--duration-stage-shake: 150ms;
--badge-halo: 1;
--badge-halo-color: rgba(158, 27, 34, 0.45);
--duration-badge-halo: 520ms;
--marble-page-home: 0;
--marble-page-about: 1;
--marble-page-projects: 1;
--marble-page-project: 1;
--marble-page-column: 1;
--marble-page-playroom: 1;
--marble-page-contact: 1;
--marble-page-privacy: 1;
--marble-page-accessibility: 1;
--marble-page-notfound: 1;
--marble-page-confirm: 1;
--marble-page-text: 1;
--marble-page-collection: 1;
--marble-page-item: 1;
--marble-page-root: 1;
--content-max-home: none;
--content-max-about: none;
--content-max-projects: none;
--content-max-project: none;
--content-max-column: none;
--content-max-playroom: none;
--content-max-contact: none;
--content-max-privacy: none;
--content-max-accessibility: none;
--content-max-notfound: none;
--content-max-confirm: none;
--content-max-text: none;
--content-max-collection: none;
--content-max-item: none;
--content-max-root: none;
--selector-stage-min: 9rem;
--text-title: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
--gold-text-angle: 180deg;
--sfx-button-width-phone: 3rem;
--sfx-bar-height: 0.5rem;
--duration-sfx-glint: 1200ms;
--ease-page-leave: cubic-bezier(0.4, 0, 1, 1);
--ease-page-enter: cubic-bezier(0, 0, 0.2, 1);
--home-card-size: 9rem;
--home-card-gap: 1rem;
--home-card-icon: 3.5rem;
--delay-sfx-intro-home: 400ms;
--delay-sfx-intro-page: 300ms;
--duration-page-veil: 200ms;
--duration-page-veil-in: 250ms;
--sfx-intro-icon-phone: 0.875rem;
--hdr-name-size-narrow: 0.9375rem;
--lacquer-base: #0b0b0c;
--lacquer-gloss: #1c1c1e;
--lacquer-gloss-hover: #1e1e20;
--lacquer-gloss-stop: 70%;
--lacquer-light-mix: 10%;
--lacquer-edge: rgba(255, 230, 190, 0.14);
--lacquer-edge-lit: rgba(255, 226, 189, 0.3);
--lacquer-edge-width: 1px;
--lacquer-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.55);
--lacquer-shadow-hover: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.65);
--lacquer-radius: 0.75rem;
--gold-tab-ink: #0b0b0c;
--gold-tab-gloss: rgba(255, 249, 228, 0.9);
--gold-tab-sheen: rgba(255, 255, 255, 0.45);
--gold-tab-hover-mix: 14%;
--drawer-rim: #a87e35;
--drawer-rim-width: 1px;
--drawer-padding: 0.375rem;
--drawer-item-height: 2.25rem;
--drawer-item-padding: 0.625rem;
--drawer-item-gap: 2px;
--drawer-max-width: 14rem;
--lacquer-lift: 0rem;
--lacquer-sheen: rgba(255, 236, 205, 0.12);
--lacquer-sheen-angle: 105deg;
--duration-lacquer-sheen: 700ms;
--tab-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.7);
--tab-cone-mix: 16%;
--tab-cone-size: 70% 110%;
--touch-hdr-height: 3.5rem;
--touch-target: 2.75rem;
--touch-footer-height: 3rem;
--touch-footer-gap: 0.75rem;
--touch-footer-text: 0.8125rem;
--touch-sfx-width: 5.5rem;
--touch-icon-size: clamp(4.5rem, 19vmin, 8.5rem);
--touch-icon-glyph: 0.46;
--touch-grid-gap: 1rem;
--touch-grid-row-gap: 1.25rem;
--touch-name-size: 0.875rem;
--touch-name-gap: 0.5rem;
--touch-stamp-share: 0.7;
--touch-stamp-out: clamp(0.75rem, 6vmin, 2.25rem);
--duration-icon-open: 350ms;
--color-error: #ff9f8f;
--field-bg: rgba(0, 0, 0, 0.55);
--field-border: #8c8579;
--field-border-width: 1px;
--field-radius: 0.375rem;
--field-padding-block: 0.625rem;
--field-padding-inline: 0.75rem;
--field-check-size: 1.5rem;
--field-accent: #d4af37;
--form-gap: 1.25rem;
--form-box-padding: clamp(1rem, 4vw, 2rem);
--form-captcha-min: 18.75rem;
--icon-stroke: 1.3;
--tile-radius-ratio: 0.26;
--selector-stage-ratio-1: 0.3164;
--selector-stage-ratio-3: 0.3828;
--selector-stage-ratio-5: 0.2407;
--pattern-page: none;
--pattern-page-size: auto;
--pattern-surface: none;
--pattern-surface-size: auto;
--pattern-tab: none;
--pattern-tab-size: auto;
}
:root[dir="rtl"] {
--column-x: calc(100vw - var(--column-cx));
}
@media (min-width: 64em) {
:root {
--hdr-h: var(--hdr-height);
}
}
@media (prefers-contrast: more) {
:root {
--color-bg: #000000;
--color-surface: #000000;
--color-text: #ffffff;
--color-text-muted: #ffffff;
--color-accent: #ffd27a;
--color-accent-contrast: #000000;
--color-border: #ffffff;
--color-focus: #ffe066;
--color-focus-halo: #000000;
--color-highlight: #3d3200;
--color-highlight-text: #ffffff;
--border-width: 2px;
--focus-width: 4px;
--selector-tile: #1c1c1c;
--selector-tile-active: #262626;
--selector-icon: #ffffff;
--selector-icon-active: #ffd27a;
--selector-light: #ffffff;
--selector-rim-light: #ffffff;
--selector-icon-glow: #000000;
--selector-icon-side-glow: #000000;
--selector-cone: none;
--selector-glow: none;
--selector-haze: none;
--selector-decor: 0;
--marble-opacity: 0;
--light-opacity: 0;
--box-glow-strength: 0;
--selector-arrows-dim: 1;
--selector-arrows-copper: 0%;
--selector-arrows-flash: 1;
--selector-arrows-cut: 0;
--selector-arrows-relief: none;
--color-gold-deep: #ffd27a;
--lacquer-base: #000000;
--lacquer-gloss: #000000;
--lacquer-gloss-hover: #000000;
--lacquer-edge: #ffffff;
--lacquer-edge-lit: #ffffff;
--lacquer-light-mix: 0%;
--lacquer-shadow: 0 0 0 transparent;
--lacquer-shadow-hover: 0 0 0 transparent;
--lacquer-sheen: transparent;
--lacquer-lift: 0rem;
--tab-shadow: 0 0 0 transparent;
--tab-cone-mix: 0%;
--tab-hover-lift: 0rem;
--gold-tab-ink: #000000;
--gold-tab-gloss: transparent;
--gold-tab-sheen: transparent;
--gold-tab-hover-mix: 0%;
--drawer-rim: #ffffff;
--color-error: #ffc2b8;
--field-bg: #000000;
--field-border: #ffffff;
--field-border-width: 2px;
--field-accent: #ffd27a;
--gold-line: linear-gradient(var(--color-border), var(--color-border));
--color-ivory-muted: #ffffff;
--stamp-paper: #ffffff;
--stamp-red: #000000;
--stamp-thread-color: #ffffff;
--stamp-ink: #ffffff;
--badge-tilt: 0deg;
--badge-halo: 0;
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-base: 0ms;
--duration-slow: 0ms;
--duration-selector-move: 0ms;
--duration-selector-fade: 200ms;
--duration-selector-switch: 120ms;
--duration-selector-entry: 0ms;
--duration-selector-exit: 0ms;
--duration-selector-exit-fade: 120ms;
--duration-selector-lost-fade: 200ms;
--duration-page-leave: 120ms;
--duration-page-enter: 120ms;
--duration-page-veil: 100ms;
--duration-page-veil-in: 100ms;
--page-leave-scale: 1;
--duration-tile-arrive: 0ms;
--duration-sfx-intro: 0ms;
--duration-sfx-glint: 0ms;
--duration-badge-stamp: 200ms;
--duration-stage-shake: 0ms;
--stage-shake: 0px;
--badge-impact-scale: 1;
--badge-squash: 1;
--badge-halo: 0;
--duration-menu-open: 0ms;
--tab-hover-lift: 0rem;
--lacquer-lift: 0rem;
--duration-lacquer-sheen: 0ms;
--duration-icon-open: 0ms;
--duration-selector-arrows-flash: 0ms;
}
}