:root { --mode-ink:#4e403c; --mode-muted:#756964; --mode-focus:#765e56; }
* { box-sizing:border-box; }
.mode-page { min-height:100dvh; margin:0; color:var(--mode-ink); display:grid; grid-template-rows:auto 1fr; overflow-x:clip; background:#eaf5f1; }
.mode-topbar { width:min(1180px,calc(100% - 48px)); margin:0 auto; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px dashed rgba(103,82,75,.18); }
.mode-brand { color:#59443e; font-size:20px; font-weight:800; letter-spacing:-.02em; text-decoration:none; }
.mode-account { display:flex; align-items:center; gap:14px; color:var(--mode-muted); font-size:14px; }
.mode-account a { color:#6f554e; text-underline-offset:3px; }
.mode-account button { min-height:44px; padding:8px 13px; }
.mode-main { width:min(1080px,calc(100% - 48px)); margin:auto; padding:36px 0 72px; }
.mode-heading { max-width:720px; margin:0 auto 34px; text-align:center; }
.mode-heading h1 { margin:0 0 12px; font-size:clamp(30px,4vw,46px); line-height:1.12; letter-spacing:-.03em; text-wrap:balance; }
.mode-heading p { margin:0; color:var(--mode-muted); font-size:15px; }
.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.mode-choice { position:relative; display:block; width:100%; min-width:0; min-height:min(410px,50vh); padding:clamp(28px,4vw,48px); border:0; border-radius:14px; color:var(--mode-ink); text-align:left; overflow:hidden; cursor:pointer; box-shadow:0 14px 34px rgba(95,75,68,.11); transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease; }
.mode-choice::before { content:""; position:absolute; width:180px; height:180px; right:-62px; top:-74px; border:1px solid rgba(103,82,75,.16); border-radius:50%; box-shadow:0 0 0 34px rgba(255,255,255,.22),0 0 0 68px rgba(255,255,255,.13); }
.mode-choice-quick { background:#f3faf7; }
.mode-choice-pro { background:#fff8f6; }
.mode-choice:hover { transform:translateY(-3px); box-shadow:0 21px 44px rgba(95,75,68,.16); }
.mode-choice:active { transform:translateY(0); }
.mode-choice:focus-visible { outline:3px solid rgba(118,94,86,.28); outline-offset:4px; }
.mode-choice-title,.mode-choice-product,.mode-choice-copy,.mode-choice-action { position:relative; z-index:1; display:block; }
.mode-choice-title { max-width:6ch; margin-bottom:20px; font-size:clamp(44px,6vw,68px); line-height:1; letter-spacing:-.035em; font-weight:850; }
.mode-choice-product { margin-bottom:12px; font-size:19px; font-weight:800; }
.mode-choice-copy { max-width:27em; color:#756964; font-size:15px; line-height:1.75; overflow-wrap:anywhere; }
.mode-choice-action { position:absolute; left:clamp(28px,4vw,48px); bottom:clamp(28px,4vw,42px); padding-bottom:5px; border-bottom:1px solid rgba(89,68,62,.34); font-size:14px; font-weight:750; }
.mode-status { position:fixed; inset:auto 24px 20px; margin:0; text-align:center; color:#8a3240; }
::selection { color:#fffdfb; background:#765e56; }
@media (max-width:760px) {
    .mode-page { overflow-y:auto; }
    .mode-topbar { width:calc(100% - 28px); min-height:64px; }
    .mode-account { min-width:0; gap:9px; }
    #modeIdentity { display:none; }
    .mode-main { width:calc(100% - 24px); padding:26px 0 32px; }
    .mode-heading { margin-bottom:22px; }
    .mode-heading h1 { font-size:30px; overflow-wrap:anywhere; }
    .mode-account button { padding-inline:10px; white-space:nowrap; }
    .mode-grid { grid-template-columns:1fr; gap:14px; }
    .mode-choice { min-height:280px; padding:28px; }
    .mode-choice-title { font-size:46px; margin-bottom:12px; }
    .mode-choice-action { left:28px; bottom:26px; }
}
@media (prefers-reduced-motion:reduce) {
    .mode-choice { transition:box-shadow .01ms; }
    .mode-choice:hover { transform:none; }
}