:root{ --bg0:#070A12; --bg1:#0B1224; --card:rgba(255,255,255,.08); --card2:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.14); --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.70); --muted2:rgba(255,255,255,.55); --shadow: 0 30px 80px rgba(0,0,0,.55); --shadow2: 0 16px 40px rgba(0,0,0,.45); --radius: 22px; --radius2: 16px; --pad: clamp(16px, 2.6vw, 28px); --max: 1100px; --accentA: #7C5CFF; --accentB: #2FE6FF; --accentC: #00FFA8; --focus: rgba(47,230,255,.65); --ease: cubic-bezier(.2,.9,.2,1); } *{ box-sizing:border-box; } html, body{ height:100%; } body{ margin:0; color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: radial-gradient(1200px 700px at 20% 10%, rgba(124,92,255,.18), transparent 60%), radial-gradient(900px 600px at 85% 15%, rgba(47,230,255,.14), transparent 60%), radial-gradient(900px 700px at 40% 95%, rgba(0,255,168,.12), transparent 60%), linear-gradient(180deg, var(--bg0), var(--bg1)); overflow-x:hidden; } /* Theme switching (OpenAI can return theme in deck spec) */ body.theme-apple-dark{ color-scheme: dark; } body.theme-apple-light{ color-scheme: light; --bg0:#F6F7FB; --bg1:#EEF2FF; --text:rgba(10,12,18,.92); --muted:rgba(10,12,18,.72); --muted2:rgba(10,12,18,.55); --stroke:rgba(10,12,18,.12); background: radial-gradient(1200px 700px at 20% 10%, rgba(124,92,255,.10), transparent 60%), radial-gradient(900px 600px at 85% 15%, rgba(47,230,255,.09), transparent 60%), radial-gradient(900px 700px at 40% 95%, rgba(0,255,168,.08), transparent 60%), linear-gradient(180deg, var(--bg0), var(--bg1)); } body.theme-midnight-neon{ color-scheme: dark; --bg0:#050610; --bg1:#070A18; --stroke:rgba(255,255,255,.16); } .skip-link{ position:absolute; left:12px; top:12px; padding:10px 12px; border-radius:999px; border:1px solid var(--stroke); background: rgba(0,0,0,.6); color:var(--text); text-decoration:none; transform: translateY(-160%); transition: transform .25s var(--ease); z-index:9999; } .skip-link:focus{ transform: translateY(0); outline:none; box-shadow: 0 0 0 3px var(--focus); } /* Background layer must sit above the canvas/background of , otherwise custom uploads won't be visible. */ .bg{ position:fixed; inset:0; pointer-events:none; z-index:0; } .bg__custom{ position:absolute; inset:0; z-index: 1; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; opacity: 0; transition: opacity 360ms var(--ease); } .bg__custom.is-on{ opacity: 1; } .bg::before{ content:""; position:absolute; inset:0; /* Custom/preset background image layer */ z-index:1; background-image: var(--bgCustom, none), var(--bgPreset, none); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; opacity: var(--bgOpacity, 1); filter: saturate(1.05) contrast(1.05); } .bg__glow{ position:absolute; filter: blur(60px); opacity:.9; transform: translate3d(0,0,0); /* Glow blobs sit behind uploaded/custom images */ z-index:0; } .bg__glow--a{ width:520px; height:520px; left:-140px; top:-160px; background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.78), transparent 60%); } .bg__glow--b{ width:520px; height:520px; right:-180px; top:-120px; background: radial-gradient(circle at 60% 40%, rgba(47,230,255,.66), transparent 60%); } .bg__glow--c{ width:620px; height:620px; left:10%; bottom:-220px; background: radial-gradient(circle at 40% 60%, rgba(0,255,168,.55), transparent 60%); } .bg__grain{ position:absolute; inset:0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity:.22; z-index:2; } /* Background presets (full screen, responsive) */ body{ --bgPreset: none; --bgCustom: none; --bgOpacity: 1; } body[data-bg="default"]{ --bgPreset: none; } body[data-bg="aurora"]{ --bgPreset: radial-gradient(900px 600px at 15% 20%, rgba(124,92,255,.28), transparent 60%), radial-gradient(800px 520px at 85% 25%, rgba(47,230,255,.22), transparent 60%), radial-gradient(900px 680px at 40% 95%, rgba(0,255,168,.18), transparent 62%), linear-gradient(180deg, rgba(6,10,22,.92), rgba(8,12,28,.92)); --bgOpacity: 1; } body[data-bg="nebula"]{ --bgPreset: radial-gradient(900px 640px at 20% 20%, rgba(255,84,222,.20), transparent 60%), radial-gradient(900px 640px at 80% 30%, rgba(77,106,255,.22), transparent 62%), radial-gradient(900px 740px at 50% 95%, rgba(47,230,255,.12), transparent 62%), linear-gradient(180deg, rgba(6,8,18,.95), rgba(10,6,24,.95)); } body[data-bg="sunset"]{ --bgPreset: radial-gradient(900px 680px at 20% 20%, rgba(255,122,48,.18), transparent 62%), radial-gradient(900px 680px at 80% 30%, rgba(255,77,160,.16), transparent 62%), radial-gradient(900px 760px at 55% 95%, rgba(124,92,255,.14), transparent 62%), linear-gradient(180deg, rgba(10,10,18,.96), rgba(18,8,10,.96)); } body[data-bg="mono"]{ --bgPreset: radial-gradient(900px 680px at 20% 20%, rgba(255,255,255,.08), transparent 62%), radial-gradient(900px 680px at 80% 30%, rgba(255,255,255,.06), transparent 62%), linear-gradient(180deg, rgba(6,8,14,.96), rgba(10,12,18,.96)); --bgOpacity: 1; } /* When a custom image is set, turn down the glow/grain so the image is visible. */ body[data-bg-custom="1"] .bg__glow{ opacity: .35; } body[data-bg-custom="1"] .bg__grain{ opacity: .14; } .topbar{ position: sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center; gap:12px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: linear-gradient(180deg, rgba(8,10,18,.84), rgba(8,10,18,.45)); border-bottom:1px solid rgba(255,255,255,.08); } .topbar__left{ display:flex; align-items:center; gap:12px; min-width: 0; } .topbar__right{ display:flex; align-items:center; gap:10px; } .topbar__logo{ height: 28px; width: auto; max-width: 160px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); padding: 4px 6px; } .mark{ width:12px; height:12px; border-radius:999px; background: linear-gradient(135deg, var(--accentA), var(--accentB)); box-shadow: 0 0 0 4px rgba(255,255,255,.05); } .topbar__brand{ min-width:0; } .topbar__name{ font-weight:650; letter-spacing:-.02em; line-height:1.1; } .topbar__sub{ font-size:12px; color:var(--muted2); margin-top:2px; } .topbar__right{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; } .topbar__user{ display:flex; align-items:center; gap:10px; } .topbar__avatar{ width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); object-fit: cover; background: rgba(255,255,255,.08); } .chip{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color: var(--muted); } .deck{ padding: 18px 16px max(16px, env(safe-area-inset-bottom)); position: relative; z-index: 1; } .deck__frame{ max-width: var(--max); margin: 0 auto; border-radius: calc(var(--radius) + 10px); /* Frosted glass: noticeably opaque */ /* Opaque-feeling glass that still lets backdrop blur show through */ background: linear-gradient(180deg, rgba(12,14,22,.92), rgba(12,14,22,.88)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05) inset; overflow:hidden; backdrop-filter: blur(8px) saturate(1.25); -webkit-backdrop-filter: blur(8px) saturate(1.25); position: relative; } .deck__frame::before{ content: ""; position: absolute; inset: 0; border-radius: calc(var(--radius) + 10px); padding: 1px; background: linear-gradient(135deg, rgba(124,92,255,.3), rgba(47,230,255,.2), rgba(0,255,168,.2)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; } .deck__viewport{ position:relative; overflow:hidden; touch-action: pan-y; } .deck__track{ display:flex; width:100%; transform: translate3d(0,0,0); transition: transform 720ms var(--ease); will-change: transform; } .deck__track.is-dragging{ transition:none; cursor:grabbing; } .slide{ width:100%; flex: 0 0 100%; padding: var(--pad); min-height: clamp(520px, 72vh, 720px); display:flex; flex-direction:column; justify-content:flex-start; gap: 18px; position:relative; } .slide::before{ content:""; position:absolute; inset: 0; background: radial-gradient(900px 450px at 15% 20%, rgba(124,92,255,.16), transparent 60%), radial-gradient(800px 450px at 85% 35%, rgba(47,230,255,.14), transparent 60%), radial-gradient(800px 600px at 50% 110%, rgba(0,255,168,.12), transparent 60%); opacity:1; pointer-events:none; transition: opacity 0.4s var(--ease); } .slide > *{ position:relative; z-index: 1; } .slide__chrome{ display:flex; justify-content:space-between; align-items:center; gap: 12px; } .slide__kicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted2); } .slide__meta{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .badge{ font-size:12px; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.15); background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.08)); color: rgba(255,255,255,.9); font-weight: 600; letter-spacing: 0.02em; box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: all 0.2s var(--ease); } .badge:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.3); border-color: rgba(47,230,255,.3); } .slide__content{ padding: clamp(18px, 2.5vw, 24px); border-radius: var(--radius); /* More transparent glass while keeping strong blur */ background: linear-gradient(180deg, rgba(12,14,22,.88), rgba(12,14,22,.85)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05) inset, 0 1px 0 rgba(255,255,255,.1) inset; backdrop-filter: blur(8px) saturate(1.35); -webkit-backdrop-filter: blur(8px) saturate(1.35); position: relative; overflow: hidden; } .slide__content::before{ content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(47,230,255,.08) 0%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease); } .slide:hover .slide__content::before{ opacity: 1; } h1, h2, h3{ margin:0 0 12px; letter-spacing: -0.03em; } h1{ font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.85)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 16px; } h2{ font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; color: rgba(255,255,255,.95); font-weight: 750; letter-spacing: -0.035em; margin-bottom: 16px; } h3{ font-size: 16px; letter-spacing: -0.015em; opacity:.95; } p{ margin: 0 0 12px; color: var(--muted); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6; } .lead{ font-size: clamp(16px, 1.8vw, 20px); color: rgba(255,255,255,.85); line-height: 1.6; max-width: 100%; font-weight: 500; letter-spacing: -0.01em; } ul, ol{ margin: 16px 0 18px; padding-left: 24px; color: rgba(255,255,255,.88); } li{ margin: 10px 0; line-height: 1.6; position: relative; padding-left: 8px; } li::marker{ color: rgba(47,230,255,.6); font-weight: 600; } ul li::before{ content: "▸"; position: absolute; left: -20px; color: rgba(47,230,255,.7); font-weight: 600; } .callout{ margin-top: 16px; padding: 16px 18px; border-radius: var(--radius2); border: 1px solid rgba(47,230,255,.25); background: linear-gradient(135deg, rgba(47,230,255,.12), rgba(124,92,255,.08)); color: rgba(255,255,255,.95); font-weight: 500; box-shadow: 0 8px 24px rgba(47,230,255,.15); position: relative; overflow: hidden; } .callout::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accentA), var(--accentB), var(--accentC)); } .panel{ border-radius: var(--radius2); padding: 18px 18px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(12,14,22,.85), rgba(12,14,22,.80)); backdrop-filter: blur(8px) saturate(1.25); -webkit-backdrop-filter: blur(8px) saturate(1.25); box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: all 0.3s var(--ease); } .panel:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4); border-color: rgba(255,255,255,.18); } .panel--accent{ background: radial-gradient(500px 300px at 10% 10%, rgba(124,92,255,.25), transparent 60%), radial-gradient(500px 300px at 90% 20%, rgba(47,230,255,.20), transparent 60%), linear-gradient(135deg, rgba(12,14,22,.85), rgba(12,14,22,.80)); border-color: rgba(47,230,255,.3); box-shadow: 0 8px 32px rgba(47,230,255,.2); } .muted{ color: var(--muted2); } .twocol{ display:grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 820px){ .twocol{ grid-template-columns: 1fr 1fr; } } .pills{ display:flex; flex-wrap:wrap; gap: 10px; margin: 10px 0 2px; } .pill{ padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(255,255,255,.84); font-size: 14px; } .pricing{ display:grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0 10px; } @media (min-width: 720px){ .pricing{ grid-template-columns: repeat(3, 1fr); } } .pricecard{ border-radius: var(--radius2); padding: 18px 18px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.05)); transition: all 0.3s var(--ease); } .pricecard:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); } .pricecard--highlight{ border-color: rgba(47,230,255,.4); box-shadow: 0 16px 48px rgba(47,230,255,.25); background: linear-gradient(135deg, rgba(47,230,255,.15), rgba(124,92,255,.10)); } .pricecard__tier{ font-weight: 650; margin-bottom: 6px; } .pricecard__price{ font-size: 28px; font-weight: 750; letter-spacing: -0.03em; } .pricecard__meta{ margin-top: 4px; color: var(--muted2); font-size: 13px; } .metrics{ display:grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0 12px; } @media (min-width: 720px){ .metrics{ grid-template-columns: repeat(3, 1fr); } } .metric{ border-radius: var(--radius2); padding: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); } .metric__num{ font-size: 28px; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(47,230,255,.92), rgba(0,255,168,.90)); -webkit-background-clip: text; background-clip: text; color: transparent; } .metric__label{ color: var(--muted2); margin-top: 6px; font-size: 13px; } .steps{ counter-reset: step; list-style: none; padding-left: 0; margin: 12px 0 0; } .steps li{ counter-increment: step; margin: 10px 0; padding: 12px 12px 12px 50px; position:relative; border-radius: var(--radius2); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); } .steps li::before{ content: counter(step); position:absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 10px; display:grid; place-items:center; font-weight: 800; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); } .chat{ display:grid; gap: 12px; margin-top: 8px; } .chat__bubble{ border-radius: 18px; border: 1px solid rgba(255,255,255,.12); padding: 12px 14px; background: rgba(255,255,255,.05); } .chat__bubble--user{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); } .chat__bubble--ai{ background: radial-gradient(420px 260px at 10% 10%, rgba(47,230,255,.14), transparent 58%), rgba(255,255,255,.05); border-color: rgba(47,230,255,.22); } .chat__label{ font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); margin-bottom: 6px; } .chat__text{ color: rgba(255,255,255,.86); line-height: 1.5; } .chat__list{ margin: 8px 0 0; padding-left: 18px; color: rgba(255,255,255,.86); } .deck__controls{ padding: 14px var(--pad) max(14px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(8,10,18,.30), rgba(8,10,18,.55)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .progress{ height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow:hidden; border: 1px solid rgba(255,255,255,.10); margin-bottom: 12px; } .progress__bar{ height:100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, rgba(124,92,255,.95), rgba(47,230,255,.95), rgba(0,255,168,.95)); box-shadow: 0 8px 24px rgba(47,230,255,.10); transition: width 520ms var(--ease); } .controls{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 10px; } .btn{ appearance:none; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.08)); color: rgba(255,255,255,.92); border-radius: 999px; padding: 12px 14px; font-weight: 650; letter-spacing: -0.01em; box-shadow: 0 10px 26px rgba(0,0,0,.35); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap: 8px; user-select:none; -webkit-tap-highlight-color: transparent; } .btn:hover{ border-color: rgba(255,255,255,.22); } .btn:active{ transform: translateY(1px); } .btn:focus{ outline:none; box-shadow: 0 0 0 3px var(--focus), 0 10px 26px rgba(0,0,0,.35); } .btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; } .btn--ghost{ background: rgba(255,255,255,.06); box-shadow:none; } .btn__icon{ opacity:.85; } .status{ display:flex; flex-direction:column; align-items:center; gap: 6px; min-width: 160px; } .counter{ font-size: 12px; color: var(--muted2); letter-spacing: .08em; text-transform: uppercase; } .dots{ display:flex; gap: 6px; flex-wrap:wrap; justify-content:center; } .dot{ appearance:none; -webkit-appearance:none; padding: 0; width: 8px; height: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); transition: transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease); } .dot:focus{ outline: none; box-shadow: 0 0 0 3px var(--focus); } .dot.is-active{ background: rgba(47,230,255,.60); border-color: rgba(47,230,255,.75); transform: scale(1.15); } .hint{ margin-top: 10px; font-size: 12px; color: var(--muted2); text-align:center; } @media (max-width: 520px){ .topbar__right{ display:none; } .status{ min-width: 120px; } .controls{ grid-template-columns: 1fr auto 1fr; } .btn{ padding: 12px 12px; } } .chart-container{ margin: 20px 0; padding: 16px; border-radius: var(--radius2); background: rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.08); position: relative; min-height: 300px; } .chart-container canvas{ max-height: 400px; } @media (prefers-reduced-motion: reduce){ .deck__track{ transition: none !important; } .progress__bar{ transition: none !important; } .dot{ transition: none !important; } .btn{ transition: none !important; } } /* Generator (Paste & Generate) */ .fabbar{ position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; z-index: 80; display:flex; justify-content:flex-end; gap: 10px; flex-wrap: wrap; pointer-events: none; /* let buttons opt-in */ } .fab{ pointer-events: auto; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)); color: rgba(255,255,255,.92); border-radius: 999px; padding: 12px 14px; font-weight: 650; letter-spacing: -0.01em; cursor: pointer; box-shadow: 0 14px 40px rgba(0,0,0,.45); -webkit-tap-highlight-color: transparent; } .fab--ghost{ background: rgba(255,255,255,.06); box-shadow: 0 14px 40px rgba(0,0,0,.35); } .fab:focus{ outline:none; box-shadow: 0 0 0 3px var(--focus), 0 14px 40px rgba(0,0,0,.45); } .fab:active{ transform: translateY(1px); } .modal{ position: fixed; inset:0; z-index: 100; display:none; } .modal.is-open{ display:block; } .modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal__panel{ position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(980px, calc(100vw - 24px)); height: min(76vh, 720px); border-radius: 22px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)); box-shadow: 0 30px 90px rgba(0,0,0,.65); overflow: hidden; display:flex; flex-direction: column; } .modal__panel > div:not(.modal__header):not(.modal__actions) { overflow-y: auto; overflow-x: hidden; flex: 1; -webkit-overflow-scrolling: touch; } .modal__panel--compact{ height: auto; max-height: min(76vh, 520px); } .modal__header{ padding: 14px 16px; display:flex; align-items:center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.10); } .modal__title{ font-weight: 750; letter-spacing: -0.02em; } .modal__sub{ font-size: 12px; color: rgba(255,255,255,.62); margin-top: 2px; } .iconbtn{ appearance:none; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); border-radius: 12px; width: 40px; height: 40px; cursor:pointer; display:grid; place-items:center; } .iconbtn:focus{ outline:none; box-shadow: 0 0 0 3px var(--focus); } .iconbtn:active{ transform: translateY(1px); } .textarea{ flex: 1; width: 100%; border: none; outline: none; resize: none; padding: 14px 16px; background: rgba(0,0,0,.18); color: rgba(255,255,255,.90); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; line-height: 1.55; } .brandingRow{ display:flex; align-items:center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.10); } .brandingRow__label{ font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); min-width: 46px; } .fileInput{ flex: 1; min-width: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.80); padding: 10px 12px; font-size: 12px; } .fileInput--hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .fileBtn{ white-space: nowrap; } .selectInput{ border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); padding: 10px 12px; font-size: 12px; outline: none; } .selectInput:focus{ box-shadow: 0 0 0 3px var(--focus); } .selectInput option{ background: rgba(12,14,22,.95); color: rgba(255,255,255,.92); padding: 8px 12px; } .brandingRow__preview{ width: 54px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); display:grid; place-items:center; overflow:hidden; } .brandingRow__preview img{ max-width: 100%; max-height: 100%; object-fit: contain; display:block; } .modal__actions{ padding: 12px 16px; display:flex; gap: 10px; align-items:center; border-top: 1px solid rgba(255,255,255,.10); } .modal__spacer{ flex: 1; } .shareRow{ padding: 12px 16px 12px; display:flex; gap: 10px; align-items:center; } .shareInput{ flex: 1; min-width: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.90); padding: 12px 14px; font-size: 13px; outline: none; } .shareInput:focus{ box-shadow: 0 0 0 3px var(--focus); } .modal__hint{ padding: 0 16px 14px; font-size: 12px; color: rgba(255,255,255,.60); } .decklist{ padding: 0 16px; display:grid; gap: 10px; margin: 8px 0 0; max-height: 46vh; overflow:auto; } .deckitem{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 12px; border-radius: var(--radius2); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); } .deckitem__meta{ display:flex; flex-direction:column; gap: 2px; min-width: 0; } .deckitem__title{ font-weight: 700; letter-spacing: -0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .deckitem__sub{ font-size: 12px; color: rgba(255,255,255,.62); } @media (max-width: 520px){ .modal__panel{ height: min(82vh, 720px); } .fabbar{ right: 12px; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); justify-content: stretch; } .fab{ flex: 1; justify-content:center; } }