:root { color-scheme: light dark; --paper:#f7f7f5; --ink:#20201e; --muted:#666661; --line:#deded8; --accent:#bd2727; }
body.portal { background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; min-height:100dvh; display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; }
.portal-header,.portal-footer { width:min(1120px,calc(100% - 80px)); margin-inline:auto; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.portal-header { padding:32px 0; }
.brand { display:inline-flex; gap:12px; align-items:center; color:var(--ink); font-size:25px; font-weight:700; text-decoration:none; }
.brand img { width:40px; height:40px; border-radius:11px; }
.byline { font-size:12px; color:var(--muted); }
main.portal-main { width:min(1040px,calc(100% - 80px)); margin:auto; padding:64px 0 88px; border:0; border-radius:0; box-shadow:none; background:transparent; display:grid; grid-template-columns:1.3fr 1fr; gap:100px; align-items:center; }
.portal .kicker { font-size:14px; color:var(--muted); margin:0 0 26px; }
.portal h1 { margin:0; color:var(--ink); font-size:clamp(48px,6.5vw,80px); line-height:1.18; letter-spacing:-.06em; font-weight:650; }
.portal h1 span { color:var(--accent); }
.portal .intro-copy { font-size:16px; line-height:1.9; color:var(--muted); margin:28px 0 32px; }
.portal-primary { display:inline-flex; align-items:center; gap:36px; min-height:48px; padding:12px 20px; border-radius:9px; background:var(--ink); color:var(--paper); font-size:14px; font-weight:600; text-decoration:none; }
.portal-primary:hover { background:var(--accent); color:white; }
.account-note { border-left:1px solid var(--line); padding-left:48px; }
.portrait { width:88px; height:88px; border-radius:22px; display:block; margin-bottom:28px; }
.portal h2 { margin:0 0 20px; font-size:30px; line-height:1.4; letter-spacing:-.035em; font-weight:600; }
.account-note p { font-size:14px; color:var(--muted); line-height:1.9; max-width:32ch; }
.product-names { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:28px; }
.product-names a { display:flex; align-items:center; gap:8px; min-height:48px; padding:10px 8px; border-radius:9px; color:var(--ink); font-size:12px; text-decoration:none; }
.product-names a:hover { background:color-mix(in srgb,var(--ink) 5%,transparent); }
.product-names img { width:24px; height:24px; flex:0 0 24px; object-fit:contain; border-radius:5px; background:#fff; }
.product-arrow { color:var(--muted); margin-left:auto; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.portal-footer { padding:24px 0 28px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.portal-footer nav { display:flex; flex-wrap:wrap; gap:20px; }
.portal-footer a { color:var(--muted); text-decoration:none; }
.portal-footer a:hover { text-decoration:underline; text-underline-offset:3px; }
.portal a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
@media(max-width:760px) { .portal-header,.portal-footer,main.portal-main { width:calc(100% - 40px); } .portal-header { padding:24px 0; } main.portal-main { grid-template-columns:1fr; gap:48px; padding:40px 0 56px; } .account-note { border-left:0; border-top:1px solid var(--line); padding:32px 0 0; } .portrait { float:right; width:64px; height:64px; border-radius:16px; } .portal h2 { font-size:25px; } .portal-footer { align-items:flex-start; flex-direction:column; gap:12px; } .byline { font-size:10px; } }
@media(prefers-color-scheme:dark) { :root { --paper:#181818; --ink:#efefea; --muted:#aaa9a2; --line:#41413b; --accent:#ff9b94; } .portal-primary:hover { color:#331312; } }
@media(prefers-reduced-motion:no-preference) { .intro,.account-note { animation:portal-enter .35s ease-out both; } .account-note { animation-delay:.07s; } .portal a { transition:background-color .14s,color .14s; } @keyframes portal-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } }