/* Motion changes only the inner artwork: the grid remains stationary. */
.look-frame{display:block;position:relative;aspect-ratio:3/4;border-radius:15px;overflow:hidden;box-shadow:0 4px 8px #0001;isolation:isolate}
.look .look-frame img{display:block;height:100%;border-radius:0;box-shadow:none;transform:scale(1);transition:transform 650ms cubic-bezier(.2,.65,.3,1),filter 450ms ease}
.look-camera{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#292929;box-shadow:0 3px 12px #0002;opacity:0;transform:translate(-50%,-40%) scale(.7);transition:opacity 300ms,transform 450ms cubic-bezier(.2,.7,.2,1);pointer-events:none}
.camera-icon{display:inline-flex;width:19px;height:19px;align-items:center;justify-content:center;pointer-events:none}.camera-icon svg{width:100%;height:100%}.look-camera .camera-icon{width:18px;height:18px}
.upload{transition:background 250ms,border-color 250ms;overflow:hidden}.upload>.camera-icon{transition:transform 350ms,color 250ms}.upload:focus-within{outline:2px solid #827b68;outline-offset:3px}.upload input{z-index:1}.upload .remove{z-index:2}
.ratio span{transition:transform 300ms cubic-bezier(.2,.65,.3,1),background 250ms,border-color 250ms}.ratio{transition:color 250ms}.ratio[aria-pressed=true]{color:#383838}.ratio[aria-pressed=true] span{background:#ddd;border-color:#737373;transform:scale(1.08)}
.enter{display:flex;align-items:center;justify-content:center;gap:18px;overflow:hidden;transition:background 250ms,box-shadow 250ms}.enter-label,.enter-arrow{display:inline-block;transition:transform 350ms cubic-bezier(.2,.7,.2,1)}.enter-arrow{font-size:24px;line-height:20px}.enter.entering .enter-label{transform:translateX(10px)}.enter.entering .enter-arrow{transform:translateX(25px);opacity:0;transition:transform 220ms,opacity 220ms}
.pill{transition:background 250ms,box-shadow 250ms,transform 200ms}.pill:active,.ratio:active{transform:scale(.97)}.history button{transition:box-shadow 250ms,border-color 250ms}.history img{transition:transform 350ms}.hero,.workspace,.looks{animation:reveal 450ms ease both}.workspace{animation-delay:70ms}.looks{animation-delay:130ms}.macro-controls[hidden]{display:none}
@keyframes reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){
 .look:hover .look-frame img{transform:scale(1.075);filter:brightness(.94)}
 .look:hover .look-camera{opacity:1;transform:translate(-50%,-50%) scale(1)}
 .upload:hover{background:#f1f1f1;border-color:#aaa}.upload:hover>.camera-icon{transform:scale(1.15);color:#555}
 .ratio:hover{color:#555}.ratio:hover span{background:#e1e1e1;border-color:#888;transform:scale(1.13)}
 .enter:hover{background:#363636;box-shadow:0 4px 14px #0002}.enter:hover .enter-label{transform:translateX(-5px)}.enter:hover .enter-arrow{transform:translateX(7px)}
 .pill:hover{background:#f0f0f0;box-shadow:0 3px 8px #0001;transform:translateY(-1px)}.history button:hover img{transform:scale(1.08)}
}
.look:focus-visible .look-frame img{transform:scale(1.06)}.look:focus-visible .look-camera{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* Match the login reference's generous vertical rhythm at desktop widths. */
@media(min-width:1101px){
 .login{min-height:0;aspect-ratio:1.185}.login-panel{padding:42px 56px 38px}.login-photo{min-height:0;object-fit:cover}
 .brand{width:96px;height:112px}.manifesto{border:0;padding:0;position:relative;margin:38px 0 104px;line-height:1.9;font-size:9px;letter-spacing:.3em;padding-top:45px}
 .manifesto:before{content:'';position:absolute;top:0;left:0;width:1px;height:34px;background:#96988d}
 .login h1{font-size:clamp(80px,7vw,99px);line-height:.8;letter-spacing:-.065em;margin:0 0 22px}.login-intro{font-size:21px;margin-bottom:58px}
 .login label.field{margin-bottom:24px}.login-copy{padding-top:55px}.consent{font-size:10px;letter-spacing:.13em}.enter{margin-top:28px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:root{color:#252525;--ink:#252525}
.actions .pill{color:#252525;-webkit-text-fill-color:#252525}
.terms-modal{width:min(680px,92vw);height:auto;max-height:85dvh;background:#fff;color:#252525;border-radius:16px;padding:28px;box-shadow:0 20px 70px #0004}
.terms-modal[open]{display:flex;flex-direction:column;gap:22px}
.terms-modal::backdrop{background:#0007}
.terms-modal header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.terms-modal h2{font-size:17px;letter-spacing:.12em;margin:0}
.terms-modal header button{border:0;background:none;font-size:28px;padding:0 8px}
.terms-body{overflow:auto;white-space:pre-line;line-height:1.75;font-size:14px}
.terms-modal footer{text-align:center}
.terms-modal footer button{background:#111;color:white;border:0;border-radius:25px;padding:14px 45px;letter-spacing:.12em}
.hero h1{font-size:54px;margin:8px 0;line-height:1.1}
.hero p{margin:0}
.login h1,.login-intro{white-space:pre-line}
.logout{position:absolute;right:45px;top:89px;padding:8px;border:0;background:transparent;border-radius:50%}
.logout img{display:block;width:24px;height:24px;object-fit:contain}
.footer .footer-user-icon{width:42px;height:42px;flex-shrink:0;object-fit:contain}
.generation-loading,.startup-loading{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;color:#777;text-align:center}
.generation-loading{position:absolute;inset:0;z-index:5;background:#fafafa}
.generation-loading p,.startup-loading p{font-size:13px;letter-spacing:.15em;line-height:1.7;padding:0 20px}
.generation-spinner{display:block;width:38px;height:38px;border:2px solid #ddd;border-top-color:#777;border-radius:50%;animation:vision-spin 1s linear infinite}
.startup-loading{min-height:65vh;padding:30px}
@keyframes vision-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.login-photo{display:block;min-height:0;height:auto;aspect-ratio:4/3;object-fit:cover}.hero h1{font-size:40px}.logout{right:17px;top:39px}.footer .footer-user-icon{width:32px;height:32px}.terms-modal{padding:22px}}
.upload:focus-within{outline-color:#888}
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:#777}
.enter{background:#191919}
.manifesto:before{background:#999}
.footer-dot{display:block;flex:0 0 42px;width:42px;height:42px;border:1px solid #252525;border-radius:50%;background:#414141}
.footer-left{gap:18px;min-width:0}
.footer-account{line-height:1.5;overflow-wrap:anywhere}
.footer-plan{font-weight:700}
.macro-box.is-fixed{border-color:#00d6a0}
.macro-fixed-label{position:absolute;left:50%;top:8px;transform:translateX(-50%);white-space:nowrap;background:#00bf8e;color:white;border-radius:22px;padding:8px 12px;font-size:11px;font-weight:800;letter-spacing:.08em}
.macro-controls{gap:16px;padding:26px 0}
.macro-controls button{border-radius:30px;padding:16px 24px;text-transform:uppercase;font-weight:700;letter-spacing:.08em}
.macro-controls button:nth-child(2){background:#eee;border-color:#eee}
.macro-controls .macro-generate{flex-basis:100%;max-width:480px;margin:10px auto;background:#000;color:#fff;border:0;padding:24px;font-size:15px;box-shadow:0 12px 20px #0002}
.macro-guidance{flex-basis:100%;text-align:center;color:#999;font-size:12px;letter-spacing:.1em;line-height:1.6;margin:8px 0}
@media(max-width:700px){.footer{flex-wrap:wrap}.footer-dot{flex-basis:32px;width:32px;height:32px}.footer-left{gap:12px}}