:root { --primary:#00738f; --ink:#060606; --espresso:#180f08; --cocoa:#3d2e24; --muted:#6b5a50; --quiet:#cbc0b6; --sand:#eae2dc; --oat:#f5f1ee; --mist:#f9f6f3; --canvas:#fefdfb; --border:#f1ece7; --rail:56px; --sidebar:260px; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html,body { min-width:320px; min-height:100%; margin:0; }
body { min-height:100dvh; overflow-x:hidden; background:var(--canvas); color:var(--ink); font:400 16px/1.5 IDGrotesk,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; } button { border:0; padding:0; background:transparent; color:inherit; cursor:pointer; } a { color:inherit; text-decoration:none; } svg { display:block; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
:where(button,a,textarea,input):focus-visible { outline:2px solid var(--primary); outline-offset:2px; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:8px 12px; border-radius:9px; background:var(--espresso); color:#fff; transform:translateY(-140%); transition:transform .16s ease; }.skip-link:focus { transform:translateY(0); }
.image-shell { display:grid; grid-template-columns:var(--rail) minmax(0,1fr); min-height:100dvh; transition:grid-template-columns .26s cubic-bezier(.32,.72,0,1); }.image-shell[data-sidebar="expanded"] { grid-template-columns:var(--sidebar) minmax(0,1fr); }
.image-sidebar { position:fixed; inset:0 auto 0 0; z-index:20; display:flex; width:var(--rail); height:100dvh; flex-direction:column; overflow:hidden; border-right:1px solid var(--border); background:var(--canvas); transition:width .26s cubic-bezier(.32,.72,0,1),background-color .26s cubic-bezier(.32,.72,0,1); }.image-shell[data-sidebar="expanded"] .image-sidebar { width:var(--sidebar); background:var(--oat); }
.image-logo { display:flex; width:calc(100% - 20px); height:36px; flex:0 0 36px; align-items:center; gap:12px; margin:10px; padding:0 5px; overflow:hidden; border-radius:12px; white-space:nowrap; }.image-logo:hover { background:var(--mist); }.image-logo img { width:26px; height:26px; flex:0 0 26px; object-fit:contain; }.image-logo span { opacity:0; color:var(--espresso); font-size:15px; font-weight:500; transition:opacity .12s ease .08s; }.image-shell[data-sidebar="expanded"] .image-logo span { opacity:1; }
.image-nav { display:flex; flex-direction:column; gap:2px; padding:0 10px; }.image-nav-footer { padding-bottom:10px; }.image-sidebar-spacer { flex:1; }.image-nav-item,.image-account { display:flex; width:36px; height:36px; flex:0 0 36px; align-items:center; gap:12px; padding:0 10px; overflow:hidden; border-radius:12px; color:var(--espresso); white-space:nowrap; transition:width .2s ease,background-color .14s ease; }.image-nav-item:hover,.image-nav-item.is-active,.image-account:hover { background:var(--oat); }.image-nav-item svg { width:16px; height:16px; flex:0 0 16px; }.image-nav-item span,.image-account>span:last-child { opacity:0; font-size:14px; transition:opacity .12s ease .08s; }.image-shell[data-sidebar="expanded"] .image-nav-item,.image-shell[data-sidebar="expanded"] .image-account { width:240px; }.image-shell[data-sidebar="expanded"] .image-nav-item span,.image-shell[data-sidebar="expanded"] .image-account>span:last-child { opacity:1; }.image-shell[data-sidebar="expanded"] .image-nav-item:hover,.image-shell[data-sidebar="expanded"] .image-nav-item.is-active,.image-shell[data-sidebar="expanded"] .image-account:hover { background:#ece3dd; }.image-avatar { display:grid; width:20px; height:20px; flex:0 0 20px; place-items:center; border-radius:50%; background:linear-gradient(135deg,#1c2325 50%,#d9c5b8 50%); color:#fff; font-size:8px; font-weight:500; }
.image-main { position:relative; grid-column:2; display:flex; min-width:0; min-height:100dvh; flex-direction:column; padding-bottom:184px; outline:0; }.image-topbar { display:flex; height:56px; align-items:center; justify-content:space-between; padding:0 16px; }.get-app-pill,.image-credit { display:inline-flex; height:32px; align-items:center; gap:7px; border:1px solid var(--border); border-radius:999px; background:rgba(254,253,251,.96); color:var(--cocoa); font-size:14px; padding:0 12px; }.get-app-pill:hover { background:var(--mist); }.image-credit { border-color:rgba(222,155,74,.12); background:rgba(222,155,74,.08); color:#bd8440; font-size:13px; }.image-credit svg { width:15px; height:15px; }
.image-empty-state { display:flex; width:min(620px,calc(100% - 40px)); flex:1; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 48px; padding-top:34px; text-align:center; }.image-mark { display:inline-flex; width:auto; height:auto; align-items:center; justify-content:center; background:transparent; border-radius:0; color:var(--cocoa); overflow:visible; margin-bottom:2px; }.image-mark svg { width:40px; height:40px; stroke-width:1.25; }.image-mark img { width:54px; height:54px; object-fit:contain; display:block; pointer-events:none; transition:opacity .16s ease, transform .16s cubic-bezier(.32,.72,0,1); filter:drop-shadow(0 2px 8px rgba(24,15,8,.05)); }.image-eyebrow { margin:16px 0 4px; color:var(--muted); font-size:14px; }.image-empty-state h1 { margin:0; color:var(--cocoa); font-size:30px; font-weight:500; letter-spacing:-.3px; line-height:1.25; }.image-description { max-width:490px; margin:12px 0 0; color:var(--muted); font-size:16px; line-height:24px; }
.image-composer { position:fixed; z-index:10; bottom:24px; left:var(--rail); right:0; margin-inline:auto; width:min(720px,calc(100vw - var(--rail) - 48px)); overflow:visible; border:1px solid var(--quiet); border-radius:16px; background:#fff; box-shadow:0 10px 30px rgba(24,15,8,.07),0 2px 7px rgba(24,15,8,.04); transform:none; transition:left .26s cubic-bezier(.32,.72,0,1),width .26s cubic-bezier(.32,.72,0,1),border-color .16s ease,box-shadow .16s ease; }.image-shell[data-sidebar="expanded"] .image-composer,.app-shell[data-sidebar="expanded"] .image-composer { left:var(--sidebar); right:0; margin-inline:auto; width:min(720px,calc(100vw - var(--sidebar) - 48px)); }.image-composer:focus-within { border-color:rgba(0,115,143,.65); box-shadow:0 0 0 3px rgba(0,115,143,.10),0 12px 30px rgba(24,15,8,.08); }.image-composer textarea { display:block; width:100%; min-height:104px; resize:vertical; max-height:220px; padding:17px 18px 8px; border:0; outline:0; background:transparent; color:var(--espresso); font-size:16px; line-height:24px; }.image-composer textarea::placeholder { color:#a18f84; opacity:1; }.image-composer-toolbar { display:flex; min-height:56px; align-items:center; justify-content:space-between; gap:10px; padding:8px; border-top:1px solid var(--border); background:var(--mist); border-radius:0 0 15px 15px; }.image-tools,.image-submit-tools { display:flex; align-items:center; gap:5px; }.image-tool { display:inline-flex; height:32px; align-items:center; gap:6px; padding:0 9px; border-radius:9px; color:var(--cocoa); font-size:13px; white-space:nowrap; transition:background-color .14s ease,color .14s ease; }.image-tool:hover,.image-tool[aria-pressed="true"] { background:var(--sand); }.image-tool svg { width:16px; height:16px; }.image-upload { cursor:pointer; }.tool-chevron { width:12px!important; height:12px!important; }.quality-number { display:grid; width:auto; height:16px; place-items:center; border-radius:5px; border:1px solid var(--quiet); color:var(--muted); font-size:10px; }.image-option-wrap { position:relative; }.image-option-menu { position:absolute; bottom:calc(100% + 9px); left:0; z-index:30; width:158px; padding:5px; border:1px solid rgba(61,46,36,.07); border-radius:13px; background:rgba(254,253,251,.985); box-shadow:0 12px 32px rgba(24,15,8,.12),0 2px 6px rgba(24,15,8,.04); }.image-option-menu button { display:flex; width:100%; align-items:center; justify-content:space-between; padding:8px 9px; border-radius:8px; color:var(--cocoa); font-size:13px; text-align:left; }.image-option-menu button:hover,.image-option-menu button[aria-selected="true"] { background:var(--oat); }.image-option-menu small { color:var(--muted); font-size:11px; }.image-file-status { max-width:130px; overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.image-send { display:inline-flex; height:36px; align-items:center; gap:7px; padding:0 12px; border-radius:10px; background:var(--espresso); color:#fff; font-size:13px; font-weight:500; transition:background-color .14s ease,opacity .14s ease; }.image-send:hover:not(:disabled) { background:#302017; }.image-send:disabled { cursor:not-allowed; opacity:.42; }.image-send svg { width:15px; height:15px; }
.image-result { display:flex; width:min(540px,calc(100% - 40px)); flex:1; flex-direction:column; align-items:center; justify-content:center; margin:0 auto 36px; padding-top:30px; }.image-result-card { width:min(100%,460px); aspect-ratio:1/1; overflow:hidden; border:1px solid var(--border); border-radius:20px; background:var(--mist); box-shadow:0 18px 36px rgba(24,15,8,.08); }.image-result-placeholder { display:flex; width:100%; height:100%; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--muted); font-size:13px; }.image-result-placeholder strong { color:var(--cocoa); font-size:16px; font-weight:500; }.image-result-loader { width:26px; height:26px; border:2px solid var(--sand); border-top-color:var(--primary); border-radius:50%; animation:image-spin .75s linear infinite; }.image-result-card.is-complete { background:linear-gradient(145deg,#dce6e4 0%,#f4eee5 42%,#d9c5b8 100%); }.image-result-card.is-complete .image-result-placeholder { background:radial-gradient(circle at 28% 28%,rgba(255,255,255,.75) 0 6%,transparent 6.5%),linear-gradient(140deg,transparent 0 42%,rgba(61,46,36,.14) 42.3% 43.2%,transparent 43.6%); }.image-result-card.is-complete .image-result-loader { display:none; }.image-result-prompt { max-width:460px; margin:14px 0 0; color:var(--muted); font-size:13px; text-align:center; }
@keyframes image-spin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }
.image-references-tray { display:flex; flex-direction:column; gap:8px; padding:12px 14px 10px; border-bottom:1px solid var(--border); background:var(--mist); border-radius:15px 15px 0 0; animation:traySlideDown .2s cubic-bezier(.32,.72,0,1); }
@keyframes traySlideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.image-references-header { display:flex; align-items:center; justify-content:space-between; line-height:1; }
.image-references-title { display:inline-flex; align-items:center; gap:6px; color:var(--espresso); font-size:12.5px; font-weight:500; }
.image-references-title svg { width:14px; height:14px; stroke:var(--cocoa); }
.image-references-clear { color:var(--muted); font-size:11.5px; padding:2px 6px; border-radius:5px; cursor:pointer; transition:color .14s ease,background-color .14s ease; }
.image-references-clear:hover { color:#a82e2e; background:rgba(168,46,46,.08); }
.image-references-list { display:flex; align-items:center; gap:10px; overflow-x:auto; padding:2px 0 4px; scrollbar-width:thin; }
.image-references-items { display:flex; align-items:center; gap:10px; }
.image-reference-item { position:relative; width:62px; height:62px; flex:0 0 62px; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#fff; box-shadow:0 1px 3px rgba(24,15,8,.06); transition:transform .15s ease,box-shadow .15s ease; }
.image-reference-item:hover { transform:translateY(-1px); box-shadow:0 3px 8px rgba(24,15,8,.1); }
.image-reference-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.image-reference-remove { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:rgba(24,15,8,.78); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; cursor:pointer; transition:opacity .15s ease,background-color .15s ease,transform .15s ease; }
.image-reference-item:hover .image-reference-remove, .image-reference-remove:focus-visible { opacity:1; }
.image-reference-remove:hover { background:#a82e2e; transform:scale(1.08); }
.image-reference-remove svg { width:10px; height:10px; stroke:#fff; stroke-width:2; }
.image-reference-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:62px; height:62px; flex:0 0 62px; border-radius:10px; border:1.5px dashed var(--quiet); background:rgba(255,255,255,.6); color:var(--muted); font-size:11px; font-weight:500; cursor:pointer; transition:border-color .15s ease,color .15s ease,background-color .15s ease; }
.image-reference-add:hover { border-color:var(--cocoa); color:var(--cocoa); background:var(--sand); }
.image-reference-add svg { width:16px; height:16px; stroke:currentColor; stroke-width:1.6; }
.image-tool-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--primary); color:#fff; font-size:10px; font-weight:600; line-height:1; }
.image-composer.has-references textarea { padding-top:12px; }
.image-model-menu { min-width: 224px; width: auto; max-height: min(390px, calc(100vh - 160px)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--quiet) transparent; }
.image-model-menu::-webkit-scrollbar { width: 5px; }
.image-model-menu::-webkit-scrollbar-track { background: transparent; }
.image-model-menu::-webkit-scrollbar-thumb { background: var(--quiet); border-radius: 999px; }
.image-model-menu button { gap: 14px; min-height: 36px; padding: 6px 10px; justify-content: space-between; }
.model-option-left { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.model-name { white-space: nowrap; font-weight: 500; }
.model-logo-box { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; background: transparent; border: none; box-shadow: none; color: var(--espresso); overflow: visible; user-select: none; font-family: IDGrotesk, ui-sans-serif, -apple-system, sans-serif; font-size: 11px; font-weight: 600; line-height: 1; }
.model-logo-box img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.model-trigger-logo { width: 20px; height: 20px; flex: 0 0 20px; margin-right: 2px; background: transparent; border: none; box-shadow: none; }
.model-logo-box svg { width: 16px; height: 16px; stroke: currentColor; }
.quality-number { display: inline-grid; width: auto; min-width: 19px; height: 18px; padding: 0 5px; place-items: center; border-radius: 5px; border: 1px solid var(--quiet); color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .01em; }
.image-cost-badge { display: inline-flex; height: 32px; align-items: center; gap: 5px; padding: 0 9px; border-radius: 9px; background: var(--espresso); color: #fbf8f5; font-size: 13px; font-weight: 600; letter-spacing: .01em; user-select: none; cursor: default; transition: background-color .14s ease, transform .14s ease; }
.image-cost-badge:hover { background: #2b1b13; }
.cost-val { font-variant-numeric: tabular-nums; line-height: 1; display: inline-block; }
.cost-bolt { width: 12px; height: 12px; flex: 0 0 12px; fill: #f4eee5; }
.cost-pulse { animation: costPulse .2s cubic-bezier(.32,.72,0,1); }
@keyframes costPulse { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (max-width:767px) { .image-sidebar { display:none; }.image-shell { grid-template-columns:1fr; }.image-main { grid-column:1; padding-bottom:160px; }.image-composer,.image-shell[data-sidebar="expanded"] .image-composer,.app-shell[data-sidebar="expanded"] .image-composer { bottom:16px; left:0; right:0; margin-inline:auto; width:calc(100vw - 24px); transform:none; }.image-empty-state { margin-bottom:12px; padding-top:6px; }.image-empty-state h1 { font-size:26px; }.image-description { font-size:15px; }.image-composer textarea { min-height:90px; }.image-tool { width:auto; min-width:32px; justify-content:center; padding:0 6px; }.image-tool #qualityLabel { display:none; }.image-tool #modelLabel { max-width:65px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.image-tool .quality-number { display:inline-grid; }.image-submit-tools { gap:4px; }.image-file-status { max-width:72px; }.image-result { margin-bottom:12px; }.image-references-tray { padding:10px 12px 6px; }.image-reference-item,.image-reference-add { width:54px; height:54px; flex:0 0 54px; }.image-reference-remove { opacity:.85; } }
@media (max-width:440px) { .image-topbar { padding:0 12px; }.image-composer-toolbar { gap:4px; }.image-tools { gap:2px; }.image-tool { width:auto; min-width:30px; padding:0 4px; }.image-tool #modelLabel { display:none; }.image-cost-badge { height:32px; padding:0 7px; gap:4px; font-size:12px; }.cost-bolt { width:11px; height:11px; flex:0 0 11px; }.image-send { width:36px; justify-content:center; padding:0; }.image-send span { display:none; }.image-file-status { display:none; }.image-empty-state { width:calc(100% - 32px); }.image-result { width:calc(100% - 32px); } }