.s4u-error{ position:relative; min-height:100vh; display:flex; flex-direction:column; padding:28px clamp(20px, 6vw, 64px); overflow:hidden; } .s4u-error__glow{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(58% 46% at 50% 38%, rgba(212,168,80,0.10), transparent 70%); } .s4u-error__brand{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; width:max-content; } .s4u-error__brand img{ width:30px; height:30px; object-fit:contain; } .s4u-error__brand .display-serif{ font-size:20px; color:#ecca7d; } .s4u-error__main{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .s4u-error__kicker{ color:var(--t-tertiary); margin-bottom:18px; } .s4u-error__title{ font-family:var(--font-display); font-optical-sizing:auto; font-weight:400; color:var(--t-primary); letter-spacing:-0.02em; line-height:1.02; font-size:clamp(40px, 8vw, 76px); } .s4u-error__title em{ font-style:italic; color:#f3d894; } .s4u-error .s4u-error__lead{ margin-top:32px; max-width:480px; font-size:15.5px; line-height:1.7; color:var(--t-secondary); } .s4u-error__cta{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; } .s4u-error .btn-primary{ width:auto; padding:0 30px; } .s4u-error__links{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 12px; } .s4u-error__links a, .s4u-error__links .s4u-error__linkbtn{ font-family:var(--font-ui); font-size:13px; line-height:1.2; color:var(--t-secondary); background:none; border:none; padding:2px 0; cursor:pointer; border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease; } .s4u-error__links a:hover, .s4u-error__links .s4u-error__linkbtn:hover{ color:var(--t-primary); border-bottom-color:var(--strong); } .s4u-error__dot{ color:var(--t-muted); font-size:13px; line-height:1; user-select:none; } .s4u-error .s4u-error__closehint{ display:none; margin-top:10px; font-size:12px; line-height:1.5; color:var(--t-muted); } .s4u-error .s4u-error__help{ margin-top:18px; max-width:440px; font-size:13px; line-height:1.6; color:var(--t-tertiary); } .s4u-error__help a{ color:#ecca7d; border-bottom:1px solid rgba(236,202,125,0.35); transition:border-color .15s ease; } .s4u-error__help a:hover{ border-bottom-color:#ecca7d; } .s4u-error__detail{ margin-top:26px; width:100%; max-width:560px; text-align:left; } .s4u-error__detail > summary{ cursor:pointer; width:max-content; margin:0 auto; list-style:none; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.18em; font-size:10.5px; color:var(--t-tertiary); transition:color .15s ease; } .s4u-error__detail > summary::-webkit-details-marker{ display:none; } .s4u-error__detail > summary:hover{ color:var(--t-secondary); } .s4u-error__detail[open] > summary{ color:var(--t-secondary); margin-bottom:12px; } .s4u-error__detail-msg{ font-family:var(--font-mono); font-size:12.5px; line-height:1.6; color:#e7d8b0; background:rgba(255,255,255,0.05); border:1px solid var(--hairline); border-radius:4px; padding:12px 14px; word-break:break-word; } .s4u-error__detail pre{ margin:10px 0 0; max-height:240px; overflow:auto; font-family:var(--font-mono); font-size:11.5px; line-height:1.5; color:var(--t-secondary); background:rgba(0,0,0,0.25); border:1px solid var(--hairline); border-radius:4px; padding:12px 14px; white-space:pre-wrap; word-break:break-word; } .s4u-error .s4u-error__detail-hint{ margin:0 0 12px; font-size:12px; line-height:1.5; color:var(--t-tertiary); } .s4u-error__detail:not([open]) > .s4u-error__detail-hint, .s4u-error__detail:not([open]) > .s4u-error__detail-msg, .s4u-error__detail:not([open]) > pre{ display:none; } .s4u-error__footer{ position:relative; z-index:1; text-align:center; font-size:12px; color:var(--t-muted); padding-top:18px; }