/* Embedded font notices and licenses:
Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.


Copyright 2022 The Noto Project Authors (https://github.com/notofonts/thai)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

*/
@font-face{font-family:Inter;src:url(/assets/3100e775e8616cd2611b.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:Thai;src:url(/assets/1f5a173641bbcb3ca4fb.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0E00-0E7F;}

/* Noto Serif Thai font license:
Copyright 2022 The Noto Project Authors (https://github.com/notofonts/thai)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

*/
@font-face{font-family:PaperSerif;src:url(/assets/9f3427e0d6a6ed4d5d1a.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;}
@font-face{font-family:PaperSerif;src:url(/assets/2d9bafd2b21e96ef27c1.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root{color-scheme:dark;--bg:#1b2021;--panel:#252b2c;--ink:#e8e8e0;--muted:#bdd0cc;--line:#52615e;--mint:#75d9c7;--font:Inter,Thai,sans-serif;background:var(--bg);color:var(--ink);font-family:var(--font);font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0;position:relative;isolation:isolate;font-size:.9375rem;line-height:1.85}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:.25em}button{cursor:pointer}button:disabled{cursor:default}button,a,input,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:5px}::selection{background:var(--muted);color:var(--bg)}[hidden]{display:none!important}img{display:block;max-inline-size:100%;block-size:auto}h1,h2,h3,p,figure{margin:0}h1,h2{font-family:PaperSerif,serif;font-weight:500;line-height:1.5;letter-spacing:-.025em}h3{font-size:1.05rem;line-height:1.65;font-weight:600}p{color:#c0cbc7}small{font-size:.75rem}svg{inline-size:22px;block-size:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.wrap{max-inline-size:1200px;margin-inline:auto;padding-inline:32px}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:clip;clip-path:inset(50%);white-space:nowrap}.skip{position:fixed;inset:12px auto auto 12px;z-index:50;background:var(--ink);color:var(--bg);padding:10px;transform:translateY(-180%)}.skip:focus{transform:none}
.atmosphere{position:fixed;inset:0;z-index:-2;background:var(--bg);pointer-events:none}.grain{position:absolute;inset:0;background:url('/assets/f7641aaddfacc3570c9a.webp') center/cover;opacity:.44;filter:saturate(.12)}.daylight{position:absolute;inset:0;background:linear-gradient(124deg,transparent 4%,#c8d1c615 28%,transparent 43%),linear-gradient(124deg,transparent 29%,#0003 31%,transparent 39%);animation:daylight 22s ease-in-out infinite alternate}.shade{position:absolute;inset:0;background:linear-gradient(180deg,#111b,transparent 400px),linear-gradient(90deg,#10141450,transparent 50%,#10141435)}@keyframes daylight{from{opacity:.55;transform:translateX(-10px)}to{opacity:1;transform:translateX(10px)}}
.site-header{background:#111;border-block-end:3px double #6c79714d}.header-inner{min-block-size:86px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:18px;text-decoration:none}.brand-mark{display:block;position:relative;inline-size:124px;block-size:43px;overflow:clip}.brand-mark img{position:absolute;inline-size:603px;max-inline-size:none;inset-block-start:-53.8px;inset-inline-start:-243px}.brand-company{border-inline-start:1px solid #46504c;padding-inline-start:18px;white-space:nowrap;font-size:.67rem;letter-spacing:.1em}.topnav{display:flex;align-items:center;gap:25px;font-size:.79rem}.topnav>a{text-decoration:none;color:#d0d6d0}.topnav>a:hover{color:white}.langs{display:flex;align-items:center;gap:3px;border-inline-start:1px solid #414a46;padding-inline-start:20px}.langs a{background:transparent;border:0;color:#9eada6;padding:8px 6px;min-block-size:44px}.langs a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.hero{padding-block:58px 38px;display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1.17fr);align-items:center;gap:48px}.eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.13em;font-size:.67rem;color:var(--muted);margin-block-end:18px}.eyebrow:before{content:'';inline-size:23px;block-size:1px;background:var(--muted)}.product-name{display:flex;align-items:center;gap:11px;font-size:1rem;font-weight:650;margin-block-end:18px}.product-name img{inline-size:32px;block-size:32px}.hero h1{font-size:2.5rem;line-height:1.53;margin-block-end:20px}.hero h1 em{color:var(--muted);font-style:normal}.hero .intro{font-size:.9375rem;max-inline-size:47ch;line-height:1.95}.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-block-start:26px}.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;min-block-size:46px;padding:10px 20px;border:1px solid var(--muted);border-radius:2px;background:var(--muted);color:#202827;text-decoration:none;font-size:.83rem;font-weight:600;box-shadow:0 4px 10px #080d0b40,inset 0 1px #edf1df55;transition:background .2s,transform .2s}.button:hover{background:#e4e8dc;transform:translateY(-2px)}.button.secondary{background:transparent;color:var(--muted);border-color:#80978e}.button.secondary:hover{background:#34413b}.compat{display:flex;align-items:center;flex-wrap:wrap;gap:8px 17px;font-size:.7rem;color:#b6c0ba;margin-block-start:22px}.compat span{display:flex;align-items:center;gap:6px}.compat svg{inline-size:15px;block-size:15px}
.app-figure{min-inline-size:0;padding-block-start:10px}.app-shell{background:#191f22;border:1px solid #63716b;border-radius:6px;box-shadow:15px 23px 32px #070c0b68,inset 0 1px #d1dfd510;transform:rotate(-.55deg)}.app-title{display:flex;align-items:center;gap:9px;min-block-size:43px;padding:8px 13px;border-block-end:1px solid #394642;font-size:.68rem}.app-title img{inline-size:23px;block-size:23px}.app-window-controls{margin-inline-start:auto;letter-spacing:.65em;color:#9caba7;white-space:nowrap}.app-body{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,.95fr);min-block-size:285px}.app-rail{border-inline-end:1px solid #35413f;display:flex;flex-direction:column;gap:10px;padding-block:18px}.rail-item{display:grid;justify-items:center;gap:3px;font-size:.52rem;color:#9eaaa7;padding:9px 3px}.rail-item.active{color:#7cdcc9;background:#253d3a;border-inline-start:2px solid var(--mint)}.rail-item svg{inline-size:22px;block-size:22px}.app-list{padding:19px 12px}.app-list h2{font:600 .78rem var(--font);margin-block-end:13px}.demo-search{display:flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid #788983;border-radius:4px;margin-block-end:15px}.demo-search svg{inline-size:14px;block-size:14px;color:#a6b9b2}.demo-search input{inline-size:100%;min-inline-size:0;border:0;background:transparent;color:var(--ink);font-size:.62rem;padding:4px 0}.demo-search input::placeholder{color:#b6c2bd}.device-row{display:flex;align-items:center;gap:10px;inline-size:100%;text-align:start;color:var(--ink);background:transparent;border:1px solid transparent;border-block-end-color:#34413c;padding:12px 8px;border-radius:4px;margin-block:3px;font-size:.69rem;line-height:1.6}.device-row svg{inline-size:25px;block-size:25px;color:#bdd0cc}.device-row strong{font-weight:600}.device-row small{font-size:.54rem;color:#b4c5be;display:block}.device-row[aria-pressed=true]{background:#293934;border-color:#80bbac}.device-row:hover{background:#293934}.device-row .dot{inline-size:5px;block-size:5px;margin-inline-end:4px}.app-detail{padding:28px 13px 18px;border-inline-start:1px solid #35413f;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px}.app-detail>svg{inline-size:46px;block-size:46px;color:#bacbc5;margin-block-end:5px}.app-detail h3{font-size:.95rem}.app-detail p{font-size:.57rem;color:#b5c6be}.dot{display:inline-block;inline-size:7px;block-size:7px;background:#79d7af;border-radius:50%;margin-inline-end:6px}.app-lock{display:flex;gap:6px;align-items:center;justify-content:center;border-block-start:1px solid #3d4a43;padding-block-start:17px;margin-block-start:9px;inline-size:100%;font-size:.58rem;color:#d4dbd2}.app-lock svg{inline-size:14px;block-size:14px}.demo-open{border:1px solid #79cebd;border-radius:4px;background:#83d8c7;color:#142923;inline-size:100%;padding:10px 5px;margin-block-start:10px;font-size:.67rem;font-weight:650}.demo-open:hover{background:#b3f0df}.app-footer{font-size:.56rem;border-block-start:1px solid #35413f;padding:10px 15px;color:#b0c1b9;display:flex;gap:8px;align-items:center}.app-footer svg{inline-size:17px;block-size:17px}.app-figure figcaption{display:flex;justify-content:space-between;gap:10px;margin-block-start:19px;font-size:.66rem;color:#aebeb6}.caption-line{inline-size:25px;display:inline-block;block-size:1px;background:#7b9186;vertical-align:middle;margin-inline-end:7px}.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid #71807570;padding-block:23px;gap:28px}.feature{display:flex;gap:15px;align-items:flex-start}.feature svg{color:var(--muted);margin-block-start:5px}.feature h2{font-family:var(--font);font-size:.87rem;font-weight:600;line-height:1.7}.feature p{font-size:.77rem;margin-block-start:5px;line-height:1.85}
.section{padding-block:62px}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:flex-end;margin-block-end:30px}.section-head h2{font-size:1.9rem}.section-head .eyebrow{margin-block-end:10px}.section-head p{font-size:.84rem;max-inline-size:43ch}.guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:55px;align-items:center}.step-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-block-end:24px}.step-tabs button{display:flex;flex-direction:column;gap:5px;align-items:flex-start;border:0;border-block-start:2px solid #687b71;background:transparent;color:#becac2;font-size:.7rem;padding:12px 6px 7px;text-align:start;transition:color .2s,background .2s}.step-tabs button .number{font-family:PaperSerif,serif;font-size:1.3rem}.step-tabs button[aria-selected=true]{color:#eff0e6;border-color:var(--mint);background:#93b7a812}.step-content{padding:23px 27px 24px;background:linear-gradient(140deg,#2a3431,#232b2a);border:1px solid #69796c77;box-shadow:8px 14px 26px #0a0e0d50;min-block-size:226px}.step-content h3{margin-block-end:11px;font-size:1.08rem}.step-content p{font-size:.84rem;line-height:1.95}.step-content .step-note{border-inline-start:2px solid #869b8d;padding-inline-start:12px;margin-block-start:16px;font-size:.74rem;color:#b9c8bd}.step-nav{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-block-start:20px}.step-nav button{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid #819388;color:var(--ink);padding:6px 12px;border-radius:2px;font-size:.75rem;min-block-size:40px}.step-nav button:disabled{opacity:.35}.step-nav span{font-size:.68rem;color:#aabbae}.office-art img{mask-image:url('/assets/001cb84eef292e0fa32f.svg');mask-size:100% 100%;filter:drop-shadow(8px 16px 12px #080d0a60);inline-size:100%}.office-art figcaption{font-size:.68rem;text-align:center;color:#a8bbae;margin-block-start:6px}.platforms{padding-block:27px;border-block:1px solid #67776d66;display:grid;grid-template-columns:1fr 1fr;gap:35px}.platform{display:flex;align-items:flex-start;gap:16px}.platform h3{font-size:.86rem;margin-block-end:3px}.platform p{font-size:.76rem}.platform svg{margin-block-start:5px;color:#c0d1c4}.faq-grid{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:65px}.faq-intro h2{font-size:1.9rem;margin-block-end:13px}.faq-intro p{font-size:.84rem;max-inline-size:35ch}.faq-list{border-block-start:1px solid #66786d}details{border-block-end:1px solid #66786d80}summary{cursor:pointer;display:flex;gap:20px;justify-content:space-between;align-items:center;font-size:.91rem;padding:18px 0;list-style:none}summary::-webkit-details-marker{display:none}summary:after{content:'+';font-family:Inter,sans-serif;font-size:1.2rem;color:#bed1c2}details[open] summary:after{content:'−'}details p{font-size:.81rem;padding:0 30px 22px 0;line-height:1.9}details[open]{background:#a6b7a608}.contact{display:flex;justify-content:space-between;gap:35px;align-items:center;background:#252b2c;border:1px solid #6e817170;box-shadow:8px 14px 30px #080d0b50;padding:31px 35px;margin-block:0 60px}.contact h2{font-size:1.6rem;margin-block-end:7px}.contact p{font-size:.81rem;max-inline-size:65ch}.contact .button{white-space:nowrap}.site-footer{background:#111;border-block-start:3px double #72827355;padding-block:24px}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:.72rem}.footer-inner p{font-size:.72rem}.footer-links{display:flex;gap:20px;flex-wrap:wrap}.review-note{font-size:.63rem;color:#9cad9f;margin-block-start:7px}
dialog{padding:0;inline-size:min(890px,calc(100% - 32px));max-block-size:calc(100dvh - 32px);border:1px solid #7c9087;border-radius:5px;background:#1d2524;color:var(--ink);box-shadow:0 30px 100px #0009}dialog::backdrop{background:#060d0bd6;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 20px;border-block-end:1px solid #576a5f}.dialog-top h2{font:600 .9rem var(--font)}.dialog-top form{margin:0}.dialog-close{min-inline-size:40px;min-block-size:40px;display:grid;place-items:center;border:1px solid #718679;border-radius:2px;color:var(--ink);background:transparent}.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;font-size:.73rem;flex-wrap:wrap}.viewer-controls{display:flex;gap:5px}.viewer-controls button{border:1px solid #7f9285;border-radius:3px;background:transparent;color:var(--ink);font-size:.7rem;padding:6px 12px;min-block-size:38px}.viewer-controls button[aria-pressed=true]{background:#b9d0c1;color:#1a2921}.desktop-viewport{margin-inline:20px;block-size:340px;overflow:auto;background:#718d9a;border:1px solid #809b98;display:flex;align-items:center;justify-content:center;overscroll-behavior:contain}.desktop-sheet{background:#f0efe7;color:#233833;inline-size:78%;padding:24px;box-shadow:0 12px 20px #24342d44;transition:width .25s;flex-shrink:0}.desktop-sheet h3{font-family:PaperSerif,serif;font-size:1.5rem;margin-block-end:12px}.desktop-sheet p{color:#4d6057;font-size:.79rem}.desktop-sheet .document-rule{block-size:1px;background:#afbab0;margin-block:15px}.desktop-sheet ul{font-size:.8rem;padding-inline-start:22px}.desktop-viewport.actual{justify-content:flex-start;align-items:flex-start}.desktop-viewport.actual .desktop-sheet{inline-size:1000px;min-block-size:580px;margin:28px}.dialog-note{padding:17px 20px 20px;font-size:.75rem}.dialog-note strong{color:var(--ink)}.empty-demo{font-size:.62rem;padding-block:15px}.no-script{background:#35433d;padding:15px;text-align:center}
@media(max-width:1100px){.brand-company{display:none}.hero{gap:28px}.hero h1{font-size:2.15rem}.app-body{grid-template-columns:48px minmax(0,1fr) minmax(0,.85fr)}.app-list{padding:18px 9px}.app-detail{padding-inline:10px}.guide{gap:28px}.topnav{gap:20px}}
@media(max-width:850px){.hero{grid-template-columns:1fr;padding-block:36px 30px;gap:30px}.hero-copy{max-inline-size:640px}.hero h1{font-size:2.3rem}.hero .intro{max-inline-size:60ch}.app-figure{max-inline-size:640px;inline-size:100%;margin-inline:auto}.app-body{grid-template-columns:64px 1fr 1fr;min-block-size:280px}.app-list{padding:20px 16px}.app-detail{padding-inline:20px}.features{gap:20px}.feature{display:block}.feature svg{margin-block-end:10px}.guide{grid-template-columns:1.1fr .9fr;gap:25px}.section-head{align-items:flex-start;flex-direction:column;gap:12px}.faq-grid{grid-template-columns:1fr;gap:25px}.contact{padding:26px;align-items:flex-start;flex-direction:column}.footer-inner{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.wrap{padding-inline:21px}.header-inner{min-block-size:76px;gap:10px;flex-wrap:wrap;padding-block:12px}.brand-mark{inline-size:108px;block-size:35px}.brand-mark img{inline-size:523px;inset-inline-start:-210.8px;inset-block-start:-46.7px}.topnav{gap:12px;font-size:.72rem}.topnav>a{display:none}.langs{border:0;padding-inline-start:0}.hero h1{font-size:1.95rem}.hero .intro{font-size:.86rem}.hero .eyebrow{font-size:.6rem}.product-name{margin-block-end:14px}.actions{gap:10px}.button{font-size:.76rem;padding:10px 15px}.hero{padding-block-start:30px}.compat{font-size:.63rem;gap:6px 12px}.app-shell{transform:none}.app-body{grid-template-columns:minmax(0,1fr) minmax(0,.88fr);min-block-size:272px}.app-rail{display:none}.app-list{padding:17px 10px}.app-detail{padding:25px 9px 14px}.app-detail h3{font-size:.8rem}.app-detail>svg{inline-size:37px;block-size:37px}.device-row{gap:7px;padding:12px 6px}.device-row svg{inline-size:21px;block-size:21px}.app-title{font-size:.63rem}.app-window-controls{letter-spacing:.5em}.app-figure figcaption{font-size:.6rem;display:block}.app-figure figcaption span{display:block}.features{grid-template-columns:1fr;gap:19px;padding-block:24px}.feature{display:flex;gap:16px}.feature p{margin-block-start:2px}.feature svg{margin-block-start:4px}.section{padding-block:40px}.section-head h2,.faq-intro h2{font-size:1.6rem}.section-head{margin-block-end:23px}.guide{grid-template-columns:1fr;gap:26px}.step-tabs{gap:4px}.step-tabs button{font-size:.64rem}.step-content{padding:21px;min-block-size:245px}.step-tabs button .number{font-size:1.1rem}.office-art{max-inline-size:400px;justify-self:center}.platforms{grid-template-columns:1fr;gap:22px}.faq-grid{gap:23px}summary{font-size:.84rem;line-height:1.8}details p{font-size:.78rem}.contact{margin-block-end:38px;padding:24px}.contact h2{font-size:1.45rem}.contact .button{white-space:normal}.desktop-viewport{margin-inline:12px;block-size:270px}.desktop-sheet{inline-size:88%;padding:15px}.desktop-sheet h3{font-size:1.2rem}.viewer-toolbar,.dialog-top{padding:12px}.dialog-note{padding:14px;font-size:.72rem}.footer-links{gap:12px}.review-note{font-size:.6rem}}

.langs a{display:inline-flex;align-items:center;text-decoration:none}
/* WorkGuard delta over tk-remote.css — only what the shared sheet has no class for.
   The console panel is the one place on this page where screen colour is allowed;
   everything outside it stays on the Studio Ink & Color palette. Values follow the
   real console tokens (--cat-* in backend/resources/css/console.css), pulled a few
   points toward the page so they sit on charcoal instead of fighting it. */
.cat-work{--c:#4e8fd4}.cat-comms{--c:#57a862}.cat-neutral{--c:#8b949e}.cat-distraction{--c:#cf5b5e}.cat-idle{--c:#333c3d}.cat-unaccounted{--c:#4a5356}

.day{border-block-start:1px solid #35413f;padding:14px 15px 13px}
.day-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;font-size:.6rem;color:#b0c1b9;margin-block-end:10px}
.day-top strong{color:var(--ink);font-weight:600}
.day-legend{display:flex;gap:12px;flex-wrap:wrap}
.day-legend span{display:flex;align-items:center;gap:5px}
.day-legend i{inline-size:8px;block-size:8px;border-radius:2px;background:var(--c)}
.day-band{position:relative;display:flex;block-size:27px;background:#1a2122;border-radius:2px}
.day-seg{block-size:100%;background:var(--c)}
.day-seg:first-child{border-start-start-radius:2px;border-end-start-radius:2px}
.day-seg:last-child{border-start-end-radius:2px;border-end-end-radius:2px}
.day-pin{position:absolute;inset-block:-6px -6px;inline-size:2px;margin-inline-start:-1px;background:#eef0e6;pointer-events:none}
.day-pin:before{content:'';position:absolute;inset-block-start:-5px;inset-inline-start:-3px;inline-size:8px;block-size:8px;border-radius:50%;background:#eef0e6}
.day-axis{display:flex;justify-content:space-between;font-size:.54rem;color:#93a49c;margin-block-start:11px}
.day-notes{display:flex;flex-wrap:wrap;gap:5px 20px;margin-block-start:12px;font-size:.59rem;color:#c3cec8}
.day-notes span{display:flex;align-items:baseline;gap:7px}
.day-notes b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* The shared sheet gives these buttons no hover at all. The fill matches the one
   .button.secondary already uses, so this is the site's existing hover, not a new one.
   Disabled ones are excluded — offering feedback for a button that does nothing lies. */
.step-nav button{transition:background-color .2s ease,border-color .2s ease}
.step-nav button:not(:disabled):hover{background-color:#34413b;border-color:#bdd0cc}

/* FAQ rows had no hover either. The tint is the one details[open] already uses and
   the brighter ink matches .topnav a:hover, so nothing new is invented here. */
summary{transition:color .2s ease,background-color .2s ease}
summary:hover{color:#fff;background-color:#a6b7a60f}
summary:after{transition:color .2s ease}
summary:hover:after{color:#fff}

/* Tabs carry an icon above the label here, so they centre under their own rule.
   tk-remote.css left-aligns them for its numbered steps; this sheet loads after it
   and only on this page, so that page is unaffected. */
.step-tabs button{align-items:center;text-align:center}

/* The why-band reuses .features/.feature; a timestamp takes the icon slot because
   the claim of each row is that the moment was recorded, not that it has a symbol. */
.when{font-family:PaperSerif,serif;font-size:1.15rem;line-height:1.35;color:#cfe0d6;white-space:nowrap;font-variant-numeric:tabular-nums}
.feature .when{margin-block-start:1px}

/* One preview frame, filled five different ways — a fragment of the console rather
   than another whole window, since the hero already shows the window. Rows, bands
   and dots come from the shared sheet; only the frame itself is new. */
.shot{display:flex;flex-direction:column;block-size:225px;margin-block-end:19px;background:#1b2224;border:1px solid #5f6f68;border-radius:4px;box-shadow:5px 9px 18px #070c0b55;overflow:clip}
.shot-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-block-end:1px solid #35413f;font-size:.59rem;color:#b6c5bd}
.shot-bar strong{color:var(--ink);font-weight:600}
.shot-body{flex:1;min-block-size:0;padding:9px 12px 11px;display:flex;flex-direction:column}
.shot .device-row{margin-block:0;padding:8px 4px;font-size:.62rem;gap:9px}
.shot .device-row small{font-size:.5rem}
.shot .device-row:last-child{border-block-end-color:transparent}
.shot .device-row>span:first-of-type{flex:1;min-inline-size:0}
.shot .device-row .day-band{block-size:11px;inline-size:120px;flex:none}
.shot-when{font-size:.55rem;color:#a9bcb3;white-space:nowrap}
.shot-tag{font-size:.52rem;padding:2px 6px;border-radius:2px;background:#4a2c2e;color:#eeb4b6;white-space:nowrap}
.shot-screen{position:relative;flex:1;min-block-size:72px;background:linear-gradient(152deg,#314044,#1f2b2e);border:1px solid #3f4d4a;border-radius:2px;display:grid;place-items:center;align-content:center;gap:5px;margin-block-end:11px}
.shot-screen svg{inline-size:30px;block-size:30px;color:#cbdcd3}
.shot-screen span{font-size:.55rem;color:#a9bcb3}
.shot-list{display:grid;gap:8px;font-size:.62rem}
.shot-list>span{display:flex;align-items:baseline;gap:9px;padding-inline-start:9px;border-inline-start:2px solid var(--c,#7d918a)}
.shot-list b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.shot-foot{display:flex;justify-content:space-between;gap:10px;font-size:.53rem;color:#9cada5;margin-block-start:auto;padding-block-start:9px}

/* Pricing. Nothing on the site holds a tier card, so the card itself is new; the
   heading, eyebrow, lede and button all come from the shared sheet. */
.trial{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;background:#22302c;border:1px solid #6e8175;border-radius:3px;padding:17px 22px;margin-block-end:20px}
.trial h3{font-family:PaperSerif,serif;font-size:1.2rem;font-weight:500;margin-block-end:4px}
.trial p{font-size:.76rem;max-inline-size:62ch}
.trial .button{white-space:nowrap}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.plan{display:flex;flex-direction:column;background:#252b2c;border:1px solid #62736c;border-radius:3px;padding:19px 18px 18px;box-shadow:0 8px 22px #090d0b40,inset 0 1px #b5c5b515;transition:transform .24s ease,opacity .4s ease,border-color .24s ease,background-color .24s ease,box-shadow .24s ease}
.plan h3{font-size:.95rem}
.plan-lead{font-size:.66rem;color:#a9bcb3;margin-block-start:3px;min-block-size:2.6em}
.plan .price{font-family:PaperSerif,serif;font-size:1.7rem;line-height:1.3;color:var(--ink);margin-block:8px 1px}
.plan .per{font-size:.57rem;color:#a9bcb3}
.plan ul{list-style:none;display:grid;gap:9px;margin:15px 0 0;padding:14px 0 0;border-block-start:1px solid #3e4a46;font-size:.71rem;line-height:1.75}
.plan li{display:flex;gap:9px;align-items:flex-start;color:#c6d1cb}
.plan li:before{content:'';inline-size:5px;block-size:5px;border-radius:50%;background:var(--muted);margin-block-start:.62em;flex-shrink:0}
.plan.featured{border-color:#95b8aa;box-shadow:0 10px 26px #090d0b55,inset 0 1px #cfe0d622}
/* Declared after .plan.featured so it wins the border and shadow on hover — both
   selectors weigh the same, so order is what decides. No reduced-motion query is
   written anywhere in this project, which is why this fade always plays. */
.plan:hover{transform:translateY(-4px);border-color:#9fc1b2;background-color:#2a3233;box-shadow:0 15px 30px #060a0966,inset 0 1px #cfe0d626}
.plan h3{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-badge{font-size:.53rem;font-weight:600;letter-spacing:.06em;padding:3px 8px;border-radius:2px;background:#bdd0cc;color:#20302b;white-space:nowrap}
.plan-note{font-size:.65rem;color:#a4b5ad;margin-block-start:15px}
.plan{cursor:pointer}
.plan ul{flex:1}
.plan-more{inline-size:100%;margin-block-start:16px;font-size:.71rem;min-block-size:40px;padding:8px 12px}
/* dialog is display:none until opened, so the flex column has to be on [open]
   or every dialog on the page would be visible. */
dialog[open]{display:flex;flex-direction:column}
/* The backdrop fades with the dialog. A keyframe rule is not switched off by the
   OS animation setting, and no reduced-motion query exists in this project. */
.plan-dialog::backdrop{animation:wg-backdrop .26s ease both}
@keyframes wg-backdrop{from{opacity:0}to{opacity:1}}
/* The tier strip carries the rule under the title, so the title bar gives its up. */
.plan-dialog .dialog-top{border-block-end:0;padding-block-end:10px}
.plan-tiers{display:flex;flex-wrap:wrap;gap:6px;padding:0 22px 15px;border-block-end:1px solid #3c4946}
.plan-tiers button{min-block-size:36px;padding:6px 14px;border:1px solid #4e5c58;border-radius:2px;background:transparent;color:#aebbb4;font-size:.68rem;transition:background .2s,color .2s,border-color .2s}
.plan-tiers button:hover{border-color:#8fa79b;color:var(--ink)}
.plan-tiers button[aria-current=true]{background:#bdd0cc;border-color:#bdd0cc;color:#20302b;font-weight:600}

/* A specification sheet: one row per capability area, its name in the left margin.
   The items flow in a multi-column, which balances by height — a row-filled grid
   always leaves the last column short, which is what made this look half-empty. */
.plan-detail{overflow:auto;overscroll-behavior:contain;padding:4px 22px}
.plan-row{display:grid;grid-template-columns:186px minmax(0,1fr);gap:28px;padding-block:18px;border-block-end:1px solid #323e3b}
.plan-row:last-child{border-block-end:0}
.plan-row-head{display:flex;gap:10px}
.plan-row-head svg{inline-size:19px;block-size:19px;color:var(--muted);margin-block-start:1px}
.plan-row-head h3{font-size:.8rem;font-weight:600;color:var(--ink);line-height:1.5}
.plan-row-head p{font-size:.63rem;color:#93a49c;line-height:1.65;margin-block-start:2px}
.plan-row ul{columns:2;column-gap:28px;list-style:none;margin:0;padding:0;font-size:.76rem;line-height:1.7;color:#c6d1cb}
.plan-row li{break-inside:avoid;margin-block-end:9px}
.plan-dialog-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:15px 22px;border-block-start:1px solid #3e4a46}
.plan-price-line{font-family:PaperSerif,serif;font-size:1.3rem;color:var(--ink)}

@media(max-width:1100px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}.plan-lead{min-block-size:0}}
@media(max-width:850px){.day-notes{gap:4px 14px}.trial{align-items:flex-start;flex-direction:column;gap:15px}}
@media(max-width:600px){.day{padding:12px}.day-band{block-size:23px}.day-top{font-size:.56rem;gap:9px}.day-legend{gap:9px}.day-notes{font-size:.56rem;gap:4px 12px}.when{font-size:1rem}.shot{block-size:auto;min-block-size:205px}.shot .device-row .day-band{inline-size:74px}.shot .device-row{padding:7px 2px}.plans{grid-template-columns:1fr}.trial{padding:16px}.trial h3{font-size:1.08rem}/* On one column the left margin disappears, so the items are indented to sit under
   the group name instead of the icon — that is what keeps them looking grouped. */
.plan-detail{padding-inline:16px}.plan-tiers{padding:0 16px 13px;gap:5px}.plan-tiers button{padding:6px 10px;font-size:.64rem}.plan-row{grid-template-columns:1fr;gap:9px;padding-block:15px}.plan-row ul{columns:1;padding-inline-start:29px}.plan-row li{margin-block-end:7px}.plan-dialog-foot{padding:13px 16px}}