@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:linear-gradient(180deg,#FFF8F0 0%,#FFF8F0 40%,#F2E0E6 70%,#F2E0E6 100%);background-attachment:fixed;color:#2E2A35;font-family:'Outfit',sans-serif;font-weight:300;min-height:500vh;overflow-x:hidden;scroll-snap-type:y proximity}
.grid-underlay{position:fixed;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(200,182,226,0.03) 0px,rgba(200,182,226,0.03) 0.5px,transparent 0.5px,transparent 48px),repeating-linear-gradient(90deg,rgba(200,182,226,0.03) 0px,rgba(200,182,226,0.03) 0.5px,transparent 0.5px,transparent 48px);will-change:transform}

.theorem{position:relative;height:100vh;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:clamp(1rem,4vw,3rem)}
.theorem-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,2.5rem);width:100%;max-width:1200px;position:relative;z-index:2;align-items:start}

/* F-pattern: primary content cols 1-8, icons cols 9-12, vertical cols 1-3 */
.f-primary{grid-column:1/9;grid-row:1}
.f-icons{grid-column:9/13;grid-row:1/3;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start}
.f-vertical{grid-column:1/4;grid-row:2;display:flex;flex-direction:column;gap:12px;padding-top:24px}

/* Theorem II specific */
.f-band-top{grid-column:1/13;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:80px}
.f-band-mid{grid-column:1/13;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:24px}
.f-gutter{grid-column:1/2;grid-row:1/4;width:1px;height:100%;background:#C8B6E2;justify-self:center}
.f-empty{grid-column:1/13;grid-row:3;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10vh}

/* Theorem III: shifted */
.theorem-grid.shifted .f-primary{transform:translateX(3vw)}
.theorem-grid.shifted .f-vertical.tilted{transform:rotate(-2deg);transform-origin:top left}

/* Theorem IV: inverted */
.theorem-grid.inverted{align-items:end}
.f-primary-inv{grid-column:5/13;grid-row:1;text-align:right}
.f-icons-inv{grid-column:1/5;grid-row:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-content:end;align-self:end}

/* Typography */
.display-title{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(3.5rem,9vw,8rem);letter-spacing:-0.02em;line-height:1.05;font-variation-settings:'opsz' var(--opsz,144)}
.section-title{font-family:'Fraunces',serif;font-weight:900;font-size:clamp(1.8rem,5vw,4rem);letter-spacing:-0.02em;line-height:1.05;font-variation-settings:'opsz' var(--opsz,144)}
.theorem-num{font-family:'JetBrains Mono',monospace;font-size:0.8rem;letter-spacing:0.05em;color:#6B5E7B;display:block;margin-bottom:8px}
.theorem-statement{font-family:'Outfit',sans-serif;font-weight:300;font-size:clamp(1rem,1.2vw,1.25rem);line-height:1.7;letter-spacing:0.01em;color:#2E2A35;margin-top:16px;max-width:40ch}
.band-statement{font-family:'Outfit',sans-serif;font-weight:500;font-size:clamp(1rem,1.2vw,1.25rem);line-height:1.7;color:#2E2A35;flex:1}
.footnote{font-family:'JetBrains Mono',monospace;font-size:0.8rem;letter-spacing:0.05em;color:#6B5E7B;line-height:1.6}

/* Icon containers with border-animate */
.icon-container{width:120px;height:120px;display:flex;align-items:center;justify-content:center;border:2px solid transparent;border-image:conic-gradient(from var(--border-angle),#C8B6E2,#A8D5D0,#E8D5B7,#C8B6E2) 1;animation:border-rotate 6s linear infinite;transition:border-image 0.3s ease}
.icon-container svg{width:48px;height:48px;stroke:#C8B6E2;transition:stroke 0.3s ease}
.icon-container:hover svg{stroke:#A8D5D0}
.icon-container.stutter{animation:border-rotate 6s steps(8) infinite}
.icon-container.fast{animation:border-rotate 2s linear infinite}
.icon-container.slow{animation:border-rotate 12s linear infinite}
@keyframes border-rotate{0%{--border-angle:0deg}100%{--border-angle:360deg}}

/* Background numerals */
.bg-numeral{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.bg-numeral text{font-family:'Fraunces',serif;font-weight:900;font-size:240px;fill:#E8D5B7;opacity:0.06;animation:numeral-spin 60s linear infinite;transform-origin:center center}
.bg-numeral.large text{font-size:500px}
@keyframes numeral-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Rotating question mark */
.rotating-qmark{width:48px;height:48px;stroke:#C8B6E2;animation:numeral-spin 20s linear infinite}

/* Footnote particles */
.particle{position:absolute;font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:#6B5E7B;opacity:0;pointer-events:none;z-index:1}

/* Stagger reveal */
[data-stagger]>div{opacity:0;transform:translateY(24px);transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1),transform 0.7s cubic-bezier(0.16,1,0.3,1)}
[data-stagger].visible>div{opacity:1;transform:translateY(0)}
[data-stagger].visible>div:nth-child(1){transition-delay:0s}
[data-stagger].visible>div:nth-child(2){transition-delay:0.12s}
[data-stagger].visible>div:nth-child(3){transition-delay:0.24s}
[data-stagger].visible>div:nth-child(4){transition-delay:0.36s}

/* Palette references */
.ref-parchment{color:#FFF8F0}
.ref-rose{color:#F2E0E6}
.ref-lavender{color:#C8B6E2}
.ref-mauve{color:#B8A9C9}
.ref-charcoal{color:#2E2A35}
.ref-plum{color:#6B5E7B}
.ref-apricot{color:#E8D5B7}
.ref-teal{color:#A8D5D0}

@media(max-width:768px){
.theorem-grid{grid-template-columns:1fr}
.f-primary,.f-icons,.f-vertical,.f-band-top,.f-band-mid,.f-gutter,.f-empty,.f-primary-inv,.f-icons-inv{grid-column:1/-1;grid-row:auto}
.theorem-grid.shifted .f-primary{transform:none}
.theorem-grid.shifted .f-vertical.tilted{transform:none}
.theorem-grid.inverted{align-items:start}
.f-primary-inv{text-align:left}
.icon-container{width:80px;height:80px}
body{scroll-snap-type:none}
}