@font-face{font-family:'Fixel Text';font-weight:400;font-display:swap;src:url('/opus-5-5-videos/assets/fonts/FixelText-Regular.woff2') format('woff2')}
@font-face{font-family:'Fixel Text';font-weight:500;font-display:swap;src:url('/opus-5-5-videos/assets/fonts/FixelText-Medium.woff2') format('woff2')}
@font-face{font-family:'Fixel Text';font-weight:600;font-display:swap;src:url('/opus-5-5-videos/assets/fonts/FixelText-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Fixel Display';font-weight:700;font-display:swap;src:url('/opus-5-5-videos/assets/fonts/FixelDisplay-Bold.woff2') format('woff2')}
@font-face{font-family:'Cascadia Mono';font-weight:500;font-display:swap;src:url('/opus-5-5-videos/assets/fonts/cascadia-mono-500.woff2') format('woff2')}
:root{--bg:#f7f6f1;--bg-soft:#efeee7;--line:rgba(32,29,26,.10);--line-soft:rgba(32,29,26,.06);
  --ink:#201d1a;--ink-2:#4a4640;--ink-3:#6b6660;--accent:#b34c28;--accent-soft:#f6ece6;--card:#fbfaf6;--radius:14px;
  --glass:rgba(250,250,246,.42);--glass-shadow:0 0 0 1px rgba(38,35,31,.10) inset,0 1px 0 rgba(255,255,255,.55) inset,0 8px 24px rgba(38,35,31,.08);
  --font:'Fixel Text',system-ui,-apple-system,"Segoe UI",sans-serif;--font-display:'Fixel Display','Fixel Text',system-ui,sans-serif;
  --font-mono:'Cascadia Mono','SF Mono',ui-monospace,monospace}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}img{max-width:100%}
.wrap{max-width:1320px;margin:0 auto;padding:0 20px}
.topbar{padding:12px 0 4px}.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.capsule{display:flex;align-items:center;background:var(--glass);border-radius:999px;padding:0 8px;box-shadow:var(--glass-shadow);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15)}
.nav-cluster{gap:6px;min-width:0}.nav-side{gap:4px;flex:none}
.brand{display:inline-flex;align-items:center;gap:10px;padding:6px 4px 6px 10px;font-family:var(--font-mono);font-weight:500;font-size:14px;letter-spacing:.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--accent)}.brand img{width:24px;height:24px;display:block}
.nav{display:flex;align-items:center;gap:2px;min-width:0}
.nav a,.nav-side a{padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.nav a:hover,.nav-side a:hover{color:var(--ink);background:rgba(235,235,228,.6)}
.topbar{position:relative;z-index:50}
.nav-dd{position:relative;display:flex}
.nav-dd>a{display:inline-flex;align-items:center;gap:6px}
.nav-dd>a svg{width:10px;height:6px;flex:none;transition:transform .15s}
.nav-dd:hover>a svg,.nav-dd:focus-within>a svg{transform:rotate(180deg)}
.nav-dd-menu{display:none;position:absolute;left:0;top:100%;padding-top:10px}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{display:block}
.nav-dd-list{display:flex;flex-direction:column;gap:2px;min-width:190px;padding:6px;background:#fbfaf6;border-radius:16px;box-shadow:0 0 0 1px rgba(38,35,31,.10),0 16px 40px rgba(38,35,31,.16)}
.nav .nav-dd-list a{border-radius:10px;padding:9px 12px}
.nav .nav-dd-list a[aria-current]{color:var(--ink);background:rgba(240,240,233,.75)}
.nav-toggle{display:none;width:52px;height:52px;border-radius:50%;flex:none;cursor:pointer;background:var(--glass);border:0;box-shadow:var(--glass-shadow);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink)}
@media(max-width:860px){.topbar{padding:10px 0 2px;position:relative}.nav-toggle{display:flex}.nav-side{display:none}
 .nav-cluster{padding:0 10px 0 0;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(250,250,246,.92)}
 .nav{display:none;position:absolute;left:20px;right:20px;top:calc(100% - 4px);z-index:40;flex-direction:column;align-items:stretch;gap:2px;padding:8px;background:#fbfaf6;border-radius:18px;box-shadow:0 0 0 1px rgba(38,35,31,.10),0 16px 40px rgba(38,35,31,.16)}
 .nav.open{display:flex}.nav a{padding:11px 14px;border-radius:12px;font-size:15px}
 .nav-dd{flex-direction:column;align-items:stretch}.nav-dd>a svg{display:none}
 .nav-dd-menu{display:block;position:static;padding:0}
 .nav-dd-list{min-width:0;margin:0 0 4px 14px;padding:0 0 0 6px;background:none;border-radius:0;box-shadow:none;border-left:1px solid var(--line)}
 .nav .nav-dd-list a{padding:9px 12px;font-size:14.5px}}
header.mast{}
.masthead{padding-block:8px 2px;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 14px}
h1{font-size:26px;line-height:1.15;letter-spacing:-.022em;margin:0;font-weight:700;font-family:var(--font-display)}
h1 .dim{color:var(--ink-3);font-weight:400}
.meta{color:var(--ink-3);font-size:14px}
.filters{padding:8px 0 14px;display:flex;flex-direction:column;gap:8px}
.pills{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pills::-webkit-scrollbar{display:none}.pill{flex:none}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--ink-2);text-decoration:none;cursor:pointer}
.pill b{font-weight:500;color:var(--ink-3);font-size:13px}
.pill:hover{border-color:rgba(32,29,26,.25);color:var(--ink)}
.pill[aria-current=page],.pill.on{background:var(--ink);border-color:var(--ink);color:#fbfaf6}
.pill[aria-current=page] b,.pill.on b{color:rgba(251,250,246,.75)}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.seg{display:inline-flex;background:var(--bg-soft);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:7px 12px;border-radius:999px;font:inherit;font-size:14px;color:var(--ink-2);cursor:pointer}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
select,input[type=search]{font:inherit;font-size:14px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
input[type=search]{flex:1 1 220px;min-width:0}
.techs{display:flex;flex-wrap:wrap;gap:6px}
.tech{border:1px solid var(--line-soft);background:transparent;border-radius:999px;padding:4px 10px;font:inherit;font-size:13px;color:var(--ink-3);cursor:pointer}
.tech.on{background:var(--accent-soft);border-color:rgba(179,76,40,.35);color:var(--accent)}
.shown{color:var(--ink-3);font-size:14px;margin:6px 0 12px}
.qhint{margin:0;font-size:13.5px;color:var(--ink-3)}.qhint.warn{color:var(--accent)}
.qhint .linkish{border:0;background:none;padding:0;font:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px 18px}
.card{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.thumb{position:relative;aspect-ratio:16/9;background:var(--bg-soft);overflow:hidden;border-radius:16px;box-shadow:0 0 0 1px var(--line)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.card:hover .thumb img{transform:scale(1.035)}
.card:hover .ctitle{color:var(--accent)}
.dur,.badge,.cat{position:absolute;font-size:11px;font-weight:600;border-radius:999px;padding:3px 8px;line-height:1.2;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dur{right:9px;bottom:9px;background:rgba(251,250,246,.88);color:var(--ink);font-variant-numeric:tabular-nums}
.cat{left:9px;top:9px;background:rgba(251,250,246,.88);color:var(--ink-2)}
.badge{right:9px;top:9px;background:rgba(246,236,230,.95);color:var(--accent)}
.badge.d{background:rgba(251,250,246,.88);color:var(--ink-2)}
.cbody{display:flex;flex-direction:column;gap:4px;padding:0 2px}
.ctitle{font-size:15px;font-weight:600;line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .15s}
.csub{font-size:13px;color:var(--ink-3);display:flex;gap:10px;align-items:center;min-width:0}
.csub span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctags{display:flex;flex-wrap:wrap;gap:4px}.ctags span{font-size:11px;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.more{display:block;margin:26px auto 10px;padding:10px 22px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:inherit;font-size:15px;cursor:pointer}
.more[hidden]{display:none}
footer{padding:36px 0 50px;color:var(--ink-3);font-size:14px;border-top:1px solid var(--line-soft);margin-top:40px}
footer a{color:var(--ink-2)}
.crumbs{font-size:14px;color:var(--ink-3);margin:6px 0 10px}.crumbs a{color:var(--ink-2);text-decoration:none}.crumbs a:hover{color:var(--accent)}
.byline{color:var(--ink-3);margin:8px 0 0;font-size:14px}.byline a{color:var(--ink-2)}
.vlayout{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:32px;padding:22px 0 10px;align-items:start}
.vlayout>*{min-width:0}
.embed{min-height:200px}
.embed blockquote.twitter-tweet{margin:0;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px}
.embed blockquote img{border-radius:8px;display:block;margin-bottom:10px}
.panel{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius);padding:18px 18px 16px;margin-bottom:18px}
.panel h2{font-size:18px;margin:0 0 8px;font-family:var(--font-display)}
.note{font-size:14px;color:var(--ink-2);margin:0 0 10px}
pre.prompt{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;font-family:var(--font-mono);font-size:13.5px;line-height:1.55;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;margin:0;max-height:560px;overflow-y:auto}
.prow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:12px}
.copy{border:0;background:var(--ink);color:#fbfaf6;border-radius:999px;padding:9px 18px;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.copy:hover{background:var(--accent)}
.attr{font-size:13px;color:var(--ink-3)}.attr a{color:var(--ink-2)}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
dl.facts dt{color:var(--ink-3)}dl.facts dd{margin:0;color:var(--ink)}
.section-h{font-size:20px;margin:34px 0 14px;font-family:var(--font-display)}
@media(max-width:900px){.vlayout{grid-template-columns:minmax(0,1fr);gap:20px}}
.techbox{position:relative}
.techbox summary{display:inline-flex;list-style:none;cursor:pointer;font-size:14px;color:var(--ink-2);padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.techbox summary::-webkit-details-marker{display:none}.techbox[open] summary{border-color:rgba(32,29,26,.3);color:var(--ink)}
.techbox .techs{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(460px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 12px 30px rgba(38,35,31,.14)}.seg .sm{display:none}
@media(max-width:560px){h1{font-size:21px}.meta{font-size:13px}.grid{gap:14px}.wrap{padding:0 16px}
 .pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px 2px}
 .pills::-webkit-scrollbar{display:none}.pill{flex:none}
 .seg button{padding:6px 10px;font-size:13px}.seg .lg{display:none}.seg .sm{display:inline}
 .controls{gap:8px}.techbox summary{padding:7px 12px}}