:root {
  --paper: #f7f2e9;
  --paper-deep: #eee3d2;
  --surface: rgba(255, 253, 249, .93);
  --ink: #242126;
  --muted: #757077;
  --line: rgba(91, 75, 67, .16);
  --purple: #7357b8;
  --purple-soft: #e8e1f4;
  --purple-line: #9b7bd6;
  --warm: #e4c59f;
  --accent: #ef6c62;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --header-height: 92px;
  --z-map: 1;
  --z-controls: 20;
  --z-header: 40;
  --z-drawer: 50;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { overflow: hidden; }
body { margin: 0; overflow: hidden; color: var(--ink); background: var(--paper); font-family: "Geist", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, output { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, .canvas-viewport:focus-visible { outline: 3px solid rgba(115,87,184,.42); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 200; left: 16px; top: 12px; padding: 10px 14px; color: white; background: var(--ink); border-radius: 8px; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

.toolbox-header { position: fixed; z-index: var(--z-header); inset: 0 0 auto; display: grid; grid-template-columns: minmax(290px,1fr) auto minmax(180px,1fr); align-items: center; min-height: var(--header-height); padding: 16px 28px; pointer-events: none; }
.toolbox-header > * { pointer-events: auto; }
.toolbox-brand { display: inline-flex; align-items: center; gap: 13px; width: max-content; min-width: 0; }
.toolbox-brand img { width: 54px; height: 54px; object-fit: cover; background: #fff; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; box-shadow: 0 8px 20px rgba(65,50,47,.13); }
.toolbox-brand > span { display: flex; align-items: center; min-width: 0; gap: 14px; }
.toolbox-brand b { font-size: 15px; font-weight: 600; }
.toolbox-brand i { width: 1px; height: 25px; background: rgba(36,33,38,.28); }
.toolbox-brand strong { overflow: hidden; font-family: "KaiTi", "STKaiti", serif; font-size: 21px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.map-breadcrumb { display: flex; align-items: center; justify-self: center; gap: 8px; padding: 7px; background: rgba(255,253,249,.66); border: 1px solid rgba(91,75,67,.11); border-radius: 16px; box-shadow: 0 8px 25px rgba(70,53,52,.06); backdrop-filter: blur(16px); }
.map-breadcrumb a, .map-breadcrumb .is-current { min-height: 43px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border-radius: 11px; font-size: 13px; white-space: nowrap; }
.map-breadcrumb a { color: var(--muted); transition: color .2s, background .2s; }
.map-breadcrumb a:hover { color: var(--ink); background: rgba(255,255,255,.72); }
.map-breadcrumb .is-current { color: var(--purple); background: rgba(255,255,255,.84); border: 1px solid rgba(115,87,184,.55); box-shadow: 0 4px 15px rgba(83,62,128,.1); font-weight: 600; }
.home-link { justify-self: end; display: inline-flex; align-items: center; min-height: 46px; gap: 8px; padding: 0 17px; background: rgba(255,253,249,.76); border: 1px solid rgba(91,75,67,.15); border-radius: 14px; box-shadow: 0 7px 22px rgba(70,53,52,.08); font-size: 13px; backdrop-filter: blur(14px); transition: transform .22s var(--ease), background .22s; }
.home-link:hover { background: #fffdf9; transform: translateY(-2px); }

.canvas-viewport { position: fixed; z-index: var(--z-map); inset: 0; overflow: hidden; touch-action: none; cursor: grab; background: radial-gradient(ellipse at 14% 28%,rgba(224,198,158,.11),transparent 31%),radial-gradient(ellipse at 78% 74%,rgba(206,184,148,.09),transparent 34%),radial-gradient(ellipse at 66% 18%,rgba(234,220,196,.18),transparent 26%),#f6efe4; }
.canvas-viewport.is-dragging { cursor: grabbing; }
.canvas-stage { position: absolute; left: 0; top: 0; width: 2200px; height: 1200px; transform-origin: 0 0; will-change: transform; user-select: none; isolation: isolate; }
.primary-stage { width: 2200px; height: 1100px; }
.map-environment-assets { position: absolute; z-index: -4; inset: 0; overflow: visible; pointer-events: none; }
.environment-decoration { position: absolute; display: block; height: auto; object-fit: contain; user-select: none; transform-origin: 50% 75%; filter: saturate(.82) sepia(.06) drop-shadow(0 7px 7px rgba(91,70,50,.045)); }
.environment-far { filter: saturate(.7) sepia(.08); }
.environment-mid { filter: saturate(.78) sepia(.05) drop-shadow(0 6px 6px rgba(91,70,50,.05)); }
.environment-accent { filter: saturate(.72) sepia(.05); }
.map-route { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; overflow: visible; color: #9274c2; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(255,255,255,.62)); }
.map-route > path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 15 13; opacity: .82; vector-effect: non-scaling-stroke; }
.map-route marker path { fill: #9274c2; stroke: none; opacity: .9; }

.map-node { position: absolute; z-index: 2; width: 350px; min-height: 320px; padding: 0; text-align: center; background: transparent; border: 0; cursor: pointer; isolation: isolate; }
.map-node.is-coming { cursor: default; }
.map-node::after { content: ""; position: absolute; z-index: -3; left: 12%; right: 12%; bottom: 35px; height: 62%; background: radial-gradient(ellipse,rgba(139,110,187,.15),transparent 67%); filter: blur(12px); opacity: 0; transition: opacity .35s; }
.map-node:not(.is-coming):hover::after, .map-node.is-active::after { opacity: 1; }
.island-outline { position: absolute; z-index: -2; left: 22px; right: 22px; bottom: 24px; height: 112px; border: 0; border-bottom: 2px dashed rgba(118,98,78,.18); border-radius: 0 0 52% 48%; transform: rotate(-1.2deg); transition: border-color .3s, transform .3s var(--ease), filter .3s; }
.island-outline::before, .island-outline::after { content: ""; position: absolute; left: 18px; right: 7px; bottom: 10px; height: 84px; border-bottom: 1px dashed rgba(118,98,78,.12); border-radius: 0 0 48% 52%; }
.island-outline::after { left: 2px; right: 26px; bottom: -10px; height: 96px; }
.map-node:not(.is-coming):hover .island-outline { border-color: rgba(115,87,184,.38); filter: drop-shadow(0 12px 15px rgba(115,87,184,.13)); transform: translateY(-2px) rotate(.4deg); }
.map-node.is-active .island-outline { border-color: rgba(115,87,184,.56); filter: drop-shadow(0 13px 18px rgba(115,87,184,.2)); }
.node-flag { position: absolute; z-index: 3; left: 48px; top: 7px; width: 94px; height: 124px; overflow: visible; pointer-events: none; filter: drop-shadow(0 7px 5px rgba(75,56,81,.16)); }
.landmark { position: relative; z-index: 1; display: block; width: 286px; height: 188px; margin: 52px auto 0; object-fit: contain; overflow: visible; filter: drop-shadow(0 12px 10px rgba(76,59,52,.12)); transition: transform .42s var(--ease),filter .42s; }
.map-node:not(.is-coming):hover .landmark, .map-node.is-active .landmark { transform: translateY(-8px) scale(1.025); filter: drop-shadow(0 18px 15px rgba(76,59,80,.16)); }
.node-copy { position: relative; z-index: 2; display: block; width: max-content; max-width: 90%; margin: -7px auto 0; }
.node-copy strong { position: relative; display: block; padding: 5px 18px 8px; color: #6547aa; font-family: "KaiTi", "STKaiti", serif; font-size: 27px; font-weight: 700; letter-spacing: .04em; }
.node-copy strong::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 4px; height: 16px; background: rgba(217,201,239,.65); border-radius: 55% 45% 58% 42%; transform: rotate(-1.2deg); }
.node-copy small { display: inline-block; margin-top: 3px; color: #454047; font-family: "KaiTi", "STKaiti", serif; font-size: 15px; letter-spacing: .08em; }
.map-node.is-coming .landmark, .map-node.is-coming .node-copy { opacity: .78; }

.node-websites { left: 300px; top: 300px; transform: rotate(-1deg); }
.node-creator { left: 910px; top: 330px; transform: rotate(.7deg); }
.node-learning { left: 1570px; top: 560px; transform: rotate(-.8deg); }
.creator-node { width: 330px; min-height: 318px; }
.creator-node .landmark { width: 278px; height: 183px; }
.creator-node .node-flag { left: 38px; }
.node-oral { left: 200px; top: 380px; transform: rotate(-1.2deg); }
.node-recording { left: 590px; top: 175px; transform: rotate(.6deg); }
.node-editing { left: 675px; top: 665px; transform: rotate(-.5deg); }
.node-design { left: 1275px; top: 680px; transform: rotate(.8deg); }
.node-assist { left: 1680px; top: 300px; transform: rotate(-.7deg); }
.websites-node { width: 340px; min-height: 326px; }
.websites-node .landmark { width: 288px; height: 190px; }
.websites-node .node-flag { left: 40px; }
.node-personal-sites { left: 210px; top: 390px; transform: rotate(-1deg); }
.node-product-sites { left: 800px; top: 205px; transform: rotate(.7deg); }
.node-template-library { left: 1330px; top: 665px; transform: rotate(-.6deg); }
.node-other-sites { left: 1740px; top: 285px; transform: rotate(.8deg); }

.zoom-controls { position: fixed; z-index: var(--z-controls); left: 28px; bottom: 24px; display: flex; align-items: center; min-height: 50px; padding: 6px; background: rgba(255,253,249,.84); border: 1px solid rgba(91,75,67,.15); border-radius: 15px; box-shadow: 0 8px 26px rgba(70,53,52,.09); backdrop-filter: blur(16px); }
.zoom-controls button { min-width: 39px; height: 38px; padding: 0 10px; background: transparent; border: 0; border-radius: 10px; cursor: pointer; transition: background .2s, transform .2s; }
.zoom-controls button:hover { background: rgba(232,225,244,.62); }
.zoom-controls button:active { transform: scale(.94); }
.zoom-controls output { min-width: 62px; padding: 0 12px; text-align: center; border-inline: 1px solid rgba(91,75,67,.13); font-size: 13px; font-variant-numeric: tabular-nums; }
.zoom-controls .fit-button { width: auto; margin-left: 6px; padding: 0 13px; border-left: 1px solid rgba(91,75,67,.13); border-radius: 0 9px 9px 0; font-size: 12px; }
.canvas-help { position: fixed; z-index: var(--z-controls); right: 28px; bottom: 24px; margin: 0; padding: 13px 17px; color: #625c61; background: rgba(255,253,249,.82); border: 1px solid rgba(91,75,67,.14); border-radius: 14px; box-shadow: 0 8px 26px rgba(70,53,52,.08); font-size: 12px; backdrop-filter: blur(16px); pointer-events: none; }
.back-map { position: fixed; z-index: var(--z-controls); left: 32px; top: 112px; display: inline-flex; align-items: center; min-height: 40px; gap: 8px; padding: 0 16px; background: #f2e6d2; border: 1px solid rgba(125,92,56,.14); clip-path: polygon(3% 7%,97% 0,95% 91%,4% 100%,0 52%); font-family: "KaiTi","STKaiti",serif; font-size: 15px; font-weight: 700; transition: transform .22s var(--ease); }
.back-map:hover { transform: translateX(-3px); }

.tool-drawer { position: fixed; z-index: var(--z-drawer); right: 24px; top: 116px; bottom: 84px; width: min(390px,calc(100vw - 48px)); display: flex; flex-direction: column; padding: 27px 22px 20px; background: rgba(255,252,247,.96); border: 1px solid rgba(115,87,184,.48); border-radius: 20px; box-shadow: 0 22px 65px rgba(55,42,69,.18),inset 0 1px 0 rgba(255,255,255,.92); backdrop-filter: blur(20px); opacity: 0; pointer-events: none; transform: translateX(calc(100% + 42px)); transition: transform .46s var(--ease),opacity .3s ease; }
.tool-drawer.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); }
.drawer-heading { position: relative; display: flex; align-items: center; min-height: 55px; padding: 0 46px 13px 38px; border-bottom: 1px solid rgba(115,87,184,.16); }
.drawer-heading::after { content: ""; position: absolute; left: 36px; bottom: 8px; width: 128px; height: 7px; background: rgba(183,151,218,.42); border-radius: 50%; transform: rotate(-4deg); }
.drawer-heading h2 { margin: 0; font-family: "KaiTi","STKaiti",serif; font-size: 29px; font-weight: 700; }
.drawer-spark { position: absolute; left: 4px; top: 5px; color: var(--purple); font-size: 27px; }
.drawer-close { position: absolute; right: 0; top: -5px; width: 40px; height: 40px; background: transparent; border: 0; border-radius: 10px; font-size: 28px; font-weight: 300; cursor: pointer; transition: background .2s,transform .2s; }
.drawer-close:hover { background: var(--purple-soft); transform: rotate(4deg); }
.tool-list { flex: 1; min-height: 0; display: grid; align-content: start; gap: 10px; margin-top: 22px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(115,87,184,.28) transparent; }
.tool-link { display: flex; align-items: center; min-height: 68px; gap: 14px; padding: 10px 14px; background: rgba(255,255,255,.76); border: 1px solid rgba(91,75,67,.13); border-radius: 14px; box-shadow: 0 5px 15px rgba(71,53,58,.045); font-size: 15px; font-weight: 500; transition: border-color .22s,background .22s,transform .24s var(--ease),box-shadow .24s; }
.tool-link:hover { background: #fff; border-color: rgba(115,87,184,.34); box-shadow: 0 10px 24px rgba(71,53,88,.1); transform: translateY(-2px); }
.tool-link:active { transform: scale(.985); }
.tool-mark { position: relative; flex: 0 0 42px; width: 42px; height: 42px; overflow: hidden; border-radius: 12px; }
.tool-mark-screen-studio { background: linear-gradient(150deg,#ff526c,#e9204e); box-shadow: inset 0 1px 1px rgba(255,255,255,.5); }
.tool-mark-screen-studio::before { content: ""; position: absolute; left: 10px; top: 13px; width: 18px; height: 15px; background: #fff; border-radius: 4px; }
.tool-mark-screen-studio::after { content: ""; position: absolute; right: 7px; top: 16px; border-width: 5px 0 5px 7px; border-style: solid; border-color: transparent transparent transparent #fff; }
.tool-mark-focusee { background: #16171b; }
.tool-mark-focusee::before { content: ""; position: absolute; inset: 7px; border: 3px solid #eaf6ff; border-radius: 50%; box-shadow: inset 0 0 0 5px #36a9ff,0 0 0 2px rgba(255,255,255,.15); }
.tool-mark-focusee::after { content: ""; position: absolute; left: 18px; top: 18px; width: 6px; height: 6px; background: #0b1022; border: 2px solid white; border-radius: 50%; }
.tool-mark-kaipai { display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#f6aa42,#ec7045); box-shadow: inset 0 1px 1px rgba(255,255,255,.45); }
.tool-mark-kaipai::before { content: "开"; font-family: "KaiTi","STKaiti",serif; font-size: 22px; font-weight: 700; transform: translateY(-1px); }
.website-link > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.website-mark { display: grid; place-items: center; color: #6547aa; background: linear-gradient(145deg,#f4ead8,#e6dcf0); border: 1px solid rgba(115,87,184,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); font-family: Georgia,"Times New Roman",serif; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.website-drawer .tool-list { padding-right: 3px; }
.empty-tools { display: grid; min-height: 190px; place-items: center; padding: 24px; text-align: center; color: var(--muted); background: rgba(232,225,244,.28); border: 1px dashed rgba(115,87,184,.24); border-radius: 16px; font-family: "KaiTi","STKaiti",serif; font-size: 17px; }
.drawer-note { margin: 18px 4px 0; color: #7759af; font-family: "KaiTi","STKaiti",serif; font-size: 14px; line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  :root { --header-height: 78px; }
  .toolbox-header { grid-template-columns: 1fr auto; min-height: var(--header-height); padding: 12px 16px; }
  .toolbox-brand img { width: 46px; height: 46px; }
  .toolbox-brand > span { gap: 9px; }
  .toolbox-brand strong { max-width: 34vw; font-size: 17px; }
  .toolbox-brand b { font-size: 14px; }
  .toolbox-brand i { height: 20px; }
  .map-breadcrumb { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); }
  .map-breadcrumb a, .map-breadcrumb .is-current { min-height: 38px; padding: 0 15px; font-size: 12px; }
  .home-link { min-height: 42px; padding: 0 13px; }
  .back-map { top: 136px; left: 16px; }
  .canvas-help { display: none; }
  .zoom-controls { left: 14px; bottom: max(14px,env(safe-area-inset-bottom)); }
  .tool-drawer { right: 12px; left: 12px; top: auto; bottom: max(12px,env(safe-area-inset-bottom)); width: auto; max-height: 68dvh; padding: 22px 18px 17px; border-radius: 20px; transform: translateY(calc(100% + 28px)); }
  .tool-drawer.is-open { transform: translateY(0); }
}

@media (max-width: 560px) {
  .toolbox-header { padding-inline: 12px; }
  .toolbox-brand { gap: 8px; }
  .toolbox-brand img { width: 42px; height: 42px; }
  .toolbox-brand b, .toolbox-brand i { display: none; }
  .toolbox-brand strong { max-width: 48vw; font-size: 15px; }
  .home-link { width: 42px; padding: 0; justify-content: center; font-size: 0; }
  .home-link span { font-size: 20px; }
  .map-breadcrumb { top: 72px; }
  .back-map { top: 122px; }
  .zoom-controls { right: 14px; justify-content: center; }
  .zoom-controls output { min-width: 54px; }
  .zoom-controls .fit-button { margin-left: 2px; padding-inline: 10px; }
  .node-copy strong { font-size: 25px; }
  .drawer-heading h2 { font-size: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .12s !important; scroll-behavior: auto !important; }
  .landmark { transform: none !important; }
}