body{margin:0;padding:0}:root{--paper:#f4efe6;--paper-deep:#e8ddcb;--ink:#171717;--ink-soft:#53514d;--line:#17171724;--accent:#a33a2b;--accent-dark:#7d251b;--panel:#fffcf6e6;--panel-strong:#fffaf2;--shadow:0 20px 45px #3727121f;--font-display:"Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;--font-body:"Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;--font-mono:"SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", monospace;color:var(--ink);background:var(--paper);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word;word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;font-family:var(--font-body);color:var(--ink);background:radial-gradient(circle at 0 0,#a33a2b14,#0000 26%),radial-gradient(circle at right 20%,#af8a4a1f,#0000 24%),linear-gradient(#f7f1e7 0%,#efe5d3 100%);margin:0}a{color:inherit}.app{max-width:1240px;min-height:100vh;margin:0 auto;padding:1.25rem}.masthead{border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.25rem;padding:.25rem 0 1.25rem;display:flex}.masthead-copy h1{font-family:var(--font-display);letter-spacing:-.03em;max-width:35ch;margin:.35rem 0 0;font-size:clamp(2.2rem,4vw,3.8rem);line-height:.98}.masthead-subtitle{max-width:40rem;color:var(--ink-soft);margin:.65rem 0 0;font-size:.98rem;line-height:1.55}.site-kicker,.section-label,.spec-label,.meta-label,.step-output-label,.poster-note-label{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:700;font-family:var(--font-mono);margin:0}.site-kicker,.section-label{color:var(--accent)}.masthead-nav{flex-wrap:wrap;align-items:center;gap:1rem;padding-top:.35rem;display:flex}.masthead-nav a{color:var(--ink-soft);border-bottom:1px solid #0000;padding-bottom:.25rem;text-decoration:none}.masthead-nav a:hover{color:var(--ink);border-color:currentColor}.content-stack{flex-direction:column;gap:1.4rem;display:flex}.hero-shell,.spec-sheet,.tutorial-section{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);position:relative;overflow:hidden}.hero-shell{border-radius:24px;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);align-items:center;gap:1.2rem;padding:1.35rem;display:grid}.hero-shell:before,.spec-sheet:before,.tutorial-section:before{content:"";border-radius:inherit;pointer-events:none;border:1px solid #1717170f;position:absolute;inset:10px}.hero-copy{flex-direction:column;align-items:flex-start;gap:.8rem;animation:.7s both rise-in;display:flex}.hero-copy h2{font-family:var(--font-display);letter-spacing:-.03em;max-width:14ch;margin:0;font-size:clamp(1.85rem,3vw,2.8rem);line-height:1.02}.hero-text{color:var(--ink-soft);max-width:46ch;margin:0;font-size:.98rem;line-height:1.6}.toggle-group{border:1px solid var(--line);background:#ffffff75;border-radius:999px;flex-wrap:wrap;gap:.55rem;padding:.45rem;display:inline-flex}.toggle-btn{color:var(--ink-soft);font:inherit;cursor:pointer;background:0 0;border:none;border-radius:999px;padding:.8rem 1rem;font-weight:700;transition:transform .18s,background-color .18s,color .18s}.toggle-btn:hover{color:var(--ink);transform:translateY(-1px)}.toggle-btn.active{background:var(--ink);color:#fffaf3}.model-chip{background:#fffaf2db;border:1px dashed #17171733;border-radius:16px;flex-wrap:wrap;align-items:baseline;gap:.75rem;padding:.75rem .9rem;display:inline-flex}.model-chip span{color:var(--ink-soft);font-size:.92rem}.model-chip strong{font-size:1rem}.device-poster{justify-items:center;gap:.7rem;animation:6s ease-in-out infinite poster-float;display:grid;position:relative}.poster-frame{background:var(--panel-strong);border:1px solid #17171724;border-radius:28px 28px 18px 18px;width:min(100%,420px);padding:.9rem;transform:rotate(-2deg);box-shadow:0 22px 40px #361f1029}.phone-image{object-fit:contain;mix-blend-mode:multiply;width:100%;height:auto;max-height:470px;display:block}.poster-note{background:#fff8db;border:1px solid #17171726;border-radius:4px 18px 18px;justify-self:end;width:min(88%,320px);margin-top:-1.4rem;padding:.9rem;transform:rotate(2deg);box-shadow:0 12px 24px #4e391824}.poster-note p{color:var(--ink-soft);margin:.55rem 0 0;line-height:1.55}.spec-sheet{border-radius:26px;padding:1.35rem}.spec-sheet-head{justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1rem;display:flex}.spec-sheet-head h2,.tutorial-hero h2{font-family:var(--font-display);letter-spacing:-.03em;margin:.35rem 0 0;font-size:clamp(1.9rem,3.3vw,3rem);line-height:1}.spec-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.spec-item{background:#ffffff8c;border:1px solid #1717171a;border-radius:18px;flex-direction:column;gap:.45rem;min-height:110px;padding:1.15rem 1.2rem;display:flex}.spec-item-wide{grid-column:1/-1}.spec-label,.meta-label,.step-output-label,.poster-note-label{color:var(--ink-soft)}.spec-value{color:var(--ink);font-size:1.05rem;line-height:1.55}.spec-item:first-child .spec-value{font-size:1.5rem;font-weight:600}.spec-item-wide .spec-value{font-size:.92rem;line-height:1.4}.tags{flex-wrap:wrap;gap:.55rem;margin-top:.35rem;display:flex}.tag{color:var(--ink-soft);background:#fff8e8db;border:1px solid #1717171f;border-radius:999px;align-items:center;padding:.45rem .72rem;font-size:.9rem;display:inline-flex}.tutorial-section{background:linear-gradient(180deg, #fffbf4f5, #f9f2e6f0), var(--panel);border-radius:30px;padding:1.35rem}.tutorial-head{grid-template-columns:1fr;align-items:start;gap:1.5rem;display:grid}.tutorial-subtitle{color:var(--accent-dark);margin:.75rem 0 0;font-size:1rem;font-weight:700}.tutorial-meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;display:grid}.meta-card{background:#ffffff94;border:1px solid #1717171a;border-radius:16px;flex-direction:column;gap:.55rem;min-height:118px;padding:1rem;display:flex}.meta-card a,.tutorial-footer a{color:var(--accent-dark);font-weight:700;text-decoration:none}.meta-card a:hover,.tutorial-footer a:hover{text-decoration:underline}.callout-row{grid-template-columns:1.25fr 1fr;gap:1rem;margin:1rem 0 1.2rem;display:grid}.callout{border:1px solid #1717171f;border-radius:18px;padding:1rem 1.1rem;line-height:1.6}.callout.warning{background:#fbecd3}.callout.muted{background:#ffffff7a}.tutorial-steps{gap:1rem;margin:0;padding:0;list-style:none;display:grid}.step-card{border-left:2px solid #1717172e;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:1rem;padding:1rem 0 1rem 1.2rem;display:grid}.step-number{background:var(--ink);color:#fff8ef;width:2.65rem;height:2.65rem;font-family:var(--font-mono);border-radius:50%;place-items:center;margin-top:.2rem;font-weight:700;display:grid;box-shadow:0 10px 20px #17171726}.step-content h3{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:1.5rem}.step-content p{color:var(--ink-soft);margin:.55rem 0 0;line-height:1.7}.step-extra{margin-top:.9rem}.code-block{color:#f6ebde;font-family:var(--font-mono);background:#201d1a;border:1px solid #fff8e814;border-radius:16px;margin:.85rem 0 0;padding:1rem 1.1rem;font-size:.92rem;line-height:1.7;overflow-x:auto}.step-note,.tutorial-footer{color:var(--ink-soft)}.tutorial-footer{border-top:1px solid var(--line);margin:1.4rem 0 0;padding-top:1rem}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes poster-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@media (width<=980px){.masthead{flex-direction:column;align-items:flex-start}.hero-shell,.tutorial-head,.callout-row,.tutorial-meta{grid-template-columns:1fr}}@media (width<=760px){.app{padding:.85rem}.masthead-copy h1{max-width:none;font-size:clamp(1.5rem,5vw,2.2rem);line-height:1.1}.masthead{margin-bottom:1rem;padding-bottom:1rem}.hero-shell{grid-template-columns:1fr;gap:.8rem;padding:.9rem}.hero-copy h2{max-width:none;font-size:clamp(1.4rem,4vw,1.8rem)}.hero-shell,.spec-sheet,.tutorial-section{border-radius:22px;padding:1rem}.spec-grid{grid-template-columns:1fr;gap:.8rem}.spec-item{gap:.3rem;min-height:90px;padding:.9rem}.spec-item:first-child .spec-value{font-size:1.2rem}.spec-item-wide .spec-value{font-size:.85rem;line-height:1.35}.spec-label{font-size:.65rem}.spec-value{font-size:.95rem;line-height:1.4}.poster-frame{transform:none}.poster-note{justify-self:stretch;width:100%;margin-top:-.5rem;font-size:.9rem;transform:none}.spec-grid{grid-template-columns:1fr}.step-card{border-left:none;grid-template-columns:auto minmax(0,1fr);gap:.75rem;padding-left:0}.step-number{width:2.15rem;height:2.15rem;font-size:.9rem}.step-content p,.hero-text,.callout{font-size:.95rem;line-height:1.5}.code-block{border-radius:12px;padding:.85rem;font-size:.8rem}.tutorial-head,.tutorial-meta{grid-template-columns:1fr}.tutorial-hero h2{font-size:clamp(1.5rem,4vw,2rem);line-height:1.15}.meta-card{min-height:100px;padding:.85rem}.tag{padding:.4rem .65rem;font-size:.85rem}}