<!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="卧室 — Bedroom of the realm lord">
<meta name="theme-color" content="#1a1a2e">
<link rel="stylesheet" href="realm.css">
</head>
<body>
<a class="skip-link" href="#scene-nav-bedroom">跳过场景</a>
<main class="realm-folder">
<h1 class="visually-hidden">卧室</h1>
<div class="folder-content">
<svg role="group" aria-labelledby="scene-bedroom-title" viewBox="0 0 800 500">
<title id="scene-bedroom-title">卧室 — An empty bedroom with moving boxes and a book on the floor</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. Window (far wall, right side, decorative)
============================ -->
<g aria-hidden="true">
<!-- Window frame -->
<rect class="fill-wall-dark" x="560" y="120" width="100" height="140"/>
<!-- Window glass (semi-transparent orange glow) -->
<rect class="fill-window" x="568" y="128" width="84" height="124"/>
<!-- Window crossbar vertical -->
<rect class="fill-wall-dark" x="607" y="128" width="6" height="124"/>
<!-- Window crossbar horizontal -->
<rect class="fill-wall-dark" x="568" y="185" width="84" height="6"/>
<!-- Window sill -->
<rect class="fill-wall-light" x="555" y="260" width="110" height="8"/>
</g>
<!-- ============================
8. Far wall boxes (background, smaller)
============================ -->
<g aria-hidden="true">
<!-- Single box against far wall -->
<rect class="fill-wall" x="600" y="320" width="50" height="40"/>
<rect class="fill-wall-dark" x="600" y="320" width="50" height="5"/>
<!-- Tape -->
<rect class="fill-accent-dim" x="620" y="325" width="10" height="35"/>
</g>
<!-- ============================
9. Left box stack (near left wall)
============================ -->
<g aria-hidden="true">
<!-- Large box (on floor) -->
<rect class="fill-wall" x="110" y="310" width="80" height="60"/>
<rect class="fill-wall-dark" x="110" y="310" width="80" height="6"/>
<!-- Plank lines -->
<rect class="fill-wall-dark" x="110" y="340" width="80" height="2"/>
<!-- Tape -->
<rect class="fill-accent-dim" x="145" y="316" width="10" height="54"/>
<!-- Small box (stacked on large) -->
<rect class="fill-wall-dark" x="125" y="280" width="50" height="30"/>
<rect class="fill-wall" x="125" y="280" width="50" height="5"/>
<!-- Tape -->
<rect class="fill-accent-dim" x="145" y="285" width="10" height="25"/>
</g>
<!-- ============================
10. Right box group (near right wall)
============================ -->
<g aria-hidden="true">
<!-- Medium box (on floor) -->
<rect class="fill-wall" x="580" y="380" width="70" height="50"/>
<rect class="fill-wall-dark" x="580" y="380" width="70" height="5"/>
<!-- Tape -->
<rect class="fill-accent-dim" x="610" y="385" width="10" height="45"/>
<!-- Small box (beside, on floor) -->
<rect class="fill-wall-dark" x="660" y="400" width="40" height="25"/>
<rect class="fill-wall" x="660" y="400" width="40" height="4"/>
</g>
<!-- ============================
11. Hotspot: Book (floor center)
============================ -->
<a class="hotspot" href="#panel-book" aria-label="书 — Book about the realm lord">
<title>书 — 关于领主</title>
<rect class="hotspot-shape" x="355" y="400" width="90" height="40" rx="4"/>
<!-- Book cover (flat rectangle) -->
<rect class="fill-wall" x="365" y="410" width="70" height="10"/>
<!-- Book spine detail -->
<rect class="fill-accent-dim" x="368" y="412" width="64" height="2"/>
<rect class="fill-accent-dim" x="368" y="416" width="40" height="2"/>
<!-- Pages edge -->
<rect class="fill-wall-light" x="365" y="420" width="70" height="3"/>
<text class="hotspot-label" x="400" y="396" text-anchor="middle">书</text>
</a>
<!-- ============================
12. Hotspot: Return to castle interior
============================ -->
<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-bedroom" class="scene-nav" aria-label="卧室导航">
<ul class="scene-nav__list">
<li><a class="scene-nav__link" href="#panel-book">书 — 关于领主</a></li>
<li><a class="scene-nav__link" href="interior.html">返回城堡</a></li>
</ul>
</nav>
<!-- ============================================================
capsule-panel: The open book
============================================================ -->
<div id="panel-book" class="capsule-panel" tabindex="-1">
<div class="notice-board">
<div class="notice-board__frame">
<h2 class="notice-board__title">关于领主</h2>
<div class="notice-board__surface">
<h2>关于领主</h2>
<p>关于我的事情，要从何说起呢…… 卖关子。</p>
<p>人是分为现实和虚拟两个身份的。在虚拟的世界，或者说互联网上，我是这片领地的领主 Cytrogen——「领地」并不单单意味着该站。</p>
<p>不过我想，你会来到这里，是想要知道我现实中的身份吧。</p>
<h2>身世</h2>
<p>我是 00 后，山东人。大了后随着父母来到了纽约市居住，现在满打满算也至少在这里待了十多年了。</p>
<p>小时候就来了美国的人，几乎逃不开「身份问题」—— 到底是中国人还是美国人？我肯定是中国人没跑了，毕竟不是美国出生的，但对中国的很多地方也觉得陌生。较为直观的是，我的中文水平并没有那么好，让我很是惭愧。为了补足这一点，我会写博客文章，也会上中文课。</p>
<p>除了中文，我也在学习日语，说得并不好就是了…… 最初会学习日语，其实是为了和室友对话。</p>
<h2>创作</h2>
<p>我自童年时期开始，就喜欢画画和创作。不过种种原因让我没有继续这个爱好。结果，我的绘画水平大幅度降低…… 现在只能画些简单的小涂鸦和小动物。</p>
<h2>音乐</h2>
<p>音乐喜欢听 ボカロ、台湾摇滚和日语流行乐：</p>
<ul>
<li>最喜欢的 ボカロ P 主是 sasakure.UK</li>
<li>最喜欢的 ボカロ 歌曲是 《春嵐》</li>
<li>台湾摇滚中很难说喜欢谁……</li>
<li>但是日语流行乐我可以说我很中意 sakanaction</li>
</ul>
<p>我并不会唱歌，也不会弹奏任何乐器。</p>
<h2>游戏与硬件</h2>
<p>游戏方面，我喜欢玩沙盒、休闲、模拟经营游戏，例如《泰拉瑞亚》。我只会玩一款音乐游戏，也就是《舞萌 DX》。</p>
<p>我对硬件有一点兴趣，喜欢组装电脑，也喜欢跟着网上的视频组装一些小东西比如蓝牙音响，但是涉及的范围不广、反而非常狭隘。</p>
<h2>尾声</h2>
<p>我能说的关于自己的事情，也就这些了。我认为，想要了解一个人更多是从行动上观察来的，所以想要更多了解我的话，还请从我在网络上留下的痕迹中拼凑出一个大概的画像吧。</p>
</div>
</div>
</div>
<a href="#" class="capsule-panel__close">合上</a>
</div>
</main>
</body>
</html>