.op-login{--color-brand-50:color-mix(in srgb, var(--color-biji-500) 8%, #fff);--color-brand-100:color-mix(in srgb, var(--color-biji-500) 16%, #fff);--color-brand-600:var(--color-biji-500);--color-brand-700:var(--color-biji-600);--op-bg:var(--color-biji-paper);--op-surface:#fff;--op-surface-2:color-mix(in srgb, var(--color-biji-line) 45%, var(--color-biji-paper));--op-text:var(--color-biji-ink);--op-text-2:var(--color-biji-muted);--op-rule:var(--color-biji-line);--op-rule-strong:var(--color-biji-dead);--op-accent-text:var(--color-biji-600);--op-wash:color-mix(in srgb, var(--color-biji-500) 8%, #fff);--op-wash-2:color-mix(in srgb, var(--color-biji-500) 16%, #fff);--op-wm-satu:var(--color-biji-ink);--op-wm-biji:var(--color-biji-500);--op-seed:var(--color-biji-500);background:var(--op-bg);min-height:100dvh;color:var(--op-text);font-family:var(--font-site);display:grid}:root[data-theme=dark] .op-login{--color-brand-50:color-mix(in srgb, var(--color-biji-500) 16%, var(--color-biji-night));--color-brand-100:color-mix(in srgb, var(--color-biji-500) 28%, var(--color-biji-night));--color-brand-600:var(--color-biji-500);--color-brand-700:var(--color-biji-600);--op-bg:var(--color-biji-night);--op-surface:var(--color-biji-night-card);--op-surface-2:color-mix(in srgb, var(--color-biji-night-card) 70%, var(--color-biji-night));--op-text:var(--color-biji-paper);--op-text-2:var(--color-biji-muted-dark);--op-rule:var(--color-biji-line-dark);--op-rule-strong:color-mix(in srgb, var(--color-biji-line-dark) 60%, var(--color-biji-muted-dark));--op-accent-text:var(--color-biji-300);--op-wash:color-mix(in srgb, var(--color-biji-500) 16%, var(--color-biji-night));--op-wash-2:color-mix(in srgb, var(--color-biji-500) 28%, var(--color-biji-night));--op-wm-satu:#fff;--op-wm-biji:var(--color-biji-300);--op-seed:var(--color-biji-300)}@media (width>=1024px){.op-login{grid-template-columns:minmax(420px,1fr) 1.2fr}}.op-brand{align-items:center;gap:10px;display:inline-flex}.op-seedmark{width:40px;height:28px;fill:var(--op-seed)}.op-wordmark{font-family:var(--font-wordmark);letter-spacing:-.03em;font-size:1.35rem;line-height:1}.op-wordmark>span:first-child{color:var(--op-wm-satu)}.op-wordmark>span:last-child{color:var(--op-wm-biji)}.op-side .op-seedmark{fill:var(--color-biji-300)}.op-side .op-wordmark>span:first-child{color:#fff}.op-side .op-wordmark>span:last-child{color:var(--color-biji-300)}.op-tag{background:var(--op-text);color:var(--op-bg);font-family:var(--font-site-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:4px 8px;font-size:.7rem;font-weight:600}.op-side .op-tag{color:var(--color-biji-night);background:#fff}.op-side{background:var(--color-biji-night);color:var(--color-biji-paper);background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-biji-300) 18%, transparent) 1.2px, transparent 1.6px);background-size:24px 24px;grid-template-rows:auto 1fr auto;padding:40px 48px;display:none}@media (width>=1024px){.op-side{display:grid}}:root[data-theme=dark] .op-side{background-color:color-mix(in srgb, var(--color-biji-night-card) 55%, var(--color-biji-night));border-right:1px solid var(--color-biji-line-dark)}.op-side-mid{align-self:center;gap:24px;max-width:460px;display:grid}.op-label{font-family:var(--font-site-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--color-biji-muted-dark);align-items:center;gap:10px;font-size:.78rem;display:inline-flex}.op-label:before{content:"";background:var(--color-biji-300);width:7px;height:7px;box-shadow:10px 0 0 color-mix(in srgb, var(--color-biji-300) 45%, transparent), 20px 0 0 color-mix(in srgb, var(--color-biji-300) 18%, transparent);border-radius:1.6px;margin-right:20px}.op-claim{font-family:var(--font-display);letter-spacing:-.035em;font-size:clamp(2rem,3vw,2.8rem);font-weight:650;line-height:1.05}.op-serif{font-family:var(--font-accent);color:var(--color-biji-300);font-style:italic;font-weight:400}.op-facts{border-top:1px solid var(--color-biji-line-dark);margin:0;padding:0;list-style:none}.op-facts li{border-bottom:1px solid var(--color-biji-line-dark);color:var(--color-biji-muted-dark);grid-template-columns:140px 1fr;gap:16px;padding:14px 0;font-size:.92rem;display:grid}.op-mono{font-family:var(--font-site-mono)}.op-facts .op-mono{color:var(--color-biji-300);padding-top:2px;font-size:.82rem}.op-side-foot{color:var(--color-biji-muted-dark);font-size:.76rem}.op-main{align-content:center;justify-items:center;padding:96px 16px 40px;display:grid;position:relative}.op-top{justify-content:space-between;align-items:center;display:flex;position:absolute;top:16px;left:16px;right:16px}@media (width>=1024px){.op-main{padding:48px 32px}.op-top-brand{visibility:hidden}}.op-card{background:var(--op-surface);border:1px solid var(--op-rule);width:100%;max-width:460px;box-shadow:0 1px 0 var(--op-rule), 0 18px 40px -24px color-mix(in srgb, var(--color-biji-ink) 35%, transparent);border-radius:22px;gap:12px;padding:clamp(24px,4vw,40px);display:grid}.op-steps{flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;list-style:none;display:flex}.op-steps li{background:var(--op-surface-2);color:var(--op-text-2);border-radius:999px;align-items:center;gap:8px;padding:6px 12px 6px 6px;font-size:.82rem;display:inline-flex}.op-steps li span{background:var(--op-surface);width:22px;height:22px;box-shadow:inset 0 0 0 1px var(--op-rule-strong);font-family:var(--font-site-mono);border-radius:999px;place-items:center;font-size:.72rem;display:grid}.op-steps li.is-on{color:var(--op-text)}.op-steps li.is-on span{background:var(--color-biji-500);color:#fff;box-shadow:none}.op-title{font-family:var(--font-display);letter-spacing:-.035em;font-size:clamp(1.6rem,3vw,2.1rem);font-weight:650;line-height:1.05}.op-muted{color:var(--op-text-2)}.op-body{margin-top:14px}.op-form{gap:18px;display:grid}.op-login input:not(.op-otp-box,[type=checkbox],[type=radio]),.op-login select{border-radius:12px;min-height:52px}.op-login button[type=submit]{background:var(--color-biji-500);color:#fff;border-radius:999px;min-height:52px;font-weight:600}.op-login button[type=submit]:hover{background:var(--color-biji-600)}.op-otp{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.op-otp-box{aspect-ratio:1/1.15;text-align:center;width:100%;max-height:64px;font-family:var(--font-site-mono);border:1.5px solid var(--op-rule-strong);background:var(--op-surface);color:var(--op-text);border-radius:12px;font-size:1.5rem;transition:border-color .2s,box-shadow .2s,transform .2s}.op-otp-box:nth-child(3){margin-right:10px}.op-otp-box:focus{border-color:var(--color-biji-500);box-shadow:0 0 0 4px var(--op-wash-2);outline:none;transform:translateY(-2px)}.op-otp-box[aria-invalid=true]{border-color:var(--op-accent-text)}.op-error{color:var(--op-accent-text);font-size:.875rem;font-weight:560}@media (prefers-reduced-motion:reduce){.op-otp-box{transition:none}}