*, :after, :before {
    touch-action: manipulation;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    transition: background 0.3s ease;

}
html{-webkit-tap-highlight-color: transparent;-webkit-text-size-adjust: 100%; }

ul,li{list-style: none}
a{text-decoration: none;color: #1e293b; display:inline-block;}
img{display: inline-block;width: 100%; height: 100%; object-fit: cover}
p{word-break:break-word;word-wrap:break-word;}
html,body{ height: 100%}
i{display: block}
svg{ display: block}
[v-cloak] {
    display: none;
}
[role=button], button {
    cursor: pointer;
}

 button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
     -webkit-appearance: button;
     background-color: transparent;
     background-image: none;
 }

 button, select {
     border: none;
     text-transform: none;
 }

 button, input, optgroup, select, textarea {
     font-family: inherit;
     font-feature-settings: inherit;
     font-variation-settings: inherit;
     font-size: 100%;
     font-weight: inherit;
     line-height: inherit;
     letter-spacing: inherit;
     color: inherit;
     margin: 0;
     padding: 0;
 }
pre{  position: relative;  border-radius: 0.75rem;background-color: rgb(15 23 42 / 0.95);padding: 1rem; color: #f1f5f9;max-width: calc(100vw - 3.5rem); }
code, kbd, pre, samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em;


}
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {margin: 0;}
pre>button{position: absolute;right: 0.75rem;top: 0.75rem;  border-radius: 0.5rem;background-color: rgb(255 255 255 / 0.1); padding: 0.25rem 0.5rem;font-size: 0.75rem;line-height: 1rem;}

.code-box{overflow-x: auto; padding: 1rem 0}
body{ color: #1e293b; line-height: 1.5; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Helvetica Neue, Arial, sans-serif;background-color: #f8fafc; background-image: radial-gradient(circle at 1px 1px, rgb(99 102 241 / 0.12) 1px, transparent 0);background-size: 22px 22px;}
.background-right{position: absolute;width: 20rem; height: 20rem;top:-6rem; right: 0;background-color: rgb(34 211 238 / 0.25);filter:blur(64px); border-radius: 9999px;}
.background-left{position: absolute;width: 18rem; height: 18rem;top:33.333333%; left:-5rem;background-color: rgb(99 102 241 / 0.2);filter:blur(64px); border-radius: 9999px;}
header{position: sticky; z-index: 100; top: 0; border-bottom:1px solid rgb(255 255 255 / 0.2); background-color: rgb(255 255 255 / 0.7);backdrop-filter:blur(8px)}
header>.box{max-width: 72rem; margin: 0 auto; height: 57px; display: flex; justify-content: space-between; align-items: center}

.logo{font-weight: 600; gap: 0.5rem;align-items: center;display: flex}
.logo>.icon{width: 2rem; height: 2rem;display: flex; justify-content: center; align-items: center;background-color: #06b6d4; color: #fff;border-radius: 0.75rem;}
.version{margin-left: 0.5rem;border-radius: 9999px;background-color: rgb(15 23 42 / 0.05);padding:0.125rem 0.5rem;font-size: 0.75rem;line-height: 1rem;}
header nav{display: flex; align-items: center;gap: 1.5rem;font-size: 0.875rem;line-height: 1.25rem; position: relative; left: -50px}
header nav>a:hover{color: #0891b2;}
header .install{border-radius: 0.75rem;background-color: #0891b2; padding:  0.375rem 0.75rem; font-weight: 500;font-size: 0.875rem;line-height: 1.25rem; color: #fff;   box-shadow: 0 0 #0000,  0 0 #0000, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);}
header .install:hover{background-color: #06b6d4;}

.main{max-width: 72rem; margin: 0 auto;}
.first-box{padding: 80px 0;display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 2.5rem;align-items: center;}
.first-box>.left>h1{font-weight: 800;font-size: 3rem; line-height: 1.2}
.first-box>.left>h1>span{color: #0891b2;}
.first-box>.left>.description{ margin-top: 1rem;font-size: 1.125rem; color: #475569;}
.first-box>.left>.goto-box{margin-top: 1.5rem; display: flex;gap: 0.75rem}
.first-box>.left>.goto-box>.install{border-radius: 0.75rem;background-color: #0f172a; padding: 0.5rem 1rem;font-size: 0.875rem;line-height: 1.25rem;font-weight: 500; color: #fff;
    box-shadow: 0 0 #0000,  0 0 #0000, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);}
.first-box>.left>.goto-box>.install:hover{opacity: 0.9}
.first-box>.left>.goto-box>.features{border-radius: 0.75rem;    border-color: rgb(226 232 240 / 60%); padding: 0.5rem 1rem;font-size: 0.875rem;line-height: 1.25rem;font-weight: 500; color: rgb(30 41 59);
    box-shadow: 0 0 #0000,  0 0 #0000, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);}
.first-box>.left>.goto-box>.features:hover{background-color: rgb(255 255 255 / 0.7);}
.first-box>.left>.text-box{margin-top: 1.5rem;display: flex;flex-wrap: wrap;gap:0.5rem;font-size: 0.75rem;line-height: 1rem;color: #64748b;}
.first-box>.left>.text-box>span{border-radius: 0.5rem;background-color: rgb(255 255 255 / 0.7); padding: 0.25rem 0.5rem}
.first-box>.right{backdrop-filter: saturate(1.2) blur(10px);background: linear-gradient(180deg, rgb(255 255 255 / .85), rgb(255 255 255 / .6));border-radius: 1rem;padding: 1.5rem;box-shadow: 0 0 0 0 #fff, 0 0 0 1px rgb(0 0 0 / 0.05), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);}
.first-box>.right>.title{margin-bottom: 0.5rem;font-size: 0.875rem;line-height: 1.25rem;color: #64748b;}
.first-box>.right>p{margin-top: 0.75rem;font-size: 0.75rem;line-height: 1rem;color: #64748b;}


section{padding: 4rem 0}
section>h2{font-size: 1.5rem;line-height: 2rem;font-weight: 700;}
section>.box{margin-top: 2rem;display: grid;gap: 1.5rem;grid-template-columns: repeat(3, minmax(0, 1fr));}
section>.box>article{backdrop-filter: saturate(1.2) blur(10px);background: linear-gradient(180deg, rgb(255 255 255 / .85), rgb(255 255 255 / .6));border-radius: 1rem;padding: 1rem;box-shadow: 0 0 0 0 #fff, 0 0 0 1px rgb(0 0 0 / 0.05), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);}
section>.box>article>h3{font-weight: 600;margin-bottom: 0.5rem;}
section>.box>article>p{ font-size: 0.875rem;line-height: 1.25rem;color: #475569;}

.optional{margin-top: 2.5rem;border-radius: 1rem;border: 1px solid rgb(226 232 240 / 0.6);padding: 1rem;}
.optional>p{margin: 0.5rem 0;font-size: 0.875rem;line-height: 1.25rem;color: #475569;}
code small,code a{color: #fff}
.faq{padding: 4rem 0}
.faq>h2{font-size: 1.5rem;line-height: 2rem; font-weight: 700}
.faq>.main-box{margin-top: 1.5rem;display: grid;gap: 1rem}
.faq>.main-box>details{backdrop-filter: saturate(1.2) blur(10px);background: linear-gradient(180deg, rgb(255 255 255 / .85), rgb(255 255 255 / .6));border-radius: 1rem;padding: 1.25rem;box-shadow: 0 0 0 0 #fff, 0 0 0 1px rgb(0 0 0 / 0.05), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);}
.faq>.main-box>details>summary{display: list-item;cursor: pointer;font-weight: 500;}
.faq>.main-box>details>p{margin-top: 0.5rem;font-size: 0.875rem;line-height: 1.25rem; color: #475569;}
footer{border-top: 1px solid rgb(255 255 255 / 0.2);background-color: rgb(255 255 255 / 0.6);backdrop-filter:blur(8px)}
footer>.box{ display: flex; justify-content: space-between; align-items: center;   max-width: 72rem; margin: 0 auto; padding: 2.5rem 1rem;font-size: 0.875rem;line-height: 1.25rem;color: #64748b;}
footer>.box>.right{display: flex;align-items: center;gap: 1rem;}
footer a{color: #64748b;text-decoration: inherit;}
.notice{ font-size: 3rem;color: #0891b2; font-weight: 700}
@media screen and (orientation: portrait) {
    header nav{display: none}
    header{padding:0 10px}
    .version{margin-left: 0}
    .first-box{grid-template-columns: 1fr;}
    .first-box{padding: 80px 10px}
    section>.box{grid-template-columns: 1fr;}

    .first-box>.left>h1{font-size: 2rem}
    .first-box>.left>.description{font-size: 1rem}
    .first-box>.right{padding: 1rem}
   
    section{padding:2rem 10px}
    .first-box pre{max-width: calc(100vw - 3.5rem);}
    section pre{max-width: calc(100vw - 3.5rem);}
    .faq{padding:2rem 10px}
    footer>.box{display: block}
    footer>.box>p{display: flex; justify-content: center}
    footer>.box>.right{justify-content: center; margin-top:0.8rem}
    .notice{ font-size: 1rem;}
}