.pb-tangram{--pb-tangram-ghost:color-mix(in oklab, var(--pb-ink) 12%, var(--pb-surface));--pb-tangram-piece:color-mix(in oklab, var(--pb-brand) 52%, var(--pb-surface));--pb-tangram-edge:var(--pb-surface);width:min(100%, var(--pb-page));margin:0 auto;padding:clamp(.75rem,2vw,1.5rem) clamp(.75rem,3vw,2rem) 7rem}.pb-tangram--loading{place-items:center;gap:1rem;min-height:60vh;display:grid}.pb-tangram-skeleton{aspect-ratio:4/3;border:3px solid var(--pb-line);border-radius:var(--pb-r-lg);background:linear-gradient(135deg, transparent 45%, var(--pb-line) 45% 55%, transparent 55%), linear-gradient(45deg, transparent 66%, var(--pb-line) 66% 74%, transparent 74%);width:min(100%,320px);animation:pb-tangram-breathe 1.8s var(--pb-ease) infinite}@keyframes pb-tangram-breathe{0%,to{opacity:.5}50%{opacity:.85}}.pb-tangram__note{color:var(--pb-ink-soft);font-size:var(--pb-fs-sm);align-items:center;gap:.4rem;display:inline-flex}.pb-tangram .pb-play__bar{align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.pb-tangram .pb-back{border-radius:var(--pb-r-pill);border:1.5px solid var(--pb-line);background:var(--pb-surface);width:40px;height:40px;color:var(--pb-ink);cursor:pointer;transition:background var(--pb-dur) var(--pb-ease);justify-content:center;align-items:center;padding:0;display:inline-flex}.pb-tangram .pb-back:hover{background:var(--pb-surface-2)}.pb-tangram .pb-play__meta{flex-wrap:wrap;flex:1;align-items:center;gap:.2rem .6rem;min-width:0;display:flex}.pb-tangram .pb-play__level{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:var(--pb-font-display);font-size:var(--pb-fs-lg);font-weight:600;overflow:hidden}.pb-tangram__placed{color:var(--pb-ink-soft);font-size:var(--pb-fs-xs);font-variant-numeric:tabular-nums;white-space:nowrap}.pb-tangram .pb-play__clock{color:var(--pb-ink-soft);font-variant-numeric:tabular-nums;font-size:var(--pb-fs-sm);white-space:nowrap;align-items:center;gap:.3rem;margin-left:auto;font-weight:700;display:inline-flex}.pb-tangram .pb-play__body{grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:clamp(1rem,2.5vw,2rem);display:grid}.pb-tangram .pb-play__side{gap:.9rem;display:grid}.pb-tangram__stage{justify-items:center;display:grid;position:relative}.pb-tangram-board{border-radius:var(--pb-r-lg);background:var(--pb-surface);width:auto;max-width:100%;height:min(72vh,600px);box-shadow:var(--pb-lift-1);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0 auto;display:block}.pb-tangram__tray{fill:var(--pb-sunken);stroke:color-mix(in oklab, var(--pb-ink) 13%, var(--pb-surface));stroke-width:.02px}.pb-tangram__silhouette polygon{fill:var(--pb-tangram-ghost);stroke:var(--pb-tangram-ghost);stroke-width:.02px;stroke-linejoin:round}.pb-tangram__piece{fill:var(--pb-tangram-piece);stroke:var(--pb-tangram-edge);stroke-width:.014px;stroke-linejoin:round;cursor:grab;transition:fill var(--pb-dur) var(--pb-ease), stroke var(--pb-dur) var(--pb-ease)}.pb-tangram__piece.is-tray{--pb-tangram-piece:color-mix(in oklab, var(--pb-brand) 44%, var(--pb-surface))}.pb-tangram__piece.is-selected{--pb-tangram-piece:color-mix(in oklab, var(--pb-brand) 70%, var(--pb-surface));stroke:color-mix(in oklab, var(--pb-brand) 55%, var(--pb-ink));stroke-width:.03px}.pb-tangram__piece.is-dragging{cursor:grabbing}.pb-tangram-board.is-solved .pb-tangram__piece{cursor:default}.pb-tangram__piece:focus-visible{stroke:var(--pb-brand);stroke-width:.075px;outline:none}.pb-tangram.is-solved .pb-tangram__piece{--pb-tangram-edge:color-mix(in oklab, var(--pb-ink) 26%, var(--pb-surface))}.pb-tangram.is-solved [data-piece=large-1]{--pb-tangram-piece:color-mix(in oklab, var(--pb-brand) 76%, var(--pb-surface))}.pb-tangram.is-solved [data-piece=large-2]{--pb-tangram-piece:color-mix(in oklab, var(--pb-brand) 40%, var(--pb-surface))}.pb-tangram.is-solved [data-piece=medium]{--pb-tangram-piece:color-mix(in oklab, var(--pb-accent) 80%, var(--pb-surface))}.pb-tangram.is-solved [data-piece=parallelogram]{--pb-tangram-piece:color-mix(in oklab, var(--pb-accent) 44%, var(--pb-surface))}.pb-tangram.is-solved [data-piece=square]{--pb-tangram-piece:color-mix(in oklab, var(--pb-sky) 82%, var(--pb-surface))}.pb-tangram.is-solved [data-piece=small-1]{--pb-tangram-piece:color-mix(in oklab, var(--pb-sky) 46%, var(--pb-surface))}.pb-tangram.is-solved [data-piece=small-2]{--pb-tangram-piece:color-mix(in oklab, var(--pb-ink) 34%, var(--pb-surface))}.pb-tangram-reveal{width:min(190px,52vw);height:auto;margin-bottom:.2rem;display:block}.pb-tangram-reveal polygon{fill:var(--pb-tangram-piece);stroke:var(--pb-tangram-edge);stroke-width:.03px;stroke-linejoin:round}@media (max-width:900px){.pb-tangram .pb-play__body{grid-template-columns:minmax(0,1fr)}}.pb-tangram__tools{gap:.5rem;display:grid}.pb-tangram__hintline{color:var(--pb-ink-soft);font-size:var(--pb-fs-xs);line-height:1.45}.pb-tangram .pb-tools{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.pb-tangram .pb-tool{border:1.5px solid var(--pb-line);border-radius:var(--pb-r-sm);background:var(--pb-surface);color:var(--pb-ink-soft);cursor:pointer;transition:background var(--pb-dur) var(--pb-ease), color var(--pb-dur) var(--pb-ease), border-color var(--pb-dur) var(--pb-ease);flex-direction:column;align-items:center;gap:3px;padding:.5rem .2rem;font-size:.66rem;font-weight:700;display:flex}.pb-tangram .pb-tool:hover:not(:disabled){background:var(--pb-surface-2);color:var(--pb-ink)}.pb-tangram .pb-tool:disabled{opacity:.4;cursor:not-allowed}.pb-tangram__levels{border-top:1.5px dashed var(--pb-line-strong);gap:.55rem;padding-top:.9rem;display:grid}.pb-tangram__pick{gap:.3rem;display:grid}.pb-tangram__pick-label{letter-spacing:.08em;text-transform:uppercase;color:var(--pb-ink-faint);font-size:.68rem;font-weight:700}.pb-tangram__select{border:1.5px solid var(--pb-line);border-radius:var(--pb-r-sm);background:var(--pb-surface);width:100%;color:var(--pb-ink);font:inherit;font-size:var(--pb-fs-sm);cursor:pointer;padding:.5rem .55rem;font-weight:600}.pb-tangram__select:hover{background:var(--pb-surface-2)}.pb-tangram .pb-curtain{z-index:3;border-radius:var(--pb-r-lg);background:color-mix(in oklab, var(--pb-bg) 82%, transparent);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);color:var(--pb-ink-soft);animation:pb-tangram-fade var(--pb-dur) var(--pb-ease);flex-direction:column;justify-content:center;align-items:center;gap:.75rem;display:flex;position:absolute;inset:0}@keyframes pb-tangram-fade{0%{opacity:0}to{opacity:1}}.pb-tangram .pb-hint{z-index:20;border:2px solid var(--pb-line-strong);border-radius:var(--pb-r-lg);background:var(--pb-surface);width:min(560px,100% - 2rem);box-shadow:0 6px 0 var(--pb-shadow);animation:pb-tangram-rise var(--pb-dur-slow) var(--pb-ease);gap:.55rem;padding:.9rem 1.1rem;display:grid;position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%)}@keyframes pb-tangram-rise{0%{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%)}}.pb-tangram .pb-hint--complete{border-color:var(--pb-brand)}.pb-tangram .pb-hint__head{color:var(--pb-ink-soft);align-items:center;gap:.5rem;display:flex}.pb-tangram .pb-hint__text{font-size:var(--pb-fs-md);line-height:1.5}.pb-tangram .pb-hint__actions{justify-content:flex-end;gap:.5rem;display:flex}.pb-tangram .pb-win{z-index:40;background:color-mix(in oklab, var(--pb-ink) 52%, transparent);animation:pb-tangram-fade var(--pb-dur-slow) var(--pb-ease);place-items:center;padding:1.25rem;display:grid;position:fixed;inset:0}.pb-tangram .pb-win__card{text-align:center;background:var(--pb-surface);border:2px solid var(--pb-line-strong);border-radius:var(--pb-r-xl);width:min(420px,100%);box-shadow:0 8px 0 color-mix(in oklab, var(--pb-ink) 22%, transparent);animation:pb-tangram-pop var(--pb-dur-slow) var(--pb-ease);justify-items:center;gap:.6rem;padding:1.4rem 1.5rem 1.5rem;display:grid}@keyframes pb-tangram-pop{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}.pb-tangram .pb-win__title{font-size:var(--pb-fs-xl)}.pb-tangram .pb-win__sub{color:var(--pb-ink-soft);font-size:var(--pb-fs-sm)}.pb-tangram .pb-win__actions{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.4rem;display:flex}