:root { --bg: #080a0d; --panel: #12151bbd; --line: #ffffff17; --muted: #989da8; --text: #f1f3f5; --accent: #b9ff66; --accent-secondary: #b9ff66; font-family: Arial, Helvetica, sans-serif; color-scheme: dark; }
body { background: rgb(8, 10, 13); color: var(--text); }
body::before { content: ""; position: fixed; inset: 0px; z-index: -1; pointer-events: none; background: radial-gradient(at 95% 35%, rgba(28, 39, 51, 0.19), transparent 55%), radial-gradient(at 0% 70%, rgba(57, 51, 78, 0.125), transparent 55%); }
button, input, select, textarea { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.brand, .brand-period { font-family: Arial, Helvetica, sans-serif; }
.brand { font-size: 28px; font-weight: 750; letter-spacing: -1.7px; }
.brand-period { color: var(--accent); }
.glass { background: linear-gradient(140deg, rgba(255, 255, 255, 0.043), rgba(255, 255, 255, 0.01)); border: 1px solid rgba(255, 255, 255, 0.106); box-shadow: rgba(255, 255, 255, 0.035) 0px 1px inset, rgba(0, 0, 0, 0.133) 0px 20px 60px; backdrop-filter: blur(24px); }
.glass-nav { height: 76px; max-width: 1320px; position: absolute; z-index: 5; top: 24px; left: 32px; right: 32px; margin: auto; padding: 0px 28px; border-radius: 18px; background: rgba(12, 14, 18, 0.4); border: 1px solid rgba(255, 255, 255, 0.13); backdrop-filter: blur(24px); }
.glass-nav nav { display: flex; gap: 32px; }
.glass-nav .nav-link { font-size: 12px; color: rgb(201, 203, 209); }
.glass-nav .nav-link:hover { color: var(--accent); }
.nav-account { display: flex; align-items: center; gap: 22px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; padding: 12px 15px; font-size: 11px; background: rgba(255, 255, 255, 0.02); }
.nav-account:hover { border-color: rgba(185, 255, 102, 0.5); color: var(--accent); }
.eyebrow { font-size: 10px; letter-spacing: 1.8px; font-weight: 500; }
.dot { background: var(--accent); box-shadow: rgba(185, 255, 102, 0.2) 0px 0px 14px; }
.export-button { background: var(--accent); color: rgb(24, 33, 15); border-radius: 10px; font-size: 12px; font-weight: 600; gap: 30px; padding: 17px 21px; border: 1px solid rgb(202, 255, 144); box-shadow: rgba(255, 255, 255, 0.267) 0px 1px inset; min-height: 48px; }
.export-button:hover { background: rgb(209, 255, 156); color: rgb(16, 23, 11); }
.secondary-button { color: var(--accent); border: 1px solid rgba(185, 255, 102, 0.25); border-radius: 9px; background: rgba(185, 255, 102, 0.02); }
.secondary-button:hover { background: rgba(185, 255, 102, 0.063); }
.text-button { color: var(--accent); }
.hero-secondary, .text-link { display: inline-flex; align-items: center; gap: 25px; font-size: 12px; color: rgb(228, 230, 233); }
.hero-secondary { padding: 16px 8px; }
.hero-secondary:hover, .text-link:hover { color: var(--accent); }
.text-link { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 12px; }
.hero-actions { display: flex; align-items: center; gap: 22px; }
.landing-main { max-width: none; padding: 0px; }
.landing-hero { min-height: 790px; height: min(900px, 100svh); position: relative; isolation: isolate; overflow: hidden; padding: 190px max(64px, -596px + 50vw) 50px; border-bottom: 1px solid var(--line); }
.hero-canvas, .hero-shade { position: absolute; inset: 0px; z-index: -2; }
.hero-canvas { background: radial-gradient(at 85% 35%, rgb(237, 114, 214), transparent 40%), linear-gradient(135deg, rgb(27, 11, 59), rgb(98, 143, 255)); }
.hero-shade { z-index: -1; background: linear-gradient(90deg, rgba(8, 10, 13, 0.792) 0%, rgba(8, 10, 13, 0.376) 40%, rgba(8, 10, 13, 0.07) 75%), linear-gradient(0deg, rgb(8, 10, 13) 0%, transparent 28%, transparent 70%, rgba(8, 10, 13, 0.267)); }
.hero-copy { position: relative; z-index: 1; }
.hero-copy .eyebrow { color: rgb(203, 212, 196); margin-bottom: 30px; }
.hero-copy h1 { font-family: Arial, Helvetica, sans-serif; font-size: clamp(60px, 7.7vw, 110px); font-weight: 500; letter-spacing: -0.075em; line-height: 1.02; margin: 0px 0px 28px; }
.hero-copy h1 span { color: rgb(238, 241, 240); }
.hero-copy > p:not(.eyebrow) { font-size: 15px; line-height: 1.85; color: rgb(208, 206, 217); margin: 0px 0px 33px; }
.hero-proof { display: flex; gap: 13px; align-items: center; font-size: 10px; color: rgb(195, 186, 205); margin-top: 30px; }
.tiny-stars { color: var(--accent); font-size: 14px; letter-spacing: -2px; }
.hero-bottom { position: absolute; bottom: 40px; left: max(64px, -596px + 50vw); right: max(64px, -596px + 50vw); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hero-tech { display: flex; gap: 25px; font-size: 9px; letter-spacing: 1.4px; color: rgb(178, 176, 188); }
.hero-live { display: flex; align-items: center; gap: 15px; border-radius: 14px; padding: 16px 18px; background: rgba(25, 25, 36, 0.333); }
.hero-live > div { display: flex; flex-direction: column; gap: 6px; }
.hero-live strong { font-size: 12px; font-weight: 500; }
.hero-live div > span { font-size: 7px; letter-spacing: 1.1px; color: rgb(185, 184, 196); }
.hero-live button, .hero-live > a { background: rgba(255, 255, 255, 0.035); color: rgb(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.15); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 12px; }
.hero-live button { margin-left: 10px; }
.intro-strip, .featured-section, .possibilities-section, .how-section, .closing-cta, .site-footer { max-width: 1192px; margin-left: auto; margin-right: auto; }
.intro-strip { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); align-items: center; gap: 30px; padding: 46px 0px 55px; border-bottom: 1px solid var(--line); }
.intro-strip > p { font-size: 16px; line-height: 1.5; margin: 0px; }
.intro-strip p > span { color: var(--muted); }
.intro-strip > div { padding-left: 28px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.intro-strip strong { font-size: 35px; letter-spacing: -2px; font-weight: 500; }
.intro-strip div > span { font-size: 8px; color: var(--muted); letter-spacing: 1.1px; }
.featured-section { padding-top: 100px; }
.section-heading { margin-bottom: 35px; gap: 30px; }
.section-heading h2, .possibilities-copy h2 { font-family: Arial, Helvetica, sans-serif; font-size: clamp(34px, 4.4vw, 58px); font-weight: 500; letter-spacing: -0.06em; line-height: 1.09; }
.section-heading h2 span, .possibilities-copy h2 span { color: rgb(119, 127, 140); }
.section-heading .eyebrow { color: var(--accent); margin-bottom: 20px; }
.section-heading > p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.featured-card, .effect-card { border: 1px solid rgba(255, 255, 255, 0.086); background: linear-gradient(140deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)); border-radius: 18px; overflow: hidden; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; box-shadow: rgba(255, 255, 255, 0.027) 0px 1px inset; }
.featured-card:hover, .effect-card:hover { transform: translateY(-5px); border-color: rgba(185, 255, 102, 0.333); box-shadow: rgba(0, 0, 0, 0.267) 0px 18px 35px; }
.card-visual { aspect-ratio: 1.5 / 1; position: relative; overflow: hidden; background: radial-gradient(at 70% 20%, rgba(237, 114, 214, 0.667), transparent 60%), linear-gradient(135deg, rgb(27, 11, 59), rgba(98, 143, 255, 0.533)); }
.card-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-visual::after { content: ""; position: absolute; inset: 0px; pointer-events: none; box-shadow: rgb(8, 10, 13) 0px -30px 40px -30px inset; }
.card-orbit { position: absolute; right: 15px; bottom: 15px; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.208); background: rgba(255, 255, 255, 0.063); backdrop-filter: blur(12px); color: rgb(255, 255, 255); }
.featured-meta { display: flex; align-items: center; justify-content: space-between; padding: 20px; }
.featured-meta strong { font-size: 16px; font-weight: 500; letter-spacing: -0.5px; }
.featured-meta > span { font-size: 9px; color: var(--muted); }
.section-note { font-size: 10px; color: var(--muted); margin-top: 22px; display: flex; align-items: center; gap: 8px; }
.section-note .dot { width: 4px; height: 4px; }
.possibilities-section { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; padding: 120px 0px; }
.possibilities-copy h2 { margin: 25px 0px; }
.possibilities-copy > p:not(.eyebrow) { max-width: 360px; font-size: 13px; line-height: 1.9; color: var(--muted); margin-bottom: 30px; }
.possibility-art { border-radius: 30px; min-height: 455px; display: grid; place-items: center; position: relative; background: linear-gradient(150deg, rgba(65, 61, 90, 0.2), rgba(21, 35, 48, 0.2)); isolation: isolate; }
.art-glow { position: absolute; inset: 10%; background: radial-gradient(at 20% 30%, rgba(237, 114, 214, 0.44), transparent 55%), radial-gradient(at 80% 70%, rgba(98, 143, 255, 0.467), transparent 60%); filter: blur(40px); z-index: -1; }
.art-window { width: 75%; padding: 25px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; background: rgba(18, 21, 27, 0.467); backdrop-filter: blur(30px); box-shadow: rgba(0, 0, 0, 0.267) 0px 25px 60px; transform: rotate(-5deg); }
.art-bar { display: flex; align-items: center; gap: 9px; font-size: 7px; color: rgb(184, 191, 204); letter-spacing: 1px; }
.art-bar > span:last-child { margin-left: auto; font-size: 16px; color: rgb(255, 255, 255); }
.color-study { display: flex; gap: 8px; margin: 28px 0px 22px; }
.color-study i { height: 80px; flex: 1 1 0%; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.133); background: rgb(140, 75, 212); }
.color-study i:nth-child(2) { background: rgb(226, 119, 203); }
.color-study i:nth-child(3) { background: rgb(98, 143, 255); }
.art-setting { font-size: 9px; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 16px 0px; color: rgb(183, 189, 201); }
.art-setting > div { width: 100%; height: 3px; background: rgba(255, 255, 255, 0.067); margin-top: 12px; }
.art-setting i { display: block; width: 65%; height: 3px; background: var(--accent); position: relative; }
.art-setting i::after { content: ""; width: 7px; height: 7px; border-radius: 50%; position: absolute; right: 0px; top: -2px; background: var(--accent); }
.art-setting:nth-child(4) i { width: 84%; }
.art-window > p { font-size: 8px; color: rgb(141, 149, 164); margin-top: 25px; }
.floating-chip { position: absolute; bottom: 28px; right: -22px; border-radius: 9px; padding: 17px; font-size: 8px; letter-spacing: 1.4px; color: var(--accent); background: rgba(28, 34, 41, 0.7); transform: rotate(4deg); }
.how-section { padding: 5px 0px 100px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps-grid article { padding: 30px; border-radius: 18px; position: relative; min-height: 245px; overflow: hidden; }
.step-no { font-size: 8px; letter-spacing: 1.5px; color: var(--accent); }
.steps-grid h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.8px; margin: 36px 0px 13px; }
.steps-grid p { color: var(--muted); font-size: 12px; line-height: 1.8; max-width: 230px; }
.step-symbol { position: absolute; right: 25px; top: 17px; color: rgba(255, 255, 255, 0.19); font-size: 47px; }
.closing-cta { border-radius: 28px; text-align: center; padding: 75px 25px; background: radial-gradient(at 50% 120%, rgba(185, 255, 102, 0.055), transparent 60%), linear-gradient(130deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); margin-bottom: 100px; }
.closing-cta .eyebrow { font-size: 8px; color: rgb(177, 185, 169); }
.closing-cta h2 { font-size: clamp(38px, 5vw, 66px); line-height: 1.08; letter-spacing: -0.065em; font-weight: 500; margin: 26px 0px 20px; }
.closing-cta h2 span { color: rgb(135, 145, 126); }
.closing-cta > p:not(.eyebrow) { font-size: 13px; color: var(--muted); }
.closing-cta .hero-actions { justify-content: center; margin-top: 30px; }
.site-footer { display: grid; grid-template-columns: 1.5fr 1fr; gap: 35px; border-top: 1px solid var(--line); padding: 38px 0px 25px; }
.site-footer p { font-size: 11px; color: var(--muted); margin-top: 14px; }
.footer-links { display: flex; align-items: center; gap: 28px; justify-content: flex-end; font-size: 11px; color: rgb(174, 180, 191); }
.footer-legal { grid-column: 1 / -1; border-top: 1px solid var(--line); display: flex; gap: 24px; padding-top: 24px; font-size: 9px; color: rgb(134, 142, 156); }
.footer-legal > span { margin-right: auto; font-size: 8px; letter-spacing: 1.3px; }
.library-main { max-width: 1320px; margin: auto; padding: 170px 64px 90px; }
.library-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 20px; }
.library-intro .eyebrow { grid-column: 1 / -1; color: var(--accent); margin: 0px; }
.library-intro h1 { font-family: Arial, Helvetica, sans-serif; font-weight: 500; font-size: 72px; line-height: 1.04; letter-spacing: -0.07em; margin: 0px; }
.library-intro h1 span { color: rgb(125, 134, 150); }
.library-intro > p:last-child { justify-self: end; color: var(--muted); line-height: 1.8; font-size: 13px; }
.library-page .collection { padding-top: 55px; }
.library-page .collection > .section-heading { display: none; }
.library-toolbar { border-top: 1px solid var(--line); padding-top: 28px; }
.library-search { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 18px; border-radius: 12px; background: rgba(255, 255, 255, 0.024); border: 1px solid rgba(255, 255, 255, 0.1); }
.library-search > span:first-child { font-size: 25px; line-height: 1; color: var(--accent); }
.library-search input { background: none; border: 0px; outline: none; flex: 1 1 0%; min-width: 0px; color: rgb(255, 255, 255); font-size: 13px; }
.library-search input::placeholder { color: rgb(115, 125, 140); }
.search-shortcut { font-size: 11px; color: rgb(106, 115, 128); border: 1px solid rgba(255, 255, 255, 0.137); border-radius: 4px; padding: 2px 7px; }
.collection-filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 22px 0px 27px; margin: 0px; }
.preset-button { color: rgb(163, 171, 186); background: rgba(255, 255, 255, 0.016); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; font-size: 10px; padding: 11px 14px; }
.preset-button.active, .preset-button[aria-pressed="true"] { background: rgba(185, 255, 102, 0.08); color: var(--accent); border-color: rgba(185, 255, 102, 0.333); }
.preset-button:hover { border-color: rgba(185, 255, 102, 0.4); color: var(--accent); }
.library-page .effect-grid { gap: 25px 22px; }
.effect-card { text-align: left; padding: 0px; }
.effect-card .thumbnail { height: auto; aspect-ratio: 1.52 / 1; border-radius: 0px; background: linear-gradient(135deg, rgb(27, 11, 59), rgb(98, 143, 255)); }
.effect-card .canvas-host { position: absolute; inset: 0px; }
.effect-card .card-meta { display: flex; padding: 20px; gap: 15px; }
.effect-card .card-name { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -0.3px; }
.effect-card .card-category { font-size: 8px; max-width: 55%; text-align: right; line-height: 1.5; }
.effect-card.active .thumbnail, .effect-card:hover .thumbnail { box-shadow: none; }
.effect-card .selected-badge { display: none; }
.card-number { color: rgba(255, 255, 255, 0.88); font-size: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(8, 10, 13, 0.2); backdrop-filter: blur(8px); padding: 5px 7px; border-radius: 4px; top: 14px; left: 14px; }
.card-arrow { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); width: 32px; height: 32px; }
.editor-dialog { width: min(1370px, -50px + 100vw); max-height: 92svh; padding: 0px; background: linear-gradient(145deg, rgba(28, 32, 44, 0.91), rgba(17, 21, 29, 0.918)); border: 1px solid rgba(255, 255, 255, 0.208); border-radius: 22px; box-shadow: rgba(255, 255, 255, 0.08) 0px 1px inset, rgba(0, 0, 0, 0.667) 0px 40px 120px; overflow: hidden; backdrop-filter: blur(40px); }
.editor-dialog::backdrop { background: rgba(3, 5, 10, 0.667); backdrop-filter: blur(16px); }
.editor-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 25px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.editor-top .brand { font-size: 21px; }
.editor-top > span { font-size: 8px; letter-spacing: 2px; color: rgb(167, 175, 189); }
.editor-top .close-button { font-size: 28px; color: rgb(173, 182, 196); background: rgba(255, 255, 255, 0.027); border: 1px solid rgba(255, 255, 255, 0.133); width: 32px; height: 32px; border-radius: 50%; line-height: 1; }
.editor-dialog .studio { grid-template-rows: auto; grid-template-columns: minmax(0px, 1fr) 335px; gap: 0px; padding: 0px; align-items: stretch; }
.editor-dialog .preview-wrap { display: block; min-width: 0px; padding: 20px; max-height: calc(-75px + 92svh); overflow: auto; }
.editor-dialog .preview { height: min(54vw, 540px); max-height: 62svh; min-height: 290px; border-radius: 13px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.094); }
.editor-dialog .sample-content h2 { font-size: clamp(32px, 4vw, 57px); font-weight: 500; letter-spacing: -0.06em; }
.editor-dialog .controls { grid-row: auto; height: auto; max-height: calc(-75px + 92svh); overflow: auto; background: rgba(255, 255, 255, 0.01); border-width: 0px 0px 0px 1px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgba(255, 255, 255, 0.075); border-image: none; border-radius: 0px; padding: 24px; }
.panel-heading h2 { font-size: 19px; font-weight: 500; }
.panel-heading .text-button { font-size: 10px; }
.panel-subtitle { font-size: 10px; color: rgb(137, 147, 164); }
.editor-dialog .material-caption { padding: 18px 0px 0px; }
.material-caption h2 { font-size: 21px; }
.material-caption p { font-size: 10px; color: rgb(143, 154, 171); max-width: 65%; line-height: 1.7; }
.camera-drawer { border: 1px solid rgba(255, 255, 255, 0.082); border-radius: 9px; margin-top: 15px; background: rgba(255, 255, 255, 0.01); }
.camera-drawer > summary { display: flex; justify-content: space-between; list-style: none; padding: 13px 15px; color: rgb(174, 183, 197); font-size: 10px; cursor: pointer; }
.camera-panel { margin: 0px; border: 0px; background: none; padding: 5px 15px 15px; }
.camera-panel .camera-heading { display: none; }
.camera-panel p { font-size: 9px; }
.camera-drawer summary span { color: var(--accent); }
.controls .control-section, .settings-section { border-color: rgba(255, 255, 255, 0.082); }
.slider-field label, .slider-field output, .color-field span, .quality-row select { color: rgb(170, 181, 199); }
.slider-field input { background: linear-gradient(to right,var(--accent) 0 var(--value),#ffffff20 var(--value) 100%); }
.controls .export-button { margin-top: 22px; }
.quality-row { margin-top: 20px; }
.settings-section summary, .control-section summary { color: rgb(178, 188, 203); }
.settings-section summary::after, .control-section summary::after { color: var(--accent); }
.settings-section select, .slider-field select { border-color: rgba(255, 255, 255, 0.125); background: rgb(16, 21, 28); color: rgb(196, 204, 216); }
dialog:not(.editor-dialog) { border: 1px solid rgba(255, 255, 255, 0.17); background: linear-gradient(140deg, rgba(33, 39, 52, 0.96), rgba(17, 21, 30, 0.96)); box-shadow: rgba(255, 255, 255, 0.067) 0px 1px inset, rgba(0, 0, 0, 0.533) 0px 35px 100px; backdrop-filter: blur(30px); }
dialog::backdrop { background: rgba(3, 5, 10, 0.667); backdrop-filter: blur(14px); }
.membership-page .masthead { position: relative; top: 24px; left: auto; right: auto; width: calc(100% - 64px); }
.membership-page .member-main { padding-top: 90px; }
.price-card, .account-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); border-color: rgba(255, 255, 255, 0.133); backdrop-filter: blur(22px); }
.price-card.lifetime { border-color: rgba(185, 255, 102, 0.5); background: radial-gradient(at right top, rgba(185, 255, 102, 0.043), transparent 70%), rgba(255, 255, 255, 0.016); }
.price-label { background: var(--accent); }
.price-card .launch-price, .member-message, .status-pill { color: var(--accent); }
.price-card .price-label { color: rgb(24, 33, 15); }
.member-dialog input, .saved-item input, .save-form input { border-color: rgba(255, 255, 255, 0.19); background: rgba(8, 12, 18, 0.667); }
.status-pill { background: rgba(185, 255, 102, 0.063); border-color: rgba(185, 255, 102, 0.25); }
#toast { z-index: 100; color: rgb(24, 33, 15); border: 1px solid rgb(202, 255, 144); background: var(--accent); }
@media (min-width: 1450px) {
  .landing-hero { padding-top: 220px; }
  .hero-copy h1 { font-size: 118px; }
  .editor-dialog .preview { height: 570px; }
}
@media (max-width: 1300px) {
  .intro-strip, .featured-section, .possibilities-section, .how-section, .closing-cta, .site-footer { margin-left: 50px; margin-right: 50px; }
  .landing-hero { padding-left: 50px; padding-right: 50px; }
  .hero-bottom { left: 50px; right: 50px; }
  .possibilities-section { gap: 60px; }
}
@media (max-width: 1000px) {
  .glass-nav { left: 24px; right: 24px; padding: 0px 22px; }
  .glass-nav nav { gap: 22px; }
  .nav-account { gap: 10px; }
  .landing-hero { min-height: 750px; }
  .hero-copy h1 { font-size: 80px; }
  .hero-live div > span { font-size: 6px; }
  .intro-strip { gap: 20px; }
  .intro-strip > div { padding-left: 20px; }
  .featured-meta { display: block; padding: 17px; }
  .featured-meta > span { display: block; margin-top: 8px; }
  .possibilities-section { gap: 35px; }
  .possibility-art { min-height: 400px; }
  .floating-chip { right: -10px; font-size: 7px; }
  .steps-grid article { padding: 23px; }
  .steps-grid h3 { font-size: 19px; }
  .editor-dialog .studio { grid-template-rows: auto; grid-template-columns: minmax(0px, 1fr) 295px; }
  .library-main { padding-left: 35px; padding-right: 35px; }
  .library-intro h1 { font-size: 62px; }
  .library-page .effect-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-links { gap: 17px; }
}
@media (max-width: 700px) {
  .glass-nav { height: 64px; top: 16px; left: 16px; right: 16px; padding: 0px 17px; border-radius: 14px; }
  .glass-nav .brand { font-size: 24px; }
  .glass-nav nav { gap: 17px; }
  .glass-nav .nav-link { font-size: 10px; }
  .glass-nav nav a:nth-child(2) { display: none; }
  .nav-account { padding: 10px; border: 0px; background: none; font-size: 0px; gap: 0px; }
  .nav-account > span { font-size: 18px; }
  .landing-hero { min-height: 770px; height: 94svh; padding: 170px 25px 35px; }
  .hero-copy h1 { font-size: clamp(53px, 12.5vw, 80px); letter-spacing: -0.075em; line-height: 1.08; margin-bottom: 25px; }
  .hero-copy .eyebrow { font-size: 8px; letter-spacing: 1.4px; margin-bottom: 26px; }
  .hero-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.8; }
  .hero-copy > p br { display: none; }
  .hero-actions { gap: 12px; flex-wrap: wrap; }
  .hero-actions .export-button { font-size: 11px; padding: 15px 17px; gap: 25px; }
  .hero-secondary { font-size: 11px; gap: 16px; }
  .hero-proof { font-size: 8px; gap: 9px; max-width: 310px; }
  .hero-bottom { left: 25px; right: 25px; bottom: 25px; align-items: flex-start; flex-direction: column; gap: 22px; }
  .hero-live { width: 100%; padding: 14px; }
  .hero-live button { margin-left: auto; }
  .hero-live div > span { font-size: 6px; }
  .hero-tech { font-size: 7px; gap: 22px; }
  .hero-shade { background: linear-gradient(90deg, rgba(8, 10, 13, 0.67), rgba(8, 10, 13, 0.082)), linear-gradient(0deg, rgb(8, 10, 13) 0%, transparent 40%); }
  .intro-strip, .featured-section, .possibilities-section, .how-section, .closing-cta, .site-footer { margin-left: 25px; margin-right: 25px; }
  .intro-strip { grid-template-columns: repeat(3, 1fr); gap: 28px 10px; padding: 35px 0px; }
  .intro-strip > p { grid-column: 1 / -1; font-size: 18px; }
  .intro-strip > div { padding-left: 12px; gap: 8px; }
  .intro-strip strong { font-size: 28px; }
  .intro-strip div > span { font-size: 6px; line-height: 1.6; letter-spacing: 0.7px; }
  .featured-section { padding-top: 60px; }
  .section-heading { align-items: flex-start; gap: 25px; flex-direction: column; }
  .section-heading h2, .possibilities-copy h2 { font-size: 39px; letter-spacing: -0.06em; }
  .section-heading .eyebrow { font-size: 7px; letter-spacing: 1.3px; }
  .text-link { font-size: 11px; }
  .featured-grid { grid-template-columns: 1fr; gap: 20px; }
  .featured-meta { display: flex; padding: 19px; }
  .featured-meta > span { display: inline; margin: 0px; font-size: 8px; }
  .card-visual { aspect-ratio: 1.65 / 1; }
  .possibilities-section { grid-template-columns: 1fr; padding: 70px 0px; gap: 35px; }
  .possibilities-copy .eyebrow { font-size: 7px; }
  .possibility-art { min-height: 365px; border-radius: 22px; }
  .art-window { width: 77%; padding: 21px; }
  .floating-chip { right: -9px; bottom: 18px; padding: 13px; }
  .how-section { padding-bottom: 60px; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid article { min-height: 205px; padding: 28px; }
  .steps-grid h3 { margin-top: 30px; font-size: 22px; }
  .steps-grid p { max-width: 85%; }
  .closing-cta { padding: 50px 20px; border-radius: 22px; margin-bottom: 60px; }
  .closing-cta .eyebrow { font-size: 6px; letter-spacing: 1.1px; }
  .closing-cta .hero-actions { flex-direction: column; gap: 5px; }
  .closing-cta h2 { font-size: 40px; }
  .closing-cta > p:not(.eyebrow) { font-size: 11px; }
  .site-footer { display: flex; align-items: flex-start; flex-direction: column; gap: 25px; }
  .footer-links { flex-wrap: wrap; gap: 24px; font-size: 10px; }
  .footer-legal { width: 100%; gap: 18px; flex-wrap: wrap; font-size: 8px; }
  .footer-legal > span { width: 100%; }
  .library-main { padding: 130px 20px 60px; }
  .library-intro { display: block; }
  .library-intro .eyebrow { font-size: 7px; margin-bottom: 24px; }
  .library-intro h1 { font-size: 53px; letter-spacing: -0.07em; }
  .library-intro > p:last-child { margin-top: 20px; font-size: 12px; }
  .library-page .collection { padding-top: 25px; }
  .collection-filters { gap: 6px; }
  .collection-filters .preset-button { padding: 9px 11px; font-size: 8px; }
  .library-search { padding: 12px; }
  .library-search input { font-size: 11px; }
  .search-shortcut { display: none; }
  .library-page .effect-grid { grid-template-columns: 1fr; gap: 20px; }
  .effect-card .thumbnail { aspect-ratio: 1.6 / 1; }
  .editor-dialog { width: calc(-16px + 100vw); max-height: 96svh; border-radius: 15px; overflow: auto; }
  .editor-top { padding: 13px 17px; position: sticky; top: 0px; background: rgba(23, 28, 37, 0.95); z-index: 2; backdrop-filter: blur(20px); }
  .editor-top > span { font-size: 6px; letter-spacing: 1.4px; }
  .editor-dialog .studio { display: block; }
  .editor-dialog .preview-wrap { padding: 12px; overflow: visible; max-height: none; }
  .editor-dialog .preview { height: 360px; min-height: 280px; max-height: none; }
  .editor-dialog .controls { border-left: 0px; border-top: 1px solid rgba(255, 255, 255, 0.133); max-height: none; padding: 23px; }
  .editor-dialog .material-caption { padding: 16px 3px; }
  .material-caption p { max-width: 100%; }
  .editor-dialog .sliders { grid-template-columns: 1fr; }
  .editor-dialog .sample-content h2 { font-size: 38px; }
  .editor-dialog .camera-panel .sliders { grid-template-columns: 1fr 1fr; gap: 18px; }
  .editor-dialog .preview-top, .editor-dialog .preview-bottom { left: 15px; right: 15px; }
  .membership-page .masthead { top: 16px; width: calc(100% - 32px); }
  .membership-page .member-main { padding-top: 70px; }
  .member-main .member-hero h1 { font-size: 48px; }
  .price-card, .account-card { padding: 27px; }
  .member-main { padding-left: 22px; padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { scroll-behavior: auto !important; transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}
.library-result-count { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0px 0px 24px; font-size: 8px; letter-spacing: 1px; color: rgb(119, 130, 145); }
.library-result-count .count { font-size: 8px; }
.library-result-count > span:last-child { color: rgb(104, 115, 130); }
@media (max-width: 700px) {
  .library-result-count > span:last-child { display: none; }
  .library-result-count .count { max-width: none; text-align: left; }
}
body:has(.editor-dialog[open]) { overflow: hidden; }
@media (max-width: 700px) {
  .library-intro > p:last-child { justify-self: start; text-align: left; width: 100%; }
}
.saved-item { background: linear-gradient(140deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)); border-color: rgba(255, 255, 255, 0.133); backdrop-filter: blur(20px); }
@media (max-width: 700px) {
  .glass-nav.masthead { gap: 12px; flex-wrap: nowrap; padding: 0px 17px !important; }
  .glass-nav .nav-link { font-size: 10px !important; }
}
.site-footer .brand { font-size: 28px; }
.membership-page .member-main { padding-bottom: 100px; }
.membership-page .member-hero .eyebrow, .account-heading .eyebrow { color: var(--accent); }
.member-hero h1 span, .account-heading h1 span { color: rgb(125, 134, 150); }
.member-main .shared-features, .member-main .member-faq details, .member-main .history-row { border-color: var(--line); }
.member-main .member-faq summary { color: var(--text); }
.member-main .member-faq summary:hover { color: var(--accent); }
.member-main .shared-features li::before { color: var(--accent); }
.policy-content .member-hero { margin-bottom: 52px; }
.policy-content section:not(.member-hero) { padding: 28px 32px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)); box-shadow: rgba(255, 255, 255, 0.02) 0px 1px inset; backdrop-filter: blur(20px); }
.policy-content section + section { margin-top: 22px; }
.policy-content section > h2 { margin-top: 0px; color: var(--text); }
.policy-content section > p:last-child { margin-bottom: 0px; }
.policy-content a, .member-faq p a { color: var(--accent); text-decoration: underline rgba(185, 255, 102, 0.314); text-underline-offset: 4px; }
.policy-content a:hover, .member-faq p a:hover { text-decoration-color: var(--accent); }
.upgrade-check { background: rgba(185, 255, 102, 0.024); border-radius: 12px; }
.account-card p, .saved-item p, .history-row, .save-form p, #member-gate p, .member-dialog > p { color: rgb(174, 184, 199); }
.saved-item form { padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 700px) {
  .membership-page .member-main { padding-bottom: 60px; }
  .policy-content section:not(.member-hero) { padding: 24px 22px; border-radius: 14px; }
  .policy-content .member-hero { margin-bottom: 36px; }
  .policy-content h2 { font-size: 23px; }
  .policy-content section > p { font-size: 14px; }
  .account-heading { flex-wrap: wrap; }
  .site-footer .brand { font-size: 26px; }
}
.price-card .price-label { display: inline-flex; align-items: center; gap: 7px; text-transform: none; letter-spacing: 0.025em; font-size: 11px; padding: 8px 13px; top: -15px; box-shadow: rgba(185, 255, 102, 0.15) 0px 0px 22px; }
.price-label svg { flex: 0 0 auto; }
.plan-features { list-style: none; padding: 24px 0px 0px; margin: 28px 0px 25px; border-top: 1px solid var(--line); display: grid; gap: 15px; }
.plan-features li { display: flex; align-items: flex-start; gap: 12px; color: rgb(190, 199, 212); font-size: 13px; line-height: 1.55; }
.feature-check { display: grid; place-items: center; flex: 0 0 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: rgba(185, 255, 102, 0.063); color: var(--accent); font-size: 11px; font-weight: 700; }
.price-card.lifetime .feature-check { background: rgba(185, 255, 102, 0.1); }
@media (max-width: 720px) {
  .pricing-grid { gap: 34px; }
  .plan-features { gap: 13px; }
  .plan-features li { font-size: 12px; }
  .price-card .price-label { right: 22px; }
}
@property --plan-aura-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plan-aura { position: relative; isolation: isolate; min-width: 0px; padding: 2px; border-radius: 20px; background: conic-gradient(from var(--plan-aura-angle),#b9ff6600 0deg 230deg,#8add3650 265deg,#b9ff66 310deg,#f0ffd7 340deg,#b9ff6600 360deg); animation: 6s linear 0s infinite normal none running plan-aura-orbit; }
.plan-aura::before, .plan-aura::after { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: inherit; pointer-events: none; }
.plan-aura::before { filter: blur(6px); opacity: 0.85; }
.plan-aura::after { filter: blur(24px); opacity: 0.5; }
.card-aura { display: grid; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 60px; }
.card-aura > .price-card.lifetime { position: relative; z-index: 1; width: 100%; border: 0px; border-radius: 18px; background: radial-gradient(at right top, rgba(185, 255, 102, 0.047), transparent 65%), rgb(19, 23, 27); box-shadow: rgba(185, 255, 102, 0.14) 0px 0px 0px 1px inset; backdrop-filter: none; }
.button-aura { margin-top: 20px; border-radius: 12px; animation-duration: 4s; animation-direction: reverse; }
.button-aura::before { filter: blur(5px); opacity: 1; }
.button-aura::after { filter: blur(16px); opacity: 0.7; }
.button-aura > .export-button { position: relative; z-index: 1; margin: 0px; width: 100%; border-radius: 10px; border: 1px solid rgb(202, 255, 144); box-shadow: rgba(255, 255, 255, 0.333) 0px 1px inset; background: var(--accent); }
.button-aura > .export-button:hover:not(:disabled) { background: rgb(209, 255, 156); }
@keyframes plan-aura-orbit {
  100% { --plan-aura-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-aura { animation: auto ease 0s 1 normal none running none; --plan-aura-angle: 35deg; }
}
/* Avoid repainting card-sized gradients and blurred copies on touch devices. */
@media (max-width: 720px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .plan-aura {
    animation: none;
    background: linear-gradient(135deg, #dfffba, #b9ff66 35%, #557e2d 75%, #b9ff66);
    box-shadow: 0 0 18px rgba(185, 255, 102, 0.14);
  }
  .plan-aura::before, .plan-aura::after { content: none; display: none; filter: none; }
  .pricing-grid .price-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.hero-button-aura { display: inline-flex; margin-top: 0px; flex: 0 0 auto; }
.hero-button-aura > .export-button { display: inline-flex; width: auto; }
.editor-dialog[open] { display: grid; grid-template-columns: minmax(0px, 1fr) 335px; grid-template-rows: auto minmax(0px, 1fr) auto; height: 92svh; }
.editor-dialog .editor-top { grid-area: 1 / 1 / auto / -1; }
.editor-dialog .studio { display: contents; }
.editor-dialog .preview-wrap { grid-area: 2 / 1 / 4; max-height: none; min-height: 0px; overflow: auto; }
.editor-dialog .controls { grid-area: 2 / 2; min-height: 0px; max-height: none; height: auto; overflow: auto; display: block; contain: size; }
.editor-actions { grid-area: 3 / 2; padding: 17px 24px 14px; background: rgb(23, 29, 37); border-top: 1px solid var(--line); border-left: 1px solid var(--line); z-index: 2; }
.editor-actions .export-button { width: 100%; margin: 0px; justify-content: space-between; }
.editor-actions .save-config-button { margin-top: 9px; }
.editor-actions .export-note { font-size: 9px; margin: 11px 0px 0px; text-align: center; line-height: 1.5; }
.settings-fields { padding: 0px; margin: 0px; border: 0px; min-width: 0px; min-inline-size: 0px; }
.settings-fields:disabled input, .settings-fields:disabled select, .settings-fields:disabled button { cursor: not-allowed; opacity: 0.45; }
.settings-fields:disabled .slider-field label, .settings-fields:disabled .slider-field output, .settings-fields:disabled .color-field span { opacity: 0.55; }
.mouse-toggle { grid-column: 1 / -1; display: flex; gap: 9px; align-items: flex-start; font-size: 10px; line-height: 1.6; color: rgb(170, 181, 199); margin-top: 8px; }
.mouse-toggle input { margin: 1px 0px 0px; accent-color: var(--accent); flex: 0 0 auto; }
.editor-dialog .camera-panel .camera-heading { display: flex; margin: 8px 0px 18px; }
.editor-dialog .camera-heading > span { display: none; }
.editor-dialog .camera-heading > div { display: flex; gap: 18px; }
@media (min-width: 701px) and (max-width: 1000px) {
  .editor-dialog[open] { grid-template-columns: minmax(0px, 1fr) 295px; }
}
@media (max-width: 700px) {
  .editor-dialog[open] { height: 96svh; grid-template-columns: minmax(0px, 1fr); grid-template-rows: auto minmax(0px, 1fr) auto; overflow: hidden; }
  .editor-dialog .studio { display: block; grid-area: 2 / 1; overflow: auto; min-height: 0px; overscroll-behavior: contain; }
  .editor-dialog .preview-wrap { overflow: visible; max-height: none; }
  .editor-dialog .controls { height: auto; max-height: none; overflow: visible; contain: none; }
  .editor-actions { grid-area: 3 / 1; padding: 12px 20px; border-left: 0px; }
  .editor-actions .save-config-button { padding: 10px; min-height: 34px; }
  .editor-actions .export-note { margin-top: 7px; font-size: 8px; }
  .editor-top { position: static; }
  .editor-dialog .sample-content h2 { font-size: 34px; }
}
.editor-actions .export-note { color: var(--muted); }
#pro-settings .pro-locked > summary { position: relative; cursor: default; color: rgb(137, 149, 166); overflow: visible; }
#pro-settings .pro-locked > summary::after { content: ""; width: 12px; height: 14px; flex: 0 0 auto; background: var(--accent); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath fill='black' d='M4 7V5a4 4 0 0 1 8 0v2h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1Zm2 0h4V5a2 2 0 0 0-4 0v2Z'/%3E%3C/svg%3E") center center / contain no-repeat; opacity: 0.8; }
#pro-settings .pro-locked > summary::before { content: "Pro Feature"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%) translateX(4px); padding: 6px 9px; border: 1px solid rgba(185, 255, 102, 0.227); border-radius: 6px; background: rgb(39, 49, 38); color: var(--accent); font-size: 10px; font-weight: 400; letter-spacing: 0px; text-transform: none; line-height: 1.4; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 2; }
#pro-settings .pro-locked > summary:hover::before, #pro-settings .pro-locked > summary:focus-visible::before { opacity: 1; transform: translateY(-50%); }
#pro-settings .pro-locked > summary:hover::after { opacity: 1; }
.camera-drawer[open] > summary > span { font-size: 0px; }
.camera-drawer[open] > summary > span::after { content: "−"; font-size: 12px; }
.ai-hint-icon{width:24px;height:24px;flex-shrink:0}#share-shader svg{width:17px;height:17px;display:block}@media(max-width:700px){.ai-hint-icon{width:20px;height:20px}}
.header-account{display:flex;align-items:center;gap:19px}.member-signin-link{font-size:11px;color:#bec4cd;white-space:nowrap}.member-signin-link:hover{color:var(--accent)}.header-account [hidden],.footer-links [hidden]{display:none!important}.header-account #user-menu-host:empty{display:none}.glass-nav:has(.user-menu[open]){z-index:25}.user-menu{position:relative}.user-menu summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font-size:11px;color:#e1e5ea}.user-menu summary::-webkit-details-marker{display:none}.user-avatar{display:block;width:36px;height:36px;border-radius:50%;border:1px solid #ffffff40;box-shadow:inset 0 0 8px #ffffff20,0 0 0 4px #ffffff04}.user-chevron{color:#aab3c0;font-size:16px}.user-popover{position:absolute;right:0;top:calc(100% + 18px);width:min(300px,calc(100vw - 40px));padding:22px;background:#12161bf5;backdrop-filter:blur(30px);border:1px solid #ffffff25;border-radius:16px;box-shadow:0 20px 70px #0009;line-height:1.5}.user-signed-in{font-size:8px;letter-spacing:1.5px;color:var(--accent);margin:0 0 8px}.user-email{font-size:12px;overflow-wrap:anywhere;color:#d9dfe7;margin:0 0 18px}.user-workspace-link{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12;font-size:12px}.avatar-editor{display:flex;align-items:center;gap:15px;margin:22px 0 15px}.avatar-preview{width:64px;height:64px;flex-shrink:0;border-radius:18px;border:1px solid #ffffff30}.avatar-editor p{font-size:11px;color:#b6bfcc;margin:0 0 10px}.avatar-colors{display:flex;gap:8px}.avatar-colors label{font-size:0}.avatar-colors input{display:block;width:25px;height:25px;padding:0;border:1px solid #ffffff40;background:transparent;border-radius:50%;overflow:hidden;cursor:pointer}.avatar-colors input::-webkit-color-swatch-wrapper{padding:0}.avatar-colors input::-webkit-color-swatch{border:0;border-radius:50%}.avatar-randomize,.user-signout{display:flex;align-items:center;justify-content:space-between;width:100%;font:inherit;font-size:11px;border-radius:8px;padding:11px 13px;cursor:pointer}.avatar-randomize{border:1px solid #b9ff6640;color:var(--accent);background:#b9ff6608}.avatar-randomize:hover{background:#b9ff6614}.avatar-status{font-size:10px;color:var(--muted);margin:10px 0;line-height:1.6}.avatar-status:empty{display:none}.user-signout{margin-top:18px;background:#ffffff05;border:1px solid #ffffff20;color:#c8ced8}.user-signout:hover{background:#ffffff10}.avatar-randomize:disabled,.user-signout:disabled{opacity:.5;cursor:wait}@media(max-width:1000px){.header-account{gap:12px}.member-signin-link{font-size:10px}.user-menu-label{display:none}}@media(max-width:700px){.header-account{gap:8px}.member-signin-link{font-size:9px}.user-avatar{width:30px;height:30px}.user-chevron{display:none}.user-popover{top:calc(100% + 22px)}}
.footer-links{flex-wrap:wrap}
.closing-cta{position:relative;isolation:isolate;overflow:hidden;background:#080a0d}.closing-cta .cta-background{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.85}.closing-cta .cta-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#080a0d78,#080a0d25 55%,#080a0d70),radial-gradient(ellipse at 50% 40%,#080a0d99,transparent 75%)}.closing-cta>.eyebrow,.closing-cta>h2,.closing-cta>p,.closing-cta>.hero-actions{position:relative;z-index:2}.closing-cta h2 span{color:#c4c8d2}.closing-cta>p:not(.eyebrow){color:#c0c5cf;line-height:1.8}.closing-cta .cta-motion{position:absolute;z-index:3;bottom:16px;right:18px;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #ffffff25;border-radius:8px;background:#080a0d88;backdrop-filter:blur(12px);color:#c2c9d4;font-size:11px;cursor:pointer}.closing-cta .cta-motion span{font-size:9px}.closing-cta .cta-motion:hover{color:var(--accent);border-color:#b9ff6650}

.user-avatar,.avatar-preview{display:grid;place-items:center;color:#fff;font-weight:700;line-height:1;text-shadow:0 1px 4px #000c,0 0 2px #000b}.user-avatar{font-size:16px}.avatar-preview{font-size:28px}@media(max-width:700px){.user-avatar{font-size:14px}}
.user-avatar,.avatar-preview{color:#000;text-shadow:none;border:0;box-shadow:none}

.user-menu .user-chevron{display:inline-flex;align-items:center;justify-content:center;width:12px;font-size:14px;line-height:1;color:var(--accent)}.user-menu .user-chevron::after{content:"+"}.user-menu[open] .user-chevron::after{content:"−"}

.membership-lines{margin:24px 0 16px;border-top:1px solid var(--line)}.membership-line{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}.membership-lines strong{font-size:13px;font-weight:500;color:var(--text)}.membership-line p,.account-upgrade-body>p{font-size:11px;line-height:1.7;margin:6px 0 0;color:var(--muted)}.membership-line>.text-button{flex-shrink:0;font-size:11px}.account-upgrade{border-bottom:1px solid var(--line)}.account-upgrade>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer;list-style:none}.account-upgrade>summary::-webkit-details-marker{display:none}.membership-price{display:block;font-size:11px;color:var(--muted);margin-top:6px}.membership-expand{color:var(--accent);font-size:15px}.membership-expand::after{content:"+"}.account-upgrade[open] .membership-expand::after{content:"−"}.account-upgrade-body{padding:0 0 22px}.account-upgrade-check{display:flex;align-items:flex-start;gap:10px;margin:16px 0;font-size:11px;line-height:1.8;color:#b0b8c6}.account-upgrade-check input{margin-top:4px;accent-color:var(--accent);flex-shrink:0}.account-upgrade-body .secondary-button{margin-top:14px;font-size:11px;padding:12px 16px}.membership-lines button:disabled{opacity:.5;cursor:default}@media(max-width:450px){.membership-line{align-items:flex-start;gap:12px}.membership-line>.text-button{font-size:10px}}

.payment-security{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.payment-security>svg{flex-shrink:0}.payment-security>a{display:inline-flex;align-items:center;margin-left:1px}.payment-security img{display:block;width:48px;height:23px;object-fit:contain}
.pricing-grid .price-card{display:flex;flex-direction:column}.pricing-grid .payment-security{margin-top:auto}

#main-canvas[data-preview-state="loading"]::after,#main-canvas[data-preview-state="error"]::after{position:absolute;inset:0;display:grid;place-items:center;background:#080a0d;color:#a6b0bf;font-size:12px;z-index:1;pointer-events:none}#main-canvas[data-preview-state="loading"]::after{content:"Loading preview…"}#main-canvas[data-preview-state="error"]::after{content:"Preview unavailable. Close and reopen to retry."}

/* Interface icons use vector paths rather than platform-dependent symbol fonts. */
.ui-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.15em; pointer-events: none; }
button > .ui-icon, a > .ui-icon { width: 16px; height: 16px; }
.glass-button .ui-icon, .hero-live .ui-icon { width: 15px; height: 15px; }
.close-button .ui-icon { width: 22px; height: 22px; }
.step-symbol .ui-icon { width: 47px; height: 47px; }
.tiny-stars { display: inline-flex; gap: 0; letter-spacing: normal; }
.tiny-stars .ui-icon { width: 14px; height: 14px; }
.feature-check .ui-icon { width: 11px; height: 11px; }
.library-search > span > .ui-icon { width: 16px; height: 16px; }
.randomize-button > span, .card-orbit, .card-arrow { display: inline-flex; align-items: center; justify-content: center; }
.card-orbit .ui-icon, .card-arrow .ui-icon { width: 16px; height: 16px; }

.member-main .shared-features li::before { content: ""; display: inline-block; width: 12px; height: 12px; background: var(--accent); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M6 6h12v12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }