/* Practice lessons and the less-templated editorial pass. */
.hero h1{max-width:720px;font-size:clamp(48px,5.5vw,80px);line-height:1.02;letter-spacing:-.055em}
.listen-launch,.button,.copy-button,.search-box,.filter,.mini-button{border-radius:8px}
.term-card,.case-card,.video-card,.prompt-card{border-radius:8px}
.lesson:hover,.term-card:hover{transform:none}
.lesson:hover{box-shadow:inset 0 -8px 0 var(--violet)}
.term-card:hover{border-color:var(--ink);box-shadow:none}
body[data-page="home"] #practice,body[data-page="home"] #glossary,body[data-page="home"] #patterns,body[data-page="home"] #watch{display:none}
.site-header nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.site-header nav a svg{display:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.glossary-tools{align-items:stretch;flex-direction:column;gap:16px}
.search-box{padding-left:16px;padding-right:16px}
.filters{padding:0;gap:8px}
.filter{padding-left:16px;padding-right:16px}
.eyebrow,.term-category,.where b,.astra-box b,.borrow b,.case-type,.video-step,.watch-task b,.reader-now span,.success-check b{text-transform:none}

.practice{padding:128px 0}
.practice-heading{display:grid;grid-template-columns:1fr 400px;gap:64px;align-items:end;margin-bottom:80px}
.practice-heading h2{margin:0;font-size:clamp(48px,6vw,88px);line-height:.96;letter-spacing:-.06em}
.practice-heading p{max-width:560px;margin:24px 0 0;color:var(--muted);font-size:18px}
.practice-progress{display:grid;grid-template-columns:max-content max-content 1fr;column-gap:24px;row-gap:16px;align-items:center}
.practice-progress strong{grid-column:1;grid-row:1;font:500 13px var(--mono)}
.practice-progress>span{grid-column:1/-1;grid-row:2;height:8px;background:#d7d4cb;position:relative}
.practice-progress>span i{position:absolute;inset:0 auto 0 0;width:0;background:var(--violet);transition:width .2s ease}
.practice-progress button{grid-column:2;grid-row:1;height:40px;padding:0 16px;border:1px solid var(--ink);border-radius:8px;background:transparent;font:600 13px var(--sans);cursor:pointer}

.lab{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border-top:1px solid var(--ink);min-height:640px}
.lab:last-child{border-bottom:1px solid var(--ink)}
.lab.reverse .lab-visual{order:2;border-right:0;border-left:1px solid var(--ink)}
.lab.reverse .lab-copy{order:1}
.lab-visual{position:relative;min-height:640px;background:#242428;color:white;border-right:1px solid var(--ink);overflow:hidden}
.lab-copy{padding:64px}
.lab-number{font:500 12px var(--mono);color:var(--violet)}
.lab-copy h3{margin:24px 0 16px;font-size:40px;line-height:1.05;letter-spacing:-.04em}
.lab-goal{margin:0 0 40px;color:var(--muted);font-size:17px}
.lab-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lab-steps li{border-bottom:1px solid var(--line)}
.lab-steps label{display:grid;grid-template-columns:24px 1fr;gap:16px;align-items:start;padding:16px 0;cursor:pointer}
.lab-steps input{appearance:none;width:24px;height:24px;margin:0;border:1px solid var(--ink);background:white;display:grid;place-items:center}
.lab-steps input:checked{background:var(--acid)}
.lab-steps input:checked:after{content:"";width:10px;height:6px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg) translateY(-1px)}
.lab-steps input:checked+span{text-decoration:line-through;color:var(--muted)}
.success-check{margin-top:32px;padding:16px;border-left:4px solid var(--violet);background:#ebe6ff}
.success-check b{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.success-check p{margin:8px 0 0}
.hint{margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hint summary{padding:16px 0;font-weight:700;cursor:pointer}
.hint p{margin:0 0 16px;color:var(--muted);font-family:var(--mono);font-size:13px}
.copy-hint{height:40px;margin-bottom:16px;padding:0 16px;border:1px solid var(--ink);border-radius:8px;background:white;font-weight:700;cursor:pointer}
.viewport-demo,.video-card{border-radius:8px}
.reader-close{display:grid}

.blender-title{position:absolute;left:0;right:0;top:0;height:48px;padding:0 16px;background:#303035;border-bottom:1px solid #4b4b52;display:flex;align-items:center;justify-content:space-between;font:12px var(--mono);color:#bdbdc4}
.visual-grid{position:absolute;inset:48px 0 0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:32px 32px;transform:perspective(560px) rotateX(58deg) scale(1.5);transform-origin:center bottom}
.visual-cube{position:absolute;left:50%;top:48%;width:128px;height:128px;transform:translate(-50%,-50%) rotate(30deg);border:2px solid var(--acid);box-shadow:32px -32px 0 -2px rgba(118,87,255,.3)}
.orbit-ring{position:absolute;left:50%;top:48%;width:304px;height:176px;border:1px dashed #aaa;border-radius:50%;transform:translate(-50%,-50%) rotate(-10deg)}
.orbit-ring:after{content:"";position:absolute;right:20px;top:16px;width:8px;height:8px;border-right:2px solid var(--acid);border-bottom:2px solid var(--acid);transform:rotate(-30deg)}
.axis-mini{position:absolute;right:24px;top:80px;width:64px;height:64px}
.axis-mini i{position:absolute;left:32px;top:32px;width:24px;height:2px;background:#ee5d5d;transform-origin:left}.axis-mini i:nth-child(2){background:#65d875;transform:rotate(-90deg)}.axis-mini i:nth-child(3){background:#5b8dff;transform:rotate(45deg)}
.click-callout{position:absolute;padding:8px 16px;background:white;color:var(--ink);border:1px solid var(--ink);font:11px var(--mono);box-shadow:8px 8px 0 var(--acid)}
.click-callout b{display:block;margin-top:8px;font-family:var(--sans);font-size:13px}.callout-frame{left:32px;bottom:40px}.callout-orbit{right:40px;bottom:128px}

.fake-properties{position:absolute;right:0;top:0;width:224px;bottom:0;padding:16px;background:#303035;border-left:1px solid #4b4b52;font:11px var(--mono);color:#ccc}.fake-properties>b{display:block;margin-bottom:16px}.tab-icon{width:32px;height:32px;margin-bottom:16px;border:1px solid #555;display:grid;place-items:center}.tab-icon.active{background:var(--violet);color:white}.tab-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}.fake-button{padding:8px;background:#4a4a50;border:1px solid #666;text-align:center}.fake-panel{margin-top:16px;padding:16px 8px;background:#252529;border:1px solid #48484e}.fake-panel strong,.fake-panel span{display:block}.fake-panel span{margin-top:16px;color:#aaa}.before-after{position:absolute;left:40px;right:264px;top:160px;display:flex;align-items:center;justify-content:space-around}.before-after>div{text-align:center}.before-after b{display:block;margin-top:32px;font:11px var(--mono);color:#aaa}.cube-shape{display:block;width:96px;height:96px;background:#8a8a92;border:2px solid #bbb;transform:rotate(20deg)}.cube-shape.soft{border-radius:16px;box-shadow:inset -16px -16px 24px rgba(0,0,0,.25),inset 16px 16px 24px rgba(255,255,255,.15)}.compare-arrow{width:32px;fill:none;stroke:#aaa;stroke-width:1.5}.modifier-callout{left:32px;bottom:48px}

.material-properties{left:0;right:auto;border-left:0;border-right:1px solid #4b4b52}.color-chip{float:right;width:64px;height:16px;background:var(--violet)}.slider-line{float:right;width:80px;height:2px;margin-top:8px;background:#666;position:relative}.slider-line em{position:absolute;left:44%;top:-4px;width:8px;height:8px;background:white;border-radius:50%}.material-spheres{position:absolute;left:256px;right:32px;top:200px;display:flex;justify-content:space-around}.material-spheres>div{text-align:center}.material-spheres b{display:block;margin-top:24px;font:11px var(--mono);color:#aaa}.sphere{display:block;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 32% 24%,white 0 4%,#a991ff 8%,#7657ff 42%,#292234 78%)}.sphere.satin{filter:saturate(.85);background:radial-gradient(circle at 34% 28%,#dcd7ff,#7657ff 38%,#383148 78%)}.sphere.matte{background:radial-gradient(circle at 35% 28%,#9c87ff,#7657ff 48%,#55439c 90%)}.material-callout{right:32px;bottom:48px}

.light-stage{position:absolute;inset:0 0 152px;background:linear-gradient(#1c1c20,#29292f)}.area-light{position:absolute;left:80px;top:96px;width:112px;height:32px;border:2px solid #fff1a8;background:rgba(255,241,168,.3);transform:rotate(-24deg);box-shadow:0 0 32px #ffdd70}.light-rays{position:absolute;left:144px;top:128px;width:280px;height:280px;background:conic-gradient(from 238deg at 0 0,rgba(255,239,164,.18) 0 30deg,transparent 31deg)}.stage-object{position:absolute;right:112px;bottom:64px;width:112px;height:160px;border-radius:56px 56px 16px 16px;background:linear-gradient(90deg,#222 0,#9a875f 62%,#e9d597 100%);box-shadow:48px 24px 32px rgba(0,0,0,.8)}.light-results{position:absolute;left:0;right:0;bottom:0;height:152px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #555}.result{display:flex;align-items:end;padding:16px;border-right:1px solid #555;font:11px var(--mono);background:radial-gradient(circle at 50% 35%,#857552 0 16%,#27272b 17%)}.result.hard-shadow{background:linear-gradient(135deg,#a99052 0 35%,#111 36%)}.result.side-shadow{background:linear-gradient(90deg,#bca568 0 28%,#222 54%)}.light-callout{left:24px;bottom:176px}

.fake-timeline{position:absolute;left:0;right:0;bottom:0;height:112px;padding:24px 40px;background:#303035;border-top:1px solid #555;display:flex;justify-content:space-between;font:11px var(--mono);color:#aaa}.fake-timeline:after{content:"";position:absolute;left:40px;right:40px;top:56px;height:2px;background:#666}.key{position:absolute;top:48px;width:16px;height:16px;background:var(--acid);transform:rotate(45deg);z-index:1}.key.one{left:48px}.key.two{right:48px}.graph-area{position:absolute;left:64px;right:64px;top:80px;bottom:160px}.graph-area svg{width:100%;height:100%;overflow:visible}.graph-area path{fill:none;stroke:#c5b8ff;stroke-width:4}.graph-area circle{fill:var(--acid)}.graph-axis{position:absolute;background:#666}.graph-axis.x{left:0;right:0;bottom:0;height:1px}.graph-axis.y{left:0;top:0;bottom:0;width:1px}.graph-callout{right:24px;top:32px}

.node-graph{position:absolute;inset:48px 24px 240px}.node{position:absolute;width:136px;padding:16px 8px;border:1px solid #666;background:#3b3b41;font:11px var(--mono);z-index:2}.node:before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:#777}.node i{position:absolute;right:-6px;top:50%;width:10px;height:10px;border-radius:50%;background:var(--acid)}.node.input{left:0;top:40px}.node.distribute{left:176px;top:120px}.node.distribute:before{background:#58a6a1}.node.instance{right:144px;top:48px}.node.instance:before{background:var(--violet)}.node.output{right:0;top:144px}.node-wire{position:absolute;height:2px;background:var(--acid);transform-origin:left}.node-wire.a{left:128px;top:88px;width:120px;transform:rotate(34deg)}.node-wire.b{left:304px;top:160px;width:144px;transform:rotate(-24deg)}.node-wire.c{right:112px;top:112px;width:104px;transform:rotate(30deg)}.scatter-preview{position:absolute;left:0;right:0;bottom:0;height:216px;background:#1c1c20;border-top:1px solid #555}.ground{position:absolute;left:48px;right:48px;bottom:32px;height:88px;background:#5c6257;transform:skew(-24deg)}.scatter-preview i{position:absolute;width:24px;height:16px;border-radius:50%;background:#a19b91}.scatter-preview i:nth-child(2){left:22%;bottom:88px}.scatter-preview i:nth-child(3){left:38%;bottom:64px;transform:scale(1.4)}.scatter-preview i:nth-child(4){left:52%;bottom:112px}.scatter-preview i:nth-child(5){left:64%;bottom:72px;transform:scale(.7)}.scatter-preview i:nth-child(6){left:74%;bottom:104px;transform:scale(1.2)}.scatter-preview i:nth-child(7){left:84%;bottom:56px}.nodes-callout{left:24px;top:24px}

@media(max-width:960px){.practice-heading{grid-template-columns:1fr}.lab,.lab.reverse{grid-template-columns:1fr}.lab-visual,.lab.reverse .lab-visual{order:1;border:0;border-bottom:1px solid var(--ink);min-height:560px}.lab-copy,.lab.reverse .lab-copy{order:2;padding:48px}.practice-progress{max-width:480px}.fake-properties{width:208px}.before-after{right:232px}.material-spheres{left:232px}.reader-controls{grid-template-columns:48px 48px 48px 48px 104px minmax(0,1fr) 64px}.reader-close{display:grid;padding:0 16px}}
@media(max-width:640px){body{padding-bottom:104px}.site-header{backdrop-filter:none}.practice{padding:96px 0}.practice-heading{margin-bottom:64px}.practice-heading h2{font-size:56px}.lab-visual,.lab.reverse .lab-visual{min-height:480px}.lab-copy,.lab.reverse .lab-copy{padding:40px 16px}.lab-copy h3{font-size:32px}.click-callout{box-shadow:4px 4px 0 var(--acid)}.callout-orbit{display:none}.fake-properties{width:176px;padding:8px}.before-after{left:16px;right:192px;top:136px;flex-direction:column;gap:24px}.before-after .compare-arrow{display:none}.cube-shape{width:64px;height:64px}.before-after b{margin-top:16px}.material-spheres{left:192px;right:8px;top:152px;flex-direction:column;align-items:center;gap:16px}.sphere{width:64px;height:64px}.material-spheres b{margin-top:8px}.light-stage{bottom:120px}.stage-object{right:48px}.light-results{height:120px}.node{width:112px;padding:8px;font-size:9px}.node.distribute{left:120px}.node.instance{right:104px}.node-wire{display:none}.site-header nav{position:fixed;z-index:45;left:16px;right:16px;bottom:16px;height:72px;padding:8px;display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:rgba(250,249,244,.96);border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 40px rgba(21,21,21,.16);backdrop-filter:blur(16px)}.site-header nav a{min-width:0;padding:8px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-radius:8px;font-size:10px;line-height:1;text-decoration:none}.site-header nav a svg{display:block;margin-bottom:8px;flex:0 0 auto}.site-header nav a[aria-current="page"]{background:var(--acid);color:var(--ink);text-decoration:none}.site-header nav a[aria-current="page"] svg{display:block;opacity:1}.reader-open .site-header nav{display:none}.reader-controls{grid-template-columns:48px 48px 48px 48px 104px;justify-content:center}.reader-now{grid-column:1/5;grid-row:2;text-align:left}.reader-close{grid-column:5;grid-row:2;width:104px}.reader-open{padding-bottom:176px}}

@media(max-width:767px){body{padding-bottom:104px}.site-header nav{position:fixed;z-index:45;left:16px;right:16px;bottom:16px;height:72px;padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:rgba(250,249,244,.96);border:1px solid var(--line);border-radius:8px;box-shadow:0 16px 40px rgba(21,21,21,.16);backdrop-filter:blur(16px)}.site-header nav a{min-width:0;padding:8px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-radius:8px;font-size:10px;line-height:1;text-decoration:none}.site-header nav a svg{display:block;margin-bottom:8px;flex:0 0 auto}.site-header nav a[aria-current="page"]{background:var(--acid);color:var(--ink);text-decoration:none}.site-header nav a[aria-current="page"] svg{display:block;opacity:1}.reader-open .site-header nav{display:none}}