12<html lang="en" data-theme="night" data-dock="list">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width, initial-scale=1">6<title>Atlas — visual identity mockup</title>7<style>8/* ---------- palette: #463f1a #60492c #f9ebe0 #208aae #0d2149 ---------- */9:root {10 --olive: #463f1a;11 --umber: #60492c;12 --linen: #f9ebe0;13 --cerulean: #208aae;14 --navy: #0d2149;15 --radius: 8px;16 --topbar: 64px;17 --sidebar: 316px;18 --dock: 336px;19 font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;20 font-synthesis: none;21}22:root[data-theme="night"] {23 color-scheme: dark;24 --bg: #121417;25 --panel: #17191d;26 --panel-raised: #1e2126;27 --ink: #ece5d8;28 --ink-strong: #f9ebe0;29 --muted: rgba(236, 229, 216, 0.55);30 --line: rgba(236, 229, 216, 0.1);31 --line-strong: rgba(236, 229, 216, 0.22);32 --accent: #3aa5c9;33 --accent-ink: #0c1216;34 --accent-wash: rgba(32, 138, 174, 0.13);35 --accent-wash-strong: rgba(32, 138, 174, 0.24);36 --data: #7fc5de;37 --map-surround: #0d1626;38 --hover: rgba(236, 229, 216, 0.06);39 --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);40 --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);41 --scrim: rgba(23, 25, 29, 0.85);42 --warm: #8a6a44;43 --warm-strong: #b08a5a;44}45* { margin: 0; padding: 0; box-sizing: border-box; }46body { background: #202020; color: var(--ink); }4748/* ---------- mockup chrome (not part of the app) ---------- */49.mock-bar {50 display: flex; gap: 24px; align-items: center; justify-content: center;51 padding: 10px; background: #161616; color: #bbb;52 font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace;53}54.mock-bar strong { color: #eee; font-weight: 600; }55.mock-bar .set { display: flex; gap: 4px; align-items: center; }56.mock-bar button {57 font: inherit; color: #bbb; background: #262626; border: 1px solid #333;58 padding: 4px 10px; border-radius: 5px; cursor: pointer;59}60.mock-bar button.on { background: #3b3b3b; color: #fff; border-color: #555; }6162/* ---------- app frame ---------- */63.frame {64 width: min(1560px, calc(100vw - 32px)); height: 940px; margin: 16px auto 40px;65 border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.55);66 display: grid;67 grid-template-columns: var(--sidebar) minmax(0, 1fr) auto;68 grid-template-rows: var(--topbar) minmax(0, 1fr);69 background: var(--bg);70 transition: background 200ms ease;71}7273/* ---------- topbar ---------- */74.topbar {75 grid-column: 1 / 4; display: flex; align-items: center; gap: 28px;76 padding: 0 20px; background: var(--panel);77 border-bottom: 1px solid var(--line);78}79.brand { display: flex; gap: 12px; align-items: center; width: calc(var(--sidebar) - 20px); }80.brand-mark {81 width: 34px; height: 34px; display: grid; place-items: center;82 color: var(--accent-ink); background: var(--accent); border-radius: 9px;83}84.brand-mark svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }85.brand-word strong {86 display: block; font-family: "Arial Narrow", "Roboto Condensed", sans-serif;87 font-size: 19px; letter-spacing: 0.34em; color: var(--ink-strong);88}89.brand-word small {90 font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);91}92.pickers { display: flex; gap: 18px; }93.pickers label { display: flex; flex-direction: column; gap: 3px; }94.pickers span {95 font-size: 8.5px; font-weight: 700; letter-spacing: 0.17em;96 text-transform: uppercase; color: var(--muted);97}98.pickers select {99 font: 600 13px inherit; font-family: inherit; color: var(--ink-strong);100 background: var(--panel-raised); border: 1px solid var(--line);101 border-radius: 7px; padding: 6px 30px 6px 10px; appearance: none;102 background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),103 linear-gradient(135deg, var(--muted) 50%, transparent 50%);104 background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;105 background-size: 5px 5px;106 background-repeat: no-repeat;107}108.topbar-scale {109 margin-left: auto; display: flex; align-items: center; gap: 10px;110 font: 500 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted);111}112.topbar-scale .rule { width: 74px; height: 5px; border: 1px solid var(--muted); border-top: none; }113114/* ---------- left sidebar ---------- */115.sidebar {116 grid-row: 2; grid-column: 1; overflow: hidden auto; background: var(--panel);117 border-right: 1px solid var(--line); display: flex; flex-direction: column;118}119.sidebar-heading { padding: 20px 20px 14px; border-bottom: 1px solid var(--line); }120.eyebrow {121 font-size: 9px; font-weight: 800; letter-spacing: 0.24em; color: var(--accent);122 text-transform: uppercase;123}124.sidebar-heading h1 {125 font-family: "Arial Narrow", "Roboto Condensed", sans-serif;126 font-size: 25px; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink-strong);127 margin: 5px 0 4px;128}129.map-name { font-size: 12.5px; font-weight: 600; }130.map-meta { font: 500 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--data); margin-top: 5px; }131.search {132 margin: 14px 16px 0; display: flex; align-items: center; gap: 9px;133 background: var(--panel-raised); border: 1px solid var(--line); border-radius: var(--radius);134 padding: 8px 12px; color: var(--muted); font-size: 12.5px;135}136.search svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }137.search kbd {138 margin-left: auto; font: 600 9.5px ui-monospace, SFMono-Regular, Menlo, monospace;139 background: var(--hover); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px;140}141.legend-toolbar {142 display: flex; align-items: baseline; gap: 8px; padding: 18px 20px 8px;143}144.legend-toolbar > span {145 font-size: 9px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;146 color: var(--muted);147}148.legend-toolbar .actions { margin-left: auto; display: flex; gap: 2px; }149.legend-toolbar .actions i {150 width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;151 color: var(--muted); font-style: normal;152}153.legend-toolbar .actions i:hover { background: var(--hover); color: var(--ink-strong); }154.legend-toolbar .actions svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }155.group { border-top: 1px solid var(--line); }156.group-header {157 display: flex; align-items: center; gap: 8px; padding: 9px 20px; cursor: pointer;158}159.group-header:hover { background: var(--hover); }160.chev { color: var(--muted); display: grid; }161.chev svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; transform: rotate(90deg); }162.group-title {163 font-size: 10.5px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;164 color: var(--ink-strong);165}166.group-count { font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--data); }167.switch {168 margin-left: auto; width: 26px; height: 15px; border-radius: 8px;169 background: var(--accent); position: relative;170}171.switch::after {172 content: ""; position: absolute; top: 2px; right: 2px; width: 11px; height: 11px;173 border-radius: 50%; background: var(--panel-raised);174}175.switch.off { background: var(--line-strong); }176.switch.off::after { right: auto; left: 2px; }177.rows { padding-bottom: 6px; }178.row {179 display: flex; align-items: center; gap: 10px; padding: 5px 20px 5px 30px; font-size: 12.5px;180}181.row:hover { background: var(--hover); }182.dot {183 width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;184 color: #fff; font: 800 8px ui-sans-serif, sans-serif; flex: none;185 box-shadow: 0 0 0 1.5px var(--panel-raised), var(--shadow-soft);186}187.row .n { font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); margin-left: auto; }188.row.dim { opacity: 0.45; }189.zone-row { display: flex; gap: 9px; padding: 4.5px 20px 4.5px 30px; font-size: 12.5px; align-items: center; }190.zone-row:hover { background: var(--hover); }191.zone-row .zm { width: 9px; height: 9px; border: 2px solid var(--warm); border-radius: 2.5px; flex: none; }192.zone-row.current { color: var(--ink-strong); font-weight: 700; }193.zone-row.current .zm { background: var(--accent); border-color: var(--accent); }194.sidebar-footer {195 margin-top: auto; display: flex; gap: 8px; align-items: center;196 padding: 11px 20px; border-top: 1px solid var(--line);197 font: 600 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--data);198}199.live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }200201/* ---------- map ---------- */202.map { grid-row: 2; grid-column: 2; position: relative; background: var(--map-surround); overflow: hidden; }203.map svg.terrain { position: absolute; inset: 0; width: 100%; height: 100%; }204.zoom {205 position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column;206 border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft);207 border: 1px solid var(--line-strong);208}209.zoom b {210 width: 34px; height: 33px; display: grid; place-items: center; background: var(--panel-raised);211 color: var(--ink-strong); font: 500 17px ui-sans-serif, sans-serif; cursor: pointer;212}213.zoom b + b { border-top: 1px solid var(--line); }214.zoom b:hover { background: var(--panel); }215.map-hint {216 position: absolute; left: 16px; bottom: 14px; display: flex; gap: 9px; align-items: center;217 padding: 5px 12px; border-radius: 20px; background: var(--scrim);218 backdrop-filter: blur(8px); border: 1px solid var(--line);219 font: 600 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em;220 color: var(--muted); text-transform: uppercase;221}222.map-hint i { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }223.overview {224 position: absolute; right: 16px; bottom: 14px; width: 168px; border-radius: var(--radius);225 overflow: hidden; border: 1px solid var(--line-strong); box-shadow: var(--shadow);226 background: var(--map-surround);227}228.overview .ov-map { height: 110px; position: relative; }229.overview .ov-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }230.overview .viewport {231 position: absolute; left: 34%; top: 26%; width: 38%; height: 42%;232 border: 1.5px solid var(--accent); background: var(--accent-wash);233}234.overview footer {235 padding: 4px 9px; background: var(--panel); color: var(--muted);236 font: 600 8.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em;237}238.pin { position: absolute; translate: -50% -50%; width: 26px; height: 26px; border-radius: 50%;239 display: grid; place-items: center; color: #fff; font: 800 10px ui-sans-serif, sans-serif;240 box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 3px 6px rgba(0,0,0,0.4); }241.pin.sel { outline: 3px solid var(--accent); outline-offset: 1.5px; }242.pin-label {243 position: absolute; translate: -50% 14px; padding: 2px 6px; border-radius: 4px;244 background: rgba(8, 14, 24, 0.82); color: #f4f0e6; white-space: nowrap;245 font: 700 10px "Arial Narrow", "Roboto Condensed", sans-serif; letter-spacing: 0.04em;246}247248/* ---------- right dock: the signature ---------- */249.dock {250 grid-row: 2; grid-column: 3; width: var(--dock); display: flex; flex-direction: column;251 background: var(--panel); border-left: 1px solid var(--line); overflow: hidden;252 transition: width 200ms ease;253}254.dock-readout {255 display: flex; align-items: center; gap: 8px; padding: 11px 16px;256 border-bottom: 1px solid var(--line); background: var(--panel-raised);257 font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.1em;258 color: var(--data); text-transform: uppercase; white-space: nowrap;259}260.dock-readout .flag {261 padding: 2px 7px; border-radius: 4px; background: var(--accent-wash-strong); color: var(--accent);262}263.dock-readout .fold {264 margin-left: auto; width: 22px; height: 22px; display: grid; place-items: center;265 border-radius: 5px; color: var(--muted); cursor: pointer;266}267.dock-readout .fold:hover { background: var(--hover); color: var(--ink-strong); }268.dock-readout .fold svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }269.dock-body { position: relative; flex: 1; overflow: hidden; }270.pane { position: absolute; inset: 0; overflow: hidden auto; transition: transform 220ms cubic-bezier(0.22,0.61,0.36,1); }271.pane.list { transform: translateX(0); }272.pane.detail { transform: translateX(100%); border-left: 1px solid var(--line); background: var(--panel); }273[data-dock="detail"] .pane.list { transform: translateX(-24%); }274[data-dock="detail"] .pane.detail { transform: translateX(0); }275.result {276 display: flex; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--line); cursor: pointer;277}278.result:hover { background: var(--hover); }279.result.sel { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }280.result .dot { margin-top: 2px; }281.result b { display: block; font-size: 13px; color: var(--ink-strong); }282.result .sub { display: flex; gap: 7px; margin-top: 2px; font-size: 10.5px; color: var(--muted); }283.result .sub .zone::before { content: "▸ "; color: var(--line-strong); }284.result .dist {285 margin-left: auto; align-self: center;286 font: 600 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted);287}288/* detail pane */289.detail-top { padding: 14px 18px 0; }290.back {291 display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;292 color: var(--accent); cursor: pointer; letter-spacing: 0.04em;293}294.back svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; }295.cat-chip {296 display: inline-flex; align-items: center; gap: 7px; margin: 14px 0 8px;297 font-size: 9px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);298}299.detail-top h2 {300 font-family: "Arial Narrow", "Roboto Condensed", sans-serif; font-size: 26px;301 line-height: 1.05; color: var(--ink-strong);302}303.detail-desc { padding: 10px 18px 0; font-size: 12.5px; line-height: 1.55; }304.detail-links { padding: 14px 18px 0; display: grid; gap: 6px; }305.detail-links a { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }306.detail-links a::before { content: "↳ "; color: var(--muted); }307.detail-data {308 margin: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);309 background: var(--panel-raised); padding: 11px 13px; display: grid; gap: 7px;310}311.detail-data div { display: flex; justify-content: space-between; font-size: 10px; }312.detail-data dt { font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }313.detail-data dd { font: 600 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--data); }314/* folded rail */315[data-dock="hidden"] .dock { width: 40px; }316[data-dock="hidden"] .dock-readout { padding: 11px 0; justify-content: center; }317[data-dock="hidden"] .dock-readout > :not(.fold) { display: none; }318[data-dock="hidden"] .dock-readout .fold { margin: 0; }319[data-dock="hidden"] .dock-readout .fold svg { transform: rotate(180deg); }320[data-dock="hidden"] .dock-body { display: none; }321[data-dock="hidden"] .dock .rail-label {322 display: block; writing-mode: vertical-rl; margin: 14px auto 0;323 font: 700 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.18em;324 color: var(--muted); text-transform: uppercase;325}326.rail-label { display: none; }327</style>328</head>329<body>330331<div class="mock-bar">332 <strong>ATLAS IDENTITY MOCKUP</strong>333 <span class="set">dock334 <button data-set-dock="list" class="on">results</button>335 <button data-set-dock="detail">detail</button>336 <button data-set-dock="hidden">hidden</button>337 </span>338</div>339340<div class="frame">341 <!-- topbar -->342 <header class="topbar">343 <div class="brand">344 <span class="brand-mark">345 <svg viewBox="0 0 24 24"><path d="M12 2c3.9 0 7 3 7 6.8 0 4.8-5 10.4-6.5 12.6a.6.6 0 0 1-1 0C10 19.2 5 13.6 5 8.8 5 5 8.1 2 12 2Z"/><path d="m8.8 10.5 2.2-4.6 1.6 3.4 1-1.9 1.6 3.1"/></svg>346 </span>347 <span class="brand-word"><strong>ATLAS</strong><small>Game map explorer</small></span>348 </div>349 <div class="pickers">350 <label><span>Game</span><select><option>Clair Obscur: Expedition 33</option></select></label>351 <label><span>Map</span><select><option>The Continent</option></select></label>352 <label><span>Layer</span><select disabled><option>Base</option></select></label>353 </div>354 <div class="topbar-scale"><span class="rule"></span>500 m</div>355 </header>356357 <!-- left sidebar -->358 <aside class="sidebar">359 <div class="sidebar-heading">360 <p class="eyebrow">Explore</p>361 <h1>Clair Obscur: Expedition 33</h1>362 <p class="map-name">The Continent</p>363 <p class="map-meta">2,814 LOCATIONS · 24 REGIONS</p>364 </div>365 <div class="search">366 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6"/><path d="m16 16 4 4"/></svg>367 Search locations <kbd>⌘K</kbd>368 </div>369 <div class="legend-toolbar"><span>Layers</span>370 <span class="actions">371 <i><svg viewBox="0 0 16 16"><path d="M5 6.5 8 3.5l3 3M5 9.5l3 3 3-3"/></svg></i>372 <i><svg viewBox="0 0 16 16"><path d="M5 3.5 8 6.5l3-3M5 12.5l3-3 3 3"/></svg></i>373 <i><svg viewBox="0 0 16 16"><path d="M1.5 8S4 4 8 4s6.5 4 6.5 4-2.5 4-6.5 4-6.5-4-6.5-4Z"/><circle cx="8" cy="8" r="1.9"/></svg></i>374 <i><svg viewBox="0 0 16 16"><path d="M1.5 8S4 4 8 4s6.5 4 6.5 4-2.5 4-6.5 4-6.5-4-6.5-4Z"/><path d="m3 13 10-10"/></svg></i>375 </span>376 </div>377 <section class="group">378 <div class="group-header">379 <span class="chev"><svg viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg></span>380 <span class="group-title">Zones</span><span class="group-count">24</span>381 <span class="switch"></span>382 </div>383 <div class="rows">384 <div class="zone-row"><span class="zm"></span>Ancient Sanctuary</div>385 <div class="zone-row current"><span class="zm"></span>Crimson Forest</div>386 <div class="zone-row"><span class="zm"></span>Esquie's Nest</div>387 <div class="zone-row"><span class="zm"></span>Flying Manor</div>388 <div class="zone-row"><span class="zm"></span>Gestral Village</div>389 </div>390 </section>391 <section class="group">392 <div class="group-header">393 <span class="chev"><svg viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg></span>394 <span class="group-title">Collectibles</span><span class="group-count">718</span>395 <span class="switch"></span>396 </div>397 <div class="rows">398 <div class="row"><span class="dot" style="background:#a4553a">H</span>Haircut<span class="n">105</span></div>399 <div class="row"><span class="dot" style="background:#3e7a4e">J</span>Journal Entry<span class="n">49</span></div>400 <div class="row"><span class="dot" style="background:#208aae">P</span>Pictos<span class="n">252</span></div>401 <div class="row dim"><span class="dot" style="background:#7e5fa0">M</span>Music Record<span class="n">34</span></div>402 <div class="row"><span class="dot" style="background:#b0812e">W</span>Weapon<span class="n">121</span></div>403 </div>404 </section>405 <section class="group">406 <div class="group-header">407 <span class="chev"><svg viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg></span>408 <span class="group-title">Locations</span><span class="group-count">326</span>409 <span class="switch off"></span>410 </div>411 </section>412 <footer class="sidebar-footer"><span class="live"></span>2,780 ENABLED · 252 IN VIEW</footer>413 </aside>414415 <!-- map -->416 <main class="map">417 <svg class="terrain" viewBox="0 0 900 800" preserveAspectRatio="xMidYMid slice">418 <defs>419 <pattern id="contour" width="90" height="90" patternUnits="userSpaceOnUse">420 <circle cx="45" cy="45" r="28" fill="none" stroke="rgba(70,63,26,0.14)" stroke-width="1"/>421 <circle cx="45" cy="45" r="14" fill="none" stroke="rgba(70,63,26,0.1)" stroke-width="1"/>422 </pattern>423 </defs>424 <rect width="900" height="800" fill="#123c63"/>425 <path d="M170 90 C 380 20, 600 60, 730 150 C 850 230, 840 420, 760 540 C 690 650, 520 740, 360 700 C 200 660, 90 540, 110 380 C 125 250, 90 160, 170 90 Z" fill="#e8d9bd" stroke="#a08a5f" stroke-width="3"/>426 <path d="M170 90 C 380 20, 600 60, 730 150 C 850 230, 840 420, 760 540 C 690 650, 520 740, 360 700 C 200 660, 90 540, 110 380 C 125 250, 90 160, 170 90 Z" fill="url(#contour)"/>427 <path d="M300 240 C 380 180, 520 190, 590 260 C 650 320, 640 420, 560 470 C 470 520, 350 500, 300 420 C 260 350, 250 290, 300 240 Z" fill="#cfe0c2" stroke="#7e9a6b" stroke-width="2"/>428 <path d="M600 300 C 660 280, 720 320, 710 380 C 700 430, 640 450, 600 420 C 560 390, 560 330, 600 300 Z" fill="#e0e4e6" stroke="#9aa4ab" stroke-width="2"/>429 <path d="M420 560 q 60 -30 130 0" fill="none" stroke="#3c78a8" stroke-width="5" stroke-linecap="round"/>430 <text x="450" y="150" text-anchor="middle" font-family="Arial Narrow, sans-serif" font-size="26" letter-spacing="8" fill="rgba(70,63,26,0.55)">CRIMSON FOREST</text>431 <text x="660" y="500" text-anchor="middle" font-family="Arial Narrow, sans-serif" font-size="17" letter-spacing="5" fill="rgba(70,63,26,0.45)">DARK SHORES</text>432 </svg>433 <span class="pin sel" style="left:46%;top:38%;background:#208aae">P</span>434 <span class="pin-label" style="left:46%;top:38%">Confrontation</span>435 <span class="pin" style="left:57%;top:47%;background:#a4553a">H</span>436 <span class="pin" style="left:38%;top:55%;background:#3e7a4e">J</span>437 <span class="pin" style="left:64%;top:30%;background:#b0812e">W</span>438 <span class="pin" style="left:30%;top:34%;background:#208aae">P</span>439 <div class="zoom"><b>+</b><b>−</b></div>440 <div class="map-hint">441 <span>Drag to pan</span><i></i><span>Scroll to zoom</span><i></i>442 <span>Z · labels off</span><i></i><span>G · grid off</span>443 </div>444 <div class="overview">445 <div class="ov-map">446 <svg viewBox="0 0 168 110" preserveAspectRatio="xMidYMid slice">447 <rect width="168" height="110" fill="#123c63"/>448 <path d="M35 18 C 70 5, 115 12, 135 28 C 155 44, 152 78, 138 92 C 120 108, 70 108, 48 96 C 25 84, 18 60, 22 44 C 25 32, 20 26, 35 18 Z" fill="#e8d9bd"/>449 </svg>450 <span class="viewport"></span>451 </div>452 <footer>THE CONTINENT</footer>453 </div>454 </main>455456 <!-- right dock -->457 <aside class="dock">458 <div class="dock-readout">459 <span class="count">252 RESULTS</span>460 <span class="flag">PICTOS</span>461 <span class="fold" data-toggle-dock>462 <svg viewBox="0 0 16 16"><path d="m6 3 5 5-5 5"/></svg>463 </span>464 </div>465 <span class="rail-label">252 results</span>466 <div class="dock-body">467 <div class="pane list">468 <div class="result sel" data-open-detail>469 <span class="dot" style="background:#208aae">P</span>470 <span><b>Confrontation</b>471 <span class="sub">Pictos<span class="zone">Crimson Forest</span></span></span>472 <span class="dist">g4x·2</span>473 </div>474 <div class="result" data-open-detail>475 <span class="dot" style="background:#208aae">P</span>476 <span><b>Augmented Counter III</b>477 <span class="sub">Pictos<span class="zone">Ancient Sanctuary</span></span></span>478 <span class="dist">g4x·8</span>479 </div>480 <div class="result" data-open-detail>481 <span class="dot" style="background:#208aae">P</span>482 <span><b>Critical Burn</b>483 <span class="sub">Pictos<span class="zone">Dark Shores</span></span></span>484 <span class="dist">g5m·1</span>485 </div>486 <div class="result" data-open-detail>487 <span class="dot" style="background:#208aae">P</span>488 <span><b>Energising Start</b>489 <span class="sub">Pictos<span class="zone">Esquie's Nest</span></span></span>490 <span class="dist">g5m·4</span>491 </div>492 <div class="result" data-open-detail>493 <span class="dot" style="background:#208aae">P</span>494 <span><b>Glass Canevas</b>495 <span class="sub">Pictos<span class="zone">Flying Manor</span></span></span>496 <span class="dist">g5q·0</span>497 </div>498 <div class="result" data-open-detail>499 <span class="dot" style="background:#208aae">P</span>500 <span><b>Painted Power</b>501 <span class="sub">Pictos<span class="zone">Gestral Village</span></span></span>502 <span class="dist">g5q·6</span>503 </div>504 <div class="result" data-open-detail>505 <span class="dot" style="background:#208aae">P</span>506 <span><b>Rewarding Mark</b>507 <span class="sub">Pictos<span class="zone">Old Lumiere</span></span></span>508 <span class="dist">g5r·3</span>509 </div>510 </div>511 <div class="pane detail">512 <div class="detail-top">513 <span class="back" data-close-detail>514 <svg viewBox="0 0 16 16"><path d="M10 3 5 8l5 5"/></svg>Back to results515 </span>516 <p class="cat-chip"><span class="dot" style="background:#208aae">P</span>Pictos</p>517 <h2>Confrontation</h2>518 </div>519 <p class="detail-desc">On parry: gain a burn charge. Consumed on the next base attack,520 applying two burn stacks per charge. Found on the ridge west of the521 Crimson Forest flag, behind the paint wall.</p>522 <div class="detail-links">523 <a href="#">Crimson Forest flag</a>524 <a href="#">Paint wall (Quest Item)</a>525 </div>526 <dl class="detail-data">527 <div><dt>Location ID</dt><dd>112 048</dd></div>528 <div><dt>Coordinates</dt><dd>4 812 · 3 097</dd></div>529 <div><dt>Geohash</dt><dd>g4x2m</dd></div>530 </dl>531 </div>532 </div>533 </aside>534</div>535536<script>537const root = document.documentElement;538for (const button of document.querySelectorAll("[data-set-dock]")) {539 button.addEventListener("click", () => {540 root.dataset.dock = button.dataset.setDock;541 sync("data-set-dock", button);542 });543}544function sync(attribute, active) {545 for (const button of document.querySelectorAll(`[${attribute}]`)) {546 button.classList.toggle("on", button === active);547 }548}549for (const result of document.querySelectorAll("[data-open-detail]")) {550 result.addEventListener("click", () => { root.dataset.dock = "detail"; syncDock(); });551}552document.querySelector("[data-close-detail]").addEventListener("click", () => {553 root.dataset.dock = "list"; syncDock();554});555document.querySelector("[data-toggle-dock]").addEventListener("click", () => {556 root.dataset.dock = root.dataset.dock === "hidden" ? "list" : "hidden"; syncDock();557});558function syncDock() {559 const current = root.dataset.dock;560 for (const button of document.querySelectorAll("[data-set-dock]")) {561 button.classList.toggle("on", button.dataset.setDock === current);562 }563}564</script>565</body>566</html>