:root {
  --ink: #080c12;
  --ink-soft: #0d131c;
  --panel: rgba(15, 23, 33, 0.84);
  --panel-strong: #111c28;
  --line: rgba(145, 172, 198, 0.16);
  --line-strong: rgba(145, 172, 198, 0.28);
  --text: #e9f1f7;
  --muted: #8495a8;
  --cyan: #65e4e4;
  --blue: #4d8bff;
  --lime: #c7ff75;
  --danger: #ff8495;
  --radius: 22px;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.26);
}

[hidden] { display: none !important; }
.file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--ink); font-family: "DM Sans", sans-serif; line-height: 1.5; overflow-x: hidden; }
button, input, select { font: inherit; }
button, a, select, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; z-index: 10; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
body::before { content: ""; position: fixed; width: 700px; height: 600px; left: -240px; top: -300px; background: radial-gradient(circle, rgba(69, 118, 255, .2), transparent 68%); pointer-events: none; }
body::after { content: ""; position: fixed; width: 600px; height: 500px; right: -260px; top: 500px; background: radial-gradient(circle, rgba(101, 228, 228, .1), transparent 70%); pointer-events: none; }
.site-header, main, .site-footer { position: relative; z-index: 1; }
.site-header { max-width: 1240px; margin: auto; padding: 26px 32px; display: flex; justify-content: space-between; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.03em; }
.brand-mark { width: 29px; height: 29px; display: inline-flex; align-items: end; gap: 3px; padding: 5px; border: 1px solid rgba(101, 228, 228, .55); border-radius: 9px 4px 9px 4px; transform: rotate(-8deg); background: linear-gradient(145deg, rgba(101,228,228,.16), rgba(77,139,255,.15)); box-shadow: inset 0 0 15px rgba(101, 228, 228, .1); }
.brand-mark span { width: 4px; border-radius: 3px; background: linear-gradient(180deg, var(--cyan), var(--blue)); transform: skewX(-18deg); }
.brand-mark span:nth-child(1) { height: 9px; opacity: .55; }.brand-mark span:nth-child(2) { height: 15px; }.brand-mark span:nth-child(3) { height: 20px; opacity: .75; }
.brand-name { font-size: 14px; letter-spacing: .08em; }.brand-name em { color: var(--muted); font-size: 10px; font-style: normal; letter-spacing: .12em; margin-left: 5px; }
.top-nav { display: flex; align-items: center; gap: 29px; font-size: 12px; color: var(--muted); }.top-nav a { transition: color .2s ease; }.top-nav a:hover { color: var(--text); }.privacy-chip { color: var(--cyan); border: 1px solid rgba(101,228,228,.19); border-radius: 100px; padding: 7px 11px; background: rgba(101,228,228,.05); font-size: 11px; }.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); margin-right: 5px; }
main { max-width: 1240px; margin: auto; padding: 0 32px 100px; }.hero { min-height: 510px; display: grid; grid-template-columns: minmax(0, 1fr) 480px; align-items: center; gap: 60px; padding: 40px 0 50px; }.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--cyan); text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .19em; margin: 0 0 17px; }.eyebrow-line { width: 27px; height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }.hero h1 { max-width: 700px; margin: 0; font: 700 clamp(46px, 6.2vw, 86px)/.96 "Space Grotesk", sans-serif; letter-spacing: -.075em; }.hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(233,241,247,.7); }.hero-lede { max-width: 495px; color: var(--muted); font-size: 15px; line-height: 1.7; margin: 26px 0 0; }.hero-meta { display: flex; gap: 34px; margin-top: 38px; }.hero-meta div { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line-strong); padding-left: 13px; }.hero-meta strong { font: 700 21px "Space Grotesk", sans-serif; color: var(--text); }.hero-meta span { color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.hero-orbit { position: relative; width: 410px; height: 410px; justify-self: center; }.orbit-ring { position: absolute; border: 1px solid rgba(101,228,228,.2); border-radius: 50%; inset: 52px; transform: rotate(-24deg) skewY(11deg); }.ring-one { inset: 17px; border-color: rgba(77,139,255,.22); animation: spin 24s linear infinite; }.ring-two { inset: 68px; border-color: rgba(101,228,228,.25); transform: rotate(40deg) skewY(-13deg); animation: spin-reverse 16s linear infinite; }.ring-three { inset: 120px; border-style: dashed; opacity: .5; animation: spin 11s linear infinite; }.orbit-core { position: absolute; inset: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 45% 55% 48% 52%; background: radial-gradient(circle at 40% 30%, rgba(101,228,228,.27), rgba(35,57,87,.35) 47%, rgba(5,8,14,.9)); border: 1px solid rgba(101,228,228,.48); box-shadow: 0 0 55px rgba(101,228,228,.16), inset 0 0 32px rgba(101,228,228,.15); transform: rotate(-12deg); animation: float 5s ease-in-out infinite; }.orbit-core span { transform: rotate(12deg); }.core-icon { color: var(--cyan); font-size: 33px; font-weight: 400; line-height: 1; }.orbit-core span:last-child { font: 700 10px "Space Grotesk", sans-serif; color: var(--muted); letter-spacing: .2em; margin-top: 8px; }.orbit-label { position: absolute; display: grid; place-items: center; width: 47px; height: 47px; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(8,12,18,.78); color: var(--muted); font: 600 10px "Space Grotesk", sans-serif; letter-spacing: .09em; box-shadow: 0 7px 20px rgba(0,0,0,.25); }.label-one { right: 17px; top: 80px; color: var(--cyan); }.label-two { left: 22px; bottom: 73px; color: #93afff; }.label-three { right: 72px; bottom: 5px; color: var(--lime); border-color: rgba(199,255,117,.35); font-size: 8px; }
@keyframes spin { to { transform: rotate(336deg) skewY(11deg); } } @keyframes spin-reverse { to { transform: rotate(-320deg) skewY(-13deg); } } @keyframes float { 50% { transform: rotate(-6deg) translateY(-9px); } }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 25px; }.section-heading h2 { font: 600 31px/1.1 "Space Grotesk", sans-serif; letter-spacing: -.045em; margin: 0; }.workspace-note { margin: 0 0 4px; color: var(--muted); font-size: 12px; }.lock-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border: 1px solid rgba(199,255,117,.35); border-radius: 50%; color: var(--lime); }
.app-shell { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 18px; align-items: start; }.main-column { min-width: 0; display: grid; gap: 18px; }.panel-card, .upload-card { border: 1px solid var(--line); background: linear-gradient(135deg, rgba(21,31,43,.86), rgba(11,17,25,.94)); border-radius: var(--radius); box-shadow: var(--shadow); }.upload-card { position: relative; min-height: 187px; padding: 30px 35px; display: flex; align-items: center; gap: 25px; border-style: dashed; overflow: hidden; transition: border-color .25s ease, background .25s ease, transform .25s ease; }.upload-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 12% 50%, rgba(101,228,228,.1), transparent 34%); pointer-events: none; }.upload-card.is-dragging { border-color: var(--cyan); background: rgba(38,66,82,.55); transform: translateY(-2px); }.upload-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }.upload-visual { position: relative; flex: 0 0 66px; width: 66px; height: 66px; display: grid; place-items: center; border: 1px solid rgba(101,228,228,.35); border-radius: 19px 7px 19px 7px; color: var(--cyan); background: rgba(101,228,228,.07); box-shadow: inset 0 0 22px rgba(101,228,228,.07); transform: rotate(-7deg); }.upload-arrow { font: 400 34px/1 "Space Grotesk"; transform: rotate(7deg) translateY(-3px); }.upload-copy { position: relative; }.upload-copy h3 { margin: 0 0 3px; font: 600 19px "Space Grotesk", sans-serif; letter-spacing: -.03em; }.upload-copy p { margin: 0; color: var(--muted); font-size: 13px; }.upload-copy small { display: block; margin-top: 14px; color: #607286; font-size: 10px; letter-spacing: .04em; }.inline-button, .text-button { border: 0; padding: 0; background: none; color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.inline-button { position: relative; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; margin: 0 2px; padding: 7px 12px; border: 1px solid rgba(176, 250, 255, .9); border-radius: 7px; color: #06131d; background: linear-gradient(135deg, #b9fbff 0%, #73e9f2 48%, #8dbdff 100%); box-shadow: 0 0 0 1px rgba(101, 228, 228, .16), 0 5px 18px rgba(101, 228, 228, .28), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 5px rgba(46, 128, 190, .22); font-size: 11px; font-weight: 700; text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,.45); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.inline-button::after { content: ""; position: absolute; top: -60%; left: -42%; width: 28%; height: 220%; transform: rotate(22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent); animation: browse-shine 3.2s ease-in-out infinite; pointer-events: none; }
.inline-button:hover { color: #04101a; filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(176,250,255,.35), 0 8px 24px rgba(101,228,228,.4), inset 0 1px 0 rgba(255,255,255,.95); }
.inline-button:focus-visible { outline: 2px solid #d8feff; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(101,228,228,.22), 0 8px 24px rgba(101,228,228,.4); }
@keyframes browse-shine { 0%, 28% { left: -42%; opacity: 0; } 40% { opacity: 1; } 64%, 100% { left: 125%; opacity: 0; } }.upload-corner { position: absolute; right: 27px; top: 20px; color: rgba(101,228,228,.5); font-size: 25px; font-weight: 200; }
.gallery-card { min-height: 286px; padding: 23px 25px 17px; }.card-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }.card-kicker { display: block; color: #62788b; font: 600 9px "Space Grotesk", sans-serif; letter-spacing: .18em; margin-bottom: 7px; }.card-heading h3 { margin: 0; font: 600 17px "Space Grotesk", sans-serif; letter-spacing: -.03em; }.count-pill { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; margin-left: 5px; border-radius: 20px; background: rgba(101,228,228,.13); color: var(--cyan); font-size: 10px; vertical-align: 2px; }.text-button { color: var(--muted); font-size: 11px; text-decoration: none; transition: color .2s; }.text-button:not(:disabled):hover { color: var(--danger); }.text-button:disabled { opacity: .4; cursor: not-allowed; }.gallery { min-height: 175px; padding: 18px 0 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 11px; }.empty-gallery { grid-column: 1/-1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 150px; border: 1px dashed rgba(145,172,198,.15); border-radius: 13px; color: var(--muted); text-align: center; }.empty-icon { color: rgba(101,228,228,.55); font-size: 28px; margin-bottom: 7px; }.empty-gallery p { margin: 0; font-size: 12px; }.empty-gallery span { margin-top: 3px; color: #596a7b; font-size: 10px; }.gallery-hint { margin: 5px 0 0; color: #5d7284; font-size: 10px; }.gallery-hint span { color: var(--cyan); font-size: 14px; margin-right: 5px; }
.image-card { position: relative; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 15px; background: rgba(6,10,16,.55); transition: border-color .2s, transform .2s, opacity .2s; }.image-card:hover { border-color: rgba(101,228,228,.4); }.image-card.is-dragging { opacity: .45; transform: scale(.98); }.image-preview { position: relative; height: 100px; overflow: hidden; border-radius: 9px; background: #0a1017; }.image-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }.image-index { position: absolute; left: 7px; top: 6px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 6px; color: var(--ink); background: var(--cyan); font: 700 10px "Space Grotesk"; }.remove-image { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 1px solid rgba(255,255,255,.17); border-radius: 7px; color: white; background: rgba(0,0,0,.55); font-size: 14px; line-height: 1; }.remove-image:hover { background: var(--danger); border-color: var(--danger); }.image-info { padding: 9px 3px 2px; }.image-name { display: block; max-width: 100%; overflow: hidden; color: var(--text); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.image-size { display: block; margin-top: 2px; color: #65798b; font-size: 9px; }.card-reorder { display: flex; gap: 4px; margin-top: 8px; }.reorder-button { flex: 1; padding: 3px 0; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: transparent; font-size: 11px; }.reorder-button:hover:not(:disabled) { color: var(--cyan); border-color: rgba(101,228,228,.45); }.reorder-button:disabled { opacity: .25; cursor: default; }
.settings-column { padding: 23px 25px 25px; }.settings-badge { border: 1px solid rgba(199,255,117,.3); border-radius: 5px; padding: 4px 6px; color: var(--lime); font: 700 8px "Space Grotesk"; letter-spacing: .14em; }.setting-group { margin-top: 24px; }.setting-label, .field span { display: block; color: #8799a9; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }.segmented-control { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5,9,14,.48); }.segment-option input, .background-option input { position: absolute; opacity: 0; pointer-events: none; }.segment-option span { display: block; padding: 9px 8px; border-radius: 7px; color: var(--muted); font-size: 10px; text-align: center; cursor: pointer; transition: .2s; }.segment-option input:checked + span { color: var(--text); background: linear-gradient(135deg, rgba(101,228,228,.17), rgba(77,139,255,.15)); box-shadow: 0 0 0 1px rgba(101,228,228,.2); }.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 10px; margin-top: 24px; }.field select { width: 100%; margin-top: 7px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: #101923; font-size: 11px; outline: none; }.field select:focus, .input-with-suffix:focus-within, #background-color:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(101,228,228,.1); }.input-with-suffix { display: flex; align-items: center; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; background: #101923; color: #63788b; transition: .2s; }.input-with-suffix input { width: 100%; min-width: 0; padding: 10px 11px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 11px; }.input-with-suffix span { padding-right: 11px; color: var(--muted); font: 500 10px "Space Grotesk"; }.background-options { display: flex; align-items: center; gap: 15px; margin-top: 11px; }.background-option { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; cursor: pointer; }.swatch { display: inline-block; width: 16px; height: 16px; border: 2px solid transparent; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }.swatch-white { background: #fff; }.swatch-custom { background: conic-gradient(#ff8181, #ffd461, #8ce68a, #72dfff, #a98aff, #ff8181); }.background-option input:checked + .swatch { box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--cyan); }.color-input { width: 22px; height: 22px; margin-left: auto; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: transparent; cursor: pointer; }.color-input::-webkit-color-swatch-wrapper { padding: 2px; }.color-input::-webkit-color-swatch { border: 0; border-radius: 4px; }.settings-divider { height: 1px; margin: 25px 0 18px; background: var(--line); }.primary-button { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; border: 1px solid var(--cyan); border-radius: 10px; color: var(--ink); background: var(--cyan); box-shadow: 0 8px 26px rgba(101,228,228,.14); font: 700 12px "Space Grotesk"; transition: .22s; }.primary-button:hover:not(:disabled) { background: #a0ffff; box-shadow: 0 11px 35px rgba(101,228,228,.24); transform: translateY(-1px); }.primary-button:disabled { opacity: .55; cursor: wait; }.button-icon { font-size: 16px; }.button-arrow { font-size: 18px; }.progress-wrap { margin-top: 17px; }.progress-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }.progress-meta strong { color: var(--cyan); font: 600 10px "Space Grotesk"; }.progress-track { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 5px; background: rgba(145,172,198,.12); }.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 10px var(--cyan); transition: width .25s ease; }.message-box { margin-top: 14px; padding: 10px 12px; border-radius: 8px; font-size: 11px; }.error-message { border: 1px solid rgba(255,132,149,.27); color: #ffb1bd; background: rgba(255,132,149,.07); }
.success-card { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 18px 21px; border: 1px solid rgba(199,255,117,.28); border-radius: var(--radius); background: linear-gradient(105deg, rgba(199,255,117,.08), rgba(15,23,33,.9) 42%); animation: slide-in .35s ease both; }.success-mark { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; color: var(--ink); background: var(--lime); font-weight: 700; box-shadow: 0 0 20px rgba(199,255,117,.2); }.success-copy { flex: 1; min-width: 180px; }.success-copy .card-kicker { color: var(--lime); }.success-copy h3 { margin: 0; font: 600 16px "Space Grotesk"; }.success-copy p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }.download-list { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }.download-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 11px; border: 1px solid rgba(199,255,117,.35); border-radius: 8px; color: var(--lime); background: rgba(199,255,117,.07); font: 600 10px "Space Grotesk"; white-space: nowrap; }.download-link:hover { background: rgba(199,255,117,.15); }.download-link small { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.how-it-works { padding-top: 105px; }.compact-heading { margin-bottom: 25px; }.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.step-card { position: relative; min-height: 210px; padding: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(14,22,31,.58); }.step-card::after { content: ""; position: absolute; width: 120px; height: 120px; right: -50px; bottom: -55px; border: 1px solid rgba(101,228,228,.15); border-radius: 50%; }.step-number { color: #5b7084; font: 600 10px "Space Grotesk"; letter-spacing: .15em; }.step-icon { margin: 19px 0 17px; color: var(--cyan); font: 25px/1 "Space Grotesk"; }.step-card h3 { margin: 0; font: 600 17px "Space Grotesk"; }.step-card p { max-width: 280px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.privacy-panel { display: flex; align-items: center; gap: 15px; margin-top: 15px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 15px; background: rgba(12,19,28,.7); }.privacy-panel-icon { display: grid; place-items: center; flex: 0 0 31px; height: 31px; border: 1px solid rgba(199,255,117,.35); border-radius: 50%; color: var(--lime); }.privacy-panel strong { font: 600 13px "Space Grotesk"; }.privacy-panel p { display: inline; margin: 0 0 0 8px; color: var(--muted); font-size: 11px; }.privacy-code { margin-left: auto; color: #5f7788; font: 9px "Space Grotesk"; letter-spacing: .12em; white-space: nowrap; }.site-footer { max-width: 1240px; margin: auto; padding: 25px 32px 35px; display: flex; align-items: center; gap: 25px; border-top: 1px solid var(--line); color: #5f7282; font-size: 10px; }.footer-brand { margin-right: auto; opacity: .85; }.footer-brand .brand-name { font-size: 12px; }.footer-brand .brand-name em { font-size: 9px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 20; max-width: 330px; padding: 12px 15px; border: 1px solid rgba(101,228,228,.25); border-radius: 10px; color: var(--text); background: #101b27; box-shadow: var(--shadow); font-size: 12px; transform: translateY(18px); opacity: 0; pointer-events: none; transition: .25s; }.toast.show { transform: translateY(0); opacity: 1; }.toast.toast-error { border-color: rgba(255,132,149,.35); }
@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 980px) { .hero { grid-template-columns: minmax(0, 1fr) 330px; gap: 25px; }.hero-orbit { width: 320px; height: 320px; }.orbit-core { inset: 110px; }.ring-one { inset: 10px; }.ring-two { inset: 53px; }.ring-three { inset: 94px; }.hero h1 { font-size: clamp(46px, 7vw, 72px); }.app-shell { grid-template-columns: minmax(0, 1fr); }.settings-column { max-width: none; } }
@media (max-width: 680px) { .site-header { padding: 20px 18px; }.top-nav a { display: none; }.privacy-chip { font-size: 10px; }.brand-name { font-size: 12px; }.brand-name em { font-size: 8px; } main { padding: 0 18px 72px; }.hero { min-height: 0; grid-template-columns: 1fr; padding: 50px 0 54px; }.hero-orbit { width: 270px; height: 270px; margin: 16px auto 0; }.orbit-core { inset: 94px; }.ring-one { inset: 6px; }.ring-two { inset: 43px; }.ring-three { inset: 76px; }.label-one { right: 0; top: 42px; }.label-two { left: 0; bottom: 43px; }.label-three { right: 43px; bottom: 0; }.hero-lede { font-size: 14px; }.hero-meta { gap: 19px; margin-top: 29px; }.hero-meta strong { font-size: 17px; }.hero-meta span { font-size: 8px; }.section-heading { align-items: start; flex-direction: column; gap: 13px; }.section-heading h2 { font-size: 27px; }.workspace-note { margin: 0; }.upload-card { min-height: 166px; padding: 24px 20px; gap: 16px; }.upload-visual { flex-basis: 51px; width: 51px; height: 51px; }.upload-arrow { font-size: 27px; }.upload-copy h3 { font-size: 16px; }.upload-copy small { font-size: 9px; }.upload-corner { right: 17px; }.gallery-card, .settings-column { padding: 20px 17px 17px; }.gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }.image-preview { height: 88px; }.settings-grid { gap: 13px 8px; }.success-card { align-items: start; flex-wrap: wrap; }.download-list { width: 100%; justify-content: start; }.steps-grid { grid-template-columns: 1fr; }.step-card { min-height: auto; padding: 21px; }.privacy-panel { align-items: start; flex-wrap: wrap; }.privacy-panel p { display: block; margin: 5px 0 0; }.privacy-code { width: 100%; margin-left: 46px; }.site-footer { flex-wrap: wrap; padding: 22px 18px 28px; gap: 9px 18px; }.footer-brand { width: 100%; }.footer-brand + p { margin-right: auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }