#monocular-direction { --track:1.2px; --paper:light-dark(#f3f2e9,#111210); --ink:light-dark(#191a17,#eeeee5); --title:light-dark(#333430,#eeeee5); --quiet:light-dark(#60615a,#b2b3aa); --rule:color-mix(in srgb,var(--ink) 22%,transparent); font-family:Helvetica Neue,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--paper); container-type:inline-size; box-sizing:border-box; display:grid; place-items:center; min-height:100vh; min-height:100svh; padding:48px 32px; transition:background-color .2s,color .2s; }
    #monocular-direction * { box-sizing:border-box; }
    #monocular-direction .md-page { width:100%; max-width:760px; }
    #monocular-direction .md-top { display:flex; justify-content:space-between; align-items:center; gap:18px; border-bottom:1px solid var(--rule); padding:0 0 16px; flex-wrap:wrap; }
    #monocular-direction .md-brand { font-family:'Monocular Switzer Bold',Helvetica Neue,Helvetica,Arial,sans-serif; font-size:28px; font-weight:700; letter-spacing:.01em; line-height:1.2; font-synthesis:none; color:var(--title); }
    #monocular-direction .md-theme { display:grid; place-items:center; width:44px; height:44px; padding:0; margin-right:-13px; color:var(--ink); background:transparent; border:0; }
    #monocular-direction .md-theme:hover { background:color-mix(in srgb,var(--ink) 6%,transparent); }
    #monocular-direction .md-meta { font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:var(--track); text-transform:uppercase; }
    #monocular-direction .md-kicker { display:flex; justify-content:space-between; gap:16px; padding-top:18px; color:var(--quiet); white-space:nowrap; }
    #monocular-direction .md-hero { position:relative; padding:72px 0 76px; }
    #monocular-direction h1 { font-size:clamp(64px,12.5cqw,112px); letter-spacing:-.065em; font-weight:500; line-height:.96; margin:0; position:relative; color:var(--title); }
    #monocular-direction h1 span { display:block; }
    /* The frame's width matches “Stockholm, Sweden” (17 monospace characters plus meta tracking), so it sets the meta font for ch. */
    #monocular-direction .md-register { --dot:9px; position:absolute; right:0; top:78px; width:calc(17ch + 17 * var(--track)); aspect-ratio:1; font:11px/1 ui-monospace,SFMono-Regular,Consolas,monospace; border-top:1px solid var(--ink); border-right:1px solid var(--ink); }
    #monocular-direction .md-dot { position:absolute; left:0; bottom:0; width:var(--dot); height:var(--dot); background:var(--ink); }
    #monocular-direction .md-intro { border-top:1px solid var(--rule); display:flex; justify-content:flex-start; padding-top:10px; }
    #monocular-direction .md-icon-link { display:grid; place-items:center; width:44px; height:44px; padding:0; margin:0 0 0 -13px; color:var(--quiet); text-decoration:none; }
    #monocular-direction .md-icon-link:hover { color:var(--ink); }
    #monocular-direction[data-mobile="true"] { max-width:390px; margin-inline:auto; }
    @media (max-width:480px) { #monocular-direction { padding:32px 20px; } }
    @media (max-width:360px) { #monocular-direction { --track:.8px; } }
    @container (max-width:480px) {
      #monocular-direction .md-brand { font-size:26px; }
      #monocular-direction .md-kicker { gap:8px; padding-top:20px; }
      #monocular-direction .md-hero { padding:56px 0; }
      #monocular-direction h1 { font-size:clamp(58px,17cqw,78px); }
      #monocular-direction .md-register { --dot:7px; top:34px; width:calc((17ch + 17 * var(--track)) * .75); aspect-ratio:1; }
    }
    @media(prefers-reduced-motion:reduce) { #monocular-direction, #monocular-direction * { animation:none !important; transition:none !important; } }