.badge-art{--b-paper:#f4f6f6;--b-ink:#142939;--b-muted:#465867;--b-accent:#205680;--b-line:#b7c5ce;width:312px;max-width:100%;color:var(--b-ink);margin:0;font:13px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;position:relative;container-type:inline-size}.badge-face{box-sizing:border-box;isolation:isolate;aspect-ratio:2/3;border:2px solid var(--b-ink);background:var(--b-paper);width:100%;box-shadow:5px 5px 0 var(--shadow);grid-template-rows:24px minmax(0,1fr) auto auto 78px;grid-template-areas:"top""photo""person""data""bottom";gap:10px;padding:18px;display:grid;position:relative}.badge-face>*{min-width:0}.badge-art :is(p,figure){margin:0}.badge-top{color:var(--b-muted);letter-spacing:.06em;border-bottom:1px solid var(--b-line);grid-area:top;justify-content:space-between;align-items:center;gap:8px;padding-bottom:7px;font-size:10px;display:flex}.badge-pixel-mark{background:var(--b-accent);width:6px;height:6px;box-shadow:-9px 0 0 var(--b-accent), 0 9px 0 var(--b-accent);flex:0 0 6px;margin:0 2px 5px 9px;display:block}.badge-photo{border:1px solid var(--b-line);background:#fff;grid-area:photo;align-self:center;width:106px;max-width:100%;padding:5px;position:relative}.badge-photo img.blog-avatar{width:100%;height:auto}.badge-person{grid-area:person;align-self:center}.badge-art .badge-name{letter-spacing:-.035em;color:var(--b-ink);overflow-wrap:anywhere;margin:0;font:700 40px/1.08 system-ui,sans-serif}.badge-name-dot{color:var(--b-accent)}.badge-art .badge-role{color:var(--b-ink);margin-top:9px;font:500 14px/1.4 system-ui,sans-serif}.badge-data{border-top:1px solid var(--b-line);grid-area:data;justify-content:space-between;align-items:end;gap:8px;padding-top:9px;font-size:12px;display:flex}.badge-data>span{gap:2px;display:grid}.badge-data small{color:var(--b-muted);letter-spacing:.06em;font-size:9px}.badge-domain{text-align:right}.badge-bottom{grid-area:bottom;align-self:end;min-width:0}.badge-barcode{justify-items:center;gap:3px;width:100%;display:grid}.badge-art .badge-barcode-image{background:#fff;flex:none;width:180px;min-width:180px;max-width:none;height:64px;display:block}.badge-barcode figcaption{color:var(--b-muted);white-space:nowrap;letter-spacing:0;font:9px/1.2 ui-monospace,Consolas,monospace}.badge-hole,.badge-artwork{display:none}.badge-hardware{z-index:2;height:78px;position:relative}.badge-strap{border-inline:3px solid var(--b-ink);background:var(--b-accent);color:#fff;justify-content:center;width:42px;height:60px;margin:auto;display:flex;overflow:hidden}.badge-strap span{writing-mode:vertical-rl;letter-spacing:.08em;white-space:nowrap;padding-top:5px;font-size:8px;line-height:1.3}.badge-connector{background:#cdd4d7;border:3px solid #66717a;width:28px;height:38px;position:absolute;top:52px;left:calc(50% - 14px);box-shadow:inset 0 0 0 2px #eef2f4}.badge-connector i{background:#37434d;height:5px;position:absolute;bottom:5px;left:4px;right:4px}.badge-art[data-orientation=vertical] .badge-hole{background:#253039;border:1px solid #61717b;width:42px;height:5px;display:block;position:absolute;top:6px;left:calc(50% - 21px)}.badge-art[data-orientation=vertical] .badge-top{margin-top:5px}.badge-art[data-alignment=center] .badge-photo{justify-self:center}.badge-art[data-alignment=center] .badge-person{text-align:center}.about-view[data-badge-variant] .badge-about-layout{grid-template-rows:auto 1fr;grid-template-columns:312px minmax(0,1fr);align-items:start;gap:28px 36px;display:grid}.about-view[data-badge-variant] .badge-art{grid-area:1/1}.about-view[data-badge-variant] .about-markdown{grid-area:1/2/3;gap:26px;min-width:0;margin:0}.about-view[data-badge-variant] .about-contact{grid-area:2/1;margin:0;padding-top:20px}.about-view[data-badge-variant] .about-section:not(.about-intro){border-top:1px solid var(--line);padding-top:20px}@media (width>=851px){.about-view[data-about-selected] .about-markdown{grid-row:1;align-self:center}}@media (width<=850px){.about-view[data-badge-variant] .badge-about-layout{grid-template-rows:auto;grid-template-columns:minmax(0,1fr)}.about-view[data-badge-variant] :is(.badge-art,.about-markdown,.about-contact){grid-area:auto}.about-view[data-badge-variant] .badge-art{justify-self:center}}@media (width<=600px){.pane-shell:has(.about-view[data-badge-variant]){padding-inline:8px}.about-view[data-badge-variant] .about-pane>.pane-body{padding:22px 0}.about-view[data-badge-variant] :is(.about-markdown,.about-contact){padding-inline:16px}.about-view[data-badge-variant] .badge-art{max-width:100%}.badge-face{gap:8px}}@media print{.badge-face{box-shadow:none;break-inside:avoid;print-color-adjust:exact}}