@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

*,*:before,*:after {
  box-sizing: border-box;
  font-feature-settings: "rlig","calt","ss01","ss06";
}

:root{
--radius2: 8pt;
--radius2: 50rem;
--light-yellow:rgb(227,245,66,0.5);
--light-pink:rgba(204, 47, 47, 0.5);
--bg-terms: transparent;
--uk-green:#00895a;
--uk-dark:#3a4b80;
--uk-text:white;
--uk-orange:#ff9d23;
--uk-blue:#3896FA;
--onice-blue:#4285F4;
--nice-blue:rgb(90, 103, 216);
--nice-blue-lite:rgb(127, 138, 240);
--oniceorange:#FFE029;
--niceorange:#FABB07;
--line-color:#e0e0e0;
--max-width: 600px;
--font-name: Geist, -apple-system, ui-sans-serif,system-ui,'SF Pro','Segoe UI','Almaden Sans',Roboto,Ubuntu,Helvetica,Arial;
--fnfixed: var(--font-name);
--fnfixed: Georgia, serif;
--header-font:var(--font-name);
--scribe-header-font: var(--font-name);
--body-font:var(--font-name);
--logo-font:var(--font-name);
--title-font-family:var(--header-font);
--download-font-family:var(--header-font);
--green:#8ABD45;
--bg:#190B33;
--black:rgb(55, 66, 82);
--gray:rgba(55, 66, 82,0.6);
/*--bg-blue:#3d73d3;*/

--bg-green:#9EDD09;
--bg-red:#920028;
--home-font-size:16pt;
--header-font-size:18pt;
--title-font-size:160%;
--footer-font-size:11pt;
--subtitle-font-size:13pt;
--app-link-font-size:13pt;
--app-link-font-size:20px;
--download-font-size:11pt;
--links-font-size:11pt;
--footer-font-size:11pt;
--header-color:white;
--hover-link:white;
--subtitle-header-color:var(--black);
--footer-text-color:white;

--bolder:700;
--header-weight:800;

--bg-footer:var(--bg-header);
--bg-orange:#FEC309;
--bg-footer:var(--bg-blue);

--links-text-color:var(--black);

--phone-color:#ddf;
--phone-thin:4px;
--phone-top:16px;
--phone-bottom:8px;
--phone-dot-color:#99c;
--phone-radius:8px;

--bg-green-geoffrey:#22FF9D;
--footer-height:0px;



--download-font-weight:bold;

--bg-body:white;
--bg-header:white;
--bg-links: #eef;

--bagus-red:#FE005B;
--bagus-green:white;/*#24B92C;*/
--bagus-blue:#007AFF;
--bagus-orange:#FEC502;
--bagus-gray:#DCDDE1;
--producthabits-blue:#0838DF;
/*--bg-blue:var(--bagus-blue);*/
--bg-blue:var(--producthabits-blue);
--link-text-color:var(--black);
--links-link-color:var(--bagus-green);
--title-text-color:var(--black);
--bg-app-store:var(--bagus-green);
--bg-chrome-firefox:var(--bagus-orange);
--phone-color:var(--bagus-gray);
--bg-blue:white;
--bg-app-store:white;
--app-store:var(--black);
--links-text-color:var(--niceorange);
--copyright:'@2025 AppBlit';
--screegle-green:rgb(64,	153,	105	);
--yellow: #FFE029;
--screegle-green:var(--nice-blue);

--niceorange:var(--uk-orange);
--bg-body:var(--uk-dark);
--bg-header:var(--bg-body);
--line-color:transparent;
--link-text-color:var(--uk-text);
--links-font-size:16px;
--line-height:1.5;

--bg-body: white;
--code-bg:transparent;
--code-font:var(--font-name);
--link-text-color: var(--text);
--header-color: var(--nice-blue);
--heading-fontname: var(--font-name);
--heading-fontname: var(--header-font);
--logo-font: var(--font-name);
--byellow: #F38181;
--text:rgb(13,13,13);
--fs: 18px;
--body-font-size: 14pt;
--systemfont: system-ui,'SF Pro','Segoe UI','Almaden Sans',Roboto,Ubuntu,Helvetica,Arial;
--systemfont: var(--font-name);
--scribebg: rgb(252	203	196		); /* hume.ai */
--scribebg: rgb(255,250,234); /* vapi doc */
--scribebg: rgb(229,220,202);
--sscribebg: rgb(237,233,225); /* chrome sidepanel */
--scribebg: white;
--meetupscribebg: rgb(247,244,234);

--bg-toc: rgb(250, 229, 229, 0.95);
--bg-toc: var(--scribebg);
--bg-toc: rgba(255,255,255,0.8);
--fnh: var(--font-name);
--logo-font: var(--fnh);
--fnfixed: var(--fnh);
--nfnfixed: Georgia, serif;
}

* {
  line-height:var(--line-height);
	box-sizing: border-box;
}

body {
  font-style: normal;
  /*font-optical-sizing: auto;*/
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  overflow-y: scroll;
  overflow-x:hidden;
  font-family: var(--body-font);
  font-size:var(--body-font-size);
  font-weight:normal;
  margin:0;
  padding:0;
  width:100vw;
  min-height:100vh;
  padding-bottom:32px;
  background-color:var(--bg-body);
  color:var(--text);
  position:relative;
}
body::after{
  position: absolute;
  bottom:0;
  color:#ccc;
  line-height:48px;
  text-align:center;
  display:block;
  width:100vw;
  font-size:var(--footer-font-size);
  content:var(--copyright);
}

.topheader{
  flex-grow: 0;
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  width:100%;
  overflow:hidden;
  padding:8px 16px;
  padding:16px 16px;
  text-align:left;
  color:var(--header-color);
  white-space: nowrap;
  font-family:var(--header-font);
  font-size: var(--header-font-size);
  background: var(--bg-header);
  border-bottom: 1px solid var(--line-color);
}
.topheader a {color:var(--header-color);text-decoration:none;font-family:var(--header-font);}
.logo {
  display:inline-block;
  font-family:var(--logo-font);
  font-weight: 900;
}
.subtitle{
display:none;
font-size:var(--subtitle-font-size);
color:var(--subtitle-header-color);
vertical-align:middle;
overflow:hidden;
}

.title > .subtitle { font-family:var(--body-font),sans-serif;font-weight:normal;}
h4{font-weight:normal}

.center{display:inline-block}
.container{
padding-bottom:16px;
margin-left:auto;margin-right:auto;
max-width:var(--max-width);
/*margin-top:16px;*/
margin-bottom:0px;
width:100vw;
overflow-x:hidden;
}

.app{
overflow-x:hidden;
overflow-y:hidden;
margin:8px 16px;
}
.home{
  transform: rotate(0deg);
  transform-origin: center;
  transition:transform 0.2s ease-in-out;
  font-size:var(--body-font-size);
}
#dark{
  font-size:var(--body-font-size);
  display: none;
}
.opened{transform: rotate(90deg)}

.abutton{
display:inline-block;
margin:8px;
white-space: nowrap;
font-size:100%;
background-color:transparent;
color:var(--bg-text);
padding:8px 16px;
border-radius:20px;
border:1px solid white;
}
.abutton:hover{border:1px solid var(--hover-link);color:var(--hover-link);}

.adonate{
display:block;
width:96px;
font-size:var(--download-font-size);
font-weight:var(--download-font-weight);
color:white;
background-color:rgb(255, 196, 57);
background:var(--niceorange);
border-radius:16px;
padding:6px 12px;
font-family:var(--header-font);
text-decoration:none;
}
.adonate:hover{color:var(--black)}
sup{font-size:60%}

.downloadbutton{
text-decoration:none;
cursor:pointer;
text-align:center;
display:block;
margin:8px auto;
margin-top:16px;
padding:0;
}

.downloadbutton > img {
  /*width:240px;
  max-width:70%;*/
  height: 60px;
  opacity:1.0;
  transition: opacity 0.2s ease-in;
  /*border:1px solid white;
  border-radius: 11px;*/
}
/*.downloadbutton > img:hover {
  opacity:0.8;
}*/
/*.macos > img {
  width:100%;
}*/
.old_downloadbutton{
text-decoration:none;
cursor:pointer;
width:160px;
text-align:center;
display:block;
white-space:nowrap;
background-color:var(--nice-blue);
background-color: black;
color:white;
padding:6px 12px;
text-transform:none;
border-radius:20px;
margin:8px auto;
border:0px solid var(--app-store);
font-weight:var(--download-font-weight);
font-size:var(--download-font-size);
font-family:var(--download-font-family);
}

/*.downloadbutton:before{
content:'Download';
background-position:0% 0%;
background-size:16px;
background-repeat:no-repeat;
}
.downloadbutton:hover{
text-decoration:none;
}*/

.littledownloadbutton{
  width:144px;
  height:44px;
  text-align:center;
  display:block;
  margin:24px auto;
  border:0px solid red;
  background-size:100%;
  background-repeat:no-repeat;
  background-image: url(/static/images/App-Store-Badge.png);
}

.chrome,.firefox{
  width:100px;
  display:block;
  margin:8px 8px
}

/*.chrome:before{padding-left:0;content:'Chrome';background-image:none}*/
/*.firefox:before{padding-left:0;content:'Firefox';background-image:none}*/
.old_ios:before{
  /*width:100px;*/
  padding-left:0;
  content:'App Store';
  background-image:none;
}
hr{height:8px;border:0px solid #ccc;margin:0;padding:0}
.links{
  display:block;
  max-height:0px;
  font-size:var(--links-font-size);
  text-align:left;
  background-color:var(--bg-links);
  transition:max-height .3s ease-in-out;
  width:100vw;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin:0px;
  padding:0px;
  max-width:100vw;
  overflow:hidden;
}
.column{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-basis: 100%;
  flex: 1;
}
.openedlinks{
  max-height:100vh;
  background-color: var(--bg-links);
}
.links div {
font-size:var(--links-font-size);
font-weight:bold;
font-family:var(--title-font-family);
padding-left:0px;
color:var(--links-text-color);
margin:0 8px 8px 8px;
padding:0px;
}
.links > div { margin-top:16px;margin-bottom:0;}
.links div > a {
font-size:var(--links-font-size);
color:var(--link-text-color);
margin:0px;padding:0px;
text-decoration:none;
font-weight:normal;
font-family: var(--body-font);
}
.links div > a:hover{
color:var(--niceorange);
opacity:1.2;
}

a:hover{color:var(--niceorange);}

.borderportrait {
width:40%;
margin:2px auto;
display: flex;
position:relative;
padding: 0px;
}

.borderlandscape {
width:60%;
display: flex;
padding: 0;
margin:2px auto;
position:relative;
}

.mac {
  box-shadow: 0 0 2px var(--black);
  border-radius: 8px;
  overflow: hidden;
  margin: 2px auto;
}
.borderwide {
  width:80%;
  margin:16px auto;
  position:relative;
}
.borderwide > img, .borderwide > video {
  width:100%;
}
  
.borderportraitextension {
width:200px;
margin:0 auto;
position:relative;
}

.borderwide img,.borderportrait img,.borderlandscape img,.borderportraitextension img,.borderportrait video,.borderlandscape video,.borderportraitextension video{
width:100%;

}

/*svg {width:100%;height:100%;padding:0;margin:0;opacity:1;stroke:var(--bg-blue);fill:var(--bg-blue)}*/

.logoapp{color:var(--nice-blue);padding:0;margin:0}
.logoblit{color:var(--niceorange);padding:0;margin:0}
b > a {
  display:inline-block;
  color:var(--link-text-color);
  text-decoration:none;
  margin-top:16px;
  font-size: 120%;
}

.footnote{
  font-size:80%;
  margin-top:32px;
}

.label{padding:8px;opacity: 0.9}
.inline{display:inline-block;width:120px}

input[type=search], input[type=submit] {
  font-size: 1rem;
  font-family: var(--font-name);
  padding: 4px 8px;
  border: 2px solid var(--nice-blue);
  border-radius: 5px;
  color: black;
}
input[type=submit] {
  font-weight: 400;
  background-color: rgb(235	235	236);
}

a {text-decoration:none;color:var(--nice-blue)}

b > a {color:var(--nice-blue);}
b > a:hover {color:var(--niceorange);}

.nicebutton{
  outline:none;
  background-color: var(--nice-blue);
  border:0;border-radius: 3px;
  padding:4px 8px;
  color:white;
  cursor: pointer;font-family: Arial;
  font-size: 17px;
  opacity:0.9;
}
.nicebutton:hover{opacity:1.0}
.nicebutton:disabled{opacity:0.4}

br {
   display: block;
   margin: 10px 0;
}

#mywindow{
  width:100%;
  height:auto;
  background-color: black;
}
.title {
  font-size:var(--title-font-size);
  font-weight:bold;
  color:var(--nice-blue);
  text-align: center;
  line-height:2.5rem;
  margin:8px 16px;
  padding-top: 32px;
}
.title h1 {
  margin-top: 0;
}
.column > div:first-child {font-size:var(--links-font-size);font-weight:bold;color:var(--nice-blue);text-transform: uppercase;}

#appblit_menu{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 8px;
}

h3, h5 {
  display:inline-block;
}

.freelink{
  color:var(--niceorange);
  font-size:var(--body-font-size);
  font-weight: normal;
}
#lady{
  position:absolute;
  right:4px;
  bottom:4px;
  width:20%;
  aspect-ratio: 1;
  opacity: 0;
  object-fit: cover;
  border-radius: 50%;
  /*border:2px solid #DE8235;*/
  background-color: yellow;
  padding:var(--border-width);
  transition: opacity 200ms ease-in;
  z-index:50000;
  margin:0;
}

.borderwide > img, .borderportrait > img, .borderlandscape > img {
  /*box-shadow: 0px 0px 8px rgba(0,0,0,0.3) ;
  border-radius: 8px;*/
  padding:0px;
  overflow: hidden;
}

em {
  font-style: normal;
}
rem {
  font-style: normal;
  text-decoration-thickness: 4px;
  text-decoration-color: #22c55e;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  /*background-color: var(--nice-blue);
  background-color: dodgerblue;
  padding: 2px 4px;
  color: white;
  border-radius: 4px;
  font-weight: 500;*/
}
nem {
  font-weight: 500;
  font-style: normal;
  color: white;
  background-color: dodgerblue;
}

.centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
}
h1 {
  font-size: 2.8rem;
  margin: 0;
  margin-top: 16px;
  line-height: 1;
  font-family: var(--heading-fontname);
  font-family: var(--fnh);
  color:var(--nice-blue);
  font-weight: 900;
}
h1 > a {
  line-height: 1.2;
}
.app h1 {
  font-size: 1.9rem;
}
.app h1 > a {
  font-size: 1.;
}
h2 {
  color:var(--text);
  text-align: center;
  font-family: var(--font-name);
  font-size:var(--body-font-size);
  font-weight:normal;
  display:block;
}
h3 {
  margin:16px 0 0 0;
  color:var(--nice-blue);
  padding-top: 0px;
  font-size:1.5rem;
  font-weight: 700;
  color:var(--nice-blue);
  font-family: var(--heading-fontname);
  margin-left: 0!important;
  padding: 0px;
  line-height: 1.2;
}

.cutec {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 8px auto;
  width: calc(100% - 16px);
  width: 70%;
  gap: 8px;
}
form {
  margin-bottom: 16px;
}
figure {
  font-size: 0.9rem;
  opacity: 0.8;
  text-align: center;
}
.app > h3 {
  margin: 8px 16px;
}

#hero{
  margin:0 auto;
  margin-bottom: 16px;
  display: block;
  max-width:640px;
  width:100%;
  position: relative;
  aspect-ratio: 16/9;
}

#hero > img {
  width:100%;
  position: absolute;
  transition: opacity 0.3s ease-in-out;
  opacity: 1.0;
}

.terms{
  background-color: var(--bg-terms);
  padding:0px 16px 16px 16px;
  margin-top: 32px;
}
.terms > h5 {
  padding:0
}

@media only screen and (max-width: 420px) {
  :root {
    --body-font-size: 16pt;
  }
  .app{ margin: 0 0;}
  .app > p, .app > h3, .app > h1, .app > form, .app > .t {
    padding: 0 16px;
  }
  .app > img {
    margin: 16px auto;
    width: 100%;
    padding: 0;
  }
}

@media (prefers-color-scheme: dark) {
  :root{
    --bg-body:#1c1c1e;
    --bg-toc: #1c1c1ea0;
    --text:#fefefe;
    --bg-terms: transparent;
    --bg-links: black;
    --bg-header: #1c1c1e;
  }
  .adonate{color:white}.adonate:hover{color:rgb(55, 66, 82)}
  .topheader,.openedlinks{border-bottom:0}
  img {
    filter: grayscale(30%);
  }
  input{color:white}
}

form > input[type=text] {
  background-color: #eee;
  border-radius: var(--radius2) 0 0 var(--radius2);
}
form > button[type=submit] {
  border-radius: 0 var(--radius2) var(--radius2) 0;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#fakescribe {
  position: relative;
  width: 320px;
  aspect-ratio: 775/1572;
  overflow: hidden;
}
#fakescribe img {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
#fakescribeframe {
  position: absolute;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  margin: 16px;
}

#signoutbtn {
  font-size: 1rem;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.download {
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
  padding: 8px 16px;
  border-radius: 50rem;
  background-color: var(--nice-blue);
  color: white !important;
  text-decoration: none !important;
}
.download i {
  font-size: 1.2rem;
}
.download:hover {
  color:white !important;
  opacity: 0.8;
}

/* Overlay to dim background */
#dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  display: none;
}

/* Dialog container */
#dialog {
  background: #ffffff;
  width: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.badge {
  font-family: var(--font-name);
  background-color: var(--uk-orange);
  color: white !important;
  text-decoration: none !important;
  cursor: pointer;
  font-weight: 400;
  padding: 8px 16px;
  border-radius: 50rem;
  min-width: 64px;
  border: 0px solid var(--nice-blue);
}
.badge:hover {
  color:white !important;
  opacity: 0.8;
}

.empty {
  background-color: #eee;
  color: var(--text)!important;
}
.simple {
  background-color: var(--nice-blue);
}

.badge.left {
  border-radius: 50rem 0 0 50rem;
  padding-right: 8px;
}
.badge.right {
  border-radius: 0 50rem 50rem 0;
  border-left: 0px solid white;
  padding-left: 8px;
}

#msg {
  color: var(--niceorange);
}

.fakeiphone {
  border: 4px solid black;
  border-radius: 2rem;
  overflow: hidden;
}