html { color-scheme:dark; background:#030710; }
body { margin:0; }
*, *::before, *::after { box-sizing:border-box; }
  #mathis-cosmos .cosmos-page {
    --cosmos-bg:#030710;
    --cosmos-ink:#f5efe5;
    --cosmos-subtle:#b2bac8;
    --cosmos-glow:#849fda;
    position:relative; isolation:isolate; overflow:hidden; container-type:inline-size;
    min-height:650px; min-height:max(650px,100svh); padding:26px clamp(24px,4vw,64px) 24px; display:flex; flex-direction:column;
    background:var(--cosmos-bg); color:var(--cosmos-ink); font-family:Arial,Helvetica,sans-serif;
  }
  #mathis-cosmos .cosmos-page * { box-sizing:border-box; }
  #mathis-cosmos .cosmos-sky { position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
  #mathis-cosmos .cosmos-vignette { position:absolute; inset:0; pointer-events:none; z-index:-1; background:linear-gradient(180deg,#03071055,transparent 17%,transparent 75%,#030710b8); }
  #mathis-cosmos .cosmos-header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:44px;  }
  #mathis-cosmos .cosmos-actions { display:flex; align-items:center; gap:14px; }
  #mathis-cosmos .cosmos-replay { display:inline-flex; align-items:center; justify-content:center; width:32px; min-height:44px; flex:0 0 32px; padding:0; border:0; background:transparent; color:var(--cosmos-subtle); cursor:pointer; }
  #mathis-cosmos .cosmos-replay[hidden] { display:none; }
  #mathis-cosmos .cosmos-replay:hover { color:var(--cosmos-ink); }
  #mathis-cosmos .cosmos-motion { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0; border:0; background:transparent; color:var(--cosmos-subtle); font:12px/1.5 Arial,Helvetica,sans-serif; cursor:pointer; }
  #mathis-cosmos .cosmos-motion[hidden] { display:none; }
  #mathis-cosmos .cosmos-motion:hover { color:var(--cosmos-ink); }
  #mathis-cosmos .motion-play, #mathis-cosmos .cosmos-motion[data-paused="true"] .motion-pause { display:none; }
  #mathis-cosmos .cosmos-motion[data-paused="true"] .motion-play { display:block; }
  #mathis-cosmos .cosmos-monogram { font-family:Georgia,'Times New Roman',serif; font-size:22px; letter-spacing:-1px; }
  #mathis-cosmos .cosmos-about { display:inline-flex; align-items:center; gap:11px; min-height:44px; padding:0; border:0; background:transparent; color:var(--cosmos-subtle); font:12px/1.5 Arial,Helvetica,sans-serif; }
  #mathis-cosmos .cosmos-about:hover { color:var(--cosmos-ink); }
  #mathis-cosmos .cosmos-about .about-symbol { font-size:17px; }
  #mathis-cosmos .cosmos-main { display:flex; align-items:center; flex:1; min-height:465px; padding:40px 3.5% 24px; pointer-events:none; }
  #mathis-cosmos h1 { margin:0; font:400 clamp(100px,15cqw,230px)/.91 Georgia,'Times New Roman',serif; letter-spacing:-.075em; color:var(--cosmos-ink); text-shadow:0 2px 38px #03071080; }
  #mathis-cosmos .cosmos-line { display:block; overflow:visible; white-space:nowrap; padding:.08em .1em .13em; margin:-.08em -.1em -.13em; }
  #mathis-cosmos .cosmos-glyph { display:inline-block; position:relative; transform-origin:50% 78%; }
  #mathis-cosmos .cosmos-line-two { margin-left:.34em; margin-top:.025em; }
  html[data-reveal] #mathis-cosmos .cosmos-glyph, html[data-reveal] #mathis-cosmos .cosmos-spark { visibility:hidden; will-change:transform; }
  html[data-reveal] #mathis-cosmos .cosmos-footer a { visibility:hidden; }
  html[data-reveal] #mathis-cosmos .cosmos-footer a:focus-visible { visibility:visible; transform:none !important; }
  #mathis-cosmos h1 em { font-weight:400; }
  #mathis-cosmos .cosmos-spark { display:inline-block; position:relative; color:#e5b788; transform-origin:50% 78%; }
  #mathis-cosmos .cosmos-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:5px 28px; min-height:48px; }
  #mathis-cosmos .cosmos-footer a { display:inline-flex; align-items:center; gap:9px; min-height:44px; color:var(--cosmos-subtle); text-decoration:none; font-size:13px; line-height:1.5; }
  #mathis-cosmos .cosmos-footer a:hover { color:var(--cosmos-ink); }
  #mathis-cosmos .cosmos-footer svg { width:14px; height:14px; }
  #mathis-cosmos .link-label { display:inline-block; position:relative; transform-origin:0 80%; }
  #mathis-cosmos .link-label::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:#e5b788; transform:scaleX(var(--link-line,0)); transform-origin:left center; }
  #mathis-cosmos .cosmos-footer a:hover .link-label::after { transform:scaleX(1); }
  #mathis-cosmos .cosmos-about-panel { position:absolute; z-index:3; left:36px; right:36px; bottom:88px; max-width:385px; padding:22px 24px; background:var(--cosmos-bg); color:var(--cosmos-subtle); box-shadow:0 8px 40px #0007; font-size:13px; line-height:1.7; }
  #mathis-cosmos .cosmos-about-panel p { margin:0; }
  #mathis-cosmos .cosmos-about-panel p+p { margin-top:12px; }
  #mathis-cosmos .cosmos-about-panel[hidden] { display:none; }
  @media(max-width:480px) {
    #mathis-cosmos .cosmos-page { min-height:max(650px,100svh); padding:20px 24px; }
    #mathis-cosmos .cosmos-header {  }
    #mathis-cosmos .cosmos-main { min-height:440px; padding:55px 0 28px; align-items:center; }
    #mathis-cosmos h1 { font-size:clamp(80px,26cqw,120px); }
    #mathis-cosmos .cosmos-footer { flex-direction:column; align-items:flex-start; gap:0; }
    #mathis-cosmos .cosmos-about-panel { left:24px; right:24px; bottom:116px; padding:18px; }
  }

#mathis-cosmos .cosmos-details { display:block; }
#mathis-cosmos .cosmos-about { list-style:none; cursor:pointer; }
#mathis-cosmos .cosmos-about::-webkit-details-marker { display:none; }
#mathis-cosmos .cosmos-about::marker { content:""; }
#mathis-cosmos .cosmos-details[open] .cosmos-about .about-symbol { transform:rotate(45deg); }
#mathis-cosmos .cosmos-about-panel { left:clamp(24px,4vw,64px); right:clamp(24px,4vw,64px); }
#mathis-cosmos a:focus-visible, #mathis-cosmos summary:focus-visible, #mathis-cosmos button:focus-visible { outline:2px solid #a6bce6; outline-offset:6px; border-radius:2px; }
@media(max-width:480px) { #mathis-cosmos .cosmos-about-panel { left:24px; right:24px; } }
@media(prefers-reduced-motion:reduce) {
  #mathis-cosmos .cosmos-glyph, #mathis-cosmos .cosmos-spark, #mathis-cosmos .cosmos-footer a, #mathis-cosmos .link-label, #mathis-cosmos .cosmos-footer svg { visibility:visible !important; transform:none !important; }
}
@media(pointer:coarse) { #mathis-cosmos .cosmos-replay { width:44px; flex-basis:44px; } }
html:not([data-reveal]) #mathis-cosmos .cosmos-glyph,
html:not([data-reveal]) #mathis-cosmos .cosmos-spark,
html:not([data-reveal]) #mathis-cosmos .cosmos-footer a { visibility:visible !important; transform:none !important; }
html:not([data-reveal]) #mathis-cosmos .link-label { clip-path:none !important; }
html:not([data-reveal]) #mathis-cosmos .cosmos-footer svg { transform:none !important; }

/* Inner surfaces stay independent from the entrance choreography. */
#mathis-cosmos .glyph-ink,
#mathis-cosmos .spark-ink,
#mathis-cosmos .monogram-ink,
#mathis-cosmos .about-label,
#mathis-cosmos .about-symbol,
#mathis-cosmos .about-ink { display:inline-block; }
#mathis-cosmos .glyph-ink { pointer-events:auto; transform-origin:50% 72%; will-change:transform; }
#mathis-cosmos .spark-ink { pointer-events:auto; transform-origin:50% 88%; will-change:transform; }
#mathis-cosmos .cosmos-glyph:hover .glyph-ink { color:#fff6e8; }
#mathis-cosmos .cosmos-monogram { padding:7px 0; }
#mathis-cosmos .monogram-ink { transform-origin:40% 80%; }
#mathis-cosmos .link-orbit { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; transform-origin:center; }
#mathis-cosmos .cosmos-footer a,
#mathis-cosmos .cosmos-about,
#mathis-cosmos .cosmos-motion,
#mathis-cosmos .cosmos-replay { transition:color .22s ease; -webkit-tap-highlight-color:transparent; }
#mathis-cosmos .link-label::after { transition:transform .42s cubic-bezier(.2,.8,.2,1); }
#mathis-cosmos .cosmos-footer a:focus-visible .link-label::after { transform:scaleX(1); }
#mathis-cosmos .cosmos-about .about-symbol { line-height:1; transform-origin:50% 50%; transition:transform .46s cubic-bezier(.2,1.6,.3,1); }
#mathis-cosmos .about-label { position:relative; }
#mathis-cosmos .about-label::after { content:''; position:absolute; bottom:-5px; left:0; right:0; height:1px; background:#e5b788; transform:scaleX(0); transform-origin:right center; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
#mathis-cosmos .cosmos-about:hover .about-label::after,
#mathis-cosmos .cosmos-about:focus-visible .about-label::after,
#mathis-cosmos .cosmos-details[open] .about-label::after { transform:scaleX(1); transform-origin:left center; }
#mathis-cosmos .cosmos-about-panel { overflow:hidden; border:1px solid #b3c6e025; background:linear-gradient(135deg,#101929f7,#030710fa 70%); transform-origin:left bottom; border-radius:2px; }
#mathis-cosmos .cosmos-about-panel::before { content:''; position:absolute; left:-40%; top:0; width:40%; height:1px; background:linear-gradient(90deg,transparent,#e5b788,transparent); animation:cosmos-panel-light 6.8s linear infinite; pointer-events:none; }
#mathis-cosmos .cosmos-about-panel::after { content:''; position:absolute; right:12px; bottom:12px; width:4px; height:4px; border-radius:50%; background:#d8b17f; box-shadow:0 0 12px #dfb37a66; opacity:.6; pointer-events:none; }
#mathis-cosmos .cosmos-about-panel .about-ink { transform-origin:left center; }
#mathis-cosmos .cosmos-page[data-interaction-motion='still'] .cosmos-about-panel::before { animation-play-state:paused; }
@keyframes cosmos-panel-light { to { transform:translateX(350%); } }
@media(prefers-reduced-motion:reduce) {
  #mathis-cosmos .glyph-ink, #mathis-cosmos .spark-ink, #mathis-cosmos .monogram-ink,
  #mathis-cosmos .link-orbit, #mathis-cosmos .about-ink, #mathis-cosmos .about-label,
  #mathis-cosmos .cosmos-motion svg, #mathis-cosmos .cosmos-replay svg { transform:none !important; }
  #mathis-cosmos .cosmos-about-panel::before { animation:none; }
  #mathis-cosmos .cosmos-page * { transition:none !important; }
}

#mathis-cosmos .cosmos-about-panel { transition:border-color .35s ease,box-shadow .45s ease; }
#mathis-cosmos .cosmos-about-panel:hover { border-color:#c7ae8259; box-shadow:0 10px 44px #0008,inset 0 1px 28px #b58a4210; }
#mathis-cosmos .cosmos-details:not([open]) .cosmos-about:is(:hover,:focus-visible) .about-symbol { transform:rotate(90deg) scale(1.13); }

/* Keep the disclosure next to its trigger and away from the signature. */
#mathis-cosmos .cosmos-about-panel { top:86px; right:clamp(24px,4vw,64px); bottom:auto; left:auto; width:min(385px,calc(100% - 48px)); transform-origin:right top; }
@media(max-width:480px) { #mathis-cosmos .cosmos-about-panel { top:76px; right:24px; bottom:auto; left:auto; width:calc(100% - 48px); } }