:root{
  --frost:#fff6fb; --frost2:#ffe4f1; --card:#ffffff; --ink:#4b2547; --ink2:#86607f;
  --gum:#ff8fc4; --gumd:#e2619f; --cane:#e8445a; --sky:#9fd8ff; --lemon:#ffe066; --ginger:#c98a4b; --gingerd:#9c6331;
  --line:rgba(120,40,90,.14);
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --frost:#2b1730; --frost2:#3b2141; --card:#45284e; --ink:#ffeefa; --ink2:#e2c3e0; --line:rgba(255,200,240,.16); color-scheme:dark;}}
:root[data-theme="dark"]{--frost:#2b1730; --frost2:#3b2141; --card:#45284e; --ink:#ffeefa; --ink2:#e2c3e0; --line:rgba(255,200,240,.16); color-scheme:dark;}
html{scroll-padding-top:env(safe-area-inset-top,0px); height:100%; height:100dvh; overflow:hidden}
*,*::before,*::after{box-sizing:inherit}
body{margin:0; height:100%; overflow:hidden; background:var(--frost); color:var(--ink); font-family:"Baloo 2","Comic Sans MS","Trebuchet MS",system-ui,sans-serif; font-size:18px; line-height:1.3; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible,input:focus-visible{outline:4px solid var(--sky); outline-offset:3px}
img{max-width:100%}
#root{height:100%; display:flex; flex-direction:column}
.app{width:100%; max-width:960px; margin:0 auto; padding:0 12px; flex:1; min-height:0; display:flex; flex-direction:column}
.vp{flex:1; min-height:0; overflow:hidden; position:relative}
.vp.scroll{overflow-y:auto}
#main{transform-origin:0 0; padding-bottom:6px}