/* Hallmark · shape: app screen · scope: app · genre: modern-minimal · theme: device-preview custom · v2.0.0 */
/* White surfaces follow the requested Apple product-page direction. Device metal uses gradients only to describe its physical edges. */
@property --wallpaper-turn { syntax:"<angle>"; inherits:false; initial-value:0deg; }
@property --hinge-angle { syntax:"<angle>"; inherits:true; initial-value:0deg; }
@property --hinge-gap { syntax:"<length>"; inherits:false; initial-value:.1px; }
:root {
  color-scheme:light;
  --color-paper:#fff; --color-surface:#f5f5f7; --color-stage:#ededf0; --color-ink:#1d1d1f;
  --color-muted:#68686d; --color-rule:#dedee2; --color-border:#86868b; --color-accent:#0071e3;
  --color-accent-hover:#0077ed; --color-accent-soft:#eaf3fc; --color-on-accent:#fff; --color-accent-ink:var(--color-on-accent);
  --color-focus:#0071e3; --color-error:#b42318; --color-error-soft:#fff0ee; --color-transparent:transparent;
  --color-metal:#a5a6aa; --color-metal-light:#ececef; --color-metal-dark:#414247; --color-titanium:#333438; --color-glass:#101114;
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB",sans-serif;
  --radius-control:12px; --radius-image:14px; --duration-short:160ms; --duration-fold:800ms; --ease-fold:cubic-bezier(.32,.72,.24,1);
}
:root[data-theme="dark"] { color-scheme:dark; --color-paper:#111214; --color-surface:#1b1c1f; --color-stage:#25262a; --color-ink:#f5f5f7; --color-muted:#a1a1a6; --color-rule:#34353b; --color-border:#74747a; --color-accent:#2997ff; --color-accent-hover:#45a5ff; --color-accent-ink:#081018; --color-accent-soft:#1b3045; --color-focus:#64b5ff; --color-error:#ff8176; --color-error-soft:#381d1d; }
* { box-sizing:border-box; }
html,body { margin:0; overflow-x:clip; }
html { scrollbar-color:var(--color-border) var(--color-paper); scroll-padding-top:74px; }
body { background:var(--color-paper); color:var(--color-ink); font:400 16px/1.5 var(--font-body); -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,summary { -webkit-tap-highlight-color:var(--color-transparent); }
button,a,summary { touch-action:manipulation; }
button { cursor:pointer; color:inherit; }
a { color:inherit; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--color-focus); outline-offset:4px; }
button:disabled { opacity:.5; cursor:not-allowed; }
button[aria-busy="true"] { cursor:progress; }
h1,h2,p,figure { margin:0; }
h1,h2 { overflow-wrap:break-word; min-width:0; text-wrap:balance; }
::selection { background:var(--color-accent-soft); color:var(--color-ink); }
input,textarea { caret-color:var(--color-accent); }
.shell { width:calc(100% - 80px); max-width:1060px; margin-inline:auto; }
.topbar { position:sticky; top:0; z-index:20; height:54px; border-bottom:1px solid var(--color-rule); background:var(--color-paper); background:color-mix(in srgb,var(--color-paper) 88%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) { .topbar { background:var(--color-paper); -webkit-backdrop-filter:none; backdrop-filter:none; } }
.header-content,.header-actions { display:flex; align-items:center; justify-content:space-between; gap:24px; height:100%; }
.brand { display:inline-flex; align-items:center; min-height:44px; padding-inline:2px; color:var(--color-ink); text-decoration:none; }
.wordmark-defs { position:absolute; pointer-events:none; }
.brand-wordmark { display:block; width:144px; height:42px; overflow:visible; }
.device-name { font-size:12px; color:var(--color-muted); }
.quota-header { margin-left:auto; flex-shrink:0; }
.header-content:has(.quota-header:not([hidden])) .header-actions { flex-shrink:0; white-space:nowrap; }
.quota-toggle { display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 0; border:0; background:none; color:var(--color-muted); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.quota-toggle:hover { color:var(--color-ink); }
.quota-divider { opacity:.5; }.quota-short { display:none; text-decoration:none; }
.quota-toggle [data-stale="true"] { opacity:.6; }
.header-content:has(.quota-header:not([hidden])) .device-name { display:none; }
.quota-panel { position:fixed; inset:62px max(16px,calc((100vw - 1060px)/2)) auto auto; margin:0; width:320px; max-width:calc(100vw - 32px); max-height:calc(100dvh - 82px); overflow:auto; padding:18px 20px; border:1px solid var(--color-rule); border-radius:18px; color:var(--color-ink); background:var(--color-paper); box-shadow:0 8px 28px rgb(0 0 0 / .1); }
.quota-panel>header { display:flex; align-items:center; justify-content:space-between; }.quota-panel h2 { font-size:16px; }.quota-panel h3 { margin:12px 0 6px; font-size:13px; font-weight:600; }
.quota-window { display:flex; justify-content:space-between; font-size:13px; font-variant-numeric:tabular-nums; }.quota-reset { color:var(--color-muted); font-size:11px; margin:2px 0 8px; }.quota-estimate { font-size:12px; margin:8px 0 4px; }
.quota-note { padding-top:12px; font-size:11px; line-height:1.65; color:var(--color-muted); }.quota-panel section+section { border-top:1px solid var(--color-rule); margin-top:12px; padding-top:2px; }
@media(max-width:700px) { .quota-name { display:none; }.quota-short { display:inline; }.quota-toggle { font-size:11px; gap:6px; }.header-content:has(.quota-header:not([hidden])) { gap:8px; }.header-content:has(.quota-header:not([hidden])) .brand-wordmark { width:96px; }.header-content:has(.quota-header:not([hidden])) .header-actions { gap:6px; } }
@media(max-width:380px) { .header-content:has(.quota-header:not([hidden])) { gap:6px; }.header-content:has(.quota-header:not([hidden])) .brand-wordmark { width:82px; }.header-content:has(.quota-header:not([hidden])) .header-actions { gap:4px; }.quota-toggle { display:grid; gap:0; line-height:15px; font-size:10px; text-align:right; }.quota-toggle .quota-divider { display:none; } }
.quiet { color:var(--color-muted); font-size:13px; }
.text-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 2px; background:var(--color-transparent); border:0; font-size:13px; color:var(--color-accent); text-decoration:none; }
.text-button:hover { text-decoration:underline; text-underline-offset:4px; }
.entrance { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:12%; min-height:calc(100svh - 100px); align-items:center; padding-block:60px 100px; }
.eyebrow { font-size:15px; font-weight:600; }
.welcome h1 { font-size:clamp(40px,5.3vw,68px); line-height:1.12; font-weight:650; letter-spacing:-.045em; margin:20px 0 28px; }
.login-form { width:100%; max-width:320px; justify-self:end; }
.login-form h2 { font-size:24px; font-weight:600; margin-bottom:30px; }
.login-form>label { display:block; margin-bottom:8px; font-size:14px; }
input[type="password"],textarea { width:100%; background:var(--color-paper); color:var(--color-ink); border:1px solid var(--color-border); border-radius:var(--radius-control); padding:14px 16px; outline-offset:3px; }
input[type="password"] { height:50px; }
textarea { display:block; resize:vertical; min-height:76px; max-height:280px; font-size:16px; line-height:1.5; }
textarea::placeholder { color:var(--color-muted); }
[aria-invalid="true"] { border-color:var(--color-error); }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:10px 24px; border:0; border-radius:28px; background:var(--color-accent); color:var(--color-accent-ink); text-decoration:none; font-size:14px; font-weight:500; transition:background-color var(--duration-short); }
.button:hover { background:var(--color-accent-hover); }
button:active,.button:active { filter:brightness(.92); }
.login-form>.button { width:100%; margin-top:18px; }
.field-message { font-size:12px; line-height:1.5; color:var(--color-muted); overflow-wrap:anywhere; }
.field-message.error { color:var(--color-error); }
.login-form .field-message { margin-top:16px; }
.composer { max-width:860px; margin:28px auto 0; }
.field-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:16px; }
.field-heading label { font-size:17px; font-weight:600; letter-spacing:-.02em; }
.field-heading>span { font-size:11px; color:var(--color-muted); font-variant-numeric:tabular-nums; }
.prompt-row { display:flex; align-items:center; gap:16px; }
.prompt-row textarea { flex:1; min-width:0; background:var(--color-surface); border-color:var(--color-rule); }
.generate { flex-shrink:0; }
.key-hint { font-size:11px; opacity:.85; }
.composer-foot { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:42px; }
.manage-link { font-size:12px; flex-shrink:0; gap:5px; }
.preview { max-width:860px; margin-inline:auto; }
.preview-stage { width:100%; aspect-ratio:2670/2180; position:relative; display:grid; place-items:center; perspective:min(1600px,180vw); isolation:isolate; container-type:inline-size; cursor:pointer; }
.preview-menu, .preview-menu * { cursor:default; }
.duo { --body-depth:14px; --body-radius:55px; --rim:2px; --bezel:9px; position:relative; width:88%; aspect-ratio:2670/1878; pointer-events:none; transform-style:preserve-3d; transform:translateX(0%) translateY(0%) rotateX(0deg) rotateZ(0deg) rotateY(0deg) scale(1); transition:transform var(--duration-fold) var(--ease-fold); }
@supports (width:1cqw) { .duo { --body-depth:1.65cqw; --body-radius:6.45cqw; --rim:.24cqw; --bezel:1.1cqw; } }
.device-panel { position:absolute; top:0; width:50%; height:100%; transform-style:preserve-3d; }
.panel-left { --hinge-angle:0deg; --hinge-gap:.1px; left:0; transform-origin:right center; transform:translateZ(var(--hinge-gap)) rotateY(var(--hinge-angle)); transition:--hinge-angle var(--duration-fold) var(--ease-fold),--hinge-gap var(--duration-fold) var(--ease-fold); }
.panel-right { left:50%; transform-origin:left center; transform:translateZ(.1px) rotateY(0deg); transition:transform var(--duration-fold) var(--ease-fold); }
/* A narrow polished rail surrounds the wider black glass bezel. */
.device-front,.device-back { position:absolute; inset:calc(-1 * var(--rim)); background:#121312; border:1px solid #aaa9a3; border-radius:var(--body-radius); backface-visibility:hidden; box-shadow:0 0 0 .6px #2b2b29,inset 0 0 0 .7px #e0ded7,inset 0 0 0 2px #282925; }
.device-front { box-shadow:none; }
.panel-left .device-front { right:0; border-radius:var(--body-radius) 2px 2px var(--body-radius); border-right:0; }
.panel-right .device-front { left:0; border-radius:2px var(--body-radius) var(--body-radius) 2px; border-left:0; }
.device-front::before,.device-back::before,.device-front::after,.device-back::after { content:""; position:absolute; left:18%; right:16%; height:2px; background:linear-gradient(90deg,#b8b7b0 0 1.8%,transparent 1.8% 96%,#b8b7b0 96% 98%,transparent 98%); pointer-events:none; }
.device-front::before,.device-back::before { top:-1px; }.device-front::after,.device-back::after { bottom:-1px; }
.screen { --fold-blur:clamp(4px,2.8cqh,16px); --hinge-softness:max(0px,min(var(--fold-blur),calc(var(--fold-blur) * sin(var(--hinge-angle)) * 3))); --material-contrast:1; --material-saturation:1; position:absolute; overflow:hidden; container-type:size; background:var(--color-surface); inset:var(--bezel); }
.screen-left { right:0; border-radius:calc(var(--body-radius) - var(--bezel)) 0 0 calc(var(--body-radius) - var(--bezel)); }
.screen-right { --hinge-softness:0px; left:0; border-radius:0 calc(var(--body-radius) - var(--bezel)) calc(var(--body-radius) - var(--bezel)) 0; }
/* Cover the full inner canvas at every angle, including the diagonal mid-turn. */
.screen img { --wallpaper-turn:0deg; position:absolute; width:200%; height:100%; width:calc(200cqw * cos(var(--wallpaper-turn)) + 100cqh * sin(var(--wallpaper-turn))); height:calc(200cqw * sin(var(--wallpaper-turn)) + 100cqh * cos(var(--wallpaper-turn))); max-width:none; display:block; object-fit:cover; top:50%; left:100%; right:auto; transform:translate(-50%,-50%) rotate(var(--wallpaper-turn)); transition:--wallpaper-turn var(--duration-fold) var(--ease-fold),opacity 280ms; }
.screen-right img { left:0; }
.screen-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--color-stage); color:var(--color-muted); font-size:13px; }
.screen-left .screen-placeholder { justify-content:flex-end; padding-right:12px; }
.screen-right .screen-placeholder { justify-content:flex-start; padding-left:12px; }
.screen img:not([hidden]) ~ .screen-placeholder { display:none; }
.device-back { transform:translateZ(calc(-1 * var(--body-depth))) rotateY(180deg); }
/* Closed sidewalls share their endpoints; the rounded corners stay solid from either side. */
.device-corner { position:absolute; width:0; height:0; transform-style:preserve-3d; }
.corner-top { top:calc(var(--body-radius) - var(--rim)); }.corner-bottom { bottom:calc(var(--body-radius) - var(--rim)); }
.panel-left .device-corner { left:calc(var(--body-radius) - var(--rim)); }
.panel-right .device-corner { right:calc(var(--body-radius) - var(--rim)); }
.panel-left .corner-top { --arc-start:180deg; }.panel-left .corner-bottom { --arc-start:90deg; }
.panel-right .corner-top { --arc-start:270deg; }.panel-right .corner-bottom { --arc-start:0deg; }
.corner-face,.device-edge { position:absolute; display:block; background:linear-gradient(#191a18,#f0eee6 8%,#9d9e96 19%,#d7d7ce 40%,#b6b7ad 68%,#f3f0e9 86%,#292b26); }
.corner-face { --facet-angle:calc(var(--arc-start) + (var(--facet) + .5) * 5.625deg); left:calc(var(--body-radius) * cos(2.8125deg) * cos(var(--facet-angle))); top:calc(var(--body-radius) * cos(2.8125deg) * sin(var(--facet-angle))); width:calc(2 * var(--body-radius) * sin(2.8125deg) + .15px); height:var(--body-depth); transform-origin:50% 0; transform:translateX(-50%) rotateZ(calc(var(--facet-angle) + 90deg)) rotateX(-90deg); }
.facet-0 { --facet:0; }.facet-1 { --facet:1; }.facet-2 { --facet:2; }.facet-3 { --facet:3; }
.facet-4 { --facet:4; }.facet-5 { --facet:5; }.facet-6 { --facet:6; }.facet-7 { --facet:7; }
.facet-8 { --facet:8; }.facet-9 { --facet:9; }.facet-10 { --facet:10; }.facet-11 { --facet:11; }
.facet-12 { --facet:12; }.facet-13 { --facet:13; }.facet-14 { --facet:14; }.facet-15 { --facet:15; }
.edge-top,.edge-bottom { left:calc(var(--body-radius) - var(--rim)); right:0; height:var(--body-depth); }
.panel-right .edge-top,.panel-right .edge-bottom { left:0; right:calc(var(--body-radius) - var(--rim)); }
.edge-top { top:calc(-1 * var(--rim)); transform-origin:top; transform:rotateX(-90deg); }
.edge-bottom { bottom:calc(-1 * var(--rim)); transform-origin:bottom; transform:rotateX(90deg); }
.edge-outside,.edge-inside { width:var(--body-depth); background:linear-gradient(90deg,var(--color-metal-dark),var(--color-metal-light) 18%,var(--color-metal) 50%,var(--color-metal-light) 85%,var(--color-metal-dark)); }
.edge-outside { top:calc(var(--body-radius) - var(--rim)); bottom:calc(var(--body-radius) - var(--rim)); }
.edge-inside { top:calc(-1 * var(--rim)); bottom:calc(-1 * var(--rim)); }
.panel-left .edge-outside { left:calc(-1 * var(--rim)); transform-origin:left; transform:rotateY(90deg); }
.panel-right .edge-outside { right:calc(-1 * var(--rim)); transform-origin:right; transform:rotateY(-90deg); }
.panel-left .edge-inside { right:0; transform-origin:right; transform:rotateY(-90deg); }
.panel-right .edge-inside { left:0; transform-origin:left; transform:rotateY(90deg); }
.panel-left .device-back { border-radius:2px var(--body-radius) var(--body-radius) 2px; }
.panel-right .device-back { left:0; border-radius:var(--body-radius) 2px 2px var(--body-radius); }
.panel-left .outer-shell { inset:calc(-1 * var(--rim)) 0 calc(-1 * var(--rim)) calc(-1 * var(--rim)); }
.outer-screen { --cover-softness:max(0px,min(14px,calc(22px * sin(var(--hinge-angle))))); position:absolute; inset:var(--bezel); border-radius:2px calc(var(--body-radius) - var(--bezel)) calc(var(--body-radius) - var(--bezel)) 2px; background:var(--color-glass); overflow:hidden; }
.outer-screen::after { content:""; position:absolute; z-index:4; inset:0; pointer-events:none; background:linear-gradient(180deg,#050605d9,transparent 18% 82%,#050605e6); opacity:0; }
@supports (opacity:calc(sin(30deg))) { .outer-screen::after { opacity:calc(sin(var(--hinge-angle)) * .9); } }
.outer-screen img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.outer-screen .screen-placeholder { background:var(--color-stage); padding:16px; text-align:center; }
.outer-screen img:not([hidden]) ~ .screen-placeholder { display:none; }
.outer-camera { position:absolute; top:4.3%; right:6.3%; width:8%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 51%,#143170 0 4%,#030b26 6% 11%,#010202 13%); }
.inner-camera { position:absolute; z-index:3; top:4.4%; left:43%; width:5.6%; aspect-ratio:1; border-radius:50%; background:#628295; opacity:.12; }
.device-hinge { position:absolute; left:calc(50% - 1px); top:calc(-1 * var(--rim)); bottom:calc(-1 * var(--rim)); width:2px; background:linear-gradient(90deg,#282924,#e5e2d9,#282924); transform:translateZ(-4px); border-radius:8px; transition:width var(--duration-fold) var(--ease-fold),left var(--duration-fold) var(--ease-fold),top var(--duration-fold) var(--ease-fold),bottom var(--duration-fold) var(--ease-fold); }
.hinge-cap { position:absolute; left:calc(50% - 3%); width:6%; height:.8%; min-height:2px; border-radius:2px; background:linear-gradient(#1f201d,#6d6d65 40%,#11120f); box-shadow:inset .5px 0 #9d9d94,inset -.5px 0 #9d9d94; transform:translateZ(1px); transition:opacity 400ms; }
.hinge-cap-top { top:calc(-1 * var(--rim)); }.hinge-cap-bottom { bottom:calc(-1 * var(--rim)); }
.screen-left::after { content:""; position:absolute; z-index:4; inset:0; pointer-events:none; opacity:0; background:linear-gradient(90deg,#050605bd,transparent 65%),linear-gradient(180deg,#030403cc,transparent 16% 84%,#030403cc); }
@supports (opacity:calc(sin(30deg))) { .screen-left::after { opacity:calc(sin(var(--hinge-angle)) * .85); } }
.edge-outside::before,.edge-outside::after { content:""; position:absolute; left:0; right:0; height:1%; background:#c1c1b7; }.edge-outside::before { top:12%; }.edge-outside::after { bottom:12%; }
.side-button { position:absolute; top:21%; width:calc(var(--body-depth) * .45); height:15%; border:1px solid var(--color-metal-dark); background:var(--color-metal-light); border-radius:3px; }
.volume { left:calc(-1 * var(--rim) - 1px); transform-origin:left; transform:translateZ(calc(-.25 * var(--body-depth))) rotateY(90deg); }
.power { top:28%; right:calc(-1 * var(--rim) - 1px); transform-origin:right; transform:translateZ(calc(-.25 * var(--body-depth))) rotateY(-90deg); }
.button-top { top:calc(-1 * var(--rim) - 1.5px); left:42%; width:15%; height:2px; border-radius:2px; background:linear-gradient(#faf8f0,#74756e); transform:translateZ(calc(-.35 * var(--body-depth))); }.button-top-second { left:63%; }
.device-shadow { position:absolute; width:44%; height:12px; bottom:9px; border-radius:50%; background:var(--color-glass); opacity:.1; filter:blur(12px); transition:transform var(--duration-fold) var(--ease-fold); }
[data-pose="half"] .duo { transform:translateX(0%) translateY(10%) rotateX(-20deg) rotateZ(-90deg) rotateY(0deg) scale(.82); }
[data-pose="half"] .panel-left { --hinge-angle:90deg; }
[data-pose="half"] .screen img { --wallpaper-turn:90deg; }
[data-pose="closed"] .duo { transform:translateX(-25%) translateY(0%) rotateX(0deg) rotateZ(0deg) rotateY(0deg) scale(1); }
[data-pose="closed"] .panel-left { --hinge-angle:180deg; --hinge-gap:2px; }
[data-pose="closed"] .device-hinge { width:1.2%; left:48.8%; top:1%; bottom:1%; }
[data-pose="closed"] .hinge-cap { opacity:0; }
[data-pose="closed"] .device-shadow { transform:scaleX(.5); }
.preview-progress { position:absolute; z-index:2; inset:auto 0 6px; width:max-content; max-width:95%; margin:auto; padding:12px 20px; background:var(--color-paper); border:1px solid var(--color-rule); border-radius:var(--radius-control); text-align:center; }
.preview-progress h2 { font-size:14px; font-weight:600; }.preview-progress p { font-size:12px; color:var(--color-muted); margin-top:3px; }
.device-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; width:min(100%,680px); margin:12px auto 0; }
.pose-control,.wallpaper-navigation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); min-width:0; background:var(--color-surface); border:1px solid var(--color-rule); padding:3px; border-radius:28px; }
.pose-control button,.wallpaper-navigation .icon-button { display:inline-grid; place-items:center; width:100%; min-width:0; height:44px; border-radius:22px; font-size:13px; }
.control-icon { display:none; }
.control-label { white-space:nowrap; }
.pose-control button { min-height:44px; padding:8px 6px; border:0; background:var(--color-transparent); border-radius:22px; font-size:13px; }
.pose-control button[aria-pressed="true"] { background:var(--color-paper); box-shadow:0 1px 4px var(--color-rule); font-weight:600; }
.download-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 20px; border-radius:24px; background:var(--color-ink); color:var(--color-paper); font-size:13px; text-decoration:none; }
.download-button:hover { opacity:.86; }.download-button[aria-disabled="true"] { opacity:.4; cursor:not-allowed; }
.preview-caption { text-align:center; margin:22px auto 0; max-width:640px; }
#image-description { font-size:14px; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#image-meta { color:var(--color-muted); font-size:12px; margin-top:5px; font-variant-numeric:tabular-nums; }
#pose-caption { color:var(--color-muted); font-size:11px; margin-top:6px; }
.preview-actions { display:flex; justify-content:center; gap:24px; }
.danger { color:var(--color-error); }
.task-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; font-size:13px; color:var(--color-muted); }
.quiet-button { background:var(--color-transparent); border:1px solid var(--color-rule); border-radius:22px; min-height:44px; padding:8px 18px; font-size:13px; }
.quiet-button:hover { background:var(--color-surface); }
.progress-details,.studio-controls { margin-top:12px; font-size:13px; border-top:1px solid var(--color-rule); }
summary { min-height:44px; align-content:center; cursor:pointer; }
.progress-details ol { margin:8px 0 16px; padding:0; list-style:none; }
.progress-details li { display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; padding-block:8px; border-bottom:1px solid var(--color-rule); }
.progress-details time { color:var(--color-muted); font-variant-numeric:tabular-nums; }
.studio-controls { max-width:860px; margin:24px auto 0; }
.studio-controls>summary { font-size:12px; color:var(--color-muted); }
.studio-controls>summary>span { margin-left:16px; font-size:11px; }
.studio-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-block:16px; }
.queue-heading { display:flex; justify-content:space-between; align-items:center; min-height:44px; }
.queue-heading h2 { font-size:14px; font-weight:600; }
.queue-item { padding-block:10px; border-bottom:1px solid var(--color-rule); }
.queue-state { color:var(--color-muted); font-size:12px; margin-top:4px; }
.queue-select { display:block; width:100%; min-height:44px; padding:0; border:0; background:var(--color-transparent); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.concurrency-field,.instance-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; }
.concurrency-field select { min-height:44px; padding:8px 12px; border:1px solid var(--color-rule); border-radius:var(--radius-control); color:var(--color-ink); background:var(--color-paper); }
.instance-row { padding-block:12px; border-bottom:1px solid var(--color-rule); }
.instance-detail { color:var(--color-muted); font-size:12px; margin-top:4px; }
.storage { color:var(--color-muted); font-size:12px; }.storage p { white-space:pre-line; }
.service-message { margin:16px auto; max-width:860px; padding:16px; border-radius:var(--radius-control); background:var(--color-error-soft); font-size:13px; }
.job-error { margin-top:16px; padding-top:16px; border-top:1px solid var(--color-rule); }
.job-error>p { color:var(--color-error); font-size:13px; margin-bottom:12px; }.job-error button+button { margin-left:16px; }
.collection { margin-top:44px; padding-top:32px; border-top:1px solid var(--color-rule); }
.collection-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.collection-heading h2 { font-size:28px; letter-spacing:-.035em; font-weight:600; }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:30px 24px; }
.artwork { display:block; width:100%; padding:0; text-align:left; border:0; background:var(--color-transparent); min-width:0; border-radius:var(--radius-image); content-visibility:auto; contain-intrinsic-size:auto 250px; }
.artwork-visual { --art-radius:var(--radius-image); position:relative; aspect-ratio:2670/1878; background:var(--color-surface); border-radius:var(--art-radius); display:block; }
.artwork-visual::after { content:""; position:absolute; inset:0; border:2px solid var(--color-transparent); border-radius:inherit; pointer-events:none; }
.artwork[aria-pressed="true"] .artwork-visual::after { border-color:var(--color-accent); }
.artwork:not([aria-pressed="true"]):hover .artwork-visual::after { border-color:var(--color-border); }
.artwork[aria-pressed="true"] .artwork-visual::before { content:"✓"; position:absolute; z-index:1; right:7px; bottom:7px; display:grid; place-items:center; width:22px; height:22px; border:2px solid var(--color-paper); border-radius:50%; background:var(--color-accent); color:var(--color-on-accent); font-size:13px; font-weight:600; pointer-events:none; }
.artwork img { display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--art-radius); }
.artwork-description { display:block; font-size:13px; margin-top:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artwork-meta { display:block; font-size:11px; color:var(--color-muted); margin-top:4px; }
.gallery-empty { padding:60px 0; color:var(--color-muted); font-size:14px; }
.gallery-tail { text-align:center; padding-top:28px; min-height:76px; color:var(--color-muted); font-size:12px; }.gallery-tail button { margin-top:12px; }
.footer { display:flex; justify-content:space-between; gap:20px; padding:24px 0; margin-top:20px; border-top:1px solid var(--color-rule); color:var(--color-muted); font-size:11px; }
dialog { max-width:min(440px,calc(100% - 40px)); padding:28px; border:1px solid var(--color-rule); border-radius:20px; background:var(--color-paper); color:var(--color-ink); }
dialog::backdrop { background:#000; opacity:.3; }dialog h2 { font-size:20px; font-weight:600; }dialog p { color:var(--color-muted); font-size:14px; margin-top:12px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:28px; }.destructive { background:var(--color-error); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:700px) {
  .shell { width:calc(100% - 36px); }.topbar { height:50px; }.brand-wordmark { width:132px; height:40px; }.header-actions { gap:18px; }.device-name { font-size:11px; }
  .entrance { grid-template-columns:1fr; gap:48px; padding-block:54px; min-height:auto; }.login-form { max-width:none; }.welcome h1 { font-size:48px; }
  .composer { margin-top:24px; }.prompt-row { align-items:stretch; flex-direction:column; gap:12px; }.generate { align-self:flex-end; }.prompt-row textarea { min-height:88px; }.field-heading label { font-size:16px; }.composer-foot { align-items:flex-start; gap:12px; }.composer-foot .field-message { padding-block:12px; font-size:11px; }.key-hint { display:none; }
  .preview-stage { height:clamp(290px,79vw,400px); }.duo { width:82%; }
  .screen-placeholder { font-size:10px; }.screen-left .screen-placeholder { padding-right:6px; }.screen-right .screen-placeholder { padding-left:6px; }
  .device-toolbar { gap:10px; margin-top:0; }.pose-control button { min-width:60px; padding-inline:14px; font-size:12px; }.download-button { padding-inline:14px; font-size:12px; }.preview-caption { margin-top:18px; }.preview-actions { gap:20px; }
  .studio-grid { grid-template-columns:1fr; gap:20px; }.studio-controls>summary>span { display:block; margin:4px 0 8px 16px; }
  .collection { margin-top:28px; padding-top:24px; }.collection-heading { margin-bottom:18px; }.collection-heading h2 { font-size:24px; }.gallery { gap:24px 12px; }.artwork-visual { --art-radius:8px; }.artwork-description { font-size:12px; }.artwork-meta { font-size:10px; }.footer { font-size:10px; flex-wrap:wrap; }.preview-progress { padding:8px 12px; bottom:0; }
}
@media (max-width:380px) { .shell { width:calc(100% - 28px); }.device-name { display:none; }.pose-control button { min-width:56px; padding-inline:12px; }.download-button { padding-inline:12px; }.gallery { gap:20px 10px; }.artwork-meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media (prefers-contrast:more) { :root { --color-muted:#434348; --color-rule:#86868b; } }

/* Management stays one click away without separating the device from its gallery. */
#studio-dialog { width:min(720px,calc(100% - 36px)); max-width:720px; max-height:85svh; overflow:auto; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
#studio-dialog .studio-controls { margin-top:16px; padding-top:16px; }
#studio-dialog .progress-details { margin-top:8px; }
#studio-dialog .preview-actions { justify-content:flex-start; margin-block:12px; }
#studio-dialog .preview-actions button:first-child { margin-left:0; }
#studio-dialog .quiet { margin-top:0; }
.header-actions { gap:20px; }
#open-controls { color:var(--color-muted); font-size:12px; gap:3px; }
@media(max-width:700px) { .header-actions { gap:16px; }.header-actions .device-name { display:none; } }

/* A native modal preserves focus; only its photo list scrolls. */
html { scrollbar-gutter:stable; }
html.gallery-open,html.gallery-open body { overflow:hidden; overscroll-behavior:none; }
.wallpaper-navigation { align-items:center; }
.wallpaper-navigation .text-button { color:var(--color-ink); }
.wallpaper-navigation .text-button:disabled { text-decoration:none; }
#gallery-dialog { inset:0; margin:0; padding:0; width:100%; height:100svh; max-width:none; max-height:none; border:0; border-radius:0; overflow:hidden; }
#gallery-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr); }
.all-images-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 40px; border-bottom:1px solid var(--color-rule); }
.all-images-header h2 { font-size:24px; letter-spacing:-.03em; }
.all-images-header .quiet { margin-top:4px; }
.all-images-scroll { overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.all-images-content { width:calc(100% - 80px); max-width:1060px; margin:32px auto; }
.browse-feedback { position:fixed; z-index:5; bottom:24px; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 40px); padding:12px 20px; border:1px solid var(--color-rule); border-radius:12px; background:var(--color-paper); font-size:13px; }
@media(max-width:700px) { .all-images-header { padding:16px 20px; }.all-images-header h2 { font-size:22px; }.all-images-content { width:calc(100% - 36px); margin-block:24px; } }

/* Compact controls keep both capsules balanced around the download action. */
.device-actions { display:contents; }
.wallpaper-navigation { gap:0; }
.wallpaper-navigation .icon-button:hover:enabled { background:var(--color-paper); }
.icon-button { width:44px; height:44px; flex-shrink:0; display:inline-grid; place-items:center; padding:0; border:0; border-radius:50%; background:var(--color-transparent); }
.icon-button:hover:enabled { background:var(--color-surface); }
.preview-thumb { filter:blur(2px); transition:opacity 280ms; }
.preview-full { opacity:0; transition:opacity 280ms; }
[data-quality="full"] .preview-full { opacity:1; }
[data-quality="full"] .preview-thumb { opacity:0; }
.image-load-state { position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%); width:max-content; max-width:190px; padding:12px 16px; border:1px solid var(--color-rule); border-radius:12px; background:var(--color-paper); text-align:center; color:var(--color-ink); }
.image-load-state p { font-size:12px; margin:0; line-height:1.5; }
.image-load-state progress { display:block; appearance:none; width:100%; height:3px; margin-top:10px; border:0; border-radius:2px; overflow:hidden; background:var(--color-rule); accent-color:var(--color-accent); }
.image-load-state progress::-webkit-progress-bar { background:var(--color-rule); }
.image-load-state progress::-webkit-progress-value { background:var(--color-accent); }
.image-load-state progress::-moz-progress-bar { background:var(--color-accent); }
.image-load-state button { margin-top:8px; min-height:44px; padding-inline:12px; font-size:12px; }
@media(max-width:700px) {
  .device-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); gap:clamp(4px,1.4vw,8px); width:min(100%,380px); margin-inline:auto; }
  .device-actions { display:contents; }.download-button { width:44px; height:44px; padding:0; }.download-label { display:none; }
  .pose-control,.wallpaper-navigation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); min-width:0; }
  .pose-control button,.wallpaper-navigation .icon-button { min-width:0; width:100%; height:44px; padding:8px 0; border-radius:22px; }
  .pose-control button { font-size:clamp(11px,3.2vw,12px); white-space:nowrap; }
  .device-toolbar .control-icon { display:block; }.device-toolbar .control-label { display:none; }
  .image-load-state { max-width:132px; padding:10px 12px; }.image-load-state p { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .preview-full,.preview-thumb { transition:none; } }

[data-image-state="error"] .preview-thumb { filter:none; }

/* A single composer owns its attachments and send action. */
.prompt-editor { border:1px solid var(--color-rule); border-radius:18px; background:var(--color-surface); }
.prompt-editor:focus-within { border-color:var(--color-focus); outline:2px solid var(--color-accent-soft); }
.prompt-editor textarea { border:0; border-radius:18px; background:var(--color-transparent); min-height:96px; padding:16px 18px 8px; outline:none; }
.prompt-editor textarea:focus-visible { outline:none; }
.prompt-editor-footer { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; padding:4px 12px 12px; }
.reference-entry { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.composer-tool { min-height:44px; display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border:0; border-radius:22px; background:var(--color-transparent); color:var(--color-muted); font-size:12px; }
.composer-tool:hover:enabled { background:var(--color-rule); color:var(--color-ink); }
.prompt-editor .generate { width:44px; height:44px; min-height:44px; flex-shrink:0; padding:0; align-self:flex-end; }
.selected-references { display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px 0; }
.reference-chip { display:inline-flex; align-items:center; overflow:hidden; border:1px solid var(--color-rule); border-radius:10px; background:var(--color-paper); }
.reference-chip img { display:block; width:40px; height:40px; object-fit:cover; margin-left:4px; border-radius:6px; }
.reference-remove { display:inline-grid; place-items:center; width:44px; height:44px; flex-shrink:0; padding:0; border:0; background:var(--color-transparent); color:var(--color-muted); font-size:22px; }
.reference-remove:hover { color:var(--color-error); }
html.reference-open,html.reference-open body { overflow:hidden; overscroll-behavior:none; }
#reference-dialog { width:min(680px,calc(100% - 36px)); max-width:680px; max-height:85svh; padding:24px; overflow:hidden; }
#reference-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
#reference-dialog .dialog-heading .quiet { margin-top:4px; font-size:12px; }
.reference-scroll { overflow:auto; overscroll-behavior:contain; margin-top:20px; padding:4px; min-height:120px; }
.reference-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.reference-card { min-width:0; }
.reference-choose { display:block; padding:0; width:100%; aspect-ratio:4/3; border:0; border-radius:10px; background:var(--color-surface); overflow:hidden; outline:2px solid var(--color-transparent); outline-offset:2px; }
.reference-choose[aria-pressed="true"] { outline-color:var(--color-accent); }
.reference-choose img { display:block; width:100%; height:100%; object-fit:cover; }
.reference-card-caption { display:flex; align-items:center; justify-content:space-between; min-width:0; gap:4px; }
.reference-card-caption>span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
.reference-dialog-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--color-rule); padding-top:16px; margin-top:16px; }
#reference-tail { text-align:center; padding:16px 0; }#reference-more { margin-top:12px; }
@media(max-width:700px) {
  .composer { margin-top:16px; }
  .field-heading { margin-bottom:8px; }.field-heading label { font-size:clamp(14px,3.7vw,16px); }
  .prompt-editor textarea { height:80px; min-height:80px; padding:12px 14px 6px; font-size:clamp(14px,3.65vw,16px); line-height:1.5; }
  .prompt-editor textarea::placeholder { font-size:clamp(12px,3.35vw,14px); }
  .prompt-editor textarea:focus { font-size:16px; }
  .prompt-editor-footer { padding:4px 8px 8px; }.composer-tool { padding-inline:8px; gap:5px; }
  .composer-foot { min-height:28px; }.composer-foot .field-message { padding-block:6px; line-height:1.4; }
  .preview-stage { height:auto; aspect-ratio:2670/2400; margin-block:6px 12px; }.duo { width:calc(100% - 14px); }
  [data-pose="half"] .duo { transform:translateX(0%) translateY(16%) rotateX(-20deg) rotateZ(-90deg) rotateY(0deg) scale(.88); }
  .preview-caption { margin-top:12px; }#image-description { font-size:13px; line-height:1.45; }
  #image-meta,#pose-caption { margin-top:4px; }
  .collection { margin-top:20px; padding-top:20px; }.collection-heading { margin-bottom:14px; }.collection-heading h2 { font-size:22px; }
  .selected-references { gap:6px; padding-inline:12px; }
  #reference-dialog { padding:20px; }.reference-grid { gap:12px; }.reference-card-caption>span { font-size:11px; }
  .reference-dialog-footer { flex-wrap:wrap; gap:8px; }.reference-dialog-footer .button { padding-inline:16px; }
}

.reference-card-caption .reference-remove { color:var(--color-error); font-size:11px; }

/* Preview controls sit outside the simulated display; exported images stay untouched. */
.system-ui { font-family:var(--font-body); }
.system-ui { position:absolute; z-index:2; pointer-events:none; }
/* Keep the display's stacking context stable when boot filters finish. */
.screen,.outer-screen { isolation:isolate; }
.screen .system-ui { --wallpaper-turn:0deg; width:200%; height:100%; width:calc(200cqw * cos(var(--wallpaper-turn)) + 100cqh * sin(var(--wallpaper-turn))); height:calc(200cqw * sin(var(--wallpaper-turn)) + 100cqh * cos(var(--wallpaper-turn))); top:50%; left:100%; transform:translate(-50%,-50%) rotate(var(--wallpaper-turn)); transition:--wallpaper-turn var(--duration-fold) var(--ease-fold),opacity 220ms; }
.screen-right .system-ui { left:0; }
.os-portrait { opacity:0; }
[data-pose="half"] .screen .system-ui { --wallpaper-turn:90deg; }
[data-pose="half"] .os-landscape { opacity:0; }
[data-pose="half"] .os-portrait { opacity:1; }
.outer-screen .system-ui { inset:0; width:100%; height:100%; }
.outer-camera { z-index:3; }
/* 锁屏文字与图标恒为白色，浅色壁纸上靠阴影保证可读（对齐 iOS 官方锁屏）。 */
.os-lock,.os-status { color:#fff; fill:#fff; }
.os-home { fill:var(--color-on-accent); }
/* 入场先展示机身与锁屏，解锁时先读到上滑，再引入桌面。 */
.preview { --unlock-progress:0; }
.preview[data-arrival] { --duration-fold:1100ms; --ease-fold:cubic-bezier(.42,0,.22,1); }
[data-screen-mode="unlocked"] { --unlock-progress:1; }
.os-lock,.os-home,.os-home-indicator { transform-box:view-box; transform-origin:center; }
/* 三态都定义进退目标，CSS transition 可从中间帧继续响应下一次操作。 */
.os-lock { opacity:0; transform:translateY(12px); transition:transform 560ms cubic-bezier(.22,.75,.2,1),opacity 480ms ease-out; }
.os-home { opacity:0; transform:translateY(-8px) scale(.985); transition:transform 600ms cubic-bezier(.2,.8,.2,1),opacity 520ms ease-out; }
[data-screen-mode="locked"] .os-lock,[data-screen-mode="unlocked"] .os-lock { opacity:clamp(0,calc(1 - var(--unlock-progress) * 1.1),1); transform:translateY(calc(var(--unlock-progress) * -65%)); }
[data-screen-mode="unlocked"] .os-lock { opacity:0; }
[data-screen-mode="locked"] .os-home,[data-screen-mode="unlocked"] .os-home { opacity:clamp(0,calc((var(--unlock-progress) - .45) / .55),1); transform:translateY(calc((1 - var(--unlock-progress)) * 10px)) scale(calc(1.035 - var(--unlock-progress) * .035)); }
[data-screen-mode="unlocked"][data-screen-from="locked"]:not([data-unlock-gesture="true"]) .os-lock { transition:transform 740ms cubic-bezier(.42,0,.3,1),opacity 480ms 260ms ease-out; }
[data-screen-mode="unlocked"][data-screen-from="locked"]:not([data-unlock-gesture="true"]) .os-home { transition:transform 640ms 400ms cubic-bezier(.2,.65,.25,1),opacity 640ms 400ms ease-out; }
[data-swiping="true"] :is(.os-lock,.os-home,.os-home-indicator) { transition:none; }
[data-ui-available="true"] :is(.screen,.outer-screen) { pointer-events:auto; }
[data-screen-mode="locked"] :is(.screen,.outer-screen) { touch-action:pan-x pinch-zoom; cursor:grab; }
[data-swiping="true"] :is(.screen,.outer-screen) { cursor:grabbing; }
.os-lock text,.os-status text,.os-app-label { filter:drop-shadow(0 2px 5px rgb(0 0 0 / .45)); }
.os-lock text { filter:drop-shadow(0 .5px 1px rgb(0 0 0 / .13)); }
.os-lock [data-os-date] { font-weight:500; }
.os-app-label { font-weight:500; }
.os-lock-time { stroke:#63717a; stroke-width:.6; stroke-opacity:.3; stroke-linejoin:round; }
.os-photo-widget text,.os-widgets text { font-family:var(--font-body); }
/* 前景保持实色，只有天气与 Dock 的衬底透出局部模糊的壁纸。 */
.desktop-material { z-index:1; -webkit-backdrop-filter:blur(12px) saturate(1.15); backdrop-filter:blur(12px) saturate(1.15); visibility:hidden; opacity:0; }
.system-ui.desktop-material { transition:--wallpaper-turn var(--duration-fold) var(--ease-fold),opacity 520ms ease-out,visibility 0s 600ms; }
[data-screen-mode="unlocked"] .desktop-material { visibility:visible; opacity:1; transition-delay:0s,0s,0s; }
[data-screen-mode="unlocked"][data-screen-from="locked"]:not([data-unlock-gesture="true"]) .desktop-material { transition-duration:var(--duration-fold),640ms,0s; transition-delay:0s,400ms,0s; }
.screen .desktop-material.os-portrait { opacity:0; }
[data-screen-mode="unlocked"] [data-pose="half"] .screen .desktop-material.os-portrait { opacity:1; }
[data-pose="half"] .screen .desktop-material.os-landscape { opacity:0; }
.os-photo-widget,.os-widgets,.os-home .os-app,.os-home .os-dock { opacity:1; }
.os-photo-content { opacity:.94; }
.os-photo-widget [data-photo-title],.os-photo-widget [data-photo-credit] { fill:white; filter:drop-shadow(0 1px 2px rgb(0 0 0 / .55)); }
.os-app use,.os-dock>use { filter:drop-shadow(0 2px 3px rgb(0 0 0 / .24)); }
.os-weather-surface { --surface-rest:.88; fill-opacity:var(--surface-rest); stroke:white; stroke-opacity:.18; }
.os-dock-surface { --surface-rest:.32; fill-opacity:var(--surface-rest); }
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .desktop-material { display:none; }
  .os-photo-content { opacity:1; }
  .os-weather-surface,.os-dock-surface { animation:none !important; fill-opacity:1; }
  .os-dock-surface { fill:#344155; }
}

.os-photo-image { opacity:0; transition:opacity 1200ms ease-in-out; }
[data-photo-slot="0"] [data-photo-layer="0"],[data-photo-slot="1"] [data-photo-layer="1"] { opacity:1; }
@media (prefers-reduced-motion:reduce) { .os-photo-image { transition:none; } }
.os-home-indicator { opacity:0; transform:translateY(12px); transition:transform 560ms cubic-bezier(.22,.75,.2,1),opacity 480ms ease-out; }
[data-screen-mode="locked"] .os-home-indicator { opacity:calc(1 - var(--unlock-progress) * 2); transform:translateY(calc(var(--unlock-progress) * -65%)); }
[data-screen-mode="unlocked"] .os-home-indicator { transform:translateY(-65%); }
.os-quick>circle { fill:#c4bdac; fill-opacity:.23; stroke:#fff; stroke-opacity:.25; stroke-width:1.2; }
[data-screen-mode="clear"] .os-home-indicator { opacity:0; }
[data-ui-available="false"] .system-ui { visibility:hidden; }
.screen img { filter:blur(var(--hinge-softness)) contrast(var(--material-contrast)) saturate(var(--material-saturation)); }
.screen .preview-thumb { filter:blur(calc(2px + var(--hinge-softness))) contrast(var(--material-contrast)) saturate(var(--material-saturation)); }
[data-image-state="error"] .screen .preview-thumb { filter:blur(var(--hinge-softness)) contrast(var(--material-contrast)) saturate(var(--material-saturation)); }
.screen-left .system-ui { filter:blur(var(--hinge-softness)); }
.outer-screen img,.outer-screen .system-ui { filter:blur(var(--cover-softness)); }
/* Nano-texture is a slight veil and fine surface grain; hinge blur is independent. */
.screen::before { content:""; position:absolute; z-index:3; inset:0; pointer-events:none; opacity:0; background-image:linear-gradient(135deg,rgb(255 255 255 / .12),transparent 44%,rgb(255 255 255 / .05)),repeating-conic-gradient(rgb(255 255 255 / .3) 0% 25%,rgb(0 0 0 / .18) 0% 50%); background-size:100% 100%,2px 2px; transition:opacity 180ms; }
[data-matte="true"] .screen { --material-contrast:.98; --material-saturation:.98; }
[data-matte="true"] .screen::before { opacity:.09; }
@media(prefers-reduced-transparency:reduce) { .screen::before { background:var(--color-paper); } }
@media(prefers-reduced-motion:reduce) { .system-ui,.os-lock,.os-home,.os-home-indicator { transition:none !important; animation:none !important; }.os-lock,.os-home,.os-home-indicator { transform:none !important; } }

/* A single scrolling tool row leaves the send button reachable on narrow screens. */
.prompt-editor-footer { align-items:center; }
.prompt-editor .generate { align-self:center; }
#composer-tools { flex:1; min-width:0; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; padding:3px; margin:-3px; }
#composer-tools::-webkit-scrollbar { display:none; }
#composer-tools>.composer-tool { flex-shrink:0; white-space:nowrap; }
.prompt-option-controls { display:inline-flex; gap:4px; flex-shrink:0; }
.prompt-option { position:relative; min-width:60px; max-width:116px; color:var(--color-muted); }
.prompt-option-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prompt-option select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.prompt-option>span:last-of-type { display:flex; flex-shrink:0; }
.prompt-option:focus-within { outline:2px solid var(--color-focus); outline-offset:-2px; }
.prompt-option[data-selected="true"] { background:var(--color-accent-soft); color:var(--color-accent); }
.prompt-option:hover { background:var(--color-rule); }
.selected-references { display:block; padding:12px 18px 0; color:var(--color-muted); font-size:13px; line-height:1.8; }
.reference-prefix-label { display:block; font-size:11px; line-height:1.5; margin-bottom:3px; }
.reference-sentence { overflow-wrap:anywhere; }
.reference-sentence .reference-chip { display:inline-flex; vertical-align:middle; white-space:nowrap; margin-inline:3px; border-radius:22px; line-height:1; color:var(--color-ink); }
.reference-sentence .reference-chip img { width:28px; height:28px; border-radius:50%; margin-left:5px; }
.reference-sentence .reference-chip>span { margin-left:6px; font-size:12px; }
.reference-sentence .reference-remove { width:44px; height:44px; font-size:18px; }
@media(max-width:700px) {
  .selected-references { padding:10px 14px 0; font-size:12px; line-height:1.8; }
  .prompt-option { min-width:58px; max-width:104px; }.prompt-option-controls { gap:2px; }
}

/* Handwritten arrival, followed by one device boot per page visit. */
.site-intro { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--color-paper); touch-action:none; opacity:1; transition:opacity 160ms ease-out; }
.intro-lettering { width:clamp(210px,22vw,280px); height:auto; overflow:visible; color:var(--color-ink); animation:arrival-focus 650ms linear both; }
.intro-skip { position:absolute; right:max(24px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); min-height:44px; min-width:44px; padding:8px 14px; border:0; background:transparent; color:var(--color-muted); font-size:12px; }
.intro-skip:hover { color:var(--color-ink); }
.intro-lettering .logo-lettering { animation:arrival-lettering 420ms 30ms cubic-bezier(.2,.6,.25,1) both; }
/* 会话检查晚于动画结束时，遮罩定格遮盖，等检查完成再切换口令页或工作台。 */
.site-intro.settled { animation:none; opacity:1; }
.site-intro.settled .intro-lettering { animation:none; opacity:1; filter:none; }
.site-intro.settled .logo-lettering { animation:none; }
.site-intro.leaving { opacity:0; }
@keyframes arrival-lettering { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes arrival-focus { from { opacity:0; } 35%,100% { opacity:1; } }
.device-boot { position:absolute; inset:0; z-index:10; overflow:hidden; background:#050506; pointer-events:none; opacity:0; visibility:hidden; transition:opacity 650ms cubic-bezier(.2,.6,.25,1); }
[data-boot="waiting"] .device-boot,[data-boot="logo"] .device-boot,[data-boot="error"] .device-boot { opacity:1; visibility:visible; transition:none; }
[data-boot="revealing"] .device-boot { opacity:0; visibility:visible; }
.device-boot-scene { position:absolute; }
.screen .device-boot-scene { --wallpaper-turn:0deg; width:200%; height:100%; width:calc(200cqw * cos(var(--wallpaper-turn)) + 100cqh * sin(var(--wallpaper-turn))); height:calc(200cqw * sin(var(--wallpaper-turn)) + 100cqh * cos(var(--wallpaper-turn))); top:50%; left:100%; transform:translate(-50%,-50%) rotate(var(--wallpaper-turn)); transition:--wallpaper-turn var(--duration-fold) var(--ease-fold); }
.screen-right .device-boot-scene { left:0; }
[data-pose="half"] .screen .device-boot-scene { --wallpaper-turn:90deg; }
.outer-screen .device-boot-scene { inset:0; width:100%; height:100%; }
.device-boot-logo { transform-box:fill-box; transform-origin:center; opacity:0; }
[data-boot="logo"] .device-boot-logo { animation:apple-power-on 220ms ease-out both; }
[data-boot="error"] .device-boot-logo { opacity:1; }
.device-boot-fill { transform-box:fill-box; transform-origin:left center; transform:scaleX(var(--boot-progress,0)); transition:transform 100ms linear; }
[data-boot-progress="indeterminate"][data-boot="logo"] .device-boot-fill { animation:boot-progress-scan 1400ms ease-in-out infinite alternate; }
@keyframes boot-progress-scan { from { transform:translateX(0) scaleX(.2); } to { transform:translateX(80%) scaleX(.2); } }
/* 进度已融入手机，原有状态仅供读屏；错误与重试仍可见。 */
:is([data-boot="waiting"],[data-boot="logo"],[data-boot="revealing"]) .image-load-state { width:1px; height:1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); }
@media(prefers-reduced-motion:reduce) { .device-boot-logo { opacity:1; }.device-boot-fill { animation:none !important; transition:none; }[data-boot-progress="indeterminate"] .device-boot-fill { transform:scaleX(.2); } }
[data-boot="revealing"] .device-boot-logo { animation:apple-power-off 280ms ease-in both; }
[data-boot="revealing"] .system-ui { animation:screen-power-on 650ms cubic-bezier(.2,.6,.25,1) both; }
[data-boot="revealing"] :is(.screen,.outer-screen) img { animation:screen-image-power-on 650ms cubic-bezier(.2,.6,.25,1) both; }
@keyframes apple-power-on { from { opacity:0; } to { opacity:1; } }
@keyframes apple-power-off { from { opacity:1; filter:blur(0); } to { opacity:0; filter:blur(9px); } }
@keyframes screen-power-on { from { filter:brightness(.18) blur(4px); } to { filter:brightness(1) blur(0); } }
@keyframes screen-image-power-on {
  from { filter:brightness(.18) blur(calc(4px + var(--hinge-softness,0px))) contrast(var(--material-contrast,1)) saturate(var(--material-saturation,1)); }
  to { filter:brightness(1) blur(var(--hinge-softness,0px)) contrast(var(--material-contrast,1)) saturate(var(--material-saturation,1)); }
}


@media(prefers-contrast:more) { :root[data-theme="dark"] { --color-muted:#d5d5da; } }

.theme-toggle { display:inline-grid; place-items:center; width:44px; height:44px; flex-shrink:0; padding:0; border:0; border-radius:50%; background:transparent; color:var(--color-muted); }
.theme-toggle:hover { background:var(--color-surface); color:var(--color-ink); }
.theme-sun { display:none; }[data-theme="dark"] .theme-sun { display:block; }[data-theme="dark"] .theme-moon { display:none; }
.screen-glass { --glass-coating:1; --glass-strength:.2; position:absolute; z-index:11; inset:0; overflow:hidden; pointer-events:none; border-radius:inherit; box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),inset 0 -1px 0 rgb(255 255 255 / .05); }
@supports (opacity:calc(.1 + .1 * sin(0deg))) { .screen .screen-glass { --glass-strength:clamp(.17,calc(.17 + .21 * sin(var(--hinge-angle))),.38); } }
/* 两半屏的柔和暗部在铰链处相接，两侧窄高光表现玻璃的轻微凹陷。 */
.screen .screen-glass::after { content:""; position:absolute; top:0; bottom:0; width:clamp(4px,1.8cqw,9px); pointer-events:none; opacity:.85; }
.screen-left .screen-glass::after { right:0; background:linear-gradient(90deg,transparent,rgb(255 255 255 / .035) 24%,rgb(0 0 0 / .035) 58%,rgb(0 0 0 / .14)); }
.screen-right .screen-glass::after { left:0; background:linear-gradient(90deg,rgb(0 0 0 / .14),rgb(0 0 0 / .045) 28%,rgb(255 255 255 / .10) 65%,transparent); }
[data-pose="half"] .screen .screen-glass::after { opacity:1; }
.outer-screen .screen-glass { --glass-strength:.24; }
[data-matte="true"] .screen .screen-glass { --glass-coating:.45; }
.glass-environment { position:absolute; inset:-20% auto -20% 0; width:200%; opacity:calc(var(--glass-strength) * var(--glass-coating)); animation:glass-drift 16s ease-in-out infinite alternate,glass-glint 20s ease-in-out infinite; }
.screen-right .glass-environment { left:-100%; }.outer-screen .glass-environment { width:100%; }
.glass-environment::before { content:""; position:absolute; inset:-35%; background:linear-gradient(112deg,transparent 22%,rgb(255 255 255 / .05) 31%,rgb(255 255 255 / .82) 36%,rgb(255 255 255 / .16) 40%,transparent 42%,rgb(255 255 255 / .32) 44%,transparent 47%),linear-gradient(174deg,rgb(255 255 255 / .12),transparent 38%,rgb(0 0 0 / .14) 86%); transform:translate3d(var(--glass-x,0px),var(--glass-y,0px),0) rotate(var(--glass-roll,0deg)); transition:transform 180ms ease-out; }
[data-glass-paused="true"] .glass-environment { animation-play-state:paused; }
@keyframes glass-drift { from { transform:translate3d(-4%,-2%,0); } to { transform:translate3d(4%,2%,0); } }
/* 大部分时间保持轻反射，偶尔增强一次掠光。 */
@keyframes glass-glint { 0%,42%,78%,100% { opacity:calc(var(--glass-strength) * var(--glass-coating) * .7); } 58% { opacity:calc(var(--glass-strength) * var(--glass-coating) * 1.35); } }
@media(max-width:700px) { .header-content { gap:12px; }.header-actions { gap:10px; } }
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) { .screen-glass { display:none; } }

/* Keep native mobile controls above Safari's focus-zoom threshold. */
@media(max-width:700px),(hover:none) and (pointer:coarse) {
  .prompt-editor textarea,.prompt-option select,.concurrency-field select,input[type="password"] { font-size:16px; }
}
/* 来源选择沿用输入区工具栏的字号和触控范围。 */
#image-provider { min-height:44px; border:0; background:transparent; color:inherit; padding:0; cursor:pointer; }
#image-provider:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }

/* 真机舞台占据首屏，创作条只在底部占用一至两行。 */
#workspace { --studio-width:720px; padding-bottom:calc(var(--composer-height,72px) + 48px); }
.preview { max-width:none; min-height:calc(var(--visual-height,100svh) - 54px); display:flex; flex-direction:column; align-items:center; padding:24px 0 calc(var(--composer-height,72px) + 40px); }
.studio-intro { width:min(100%,720px); margin:0 auto 24px; text-align:center; }
.studio-purpose { font-size:13px; font-weight:600; color:var(--color-muted); }
.studio-intro h1 { margin:6px 0 8px; font-size:clamp(28px,3.8vw,42px); line-height:1.2; font-weight:650; letter-spacing:-.035em; }
.studio-description { font-size:15px; line-height:1.6; color:var(--color-muted); text-wrap:pretty; }
.preview-stage { width:min(100%,var(--studio-width)); height:auto; aspect-ratio:2670/1878; flex-shrink:0; margin-bottom:0; }
.preview-stage .duo { width:100%; }
.preview .device-toolbar { width:min(100%,var(--studio-width)); margin:24px auto 0; flex-shrink:0; }
.preview-caption { width:min(100%,var(--studio-width)); margin:8px auto 0; text-align:center; }
.preview-caption #image-description { margin:0; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-caption #image-meta { margin:3px 0 0; font-size:11px; }
.preview-caption #pose-caption { display:none; }
.floating-composer { position:fixed; z-index:30; left:50%; bottom:calc(var(--viewport-bottom,0px) + max(24px,env(safe-area-inset-bottom))); transform:translateX(-50%); width:min(var(--studio-width),calc(100% - 32px)); max-width:none; margin:0; }
.floating-composer .prompt-editor { display:flex; align-items:center; gap:6px; padding:8px; border:1px solid color-mix(in srgb,var(--color-border) 35%,transparent); border-radius:28px; background:var(--color-paper); background:color-mix(in srgb,var(--color-paper) 90%,transparent); box-shadow:0 8px 32px rgb(0 0 0 / .08),0 1px 4px rgb(0 0 0 / .04); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
.floating-composer .prompt-editor:focus-within { border-color:var(--color-border); outline:0; box-shadow:0 8px 32px rgb(0 0 0 / .10),0 0 0 2px var(--color-accent-soft); }
.floating-composer textarea { flex:1; min-width:0; width:0; height:28px; min-height:28px; max-height:52px; padding:2px 0; line-height:24px; font-size:16px; resize:none; overflow-y:auto; border-radius:0; scrollbar-width:thin; }
.composer-icon { position:relative; display:inline-flex; justify-content:center; align-items:center; gap:5px; min-width:44px; height:44px; padding:0 10px; border:0; border-radius:22px; background:transparent; color:var(--color-muted); cursor:pointer; flex-shrink:0; }
.composer-icon:hover { background:var(--color-surface); color:var(--color-ink); }
.composer-icon[aria-expanded="true"] { background:var(--color-accent-soft); color:var(--color-focus); }
.adjust-label { font-size:12px; }
.options-indicator { display:none; position:absolute; top:5px; right:6px; width:5px; height:5px; border-radius:50%; background:var(--color-accent); }
[data-active="true"]>.options-indicator { display:block; }
.floating-composer .generate { align-self:center; }
.floating-composer .generate:disabled { opacity:.4; cursor:default; }
.floating-composer .composer-foot { min-height:0; gap:8px; margin:0; align-items:flex-start; }
.floating-composer .composer-foot:has(.field-message:not(:empty)) { margin:6px 10px 0; }
.floating-composer .field-message { margin:0; padding:0; flex:1; font-size:11px; line-height:1.4; max-height:3em; overflow:auto; }
.floating-composer .field-message:empty { display:none; }
/* 字数提示不参与高度测量，聚焦与超限状态都不会顶起输入条。 */
.floating-composer #word-count { position:absolute; top:calc(100% + 4px); left:10px; visibility:hidden; color:var(--color-muted); font-size:11px; line-height:14px; font-variant-numeric:tabular-nums; pointer-events:none; }
.floating-composer:focus-within #word-count,.floating-composer #word-count.error { visibility:visible; }
.floating-composer #word-count.error { color:var(--color-error); }
.floating-composer .selected-references { display:flex; flex-wrap:wrap; gap:6px; padding:0 8px 8px; margin:0; line-height:1; }
.floating-composer .reference-chip { background:var(--color-paper); box-shadow:0 2px 10px rgb(0 0 0 / .06); }
.floating-composer .reference-chip img { width:32px; height:32px; margin-left:4px; }
.floating-composer .reference-chip>span { font-size:11px; margin-left:6px; }
.floating-composer .reference-remove { width:44px; height:44px; font-size:18px; }
.composer-popover { position:fixed; inset:auto; bottom:calc(var(--viewport-bottom,0px) + max(24px,env(safe-area-inset-bottom)) + var(--composer-height,72px) + 12px); left:50%; transform:translateX(-50%); width:min(720px,calc(100% - 32px)); max-height:min(380px,calc(var(--visual-height,100svh) - var(--composer-height,72px) - 100px)); overflow-y:auto; overscroll-behavior:contain; margin:0; padding:20px; border:1px solid var(--color-rule); border-radius:20px; color:var(--color-ink); background:var(--color-paper); box-shadow:0 8px 32px rgb(0 0 0 / .12); }
.composer-popover::backdrop { background:transparent; }
.creation-options header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.creation-options h2 { margin:0; font-size:15px; font-weight:600; }
.creation-options .provider-field { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; font-size:13px; }
.creation-options .provider-field select { max-width:70%; color:var(--color-ink); }
.creation-options .prompt-option-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; }
.creation-options .prompt-option { max-width:none; min-width:0; padding:10px 12px; border-radius:12px; background:var(--color-surface); color:var(--color-ink); }
.creation-options .quiet { margin:14px 0 0; font-size:11px; }
.attachment-options { width:220px; left:max(16px,calc(50% - var(--studio-width) / 2)); transform:none; padding:6px; }
.attachment-options .composer-tool { display:flex; width:100%; gap:12px; border-radius:12px; padding:12px; color:var(--color-ink); font-size:13px; text-align:left; }
html[data-keyboard-open="true"] .studio-intro,html[data-keyboard-open="true"] .preview-caption,html[data-keyboard-open="true"] .device-toolbar { display:none; }
/* 较矮桌面压缩开场间距，保留机身尺寸和可操作的底部工具栏。 */
@media(min-width:701px) and (max-height:940px) {
  .preview { padding-top:8px; }
  .studio-intro { margin-bottom:8px; }
  .studio-purpose { display:none; }
  .studio-intro h1 { margin:0 0 4px; font-size:32px; }
  .studio-description { font-size:14px; }
}
@media(max-width:700px) {
  .floating-composer { bottom:calc(var(--viewport-bottom,0px) + max(24px,env(safe-area-inset-bottom))); width:min(var(--studio-width),calc(100% - 36px)); }
  .floating-composer .prompt-editor { gap:2px; padding:6px; border-radius:26px; }
  .floating-composer .adjust-label { display:none; }
  .floating-composer .composer-icon { padding:0 8px; }
  .composer-popover { bottom:calc(var(--viewport-bottom,0px) + max(24px,env(safe-area-inset-bottom)) + var(--composer-height,72px) + 8px); width:calc(100% - 24px); padding:16px; }
  .attachment-options { width:220px; left:18px; padding:6px; }
  .preview { padding-top:24px; }
  .studio-intro { margin-bottom:28px; }
  .studio-intro h1 { max-width:12em; margin-inline:auto; font-size:30px; }
  .studio-description { max-width:24em; margin-inline:auto; font-size:14px; }
  .preview-caption #image-description { max-width:90vw; }
}
@media(max-width:380px) {
  .floating-composer { width:calc(100% - 28px); }
  .attachment-options { left:14px; }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .floating-composer .prompt-editor { background:var(--color-paper); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* 下载沿用现有入口：完整原图上直接标出保留区域。 */
.enhance-dialog { max-width:660px; width:min(660px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); padding:24px; overflow:auto; }
.enhance-dialog .dialog-header { display:flex; justify-content:space-between; align-items:start; gap:12px; margin-bottom:18px; }
.enhance-dialog h2 { margin:0; font-size:22px; line-height:1.3; }
.enhance-dialog header p { margin-top:6px; color:var(--color-muted); font-size:14px; }
.crop-frame { position:relative; width:min(100%,calc(44dvh * var(--source-ratio,1.422)),calc(420px * var(--source-ratio,1.422))); aspect-ratio:var(--source-ratio,1.422); margin-inline:auto; overflow:hidden; background:var(--color-surface); cursor:grab; touch-action:none; user-select:none; }
.crop-frame:active { cursor:grabbing; }
.crop-frame:focus-visible { outline:2px solid var(--color-focus); outline-offset:4px; }
.crop-frame[aria-disabled="true"] { cursor:default; }
.crop-frame img { display:block; width:100%; height:100%; pointer-events:none; }
.crop-selection { position:absolute; border:2px solid #fff; box-shadow:0 0 0 9999px rgb(0 0 0 / .76); pointer-events:none; }
#crop-message { min-height:2.8em; font-size:14px; line-height:1.5; margin:14px 0 16px; }
.enhance-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.download-choice { min-height:68px; padding:10px 12px; border-radius:var(--radius-control); display:flex; flex-direction:column; justify-content:center; gap:3px; line-height:1.4; font-size:15px; }
.download-choice small { display:block; font-size:12px; font-weight:400; }
#download-direct small { color:var(--color-muted); }
@media(max-width:700px) { .enhance-dialog { padding:18px; }.enhance-dialog h2 { font-size:20px; }.enhance-actions { gap:8px; }.download-choice { padding-inline:6px; font-size:14px; } }