.namebox-container{width:100%;height:100%;container-type:size}.namebox{--n:min(17cqw, 22cqh);height:100%;padding:calc(var(--n) * .2) calc(var(--n) * .3)}.namebox-name{font-size:var(--n);line-height:1}.namebox-tagline{font-size:calc(var(--n) * .36);margin-top:calc(var(--n) * .12);margin-left:calc(var(--n) * .04);line-height:1.1}.namebox-links{-moz-column-gap:calc(var(--n) * .9);justify-content:start;column-gap:calc(var(--n) * .9);row-gap:calc(var(--n) * .16);margin-top:calc(var(--n) * .42);padding-left:calc(var(--n) * .1);font-size:max(15px, calc(var(--n) * .32));grid-template-rows:repeat(2,auto);grid-auto-flow:column;line-height:1.2;display:grid}.namebox-links a{color:inherit;cursor:pointer;text-decoration:none}.namebox-star{display:inline-block}.namebox-links a:hover .namebox-star,.namebox-links a:focus-visible .namebox-star{animation:.6s namebox-spin}@keyframes namebox-spin{to{transform:rotate(360deg)}}@container (max-width:420px){.namebox-links{font-size:max(18px, calc(var(--n) * .34));grid-template-rows:none;grid-auto-flow:row;row-gap:.55em}}
.card{cursor:pointer;pointer-events:none;position:relative}.card .content{pointer-events:auto;will-change:transform;border-radius:10px;flex-direction:column;align-items:flex-start;width:100%;max-width:none;transition:transform .25s ease-out;display:flex;overflow:hidden}.gloss{pointer-events:none;opacity:0;z-index:10;will-change:opacity;background:radial-gradient(circle,#fff 0%,#fff0 50% 100%);border-radius:50%;width:100%;height:100%;position:absolute;top:0;left:0}.gloss .gloss--shine{transition:opacity .6s ease-out}
.phone-frame{aspect-ratio:333/655;width:min(25vw,38.5vh,460px);container-type:inline-size}.phone-screen{--u:calc(100cqw / 333);width:100%;height:100%;padding-top:calc(12 * var(--u));border:calc(5 * var(--u)) solid #d3d3d3;border-radius:calc(44 * var(--u));background:url(/astronaut.jpg) 50%/cover;position:relative;overflow:hidden}.phone-status{height:calc(24 * var(--u));justify-content:center;display:flex;position:relative}.phone-status-row{width:calc(280 * var(--u));justify-content:space-between;align-items:center;display:flex}.phone-time{font-size:calc(14.7 * var(--u));padding:calc(2 * var(--u)) 0 0 calc(8 * var(--u))}.phone-status-icons{width:calc(75 * var(--u));height:auto;padding-right:calc(4 * var(--u));filter:brightness(0)invert()}.phone-island{width:calc(78 * var(--u));height:calc(21.5 * var(--u));border-radius:calc(12 * var(--u));background:#000;position:absolute;top:0;left:50%;transform:translate(-50%)}.phone-apps{-moz-column-gap:calc(20 * var(--u));justify-content:center;column-gap:calc(20 * var(--u));row-gap:calc(16 * var(--u));padding-top:calc(28 * var(--u));grid-template-columns:repeat(4,auto);display:grid}.phone-dock{bottom:calc(16 * var(--u));width:calc(290 * var(--u));height:calc(75 * var(--u));justify-content:center;align-items:center;gap:calc(18 * var(--u));border-radius:calc(26 * var(--u));background:#f0f0f026;display:flex;position:absolute;left:50%;transform:translate(-50%)}.phone-app{flex-direction:column;align-items:center;display:flex}.phone-app-icon{width:calc(52 * var(--u));height:calc(52 * var(--u));border-radius:calc(14 * var(--u))}.phone-app-label{margin-top:calc(2 * var(--u));max-width:calc(55 * var(--u));font-size:calc(10 * var(--u));text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.mondrian{--line:4px;inset:calc(var(--line) / -2);background:#000;position:absolute}.mondrian-cell{box-sizing:border-box;border:calc(var(--line) / 2) solid #000;position:absolute;overflow:hidden}.mondrian-red{background:#dc2626}.mondrian-blue{background:#3b82f6}.mondrian-yellow{background:#facc15}.mondrian-white{background:#fff}.mondrian-black{background:#000}@media (max-width:639px){.mondrian{--line:3px}}