.frame { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.frame__band { position: absolute; background: var(--bg); }
.frame__band--top { top: 0; left: 0; right: var(--strip); height: var(--frame); border-bottom: 1px solid var(--rule-2); z-index: 2; }
.frame__band--bottom { bottom: 0; left: 0; right: var(--strip); height: var(--frame); border-top: 1px solid var(--rule-2); z-index: 2; }
.frame__band--left { top: 0; bottom: 0; left: 0; width: var(--frame); border-right: 1px solid var(--rule-2); }

.frame__band--right { top: 0; bottom: 0; right: 0; width: var(--strip); border-left: 1px solid var(--rule-2); }
@media (min-width: 1024px) { .strip.is-split { background: transparent; border-left-color: transparent; } }
.zones { position: absolute; display: flex; color: var(--fg2); }
.zones span {
  flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
  font-weight: 300; font-size: var(--t-micro); letter-spacing: var(--tr-label); line-height: var(--lh-micro);
}
.zones--x { left: var(--frame); right: 0; top: 0; bottom: 0; }
.zones--x span + span::before { content: ''; position: absolute; left: 0; width: 1px; height: 5px; background: var(--rule-2); }
.frame__band--top .zones--x span + span::before { bottom: 0; }
.frame__band--bottom .zones--x span + span::before { top: 0; }
.zones--y { top: var(--frame); bottom: var(--frame); left: 0; right: 0; flex-direction: column; }
.zones--y span + span::before { content: ''; position: absolute; top: 0; right: 0; width: 5px; height: 1px; background: var(--rule-2); }

.strip {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--strip); z-index: 70;
  display: flex; flex-direction: column; background: var(--bg); color: var(--fg);
  border-left: 1px solid var(--rule-2);
}
.strip > * { border-bottom: 1px solid var(--rule-2); }
.strip__mark { height: 108px; display: grid; place-items: center; flex: none; }
.strip__mark .mark { width: 29px; }
.strip__sheet { padding: 12px 0 14px; text-align: center; display: flex; flex-direction: column; gap: 5px; flex: none; }
.strip__no { font-weight: 500; font-size: var(--t-lead); line-height: var(--lh-text); font-variant-numeric: tabular-nums; }
.strip__index { padding: 8px 0; flex: none; }
.strip__index a {
  position: relative; display: flex; align-items: center; justify-content: center; height: 28px;
  font-weight: 300; font-size: var(--t-label); line-height: var(--lh-text); letter-spacing: var(--tr-label); color: var(--fg2); font-variant-numeric: tabular-nums;
  transition: color .25s var(--ease-ui);
}

.strip__index a::before {
  content: ''; position: absolute; left: 14px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  background: var(--accent); transform: scale(0); transition: transform .3s var(--ease-ui);
}
.strip__index a[aria-current] { color: var(--fg); }
.strip__index a[aria-current]::before { transform: scale(1); }

.strip__index a::after {
  content: attr(data-label); position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translate(6px, -50%); white-space: nowrap; pointer-events: none; opacity: 0;
  background: var(--bg); color: var(--fg); border: 1px solid var(--rule-2); padding: 7px 10px 6px;
  font-size: var(--t-label); line-height: var(--lh-text); letter-spacing: var(--tr-label); text-transform: uppercase;
  transition: opacity .2s var(--ease-ui), transform .25s var(--ease-ui);
}
.strip__index a:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) { .strip__index a:hover { color: var(--fg); text-decoration: underline 1px var(--accent); text-underline-offset: .3em; } .strip__index a:hover::after { opacity: 1; transform: translate(0, -50%); } }
.strip__title { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; gap: 10px; padding: 18px 0; overflow: hidden; }
.strip__title > span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }

.strip__title--2 { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; border-bottom-color: transparent !important; }
.strip__name { font-weight: 500; font-size: var(--t-small); line-height: var(--lh-text); }

.strip__clock { padding: 9px 0; text-align: center; display: flex; flex-direction: column; gap: 3px; flex: none; }
.strip__time { font-weight: 300; font-size: var(--t-label); line-height: var(--lh-text); letter-spacing: var(--tr-label); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .strip__clock { padding: 6px 0; }
  .strip__clock > .lbl, .strip__time { line-height: var(--lh-micro); }
}
.strip__menu {
  height: 76px; flex: none; border-bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  transition: background-color .25s var(--ease-ui), color .25s var(--ease-ui);
}
.strip__ico { width: 20px; height: 7px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; position: relative; }
.strip__ico::after { content: ''; position: absolute; left: 0; right: 6px; top: 50%; height: 1px; margin-top: -.5px; background: currentColor; }
@media (hover: hover) { .strip__menu:hover { background: var(--fill-inv); color: var(--fg-inv); } }
@media (hover: hover) and (pointer: fine) { .strip__menu:hover, .index__close { cursor: var(--cur-link-inv); } }
.strip__menu:focus-visible { outline-offset: -4px; }

@media (min-width: 1024px) {
  .strip__title { container-type: size; }
  @container (max-height: 108px) { .strip__name { font-size: var(--t-label); letter-spacing: var(--tr-text); } }
}
@media (min-width: 1024px) and (max-height: 640px) { .strip__title { padding: 10px 0; } }

@media (min-width: 1024px) and (max-height: 700px) {
  .strip__mark { height: 76px; }
  .strip__index a { height: 24px; }
}

@media (min-width: 1024px) and (max-height: 520px) { .strip__clock { display: none; } }

@media (min-width: 1024px) and (max-height: 440px) { .strip__index { display: none; } }

.house {
  position: fixed; left: 0; right: 0; top: 0; height: 100%; z-index: 75; pointer-events: none;
  background: var(--ground-dark); opacity: 0; transform-origin: 50% 0; transform: scaleY(0); will-change: transform, opacity;
}

.house { right: var(--strip); }
.house--strip { left: auto; right: 0; width: var(--strip); }
html.rm .house { display: none; }

.intro { display: none; position: fixed; inset: 0; z-index: 300; background: var(--bg); }
html.intro-on .intro, .intro.is-live { display: block; }
.intro__cons { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.intro__cl { position: absolute; overflow: hidden; pointer-events: none; }
.intro__cl.is-x { height: 1px; }
.intro__cl.is-y { width: 1px; }
.intro__cl i { position: absolute; inset: 0; }
.intro__cl.is-x i { background: repeating-linear-gradient(90deg, var(--cons) 0 22px, transparent 22px 27px, var(--cons) 27px 30px, transparent 30px 35px); }
.intro__cl.is-y i { background: repeating-linear-gradient(180deg, var(--cons) 0 22px, transparent 22px 27px, var(--cons) 27px 30px, transparent 30px 35px); }
.intro__cons text { font-family: var(--font); font-weight: 300; font-size: var(--t-micro); letter-spacing: var(--tr-label); fill: var(--fg2); }
.intro__mark { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; }
.intro__mark .mark { width: 100%; height: 100%; }

html.intro-on .strip, html.intro-on .frame { opacity: 0; }
html.intro-fly .strip__mark .mark { opacity: 0; }
.strip, .frame { transition: opacity .5s var(--ease-ui); }

.index { position: fixed; inset: 0; z-index: 180; background: var(--ground-index); overflow-y: auto; overscroll-behavior: contain; }
.index[data-ground="light"] { --bg: var(--ground-index); }
.index__in {
  min-height: 100%; padding: calc(var(--frame) + 28px) var(--rx) calc(var(--frame) + 28px) var(--lx);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-content: start;
}
.index__head { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--fg); }
.index__list { grid-column: 1 / 9; margin-top: 12px; }
.index__list a {
  display: grid; grid-template-columns: 3.2em 1fr auto; align-items: baseline; gap: 12px; padding: 14px 0 12px;
  border-bottom: 1px solid var(--rule); position: relative;
}
.index__list .t { font-weight: 500; font-size: var(--t-title); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.index__list .t .ul { --ul-w: max(1px, .045em); }
.index__list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-plot); }
.index__list a[aria-current]::after { transform: scaleX(1); }
.index__list a[aria-current]::after { background: var(--accent); }
.index__list a:focus-visible::after { transform: scaleX(1); }
.index__list .m { color: var(--fg2); text-align: right; }
.index__side { grid-column: 10 / 13; margin-top: 12px; display: flex; flex-direction: column; gap: 36px; padding-top: 16px; }
.index__side h3 { display: block; color: var(--fg2); padding-bottom: 8px; font-weight: 300; }
.index__close {
  position: fixed; right: 0; bottom: 0; width: var(--strip); height: 76px; z-index: 190;
  border-left: 1px solid var(--rule-2); border-top: 1px solid var(--rule-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; background: var(--fill-inv); color: var(--fg-inv);
}
.index__close:focus-visible { outline-color: var(--accent-on-dark); outline-offset: -5px; }

html.js:not(.rm) .index.is-anim { animation: sheetIn .6s var(--ease-light) backwards; }
html.js:not(.rm) .index.is-out { animation: sheetOut .32s var(--ease-ui) both; pointer-events: none; }
html.js:not(.rm) .index.is-anim .index__list li { animation: rowIn .7s var(--ease-light) both; animation-delay: calc(.08s + var(--i) * .04s); }
@keyframes sheetIn { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes sheetOut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes rowIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.mail {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 0 14px; border-top: 1px solid var(--rule); font-weight: 300; font-size: var(--t-body); line-height: var(--lh-body); min-height: 44px;
  transition: color .25s var(--ease-ui);
}
.soc { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0 10px; border-top: 1px solid var(--rule); font-weight: 300; font-size: var(--t-body); line-height: var(--lh-body); min-height: 44px; transition: color .25s var(--ease-ui); }
.soc .lbl { color: var(--fg2); }
@media (hover: hover) {

  .mail:hover .arr { width: 36px; }

  a.soc:hover .lbl { color: inherit; }
}

@media (max-width: 1023px) {
  .strip {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: calc(var(--bar) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px); flex-direction: row; border-left: 0; border-top: 1px solid var(--rule-2);
  }
  .strip > * { border-bottom: 0; border-right: 1px solid var(--rule-2); }
  .strip__mark { width: 56px; height: 100%; }
  .strip__mark .mark { width: 17px; }
  .strip__sheet { flex-direction: row; align-items: center; gap: 8px; padding: 0 14px; }
  .strip__sheet .lbl { display: none; }
  .strip__index { display: none; }
  .strip__title { flex: 1; padding: 0 14px; justify-content: flex-start; align-items: center; border-right: 0; }
  .strip__title > span { writing-mode: horizontal-tb; transform: none; }

  .strip__clock { flex-direction: row; align-items: center; gap: 8px; padding: 0 14px; border-left: 1px solid var(--rule-2); border-right: 0; }
  .strip__menu { height: 100%; width: 92px; flex-direction: row; gap: 10px; border-right: 0; border-left: 1px solid var(--rule-2); }
  .frame__band--bottom, .frame__band--right { display: none; }
  .frame__band--top { right: 0; }
  .zones span { visibility: hidden; }
  .zones span::before { visibility: visible; }
  .index__close {
    left: 0; width: auto; height: calc(var(--bar) + env(safe-area-inset-bottom, 0px)); flex-direction: row; gap: 10px;
    padding-bottom: env(safe-area-inset-bottom, 0px); border-left: 0;
  }
  .index__in { padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom, 0px) + 28px); }
  .index { scroll-padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom, 0px) + 12px); }
  .index__list { grid-column: 1 / -1; }
  .index__side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 28px 40px; }
  .index__side .grp { min-width: 220px; flex: 1; }
}
@media (max-width: 640px) {
  .strip__clock { display: none; }
  .index__list a { grid-template-columns: 2.4em 1fr; }
  .index__list .m { grid-column: 2; text-align: left; margin-top: -2px; }
}

@media (max-width: 355px) {
  .index__list a { grid-template-columns: auto 1fr; }
  .index__list .t { grid-column: 1 / -1; grid-row: 1; }
  .index__list .no { grid-column: 1; grid-row: 2; }
  .index__list .m { grid-row: 2; }
}

@media (max-width: 1023px) and (max-height: 480px) {
  .index__in { padding-top: calc(var(--frame) + 16px); }
  .index__list { margin-top: 4px; }
  .index__list a { padding: 9px 0 8px; }
}

@media (max-width: 360px) {
  .strip__mark { width: 48px; }
  .strip__sheet { padding: 0 12px; }
  .strip__title { padding: 0 12px; }
  .strip__menu { width: 84px; }
}

@media (max-width: 1023px) and (max-height: 480px) {
  :root { --bar: 44px; }
  .strip__mark { width: 44px; }
  .strip__menu { width: 76px; }
}

@media (forced-colors: active) {
  .strip__index a::before { forced-color-adjust: none; background: Highlight; }
  .index__close { border: 1px solid CanvasText; }
}

@media (max-width: 1023px) {
  .strip, .index__close { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}