.connecting-player,.connecting-studio{--connecting-ink:var(--color-text,#162033);--connecting-muted:var(--color-muted-text,#526079);--connecting-paper:var(--color-surface,#fff);--connecting-line:var(--color-border,#aab7cc);--connecting-accent:var(--color-accent,#2563eb);--connecting-accent-ink:var(--color-accent-foreground,#fff);min-height:100vh;color:var(--connecting-ink);background:radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--connecting-accent) 12%, transparent), transparent 30rem), var(--color-background,#f6f8fc);font-family:Avenir Next,Noto Sans KR,system-ui,sans-serif}.connecting-player{padding:clamp(1rem,4vw,3rem)}.connecting-player__header,.connecting-player__instruction,.connecting-player__boards,.connecting-player__selection,.connecting-player__controls,.connecting-studio__header,.connecting-studio__layout,.connecting-studio__validation{width:min(100%,68rem);margin-inline:auto}.connecting-player__header,.connecting-studio__header{justify-content:space-between;align-items:end;gap:1rem;margin-block-end:1.4rem;display:flex}.connecting-player__header h1,.connecting-studio h1{letter-spacing:-.05em;margin:.25rem 0 0;font-family:Georgia,Times New Roman,serif;font-size:clamp(2rem,6vw,4.4rem);line-height:.98}.connecting-player__eyebrow,.connecting-studio__eyebrow{color:var(--connecting-accent);letter-spacing:.13em;text-transform:uppercase;margin:0;font-size:.75rem;font-weight:850}.connecting-player__meta,.connecting-player__selection{color:var(--connecting-muted);font-size:.92rem;font-weight:750}.connecting-player button,.connecting-studio button,.connecting-studio input,.connecting-studio select{font:inherit}.connecting-player button,.connecting-studio button{border:1px solid var(--connecting-line);color:var(--connecting-ink);background:var(--connecting-paper);cursor:pointer;border-radius:.7rem;transition:transform .14s,border-color .14s,background-color .14s}.connecting-player button:hover:not(:disabled),.connecting-studio button:hover:not(:disabled){border-color:var(--connecting-accent);transform:translateY(-1px)}.connecting-player button:focus-visible,.connecting-studio button:focus-visible,.connecting-studio input:focus-visible,.connecting-studio select:focus-visible{outline:3px solid var(--color-focus,#b45309);outline-offset:3px}.connecting-player button:disabled,.connecting-studio button:disabled{cursor:not-allowed;opacity:.52}.connecting-player__notice,.connecting-studio__validation{border-inline-start:.35rem solid var(--color-danger,#b91c1c);background:var(--connecting-paper);width:min(100%,68rem);margin-block:0 1rem;padding:.8rem 1rem}.connecting-player__instruction{border-inline-start:.35rem solid var(--connecting-accent);color:var(--connecting-muted);background:var(--connecting-paper);margin-block:0 1.1rem;padding:.8rem 1rem;font-weight:800}.connecting-player__boards{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,3vw,1.5rem);display:grid}.connecting-player__board{border:1px solid var(--connecting-line);background:var(--connecting-paper);border-radius:1rem;min-width:0;margin:0;padding:clamp(.8rem,2vw,1.2rem)}.connecting-player__board legend{color:var(--connecting-muted);padding-inline:.4rem;font-size:.86rem;font-weight:850}.connecting-player__options{gap:.7rem;display:grid}.connecting-player__option{text-align:start;min-height:3.8rem;padding:.7rem .85rem;font-size:clamp(1rem,2.2vw,1.25rem);font-weight:750}.connecting-player__option[data-state=selected]{border-color:var(--connecting-accent);color:var(--connecting-accent-ink);background:var(--connecting-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--connecting-accent) 24%, transparent)}.connecting-player__option[data-state=matched]{border-color:var(--color-success,#166534);color:var(--color-success,#166534);background:color-mix(in srgb, var(--color-success,#166534) 12%, var(--connecting-paper));text-decoration:line-through}.connecting-player__selection{min-height:1.5rem;margin-block:1rem 0}.connecting-player__controls{justify-content:flex-end;gap:.75rem;margin-block-start:1rem;display:flex}.connecting-player__controls button{padding:.7rem 1rem;font-weight:800}.connecting-player__controls button[data-primary=true]{border-color:var(--connecting-accent);color:var(--connecting-accent-ink);background:var(--connecting-accent)}.connecting-studio{padding:clamp(1rem,4vw,3rem)}.connecting-studio__layout{grid-template-columns:minmax(16rem,.9fr) minmax(0,1.1fr);align-items:start;gap:clamp(1rem,3vw,2rem);display:grid}.connecting-studio__form,.connecting-studio__preview{border:1px solid var(--connecting-line);background:var(--connecting-paper);border-radius:1rem;gap:1rem;min-width:0;padding:clamp(1rem,2vw,1.5rem);display:grid}.connecting-studio__field,.connecting-studio__pair{gap:.35rem;display:grid}.connecting-studio__field-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;display:grid}.connecting-studio__field label,.connecting-studio__pair label{color:var(--connecting-muted);font-size:.82rem;font-weight:800}.connecting-studio__field input,.connecting-studio__field select,.connecting-studio__pair input{border:1px solid var(--connecting-line);width:100%;min-width:0;color:var(--connecting-ink);background:var(--connecting-paper);border-radius:.5rem;padding:.6rem .65rem}.connecting-studio__fieldset{border:1px solid var(--connecting-line);border-radius:.75rem;gap:.8rem;min-width:0;margin:0;padding:.8rem;display:grid}.connecting-studio__fieldset legend{color:var(--connecting-muted);padding-inline:.4rem;font-weight:800}.connecting-studio__pairs{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.connecting-studio__pair{border:1px solid var(--connecting-line);border-radius:.6rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;padding:.75rem}.connecting-studio__pair>button{width:2.55rem;height:2.55rem;color:var(--color-danger,#b91c1c)}.connecting-studio__fieldset>button{justify-self:start;padding:.65rem .9rem;font-weight:800}.connecting-studio__preview>h2{margin:0;font-size:1.35rem}.connecting-studio__preview>.connecting-player{background:0 0;min-height:auto;padding:0}@media (width<=60rem){.connecting-studio__layout{grid-template-columns:1fr}}@media (width<=45rem){.connecting-player__boards,.connecting-studio__field-row{grid-template-columns:1fr}.connecting-studio__pair{grid-template-columns:minmax(0,1fr) auto}.connecting-studio__pair>.connecting-studio__field:nth-child(2){grid-area:2/1/auto/-1}.connecting-studio__pair>button{grid-area:1/2}}@media (prefers-reduced-motion:reduce){.connecting-player button,.connecting-studio button{transition:none}}