@import url('assets/fonts/fonts.css');
:root{--ground:#202326;--ink:#f3f1e9;--muted:#b9b9b2;--amber:#f7b52c;--rule:#383b3b;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--ground);color:var(--ink);scroll-behavior:smooth;scroll-padding-top:36px;scrollbar-color:#67675f var(--ground)}
body{margin:0;font-family:'Poppins',sans-serif;font-size:16px;line-height:1.6}
h1,h2,p,figure{margin:0}
a{color:inherit;text-decoration:none;text-underline-offset:.25em}
a:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:7px}
::selection{background:var(--amber);color:var(--ground)}
.skip-link{position:fixed;top:12px;left:12px;z-index:10;padding:12px 18px;background:var(--amber);color:var(--ground);transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.opening{width:100%;position:relative;aspect-ratio:1536 / 1024;isolation:isolate;container-type:inline-size}
.brand-mark{position:absolute;left:3.910%;top:3.520%;width:6.320%;height:8.010%;object-fit:contain}
.shelf-scene{position:absolute;left:48.630%;top:51.270%;width:51.370%;height:48.730%;object-fit:cover;z-index:-1}
.brand-name,.nav-how,.nav-github,.headline,.headline-amber,.identity,.summary,.github-action,.prototype,.setup-title,.setup-copy,.setup-caption,.section-rule{position:absolute}
.brand-name{left:11.33%;top:4.40%;font-size:3.45cqw;font-weight:700;line-height:1.1;letter-spacing:-.035em}
.nav-how,.nav-github{top:6.35%;font-size:1.43cqw;line-height:1.4}
.nav-how{left:76.82%}.nav-github{left:90.76%}
nav a:hover{text-decoration:underline}
.headline,.headline-amber{left:3.97%;font-weight:700;line-height:1;letter-spacing:-.04em;white-space:nowrap}
.headline{top:16.30%;font-family:'Poppins',sans-serif;font-size:7.552cqw}
.headline-amber{top:26.15%;font-family:'Poppins',sans-serif;font-size:7.60cqw;font-weight:700;color:var(--amber)}
.identity{left:4.23%;top:40.50%;font-size:3.02cqw;font-weight:700;line-height:1.2;letter-spacing:-.035em;white-space:nowrap}
.summary{left:4.23%;top:46.91%;font-size:1.75cqw;line-height:1.4;letter-spacing:-.025em;white-space:nowrap;color:#e4e1da}
.github-action{left:4.30%;top:53.13%;width:23.57%;height:7.23%;font-size:2.02cqw}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.6em;background:var(--amber);color:#191d1e;border-radius:14px;font-weight:700;line-height:1.2;transition:background-color .2s ease}
.button svg{width:1em;height:1em;flex-shrink:0;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.button:hover{background:#ffc34d}.button:hover svg{transform:translateX(4px)}
.prototype{left:4.36%;top:61.99%;font-size:1.22cqw;font-weight:400;color:#92938a;line-height:1.4}
.section-rule{left:0;top:67.19%;width:87.76%;height:1px;background:var(--rule);z-index:-2}
.setup-title{left:4.17%;top:72.90%;font-size:4.60cqw;font-weight:700;letter-spacing:-.035em;line-height:1.04}
.setup-copy{left:4.17%;top:89.15%;font-size:1.75cqw;letter-spacing:-.025em;line-height:1.4}
.setup-caption{left:77.02%;top:95.21%;font-size:.92cqw;line-height:1.3;white-space:nowrap;color:var(--muted)}
.section-pad{padding:100px 4.23%;border-top:1px solid var(--rule)}
.section-pad h2{font-size:clamp(32px,3.4vw,56px);font-weight:700;letter-spacing:-.035em;line-height:1.12}
.section-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:10%;align-items:end}
.section-intro>p{max-width:44ch;color:var(--muted);font-size:18px}
.steps{list-style:none;padding:0;margin:70px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6%}
.step-number{display:block;font-size:18px;color:var(--amber);padding-top:20px;margin-bottom:18px;border-top:1px solid var(--rule)}
h3{font-size:24px;line-height:1.3;letter-spacing:-.025em;margin:0 0 16px;font-weight:700}
.steps p{font-size:17px;color:var(--muted);max-width:35ch;line-height:1.75}
.desktop{display:grid;grid-template-columns:1fr 1fr;gap:48px 8%}
.desktop-heading h2 span{color:var(--amber)}
.desktop-heading>p{max-width:36ch;margin-top:28px;color:var(--muted);font-size:18px}
.ingredients{margin:0}
.ingredients>div{padding:22px 0;border-bottom:1px solid var(--rule)}
.ingredients>div:first-child{padding-top:0}
.ingredients dt{font-size:22px;font-weight:700;letter-spacing:-.025em;margin-bottom:8px}
.ingredients dd{margin:0;max-width:48ch;color:var(--muted);font-size:17px}
.platform-note{grid-column:2;max-width:65ch;color:var(--muted);font-size:14px}
.platform-note a{display:inline-block;text-decoration:underline;color:var(--ink);margin-top:8px}
.questions{display:grid;grid-template-columns:1fr 1.4fr;gap:9%}
.faq-list details{border-bottom:1px solid var(--rule)}
.faq-list details:first-child{border-top:1px solid var(--rule)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:25px 0;font-size:19px;line-height:1.5;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--amber)}
.faq-list svg{flex:0 0 24px}
.faq-list details[open] svg{transform:rotate(45deg)}
.faq-list details p{padding-bottom:25px;max-width:62ch;color:var(--muted);line-height:1.75}
.project{display:flex;align-items:center;justify-content:space-between;gap:8%;padding-top:110px;padding-bottom:110px}
.project>div{max-width:780px}
.project p{max-width:66ch;font-size:17px;color:var(--muted);margin-top:25px;line-height:1.75}
.project .button{padding:24px 30px;white-space:nowrap;font-size:20px;flex-shrink:0}
.site-footer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:35px 4.23%;border-top:1px solid var(--rule);font-size:14px}
.footer-brand{display:inline-flex;align-items:center;gap:12px;font-size:20px;font-weight:700;letter-spacing:-.025em}
.footer-brand img{object-fit:contain}
.site-footer p{color:var(--muted);margin-left:20px}
.site-footer>a:last-of-type:hover{text-decoration:underline}
.site-footer small{grid-column:1/-1;color:var(--muted);font-size:12px}
@media(max-width:900px){
  .opening{aspect-ratio:auto;padding:24px 5% 0;container-type:normal}
  .brand-mark,.brand-name,.nav-how,.nav-github,.headline,.headline-amber,.identity,.summary,.github-action,.prototype,.setup-title,.setup-copy,.setup-caption,.section-rule,.shelf-scene{position:static}
  .site-header{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .brand{display:inline-flex;align-items:center;gap:10px}
  .brand-mark{width:44px;height:38px}
  .brand-name{font-size:27px;line-height:1.2}
  nav{display:flex;align-items:center;gap:28px}
  .nav-how,.nav-github{font-size:15px;line-height:1.5}
  .hero{padding:64px 0 40px}
  .headline,.headline-amber{display:block;font-size:10.2vw;line-height:1.02;letter-spacing:-.04em}
  .identity{margin-top:28px;font-size:clamp(22px,3.6vw,32px);line-height:1.3;white-space:normal;max-width:34ch}
  .summary{margin-top:18px;font-size:17px;line-height:1.7;white-space:normal;max-width:60ch;letter-spacing:-.01em}
  .github-action{margin-top:26px;width:auto;height:auto;min-height:58px;padding:17px 24px;font-size:19px}
  .prototype{margin-top:14px;font-size:14px;line-height:1.5}
  .setup{padding-top:34px;border-top:1px solid var(--rule)}
  .section-rule{display:none}
  .setup-title{font-size:clamp(36px,7vw,60px);line-height:1.08}
  .setup-copy{font-size:17px;line-height:1.6;margin-top:18px;max-width:42ch}
  .setup-figure{margin:20px -5.56% 0;position:relative}
  .shelf-scene{display:block;width:100%;height:auto;aspect-ratio:789/499;object-fit:cover}
  .setup-caption{position:absolute;left:auto;right:5%;top:auto;bottom:20px;font-size:11px;line-height:1.4;max-width:90%;white-space:normal;text-align:right}
  .section-pad{padding:64px 5%}
  .section-pad h2{font-size:clamp(32px,5vw,45px)}
  .section-intro{grid-template-columns:1fr;gap:24px}
  .section-intro>p{font-size:17px;max-width:58ch}
  .steps{margin-top:40px;gap:30px}
  h3{font-size:21px}
  .steps p{font-size:15px}
  .desktop{gap:36px 6%;grid-template-columns:1fr 1fr}
  .desktop-heading>p{font-size:16px}
  .ingredients dt{font-size:19px}
  .ingredients dd{font-size:15px}
  .questions{grid-template-columns:1fr;gap:30px}
  .project{gap:35px;align-items:flex-start;flex-direction:column}
  .project .button{padding:19px 24px;font-size:18px}
  .site-footer{padding:30px 5%;grid-template-columns:1fr auto;gap:18px}
  .site-footer p{grid-row:2;grid-column:1/-1;margin:0;font-size:13px}
  .site-footer small{font-size:11px}
}
@media(max-width:600px){
  .site-header{gap:12px}
  .brand{gap:8px}
  .brand-mark{width:36px;height:31px}
  .brand-name{font-size:23px}
  .nav-how{display:none}
  .nav-github{font-size:14px}
  .hero{padding-top:48px}
  .steps{grid-template-columns:1fr;gap:28px}
  .steps li{display:grid;grid-template-columns:28px 1fr;column-gap:14px;border-top:1px solid var(--rule);padding-top:22px}
  .step-number{grid-row:1/3;padding:0;border:0;margin:0;font-size:17px}
  .steps h3{margin-bottom:10px;font-size:22px}
  .steps p{font-size:16px;max-width:45ch}
  .desktop{grid-template-columns:1fr}
  .desktop-heading>p{max-width:40ch}
  .platform-note{grid-column:1;font-size:13px}
  .ingredients dt{font-size:21px}
  .ingredients dd{font-size:16px}
  .faq-list summary{font-size:17px;padding:22px 0}
  .faq-list details p{font-size:15px}
  .project p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}