.connections-scope{--bg: #ffffff;--text: #121212;--muted: #5a5a5a;--tile: #efefe6;--tile-selected: #5a594e;--border: #d3d6da;--surface: #ffffff;--surface-hover: #f2f2f2;--overlay: rgba(0, 0, 0, .5);--shadow: rgba(0, 0, 0, .25);--brand: #7a4fb0;--brand-hover: #653f96;--brand-soft: #b57fc9;--radius: 8px;--gap: 8px;font-family:Libre Franklin,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.connections-scope, .connections-scope *{box-sizing:border-box}.connections-scope, .connections-scope{margin:0;padding:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.connections-scope button{font-family:inherit;cursor:pointer}.connections-scope .app{max-width:680px;min-height:100vh;min-height:100dvh;margin:0 auto;padding:6px 10px 10px;display:flex;flex-direction:column;align-items:center;overflow-x:hidden}.connections-scope .header{width:100%;border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:8px;text-align:center;flex:none}.connections-scope .header__bar{display:flex;align-items:center;justify-content:center;position:relative}.connections-scope .header__title{font-size:clamp(1.15rem,4.5vw,1.5rem);font-weight:700;letter-spacing:.4px;margin:0;padding:0 40px;line-height:1.1}.connections-scope .brand-accent{color:var(--brand)}.connections-scope .header__tagline{margin:2px 0 0;color:var(--muted);font-size:.82rem}.connections-scope .icon-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:var(--surface);font-size:1rem;line-height:1;color:var(--text);display:inline-flex;align-items:center;justify-content:center}.connections-scope .header__bar .icon-btn{position:absolute;right:0}.connections-scope .icon-btn:hover{background:var(--surface-hover)}.connections-scope .mode-toggle{display:inline-flex;border:1px solid var(--brand);border-radius:999px;overflow:hidden;margin-bottom:6px;flex:none}.connections-scope .mode-toggle__btn{border:0;background:var(--surface);color:var(--brand);padding:5px 20px;font-size:.85rem;font-weight:600}.connections-scope .mode-toggle__btn.is-active{background:var(--brand);color:#fff}.connections-scope .subhead{color:var(--muted);font-size:.8rem;margin-bottom:6px;letter-spacing:.3px;flex:none}.connections-scope .loading{color:var(--muted);font-size:1rem;padding:60px 20px;text-align:center}.connections-scope .confetti{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:40}.connections-scope .message-slot{height:32px;display:flex;align-items:center;justify-content:center;flex:none}.connections-scope .toast{background:var(--text);color:#fff;padding:7px 14px;border-radius:var(--radius);font-size:.85rem;font-weight:600;animation:rise .18s ease-out}.connections-scope .toast--warn{background:#b58a00}.connections-scope .toast--error{background:#4a4a4a}.connections-scope .toast--success{background:#2e7d32}@keyframes rise{0%{transform:translateY(6px);opacity:0}}.connections-scope .board-area{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:2px 0}.connections-scope .board{width:min(96vw,620px);height:min(64dvh,460px,96vw);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--gap);perspective:900px}.connections-scope .board[data-shake="0"]{animation:shake0 .4s ease}.connections-scope .board[data-shake="1"]{animation:shake1 .4s ease}.connections-scope .tile{border:0;border-radius:var(--radius);background:var(--tile);color:var(--text);width:100%;height:100%;padding:4px;display:flex;align-items:center;justify-content:center;font-weight:700;text-transform:uppercase;letter-spacing:.2px;transition:transform .1s ease,background .12s ease;-webkit-user-select:none;user-select:none;container-type:size;animation:tileIn .3s ease backwards;animation-delay:calc(var(--i, 0) * 22ms)}.connections-scope .tile__label{text-align:center;line-height:1.1;overflow-wrap:break-word;-webkit-hyphens:none;hyphens:none;font-size:clamp(.78rem,26cqmin,1.25rem)}.connections-scope .tile--md .tile__label{font-size:clamp(.68rem,21cqmin,1rem)}.connections-scope .tile--sm .tile__label{font-size:clamp(.56rem,16cqmin,.8rem)}.connections-scope .tile:hover:not(:disabled){transform:translateY(-1px)}.connections-scope .tile:active:not(:disabled){transform:scale(.95)}.connections-scope .tile--selected{background:var(--tile-selected);color:#fff;transform:scale(.94)}.connections-scope .tile--selected .tile__label{animation:selectPop .2s ease}.connections-scope .tile--jump{background:var(--tile-selected);color:#fff;z-index:1;animation:jump .5s ease;animation-delay:calc(var(--j, 0) * 90ms)}.connections-scope .tile--reveal{color:#121212;z-index:1;animation:flipReveal .55s ease;animation-delay:calc(var(--j, 0) * 90ms)}.connections-scope .tile:disabled{cursor:default}.connections-scope .solved{grid-column:1 / -1;border-radius:var(--radius);padding:4px 8px;text-align:center;color:#121212;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:solvedIn .4s ease backwards}.connections-scope .solved__name{font-weight:800;text-transform:uppercase;letter-spacing:.3px;font-size:clamp(.72rem,3vw,.92rem);line-height:1.1}.connections-scope .solved__members{text-transform:uppercase;font-size:clamp(.68rem,2.8vw,.88rem);margin-top:2px;line-height:1.1}@keyframes tileIn{0%{opacity:0;transform:scale(.82) translateY(8px)}to{opacity:1;transform:none}}@keyframes selectPop{0%{transform:scale(1)}45%{transform:scale(.78)}to{transform:scale(1)}}@keyframes jump{0%,to{transform:translateY(0)}35%{transform:translateY(-20px)}}@keyframes flipReveal{0%{transform:rotateX(0) scale(1)}50%{transform:rotateX(180deg) scale(1.06)}to{transform:rotateX(360deg) scale(1)}}@keyframes solvedIn{0%{opacity:0;transform:translateY(-10px) scale(.98)}60%{transform:translateY(3px) scale(1)}to{opacity:1;transform:none}}.connections-scope .mistakes{display:flex;align-items:center;gap:8px;margin:10px 0;color:var(--muted);font-size:.85rem;flex:none}.connections-scope .mistakes__dots{display:inline-flex;gap:8px}.connections-scope .dot{width:14px;height:14px;border-radius:50%;background:var(--tile-selected);display:inline-block;transition:background .2s ease,transform .2s ease}.connections-scope .dot--used{background:var(--border);transform:scale(.85)}.connections-scope .controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;flex:none}.connections-scope .btn{border:1px solid var(--text);background:var(--surface);color:var(--text);border-radius:999px;padding:9px 20px;font-size:.9rem;font-weight:600;transition:background .12s ease,opacity .12s ease}.connections-scope .btn:hover:not(:disabled){background:var(--surface-hover)}.connections-scope .btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}.connections-scope .btn--primary:hover:not(:disabled){background:var(--brand-hover);border-color:var(--brand-hover)}.connections-scope .btn:disabled{opacity:.4;cursor:default;border-color:var(--border)}.connections-scope .link-btn{margin-top:10px;border:0;background:none;color:var(--brand);text-decoration:underline;font-size:.85rem;flex:none}.connections-scope .overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}.connections-scope .modal{background:var(--surface);border-radius:12px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:0 12px 40px var(--shadow);animation:rise .2s ease-out}.connections-scope .modal__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px}.connections-scope .modal__title{margin:0;font-size:1.4rem;font-weight:800}.connections-scope .modal__body{padding:4px 20px 22px}.connections-scope .modal__body p{line-height:1.5}.connections-scope .howto{padding-left:18px}.connections-scope .howto li{margin:6px 0;line-height:1.4}.connections-scope .howto__sub{color:var(--muted);font-size:.9rem}.connections-scope .howto__legend{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}.connections-scope .howto__legend li{display:flex;align-items:center;gap:8px;font-size:.9rem}.connections-scope .swatch{width:18px;height:18px;border-radius:4px;display:inline-block}.connections-scope .result-grid{display:flex;flex-direction:column;gap:4px;align-items:center;margin:8px 0 18px;font-size:1.3rem;line-height:1}.connections-scope .result-grid__row{display:flex;gap:3px}.connections-scope .stats{display:flex;justify-content:center;gap:20px;margin-bottom:20px}.connections-scope .stat{text-align:center}.connections-scope .stat__value{font-size:1.7rem;font-weight:800}.connections-scope .stat__label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}.connections-scope .result-actions{display:flex;flex-direction:column;gap:10px}.connections-scope .result-actions .btn{width:100%}@keyframes shake0{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}@keyframes shake1{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}@media (prefers-reduced-motion: reduce){.connections-scope, .connections-scope *, .connections-scope *:before, .connections-scope *:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}@media (max-height: 720px){.connections-scope .board{height:min(58dvh,400px,96vw)}.connections-scope .header__tagline{display:none}.connections-scope .mistakes{margin:7px 0}}

html.dark .connections-scope{--bg:#121213;--text:#f5f5f5;--muted:#9aa0a6;--tile:#3a3a3c;--tile-selected:#565758;--border:#4a4a4c;--surface:#1c1c1e;--surface-hover:#2a2a2c;--overlay:rgba(0,0,0,.6);--shadow:rgba(0,0,0,.6)}

.connections-scope .app{min-height:calc(220px + min(64dvh, 460px));padding-top:2px}
.connections-scope .header{display:none}
.connections-scope .overlay{z-index:9999}
.connections-scope .confetti{z-index:9998}