<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>兵器库 — Realm</title>
<meta name="description" content="兵器库 — Armory of the Realm lord's hardware, software, communications, services, and accessories">
<meta name="theme-color" content="#1a1a2e">
<link rel="stylesheet" href="realm.css">
</head>
<body>
<a class="skip-link" href="#scene-nav-armory">跳过场景</a>
<main class="realm-folder">
<h1 class="visually-hidden">兵器库</h1>
<div class="folder-content">
<svg role="group" aria-labelledby="scene-armory-title" viewBox="0 0 800 500">
<title id="scene-armory-title">兵器库 — Stone chamber displaying weapons, artifacts, scrolls, and treasures</title>
<!-- ============================
1. Background
============================ -->
<rect class="fill-wall-dark" x="0" y="0" width="800" height="500"/>
<!-- ============================
2. Far wall + crown molding + baseboard
============================ -->
<polygon class="fill-wall" points="0,0 800,0 720,50 720,370 80,370 80,50" aria-hidden="true"/>
<polygon class="fill-wall-light" points="80,50 720,50 720,56 80,56" aria-hidden="true"/>
<polygon class="fill-wall-dark" points="80,360 720,360 720,370 80,370" aria-hidden="true"/>
<!-- ============================
3. Left side wall + highlight strip
============================ -->
<polygon class="fill-wall-dark" points="0,0 80,50 80,370 0,500" aria-hidden="true"/>
<polygon class="fill-wall" points="80,50 72,54 72,366 80,370" aria-hidden="true"/>
<!-- ============================
4. Right side wall + highlight strip
============================ -->
<polygon class="fill-wall-dark" points="800,0 720,50 720,370 800,500" aria-hidden="true"/>
<polygon class="fill-wall" points="720,50 728,54 728,366 720,370" aria-hidden="true"/>
<!-- ============================
5. Ground floor + perspective grid
============================ -->
<polygon class="fill-ground" points="80,370 720,370 800,500 0,500" aria-hidden="true"/>
<g class="scene-detail" aria-hidden="true">
<!-- Horizontal lines -->
<polygon class="fill-path" points="80,370 720,370 718,372 82,372"/>
<polygon class="fill-path" points="56,400 744,400 743,402 57,402"/>
<polygon class="fill-path" points="30,430 770,430 769,432 31,432"/>
<polygon class="fill-path" points="0,460 800,460 800,462 0,462"/>
<!-- Converging vertical lines -->
<polygon class="fill-path" points="200,370 198,370 140,500 142,500"/>
<polygon class="fill-path" points="310,370 308,370 260,500 262,500"/>
<polygon class="fill-path" points="400,370 398,370 400,500 398,500"/>
<polygon class="fill-path" points="490,370 492,370 540,500 538,500"/>
<polygon class="fill-path" points="600,370 602,370 660,500 658,500"/>
</g>
<!-- ============================
6. Decorative torches
============================ -->
<g class="scene-detail" aria-hidden="true">
<!-- Left wall torch -->
<rect class="fill-wall-light" x="82" y="250" width="6" height="18"/>
<rect class="fill-accent-shape" x="80" y="242" width="10" height="10"/>
<rect class="fill-window-glow" x="75" y="234" width="20" height="12"/>
<!-- Right wall torch -->
<rect class="fill-wall-light" x="712" y="250" width="6" height="18"/>
<rect class="fill-accent-shape" x="710" y="242" width="10" height="10"/>
<rect class="fill-window-glow" x="705" y="234" width="20" height="12"/>
</g>
<!-- ============================
7. Hotspot: 铁甲架 (Armor rack → Hardware)
Left wall area
============================ -->
<a class="hotspot" href="#panel-hardware" aria-label="铁甲 — Hardware">
<title>铁甲 — Hardware</title>
<rect class="hotspot-shape" x="100" y="78" width="130" height="220"/>
<!-- Stand pole -->
<rect class="fill-wall-light" x="160" y="90" width="10" height="200"/>
<!-- Cross bar (shoulders) -->
<rect class="fill-wall-light" x="118" y="98" width="94" height="8"/>
<!-- Helmet on top -->
<rect class="fill-door" x="145" y="80" width="40" height="22" rx="4"/>
<!-- Shoulder pads -->
<rect class="fill-door" x="112" y="106" width="36" height="16"/>
<rect class="fill-door" x="182" y="106" width="36" height="16"/>
<!-- Breastplate -->
<rect class="fill-door" x="130" y="122" width="70" height="60"/>
<!-- Belt -->
<rect class="fill-wall" x="130" y="176" width="70" height="6"/>
<!-- Crossed swords behind stand -->
<polygon class="fill-wall" points="110,286 114,286 165,100 161,100"/>
<polygon class="fill-wall" points="220,286 216,286 165,100 169,100"/>
<text class="hotspot-label" x="165" y="72" text-anchor="middle">铁甲</text>
</a>
<!-- ============================
8. Hotspot: 法器柜 (Magic cabinet → Software)
Far wall left half
============================ -->
<a class="hotspot" href="#panel-software" aria-label="法器 — Software">
<title>法器 — Software</title>
<rect class="hotspot-shape" x="260" y="72" width="120" height="180"/>
<!-- Cabinet body -->
<rect class="fill-wall-dark" x="268" y="80" width="104" height="164"/>
<!-- Top trim -->
<rect class="fill-wall-light" x="264" y="76" width="112" height="6"/>
<!-- Cabinet doors -->
<rect class="fill-door" x="272" y="86" width="46" height="76"/>
<rect class="fill-door" x="322" y="86" width="46" height="76"/>
<!-- Door handles -->
<rect class="fill-accent-dim" x="310" y="118" width="4" height="12"/>
<rect class="fill-accent-dim" x="326" y="118" width="4" height="12"/>
<!-- Bottom shelf -->
<rect class="fill-wall" x="272" y="168" width="96" height="4"/>
<!-- Objects on shelf -->
<rect class="fill-door" x="282" y="176" width="16" height="24"/>
<rect class="fill-door" x="308" y="180" width="12" height="20"/>
<rect class="fill-door" x="332" y="174" width="20" height="26"/>
<!-- Glow from inside doors -->
<rect class="fill-window-glow" x="278" y="92" width="34" height="64"/>
<rect class="fill-window-glow" x="328" y="92" width="34" height="64"/>
<text class="hotspot-label" x="320" y="66" text-anchor="middle">法器</text>
</a>
<!-- ============================
9. Hotspot: 信鸽笼 (Pigeon cage → Communications)
Far wall right half
============================ -->
<a class="hotspot" href="#panel-comms" aria-label="信物 — Communications">
<title>信物 — Communications</title>
<rect class="hotspot-shape" x="480" y="72" width="120" height="165"/>
<!-- Hanging chain -->
<rect class="fill-wall" x="538" y="56" width="4" height="24"/>
<!-- Cage top bar -->
<rect class="fill-wall-light" x="492" y="80" width="96" height="6"/>
<!-- Vertical bars -->
<rect class="fill-wall-light" x="500" y="86" width="4" height="136"/>
<rect class="fill-wall-light" x="520" y="86" width="4" height="136"/>
<rect class="fill-wall-light" x="540" y="86" width="4" height="136"/>
<rect class="fill-wall-light" x="560" y="86" width="4" height="136"/>
<rect class="fill-wall-light" x="580" y="86" width="4" height="136"/>
<!-- Cage bottom bar -->
<rect class="fill-wall-light" x="492" y="222" width="96" height="6"/>
<!-- Bird silhouettes -->
<rect class="fill-door" x="508" y="198" width="10" height="8"/>
<rect class="fill-door" x="506" y="194" width="6" height="6"/>
<rect class="fill-door" x="548" y="202" width="10" height="8"/>
<rect class="fill-door" x="546" y="198" width="6" height="6"/>
<text class="hotspot-label" x="540" y="70" text-anchor="middle">信物</text>
</a>
<!-- ============================
10. Hotspot: 契书台 (Scroll desk → Services)
Right wall area
============================ -->
<a class="hotspot" href="#panel-services" aria-label="契约 — Services">
<title>契约 — Services</title>
<rect class="hotspot-shape" x="618" y="100" width="100" height="200"/>
<!-- Desk surface -->
<rect class="fill-wall-light" x="622" y="200" width="92" height="8"/>
<!-- Desk body -->
<rect class="fill-wall" x="626" y="208" width="84" height="80"/>
<!-- Desk legs -->
<rect class="fill-wall-dark" x="630" y="288" width="10" height="10"/>
<rect class="fill-wall-dark" x="696" y="288" width="10" height="10"/>
<!-- Scrolls on desk -->
<rect class="fill-door" x="634" y="130" width="22" height="66" rx="4"/>
<rect class="fill-door" x="664" y="118" width="22" height="78" rx="4"/>
<rect class="fill-door" x="694" y="140" width="18" height="56" rx="4"/>
<!-- Wax seal on scroll -->
<circle class="fill-accent-dim" cx="675" cy="164" r="5"/>
<text class="hotspot-label" x="668" y="96" text-anchor="middle">契约</text>
</a>
<!-- ============================
11. Hotspot: 佩饰匣 (Accessory box → Other)
Ground left
============================ -->
<a class="hotspot" href="#panel-other" aria-label="佩饰 — Other">
<title>佩饰 — Other</title>
<rect class="hotspot-shape" x="280" y="380" width="130" height="80"/>
<!-- Box body -->
<rect class="fill-wall" x="290" y="400" width="110" height="50"/>
<!-- Open lid -->
<polygon class="fill-wall-light" points="290,400 400,400 390,380 300,380"/>
<!-- Items visible inside -->
<rect class="fill-accent-dim" x="305" y="418" width="14" height="14"/>
<rect class="fill-door" x="330" y="416" width="18" height="16"/>
<circle class="fill-accent-dim" cx="370" cy="426" r="8"/>
<text class="hotspot-label" x="345" y="374" text-anchor="middle">佩饰</text>
</a>
<!-- ============================
12. Return door → interior.html
============================ -->
<a class="hotspot" href="interior.html" aria-label="返回城堡 — Return to castle interior">
<title>返回城堡 — Return to castle interior</title>
<rect class="hotspot-shape" x="350" y="450" width="100" height="45" rx="4"/>
<text class="hotspot-label" x="400" y="478" text-anchor="middle">返回城堡</text>
</a>
</svg>
</div>
<nav id="scene-nav-armory" class="scene-nav" aria-label="兵器库导航">
<ul class="scene-nav__list">
<li><a class="scene-nav__link" href="#panel-hardware">铁甲 — 硬件</a></li>
<li><a class="scene-nav__link" href="#panel-software">法器 — 软件</a></li>
<li><a class="scene-nav__link" href="#panel-comms">信物 — 通信</a></li>
<li><a class="scene-nav__link" href="#panel-services">契约 — 服务</a></li>
<li><a class="scene-nav__link" href="#panel-other">佩饰 — 其他</a></li>
<li><a class="scene-nav__link" href="interior.html">返回城堡</a></li>
</ul>
</nav>
<!-- ============================================================
:target overlay panels — Close-up SVG scenes
============================================================ -->
<!-- ======================== 1. 铁甲 Hardware ======================== -->
<div id="panel-hardware" class="capsule-panel" tabindex="-1">
<svg class="closeup" role="img" aria-labelledby="closeup-hardware-title" viewBox="0 0 600 500">
<title id="closeup-hardware-title">铁甲架特写 — Hardware closeup</title>
<!-- Background -->
<rect class="fill-wall-dark" width="600" height="500"/>
<rect class="fill-wall" x="30" y="30" width="540" height="440" rx="4"/>
<!-- Weapon rack shelf -->
<rect class="fill-wall-light" x="30" y="220" width="540" height="6" aria-hidden="true"/>
<rect class="fill-wall-dark" x="30" y="30" width="540" height="6" aria-hidden="true"/>
<!-- Title -->
<text class="closeup-title" x="300" y="26" text-anchor="middle">铁甲</text>
<!-- Row 1: 4 items -->
<!-- hw-desktop: 主力台式 (Longsword) -->
<g id="hw-desktop" class="closeup-item">
<a href="#hw-desktop" aria-label="台式电脑（主力）— Ryzen 5 5600 · GTX 750Ti · 32GB DDR4">
<title>台式电脑（主力）— Ryzen 5 5600 · GTX 750Ti · 32GB DDR4</title>
<rect class="closeup-item__shape" x="40" y="46" width="120" height="164" rx="4"/>
<!-- Longsword -->
<rect class="fill-door" x="96" y="56" width="8" height="100"/>
<rect class="fill-door" x="82" y="156" width="36" height="8"/>
<rect class="fill-door" x="92" y="164" width="16" height="24"/>
<text class="closeup-item__name" x="100" y="224" text-anchor="middle">主力台式</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="40" y="232" width="260" height="56" rx="4"/>
<text class="closeup-desc__label" x="52" y="254">台式电脑（主力）</text>
<text class="closeup-desc__text" x="52" y="274">Ryzen 5 5600 · GTX 750Ti · 32GB</text>
</g>
</g>
<!-- hw-empty: 空虚台式 (Broken sword) -->
<g id="hw-empty" class="closeup-item">
<a href="#hw-empty" aria-label="台式电脑（空虚）— i3-2100 · P8H61-M LX3 PLUS">
<title>台式电脑（空虚）— i3-2100 · P8H61-M LX3 PLUS</title>
<rect class="closeup-item__shape" x="175" y="46" width="120" height="164" rx="4"/>
<!-- Broken sword: blade snapped at angle -->
<rect class="fill-door" x="231" y="56" width="8" height="54"/>
<polygon class="fill-door" points="227,110 243,110 239,122 231,118"/>
<rect class="fill-door" x="217" y="130" width="36" height="8"/>
<rect class="fill-door" x="227" y="138" width="16" height="24"/>
<text class="closeup-item__name" x="235" y="224" text-anchor="middle">空虚台式</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="175" y="232" width="260" height="56" rx="4"/>
<text class="closeup-desc__label" x="187" y="254">台式电脑（空虚）</text>
<text class="closeup-desc__text" x="187" y="274">i3-2100 · P8H61-M LX3 PLUS</text>
</g>
</g>
<!-- hw-lost: 迷失台式 (Empty scabbard) -->
<g id="hw-lost" class="closeup-item">
<a href="#hw-lost" aria-label="台式电脑（迷失）— 配置已失传……">
<title>台式电脑（迷失）— 配置已失传……</title>
<rect class="closeup-item__shape" x="310" y="46" width="120" height="164" rx="4"/>
<!-- Empty scabbard: outline only, hollow center -->
<rect class="fill-door" x="358" y="56" width="24" height="106" rx="4"/>
<rect class="fill-wall" x="362" y="62" width="16" height="94" rx="2"/>
<rect class="fill-door" x="352" y="162" width="36" height="8"/>
<text class="closeup-item__name" x="370" y="224" text-anchor="middle">迷失台式</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="310" y="232" width="220" height="56" rx="4"/>
<text class="closeup-desc__label" x="322" y="254">台式电脑（迷失）</text>
<text class="closeup-desc__text" x="322" y="274">配置已失传……</text>
</g>
</g>
<!-- hw-laptop: 笔记本 (Shield) -->
<g id="hw-laptop" class="closeup-item">
<a href="#hw-laptop" aria-label="笔记本 — Lenovo IdeaPad Flex 5 15">
<title>笔记本 — Lenovo IdeaPad Flex 5 15</title>
<rect class="closeup-item__shape" x="445" y="46" width="120" height="164" rx="4"/>
<!-- Shield -->
<polygon class="fill-door" points="505,60 540,60 540,148 522,170 505,148"/>
<rect class="fill-wall" x="510" y="100" width="24" height="4"/>
<rect class="fill-wall" x="520" y="78" width="4" height="48"/>
<text class="closeup-item__name" x="505" y="224" text-anchor="middle">笔记本</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="370" y="232" width="226" height="56" rx="4"/>
<text class="closeup-desc__label" x="382" y="254">笔记本</text>
<text class="closeup-desc__text" x="382" y="274">Lenovo IdeaPad Flex 5 15</text>
</g>
</g>
<!-- Row 2: 3 items centered -->
<!-- hw-phone: 手机 (Dagger) -->
<g id="hw-phone" class="closeup-item">
<a href="#hw-phone" aria-label="手机 — Motorola Razr+ 2024">
<title>手机 — Motorola Razr+ 2024</title>
<rect class="closeup-item__shape" x="80" y="296" width="120" height="140" rx="4"/>
<!-- Dagger -->
<rect class="fill-door" x="136" y="306" width="8" height="64"/>
<polygon class="fill-door" points="136,370 144,370 140,388"/>
<rect class="fill-door" x="122" y="298" width="36" height="8"/>
<rect class="fill-door" x="132" y="290" width="16" height="12"/>
<text class="closeup-item__name" x="140" y="450" text-anchor="middle">手机</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="80" y="450" width="200" height="40" rx="4"/>
<text class="closeup-desc__label" x="92" y="468">手机</text>
<text class="closeup-desc__text" x="92" y="484">Motorola Razr+ 2024</text>
</g>
</g>
<!-- hw-tablet: 平板 (Armor plate) -->
<g id="hw-tablet" class="closeup-item">
<a href="#hw-tablet" aria-label="平板 — iPad Pro 11 寸">
<title>平板 — iPad Pro 11 寸</title>
<rect class="closeup-item__shape" x="240" y="296" width="120" height="140" rx="4"/>
<!-- Armor plate with rivet lines -->
<rect class="fill-door" x="268" y="312" width="64" height="84" rx="4"/>
<rect class="fill-wall" x="278" y="326" width="44" height="4"/>
<rect class="fill-wall" x="278" y="342" width="44" height="4"/>
<rect class="fill-wall" x="278" y="358" width="44" height="4"/>
<rect class="fill-wall" x="278" y="374" width="44" height="4"/>
<text class="closeup-item__name" x="300" y="450" text-anchor="middle">平板</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="240" y="450" width="170" height="40" rx="4"/>
<text class="closeup-desc__label" x="252" y="468">平板</text>
<text class="closeup-desc__text" x="252" y="484">iPad Pro 11 寸</text>
</g>
</g>
<!-- hw-headphones: 耳机 (Helmet) -->
<g id="hw-headphones" class="closeup-item">
<a href="#hw-headphones" aria-label="耳机 — Soundcore Liberty 4 NC">
<title>耳机 — Soundcore Liberty 4 NC</title>
<rect class="closeup-item__shape" x="400" y="296" width="120" height="140" rx="4"/>
<!-- Helmet -->
<rect class="fill-door" x="426" y="316" width="68" height="60" rx="8"/>
<rect class="fill-door" x="420" y="358" width="80" height="18"/>
<rect class="fill-wall" x="436" y="312" width="48" height="6"/>
<rect class="fill-wall" x="436" y="348" width="48" height="6"/>
<text class="closeup-item__name" x="460" y="450" text-anchor="middle">耳机</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="370" y="450" width="220" height="40" rx="4"/>
<text class="closeup-desc__label" x="382" y="468">耳机</text>
<text class="closeup-desc__text" x="382" y="484">Soundcore Liberty 4 NC</text>
</g>
</g>
</svg>
<a href="#" class="capsule-panel__close">关闭</a>
</div>
<!-- ======================== 2. 法器 Software ======================== -->
<div id="panel-software" class="capsule-panel" tabindex="-1">
<svg class="closeup" role="img" aria-labelledby="closeup-software-title" viewBox="0 0 600 500">
<title id="closeup-software-title">法器柜特写 — Software closeup</title>
<!-- Background -->
<rect class="fill-wall-dark" width="600" height="500"/>
<rect class="fill-wall" x="30" y="30" width="540" height="440" rx="4"/>
<!-- Shelf divider -->
<rect class="fill-wall-light" x="30" y="220" width="540" height="6" aria-hidden="true"/>
<!-- Title -->
<text class="closeup-title" x="300" y="26" text-anchor="middle">法器</text>
<!-- Row 1: 4 items -->
<!-- sw-os: 操作系统 (Magic book) -->
<g id="sw-os" class="closeup-item">
<a href="#sw-os" aria-label="操作系统 — EndeavourOS + i3wm / Windows 10">
<title>操作系统 — EndeavourOS + i3wm / Windows 10</title>
<rect class="closeup-item__shape" x="40" y="46" width="120" height="164" rx="4"/>
<!-- Magic book -->
<rect class="fill-door" x="68" y="68" width="64" height="86" rx="2"/>
<rect class="fill-wall" x="64" y="66" width="6" height="90"/>
<rect class="fill-wall" x="78" y="80" width="44" height="3"/>
<rect class="fill-wall" x="78" y="92" width="44" height="3"/>
<rect class="fill-wall" x="78" y="104" width="44" height="3"/>
<rect class="fill-accent-dim" x="88" y="118" width="24" height="24"/>
<text class="closeup-item__name" x="100" y="224" text-anchor="middle">操作系统</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="40" y="232" width="280" height="56" rx="4"/>
<text class="closeup-desc__label" x="52" y="254">操作系统</text>
<text class="closeup-desc__text" x="52" y="274">EndeavourOS + i3wm / Win 10</text>
</g>
</g>
<!-- sw-editor: 编辑器 (Wand) -->
<g id="sw-editor" class="closeup-item">
<a href="#sw-editor" aria-label="编辑器 — PyCharm · WebStorm · VS Code">
<title>编辑器 — PyCharm · WebStorm · VS Code</title>
<rect class="closeup-item__shape" x="175" y="46" width="120" height="164" rx="4"/>
<!-- Wand -->
<rect class="fill-door" x="231" y="68" width="8" height="96"/>
<polygon class="fill-accent-dim" points="231,68 239,68 235,54"/>
<rect class="fill-wall" x="225" y="134" width="20" height="6"/>
<rect class="fill-door" x="229" y="140" width="12" height="18"/>
<text class="closeup-item__name" x="235" y="224" text-anchor="middle">编辑器</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="175" y="232" width="280" height="56" rx="4"/>
<text class="closeup-desc__label" x="187" y="254">编辑器</text>
<text class="closeup-desc__text" x="187" y="274">PyCharm · WebStorm · VS Code</text>
</g>
</g>
<!-- sw-terminal: 终端 (Crystal ball) -->
<g id="sw-terminal" class="closeup-item">
<a href="#sw-terminal" aria-label="终端 — zsh / Windows Terminal">
<title>终端 — zsh / Windows Terminal</title>
<rect class="closeup-item__shape" x="310" y="46" width="120" height="164" rx="4"/>
<!-- Crystal ball on pedestal -->
<circle class="fill-door" cx="370" cy="110" r="34"/>
<circle class="fill-wall" cx="370" cy="110" r="26"/>
<circle class="fill-door" cx="370" cy="110" r="18"/>
<rect class="fill-wall-light" x="350" y="144" width="40" height="8"/>
<rect class="fill-wall" x="354" y="152" width="32" height="12"/>
<text class="closeup-item__name" x="370" y="224" text-anchor="middle">终端</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="310" y="232" width="240" height="56" rx="4"/>
<text class="closeup-desc__label" x="322" y="254">终端</text>
<text class="closeup-desc__text" x="322" y="274">zsh / Windows Terminal</text>
</g>
</g>
<!-- sw-browser: 浏览器 (Telescope) -->
<g id="sw-browser" class="closeup-item">
<a href="#sw-browser" aria-label="浏览器 — Floorp / Firefox">
<title>浏览器 — Floorp / Firefox</title>
<rect class="closeup-item__shape" x="445" y="46" width="120" height="164" rx="4"/>
<!-- Telescope -->
<polygon class="fill-door" points="479,162 484,68 500,64 505,158"/>
<circle class="fill-wall" cx="492" cy="64" r="14"/>
<circle class="fill-door" cx="492" cy="64" r="10"/>
<rect class="fill-wall" x="474" y="158" width="36" height="8"/>
<text class="closeup-item__name" x="505" y="224" text-anchor="middle">浏览器</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="400" y="232" width="196" height="56" rx="4"/>
<text class="closeup-desc__label" x="412" y="254">浏览器</text>
<text class="closeup-desc__text" x="412" y="274">Floorp / Firefox</text>
</g>
</g>
<!-- Row 2: 3 items centered -->
<!-- sw-notes: 笔记 (Quill) -->
<g id="sw-notes" class="closeup-item">
<a href="#sw-notes" aria-label="笔记 — Emacs · Typora（渐弃）">
<title>笔记 — Emacs · Typora（渐弃）</title>
<rect class="closeup-item__shape" x="80" y="296" width="120" height="140" rx="4"/>
<!-- Quill pen -->
<polygon class="fill-door" points="135,300 145,300 142,390 138,390"/>
<polygon class="fill-door" points="140,300 118,320 122,326 140,310"/>
<polygon class="fill-door" points="140,300 162,320 158,326 140,310"/>
<polygon class="fill-accent-dim" points="138,390 142,390 140,408"/>
<text class="closeup-item__name" x="140" y="450" text-anchor="middle">笔记</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="80" y="450" width="220" height="40" rx="4"/>
<text class="closeup-desc__label" x="92" y="468">笔记</text>
<text class="closeup-desc__text" x="92" y="484">Emacs · Typora（渐弃）</text>
</g>
</g>
<!-- sw-music: 音乐 (Harp) -->
<g id="sw-music" class="closeup-item">
<a href="#sw-music" aria-label="音乐 — Navidrome + Tempo / ytmdesktop">
<title>音乐 — Navidrome + Tempo / ytmdesktop</title>
<rect class="closeup-item__shape" x="240" y="296" width="120" height="140" rx="4"/>
<!-- Harp frame -->
<polygon class="fill-door" points="276,310 286,310 294,400 284,400"/>
<polygon class="fill-door" points="276,310 330,320 330,326 276,316"/>
<rect class="fill-door" x="284" y="396" width="46" height="8"/>
<!-- Strings -->
<rect class="fill-wall" x="294" y="326" width="2" height="70"/>
<rect class="fill-wall" x="304" y="328" width="2" height="68"/>
<rect class="fill-wall" x="314" y="330" width="2" height="66"/>
<text class="closeup-item__name" x="300" y="450" text-anchor="middle">音乐</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="210" y="450" width="280" height="40" rx="4"/>
<text class="closeup-desc__label" x="222" y="468">音乐</text>
<text class="closeup-desc__text" x="222" y="484">Navidrome + Tempo / ytmdesktop</text>
</g>
</g>
<!-- sw-screenshot: 截图 (Catching net) -->
<g id="sw-screenshot" class="closeup-item">
<a href="#sw-screenshot" aria-label="截图 — FastStone Capture / Flameshot">
<title>截图 — FastStone Capture / Flameshot</title>
<rect class="closeup-item__shape" x="400" y="296" width="120" height="140" rx="4"/>
<!-- Net: handle + ring + mesh -->
<rect class="fill-door" x="456" y="370" width="8" height="50"/>
<circle class="fill-door" cx="460" cy="344" r="32"/>
<circle class="fill-wall" cx="460" cy="344" r="24"/>
<!-- Mesh lines -->
<rect class="fill-wall" x="446" y="324" width="28" height="2"/>
<rect class="fill-wall" x="446" y="336" width="28" height="2"/>
<rect class="fill-wall" x="446" y="348" width="28" height="2"/>
<rect class="fill-wall" x="446" y="360" width="28" height="2"/>
<rect class="fill-wall" x="452" y="322" width="2" height="42"/>
<rect class="fill-wall" x="466" y="322" width="2" height="42"/>
<text class="closeup-item__name" x="460" y="450" text-anchor="middle">截图</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="360" y="450" width="240" height="40" rx="4"/>
<text class="closeup-desc__label" x="372" y="468">截图</text>
<text class="closeup-desc__text" x="372" y="484">FastStone Capture / Flameshot</text>
</g>
</g>
</svg>
<a href="#" class="capsule-panel__close">关闭</a>
</div>
<!-- ======================== 3. 信物 Communications ======================== -->
<div id="panel-comms" class="capsule-panel" tabindex="-1">
<svg class="closeup" role="img" aria-labelledby="closeup-comms-title" viewBox="0 0 600 400">
<title id="closeup-comms-title">信鸽笼特写 — Communications closeup</title>
<!-- Background -->
<rect class="fill-wall-dark" width="600" height="400"/>
<rect class="fill-wall" x="30" y="30" width="540" height="340" rx="4"/>
<!-- Cage bar divider -->
<rect class="fill-wall-light" x="30" y="196" width="540" height="4" aria-hidden="true"/>
<!-- Title -->
<text class="closeup-title" x="300" y="26" text-anchor="middle">信物</text>
<!-- Row 1: 2 items -->
<!-- comm-close: 近交 (Pigeon) -->
<g id="comm-close" class="closeup-item">
<a href="#comm-close" aria-label="近交 — 微信 · QQ · 贴吧 · 小红书">
<title>近交 — 微信 · QQ · 贴吧 · 小红书</title>
<rect class="closeup-item__shape" x="40" y="44" width="250" height="142" rx="4"/>
<!-- Pigeon body -->
<rect class="fill-door" x="130" y="80" width="44" height="32" rx="6"/>
<!-- Head -->
<rect class="fill-door" x="122" y="70" width="22" height="18" rx="4"/>
<!-- Wing -->
<polygon class="fill-door" points="174,80 204,68 200,82"/>
<!-- Legs -->
<rect class="fill-door" x="142" y="112" width="6" height="14"/>
<rect class="fill-door" x="158" y="112" width="6" height="14"/>
<text class="closeup-item__name" x="165" y="148" text-anchor="middle">近交</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="40" y="154" width="250" height="50" rx="4"/>
<text class="closeup-desc__label" x="52" y="176">近交</text>
<text class="closeup-desc__text" x="52" y="194">微信 · QQ · 贴吧 · 小红书</text>
</g>
</g>
<!-- comm-far: 远交 (Eagle) -->
<g id="comm-far" class="closeup-item">
<a href="#comm-far" aria-label="远交 — Instagram · WhatsApp · LinkedIn · GitHub">
<title>远交 — Instagram · WhatsApp · LinkedIn · GitHub</title>
<rect class="closeup-item__shape" x="310" y="44" width="250" height="142" rx="4"/>
<!-- Eagle body -->
<rect class="fill-door" x="400" y="82" width="48" height="28" rx="4"/>
<!-- Head with beak -->
<polygon class="fill-door" points="396,78 412,72 412,84"/>
<!-- Wings spread -->
<polygon class="fill-door" points="400,82 366,64 380,84"/>
<polygon class="fill-door" points="448,82 482,64 468,84"/>
<!-- Legs -->
<rect class="fill-door" x="416" y="110" width="6" height="16"/>
<rect class="fill-door" x="432" y="110" width="6" height="16"/>
<text class="closeup-item__name" x="435" y="148" text-anchor="middle">远交</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="310" y="154" width="280" height="50" rx="4"/>
<text class="closeup-desc__label" x="322" y="176">远交</text>
<text class="closeup-desc__text" x="322" y="194">IG · WhatsApp · LinkedIn · GitHub</text>
</g>
</g>
<!-- Row 2: 2 items -->
<!-- comm-private: 密通 (Sealed letter) -->
<g id="comm-private" class="closeup-item">
<a href="#comm-private" aria-label="密通 — Signal · Matrix · 短信 · 邮件">
<title>密通 — Signal · Matrix · 短信 · 邮件</title>
<rect class="closeup-item__shape" x="40" y="208" width="250" height="132" rx="4"/>
<!-- Sealed envelope -->
<rect class="fill-door" x="120" y="226" width="76" height="52" rx="2"/>
<polygon class="fill-wall" points="120,226 158,258 196,226"/>
<!-- Wax seal -->
<circle class="fill-accent-dim" cx="158" cy="260" r="8"/>
<text class="closeup-item__name" x="165" y="304" text-anchor="middle">密通</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="40" y="312" width="260" height="50" rx="4"/>
<text class="closeup-desc__label" x="52" y="334">密通</text>
<text class="closeup-desc__text" x="52" y="352">Signal · Matrix · 短信 · 邮件</text>
</g>
</g>
<!-- comm-public: 广播 (Horn) -->
<g id="comm-public" class="closeup-item">
<a href="#comm-public" aria-label="广播 — Mastodon · Pixelfed · 推特 · Facebook">
<title>广播 — Mastodon · Pixelfed · 推特 · Facebook</title>
<rect class="closeup-item__shape" x="310" y="208" width="250" height="132" rx="4"/>
<!-- Horn / trumpet -->
<polygon class="fill-door" points="388,268 462,238 462,280 388,276"/>
<rect class="fill-door" x="462" y="230" width="14" height="58" rx="4"/>
<rect class="fill-wall" x="384" y="266" width="8" height="14"/>
<text class="closeup-item__name" x="435" y="304" text-anchor="middle">广播</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="310" y="312" width="280" height="50" rx="4"/>
<text class="closeup-desc__label" x="322" y="334">广播</text>
<text class="closeup-desc__text" x="322" y="352">Mastodon · Pixelfed · 推特 · FB</text>
</g>
</g>
</svg>
<a href="#" class="capsule-panel__close">关闭</a>
</div>
<!-- ======================== 4. 契约 Services ======================== -->
<div id="panel-services" class="capsule-panel" tabindex="-1">
<svg class="closeup" role="img" aria-labelledby="closeup-services-title" viewBox="0 0 600 500">
<title id="closeup-services-title">契书台特写 — Services closeup</title>
<!-- Background -->
<rect class="fill-wall-dark" width="600" height="500"/>
<rect class="fill-wall" x="30" y="30" width="540" height="440" rx="4"/>
<!-- Shelf divider -->
<rect class="fill-wall-light" x="30" y="242" width="540" height="6" aria-hidden="true"/>
<!-- Title -->
<text class="closeup-title" x="300" y="26" text-anchor="middle">契约</text>
<!-- Row 1: 4 items -->
<!-- svc-shop: 购物 (Gold pouch) -->
<g id="svc-shop" class="closeup-item">
<a href="#svc-shop" aria-label="购物 — Amazon Prime">
<title>购物 — Amazon Prime</title>
<rect class="closeup-item__shape" x="40" y="46" width="120" height="186" rx="4"/>
<!-- Gold coin pouch -->
<polygon class="fill-door" points="78,100 122,100 132,180 68,180"/>
<rect class="fill-wall" x="82" y="92" width="36" height="12"/>
<circle class="fill-accent-dim" cx="100" cy="146" r="8"/>
<text class="closeup-item__name" x="100" y="246" text-anchor="middle">购物</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="40" y="254" width="180" height="50" rx="4"/>
<text class="closeup-desc__label" x="52" y="276">购物</text>
<text class="closeup-desc__text" x="52" y="294">Amazon Prime</text>
</g>
</g>
<!-- svc-ai: AI (Magic contract) -->
<g id="svc-ai" class="closeup-item">
<a href="#svc-ai" aria-label="AI — Claude · Claude Code · Gemini">
<title>AI — Claude · Claude Code · Gemini</title>
<rect class="closeup-item__shape" x="175" y="46" width="120" height="186" rx="4"/>
<!-- Magic contract scroll -->
<rect class="fill-door" x="206" y="76" width="58" height="90" rx="2"/>
<rect class="fill-wall" x="206" y="76" width="58" height="8" rx="2"/>
<rect class="fill-wall" x="206" y="158" width="58" height="8" rx="2"/>
<!-- Text lines -->
<rect class="fill-wall" x="216" y="94" width="38" height="2"/>
<rect class="fill-wall" x="216" y="106" width="38" height="2"/>
<rect class="fill-wall" x="216" y="118" width="38" height="2"/>
<!-- Magic seal -->
<rect class="fill-accent-dim" x="222" y="130" width="26" height="18"/>
<text class="closeup-item__name" x="235" y="246" text-anchor="middle">AI</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="175" y="254" width="260" height="50" rx="4"/>
<text class="closeup-desc__label" x="187" y="276">AI</text>
<text class="closeup-desc__text" x="187" y="294">Claude · Claude Code · Gemini</text>
</g>
</g>
<!-- svc-dev: 开发 (Blacksmith contract) -->
<g id="svc-dev" class="closeup-item">
<a href="#svc-dev" aria-label="开发 — GitHub Pro · GitKraken">
<title>开发 — GitHub Pro · GitKraken</title>
<rect class="closeup-item__shape" x="310" y="46" width="120" height="186" rx="4"/>
<!-- Blacksmith contract (ruled parchment) -->
<rect class="fill-door" x="338" y="76" width="64" height="90" rx="2"/>
<rect class="fill-wall" x="338" y="76" width="64" height="6"/>
<rect class="fill-wall" x="348" y="92" width="44" height="2"/>
<rect class="fill-wall" x="348" y="104" width="44" height="2"/>
<rect class="fill-wall" x="348" y="116" width="44" height="2"/>
<rect class="fill-wall" x="348" y="128" width="44" height="2"/>
<rect class="fill-wall" x="348" y="140" width="44" height="2"/>
<rect class="fill-wall" x="348" y="152" width="44" height="2"/>
<text class="closeup-item__name" x="370" y="246" text-anchor="middle">开发</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="310" y="254" width="240" height="50" rx="4"/>
<text class="closeup-desc__label" x="322" y="276">开发</text>
<text class="closeup-desc__text" x="322" y="294">GitHub Pro · GitKraken</text>
</g>
</g>
<!-- svc-storage: 存储 (Treasure chest) -->
<g id="svc-storage" class="closeup-item">
<a href="#svc-storage" aria-label="存储 — Google Drive · OneDrive">
<title>存储 — Google Drive · OneDrive</title>
<rect class="closeup-item__shape" x="445" y="46" width="120" height="186" rx="4"/>
<!-- Treasure chest -->
<rect class="fill-door" x="470" y="130" width="70" height="44"/>
<polygon class="fill-door" points="470,130 540,130 530,104 480,104"/>
<rect class="fill-wall" x="470" y="126" width="70" height="6"/>
<rect class="fill-wall" x="498" y="138" width="14" height="14" rx="2"/>
<text class="closeup-item__name" x="505" y="246" text-anchor="middle">存储</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="400" y="254" width="196" height="50" rx="4"/>
<text class="closeup-desc__label" x="412" y="276">存储</text>
<text class="closeup-desc__text" x="412" y="294">Google Drive · OneDrive</text>
</g>
</g>
<!-- Row 2: 4 items -->
<!-- svc-infra: 域名·VPS (Land deed) -->
<g id="svc-infra" class="closeup-item">
<a href="#svc-infra" aria-label="域名·VPS — IONOS · Vultr">
<title>域名·VPS — IONOS · Vultr</title>
<rect class="closeup-item__shape" x="40" y="308" width="120" height="160" rx="4"/>
<!-- Land deed scroll with seal -->
<rect class="fill-door" x="66" y="326" width="68" height="96" rx="2"/>
<rect class="fill-wall" x="66" y="322" width="68" height="8" rx="2"/>
<rect class="fill-wall" x="66" y="418" width="68" height="8" rx="2"/>
<rect class="fill-wall" x="78" y="342" width="44" height="2"/>
<rect class="fill-wall" x="78" y="356" width="44" height="2"/>
<rect class="fill-wall" x="78" y="370" width="44" height="2"/>
<circle class="fill-accent-dim" cx="100" cy="398" r="10"/>
<text class="closeup-item__name" x="100" y="482" text-anchor="middle">域名·VPS</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="40" y="436" width="200" height="30" rx="4"/>
<text class="closeup-desc__text" x="52" y="456">IONOS · Vultr</text>
</g>
</g>
<!-- svc-movie: 电影 (Theater ticket) -->
<g id="svc-movie" class="closeup-item">
<a href="#svc-movie" aria-label="电影 — AMC Stubs Premiere">
<title>电影 — AMC Stubs Premiere</title>
<rect class="closeup-item__shape" x="175" y="308" width="120" height="160" rx="4"/>
<!-- Theater ticket -->
<rect class="fill-door" x="198" y="340" width="74" height="50" rx="2"/>
<rect class="fill-wall" x="198" y="340" width="74" height="6"/>
<rect class="fill-wall" x="248" y="346" width="2" height="44"/>
<rect class="fill-wall" x="208" y="358" width="34" height="2"/>
<rect class="fill-wall" x="208" y="370" width="24" height="2"/>
<text class="closeup-item__name" x="235" y="482" text-anchor="middle">电影</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="175" y="436" width="220" height="30" rx="4"/>
<text class="closeup-desc__text" x="187" y="456">AMC Stubs Premiere</text>
</g>
</g>
<!-- svc-search: 搜索 (Treasure map) -->
<g id="svc-search" class="closeup-item">
<a href="#svc-search" aria-label="搜索 — Kagi Search">
<title>搜索 — Kagi Search</title>
<rect class="closeup-item__shape" x="310" y="308" width="120" height="160" rx="4"/>
<!-- Treasure map -->
<rect class="fill-door" x="334" y="330" width="62" height="76" rx="2"/>
<rect class="fill-wall" x="344" y="342" width="22" height="2"/>
<rect class="fill-wall" x="344" y="354" width="42" height="2"/>
<rect class="fill-wall" x="344" y="366" width="32" height="2"/>
<rect class="fill-wall" x="344" y="378" width="42" height="2"/>
<!-- X marks the spot -->
<circle class="fill-accent-dim" cx="380" cy="392" r="6"/>
<text class="closeup-item__name" x="370" y="482" text-anchor="middle">搜索</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="310" y="436" width="180" height="30" rx="4"/>
<text class="closeup-desc__text" x="322" y="456">Kagi Search</text>
</g>
</g>
<!-- svc-print: 打印 (Seal stamp) -->
<g id="svc-print" class="closeup-item">
<a href="#svc-print" aria-label="打印 — HP Instant Ink">
<title>打印 — HP Instant Ink</title>
<rect class="closeup-item__shape" x="445" y="308" width="120" height="160" rx="4"/>
<!-- Stamp: handle + block -->
<rect class="fill-door" x="488" y="340" width="34" height="10"/>
<rect class="fill-door" x="496" y="350" width="18" height="28"/>
<rect class="fill-door" x="482" y="378" width="46" height="24" rx="2"/>
<text class="closeup-item__name" x="505" y="482" text-anchor="middle">打印</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="445" y="436" width="150" height="30" rx="4"/>
<text class="closeup-desc__text" x="457" y="456">HP Instant Ink</text>
</g>
</g>
</svg>
<a href="#" class="capsule-panel__close">关闭</a>
</div>
<!-- ======================== 5. 佩饰 Other ======================== -->
<div id="panel-other" class="capsule-panel" tabindex="-1">
<svg class="closeup" role="img" aria-labelledby="closeup-other-title" viewBox="0 0 600 300">
<title id="closeup-other-title">佩饰匣特写 — Other accessories closeup</title>
<!-- Background -->
<rect class="fill-wall-dark" width="600" height="300"/>
<rect class="fill-wall" x="30" y="30" width="540" height="240" rx="4"/>
<!-- Title -->
<text class="closeup-title" x="300" y="26" text-anchor="middle">佩饰</text>
<!-- 3 items horizontal -->
<!-- other-pen: 文具 (Fountain pen) -->
<g id="other-pen" class="closeup-item">
<a href="#other-pen" aria-label="文具 — Pilot 88G 钢笔">
<title>文具 — Pilot 88G 钢笔</title>
<rect class="closeup-item__shape" x="40" y="46" width="160" height="148" rx="4"/>
<!-- Fountain pen -->
<rect class="fill-door" x="114" y="62" width="12" height="84"/>
<polygon class="fill-door" points="114,146 126,146 120,168"/>
<rect class="fill-wall" x="110" y="56" width="20" height="10"/>
<rect class="fill-wall" x="112" y="118" width="16" height="4"/>
<text class="closeup-item__name" x="120" y="208" text-anchor="middle">文具</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="40" y="216" width="180" height="46" rx="4"/>
<text class="closeup-desc__label" x="52" y="236">文具</text>
<text class="closeup-desc__text" x="52" y="254">Pilot 88G 钢笔</text>
</g>
</g>
<!-- other-watch: 手表 (Watch face) -->
<g id="other-watch" class="closeup-item">
<a href="#other-watch" aria-label="手表 — CASIO PIKACHU × BABY-G 5338">
<title>手表 — CASIO PIKACHU × BABY-G 5338</title>
<rect class="closeup-item__shape" x="220" y="46" width="160" height="148" rx="4"/>
<!-- Watch: band + face -->
<rect class="fill-door" x="282" y="52" width="36" height="22" rx="4"/>
<circle class="fill-door" cx="300" cy="118" r="40"/>
<circle class="fill-wall" cx="300" cy="118" r="34"/>
<circle class="fill-door" cx="300" cy="118" r="28"/>
<!-- Hands -->
<rect class="fill-wall" x="298" y="94" width="4" height="24"/>
<rect class="fill-wall" x="298" y="114" width="20" height="4"/>
<!-- Bottom band -->
<rect class="fill-door" x="282" y="156" width="36" height="22" rx="4"/>
<text class="closeup-item__name" x="300" y="208" text-anchor="middle">手表</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="190" y="216" width="280" height="46" rx="4"/>
<text class="closeup-desc__label" x="202" y="236">手表</text>
<text class="closeup-desc__text" x="202" y="254">CASIO PIKACHU × BABY-G 5338</text>
</g>
</g>
<!-- other-glasses: 眼镜 (Glasses) -->
<g id="other-glasses" class="closeup-item">
<a href="#other-glasses" aria-label="眼镜 — Vera Wang V906 BK 53-16-137">
<title>眼镜 — Vera Wang V906 BK 53-16-137</title>
<rect class="closeup-item__shape" x="400" y="46" width="160" height="148" rx="4"/>
<!-- Glasses: two lens frames + bridge + temples -->
<rect class="fill-door" x="424" y="100" width="48" height="36" rx="10"/>
<rect class="fill-door" x="488" y="100" width="48" height="36" rx="10"/>
<!-- Bridge -->
<rect class="fill-wall" x="472" y="112" width="16" height="6"/>
<!-- Temples -->
<rect class="fill-door" x="412" y="110" width="14" height="4"/>
<rect class="fill-door" x="536" y="110" width="14" height="4"/>
<text class="closeup-item__name" x="480" y="208" text-anchor="middle">眼镜</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="380" y="216" width="210" height="46" rx="4"/>
<text class="closeup-desc__label" x="392" y="236">眼镜</text>
<text class="closeup-desc__text" x="392" y="254">Vera Wang V906 BK</text>
</g>
</g>
</svg>
<a href="#" class="capsule-panel__close">关闭</a>
</div>
</main>
</body>
</html>