:root{
  --u:calc(min(100vw/1087,100vh/645)*.66);
  --w:calc(var(--u)*108);
  --orange:#ff7a00;
  --blue:#6fcdfa;
  --ink:#000;
  --muted:#9b9086;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;overflow:clip;background:#ffe8c6}
body{font-family:"Outfit","Pretendard Variable",Pretendard,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
button{font-family:inherit}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none;user-drag:none}
.track{display:flex;width:200vw;height:100vh;height:100svh;transition:transform .85s cubic-bezier(.77,0,.18,1);will-change:transform}
.track.p1{transform:translateX(-100vw)}
.page{width:100vw;height:100%;flex:none;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#fff9ee 38%,#ffe8c6 100%)}
.scroller{overscroll-behavior:contain;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;outline:none;background:none}
.scroller::-webkit-scrollbar{display:none}
.sec{position:relative;height:100%;overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#fff9ee 38%,#ffe8c6 100%)}
.sec.alt{background:linear-gradient(180deg,#ffe8c6 0%,#fff9ee 62%,#fff 100%)}
.stage{position:absolute;left:50%;top:50%;width:calc(var(--u)*1087);height:calc(var(--u)*645);transform:translate(-50%,calc(-50% + var(--py,0px)))}
.stage>*{position:absolute}

.hello{left:calc(var(--u)*87);top:calc(var(--u)*72);font-size:calc(var(--u)*58);line-height:1.0;font-weight:300;letter-spacing:-.01em}
.hello b{font-weight:700;display:block}
.hello span{display:block;margin-top:calc(var(--u)*-1);word-spacing:.075em}
.hello span b{display:inline}
.hello em{font-style:normal;color:var(--orange)}
.hello span b{color:var(--orange)}

.tile{--r:calc(var(--u)*34);padding:calc(var(--u)*7);border-radius:var(--r);
  background:linear-gradient(180deg,#fff 45%,#c9c9c9);
  box-shadow:0 calc(var(--u)*10) calc(var(--u)*18) rgba(120,80,20,.16)}
.tile img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r) - var(--u)*7)}
.tile.big{width:calc(var(--u)*191);height:calc(var(--u)*191);left:calc(var(--u)*(173 - 95.5));top:calc(var(--u)*(305 - 95.5));transform:rotate(-10deg)}
.tile.small{--r:calc(var(--u)*30);width:calc(var(--u)*164);height:calc(var(--u)*164);left:calc(var(--u)*232);top:calc(var(--u)*258);
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile.small:hover{transform:rotate(4deg) scale(1.03)}

/* 프로필 상태 점 (온라인 / 자리 비움 / 방해 금지 / 오프라인) — 디스코드처럼 모양이 바로 변형된다 */
.tile.small{--ts:164;--rs:50}
.status{--ro:6;position:absolute;right:calc(var(--u)*var(--ro)*-1);bottom:calc(var(--u)*var(--ro)*-1);width:calc(var(--u)*var(--rs));height:calc(var(--u)*var(--rs));border-radius:50%;
  background:#fff;
  box-shadow:0 calc(var(--u)*6) calc(var(--u)*12) rgba(120,80,20,.14);
  opacity:0;transform:scale(.7);transition:opacity .2s ease,transform .2s cubic-bezier(.4,0,.2,1);pointer-events:none}
.status.on{opacity:1;transform:none}
.status svg{position:absolute;left:calc(var(--u)*6);top:calc(var(--u)*6);width:calc(100% - var(--u)*12);height:calc(100% - var(--u)*12);display:block;overflow:visible}
.status .s-base{fill:#31d843;transition:fill .2s ease}
.status [class^="m-"],.status .s-bar{transform-box:fill-box;transform-origin:center;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.status .m-moon,.status .m-hole{transform:scale(0)}
.status .s-bar{transform:scaleX(0)}
.status[data-s="idle"] .s-base{fill:#f0b232}
.status[data-s="idle"] .m-moon{transform:scale(1)}
.status[data-s="dnd"] .s-base{fill:#f23f43}
.status[data-s="dnd"] .s-bar{transform:scaleX(1)}
.status[data-s="offline"] .s-base{fill:#80848e}
.status[data-s="offline"] .m-hole{transform:scale(1)}

.who{left:calc(var(--u)*87);top:calc(var(--u)*443);font-size:calc(var(--u)*16);color:var(--muted);font-weight:400;letter-spacing:.01em}

.down{left:calc(var(--u)*(932 - 54));top:calc(var(--u)*(411 - 54));width:calc(var(--u)*108);height:calc(var(--u)*108);color:var(--blue);
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.down svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.down .blob{animation:spin 16s linear infinite}
.down .arr{transform:scale(.84)}
.down:hover{transform:scale(1.16)}
@keyframes spin{to{transform:rotate(360deg)}}

/* About */
.about{left:calc(var(--u)*87);top:calc(var(--u)*205);width:calc(var(--u)*900);font-size:calc(var(--u)*30);line-height:1.7;font-weight:600;color:#1a1a1a;letter-spacing:-.01em;word-break:keep-all}
.about .g{color:#b9ab9b;font-weight:500}
.about .w{display:inline-block;white-space:pre}
.skills{left:calc(var(--u)*87);top:calc(var(--u)*372);display:flex;gap:calc(var(--u)*10);width:calc(var(--u)*913)}
.skills a{display:block;line-height:0;border-radius:calc(var(--u)*12);-webkit-tap-highlight-color:transparent}
.skills img{width:calc(var(--u)*50);height:calc(var(--u)*50);display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.skills img:hover{transform:translateY(calc(var(--u)*-5)) scale(1.1)}
.pillbtn{display:inline-flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*13) calc(var(--u)*26);border-radius:99px;color:#fff;text-decoration:none;
  font-size:calc(var(--u)*17);font-weight:600;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pillbtn:hover{transform:scale(1.07)}
.pillbtn i{font-size:calc(var(--u)*18)}

/* Awards */
.awards{left:calc(var(--u)*87);top:calc(var(--u)*190);width:calc(var(--u)*913);list-style:none;padding:0;display:flex;flex-direction:column;gap:calc(var(--u)*16)}
.awards li{display:flex;align-items:baseline;gap:calc(var(--u)*26)}
.awards time{flex:none;width:calc(var(--u)*64);font-family:Outfit,sans-serif;font-size:calc(var(--u)*21);font-weight:700;color:var(--orange);letter-spacing:.01em}
.awards span{font-size:calc(var(--u)*25);font-weight:600;color:#1a1a1a;letter-spacing:-.01em;word-break:keep-all}

/* 다음 섹션으로 가는 작은 반투명 화살표 */
.hint{position:absolute;left:50%;bottom:calc(var(--u)*150);z-index:2;display:grid;place-items:center;width:calc(var(--u)*44);height:calc(var(--u)*44);margin-left:calc(var(--u)*-22);
  color:#6b5d4f;font-size:calc(var(--u)*20);text-decoration:none;-webkit-tap-highlight-color:transparent;animation:hbob 1.9s cubic-bezier(.45,.05,.55,.95) infinite}
.hint:hover{color:#1a1a1a}
@keyframes hbob{0%,100%{transform:translateY(0);opacity:.22}50%{transform:translateY(calc(var(--u)*9));opacity:.6}}
.awards li.etc span{color:#b9ab9b;font-weight:500}

/* Contact */
.clinks{left:calc(var(--u)*87);top:calc(var(--u)*146);display:flex;align-items:center;gap:calc(var(--u)*22)}
.clink{display:inline-flex;align-items:center;gap:calc(var(--u)*8);border:0;background:none;padding:0;cursor:pointer;color:var(--muted);text-decoration:none;font:inherit;font-size:calc(var(--u)*13);font-weight:500;transition:color .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.clink i{font-size:calc(var(--u)*16)}
.clink:hover{color:#1a1a1a;transform:translateY(calc(var(--u)*-2))!important}
.clink.done{color:var(--orange)}

.cform{left:calc(var(--u)*560);top:calc(var(--u)*72);width:calc(var(--u)*440);padding:calc(var(--u)*22) calc(var(--u)*24) calc(var(--u)*24);border-radius:calc(var(--u)*30);background:#fff;
  box-shadow:0 calc(var(--u)*14) calc(var(--u)*34) rgba(120,80,20,.13);display:flex;flex-direction:column;gap:calc(var(--u)*12)}
.cform label{display:flex;flex-direction:column;gap:calc(var(--u)*6)}
.cform label span{font-size:calc(var(--u)*12);font-weight:500;color:var(--muted);letter-spacing:.02em}
.cform input:not([type=file]),.cform textarea{width:100%;border:0;outline:0;border-radius:calc(var(--u)*14);background:#fbf3e6;color:#1a1a1a;font:inherit;font-size:calc(var(--u)*15);
  padding:calc(var(--u)*12) calc(var(--u)*14);caret-color:var(--orange);transition:background .25s}
.cform textarea{resize:none;height:calc(var(--u)*80);line-height:1.5}
.cform input:not([type=file]):focus,.cform textarea:focus{background:#f6e8d2}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cfiles{display:flex;align-items:center;gap:calc(var(--u)*10);flex-wrap:wrap;min-height:calc(var(--u)*34)}
.cattach{display:inline-flex;align-items:center;gap:calc(var(--u)*8);border:0;cursor:pointer;border-radius:99px;background:#fbf3e6;color:#5c5044;font:inherit;font-size:calc(var(--u)*13);font-weight:500;padding:calc(var(--u)*8) calc(var(--u)*14);transition:background .25s,transform .3s}
.cattach:hover{background:#f6e8d2;transform:scale(1.04)}
.cchips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*6)}
.cchip{display:inline-flex;align-items:center;gap:calc(var(--u)*6);max-width:calc(var(--u)*170);border-radius:99px;background:#ffe8c6;color:#8a4a00;font-size:calc(var(--u)*12);font-weight:500;padding:calc(var(--u)*5) calc(var(--u)*6) calc(var(--u)*5) calc(var(--u)*11)}
.cchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cchip button{flex:none;border:0;background:none;color:inherit;cursor:pointer;font-size:calc(var(--u)*11);padding:calc(var(--u)*2) calc(var(--u)*4)}
.ccapwrap{height:calc(var(--cap-h,78px));overflow:visible}
.ccap{transform-origin:0 0;transform:scale(var(--cap-k,1));width:303px;min-height:78px}
.cfoot{display:flex;align-items:center;gap:calc(var(--u)*14)}
.csend{display:inline-flex;align-items:center;gap:calc(var(--u)*10);border:0;cursor:pointer;border-radius:99px;background:var(--orange);color:#fff;font:inherit;font-size:calc(var(--u)*15);font-weight:600;padding:calc(var(--u)*12) calc(var(--u)*24);transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.csend:hover{transform:scale(1.06)}
.csend:disabled{opacity:.55;cursor:default;transform:none}
.csend.sent{opacity:1;background:#2c9a5b}
.cmsg{font-size:calc(var(--u)*13);font-weight:500;color:var(--muted)}
.cmsg.ok{color:#2c9a5b}
.cmsg.err{color:#d6452f}

/* 프로젝트 카드 */
.pwrap{width:calc(var(--u)*913);margin-left:calc(50% - var(--u)*456.5);padding:calc(var(--u)*72) 0 calc(var(--u)*170)}
.pwrap .hello{position:static}
.list{margin-top:calc(var(--u)*34);display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*18)}
.more{margin-top:calc(var(--u)*34);text-align:center;font-size:calc(var(--u)*16);font-weight:500;color:var(--muted);letter-spacing:-.005em}
.card{position:relative;display:block;padding:0;border:0;background:#fff;cursor:pointer;border-radius:calc(var(--u)*24);overflow:hidden;aspect-ratio:16/9;
  box-shadow:0 calc(var(--u)*8) calc(var(--u)*18) rgba(120,80,20,.14);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));opacity:0;transition:opacity .35s}
.card span{position:absolute;left:calc(var(--u)*16);bottom:calc(var(--u)*12);z-index:1;color:#fff;font-size:calc(var(--u)*17);font-weight:600;opacity:0;transform:translateY(calc(var(--u)*6));transition:.35s}
.card:hover{transform:translateY(calc(var(--u)*-5));box-shadow:0 calc(var(--u)*16) calc(var(--u)*28) rgba(120,80,20,.2)}
.card:hover img{transform:scale(1.05)}
.card:hover::after,.card:hover span{opacity:1}
.card:hover span{transform:none}
.card.lift{visibility:hidden}

/* 모달 */
.modal{position:fixed;inset:0;z-index:20;display:grid;place-items:center;visibility:hidden;pointer-events:none}
.modal.open{visibility:visible;pointer-events:auto}
.shade{position:absolute;inset:0;background:rgba(40,24,6,.5);opacity:0;transition:opacity .25s}
.modal.show .shade{opacity:1}
.sheet{position:relative;width:min(calc(var(--u)*640),92vw);max-height:92vh;overflow:auto;border-radius:calc(var(--u)*30);background:#fffaf1;
  box-shadow:0 calc(var(--u)*30) calc(var(--u)*80) rgba(60,30,0,.3)}
.sheet img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.sheet .body{padding:calc(var(--u)*24) calc(var(--u)*30) calc(var(--u)*30);opacity:0;transition:opacity .45s .2s}
.modal.show .body{opacity:1}
.sheet h2{font-size:calc(var(--u)*30);font-weight:700;line-height:1.1}
.sheet .tags{display:flex;flex-wrap:wrap;gap:calc(var(--u)*6);margin-top:calc(var(--u)*12)}
.sheet .tags span{display:inline-flex;align-items:center;gap:calc(var(--u)*7);font-size:calc(var(--u)*12.5);padding:calc(var(--u)*5) calc(var(--u)*12) calc(var(--u)*5) calc(var(--u)*9);border-radius:99px;background:#fff;color:#3b3228;font-weight:500;box-shadow:0 calc(var(--u)*2) calc(var(--u)*6) rgba(120,80,20,.1)}
.sheet .tags img{width:calc(var(--u)*15);height:calc(var(--u)*15);display:block}
.sheet .tags i{font-size:calc(var(--u)*13);color:#8a7a68}
.sheet p{margin-top:calc(var(--u)*16);font-size:calc(var(--u)*15);line-height:1.7;color:#4a4036;word-break:keep-all}
.sheet .links{display:flex;flex-wrap:wrap;gap:calc(var(--u)*8);margin-top:calc(var(--u)*20)}
.sheet .links:empty{display:none}
.sheet .links a{display:inline-flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*10) calc(var(--u)*18);border-radius:99px;background:var(--orange);color:#fff;text-decoration:none;font-size:calc(var(--u)*14);font-weight:600;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.sheet .links a:nth-child(n+2){background:#fff;color:#222}
.sheet .links a:hover{transform:scale(1.06)}
.x{position:absolute;right:calc(var(--u)*14);top:calc(var(--u)*14);z-index:2;width:calc(var(--u)*38);height:calc(var(--u)*38);border:0;border-radius:50%;cursor:pointer;
  background:#fff;font-size:calc(var(--u)*16);color:#222;transition:transform .3s}
.x:hover{transform:scale(1.12) rotate(90deg)}

/* 상태 알림 배지 (스포티파이 / 온라인) */
.presence{position:fixed;top:calc(var(--u)*16);left:50%;z-index:8;pointer-events:none;transform:translate(-50%,-220%);transition:transform .7s cubic-bezier(.2,.9,.25,1.12)}
.presence.in{transform:translate(-50%,0)}
.presence.in.away{transform:translate(-50%,-220%);transition-duration:.45s}
.pin{display:flex;align-items:center;height:calc(var(--u)*44);width:calc(var(--u)*44);padding:calc(var(--u)*7);border-radius:99px;overflow:hidden;
  background:#fff;
  box-shadow:0 calc(var(--u)*10) calc(var(--u)*28) rgba(120,80,20,.16);transition:width .75s cubic-bezier(.2,.9,.25,1)}
.pico{position:relative;flex:none;width:calc(var(--u)*30);height:calc(var(--u)*30);border-radius:50%;background:#e8e0d4 center/cover no-repeat}
.pico.spin{animation:pspin 6s linear infinite}
.pico.spin::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--u)*8);height:calc(var(--u)*8);margin:calc(var(--u)*-4) 0 0 calc(var(--u)*-4);border-radius:50%;background:#fff9ee;box-shadow:0 0 0 calc(var(--u)*2) rgba(0,0,0,.08)}
.pico.game{display:grid;place-items:center;background:#ece6ff center/cover no-repeat;color:#6a4df0;font-size:calc(var(--u)*14)}
.pico.on{background:#e6f7ec}
.pico.on::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--u)*12);height:calc(var(--u)*12);margin:calc(var(--u)*-6) 0 0 calc(var(--u)*-6);border-radius:50%;background:#2fc767}
.pico.on::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2fc767;opacity:.35;animation:ppulse 2.2s ease-out infinite}
.ptext{flex:none;max-width:min(62vw,calc(var(--u)*420));margin-left:calc(var(--u)*10);margin-right:calc(var(--u)*10);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:calc(var(--u)*14);font-weight:500;color:#2a2118;opacity:0;transition:opacity .35s}
.ptext b{font-weight:700}
.presence.wide .ptext{opacity:1;transition-delay:.3s}
@keyframes pspin{to{transform:rotate(360deg)}}
@keyframes ppulse{0%{transform:scale(.5);opacity:.45}100%{transform:scale(1.25);opacity:0}}

/* 하단 탭 */
.dock{position:fixed;left:50%;bottom:calc(var(--u)*35);transform:translateX(-50%);z-index:5;display:flex;
  padding:calc(var(--u)*10) calc(var(--u)*14);border-radius:calc(var(--u)*50);
  background:#fff3e0;
  box-shadow:0 calc(var(--u)*8) calc(var(--u)*24) rgba(120,80,20,.1)}
.dock .pill{position:absolute;left:calc(var(--u)*14);top:calc(var(--u)*10);width:var(--w);height:calc(var(--u)*66);border-radius:calc(var(--u)*33);
  background:#fff;box-shadow:0 calc(var(--u)*3) calc(var(--u)*10) rgba(120,80,20,.1);
  transform:translateX(calc(var(--w)*var(--i,0)));transition:transform .55s cubic-bezier(.34,1.3,.5,1)}
.dock a{position:relative;z-index:1;width:var(--w);height:calc(var(--u)*66);border-radius:calc(var(--u)*33);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*5);
  color:#8a8076;text-decoration:none;font-size:calc(var(--u)*11);font-weight:400;transition:color .3s}
.dock a i{font-size:calc(var(--u)*22);height:calc(var(--u)*24);display:flex;align-items:center}
.dock a.on{color:#222}
.dock a.on span{color:#000}

/* 태블릿 가로 등 좁은 가로 화면은 조금 더 크게 */
@media (min-aspect-ratio:4/5) and (max-width:1200px){
  :root{--u:calc(min(100vw/1087,100vh/645)*.85)}
}

/* 세로(모바일) 화면: 1u = 390폭 기준 1px */
@media (max-aspect-ratio:4/5){
  :root{--u:calc(min(100vw/390,100vh/844));--w:calc(var(--u)*96)}
  .stage{width:calc(var(--u)*390);height:100%;top:0;transform:translate(-50%,var(--py,0px))}
  .hello{left:calc(var(--u)*24);top:calc(var(--u)*88);font-size:calc(var(--u)*42)}
  .tile{--r:calc(var(--u)*28)}
  .tile.big{left:calc(var(--u)*22);top:calc(var(--u)*250);width:calc(var(--u)*170);height:calc(var(--u)*170)}
  .tile.small{--ts:146;--rs:44;--r:calc(var(--u)*24);left:calc(var(--u)*148);top:calc(var(--u)*326);width:calc(var(--u)*146);height:calc(var(--u)*146)}
  .who{left:calc(var(--u)*24);top:calc(var(--u)*500);font-size:calc(var(--u)*14)}
  .down{left:calc(var(--u)*(390 - 24 - 72));top:auto;bottom:calc(var(--u)*128);width:calc(var(--u)*72);height:calc(var(--u)*72)}
  .dock{bottom:calc(var(--u)*20);padding:calc(var(--u)*8) calc(var(--u)*10);border-radius:calc(var(--u)*40)}
  .dock .pill{left:calc(var(--u)*10);top:calc(var(--u)*8);height:calc(var(--u)*56);border-radius:calc(var(--u)*28)}
  .dock a{height:calc(var(--u)*56);border-radius:calc(var(--u)*28);font-size:calc(var(--u)*11)}
  .dock a i{font-size:calc(var(--u)*20);height:calc(var(--u)*22)}
  .about{left:calc(var(--u)*24);top:calc(var(--u)*150);width:calc(var(--u)*342);font-size:calc(var(--u)*20);line-height:1.65}
  .skills{left:calc(var(--u)*24);top:calc(var(--u)*330);width:calc(var(--u)*342);flex-wrap:wrap;gap:calc(var(--u)*9)}
  .skills img{width:calc(var(--u)*40);height:calc(var(--u)*40)}
  .pillbtn{font-size:calc(var(--u)*15);padding:calc(var(--u)*12) calc(var(--u)*22)}
  .pillbtn i{font-size:calc(var(--u)*16)}
    #contact{overflow-y:auto;scrollbar-width:none}
  #contact .stage{height:max(100%,calc(var(--u)*680))}
  .cform{left:calc(var(--u)*24);top:calc(var(--u)*190);width:calc(var(--u)*342);padding:calc(var(--u)*18);border-radius:calc(var(--u)*26);gap:calc(var(--u)*11)}
  .cform input:not([type=file]),.cform textarea{font-size:16px;padding:calc(var(--u)*11) calc(var(--u)*13)}
  .cform textarea{height:calc(var(--u)*84)}
  .clinks{left:calc(var(--u)*24);top:calc(var(--u)*140);gap:calc(var(--u)*18)}
  .clink{font-size:calc(var(--u)*13)}
  .clink i{font-size:calc(var(--u)*15)}
  .cattach,.cmsg,.cchip{font-size:calc(var(--u)*12.5)}
  .csend{font-size:calc(var(--u)*15)}
  .hint{bottom:calc(var(--u)*112);width:calc(var(--u)*40);height:calc(var(--u)*40);margin-left:calc(var(--u)*-20);font-size:calc(var(--u)*18)}
  .awards{left:calc(var(--u)*24);top:calc(var(--u)*150);width:calc(var(--u)*342);gap:calc(var(--u)*20)}
  .awards li{flex-direction:column;gap:calc(var(--u)*3)}
  .awards time{width:auto;font-size:calc(var(--u)*14)}
  .awards span{font-size:calc(var(--u)*18);line-height:1.35}
  .pwrap{width:calc(var(--u)*342);margin-left:calc(50% - var(--u)*171);padding:calc(var(--u)*88) 0 calc(var(--u)*130)}
  .list{grid-template-columns:1fr 1fr;gap:calc(var(--u)*12);margin-top:calc(var(--u)*24)}
  .card{border-radius:calc(var(--u)*16)}
  .more{font-size:calc(var(--u)*13);margin-top:calc(var(--u)*26)}
  .card span{opacity:1;transform:none;font-size:calc(var(--u)*12);left:calc(var(--u)*10);bottom:calc(var(--u)*8)}
  .card::after{opacity:1}
  .presence{top:calc(var(--u)*12)}
  .ptext{font-size:calc(var(--u)*13)}
  .sheet{width:min(92vw,640px);border-radius:calc(var(--u)*24)}
  .sheet .body{padding:calc(var(--u)*18) calc(var(--u)*20) calc(var(--u)*22)}
  .sheet h2{font-size:calc(var(--u)*26)}
  .sheet p{font-size:calc(var(--u)*15);margin-top:calc(var(--u)*12)}
  .sheet .tags span{font-size:calc(var(--u)*12.5)}
  .sheet .tags img{width:calc(var(--u)*14);height:calc(var(--u)*14)}
  .sheet .links a{font-size:calc(var(--u)*14);padding:calc(var(--u)*10) calc(var(--u)*16)}
  .x{width:calc(var(--u)*34);height:calc(var(--u)*34);font-size:calc(var(--u)*15)}
}