:root{--blue:#293fea;--pink:#f7c5d5;--butter:#fff5dc;--plum:#492638;--paper:var(--butter);--ink:var(--plum);--muted:#795267;--line:#49263826;--red:var(--blue);--display:'Bricolage Grotesque',sans-serif}
html{background:var(--blue)}body{background:var(--blue);color:var(--butter);min-height:100svh;transition:background-color 420ms,color 300ms}body[data-scene=puzzle]{background:var(--pink);color:var(--plum)}body[data-scene=campus],body[data-scene=match]{background:var(--butter);color:var(--plum)}
.app-shell{max-width:1500px;padding:15px 5vw 25px}.prototype-bar{color:inherit;opacity:.72;font-size:10px}.app-header{padding:30px 0;gap:20px}.brand>span{font:800 40px/1 var(--display);letter-spacing:-2.7px}.brand small{color:inherit}.brand-line{font-size:12px;opacity:.8;margin-left:auto;margin-right:25px}.header-link{border:1px solid currentColor;border-radius:30px;padding:11px 19px;background:none;color:inherit;box-shadow:none;white-space:nowrap}
main{max-width:none}.screen{max-width:460px;margin:auto;padding:22px 0 35px}.landing,.piece-screen,[data-screen=birth],.puzzle-screen{max-width:none}.landing{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;text-align:left;gap:0 30px;min-height:590px}.landing h1{font:700 clamp(64px,7.8vw,120px)/.92 var(--display);letter-spacing:-.065em;margin-bottom:29px}.landing .intro{font-size:19px;color:inherit;line-height:1.4;margin-bottom:28px}.landing .primary{width:270px;display:flex;align-items:center;justify-content:space-between}.landing .primary span{font-size:24px}.landing .micro{text-align:left}.landing-foot{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;border-top:1px solid #ffffff30;padding-top:20px;font-size:11px;margin-top:35px}
.primary{border:0;border-radius:8px;box-shadow:0 5px 0 #1528b0;background:var(--butter);color:var(--blue);font-size:16px;min-height:54px;padding:15px 20px}.primary:hover{background:#fffbed}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #1528b0}.micro,.back,.quiet,.privacy,.eyebrow,.piece-facts{color:inherit}.quiet{opacity:.8}.quiet:hover{color:inherit;opacity:1}.micro{opacity:.75}.back{opacity:.75}.back:hover{opacity:1}.intro{color:inherit;opacity:.8}footer{color:inherit;opacity:.65;font-size:10px;margin-top:22px}
.sculpture-host{min-width:0;position:relative}.sculpture-stage{height:510px;position:relative;animation:object-in 650ms ease-out}.sculpture-stage canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}.sculpture-stage canvas:active{cursor:grabbing}.sculpture-controls{display:flex;gap:14px;align-items:center;justify-content:center;position:absolute;bottom:0;left:0;right:0;font-size:10px}.sculpture-controls button{padding:9px 12px;border-radius:20px;background:#182fc2;color:var(--butter);font-size:10px}.sculpture-controls>span{opacity:.75}.landing-art{margin:0 auto;max-width:400px}.landing-art svg{height:370px}.has-sculpture #personalPiece{display:none}
[data-screen=birth],.piece-screen{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center;min-height:620px}.birth-copy,.piece-copy{max-width:440px}.birth-copy h2,.piece-screen h2{font:700 clamp(42px,4.4vw,66px)/1 var(--display);letter-spacing:-.055em;margin-bottom:22px}.birth-copy .intro{font-size:16px}.birth-copy .back{margin-bottom:23px}.piece-copy .back{margin-bottom:42px}.piece-copy .eyebrow{font-size:13px;opacity:.75}.piece-reading{font-size:19px;line-height:1.5}.piece-facts{border-color:#ffffff35}.birth-copy input:not([type=checkbox]){border:1px solid #ffffff75;background:#2035cd;color:var(--butter);box-shadow:inset 0 2px 4px #1127a426;border-radius:7px;color-scheme:dark}.birth-copy input::placeholder{color:#cbd1ff}.birth-copy label small{color:#d1d6ff}.birth-details summary{list-style:none;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;padding:1px 0}.birth-details summary::-webkit-details-marker{display:none}.birth-details summary::before{content:'+';margin-right:8px}.birth-details[open] summary::before{content:'−'}.birth-details summary span{margin-left:auto;font-size:11px;opacity:.65}.birth-details .field-row{margin-top:17px}.birth-copy form{gap:20px}.privacy{opacity:.78;font-size:12px}
.puzzle-screen{padding-top:7px;max-width:1150px}.section-nav{font-size:12px;margin-bottom:20px}.section-nav .back,.subtle{color:inherit}.crowd-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.crowd-owner{font-size:13px;margin:0 0 14px}.crowd-heading h2{font:800 clamp(60px,7vw,95px)/.88 var(--display);letter-spacing:-.065em;margin:0}.crowd-heading>p{font-size:16px;line-height:1.4;margin:0 0 6px}.puzzle-screen>.intro{font-size:13px;margin:19px 0 22px}.puzzle-toolbar{color:inherit;margin-bottom:0}.view-switch{background:#dc9fb74d;border-radius:30px;box-shadow:none;padding:3px}.view-switch button{border-radius:30px;min-height:36px;padding:7px 16px;color:var(--plum)}.view-switch button[aria-pressed=true]{background:var(--butter);box-shadow:none;color:var(--plum)}
.puzzle-canvas{height:430px;border:0;background:none;box-shadow:none;border-radius:0;overflow:hidden;margin:0}.zoom-controls{background:#fff5dcbd;border:0;box-shadow:none;border-radius:25px;bottom:0;right:0}.zoom-controls button{min-height:40px;min-width:38px}.board-caption{color:inherit;opacity:.7;margin-top:6px}.puzzle-invite{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);gap:20px;margin:22px 0 0;padding-top:20px}.puzzle-invite p{font-size:16px;margin:0}.puzzle-invite .primary{width:auto;min-width:210px;background:var(--blue);color:var(--butter);box-shadow:0 4px 0 #182cba;border-radius:28px;padding-left:30px;padding-right:30px}.demo-controls{margin-top:25px;gap:5px 20px}.demo-controls>span{font-size:10px;color:#795267}.demo-controls button{color:var(--plum)}#rareFriendButton{color:var(--blue);font-weight:600}.beyond{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:17px;margin-top:24px}.beyond p{color:#795267;font-size:12px;margin:0}.beyond button{font-size:12px}.perfect-connections{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.perfect-connections button{font-size:12px;color:var(--blue);border:1px solid #293fea55;border-radius:20px;padding:9px 14px}.people-list{max-height:430px;min-height:330px}.person-row{padding:17px 4px}.person-row small,.person-row>span:last-child{color:#795267}.search-label{margin-top:17px}#peopleSearch{background:#fff5dc75;border-color:#49263826;box-shadow:none}
.puzzle-piece .piece-letter{font-size:27px;font-weight:600}.puzzle-piece .piece-name{font-size:12px}.puzzle-piece.is-ghost .piece-body{stroke:#99607a;fill:none}.puzzle-piece.is-ghost text{fill:#795267}.puzzle-piece.is-linked .piece-body{stroke:#293fea;stroke-width:1.1}.puzzle-piece.is-linked:focus-visible .piece-body{stroke-width:3}.puzzle-piece .fit-mark{font-size:8px;fill:#293fea;font-weight:600}
dialog{background:var(--butter);color:var(--plum);border:0;border-radius:20px;box-shadow:0 20px 80px #20193b33;width:min(460px,calc(100% - 28px));padding:20px 30px 26px}dialog::backdrop{background:#17154370;backdrop-filter:blur(8px)}dialog h2{font:700 31px/1.08 var(--display);letter-spacing:-1.3px}.dialog-close{background:#eadfc7;box-shadow:none;color:var(--plum)}dialog>p,.result-meta,.result-meta strong{color:inherit}.result-meta{font-size:13px}.result-meta strong{font-size:30px}.connection-dialog .pair-art{max-width:355px;margin-bottom:30px}.pair-art svg{height:210px}.connection-dialog .primary,body[data-scene=campus] .primary,body[data-scene=match] .primary,#inviteDialog .primary,#paymentDialog .primary,#exportDialog .primary{background:var(--blue);color:var(--butter);box-shadow:0 4px 0 #1427b6}.connection-dialog .full-reading{border-color:#49263826}.invite-tray{background:var(--pink);border:0;border-radius:0;box-shadow:none}.invite-tray>span{color:var(--plum)}
.connection-dialog.is-perfect{background:var(--blue);color:var(--butter);width:min(560px,calc(100% - 28px));text-align:center}.is-perfect .dialog-close{background:#1b30c1;color:var(--butter)}.click-moment{font:700 clamp(40px,5vw,60px)/1 var(--display);letter-spacing:-.06em;margin:8px 0 4px}.is-perfect .pair-art{max-width:400px;margin:5px auto 12px}.is-perfect .pair-art svg{height:240px;animation:joined-turn 1900ms ease both;transform-origin:center}.is-perfect .pair-art .puzzle-piece:first-child .piece-inner{animation:snap-self 1100ms cubic-bezier(.2,.75,.2,1) both;transform-origin:50px 50px}.is-perfect .pair-art .puzzle-piece:last-child .piece-inner{animation:snap-friend 1100ms cubic-bezier(.2,.75,.2,1) both;transform-origin:50px 50px}.is-perfect .result-meta{flex-direction:column;gap:2px;margin-bottom:14px;animation:score-in 1400ms both}.is-perfect .result-meta strong{font:700 66px/1 var(--display);letter-spacing:-4px}.is-perfect h2{font-size:25px}.is-perfect #connectionReading{font-size:16px;max-width:390px;margin:0 auto 22px}.is-perfect .primary{background:var(--butter);color:var(--blue);box-shadow:0 4px 0 #1528b0}.is-perfect .full-reading{border-color:#ffffff30;text-align:left}.is-perfect .reading-note{color:#d5dbff}.is-perfect .quiet{margin:3px 0 0}.is-perfect .pair-art .puzzle-piece text{fill:#302d36}.is-perfect .pair-art .has-light-ink text{fill:#fff5dc}
@keyframes object-in{from{opacity:0;transform:translateY(-20px) scale(.92)}to{opacity:1;transform:none}}@keyframes snap-self{0%{transform:translate(-28px,-25px) rotate(-16deg)}65%{transform:translate(-10px,-5px) rotate(-5deg)}83%{transform:translate(0,0) rotate(0)}92%{transform:translate(-1px,0)}100%{transform:none}}@keyframes snap-friend{0%{transform:translate(45px,20px) rotate(21deg)}65%{transform:translate(14px,3px) rotate(7deg)}83%{transform:translate(0,0) rotate(0)}92%{transform:translate(1px,0)}100%{transform:none}}@keyframes joined-turn{0%,58%{transform:perspective(800px) rotateX(0) rotateY(0) rotateZ(0)}78%{transform:perspective(800px) rotateX(17deg) rotateY(-19deg) rotateZ(-7deg)}100%{transform:perspective(800px) rotateX(8deg) rotateY(0) rotateZ(-6deg)}}@keyframes score-in{0%,65%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@media(max-width:900px){.landing h1{font-size:70px}.landing{gap:10px;min-height:530px}.sculpture-stage{height:470px}.brand-line{display:none}[data-screen=birth],.piece-screen{gap:30px}.birth-copy h2,.piece-screen h2{font-size:48px}.puzzle-canvas{height:410px}}
@media(max-width:620px){.app-shell{padding:12px 24px 25px}.prototype-bar{font-size:9px}.app-header{padding:26px 0}.brand>span{font-size:34px}.header-link{font-size:12px;padding:9px 15px}.landing{display:flex;flex-direction:column;align-items:stretch;padding-top:20px;gap:0;min-height:0}.landing h1{font-size:clamp(57px,15vw,85px);margin-bottom:21px}.landing .intro{font-size:16px;margin-bottom:24px}.landing .primary{width:228px;min-height:50px;font-size:15px}.landing .micro{font-size:10px;margin-top:16px}.sculpture-stage{height:350px}.landing .sculpture-host{margin:8px -20px 0}.landing-foot{font-size:10px;line-height:1.5;margin-top:25px;padding-top:18px}.landing-foot span{max-width:190px}.landing-foot span:last-child{max-width:110px;text-align:right}[data-screen=birth],.piece-screen{display:flex;flex-direction:column;min-height:0;gap:15px;padding-top:5px}.birth-copy,.piece-copy{width:100%;max-width:440px}[data-screen=birth] .sculpture-host{display:none}.piece-screen .sculpture-host{order:-1;width:100%;margin-top:-15px}.piece-screen .sculpture-stage{height:280px}.piece-copy .back{margin-bottom:18px}.piece-screen h2{font-size:41px}.birth-copy h2{font-size:45px}.piece-reading{font-size:17px}.sculpture-controls{gap:9px;font-size:9px}.sculpture-controls button{font-size:9px;padding:8px 10px}.crowd-owner{font-size:11px;max-width:210px;margin-bottom:17px}.crowd-heading h2{font-size:66px}.crowd-heading{gap:15px}.crowd-heading>p{font-size:11px;max-width:105px;flex-shrink:0}.puzzle-screen>.intro{font-size:12px;margin-bottom:18px}.puzzle-toolbar{font-size:11px}.view-switch button{font-size:11px;padding:6px 12px}.puzzle-canvas{height:370px;margin-left:-15px;margin-right:-15px}.board-caption{font-size:10px}.puzzle-invite{display:block;text-align:center;margin-top:20px}.puzzle-invite p{font-size:14px;margin-bottom:13px}.puzzle-invite .primary{width:100%}.demo-controls{gap:4px 15px;font-size:10px}.beyond{display:block;text-align:center}.beyond p{margin-bottom:5px}.section-nav{margin-bottom:24px}.connection-dialog.is-perfect{padding:16px 23px 22px}.is-perfect .pair-art svg{height:200px}.click-moment{font-size:46px}.is-perfect .result-meta strong{font-size:56px}.is-perfect h2{font-size:24px}.connection-dialog .pair-art svg{height:185px}dialog h2{font-size:28px}footer{font-size:9px}.piece-facts{font-size:12px}}
@media(max-width:360px){.app-shell{padding-left:20px;padding-right:20px}.crowd-heading{display:block}.crowd-heading>p{display:none}.crowd-heading h2{font-size:62px}.puzzle-canvas{height:350px}.landing h1{font-size:57px}.sculpture-stage{height:310px}.landing-foot{font-size:9px}.landing-foot span:first-child{max-width:160px}}
.landing h1{white-space:nowrap}.puzzle-screen{position:relative}.puzzle-screen>.section-nav{position:absolute;right:0;top:8px;margin:0}.puzzle-screen>.section-nav .back{display:none}.puzzle-screen>.intro{display:none}.puzzle-toolbar{margin-top:24px}.crowd-owner{padding-right:90px}.puzzle-screen .crowd-heading{padding-top:5px}
body[data-scene=landing] :focus-visible,body[data-scene=birth] :focus-visible,body[data-scene=piece] :focus-visible,.is-perfect :focus-visible{outline-color:var(--butter)}
@media(max-width:620px){.landing h1{font-size:clamp(50px,14vw,80px)}.crowd-owner{padding-right:0}.puzzle-screen>.section-nav{top:5px}.puzzle-toolbar{margin-top:23px}.crowd-heading{display:block;position:relative}.crowd-heading>p{position:absolute;bottom:4px;right:0;max-width:92px;font-size:10px}.crowd-heading h2{font-size:64px}}
/* Your element sets the table; friends retain their own element colors. */
body[data-scene=puzzle]{background:var(--element-bg,#dce6d8);color:var(--element-ink,#263c2b);--ink:var(--element-ink);--muted:var(--element-muted);--line:color-mix(in srgb,var(--element-ink) 18%,transparent)}
body[data-scene=puzzle] .view-switch{background:color-mix(in srgb,var(--element-ink) 7%,transparent)}
body[data-scene=puzzle] .view-switch button{color:var(--element-ink)}
body[data-scene=puzzle] .view-switch button[aria-pressed=true]{background:#ffffffa6;color:var(--element-ink)}
body[data-scene=puzzle] .puzzle-invite .primary{background:var(--element-accent);color:white;box-shadow:0 3px 0 color-mix(in srgb,var(--element-accent) 80%,#182018)}
body[data-scene=puzzle] .demo-controls button,body[data-scene=puzzle] #rareFriendButton,body[data-scene=puzzle] .beyond button span{color:var(--element-accent)}
body[data-scene=puzzle] .demo-controls>span,body[data-scene=puzzle] .beyond p,body[data-scene=puzzle] .person-row small,body[data-scene=puzzle] .person-row>span:last-child{color:var(--element-muted)}
body[data-scene=puzzle] .perfect-connections button{color:var(--element-accent);border-color:color-mix(in srgb,var(--element-accent) 35%,transparent)}
body[data-scene=puzzle] #peopleSearch{background:#ffffff55;border-color:var(--line)}
body[data-scene=puzzle] .zoom-controls{background:#ffffff9e;color:var(--element-ink);border:1px solid #ffffff60}
body[data-scene=puzzle] :focus-visible{outline-color:var(--element-accent)}
#puzzleBoard .piece-shadow{opacity:.045;transform:translate(0,5px)}
#puzzleBoard .piece-bevel{opacity:.6}
#puzzleBoard .is-ghost .piece-body{stroke:var(--element-muted)}
#puzzleBoard .is-ghost text{fill:var(--element-muted)}
#puzzleBoard .is-linked .piece-body{stroke:var(--element-accent)}
#puzzleBoard .fit-mark{fill:var(--element-ink)}
#puzzleBoard .has-light-ink .fit-mark{fill:#fff9ed}
.crowd-summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.board-element{display:inline-flex;align-items:center;gap:6px;color:var(--element-muted);font-size:11px}
.board-element::before{content:'';width:10px;height:10px;flex:none;border-radius:3px;background:var(--element-piece);border:1px solid color-mix(in srgb,var(--element-ink) 20%,transparent)}
.element-preview{max-width:440px;margin:15px auto 0;text-align:center;font-size:11px;color:var(--element-muted)}
.element-preview summary{cursor:pointer;min-height:36px;padding:8px;list-style:none;text-decoration:underline;text-underline-offset:3px}
.element-preview summary::-webkit-details-marker{display:none}
#elementOptions{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;padding:12px 0}
#elementOptions button{display:flex;align-items:center;gap:7px;padding:10px 12px;min-height:40px;border:1px solid transparent;border-radius:20px;color:var(--element-ink);font-size:12px;background:#ffffff3d}
#elementOptions button::before{content:'';width:13px;height:13px;background:var(--swatch);border:1px solid #0002;border-radius:3px}
#elementOptions button[aria-pressed=true]{border-color:var(--element-accent);background:#ffffff8c}
.element-preview p{font-size:10px;line-height:1.5;margin:0 0 10px}
@media(hover:hover){#puzzleBoard .puzzle-piece[role=button]:not(.is-ghost):hover .piece-inner{transform:translateY(-1px)}}
@media(max-width:620px){.crowd-summary{gap:4px;flex-direction:column;align-items:flex-start}.board-element{font-size:10px}}
.connection-ranking{margin:30px 0 0;padding:25px 0 0;border-top:1px solid var(--line)}
.ranking-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.ranking-heading h3{font:700 29px/1.1 var(--display);letter-spacing:-1px;margin:0 0 6px}
.ranking-heading p,.ranking-label{font-size:11px;color:var(--element-muted);margin:0}
.ranking-list{list-style:none;padding:0;margin:0}
.ranking-list.is-expanded{max-height:390px;overflow-y:auto;overscroll-behavior:contain}
.ranking-list li+li{border-top:1px solid var(--line)}
.ranking-row{display:grid;grid-template-columns:28px 42px minmax(0,1fr) auto;align-items:center;gap:14px;text-align:left;width:100%;min-height:76px;padding:10px 8px;color:var(--element-ink);border-radius:8px}
.ranking-place{font:600 22px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--element-muted)}
.ranking-piece{display:block;width:42px;height:44px}
.ranking-identity{min-width:0;display:grid;gap:4px}
.ranking-identity strong{font-size:16px;font-weight:600;overflow-wrap:anywhere}
.ranking-identity small{font-size:11px;color:var(--element-muted)}
.ranking-score{font:700 29px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.ranking-score small{font:400 10px/1 var(--font);color:var(--element-muted);margin-left:5px}
.ranking-toggle{display:block;margin:13px auto 0;padding:10px 20px;min-height:44px;font-size:13px;color:var(--element-ink);text-decoration:underline;text-underline-offset:4px}
.ranking-note,.ranking-empty{color:var(--element-muted);font-size:11px;line-height:1.5;margin:16px 0 0}
.ranking-empty{padding:15px 0;font-size:14px}
.ranking-row:focus-visible,.ranking-toggle:focus-visible{outline:2px solid var(--element-accent);outline-offset:3px}
@media(hover:hover){.ranking-row:hover{background:#ffffff40}}
@media(max-width:620px){.ranking-heading h3{font-size:26px}.ranking-row{grid-template-columns:22px 32px minmax(0,1fr) auto;gap:9px;padding:10px 3px}.ranking-piece{width:32px}.ranking-score{font-size:26px}.ranking-label{font-size:10px}}
.chart-details{font-size:13px;line-height:1.6;margin:0 0 24px;border-top:1px solid #ffffff45;padding-top:14px}
.chart-details summary,.connection-method summary{cursor:pointer;min-height:40px;padding:8px 0;text-decoration:underline;text-underline-offset:4px}
.chart-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:14px 0}
.chart-pillars dt{font-size:11px;opacity:.8;color:inherit}.chart-pillars dd{font-size:23px;margin:4px 0 0}.chart-pillars>div:last-child dd{font-size:19px}
.connection-method{font-size:12px;line-height:1.6;margin:16px 0 24px;border-top:1px solid currentColor}
.connection-method ul{padding-left:20px}.connection-method li{margin:5px 0}
#connectionSource{line-height:1.6}#friendDialog form{margin-top:20px}#friendDialog .primary{background:var(--blue);color:var(--butter)}
.birth-copy .field-error{color:#fff5dc}.birth-copy .micro{line-height:1.6}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}