:root{--bg-canvas:#160f2e;--bg-surface:#251940;--bg-surface-hover:#30204f;--text-primary:#fff;--text-muted:#c8bfd7;--accent-primary:#e0409b;--accent-secondary:#c5e86c;--border-subtle:rgba(255,255,255,.18);--ease-kinetic:cubic-bezier(.16,1,.3,1);--shadow-elevation:0 16px 32px -4px #0006;--glow-accent:0 0 28px -4px #e0409b33;--glass-backdrop:blur(20px) saturate(190%)}
*{box-sizing:border-box;overflow-wrap:anywhere;hyphens:auto}body{margin:0;background:var(--bg-canvas);color:var(--text-primary);font:1rem/1.7 system-ui,sans-serif}a{color:var(--accent-secondary);text-underline-offset:.25em}a:hover{color:#fff}button,input,textarea,select{font:inherit}button,a,input,textarea,select{touch-action:manipulation}:focus-visible{outline:3px solid var(--accent-secondary);outline-offset:5px}h1,h2,h3,p,figure{margin-top:0}h1{font-size:clamp(2.5rem,5vw,3.5rem);line-height:1.09;letter-spacing:-.045em;max-width:24ch;margin-bottom:1.3rem}h2{font-size:2rem;line-height:1.2;letter-spacing:-.025em}h3{font:600 1.5rem/1.35 system-ui,sans-serif}p{margin-bottom:1.25rem}.wrap{width:min(1200px,calc(100% - 64px));margin-inline:auto}.reading{max-width:70ch;margin-inline:auto}.site-header{position:relative;padding:24px 0 0;border-bottom:1px solid var(--border-subtle)}.brand{display:inline-flex;align-items:center;gap:12px;font-size:1.1rem;font-weight:750;letter-spacing:-.035em;color:#fff;text-decoration:none}.brand-mark{display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--accent-primary);font:700 21px/1 ui-monospace,Consolas,monospace;color:var(--accent-primary)}.nav{display:flex;justify-content:center;gap:25px;flex-wrap:wrap;padding:22px 0 15px}.nav a{font-size:.82rem;text-decoration:none;color:var(--text-muted)}.nav a:hover,.nav a[aria-current=page]{color:#fff;text-decoration:underline;text-decoration-color:var(--accent-primary);text-decoration-thickness:2px}.menu-toggle{display:none}.eyebrow,.annotation,.step-number,.button,button,figcaption,th,.meta{font-family:ui-monospace,Consolas,monospace}.eyebrow{color:var(--accent-secondary);font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;margin-bottom:14px}.hero{padding:44px 0 35px;border-bottom:1px solid var(--border-subtle)}.dot-field{background-image:radial-gradient(#ffffff19 .75px,transparent .75px);background-size:15px 15px}.hero p{max-width:64ch;color:var(--text-muted)}.button,button{display:inline-block;padding:12px 18px;background:transparent;border:1px solid var(--accent-primary);color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:.73rem;cursor:pointer;line-height:1.5;transition:background .25s,color .25s,transform .25s}.button:hover,button:hover{background:var(--accent-primary);color:var(--bg-canvas)}button:disabled{opacity:.45;cursor:not-allowed}.button.secondary{border-color:var(--border-subtle)}.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.workflow{position:relative;margin-top:0;padding-left:50px}.workflow:before{content:"";position:absolute;left:16px;top:0;bottom:0;width:1px;background:linear-gradient(var(--accent-primary),var(--border-subtle),var(--accent-secondary))}.step{position:relative;padding:42px 0;border-bottom:1px solid var(--border-subtle)}.step-number{position:absolute;left:-50px;top:46px;width:33px;background:var(--bg-canvas);color:var(--accent-primary);font-size:.85rem;padding:4px 0}.lesson-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:38px;align-items:start}.lesson-row>*,.pair>*{min-width:0}.lesson-row p{max-width:66ch;color:var(--text-muted)}.photo{margin:0}.photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--bg-surface)}.photo.wide img{aspect-ratio:16/9}.photo.square img{aspect-ratio:1}.photo figcaption{padding-top:10px;font-size:.73rem;color:var(--text-muted);line-height:1.6}.annotation{padding:10px 0;border-top:1px solid var(--border-subtle);color:var(--accent-secondary);font-size:.78rem;letter-spacing:.02em;margin:18px 0}.icon-row{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--border-subtle)}.icon-row>span:first-child{color:var(--accent-primary);font-family:ui-monospace,Consolas,monospace;flex:0 0 25px}.icon-row p{margin:0}.icon-row a{text-decoration:none}.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}.edited-photo{filter:brightness(1.12) contrast(1.08) saturate(.8)}.article-intro{padding:42px 0 28px}.article-intro p{color:var(--text-muted)}.article-body{padding-bottom:55px}.article-body .workflow{padding-left:45px}.article-body .step-number{left:-45px}.article-body .step{padding-top:30px;padding-bottom:30px}.article-body .step-number{top:32px}.article-body h2{font-size:1.7rem}.article-body h3{font:600 1rem/1.5 ui-monospace,Consolas,monospace;color:var(--accent-secondary)}.article-body p{color:var(--text-muted)}.note{border-left:2px solid var(--accent-primary);padding:12px 22px;margin:25px 0;background:var(--bg-surface)}.note p:last-child{margin-bottom:0}.table-scroll{overflow-x:auto;margin:22px 0;border-top:1px solid var(--border-subtle)}table{border-collapse:collapse;width:100%;min-width:550px;text-align:left;font-size:.87rem}caption{text-align:left;color:var(--accent-secondary);padding:12px 0}th,td{padding:14px 12px;border-bottom:1px solid var(--border-subtle);vertical-align:top}th{background:var(--bg-surface);font-size:.78rem}ul,ol{padding-left:1.35rem}li{margin-bottom:.7rem}.checklist{list-style:none;padding:0}.checklist li{padding:12px 0 12px 28px;border-bottom:1px solid var(--border-subtle);position:relative}.checklist li:before{content:"✓";position:absolute;left:0;color:var(--accent-secondary)}details{border-bottom:1px solid var(--border-subtle);padding:20px 0}summary{cursor:pointer;font-weight:650;padding-right:15px}details[open] summary{color:var(--accent-secondary);margin-bottom:15px}details p{color:var(--text-muted);margin-bottom:5px}.page-section{padding:40px 0 60px}.page-section h2{margin-top:35px;font-size:1.7rem}.muted{color:var(--text-muted)}label{display:block;margin-bottom:8px;font: .85rem/1.5 ui-monospace,Consolas,monospace}input,textarea,select{display:block;width:100%;border:1px solid var(--border-subtle);background:var(--bg-surface);color:#fff;padding:12px;margin-bottom:22px;border-radius:0}textarea{min-height:150px;resize:vertical}.status{min-height:1.7em;color:var(--accent-secondary);font-size:.88rem}.site-footer{border-top:1px solid var(--border-subtle);padding:30px 0 35px;font-size:.82rem;color:var(--text-muted)}.footer-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer-links{display:flex;gap:20px;flex-wrap:wrap}.site-footer p{margin:16px 0 0}.site-footer a{color:var(--text-muted)}.reveal{opacity:1}.motion-enabled .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-kinetic),transform .8s var(--ease-kinetic)}.motion-enabled .reveal-visible{opacity:1;transform:translateY(0)}.skip-link{position:absolute;left:16px;top:-100px;z-index:30;background:var(--bg-surface);padding:10px}.skip-link:focus{top:10px}
@media(min-width:1025px){.hero h1{max-width:25ch}.lesson-row{gap:50px}.site-header>.wrap{width:calc(100% - 64px);max-width:1440px}}
@media(min-width:769px) and (max-width:1024px){.nav{gap:18px}.lesson-row{gap:25px}}
@media(max-width:768px){.wrap{width:calc(100% - 36px)}.site-header{padding:17px 0}.nav{gap:13px;padding-bottom:0}.js .menu-toggle{display:block;position:absolute;right:18px;top:14px;font:1.8rem/1 system-ui;padding:4px 13px;letter-spacing:0}.js .brand{padding-right:55px}.js .nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;background:var(--bg-surface);padding:22px;border-bottom:1px solid var(--accent-primary);box-shadow:var(--shadow-elevation)}.js .nav.open{display:flex;flex-direction:column;gap:0}.js .nav a{padding:12px}.lesson-row{grid-template-columns:1fr;gap:23px}.workflow{padding-left:39px}.workflow:before{left:11px}.step-number{left:-39px;width:25px}.hero{padding:30px 0}.step{padding:32px 0}.step-number{top:35px}.pair{gap:12px}.footer-top{flex-direction:column}}
@media(max-width:480px){.brand{font-size:.93rem;gap:8px}.brand-mark{width:28px;height:28px;font-size:17px}h1{font-size:2.5rem}h2{font-size:1.75rem}.pair{grid-template-columns:1fr}.button,button{padding:11px 13px}.article-body .workflow{padding-left:33px}.article-body .step-number{left:-33px}.article-body .workflow:before{left:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-enabled .reveal{opacity:1;transform:none}}