/* ============================================================ v13.2 — the first five minutes ============================================================ Styles for the surfaces plan item 2.1 introduces: - the (finally visible) one-screen welcome modal - the empty-arranger hero - the sign-in gate - the Create ▾ menu's groups, cost chips and locked rows - the app-bar Undo/Redo pair - the "paid plans are coming" notice in SubscriptionModal NOT wrapped in @layer, deliberately — the same reason toast.css and context-menu.css are unlayered. `style-v2.css` is entirely unlayered and owns `.modal`, `.modal-content`, `.modal-header` and `.btn`, and unlayered CSS beats LAYERED CSS regardless of specificity. A layered `#welcomeModal .modal-content` would lose to a bare `.modal-content`. Everything below is either a new `zt-`/`v6-` class or an id-qualified override, so unlayered-vs-unlayered specificity decides and we win. ============================================================ */ /* ============================================================ Welcome — one screen, two doors ============================================================ */ /* `.modal` ships at z-index 200 (style-v2.css) and #welcomeModal is the FIRST element in , while `.v6-app-bar` and the status bar are ALSO 200 and come later in document order — so at equal z-index they painted over the backdrop and stayed bright and clickable behind the dialog. The codebase already learned this once: polish.css lifts `.modal-overlay` to 9000 and `.modal.help-modal.open` to 9001. Sit above both — this screen is the very first thing a visitor sees and nothing may sit on top of it. */ #welcomeModal { z-index: 9002; } #welcomeModal .modal-content.zt-welcome { max-width: 620px; width: min(620px, 92vw); } #welcomeModal .zt-welcome .modal-header { text-align: center; } #welcomeModal .zt-welcome .modal-header h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } #welcomeModal .zt-welcome .modal-header p { color: var(--text-secondary, #a1a1aa); font-size: 13px; line-height: 1.45; } #welcomeModal .zt-welcome kbd { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 4px; padding: 1px 6px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); font-size: 11px; } .zt-welcome__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 16px; } @media (max-width: 620px) { .zt-welcome__choices { grid-template-columns: 1fr; } } .zt-welcome__choice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; text-align: left; cursor: pointer; color: var(--text-primary, #fafafa); background: var(--surface-400, #1f1f23); border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1)); border-radius: 12px; transition: border-color 120ms ease, transform 120ms ease, background 120ms ease; } .zt-welcome__choice:hover, .zt-welcome__choice:focus-visible { border-color: var(--accent-primary, #8b5cf6); transform: translateY(-1px); outline: none; } .zt-welcome__choice--primary { background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(236, 72, 153, 0.12)); border-color: rgba(139, 92, 246, 0.4); } .zt-welcome__choice-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(139, 92, 246, 0.18); color: var(--accent-primary, #8b5cf6); } .zt-welcome__choice--primary .zt-welcome__choice-icon { background: linear-gradient(135deg, #a78bfa, #ec4899); color: #fff; } .zt-welcome__choice-title { font-size: 15px; font-weight: 600; line-height: 1.2; } .zt-welcome__choice-sub { font-size: 12px; line-height: 1.4; color: var(--text-secondary, #a1a1aa); } .zt-welcome__footnote { margin-top: 10px; text-align: center; font-size: 11px; color: var(--text-muted, #71717a); } /* ============================================================ Empty arranger — a hero instead of a blank grid ============================================================ */ .zt-empty-arranger { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; /* The canvas underneath still owns dragging when the hero is hidden. */ pointer-events: none; z-index: 3; } .zt-empty-arranger.is-visible { display: flex; } .zt-empty-arranger__card { pointer-events: auto; max-width: 460px; padding: 20px 24px; text-align: center; background: rgba(24, 24, 27, 0.92); border: 1px solid var(--border-default, rgba(255, 255, 255, 0.1)); border-radius: 14px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45); } .zt-empty-arranger__title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text-primary, #fafafa); } .zt-empty-arranger__sub { margin: 0 0 14px; font-size: 12px; line-height: 1.45; color: var(--text-secondary, #a1a1aa); } .zt-empty-arranger__actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } /* In Pattern view the arranger is an 80px teaser strip with overflow:hidden, so the full card would be clipped. Same hero, one line shorter. */ body:not(.zt-song-mode) .zt-empty-arranger__card { padding: 8px 14px; } body:not(.zt-song-mode) .zt-empty-arranger__sub { display: none; } body:not(.zt-song-mode) .zt-empty-arranger__title { margin-bottom: 8px; font-size: 13px; } /* ============================================================ Sign-in gate ============================================================ */ .zt-auth-gate__lead { margin: 0 0 10px; font-size: 14px; color: var(--text-primary, #fafafa); } .zt-auth-gate__points { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text-secondary, #a1a1aa); } .zt-auth-gate__note { margin: 0; font-size: 12px; color: var(--text-muted, #71717a); } /* ============================================================ Create ▾ menu — groups, cost chips, locked rows ============================================================ */ body .v6-ai-menu__group-note { padding: 2px 16px 10px; font-size: 11px; line-height: 1.4; color: var(--text-muted, #71717a); } body .v6-ai-menu__cost { display: inline-block; /* .v6-ai-menu__item-body is a column flex, whose items stretch by default — without this the pill would run the whole width of the row. */ align-self: flex-start; margin-top: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary, #a1a1aa); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.09); } body .v6-ai-menu__cost--free { color: #86efac; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.28); } body .v6-ai-menu__cost--locked { color: #fcd34d; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.30); } body .v6-ai-menu__item--locked .v6-ai-menu__item-icon { filter: grayscale(0.7); opacity: 0.75; } body .v6-ai-menu__item--locked .v6-ai-menu__item-label, body .v6-ai-menu__item--locked .v6-ai-menu__item-sub { opacity: 0.8; } /* A collapsed group ("Make it more…") uses

, so it needs no JS. */ body .v6-ai-menu__disclosure { border-top: 1px solid rgba(255, 255, 255, 0.06); } body .v6-ai-menu__disclosure > summary { list-style: none; cursor: pointer; padding: 10px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-secondary, #a1a1aa); display: flex; align-items: center; gap: 8px; } body .v6-ai-menu__disclosure > summary::-webkit-details-marker { display: none; } body .v6-ai-menu__disclosure > summary:hover { color: var(--text-primary, #fafafa); } body .v6-ai-menu__disclosure-chevron { font-size: 10px; opacity: 0.7; transition: transform 120ms ease; } body .v6-ai-menu__disclosure[open] .v6-ai-menu__disclosure-chevron { transform: rotate(180deg); } /* ============================================================ Composer — the cost on the Compose button ============================================================ */ .v6-composer__cost { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.9); background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.18); white-space: nowrap; } /* ============================================================ App-bar Undo / Redo ============================================================ */ .v6-undo-redo { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; } .v6-undo-redo .btn[disabled] { opacity: 0.35; cursor: default; pointer-events: none; } /* ============================================================ Subscription — no more alert() with a personal email ============================================================ */ .subscription-coming-notice { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--text-secondary, #a1a1aa); }