/* ── 自動プロファイル切替アニメーション（5サイト共通） ──────────────
   中身は autoprofile.js が組み立てる。配色は .ap--{base,gaming,office,home,mac}、
   画面の作り（Windows／Mac）は .ap-os-{win,mac} で切り替える。
   1280×720 で作り、枠の幅に合わせて丸ごと縮小する。 */

.ap-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
}
.ap-stage {
  position: absolute;
  left: 0; top: 0;
  width: 1280px; height: 720px;
  transform-origin: 0 0;
  transform: scale(var(--s, 1));
  font-family: var(--ap-font);
  color: var(--ap-text);
  background: var(--ap-bg);
  box-shadow: inset 0 0 0 2px var(--ap-frame-border);
  border-radius: 14px;
  /* サイト側の body の設定を持ち込まない */
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  font-weight: 400;
}
/* サイト側の全体リセット（box-sizing: border-box）を打ち消し、試作と同じ寸法にする */
.ap-stage, .ap-stage *, .ap-stage *::before, .ap-stage *::after { box-sizing: content-box; }

/* ── 配色 ── */
.ap--base {
  --ap-font: 'Inter', 'Noto Sans JP', sans-serif;
  --ap-bg:
    radial-gradient(ellipse 60% 70% at 78% 55%, rgba(0,119,230,0.16), transparent 70%),
    linear-gradient(rgba(0,180,255,0.04) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(0,180,255,0.04) 1px, transparent 1px) 0 0 / 60px 60px,
    #050a0f;
  --ap-frame-border: rgba(0,180,255,0.18);
  --ap-text: #e8f0f8;
  --ap-muted: #b8cfe0;
  --ap-dim: #8aa3bb;
  --ap-accent: #00d4ff;
  --ap-accent-ink: #00141c;
  --ap-em: #00d4ff;
  --ap-em-shadow: none;
  --ap-panel-bg: rgba(10,21,32,0.9);
  --ap-panel-border: rgba(0,180,255,0.25);
  --ap-panel-shadow: none;
  --ap-soft: rgba(0,180,255,0.06);
  --ap-hs-bg: #0e7490;
  --ap-hs-border: #67e8f9;
  --ap-lb-bg: #0a1520;
  --ap-lb-text: #e8f0f8;
  --ap-lb-border: rgba(103,232,249,0.6);
  --ap-mouse-shadow: drop-shadow(0 8px 30px rgba(0,0,0,0.8));
  --ap-desk-bg: radial-gradient(ellipse 80% 70% at 30% 20%, #16365a, transparent 70%), linear-gradient(160deg, #0d2340, #071423);
  --ap-desk-border: #1d3550;
  --ap-toast-bg: rgba(10,21,32,0.95);
  --ap-toast-text: #e8f0f8;
}
.ap--gaming {
  --ap-font: 'Exo 2', 'Noto Sans JP', sans-serif;
  --ap-bg:
    radial-gradient(ellipse 55% 65% at 80% 50%, rgba(136,0,255,0.22), transparent 70%),
    radial-gradient(ellipse 40% 50% at 10% 10%, rgba(255,0,204,0.12), transparent 70%),
    linear-gradient(rgba(255,0,204,0.05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(0,255,255,0.04) 1px, transparent 1px) 0 0 / 48px 48px,
    #04000E;
  --ap-frame-border: rgba(255,0,204,0.35);
  --ap-text: #E8E0FF;
  --ap-muted: #c4b8ee;
  --ap-dim: #9a8fc0;
  --ap-accent: #00FFFF;
  --ap-accent-ink: #04000E;
  --ap-em: #FF00CC;
  --ap-em-shadow: 0 0 18px rgba(255,0,204,0.7);
  --ap-panel-bg: rgba(10,0,32,0.9);
  --ap-panel-border: rgba(255,0,204,0.45);
  --ap-panel-shadow: 0 0 30px rgba(255,0,204,0.15);
  --ap-soft: rgba(0,255,255,0.06);
  --ap-hs-bg: #8800FF;
  --ap-hs-border: #ff7ae6;
  --ap-lb-bg: #0A0020;
  --ap-lb-text: #E8E0FF;
  --ap-lb-border: rgba(0,255,255,0.55);
  --ap-mouse-shadow: drop-shadow(0 0 24px rgba(136,0,255,0.6));
  --ap-desk-bg: radial-gradient(ellipse 80% 70% at 30% 20%, #2a0a5a, transparent 70%), linear-gradient(160deg, #14003a, #06001a);
  --ap-desk-border: #3a1670;
  --ap-toast-bg: rgba(10,0,32,0.95);
  --ap-toast-text: #E8E0FF;
}
.ap--office {
  --ap-font: 'Inter', 'Noto Sans JP', sans-serif;
  --ap-bg:
    radial-gradient(ellipse 55% 65% at 80% 50%, rgba(107,70,255,0.10), transparent 70%),
    #F5F6FA;
  --ap-frame-border: #E2E6EE;
  --ap-text: #0D1B2A;
  --ap-muted: #3D5068;
  --ap-dim: #7A8CA0;
  --ap-accent: #6B46FF;
  --ap-accent-ink: #ffffff;
  --ap-em: #6B46FF;
  --ap-em-shadow: none;
  --ap-panel-bg: #ffffff;
  --ap-panel-border: #E2E6EE;
  --ap-panel-shadow: 0 12px 40px rgba(13,27,42,0.10);
  --ap-soft: #F4F2FF;
  --ap-hs-bg: #6B46FF;
  --ap-hs-border: #C9BCFF;
  --ap-lb-bg: #ffffff;
  --ap-lb-text: #0D1B2A;
  --ap-lb-border: #C9BCFF;
  --ap-mouse-shadow: drop-shadow(0 10px 22px rgba(13,27,42,0.25));
  --ap-desk-bg: radial-gradient(ellipse 80% 70% at 30% 20%, #2D5382, transparent 70%), linear-gradient(160deg, #1E3A5F, #0D1B2A);
  --ap-desk-border: #cfd6e2;
  --ap-toast-bg: #ffffff;
  --ap-toast-text: #0D1B2A;
}
.ap--home {
  --ap-font: 'Noto Sans JP', sans-serif;
  --ap-bg:
    radial-gradient(ellipse 55% 65% at 80% 50%, rgba(193,122,90,0.12), transparent 70%),
    #FAF8F5;
  --ap-frame-border: #DDD5C4;
  --ap-text: #3D3228;
  --ap-muted: #6B5F52;
  --ap-dim: #9E9087;
  --ap-accent: #C17A5A;
  --ap-accent-ink: #ffffff;
  --ap-em: #C17A5A;
  --ap-em-shadow: none;
  --ap-panel-bg: #FDFAF7;
  --ap-panel-border: #DDD5C4;
  --ap-panel-shadow: 0 8px 40px rgba(139,106,66,0.14);
  --ap-soft: #F6EEE6;
  --ap-hs-bg: #C17A5A;
  --ap-hs-border: #EBC3AE;
  --ap-lb-bg: #FDFAF7;
  --ap-lb-text: #3D3228;
  --ap-lb-border: #E3B9A3;
  --ap-mouse-shadow: drop-shadow(0 10px 22px rgba(139,106,66,0.3));
  --ap-desk-bg: radial-gradient(ellipse 80% 70% at 30% 20%, #A8C5A0, transparent 70%), linear-gradient(160deg, #7A9E7E, #6B8FA8);
  --ap-desk-border: #DDD5C4;
  --ap-toast-bg: #FDFAF7;
  --ap-toast-text: #3D3228;
}
.ap--mac {
  --ap-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Noto Sans JP', sans-serif;
  --ap-bg:
    radial-gradient(ellipse 55% 65% at 80% 50%, rgba(0,113,227,0.08), transparent 70%),
    #f5f5f7;
  --ap-frame-border: #d2d2d7;
  --ap-text: #1d1d1f;
  --ap-muted: #424245;
  --ap-dim: #86868b;
  --ap-accent: #0071e3;
  --ap-accent-ink: #ffffff;
  --ap-em: #0071e3;
  --ap-em-shadow: none;
  --ap-panel-bg: #ffffff;
  --ap-panel-border: #d2d2d7;
  --ap-panel-shadow: 0 12px 40px rgba(0,0,0,0.08);
  --ap-soft: rgba(0,113,227,0.06);
  --ap-hs-bg: #0071e3;
  --ap-hs-border: #9ccaff;
  --ap-lb-bg: #ffffff;
  --ap-lb-text: #1d1d1f;
  --ap-lb-border: #9ccaff;
  --ap-mouse-shadow: drop-shadow(0 10px 22px rgba(0,0,0,0.22));
  --ap-desk-bg:
    radial-gradient(ellipse 70% 80% at 15% 100%, #f7a3c4, transparent 60%),
    radial-gradient(ellipse 70% 70% at 90% 10%, #6fb6ff, transparent 60%),
    linear-gradient(160deg, #3a5bd9, #8a5cf0);
  --ap-desk-border: #d2d2d7;
  --ap-toast-bg: rgba(246,246,248,0.92);
  --ap-toast-text: #1d1d1f;
}

/* ── 見出し ── */
.ap-title {
  position: absolute;
  left: 40px; top: 26px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 1px;
}
.ap-title em { font-style: normal; color: var(--ap-em); text-shadow: var(--ap-em-shadow); }
.ap-sub { position: absolute; left: 42px; top: 76px; font-size: 19px; color: var(--ap-muted); }
.ap-sub b { color: var(--ap-text); }

/* ── PC画面 ── */
.ap-desk {
  position: absolute;
  left: 40px; top: 122px;
  width: 820px; height: 560px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--ap-desk-border);
  background: var(--ap-desk-bg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.ap-win {
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.ap-win::after {             /* 後ろにあるウィンドウを少し暗く */
  content: "";
  position: absolute; inset: 0;
  background: rgba(5,12,22,0.3);
  transition: opacity .2s;
  pointer-events: none;
}
.ap-win.is-front { box-shadow: 0 16px 44px rgba(0,0,0,0.5), 0 0 0 2px var(--ap-accent); }
.ap-win.is-front::after { opacity: 0; }
.ap-body { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; overflow: hidden; }

.ap-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: #2a3a4a;
  background: #e9eef3;
  border-bottom: 1px solid #d0d8e0;
  box-sizing: border-box;
  white-space: nowrap;
}
.ap-bar .ctl { margin-left: auto; display: flex; gap: 18px; color: #6a7a8a; font-size: 14px; font-weight: 400; }
.ap-win.dark .ap-bar { background: #1e1f26; color: #e6e6ee; border-bottom-color: #30313a; }
.ap-win.dark .ap-bar .ctl { color: #9a9aaa; }

/* Mac のウィンドウ：左上に信号機、タイトルは中央 */
.ap-os-mac .ap-win { border-radius: 11px; }
.ap-os-mac .ap-bar { height: 30px; justify-content: center; position: relative; background: #ececec; border-bottom-color: #d6d6d6; font-size: 14px; color: #3a3a3c; }
.ap-os-mac .ap-body { top: 30px; }
.ap-os-mac .ap-win.dark .ap-bar { background: #2b2b2e; color: #dcdce0; border-bottom-color: #3a3a3e; }
.ap-tl { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; }
.ap-tl i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.15); }
.ap-tl i:nth-child(1) { background: #FF5F57; }
.ap-tl i:nth-child(2) { background: #FEBC2E; }
.ap-tl i:nth-child(3) { background: #28C840; }
.ap-win:not(.is-front) .ap-tl i { background: #cfcfd2; }
.ap-os-mac .ap-win.is-front { box-shadow: 0 22px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.12); }

/* アプリのアイコン（実在アプリのロゴは使わない） */
.ap-icon {
  width: 20px; height: 20px;
  border-radius: 5px;
  flex: none;
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 700;
}
.ap-icon svg { width: 70%; height: 70%; }

/* ── ウィンドウの中身 ── */
.ap-body svg { display: block; }
.ln { height: 8px; border-radius: 4px; background: #dfe5ec; margin-bottom: 7px; }
.ln-gap { height: 6px; }

/* 表計算 */
.c-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: 12px; color: #2a3a4a; background: #fff; }
.c-sheet .rib { display: flex; gap: 16px; padding: 0 12px; height: 26px; align-items: center; background: #f3f6f4; border-bottom: 1px solid #dde3ea; font-size: 12px; color: #5a6a7a; }
.c-sheet .rib .on { color: #1f7a45; font-weight: 700; box-shadow: inset 0 -2px #1f9d55; line-height: 24px; }
.c-sheet .fx { display: flex; align-items: center; gap: 10px; height: 24px; padding: 0 8px; border-bottom: 1px solid #dde3ea; font-size: 12px; }
.c-sheet .fx .ref { width: 40px; border-right: 1px solid #dde3ea; color: #4a5a6a; }
.c-sheet .fx .f { font-style: italic; color: #8a9aaa; }
.c-sheet .g { display: grid; grid-template-columns: 24px 1.5fr repeat(4, 1fr); grid-auto-rows: 22px; flex: 1; align-content: start; }
.c-sheet .g > * { border-right: 1px solid #e3e8ee; border-bottom: 1px solid #e3e8ee; padding: 0 6px; line-height: 21px; font-style: normal; font-weight: 400; white-space: nowrap; overflow: hidden; }
.c-sheet .g .h { background: #f3f5f8; color: #7a8a9a; text-align: center; padding: 0; font-size: 11px; }
.c-sheet .g .hs { background: #dcefe3; color: #1f7a45; font-weight: 700; }
.c-sheet .g .th { background: #1f9d55; color: #fff; font-weight: 700; }
.c-sheet .g .n { text-align: right; font-variant-numeric: tabular-nums; }
.c-sheet .g .tt { font-weight: 700; background: #f3f8f5; }
.c-sheet .g .bar { background: linear-gradient(90deg, #bfe6cf var(--w), transparent var(--w)); }
.c-sheet .g .cur { box-shadow: inset 0 0 0 2px #1f9d55; }
.c-sheet .tabs { display: flex; gap: 2px; height: 22px; background: #f3f5f8; border-top: 1px solid #dde3ea; padding-left: 28px; font-size: 11px; color: #6a7a8a; }
.c-sheet .tabs span { padding: 0 12px; line-height: 21px; }
.c-sheet .tabs .on { background: #fff; color: #1f7a45; font-weight: 700; box-shadow: inset 0 -2px #1f9d55; }

/* ブラウザ */
.c-web { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #1d2733; }
.c-web .tabs { display: flex; gap: 4px; height: 26px; padding: 4px 8px 0; background: #dfe5ec; font-size: 12px; box-sizing: border-box; }
.c-web .tabs span { display: flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 7px 7px 0 0; color: #5a6a7a; }
.c-web .tabs .on { background: #f5f7f9; color: #1d2733; font-weight: 600; }
.c-web .tabs .plus { padding: 0 6px; }
.c-web .dot { width: 9px; height: 9px; border-radius: 50%; display: block; }
.c-web .addr { height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: #f5f7f9; border-bottom: 1px solid #dde3ea; }
.c-web .addr .ap-xnav { display: flex; gap: 6px; color: #7a8a9a; }
.c-web .addr .ap-xnav svg { width: 14px; height: 14px; }
.c-web .addr div { flex: 1; height: 22px; display: flex; align-items: center; gap: 6px; border-radius: 11px; background: #fff; border: 1px solid #d5dde6; font-size: 12px; color: #4a5a6a; padding-left: 10px; }
.c-web .addr div svg { width: 11px; height: 11px; color: #3a9e5f; }
.c-web .site { padding: 0 16px; overflow: hidden; }
.c-web .mast { display: flex; align-items: center; gap: 14px; height: 34px; border-bottom: 2px solid #1d2733; font-size: 12px; color: #5a6a7a; }
.c-web .mast b { font: 900 15px Georgia, serif; letter-spacing: 1px; color: #c0392b; margin-right: 8px; }
.c-web .mast .on { color: #1d2733; font-weight: 700; }
.c-web .lead { display: flex; gap: 12px; margin: 12px 0; }
.c-web .lead .img { width: 52%; aspect-ratio: 16 / 9; border-radius: 6px; position: relative; overflow: hidden; background: linear-gradient(#7cc4ff, #cfeaff); flex: none; }
.c-web .lead .sun { position: absolute; right: 18%; top: 16%; width: 26px; height: 26px; border-radius: 50%; background: #ffd54a; box-shadow: 0 0 18px #ffd54a; }
.c-web .lead .hill { position: absolute; left: -10%; right: -10%; bottom: -40%; height: 80%; border-radius: 50%; background: #6cc070; box-shadow: 120px 20px 0 -10px #4fa65a; }
.c-web .lead .txt small { font-size: 10px; color: #c0392b; font-weight: 700; }
.c-web .lead .txt h4 { margin: 2px 0 8px; font-size: 15px; line-height: 1.35; }
.c-web .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.c-web .cards i { display: block; aspect-ratio: 16 / 9; border-radius: 5px; }
.c-web .cards p { margin: 4px 0 0; font-size: 11px; line-height: 1.35; font-weight: 600; }

/* RPG */
.c-rpg { background: linear-gradient(#1a1450, #5b3a9a 55%, #ff8a8a); overflow: hidden; color: #fff; }
.c-rpg .moon { position: absolute; left: 58%; top: 14%; width: 34px; height: 34px; border-radius: 50%; background: #fff3c4; box-shadow: 0 0 24px #fff3c4; }
.c-rpg .m1, .c-rpg .m2 { position: absolute; left: 0; right: 0; bottom: 0; }
.c-rpg .m1 { height: 62%; background: #3b2b7a; clip-path: polygon(0 60%, 18% 20%, 36% 55%, 55% 10%, 75% 50%, 100% 25%, 100% 100%, 0 100%); }
.c-rpg .m2 { height: 42%; background: #2a1d5c; clip-path: polygon(0 40%, 25% 0, 50% 45%, 70% 15%, 100% 50%, 100% 100%, 0 100%); }
.c-rpg .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(#2f6b3a, #1d4426); }
.c-rpg .tree { position: absolute; bottom: 20%; width: 34px; height: 60px; background: #1f5a2c; clip-path: polygon(50% 0, 100% 75%, 60% 75%, 60% 100%, 40% 100%, 40% 75%, 0 75%); }
.c-rpg .ap-xhero { position: absolute; left: 30%; bottom: 17%; width: 30px; height: 56px; }
.c-rpg .ap-xhero .hd { position: absolute; left: 7px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #ffd9b3; box-shadow: inset 0 5px 0 #8a4b2a; }
.c-rpg .ap-xhero .bd { position: absolute; left: 4px; top: 15px; width: 22px; height: 28px; border-radius: 6px 6px 3px 3px; background: #2f6bd8; box-shadow: 0 26px 0 -14px #3a2a20; }
.c-rpg .ap-xhero .sw { position: absolute; left: 24px; top: 6px; width: 4px; height: 34px; border-radius: 2px; background: #e8f0ff; transform: rotate(35deg); box-shadow: 0 0 8px #bfe0ff; }
.c-rpg .slime { position: absolute; left: 52%; bottom: 16%; width: 44px; height: 34px; border-radius: 50% 50% 12px 12px; background: radial-gradient(circle at 35% 30%, #9ef7c8, #2fbf7a); }
.c-rpg .slime i { position: absolute; top: 12px; width: 6px; height: 8px; border-radius: 50%; background: #10301f; }
.c-rpg .slime i:first-child { left: 13px; } .c-rpg .slime i:last-child { right: 13px; }
.c-rpg .dmg { position: absolute; left: 53%; bottom: 33%; font: 900 20px 'Orbitron', sans-serif; color: #ffe066; text-shadow: 0 2px 0 #b34700, 0 0 10px rgba(255,200,0,0.6); }
.c-rpg .bars { position: absolute; left: 12px; top: 10px; display: grid; gap: 4px; font-size: 10px; font-weight: 700; }
.c-rpg .bars div { display: flex; align-items: center; gap: 6px; }
.c-rpg .bars b { position: relative; width: 120px; height: 8px; border-radius: 4px; background: rgba(0,0,0,0.45); }
.c-rpg .bars b::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px; background: var(--c); }
.c-rpg .bars em { font-style: normal; font-size: 10px; opacity: 0.9; }
.c-rpg .map { position: absolute; right: 12px; top: 10px; width: 54px; height: 54px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7); background: radial-gradient(circle, #3d7a4a 0 40%, #2a4f7a 41%); }
.c-rpg .map i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #ffe066; }
.c-rpg .skills { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; }
.c-rpg .skills div { position: relative; width: 32px; height: 32px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.85); box-shadow: 0 2px 6px rgba(0,0,0,0.5); overflow: hidden; }
.c-rpg .skills em { position: absolute; left: 0; right: 0; top: 0; height: 60%; background: rgba(0,0,0,0.55); }
.c-rpg .skills span { position: absolute; right: 2px; bottom: 0; font-size: 10px; font-weight: 900; text-shadow: 0 1px 2px #000; }
.c-rpg .log { position: absolute; left: 10px; bottom: 10px; width: 130px; padding: 5px 7px; border-radius: 5px; background: rgba(0,0,0,0.5); font-size: 10px; line-height: 1.5; }
.c-rpg .log p { margin: 0; } .c-rpg .log b { color: #ffe066; }

/* FPS */
.c-fps { background: linear-gradient(#f2a65a, #f6d7a8 45%, #c9d6e3 46%, #9fb2c4 58%); overflow: hidden; color: #fff; }
.c-fps .city { position: absolute; left: 0; right: 0; bottom: 42%; height: 60%; }
.c-fps .city i { position: absolute; bottom: 0; background:
  linear-gradient(90deg, #3a4858 0 4px, transparent 4px) 0 0 / 12px 100%,
  linear-gradient(#3a4858 0 5px, transparent 5px) 0 0 / 100% 11px,
  rgba(255,214,140,0.75); box-shadow: inset 0 0 0 3px #3a4858; }
.c-fps .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(#6b6253, #3a342b); }
.c-fps .crate { position: absolute; bottom: 30%; width: 44px; height: 44px; background: #8a6a3a; box-shadow: inset 0 0 0 3px #6a4f28, inset 0 0 0 9px #8a6a3a, inset 0 0 0 11px #6a4f28; }
.c-fps .cross { position: absolute; left: 50%; top: 48%; width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.c-fps .cross::before, .c-fps .cross::after { content: ""; position: absolute; background: #3dff9a; box-shadow: 0 0 4px #000; }
.c-fps .cross::before { left: 14px; top: 0; width: 2px; height: 30px; clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%, 0 65%, 100% 65%, 100% 100%, 0 100%); }
.c-fps .cross::after { top: 14px; left: 0; height: 2px; width: 30px; clip-path: polygon(0 0, 35% 0, 35% 100%, 65% 100%, 65% 0, 100% 0, 100% 100%, 0 100%); }
.c-fps .radar { position: absolute; left: 10px; top: 10px; width: 64px; height: 64px; border-radius: 6px; background: rgba(10,20,30,0.6); border: 1px solid rgba(255,255,255,0.4); }
.c-fps .radar i { position: absolute; width: 6px; height: 6px; border-radius: 50%; }
.c-fps .radar .me { left: 29px; top: 29px; background: #3dff9a; }
.c-fps .radar .en { background: #ff4d4d; }
.c-fps .feed { position: absolute; right: 10px; top: 10px; font-size: 10px; text-align: right; }
.c-fps .feed p { margin: 0 0 3px; padding: 2px 6px; background: rgba(0,0,0,0.45); border-radius: 3px; }
.c-fps .feed span { color: #ff6b6b; }
.c-fps .hpbox { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: baseline; gap: 4px; padding: 4px 8px; border-radius: 4px; background: rgba(0,0,0,0.45); }
.c-fps .hpbox b { font: 700 20px 'Share Tech Mono', monospace; }
.c-fps .hpbox span { font-size: 10px; opacity: 0.8; }
.c-fps .hpbox i { width: 50px; height: 5px; border-radius: 3px; background: #3dff9a; margin-left: 4px; align-self: center; }
.c-fps .gun { position: absolute; right: 18%; bottom: -6px; width: 150px; height: 74px; background: linear-gradient(#2a2a30, #121216); clip-path: polygon(38% 0, 100% 30%, 100% 100%, 0 100%, 18% 40%); }
.c-fps .ammo { position: absolute; right: 10px; bottom: 10px; text-align: right; padding: 3px 8px; border-radius: 4px; background: rgba(0,0,0,0.45); line-height: 1.1; }
.c-fps .ammo b { font: 700 22px 'Share Tech Mono', monospace; }
.c-fps .ammo span { font: 400 13px 'Share Tech Mono', monospace; opacity: 0.8; margin-left: 3px; }
.c-fps .ammo small { display: block; font-size: 9px; letter-spacing: 1px; opacity: 0.8; }

/* ボイスチャット */
.c-voice { background: #313338; display: flex; color: #dbdee1; font-size: 12px; }
.c-voice .srv { width: 44px; background: #1e1f22; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 10px; }
.c-voice .srv i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-style: normal; color: #3ba55d; }
.c-voice .srv i.add { background: #313338; border-radius: 50%; }
.c-voice .ch { width: 118px; background: #2b2d31; padding: 8px 8px; box-sizing: border-box; }
.c-voice .ch h5 { margin: 0 0 8px; font-size: 12px; color: #f2f3f5; padding-bottom: 6px; border-bottom: 1px solid #1f2023; }
.c-voice .ch p { margin: 0 0 4px; padding: 2px 6px; border-radius: 4px; color: #949ba4; white-space: nowrap; }
.c-voice .ch p.on { background: #404249; color: #f2f3f5; }
.c-voice .ch p.u { display: flex; align-items: center; gap: 6px; padding-left: 14px; font-size: 11px; color: #b5bac1; }
.c-voice .ch p.u i { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.c-voice .main { flex: 1; display: flex; flex-direction: column; padding: 8px 10px; box-sizing: border-box; min-width: 0; }
.c-voice .top { font-weight: 700; color: #f2f3f5; margin-bottom: 8px; }
.c-voice .top small { font-weight: 400; color: #949ba4; margin-left: 6px; }
.c-voice .tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.c-voice .tiles div { border-radius: 8px; background: #1e1f22; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.c-voice .tiles i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; color: #fff; }
.c-voice .tiles .talk i { box-shadow: 0 0 0 2px #1e1f22, 0 0 0 4px #3ba55d; }
.c-voice .tiles span { display: flex; align-items: center; gap: 3px; font-size: 11px; }
.c-voice .tiles span svg { width: 11px; height: 11px; color: #ed4245; }
.c-voice .ctl { display: flex; justify-content: center; gap: 8px; padding-top: 8px; }
.c-voice .ctl i { width: 28px; height: 28px; border-radius: 50%; background: #404249; display: grid; place-items: center; color: #dbdee1; }
.c-voice .ctl i svg { width: 14px; height: 14px; }
.c-voice .ctl i.end { background: #ed4245; color: #fff; }

/* 文書作成 */
.c-doc { background: #e6e9ef; color: #1d2733; display: flex; flex-direction: column; }
.c-doc .rib { display: flex; gap: 16px; padding: 0 12px; height: 24px; align-items: center; background: #f3f5fa; font-size: 12px; color: #5a6a7a; }
.c-doc .rib .on { color: #2b579a; font-weight: 700; box-shadow: inset 0 -2px #2b579a; line-height: 22px; }
.c-doc .tool { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 12px; background: #f9fafc; border-bottom: 1px solid #dde3ea; font-size: 12px; }
.c-doc .tool .font { padding: 1px 8px; border: 1px solid #cfd6e0; border-radius: 3px; background: #fff; min-width: 46px; }
.c-doc .tool .font.sm { min-width: 0; }
.c-doc .tool b { font: 700 13px serif; width: 16px; text-align: center; color: #3a4a5a; }
.c-doc .tool .al { display: grid; gap: 2px; width: 14px; }
.c-doc .tool .al i { height: 2px; background: #6a7a8a; }
.c-doc .tool .al i:nth-child(2) { width: 70%; }
.c-doc .tool .al.c i { margin: 0 auto; }
.c-doc .paper { flex: 1; width: 66%; margin: 10px auto 0; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.12); padding: 16px 22px; box-sizing: border-box; overflow: hidden; font-family: 'Noto Serif JP', serif; }
.c-doc .paper h4 { margin: 0; font-size: 15px; text-align: center; letter-spacing: 2px; }
.c-doc .paper small { display: block; text-align: right; font-size: 9px; color: #6a7a8a; margin: 2px 0 6px; }
.c-doc .paper h5 { margin: 6px 0 4px; font-size: 11px; color: #2b579a; }
.c-doc .paper .ln { height: 5px; margin-bottom: 5px; background: #cfd6e0; }
.c-doc .paper ul { margin: 0; padding-left: 12px; }
.c-doc .paper li { height: 5px; margin-bottom: 6px; border-radius: 3px; background: #cfd6e0; width: 80%; }
.c-doc .paper li::marker { color: #2b579a; font-size: 9px; }
.c-doc .paper table { border-collapse: collapse; font-size: 9px; margin-top: 6px; }
.c-doc .paper th, .c-doc .paper td { border: 1px solid #b8c2d0; padding: 1px 8px; }
.c-doc .paper th { background: #e8eef8; }
.c-doc .status { height: 20px; line-height: 20px; padding: 0 12px; font-size: 10px; color: #fff; background: #2b579a; }

/* Web会議 */
.c-meet { background: #15181f; display: flex; flex-direction: column; padding: 6px 8px 8px; box-sizing: border-box; color: #e6e9ef; font-size: 11px; }
.c-meet .top { display: flex; justify-content: space-between; margin-bottom: 6px; color: #aab2c0; }
.c-meet .top span:first-child { color: #ff6b6b; }
.c-meet .tiles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.c-meet .tiles div { position: relative; border-radius: 8px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 70%, #fff 10%), var(--c) 60%, #11141a); }
.c-meet .tiles i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 16px; background: rgba(255,255,255,0.85); color: #2a2f3a; }
.c-meet .tiles span { position: absolute; left: 6px; bottom: 5px; display: flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,0.5); }
.c-meet .tiles span svg { width: 10px; height: 10px; color: #ff6b6b; }
.c-meet .tiles .talk { box-shadow: inset 0 0 0 3px #3dff9a; }
.c-meet .ctl { display: flex; justify-content: center; align-items: center; gap: 10px; padding-top: 8px; }
.c-meet .ctl i { width: 28px; height: 28px; border-radius: 50%; background: #2c313c; display: grid; place-items: center; color: #e6e9ef; }
.c-meet .ctl i svg { width: 14px; height: 14px; }
.c-meet .ctl b { padding: 5px 14px; border-radius: 14px; background: #e5484d; color: #fff; font-size: 11px; }

/* 動画プレイヤー */
.c-video { background: #0f0f0f; color: #f1f1f1; display: grid; grid-template-columns: 1fr 32%; grid-template-rows: auto 1fr; gap: 8px 10px; padding: 10px; box-sizing: border-box; font-size: 11px; }
.c-video .ap-xpl { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; }
.c-video .scene { position: absolute; inset: 0; background: linear-gradient(#ff9a5a, #ffcf8a 48%, #4fb3d9 48%, #2a7fb0 70%); }
.c-video .scene .sun { position: absolute; left: 44%; top: 26%; width: 34px; height: 34px; border-radius: 50%; background: #fff2c4; box-shadow: 0 0 30px #ffd27a; }
.c-video .scene .sea { position: absolute; left: 0; right: 0; top: 50%; height: 22%; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,0.25) 5px 6px); }
.c-video .scene .sand { position: absolute; left: -10%; right: -10%; bottom: -20%; height: 48%; border-radius: 50% 50% 0 0; background: #f2d39b; }
.c-video .scene .palm { position: absolute; right: 12%; bottom: 18%; width: 6px; height: 46%; background: #6b4a2a; transform: rotate(8deg); }
.c-video .scene .palm::before { content: ""; position: absolute; left: -22px; top: -12px; width: 50px; height: 24px; background: #2f7a3a; clip-path: polygon(50% 50%, 0 30%, 20% 0, 50% 40%, 80% 0, 100% 30%, 50% 50%, 90% 100%, 60% 70%, 40% 70%, 10% 100%); }
.c-video .ov { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 10px 6px; background: linear-gradient(transparent, rgba(0,0,0,0.65)); }
.c-video .prog { height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px; position: relative; }
.c-video .prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: #ff3b30; border-radius: 2px; }
.c-video .prog i::after { content: ""; position: absolute; right: -5px; top: -3.5px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; }
.c-video .row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.c-video .row svg { width: 13px; height: 13px; }
.c-video .row em { flex: 1; }
.c-video .meta h4 { margin: 0 0 4px; font-size: 13px; }
.c-video .meta p { margin: 0; display: flex; align-items: center; gap: 4px; color: #aaa; }
.c-video .meta p svg { width: 11px; height: 11px; }
.c-video .side { grid-column: 2; grid-row: 1 / 3; }
.c-video .side h5 { margin: 0 0 6px; font-size: 11px; color: #aaa; }
.c-video .side div { display: flex; gap: 6px; margin-bottom: 7px; }
.c-video .side i { width: 58px; aspect-ratio: 16 / 9; border-radius: 4px; flex: none; }
.c-video .side p { margin: 0; font-size: 10px; line-height: 1.35; }

/* 写真 */
.c-photo { background: #1c1c1e; display: flex; flex-direction: column; color: #f2f2f7; font-size: 11px; padding: 0 12px 10px; box-sizing: border-box; }
.c-photo .top { display: flex; align-items: center; gap: 10px; height: 30px; }
.c-photo .top b { font-size: 12px; }
.c-photo .top span { color: #9a9aa2; }
.c-photo .top .ic { margin-left: auto; display: flex; gap: 10px; }
.c-photo .top .ic svg { width: 13px; height: 13px; }
.c-photo .big { position: relative; flex: 1; border-radius: 6px; overflow: hidden; background: linear-gradient(#5aa9ff, #bfe1ff 55%); }
.c-photo .big .sun { position: absolute; right: 20%; top: 14%; width: 26px; height: 26px; border-radius: 50%; background: #fff6cf; box-shadow: 0 0 20px #fff1a8; }
.c-photo .big .mt { position: absolute; left: 0; right: 0; bottom: 34%; height: 50%; background: linear-gradient(#7a92ad, #5a7390); clip-path: polygon(0 100%, 22% 30%, 34% 55%, 52% 5%, 70% 50%, 82% 30%, 100% 70%, 100% 100%); }
.c-photo .big .lake { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(#4a8fc0, #2f6a96); }
.c-photo .big .trees { position: absolute; left: 0; right: 0; bottom: 30%; height: 14%; background: #2f5a35; clip-path: polygon(0 100%, 0 40%, 4% 0, 8% 40%, 12% 10%, 16% 50%, 20% 20%, 26% 60%, 70% 60%, 74% 10%, 78% 40%, 82% 0, 86% 40%, 90% 15%, 95% 45%, 100% 20%, 100% 100%); }
.c-photo .arr { position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: rgba(0,0,0,0.4); display: grid; place-items: center; color: #fff; }
.c-photo .arr svg { width: 13px; height: 13px; }
.c-photo .arr.l { left: 8px; } .c-photo .arr.r { right: 8px; }
.c-photo .strip { display: flex; gap: 5px; height: 38px; margin-top: 8px; }
.c-photo .strip i { flex: 1; border-radius: 4px; }
.c-photo .strip i.sel { box-shadow: 0 0 0 2px #1c1c1e, 0 0 0 4px var(--ap-accent); }

/* ファイル（Mac） */
.c-files { background: #fff; display: flex; color: #1d1d1f; font-size: 11px; }
.c-files .side { width: 118px; background: #ececef; padding: 8px 8px; box-sizing: border-box; }
.c-files .side h6 { margin: 6px 0 4px; font-size: 10px; color: #8a8a90; font-weight: 600; }
.c-files .side p { margin: 0 0 2px; padding: 3px 6px; border-radius: 5px; display: flex; align-items: center; gap: 6px; }
.c-files .side p.on { background: #d5d5da; }
.c-files .side p i { width: 8px; height: 8px; border-radius: 50%; }
.c-files .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.c-files .tb { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-bottom: 1px solid #e5e5ea; color: #6e6e73; }
.c-files .tb svg { width: 13px; height: 13px; }
.c-files .tb span { font-weight: 700; color: #1d1d1f; font-size: 12px; }
.c-files .tb em { display: flex; gap: 6px; margin-left: auto; }
.c-files .tb .sr { display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: #f0f0f2; color: #8a8a90; }
.c-files .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; padding: 14px 10px; }
.c-files .it { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.c-files .it i { position: relative; display: block; }
.c-files .it i.f { width: 50px; height: 36px; margin-top: 6px; border-radius: 4px; background: linear-gradient(#6cbcff, #3f9cf0); }
.c-files .it i.f::before { content: ""; position: absolute; left: 0; top: -6px; width: 20px; height: 8px; border-radius: 3px 3px 0 0; background: #4aa6f5; }
.c-files .it i.pdf, .c-files .it i.doc { width: 32px; height: 42px; border-radius: 3px; background: #fff; border: 1px solid #d0d0d6; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.c-files .it i.pdf::after { content: "PDF"; position: absolute; left: 3px; right: 3px; bottom: 5px; font: 700 8px sans-serif; text-align: center; color: #fff; background: #e5484d; border-radius: 2px; }
.c-files .it i.doc::after { content: ""; position: absolute; left: 6px; right: 6px; top: 8px; height: 22px; background: repeating-linear-gradient(#c8c8d0 0 2px, transparent 2px 5px); }
.c-files .it span { font-size: 10px; padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.c-files .it.sel span { background: #0064d1; color: #fff; }
.c-files .it.sel i { outline: 3px solid rgba(0,100,209,0.18); outline-offset: 2px; border-radius: 4px; }

/* 動画編集 */
.c-vedit { background: #1c1c20; display: flex; flex-direction: column; color: #c8c8d0; font-size: 10px; padding: 6px; box-sizing: border-box; gap: 6px; }
.c-vedit .up { flex: 1; display: grid; grid-template-columns: 70px 1fr 74px; gap: 6px; min-height: 0; }
.c-vedit .bin { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: start; background: #26262c; border-radius: 4px; padding: 4px; }
.c-vedit .bin i { aspect-ratio: 16 / 10; border-radius: 2px; }
.c-vedit .pv { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #111114; border-radius: 4px; }
.c-vedit .pv .scene { position: relative; height: 72%; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(#ff9a5a, #ffcf8a 50%, #4fb3d9 50%, #2a7fb0); }
.c-vedit .pv .sun { position: absolute; left: 44%; top: 26%; width: 18px; height: 18px; border-radius: 50%; background: #fff2c4; }
.c-vedit .pv .sea { position: absolute; left: 0; right: 0; top: 50%; bottom: 0; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,0.25) 4px 5px); }
.c-vedit .pv span { margin-top: 4px; font: 400 10px 'Share Tech Mono', monospace; color: #e8e8f0; }
.c-vedit .insp { background: #26262c; border-radius: 4px; padding: 5px; }
.c-vedit .insp h6 { margin: 0 0 6px; font-size: 9px; color: #9a9aa6; }
.c-vedit .insp .ln { height: 4px; background: #3a3a44; margin-bottom: 5px; }
.c-vedit .tl { position: relative; height: 92px; background: #232328; border-radius: 4px; padding: 0 6px 4px; }
.c-vedit .ruler { height: 12px; margin-left: 22px; background: repeating-linear-gradient(90deg, #55555f 0 1px, transparent 1px 16px) bottom / 100% 5px no-repeat; }
.c-vedit .tr { display: flex; align-items: center; gap: 4px; height: 24px; }
.c-vedit .tr span { width: 18px; font-size: 9px; color: #8a8a96; }
.c-vedit .tr div { position: relative; flex: 1; height: 20px; }
.c-vedit .tr b { position: absolute; top: 0; height: 100%; border-radius: 3px; background: #6b4bd8 repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0 18px, transparent 18px 20px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); font-weight: 400; }
.c-vedit .tr b.t { background: #c27a12; color: #fff; font-size: 9px; padding-left: 4px; line-height: 20px; }
.c-vedit .tr b.a { background: #1f7a6a repeating-linear-gradient(90deg, rgba(160,255,230,0.55) 0 1px, transparent 1px 3px); background-size: 100% 60%; background-position: center; background-repeat: no-repeat; }
.c-vedit .ph { position: absolute; left: 44%; top: 4px; bottom: 2px; width: 2px; background: #ff453a; }
.c-vedit .ph::before { content: ""; position: absolute; left: -4px; top: 0; border: 5px solid transparent; border-top-color: #ff453a; }

/* ── タスクバー（Windows） ── */
.ap-task {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: rgba(8,16,28,0.88);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 30;
}
.ap-task .t { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; position: relative; }
.ap-task .t .ap-icon { width: 22px; height: 22px; }
.ap-task .t::after {
  content: ""; position: absolute; bottom: -4px; left: 50%;
  width: 6px; height: 3px; border-radius: 2px; background: #6a8aa8;
  transform: translateX(-50%); transition: width .2s, background .2s;
}
.ap-task .t.on { background: rgba(255,255,255,0.1); }
.ap-task .t.on::after { width: 18px; background: var(--ap-accent); }
.ap-tray { position: absolute; right: 14px; display: flex; align-items: center; gap: 6px; font-family: 'Orbitron', sans-serif; font-size: 11px; color: #00d4ff; letter-spacing: 1px; }
.ap-tray b { width: 10px; height: 10px; border-radius: 50%; background: #00d4ff; box-shadow: 0 0 8px #00d4ff; }

/* ── メニューバーと Dock（Mac） ── */
.ap-menu {
  position: absolute; left: 0; right: 0; top: 0;
  height: 26px;
  display: flex; align-items: center; gap: 18px;
  padding: 0 14px;
  font-size: 13px; color: #1d1d1f;
  background: rgba(246,246,248,0.72);
  backdrop-filter: blur(10px);
  z-index: 30;
}
.ap-menu .app { font-weight: 700; }
.ap-menu .r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.ap-menu .r b { width: 9px; height: 9px; border-radius: 50%; background: #0071e3; display: inline-block; margin-right: 5px; }
.ap-dock {
  position: absolute; left: 50%; bottom: 8px;
  transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 10px;
  padding: 8px 12px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.45);
  backdrop-filter: blur(14px);
  z-index: 30;
}
.ap-dock .d { position: relative; }
.ap-dock .d .ap-icon { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.ap-dock .d .ap-icon svg { width: 58%; height: 58%; }
.ap-dock .d.run::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(0,0,0,0.65); }
.ap-dock .ap-xsep { width: 1px; height: 40px; background: rgba(0,0,0,0.18); margin: 0 2px 2px; }

/* ── 切替の通知 ── */
.ap-toast {
  position: absolute; right: 16px; bottom: 60px;
  width: 300px;
  z-index: 40;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--ap-toast-bg);
  color: var(--ap-toast-text);
  border: 1px solid var(--ap-accent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--ap-accent) 35%, transparent);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .25s, transform .25s;
  box-sizing: border-box;
}
.ap-toast.show { opacity: 1; transform: none; }
.ap-toast .brand { font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 3px; color: var(--ap-accent); margin-bottom: 6px; }
.ap-toast .msg { font-size: 18px; font-weight: 700; }
.ap-toast .msg span { color: var(--ap-accent); }
.ap-toast .msg2 { font-size: 16px; color: var(--ap-dim); margin-top: 2px; }
/* Mac の通知は右上から出る */
.ap-os-mac .ap-toast {
  top: 36px; bottom: auto; right: 12px;
  border: none; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(16px);
  transform: translateX(24px);
}
.ap-os-mac .ap-toast.show { transform: none; }
.ap-os-mac .ap-toast .brand { font-family: inherit; font-weight: 700; letter-spacing: 0.5px; color: #1d1d1f; }

/* カーソル */
.ap-cursor { position: absolute; left: 0; top: 0; width: 28px; height: 28px; z-index: 50; pointer-events: none; }
.ap-click {
  position: absolute; z-index: 49;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 3px solid var(--ap-accent);
  opacity: 0;
  pointer-events: none;
}

/* ── 右側：SYNTHXAの画面 ── */
.ap-panel {
  position: absolute;
  left: 890px; top: 122px;
  width: 350px; height: 560px;
  border-radius: 12px;
  background: var(--ap-panel-bg);
  border: 1px solid var(--ap-panel-border);
  box-shadow: var(--ap-panel-shadow);
  box-sizing: border-box;
  padding: 18px 20px;
}
.ap-logo { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 4px; color: var(--ap-accent); }
.ap-profs {
  margin-top: 12px; display: flex; gap: 6px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent);
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}
.ap-profs span { flex: none; font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--ap-panel-border); color: var(--ap-dim); transition: all .3s; }
.ap-profs span.on { color: var(--ap-accent-ink); background: var(--ap-accent); border-color: var(--ap-accent); font-weight: 700; }
.ap-now {
  margin-top: 10px;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--ap-panel-border);
  background: var(--ap-soft);
  transition: border-color .3s, box-shadow .3s;
}
.ap-now.flash { border-color: var(--ap-accent); box-shadow: 0 0 22px color-mix(in srgb, var(--ap-accent) 45%, transparent); }
.ap-now small { display: block; font-size: 13px; color: var(--ap-dim); }
.ap-now strong { font-size: 22px; }
.ap-now .ap-icon { width: 30px; height: 30px; font-size: 15px; }

.ap-mouse { position: relative; height: 296px; aspect-ratio: 0.77; margin: 8px auto 0; left: 22px; }
.ap-mouse img { width: 100%; height: 100%; object-fit: contain; display: block; filter: var(--ap-mouse-shadow); }
.ap-hs {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--ap-hs-bg);
  border: 2px solid var(--ap-hs-border);
  color: #fff; font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
  box-sizing: border-box;
}
.ap-lb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--ap-lb-bg);
  color: var(--ap-lb-text);
  border: 1px solid var(--ap-lb-border);
  font-size: 15px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.ap-hs[data-side="right"] .ap-lb { left: 30px; }
.ap-hs[data-side="left"]  .ap-lb { right: 30px; }
.ap-lb.swap { animation: ap-swap .5s ease-out; }
@keyframes ap-swap {
  0%   { opacity: 0; transform: translateY(-50%) scale(.6); background: var(--ap-accent); color: var(--ap-accent-ink); }
  40%  { opacity: 1; transform: translateY(-50%) scale(1.12); background: var(--ap-accent); color: var(--ap-accent-ink); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
.ap-hs.key { box-shadow: 0 0 14px var(--ap-accent); border-color: #fff; }
.ap-hs.key .ap-lb { border-color: var(--ap-accent); color: var(--ap-accent); }

.ap-four { margin-top: 10px; text-align: center; }
.ap-four small { display: block; font-size: 14px; color: var(--ap-dim); margin-bottom: 8px; }
.ap-chips { display: flex; justify-content: center; gap: 8px; }
.ap-chips span {
  font-size: 15px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--ap-panel-border);
  color: var(--ap-dim);
  transition: all .3s;
}
.ap-chips span.on { color: var(--ap-accent-ink); background: var(--ap-accent); border-color: var(--ap-accent); }

/* ── 販売サイトに置くときの外枠 ── */
.autoprofile { padding: 72px 24px; }
.autoprofile .ap-wrap { max-width: 1200px; margin: 0 auto; }
.ap-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 640px) {
  .autoprofile { padding: 40px 16px; }
  .autoprofile .ap-frame, .autoprofile .ap-stage { border-radius: 8px; }
}

/* ── 枠が狭いとき（スマホ）：見出しを枠の外に出し、枠は見出しの分だけ上を切り落とす ── */
.ap-head { display: none; }
.ap-head.is-narrow { display: block; margin: 0 0 14px; font-family: var(--ap-font); word-break: keep-all; overflow-wrap: anywhere; }
.ap-head .t { font-size: 20px; font-weight: 700; line-height: 1.45; color: var(--ap-text); }
.ap-head .t em { display: block; font-style: normal; color: var(--ap-em); text-shadow: var(--ap-em-shadow); }
.ap-head .s { margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--ap-muted); }
.ap-head .s b { color: var(--ap-text); }
.ap-frame.is-narrow { aspect-ratio: 1280 / 604; }
.ap-frame.is-narrow .ap-stage { transform: scale(var(--s, 1)) translateY(-108px); }
.ap-frame.is-narrow .ap-title, .ap-frame.is-narrow .ap-sub { display: none; }
.ap-frame.is-narrow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ap-frame-border); pointer-events: none; }