.design-image{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.design-bracket-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:3}.design-bracket-corner{position:fixed;width:var(--bracket-corner-width);height:var(--bracket-corner-height);overflow:hidden;pointer-events:none;filter:drop-shadow(0 0 6px rgba(158,216,225,.45))}.design-bracket-corner--tl{top:calc(var(--safe-top) + var(--bracket-edge-margin));left:var(--bracket-edge-margin)}.design-bracket-corner--tr{top:calc(var(--safe-top) + var(--bracket-edge-margin));right:var(--bracket-edge-margin)}.design-bracket-corner--bl{bottom:calc(var(--safe-bottom) + var(--bracket-edge-margin));left:var(--bracket-edge-margin)}.design-bracket-corner--br{bottom:calc(var(--safe-bottom) + var(--bracket-edge-margin));right:var(--bracket-edge-margin)}.design-bracket-corner__art{position:absolute;top:0;display:block;height:100%;width:auto;max-width:none}.design-bracket-corner__art--left{left:0}.design-bracket-corner__art--right{right:0}.design-btn{position:relative;display:flex;align-items:center;justify-content:center;width:min(88%,340px);padding:0;border:none;background:transparent;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.design-btn:active{transform:scale(.98)}.design-btn:focus-visible{outline:2px solid var(--color-white);outline-offset:3px;border-radius:4px}.design-btn__frame{width:100%;pointer-events:none;filter:drop-shadow(0 0 8px rgba(158,216,225,.35))}.design-btn__label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:clamp(22px,5.5vw,28px);font-weight:700;letter-spacing:.02em;pointer-events:none;z-index:1}.design-btn--light .design-btn__label{color:var(--color-white)}.design-btn--dark .design-btn__label{color:var(--color-ui-teal)}.design-sphere{position:relative;display:flex;align-items:center;justify-content:center}.design-sphere--hero{width:clamp(220px,62vw,320px)}.design-sphere--compact{width:clamp(180px,50vw,260px)}.design-sphere--result{width:clamp(160px,44vw,220px)}.design-sphere__graphic{position:relative;z-index:1;width:100%;height:auto}.design-sphere__label{position:absolute;bottom:12%;left:50%;transform:translate(-50%);font-family:var(--font-bmi);font-size:clamp(20px,5.5vw,26px);font-weight:700;color:var(--color-ui-teal);letter-spacing:.05em;pointer-events:none;z-index:2}.design-sphere--result .design-sphere__label{bottom:8%;font-size:clamp(16px,4vw,20px)}.gradient-bg{position:relative;background:transparent}.gradient-bg--full{min-height:100dvh;display:flex;flex-direction:column}.gradient-bg--top{position:relative;flex:1;min-height:58%;display:flex;flex-direction:column;align-items:center;padding:clamp(16px,4vw,24px) clamp(20px,5vw,32px) 0}.top-background{position:absolute;top:0;left:0;right:0;z-index:0;pointer-events:none;overflow:hidden;height:clamp(220px,54vw,470px)}.top-background__image{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;filter:brightness(1.28) contrast(1.12);opacity:.95}.mobile-shell{position:relative;width:100%;min-height:100dvh;margin:0;overflow:hidden;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}.welcome-screen{position:relative;align-items:center;text-align:center;padding:clamp(24px,6vw,40px) clamp(16px,4vw,24px);overflow:hidden}.welcome-screen__header{margin-top:clamp(16px,4vw,32px);z-index:1}.welcome-screen__logo{width:clamp(140px,40vw,180px);margin:0 auto}.welcome-screen__title{margin-top:clamp(20px,5vw,36px);font-size:clamp(28px,8vw,40px);font-weight:800;color:var(--color-white);line-height:1.3;z-index:1}.welcome-screen__sphere{flex:1;display:flex;align-items:center;justify-content:center;margin:clamp(16px,4vw,32px) 0;z-index:1}.welcome-screen__footer{width:100%;display:flex;justify-content:center;padding-bottom:clamp(32px,8vw,48px);z-index:1}@font-face{font-family:Almarai;src:url(/fonts/Almarai-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Almarai;src:url(/fonts/Almarai-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Almarai;src:url(/fonts/Almarai-ExtraBold.ttf) format("truetype");font-weight:800;font-style:normal;font-display:swap}@font-face{font-family:Poppins;src:url(/fonts/Poppins-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}:root{--palette-slate: #4c7b94;--palette-teal: #63acbd;--palette-sky: #9ed8e1;--palette-ice: #aad9e1;--palette-aqua: #6ec5ca;--color-navy: var(--palette-slate);--color-teal: var(--palette-aqua);--color-sky: var(--palette-sky);--color-green: #3baf78;--color-lime: #92c34e;--color-white: #ffffff;--color-black: #000000;--color-text-dark: #1a1a1a;--color-text-muted: var(--palette-teal);--color-blue-deep: var(--palette-slate);--color-blue-bright: var(--palette-aqua);--color-teal-deep: var(--palette-slate);--color-teal-mid: var(--palette-teal);--color-input-bg: rgba(76, 123, 148, .5);--color-glow: var(--palette-sky);--color-glow-strong: var(--palette-aqua);--color-frame-blue: var(--palette-teal);--color-frame-blue-home: var(--palette-sky);--color-ui-teal: var(--palette-slate);--color-grid: #969696;--gradient-main: linear-gradient( 145deg, var(--palette-slate) 0%, var(--palette-teal) 38%, var(--palette-aqua) 72%, var(--palette-sky) 100% );--gradient-button: linear-gradient( 180deg, var(--palette-aqua) 0%, var(--palette-teal) 100% );--gradient-backdrop: linear-gradient( 145deg, var(--palette-slate) 0%, var(--palette-teal) 45%, var(--palette-sky) 100% );--font-arabic: "Almarai", sans-serif;--font-bmi: "Poppins", sans-serif;--design-main-background: url(/assets/design/main-background.svg);--shell-max-width: 430px;--design-aspect: 804 / 1748;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--bracket-corner-width: clamp(88px, 25vw, 98px);--bracket-corner-height: clamp(16px, 4.6vw, 37px);--bracket-edge-margin: clamp(8px, 2vw, 20px)}@media(min-width:768px){:root{--shell-max-width: 430px}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root,.app-backdrop{min-height:100dvh;width:100%}body{font-family:var(--font-arabic);background-color:#63c0cd;background-image:var(--design-main-background);background-size:100% 100%;background-repeat:no-repeat;background-position:center;color:var(--color-text-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}button{font-family:inherit;cursor:pointer;border:none;background:none}input{font-family:inherit;border:none;outline:none;background:transparent}img{display:block;max-width:100%}.app-backdrop{min-height:100dvh;width:100%}