@font-face{font-family:Inter;src:url('assets/Inter.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{font-family:Inter,system-ui,sans-serif;color:#292524;background:#faf9f6;color-scheme:light}
*{box-sizing:border-box}body{margin:0}::selection{background:#dcd7ce;color:#292524}
main{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px 48px}
.identity{text-align:center}.mark{display:block;margin:0 auto 28px;object-fit:contain;width:80px;height:80px}
h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(64px,10vw,144px);font-weight:400;letter-spacing:-.04em;line-height:1;margin:0;white-space:nowrap}
h1>span:first-child{font-style:italic;font-size:.82em}.italia{display:block;font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:14px;letter-spacing:.42em;line-height:1.3;margin:25px 0 0;padding-left:.42em}
.portal{font-size:18px;line-height:1.5;margin:40px 0 0;color:#57534e}
.login{width:min(100%,480px);margin-top:40px}label{display:block;font-size:13px;font-weight:500;margin-bottom:10px}
.password-control{display:flex;border:1px solid #a8a29e;border-radius:8px;background:#fff;overflow:hidden;min-height:56px}
input{font:inherit;font-size:16px;min-width:0;flex:1;border:0;padding:16px;background:transparent;color:#57534e;opacity:1;-webkit-text-fill-color:#57534e}input::placeholder{color:#57534e;opacity:1}
button{display:grid;place-items:center;width:56px;border:0;border-left:1px solid #e7e5e4;background:#292524;color:#fff;opacity:1}button svg{width:22px;height:22px}
input:disabled,button:disabled{cursor:not-allowed}#preview-note{text-align:center;color:#57534e;font-size:12px;line-height:1.6;margin:16px 0 0}
@media(max-width:480px){main{padding:48px 24px}.mark{width:64px;height:64px;margin-bottom:26px}h1{font-size:clamp(48px,13vw,64px)}.italia{font-size:12px;margin-top:20px}.portal{font-size:16px;margin-top:32px}.login{margin-top:32px}}
@media(max-height:620px) and (min-width:481px){main{padding:32px 24px}.mark{width:52px;height:52px;margin-bottom:16px}h1{font-size:88px}.italia{margin-top:16px}.portal{margin-top:24px}.login{margin-top:24px}}
/* Focus stays stable; only the surrounding surface moves. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.password-control{position:relative;overflow:visible;transition:transform 300ms cubic-bezier(.16,1,.3,1),box-shadow 300ms cubic-bezier(.16,1,.3,1),border-color 180ms ease}
.password-control:focus-within{transform:translateY(-3px);border-color:#57534e;box-shadow:0 8px 20px #29252412}
.password-control::after{content:'';position:absolute;bottom:-1px;left:12px;right:12px;height:2px;background:#356447;transform:scaleX(0);transform-origin:left;transition:transform 350ms cubic-bezier(.16,1,.3,1);pointer-events:none}
.password-control:focus-within::after{transform:scaleX(1)}
#portal-password{font-size:16px;line-height:24px;min-width:0;flex:1;padding:16px;color:#57534e;cursor:text;border-radius:8px 0 0 8px}
#portal-password:focus-visible{outline:2px solid #356447;outline-offset:3px}
#preview-enter{overflow:hidden;position:relative;border-radius:0 7px 7px 0;cursor:pointer;touch-action:manipulation;transition:background 160ms ease,transform 140ms cubic-bezier(.16,1,.3,1)}
#preview-enter:focus-visible{outline:2px solid #356447;outline-offset:4px}
#preview-enter:active{transform:scale(.93)}
@media(hover:hover) and (pointer:fine){#preview-enter:hover{background:#45403a}#preview-enter:hover svg{transform:translateX(3px)}}
#preview-enter svg{transition:transform 220ms cubic-bezier(.16,1,.3,1);pointer-events:none}
.password-control.is-playing{animation:surface-settle 650ms cubic-bezier(.16,1,.3,1)}
.is-playing #preview-enter svg{animation:arrow-pass 700ms cubic-bezier(.22,1,.36,1)}
.is-playing #preview-enter{background:#356447}
@keyframes surface-settle{0%{transform:translateY(-3px) scale(1)}18%{transform:translateY(-1px) scale(.988)}65%,100%{transform:translateY(-3px) scale(1)}}
@keyframes arrow-pass{0%{transform:translateX(0);opacity:1}40%{transform:translateX(34px);opacity:0}41%{transform:translateX(-28px);opacity:0}100%{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.password-control,.password-control::after,#preview-enter,#preview-enter svg{animation:none!important;transition:none!important;transform:none!important}.password-control:focus-within::after{transform:scaleX(1)!important}}
:root[data-motion=reduce] .password-control,:root[data-motion=reduce] .password-control::after,:root[data-motion=reduce] #preview-enter,:root[data-motion=reduce] #preview-enter svg{animation:none!important;transition:none!important;transform:none!important}
:root[data-motion=reduce] .password-control:focus-within::after{transform:scaleX(1)!important}

.login-error{color:#8b2929;font-size:14px;line-height:1.5;margin:16px 0 0}input#portal-password{border:0;outline-offset:3px}#preview-enter:disabled{cursor:wait}

#toggle-password{flex:0 0 44px;width:44px;background:transparent;color:#78716c;border:0;cursor:pointer;touch-action:manipulation}#toggle-password:hover{color:#292524}#toggle-password:focus-visible{outline:2px solid #356447;outline-offset:-4px;border-radius:5px}#toggle-password svg{width:20px;height:20px}.eye-slash{display:none}#toggle-password[aria-pressed=true] .eye-slash{display:block}#preview-enter{flex:0 0 56px}