:root {
  color-scheme: dark;
  font-family: "Cairo", Tahoma, sans-serif;
  color: #f7f7ff;
  background: #0c1022;
  --ink-muted: #b9b1ce;
  --purple: #8d62e8;
  --purple-bright: #c2a2ff;
  --gold: #e7b84f;
  --gold-bright: #ffe39a;
  --panel: rgba(25, 19, 47, .82);
  --border: rgba(231, 184, 79, .2);
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 18% 0%, #34205d 0, transparent 32%), radial-gradient(circle at 90% 78%, #4b3218 0, transparent 28%), #0b0912;
}

button, a, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.ambient { position: fixed; z-index: -1; width: 18rem; height: 18rem; border-radius: 50%; filter: blur(90px); opacity: .24; pointer-events: none; }
.ambient-one { top: 18%; right: -8rem; background: #7d5dff; }
.ambient-two { bottom: -9rem; left: 6%; background: #19b7c7; }
.bubble-field { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.bubble { position: absolute; display: block; width: var(--size); height: var(--size); border: 1px solid rgba(184, 177, 255, .2); border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), rgba(125,93,255,.03) 55%, transparent 72%); box-shadow: inset 0 0 22px rgba(130,111,255,.08), 0 0 30px rgba(119,103,255,.07); animation: bubbleFloat var(--duration) ease-in-out infinite alternate; }
.bubble-a { --size: 82px; --duration: 12s; top: 15%; left: 9%; }.bubble-b { --size: 28px; --duration: 9s; top: 72%; left: 19%; animation-delay: -3s; }.bubble-c { --size: 126px; --duration: 15s; top: 47%; right: 7%; animation-delay: -7s; }.bubble-d { --size: 45px; --duration: 10s; top: 22%; right: 24%; animation-delay: -5s; }.bubble-e { --size: 19px; --duration: 8s; bottom: 15%; right: 35%; animation-delay: -1s; }.bubble-f { --size: 64px; --duration: 14s; bottom: 7%; left: 44%; animation-delay: -8s; }
@keyframes bubbleFloat { 0% { transform: translate3d(0, 12px, 0) rotate(0deg); } 50% { transform: translate3d(14px, -18px, 0) rotate(8deg); } 100% { transform: translate3d(-12px, -38px, 0) rotate(-8deg); } }
.page-shell { width: min(1180px, calc(100% - 42px)); margin: 0 auto; padding: 28px 0 70px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }.topbar-actions { display: flex; align-items: center; gap: 14px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; color: #fff; background: linear-gradient(135deg, #876fff, #5543d1); box-shadow: 0 10px 30px rgba(93, 72, 255, .3); font-size: 22px; }
.brand strong, .brand small { display: block; }.brand strong { font-size: 16px; letter-spacing: -.3px; }.brand small { color: #898da8; font-family: "Space Grotesk", sans-serif; font-size: 9px; letter-spacing: 2px; }
.account { display: flex; align-items: center; gap: 12px; color: #d9d8f2; font-size: 14px; }.account-name { display: flex; align-items: center; gap: 8px; }.account-avatar { width: 27px; height: 27px; border-radius: 50%; object-fit: cover; background: #5f4bda; }.logout-button { border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 7px 12px; color: #c4c5da; background: rgba(255,255,255,.06); }.logout-button:hover { color: #fff; background: rgba(255,255,255,.11); }
.presence { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(113, 225, 170, .16); border-radius: 999px; padding: 7px 11px; color: #8eafaa; background: rgba(48, 170, 126, .08); font-size: 11px; transition: color .2s, background .2s, border-color .2s; }.presence-dot { width: 8px; height: 8px; border-radius: 50%; background: #eb6c87; box-shadow: 0 0 8px rgba(235,108,135,.75); transition: background .2s, box-shadow .2s; }.presence-dot.online { background: #68e0a1; box-shadow: 0 0 9px rgba(104,224,161,.9); }.presence.online { border-color: rgba(113, 225, 170, .25); color: #a8d8c3; background: rgba(48, 170, 126, .12); }.presence strong { color: #f1f3ff; font-family: "Space Grotesk", sans-serif; font-size: 12px; }

.login-view { display: grid; min-height: calc(100vh - 160px); grid-template-columns: 1fr .9fr; align-items: center; gap: 60px; padding: 45px 4%; }.hero-copy { max-width: 550px; }.pill { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; border: 1px solid rgba(145, 130, 255, .27); border-radius: 999px; padding: 7px 13px; color: #bcb3ff; background: rgba(115, 92, 255, .1); font-size: 12px; }.pill i { width: 7px; height: 7px; border-radius: 50%; background: #6ee0b1; box-shadow: 0 0 13px #6ee0b1; }
h1 { margin: 0; letter-spacing: -2px; font-size: clamp(42px, 6vw, 75px); line-height: 1.16; }.hero-copy h1 { margin-bottom: 18px; }.hero-copy h1 span { color: #9382ff; text-shadow: 0 0 30px rgba(127, 100, 255, .26); }.hero-copy p { max-width: 500px; margin: 0 0 30px; color: var(--ink-muted); font-size: 16px; line-height: 2; }
.discord-button { display: inline-flex; align-items: center; gap: 12px; border-radius: 12px; padding: 14px 17px; color: #fff; background: linear-gradient(135deg, #7862ff, #5843d9); box-shadow: 0 15px 30px rgba(89, 68, 220, .28); text-decoration: none; font-weight: 700; transition: transform .2s, box-shadow .2s; }.discord-button:hover { transform: translateY(-2px); box-shadow: 0 20px 35px rgba(89, 68, 220, .43); }.discord-icon { font-size: 20px; line-height: 1; }.button-arrow { margin-right: 4px; font-size: 18px; }.login-hint { display: block; margin-top: 13px; color: #71758f; font-size: 11px; }
.hero-preview { display: flex; justify-content: center; }.preview-window { width: min(430px, 100%); height: 315px; padding: 10px; border: 1px solid rgba(178, 175, 255, .28); border-radius: 22px; background: rgba(36, 38, 76, .72); box-shadow: 0 30px 70px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.1); transform: rotate(3deg); }.preview-bar { display: flex; gap: 5px; padding: 3px 7px 10px; direction: ltr; }.preview-bar span { width: 6px; height: 6px; border-radius: 50%; background: #8176ae; }.preview-art { position: relative; height: calc(100% - 19px); overflow: hidden; border-radius: 14px; background: linear-gradient(140deg, #f9f8ff, #d7d5ff); }.preview-art::after { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 45%, rgba(255,255,255,.5)); content: ""; }.preview-star { position: absolute; z-index: 1; top: 54px; right: 75px; color: #6953ed; font-size: 74px; filter: drop-shadow(0 10px 14px rgba(104,83,237,.24)); }.preview-note { position: absolute; z-index: 1; bottom: 38px; left: 58px; color: #231d57; font-family: "Space Grotesk", sans-serif; font-size: 37px; font-weight: 700; line-height: .9; transform: rotate(-8deg); }.preview-orbit { position: absolute; border: 2px solid rgba(113, 92, 238, .35); border-radius: 50%; }.orbit-one { top: 28px; right: 35px; width: 260px; height: 160px; transform: rotate(-28deg); }.orbit-two { right: 95px; bottom: -42px; width: 280px; height: 170px; transform: rotate(30deg); }

.workspace { padding: 45px 0 0; }.workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 3% 25px; }.eyebrow { display: block; margin-bottom: 7px; color: #9f91ff; font-family: "Space Grotesk", sans-serif; font-size: 11px; letter-spacing: 2px; }.workspace-heading h1 { font-size: clamp(34px, 5vw, 52px); }.workspace-tip { margin: 0 0 5px; color: #8f93ae; font-size: 13px; line-height: 1.9; }
.welcome-message { display: flex; align-items: center; gap: 10px; width: fit-content; margin: -4px 3% 22px auto; border: 1px solid rgba(132, 113, 255, .23); border-radius: 12px; padding: 10px 14px; color: #c7c3ec; background: linear-gradient(100deg, rgba(100,82,223,.2), rgba(72,62,157,.09)); box-shadow: 0 10px 24px rgba(57,48,152,.12); font-size: 12px; animation: welcomeIn .65s cubic-bezier(.2,.8,.2,1) both; }.welcome-message strong { color: #fff; }.welcome-icon, .welcome-spark { color: #a594ff; }.welcome-spark { opacity: .55; font-size: 10px; }.welcome-icon { font-size: 17px; } @keyframes welcomeIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.canvas-card { position: relative; overflow: visible; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); box-shadow: 0 30px 80px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(18px); }.toolbar { position: sticky; z-index: 20; top: 16px; display: flex; align-items: center; gap: 14px; min-height: 70px; margin: 12px; border: 1px solid rgba(177,167,255,.2); border-radius: 15px; padding: 12px 18px; background: rgba(33, 35, 73, .9); box-shadow: 0 14px 35px rgba(9,9,27,.28), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(18px); transition: opacity .28s ease, transform .28s ease, box-shadow .28s ease; }.canvas-card:not(.toolbar-awake) .toolbar { opacity: .16; transform: translateY(-10px); pointer-events: none; }.canvas-card:hover .toolbar, .canvas-card:focus-within .toolbar { opacity: 1; transform: translateY(0); pointer-events: auto; }.canvas-card.toolbar-awake .toolbar { opacity: 1; transform: translateY(0); pointer-events: auto; }.tool-group { display: flex; align-items: center; gap: 5px; }.tool-button, .clear-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 10px; padding: 9px 12px; color: #9da1bb; background: transparent; font-size: 12px; transition: .18s ease; }.tool-button:hover, .tool-button.active { border-color: rgba(142,125,255,.25); color: #fff; background: rgba(114,92,255,.18); }.tool-button.active { box-shadow: inset 0 -2px #826eff; }.tool-icon { color: #c0b7ff; font-family: Arial, sans-serif; font-size: 20px; line-height: 1; }.text-icon { font-size: 17px; font-weight: 700; }.toolbar-divider { width: 1px; height: 27px; background: rgba(157,151,255,.18); }.control { display: flex; align-items: center; gap: 7px; color: #8d91ab; font-size: 11px; }.control-color input { width: 25px; height: 25px; padding: 0; border: 2px solid rgba(255,255,255,.2); border-radius: 7px; background: none; cursor: pointer; }.control-range { direction: rtl; }.control-range input { width: 85px; accent-color: var(--purple); }.clear-button { margin-right: auto; border-color: rgba(255,128,160,.16); color: #ed9db5; }.clear-button:hover { background: rgba(255,100,140,.1); }.clear-button span { font-size: 18px; }
.canvas-viewport { position: relative; overflow: auto; padding: 22px; background: #15182d; }.canvas-wrap { width: 1200px; min-width: 1200px; margin: 0 auto; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.32); }.canvas-wrap canvas { display: block; }.object-tooltip { position: absolute; z-index: 10; max-width: 230px; border: 1px solid rgba(180, 169, 255, .35); border-radius: 9px; padding: 8px 12px; color: #fff; background: rgba(28, 25, 68, .94); box-shadow: 0 10px 26px rgba(0,0,0,.3), 0 0 18px rgba(114,92,255,.18); pointer-events: none; opacity: 0; transform: translateY(5px); transition: opacity .18s ease, transform .18s ease; white-space: nowrap; font-family: "Cairo", Tahoma, sans-serif; font-size: 12px; }.object-tooltip.visible { opacity: 1; transform: translateY(0); }.image-loader { position: absolute; z-index: 30; inset: 0; display: grid; place-content: center; gap: 12px; color: #e8e6ff; background: rgba(11, 14, 35, .62); backdrop-filter: blur(5px); font-size: 12px; }.spinner { display: block; width: 33px; height: 33px; margin: 0 auto; border: 3px solid rgba(255,255,255,.2); border-top-color: #9b88ff; border-right-color: #63dcb0; border-radius: 50%; animation: spin .75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }.canvas-footer { display: flex; justify-content: space-between; padding: 12px 18px; color: #797e9c; font-size: 11px; }.canvas-footer i { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: #5ee1a8; box-shadow: 0 0 8px #5ee1a8; }.notice { margin: 16px 0 0; border-radius: 10px; padding: 12px 15px; color: #ffbbc8; background: rgba(160,54,83,.18); font-size: 13px; }

@media (max-width: 760px) { .page-shell { width: min(100% - 28px, 1180px); padding-top: 18px; }.login-view { display: block; min-height: auto; padding: 80px 2% 40px; }.hero-preview { margin: 60px auto 20px; }.preview-window { height: 260px; }.workspace-heading { align-items: start; flex-direction: column; margin-right: 2%; }.toolbar { flex-wrap: wrap; }.toolbar-divider { display: none; }.clear-button { margin-right: 0; }.canvas-viewport { padding: 14px; }.canvas-footer { gap: 10px; flex-direction: column; } }
@media (max-width: 430px) { .topbar-actions { gap: 7px; }.presence { padding: 7px; }.presence #presence-label { display: none; }.account-name span { display: none; }.tool-label { display: none; }.tool-button { padding: 9px; }.control-range { display: none; }.hero-copy h1 { letter-spacing: -1px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
.control-color select { min-width: 92px; border: 1px solid rgba(157,151,255,.22); border-radius: 8px; padding: 6px 8px; color: #e9e7ff; background: #171a32; cursor: pointer; font-size: 11px; outline: none; }.control-color select:focus { border-color: #8d7aff; }.canvas-wrap { background: #080b12; }
.brand-mark { overflow: hidden; padding: 0; }.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.membership-gate { display: grid; min-height: calc(100vh - 150px); place-items: center; padding: 45px 0; }.membership-card { width: min(650px, 100%); border: 1px solid rgba(157,151,255,.2); border-radius: 24px; padding: 38px; background: rgba(24,28,57,.82); box-shadow: 0 30px 80px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.06); text-align: center; animation: welcomeIn .55s cubic-bezier(.2,.8,.2,1) both; }.membership-logo { width: 74px; height: 74px; overflow: hidden; margin: 0 auto 22px; border: 2px solid rgba(168,148,255,.42); border-radius: 21px; box-shadow: 0 12px 30px rgba(91,67,224,.3); }.membership-logo img { width: 100%; height: 100%; object-fit: cover; }.membership-card h1 { margin: 20px 0 14px; font-size: clamp(34px, 5vw, 54px); }.membership-card h1 span { color: #9583ff; }.membership-card > p:not(.pill):not(.membership-notice) { margin: 0 auto 26px; max-width: 480px; color: #a0a4bf; font-size: 14px; line-height: 2; }.membership-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }.check-membership-button { border: 1px solid rgba(165,153,255,.25); border-radius: 12px; padding: 14px 17px; color: #d8d5f3; background: rgba(114,92,255,.12); font-weight: 700; }.check-membership-button:hover { background: rgba(114,92,255,.23); }.check-membership-button:disabled { cursor: wait; opacity: .55; }.membership-notice { margin: 18px 0 0; color: #ffb9c7; font-size: 12px; }
@media (max-width: 600px) { .membership-card { padding: 28px 20px; }.membership-actions > * { width: 100%; justify-content: center; } }
.canvas-viewport { height: 700px; }.canvas-viewport.is-panning { cursor: grabbing; }.canvas-viewport.is-panning .canvas-wrap, .canvas-viewport.is-panning canvas { cursor: grabbing !important; }
.workspace { width: 100vw; min-height: calc(100vh - 70px); margin-inline: calc(50% - 50vw); padding: 24px 0 0; }.canvas-card { width: 100%; height: calc(100vh - 94px); min-height: 500px; margin: 0; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; }.toolbar { flex: 0 0 auto; }.canvas-viewport { direction: ltr; flex: 1 1 auto; width: 100%; min-height: 0; height: auto; padding: 22px; }.canvas-wrap { direction: ltr; margin: 0; }.canvas-footer { direction: rtl; flex: 0 0 auto; }
@media (max-width: 760px) { .workspace { min-height: calc(100vh - 60px); padding-top: 16px; }.canvas-card { height: calc(100vh - 76px); min-height: 420px; }.canvas-viewport { height: auto; padding: 14px; } }
.zoom-controls { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(231, 184, 79, .2); border-radius: 10px; padding: 3px; background: rgba(231, 184, 79, .06); }
.zoom-button { display: inline-grid; width: 28px; height: 28px; place-items: center; border: 1px solid transparent; border-radius: 7px; color: var(--gold-bright); background: transparent; font-family: "Space Grotesk", sans-serif; font-size: 20px; line-height: 1; transition: .18s ease; }
.zoom-button:hover { border-color: rgba(255, 227, 154, .35); color: #17100b; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); }
.zoom-controls output { min-width: 42px; color: #d9c7a5; font-family: "Space Grotesk", sans-serif; font-size: 10px; text-align: center; direction: ltr; }

/* Celestial gold and violet palette */
body { color: #fbf7ff; }
.ambient-one { background: #8654e9; }
.ambient-two { background: #d39b32; }
.bubble { border-color: rgba(255, 219, 129, .2); background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), rgba(142,98,232,.04) 55%, transparent 72%); box-shadow: inset 0 0 22px rgba(255,205,90,.08), 0 0 30px rgba(151,101,235,.1); }
.brand-mark { border-color: rgba(255, 227, 154, .35); background: linear-gradient(135deg, #b99035, #7548c5 72%); box-shadow: 0 10px 30px rgba(149, 98, 227, .3); }
.brand small { color: #b5a8c9; }
.account { color: #efe7fa; }.account-avatar { background: #7751c7; }.logout-button { border-color: rgba(255, 227, 154, .18); color: #d5c8e5; background: rgba(255,255,255,.05); }.logout-button:hover { background: rgba(231, 184, 79, .12); }
.presence { border-color: rgba(231, 184, 79, .2); color: #c8b994; background: rgba(231, 184, 79, .08); }.presence.online { border-color: rgba(231, 184, 79, .28); color: #e3d39e; background: rgba(231, 184, 79, .1); }
.pill { border-color: rgba(231, 184, 79, .28); color: var(--gold-bright); background: rgba(231, 184, 79, .09); }.pill i { background: var(--gold); box-shadow: 0 0 13px var(--gold); }
.hero-copy h1 span { color: var(--gold-bright); text-shadow: 0 0 30px rgba(231, 184, 79, .22); }
.discord-button { background: linear-gradient(135deg, #9c70ec, #6941b7 62%, #b47c28); box-shadow: 0 15px 30px rgba(106, 65, 183, .3); }.discord-button:hover { box-shadow: 0 20px 35px rgba(190, 139, 53, .32); }
.preview-window { border-color: rgba(231, 184, 79, .26); background: rgba(34, 24, 57, .8); }.preview-bar span { background: #c39a4a; }.preview-star { color: #d8a83e; filter: drop-shadow(0 10px 14px rgba(216,168,62,.24)); }.preview-orbit { border-color: rgba(206, 164, 67, .4); }
.eyebrow { color: var(--gold-bright); }.welcome-message { border-color: rgba(231, 184, 79, .24); color: #ded2ee; background: linear-gradient(100deg, rgba(125,79,204,.22), rgba(183,135,46,.1)); }.welcome-icon, .welcome-spark { color: var(--gold-bright); }
.canvas-card { border-color: rgba(231, 184, 79, .2); background: var(--panel); }.toolbar { border-color: rgba(231, 184, 79, .22); background: rgba(31, 22, 57, .94); box-shadow: 0 14px 35px rgba(9, 6, 18, .35), inset 0 1px rgba(255, 227, 154, .07); }.tool-button:hover, .tool-button.active { border-color: rgba(231, 184, 79, .32); background: rgba(133, 86, 211, .2); }.tool-button.active { box-shadow: inset 0 -2px var(--gold); }.tool-icon { color: var(--gold-bright); }.toolbar-divider { background: rgba(231, 184, 79, .2); }.control { color: #b9accb; }.control-color select { border-color: rgba(231, 184, 79, .24); color: #f5e7bd; background: #19112d; }.control-color select:focus { border-color: var(--gold); }.control-range input { accent-color: var(--gold); }.clear-button { border-color: rgba(211, 105, 130, .22); color: #eaa8b8; }.clear-button:hover { background: rgba(149, 63, 102, .16); }
.canvas-viewport { background: #171020; }.canvas-wrap { background: #08070b; box-shadow: 0 12px 32px rgba(0,0,0,.45); }.canvas-footer { color: #9f91b5; }.object-tooltip { border-color: rgba(231, 184, 79, .34); background: rgba(35, 22, 58, .96); box-shadow: 0 10px 26px rgba(0,0,0,.38), 0 0 18px rgba(231,184,79,.14); }.spinner { border-top-color: var(--gold); border-right-color: var(--purple-bright); }
.membership-card { border-color: rgba(231, 184, 79, .22); background: rgba(29, 20, 52, .88); }.membership-logo { border-color: rgba(231, 184, 79, .42); box-shadow: 0 12px 30px rgba(149, 98, 227, .3); }.membership-card h1 span { color: var(--gold-bright); }.check-membership-button { border-color: rgba(231, 184, 79, .28); color: #f0dfb2; background: rgba(231, 184, 79, .1); }.check-membership-button:hover { background: rgba(231, 184, 79, .18); }
.canvas-viewport { overscroll-behavior: contain; touch-action: none; }
.canvas-viewport.pan-ready { cursor: grab; }
.canvas-viewport.pan-ready .canvas-wrap, .canvas-viewport.pan-ready canvas { cursor: grab !important; }
.canvas-viewport, html, body { scrollbar-width: none; -ms-overflow-style: none; }
.canvas-viewport::-webkit-scrollbar, html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }