h1{ margin:0 0 10px; font-size: clamp(34px, 4vw, 46px); }
h2{ margin: 26px 0 10px; font-size: 16px; color: var(--muted); }

ul{ list-style:none; padding:0; margin: 12px 0 0; display:flex; flex-direction:column; gap:12px; }

a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  color: var(--fg);
  text-decoration:none;
}

/* iOS WebKit: prevent specific link elements from bleeding through the backface. */
.wk-face a{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0.01px);
  -webkit-transform: translateZ(0.01px);
}

.link-content{
  display:flex;
  align-items:center;
  gap:10px;
}

.thumb{
  width:36px;
  height:36px;
  border-radius:10px;
  object-fit:cover;
  opacity: 0.85;
  background:#fff;
  border:1px solid rgba(22,22,26,.08);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

a:hover{ border-color: rgba(216,90,166,.35); }

h1{
  font-weight: 700;
  letter-spacing: -0.01em;
}

a::after{
  content: "→";
  color: var(--accent);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  opacity: .6;
  transition: transform .15s ease, opacity .15s ease;
}
a:hover::after{
  transform: translateX(4px);
  opacity: 1;
}

.name{
  margin: 0 0 20px;
  line-height: 1.3;
}

.name .jp{
  display: block;
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.name .en{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--muted);
}

.hero{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.name-text{
  display: flex;
  flex-direction: column;
}


.avatar{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 0.5px solid rgba(36, 33, 33, 0.06);
  box-shadow:
    0 2px 12px rgba(32, 26, 26, 0.1),
    0 0 0 2px rgba(247, 187, 205, 0.65);
}

.wk-hero{
  margin: 10px 0 24px;
}

.wk-lead{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
}

.wk-entry{
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wk-entry-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wk-entry-button{
  border: 1px solid rgba(22,22,26,.12);
  background: rgba(255,255,255,.78);
  border-radius: 999px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: inherit;
  color: var(--fg);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(22,22,26,.08);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.wk-entry-button:hover{
  transform: translateY(-1px);
  border-color: rgba(216,90,166,.35);
  box-shadow: 0 12px 28px rgba(22,22,26,.12);
}

.wk-entry-button:focus-visible{
  outline: none;
  border-color: rgba(216,90,166,.5);
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 4px rgba(216,90,166,.28);
}

.wk-entry-button.is-code{
  border-color: rgba(70,130,255,.28);
}

.wk-entry-label{
  font-weight: 700;
  font-size: 16px;
}

.wk-entry-sub{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .08em;
}

.wk-portal{
  position: relative;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(22,22,26,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 40px rgba(22,22,26,.12);
  transform: translateY(-2px);
}

.wk-portal-inner{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.wk-portal-image{
  width: 88px;
  height: 88px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(22,22,26,.1);
  box-shadow: 0 8px 20px rgba(22,22,26,.12);
  background: #fff;
}

.wk-portal-body{
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 220px;
}

.wk-portal-lead{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.wk-portal-link{
  align-self: flex-start;
  padding: 10px 14px;
  font-size: 14px;
}

.wk-portal-link::after{
  font-size: 18px;
}

.wk-back-links{
  max-width: 720px;
  margin: 0 auto 24px;
}

.wk-back-note{
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.wk-back-linklist{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.wk-back-linklist a{
  justify-content: space-between;
  padding: 12px 14px;
}

.wk-orb-toggle{
  position:absolute;
  left: var(--orb-center-x); /* Center with translateX so scrollbar width doesn't affect horizontal position. */
  bottom: var(--orb-bottom);
  transform: translateX(-50%) translateZ(0);
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 999px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 6;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}

.wk-orb-core{
  position: relative;
  overflow: hidden;
  width: calc(var(--orb-core-scale) * 100%);
  height: calc(var(--orb-core-scale) * 100%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.7), rgba(255,255,255,.3) 40%, transparent 65%),
    radial-gradient(90% 70% at 15% 25%, rgba(255,140,180,var(--orb-aurora-opacity)) 0 30%, transparent 50%),
    radial-gradient(90% 80% at 80% 22%, rgba(120,200,255,var(--orb-aurora-opacity)) 0 28%, transparent 50%),
    radial-gradient(75% 65% at 88% 48%, rgba(255,220,120,var(--orb-aurora-opacity)) 0 24%, transparent 46%),
    radial-gradient(80% 70% at 72% 72%, rgba(100,230,170,var(--orb-aurora-opacity)) 0 25%, transparent 48%),
    radial-gradient(90% 80% at 22% 75%, rgba(175,140,255,var(--orb-aurora-opacity)) 0 28%, transparent 50%),
    radial-gradient(60% 50% at 50% 45%, rgba(255,160,200,calc(var(--orb-aurora-opacity) * 0.4)) 0 18%, transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(232,242,255,.82), rgba(222,235,250,.55) 50%, rgba(205,220,242,.38) 100%);
  box-shadow:
    /* 内側ハイライト（既存） */
    inset 0 0 0 1px rgba(255,255,255,.7),
    /* 内側下部の影（既存） */
    inset 0 -6px 14px rgba(22,22,26,.22),
    /* ベゼル内縁：薄いハイライト（面取り感） */
    0 0 0 0.5px rgba(255,255,255,.18),
    /* 外周暗線：隙間感（部品境界） */
    0 0 0 1.25px rgba(22,22,26,.2),
    /* 外側の影（既存） */
    0 6px 14px rgba(22,22,26,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.wk-orb-core::before{
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: inherit;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.65) 0%, rgba(255,255,255,.4) 35%, rgba(255,255,255,.15) 60%, transparent 80%),
    radial-gradient(90% 90% at 62% 70%, rgba(22,22,26,.12) 0 28%, transparent 65%),
    radial-gradient(120% 120% at 18% 78%, rgba(255,255,255,calc(var(--orb-glitter-opacity) * 0.4)) 0 18%, transparent 55%),
    radial-gradient(110% 110% at 78% 22%, rgba(210,240,255,calc(var(--orb-glitter-opacity) * 0.35)) 0 16%, transparent 52%),
    radial-gradient(140% 140% at 62% 72%, rgba(255,220,245,calc(var(--orb-glitter-opacity) * 0.3)) 0 18%, transparent 55%);
  opacity: var(--orb-inner-opacity);
  transform: translate(var(--orb-inner-offset-x), var(--orb-inner-offset-y)) scale(var(--orb-inner-scale));
  transition: transform .22s ease .04s, opacity .2s ease;
  pointer-events: none;
}

.wk-orb-core::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  background:
    radial-gradient(8% 8% at 28% 22%, rgba(255,255,255,.95) 0 40%, transparent 100%),
    radial-gradient(5% 5% at 35% 28%, rgba(255,255,255,.8) 0 50%, transparent 100%),
    radial-gradient(4% 4% at 68% 35%, rgba(255,255,255,.7) 0 50%, transparent 100%),
    radial-gradient(140% 100% at 22% 18%, rgba(255,255,255,var(--orb-reflect-opacity)) 0 28%, transparent 56%),
    radial-gradient(120% 120% at 80% 88%, rgba(255,255,255,calc(var(--orb-reflect-opacity) * 0.35)) 0 22%, transparent 55%),
    linear-gradient(140deg, rgba(255,255,255,calc(var(--orb-reflect-opacity) * 0.4)) 0%, transparent 44%);
  transform: translate(0, 0);
  transition: transform .2s ease, opacity .2s ease;
  opacity: 1;
  pointer-events: none;
}

.wk-orb-toggle:hover .wk-orb-core{
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 -4px 8px rgba(22,22,26,.14),
    0 0 0 0.5px rgba(255,255,255,.18),
    0 0 0 1.25px rgba(22,22,26,.2),
    0 8px 14px rgba(22,22,26,.2);
}

.wk-orb-toggle:hover .wk-orb-core::after{
  transform: translate(calc(var(--orb-highlight-shift) * -1), calc(var(--orb-highlight-shift) * -1));
  opacity: var(--orb-highlight-hover);
}

.wk-orb-toggle:hover .wk-orb-core::before{
  transform: translate(calc(var(--orb-inner-offset-x) + var(--orb-inner-shift)), calc(var(--orb-inner-offset-y) - var(--orb-inner-shift))) scale(var(--orb-inner-scale));
}

.wk-orb-toggle:active .wk-orb-core::before{
  transform: translate(calc(var(--orb-inner-offset-x) - (var(--orb-inner-shift) * 0.6)), calc(var(--orb-inner-offset-y) + (var(--orb-inner-shift) * 0.6))) scale(var(--orb-inner-scale));
}

.wk-orb-toggle:focus-visible{
  outline: none;
}

.wk-orb-toggle:focus-visible .wk-orb-core{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.9),
    0 0 0 4px rgba(216,90,166,.45),
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 -4px 8px rgba(22,22,26,.12),
    0 0 0 0.5px rgba(255,255,255,.18),
    0 0 0 1.25px rgba(22,22,26,.2),
    0 8px 16px rgba(22,22,26,.18);
}

.wk-back-hero{
  max-width: 720px;
  margin: 0 auto 28px;
}

.wk-kicker{
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: 12px;
  color: var(--muted);
}

.wk-title{
  margin: 0 0 8px;
  font-size: clamp(28px, 5vw, 40px);
}

.wk-snapshots{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 auto 28px;
  max-width: 920px;
}

.wk-shot{
  position: relative;
  padding: 16px;
  border-radius: 20px;
  border: 1px dashed rgba(22,22,26,.16);
  background: rgba(255,255,255,.65);
}

.wk-shot-label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.wk-shot-frame{
  height: 160px;
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(216,90,166,.12), rgba(70,130,255,.12)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.8) 0 12px, rgba(255,255,255,.35) 12px 24px);
  border: 1px solid rgba(22,22,26,.08);
}

.wk-shot-preview{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* ========================================
   Deck (inline layout)
   ======================================== */
.wk-deck{
  position: relative;
}

.wk-deck-card{
  cursor: pointer;
}

.wk-deck .wk-deck-card:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--card-radius);
}

/* ========================================
   Holder Expression (page as card stack)
   ======================================== */

.wk-scene {
  position: relative; /* Ensure pseudo-elements position correctly */
}

.wk-scene > * {
  position: relative;
  z-index: 1; /* Keep all children above holder pseudo-elements */
}

.wk-scene::before,
.wk-scene::after {
  content: "";
  position: absolute;
  inset: clamp(14px, 2vw, 28px);
  border-radius: var(--card-radius);
  border: 1px solid rgba(22,22,26,.06);
  background: rgba(255,255,255,.25);
  pointer-events: none;
  z-index: 0; /* Behind all content */
}

.wk-scene::before {
  transform: translate(3px, 3px) rotate(0.8deg);
  opacity: 0.5;
}

.wk-scene::after {
  transform: translate(6px, 5px) rotate(1.5deg);
  opacity: 0.3;
}

/* ========================================
   PC Shelf Mode: Masonry Tiles (#48)
   ======================================== */
.wk-shelf-tiles{
  display: none;
}

html[data-wk-mode="shelf"] .wk-shelf-tiles{
  display: block;
  columns: 3;
  column-gap: clamp(12px, 2vw, 20px);
  margin-top: clamp(16px, 3vw, 28px);
}

html[data-wk-mode="shelf"] .wk-card-rotator{
  box-shadow: none;
}

html[data-wk-mode="shelf"] .wk-face,
html[data-wk-mode="shelf"] .wk-back{
  background: transparent;
  border: 0;
  box-shadow: none;
}

html[data-wk-mode="shelf"] .wk-scene::before,
html[data-wk-mode="shelf"] .wk-scene::after{
  display: none;
}

html[data-wk-mode="shelf"] .wk-shelf-tile{
  display: block;
  break-inside: avoid;
  margin-bottom: clamp(12px, 2vw, 20px);
}

html[data-wk-mode="shelf"] .wk-shelf-frame{
  display: block;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--card-face-bg);
  border: var(--card-frame-border);
  box-shadow: var(--card-frame-shadow);
}

html[data-wk-mode="shelf"] .wk-shelf-frame img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: inherit;
  border: 0;
  box-shadow: none;
}

/* ========================================
   Card Tag (#49)
   ======================================== */
.wk-card-tag{
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--muted);
  background: rgba(255,255,255,.88);
  border-radius: 4px;
  pointer-events: none;
  user-select: none;
}

/* Illustration cards in portal (通常表示) */
.wk-card-tag-host{
  position: relative;
  display: inline-block;
}

.wk-card-tag-host .wk-portal-image{
  display: block;
}

/* Tech cards: tag inside .wk-shot (通常表示) */
.wk-shot .wk-card-tag{
  bottom: auto;
  top: 8px;
  left: auto;
  right: 8px;
}

/* PC Shelf Mode: tag in tile */
html[data-wk-mode="shelf"] .wk-shelf-frame{
  position: relative;
}

html[data-wk-mode="shelf"] .wk-shelf-frame .wk-card-tag{
  bottom: 10px;
  left: 10px;
  top: auto;
  right: auto;
}