/* Dark is the default. Colour rules are scoped to :root:not([data-theme=light]); layout rules apply to both themes. */
/* Shamshad's night palette. Layout and interactions live in the original stylesheets. */
:root{--star-speed-far:150s;--star-speed-near:85s}
:root:not([data-theme=light]){color-scheme:dark;--ink:#FFFFFF;--muted:#C4C4C4;--orange:#F1EB1C;--blue:#F1EB1C;--paper:#1D1D1D;--line:#303030;--shadow:0 18px 36px -25px #060606bb}
:where(:root:not([data-theme=light])) body{background:#0E0E0E}
:where(:root:not([data-theme=light])) body:before{background:radial-gradient(ellipse at 75% 8%,#53535340,transparent 55%),linear-gradient(155deg,#0E0E0E,#1D1D1D 65%,#0E0E0E)}
:where(:root:not([data-theme=light])) ::selection{background:#F1EB1C;color:#0E0E0E}
.starfield{position:fixed;inset:0;pointer-events:none;z-index:-2;overflow:hidden}
.star-track{position:absolute;inset:0 auto 0 0;width:calc(100% + 1200px);background-repeat:repeat;background-size:1200px 900px;will-change:transform;animation:star-drift var(--star-speed-far) linear infinite}
:where(:root:not([data-theme=light])) .star-far{background-image:url('assets/stars-far.svg')}
.star-near{animation-duration:var(--star-speed-near)}
:where(:root:not([data-theme=light])) .star-near{background-image:url('assets/stars-near.svg')}
@keyframes star-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1200px,0,0)}}
.stars-paused .star-track{animation-play-state:paused}
:where(:root:not([data-theme=light])) .ruler{background:#0E0E0Ef5;border-color:var(--line)}
:where(:root:not([data-theme=light])) .availability{background:#1D1D1D;border-color:#303030;color:#FFFFFF}
:where(:root:not([data-theme=light])) .mini-mark{background:var(--orange);color:#1D1D1D}
:where(:root:not([data-theme=light])) .progress-marker{background:#F1EB1C1a}
:where(:root:not([data-theme=light])) nav{box-shadow:0 5px 24px #06060633;border:1px solid var(--line)}
:where(:root:not([data-theme=light])) nav .nav-contact,:where(:root:not([data-theme=light])) .chat-compose a,:where(:root:not([data-theme=light])) .plan-switch button[aria-pressed=true]{background:#535353;color:#FFFFFF}
:where(:root:not([data-theme=light])) nav .nav-contact:hover{background:var(--orange);color:#1D1D1D}
:where(:root:not([data-theme=light])) .hero .headline-orange{background:none;color:var(--orange);-webkit-text-fill-color:var(--orange)}
:where(:root:not([data-theme=light])) .hero-heading{border-color:#F1EB1C80}
:where(:root:not([data-theme=light])) .hero-copy,:where(:root:not([data-theme=light])) .contact>p{color:#C4C4C4}
:where(:root:not([data-theme=light])) .dimension,:where(:root:not([data-theme=light])) .file-label,:where(:root:not([data-theme=light])) .note-card>.eyebrow,:where(:root:not([data-theme=light])) .chat-preview,:where(:root:not([data-theme=light])) .chat-message h3 small,:where(:root:not([data-theme=light])) .comparison-control p,:where(:root:not([data-theme=light])) .plan-overview p,:where(:root:not([data-theme=light])) .play-toolbar .eyebrow,:where(:root:not([data-theme=light])) .canvas-hint,:where(:root:not([data-theme=light])) .play-status,:where(:root:not([data-theme=light])) .review-proof p,:where(:root:not([data-theme=light])) .upwork-source>span,:where(:root:not([data-theme=light])) .review-demo-note,:where(:root:not([data-theme=light])) .review-source-note,:where(:root:not([data-theme=light])) .review-category,:where(:root:not([data-theme=light])) .review-person>div>span,:where(:root:not([data-theme=light])) .intro-caption{color:var(--muted)}
:where(:root:not([data-theme=light])) .frame-label,:where(:root:not([data-theme=light])) .designer-tag b,:where(:root:not([data-theme=light])) .intro-dimensions,:where(:root:not([data-theme=light])) .canvas-cursor>span{background:#F1EB1C;color:#1D1D1D}
:where(:root:not([data-theme=light])) .handle{background:#1D1D1D}
:where(:root:not([data-theme=light])) .orange{background:#F1EB1C;color:#1D1D1D}
:where(:root:not([data-theme=light])) .orange:hover{background:#FFFFFF;color:#1D1D1D}
:where(:root:not([data-theme=light])) .outline{border-color:#919191;background:#30303066}
:where(:root:not([data-theme=light])) .outline:hover{background:#303030}
:where(:root:not([data-theme=light])) .hero-sticker,:where(:root:not([data-theme=light])) .sticky-note,:where(:root:not([data-theme=light])) .plan-note,:where(:root:not([data-theme=light])) .play-note{background:#303030;color:#FFFFFF;border-color:#919191}
:where(:root:not([data-theme=light])) .hero-sticker{color:#FFFFFF}
:where(:root:not([data-theme=light])) .round-button:hover{background:#303030}
:where(:root:not([data-theme=light])) .project-card,:where(:root:not([data-theme=light])) .card,:where(:root:not([data-theme=light])) .chat-window,:where(:root:not([data-theme=light])) .process-window,:where(:root:not([data-theme=light])) .comparison-window,:where(:root:not([data-theme=light])) .review-card,:where(:root:not([data-theme=light])) .review-proof{background:var(--paper);border-color:#303030}
:where(:root:not([data-theme=light])) .project-card{border-color:#303030}
:where(:root:not([data-theme=light])) .peach{background:#303030}
:where(:root:not([data-theme=light])) .lilac{background:#303030}
:where(:root:not([data-theme=light])) .green{background:#303030}
:where(:root:not([data-theme=light])) .mini-project>div,:where(:root:not([data-theme=light])) .mini-project:nth-child(2)>div,:where(:root:not([data-theme=light])) .mini-project:nth-child(3)>div,:where(:root:not([data-theme=light])) .mini-project:nth-child(4)>div{background:#1D1D1D;border-color:#303030}
:where(:root:not([data-theme=light])) .project-arrow{background:#1D1D1De6;border-color:#919191;color:#FFFFFF}
:where(:root:not([data-theme=light])) .pill,:where(:root:not([data-theme=light])) .chat-file,:where(:root:not([data-theme=light])) .chat-compose,:where(:root:not([data-theme=light])) .plan-switch,:where(:root:not([data-theme=light])) .play-toolbar button,:where(:root:not([data-theme=light])) .demo-badge,:where(:root:not([data-theme=light])) .review-avatar{background:#1D1D1D;border-color:#303030;color:#C4C4C4}
:where(:root:not([data-theme=light])) .dark-card{background:#0E0E0E;border-color:#303030;color:var(--ink)}
:where(:root:not([data-theme=light])) .pills>span{border-color:#535353}
:where(:root:not([data-theme=light])) .note-card{background:#1D1D1Dcf;border-color:#303030}
:where(:root:not([data-theme=light])) .profile-note{background:#1D1D1D}
:where(:root:not([data-theme=light])) .window-bar,:where(:root:not([data-theme=light])) .play-toolbar{background:#1D1D1D;border-color:var(--line)}
:where(:root:not([data-theme=light])) .window-footer,:where(:root:not([data-theme=light])) .service-card details,:where(:root:not([data-theme=light])) .chat-message,:where(:root:not([data-theme=light])) .chat-compose,:where(:root:not([data-theme=light])) .review-category,:where(:root:not([data-theme=light])) .planner-bottom,:where(:root:not([data-theme=light])) .plan-features{border-color:var(--line)}
:where(:root:not([data-theme=light])) .step-index,:where(:root:not([data-theme=light])) .chat-divider{color:var(--orange)}
:where(:root:not([data-theme=light])) .process-steps{background:radial-gradient(#91919126 1px,transparent 1px) 0 0/18px 18px}
:where(:root:not([data-theme=light])) .chat-thread{background:radial-gradient(#9191911a .8px,transparent 1px) 0 0/20px 20px}
:where(:root:not([data-theme=light])) .chat-avatar{background:#535353;color:white}
:where(:root:not([data-theme=light])) .chat-avatar.client{background:#F1EB1C}
:where(:root:not([data-theme=light])) .chat-file[href]:hover{background:#303030}
:where(:root:not([data-theme=light])) .reaction{background:#303030;border-color:#919191;color:#FFFFFF}
:where(:root:not([data-theme=light])) .reaction[aria-pressed=true]{background:var(--orange);color:#1D1D1D}
:where(:root:not([data-theme=light])) .plan-switch button:not([aria-pressed=true]):hover{background:#303030}
:where(:root:not([data-theme=light])) .plan-overview{background:#303030}
:where(:root:not([data-theme=light])) .plan-overview h3 em{color:var(--orange)}
:where(:root:not([data-theme=light])) .plan-note .eyebrow,:where(:root:not([data-theme=light])) .plan-note>span:last-of-type,:where(:root:not([data-theme=light])) .play-note>span{color:#C4C4C4}
:where(:root:not([data-theme=light])) .play-canvas{background:radial-gradient(#91919133 1px,transparent 1px) 0 0/20px 20px,#1D1D1Dee;border-color:#535353}
:where(:root:not([data-theme=light])) .play-label{background:#303030;color:#FFFFFF;border-color:#919191}
:where(:root:not([data-theme=light])) .play-disc{background:#919191;color:#0E0E0E}
:where(:root:not([data-theme=light])) .faq-frame{background:#303030;color:#FFFFFF}
:where(:root:not([data-theme=light])) .faq-item>summary{border-color:#535353}
:where(:root:not([data-theme=light])) .faq-item>summary:hover{border-color:#F1EB1C;box-shadow:0 10px 26px #06060633}
:where(:root:not([data-theme=light])) .intro-screen{background:linear-gradient(#30303033 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,#30303033 1px,transparent 1px) 0 0/34px 34px,#0E0E0E}
:where(:root:not([data-theme=light])) .intro-progress{background:#303030}
:where(:root:not([data-theme=light])) #skip-intro{background:#1D1D1D;border-color:#535353;color:#FFFFFF}
:where(:root:not([data-theme=light])) .sound-dock{background:#1D1D1D;border-color:#535353;box-shadow:0 5px 22px #06060644}
:where(:root:not([data-theme=light])) .sound-dock button{color:#FFFFFF}
:where(:root:not([data-theme=light])) .sound-dock button:hover{background:#303030}
:where(:root:not([data-theme=light])) .studio-footer{background:#060606}
.footer-wordmark{font-size:clamp(40px,11.4vw,161px)}
.intro-wordmark{font-size:clamp(28px,5.2vw,70px)}
.proof-copy{font:500 18px/1.55 var(--body);margin:24px 0 25px;flex:1}
.behance-mark{font-size:42px}
:where(:root:not([data-theme=light])) .behance-mark{color:var(--ink)}
:where(:root:not([data-theme=light])) .brand-art{background:#303030;color:#FFFFFF}
:where(:root:not([data-theme=light])) .book-art{background:#303030}
:where(:root:not([data-theme=light])) .book-object{background:#F1EB1C;color:#1D1D1D}
:where(:root:not([data-theme=light])) .spatial-art{background:#1D1D1D}
.digital-mockup{position:absolute;inset:20px 28px 28px;border-radius:8px;padding:12px 15px;transform:rotate(-5deg)}
:where(:root:not([data-theme=light])) .digital-mockup{border:1px solid #919191;background:#1D1D1D;color:#FFFFFF;box-shadow:10px 12px 0 #1D1D1D}
.digital-mockup>span{display:block;font:8px var(--mono);padding-bottom:8px}
:where(:root:not([data-theme=light])) .digital-mockup>span{border-bottom:1px solid #535353}
.digital-mockup>b{display:block;font:700 28px/.95 var(--display);padding-top:12px}
.digital-mockup>i{display:block;font:7px var(--mono);margin-top:12px}
:where(:root:not([data-theme=light])) .digital-mockup>i{color:var(--orange)}
:where(:root:not([data-theme=light])) .spatial-art>.art-caption{color:#C4C4C4}
/* Artwork within the comparison remains its original color: it is the design being demonstrated. */
:where(:root:not([data-theme=light])) .compare-divider>span{color:#535353}
.signed-by .signature-mark{display:grid;place-items:center;font:800 27px var(--display)}
:where(:root:not([data-theme=light])) .signed-by .signature-mark{background:#303030;color:var(--orange)}
.signature{font-style:italic}
:where(:root:not([data-theme=light])) .signature{color:var(--orange)}
@media(max-width:600px){.footer-wordmark{font-size:10.6vw;letter-spacing:-.025em}.intro-wordmark{font-size:6.4vw}.hero-intro{font-size:8px;letter-spacing:.3px}.review-source-note{flex-wrap:wrap}.header .availability{font-size:8px;border:0}:where(:root:not([data-theme=light])) .header .availability{background:transparent}}
@media(prefers-reduced-motion:reduce){.star-track{animation:none;will-change:auto}}
/* Refined accents and a clear black horizon. */
:where(:root:not([data-theme=light])) body:before{background:radial-gradient(ellipse at 92% 12%,#53535330,transparent 45%),radial-gradient(ellipse at 8% 80%,#53535314,transparent 45%),#0E0E0E}
:where(:root:not([data-theme=light])) .hero .headline-orange{background:linear-gradient(105deg,#F1EB1C 8%,#FFFFFF 48%,#C4C4C4 94%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
:where(:root:not([data-theme=light])) .hero-heading{border-color:#F1EB1C66;box-shadow:0 0 70px -40px #F1EB1C33}
:where(:root:not([data-theme=light])) .hero .dimension{color:#C4C4C4}
:where(:root:not([data-theme=light])) .hero-intro .small-spark{color:#C4C4C4}
:where(:root:not([data-theme=light])) .orange{box-shadow:0 5px 26px #F1EB1C15}
:where(:root:not([data-theme=light])) .orange:hover{box-shadow:0 7px 32px #F1EB1C2b}
:where(:root:not([data-theme=light])) .hero-sticker{outline-color:#919191}
:where(:root:not([data-theme=light])) .status-dot{background:#F1EB1C;box-shadow:0 0 0 3px #F1EB1C14}
:where(:root:not([data-theme=light])) .progress-marker{background:#F1EB1C13}
:where(:root:not([data-theme=light])) .scroll-cue span{border-color:#91919166}
:where(:root:not([data-theme=light])) .hw-ink{stroke:var(--orange)}
:where(:root:not([data-theme=light])) .sound-bars i{background:var(--orange)}
:where(:root:not([data-theme=light])) .music-volume input{accent-color:var(--orange)}
:where(:root:not([data-theme=light])) .intro-selection,:where(:root:not([data-theme=light])) .compare-divider>span{border-color:var(--blue)}
:where(:root:not([data-theme=light])) .intro-progress>span,:where(:root:not([data-theme=light])) .compare-divider:before{background:var(--blue)}
:where(:root:not([data-theme=light])) .project-card{box-shadow:0 18px 45px -28px #060606bb}
:where(:root:not([data-theme=light])) .project-card:hover,:where(:root:not([data-theme=light])) .mini-project:hover>div{border-color:#F1EB1C;box-shadow:0 16px 44px -26px #F1EB1C5c}
.project-arrow{transition:background .2s,color .2s,transform .2s}
.project-card:hover .project-arrow,.mini-project:hover .project-arrow{transform:rotate(7deg)}
:where(:root:not([data-theme=light])) .project-card:hover .project-arrow,:where(:root:not([data-theme=light])) .mini-project:hover .project-arrow{background:var(--orange);color:#1D1D1D}
:where(:root:not([data-theme=light])) .card,:where(:root:not([data-theme=light])) .review-card,:where(:root:not([data-theme=light])) .note-card{background-image:radial-gradient(ellipse at 0 0,#F1EB1C09,transparent 70%)}
.service-card{position:relative;overflow:hidden}
.service-card:before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px}
:where(:root:not([data-theme=light])) .service-card:before{background:linear-gradient(90deg,transparent,#F1EB1C80,transparent)}
:where(:root:not([data-theme=light])) .service-card:nth-child(2):before{background:linear-gradient(90deg,transparent,#F1EB1C80,transparent)}
:where(:root:not([data-theme=light])) .tool-row span{background:#1D1D1D;border-color:#535353;color:#C4C4C4}
:where(:root:not([data-theme=light])) .tool-row span:nth-child(2),:where(:root:not([data-theme=light])) .tool-row span:nth-child(4){color:#F1EB1C}
:where(:root:not([data-theme=light])) .tool-row span:nth-child(3){color:#FFFFFF}
:where(:root:not([data-theme=light])) .book-art>i{color:#C4C4C4}
:where(:root:not([data-theme=light])) .play-note strong em{color:#F1EB1C}
:where(:root:not([data-theme=light])) .play-disc{box-shadow:8px 12px 28px #06060633}
:where(:root:not([data-theme=light])) .canvas-cross{color:#919191}
:where(:root:not([data-theme=light])) .chat-avatar.client{color:#1D1D1D}
:where(:root:not([data-theme=light])) .faq-item[open]>summary .faq-frame,:where(:root:not([data-theme=light])) .faq-item>summary:hover .faq-frame{color:#1D1D1D}
.contact{position:relative;isolation:isolate;overflow:hidden}
:where(:root:not([data-theme=light])) .contact{background:radial-gradient(ellipse at 50% 100%,#F1EB1C1c,transparent 65%)}
.contact:before{content:'';position:absolute;z-index:-1;pointer-events:none;width:min(88vw,1040px);height:330px;left:50%;bottom:-270px;transform:translateX(-50%);border-radius:50%}
:where(:root:not([data-theme=light])) .contact:before{border:1px solid #F1EB1C66;box-shadow:0 -16px 65px #F1EB1C10,0 -1px 15px #F1EB1C29}
.studio-footer{position:relative}
:where(:root:not([data-theme=light])) .studio-footer{background:#060606;background-image:none;border-top:1px solid #F1EB1C29}
:where(:root:not([data-theme=light])) .footer-topline>span,:where(:root:not([data-theme=light])) .footer-meta,:where(:root:not([data-theme=light])) .footer-columns h3{color:#C4C4C4}
:where(:root:not([data-theme=light])) .footer-columns a,:where(:root:not([data-theme=light])) .footer-available{color:#C4C4C4}
:where(:root:not([data-theme=light])) .footer-invite>.eyebrow,:where(:root:not([data-theme=light])) .footer-columns a:hover{color:var(--orange)}
:where(:root:not([data-theme=light])) .footer-topline .mini-mark{color:var(--orange)}
:where(:root:not([data-theme=light])) .footer-wordmark:hover>span{color:#535353}
:where(:root:not([data-theme=light])) .footer-wordmark>span:hover{color:var(--orange)}
:where(:root:not([data-theme=light])) .footer-scale{background:repeating-linear-gradient(90deg,transparent 0 23px,#F1EB1C30 23px 24px) top/100% 9px no-repeat}
/* Zelor palette supplied by Shamshad: yellow is the primary accent; orange is used sparingly. */
:root:not([data-theme=light]){--ink:#FFFFFF;--muted:#C4C4C4;--orange:#F1EB1C;--blue:#F1EB1C;--paper:#060606;--line:#303030}
:where(:root:not([data-theme=light])) body,:where(:root:not([data-theme=light])) body:before{background:#0E0E0E}
:where(:root:not([data-theme=light])) .hero .headline-orange{background:none;-webkit-text-fill-color:#F1EB1C;color:#F1EB1C}
:where(:root:not([data-theme=light])) .hero-intro .small-spark,:where(:root:not([data-theme=light])) .footer-topline .mini-mark{color:#F05D32}
:where(:root:not([data-theme=light])) .status-dot,:where(:root:not([data-theme=light])) .file-dot{background:#F05D32;box-shadow:0 0 0 3px #F05D3214}
:where(:root:not([data-theme=light])) .ruler,:where(:root:not([data-theme=light])) .availability,:where(:root:not([data-theme=light])) .sound-dock,:where(:root:not([data-theme=light])) .window-bar,:where(:root:not([data-theme=light])) .play-toolbar{background:#060606}
:where(:root:not([data-theme=light])) .card,:where(:root:not([data-theme=light])) .review-card,:where(:root:not([data-theme=light])) .review-proof,:where(:root:not([data-theme=light])) .process-window,:where(:root:not([data-theme=light])) .chat-window,:where(:root:not([data-theme=light])) .comparison-window{background-color:#060606}
:where(:root:not([data-theme=light])) .card,:where(:root:not([data-theme=light])) .review-card,:where(:root:not([data-theme=light])) .note-card{background-image:none}
:where(:root:not([data-theme=light])) .note-card,:where(:root:not([data-theme=light])) .profile-note,:where(:root:not([data-theme=light])) .plan-overview,:where(:root:not([data-theme=light])) .play-canvas{background-color:#161616}
:where(:root:not([data-theme=light])) .frame-label,:where(:root:not([data-theme=light])) .designer-tag b,:where(:root:not([data-theme=light])) .intro-dimensions,:where(:root:not([data-theme=light])) .canvas-cursor>span,:where(:root:not([data-theme=light])) .chat-avatar.client{background:#F1EB1C;color:#060606}
:where(:root:not([data-theme=light])) .frame-label,:where(:root:not([data-theme=light])) .hero-heading,:where(:root:not([data-theme=light])) .intro-selection{border-color:#F1EB1C66}
:where(:root:not([data-theme=light])) .orange,:where(:root:not([data-theme=light])) .orange:hover{background:#F1EB1C;color:#060606}
:where(:root:not([data-theme=light])) .hero-sticker,:where(:root:not([data-theme=light])) .sticky-note,:where(:root:not([data-theme=light])) .plan-note,:where(:root:not([data-theme=light])) .play-note{background:#232310;color:#FFFFFF;border-color:#F1EB1C40}
:where(:root:not([data-theme=light])) .plan-note .eyebrow,:where(:root:not([data-theme=light])) .plan-note>span:last-of-type,:where(:root:not([data-theme=light])) .play-note>span{color:#C4C4C4}
:where(:root:not([data-theme=light])) .play-disc{background:#FFFFFF;color:#060606}
:where(:root:not([data-theme=light])) .play-label{background:#F1EB1C;color:#060606;border-color:#F1EB1C}
:where(:root:not([data-theme=light])) .book-object{background:#F1EB1C;color:#060606}
:where(:root:not([data-theme=light])) .brand-art{background:#1D1D1D;color:#F1EB1C}
:where(:root:not([data-theme=light])) .contact{background:radial-gradient(ellipse at 50% 100%,#F1EB1C08,transparent 65%)}
:where(:root:not([data-theme=light])) .contact:before{border-color:#F1EB1C55;box-shadow:0 -16px 65px #F1EB1C08,0 -1px 15px #F1EB1C19}
:where(:root:not([data-theme=light])) .studio-footer{background:#000;background-image:none;border-top-color:#303030}