:root {
  color-scheme: dark;
  --ink: #f6f2e8;
  --muted: #a9b6ad;
  --quiet: #74837a;
  --deep: #172321;
  --panel: #202d29;
  --panel-soft: #1c2925;
  --edge: rgba(238, 244, 226, .12);
  --green: #c6f278;
  --orange: #ff9a61;
  --lavender: #c6b7ff;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --sans: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --display: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--deep); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { color: inherit; font: inherit; }
a { color: inherit; }
::selection { color: var(--deep); background: var(--green); }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 20; padding: 12px 16px; background: var(--green); color: var(--deep); }
.skip-link:focus { top: 12px; }

body::before { position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% -18%, rgba(198,242,120,.08), transparent 45%), linear-gradient(rgba(224,242,223,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(224,242,223,.018) 1px, transparent 1px); background-size: auto, 44px 44px, 44px 44px; content: ""; pointer-events: none; }
.topbar { min-height: 72px; padding: 0 max(5vw, calc((100vw - 1260px)/2)); border-bottom: 1px solid var(--edge); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 500 10px var(--mono); letter-spacing: .08em; }
.brand-spark { width: 27px; height: 27px; display: block; flex: none; overflow: visible; fill: var(--green); }
.wordmark i { padding: 0 4px; color: #647168; font-style: normal; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.section-label { margin-right: 8px; color: #839188; font: 400 9px var(--mono); letter-spacing: .09em; }
.mode-toggle { min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid #425148; border-radius: 20px; background: transparent; cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .2s; }
.mode-toggle { width: 32px; min-width: 32px; display: grid; place-items: center; padding: 0; color: var(--orange); font-size: 16px; }
.mode-toggle:hover { border-color: var(--green); background: rgba(198,242,120,.08); transform: translateY(-1px); }

main { width: min(1260px, 100%); margin: 0 auto; padding: 0 5vw; }
.hero { min-height: 420px; padding: 74px 2.2vw 64px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); align-items: center; gap: 30px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 18px; color: var(--green); font: 400 9px var(--mono); letter-spacing: .13em; }
.pulse-dot { display: inline-block; width: 7px; height: 7px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(198,242,120,.12); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font: 500 clamp(58px, 8vw, 105px)/.91 var(--display); letter-spacing: -.085em; }
h1 em { color: var(--green); font-style: normal; }
.hero-text { max-width: 510px; margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.hero-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 25px; color: #a3b0a6; text-decoration: none; font: 400 8px var(--mono); letter-spacing: .11em; transition: color .2s, gap .2s; }
.hero-link span:last-child { color: var(--green); font-size: 15px; }
.hero-link:hover { gap: 20px; color: var(--green); }
.hero-visual { width: min(100%, 355px); aspect-ratio: 1; justify-self: center; position: relative; display: grid; place-items: center; animation: arrive .8s ease both; }
.hero-ring { position: absolute; border: 1px solid rgba(222,238,216,.16); border-radius: 50%; }
.hero-ring-one { width: 45%; height: 45%; transform: rotate(-22deg) scaleY(.48); }
.hero-ring-two { width: 66%; height: 66%; border-style: dashed; transform: rotate(33deg) scaleY(.52); }
.hero-ring-three { width: 87%; height: 87%; border-color: rgba(198,242,120,.1); transform: rotate(70deg) scaleY(.57); }
.hero-sun { position: relative; z-index: 1; color: var(--green); font-size: 41px; text-shadow: 0 0 30px rgba(198,242,120,.24); animation: breathe 5s ease-in-out infinite; }
.hero-planet { width: 16px; height: 16px; position: absolute; top: 23%; right: 26%; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 20px rgba(198,183,255,.4); animation: orbit-drift 12s linear infinite; }
.hero-moon { width: 7px; height: 7px; position: absolute; bottom: 22%; left: 24%; border-radius: 50%; background: var(--orange); box-shadow: 0 0 16px rgba(255,154,97,.35); }
.hero-coordinate { position: absolute; right: -4px; bottom: 9%; color: #7e8c83; font: 400 8px/1.9 var(--mono); letter-spacing: .11em; }

.tools-section { padding: 15px 0 0; scroll-margin-top: 20px; }
.section-heading { margin: 0 2px 25px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.section-eyebrow { margin-bottom: 10px; color: #89978d; }
.section-heading h2 { margin: 0; font: 500 clamp(27px, 4vw, 39px)/1.05 var(--display); letter-spacing: -.055em; }
.section-note { max-width: 280px; margin: 0 0 3px; color: var(--quiet); font-size: 10px; line-height: 1.7; text-align: right; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.tool-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--edge); border-radius: 5px; background: linear-gradient(155deg, rgba(38,53,47,.97), rgba(27,39,35,.98)); text-decoration: none; transition: border-color .25s, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.tool-card:hover, .tool-card:focus-visible { transform: translateY(-6px); border-color: rgba(198,242,120,.42); box-shadow: 0 18px 50px rgba(0,0,0,.16); outline: none; }
.card-topline { min-height: 46px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(238,244,226,.09); color: #87968c; font: 400 8px var(--mono); letter-spacing: .08em; }
.card-topline i { padding: 0 4px; color: var(--orange); font-style: normal; }
.card-index { color: #68766d; }
.card-art { min-height: 185px; position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 52%, rgba(198,242,120,.04), transparent 58%), linear-gradient(rgba(224,242,223,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(224,242,223,.022) 1px, transparent 1px); background-size: auto, 30px 30px, 30px 30px; }
.art-caption { position: absolute; right: 14px; bottom: 13px; color: #76857b; font: 400 7px var(--mono); letter-spacing: .1em; }
.art-caption i { padding: 0 4px; color: var(--orange); font-style: normal; }
.art-orbit { position: absolute; width: 124px; height: 124px; border: 1px dashed rgba(198,242,120,.28); border-radius: 50%; }
.art-orbit-one { transform: rotate(29deg) scaleY(.56); }
.art-orbit-two { width: 174px; height: 174px; border-color: rgba(238,244,226,.14); transform: rotate(-24deg) scaleY(.42); }
.art-sun { position: relative; z-index: 1; color: var(--green); font-size: 25px; text-shadow: 0 0 20px rgba(198,242,120,.2); }
.art-planet { width: 11px; height: 11px; position: absolute; top: calc(50% - 68px); left: calc(50% + 60px); transform-origin: -60px 68px; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 13px rgba(198,183,255,.5); animation: card-orbit 18s linear infinite; }
.music-art { display: flex; flex-direction: column; justify-content: center; gap: 19px; }
.art-sequencer { width: 74%; display: flex; align-items: center; justify-content: center; gap: 21px; }
.art-sequencer span { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(238,244,226,.13); border-radius: 50%; background: rgba(255,255,255,.025); color: var(--lavender); font-size: 16px; }
.art-sequencer span:nth-child(2) { color: var(--green); transform: translateY(-10px); }
.art-sequencer span:nth-child(3) { color: var(--orange); }
.art-wave { height: 37px; display: flex; align-items: center; gap: 5px; }
.art-wave i { width: 3px; height: 28%; transform-origin: center; border-radius: 4px; background: var(--lavender); opacity: .82; animation: spectrum-breathe 1.25s ease-in-out infinite alternate; }
.art-wave i:nth-child(2n) { animation-delay: -.65s; }
.art-wave i:nth-child(3n) { animation-delay: -.35s; }
.art-wave i:nth-child(5n) { animation-delay: -.9s; }
.art-wave i:nth-child(3n) { height: 80%; }.art-wave i:nth-child(4n) { height: 54%; }.art-wave i:nth-child(5n) { height: 100%; }.art-wave i:nth-child(2n) { height: 42%; }
.bjj-art { background-image: radial-gradient(ellipse at 50% 50%, rgba(198,183,255,.06), transparent 45%), linear-gradient(rgba(224,242,223,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(224,242,223,.022) 1px, transparent 1px); }
.timer-ring { position: absolute; border: 1px solid rgba(198,183,255,.3); border-radius: 50%; }
.timer-ring-outer { width: 136px; height: 136px; border-color: rgba(198,242,120,.25); border-top-color: var(--green); transform: rotate(-34deg); animation: timer-turn 16s linear infinite; }
.timer-ring-inner { width: 108px; height: 108px; border-style: dashed; border-color: rgba(238,244,226,.16); }
.timer-readout { z-index: 1; color: var(--ink); font: 400 27px var(--mono); letter-spacing: -.08em; }
.timer-readout span { color: var(--orange); animation: blink 1s step-end infinite; }
.timer-label { position: absolute; z-index: 1; margin-top: 45px; color: #829087; font: 400 7px var(--mono); letter-spacing: .11em; }
.card-copy { padding: 18px 17px 15px; display: flex; flex: 1; flex-direction: column; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-title-row h3 { margin: 0; font: 500 25px/1 var(--display); letter-spacing: -.06em; }
.card-title-row h3 em { color: var(--green); font-style: normal; }
.music-card .card-title-row h3 em { color: var(--lavender); }
.bjj-card .card-title-row h3 em { color: var(--orange); }
.card-arrow { color: #839188; font-size: 17px; transition: color .2s, transform .2s; }
.tool-card:hover .card-arrow, .tool-card:focus-visible .card-arrow { color: var(--green); transform: translate(2px, -2px); }
.card-copy p { min-height: 50px; margin: 12px 0 19px; color: #a5b1a8; font-size: 10px; line-height: 1.7; }
.card-bottom { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(238,244,226,.1); color: #8f9b92; font: 400 7px var(--mono); letter-spacing: .1em; }
.card-bottom span:last-child { color: var(--green); font-size: 14px; transition: transform .2s; }
.tool-card:hover .card-bottom span:last-child { transform: translateX(4px); }
.music-card .card-bottom span:last-child { color: var(--lavender); }.bjj-card .card-bottom span:last-child { color: var(--orange); }

.closing-note { min-height: 106px; margin: 28px 2px 0; display: flex; align-items: center; gap: 13px; border-top: 1px solid rgba(238,244,226,.08); }
.closing-mark { color: var(--orange); font-size: 16px; }
.closing-note p { margin: 0; color: #a7b2a8; font-size: 10px; }
.closing-detail { margin-left: auto; color: #68766d; font: 400 7px var(--mono); letter-spacing: .1em; }
.closing-detail i { padding: 0 5px; color: var(--orange); font-style: normal; }
.footer { min-height: 66px; display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 22px; align-items: center; color: #87938a; font: 400 8px var(--mono); }
.footer a { color: inherit; text-decoration: none; }.footer a span:last-child { color: var(--green); }
.footer p { margin: 0; justify-self: center; color: #77847b; }.footer p span:first-child { color: var(--orange); }
.footer-kids { justify-self: end; }
.footer-domain { justify-self: end; color: #68766d; letter-spacing: .07em; }

html[data-mode="day"] { color-scheme: light; --ink: #28352c; --muted: #69766c; --quiet: #738071; --deep: #e9e6d9; --panel: #f3f0e5; --panel-soft: #efecdf; --edge: rgba(40,53,44,.15); --green: #617d48; --orange: #bf6845; --lavender: #7663a6; }
html[data-mode="day"] body::before { background-image: radial-gradient(ellipse at 50% -18%, rgba(97,125,72,.09), transparent 45%), linear-gradient(rgba(40,53,44,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(40,53,44,.035) 1px, transparent 1px); }
html[data-mode="day"] .mode-toggle { border-color: #bbc3b5; }
html[data-mode="day"] .tool-card { background: linear-gradient(155deg, #f5f2e7, #e4e6d9); }
html[data-mode="day"] .card-topline, html[data-mode="day"] .card-copy p { color: #667267; }
html[data-mode="day"] .card-art { background-image: radial-gradient(ellipse at 50% 52%, rgba(97,125,72,.05), transparent 58%), linear-gradient(rgba(40,53,44,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(40,53,44,.035) 1px, transparent 1px); }
html[data-mode="day"] .closing-note { border-color: rgba(40,53,44,.13); }
html[data-mode="day"] .card-copy p, html[data-mode="day"] .hero-text { color: #647166; }

@keyframes arrive { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes breathe { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes orbit-drift { from { transform: rotate(0deg) translateX(0); } to { transform: rotate(360deg) translateX(0); } }
@keyframes card-orbit { to { transform: rotate(360deg); } }
@keyframes spectrum-breathe { from { transform: scaleY(.42); opacity: .56; } to { transform: scaleY(1); opacity: .96; } }
@keyframes timer-turn { to { transform: rotate(326deg); } }
@keyframes blink { 50% { opacity: .25; } }

@media (max-width: 900px) {
  .hero { min-height: 370px; padding-top: 57px; padding-bottom: 47px; grid-template-columns: minmax(0, 1.1fr) minmax(225px, .9fr); gap: 10px; }
  .hero-visual { width: min(100%, 300px); }
  .tool-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .card-copy { padding-right: 13px; padding-left: 13px; }
  .card-copy p { min-height: 68px; }
  .card-title-row h3 { font-size: 22px; }
}
@media (max-width: 680px) {
  .topbar { min-height: 62px; padding: 0 17px; }
  .wordmark { gap: 8px; font-size: 8px; }
  .brand-spark { width: 24px; height: 24px; }
  .topbar-right { gap: 7px; }.section-label { display: none; }
  main { padding: 0 17px; }
  .hero { min-height: 0; padding: 44px 3px 37px; grid-template-columns: minmax(0,1fr) 105px; gap: 0; align-items: center; }
  .hero-visual { width: 118px; margin-right: -18px; }
  .hero-coordinate { right: -3px; bottom: 5%; font-size: 6px; }
  .hero-sun { font-size: 31px; }
  .hero-planet { width: 11px; height: 11px; }
  .eyebrow { margin-bottom: 15px; font-size: 8px; }
  h1 { font-size: clamp(52px, 12vw, 72px); }
  .hero-text { max-width: 400px; margin-top: 15px; font-size: 11px; }
  .hero-link { margin-top: 17px; font-size: 7px; }
  .tools-section { padding-top: 1px; }
  .section-heading { margin-bottom: 18px; align-items: start; }
  .section-heading h2 { font-size: 29px; }
  .section-note { max-width: 135px; margin-top: 17px; font-size: 8px; }
  .tool-grid { grid-template-columns: 1fr; gap: 11px; }
  .tool-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(125px, .65fr); }
  .card-topline { min-height: 37px; grid-column: 1 / -1; padding: 0 13px; font-size: 7px; }
  .card-art { min-height: 158px; grid-column: 2; grid-row: 2; }
  .card-copy { min-height: 158px; padding: 17px 12px 12px; grid-column: 1; grid-row: 2; }
  .card-title-row h3 { font-size: 20px; }
  .card-copy p { min-height: 0; margin: 11px 0 12px; font-size: 9px; }
  .card-bottom { padding-top: 9px; font-size: 6px; }
  .art-orbit { width: 95px; height: 95px; }.art-orbit-two { width: 128px; height: 128px; }
  .art-planet { top: calc(50% - 52px); left: calc(50% + 44px); transform-origin: -44px 52px; }
  .art-sequencer { width: 84%; gap: 11px; }.art-sequencer span { width: 29px; height: 29px; font-size: 13px; }
  .art-wave { gap: 3px; }.art-wave i { width: 2px; }
  .timer-ring-outer { width: 112px; height: 112px; }.timer-ring-inner { width: 88px; height: 88px; }
  .timer-readout { font-size: 22px; }.timer-label { margin-top: 37px; }
  .art-caption { right: 8px; bottom: 8px; font-size: 6px; }
  .closing-note { min-height: 80px; margin-top: 17px; }
  .closing-note p { font-size: 9px; }.closing-detail { display: none; }
  .footer { min-height: 69px; padding-bottom: 12px; grid-template-columns: 1fr auto; row-gap: 9px; }
  .footer p { grid-column: 2; grid-row: 1; justify-self: end; font-size: 7px; }
  .footer-kids { grid-column: 1; grid-row: 2; justify-self: start; }
  .footer-domain { grid-column: 2; grid-row: 2; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }