/* Hello World Studio — Phase 4 production polish */
:root{
  --focus-ring:#7ad6ff;
  --motion-fast:180ms;
  --motion-base:320ms;
  --motion-slow:620ms;
  --ease-premium:cubic-bezier(.22,1,.36,1);
}
html{scroll-padding-top:92px}
body{overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.skip-link{position:fixed;z-index:9999;top:12px;left:12px;transform:translateY(-160%);padding:12px 16px;border-radius:10px;background:#fff;color:#07101d;font-weight:800;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.32);transition:transform var(--motion-fast) ease}
.skip-link:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;border-radius:8px}
:where(button,.btn,a){-webkit-tap-highlight-color:transparent}
:where(.btn,button,input,select,textarea){font:inherit}
:where(input,select,textarea){min-height:46px}
textarea{min-height:140px;resize:vertical}
img{max-width:100%}
img[width][height]{height:auto}
main>section:not(:first-child){content-visibility:auto;contain-intrinsic-size:1px 760px}
.site-header{will-change:background-color,box-shadow,transform}
.site-nav a[aria-current="page"]{color:#fff;position:relative}
.site-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:99px;background:linear-gradient(90deg,#9b4dff,#28b7ff);transform-origin:left;animation:p4-line .55s var(--ease-premium) both}
@keyframes p4-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.phase4-back-to-top{position:fixed;right:20px;bottom:20px;z-index:70;width:46px;height:46px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;background:rgba(10,16,30,.78);backdrop-filter:blur(14px);color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.26);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity var(--motion-base),transform var(--motion-base),visibility var(--motion-base);cursor:pointer}
.phase4-back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.phase4-back-to-top:hover{transform:translateY(-3px);border-color:rgba(122,214,255,.65)}
.phase4-back-to-top svg{width:20px;height:20px}
.phase4-announcer{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.phase4-page-ready .reveal{transition-duration:var(--motion-slow)!important;transition-timing-function:var(--ease-premium)!important}
@media (max-width:760px){
  html{scroll-padding-top:76px}
  :where(a,button){min-height:44px}
  .site-nav a{padding-block:10px}
  .site-nav a[aria-current="page"]::after{bottom:3px}
  .phase4-back-to-top{right:14px;bottom:14px}
}
@media (prefers-reduced-data:reduce){
  .phase3-cursor-glow{display:none!important}
  *{background-attachment:scroll!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .phase4-back-to-top{display:none}
}
@media print{
  .site-header,.site-footer,.phase3-progress,.phase3-cursor-glow,.phase4-back-to-top,.nav-toggle{display:none!important}
  body{background:#fff!important;color:#111!important}
  main>section{content-visibility:visible!important}
  a{color:#111!important;text-decoration:underline}
}