/* GradeKiln — "Kiln Geometry" system (v3, mobile-first).
   Hexagon = kiln brick. Circle = gauge. Triangle = flame.
   Base styles are the phone layout; desktop layers on at min-width
   breakpoints (640 chrome, 860 compact inputs, 1000 full ambient shapes).
   Inputs stay >=16px below 860px so iOS never auto-zooms; tap targets
   stay >=44px on touch layouts. Dark default; light via [data-theme=light]
   or OS preference (unchanged toggle logic).
   Fonts are loaded via <link> in the page head (see build.mjs). */

:root{
  --bg:#0f1118; --bg2:#171a24; --well:#0b0d13;
  --line:#262a38; --line-strong:#353a4b; --rule:#4a5064;
  --text:#ecedf3; --muted:#a9adbf; --faint:#7f8498;
  --ember:#ff7a45; --ember-ink:#ff9a6c; --ember-dim:rgba(255,122,69,.14);
  --teal:#22d3c5; --teal-ink:#5ee5d9; --teal-dim:rgba(34,211,197,.14);
  --violet:#9d85ff; --violet-ink:#b5a3ff; --violet-dim:rgba(157,133,255,.16);
  --gold:#ffc542; --magenta:#ff5cb8;
  --accent:var(--ember); --accent-deep:var(--ember); --accent-ink:var(--ember-ink); --accent-dim:var(--ember-dim);
  --err:#ff6b6b; --stamp:var(--teal-ink); --on-accent:#0f1118;
  --shape-op:.3; --field-op:.07; --shadow:0 20px 50px -24px rgba(0,0,0,.7);
  --display:"Bricolage Grotesque","Manrope",system-ui,sans-serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#fbf8f2; --bg2:#ffffff; --well:#f3eee6;
  --line:#e6e0d5; --line-strong:#d2cabb; --rule:#b9b09e;
  --text:#1a1b26; --muted:#4e5163; --faint:#6b6f83;
  --ember:#f4511e; --ember-ink:#b8360a; --ember-dim:rgba(244,81,30,.10);
  --teal:#00a3a3; --teal-ink:#00706f; --teal-dim:rgba(0,163,163,.10);
  --violet:#6d4aff; --violet-ink:#5230e0; --violet-dim:rgba(109,74,255,.12);
  --gold:#ffb300; --magenta:#e0399a;
  --err:#c0392b; --stamp:var(--teal-ink); --on-accent:#ffffff;
  --shape-op:.5; --field-op:.06; --shadow:0 20px 50px -28px rgba(26,27,38,.28);
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#fbf8f2; --bg2:#ffffff; --well:#f3eee6;
    --line:#e6e0d5; --line-strong:#d2cabb; --rule:#b9b09e;
    --text:#1a1b26; --muted:#4e5163; --faint:#6b6f83;
    --ember:#f4511e; --ember-ink:#b8360a; --ember-dim:rgba(244,81,30,.10);
    --teal:#00a3a3; --teal-ink:#00706f; --teal-dim:rgba(0,163,163,.10);
    --violet:#6d4aff; --violet-ink:#5230e0; --violet-dim:rgba(109,74,255,.12);
    --gold:#ffb300; --magenta:#e0399a;
    --err:#c0392b; --stamp:var(--teal-ink); --on-accent:#ffffff;
    --shape-op:.5; --field-op:.06; --shadow:0 20px 50px -28px rgba(26,27,38,.28);
    color-scheme:light;
  }
}

*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  position:relative;isolation:isolate;min-height:100vh}
a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
a:hover{border-bottom-color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:6px}
.wrap{max-width:900px;margin:0 auto;padding:0 clamp(14px,4vw,36px)}

/* ---------- ambient geometry: fixed, behind everything; small and dim on
   phones so shapes never fight the text column, full-size from 1000px ---------- */
/* hexagonal field across the ground */
html::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:var(--field-op);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23808080' stroke-width='1.2'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50' fill='none' stroke='%23808080' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/56px 100px}
/* the gauge: big ember circle top-right, gold dot, violet dot */
body::before{content:"";position:fixed;z-index:-2;pointer-events:none;inset:0;opacity:var(--shape-op);
  background:
    radial-gradient(circle at center, var(--ember) 0 46%, transparent 46.5% 58%, var(--ember) 58.5% 62%, transparent 62.5%) calc(100% + 150px) -170px / 380px 380px no-repeat,
    radial-gradient(circle at center, var(--gold) 0 50%, transparent 50.5%) calc(100% - 40px) 240px / 40px 40px no-repeat,
    radial-gradient(circle at center, var(--violet) 0 50%, transparent 50.5%) 24px 40% / 16px 16px no-repeat}
/* the brick: teal hexagon bottom-left, with a magenta triangle keyed to the right edge */
body::after{content:"";position:fixed;z-index:-2;pointer-events:none;left:-140px;bottom:-120px;width:300px;height:300px;
  background:var(--teal);opacity:var(--shape-op);
  clip-path:polygon(50% 2%,93% 26%,93% 74%,50% 98%,7% 74%,7% 26%)}
footer.site::before{content:"";position:fixed;z-index:-2;pointer-events:none;right:-60px;top:52%;width:160px;height:150px;
  background:var(--violet);opacity:calc(var(--shape-op) * .9);
  clip-path:polygon(50% 4%,96% 92%,4% 92%);transform:rotate(-14deg)}

/* ---------- masthead ---------- */
header.site{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:4px solid; border-image:linear-gradient(90deg,var(--ember),var(--gold),var(--teal),var(--violet),var(--magenta)) 1;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
header.site .wrap{display:flex;align-items:center;gap:12px;padding:10px 0}
.wordmark{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;
  color:var(--text);border-bottom:none;display:inline-flex;align-items:center}
.wordmark::before{content:"";width:22px;height:22px;flex:none;margin-right:8px;
  background:radial-gradient(circle at center,var(--bg2) 0 24%,transparent 25%),linear-gradient(135deg,var(--ember),var(--magenta));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.wordmark i{font-style:normal;color:var(--ember-ink)}
nav.top{margin-left:auto;display:flex;align-items:center;gap:8px}
nav.top a{font:600 11.5px var(--sans);letter-spacing:.06em;color:var(--muted);border-bottom:none;
  text-transform:uppercase;padding:12px 4px;white-space:nowrap}
nav.top a:hover{color:var(--text)}
.toggle{border:1px solid var(--line-strong);background:var(--bg2);color:var(--muted);
  font:600 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;min-height:38px;
  padding:6px 12px 6px 10px;cursor:pointer;border-radius:999px;display:inline-flex;align-items:center;gap:7px;transition:border-color .15s,color .15s}
.toggle::before{content:"";width:12px;height:12px;border-radius:50%;
  background:linear-gradient(90deg,var(--text) 50%,transparent 50%);border:1.5px solid var(--text);box-sizing:border-box}
.toggle:hover{color:var(--text);border-color:var(--violet)}

/* ---------- hero: the calculator is the page. The header block stays short
   so the ledger starts inside the first screen at every width; on desktop
   the headline sits left and the sub right (FileKiln pattern). ---------- */
main{padding:14px 0 56px}
.hero{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 14px}
h1{font-family:var(--display);font-weight:700;font-size:clamp(27px,7.4vw,44px);line-height:1.06;
  letter-spacing:-.025em;margin:0 0 10px;text-wrap:balance}
h1::before{content:"";display:block;width:92px;height:18px;margin-bottom:10px;
  background:
    radial-gradient(circle at center,var(--ember) 0 50%,transparent 51%) 0 0/18px 18px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 30px 0/18px 18px no-repeat,
    linear-gradient(var(--violet),var(--violet)) 60px 0/18px 18px no-repeat;
  -webkit-mask:
    linear-gradient(#000,#000) 0 0/18px 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50 0,100 25,100 75,50 100,0 75,0 25'/%3E%3C/svg%3E") 30px 0/18px 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50 4,98 96,2 96'/%3E%3C/svg%3E") 60px 0/18px 18px no-repeat;
  mask:
    linear-gradient(#000,#000) 0 0/18px 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50 0,100 25,100 75,50 100,0 75,0 25'/%3E%3C/svg%3E") 30px 0/18px 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50 4,98 96,2 96'/%3E%3C/svg%3E") 60px 0/18px 18px no-repeat}
.sub{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0;max-width:58ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- the ledger: a surface card with the signature stripe ---------- */
.ledger{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.ledger::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;z-index:1;
  background:linear-gradient(90deg,var(--ember),var(--gold),var(--teal),var(--violet),var(--magenta))}
.ledger-cap{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:17px 14px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--well) 55%,var(--bg2))}
.ledger-cap .t{font:700 11.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);display:inline-flex;align-items:center;gap:8px}
.ledger-cap .t::before{content:"";width:11px;height:11px;background:var(--teal);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.ledger-cap .s{font:12px var(--mono);color:var(--faint);flex-basis:100%}

/* rows: phones drop the column-header strip (fields carry aria-labels and
   placeholders) and use fixed narrow columns so the course name keeps room.
   The 5-column weighted layout can't fit one phone line, so the course name
   takes a full line of its own and credits/grade/type share the second. */
.row-h{display:none}
.rows{display:flex;flex-direction:column;padding:6px 6px 2px}
.row{display:grid;grid-template-columns:minmax(0,1fr) 44px 112px 44px;gap:8px;align-items:center;
  padding:5px 6px;border-radius:12px;transition:background .15s}
.row.w5{grid-template-columns:52px minmax(0,1fr) minmax(0,1fr) 44px;
  grid-template-areas:"name name name del" "cr gr ty ty"}
.row.w5>input[type=text]{grid-area:name}
.row.w5>input[type=number]{grid-area:cr}
.row.w5>select:not(.w){grid-area:gr}
.row.w5>select.w{grid-area:ty}
.row.w5>.del{grid-area:del;justify-self:center}
.row:hover{background:color-mix(in srgb,var(--well) 70%,transparent)}
input[type=text],input[type=number],select{width:100%;height:44px;padding:0 10px;border:1px solid transparent;
  background:transparent;color:var(--text);font:16px var(--sans);border-radius:9px;transition:background .15s,border-color .15s}
select{font:15px var(--mono);color:var(--text)}
select option{background:var(--bg2);color:var(--text)}
input:hover,select:hover{background:var(--well);border-color:var(--line)}
input:focus,select:focus{outline:none;border-color:var(--violet);background:var(--well);box-shadow:0 0 0 3px var(--violet-dim)}
input::placeholder{color:var(--faint)}
input[type=number]{font-family:var(--mono);font-size:16px}
.del{height:44px;width:40px;padding:0;border:0;background:transparent;color:var(--faint);
  font:400 18px/1 var(--sans);cursor:pointer;border-radius:12px;transition:background .15s,color .15s}
.del:hover{color:var(--on-accent);background:var(--err)}
.bar{display:flex;align-items:center;gap:10px;padding:12px 14px 16px;border-top:1px solid var(--line)}
button.act{border:0;color:var(--on-accent);background:linear-gradient(120deg,var(--ember),var(--magenta));
  font:700 15px var(--display);letter-spacing:.02em;min-height:46px;padding:10px 18px;cursor:pointer;border-radius:999px;
  flex:1 1 auto;box-shadow:0 8px 20px -10px var(--ember);transition:transform .15s,box-shadow .15s}
button.act:hover{transform:translateY(-1px);box-shadow:0 12px 24px -10px var(--magenta)}
button.ghost{border:1px solid var(--line-strong);background:transparent;color:var(--muted);
  font:600 14px var(--sans);min-height:46px;padding:9px 16px;cursor:pointer;border-radius:999px;
  flex:0 0 auto;transition:border-color .15s,color .15s}
button.ghost:hover{color:var(--text);border-color:var(--teal)}
.bar-note{display:none;font:11.5px var(--mono);color:var(--faint)}

/* totals: GPA inside a gauge ring */
.result{display:flex;align-items:center;gap:16px 20px;flex-wrap:wrap;padding:18px 14px 20px;
  border-top:1px solid var(--line);background:color-mix(in srgb,var(--well) 55%,var(--bg2))}
.result .gpa{position:relative;width:106px;height:106px;border-radius:50%;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:conic-gradient(from 210deg,var(--ember),var(--gold),var(--teal),var(--violet),var(--magenta),var(--ember))}
.result .gpa::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--bg2)}
.result .gpa small{position:relative;font:700 9.5px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:2px}
.result .gpa span{position:relative;font-family:var(--display);font-weight:700;font-size:30px;line-height:1;
  letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.result .stat{font:13px var(--sans);color:var(--muted)}
.result .stat b{display:block;color:var(--text);font-family:var(--display);font-weight:700;font-size:20px;line-height:1.1;margin-top:2px}
.result .band{font:700 12px var(--display);letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-accent);background:linear-gradient(120deg,var(--teal),var(--violet));padding:12px 24px;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%)}

.local-note{margin:14px 0 0;padding:13px 14px 13px 16px;border-radius:14px;
  background:var(--teal-dim);border-left:4px solid var(--teal);
  color:var(--muted);font-size:13.5px;line-height:1.6;max-width:none}
.local-note strong{color:var(--teal-ink);font:700 10.5px var(--display);letter-spacing:.12em;text-transform:uppercase;margin-right:10px}

/* scale table */
.scale-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--bg2);margin:16px 0}
table.scale{border-collapse:collapse;margin:0;font-size:14px;min-width:300px;width:100%}
table.scale th{text-align:left;font:700 10.5px var(--display);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding:10px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--well) 55%,var(--bg2))}
table.scale td{padding:8px 16px;border-bottom:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
table.scale tr:last-child td{border-bottom:0}
table.scale td:first-child{font-family:var(--mono);font-size:13px;color:var(--text);font-weight:500}

/* prose */
section.prose{margin-top:30px;max-width:70ch}
section.prose:has(.tool-index){max-width:none}
section.prose h2{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;margin:34px 0 12px;padding-bottom:12px;position:relative}
section.prose h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--ember),var(--violet))}
section.prose h3{font-family:var(--display);font-size:16px;font-weight:700;margin:22px 0 4px;color:var(--text)}
section.prose p,section.prose li{color:var(--muted);font-size:14.5px;line-height:1.7}
section.prose code{font:12.5px var(--mono);background:var(--well);border:1px solid var(--line);padding:1px 7px;border-radius:6px;color:var(--text);overflow-wrap:anywhere}

/* tool index: tiles with a shape per tool */
.tool-index{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr;gap:12px}
.tool-index li{border:0}
.tool-index a{display:grid;grid-template-columns:44px minmax(0,1fr) 30px;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;
  padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--bg2);color:inherit;height:100%;
  box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.tool-index a:hover{transform:translateY(-2px);border-color:var(--line-strong);background:var(--bg2)}
.tool-index a::before{content:"";grid-row:1/3;width:44px;height:44px;background:var(--ember)}
.tool-index li:nth-child(4n+1) a::before{background:linear-gradient(135deg,var(--ember),var(--gold));border-radius:50%}
.tool-index li:nth-child(4n+2) a::before{background:linear-gradient(135deg,var(--teal),var(--violet));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tool-index li:nth-child(4n+3) a::before{background:linear-gradient(135deg,var(--violet),var(--magenta));clip-path:polygon(50% 4%,98% 96%,2% 96%)}
.tool-index li:nth-child(4n+4) a::before{background:linear-gradient(135deg,var(--gold),var(--ember));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.tool-index .t{font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--text);white-space:normal;letter-spacing:-.01em}
.tool-index .d{font-size:13px;color:var(--muted);grid-column:2}
.tool-index .go{grid-row:1/3;grid-column:3;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;color:var(--faint);font-family:var(--mono);font-size:14px;transition:background .15s,color .15s,border-color .15s}
.tool-index a:hover .go{background:var(--violet);border-color:var(--violet);color:var(--on-accent)}

footer.site{margin-top:20px;border-top:4px solid;border-image:linear-gradient(90deg,var(--ember),var(--gold),var(--teal),var(--violet),var(--magenta)) 1;
  background:color-mix(in srgb,var(--bg2) 70%,var(--bg));padding:18px 0 40px;font-size:12.5px;color:var(--faint)}
footer.site .wrap{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center}
footer.site a{color:var(--muted);border-bottom:none;padding:8px 0}
footer.site a:hover{color:var(--text)}

@media (max-width:420px){
  .toggle{font-size:0;padding:8px;gap:0}
}

/* ── desktop layers on ─────────────────────────────────────────── */
@media (min-width:640px){
  .wrap{padding:0 clamp(18px,4vw,36px)}
  header.site .wrap{gap:20px;padding:14px 0}
  .wordmark{font-size:22px}
  .wordmark::before{width:26px;height:26px;margin-right:10px}
  nav.top{gap:22px}
  nav.top a{font-size:12.5px;padding:6px 0}
  .toggle{min-height:0}
  main{padding:26px 0 72px}
  .hero{grid-template-columns:1.2fr .8fr;gap:clamp(20px,4vw,48px);align-items:center;margin-bottom:22px}
  h1{font-size:clamp(30px,3.8vw,42px);line-height:1.05;margin-bottom:0}
  h1::before{margin-bottom:14px}
  .sub{font-size:15px;margin:0;display:block;-webkit-line-clamp:none;overflow:visible}
  .ledger{border-radius:20px}
  .ledger-cap{flex-wrap:nowrap;padding:19px 18px 14px}
  .ledger-cap .s{flex-basis:auto;margin-left:auto}
  .row-h{display:grid;grid-template-columns:minmax(0,1fr) 88px 132px 34px;gap:10px;padding:12px 18px 6px;
    font:600 10.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  .row-h.w5{grid-template-columns:minmax(0,1fr) 88px 118px 112px 34px}
  .rows{padding:0 10px}
  .row{grid-template-columns:minmax(0,1fr) 88px 132px 34px;gap:10px;padding:4px 8px}
  .row.w5{grid-template-columns:minmax(0,1fr) 88px 118px 112px 34px;grid-template-areas:none}
  .row.w5>input[type=text],.row.w5>input[type=number],.row.w5>select:not(.w),.row.w5>select.w,.row.w5>.del{grid-area:auto}
  .del{width:28px;height:28px;font-size:17px;border-radius:50%}
  .bar{gap:12px;padding:14px 18px}
  button.act{flex:0 0 auto;min-height:0;font-size:13px}
  button.ghost{min-height:0;font-size:13px;padding:9px 14px}
  .bar-note{display:inline;margin-left:auto}
  .result{gap:30px;padding:20px 18px 22px}
  .result .gpa{width:124px;height:124px}
  .result .gpa small{font-size:10px;letter-spacing:.16em}
  .result .gpa span{font-size:36px}
  .result .stat b{font-size:22px}
  .result .band{margin-left:auto;padding:12px 26px}
  .local-note{margin-top:16px;padding:14px 16px 14px 18px}
  section.prose{margin-top:34px}
  section.prose h2{font-size:26px;margin:34px 0 12px}
  .tool-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
  .tool-index a{padding:18px}
  footer.site{padding:22px 0 44px}
  footer.site a{padding:0}
}
@media (min-width:860px){
  input[type=text],input[type=number],select{height:36px;font-size:14.5px}
  input[type=number]{font-size:13.5px}
  select{font-size:13px}
}
@media (min-width:1000px){
  :root{--shape-op:.8}
  :root[data-theme="light"]{--shape-op:.85}
  @media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--shape-op:.85}}
  body::before{background-size:560px 560px,54px 54px,22px 22px;
    background-position:calc(100% + 280px) -320px,calc(100% - 120px) 300px,90px 34%}
  body::after{width:440px;height:440px;left:-150px;bottom:-140px}
  footer.site::before{width:260px;height:240px;right:-70px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}