/** * AIContestList Studio — workspace. * * Immersive Dark surface inherited from the theme (data-theme="dark" on the workspace). * 0.1.20:
wraps the workspace and the part below it, so the * page's main landmark holds its content; the workspace itself is the inner * .aicl-studio element and keeps every rule it had as
. * Every colour, font, radius and duration is a theme token; the only local values * are layout sizes. One signature moment: the Generate button's moving AI edge. * * 0.1.8 material pass: panels are lit from above (a highlight on the top edge, a * soft fill that fades downward, a quiet float shadow); fields and tracks sit * recessed; selections slide; My Creations hangs as a single-column exhibition wall. * The AI gradient stays a hairline: the stage horizon and the current work's label. */ /* --------------------------------------------------------------- RESET inside the Studio (GeneratePress styles bare buttons/inputs) --------------------------------------------------------------- */ /* The theme sets border-box globally; say it here too so the Studio keeps its sizes on any theme (the frames on the creations wall depend on it). */ .aicl-studio, .aicl-studio *, .aicl-studio *::before, .aicl-studio *::after { box-sizing: border-box; } /* The page wrapper adds nothing of its own: no theme spacing on
, one dark surface from the workspace to the footer. */ main.aicl-page { display: block; width: auto; max-width: none; margin: 0; padding: 0; background: var(--bg-canvas, #08090B); } .aicl-studio button, .aicl-studio input, .aicl-studio textarea, .aicl-studio select { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; } .aicl-studio button { padding: 0; border: 0; border-radius: 0; background: none; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; } .aicl-studio button:disabled, .aicl-studio [aria-disabled="true"] { cursor: not-allowed; } .aicl-studio [hidden] { display: none !important; } .aicl-studio :focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; } .aicl-studio .aicl-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .aicl-studio .aicl-icon { flex: none; } .aicl-studio kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border-default); background: var(--overlay-white-04); font: 500 .6875rem/1.4 var(--font-sans); color: var(--text-tertiary); text-align: center; } /* Scrollbars. Chrome draws its own system bar (arrows included) as soon as an element — or an ancestor, since scrollbar-color inherits — sets scrollbar-width or scrollbar-color, and then ignores ::-webkit-scrollbar. So Chrome and Safari get the two standard properties reset to auto and a slim rounded bar; Firefox, which has no ::-webkit-scrollbar, gets its own thin bar. Rows that hide their bar set it later. */ @supports selector(::-webkit-scrollbar) { .aicl-studio, .aicl-studio * { scrollbar-width: auto; scrollbar-color: auto; } } @supports not selector(::-webkit-scrollbar) { .aicl-studio, .aicl-studio * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; } } .aicl-studio *::-webkit-scrollbar { width: 10px; height: 10px; } .aicl-studio *::-webkit-scrollbar-track, .aicl-studio *::-webkit-scrollbar-corner { background: transparent; } .aicl-studio *::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .aicl-studio *::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; background-color: rgba(255, 255, 255, .08); } .aicl-studio *:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .16); } .aicl-studio *::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .28); } /* --------------------------------------------------------------- PAGE + ATMOSPHERE (the homepage hero's light, quieter) --------------------------------------------------------------- */ .aicl-studio { --aicl-pad: clamp(12px, 1.4vw, 24px); /* 1vw for type that follows the screen width. While the workspace is scaled (fit.js) it is 1% of the width the layout is drawn at, not of the window. */ --aicl-vw: 1vw; --aicl-gap: 14px; --aicl-left: 288px; --aicl-right: 312px; --aicl-bar-h: 64px; --aicl-panel: color-mix(in srgb, var(--bg-surface) 84%, transparent); --aicl-field: var(--overlay-white-04); --aicl-ease: var(--ease-standard); --aicl-glide: 460ms cubic-bezier(.16, 1, .3, 1); /* Material: panels are lit from above and float; fields and tracks sit recessed. */ --aicl-rim: rgba(255, 255, 255, .065); --aicl-toplight: linear-gradient(180deg, rgba(255, 255, 255, .042) 0, rgba(255, 255, 255, .012) 96px, rgba(255, 255, 255, 0) 240px); /* Lift = the lit top edge plus a 1px contact shadow. No large soft drop shadow: on this near-black wall it barely shows, and because it reaches across the gaps into the neighbouring blurred panels, the drifting Prompt Library made them re-blur on every frame (measured: 60 → 18 fps on a software-rendered laptop). */ --aicl-lift: inset 0 1px 0 rgba(255, 255, 255, .075), 0 1px 2px rgba(0, 0, 0, .35); --aicl-recess: inset 0 1px 2px rgba(0, 0, 0, .38), inset 0 0 0 1px rgba(255, 255, 255, .045); position: relative; isolation: isolate; /* Like the homepage hero: run under the transparent header so it reads as one dark surface. */ min-height: 100svh; margin-top: calc(var(--header-h) * -1); padding: var(--header-h) var(--aicl-pad) var(--aicl-pad); overflow: clip; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-sans); } body.aicl-studio-page { background: var(--acl-obsidian, #08090B); } .aicl-atmos { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .aicl-atmos::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--overlay-white-04) 1px, transparent 1px); background-size: calc(100% / 6) 100%; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); } .aicl-atmos__orb { position: absolute; border-radius: 50%; opacity: 0; animation: aicl-light-in var(--motion-hero) var(--ease-enter) 200ms forwards; } .aicl-atmos__orb--iris { width: min(1200px, 100vw); aspect-ratio: 1; top: -48%; right: -24%; background: radial-gradient(circle, rgba(108, 92, 231, .22) 0%, rgba(108, 92, 231, .07) 38%, transparent 66%); } .aicl-atmos__orb--blue { width: min(820px, 80vw); aspect-ratio: 1; bottom: -46%; left: -20%; background: radial-gradient(circle, rgba(88, 199, 255, .10) 0%, transparent 64%); } .aicl-atmos__orb--pink { width: min(460px, 50vw); aspect-ratio: 1; top: 34%; right: 22%; background: radial-gradient(circle, rgba(255, 121, 198, .06) 0%, transparent 62%); } @keyframes aicl-light-in { to { opacity: 1; } } /* Fine film grain over the wall: breaks up banding in the large soft lights. It sits behind the panels, so artwork is never grained. */ .aicl-atmos::after { content: ""; position: absolute; inset: 0; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* --------------------------------------------------------------- STUDIO BAR --------------------------------------------------------------- */ .aicl-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--aicl-bar-h); } .aicl-bar__start { display: flex; align-items: center; gap: var(--space-4); min-width: 0; } .aicl-studio .aicl-bar__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, calc(var(--aicl-vw) * 2.4), 2.625rem); line-height: 1; letter-spacing: -.02em; white-space: nowrap; } .aicl-studio .aicl-bar__context { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 56ch; margin: 0; padding: 7px 14px 7px 10px; border: 1px solid var(--iris-36); border-radius: var(--radius-pill); background: var(--iris-12); color: var(--text-secondary); font-size: .8125rem; line-height: 1.3; } .aicl-bar__context .aicl-icon { color: var(--interactive-soft-text); } .aicl-bar__context a { color: var(--text-primary); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aicl-bar__context a:hover { text-decoration: underline; text-underline-offset: .2em; } .aicl-bar__end { display: flex; align-items: center; gap: var(--space-2); } /* Studio page: no visible title (the site nav already shows AI Studio as current). The bar is just a 12px gap under the header, and only grows back when it has something to show: the contest / Prompt Library source chip or the preview chip. The workspace height already subtracts --aicl-bar-h, so it takes the freed room. */ .aicl-studio[data-aicl-studio] { --aicl-bar-h: 12px; } .aicl-studio[data-aicl-studio]:has(> .aicl-bar :is([data-aicl-context], [data-aicl-preview]):not([hidden])) { --aicl-bar-h: 52px; } .aicl-studio .aicl-preview-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px dashed var(--iris-36); border-radius: var(--radius-pill); color: var(--interactive-soft-text); font-size: .75rem; font-weight: 600; text-decoration: none; } .aicl-studio .aicl-credits { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 42px; padding: 0 16px 0 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--overlay-white-04); font-weight: 600; font-size: .875rem; transition: border-color var(--motion-base) var(--aicl-ease), background-color var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-credits:hover { border-color: var(--iris-36); background: var(--iris-12); } .aicl-credits .aicl-icon { color: var(--interactive-soft-text); } .aicl-credits__n { font-variant-numeric: tabular-nums; } .aicl-credits__unit { color: var(--text-secondary); font-weight: 500; } .aicl-studio .aicl-credits.is-low { border-color: color-mix(in srgb, var(--acl-warning) 70%, transparent); } .aicl-studio .aicl-credits.is-low .aicl-icon { color: #E8B66B; } .aicl-studio .aicl-avatar { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; border: 1px solid var(--border-strong); background: var(--bg-elevated); } .aicl-avatar img { width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------------------- WORKSPACE GRID — follows the reference layout --------------------------------------------------------------- */ .aicl-ws { display: grid; grid-template-columns: var(--aicl-left) minmax(0, 1fr) var(--aicl-right); /* Stage takes all the slack; the dock row sits at its natural (compact) height, so there is never an empty band beneath the prompt. */ grid-template-rows: minmax(360px, 1fr) min-content; grid-template-areas: "creations stage library" "creations dock params"; gap: var(--aicl-gap); height: calc(100svh - var(--header-h) - var(--aicl-bar-h) - var(--aicl-pad)); min-height: 680px; transition: grid-template-columns var(--motion-slow) var(--aicl-ease); } .aicl-ws[data-left="collapsed"] { --aicl-left: 84px; } .aicl-ws[data-right="collapsed"] { grid-template-areas: "creations stage stage" "creations dock params"; } .aicl-ws[data-right="collapsed"] .aicl-library { display: none; } .aicl-creations { grid-area: creations; } .aicl-stage { grid-area: stage; } .aicl-library { grid-area: library; } .aicl-dock { grid-area: dock; } .aicl-params { grid-area: params; } /* Right column. Library and Settings stack in their own column, so Settings keeps its natural height and the library takes everything else, instead of both following the height of the prompt dock beside them. Settings comes first in the markup (Tab order runs Generate → Settings); the library is shown on top. When the library is collapsed the wrapper steps aside and the original two-row areas apply. */ @media (min-width: 961px) { .aicl-ws:not([data-right="collapsed"]):has(> .aicl-side) { grid-template-areas: "creations stage side" "creations dock side"; } .aicl-side { grid-area: side; display: flex; flex-direction: column; gap: var(--aicl-gap); min-width: 0; min-height: 0; } .aicl-side > .aicl-library { order: -1; flex: 1 1 0; min-height: 240px; } .aicl-side > .aicl-params { flex: 0 1 auto; min-height: 0; } .aicl-ws[data-right="collapsed"] > .aicl-side { display: contents; } } /* Tablet and phone: the wrapper disappears so each panel keeps its own place in the stack. */ @media (max-width: 960px) { .aicl-side { display: contents; } } /* --------------------------------------------------------------- PANELS --------------------------------------------------------------- */ .aicl-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; border: 1px solid var(--aicl-rim); border-radius: var(--radius-lg); background: var(--bg-surface); background: var(--aicl-toplight), var(--aicl-panel); box-shadow: var(--aicl-lift); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .aicl-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 20px 16px 14px 22px; } .aicl-studio .aicl-panel__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 1.875rem; line-height: 1.05; letter-spacing: -.015em; } .aicl-studio .aicl-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; color: var(--text-secondary); border: 1px solid var(--overlay-white-06); background: var(--overlay-white-04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); transition: color var(--motion-base) var(--aicl-ease), background-color var(--motion-base) var(--aicl-ease), border-color var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-icon-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--overlay-white-16); background: var(--overlay-white-10); } .aicl-studio .aicl-icon-btn:disabled { opacity: .4; } .aicl-studio .aicl-icon-btn--glass { border-color: var(--overlay-white-10); background: color-mix(in srgb, var(--bg-page) 55%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--text-primary); } .aicl-panel__empty { padding: 28px 22px; text-align: center; } .aicl-studio .aicl-panel__empty-title { margin: 0 0 var(--space-2); font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.2; color: var(--text-primary); } .aicl-studio .aicl-panel__empty-body { margin: 0 0 var(--space-4); font-size: .875rem; line-height: 1.55; color: var(--text-secondary); } .aicl-panel__foot { display: flex; flex-direction: column; gap: var(--space-2); padding: 10px 16px 16px; border-top: 1px solid var(--border-default); } .aicl-studio .aicl-panel__link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: .8125rem; font-weight: 600; text-decoration: none; } .aicl-studio .aicl-panel__link:hover { color: var(--text-primary); background: var(--overlay-white-04); } .aicl-studio .aicl-more { align-self: center; flex: none; min-height: 34px; margin: 4px 0 14px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--overlay-white-10); color: var(--text-secondary); font-size: .8125rem; font-weight: 600; transition: color var(--motion-base) var(--aicl-ease), border-color var(--motion-base) var(--aicl-ease), background-color var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-more:hover { color: var(--text-primary); border-color: var(--overlay-white-24); background: var(--overlay-white-04); } /* Segmented control (tabs, counts, quality): a recessed track. */ .aicl-seg { display: flex; gap: 3px; padding: 4px; margin: 0 16px 12px; border: 0; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .22); box-shadow: var(--aicl-recess); } .aicl-studio .aicl-seg button { flex: 1; min-height: 34px; padding: 0 10px; border-radius: 9px; color: var(--text-secondary); font-size: .8125rem; font-weight: 600; white-space: nowrap; transition: color var(--motion-base) var(--aicl-ease), background-color var(--motion-base) var(--aicl-ease), box-shadow var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-seg button:hover:not([aria-disabled="true"]) { color: var(--text-primary); } .aicl-studio .aicl-seg button[aria-selected="true"], .aicl-studio .aicl-seg button[aria-checked="true"] { color: var(--text-primary); background: var(--interactive-soft); box-shadow: inset 0 0 0 1px var(--iris-36); } .aicl-studio .aicl-seg button[aria-disabled="true"] { opacity: .45; } /* Sliding selection. studio.js adds one .aicl-glider to each choice group (tabs, Images, Quality, Aspect ratio, Mode) and moves it under the picked option, so the highlight travels instead of jumping. Positions come from offsetLeft/Top, which live in the same space as the glider's transform, so the workspace scale (fit.js) never throws them off. Without JS the buttons keep their own selected style. */ .aicl-studio .has-glider { position: relative; } .aicl-studio .has-glider > button { position: relative; z-index: 1; } .aicl-glider { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; pointer-events: none; border-radius: 9px; opacity: 0; background: linear-gradient(180deg, rgba(108, 92, 231, .36), rgba(108, 92, 231, .18)); box-shadow: inset 0 0 0 1px rgba(159, 150, 255, .46), inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 22px -12px rgba(108, 92, 231, .9); transition: transform var(--aicl-glide), width var(--aicl-glide), height var(--aicl-glide), opacity var(--motion-base) var(--aicl-ease); will-change: transform; } .aicl-glider.is-on { opacity: 1; } .aicl-glider.is-instant { transition: none; } .aicl-studio .aicl-seg.has-glider button[aria-selected="true"], .aicl-studio .aicl-seg.has-glider button[aria-checked="true"], .aicl-studio .aicl-modes__list.has-glider button[aria-checked="true"], .aicl-studio .aicl-ratios.has-glider .aicl-ratio[aria-checked="true"] { background: transparent; border-color: transparent; box-shadow: none; } .aicl-seg--small { margin: 0; flex: none; } .aicl-studio .aicl-seg--small button { min-height: 30px; min-width: 36px; padding: 0 8px; font-size: .75rem; } .aicl-seg__lock { display: inline-flex; vertical-align: -2px; margin-left: 3px; opacity: .8; } .aicl-seg__lock svg { width: 11px; height: 11px; } /* --------------------------------------------------------------- MY CREATIONS — a single-column exhibition wall Every work hangs in the same frame, whatever its shape: a thin dark moulding, a passe-partout mat, and the image set in at its own ratio with a fine bevel line, like a photography show hung with uniform frames. A small museum label sits under each frame. The work on the canvas gets the gallery light, an Iris hairline around its frame and the AI hairline on its label. --------------------------------------------------------------- */ .aicl-studio { --aicl-moulding: linear-gradient(180deg, #2a2c33 0, #121317 9%, #0b0c0e 60%, #08090b 100%); --aicl-mat: linear-gradient(180deg, #1d1e23 0, #17181c 55%, #141519 100%); --aicl-lamp: rgba(255, 244, 228, .13); } .aicl-clist { flex: 1; min-height: 0; margin: 0; padding: 0 22px 18px; list-style: none; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; overscroll-behavior: contain; /* the wall fades under the tabs and at the bottom edge */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 26px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 26px), transparent 100%); } .aicl-citem { position: relative; flex: none; padding-top: 14px; /* wall above the frame, where the lamp falls */ } /* the gallery lamp's spill on the wall above the frame (current work only) */ .aicl-citem::before { content: ""; position: absolute; left: 10%; right: 10%; top: -18px; height: 40px; pointer-events: none; /* brightest where the lamp meets the frame's top edge, fading up the wall */ background: radial-gradient(50% 100% at 50% 100%, rgba(206, 200, 255, .3), rgba(159, 150, 255, .08) 55%, transparent 78%); opacity: 0; transition: opacity var(--motion-stage) var(--ease-enter); } .aicl-citem.is-current::before { opacity: 1; } .aicl-studio .aicl-citem__open { display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; background: none; text-align: left; } .aicl-studio .aicl-citem__open:focus-visible { outline-offset: 5px; } /* Frame: same size for every work */ .aicl-cframe { --r: 1; position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.08; padding: 6px; border-radius: 5px; background: var(--aicl-moulding); box-shadow: 0 0 0 1px rgba(255, 255, 255, .055), inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 3px rgba(0, 0, 0, .55), 0 26px 44px -26px rgba(0, 0, 0, .95); transition: transform var(--motion-stage) var(--ease-enter), box-shadow var(--motion-stage) var(--ease-enter), filter var(--motion-slow) var(--aicl-ease); } /* the lamp's pool of light on the mat */ .aicl-cframe::after { content: ""; position: absolute; inset: 6px; z-index: 1; pointer-events: none; border-radius: 2px; background: radial-gradient(64% 42% at 50% 0%, var(--aicl-lamp), transparent 78%); opacity: .55; transition: opacity var(--motion-stage) var(--ease-enter); } .aicl-cframe__mat { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 12%; border-radius: 2px; overflow: hidden; container-type: size; background: var(--aicl-mat); box-shadow: inset 0 3px 7px -2px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(0, 0, 0, .55); } /* the work, at its own ratio, set into the mat with a bevel line */ .aicl-studio .aicl-cframe__work { display: block; width: min(100cqw, 100cqh * var(--r)); height: auto; aspect-ratio: var(--r); max-width: none; object-fit: cover; border-radius: 0; background: #0c0d10; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 2px rgba(0, 0, 0, .5), 0 6px 14px -6px rgba(0, 0, 0, .9); } /* a work that just finished develops in place, like the canvas image */ .aicl-studio .aicl-cframe__work.is-fresh { animation: aicl-develop 1.1s var(--ease-enter) both; } /* a finished work whose file isn't reachable yet (storage not connected) */ .aicl-cframe__work--blank { display: grid !important; place-items: center; color: var(--text-tertiary); background: linear-gradient(160deg, #1b1c22, #101115) !important; } .aicl-cframe__work--blank .aicl-icon { opacity: .6; } /* generating: a small pool of light developing in the mat */ .aicl-cframe__work--develop { position: relative; overflow: hidden; background: #0c0d14 !important; } .aicl-cframe__work--develop::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(34% 34% at 36% 40%, rgba(108, 92, 231, .85), transparent 70%), radial-gradient(30% 30% at 64% 62%, rgba(88, 199, 255, .5), transparent 70%), radial-gradient(26% 26% at 56% 30%, rgba(255, 121, 198, .45), transparent 70%); filter: blur(14px); animation: aicl-develop-orb 4.8s var(--aicl-ease) infinite alternate; } @keyframes aicl-develop-orb { from { transform: rotate(0deg) scale(.82); opacity: .55; } to { transform: rotate(38deg) scale(1.14); opacity: 1; } } /* failed: the frame dims; a red dot where the image would be */ .aicl-cframe__work--failed { display: grid !important; place-items: center; background: #101114 !important; } .aicl-cframe__work--failed::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acl-danger); box-shadow: 0 0 0 5px rgba(199, 68, 85, .16); } .aicl-citem[data-status="failed"] .aicl-cframe { filter: saturate(.5) brightness(.72); } /* Label (the museum card under the frame) */ .aicl-clabel { display: flex; flex-direction: column; gap: 3px; padding: 11px 2px 0; } .aicl-clabel::before { /* the AI hairline, drawn in on the current work */ content: ""; display: block; width: 0; height: 1px; margin-bottom: 6px; background: var(--gradient-ai); opacity: 0; transition: width var(--motion-stage) var(--ease-enter), opacity var(--motion-slow) var(--aicl-ease); } .aicl-clabel__title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.0625rem; line-height: 1.22; letter-spacing: -.005em; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aicl-clabel__medium { font-size: .75rem; line-height: 1.35; color: var(--text-secondary); } .aicl-clabel__date { font-size: .6875rem; line-height: 1.35; color: var(--text-tertiary); font-variant-numeric: tabular-nums; } .aicl-citem__fav { display: inline-flex; vertical-align: -1px; margin-right: 5px; color: var(--interactive-soft-text); } .aicl-citem__fav svg { width: 12px; height: 12px; fill: currentColor; } .aicl-citem__status { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 500; color: var(--text-secondary); } .aicl-citem__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--interactive-soft-text); animation: aicl-status-dot 1.6s var(--aicl-ease) infinite; } .aicl-citem__status[data-status="failed"]::before { background: var(--acl-danger); animation: none; } @keyframes aicl-status-dot { 50% { opacity: .35; } } /* Hover (mouse): the lamp brightens and the frame lifts a hair */ @media (hover: hover) { .aicl-studio .aicl-citem__open:hover .aicl-cframe { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .14), 0 3px 5px rgba(0, 0, 0, .5), 0 34px 52px -28px rgba(0, 0, 0, 1); } .aicl-studio .aicl-citem__open:hover .aicl-cframe::after { opacity: 1; } } /* Current work: lamp on, Iris hairline around the frame, AI hairline on the label */ .aicl-studio .aicl-citem__open[aria-current="true"] .aicl-cframe { box-shadow: 0 0 0 1px rgba(159, 150, 255, .72), 0 0 0 5px rgba(108, 92, 231, .12), inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 3px rgba(0, 0, 0, .5), 0 30px 60px -30px rgba(108, 92, 231, .55); } .aicl-studio .aicl-citem__open[aria-current="true"] .aicl-cframe::after { opacity: 1; background: radial-gradient(70% 48% at 50% 0%, rgba(232, 228, 255, .2), transparent 80%); } .aicl-studio .aicl-citem__open[aria-current="true"] .aicl-clabel::before { width: 28px; opacity: 1; } /* ⋯ : a glass button in the frame's corner, shown on hover or focus (always on touch) */ .aicl-studio .aicl-citem__more { position: absolute; top: 24px; right: 10px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; /* no backdrop blur: it sits on the dark mat, and two dozen hidden blur layers would cost scrolling smoothness */ border: 1px solid rgba(255, 255, 255, .14); color: var(--text-primary); background: linear-gradient(180deg, rgba(40, 41, 48, .88), rgba(14, 15, 19, .88)); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .1); opacity: 0; transform: scale(.88); transition: opacity var(--motion-base) var(--aicl-ease), transform var(--motion-slow) var(--ease-enter), background-color var(--motion-base) var(--aicl-ease); } .aicl-citem:hover .aicl-citem__more, .aicl-citem:focus-within .aicl-citem__more, .aicl-studio .aicl-citem__more[aria-expanded="true"] { opacity: 1; transform: none; } .aicl-studio .aicl-citem__more:hover, .aicl-studio .aicl-citem__more[aria-expanded="true"] { background: rgba(108, 92, 231, .55); } @media (hover: none) { .aicl-studio .aicl-citem__more { opacity: 1; transform: none; } } /* a new work being hung */ .aicl-citem.is-new { animation: aicl-hang var(--motion-hero) var(--ease-enter) both; } @keyframes aicl-hang { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } /* Empty wall: one lit frame with the label, two blank frames fading below */ .aicl-creations [data-aicl-cempty] { flex: 1; min-height: 0; overflow: hidden; padding: 14px 22px 0; text-align: left; } .aicl-cempty { position: relative; } .aicl-cempty::before { content: ""; position: absolute; left: 10%; right: 10%; top: -24px; height: 46px; pointer-events: none; background: radial-gradient(50% 100% at 50% 100%, rgba(255, 244, 228, .22), rgba(255, 244, 228, .05) 55%, transparent 78%); } .aicl-cempty .aicl-cframe::after { opacity: 1; background: radial-gradient(72% 58% at 50% 0%, rgba(255, 244, 228, .19), transparent 82%); } .aicl-studio .aicl-cempty .aicl-panel__empty-title { margin: 12px 0 4px; font-style: italic; font-size: 1.25rem; } .aicl-studio .aicl-cempty .aicl-panel__empty-body { margin: 0 0 14px; max-width: 30ch; font-size: .8125rem; } .aicl-cempty__ghosts { display: flex; flex-direction: column; gap: 18px; padding-top: 18px; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 92%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 92%); } .aicl-cempty__ghosts .aicl-cframe { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px 0 rgba(255, 255, 255, .06); } .aicl-cempty__ghosts .aicl-cframe::after { display: none; } /* Collapsed rail: small square works, no labels */ .aicl-ws[data-left="collapsed"] .aicl-creations .aicl-panel__title, .aicl-ws[data-left="collapsed"] .aicl-creations .aicl-seg, .aicl-ws[data-left="collapsed"] .aicl-clabel, .aicl-ws[data-left="collapsed"] .aicl-citem__more, .aicl-ws[data-left="collapsed"] .aicl-creations .aicl-panel__empty, .aicl-ws[data-left="collapsed"] .aicl-creations .aicl-more { display: none; } .aicl-ws[data-left="collapsed"] .aicl-creations .aicl-panel__head { justify-content: center; padding: 18px 0 12px; } .aicl-ws[data-left="collapsed"] .aicl-clist { padding: 4px 0 12px; gap: 10px; align-items: center; } .aicl-ws[data-left="collapsed"] .aicl-citem { width: 56px; padding-top: 0; } .aicl-ws[data-left="collapsed"] .aicl-citem::before { display: none; } .aicl-ws[data-left="collapsed"] .aicl-cframe { aspect-ratio: 1; padding: 3px; border-radius: 10px; } .aicl-ws[data-left="collapsed"] .aicl-cframe::after { display: none; } .aicl-ws[data-left="collapsed"] .aicl-cframe__mat { padding: 0; border-radius: 7px; container-type: normal; } .aicl-studio .aicl-ws[data-left="collapsed"] .aicl-cframe__work { width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; } .aicl-panel__toggle .aicl-icon { transition: transform var(--motion-slow) var(--aicl-ease); } .aicl-ws[data-left="collapsed"] [data-aicl-collapse="creations"] .aicl-icon { transform: rotate(180deg); } /* --------------------------------------------------------------- STAGE / CANVAS --------------------------------------------------------------- */ .aicl-stage { position: relative; min-height: 0; min-width: 0; overflow: hidden; border: 1px solid var(--aicl-rim); border-radius: var(--radius-lg); background: radial-gradient(120% 90% at 50% 0%, rgba(108, 92, 231, .10), transparent 60%), var(--aicl-toplight), var(--bg-surface); box-shadow: var(--aicl-lift); } .aicl-stage::after { /* the homepage horizon, as the stage's floor */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gradient-ai); opacity: .4; pointer-events: none; } .aicl-stage__top { position: absolute; z-index: 3; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); pointer-events: none; } .aicl-stage__top > * { pointer-events: auto; } .aicl-stage__tools { display: flex; gap: var(--space-2); } .aicl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--overlay-white-10); border-radius: 11px; background: color-mix(in srgb, var(--bg-page) 55%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); } .aicl-chip__sub { color: var(--text-tertiary); font-weight: 500; } .aicl-canvas { position: absolute; inset: 60px 22px 74px; container-type: size; display: grid; place-items: center; } .aicl-canvas__frame { --r: 1; position: relative; display: grid; place-items: center; width: min(100cqw, 100cqh * var(--r)); aspect-ratio: var(--r); border-radius: var(--radius-md); overflow: hidden; transition: width var(--motion-stage) var(--ease-enter); } /* Empty and message: a viewfinder (four corner marks) with a soft light falling from above onto a faint floor glow — no dashed box, no grid. */ .aicl-canvas__frame[data-state="empty"], .aicl-canvas__frame[data-state="message"] { --c: rgba(255, 255, 255, .34); --cl: 22px; --cw: 1.5px; background: linear-gradient(var(--c), var(--c)) 0 0 / var(--cl) var(--cw), linear-gradient(var(--c), var(--c)) 0 0 / var(--cw) var(--cl), linear-gradient(var(--c), var(--c)) 100% 0 / var(--cl) var(--cw), linear-gradient(var(--c), var(--c)) 100% 0 / var(--cw) var(--cl), linear-gradient(var(--c), var(--c)) 0 100% / var(--cl) var(--cw), linear-gradient(var(--c), var(--c)) 0 100% / var(--cw) var(--cl), linear-gradient(var(--c), var(--c)) 100% 100% / var(--cl) var(--cw), linear-gradient(var(--c), var(--c)) 100% 100% / var(--cw) var(--cl); background-repeat: no-repeat; border-radius: 4px; } .aicl-canvas__frame[data-state="empty"]::before, .aicl-canvas__frame[data-state="message"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: conic-gradient(from 180deg at 50% -12%, transparent 160deg, rgba(196, 188, 255, .06) 170deg, rgba(232, 228, 255, .1) 180deg, rgba(196, 188, 255, .06) 190deg, transparent 200deg), radial-gradient(40% 34% at 50% 6%, rgba(159, 150, 255, .13), transparent 72%), radial-gradient(34% 10% at 50% 100%, rgba(159, 150, 255, .1), transparent 72%); /* the light has no hard start at the frame's top edge */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 55%, rgba(0, 0, 0, .65) 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 55%, rgba(0, 0, 0, .65) 100%); } .aicl-canvas__frame[data-state="empty"], .aicl-canvas__frame[data-state="message"] { width: 100%; height: 100%; aspect-ratio: auto; } .aicl-canvas__frame[data-state="image"] { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px var(--overlay-white-06); } .aicl-studio .aicl-canvas__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: aicl-develop var(--motion-hero) var(--ease-enter); } @keyframes aicl-develop { from { opacity: 0; filter: blur(14px) saturate(.6); transform: scale(1.015); } to { opacity: 1; filter: none; transform: none; } } .aicl-canvas__empty, .aicl-canvas__message { position: relative; z-index: 1; max-width: 46ch; padding: var(--space-6); text-align: center; } .aicl-studio .aicl-canvas__lead { margin: 0 0 var(--space-3); font-family: var(--font-serif); font-size: clamp(1.625rem, calc(var(--aicl-vw) * 2.1), 2.25rem); line-height: 1.05; letter-spacing: -.015em; color: var(--text-primary); } .aicl-studio .aicl-canvas__hint { margin: 0 auto var(--space-5); font-size: .9375rem; line-height: 1.6; color: var(--text-secondary); } .aicl-canvas__message .aicl-canvas__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); } .aicl-canvas__message[data-tone="error"] .aicl-canvas__lead::before { content: ""; display: block; width: 10px; height: 10px; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--acl-danger); box-shadow: 0 0 0 6px rgba(199, 68, 85, .15); } /* A short canvas (small window, tall prompt): the empty state drops its hint, then its button, instead of cutting a sentence in half. Messages (errors, notices) keep all of their text: they tighten up and scroll inside the frame. The canvas is the container. */ .aicl-canvas__message { max-height: 100%; overflow-y: auto; } @container (max-height: 260px) { .aicl-canvas__empty, .aicl-canvas__message { padding: var(--space-3); } .aicl-studio .aicl-canvas__empty .aicl-canvas__lead { margin-bottom: 10px; } .aicl-studio .aicl-canvas__hint { margin-bottom: 14px; } } @container (max-height: 200px) { .aicl-studio .aicl-canvas__empty .aicl-canvas__hint { display: none; } .aicl-studio .aicl-canvas__empty .aicl-canvas__lead { margin-bottom: var(--space-4); } .aicl-studio .aicl-canvas__message .aicl-canvas__lead { font-size: 1.375rem; } } @container (max-height: 130px) { .aicl-studio .aicl-canvas__empty .aicl-btn { display: none; } .aicl-studio .aicl-canvas__empty .aicl-canvas__lead { margin-bottom: 0; } } /* Generating — a small show: image "developing" out of drifting light. Layers (bottom → top): • frame base: deep night with a faint pixel grid that fades in like tiles resolving • sweep::before: three coloured orbs (iris / blue / pink) drifting and breathing — the "idea" forming • sweep::after: a diagonal scan of light passing over, as if the render head is painting • spark: a soft core glow that pulses in time, sitting just behind the status text */ .aicl-canvas__frame[data-state="progress"] { background: linear-gradient(rgba(159,150,255,.05) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, rgba(159,150,255,.05) 1px, transparent 1px) 0 0 / 26px 26px, radial-gradient(120% 90% at 50% 0%, #1a1630 0%, #0c0d16 60%, #08090b 100%); animation: aicl-tiles 3.4s var(--aicl-ease) infinite alternate; } @keyframes aicl-tiles { from { background-position: 0 0, 0 0, center; opacity: .92; } to { background-position: 26px 26px, -26px 26px, center; opacity: 1; } } .aicl-canvas__sweep { position: absolute; inset: 0; overflow: hidden; } .aicl-canvas__sweep::before, .aicl-canvas__sweep::after { content: ""; position: absolute; } .aicl-canvas__sweep::before { inset: -40%; background: radial-gradient(38% 38% at 28% 34%, rgba(108, 92, 231, .7), transparent 70%), radial-gradient(34% 34% at 72% 64%, rgba(88, 199, 255, .45), transparent 70%), radial-gradient(30% 30% at 58% 24%, rgba(255, 121, 198, .4), transparent 70%), radial-gradient(26% 26% at 40% 78%, rgba(255, 214, 170, .25), transparent 70%); filter: blur(26px); animation: aicl-drift 5.5s var(--aicl-ease) infinite alternate; } .aicl-canvas__sweep::after { inset: -60% -30%; background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .14) 50%, transparent 58%); animation: aicl-shine 2s linear infinite; } /* a pulsing core that sits behind the words, reacting with the orbs */ .aicl-canvas__frame[data-state="progress"] .aicl-canvas__progress::before { content: ""; position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; z-index: -1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(159,150,255,.4), rgba(88,199,255,.12) 45%, transparent 70%); filter: blur(10px); animation: aicl-core 2.6s var(--aicl-ease) infinite; } @keyframes aicl-drift { from { transform: rotate(0deg) scale(1); } to { transform: rotate(42deg) scale(1.18); } } @keyframes aicl-shine { from { transform: translateX(-35%); } to { transform: translateX(35%); } } @keyframes aicl-core { 0%, 100% { transform: translate(-50%, -50%) scale(.85); opacity: .55; } 50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; } } .aicl-canvas__progress { position: relative; z-index: 1; text-align: center; } /* the status line swaps text often; a soft fade keeps the changes feeling alive, not jumpy */ .aicl-studio .aicl-canvas__status { margin: 0 0 6px; font-family: var(--font-serif); font-size: 1.75rem; line-height: 1.1; animation: aicl-status-in var(--motion-stage) var(--ease-enter); } .aicl-canvas__status.is-swap { animation: aicl-status-in var(--motion-slow) var(--ease-enter); } @keyframes aicl-status-in { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } /* three dancing dots after the headline */ .aicl-canvas__dots { display: inline-flex; gap: 5px; margin-left: 2px; vertical-align: middle; } .aicl-canvas__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--interactive-soft-text); animation: aicl-dot 1.2s var(--aicl-ease) infinite; } .aicl-canvas__dots span:nth-child(2) { animation-delay: .15s; } .aicl-canvas__dots span:nth-child(3) { animation-delay: .3s; } @keyframes aicl-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } } .aicl-studio .aicl-canvas__elapsed { margin: 6px 0 0; font-size: .8125rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } /* Compare */ .aicl-compare { position: absolute; inset: 0; z-index: 2; } .aicl-studio .aicl-compare__before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--cut, 50%)) 0 0); } .aicl-compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; margin-left: -1px; background: var(--acl-white); box-shadow: 0 0 12px rgba(0, 0, 0, .5); pointer-events: none; } .aicl-studio .aicl-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; } /* Foot: batch, actions, compare */ .aicl-stage__foot { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: center; min-height: 52px; pointer-events: none; } .aicl-stage__foot > * { pointer-events: auto; } .aicl-batch { position: absolute; left: 0; bottom: 0; display: flex; gap: 6px; padding: 5px; border-radius: 14px; border: 1px solid var(--overlay-white-10); background: color-mix(in srgb, var(--bg-page) 55%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .aicl-studio .aicl-batch button { width: 42px; height: 42px; border-radius: 9px; overflow: hidden; border: 1.5px solid transparent; opacity: .7; } .aicl-studio .aicl-batch button[aria-current="true"] { opacity: 1; border-color: var(--interactive-soft-text); } .aicl-batch img { width: 100%; height: 100%; object-fit: cover; display: block; } .aicl-actions { display: flex; align-items: center; gap: 2px; padding: 5px; border: 1px solid var(--overlay-white-10); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg-page) 60%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .aicl-studio .aicl-actions__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 15px; border-radius: var(--radius-pill); font-size: .875rem; font-weight: 500; white-space: nowrap; transition: background-color var(--motion-base) var(--aicl-ease), color var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-actions__btn:hover { background: var(--overlay-white-10); } .aicl-studio .aicl-actions__btn--icon { width: 40px; padding: 0; justify-content: center; } .aicl-studio .aicl-actions__btn[aria-pressed="true"] { color: var(--interactive-soft-text); } .aicl-studio .aicl-actions__btn[data-aicl-act="favorite"][aria-pressed="true"] svg { fill: currentColor; } .aicl-studio .aicl-actions__btn--solo { position: absolute; right: 0; bottom: 3px; border: 1px solid var(--overlay-white-10); background: color-mix(in srgb, var(--bg-page) 60%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* --------------------------------------------------------------- PROMPT LIBRARY --------------------------------------------------------------- */ .aicl-lgrid { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 12px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: max-content; gap: 10px; align-content: start; } .aicl-clist:empty, .aicl-lgrid:empty { display: none; } .aicl-studio .aicl-lcard { align-self: start; position: relative; display: block; width: 100%; aspect-ratio: 1 / .78; overflow: hidden; border: 1px solid var(--overlay-white-06); border-radius: var(--radius-sm); background: var(--bg-elevated); transition: border-color var(--motion-base) var(--aicl-ease), transform var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-lcard:hover { border-color: rgba(159, 150, 255, .5); } .aicl-lcard img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-stage) var(--ease-enter); } .aicl-studio .aicl-lcard:hover img, .aicl-studio .aicl-lcard:focus-visible img { transform: scale(1.05); } .aicl-lcard__title { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 9px 7px; background: linear-gradient(to top, rgba(8, 9, 11, .86), transparent); font-size: .75rem; font-weight: 600; line-height: 1.25; text-align: left; opacity: 0; transform: translateY(4px); transition: opacity var(--motion-base) var(--aicl-ease), transform var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-lcard:hover .aicl-lcard__title, .aicl-studio .aicl-lcard:focus-visible .aicl-lcard__title { opacity: 1; transform: none; } .aicl-lcard__saved { position: absolute; top: 7px; right: 7px; display: inline-flex; padding: 5px; border-radius: 8px; background: rgba(8, 9, 11, .6); color: var(--interactive-soft-text); } .aicl-lcard__saved svg { width: 13px; height: 13px; fill: currentColor; } .aicl-lcard--text { display: flex; align-items: flex-end; padding: 10px; text-align: left; } .aicl-lcard--text .aicl-lcard__specimen { font-family: var(--font-serif); font-size: .9375rem; line-height: 1.25; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .aicl-skel { align-self: start; position: relative; overflow: hidden; border-radius: var(--radius-sm); background: var(--bg-elevated); aspect-ratio: 1 / .78; } .aicl-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, var(--overlay-white-06) 50%, transparent 70%); animation: aicl-skel 1.4s linear infinite; } @keyframes aicl-skel { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* --------------------------------------------------------------- DOCK: Mode · Prompt · Style · Generate --------------------------------------------------------------- */ .aicl-dock { display: grid; grid-template-columns: 200px minmax(0, 1fr) 176px; min-width: 0; border: 1px solid var(--aicl-rim); border-radius: var(--radius-lg); background: var(--bg-surface); background: var(--aicl-toplight), var(--aicl-panel); box-shadow: var(--aicl-lift); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .aicl-studio .aicl-dock__label { margin: 0 0 8px; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; color: var(--text-primary); } .aicl-modes { min-width: 0; padding: 12px 10px 10px 14px; border-right: 1px solid var(--overlay-white-06); } .aicl-modes__list { display: flex; flex-direction: column; gap: 2px; } .aicl-studio .aicl-modes__list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 33px; padding: 0 11px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: .875rem; font-weight: 500; text-align: left; transition: color var(--motion-base) var(--aicl-ease), background-color var(--motion-base) var(--aicl-ease), border-color var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-modes__list button:hover:not([aria-disabled="true"]) { color: var(--text-primary); background: var(--overlay-white-04); } .aicl-studio .aicl-modes__list button[aria-checked="true"] { color: var(--text-primary); border-color: rgba(159, 150, 255, .45); background: linear-gradient(180deg, rgba(108, 92, 231, .32), rgba(108, 92, 231, .18)); box-shadow: 0 8px 24px -12px rgba(108, 92, 231, .8); } .aicl-studio .aicl-modes__list button[aria-disabled="true"] { color: var(--text-tertiary); } .aicl-soon { margin-left: auto; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--overlay-white-06); color: var(--text-tertiary); font-size: .6875rem; font-style: normal; font-weight: 600; } .aicl-compose { display: flex; flex-direction: column; min-width: 0; padding: 12px 18px 10px; } .aicl-compose__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: 8px; } .aicl-compose__head .aicl-dock__label { margin: 0; } .aicl-compose__tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; } /* Prompt tools: Inspire me is the one accented tool; the rest are quiet text buttons that show a surface only on hover. */ .aicl-studio .aicl-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-secondary); font-size: .8125rem; font-weight: 500; white-space: nowrap; transition: color var(--motion-base) var(--aicl-ease), border-color var(--motion-base) var(--aicl-ease), background-color var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-tool .aicl-icon { opacity: .8; transition: opacity var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-tool:hover { color: var(--text-primary); background: var(--overlay-white-06); } .aicl-studio .aicl-tool:hover .aicl-icon { opacity: 1; } .aicl-studio .aicl-tool--accent { padding: 0 12px; color: var(--interactive-soft-text); border-color: rgba(159, 150, 255, .32); background: linear-gradient(180deg, rgba(108, 92, 231, .2), rgba(108, 92, 231, .1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); } .aicl-studio .aicl-tool--accent .aicl-icon { opacity: 1; } .aicl-studio .aicl-tool--accent:hover { color: var(--text-primary); background: linear-gradient(180deg, rgba(108, 92, 231, .32), rgba(108, 92, 231, .18)); border-color: rgba(159, 150, 255, .55); } .aicl-compose__tools { gap: 2px; } .aicl-prompt { position: relative; padding: 10px 14px 7px; border: 1px solid var(--overlay-white-06); border-radius: var(--radius-md); background: rgba(0, 0, 0, .2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); transition: border-color var(--motion-slow) var(--aicl-ease), box-shadow var(--motion-slow) var(--aicl-ease), background-color var(--motion-slow) var(--aicl-ease); } .aicl-prompt:focus-within { border-color: rgba(159, 150, 255, .5); background: rgba(0, 0, 0, .26); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 4px rgba(108, 92, 231, .12); } .aicl-prompt.is-shake { animation: aicl-shake 380ms var(--aicl-ease); } @keyframes aicl-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } .aicl-studio .aicl-prompt__input { display: block; width: 100%; min-height: 2.6em; max-height: 6.6em; padding: 0; resize: none; border: 0; outline: 0; background: transparent; box-shadow: none; font-size: .9375rem; line-height: 1.55; color: var(--text-primary); } .aicl-studio .aicl-prompt__input::placeholder { color: var(--text-tertiary); opacity: 1; } .aicl-studio .aicl-prompt__input:focus-visible { outline: none; } .aicl-prompt__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: 6px; min-height: 30px; } .aicl-prompt__count { font-size: .75rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums; } .aicl-prompt__count.is-over { color: #ff8d9b; font-weight: 600; } .aicl-ref { display: flex; align-items: center; gap: 8px; } .aicl-studio .aicl-ref__add { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 8px; border-radius: 8px; color: var(--text-secondary); font-size: .8125rem; font-weight: 500; } .aicl-studio .aicl-ref__add:hover { color: var(--text-primary); background: var(--overlay-white-06); } .aicl-ref__item { position: relative; display: inline-flex; } .aicl-ref__item img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; border: 1px solid var(--iris-36); } .aicl-studio .aicl-ref__remove { position: absolute; top: -7px; right: -7px; display: inline-flex; padding: 3px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-primary); } .aicl-prompt__drop { position: absolute; inset: 0; display: none; place-items: center; border: 1.5px dashed var(--interactive-soft-text); border-radius: inherit; background: color-mix(in srgb, var(--bg-surface) 88%, transparent); font-size: .875rem; font-weight: 600; color: var(--interactive-soft-text); pointer-events: none; } .aicl-prompt.is-drag .aicl-prompt__drop { display: grid; } .aicl-neg { margin-top: 10px; } .aicl-neg summary { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; list-style: none; } .aicl-neg summary::-webkit-details-marker { display: none; } .aicl-neg summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: var(--overlay-white-06); font-size: .75rem; } .aicl-neg[open] summary::before { content: "−"; } .aicl-studio .aicl-neg__input { width: 100%; margin-top: 8px; padding: 10px 12px; resize: vertical; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--aicl-field); color: var(--text-primary); font-size: .875rem; line-height: 1.5; } .aicl-styles { margin-top: 8px; min-width: 0; } .aicl-styles .aicl-dock__label { margin-bottom: 8px; } /* Style row: no native scrollbar. The edges fade only on the side that has more styles (studio.js sets data-start / data-end), two glass arrows appear on mouse hover, and the mouse wheel scrolls the row sideways. Touch and arrow keys as before. */ @property --aicl-fl { syntax: ""; inherits: false; initial-value: 0px; } @property --aicl-fr { syntax: ""; inherits: false; initial-value: 0px; } .aicl-rail { position: relative; min-width: 0; } .aicl-styles__row { --aicl-fl: 0px; --aicl-fr: 56px; position: relative; display: flex; gap: 9px; overflow-x: auto; overscroll-behavior-x: contain; padding: 3px 3px 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--aicl-fl), #000 calc(100% - var(--aicl-fr)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--aicl-fl), #000 calc(100% - var(--aicl-fr)), transparent 100%); transition: --aicl-fl var(--motion-slow) var(--aicl-ease), --aicl-fr var(--motion-slow) var(--aicl-ease); } .aicl-styles__row::-webkit-scrollbar { display: none; } .aicl-styles__row[data-start] { --aicl-fl: 0px; } .aicl-styles__row:not([data-start]) { --aicl-fl: 44px; } .aicl-styles__row[data-end] { --aicl-fr: 0px; } .aicl-studio .aicl-rail__btn { position: absolute; top: 31px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); color: var(--text-primary); background: rgba(17, 18, 22, .62); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1); opacity: 0; pointer-events: none; transform: scale(.86); transition: opacity var(--motion-base) var(--aicl-ease), transform var(--motion-slow) var(--ease-enter), background-color var(--motion-base) var(--aicl-ease); } .aicl-rail__btn--prev { left: -4px; } .aicl-rail__btn--next { right: -4px; } .aicl-studio .aicl-rail__btn:hover { background: rgba(108, 92, 231, .6); } @media (hover: hover) and (pointer: fine) { .aicl-rail:hover .aicl-styles__row:not([data-start]) ~ .aicl-rail__btn--prev, .aicl-rail:hover .aicl-styles__row:not([data-end]) ~ .aicl-rail__btn--next { opacity: 1; pointer-events: auto; transform: none; } } .aicl-studio .aicl-style { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 58px; color: var(--text-secondary); font-size: .6875rem; font-weight: 500; line-height: 1.2; text-align: center; } .aicl-style__sw { position: relative; display: block; width: 54px; height: 54px; overflow: hidden; border-radius: 13px; border: 1.5px solid var(--overlay-white-10); background: var(--sw, var(--bg-elevated)); transition: border-color var(--motion-base) var(--aicl-ease), box-shadow var(--motion-base) var(--aicl-ease), transform var(--motion-base) var(--aicl-ease); } .aicl-style__sw img { width: 100%; height: 100%; object-fit: cover; display: block; } .aicl-studio .aicl-style:hover .aicl-style__sw { transform: translateY(-2px); } .aicl-studio .aicl-style[aria-checked="true"] { color: var(--text-primary); } .aicl-studio .aicl-style { transition: color var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-style[aria-checked="true"] .aicl-style__sw { border-color: var(--interactive-soft-text); box-shadow: 0 0 0 3px rgba(108, 92, 231, .3), 0 8px 22px -8px rgba(108, 92, 231, .7); } /* Generate — the one bold element */ @property --aicl-angle { syntax: ""; inherits: false; initial-value: 0deg; } .aicl-go { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 10px 0; } /* Two looks, one control: standby (nothing to generate yet) — dark Iris glass, the AI edge dimmed and still; ready — the lit Iris face (::after) fades in like a lamp being switched on, the edge starts to orbit and the halo breathes. Layers inside the button: ::after lit face (z -1) · ::before drifting sheen · __edge orbiting ring · icon and text on top. */ .aicl-studio .aicl-generate { position: relative; isolation: isolate; flex: 1; min-height: 120px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 22px; color: var(--acl-white); overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, rgba(159, 150, 255, .2), transparent 62%), linear-gradient(180deg, rgba(108, 92, 231, .2), rgba(108, 92, 231, .07)), rgba(14, 15, 20, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(159, 150, 255, .16), 0 18px 40px -26px rgba(108, 92, 231, .5); transition: transform var(--motion-fast) var(--aicl-ease), filter var(--motion-base) var(--aicl-ease), box-shadow var(--motion-stage) var(--ease-enter); } /* the lit face */ .aicl-studio .aicl-generate::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(110% 80% at 50% 0%, rgba(159, 150, 255, .55), transparent 62%), radial-gradient(90% 70% at 50% 110%, rgba(88, 199, 255, .22), transparent 70%), var(--interactive-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); opacity: 0; transition: opacity var(--motion-hero) var(--ease-enter); } /* a faint sheen that drifts slowly across the lit face */ .aicl-studio .aicl-generate::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(60% 50% at 50% 50%, rgba(255, 255, 255, .14), transparent 70%); opacity: 0; } .aicl-studio .aicl-generate > * { position: relative; z-index: 1; } /* Specificity matters: `.aicl-generate > *` above sets position:relative on every child, which used to collapse this ring to zero size (the "glow does nothing" bug). */ .aicl-studio .aicl-generate > .aicl-generate__edge { position: absolute; inset: 0; z-index: 0; padding: 1.5px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--aicl-angle), var(--acl-iris), var(--acl-ai-blue), var(--acl-ai-pink), var(--acl-iris)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .32; animation: aicl-orbit 6s linear infinite; animation-play-state: paused; transition: opacity var(--motion-hero) var(--ease-enter); } @keyframes aicl-orbit { to { --aicl-angle: 360deg; } } .aicl-generate__icon { color: var(--interactive-soft-text); transition: color var(--motion-stage) var(--ease-enter), filter var(--motion-stage) var(--ease-enter); } .aicl-generate__label { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: rgba(255, 255, 255, .86); transition: color var(--motion-stage) var(--ease-enter); } .aicl-generate__cost { font-size: .8125rem; font-weight: 500; color: var(--text-tertiary); font-variant-numeric: tabular-nums; text-align: center; line-height: 1.35; transition: color var(--motion-stage) var(--ease-enter); } .aicl-generate__cost s { opacity: .65; margin-right: 4px; } .aicl-studio .aicl-generate:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(159, 150, 255, .3), 0 18px 40px -24px rgba(108, 92, 231, .6); } .aicl-studio .aicl-generate:hover > .aicl-generate__edge { opacity: .5; } /* Ready: the lamp comes on. The halo is a separate layer behind the button (.aicl-go::before) that breathes with opacity only, so the button itself is never repainted by the idle animation. */ .aicl-go { position: relative; isolation: isolate; } .aicl-go::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; top: 18%; bottom: 10%; pointer-events: none; border-radius: 28px; background: rgba(108, 92, 231, .9); filter: blur(26px); opacity: 0; transform: translateY(10px); will-change: opacity; transition: opacity var(--motion-hero) var(--ease-enter); } .aicl-go.is-ready::before { opacity: .55; animation: aicl-breathe 7s var(--aicl-ease) 1s infinite; } .aicl-go.is-busy::before { animation: none; opacity: .7; } .aicl-studio .aicl-generate[data-ready="true"] { box-shadow: 0 0 0 1px rgba(159, 150, 255, .22); } .aicl-studio .aicl-generate[data-ready="true"]::after { opacity: 1; } .aicl-studio .aicl-generate[data-ready="true"]::before { animation: aicl-sheen 7s var(--aicl-ease) 1s infinite; } .aicl-studio .aicl-generate[data-ready="true"] > .aicl-generate__edge { opacity: 1; animation-play-state: running; } .aicl-studio .aicl-generate[data-ready="true"] .aicl-generate__icon { color: var(--acl-white); filter: drop-shadow(0 0 12px rgba(255, 255, 255, .55)); animation: aicl-icon-glow 7s var(--aicl-ease) 1s infinite; } .aicl-studio .aicl-generate[data-ready="true"] .aicl-generate__label { color: var(--acl-white); } .aicl-studio .aicl-generate[data-ready="true"] .aicl-generate__cost { color: rgba(255, 255, 255, .82); } .aicl-studio .aicl-generate[data-ready="true"]:hover { transform: translateY(-2px); filter: brightness(1.06); } .aicl-studio .aicl-generate:active { transform: translateY(0); filter: brightness(.96); } @keyframes aicl-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .85; } } @keyframes aicl-sheen { 0%, 100% { opacity: 0; transform: translateY(6%) scale(.9); } 50% { opacity: 1; transform: translateY(-4%) scale(1.05); } } @keyframes aicl-icon-glow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .45)); } 50% { filter: drop-shadow(0 0 16px rgba(255, 255, 255, .75)); } } /* Busy (generating): the spinner and faster edge take over; stop the idle breathe. */ .aicl-studio .aicl-generate[aria-busy="true"] { pointer-events: none; } .aicl-studio .aicl-generate[aria-busy="true"]::before { animation: none; opacity: 0; } .aicl-studio .aicl-generate[aria-busy="true"] .aicl-generate__icon { animation: aicl-spin 1.2s linear infinite; } .aicl-studio .aicl-generate[aria-busy="true"] .aicl-generate__edge { opacity: 1; animation-play-state: running; animation-duration: 1.4s; } @keyframes aicl-spin { to { transform: rotate(360deg); } } .aicl-studio .aicl-go__hint { margin: 0; text-align: center; font-size: .6875rem; color: var(--text-tertiary); } /* --------------------------------------------------------------- PARAMETERS --------------------------------------------------------------- */ .aicl-params { gap: 10px; padding: 0 14px 14px; overflow-y: auto; overflow-x: visible; } .aicl-panel__head--compact { padding: 12px 0 0; } .aicl-studio .aicl-params .aicl-panel__head .aicl-tool { min-height: 30px; padding: 0 9px; gap: 5px; font-size: .75rem; } .aicl-params .aicl-panel__head .aicl-tool .aicl-icon { width: 14px; height: 14px; } .aicl-params .aicl-param { gap: 6px; } .aicl-params .aicl-param--row { min-height: 34px; } .aicl-params .aicl-seg--small { padding: 3px; } .aicl-studio .aicl-params .aicl-seg--small button { min-height: 28px; } .aicl-studio .aicl-params__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.2; } .aicl-param { display: flex; flex-direction: column; gap: 8px; } .aicl-param--row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); } .aicl-studio .aicl-param__label { margin: 0; font-size: .8125rem; font-weight: 500; color: var(--text-secondary); } .aicl-select { position: relative; } .aicl-studio .aicl-select__btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 0 12px 0 14px; border: 1px solid var(--overlay-white-06); border-radius: var(--radius-sm); background: rgba(0, 0, 0, .2); text-align: left; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); transition: border-color var(--motion-base) var(--aicl-ease), background-color var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-select__btn:hover, .aicl-studio .aicl-select__btn[aria-expanded="true"] { border-color: var(--iris-36); background: rgba(0, 0, 0, .26); } .aicl-select__btn .aicl-icon--chevron-down { transition: transform var(--motion-slow) var(--ease-enter); } .aicl-select__btn[aria-expanded="true"] .aicl-icon--chevron-down { transform: rotate(180deg); } .aicl-select__value { font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aicl-select__meta { margin-left: auto; font-size: .75rem; color: var(--text-tertiary); white-space: nowrap; } .aicl-select__btn .aicl-icon--chevron-down { color: var(--text-tertiary); } .aicl-select__list { position: fixed; z-index: 60; width: 340px; max-height: min(460px, 70vh); margin: 0; padding: 6px; list-style: none; overflow-y: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-elevated); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 0, 0, .55); outline: none; animation: aicl-pop var(--motion-slow) var(--ease-enter); } .aicl-opt__group { padding: 10px 10px 4px; font-size: .6875rem; font-weight: 600; color: var(--text-tertiary); } .aicl-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 10px; border-radius: 11px; cursor: pointer; } .aicl-opt:hover, .aicl-opt.is-active { background: var(--overlay-white-06); } .aicl-opt[aria-selected="true"] { background: var(--iris-16); } .aicl-opt[aria-disabled="true"] { opacity: .5; } .aicl-opt__tier { grid-row: 1 / 3; color: var(--interactive-soft-text); display: inline-flex; } .aicl-opt__name { font-size: .875rem; font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; } .aicl-opt__cost { font-size: .75rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } .aicl-opt__desc { grid-column: 2 / 4; font-size: .75rem; line-height: 1.4; color: var(--text-tertiary); } .aicl-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--iris-24); color: var(--interactive-soft-text); font-size: .625rem; font-weight: 700; line-height: 1.5; } .aicl-tag--promo { background: rgba(39, 138, 97, .18); color: #7fd8b0; } .aicl-tag--lock { background: var(--overlay-white-06); color: var(--text-tertiary); } .aicl-range { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: flex-end; } .aicl-studio .aicl-range input { width: 120px; accent-color: var(--interactive-primary); } .aicl-range output { min-width: 34px; font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .aicl-ratios { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 5px; } .aicl-studio .aicl-ratio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 42px; padding: 4px 0; border: 1px solid var(--overlay-white-06); border-radius: 10px; background: rgba(0, 0, 0, .16); color: var(--text-secondary); font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: color var(--motion-base) var(--aicl-ease), border-color var(--motion-base) var(--aicl-ease), background-color var(--motion-base) var(--aicl-ease); } .aicl-ratio__shape { display: block; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); border: 1.5px solid currentColor; border-radius: 3px; } .aicl-studio .aicl-ratio:hover { color: var(--text-primary); border-color: var(--overlay-white-16); } .aicl-studio .aicl-ratio[aria-checked="true"] { color: var(--text-primary); border-color: rgba(159, 150, 255, .6); background: var(--iris-16); } /* --------------------------------------------------------------- BUTTONS (dialogs, empty states) --------------------------------------------------------------- */ .aicl-studio .aicl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: .9375rem; font-weight: 600; line-height: 1.1; text-decoration: none; white-space: nowrap; transition: background-color var(--motion-base) var(--aicl-ease), border-color var(--motion-base) var(--aicl-ease), color var(--motion-base) var(--aicl-ease), transform var(--motion-fast) var(--aicl-ease); } .aicl-studio .aicl-btn--primary { background: var(--interactive-primary); color: var(--acl-white); } .aicl-studio .aicl-btn--primary:hover { background: var(--interactive-hover); color: var(--acl-white); transform: translateY(-1px); } .aicl-studio .aicl-btn--soft { background: var(--iris-16); border-color: var(--iris-36); color: var(--text-primary); } .aicl-studio .aicl-btn--soft:hover { background: var(--iris-24); color: var(--text-primary); } .aicl-studio .aicl-btn--ghost { color: var(--text-primary); border-color: var(--border-default); } .aicl-studio .aicl-btn--ghost:hover { background: var(--overlay-white-06); border-color: var(--border-strong); color: var(--text-primary); } .aicl-studio .aicl-btn--danger { background: var(--acl-danger); color: var(--acl-white); } .aicl-studio .aicl-btn--google { background: var(--acl-white); color: var(--acl-ink); } .aicl-studio .aicl-btn--google:hover { background: #ECECEF; color: var(--acl-ink); } .aicl-studio .aicl-btn--block { width: 100%; } /* --------------------------------------------------------------- DIALOGS --------------------------------------------------------------- */ .aicl-studio .aicl-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-xl); background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 40px 120px rgba(0, 0, 0, .65); } .aicl-dialog[open] { animation: aicl-pop var(--motion-slow) var(--ease-enter); } .aicl-dialog::backdrop { background: var(--backdrop); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } @keyframes aicl-pop { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } } .aicl-dialog__close-form { position: absolute; top: 14px; right: 14px; z-index: 2; margin: 0; } .aicl-studio .aicl-dialog__close { border-color: transparent; background: transparent; } .aicl-auth { padding: 44px 40px 32px; text-align: center; } .aicl-studio .aicl-auth__title { margin: 0 0 10px; font-family: var(--font-serif); font-size: 2.25rem; font-weight: 400; line-height: 1.05; letter-spacing: -.02em; } .aicl-studio .aicl-auth__lead { margin: 0 auto 26px; max-width: 34ch; color: var(--text-secondary); font-size: .9375rem; line-height: 1.55; } .aicl-auth .aicl-btn { width: 100%; margin-bottom: 10px; } .aicl-studio .aicl-auth__or { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; color: var(--text-tertiary); font-size: .8125rem; } .aicl-auth__or::before, .aicl-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--border-default); } .aicl-studio .aicl-auth__note { margin: 14px 0 6px; font-size: .8125rem; color: var(--text-secondary); } .aicl-studio .aicl-auth__legal { margin: 0; font-size: .75rem; color: var(--text-tertiary); } .aicl-auth__legal a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: .2em; } .aicl-studio .aicl-dialog--sheet { position: fixed; inset: 0 0 0 auto; width: min(520px, 100vw); height: 100dvh; max-height: 100dvh; margin: 0; border-width: 0 0 0 1px; border-radius: var(--radius-xl) 0 0 var(--radius-xl); } .aicl-dialog--sheet[open] { animation: aicl-slide var(--motion-stage) var(--ease-enter); } @keyframes aicl-slide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } .aicl-shop { padding: 34px 28px 32px; } .aicl-studio .aicl-shop__title { margin: 0 0 6px; font-family: var(--font-serif); font-size: 2.5rem; font-weight: 400; line-height: 1; letter-spacing: -.02em; } .aicl-studio .aicl-shop__balance { margin: 0 0 22px; color: var(--text-secondary); font-size: .9375rem; } .aicl-shop__balance strong { color: var(--text-primary); font-variant-numeric: tabular-nums; } .aicl-shop__first { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid rgba(159, 150, 255, .4); border-radius: var(--radius-md); background: linear-gradient(120deg, rgba(108, 92, 231, .22), rgba(88, 199, 255, .08)); font-size: .875rem; line-height: 1.45; } .aicl-shop__first .aicl-icon { color: var(--interactive-soft-text); } .aicl-packs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .aicl-studio .aicl-pack { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 168px; padding: 20px 16px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--overlay-white-04); text-align: left; transition: border-color var(--motion-base) var(--aicl-ease), background-color var(--motion-base) var(--aicl-ease), transform var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-pack:hover { border-color: rgba(159, 150, 255, .55); background: var(--iris-08); transform: translateY(-2px); } .aicl-studio .aicl-pack.is-featured { border-color: rgba(159, 150, 255, .5); background: var(--iris-12); } .aicl-pack__badge { position: absolute; top: -10px; left: 14px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--interactive-primary); color: var(--acl-white); font-size: .6875rem; font-weight: 700; } .aicl-pack__name { font-size: .8125rem; font-weight: 600; color: var(--text-secondary); } .aicl-pack__credits { font-size: 1.875rem; font-weight: 600; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .aicl-pack__credits small { font-size: .8125rem; font-weight: 500; color: var(--text-secondary); letter-spacing: 0; } .aicl-pack__bonus { font-size: .75rem; font-weight: 600; color: #7fd8b0; } .aicl-pack__price { margin-top: auto; padding-top: 10px; font-size: 1.0625rem; font-weight: 600; font-variant-numeric: tabular-nums; } .aicl-pack__price s { margin-right: 6px; font-size: .8125rem; font-weight: 500; color: var(--text-tertiary); } .aicl-pack__desc { font-size: .75rem; line-height: 1.4; color: var(--text-tertiary); } .aicl-pack__offers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .aicl-studio .aicl-shop__note { margin: 16px 0 0; font-size: .75rem; line-height: 1.55; color: var(--text-tertiary); } .aicl-invite { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border-default); } .aicl-studio .aicl-invite__title { margin: 0 0 6px; font-family: var(--font-serif); font-size: 1.625rem; font-weight: 400; line-height: 1.1; } .aicl-studio .aicl-invite__lead { margin: 0 0 14px; font-size: .875rem; line-height: 1.55; color: var(--text-secondary); } .aicl-invite__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; } .aicl-invite__tiers li { display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 9px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--overlay-white-04); } .aicl-invite__tiers strong { font-size: 1.125rem; font-weight: 600; color: var(--interactive-soft-text); font-variant-numeric: tabular-nums; } .aicl-invite__tiers span { font-size: .6875rem; color: var(--text-tertiary); font-variant-numeric: tabular-nums; } .aicl-invite__link { display: flex; gap: 8px; } .aicl-studio .aicl-invite__link input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--aicl-field); color: var(--text-secondary); font-size: .8125rem; } .aicl-studio .aicl-invite__stats { margin: 10px 0 0; font-size: .75rem; color: var(--text-tertiary); } .aicl-studio .aicl-dialog--prompt { width: min(880px, calc(100vw - 32px)); } .aicl-pd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .aicl-pd__media { background: var(--bg-elevated); min-height: 320px; } .aicl-studio .aicl-pd__media img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 78vh; } .aicl-pd__body { display: flex; flex-direction: column; gap: 12px; padding: 36px 28px 28px; } .aicl-studio .aicl-pd__title { margin: 0; padding-right: 32px; font-family: var(--font-serif); font-size: 1.875rem; font-weight: 400; line-height: 1.1; } .aicl-studio .aicl-pd__meta { margin: 0; font-size: .8125rem; color: var(--text-tertiary); } .aicl-studio .aicl-pd__prompt { margin: 0; padding: 14px 16px; max-height: 260px; overflow-y: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--aicl-field); font-size: .875rem; line-height: 1.6; color: var(--text-secondary); white-space: pre-wrap; } .aicl-pd__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; } .aicl-studio .aicl-pd__actions [aria-pressed="true"] svg { fill: currentColor; } .aicl-studio .aicl-dialog--enhance { width: min(820px, calc(100vw - 32px)); } .aicl-en { padding: 30px 28px 26px; } .aicl-studio .aicl-en__title { margin: 0 0 18px; font-family: var(--font-serif); font-size: 2rem; font-weight: 400; line-height: 1.05; } .aicl-en__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .aicl-en__col { padding: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--aicl-field); } .aicl-en__col--new { border-color: rgba(159, 150, 255, .5); background: var(--iris-08); } .aicl-studio .aicl-en__text { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--text-secondary); } .aicl-en__text mark { background: none; color: var(--interactive-soft-text); } .aicl-en__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .aicl-studio .aicl-dialog--lightbox { width: auto; max-width: calc(100vw - 32px); border: 0; background: transparent; box-shadow: none; overflow: visible; } .aicl-studio .aicl-dialog--lightbox img { display: block; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); border-radius: var(--radius-md); } .aicl-studio .aicl-dialog--confirm { width: min(420px, calc(100vw - 32px)); } .aicl-confirm { padding: 26px 24px 20px; } .aicl-studio .aicl-confirm__title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 600; } .aicl-studio .aicl-confirm__body { margin: 0 0 20px; font-size: .9375rem; line-height: 1.55; color: var(--text-secondary); } .aicl-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; } /* Menu */ .aicl-menu { position: fixed; z-index: 1000; min-width: 210px; padding: 6px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-elevated); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .55); } .aicl-menu:not([hidden]) { animation: aicl-pop var(--motion-slow) var(--ease-enter); } .aicl-studio .aicl-menu button, .aicl-studio .aicl-menu a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border-radius: 9px; color: var(--text-primary); font-size: .875rem; font-weight: 500; text-decoration: none; text-align: left; } .aicl-studio .aicl-menu button:hover, .aicl-studio .aicl-menu a:hover, .aicl-studio .aicl-menu :focus-visible { background: var(--overlay-white-06); outline: none; } .aicl-studio .aicl-menu .is-danger { color: #ff8d9b; } .aicl-menu__label { padding: 8px 10px 6px; font-size: .75rem; color: var(--text-tertiary); } .aicl-menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--border-default); } /* Toast */ .aicl-toast { position: fixed; left: 50%; bottom: calc(28px + var(--acl-consent-space, 0px)); z-index: 1100; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 14px 12px 18px; border-radius: var(--radius-pill); background: var(--acl-white); color: var(--acl-ink); font-size: .9375rem; font-weight: 600; line-height: 1.35; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translate(-50%, 12px); pointer-events: none; transition: opacity var(--motion-base) var(--aicl-ease), transform var(--motion-slow) var(--ease-enter), visibility 0s linear var(--motion-slow); } .aicl-toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--acl-success); } .aicl-toast[data-tone="error"]::before { background: var(--acl-danger); } .aicl-toast[data-tone="info"]::before { background: var(--acl-iris); } .aicl-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition: opacity var(--motion-base) var(--aicl-ease), transform var(--motion-slow) var(--ease-enter), visibility 0s; } .aicl-studio .aicl-toast__action { margin-left: 4px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--acl-ink); color: var(--acl-white); font-size: .8125rem; font-weight: 600; } /* --------------------------------------------------------------- RESPONSIVE --------------------------------------------------------------- */ /* Narrow and short desktop windows WITHOUT the fit (see FIT below): touch-only screens, windows too small to scale, or a theme template without the fit script. `:where(:not(.is-fit))` switches them off while the workspace is being fitted and adds no specificity, so the tablet and phone rules further down still win. */ @media (max-width: 1440px) { .aicl-studio:where(:not(.is-fit)) { --aicl-left: 260px; --aicl-right: 292px; } :where(.aicl-studio:not(.is-fit)) .aicl-dock { grid-template-columns: 184px minmax(0, 1fr) 160px; } } @media (max-width: 1240px) { .aicl-studio:where(:not(.is-fit)) { --aicl-right: 276px; } :where(.aicl-studio:not(.is-fit)) .aicl-compose__tools .aicl-tool span { display: none; } :where(.aicl-studio:not(.is-fit)) .aicl-compose__tools .aicl-tool--accent span { display: inline; } } /* Modes on one row above the prompt, so the prompt keeps a usable width. */ @media (max-width: 1380px) { :where(.aicl-studio:not(.is-fit)) .aicl-dock { grid-template-columns: minmax(0, 1fr) 150px; grid-template-rows: auto auto; } :where(.aicl-studio:not(.is-fit)) .aicl-modes { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--border-default); padding-bottom: 12px; } :where(.aicl-studio:not(.is-fit)) .aicl-modes .aicl-dock__label { display: none; } :where(.aicl-studio:not(.is-fit)) .aicl-modes__list { flex-direction: row; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); } :where(.aicl-studio:not(.is-fit)) .aicl-modes__list::-webkit-scrollbar { display: none; } .aicl-studio:where(:not(.is-fit)) .aicl-modes__list button { width: auto; flex: none; } } /* Short windows: tighten the vertical rhythm. */ @media (min-width: 961px) and (max-height: 860px) { .aicl-studio:where(:not(.is-fit)) { --aicl-bar-h: 50px; --aicl-gap: 10px; } .aicl-studio:where(:not(.is-fit)) .aicl-bar__title { font-size: clamp(1.625rem, 2vw, 2rem); } :where(.aicl-studio:not(.is-fit)) .aicl-ws { grid-template-rows: minmax(220px, 1fr) min-content; min-height: 520px; } :where(.aicl-studio:not(.is-fit)) .aicl-side > .aicl-library { min-height: 180px; } :where(.aicl-studio:not(.is-fit)) .aicl-modes { padding-top: 10px; padding-bottom: 8px; } .aicl-studio:where(:not(.is-fit)) .aicl-modes__list button { min-height: 30px; } .aicl-studio:where(:not(.is-fit)) .aicl-generate { min-height: 84px; gap: 4px; border-radius: 18px; } :where(.aicl-studio:not(.is-fit)) .aicl-generate__icon { width: 24px; height: 24px; } :where(.aicl-studio:not(.is-fit)) .aicl-generate__label { font-size: 1.25rem; } .aicl-studio:where(:not(.is-fit)) .aicl-go__hint { display: none; } } /* FIT — laptops get the large-screen layout, scaled to the screen (frontend/js/fit.js). A 1920×1080 laptop at 150% Windows scaling is only ~1280×620 CSS px, which is why the Studio looked right at 67% browser zoom and broken at 100%. fit.js measures the room under the site header and sets: --aicl-z scale for the title bar and workspace (1 on large screens) --aicl-fit-h that room in layout px, so the workspace ends at the bottom of the screen The site header, dialogs, menus and toasts are outside the scaled area and keep their normal size. */ @media (min-width: 961px) { .aicl-studio.is-fit > .aicl-bar, .aicl-studio.is-fit > .aicl-ws { zoom: var(--aicl-z, 1); } .aicl-studio.is-fit > .aicl-ws { height: max(580px, calc(var(--aicl-fit-h, 760px) - var(--aicl-bar-h))); min-height: 0; grid-template-rows: minmax(240px, 1fr) min-content; } /* Full screen fills the real screen, so it goes back to normal size. */ .aicl-studio.is-fit .aicl-stage:fullscreen { zoom: var(--aicl-z-inv, 1); } } @media (max-width: 960px) { .aicl-studio { --aicl-bar-h: 64px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .aicl-ws { display: flex; flex-direction: column; height: auto; min-height: 0; } .aicl-stage { order: 1; height: min(72svh, 620px); flex: none; } .aicl-dock { order: 2; grid-template-columns: minmax(0, 1fr); } .aicl-params { order: 3; overflow: visible; } .aicl-creations { order: 4; max-height: none; } .aicl-library { order: 5; max-height: 640px; } .aicl-ws[data-right="collapsed"] .aicl-library { display: flex; } .aicl-panel__toggle, [data-aicl-show-library] { display: none !important; } /* My Creations on phones and tablets: the same frames, hung in one sideways row */ .aicl-creations .aicl-clist { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 16px; padding: 0 18px 16px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } .aicl-creations .aicl-citem { flex: none; width: 196px; } .aicl-creations [data-aicl-cempty] { padding: 10px 18px 18px; } .aicl-cempty { max-width: 196px; } .aicl-cempty__ghosts { display: none; } /* + --acl-consent-space: the theme's cookie card (theme 0.9.17+) sits at the screen bottom on first visits; the bar waits above it and comes back down when the card closes. 0 when the theme has no card. */ .aicl-go { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom) + var(--acl-consent-space, 0px)); padding: 0; } .aicl-studio .aicl-generate { flex-direction: row; min-height: 60px; border-radius: var(--radius-pill); gap: 12px; } .aicl-generate__icon { width: 22px; height: 22px; } .aicl-generate__label { font-size: 1.125rem; } .aicl-go__hint { display: none; } .aicl-canvas { inset: 60px 14px 76px; } .aicl-actions__btn span { display: none; } .aicl-studio .aicl-actions__btn { width: 42px; padding: 0; justify-content: center; } .aicl-batch { display: none !important; } .aicl-pd { grid-template-columns: 1fr; } .aicl-pd__media { min-height: 0; } .aicl-studio .aicl-pd__media img { max-height: 46vh; } } @media (max-width: 600px) { .aicl-studio .aicl-bar__title { font-size: 2rem; } .aicl-studio:not([data-aicl-studio]) .aicl-bar__context { display: none; } .aicl-credits__unit { display: none; } .aicl-packs { grid-template-columns: 1fr; } .aicl-en__cols { grid-template-columns: 1fr; } .aicl-auth { padding: 40px 22px 26px; } .aicl-studio .aicl-dialog--sheet { border-radius: 0; } .aicl-compose__tools .aicl-tool--accent span { display: none; } } @media (prefers-reduced-motion: reduce) { .aicl-studio *, .aicl-studio *::before, .aicl-studio *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } .aicl-atmos__orb { opacity: 1; } } /* --------------------------------------------------------------- PROMPT LIBRARY v2 — images first, drifting columns --------------------------------------------------------------- */ .aicl-panel__head--library { padding: 14px 12px 8px 18px; } /* One line at every desktop width: a wrapped title costs a row of images. */ .aicl-studio .aicl-library .aicl-panel__title { min-width: 0; font-size: clamp(1.375rem, calc(var(--aicl-vw) * 1.75), 1.875rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aicl-panel__tools { display: flex; align-items: center; gap: 2px; } .aicl-studio .aicl-icon-btn--sm { width: 30px; height: 30px; border-radius: 9px; } .aicl-studio .aicl-viewall { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 9px; border-radius: 9px; color: var(--text-secondary); font-size: .75rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .aicl-studio .aicl-viewall:hover { color: var(--text-primary); background: var(--overlay-white-06); } .aicl-seg--compact { margin: 0 12px 10px; padding: 3px; } .aicl-studio .aicl-seg--compact button { min-height: 28px; padding: 0 6px; font-size: .75rem; border-radius: 8px; } .aicl-lflow { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 10px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 90%, transparent 100%); } .aicl-lflow.is-static { overflow-y: auto; align-items: start; scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); } .aicl-lflow.is-static::-webkit-scrollbar { display: none; } .aicl-lflow__col { min-width: 0; } .aicl-lflow__track { display: flex; flex-direction: column; gap: 8px; } .aicl-lflow.is-moving .aicl-lflow__track { will-change: transform; } .aicl-lflow.is-static .aicl-lflow__track { padding-bottom: 28px; } .aicl-lflow__set { display: flex; flex-direction: column; gap: 8px; } .aicl-lflow .aicl-skel { width: 100%; border-radius: 14px; } .aicl-studio .aicl-lflow .aicl-lcard { position: relative; display: block; width: 100%; overflow: hidden; padding: 0; border: 1px solid var(--overlay-white-06); border-radius: 14px; background: var(--bg-elevated); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); } .aicl-studio .aicl-lflow .aicl-lcard:hover { border-color: rgba(159, 150, 255, .5); } .aicl-studio .aicl-lcard__open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; text-align: left; } .aicl-lcard__open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-stage) var(--ease-enter); } .aicl-studio .aicl-lflow .aicl-lcard:hover img { transform: scale(1.06); } .aicl-lflow .aicl-lcard__title { padding: 28px 58px 9px 10px; } .aicl-studio .aicl-lflow .aicl-lcard:hover .aicl-lcard__title, .aicl-studio .aicl-lflow .aicl-lcard:focus-within .aicl-lcard__title { opacity: 1; transform: none; } .aicl-studio .aicl-lcard__use { position: absolute; right: 7px; bottom: 7px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 11px 0 9px; border-radius: var(--radius-pill); background: rgba(8, 9, 11, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--acl-white); font-size: .6875rem; font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity var(--motion-base) var(--aicl-ease), transform var(--motion-base) var(--aicl-ease), background-color var(--motion-base) var(--aicl-ease); } .aicl-studio .aicl-lflow .aicl-lcard:hover .aicl-lcard__use, .aicl-studio .aicl-lflow .aicl-lcard:focus-within .aicl-lcard__use { opacity: 1; transform: none; } .aicl-studio .aicl-lcard__use:hover { background: var(--interactive-primary); } .aicl-lflow .aicl-lcard__saved { z-index: 2; } .aicl-lflow .aicl-lcard--text .aicl-lcard__open { display: flex; align-items: flex-end; padding: 12px; } .aicl-library > .aicl-panel__empty { flex: 1; } @media (hover: none) { .aicl-studio .aicl-lcard__use { opacity: 1; transform: none; } } @media (max-width: 960px) { .aicl-library { height: 560px; max-height: none; } } /* --------------------------------------------------------------- PHONES & TOUCH (0.1.21) Nothing here touches the fitted desktop layout: these rules only apply on screens 960px and narrower, or on touch screens. --------------------------------------------------------------- */ @media (max-width: 960px) { /* iOS zooms the whole page when a focused field is set under 16px. */ .aicl-studio .aicl-prompt__input, .aicl-studio textarea, .aicl-studio select, .aicl-studio input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) { font-size: max(1rem, 16px); } .aicl-studio .aicl-prompt__input { min-height: 3.1em; max-height: 8em; } /* Fixed lists and menus never run past the screen edge. */ .aicl-select__list { max-width: calc(100vw - 16px); max-height: min(420px, 60dvh); } .aicl-menu { max-width: calc(100vw - 16px); } /* Dialogs take the width of the phone; the side sheet is the whole screen, with the notch and the home indicator kept clear. */ .aicl-studio .aicl-dialog:not(.aicl-dialog--sheet):not(.aicl-dialog--lightbox) { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); } .aicl-studio .aicl-dialog--sheet { width: 100vw; max-height: 100dvh; border-width: 0; border-radius: 0; } .aicl-dialog__close-form { top: max(10px, env(safe-area-inset-top, 0px)); right: 10px; } .aicl-shop { padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px)); } .aicl-pd__body { padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)); } .aicl-en { padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px)); } .aicl-studio .aicl-dialog--lightbox { max-width: 100vw; } .aicl-studio .aicl-dialog--lightbox img { max-width: 100vw; max-height: 100dvh; border-radius: 0; } /* The Generate bar and the toast clear the home indicator and the rounded corners. */ .aicl-go { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); } .aicl-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px) + var(--acl-consent-space, 0px)); max-width: calc(100vw - 24px); } } @media (max-width: 600px) { /* Phones: dialogs rise from the bottom as sheets (one thumb away), the sheet keeps its slide. */ .aicl-studio .aicl-dialog:not(.aicl-dialog--sheet):not(.aicl-dialog--lightbox) { position: fixed; inset: auto 0 0 0; width: 100vw; max-height: 100dvh; margin: 0; border-width: 1px 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .aicl-auth { padding: 36px 22px calc(24px + env(safe-area-inset-bottom, 0px)); } .aicl-confirm { padding: 24px 20px calc(16px + env(safe-area-inset-bottom, 0px)); } .aicl-studio .aicl-pd__media img { max-height: 40vh; } } @media (pointer: coarse) { /* Every control reads 40px or more under a thumb; the layout only gains a few px. */ .aicl-studio .aicl-seg button, .aicl-studio .aicl-seg--small button, .aicl-studio .aicl-seg--compact button, .aicl-studio .aicl-params .aicl-seg--small button { min-height: 40px; } .aicl-studio .aicl-tool, .aicl-studio .aicl-params .aicl-panel__head .aicl-tool, .aicl-studio .aicl-viewall, .aicl-studio .aicl-ref__add, .aicl-studio .aicl-more, .aicl-studio .aicl-preview-chip { min-height: 40px; } .aicl-studio .aicl-icon-btn--sm { width: 36px; height: 36px; } .aicl-studio .aicl-modes__list button { min-height: 40px; } .aicl-studio .aicl-ratio { min-height: 48px; } .aicl-studio .aicl-citem__more { width: 38px; height: 38px; } .aicl-studio .aicl-lcard__use { min-height: 34px; } .aicl-opt { padding: 12px 10px; } .aicl-studio .aicl-menu [role="menuitem"] { min-height: 44px; } /* Hover-only affordances are always on under a thumb. */ .aicl-studio .aicl-tool .aicl-icon { opacity: 1; } /* A press answers immediately (no 200ms hover transition to wait for). */ .aicl-studio .aicl-modes__list button:active, .aicl-studio .aicl-seg button:active, .aicl-studio .aicl-ratio:active, .aicl-studio .aicl-tool:active, .aicl-studio .aicl-icon-btn:active { transition-duration: var(--motion-instant); } } /* --------------------------------------------------------------- SHARE SHEET — six places, one link, nothing public until used. A centred card on computers, a sheet from the bottom on phones (the shared DIALOGS rules above). --------------------------------------------------------------- */ .aicl-studio .aicl-share { width: min(520px, calc(100vw - 32px)); padding: 22px 22px 18px; } .aicl-share.is-closing { animation: aicl-share-out .2s ease both; } @keyframes aicl-share-out { to { opacity: 0; transform: translateY(8px); } } .aicl-share__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .aicl-share__thumb { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 12px; background: var(--overlay-white-06); box-shadow: 0 0 0 1px var(--overlay-white-10); } .aicl-share__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .aicl-share__heading { flex: 1; min-width: 0; } .aicl-studio .aicl-share__title { margin: 0; font-family: var(--font-serif); font-size: 1.75rem; font-weight: 400; line-height: 1.05; letter-spacing: -.015em; } .aicl-studio .aicl-share__what { margin: 5px 0 0; overflow: hidden; color: var(--text-secondary); font-size: .875rem; white-space: nowrap; text-overflow: ellipsis; } .aicl-studio .aicl-share__close { align-self: flex-start; margin: -6px -6px 0 0; border-color: transparent; background: transparent; } .aicl-share__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 -6px 18px; } .aicl-studio .aicl-share__net { display: grid; justify-items: center; gap: 8px; min-width: 0; padding: 10px 2px 8px; margin: 0; border: 0; border-radius: 16px; background: transparent; color: var(--text-secondary); font: 600 .75rem/1.1 var(--font-sans); cursor: pointer; transition: background-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard); } .aicl-studio .aicl-share__net:hover { background: var(--overlay-white-06); color: var(--text-primary); } .aicl-studio .aicl-share__net:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; } .aicl-share__name { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .aicl-share__tile { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 24px -14px rgba(0, 0, 0, .9); transition: transform var(--motion-base) var(--ease-spring-soft); } .aicl-share__tile svg { width: 26px; height: 26px; } .aicl-share__net:hover .aicl-share__tile { transform: translateY(-2px); } .aicl-share__net:active .aicl-share__tile { transform: scale(.94); } .aicl-share__tile[data-net="instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); } .aicl-share__tile[data-net="threads"], .aicl-share__tile[data-net="x"] { background: #000; } .aicl-share__tile[data-net="facebook"] { background: #1877f2; } .aicl-share__tile[data-net="pinterest"] { background: #e60023; } .aicl-share__tile[data-net="whatsapp"] { background: #25d366; } /* Opened: a small check on the tile, so it is clear what was already done. */ .aicl-share__net.is-done .aicl-share__tile::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; background: #2fbf71 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 0 0 2px var(--bg-surface); animation: aicl-share-pop .35s var(--ease-spring-soft); } @keyframes aicl-share-pop { from { transform: scale(.4); opacity: 0; } } .aicl-share__row { display: flex; gap: 8px; } .aicl-studio .aicl-share__link { flex: 1; min-width: 0; height: 44px; padding: 0 14px; margin: 0; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-page); color: var(--text-primary); font: 500 .875rem/1 var(--font-sans); text-overflow: ellipsis; } .aicl-share:not(.is-ready):not(.is-blocked) .aicl-share__link { background: linear-gradient(90deg, transparent 0, var(--overlay-white-06) 50%, transparent 100%) 0 0 / 200% 100% no-repeat, var(--bg-page); animation: aicl-share-wait 1.2s linear infinite; } @keyframes aicl-share-wait { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } } .aicl-studio .aicl-share__copy { flex: none; min-height: 44px; } .aicl-studio .aicl-share__copy.is-done { border-color: rgba(47, 191, 113, .5); background: rgba(47, 191, 113, .14); } .aicl-studio .aicl-share__more { width: 100%; min-height: 44px; margin-top: 8px; } .aicl-share__opt { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; font-size: .875rem; font-weight: 500; color: var(--text-primary); cursor: pointer; } .aicl-share__opt small { display: block; margin-top: 3px; color: var(--text-tertiary); font-size: .8125rem; font-weight: 400; } .aicl-studio .aicl-share__switch { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 38px; height: 22px; margin: 1px 0 0; border-radius: 11px; background: var(--overlay-white-16); cursor: pointer; transition: background-color var(--motion-base) var(--ease-standard); } .aicl-share__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform var(--motion-base) var(--ease-spring-soft); } .aicl-share__switch:checked { background: var(--interactive-primary); } .aicl-share__switch:checked::after { transform: translateX(16px); } .aicl-share__switch:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; } .aicl-studio .aicl-share__status { margin: 12px 0 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.45; } .aicl-share__status:empty { display: none; } .aicl-studio .aicl-share__status.is-error { color: #ffb0ba; } .aicl-share.is-blocked .aicl-share__grid, .aicl-share.is-blocked .aicl-share__more { opacity: .38; pointer-events: none; } .aicl-share.is-blocked .aicl-share__opt, .aicl-share.is-blocked .aicl-share__foot { display: none; } .aicl-studio .aicl-share__copy:disabled { opacity: .45; cursor: default; } .aicl-studio .aicl-share__foot { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border-default); color: var(--text-tertiary); font-size: .8125rem; line-height: 1.5; } .aicl-studio .aicl-share__stop { margin: 0; padding: 0; border: 0; background: none; color: var(--text-secondary); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } .aicl-studio .aicl-share__stop:hover { color: var(--text-primary); } /* The action button says when the image already has a live link. */ .aicl-actions__btn.is-shared { position: relative; } .aicl-actions__btn.is-shared::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 2px var(--bg-surface); } @media (max-width: 600px) { .aicl-studio .aicl-share { padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); } .aicl-share__grid { gap: 2px; margin: 0 -8px 16px; } .aicl-share__tile { width: 48px; height: 48px; border-radius: 15px; } .aicl-studio .aicl-share__net { font-size: .6875rem; padding: 8px 0 6px; } .aicl-studio .aicl-share__title { font-size: 1.5rem; } .aicl-share__thumb { width: 48px; height: 48px; } } @media (max-width: 420px) { .aicl-studio .aicl-share__net { font-size: .625rem; letter-spacing: -.01em; } } @media (max-width: 360px) { .aicl-share__tile { width: 42px; height: 42px; border-radius: 13px; } .aicl-share__tile svg { width: 22px; height: 22px; } } /* --------------------------------------------------------------- PHONES & TABLETS (0.1.30) — the floating Generate bar, one inner inset for every card, and the Style row. Nothing here reaches the desktop or fitted layout: every rule sits under max-width: 960px. --------------------------------------------------------------- */ @media (max-width: 960px) { /* The Generate bar is position: fixed, but a fixed element is placed against the nearest ancestor with a filter, backdrop-filter or transform, not against the screen. The dock's backdrop-filter made the dock that ancestor, so the bar sat on the dock's bottom edge, over the Style row, and scrolled away with it. On these screens the dock is drawn without the blur (its fill is 84% opaque on a near-black page, so nothing visible is lost) and the bar floats at the bottom of the screen. */ .aicl-dock { -webkit-backdrop-filter: none; backdrop-filter: none; } /* The bar steps aside once the page below the workspace fills the screen (studio.js toggles .is-away); it comes back as soon as the workspace returns. */ .aicl-go { transition: transform var(--motion-slow) var(--ease-enter), opacity var(--motion-base) var(--aicl-ease), visibility 0s linear 0s; } /* Standby (no prompt yet) the button is tinted glass at 72% opacity; floating over the page, the text under it showed through. Here it frosts what is behind it and is nearly opaque. The lit face (ready) already covers it completely. */ .aicl-studio .aicl-generate { background: radial-gradient(120% 80% at 50% 0%, rgba(159, 150, 255, .2), transparent 62%), linear-gradient(180deg, rgba(108, 92, 231, .2), rgba(108, 92, 231, .07)), rgba(14, 15, 20, .94); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); } .aicl-go.is-away { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); opacity: 0; visibility: hidden; pointer-events: none; transition: transform var(--motion-base) var(--ease-exit), opacity var(--motion-base) var(--aicl-ease), visibility 0s linear var(--motion-base); } /* One inner inset for every card, the same as the canvas tools (14px), so the left edges of Mode, Prompt, Style, Settings, My Creations and the library line up. */ .aicl-studio { --aicl-inset: 14px; } .aicl-studio .aicl-modes { padding: 12px var(--aicl-inset); } .aicl-studio .aicl-compose { padding: 14px var(--aicl-inset) 16px; } .aicl-studio .aicl-params { padding: 0 var(--aicl-inset) 16px; gap: 12px; } .aicl-studio .aicl-panel__head--compact { padding: 14px 0 0; } .aicl-studio .aicl-panel__head:not(.aicl-panel__head--compact) { padding-left: var(--aicl-inset); padding-right: var(--aicl-inset); } .aicl-studio .aicl-creations > .aicl-seg, .aicl-studio .aicl-library > .aicl-seg { margin-left: var(--aicl-inset); margin-right: var(--aicl-inset); } .aicl-studio .aicl-creations .aicl-clist { padding-left: var(--aicl-inset); padding-right: var(--aicl-inset); } .aicl-studio .aicl-creations [data-aicl-cempty] { padding-left: var(--aicl-inset); padding-right: var(--aicl-inset); } .aicl-studio .aicl-lflow { padding: 0 var(--aicl-inset); } /* Prompt tools that show only an icon are square, so the last one ends exactly on the prompt box's right edge. Their names stay as aria-labels. */ .aicl-studio .aicl-compose__tools { gap: 4px; flex-wrap: nowrap; } .aicl-studio .aicl-compose__tools .aicl-tool:not(.aicl-tool--accent) { width: 40px; padding: 0; justify-content: center; } /* Style row: swatches start on the prompt box's edge (the row keeps 3px inside for the selection ring), and a line under the row says what the picked style adds, since a phone has no hover tooltip to show it. */ .aicl-studio .aicl-styles { margin-top: 14px; } .aicl-studio .aicl-styles__row { margin: 0 -3px; gap: 10px; } .aicl-studio .aicl-style { width: 60px; } .aicl-studio .aicl-style__sw { width: 56px; height: 56px; } .aicl-studio .aicl-styles__hint { -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; font-size: .75rem; line-height: 1.45; color: var(--text-tertiary); } .aicl-styles__hint b { font-weight: 600; color: var(--text-secondary); } } /* The style line is for touch screens; on computers the swatch's tooltip says the same. */ .aicl-studio .aicl-styles__hint { display: none; } @media (max-width: 960px) { .aicl-studio .aicl-styles__hint:not(:empty) { display: -webkit-box; } } @media (max-width: 600px) { /* Mode: the two working modes as one segmented track filling the width, like the Settings choices. The modes marked Soon cannot be picked, so phones leave them out instead of cutting them off at the screen edge. */ .aicl-studio .aicl-modes { border-bottom: 0; padding-bottom: 0; } .aicl-studio .aicl-modes__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 4px; overflow: visible; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .22); box-shadow: var(--aicl-recess); -webkit-mask-image: none; mask-image: none; } .aicl-studio .aicl-modes__list button[data-soon] { display: none; } .aicl-studio .aicl-modes__list button { width: 100%; min-width: 0; gap: 8px; padding: 0 8px; justify-content: center; border-radius: 9px; font-size: .8125rem; } .aicl-studio .aicl-modes__list button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aicl-studio .aicl-compose__tools .aicl-tool--accent { width: 40px; padding: 0; justify-content: center; } } /* Very narrow phones: the two mode names keep their room, the icons go. */ @media (max-width: 339px) { .aicl-studio .aicl-modes__list .aicl-icon { display: none; } }