:root{--Background: #282a36;--CurrentLine: #44475a;--Foreground: #f8f8f2;--Comment: #6272a4;--Cyan: #8be9fd;--Green: #50fa7b;--Orange: #ffb86c;--Pink: #ff79c6;--Purple: #bd93f9;--Red: #ff5555;--Yellow: #f1fa8c}@media (prefers-color-scheme: light){:root{--Background: #ffffff;--CurrentLine: #e1e4e8;--Foreground: #24292e;--Comment: #6a737d;--Cyan: #0366d6;--Green: #28a745;--Orange: #f66a0a;--Pink: #ea4aaa;--Purple: #6f42c1;--Red: #d73a49;--Yellow: #ffd33d}body{background:linear-gradient(160deg,#f0f1f4,#fff,#f5f6f8)}.goal-card,.link-card{background:linear-gradient(135deg,#e1e4e866,#e1e4e81a);border-color:var(--CurrentLine)}.goal-card:hover{box-shadow:0 10px 30px #0000001a}.link-card:hover{box-shadow:0 8px 25px #00000014}.featured-demo iframe,.h_iframe iframe{box-shadow:0 8px 25px #0000001a}}body{font-family:Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:18px;line-height:1.6;background:linear-gradient(160deg,#2a2c3a,#282a36,#252731);color:var(--Foreground);padding:0;margin:auto;display:flex;flex-direction:column;align-items:center;min-height:100vh}a{color:var(--Cyan)}a:hover{color:var(--Comment)}.miracle-wm-logo{color:var(--Foreground);text-decoration:none;font-size:2rem;font-family:Berkshire Swash,serif;transition:color .2s ease-in-out}.header-band{width:100%;display:flex;justify-content:center;background:#44475a59;backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}html[data-theme=light] .header-band{background:#e1e4e8cc}@media (prefers-color-scheme: light){.header-band{background:#e1e4e8cc}}header{width:60vw;display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-bottom:none;margin-bottom:0;padding:.5rem 0}.miracle-wm-logo:hover{color:var(--Pink)}.miracle-wm-header-list{list-style:none;display:flex;flex-direction:row;align-items:center;gap:1.5rem}.miracle-wm-header-list a{color:var(--Foreground);text-decoration:none;font-size:1rem;transition:color .2s ease-in-out,background-color .2s ease-in-out,transform .15s ease-in-out}.miracle-wm-header-list li a{display:flex;flex-direction:row;align-items:center;gap:.4rem}.header-link{padding:.15rem .6rem;border-bottom:1px solid transparent}.header-link:hover{color:var(--Cyan)!important;border-color:#8be9fd40}.header-link i{font-size:.9rem;opacity:.8;transition:opacity .2s ease-in-out}.header-link:hover i{opacity:1}.external-link-icon{font-size:.65rem!important;opacity:.5!important;margin-left:-.1rem}.header-link:hover .external-link-icon{opacity:.8!important}html[data-theme=light] .header-link:hover{color:var(--Cyan)!important;background-color:#0366d614;border-color:#0366d640}.hamburger{display:none;background:none;border:none;font-size:1.25rem;cursor:pointer;color:var(--Foreground);padding:.25rem .5rem;transition:color .2s ease-in-out}.hamburger:hover{color:var(--Cyan)}@media (max-width: 768px){header{width:100%;padding:.5rem 1rem;flex-wrap:wrap;position:relative}.hamburger{display:block}.miracle-wm-header-list{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:.25rem;padding:.5rem 0 .75rem}.miracle-wm-header-list.open{display:flex}.miracle-wm-header-list li{width:100%}.miracle-wm-header-list li a,.miracle-wm-header-list li .theme-toggle{width:100%;justify-content:flex-start}}.theme-toggle{background:none;border:none;border-bottom:1px solid transparent;font-size:1rem;cursor:pointer;padding:.15rem .6rem;transition:color .2s ease-in-out,border-color .2s ease-in-out,transform .15s ease-in-out;color:var(--Foreground)}.theme-toggle:hover,html[data-theme=light] .theme-toggle:hover{color:var(--Cyan)}.theme-toggle-label{font-size:1rem}#theme-icon-dark,#theme-icon-light{display:none;font-size:.9rem;opacity:.8;transition:opacity .2s ease-in-out}.theme-toggle:hover #theme-icon-dark,.theme-toggle:hover #theme-icon-light{opacity:1}html[data-theme=light]{--Background: #ffffff;--CurrentLine: #e1e4e8;--Foreground: #24292e;--Comment: #6a737d;--Cyan: #0366d6;--Green: #28a745;--Orange: #f66a0a;--Pink: #ea4aaa;--Purple: #6f42c1;--Red: #d73a49;--Yellow: #ffd33d}html[data-theme=light] body{background:linear-gradient(160deg,#f0f1f4,#fff,#f5f6f8)}html[data-theme=light] .goal-card,html[data-theme=light] .link-card{background:linear-gradient(135deg,#e1e4e866,#e1e4e81a);border-color:var(--CurrentLine)}html[data-theme=light] .goal-card:hover{box-shadow:0 10px 30px #0000001a}html[data-theme=light] .link-card:hover{box-shadow:0 8px 25px #00000014}html[data-theme=light] .featured-demo iframe,html[data-theme=light] .h_iframe iframe{box-shadow:0 8px 25px #0000001a}html[data-theme=dark]{--Background: #282a36;--CurrentLine: #44475a;--Foreground: #f8f8f2;--Comment: #6272a4;--Cyan: #8be9fd;--Green: #50fa7b;--Orange: #ffb86c;--Pink: #ff79c6;--Purple: #bd93f9;--Red: #ff5555;--Yellow: #f1fa8c}main{width:100vw;flex:1 1 100%;overflow:auto;display:flex;flex-direction:column;align-items:stretch}.section-band{width:100%;display:flex;justify-content:center}.section-band:nth-child(odd){background:transparent}.section-band:nth-child(2n){background:#44475a33}html[data-theme=light] .section-band:nth-child(2n){background:#0000000a}@media (prefers-color-scheme: light){.section-band:nth-child(2n){background:#0000000a}}.section-inner{width:60vw;max-width:1200px}.miracle-wm-logo>img{max-width:1.5em;width:1.5em;height:1.5em;border-radius:.25em;vertical-align:middle;margin-right:.25em}.goals-section{margin:4rem 0}.goals-section h2{text-align:center;font-size:2.5rem;color:var(--Purple);margin-bottom:3rem}.goals-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-bottom:2rem}.goal-card{background:linear-gradient(135deg,#44475a4d,#44475a1a);border:1px solid var(--CurrentLine);border-radius:12px;padding:2rem;text-align:center;transition:all .3s ease;backdrop-filter:blur(10px)}.goal-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #0003;border-color:var(--Purple)}.goal-icon{font-size:3rem;margin-bottom:1rem}.goal-card h3{color:var(--Purple);font-size:1.25rem;margin:0 0 1rem}.goal-card p{color:var(--Comment);line-height:1.5;margin:0}.demos-section{margin:4rem 0}.demos-section h2{text-align:center;font-size:2.5rem;color:var(--Purple);margin-bottom:3rem}.links-section{margin:4rem 0}.links-section h2{text-align:center;font-size:2.5rem;color:var(--Purple);margin-bottom:3rem}.links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.link-card{display:block;background:linear-gradient(135deg,#44475a4d,#44475a1a);border:1px solid var(--CurrentLine);border-radius:12px;padding:1.5rem;text-decoration:none;color:var(--Foreground);transition:all .3s ease;backdrop-filter:blur(10px)}.link-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px #00000026;border-color:var(--Cyan);color:var(--Foreground)}.link-icon{font-size:2rem;margin-bottom:.5rem}.link-card h3{color:var(--Cyan);font-size:1.1rem;margin:0 0 .5rem}.link-card p{color:var(--Comment);font-size:.9rem;margin:0;line-height:1.4}main h2{font-size:1.25rem;color:var(--Purple);font-weight:700}.demos{display:flex;flex-direction:column;gap:2rem}.featured-demo{width:100%;max-width:800px;margin:0 auto}.featured-demo iframe{width:100%;height:100%;aspect-ratio:16 / 9}.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.h_iframe{width:100%}.h_iframe iframe{width:100%;height:100%;aspect-ratio:16 / 9}@media only screen and (device-width: 1440px),only screen and (max-width:1440px){header>h1{font-size:1.5rem}header{width:90vw}.section-inner{width:90vw!important}.demo-grid{grid-template-columns:1fr}.goals-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}@media only screen and (max-width: 768px){.demo-grid{grid-template-columns:1fr}.goals-grid{grid-template-columns:1fr;gap:1.5rem}.links-grid{grid-template-columns:1fr}body{font-size:16px}}@media only screen and (min-width: 769px) and (max-width: 1024px){.demo-grid,.goals-grid{grid-template-columns:repeat(2,1fr)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.goals-section,.links-section{animation:fadeInUp .6s ease-out}.featured-demo iframe,.h_iframe iframe{border-radius:8px;box-shadow:0 8px 25px #00000026;transition:transform .3s ease}.featured-demo iframe:hover,.h_iframe iframe:hover{transform:scale(1.02)}.github-icon-light{display:none}.github-icon-dark{display:inline}@media (prefers-color-scheme: light){.github-icon-light{display:inline}.github-icon-dark{display:none}}html[data-theme=light] .github-icon-light{display:inline}html[data-theme=light] .github-icon-dark,html[data-theme=dark] .github-icon-light{display:none}html[data-theme=dark] .github-icon-dark{display:inline}.hero{padding:4rem 0;margin-bottom:3rem;animation:fadeInUp .6s ease-out}.hero-content{display:flex;align-items:center;gap:4rem;min-height:70vh}.hero-text{flex:1;text-align:left}.hero-mascot{flex:0 0 auto;display:flex;justify-content:center;align-items:center}.mascot-image{max-width:300px;width:100%;height:auto;border-radius:20px;box-shadow:0 20px 50px #bd93f933;transition:transform .3s ease}.mascot-image:hover{transform:scale(1.05) rotate(1deg)}.hero-title{font-size:4rem;font-weight:700;margin:0 0 1rem;background:linear-gradient(135deg,var(--Purple),var(--Cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(189,147,249,.3)}.hero-miracle{font-weight:400;font-style:italic;font-family:Berkshire Swash,serif}.hero-subtitle{font-size:1.25rem;color:var(--Comment);margin:0 0 2rem;max-width:600px;margin-left:auto;margin-right:auto}.hero-actions{display:flex;gap:1rem;justify-content:flex-start;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:8px;text-decoration:none;font-weight:600;transition:all .2s ease;border:2px solid transparent}.btn-primary{background:var(--Purple);color:#fff;box-shadow:0 4px 14px #bd93f94d}.btn-primary:hover{background:var(--Pink);transform:translateY(-2px);box-shadow:0 6px 20px #bd93f966;color:#fff}.btn-secondary{background:transparent;color:var(--Foreground);border-color:var(--CurrentLine)}.btn-secondary:hover{background:var(--CurrentLine);border-color:var(--Purple);color:var(--Foreground);transform:translateY(-2px)}@media only screen and (device-width: 1440px),only screen and (max-width: 1440px){.hero-title{font-size:3rem}}@media only screen and (max-width: 768px){.hero-content{flex-direction:column-reverse;gap:2rem;min-height:auto}.hero-text{text-align:center}.hero-actions{justify-content:center;flex-direction:column;align-items:center}.mascot-image{max-width:240px}.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.1rem}.btn{width:200px;justify-content:center}}@media only screen and (min-width: 769px) and (max-width: 1024px){.hero-content{gap:2rem}.mascot-image{max-width:250px}.hero-title{font-size:3.5rem}}
