/* Primitive Objects · v1.0
   Icons: 32 grid, 1.4 line, one tinted face. Outlines take currentColor; the face takes --po-face. */
:root{
  --po-peach:#ffd0b5; --po-blue:#a8e8f2; --po-pink:#f4bbd4; --po-lilac:#cfc3ff;
  --po-yellow:#faf038; --po-yellow-soft:#f7e7a0;
  --po-ease:cubic-bezier(.2,.8,.2,1);
  --po-tile-fill:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.035));
  --po-tile-ring:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),0 4px 12px rgba(0,0,0,.25);
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --po-tile-fill:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6));
  --po-tile-ring:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(18,18,18,.08),0 4px 12px rgba(18,18,18,.08);
}}

/* the icon */
.po{width:var(--po-size,32px);height:var(--po-size,32px);flex:none;display:inline-block;vertical-align:middle}
.po-16,.po-20{--po-line:2;stroke-width:2} /* below 24px the line steps up, as the brand prism does (--po-line reaches sprite symbols) */
.po-16{--po-size:16px}.po-20{--po-size:20px}.po-24{--po-size:24px}.po-48{--po-size:48px}

/* face colours by kind of thing */
.po-face-peach{--po-face:var(--po-peach)}.po-face-blue{--po-face:var(--po-blue)}.po-face-pink{--po-face:var(--po-pink)}
.po-face-lilac{--po-face:var(--po-lilac)}.po-face-yellow{--po-face:var(--po-yellow)}.po-face-yellow-soft{--po-face:var(--po-yellow-soft)}

/* the tile: glass, with brackets that spread and a label that wipes in */
.po-tile{--s:1;position:relative;display:grid;place-items:center;width:calc(46px * var(--s));height:calc(46px * var(--s));border-radius:calc(12px * var(--s));
  background:var(--po-tile-fill);box-shadow:var(--po-tile-ring);color:inherit;border:0;padding:0;cursor:pointer;perspective:140px}
.po-tile .po{width:66%;height:66%;transition:transform .42s var(--po-ease);transform-origin:50% 55%}
.po-tile:hover .po,.po-tile:focus-visible .po{transform:rotateX(14deg) rotateY(-20deg) scale(1.06)}
.po-brackets{position:absolute;inset:0;pointer-events:none}
.po-brackets i{position:absolute;width:22%;height:22%;border:0 solid currentColor;opacity:0;transition:opacity .2s,transform .32s var(--po-ease)}
.po-brackets i:nth-child(1){left:8%;top:8%;border-left-width:1.5px;border-top-width:1.5px}
.po-brackets i:nth-child(2){right:8%;top:8%;border-right-width:1.5px;border-top-width:1.5px}
.po-brackets i:nth-child(3){left:8%;bottom:8%;border-left-width:1.5px;border-bottom-width:1.5px}
.po-brackets i:nth-child(4){right:8%;bottom:8%;border-right-width:1.5px;border-bottom-width:1.5px}
.po-tile:hover .po-brackets i,.po-tile:focus-visible .po-brackets i{opacity:.9}
.po-tile:hover .po-brackets i:nth-child(1),.po-tile:focus-visible .po-brackets i:nth-child(1){transform:translate(-5px,-5px)}
.po-tile:hover .po-brackets i:nth-child(2),.po-tile:focus-visible .po-brackets i:nth-child(2){transform:translate(5px,-5px)}
.po-tile:hover .po-brackets i:nth-child(3),.po-tile:focus-visible .po-brackets i:nth-child(3){transform:translate(-5px,5px)}
.po-tile:hover .po-brackets i:nth-child(4),.po-tile:focus-visible .po-brackets i:nth-child(4){transform:translate(5px,5px)}
.po-label{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;font:500 11px/1 "Geist Mono",ui-monospace,monospace;
  padding:5px 8px;border-radius:6px;background:currentColor;pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path .3s cubic-bezier(.25,.46,.45,.94)}
.po-label span{color:var(--po-label-ink,#131519)}
.po-tile:hover .po-label,.po-tile:focus-visible .po-label{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.po-tile .po,.po-brackets i,.po-label{transition:none}.po-tile:hover .po{transform:none}}