/* Only the preview overlay is styled. The portfolio stays ordinary HTML. */
#field-experience[hidden]{display:none}
#field-experience{position:fixed;inset:0;z-index:1000;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow:hidden;opacity:1}
#field-experience.is-visible{opacity:1}
#field-experience *{box-sizing:border-box}
#field-experience .field-exit{position:fixed;z-index:6;top:18px;left:20px;border:0;background:rgba(8,14,22,.58);color:#fff;border-radius:100px;padding:11px 15px;font:14px Arial,sans-serif;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s ease}
#field-experience.is-arrived .field-exit{opacity:1;pointer-events:auto}
#field-experience .field-exit:hover,#field-experience .field-exit:focus-visible{background:#23374b;outline:2px solid white;outline-offset:2px}
#field-experience .field-device{position:absolute;left:50%;top:50%;width:min(66vw,900px);aspect-ratio:4/3;padding:12px;background:#0a0d11;border:2px solid #48515d;border-radius:34px;box-shadow:0 40px 100px #0009,0 0 0 1px #737b84;transform:translate(-50%,125vh);transition:transform 2.25s cubic-bezier(.18,.7,.25,1),width 1.05s cubic-bezier(.2,.8,.2,1),height 1.05s cubic-bezier(.2,.8,.2,1),left 1.05s cubic-bezier(.2,.8,.2,1),top 1.05s cubic-bezier(.2,.8,.2,1),border-radius 1.05s ease,padding 1.05s ease}
#field-experience.is-arrived .field-device{transform:translate(-50%,-50%)}
#field-experience.is-expanded .field-device{left:0;top:0;width:100vw;height:100dvh;aspect-ratio:auto;transform:none;padding:0;border:0;border-radius:0;box-shadow:none;transition-duration:1.05s}
#field-experience .field-device-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:22px;background:#122234}
#field-experience.is-expanded .field-device-screen{border-radius:0}
#field-experience .field-app-frame{display:block;width:100%;height:100%;border:0;background:#f9f9f4;opacity:0;transition:opacity .45s ease}
#field-experience.is-unlocked .field-app-frame{opacity:1}
#field-experience .field-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden;touch-action:none;user-select:none;background:radial-gradient(circle at 66% 75%,#56718c 0,transparent 38%),radial-gradient(circle at 22% 32%,#1b485f 0,transparent 48%),linear-gradient(145deg,#071623,#25364c 55%,#101a31);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s ease;cursor:grab}
#field-experience .field-lock:after{content:"";position:absolute;left:-12%;bottom:-52%;width:125%;height:90%;border-radius:50%;border:2px solid #b7d1e550;transform:rotate(-20deg);box-shadow:0 0 0 45px #e8f7ff12,0 0 0 110px #e8f7ff08;pointer-events:none}
#field-experience.is-unlocked .field-lock{transform:translateY(-110%);opacity:0;pointer-events:none}
#field-experience .field-lock-top{z-index:1;align-self:stretch;display:flex;justify-content:space-between;padding:24px 36px;font-size:15px;font-weight:600;letter-spacing:.02em;color:#f3f6f9}
#field-experience .field-lock-center{z-index:1;text-align:center;margin-top:-4vh;text-shadow:0 2px 16px #06132360}
#field-experience .field-lock-date{font-size:clamp(18px,2vw,27px);font-weight:300}
#field-experience .field-lock-time{font-size:clamp(76px,11vw,162px);font-weight:200;line-height:1.05;letter-spacing:-.075em}
#field-experience .field-lock-title{margin-top:40px;font-size:clamp(15px,1.5vw,22px);font-weight:700;letter-spacing:.32em}
#field-experience .field-lock-caption{margin-top:10px;font-size:clamp(13px,1.2vw,17px);color:#d6e0e8}
#field-experience .field-unlock{z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px;margin:0 0 max(30px,6vh);border:0;background:none;color:white;font-size:14px;letter-spacing:.02em;cursor:pointer;padding:12px 24px;touch-action:none}
#field-experience .field-unlock-glyph{font-size:36px;line-height:.7;animation:field-nudge 2s ease-in-out infinite}
#field-experience .field-unlock:focus-visible{outline:2px solid white;border-radius:10px}
#field-experience .field-info{position:fixed;z-index:7;right:24px;bottom:24px;width:min(326px,calc(100vw - 30px));background:#fffefa;color:#24382c;border:1px solid #c8d7c8;border-radius:11px;box-shadow:0 15px 45px #10231840;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .35s ease .3s,transform .35s ease .3s;font:14px/1.5 Arial,sans-serif}
#field-experience.is-unlocked .field-info{opacity:1;pointer-events:auto;transform:none}
#field-experience .field-info-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 18px;border:0;background:none;color:#264d38;text-align:left;font:bold 14px Arial,sans-serif;cursor:pointer}
#field-experience .field-info-toggle span{font-size:20px;line-height:12px}
#field-experience .field-info-toggle:focus-visible{outline:2px solid #264d38;outline-offset:2px}
#field-experience .field-info-body{padding:0 18px 17px}
#field-experience .field-info-body p{margin:0 0 11px;color:#36483c}
#field-experience .field-info-body small{color:#5b6e60;font-size:11px}
#field-experience .field-info.is-collapsed .field-info-body{display:none}
@keyframes field-nudge{50%{transform:translateY(-7px)}}
@media(max-width:700px){#field-experience .field-device{width:90vw;padding:7px;border-radius:21px}#field-experience .field-device-screen{border-radius:14px}#field-experience .field-lock-top{padding:20px 22px}#field-experience .field-lock-title{margin-top:20px}#field-experience .field-exit{top:9px;left:9px;font-size:12px}#field-experience .field-info{right:10px;bottom:10px;width:min(310px,calc(100vw - 20px));max-height:40dvh;overflow:auto}}
@media(max-width:700px) and (orientation:portrait){
  #field-experience .field-device{width:min(76vw,calc((100dvh - 120px)*.5625),360px);height:min(135.111vw,calc(100dvh - 120px),640px);aspect-ratio:9/16;padding:8px;border-radius:35px}
  #field-experience .field-device-screen{border-radius:27px}
  #field-experience.is-expanded .field-device{width:100vw;height:100dvh;aspect-ratio:auto;padding:0;border-radius:0}
  #field-experience.is-expanded .field-device-screen{border-radius:0}
}
@media(prefers-reduced-motion:reduce){#field-experience,#field-experience .field-device,#field-experience .field-lock,#field-experience .field-app-frame{transition-duration:.01ms}#field-experience .field-unlock-glyph{animation:none}}