/* 四角导航：无侧栏、无顶栏。全部是切角碎片，没有圆角矩形。 */
.chrome { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.corner { position: absolute; pointer-events: auto; }
.corner-logo {
  top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left));
  display: grid; place-items: center; width: 62px; height: 62px; background: var(--sh-white); box-shadow: inset 0 0 0 2px var(--sh-klein-500);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: transform .3s var(--ease-out);
}
.corner-logo img { width: 35px; height: 43px; object-fit: contain; }
.corner-logo:hover { transform: scale(1.06) rotate(-3deg); }
.corner-actions { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: flex; gap: 6px; }
.act {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; height: 48px; padding: 0 13px;
  background: var(--sh-klein-500); color: var(--sh-white);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: transform .25s var(--ease-out), background-color .2s;
}
.act:nth-child(2) { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.act:hover { background: var(--sh-klein-700); transform: translateY(-2px) scale(1.04); }
.act:active { transform: scale(.94); background: var(--sh-burgundy); }
.act kbd { opacity: .85; }
.act:focus-visible { outline: 0; background: var(--sh-burgundy); transform: scale(1.08); }
:root[data-theme="night"] .act { background: var(--sh-klein-500); outline-color: var(--sh-white); }
:root[data-theme="night"] .act:focus-visible { background: var(--sh-white); color: var(--sh-klein-500); }
.ic-moon { display: none; }
:root[data-theme="night"] .ic-sun { display: none; }
:root[data-theme="night"] .ic-moon { display: block; }

.corner-index {
  left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; align-items: baseline; gap: 4px; padding: 10px 18px 8px 14px; background: var(--sh-white); color: var(--sh-klein-500);
  font: 400 22px/1 var(--font-display); letter-spacing: .06em;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
}
.corner-index b { font-weight: 400; color: var(--sh-burgundy); display: inline-block; min-width: 1.2em; }
.corner-index b.tick { animation: tick .5s var(--ease-out); }
@keyframes tick { from { transform: translateY(.6em); opacity: 0; } to { transform: none; opacity: 1; } }
.corner-progress {
  right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 10px 14px 8px 18px; background: var(--sh-white); color: var(--sh-klein-500);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%);
}
.corner-progress i { display: block; position: relative; width: 72px; height: 4px; background: rgba(5, 55, 180, .22); }
.corner-progress i::after { content: ""; position: absolute; inset: 0; background: var(--sh-klein-500); transform: scaleX(var(--p, 0)); transform-origin: left; }
.corner-progress b { font: 400 16px/1 var(--font-display); min-width: 3.4ch; text-align: right; letter-spacing: .04em; }

/* 菜单：蓝面全屏，大号文字 */
.menu {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--sh-klein-500); color: var(--sh-white); overflow: auto;
}
.menu::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 0 62%, var(--sh-klein-700) 62% 78%, transparent 78%), linear-gradient(115deg, transparent 0 84%, var(--sh-klein-950) 84% 88%, transparent 88%); }
.menu-nav { position: relative; display: grid; gap: 4px; width: min(920px, 92vw); padding: 80px 0; }
.menu-nav a {
  position: relative; display: flex; align-items: baseline; gap: 20px; padding: 10px 24px; text-decoration: none; overflow: hidden; isolation: isolate;
  transition: transform .4s var(--ease-out), color .2s;
}
.menu-nav a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sh-white);
  clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 100%, 0 100%); transform: translateX(-101%); transition: transform .45s var(--ease-wipe);
}
.menu-nav a:hover, .menu-nav a:focus-visible { color: var(--sh-klein-500); transform: translateX(14px); outline: 0; }
.menu-nav a:hover::before, .menu-nav a:focus-visible::before { transform: none; }
.menu-nav a:focus-visible::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--sh-burgundy); }
.mi-no { font: 400 18px/1 var(--font-display); opacity: .7; letter-spacing: .1em; }
.mi-cn { font: 900 clamp(40px, 8vw, 92px)/1.15 var(--font-cn); letter-spacing: .06em; }
.mi-en { margin-left: auto; font: 400 clamp(16px, 2.4vw, 28px)/1 var(--font-display); letter-spacing: .12em; opacity: .75; }
.menu-close {
  position: absolute; z-index: 2; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right));
  width: 48px; height: 48px; display: grid; place-items: center; background: var(--sh-white); color: var(--sh-klein-500);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); transition: transform .25s var(--ease-out), background-color .2s, color .2s;
}
.menu-close:hover { transform: rotate(90deg) scale(1.06); }
.menu-close:focus-visible { outline: 0; background: var(--sh-burgundy); color: var(--sh-white); }
.menu :focus-visible { outline-color: var(--sh-white); }

/* 命令面板 */
.palette { position: fixed; inset: 0; z-index: 85; display: grid; align-items: start; justify-items: center; padding: 14vh 14px 14px; background: rgba(8, 6, 10, .55); }
.palette-box {
  width: min(680px, 100%); max-height: 70svh; display: flex; flex-direction: column; background: var(--sh-white); color: var(--sh-klein-950);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  border-top: 5px solid var(--sh-klein-500);
}
.palette-input { display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 22px; color: var(--sh-klein-500); border-bottom: 2px solid var(--sh-klein-500); }
.palette-input input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; outline: 0; color: var(--sh-klein-950); font: 600 18px/1.2 var(--font-cn); }
.palette-input input::placeholder { color: #5a6bb0; }
.palette-input kbd { padding: 5px 8px; background: var(--sh-klein-500); color: var(--sh-white); clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
.palette-list { overflow: auto; padding: 8px 0 20px; }
.palette-list li {
  display: flex; align-items: center; gap: 12px; padding: 11px 22px; cursor: pointer; border-left: 5px solid transparent; position: relative;
  transition: background-color .15s, border-color .15s, padding-left .2s var(--ease-out);
}
.palette-list li[aria-selected="true"] { background: var(--sh-klein-500); color: var(--sh-white); border-left-color: var(--sh-burgundy); padding-left: 28px; }
.palette-list .pl-kind { flex: none; min-width: 44px; padding: 2px 8px; text-align: center; font: 700 12px/1.6 var(--font-cn); letter-spacing: .08em; color: var(--sh-white); background: var(--sh-klein-500); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.palette-list li[aria-selected="true"] .pl-kind { background: var(--sh-white); color: var(--sh-klein-500); }
.palette-list .pl-title { font-weight: 700; }
.palette-list .pl-hint { margin-left: auto; font-size: 13px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.palette-empty { padding: 26px 22px 30px; color: #3a4f9a; font-weight: 600; }

@media (max-width: 699px) {
  .corner-logo { width: 54px; height: 54px; }
  .corner-logo img { width: 30px; height: 37px; }
  .act kbd { display: none; }
  .act { min-width: 46px; height: 46px; padding: 0 11px; }
  .corner-progress i { width: 44px; }
  .corner-index { font-size: 18px; }
  .palette { padding-top: 9vh; }
}
@media (hover: none) {
  .act kbd { display: none; }
}