:root{
  --app-ink:var(--vq-ink);
  --app-leaf:var(--vq-accent);
  --app-sun:var(--vq-focus);
  --app-bg-start:var(--vq-surface-tint);
  --app-bg-end:var(--vq-paper);
  --app-radius:var(--app-workspace-radius,24px);
  --app-shadow:var(--app-workspace-shadow,0 12px 28px var(--vq-line));
  --app-max-width:1160px;
  --app-safe-top:var(--app-frame-inset-top,max(20px,env(safe-area-inset-top)));
  --app-safe-right:max(var(--app-frame-inset-x,16px),env(safe-area-inset-right));
  --app-safe-bottom:var(--app-frame-inset-bottom,max(20px,env(safe-area-inset-bottom)));
  --app-safe-left:max(var(--app-frame-inset-x,16px),env(safe-area-inset-left));
}

*{box-sizing:border-box}
html{width:100%;height:100%;background:var(--vq-paper);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{width:100%;height:100%;min-height:0;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--vq-paper);color:var(--app-ink);font:var(--vq-text-md)/1.45 Georgia,"Times New Roman",serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

.app-shell{position:relative;width:min(var(--app-max-width),100%);height:100vh;height:100svh;height:100dvh;min-height:0;margin:auto;padding:var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left);overflow:hidden;background:linear-gradient(135deg,var(--app-bg-start),var(--app-bg-end))}
.app-surface{min-width:0;min-height:0;background:var(--vq-paper);border:1px solid var(--vq-line);border-radius:var(--app-radius);box-shadow:var(--app-shadow);overflow:hidden}
:focus-visible{outline:3px solid var(--app-sun);outline-offset:3px}

@media (display-mode:standalone){
  body{user-select:none;-webkit-user-select:none}
  input,textarea,[contenteditable="true"]{user-select:text;-webkit-user-select:text}
}

@media (min-width:651px){
  .app-shell{width:min(var(--app-frame-max-width,760px),calc(100% - 32px));height:calc(100dvh - 32px);margin:16px auto;padding:clamp(24px,4vw,48px);border:1px solid var(--vq-line);border-radius:var(--app-frame-radius,32px);box-shadow:var(--app-frame-shadow,0 24px 70px var(--vq-line))}
}

@media (max-height:500px){
  :root{--app-safe-top:max(8px,env(safe-area-inset-top));--app-safe-bottom:max(8px,env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}