.cmp{padding:clamp(88px,10vw,140px) 0 clamp(72px,8vw,120px);background:var(--bg)}
.cmp-in{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.cmp-head{max-width:820px}
.cmp h2{margin:0;font:600 clamp(36px,4.4vw,64px)/1.02 var(--serif);letter-spacing:-.03em;font-variation-settings:"opsz" 48;color:var(--ink)}
.cmp h2 em{font-style:italic;font-weight:500;color:var(--em)}
.cmp-lede{margin:18px 0 0;max-width:46ch;font:400 clamp(17px,1.3vw,19px)/1.5 var(--sans);color:var(--ink-2)}
.cmp-grid{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}

.cmp-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cmp-list button{position:relative;display:flex;flex-direction:column;gap:5px;padding:16px 0 16px 18px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:var(--ink-2);transition:color .2s var(--ease)}
.cmp-list button::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--o1),var(--o2));transform:scaleY(0);transition:transform .3s var(--ease)}
.cmp-list b{font:600 19px/1.15 var(--sans);letter-spacing:-.01em;color:inherit}
.cmp-list span{font:400 14px/1.3 var(--sans);color:var(--ink-2)}
.cmp-list button:hover{color:var(--ink)}
.cmp-list button[aria-selected=true]{color:var(--ink)}
.cmp-list button[aria-selected=true]::before{transform:none}
.cmp-list button:focus-visible{outline:2px solid var(--o2);outline-offset:-2px}

.cmp-main{min-width:0;width:100%;max-width:max(520px,calc((100svh - 230px) * 1.6))}
.cmp-chips{display:flex;justify-content:space-between;margin-bottom:10px}
.cmp-frame{position:relative;aspect-ratio:16/10;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--tb-1);user-select:none;-webkit-user-select:none}
.cmp-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease)}
.cmp-frame.swap img{opacity:0}
.cmp-b{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fbf8f3;box-shadow:0 0 0 1px rgba(22,5,0,.18);pointer-events:none}
.cmp-grip{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#160500;border:2px solid #fbf8f3;transition:transform .2s var(--ease)}
.cmp-grip svg{width:20px;height:20px;fill:none;stroke:#fbf8f3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cmp-frame:hover .cmp-grip{transform:scale(1.06)}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none}
.cmp-range:focus-visible~.cmp-line .cmp-grip,.cmp-frame:focus-within .cmp-grip{outline:2px solid var(--o2);outline-offset:3px}
.cmp-note{margin:16px 0 0;min-height:1.5em;font:400 16px/1.5 var(--sans);color:var(--ink-2)}

@media (max-width:900px){
  .cmp-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .cmp-list{flex-direction:row;overflow-x:auto;gap:8px;border:0;margin:0 calc(-1*clamp(20px,4vw,56px));padding:0 clamp(20px,4vw,56px) 4px;scrollbar-width:none;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
  .cmp-list::-webkit-scrollbar{display:none}
  .cmp-list button{flex:none;gap:3px;padding:10px 14px;border:1px solid var(--line);border-radius:10px}
  .cmp-list button::before{display:none}
  .cmp-list button[aria-selected=true]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
  .cmp-list button[aria-selected=true] span{color:var(--bg);opacity:.75}
  .cmp-list b{font-size:15px}
  .cmp-list span{font-size:12.5px}
}
@media (max-width:700px){
  .cmp-grip{width:38px;height:38px;margin:-19px 0 0 -19px}
  .cmp-note{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.cmp-frame img,.cmp-grip,.cmp-list button::before{transition:none}}