<!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="工坊 — Colophon, how this realm was built">
<meta name="theme-color" content="#1a1a2e">
<link rel="stylesheet" href="realm.css">
</head>
<body>
<a class="skip-link" href="#scene-nav-workshop">跳过场景</a>
<main class="realm-folder">
<h1 class="visually-hidden">工坊</h1>
<div class="folder-content">
<svg role="group" aria-labelledby="scene-workshop-title" viewBox="0 0 800 500">
<title id="scene-workshop-title">工坊 — Workshop interior with forge, workbench, tool rack, and blueprints</title>
<!-- ============================
1. Background
============================ -->
<rect class="fill-wall-dark" x="0" y="0" width="800" height="500"/>
<!-- ============================
2. Merged ceiling + far wall
============================ -->
<polygon class="fill-wall" points="0,0 800,0 720,50 720,370 80,370 80,50" aria-hidden="true"/>
<!-- ============================
3. Far wall decorative lines
============================ -->
<!-- Crown molding -->
<polygon class="fill-wall-light" points="80,50 720,50 720,56 80,56" aria-hidden="true"/>
<!-- Baseboard -->
<polygon class="fill-wall-dark" points="80,360 720,360 720,370 80,370" aria-hidden="true"/>
<!-- ============================
4. 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"/>
<!-- ============================
5. 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"/>
<!-- ============================
6. Ground floor + perspective tile lines
============================ -->
<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>
<!-- ============================
7. Chimney / hood (decorative)
Extends from far wall ceiling down to forge
============================ -->
<g aria-hidden="true">
<!-- Narrow stack near ceiling -->
<rect class="fill-wall-dark" x="500" y="56" width="20" height="100"/>
<!-- Widening section toward forge -->
<polygon class="fill-wall-dark" points="500,156 520,156 540,262 480,262"/>
<!-- Hood face -->
<rect class="fill-wall" x="478" y="256" width="64" height="8"/>
</g>
<!-- ============================
8. Hotspot: Tool rack 工具 (far wall left)
============================ -->
<a class="hotspot" href="#panel-tools" aria-label="工具 — Tools">
<title>工具 — Tools</title>
<rect class="hotspot-shape" x="118" y="78" width="100" height="125"/>
<!-- Backboard -->
<rect class="fill-wall-dark" x="122" y="82" width="92" height="117"/>
<!-- Top shelf -->
<rect class="fill-wall-light" x="118" y="100" width="100" height="6"/>
<!-- Middle shelf -->
<rect class="fill-wall-light" x="118" y="140" width="100" height="6"/>
<!-- Bottom shelf -->
<rect class="fill-wall-light" x="118" y="180" width="100" height="6"/>
<!-- Tool silhouettes: hammer -->
<rect class="fill-door" x="132" y="108" width="4" height="28"/>
<rect class="fill-door" x="128" y="108" width="12" height="6"/>
<!-- Tool silhouettes: tongs -->
<rect class="fill-door" x="157" y="108" width="3" height="26"/>
<rect class="fill-door" x="164" y="108" width="3" height="26"/>
<!-- Tool silhouettes: file -->
<rect class="fill-door" x="187" y="108" width="4" height="28"/>
<!-- Items on middle shelf -->
<rect class="fill-door" x="130" y="148" width="18" height="6"/>
<rect class="fill-door" x="160" y="148" width="12" height="8"/>
<rect class="fill-door" x="186" y="148" width="16" height="5"/>
<text class="hotspot-label" x="168" y="72" text-anchor="middle">工具</text>
</a>
<!-- ============================
9. Hotspot: Blueprint 蓝图 (far wall right)
============================ -->
<a class="hotspot" href="#panel-blueprint" aria-label="蓝图 — Blueprint">
<title>蓝图 — Blueprint</title>
<rect class="hotspot-shape" x="578" y="83" width="115" height="115"/>
<!-- Parchment -->
<rect class="fill-board" x="585" y="90" width="100" height="100"/>
<!-- Pin at top center -->
<circle class="fill-accent-shape" cx="635" cy="90" r="4"/>
<!-- Schematic lines -->
<rect class="fill-path" x="595" y="110" width="80" height="2"/>
<rect class="fill-path" x="595" y="125" width="60" height="2"/>
<rect class="fill-path" x="595" y="140" width="70" height="2"/>
<rect class="fill-path" x="595" y="155" width="50" height="2"/>
<rect class="fill-path" x="595" y="170" width="80" height="2"/>
<!-- Small floor plan rectangle -->
<rect class="fill-path" x="640" y="118" width="30" height="40"/>
<rect class="fill-board" x="645" y="123" width="20" height="30"/>
<text class="hotspot-label" x="635" y="77" text-anchor="middle">蓝图</text>
</a>
<!-- ============================
10. Torch sconces (decorative)
============================ -->
<g class="scene-detail" aria-hidden="true">
<!-- Left side 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 side 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>
<!-- ============================
11. Hotspot: Forge 锻造 (centerpiece)
============================ -->
<a class="hotspot" href="#panel-forging" aria-label="锻造 — Forging">
<title>锻造 — Forging</title>
<!-- Clickable area -->
<rect class="hotspot-shape" x="430" y="250" width="180" height="120"/>
<!-- Stone body -->
<rect class="fill-wall" x="445" y="280" width="150" height="90"/>
<!-- Left pillar -->
<rect class="fill-wall-dark" x="432" y="268" width="18" height="102"/>
<!-- Right pillar -->
<rect class="fill-wall-dark" x="590" y="268" width="18" height="102"/>
<!-- Hearth ledge -->
<rect class="fill-wall-light" x="430" y="268" width="180" height="14"/>
<!-- Stone texture lines -->
<rect class="fill-path" x="450" y="312" width="140" height="2"/>
<rect class="fill-path" x="450" y="342" width="140" height="2"/>
<!-- Fire opening (black recess) -->
<rect class="fill-door" x="462" y="296" width="116" height="60"/>
<!-- Ambient glow halo (pulsing) -->
<rect class="fill-window-glow forge-glow" x="455" y="288" width="130" height="72"/>
<!-- Fire body (semi-transparent orange) -->
<rect class="fill-window" x="472" y="310" width="96" height="38"/>
<!-- Coals (solid orange) -->
<rect class="fill-accent-shape" x="478" y="336" width="84" height="18"/>
<!-- Fire tongues -->
<rect class="fill-accent-shape" x="496" y="318" width="12" height="18"/>
<rect class="fill-accent-shape" x="519" y="322" width="10" height="14"/>
<rect class="fill-accent-shape" x="541" y="320" width="8" height="16"/>
<!-- Front hearth base -->
<rect class="fill-wall-dark" x="430" y="360" width="180" height="10"/>
<text class="hotspot-label" x="520" y="258" text-anchor="middle">锻造</text>
</a>
<!-- ============================
12. Anvil (decorative, near forge)
============================ -->
<g aria-hidden="true">
<!-- Base (wider) -->
<polygon class="fill-wall" points="352,370 398,370 392,355 358,355"/>
<!-- Waist (narrow) -->
<rect class="fill-wall" x="365" y="345" width="20" height="10"/>
<!-- Top face (trapezoidal) -->
<polygon class="fill-wall-light" points="348,345 402,345 395,330 355,330"/>
<!-- Horn (left extension) -->
<polygon class="fill-wall-light" points="348,345 355,330 338,336"/>
<!-- Hot metal piece -->
<rect class="fill-accent-shape" x="368" y="326" width="20" height="5"/>
</g>
<!-- ============================
13. Hotspot: Workbench 技法 (floor left)
============================ -->
<a class="hotspot" href="#panel-techniques" aria-label="技法 — Techniques">
<title>技法 — Techniques</title>
<rect class="hotspot-shape" x="100" y="278" width="210" height="92"/>
<!-- Table top -->
<rect class="fill-wall-light" x="98" y="298" width="216" height="10"/>
<!-- Table legs -->
<rect class="fill-wall-dark" x="108" y="308" width="10" height="62"/>
<rect class="fill-wall-dark" x="294" y="308" width="10" height="62"/>
<!-- Cross brace -->
<rect class="fill-wall-dark" x="118" y="340" width="176" height="4"/>
<!-- Sample tiles on surface -->
<rect class="fill-accent-dim" x="120" y="288" width="20" height="10"/>
<rect class="fill-window" x="150" y="290" width="15" height="8"/>
<rect class="fill-board" x="175" y="289" width="18" height="9"/>
<!-- Ruler/straight edge -->
<rect class="fill-wall" x="210" y="292" width="80" height="4"/>
<text class="hotspot-label" x="205" y="270" text-anchor="middle">技法</text>
</a>
<!-- ============================
14. Hotspot: Material crates 材料 (floor)
============================ -->
<a class="hotspot" href="#panel-materials" aria-label="材料 — Materials">
<title>材料 — Materials</title>
<rect class="hotspot-shape" x="98" y="383" width="165" height="100"/>
<!-- Large crate (back) -->
<rect class="fill-wall" x="105" y="395" width="70" height="55"/>
<rect class="fill-wall-dark" x="105" y="395" width="70" height="5"/>
<!-- Plank lines -->
<rect class="fill-wall-dark" x="105" y="416" width="70" height="2"/>
<rect class="fill-wall-dark" x="105" y="436" width="70" height="2"/>
<!-- Small crate (front, overlapping) -->
<rect class="fill-wall-dark" x="130" y="420" width="50" height="40"/>
<rect class="fill-wall" x="130" y="420" width="50" height="4"/>
<!-- Open crate with ore -->
<rect class="fill-wall" x="190" y="400" width="60" height="50"/>
<rect class="fill-wall-dark" x="190" y="400" width="60" height="4"/>
<!-- Ore chunks visible -->
<rect class="fill-accent-dim" x="200" y="412" width="12" height="10"/>
<rect class="fill-accent-dim" x="218" y="414" width="10" height="8"/>
<rect class="fill-accent-dim" x="234" y="410" width="8" height="12"/>
<text class="hotspot-label" x="180" y="378" text-anchor="middle">材料</text>
</a>
<!-- ============================
15. 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-workshop" class="scene-nav" aria-label="工坊导航">
<ul class="scene-nav__list">
<li><a class="scene-nav__link" href="#panel-tools">工具 — 工具架</a></li>
<li><a class="scene-nav__link" href="#panel-blueprint">蓝图 — 设计蓝图</a></li>
<li><a class="scene-nav__link" href="#panel-forging">锻造 — 部署流程</a></li>
<li><a class="scene-nav__link" href="#panel-techniques">技法 — 设计技法</a></li>
<li><a class="scene-nav__link" href="#panel-materials">材料 — 构建材料</a></li>
<li><a class="scene-nav__link" href="interior.html">返回城堡</a></li>
</ul>
</nav>
<!-- ============================================================
:target overlay panels — Close-up SVG scenes
============================================================ -->
<!-- ======================== 1. 工具 Tool Rack ======================== -->
<div id="panel-tools" class="capsule-panel" tabindex="-1">
<svg class="closeup" role="img" aria-labelledby="closeup-tools-title" viewBox="0 0 600 400">
<title id="closeup-tools-title">工具架特写</title>
<!-- Background -->
<rect class="fill-wall-dark" width="600" height="400"/>
<!-- Backboard -->
<rect class="fill-wall" x="40" y="30" width="520" height="340"/>
<!-- Shelves -->
<rect class="fill-wall-light" x="40" y="100" width="520" height="8"/>
<rect class="fill-wall-light" x="40" y="210" width="520" height="8"/>
<rect class="fill-wall-light" x="40" y="320" width="520" height="8"/>
<!-- Pegs -->
<rect class="fill-wall-dark" x="100" y="36" width="6" height="12" aria-hidden="true"/>
<rect class="fill-wall-dark" x="250" y="36" width="6" height="12" aria-hidden="true"/>
<rect class="fill-wall-dark" x="400" y="36" width="6" height="12" aria-hidden="true"/>
<!-- Title -->
<text class="closeup-title" x="300" y="26" text-anchor="middle">工具</text>
<!-- Item: Git (hammer) -->
<g id="tools-git" class="closeup-item">
<a href="#tools-git" aria-label="Git — 版本控制与部署触发">
<title>Git — 版本控制与部署触发</title>
<rect class="closeup-item__shape" x="60" y="48" width="110" height="48" rx="4"/>
<!-- Hammer shape -->
<rect class="fill-door" x="100" y="56" width="6" height="34"/>
<rect class="fill-door" x="90" y="54" width="26" height="10"/>
<text class="closeup-item__name" x="115" y="106" text-anchor="middle">Git</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="60" y="112" width="200" height="50" rx="4"/>
<text class="closeup-desc__label" x="72" y="134">Git</text>
<text class="closeup-desc__text" x="72" y="152">版本控制与部署触发</text>
</g>
</g>
<!-- Item: Caddy (shield) -->
<g id="tools-caddy" class="closeup-item">
<a href="#tools-caddy" aria-label="Caddy — Web 服务器与反向代理">
<title>Caddy — Web 服务器与反向代理</title>
<rect class="closeup-item__shape" x="200" y="48" width="110" height="48" rx="4"/>
<!-- Shield shape -->
<polygon class="fill-door" points="255,54 275,54 275,78 265,86 255,78"/>
<text class="closeup-item__name" x="265" y="106" text-anchor="middle">Caddy</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="200" y="112" width="220" height="50" rx="4"/>
<text class="closeup-desc__label" x="212" y="134">Caddy</text>
<text class="closeup-desc__text" x="212" y="152">Web 服务器与反向代理</text>
</g>
</g>
<!-- Item: Sourcehut (gear) -->
<g id="tools-sourcehut" class="closeup-item">
<a href="#tools-sourcehut" aria-label="Sourcehut — 自建 Git 托管">
<title>Sourcehut — 自建 Git 托管</title>
<rect class="closeup-item__shape" x="60" y="158" width="110" height="48" rx="4"/>
<!-- Gear shape -->
<rect class="fill-door" x="95" y="164" width="30" height="30"/>
<rect class="fill-door" x="103" y="160" width="14" height="38"/>
<rect class="fill-wall" x="103" y="172" width="14" height="14"/>
<text class="closeup-item__name" x="115" y="216" text-anchor="middle">Sourcehut</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="60" y="222" width="200" height="50" rx="4"/>
<text class="closeup-desc__label" x="72" y="244">Sourcehut</text>
<text class="closeup-desc__text" x="72" y="262">自建 Git 托管</text>
</g>
</g>
<!-- Item: Hexo (pen) -->
<g id="tools-hexo" class="closeup-item">
<a href="#tools-hexo" aria-label="Hexo — 博客静态生成器">
<title>Hexo — 博客静态生成器</title>
<rect class="closeup-item__shape" x="200" y="158" width="110" height="48" rx="4"/>
<!-- Pen shape -->
<rect class="fill-door" x="249" y="164" width="6" height="30"/>
<polygon class="fill-door" points="249,194 255,194 252,202"/>
<rect class="fill-door" x="245" y="162" width="14" height="5"/>
<text class="closeup-item__name" x="255" y="216" text-anchor="middle">Hexo</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="200" y="222" width="200" height="50" rx="4"/>
<text class="closeup-desc__label" x="212" y="244">Hexo</text>
<text class="closeup-desc__text" x="212" y="262">博客静态生成器</text>
</g>
</g>
</svg>
<a href="#" class="capsule-panel__close">关闭</a>
</div>
<!-- ======================== 2. 材料 Material Crates ======================== -->
<div id="panel-materials" class="capsule-panel" tabindex="-1">
<svg class="closeup" role="img" aria-labelledby="closeup-materials-title" viewBox="0 0 600 400">
<title id="closeup-materials-title">材料箱特写</title>
<!-- Background -->
<rect class="fill-ground" width="600" height="400"/>
<!-- Title -->
<text class="closeup-title" x="300" y="30" text-anchor="middle">材料</text>
<!-- Crate backgrounds (decorative) -->
<rect class="fill-wall-dark" x="30" y="50" width="250" height="145" rx="4" aria-hidden="true"/>
<rect class="fill-wall-dark" x="320" y="50" width="250" height="145" rx="4" aria-hidden="true"/>
<rect class="fill-wall-dark" x="30" y="220" width="250" height="145" rx="4" aria-hidden="true"/>
<rect class="fill-wall-dark" x="320" y="220" width="250" height="145" rx="4" aria-hidden="true"/>
<!-- Crate lids -->
<rect class="fill-wall" x="30" y="50" width="250" height="8" rx="2" aria-hidden="true"/>
<rect class="fill-wall" x="320" y="50" width="250" height="8" rx="2" aria-hidden="true"/>
<rect class="fill-wall" x="30" y="220" width="250" height="8" rx="2" aria-hidden="true"/>
<rect class="fill-wall" x="320" y="220" width="250" height="8" rx="2" aria-hidden="true"/>
<!-- Item: HTML (rectangular block) -->
<g id="materials-html" class="closeup-item">
<a href="#materials-html" aria-label="HTML — 纯 HTML + CSS，极少 JavaScript">
<title>纯 HTML + CSS，极少 JavaScript</title>
<rect class="closeup-item__shape" x="52" y="72" width="206" height="70" rx="4"/>
<!-- Block shape -->
<rect class="fill-door" x="110" y="86" width="90" height="40" rx="2"/>
<text class="closeup-item__name" x="155" y="156" text-anchor="middle">HTML + CSS</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="52" y="162" width="226" height="30" rx="4"/>
<text class="closeup-desc__text" x="64" y="182">纯 HTML + CSS，极少 JavaScript</text>
</g>
</g>
<!-- Item: SVG (diamond crystal) -->
<g id="materials-svg" class="closeup-item">
<a href="#materials-svg" aria-label="SVG — 所有 SVG 直接内联于 DOM">
<title>所有 SVG 直接内联于 DOM</title>
<rect class="closeup-item__shape" x="342" y="72" width="206" height="70" rx="4"/>
<!-- Diamond shape -->
<polygon class="fill-door" points="445,82 465,105 445,128 425,105"/>
<text class="closeup-item__name" x="445" y="156" text-anchor="middle">Inline SVG</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="342" y="162" width="226" height="30" rx="4"/>
<text class="closeup-desc__text" x="354" y="182">所有 SVG 直接内联于 DOM</text>
</g>
</g>
<!-- Item: CSS interactions (gear piece) -->
<g id="materials-css" class="closeup-item">
<a href="#materials-css" aria-label="CSS — :target · :hover · checkbox hack">
<title>:target · :hover · checkbox hack</title>
<rect class="closeup-item__shape" x="52" y="242" width="206" height="70" rx="4"/>
<!-- Gear piece -->
<rect class="fill-door" x="136" y="252" width="38" height="38"/>
<rect class="fill-door" x="144" y="248" width="22" height="46"/>
<rect class="fill-wall-dark" x="148" y="264" width="14" height="14"/>
<text class="closeup-item__name" x="155" y="326" text-anchor="middle">CSS 交互</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="52" y="332" width="226" height="30" rx="4"/>
<text class="closeup-desc__text" x="64" y="352">:target · :hover · checkbox hack</text>
</g>
</g>
<!-- Item: No build (seal/stamp) -->
<g id="materials-nobuild" class="closeup-item">
<a href="#materials-nobuild" aria-label="无构建 — 无构建工具、无打包器">
<title>无构建工具、无打包器</title>
<rect class="closeup-item__shape" x="342" y="242" width="206" height="70" rx="4"/>
<!-- Stamp shape -->
<rect class="fill-door" x="425" y="252" width="40" height="8"/>
<rect class="fill-door" x="438" y="260" width="14" height="16"/>
<rect class="fill-door" x="420" y="276" width="50" height="20" rx="2"/>
<text class="closeup-item__name" x="445" y="326" text-anchor="middle">零构建</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="342" y="332" width="226" height="30" rx="4"/>
<text class="closeup-desc__text" x="354" y="352">无构建工具、无打包器</text>
</g>
</g>
</svg>
<a href="#" class="capsule-panel__close">关闭</a>
</div>
<!-- ======================== 3. 技法 Workbench ======================== -->
<div id="panel-techniques" class="capsule-panel" tabindex="-1">
<svg class="closeup" role="img" aria-labelledby="closeup-techniques-title" viewBox="0 0 600 400">
<title id="closeup-techniques-title">工作台特写</title>
<!-- Background -->
<rect class="fill-wall-dark" width="600" height="400"/>
<!-- Table surface -->
<rect class="fill-wall-light" x="20" y="60" width="560" height="280"/>
<!-- Table legs visible at edges -->
<rect class="fill-wall-dark" x="30" y="340" width="16" height="60" aria-hidden="true"/>
<rect class="fill-wall-dark" x="554" y="340" width="16" height="60" aria-hidden="true"/>
<!-- Title -->
<text class="closeup-title" x="300" y="40" text-anchor="middle">技法</text>
<!-- Item: oklch colors (color swatches) -->
<g id="techniques-oklch" class="closeup-item">
<a href="#techniques-oklch" aria-label="oklch — 深冷色调背景与橙色强调">
<title>深冷色调背景与橙色强调</title>
<rect class="closeup-item__shape" x="40" y="80" width="240" height="100" rx="4"/>
<!-- Color swatches -->
<rect class="fill-sky" x="60" y="96" width="40" height="40"/>
<rect class="fill-mountain" x="108" y="96" width="40" height="40"/>
<rect class="fill-ground" x="156" y="96" width="40" height="40"/>
<rect class="fill-accent-shape" x="204" y="96" width="40" height="40"/>
<text class="closeup-item__name" x="160" y="194" text-anchor="middle">oklch 色彩</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="40" y="200" width="240" height="44" rx="4"/>
<text class="closeup-desc__label" x="52" y="220">oklch</text>
<text class="closeup-desc__text" x="52" y="236">深冷色调背景与橙色强调</text>
</g>
</g>
<!-- Item: flat geometry (tile) -->
<g id="techniques-flat" class="closeup-item">
<a href="#techniques-flat" aria-label="扁平几何 — 纯填充，无描边无渐变">
<title>纯填充，无描边无渐变</title>
<rect class="closeup-item__shape" x="320" y="80" width="240" height="100" rx="4"/>
<!-- Flat geometry tiles -->
<rect class="fill-door" x="350" y="100" width="60" height="60"/>
<rect class="fill-wall" x="420" y="100" width="40" height="30"/>
<rect class="fill-board" x="420" y="136" width="40" height="24"/>
<polygon class="fill-accent-dim" points="470,100 530,100 500,160"/>
<text class="closeup-item__name" x="440" y="194" text-anchor="middle">扁平几何</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="320" y="200" width="240" height="44" rx="4"/>
<text class="closeup-desc__label" x="332" y="220">扁平几何</text>
<text class="closeup-desc__text" x="332" y="236">纯填充，无描边无渐变</text>
</g>
</g>
<!-- Item: fire technique (3-layer sample) -->
<g id="techniques-fire" class="closeup-item">
<a href="#techniques-fire" aria-label="三层火焰 — 辉光→半透明→实色核心">
<title>辉光→半透明→实色核心</title>
<rect class="closeup-item__shape" x="40" y="256" width="240" height="70" rx="4"/>
<!-- 3-layer fire sample -->
<rect class="fill-window-glow" x="110" y="264" width="80" height="48"/>
<rect class="fill-window" x="122" y="272" width="56" height="32"/>
<rect class="fill-accent-shape" x="134" y="280" width="32" height="20"/>
<text class="closeup-item__name" x="160" y="342" text-anchor="middle">三层火焰</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="40" y="332" width="260" height="44" rx="4"/>
<text class="closeup-desc__label" x="52" y="352">三层火焰</text>
<text class="closeup-desc__text" x="52" y="368">辉光 → 半透明 → 实色核心</text>
</g>
</g>
<!-- Item: accessibility (a11y symbol) -->
<g id="techniques-a11y" class="closeup-item">
<a href="#techniques-a11y" aria-label="无障碍 — prefers-reduced-motion + aria">
<title>prefers-reduced-motion + aria</title>
<rect class="closeup-item__shape" x="320" y="256" width="240" height="70" rx="4"/>
<!-- Accessibility: human figure -->
<circle class="fill-door" cx="440" cy="270" r="8"/>
<rect class="fill-door" x="436" y="280" width="8" height="24"/>
<rect class="fill-door" x="424" y="286" width="32" height="6"/>
<text class="closeup-item__name" x="440" y="342" text-anchor="middle">无障碍</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="320" y="332" width="260" height="44" rx="4"/>
<text class="closeup-desc__label" x="332" y="352">无障碍</text>
<text class="closeup-desc__text" x="332" y="368">prefers-reduced-motion + aria</text>
</g>
</g>
</svg>
<a href="#" class="capsule-panel__close">关闭</a>
</div>
<!-- ======================== 4. 锻造 Forge ======================== -->
<div id="panel-forging" class="capsule-panel" tabindex="-1">
<svg class="closeup closeup--forge" role="img" aria-labelledby="closeup-forging-title" viewBox="0 0 600 400">
<title id="closeup-forging-title">锻造流程特写</title>
<!-- Background -->
<rect class="fill-wall-dark" width="600" height="400"/>
<!-- Hearth stone frame -->
<rect class="fill-wall" x="40" y="280" width="520" height="110" rx="4"/>
<!-- Fire recess (dark opening) -->
<rect class="fill-door" x="60" y="80" width="480" height="280"/>
<!-- Hearth ledge -->
<rect class="fill-wall-light" x="40" y="275" width="520" height="10"/>
<!-- Shared coals at base -->
<rect class="fill-accent-shape" x="80" y="340" width="440" height="20" rx="2"/>
<!-- Title -->
<text class="closeup-title" x="300" y="28" text-anchor="middle">锻造</text>
<!-- Flames rendered back → front (painter's algorithm) -->
<!-- Layer 4 (backmost): Sourcehut mirror -->
<g id="forging-mirror" class="closeup-item">
<a href="#forging-mirror" aria-label="镜像 — 推送至 Sourcehut 镜像">
<title>推送至 Sourcehut 镜像</title>
<!-- Outer glow -->
<polygon class="fill-fire-4-glow" points="420,340 540,340 510,120 450,120"/>
<!-- Semi-transparent body -->
<polygon class="fill-fire-4-body" points="435,340 525,340 505,140 455,140"/>
<!-- Solid core -->
<polygon class="fill-fire-4-core" points="455,340 505,340 495,180 465,180"/>
<text class="closeup-item__name" x="480" y="370" text-anchor="middle">镜像</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="150" y="150" width="300" height="56" rx="4"/>
<text class="closeup-desc__label" x="170" y="172">Sourcehut</text>
<text class="closeup-desc__text" x="170" y="192">推送至 Sourcehut 镜像</text>
</g>
</g>
<!-- Layer 3: rsync -->
<g id="forging-rsync" class="closeup-item">
<a href="#forging-rsync" aria-label="同步 — rsync 至 /var/www/realm">
<title>rsync 至 /var/www/realm</title>
<polygon class="fill-fire-3-glow" points="310,340 460,340 420,100 350,100"/>
<polygon class="fill-fire-3-body" points="325,340 445,340 415,125 355,125"/>
<polygon class="fill-fire-3-core" points="345,340 425,340 405,165 365,165"/>
<text class="closeup-item__name" x="385" y="370" text-anchor="middle">rsync</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="150" y="150" width="300" height="56" rx="4"/>
<text class="closeup-desc__label" x="170" y="172">rsync</text>
<text class="closeup-desc__text" x="170" y="192">同步至 /var/www/realm</text>
</g>
</g>
<!-- Layer 2: post-receive hook -->
<g id="forging-hook" class="closeup-item">
<a href="#forging-hook" aria-label="钩子 — post-receive 检出与构建">
<title>post-receive 检出与构建</title>
<polygon class="fill-fire-2-glow" points="200,340 380,340 340,90 240,90"/>
<polygon class="fill-fire-2-body" points="218,340 362,340 332,115 248,115"/>
<polygon class="fill-fire-2-core" points="240,340 340,340 320,155 260,155"/>
<text class="closeup-item__name" x="290" y="370" text-anchor="middle">post-receive</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="150" y="150" width="300" height="56" rx="4"/>
<text class="closeup-desc__label" x="170" y="172">post-receive</text>
<text class="closeup-desc__text" x="170" y="192">检出与构建</text>
</g>
</g>
<!-- Layer 1 (frontmost): git push -->
<g id="forging-push" class="closeup-item">
<a href="#forging-push" aria-label="推送 — git push 推送至裸仓库">
<title>git push 推送至裸仓库</title>
<polygon class="fill-window-glow" points="80,340 290,340 250,80 120,80"/>
<polygon class="fill-window" points="100,340 270,340 240,105 130,105"/>
<polygon class="fill-accent-shape" points="125,340 245,340 225,145 145,145"/>
<text class="closeup-item__name" x="185" y="370" text-anchor="middle">git push</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="150" y="150" width="300" height="56" rx="4"/>
<text class="closeup-desc__label" x="170" y="172">git push</text>
<text class="closeup-desc__text" x="170" y="192">推送至裸仓库</text>
</g>
</g>
</svg>
<a href="#" class="capsule-panel__close">关闭</a>
</div>
<!-- ======================== 5. 蓝图 Blueprint ======================== -->
<div id="panel-blueprint" class="capsule-panel" tabindex="-1">
<svg class="closeup" role="img" aria-labelledby="closeup-blueprint-title" viewBox="0 0 600 400">
<title id="closeup-blueprint-title">蓝图特写</title>
<!-- Background parchment -->
<rect class="fill-board" width="600" height="400" rx="4"/>
<!-- Pin at top -->
<circle class="fill-accent-shape" cx="300" cy="16" r="6"/>
<!-- Border lines -->
<rect class="fill-path" x="15" y="15" width="570" height="2" aria-hidden="true"/>
<rect class="fill-path" x="15" y="383" width="570" height="2" aria-hidden="true"/>
<rect class="fill-path" x="15" y="15" width="2" height="370" aria-hidden="true"/>
<rect class="fill-path" x="583" y="15" width="2" height="370" aria-hidden="true"/>
<!-- Title -->
<text class="closeup-title" x="300" y="48" text-anchor="middle">蓝图</text>
<!-- Dividing lines (cross pattern) -->
<rect class="fill-path" x="300" y="60" width="2" height="320" aria-hidden="true"/>
<rect class="fill-path" x="20" y="210" width="560" height="2" aria-hidden="true"/>
<!-- Item: @layer (top-left section) -->
<g id="blueprint-layer" class="closeup-item">
<a href="#blueprint-layer" aria-label="@layer — 级联控制层顺序">
<title>@layer 级联控制层顺序</title>
<rect class="closeup-item__shape" x="25" y="66" width="268" height="136" rx="4"/>
<!-- Layer diagram -->
<rect class="fill-path" x="80" y="90" width="160" height="16"/>
<rect class="fill-path" x="80" y="112" width="160" height="16"/>
<rect class="fill-path" x="80" y="134" width="160" height="16"/>
<rect class="fill-path" x="80" y="156" width="160" height="16"/>
<text class="closeup-item__name" x="159" y="190" text-anchor="middle">@layer</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="40" y="118" width="244" height="44" rx="4"/>
<text class="closeup-desc__label" x="52" y="138">@layer</text>
<text class="closeup-desc__text" x="52" y="154">级联控制层顺序</text>
</g>
</g>
<!-- Item: @property (top-right section) -->
<g id="blueprint-property" class="closeup-item">
<a href="#blueprint-property" aria-label="@property — oklch 颜色插值">
<title>@property oklch 颜色插值</title>
<rect class="closeup-item__shape" x="310" y="66" width="268" height="136" rx="4"/>
<!-- Color interpolation diagram -->
<rect class="fill-sky" x="360" y="100" width="30" height="30"/>
<rect class="fill-path" x="400" y="110" width="30" height="10"/>
<rect class="fill-wall" x="440" y="100" width="30" height="30"/>
<rect class="fill-path" x="480" y="110" width="30" height="10"/>
<rect class="fill-accent-shape" x="520" y="100" width="30" height="30"/>
<text class="closeup-item__name" x="444" y="190" text-anchor="middle">@property</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="324" y="118" width="244" height="44" rx="4"/>
<text class="closeup-desc__label" x="336" y="138">@property</text>
<text class="closeup-desc__text" x="336" y="154">oklch 颜色插值</text>
</g>
</g>
<!-- Item: symbol + use (bottom-left section) -->
<g id="blueprint-svg" class="closeup-item">
<a href="#blueprint-svg" aria-label="SVG — symbol + use 响应式复用">
<title>symbol + use 响应式复用</title>
<rect class="closeup-item__shape" x="25" y="220" width="268" height="160" rx="4"/>
<!-- Symbol + use diagram -->
<rect class="fill-path" x="60" y="250" width="60" height="50"/>
<rect class="fill-wall-dark" x="68" y="258" width="44" height="34"/>
<rect class="fill-path" x="60" y="310" width="30" height="24"/>
<rect class="fill-path" x="100" y="310" width="30" height="24"/>
<rect class="fill-path" x="140" y="310" width="30" height="24"/>
<text class="closeup-item__name" x="159" y="360" text-anchor="middle">symbol + use</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="40" y="290" width="244" height="44" rx="4"/>
<text class="closeup-desc__label" x="52" y="310">symbol + use</text>
<text class="closeup-desc__text" x="52" y="326">响应式复用</text>
</g>
</g>
<!-- Item: hotspot + panel (bottom-right section) -->
<g id="blueprint-system" class="closeup-item">
<a href="#blueprint-system" aria-label="交互系统 — hotspot + panel 交互系统">
<title>hotspot + panel 交互系统</title>
<rect class="closeup-item__shape" x="310" y="220" width="268" height="160" rx="4"/>
<!-- Hotspot + panel diagram -->
<rect class="fill-path" x="350" y="250" width="80" height="60"/>
<rect class="fill-accent-dim" x="358" y="258" width="20" height="16"/>
<rect class="fill-accent-dim" x="386" y="258" width="20" height="16"/>
<rect class="fill-path" x="460" y="250" width="60" height="80"/>
<rect class="fill-wall-dark" x="466" y="258" width="48" height="64"/>
<text class="closeup-item__name" x="444" y="360" text-anchor="middle">hotspot + panel</text>
</a>
<g class="closeup-desc">
<rect class="closeup-desc__bg" x="324" y="290" width="244" height="44" rx="4"/>
<text class="closeup-desc__label" x="336" y="310">交互系统</text>
<text class="closeup-desc__text" x="336" y="326">hotspot + panel 交互系统</text>
</g>
</g>
</svg>
<a href="#" class="capsule-panel__close">关闭</a>
</div>
</main>
</body>
</html>