:root{color-scheme:dark;--page:#080808;--ink:#f1f1f1;--muted:#aaa;--line:#363636;--image:#191919;--accent:#759fff}
.creative-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px;padding:12px 0 60px}.creative-grid .creative-tool{min-width:0;padding:0;border-top:0}.creative-grid .section-head{min-height:80px;gap:12px}.creative-grid .section-head h1,.creative-grid .section-head h2{font-size:15px;line-height:1.5}.creative-grid .section-head .textlink{white-space:nowrap;font-size:14px}.creative-grid .tool-preview iframe{height:clamp(340px,36vw,560px);min-height:0}.creative-grid .tool-caption{display:block}.creative-grid .tool-caption a{display:inline-block;margin-top:8px}
@media(max-width:700px){.creative-grid{grid-template-columns:1fr;gap:28px;padding-bottom:40px}.creative-grid .tool-preview iframe{height:420px}}
.motion-study{border-top:1px solid var(--line)}.motion-study h2{font-size:16px;font-weight:400;margin:0}.motion-duration{font-size:12px;letter-spacing:1px;color:var(--muted);margin:12px 0 0}
.creative-tool{padding-bottom:70px}.tool-preview{background:#000;border:1px solid var(--line)}.tool-preview iframe{display:block;border:0;width:100%;height:min(60vw,700px);min-height:420px}.tool-caption{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-top:18px;font-size:14px;line-height:1.7}.tool-caption p{margin:0;color:var(--muted)}.tool-caption a{flex-shrink:0}.tool-preview iframe{pointer-events:auto}
@media(max-width:700px){.creative-tool{padding-bottom:40px}.tool-caption{display:block}.tool-caption a{display:inline-block;margin-top:12px}.creative-tool .section-head{gap:15px}.creative-tool h1{font-size:14px}}
.coding-heading{border-top:1px solid var(--line)}
.intro+.coding-heading,.intro+.empty{border-top:0}
.coding-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:70px}
.coding-work{margin:0;min-width:0}.coding-work video{display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#000}
.coding-work:nth-child(2) video{aspect-ratio:1600/894}
.coding-work:nth-child(3) video{aspect-ratio:16/9}
.coding-work figcaption{display:flex;justify-content:space-between;padding-top:14px;font-size:14px}.coding-work figcaption span{color:var(--muted)}
@media(max-width:700px){.coding-gallery{grid-template-columns:1fr;gap:32px;padding-bottom:40px}}
:root[data-theme="light"]{color-scheme:light;--page:#fafafa;--ink:#111;--muted:#666;--line:#ccc;--image:#e4e4e4;--accent:#1455f5}
body{background:var(--page);color:var(--ink)}
header,.intro,.section-head,.all-work,.empty,footer{border-color:var(--line)}
nav a,.section-head span,.work>span span,.empty>span,.empty p{color:var(--muted)}
nav a[aria-current]{color:var(--accent);border-color:var(--accent)}
.work .image{background:var(--image)}
.brand{display:block;width:145px;flex-shrink:0;line-height:0;letter-spacing:normal}
.brand svg{display:block;width:100%;height:34px;fill:currentColor}
.theme-toggle{display:flex;align-items:center;gap:10px;min-height:38px;padding:8px 12px;background:none;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-size:14px}
.theme-icon{width:18px;height:18px;border:1px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
[data-theme="light"] .theme-icon{transform:rotate(180deg)}
dialog{background:var(--page);color:var(--ink)}dialog::backdrop{background:var(--page)}
.viewer-top button,.viewer-bottom button{color:var(--ink)}
.masthead{height:340px;min-height:0;padding:35px 0;display:flex;align-items:center;justify-content:center}
.masthead svg{width:100%;height:100%;max-height:none;overflow:visible}
@media(max-width:800px){header{height:auto;min-height:100px;flex-wrap:wrap;padding-top:12px;padding-bottom:10px;gap:6px 16px}.brand{width:135px}.brand svg{height:32px}.theme-toggle{margin-left:auto;order:1}nav{order:2;width:100%;justify-content:space-between;gap:12px}nav a{padding:9px 0;font-size:14px}.theme-toggle{font-size:13px}.masthead{height:210px;padding:25px 0}.masthead svg{max-height:none}}
.sections>a:only-child{grid-column:1/-1}