.style-board-surface{position:relative;isolation:isolate;padding-bottom:20px;background:#0d0e10;background-image:radial-gradient(ellipse at 45% 48%,#27282a 0%,#17181b 42%,#090a0c 87%);background-size:auto}
.style-board-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1320px;margin:22px auto 0;padding:0 34px}
.style-board-heading h1{font-size:26px;letter-spacing:-.03em;margin:0;line-height:1.2}
.style-board-heading .style-sound{font-size:14px;color:#a5adb2;min-height:32px}
.style-board{container-type:inline-size;position:relative;display:block;max-width:1320px;min-height:815px;margin:8px auto 0;padding:0;isolation:isolate}
.style-board-grid{--board-cell:calc(100cqw / 6);position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.24) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.24) 2px,transparent 2px);background-size:var(--board-cell) var(--board-cell);mask-image:radial-gradient(ellipse at 47% 44%,#000 10%,rgba(0,0,0,.8) 43%,rgba(0,0,0,.3) 66%,transparent 92%);-webkit-mask-image:radial-gradient(ellipse at 47% 44%,#000 10%,rgba(0,0,0,.8) 43%,rgba(0,0,0,.3) 66%,transparent 92%);z-index:-1}
.style-board-grid:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 26% 63%,rgba(13,14,16,.85),transparent 27%),radial-gradient(ellipse at 84% 17%,rgba(13,14,16,.76),transparent 30%);pointer-events:none}
.style-board-cell-number{position:absolute;left:calc(var(--cell-column)*var(--board-cell) + 14px);top:calc(var(--cell-row)*var(--board-cell) + 10px);font-family:UNCAGE,sans-serif;font-size:58px;line-height:1;padding-top:.18em;letter-spacing:0;color:rgba(236,239,242,.36);pointer-events:none}
/* Numbers stay outside the grid's fading mask and use upper cell corners. */
.style-board-numbers{--board-cell:calc(100cqw / 6);position:absolute;inset:0;pointer-events:none;z-index:4}
.style-board-cell-number{left:calc(var(--cell-column)*var(--board-cell) + 12px);top:calc(var(--cell-row)*var(--board-cell) + 10px);font-size:48px;color:rgba(236,239,242,.48)}
.board-number-1{--cell-column:0;--cell-row:1;--cell-inset-x:.12;--cell-inset-y:.07}
.board-number-2{--cell-column:1;--cell-row:0;--cell-inset-x:.30;--cell-inset-y:.12}
.board-number-3{--cell-column:3;--cell-row:0;--cell-inset-x:.25;--cell-inset-y:.50}
.board-number-4{--cell-column:2;--cell-row:1;--cell-inset-x:.08;--cell-inset-y:.42}
.board-number-5{--cell-column:4;--cell-row:1;--cell-inset-x:.16;--cell-inset-y:.19}
.board-number-6{--cell-column:1;--cell-row:2;--cell-inset-x:.38;--cell-inset-y:.29}
.board-number-7{--cell-column:3;--cell-row:2;--cell-inset-x:.36;--cell-inset-y:.52}

.style-note-position{position:absolute;width:220px;min-width:0;isolation:isolate;padding:0}
.style-note{--note-angle:-4deg;--note-shift:0px;--note-scale:1;display:flex;flex-direction:column;width:100%;max-width:220px;min-height:204px;padding:22px 16px 16px;color:#161a1d;border:1px solid rgba(255,255,255,.65);border-radius:18px;background:linear-gradient(135deg,#d9dcde 0%,#eef0f1 35%,#bfc4c8 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 15px 30px rgba(0,0,0,.23);transform:translateY(var(--note-shift)) rotate(var(--note-angle)) scale(var(--note-scale));transform-origin:50% 5%;transition:transform .8s cubic-bezier(.2,.65,.2,1),box-shadow .8s;position:relative;min-width:0}
.style-note-pin{position:absolute;z-index:4;top:-38px;left:calc(50% - 34px);width:68px;height:68px;max-width:none;object-fit:contain;pointer-events:none;filter:drop-shadow(5px 8px 4px rgba(0,0,0,.36))}
.style-note-count{font-size:12px;line-height:1.3;color:#616970;margin-bottom:9px}
.style-note h2{font-size:16px;line-height:1.28;letter-spacing:-.02em;margin:0 0 11px;hyphens:none;overflow-wrap:break-word;text-wrap:balance;min-width:0}
.style-note-copy{display:grid;grid-template-columns:minmax(0,1fr);margin-top:auto;margin-bottom:10px;min-height:48px;align-items:end;min-width:0}
.style-note-copy p{grid-column:1;grid-row:1;font-size:12px;line-height:1.45;letter-spacing:0;margin:0;color:#4b535a;hyphens:none;text-wrap:pretty;overflow-wrap:break-word;min-width:0;transition:opacity .45s,transform .45s}
.style-note-copy .style-note-characteristics{opacity:0;transform:translateY(6px);color:#262e34}
.style-note-button{align-self:start;display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border:1px solid rgba(42,50,57,.35);border-radius:8px;font-size:12px;line-height:1.2;background:rgba(255,255,255,.04);color:#262e34;transition:background .5s,border-color .5s;max-width:100%;text-wrap:pretty}
.style-note:hover,.style-note:focus-visible{transform:translateY(calc(var(--note-shift) - 5px)) rotate(calc(var(--note-angle) * .55)) scale(calc(var(--note-scale) * 1.045));box-shadow:inset 0 1px 1px #fff,0 23px 42px rgba(0,0,0,.34);z-index:2}
.style-note-position:has(.style-note:hover),.style-note-position:has(.style-note:focus-visible){z-index:3}
.style-note:hover .style-note-description,.style-note:focus-visible .style-note-description{opacity:0;transform:translateY(-5px)}
.style-note:hover .style-note-characteristics,.style-note:focus-visible .style-note-characteristics{opacity:1;transform:none}
.style-note:hover .style-note-button,.style-note:focus-visible .style-note-button{background:rgba(255,255,255,.14);border-color:rgba(42,50,57,.6)}
/* An uneven constellation with a foreground card in the middle. */
.note-1{left:6.5%;top:220px;z-index:1}.note-1 .style-note{--note-angle:-6deg;--note-scale:.94;box-shadow:inset 0 1px rgba(255,255,255,.9),0 9px 23px rgba(0,0,0,.24)}
.note-2{left:25%;top:65px;z-index:2}.note-2 .style-note{--note-angle:4deg;--note-scale:1.015}
.note-3{left:63%;top:28px;z-index:0}.note-3 .style-note{--note-angle:-2.5deg;--note-scale:.91;box-shadow:inset 0 1px rgba(255,255,255,.9),0 8px 18px rgba(0,0,0,.22)}
.note-4{left:42%;top:325px;z-index:2}.note-4 .style-note{--note-angle:5.5deg;--note-scale:1.045;box-shadow:inset 0 1px rgba(255,255,255,.9),0 23px 38px rgba(0,0,0,.34)}
.note-5{left:78%;top:300px;z-index:1}.note-5 .style-note{--note-angle:-4deg;--note-scale:.97}
.note-6{left:20%;top:525px;z-index:2}.note-6 .style-note{--note-angle:3deg;--note-scale:1.01}
.note-7{left:62%;top:565px;z-index:1}.note-7 .style-note{--note-angle:-5deg;--note-scale:.93}.note-7 .style-note h2{font-size:14px}
.style-catalog-heading{max-width:1320px;margin:auto;padding:38px 40px 30px}
.style-catalog-heading .eyebrow{color:#8e989f}
.style-catalog-heading h1{font-size:clamp(32px,4vw,60px);line-height:1.14;max-width:920px;margin:18px 0;text-wrap:balance;letter-spacing:-.04em}
.style-catalog-heading p{font-size:16px;color:#b8c0c5;margin:0;max-width:650px;text-wrap:pretty}
.style-catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1320px;margin:auto;padding:0 40px 48px;align-items:start}
.catalog-style-card{padding:26px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:linear-gradient(130deg,rgba(255,255,255,.045),rgba(255,255,255,.012));min-width:0}
.catalog-style-number{font-size:12px;color:#7f8a91;font-variant-numeric:tabular-nums;display:block;margin-bottom:20px}
.catalog-style-card h2{font-size:28px;line-height:1.15;letter-spacing:-.035em;hyphens:none;text-wrap:balance;margin-bottom:20px;color:#e2e6e9}
.catalog-style-card p{font-size:16px;line-height:1.7;color:#aeb8bf;text-wrap:pretty;hyphens:none;overflow-wrap:normal;margin:0}
.catalog-style-card .tags{gap:7px;margin-top:24px}.catalog-style-card .tag{color:#9ca7ae;border-color:#3d474e;line-height:1.5;font-size:12px}
@media(max-width:1300px) and (min-width:1001px){.style-note-position{width:194px}.style-note{padding-left:12px;padding-right:12px}.note-5{left:77%}}
@media(max-width:1000px) and (min-width:761px){.style-board{min-height:1090px}.style-board-grid{--board-cell:calc(100cqw / 4)}.style-note-position{width:194px}.style-note{padding-left:12px;padding-right:12px}.note-1{left:5%;top:250px}.note-2{left:33%;top:62px}.note-3{left:70%;top:155px}.note-4{left:37%;top:390px}.note-5{left:66%;top:555px}.note-6{left:11%;top:705px}.note-7{left:48%;top:830px}.style-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.style-board-heading{padding:0 22px;margin-top:20px}.style-board-heading h1{font-size:24px}.style-board{display:grid;grid-template-columns:minmax(0,1fr);gap:86px;max-width:500px;min-height:0;padding:95px 48px 52px}.style-board-grid{--board-cell:calc(100cqw / 2)}.style-note-position:nth-child(n){position:relative;left:auto;right:auto;top:auto;width:210px;max-width:100%;padding:0;justify-self:start}.style-note-position:nth-child(even){justify-self:end}.style-note-position:nth-child(3n){margin-left:26px}.style-note{padding:22px 16px 16px;min-height:204px}.style-note h2{font-size:16px}.note-7 .style-note h2{font-size:14px}.style-note-copy p{font-size:12px}.style-note-button{font-size:12px}.style-board-cell-number{font-size:44px}.board-number-1{--cell-column:0;--cell-row:0}.board-number-2{--cell-column:1;--cell-row:2}.board-number-3{--cell-column:0;--cell-row:4}.board-number-4{--cell-column:1;--cell-row:6}.board-number-5{--cell-column:0;--cell-row:8}.board-number-6{--cell-column:1;--cell-row:10}.board-number-7{--cell-column:0;--cell-row:12}.style-catalog-heading{padding:28px 22px}.style-catalog-heading h1{font-size:36px}.style-catalog-grid{grid-template-columns:1fr;padding:0 22px 36px;gap:18px}.catalog-style-card{padding:22px}.catalog-style-card h2{font-size:26px}}
@media(max-width:520px){.style-board{padding-left:34px;padding-right:34px}.style-board-heading h1{font-size:22px}.style-board-heading .style-sound{font-size:12px}.style-catalog-heading h1{font-size:32px}.style-note-pin{width:62px;height:62px;left:calc(50% - 31px);top:-34px}}
@media(hover:none){.style-note-copy{min-height:0;display:block}.style-note-copy .style-note-characteristics{opacity:1;transform:none;font-size:12px;margin-top:10px;color:#6b7379}.style-note:hover .style-note-description{opacity:1;transform:none}.style-note-position .style-note:hover{transform:translateY(var(--note-shift)) rotate(var(--note-angle)) scale(var(--note-scale))}.style-note-copy p{transition:none}}
@media(prefers-reduced-motion:reduce){.style-note-position .style-note:hover,.style-note-position .style-note:focus-visible{transform:translateY(var(--note-shift)) rotate(var(--note-angle)) scale(var(--note-scale))}.style-note,.style-note-copy p{transition:none}}
@media(max-width:1000px) and (min-width:761px){.style-board-numbers{--board-cell:calc(100cqw / 4)}}
@media(max-width:760px){.style-board-numbers{--board-cell:calc(100cqw / 2)}}
@media(max-width:360px){.style-board{gap:140px}.style-board-grid,.style-board-numbers{--board-cell:calc(100cqw / 4)}.style-board-cell-number{font-size:32px}}