/* The page, "Night Vector" of DESIGN.md: dark only, every colour a token. The preview's sheet stays white, the lines black on it, as in the file. */ @font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2"); } :root { color-scheme: dark; --bg: #0b0d10; --surface: #111418; --card: #0f1216; --canvas: #0e1115; --rule: #1c2128; --divider: #222831; --frame: #1f252d; --card-line: #2a313b; --control-line: #6b737d; --dash: #5e6670; --dots: #20262e; --dots-light: #262c35; --text: #e8eaed; --muted: #9aa1aa; --faint: #7e8691; --accent: #6f9bff; --accent-hover: #a9c2ff; --accent-text: #0b1530; --accent-line: #2b3e66; --chosen: #16213a; --danger: #ff8a7a; --sheet: #ffffff; --ruler-ink: #5b626b; --ruler-tick: #b5bbc3; --radius: 8px; --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", Consolas, ui-monospace, monospace; --gutter: clamp(16px, 4vw, 40px); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } button, input, select { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::selection { background: var(--accent); color: var(--accent-text); } a { color: var(--accent); } a:hover { color: var(--accent-hover); } h2 { font: 400 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0 0 12px; } .muted { color: var(--muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .icon { width: 18px; height: 18px; flex: none; } summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } /* header: the name and Beta, the home page's sections, the account, EN / DE */ .top { border-bottom: 1px solid var(--rule); } .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; max-width: 1200px; margin: 0 auto; padding: 14px var(--gutter); } :is(body[data-state="working"], body[data-state="result"], body[data-state="fresh"]) .bar { max-width: none; padding: 10px clamp(16px, 3vw, 32px); } .name { display: flex; align-items: center; gap: 12px; } .brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; font-size: 19px; font-weight: 600; letter-spacing: -.01em; } .brand:hover { color: var(--text); } .mark { width: 26px; height: 26px; flex: none; } .badge { font: 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 999px; padding: 4px 8px; } .sections { display: flex; flex-wrap: wrap; gap: 0 28px; margin-left: auto; } :is(body[data-state="working"], body[data-state="result"], body[data-state="fresh"]) .sections { display: none; } .sections a, .lang a { display: inline-block; padding: 10px 0; color: var(--muted); text-decoration: none; } .sections a:hover, .lang a:hover, .lang a[aria-current] { color: var(--text); } .end { display: flex; align-items: center; gap: 18px; min-width: 0; margin-left: auto; } .sections + .end { margin-left: 0; } .lang { display: flex; gap: 12px; font: 13px var(--mono); } /* buttons */ .primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; background: var(--accent); color: var(--accent-text); border: 0; border-radius: var(--radius); padding: 0 24px; font-size: 16px; font-weight: 600; cursor: pointer; } .primary:hover { background: var(--accent-hover); } .go { width: auto; } .plain { min-height: 40px; border: 1px solid var(--control-line); background: transparent; border-radius: var(--radius); padding: 0 16px; cursor: pointer; } .plain:hover { border-color: var(--muted); } .link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 14px; min-height: 44px; } .link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; } button:disabled { opacity: .55; cursor: default; } .who { display: flex; align-items: center; gap: 8px; max-width: 260px; } .who-icon { display: none; width: 18px; height: 18px; flex: none; } #who-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who.in { font: 13px var(--mono); } .who.in::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--accent); } .seg { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--control-line); border-radius: var(--radius); } .seg button, .seg span { display: flex; align-items: center; min-height: 38px; border: 0; border-radius: 5px; background: transparent; padding: 0 16px; font-size: 14px; font-weight: 600; cursor: pointer; } .seg button[aria-pressed="true"], .seg input:checked + span { background: var(--accent); color: var(--accent-text); } .seg label { position: relative; } .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .seg.small span { padding: 0 14px; } /* the frames with accent corners: the drop area, the closing call, the waiting picture */ .frame { position: relative; border: 1px dashed var(--dash); border-radius: var(--radius); background: var(--card) radial-gradient(circle at 1px 1px, var(--dots-light) 1px, transparent 1.6px) 11px 11px / 24px 24px; } .corner { position: absolute; width: 24px; height: 24px; border: 0 solid var(--accent); } .corner.tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-top-left-radius: var(--radius); } .corner.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-top-right-radius: var(--radius); } .corner.bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-bottom-left-radius: var(--radius); } .corner.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-bottom-right-radius: var(--radius); } /* the home page: the hero with the drop area, then what it does, formats, prices, questions */ .home { font-size: 17px; line-height: 1.6; } .band { border-bottom: 1px solid var(--rule); } .band.last { border-bottom: 0; } .wrap { max-width: 1200px; margin: 0 auto; padding: 104px var(--gutter); } .hero .wrap { padding: 88px var(--gutter) 104px; } .split { display: flex; flex-wrap: wrap; align-items: center; gap: 56px 64px; } .split.top { align-items: flex-start; } .stack { display: flex; flex-direction: column; gap: 56px; } .pitch { flex: 1.1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 28px; } .pitch.narrow { flex: 1 1 360px; gap: 24px; } .titles { display: flex; flex-direction: column; gap: 20px; } .head-text { max-width: 760px; } .eyebrow { margin: 0; display: flex; align-items: center; gap: 10px; font: 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .eyebrow::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--accent); } h1 { margin: 0; font-size: clamp(48px, 5.4vw, 80px); line-height: .98; letter-spacing: -.045em; font-weight: 400; } .title { margin: 0; font: 400 clamp(34px, 4.2vw, 58px)/1.04 var(--sans); letter-spacing: -.035em; text-transform: none; color: var(--text); text-wrap: balance; } .lead { margin: 0; max-width: 30em; font-size: 19px; line-height: 1.55; color: var(--muted); } .head-text .lead { max-width: none; } .facts-row { margin: 0; padding-top: 24px; border-top: 1px solid var(--divider); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 16px 24px; } .facts-row div { display: flex; flex-direction: column; gap: 6px; } .facts-row dt, .specs dt { font: 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } .facts-row dd { margin: 0; font-size: 16px; line-height: 1.4; } .drop { flex: 1 1 460px; min-width: 0; padding: 40px 28px 32px; display: flex; flex-direction: column; align-items: center; gap: 32px; } .drop.over { border-color: var(--accent); background-color: var(--chosen); } .art { display: grid; grid-template-columns: minmax(0, 140px) 2px minmax(0, 140px); row-gap: 16px; justify-items: center; } .art svg { display: block; width: 100%; height: auto; } .beam { width: 2px; height: calc(100% + 28px); margin-top: -14px; background: var(--accent); box-shadow: 0 0 18px 1px rgb(111 155 255 / .55); } .cap { font: 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } body[data-state="error"] .art { display: none; } .ask { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .ask .big { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; } .note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; } .note.left { text-align: left; margin: 0 0 16px; font: 14px/1.5 var(--sans); } .error { width: 100%; border: 1px solid var(--danger); border-radius: var(--radius); background: var(--bg); padding: 14px 18px; font-size: 16px; } .error h2 { color: var(--danger); margin-bottom: 4px; } .error p { margin: 0; } .paused { width: 100%; margin: 0; border: 1px solid var(--accent-line); border-radius: var(--radius); background: var(--chosen); padding: 12px 16px; text-align: center; } .head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; } .head .titles { max-width: 720px; } .aside { margin: 0; max-width: 320px; color: var(--muted); } .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 48px 0; } .steps li { position: relative; border-top: 1px solid var(--card-line); padding: 32px 32px 0 0; display: flex; flex-direction: column; gap: 12px; } .steps li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--accent); } .steps .num { font-size: 13px; color: var(--faint); } h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; } .steps p, .kind-card p { margin: 0; font-size: 16px; color: var(--muted); } .ruled { padding-top: 20px; border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: 8px; } .ruled p { margin: 0; font-size: 16px; } .ruled .label { font: 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; } .card { border: 1px solid var(--divider); border-radius: var(--radius); background: var(--card); } .compare { flex: 1.25 1 480px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; } .compare figure { margin: 0; padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 16px; } .compare svg { display: block; width: 100%; height: auto; } .compare figcaption { display: flex; justify-content: space-between; gap: 12px; font: 12px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .compare .ours { border-color: var(--accent-line); } .compare .ours figcaption { color: var(--accent); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; } .kind-card { padding: 28px 24px 24px; min-height: 236px; display: flex; flex-direction: column; gap: 24px; } .kind-card svg { width: 48px; height: 48px; } .kind-card div { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } /* real results, before and after (job 6.7): app.js plays each video once it is in view */ .shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; } .shows figure { margin: 0; padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 12px; } .shows video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; background: var(--canvas); border-radius: 4px; } .shows figcaption { font: 12px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .tree { max-width: 360px; padding: 18px 22px; font-size: 14px; line-height: 2; color: var(--muted); } .tree .root { color: var(--text); } .specs { flex: 1.2 1 440px; min-width: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); border-top: 1px solid var(--divider); } .specs dt, .specs dd { padding: 16px 0; border-bottom: 1px solid var(--divider); line-height: 24px; } .specs dt { padding-right: 16px; } .specs dd { margin: 0; font: 15px/24px var(--mono); } .prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; } .price { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 28px; } .price.now { border-color: var(--accent); } .price-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .price-head h3 { font: 400 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .price.now .price-head h3 { color: var(--accent); } .price-head span { font-size: 12px; color: var(--muted); } .amount { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; color: var(--muted); } .euro { font-size: 64px; line-height: 1; letter-spacing: -.04em; color: var(--text); } .perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; } .perks li { display: flex; align-items: baseline; gap: 12px; } .perks li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--accent); transform: translateY(-2px); } .price .plain { align-self: flex-start; min-height: 44px; } .packs { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; } .price .muted { margin: 0; font-size: 16px; } .faq-head { flex: 1 1 300px; min-width: 0; } .faq-head .muted { margin: 0; } .faq { flex: 1.7 1 520px; min-width: 0; border-top: 1px solid var(--divider); } .faq details { border-bottom: 1px solid var(--divider); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 20px 0; font-size: 19px; line-height: 1.4; letter-spacing: -.01em; } .faq p { margin: 0 0 24px; max-width: 46em; font-size: 16px; color: var(--muted); } .plus { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform .2s ease; } .faq details[open] .plus { transform: rotate(45deg); } .cta { padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; } .cta-mark { width: 56px; height: 56px; } .cta .lead { max-width: 34em; } /* converting */ .working { max-width: 560px; margin: 0 auto; padding: 48px var(--gutter) 64px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .working .file { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; } .working .file svg { width: 16px; height: 16px; flex: none; } .working .frame { width: 100%; max-width: 480px; aspect-ratio: 6 / 5; display: flex; align-items: center; justify-content: center; margin: 8px 0; border-style: solid; border-color: var(--frame); } .working .frame svg { display: block; width: 66%; height: auto; } .working .tick { margin: 0; font-size: 15px; } .working .muted { margin: 0; } .progress { width: 240px; height: 2px; border-radius: 1px; background: var(--divider); overflow: hidden; } .progress span { display: block; width: 30%; height: 100%; background: var(--accent); animation: progress 1.6s linear infinite; } @keyframes progress { 0% { transform: translateX(-100%) } 100% { transform: translateX(340%) } } /* the result: the preview, the options */ .tool { display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px; padding: 24px clamp(16px, 3vw, 32px) 32px; } .stage { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; } .toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .zoom { display: flex; align-items: center; gap: 6px; } .zoom button { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--control-line); background: transparent; border-radius: var(--radius); padding: 0 16px; font-size: 14px; cursor: pointer; } .zoom .square { width: 44px; padding: 0; } .zoom svg { width: 18px; height: 18px; } .zoom output { min-width: 64px; text-align: center; font-size: 14px; } .canvas { position: relative; height: min(72vh, 760px); min-height: 320px; overflow: hidden; border: 1px solid var(--frame); border-radius: var(--radius); background: var(--canvas) radial-gradient(circle at 1px 1px, var(--dots) 1px, transparent 1.6px) 0 0 / 24px 24px; cursor: grab; touch-action: none; user-select: none; } .canvas.panning { cursor: grabbing; } .canvas.picking { cursor: crosshair; } .view { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: var(--sheet); } .view img { display: block; max-width: none; } /* the rulers in mm, on the sheet, their size on screen kept at any zoom (--s, app.js) */ .ruler { position: absolute; background: var(--sheet); } .ruler.x { left: 0; right: 0; bottom: 100%; height: calc(22px / var(--s, 1)); } .ruler.y { top: 0; bottom: 0; right: 100%; width: calc(22px / var(--s, 1)); } .ruler.x::before { content: "mm"; position: absolute; right: 100%; bottom: 0; width: calc(22px / var(--s, 1)); height: calc(22px / var(--s, 1)); background: var(--sheet); color: var(--ruler-ink); font: calc(10px / var(--s, 1)) / calc(22px / var(--s, 1)) var(--mono); text-align: center; } .ruler .tick { position: absolute; background: var(--ruler-tick); } .ruler.x .tick { bottom: 0; width: calc(1px / var(--s, 1)); height: calc(4px / var(--s, 1)); } .ruler.y .tick { right: 0; height: calc(1px / var(--s, 1)); width: calc(4px / var(--s, 1)); } .ruler.x .major { height: calc(8px / var(--s, 1)); } .ruler.y .major { width: calc(8px / var(--s, 1)); } .major::after { content: attr(data-mm); position: absolute; color: var(--ruler-ink); white-space: nowrap; font: calc(10px / var(--s, 1)) / 1 var(--mono); } .ruler.x .major::after { bottom: calc(10px / var(--s, 1)); left: 0; transform: translateX(-50%); } .ruler.x .major:first-child::after { transform: none; } .ruler.y .major::after { right: calc(11px / var(--s, 1)); top: 0; transform: translate(50%, -50%) rotate(-90deg); } .point { position: absolute; width: 11px; height: 11px; border: 2px solid var(--accent); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(calc(1 / var(--s, 1))); } .busy { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--radius); box-shadow: 0 12px 32px rgb(0 0 0 / .45); padding: 10px 14px 8px; font-size: 13px; text-align: center; } .busy .waiting svg { display: block; width: 96px; height: 96px; margin: 0 auto 6px; } .busy p { margin: 0; } .canvas.dim img { opacity: .45; } .facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; } .facts p { margin: 0; font-size: 13px; color: var(--muted); } /* "New picture" (job 6.6): the drop area in the preview's place, the recent conversions beside */ body[data-state="fresh"] :is(.toolbar, .canvas, .facts, #options) { display: none; } #fresh { flex: none; height: min(72vh, 760px); min-height: 320px; justify-content: center; } #recent { gap: 12px; } #recent .paid { font: 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .panel { flex: 1 1 380px; max-width: 440px; min-width: 0; margin: 0; padding: 20px; background: var(--surface); border: 1px solid var(--frame); border-radius: var(--radius); display: flex; flex-direction: column; gap: 24px; } .panel > * { margin-top: 0; margin-bottom: 0; } .alert { color: var(--danger); margin: 0; font-size: 14px; } .kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kind { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--card); cursor: pointer; } .kind:has(input:checked) { border-color: var(--accent); background: var(--chosen); } .kind-head { display: flex; align-items: center; gap: 10px; } .kind input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); } .kind b { font-weight: 600; } .kind small { padding-left: 26px; font-size: 13px; line-height: 1.4; color: var(--muted); } .kind em { margin-left: auto; font: 10px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-align: right; } .size { display: flex; flex-direction: column; gap: 6px; } .size h2 { margin-bottom: 6px; } .lbl, .field label { font-size: 14px; } .size .lbl { font-size: 13px; color: var(--muted); } .size-row { display: flex; align-items: center; gap: 12px; } .size-row .muted { flex: none; font-size: 13px; } .field { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .field.col { flex-direction: column; align-items: stretch; gap: 8px; } .between { display: flex; align-items: center; justify-content: space-between; } fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; } fieldset.field legend { float: left; } .unit { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--control-line); border-radius: var(--radius); background: var(--bg); } .unit.grow { flex: 1 1 auto; min-width: 0; } .unit:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .unit input { flex: 1 1 auto; min-width: 0; width: 90px; border: 0; background: transparent; padding: 0; font-size: 15px; text-align: right; outline: none; } .unit input[aria-invalid="true"] { color: var(--danger); } .unit span { padding-left: 8px; color: var(--muted); font: 14px var(--mono); } .invalid { color: var(--danger); font-size: 13px; margin: 0; } .pick { align-self: flex-start; display: flex; align-items: center; gap: 8px; } .pick svg { width: 18px; height: 18px; flex: none; } .range output, #detail-value { font-size: 13px; color: var(--muted); } input[type="range"] { width: 100%; height: 24px; margin: 0; accent-color: var(--accent); cursor: pointer; } .check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14px; cursor: pointer; } .check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); } .measure { display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .measure p { margin: 0; } .row { display: flex; gap: 8px; justify-content: flex-end; } details#more { border-top: 1px solid var(--divider); } #more summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font: 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } #more[open] { display: flex; flex-direction: column; gap: 18px; } #more[open] summary { margin-bottom: -14px; } .chev { width: 18px; height: 18px; flex: none; transition: transform .2s ease; } details[open] .chev { transform: rotate(180deg); } .layers { list-style: none; padding: 0; margin: 0; font-size: 13px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .layers li { display: flex; align-items: center; gap: 10px; } .layers .name { flex: 1; overflow-wrap: anywhere; font-family: var(--mono); color: var(--muted); } .layers .num { color: var(--muted); min-width: 48px; text-align: right; } .swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; } .buy { margin-top: auto !important; display: flex; flex-direction: column; gap: 10px; } .buy .primary { width: 100%; } /* the account (job 5.4): the header's button and one dialog of panes */ .account { width: min(400px, calc(100vw - 32px)); border: 1px solid var(--frame); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 18px 20px 20px; } .account::backdrop { background: rgb(0 0 0 / .6); } .account-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; } .account-head h2 { margin: 0; font: 600 17px/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: var(--text); } .close { background: none; border: 0; border-radius: var(--radius); color: var(--muted); font-size: 22px; line-height: 1; min-width: 44px; min-height: 44px; cursor: pointer; } .account > .note, .account > .alert { margin: 0 0 12px; } .pane p { margin: 0 0 10px; } .pane label { display: block; font-size: 14px; margin: 14px 0 4px; } .pane input { width: 100%; min-height: 44px; border: 1px solid var(--control-line); border-radius: var(--radius); background: var(--bg); padding: 0 12px; } .pane .primary { margin-top: 18px; } :is(.pane, #recent) .hint { color: var(--muted); font-size: 13px; margin: 4px 0 0; } .pane .links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; margin: 8px 0 0; } .pane details { margin-top: 18px; border-top: 1px solid var(--divider); padding-top: 12px; } .pane summary { font-weight: 600; font-size: 14px; } .wide { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; text-decoration: none; color: var(--text); } .or { text-align: center; color: var(--muted); font-size: 13px; margin: 10px 0 -4px !important; } .account .email { font-weight: 600; overflow-wrap: anywhere; } .pane .accept { margin-top: 12px; } /* the panel (job 5.5): credits, the last 24 hours' downloads */ .pane .credits { margin: 0 0 2px; } .pane h3 { font-size: 14px; margin: 18px 0 6px; } .downloads { list-style: none; margin: 0 0 6px; padding: 0; } .downloads li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--divider); font-size: 14px; } .downloads .file { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .downloads .when { color: var(--muted); font-size: 13px; } .downloads .plain { font-size: 13px; padding: 0 10px; min-height: 36px; } #view-me > .plain { margin-top: 12px; } .danger { background: var(--danger); color: var(--bg); border: 0; border-radius: var(--radius); min-height: 44px; padding: 0 16px; font-weight: 600; cursor: pointer; } /* a phone: the preview on top, the options below; 16 px margins */ @media (max-width: 760px) { .bar, :is(body[data-state="working"], body[data-state="result"], body[data-state="fresh"]) .bar { padding: 6px 16px; gap: 0 10px; } .end { order: 2; gap: 14px; } .sections { order: 3; width: 100%; margin-left: 0; gap: 0 20px; font-size: 15px; } .brand { font-size: 18px; } .mark { width: 24px; height: 24px; } .badge { font-size: 10px; padding: 4px 7px; } .who { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; } .who.in::before { display: none; } .who-icon { display: block; } #who-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .wrap { padding: 64px 16px; } .hero .wrap { padding: 48px 16px 64px; } .drop { padding: 32px 16px 24px; } .art { grid-template-columns: minmax(0, 120px) 2px minmax(0, 120px); } .steps li { padding-right: 0; } .tool { padding: 16px 16px 28px; gap: 16px; } .canvas, #fresh { height: clamp(300px, 55vh, 420px); } .panel { max-width: none; padding: 16px; gap: 22px; } .zoom output { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* The waiting animation, node to node (DESIGN.md → Brand): the