/* Native CSS, buildless. Design variance 6 / motion intensity 3 / density 3.
   The tool brands intentionally retain separate accents on a shared neutral system. */
:root {
  color-scheme: light;
  --page: #f6f6f4;
  --surface: #fdfdfc;
  --ink: #252925;
  --muted: #62675f;
  --border: #e6e7e2;
  --subtle: #efefeb;
  --focus: #536d61;
  --game-bg: #efebe5;
  --game-red: #a4473e;
  --game-line: #ded3c7;
  --card-paper: #faf6ed;
  --admin-bg: #e8e9e3;
  --cipher-bg: #eeedf2;
  --cipher-ink: #454255;
  --violet: #785cf5;
  --color-bg: #e9eeeb;
  --shadow: 0 8px 24px rgb(32 38 29 / 3%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #171918;
  --surface: #212422;
  --ink: #eeefeb;
  --muted: #a1a69f;
  --border: #363a35;
  --subtle: #2b302b;
  --focus: #b3c7b9;
  --game-bg: #302925;
  --game-red: #d29a8d;
  --game-line: #5c463a;
  --card-paper: #e5d6c1;
  --admin-bg: #292d26;
  --cipher-bg: #292830;
  --cipher-ink: #d8d5e3;
  --violet: #ac97ff;
  --color-bg: #25302d;
  --shadow: 0 8px 24px rgb(0 0 0 / 8%);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; min-width: 280px; min-height: 100dvh; color: var(--ink); background: var(--page); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, #tools:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.page-shell { max-width: 1080px; width: calc(100% - 96px); margin: 0 auto; padding-bottom: 64px; }
.site-header { height: 80px; display: flex; align-items: center; justify-content: space-between; }
.site-mark { width: 35px; height: 35px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 10px; font-size: 19px; font-weight: 600; line-height: 1; }
.theme-switch { display: flex; gap: 2px; padding: 4px; border-radius: 14px; border: 1px solid var(--border); background: var(--subtle); }
.theme-switch button { appearance: none; display: grid; place-items: center; padding: 0; width: 36px; height: 32px; color: var(--muted); border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.theme-switch button[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 1px 4px rgb(0 0 0 / 7%); }
.theme-switch button:hover { color: var(--ink); }
.icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 auto; background: currentColor; mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; }
.sun { --icon: url('./assets/icons/sun.svg'); }
.moon { --icon: url('./assets/icons/moon.svg'); }
.desktop { --icon: url('./assets/icons/desktop.svg'); }
.sliders { --icon: url('./assets/icons/sliders-horizontal.svg'); }
.arrow-up-right { --icon: url('./assets/icons/arrow-up-right.svg'); }
.page-heading { padding: 40px 0 38px; }
h1 { margin: 0; font-size: clamp(38px, 4.3vw, 55px); font-weight: 650; line-height: 1.3; letter-spacing: -.065em; }
.name-period { margin-left: 5px; color: #8a9488; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; scroll-margin-top: 24px; }
.tool-card { --tool-accent: #536d61; display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--border); border-radius: 22px; padding: 7px; background: var(--surface); text-decoration: none; box-shadow: var(--shadow); overflow: hidden; }
.tool-bingsha, .tool-admin { --tool-accent: #a4473e; }
.tool-cipher { --tool-accent: #785cf5; }
.tool-visual { height: 181px; border-radius: 15px; overflow: hidden; position: relative; display: grid; place-items: center; isolation: isolate; }
.tool-category { position: absolute; top: 17px; left: 19px; font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.tool-info { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 23px 20px 22px; min-height: 107px; }
.tool-copy { min-width: 0; }
h2 { margin: 0 0 7px; font-size: 20px; font-weight: 600; letter-spacing: -.045em; line-height: 1.35; }
.tool-copy p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.tool-action { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.pending-label { padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.pending-detail { font-size: 11px; color: var(--muted); white-space: nowrap; }
.tool-bingsha .pending-label { color: var(--game-red); border-color: color-mix(in srgb, var(--game-red) 24%, transparent); background: color-mix(in srgb, var(--game-red) 5%, transparent); }
.live-action { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink); border: 1px solid var(--border); border-radius: 50%; }
.live-action .icon { width: 18px; height: 18px; }
.tool-bingsha .tool-visual { background: var(--game-bg); }
.playing-cards { width: 240px; height: 160px; position: relative; margin-top: 27px; }
.playing-card { width: 84px; height: 119px; border: 1px solid #c6b8a7; border-radius: 7px; background: var(--card-paper); color: #53564a; position: absolute; top: 15px; left: 74px; box-shadow: 0 8px 14px rgb(70 49 31 / 9%); display: grid; place-items: center; }
.playing-card::after { content: ''; position: absolute; inset: 5px; border: 1px solid currentColor; opacity: .28; border-radius: 3px; }
.playing-card b { font: 600 49px/1 "Songti SC", "STSong", "SimSun", serif; }
.playing-card small { position: absolute; top: 9px; left: 10px; font: 11px "Songti SC", "STSong", "SimSun", serif; }
.card-bottom { position: absolute; right: 10px; bottom: 8px; transform: rotate(180deg); font-size: 11px; }
.card-dodge { transform: rotate(-22deg) translate(-42px, -7px); background: #e0dccc; color: #646851; }
.card-peach { transform: rotate(20deg) translate(43px, -4px); background: #d5b3a2; color: #8c453a; }
.card-kill { transform: rotate(-4deg) translateY(-2px); color: #963e34; }
.tool-admin .tool-visual { background: var(--admin-bg); }
.command-art { position: relative; width: 230px; height: 170px; display: grid; place-items: center; }
.command-orbit { width: 124px; height: 124px; border: 1px solid var(--game-line); border-radius: 50%; position: absolute; }
.orbit-one { transform: scaleX(1.65); }
.orbit-two { transform: scaleX(1.65) rotate(45deg); }
.command-seal { width: 88px; height: 95px; position: relative; display: grid; place-items: center; color: var(--game-red); background: var(--admin-bg); border: 1.5px solid var(--game-red); border-radius: 6px; transform: rotate(-8deg); box-shadow: 6px 6px 0 color-mix(in srgb, var(--game-red) 8%, transparent); }
.command-seal::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--game-red); opacity: .5; border-radius: 2px; }
.command-seal b { font: 600 55px/1 "Songti SC", "STSong", "SimSun", serif; padding-bottom: 5px; }
.command-stamp { position: absolute; right: 44px; bottom: 27px; width: 35px; height: 35px; background: var(--game-red); color: var(--admin-bg); border-radius: 10px; display: grid; place-items: center; transform: rotate(8deg); border: 3px solid var(--admin-bg); }
.command-stamp .icon { width: 19px; height: 19px; }
.tool-cipher .tool-visual { background: var(--cipher-bg); }
.cipher-art { display: grid; gap: 20px; justify-items: center; margin-top: 19px; }
.cipher-brand { display: flex; align-items: center; gap: 7px; color: var(--cipher-ink); }
.cipher-brand b { font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 20px; letter-spacing: -1.1px; }
.cipher-mark { display: grid; grid-template-columns: repeat(2, 5px); grid-template-rows: repeat(2, 5px); gap: 3px; padding: 7px; background: #785cf5; border-radius: 8px; transform: rotate(-6deg); }
.cipher-mark i { background: #f2efff; border-radius: 1px; }
.cipher-characters { display: flex; align-items: center; gap: 12px; color: var(--cipher-ink); font: 500 39px/1.1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: -.04em; }
.violet-character { color: var(--violet); }
.password-caret { height: 32px; width: 2px; background: var(--violet); margin-left: -4px; }
.tool-color .tool-visual { background: var(--color-bg); }
.color-art { display: grid; justify-items: center; gap: 9px; margin-top: 18px; }
.color-fan { position: relative; width: 195px; height: 101px; }
.color-sheet { position: absolute; width: 65px; height: 98px; border: 4px solid #f8f7f0; border-radius: 7px; top: 0; left: 65px; transform-origin: 50% 100%; box-shadow: 0 5px 12px rgb(24 44 33 / 8%); }
.color-sheet::after { content: ''; position: absolute; bottom: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: rgb(255 255 255 / 65%); }
.sheet-blue { background: #7998af; transform: rotate(-33deg); }
.sheet-pink { background: #ce8e97; transform: rotate(-11deg); }
.sheet-orange { background: #e6b179; transform: rotate(13deg); }
.sheet-green { background: #809f86; transform: rotate(36deg); }
.color-caption { display: flex; gap: 16px; color: var(--muted); font: 10px/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .07em; }
.tool-generic .tool-visual { background: var(--subtle); }
.generic-mark { font-size: 48px; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1; transform: translateY(-180%); padding: 12px 18px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.skip-link:focus { transform: none; }
.noscript-message, .empty-message { padding: 24px 0; color: var(--muted); font-size: 14px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .is-live { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
  .is-live:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tool-accent) 40%, var(--border)); box-shadow: 0 12px 28px rgb(47 38 72 / 8%); }
  .live-action { transition: color 160ms ease, background 160ms ease; }
  .is-live:hover .live-action { color: #f8f6ff; background: var(--tool-accent); border-color: var(--tool-accent); }
  .playing-card, .command-seal, .color-sheet { transition: transform 240ms ease; }
  .tool-bingsha:hover .card-dodge { transform: rotate(-28deg) translate(-46px, -7px); }
  .tool-bingsha:hover .card-peach { transform: rotate(26deg) translate(47px, -4px); }
  .tool-admin:hover .command-seal { transform: rotate(-3deg); }
  .tool-color:hover .sheet-blue { transform: rotate(-39deg); }
  .tool-color:hover .sheet-green { transform: rotate(42deg); }
}
/* A phone is a launcher: four entries share one dynamic viewport.
   Content fits through layout; scrolling is never disabled or clipped. */
@media (max-width: 767px), (max-width: 932px) and (max-height: 500px) {
  .page-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    height: 100dvh;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .site-header { height: auto; flex: 0 0 52px; }
  .theme-switch { padding: 3px; }
  .theme-switch button { width: 44px; height: 44px; }
  .page-shell > main { display: flex; flex-direction: column; justify-content: center; flex: 1; min-height: 0; }
  .page-heading { flex: 0 0 auto; padding: 16px 0 20px; }
  h1 { font-size: 34px; letter-spacing: -.035em; }
  .tool-grid { flex: 0 1 496px; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tool-card { min-height: 0; padding: 5px; border-radius: 17px; }
  .tool-visual { display: flex; justify-content: center; align-items: center; flex: 1; min-height: 0; height: auto; border-radius: 11px; }
  .tool-visual > div { flex-shrink: 0; }
  .tool-category, .tool-copy p, .pending-detail, .color-caption { display: none; }
  .tool-info { flex: 0 0 auto; min-height: 88px; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 10px; }
  h2 { margin-bottom: 0; font-size: 16px; line-height: 1.4; letter-spacing: -.025em; }
  .tool-action { align-items: flex-start; gap: 0; }
  .pending-label { padding: 4px 7px; }
  .live-action { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
  .live-action .icon { width: 16px; height: 16px; }
  .playing-cards { transform: scale(.62); margin-top: 8px; }
  .command-art { transform: scale(.58); }
  .cipher-art { transform: scale(.68); margin-top: 0; }
  .color-art { transform: scale(.68); margin-top: 0; }
  .is-live:active { background: var(--subtle); }
}
@media (max-width: 359px) {
  .page-shell { padding-right: max(14px, env(safe-area-inset-right)); padding-left: max(14px, env(safe-area-inset-left)); }
  .tool-grid { gap: 10px; }
  .tool-info { padding-right: 8px; padding-left: 8px; }
  .playing-cards { transform: scale(.56); }
  .command-art { transform: scale(.52); }
  .cipher-art, .color-art { transform: scale(.6); }
}
@media (max-width: 767px) and (max-height: 520px) {
  .page-heading { padding: 8px 0 12px; }
  h1 { font-size: 30px; }
  .tool-info { min-height: 74px; padding-top: 8px; padding-bottom: 8px; gap: 6px; }
  h2 { font-size: 15px; }
  .playing-cards, .command-art, .cipher-art, .color-art { transform: scale(.45); margin-top: 0; }
}
@media (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
  .page-shell { max-width: 800px; }
  .page-heading { padding: 8px 0 12px; }
  h1 { font-size: 30px; }
  .tool-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
  .tool-visual { height: 100%; }
  .tool-info { min-height: 0; padding: 8px 12px; gap: 6px; justify-content: center; }
  .playing-cards, .command-art, .cipher-art, .color-art { transform: scale(.32); margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}