/* Crosstela home page: site.css, home.css, tile-work.css, tile-stats.css, tile-colour.css, tile-mark.css, tile-guide.css, tile-lapse.css, tile-files.css, tile-sync.css, tile-kinds.css, tile-shelf.css, tile-last.css, detail.css, tile-photo.css (0c75f4391) */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-latin.woff2) format('woff2');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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');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}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/inter-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
:root{
--gap:clamp(8px,1.05vmin,14px);
--radius:clamp(14px,1.9vmin,30px);
--radius-s:clamp(9px,1.1vmin,16px);
--ease:cubic-bezier(.2,.8,.2,1);
--spring:cubic-bezier(.34,1.56,.64,1);
--text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--cloth:#F6F1E7;
--grid10:#D9466A;
--grid5:#7FB3E0;
color-scheme:light;
}
html[data-style="blush"]{
--bg:#EBCBC6;--bg-2:#E4BDB7;--tile:#FBF4F0;--tile-2:#F5E6E1;--tile-hi:#FFFFFF;
--ink:#5C0E22;--ink-2:#7E3446;--muted:#7A4652;--line:rgba(92,14,34,.10);
--accent:#8C1A38;--accent-2:#C64F6C;--accent-soft:rgba(140,26,56,.10);
--on-accent:#FFF6F3;--thread:#7A1230;
--display:'Manrope',var(--text);--display-w:800;--track:-.055em;
--shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -28px rgba(92,14,34,.45);
--pop-1:#C64F6C;--pop-2:#6F8F5B;--pop-3:#C98A2E;--pop-4:#8C1A38;--pop-5:#5E7FA8;
--glass:rgba(255,250,248,.72);
}
html[data-style="studio"]{
--bg:#F0F0F2;--bg-2:#E8E8EB;--tile:#FFFFFF;--tile-2:#F6F6F8;--tile-hi:#FFFFFF;
--ink:#1D1D1F;--ink-2:#424245;--muted:#6E6E73;--line:rgba(0,0,0,.08);
--accent:#A11D42;--accent-2:#E2557B;--accent-soft:rgba(161,29,66,.08);
--on-accent:#FFFFFF;--thread:#9E1B3F;
--display:'Inter',var(--text);--display-w:700;--track:-.04em;
--shadow:0 0 0 1px rgba(0,0,0,.03),0 14px 34px -26px rgba(0,0,0,.35);
--pop-1:#E2557B;--pop-2:#34A853;--pop-3:#F29A1F;--pop-4:#7A5AF8;--pop-5:#1F8FFF;
--glass:rgba(255,255,255,.76);
}
html[data-style="night"]{
--bg:#000000;--bg-2:#0A0A0B;--tile:#141416;--tile-2:#1C1C1F;--tile-hi:#232327;
--ink:#F5F5F7;--ink-2:#D1D1D6;--muted:#8E8E93;--line:rgba(255,255,255,.08);
--accent:#FF5C8A;--accent-2:#FF9DB8;--accent-soft:rgba(255,92,138,.14);
--on-accent:#140008;--thread:#FF5C8A;
--display:'Inter',var(--text);--display-w:700;--track:-.045em;
--shadow:0 0 0 1px rgba(255,255,255,.04) inset;
--pop-1:#FF5C8A;--pop-2:#5BE49B;--pop-3:#FFB547;--pop-4:#A78BFA;--pop-5:#5AC8FA;
--glass:rgba(30,30,33,.72);
color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.45;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 14px;border-radius:10px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.foot{display:flex;align-items:center;gap:clamp(6px,.8vw,12px);min-height:clamp(34px,4.4vh,46px);
padding:0 clamp(12px,1.4vw,22px);font-size:clamp(11.5px,1.25vmin,13px);color:var(--muted)}
.foot a{text-decoration:none;color:var(--ink-2);transition:color .2s}
.foot a:hover{color:var(--accent)}
.foot .grow{flex:1}
.foot nav{display:flex;gap:clamp(10px,1.4vw,20px);flex-wrap:wrap;margin-left:clamp(4px,.8vw,12px)}
.foot .cta{color:var(--accent);font-weight:650}
.foot .social{display:flex;gap:0}
.foot .social a,.ctl{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:0;background:transparent;cursor:pointer;color:var(--ink-2)}
.foot .social a:hover,.ctl:hover{background:var(--accent-soft);color:var(--accent)}
.foot svg{width:16px;height:16px}
.seg{display:inline-flex;padding:2px;border-radius:999px;background:var(--accent-soft);gap:2px}
.seg button{border:0;background:transparent;padding:4px 10px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--tile);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.lang{position:relative;display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);cursor:pointer}
.lang:hover{color:var(--ink)}
.lang select{appearance:none;-webkit-appearance:none;field-sizing:content;border:0;background:transparent;color:inherit;font:inherit;font-size:12.5px;font-weight:600;
padding:4px 16px 4px 0;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l4 4 4-4'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 2px center;background-size:9px 6px}
.lang select:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.lang option{color:#1D1D1F;background:#fff}
.consent{position:fixed;z-index:60;right:clamp(10px,1.4vw,20px);bottom:clamp(10px,1.4vw,20px);width:min(380px,calc(100vw - 20px));
padding:16px 16px 14px;border-radius:20px;background:var(--glass);color:var(--ink);
-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
box-shadow:0 0 0 1px var(--line),0 24px 60px -24px rgba(0,0,0,.45);font-size:13.5px;line-height:1.45;
transform:translateY(16px);opacity:0;transition:transform .5s var(--spring),opacity .35s}
.consent.on{transform:none;opacity:1}
.consent p{margin:0 0 12px;color:var(--ink-2)}
.consent strong{display:block;color:var(--ink);font-size:14.5px;margin-bottom:3px}
.consent .row{display:flex;gap:8px;align-items:center}
.consent .grow{flex:1}
.consent a{color:var(--ink-2);font-size:12.5px}
.btn{border:0;border-radius:999px;padding:8px 16px;font-weight:650;font-size:13.5px;cursor:pointer;transition:transform .15s,background .2s}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.quiet{background:var(--accent-soft);color:var(--ink)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.foot .lang{margin-left:clamp(4px,.6vw,10px)}
.foot .cta{margin-left:clamp(2px,.4vw,6px)}
.foot nav [data-i18n="nav.stitches"]{order:1}.foot nav [data-i18n="nav.learn"]{order:2}.foot nav [data-i18n="nav.library"]{order:3}
.foot nav [data-i18n="nav.handbook"]{order:4}.foot nav [data-i18n="nav.support"]{order:5}.foot nav [data-i18n="nav.privacy"]{order:6}.foot nav [data-i18n="nav.terms"]{order:7}
@media (min-width: 960px){.foot{flex-wrap:wrap}.foot .cta{margin-left:auto}}
@media (max-width: 959px){
.foot{flex-wrap:wrap;row-gap:2px;padding:10px clamp(16px,3vw,28px) 16px}
.foot nav{order:-1;width:100%;margin:0;gap:0 clamp(18px,3vw,30px)}
.foot nav a{padding:12px 0}
.foot .grow{flex:1}
.foot .cta{padding:12px 0}
.foot .social a,.ctl{width:40px;height:40px}
.foot .lang select{padding-top:11px;padding-bottom:11px}
}
@media (pointer:coarse) and (max-height:500px) and (min-width:621px){
.foot nav a{padding:12px 0}
}
@media (max-width: 620px){
.foot{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"nav nav nav nav" "lang social theme motion" "cta cta cta cta" "copy copy copy copy";
align-items:center;column-gap:0;row-gap:0;margin-top:6px;padding:8px 18px calc(22px + env(safe-area-inset-bottom));font-size:13px}
.foot nav{grid-area:nav;display:flex;flex-wrap:wrap;gap:0 22px;width:auto;margin:0 0 8px}
.foot nav a{display:flex;align-items:center;flex:1 1 calc(50% - 11px);min-height:50px;padding:0;margin:0;font-size:16px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.foot nav [data-i18n="nav.support"]{flex-basis:100%}
.foot nav [data-i18n="nav.privacy"],.foot nav [data-i18n="nav.terms"]{flex:0 0 auto;min-height:44px;border-bottom:0;font-size:14px;font-weight:500;color:var(--muted)}
.foot .lang{grid-area:lang;margin:0;min-height:52px;min-width:0;font-size:16px}
.foot .lang select{max-width:100%;min-width:0;text-overflow:ellipsis;font-size:16px;padding:12px 22px 12px 0;background-position:right 4px center;background-size:11px 8px}
.foot .social{grid-area:social}
.foot [data-theme-toggle]{grid-area:theme}
.foot button[data-motion]{grid-area:motion}
.foot .social a,.ctl{width:46px;height:46px}
.foot svg{width:20px;height:20px}
.foot .grow{display:none}
.foot .cta{grid-area:cta;display:flex;align-items:center;justify-content:center;min-height:54px;margin:12px 0 0;padding:0;border-radius:15px;
background:var(--accent);color:var(--on-accent);font-size:17px;font-weight:700}
.foot .cta:hover{color:var(--on-accent)}
.foot>span:first-child{grid-area:copy;justify-self:center;margin-top:16px;font-size:13px}
.foot>span[data-app-lang]{grid-column:1/-1;justify-self:center;text-align:center;margin-top:4px;font-size:13px}
}
html[data-style="blush"] body{background-image:
repeating-linear-gradient(0deg,rgba(92,14,34,.045) 0 1px,transparent 1px 7px),
repeating-linear-gradient(90deg,rgba(92,14,34,.045) 0 1px,transparent 1px 7px)}
.menu-btn{display:none;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:0;border-radius:12px;
background:transparent;color:var(--ink);cursor:pointer;pointer-events:auto}
.menu-btn svg{width:24px;height:24px}
.menu-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (pointer:coarse){.menu-btn:focus-visible,.site-menu button:focus-visible{outline:none}}
.site-menu{position:fixed;z-index:70;right:max(10px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));
width:min(280px,calc(100vw - 20px));max-height:calc(100dvh - 20px);overflow:auto;display:grid;gap:2px;padding:10px;border-radius:18px;
background:var(--tile-hi);border:1px solid var(--line);box-shadow:0 20px 50px -12px rgba(40,10,20,.4)}
.site-menu[hidden]{display:none}
.site-menu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:16px}
.site-menu a:hover,.site-menu a:focus-visible{background:var(--accent-soft)}
.site-menu .lang{min-height:44px;padding:0 12px}
.site-menu .lang select{font-size:16px}
.site-menu .cta{margin-top:6px;justify-content:center;background:var(--accent);color:var(--on-accent)}
.site-menu .cta:hover,.site-menu .cta:focus-visible{background:var(--accent);color:var(--on-accent)}
.top-links{display:none}
.legal-top.has-menu{display:flex;align-items:center;gap:14px;max-width:1320px;height:58px;padding:0 clamp(16px,2.4vw,28px)}
.legal-top.has-menu .brand{margin-right:auto;font-size:17px;min-height:0}
.legal-top.has-menu .brand img{width:28px;height:28px}
.has-menu .lib-toplink{display:none}
.top-get{text-decoration:none;font-weight:700;font-size:14px;color:var(--accent);white-space:nowrap}
@media (max-width:899px){
.menu-btn{display:inline-flex}
.top-get{display:none}
.hb-top-in.has-menu .menu-btn,.legal-top.has-menu .menu-btn{margin-left:auto}
.hero-top.has-menu{justify-content:flex-start}
.hero-top.has-menu .brand{margin-right:auto}
}
@media (min-width:900px){
.has-menu .hb-home{display:none}
.top-links{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);margin-left:auto}
.top-links a{text-decoration:none;color:var(--ink-2);font-weight:600;font-size:14.5px;padding:6px 2px}
.top-links a:hover,.top-links a[aria-current="page"]{color:var(--accent)}
.hb-top-in.has-menu>.grow{display:none}
.hb-top-in.has-menu .brand{margin-right:0}
}
@media print{.site-menu,.menu-btn,.top-links,.top-get{display:none!important}}
.menu-close{display:none}
.menu-legal{display:contents}
@media (max-width: 620px){
html.menu-open{overflow:hidden}
.menu-btn{width:46px;height:46px;margin-left:-10px}
.menu-btn svg{width:26px;height:26px}
.site-menu{inset:0;right:0;top:0;width:auto;max-height:none;border:0;border-radius:0;box-shadow:none;overflow:auto;overscroll-behavior:contain;
display:flex;flex-direction:column;gap:0;padding:max(24px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom));
background:var(--bg);animation:menu-in .24s var(--ease) both}
html[data-style="blush"] .site-menu{background:radial-gradient(110% 80% at 50% 8%,#F6DEDA 0%,#EFD0CB 55%,#E7C1BB 100%)}
html[data-style="night"] .site-menu{background:radial-gradient(90% 70% at 50% 100%,rgba(255,92,138,.18),transparent 70%),#0E0E10}
.site-menu[hidden]{display:none}
.menu-close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;margin:0 0 10px -10px;padding:0;border:0;border-radius:12px;
background:transparent;color:var(--ink);cursor:pointer}
.menu-close svg{width:26px;height:26px}
.site-menu>a{justify-content:space-between;min-height:64px;padding:0 2px;border-radius:0;border-bottom:1px solid var(--line);
font-family:var(--display);font-weight:var(--display-w);font-size:27px;letter-spacing:-.035em}
.site-menu>a::after{content:"";flex:none;width:10px;height:17px;opacity:.38;background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 17' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 17' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.site-menu>a:active{background:var(--accent-soft)}
.menu-legal{display:flex;gap:26px;margin-top:6px}
.menu-legal a{display:flex;align-items:center;min-height:52px;padding:0;font-size:17px;font-weight:600;color:var(--ink-2);text-decoration:none}
.site-menu>.lang{min-height:60px;padding:0 2px;border-top:1px solid var(--line);margin-top:6px;font-size:17px;justify-content:space-between}
.site-menu>.lang select{font-size:17px;width:100%;padding:16px 26px 16px 0;background-position:right 4px center;background-size:12px 8px}
.site-menu>.lang{margin-bottom:18px}
.site-menu>.cta{margin-top:auto;min-height:56px;padding:0;border:0;border-radius:16px;font-family:var(--text);font-size:18px;font-weight:700;letter-spacing:0;justify-content:center;flex:none}
.site-menu>.cta::after{display:none}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
html[data-motion="paused"] .site-menu{animation:none}
@media (prefers-reduced-motion:reduce){.site-menu{animation:none}}
.en-note{font-weight:400;font-size:min(.88em,14px);color:var(--muted);white-space:nowrap}
.st-card>.en-note,.brand-card>.en-note{display:block;white-space:normal;font-size:12.5px;line-height:1.3}
.st-card>.en-note{padding:0 11px 10px;margin-top:-4px}
.st-card:hover .en-note,.brand-card:hover .en-note{color:inherit}
.en-tag{display:inline-block;vertical-align:baseline;margin:4px 0 0;padding:2px 5px;border:1px solid currentColor;border-radius:5px;font-size:10px;font-weight:650;line-height:1;letter-spacing:.06em;color:var(--ink-2);opacity:.7}
.st-card,.brand-card{position:relative}
.st-card>.en-tag,.brand-card>.en-tag{position:absolute;right:10px;bottom:10px;margin:0}
@media (max-width: 620px){
.hb-top-in.has-menu .menu-btn,.legal-top.has-menu .menu-btn{order:-1;margin:0 -4px 0 -10px}
.hb-top-in .hb-home{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.has-menu .st-hb{display:none}
.hb-top .brand{min-height:44px}
.crumb{margin-bottom:6px;font-size:14.5px}
.crumb a{display:inline-block;padding:9px 0}
}
@media (max-width: 620px){
.consent{font-size:15px;padding:18px 18px 16px}
.consent strong{font-size:16.5px}
.consent a{font-size:14.5px;padding:10px 0}
.consent .btn{padding:12px 20px;font-size:15.5px}
}
@media (max-width: 620px){
.hero-top .store{position:relative}
.hero-top .store::after{content:"";position:absolute;inset:-5px -6px}
}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;src:url(../../assets/fonts/newsreader-normal-latin.woff2) format('woff2')}
body:has(main.bento){min-height:100dvh;display:flex;flex-direction:column}
.bento{flex:1;display:grid;gap:var(--gap);padding:var(--gap);width:100%;margin:0 auto;min-height:0}
@supports (width: round(nearest, 1.5px, 1px)){.bento{gap:round(nearest, var(--gap), 1px);padding:round(nearest, var(--gap), 1px)}}
@media (min-aspect-ratio: 23/20) and (min-width: 960px) and (min-height: 560px){
body:has(main.bento){height:100dvh;overflow:hidden}
.bento{
width:min(100%, calc((100dvh - 46px) * 1.92));
grid-template-columns:repeat(8,minmax(0,1fr));
grid-template-rows:repeat(6,minmax(0,1fr));
grid-template-areas:
"files files hero    hero    hero  hero  colour colour"
"last  free  hero    hero    hero  hero  colour colour"
"stats stats hero    hero    hero  hero  mark   mark"
"work  work  photo   photo   shelf  shelf  lapse  lapse"
"work  work  photo   photo   shelf  shelf  lapse  lapse"
"guide guide rip     offline kinds park  sync   sync";
}
}
.t-hero{grid-area:hero}.t-files{grid-area:files}.t-mark{grid-area:mark}.t-free{grid-area:free}
.t-colour{grid-area:colour}.t-work{grid-area:work}.t-pencil{grid-area:pencil}.t-park{grid-area:park}
.t-shelf{grid-area:shelf}.t-photo{grid-area:photo}.t-guide{grid-area:guide}.t-stats{grid-area:stats}
.t-lapse{grid-area:lapse}.t-last{grid-area:last}.t-shelf{grid-area:shelf}.t-rip{grid-area:rip}.t-offline{grid-area:offline}.t-kinds{grid-area:kinds}.t-sync{grid-area:sync}
@media not ((min-aspect-ratio: 23/20) and (min-width: 960px) and (min-height: 560px)){
.bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,19vw);
grid-template-areas:
"hero    hero    hero   hero"
"hero    hero    hero   hero"
"hero    hero    hero   hero"
"files   files   mark   mark"
"colour  colour  work   work"
"colour  colour  work   work"
"last    park    stats  stats"
"shelf   shelf   photo  photo"
"shelf   shelf   photo  photo"
"lapse   lapse   guide  guide"
"lapse   lapse   sync   sync"
"free    offline rip    kinds"}
}
@media (max-width: 620px){
.bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(132px,42vw);
grid-template-areas:
"hero  hero" "hero  hero" "hero  hero"
"files files"
"mark  mark"
"colour colour" "colour colour"
"work  work" "work  work"
"last  park"
"stats stats"
"lapse lapse" "lapse lapse"
"photo photo" "photo photo"
"shelf  shelf" "shelf  shelf"
"rip   kinds"
"guide guide"
"sync  sync"
"free  offline"}
}
.tile{position:relative;overflow:hidden;min-width:0;min-height:0;border-radius:var(--radius);background:var(--tile);box-shadow:var(--shadow);
container-type:size;display:flex;flex-direction:column;--pad:clamp(10px,1.45vmin,20px);padding:var(--pad);
transition:translate .5s var(--spring),scale .5s var(--spring),box-shadow .4s var(--ease);
animation:tile-in .9s var(--ease) both;animation-delay:calc(var(--n,0) * 45ms)}
@keyframes tile-in{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
@media (hover:hover){.tile:not(.t-hero):hover{translate:0 -2px;scale:1.012;z-index:2}}
.tile h2,.tile p{margin:0}
.cap-t{position:relative;z-index:3;font-family:var(--display);font-weight:var(--display-w);letter-spacing:-.025em;
font-size:clamp(13px,10.5cqmin,26px);line-height:1.06;color:var(--ink);text-wrap:balance}
.cap-t.big{font-size:clamp(18px,9cqmin,44px);letter-spacing:var(--track);line-height:.98}
.cap-s{position:relative;z-index:3;margin-top:.4em!important;font-size:clamp(11px,6cqmin,15px);line-height:1.3;color:var(--muted);text-wrap:pretty}
.cap-d{display:none!important}
.huge{font-family:var(--display);font-weight:800;letter-spacing:var(--track);line-height:.9;color:var(--ink)}
.grad{background:linear-gradient(120deg,var(--accent) 10%,var(--accent-2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tile>.chart-canvas,.files-art,.pencil-art,.real-art,.photo-art,.sync-art{flex:1;min-height:0;
width:calc(100% + 2 * var(--pad));max-width:none;margin:calc(-1 * var(--pad));margin-bottom:clamp(8px,4.5cqmin,16px)}
.chart-canvas{display:block;width:100%;height:100%;touch-action:none}
.tile-ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.tile-ui *{pointer-events:auto}
.tile-cap{position:relative;z-index:3}
.t-hero{padding:clamp(14px,3.1cqmin,30px);justify-content:flex-start;background:var(--tile);isolation:isolate}
html[data-style="blush"] .t-hero,html[data-style="blush"] .t-shelf:not(.is-detail){background:radial-gradient(110% 80% at 50% 8%,#F6DEDA 0%,#EFD0CB 55%,#E7C1BB 100%)}
html[data-style="studio"] .t-hero,html[data-style="studio"] .t-shelf:not(.is-detail){background:linear-gradient(120deg,#FAF6F1,#EEE3DD)}
html[data-style="night"] .t-hero,html[data-style="night"] .t-shelf:not(.is-detail){background:radial-gradient(90% 70% at 50% 100%,rgba(255,92,138,.22),transparent 70%),#0E0E10}
.hero-thread{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.hero-thread path{fill:none;stroke:var(--thread);stroke-width:2.4;stroke-linecap:round;opacity:.9;
stroke-dasharray:3400;stroke-dashoffset:3400;animation:thread-draw 3.4s .3s var(--ease) forwards;vector-effect:non-scaling-stroke}
html[data-style="studio"] .hero-thread path{opacity:.35}
html[data-style="night"] .hero-thread path{opacity:.7;filter:drop-shadow(0 0 6px rgba(255,92,138,.6))}
@keyframes thread-draw{to{stroke-dashoffset:0}}
.hero-head{position:relative;z-index:3;pointer-events:none}
.hero-head a{pointer-events:auto}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:15px}
.brand{display:flex;align-items:center;gap:.4em;font-family:var(--display);font-weight:700;font-size:clamp(16px,2.9cqw,22px);letter-spacing:-.03em;color:var(--ink);text-decoration:none;transition:transform .25s var(--spring)}
.brand:hover{transform:translateY(-1px)}
.brand:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:10px}
.brand img{width:1.55em;height:1.55em;border-radius:24%;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.t-hero h1{margin:clamp(8px,2.2cqh,16px) 0 0;font-family:var(--display);font-weight:var(--display-w);letter-spacing:var(--track);
font-size:clamp(22px,min(5.8cqw,10cqh),46px);line-height:1.04;color:var(--ink);text-wrap:balance}
.hero-sub{margin:.45em 0 0;font-size:clamp(11px,min(1.9cqw,3.4cqh),16px);color:var(--muted)}
.store{display:block;flex:none;line-height:0;border-radius:10px;transition:transform .3s var(--spring)}
.store:hover{transform:scale(1.05)}
.store img{width:auto;height:clamp(32px,min(6cqw,9cqh),44px)}
html[data-style="night"] .store img{filter:invert(1) hue-rotate(180deg)}
.hero-dev{position:absolute;display:block;transition:transform .35s var(--spring)}
.hero-ipad{width:min(82cqw,175cqh);left:5%;top:37%;transform:rotate(-4deg);z-index:1;animation:float-in 1.2s .25s var(--ease) both}
.hero-iphone{width:min(25cqw,52cqh);right:5%;top:44%;transform:rotate(5deg);z-index:2;animation:float-in 1.2s .45s var(--ease) both}
.hero-ipad:hover{transform:rotate(-4deg) translateY(-4px)}
.hero-iphone:hover{transform:rotate(5deg) translateY(-4px)}
@keyframes float-in{from{opacity:0;translate:0 18%}to{opacity:1;translate:0 0}}
.hw{position:relative;display:block;background:#19191B;border:2px solid #AAA5A0;padding:8px;border-radius:24px;overflow:hidden;
box-shadow:0 2px 0 #777,0 15px 26px rgba(49,36,33,.19)}
.hw img,.hw video{display:block;width:100%;height:auto;border-radius:15px}
.hw picture{display:contents}
.hero-ipad .hw{padding:12px;border-radius:28px}.hero-ipad .hw video{border-radius:16px}
.hero-iphone .hw{padding:5px;border-radius:27px}
.hero-iphone .hw img{border-radius:20px}
.hero-iphone .hw::after{content:"";position:absolute;top:10px;left:34%;width:32%;height:10px;border-radius:20px;background:#151517}
@container (max-aspect-ratio: 1/1){
.hero-ipad{top:45%;left:4%;width:min(72cqw,125cqh)}
.hero-iphone{top:48%;right:5%;width:min(24cqw,40cqh)}
}
@container (min-aspect-ratio: 1/1) and (max-height: 280px){.hero-ipad{top:max(37%,104px)}}
@container (min-aspect-ratio: 1/1){html[lang="uk"] .hero-ipad{top:calc(37% + .6 * clamp(22px,min(5.8cqw,10cqh),46px))}}
@container (min-aspect-ratio: 1/1) and (max-height: 280px){html[lang="uk"] .hero-ipad{top:calc(max(37%,104px) + .6 * clamp(22px,min(5.8cqw,10cqh),46px))}}
@container (max-aspect-ratio: 1/1) and (max-height: 460px){.hero-sub{max-width:70cqw}}
@media (max-width: 620px),(pointer:coarse) and (max-height:500px){.store img{height:40px}.brand{min-height:40px}}
@media (max-width: 620px){
.hw{padding:5px;border-radius:16px}.hw img,.hw video{border-radius:10px}
.hero-ipad .hw{padding:7px;border-radius:18px}.hero-ipad .hw video{border-radius:11px}
.hero-iphone .hw{padding:4px;border-radius:20px}.hero-iphone .hw img{border-radius:15px}
.hero-iphone .hw::after{top:7px;height:7px}
}
.cap{display:inline-flex;align-items:center;gap:1.6cqw;height:6.2cqh;padding:0 1.4cqw;border-radius:99px;background:rgba(255,255,255,.82);
box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#2A2522;font-size:2.4cqh}
.cap.col{flex-direction:column;height:auto;padding:1.4cqh .9cqw;gap:1.8cqh;border-radius:2cqh}
.cap.txt{font-size:2.2cqh;font-weight:500;gap:.8cqw;padding:0 1.4cqw}
.cap-x{width:6.2cqh;padding:0;justify-content:center}
.cap.pct{font-family:'Newsreader',Georgia,serif;font-size:3.6cqh;font-weight:500;padding:0 1.6cqw;font-variant-numeric:tabular-nums}
.disc{display:grid;place-items:center;width:3.4cqh;height:3.4cqh;border-radius:50%;box-shadow:0 0 0 .5px rgba(0,0,0,.18) inset;transition:transform .35s var(--spring)}
.disc.on{transform:scale(1.28);box-shadow:0 0 0 2px #fff,0 0 0 3.5px #2A2522}
.disc canvas{width:70%;height:70%}
.g{display:inline-block;width:2.9cqh;height:2.9cqh;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.g-back{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.g-gear{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.8v2.6M12 18.6v2.6M2.8 12h2.6M18.6 12h2.6M5.5 5.5l1.8 1.8M16.7 16.7l1.8 1.8M5.5 18.5l1.8-1.8M16.7 7.3l1.8-1.8' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='6.6'/%3E%3C/svg%3E")}
.g-eye{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3C/svg%3E")}
.g-hand{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11V4.5a1.5 1.5 0 0 1 3 0V10V3.5a1.5 1.5 0 0 1 3 0V10V5a1.5 1.5 0 0 1 3 0v8.5c0 4.2-2.7 7.5-6.7 7.5-2.4 0-4-1-5.4-3L3.6 13.6a1.6 1.6 0 0 1 2.4-2L9 14z'/%3E%3C/svg%3E")}
.g-erase{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.6 3.4a2 2 0 0 1 2.8 0l3.2 3.2a2 2 0 0 1 0 2.8L11 19H6.4l-3-3a2 2 0 0 1 0-2.8z'/%3E%3Cpath d='M11 20h9' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.g-area{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-dasharray='3.2 2.6' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2.5'/%3E%3C/svg%3E")}
.g-x{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='black' stroke-width='4.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.g-last{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E")}
.g-pin{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h8l-1.4 6.2L18 13H6l3.4-3.8z'/%3E%3Cpath d='M12 13v8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.g-undo{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13L3.5 8.5 8 4'/%3E%3Cpath d='M3.5 8.5H14a6 6 0 0 1 0 12H9'/%3E%3C/svg%3E")}
.g-redo{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 13l4.5-4.5L16 4'/%3E%3Cpath d='M20.5 8.5H10a6 6 0 0 0 0 12h5'/%3E%3C/svg%3E")}
.g-play{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.8v14.4a1 1 0 0 0 1.5.86l11.6-7.2a1 1 0 0 0 0-1.72L8.5 3.94A1 1 0 0 0 7 4.8z'/%3E%3C/svg%3E")}
.t-free{justify-content:center;align-items:flex-start}
.t-free .huge{font-size:clamp(30px,40cqmin,130px);margin-bottom:.08em}
html[lang="uk"] .t-free .huge,html[lang="ru"] .t-free .huge{font-size:clamp(20px,min(22cqmin,19cqw),90px)}
html[lang="uk"] .t-free .huge{font-size:clamp(20px,min(18cqmin,15cqw),80px)}
html[data-style="night"] .t-free .grad{background-image:linear-gradient(120deg,#5BE49B,#5AC8FA)}
.real-art,.photo-art{position:relative;overflow:hidden}
.t-real,.t-photo{padding:0}
.t-real .real-art,.t-photo .photo-art{margin:0;position:absolute;inset:0;width:auto}
.real-photo,.photo-src{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.real-art .chart-canvas,.photo-art .chart-canvas{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--cut,50%)) 0 0)}
.real-handle{position:absolute;z-index:2;top:0;bottom:0;left:var(--cut,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.35)}
.real-handle::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3);
-webkit-mask:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2522' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E");background-size:62%;background-position:center;background-repeat:no-repeat}
.real-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.real-art::after,.photo-art::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(20,10,12,.55),transparent)}
.on-photo{position:absolute;left:clamp(12px,6cqmin,22px);bottom:clamp(12px,6cqmin,22px);z-index:3;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.4);font-size:clamp(16px,8cqmin,34px);letter-spacing:var(--track)}
.photo-tag{position:absolute;z-index:3;top:clamp(10px,4cqmin,16px);padding:.3em .7em;border-radius:99px;font-size:clamp(10px,3.3cqmin,12.5px);font-weight:600;background:rgba(255,255,255,.85);color:#2A2522}
.photo-tag.left{left:clamp(10px,4cqmin,16px)}.photo-tag.right{right:clamp(10px,4cqmin,16px)}
.t-photo .real-handle{left:var(--cut,50%)}
.t-offline{justify-content:flex-end}
@keyframes slash{20%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:62}}
.t-kinds{justify-content:flex-end}
html[data-motion="paused"] *:not(.tile):not(.hero-dev){animation-play-state:paused!important}
html[data-motion="paused"] .hero-thread path{animation:none;stroke-dashoffset:0}
html[data-motion="paused"] .hero-head>*,html[data-motion="paused"] .hero-hoop,html[data-motion="paused"] .hero-pencil{animation:none}
@media (prefers-reduced-motion:reduce){.hero-thread path{stroke-dashoffset:0}.wifi .sf{animation:none}}
.tile::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;
background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 45%)}
html[data-style="night"] .tile::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,120,160,.13),transparent 45%)}
@media (hover:hover){.tile:hover::after{opacity:1}}
.hero-head>*{animation:rise .9s var(--ease) both}
.hero-head>:nth-child(2){animation-delay:.08s}.hero-head>:nth-child(3){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html[data-style="studio"] .t-free .grad{background-image:linear-gradient(100deg,#E2557B 0%,#F29A1F 55%,#7A5AF8 100%)}
html[data-style="studio"] .ring-fg{stroke:#E2557B}
html[data-style="studio"] .bars i{background:#1D1D1F}
html[data-style="studio"] .bars i.today{background:#E2557B}
.bento > .tile .cap-s{display:none}
.bento > .tile:not(.t-hero){cursor:pointer}
.bento > .tile:not(.t-hero):focus-visible{outline:2.5px solid var(--accent);outline-offset:3px}
.tile-open{position:absolute;left:10px;top:10px;z-index:6;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0;white-space:nowrap;
border-radius:999px;background:var(--accent);color:var(--on-accent);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.tile-open:focus-visible{width:auto;height:auto;padding:7px 14px;overflow:visible;clip-path:none;outline:2.5px solid var(--ink);outline-offset:2px}
.tile.is-detail .tile-open{display:none}
.bento > .tile:not(.t-hero):not(.is-live) *{animation-play-state:paused!important}
.bento > .tile .real-range{pointer-events:none}
.tile.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);animation:none;justify-content:flex-end}
.tile.ghost .cap-t{opacity:.5}
.t-hero > .hero-head,.t-hero > .hero-dev,.t-hero > .hero-thread,.t-hero > .hero-pencil,.t-hero > .hero-hoop{transition:opacity .3s var(--ease) .18s,visibility 0s}
.t-hero.showing > .hero-head,.t-hero.showing > .hero-dev,.t-hero.showing > .hero-thread,.t-hero.showing > .hero-pencil,.t-hero.showing > .hero-hoop{opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility 0s .25s}
.hero-detail{position:absolute;inset:0;z-index:6;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:clamp(14px,3cqw,34px);
padding:clamp(16px,3.4cqmin,34px);opacity:0;transition:opacity .16s var(--ease)}
.hero-detail[hidden]{display:none}
.t-hero.showing .hero-detail{opacity:1;transition:opacity .35s var(--ease) .22s}
.detail-copy{align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:.7em;min-width:0}
.detail-title{margin:0;font-family:var(--display);font-weight:var(--display-w);letter-spacing:var(--track);font-size:clamp(28px,min(6.6cqw,11.5cqh),60px);line-height:1.02;color:var(--ink);text-wrap:balance}
.detail-text{margin:0;font-size:clamp(15px,min(2.2cqw,4.2cqh),20px);line-height:1.45;color:var(--ink-2);max-width:38ch;text-wrap:pretty}
.detail-more{font-size:clamp(12px,1.6cqw,14px);font-weight:650;color:var(--accent);text-decoration:none}
.detail-more:hover{text-decoration:underline}
.detail-stage{position:relative;min-width:0;min-height:0}
.detail-stage > .tile{position:absolute;inset:0;width:100%;height:100%;grid-area:auto;animation:none;translate:none;scale:none;
box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 22px 44px -26px rgba(40,10,20,.5)}
.detail-stage > .tile .tile-cap,.detail-stage > .tile > .cap-t,.detail-stage > .tile > .cap-s{display:none}
.detail-close{position:absolute;z-index:8;top:clamp(10px,2.2cqmin,18px);right:clamp(10px,2.2cqmin,18px);width:34px;height:34px;padding:0;border:0;border-radius:50%;
display:grid;place-items:center;cursor:pointer;color:var(--ink);background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
box-shadow:0 0 0 .5px var(--line),0 4px 14px rgba(0,0,0,.12);transition:transform .25s var(--spring)}
.detail-close:hover{transform:scale(1.08)}
.detail-close .sf{width:13px;height:13px}
.detail-close::before{content:"";position:absolute;inset:-6px}
@container (max-aspect-ratio: 1/1){
.hero-detail{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:12px}
.detail-copy{align-self:start;padding-right:40px;gap:.4em}
.detail-title{font-size:clamp(26px,9cqw,40px)}
.detail-more{display:none}
}
.sf{display:inline-block;width:1em;height:1em;background:currentColor}
.sf-xmark{-webkit-mask:url(../img/sf/xmark.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/xmark.png?v=0c75f4391) center/contain no-repeat}
.sf-wifi{-webkit-mask:url(../img/sf/wifi.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/wifi.png?v=0c75f4391) center/contain no-repeat}
.sf-wifi-slash{-webkit-mask:url(../img/sf/wifi-slash.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/wifi-slash.png?v=0c75f4391) center/contain no-repeat}
.wifi{position:relative;flex:1;min-height:0;display:grid;place-items:center;color:var(--pop-3)}
html[data-style="studio"] .wifi{color:var(--accent)}
.wifi .sf{grid-area:1/1;width:min(62cqmin,104px);height:min(62cqmin,104px)}
.wifi .sf-wifi{opacity:0;animation:wifi-on 5s var(--ease) infinite}
.wifi .sf-wifi-slash{animation:wifi-off 5s var(--ease) infinite}
@keyframes wifi-on{0%,45%{opacity:0}55%,78%{opacity:1}88%,100%{opacity:0}}
@keyframes wifi-off{0%,45%{opacity:1;scale:1}55%,78%{opacity:0;scale:.9}88%,100%{opacity:1;scale:1}}
.bento > .t-free{justify-content:center;align-items:center;text-align:center}
.hero-pencil{--ipw:min(82cqw,175cqh);--tx:9%;--ty:70%;position:absolute;z-index:3;
left:calc(var(--tx) - var(--ipw) * .031);top:calc(var(--ty) + var(--ipw) * .2935);
width:calc(var(--ipw) * .59);height:auto;aspect-ratio:166/8.9;max-width:none;object-fit:fill;
transform:translate(-50%,-50%) rotate(96deg);pointer-events:none;
filter:drop-shadow(1.5px -1px 1.5px rgba(0,0,0,.18)) drop-shadow(6px -4px 8px rgba(40,20,30,.22));
animation:float-in 1.2s .35s var(--ease) both}
@container (max-aspect-ratio: 1/1){.hero-pencil{--ipw:min(72cqw,125cqh);--tx:9%;--ty:74%}}
@container (min-aspect-ratio: 1/1) and (max-height: 280px){.hero-pencil{--ty:calc(70% + max(0px, 104px - 37%))}}
@container (min-aspect-ratio: 1/1){html[lang="uk"] .hero-pencil{--ty:calc(70% + .6 * clamp(22px,min(5.8cqw,10cqh),46px))}}
@container (min-aspect-ratio: 1/1) and (max-height: 280px){html[lang="uk"] .hero-pencil{--ty:calc(70% + max(0px, 104px - 37%) + .6 * clamp(22px,min(5.8cqw,10cqh),46px))}}
.park-art{position:absolute;inset:0 0 28% 0;display:flex;align-items:center;justify-content:center}
.sf-pin{-webkit-mask:url(../img/sf/pin-fill.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/pin-fill.png?v=0c75f4391) center/contain no-repeat}
.park-art .pk{display:block;width:min(70cqmin,150px);height:auto;overflow:visible}
.park-art .pk path{fill:none;stroke-linecap:round}
.park-art .pk .pk-te{stroke:rgba(255,255,255,.55);stroke-width:7.2}
.park-art .pk text{font:700 19px var(--text);text-anchor:middle;dominant-baseline:central}
.park-art .pk-hole{fill:rgba(20,18,16,.88)}
html[data-style="night"] .park-art .pk-hole{fill:rgba(255,255,255,.75)}
.park-art .pk-b{transform-box:view-box;transform-origin:70px 92px;animation:pk-park 5.2s var(--ease) infinite}
@keyframes pk-park{0%,6%{scale:.15;opacity:0}12%{opacity:1}20%{scale:1.06}26%{scale:.98}31%,86%{scale:1;opacity:1}94%,100%{scale:.15;opacity:0}}
html[data-motion="paused"] .park-art .pk-b{animation:none}
@media (prefers-reduced-motion:reduce){.park-art .pk-b{animation:none}}
.photo-art .photo-src,.photo-art .photo-stitched{object-position:62% 30%}
.photo-art .photo-stitched{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 var(--cut,52%))}
.photo-art::before{content:"";position:absolute;z-index:2;top:0;bottom:0;left:var(--cut,52%);width:2px;margin-left:-1px;background:rgba(255,255,255,.9);box-shadow:0 0 10px rgba(0,0,0,.35)}
.t-last{padding:0}
.t-last canvas{position:absolute;inset:0;width:100%;height:100%}
.ls-pill{position:absolute;z-index:3;left:var(--pad);bottom:var(--pad);display:inline-flex;align-items:center;gap:.45em;padding:.45em .9em;border-radius:999px;
background:rgba(255,255,255,.9);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 3px 10px rgba(0,0,0,.12);color:#2C2925;font-size:clamp(10px,8cqh,13px);font-weight:600;transition:scale .25s var(--spring)}
.ls-pill.press{scale:.93}
.ls-pill .sf{width:1.05em;height:1.05em}
.sf-viewfinder{-webkit-mask:url(../img/sf/viewfinder.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/viewfinder.png?v=0c75f4391) center/contain no-repeat}
.btn-get{display:inline-flex;align-items:center;gap:.4em;margin-top:.5em;padding:.7em 1.3em;border-radius:999px;background:var(--accent);color:#fff;
font-weight:650;font-size:clamp(13px,1.6cqw,15px);text-decoration:none;transition:transform .25s var(--spring),filter .2s}
.btn-get:hover{transform:scale(1.04);filter:brightness(1.08)}
html[data-style="night"] .btn-get{color:#160A0E}
.t-last .ls-light{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.bento > .tile:not(.t-hero) .cap-t{position:absolute;left:var(--pad);right:var(--pad);top:auto;bottom:var(--pad);z-index:4;max-width:none;margin:0;padding:0;text-align:center;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0;
font-family:var(--display);font-weight:var(--display-w);letter-spacing:-.025em;line-height:1.05;text-wrap:balance;color:var(--ink);
font-size:clamp(15px,min(6.4cqw,11cqh),26px)}
.bento > .tile:not(.t-hero) .tile-cap{position:static;padding:0;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.bento > .tile:not(.t-hero) .tile-cap .cap-s{display:none}
.bento > .t-work::before,.bento > .t-stats::before,.bento > .t-mark::before,.bento > .t-lapse::before,.bento > .t-colour::before{
content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:34%;pointer-events:none;
background:linear-gradient(to top,var(--tile) 18%,color-mix(in srgb,var(--tile) 0%,transparent))}
.bento > .t-colour::before{top:0;bottom:auto;background:linear-gradient(to bottom,var(--tile) 18%,color-mix(in srgb,var(--tile) 0%,transparent))}
.bento > .tile.t-colour .cap-t{top:var(--pad);bottom:auto}
.bento > .tile.t-real .cap-t,.bento > .tile.t-photo .cap-t{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.bento > .tile.t-free .cap-t,.bento > .tile.t-offline .cap-t,.bento > .tile.t-kinds .cap-t,.bento > .tile.t-park .cap-t{font-size:clamp(13px,min(8cqw,11cqh),18px)}
.t-last .ls-icon{position:absolute;inset:0 0 26% 0;display:grid;place-items:center;z-index:2}
.t-last .ls-icon i{width:min(46cqh,30cqw);aspect-ratio:172/160;background:linear-gradient(135deg,#F4B46C,#DE7C3E);
-webkit-mask:url(../img/sf/arrow-uturn-backward.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/arrow-uturn-backward.png?v=0c75f4391) center/contain no-repeat}
.bento > .t-last canvas,.bento > .t-last .ls-pill{display:none}
.detail-stage .t-last .ls-icon{display:none}
.t-rip .ls-icon{position:absolute;inset:0 0 26% 0;display:grid;place-items:center;z-index:2}
.t-rip .rip-icon i{width:min(44cqh,30cqw);aspect-ratio:1;background:linear-gradient(135deg,#F09AA5,#C9506C);
-webkit-mask:url(../img/sf/scissors.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/scissors.png?v=0c75f4391) center/contain no-repeat}
.t-last .ls-icon i{width:min(44cqh,30cqw)}
.bento > .tile{--card-icon:min(38cqmin,64px)}
.bento > .tile.t-last .ls-icon,.bento > .tile.t-rip .ls-icon,.bento > .tile.t-offline .wifi,.bento > .tile.t-park .park-art,.bento > .tile.t-kinds .kinds-art{
position:absolute;inset:0 0 30% 0;display:flex;align-items:center;justify-content:center;margin:0;flex:none}
.bento > .tile.t-last .ls-icon i,.bento > .tile.t-rip .ls-icon i{width:var(--card-icon);height:var(--card-icon);aspect-ratio:auto}
.bento > .tile.t-offline .wifi .sf{width:var(--card-icon);height:var(--card-icon)}
.bento > .tile.t-guide .cap-t{left:58%;right:var(--pad);top:50%;bottom:auto;translate:0 -50%;text-align:center}
.bento > .tile.t-offline .wifi .sf{width:calc(var(--card-icon) * 1.18);height:calc(var(--card-icon) * 1.18)}
.bento > .tile.t-offline .wifi .sf-wifi{display:none}
.bento > .tile.t-offline .wifi .sf-wifi-slash{animation:none;opacity:1;scale:1}
.bento > .tile.t-offline .wifi .sf{width:calc(var(--card-icon) * 1.4);height:calc(var(--card-icon) * 1.4)}
.bento > .tile.t-rip .ls-icon i{width:calc(var(--card-icon) * 1.3);height:calc(var(--card-icon) * 1.3)}
.bento > .tile.t-park .park-art .pk{width:calc(var(--card-icon) * 3);max-width:94%}
.t-free .huge.grad{padding:0 .1em;margin:0 -.1em}
.bento > .tile.t-guide .cap-t{font-size:clamp(17px,min(7cqw,24cqh),30px);line-height:1.05}
.bento > .tile:not(.t-hero) .cap-t{line-height:1.16;padding-bottom:.06em}
.bento > .tile.t-guide .cap-t{line-height:1.12}
.t-last .ls-icon i{-webkit-mask:url(../img/sf/square-dashed.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/square-dashed.png?v=0c75f4391) center/contain no-repeat}
.hero-hoop{--hh-w:min(46cqw,86cqh);--hh-at:70%;--hh-sink:.17;position:absolute;z-index:2;
width:var(--hh-w);left:calc(var(--hh-at) - var(--hh-w) / 2);top:calc(100% - var(--hh-w) * (1 - var(--hh-sink)) * 749 / 720);
aspect-ratio:720/749;rotate:-6deg;pointer-events:none;
filter:drop-shadow(0 14px 22px rgba(70,24,34,.26));animation:float-in 1.2s .35s var(--ease) both;
background:url(../img/hoop.webp?v=0c75f4391) center/contain no-repeat,url(../img/hoop-s.webp?v=0c75f4391) center/contain no-repeat}
.hero-hoop.live{background:none}
.hero-hoop .hh-hit{position:absolute;left:5.4%;top:8.58%;width:89.26%;height:85.8%;border-radius:50%;pointer-events:auto}
.hero-hoop.sewn .hh-hit{cursor:pointer}
html[data-style="night"] .hero-hoop{filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}
.hero-hoop .hh-cv{display:block;width:100%;height:100%}
.hero-ipad{left:-13%}
.hero-iphone{right:-5%;top:40%;z-index:3}
@container (min-aspect-ratio: 1/1){
.hero-ipad,html[lang="uk"] .hero-ipad{top:max(calc(37% + .6 * clamp(22px,min(5.8cqw,10cqh),46px)),calc(var(--head-end,0px) + 10px))}
.t-hero h1{margin-bottom:.16em}
.hero-head .hero-sub{display:inline;margin:0}
}
@container (min-aspect-ratio: 1/1) and (max-height: 280px){
.hero-ipad,html[lang="uk"] .hero-ipad{top:max(calc(max(37%,104px) + .6 * clamp(22px,min(5.8cqw,10cqh),46px)),calc(var(--head-end,0px) + 10px))}
}
@container (min-aspect-ratio: 1/1) and (max-height: 300px){.hero-hoop{--hh-w:min(46cqw,80cqh)}}
@container (min-aspect-ratio: 1/1) and (max-height: 245px){.hero-hoop{--hh-w:min(46cqw,72cqh)}}
@container (max-aspect-ratio: 1/1){
.hero-ipad{left:-16%}
.hero-hoop{--hh-w:min(58cqw,56cqh);--hh-at:50%}
.hero-iphone{right:-7%;top:46%}
}
@media (max-width: 620px){
html[data-style="blush"] body:has(main.bento){background-image:none}
.bento{--hero-h:calc(108vw + 14px);gap:10px;padding:10px;grid-template-rows:var(--hero-h) repeat(3,minmax(150px,46vw)) minmax(120px,38vw) minmax(150px,46vw) repeat(3,minmax(116px,31vw)) minmax(130px,40vw);grid-auto-rows:minmax(150px,46vw);
grid-template-areas:
"hero   hero"
"files  mark"
"colour work"
"photo  lapse"
"shelf  shelf"
"guide  stats"
"last   park"
"rip    kinds"
"offline free"
"sync   sync"}
.t-hero{padding:14px 14px 0}
.hero-top{gap:6px}
.hero-top .menu-btn{order:-1;width:46px;height:46px;margin:0 0 0 -10px}
.hero-top .menu-btn svg{width:26px;height:26px}
.hero-top .brand{margin-right:auto;font-size:clamp(19px,5.6cqw,23px);gap:.5em;min-height:46px}
.hero-top .brand img{width:2em;height:2em;border-radius:23%}
.store img{height:clamp(36px,10.6cqw,44px)}
.t-hero h1{margin-top:12px;font-size:clamp(27px,10cqw,42px);line-height:1.03;letter-spacing:-.05em;white-space:nowrap}
.t-hero .hero-sub{margin-top:.75em;font-size:clamp(17px,5cqw,20px);line-height:1.3;color:var(--ink-2);max-width:none!important}
.hero-ipad{left:5.6cqw;top:auto;bottom:21cqw;width:60cqw}
.hero-iphone{right:6cqw;top:auto;bottom:8cqw;width:23.5cqw}
.hero-hoop{--hh-w:43cqw;left:calc(50% - 15cqw);top:auto;bottom:5.6cqw;width:var(--hh-w);rotate:-5deg}
.hero-thread{display:none}
.hero-dev .hw{isolation:isolate;transform:translateZ(0)}
.hero-ipad .hw{padding:8px;border-radius:21px}
.hero-ipad .hw video{border-radius:11px}
.hero-iphone .hw{padding:4px;border-radius:20px}
.hero-iphone .hw img{border-radius:14px}
.hero-sub[data-app-lang]{margin-top:.2em;font-size:clamp(14px,4cqw,16px)}
.bento:has(.hero-sub[data-app-lang]:not([hidden])){--hero-h:calc(108vw + 40px)}
}
@media (max-width: 620px){
.bento .t-stats .st-stage{font-size:12.5px;height:calc(var(--f) + 3.1em)}
.bento .t-stats .st-cap{white-space:normal;text-wrap:balance;padding:0 2px}
.bento > .tile.t-guide .cap-t{left:var(--pad);right:var(--pad);top:auto;bottom:var(--pad);translate:none;font-size:clamp(15px,min(6.4cqw,11cqh),26px)}
.bento > .t-guide::before{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:42%;pointer-events:none;
background:linear-gradient(to top,var(--tile) 26%,color-mix(in srgb,var(--tile) 0%,transparent))}
.photo-art::before{bottom:24%}
.photo-tag{font-size:13px}
.t-photo .real-handle{bottom:24%}
}
@media (max-width: 620px){
html:has(.t-hero.showing){overflow:hidden}
.t-hero.showing{position:fixed;inset:0;z-index:90;width:auto;height:auto;margin:0;padding:0;border-radius:0;touch-action:none;overscroll-behavior:contain}
.t-hero.showing > .hero-head,.t-hero.showing > .hero-dev,.t-hero.showing > .hero-thread,.t-hero.showing > .hero-pencil,.t-hero.showing > .hero-hoop{transition:none}
.bento .t-hero.showing .hero-detail{padding:max(20px,env(safe-area-inset-top)) 18px calc(90px + env(safe-area-inset-bottom));gap:14px}
.t-hero.showing .detail-copy{padding-right:0;gap:.5em}
.t-hero.showing .detail-title{font-size:clamp(30px,9cqw,40px)}
.t-hero.showing .detail-text{font-size:clamp(16px,4.4cqw,19px);line-height:1.42;max-width:none}
.detail-close{top:auto;right:auto;left:50%;bottom:max(18px,env(safe-area-inset-bottom));margin-left:-28px;width:56px;height:56px}
.detail-close .sf{width:18px;height:18px}
.detail-close::before{inset:-4px}
.t-hero.showing .t-photo.is-detail .photo-seg{top:auto;right:auto;left:50%;translate:-50% 0;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 70px)}
.bento .t-hero.showing[data-detail="photo"] .detail-copy{top:max(24px,env(safe-area-inset-top))}
}
@media (max-width: 359px){
.bento{--hero-h:calc(114vw + 10px)}
.hero-top{gap:2px}
.hero-top .menu-btn{width:44px;height:44px;margin-left:-9px}
.hero-top .store::after{inset:-6px -6px}
.hero-top .brand{font-size:17px;gap:.4em;min-height:40px}
.store img{height:32px}
.t-hero .hero-sub{font-size:15px}
}
@media (max-width: 620px){
.bento > .tile[data-tile]:not(.t-hero) .cap-t{font-size:15.5px;line-height:1.14}
.bento > .tile.t-colour .cap-t{top:auto;bottom:var(--pad)}
.bento > .t-colour::before{display:none}
.bento .t-colour .cl-band{height:calc(var(--strip) + 40px)}
.bento .t-colour .cl-row{bottom:40px}
.bento > .tile.t-lapse:not(.t-hero) .cap-t{left:50%;right:auto;translate:-50% 0;width:max-content;max-width:calc(100% - 2 * var(--pad));
padding:.3em .85em .34em;border-radius:999px;background:var(--glass)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}
.bento > .tile.t-last,.bento > .tile.t-rip,.bento > .tile.t-offline,.bento > .tile.t-park,.bento > .tile.t-kinds{--card-icon:min(46cqmin,62px)}
.bento > .tile.t-last .ls-icon,.bento > .tile.t-rip .ls-icon,.bento > .tile.t-offline .wifi,.bento > .tile.t-park .park-art,.bento > .tile.t-kinds .kinds-art{inset:0 0 38% 0}
.t-kinds .ka-cv{width:min(54cqh,44cqw)}
.bento > .t-shelf .shelf-row{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 99%);mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 99%)}
html body .bento .t-free .huge{font-size:var(--free-fs,min(30cqmin,20cqw));white-space:nowrap;text-align:center;margin:0 -.1em}
.t-hero.showing .dt-free{gap:0}
.t-hero.showing .dt-chips{flex-direction:column;align-items:center;gap:22px}
.t-hero.showing .dt-chip{font-size:22px;padding:.75em 1.4em .75em 1.1em;background:var(--tile);box-shadow:0 0 0 1px var(--line);opacity:calc(1 - .2 * var(--k,0))}
.t-hero.showing .dt-ci{width:1.4em;height:1.4em}
.t-hero.showing .dt-big{display:none}
.t-hero.showing .detail-stage .t-sync.sync-a{--u:.40cqw}
.t-hero.showing .dt-offline canvas{scale:1.17}
.t-hero.showing .detail-stage .files-pages{scale:1.05}
}
.t-work{--kc:.54;--capw:0px;--barfit:1;--barb:8px;
--ink-d:#EDE7DE;--ink-l:#2C2925;--acc-l:#B14A32;--acc-d:#D76E51;
--wa-sans:-apple-system,BlinkMacSystemFont,'SF Pro Text',var(--text);
--wa-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace}
.t-work>.chart-canvas{margin-bottom:calc(-1 * var(--pad));touch-action:auto}
.t-work.is-detail>.chart-canvas{touch-action:none;cursor:crosshair}
.t-work .tile-ui,.t-work .tile-ui *{pointer-events:none}
.t-work:not(.is-detail) :is(.wa-door,.wa-toastbox,.wa-bar,.wa-look){display:none}
.t-work.is-detail.wa-on:not(.wa-locked) :is(.wa-grip,.wa-move),
.t-work.is-detail.wa-on .wa-bar :is(.wa-count,.wa-out,.wa-lock,.wa-reset),
.t-work.is-detail.wa-look-open .wa-look,.t-work.is-detail.wa-look-open .wa-look *,
.t-work.is-detail .wa-door{pointer-events:auto;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.t-work.is-detail .wa-look .wa-track{touch-action:pan-y}
:where(.t-work .tile-ui button){appearance:none;-webkit-appearance:none;margin:0;border:0;padding:0;background:none;font:inherit;color:inherit;text-align:inherit}
.t-work .tile-ui button:focus-visible{outline:2px solid var(--acc-l);outline-offset:2px}
.t-work .wa-bar button{position:relative}
.t-work .wa-bar button::after{content:'';position:absolute;inset:-9px -5px}
.wa-sf{display:block;flex:none;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.wa-sf-rect{width:max(14px,calc(var(--kc) * 28.3px));aspect-ratio:204/158;-webkit-mask-image:url(../img/sf/rectangle-dashed.png?v=0c75f4391);mask-image:url(../img/sf/rectangle-dashed.png?v=0c75f4391)}
.wa-sf-draw{width:max(11px,calc(var(--kc) * 24px));aspect-ratio:1;-webkit-mask-image:url(../img/sf/hand-draw-fill.png?v=0c75f4391);mask-image:url(../img/sf/hand-draw-fill.png?v=0c75f4391)}
.wa-sf-move{width:max(10px,calc(var(--kc) * 24px));aspect-ratio:1;-webkit-mask-image:url(../img/sf/arrow-up-and-down-and-arrow-left-and-right.png?v=0c75f4391);mask-image:url(../img/sf/arrow-up-and-down-and-arrow-left-and-right.png?v=0c75f4391)}
.wa-sf-square{width:max(10px,calc(var(--kc) * 19px));aspect-ratio:170/160;-webkit-mask-image:url(../img/sf/square-dashed.png?v=0c75f4391);mask-image:url(../img/sf/square-dashed.png?v=0c75f4391)}
.wa-sf-lock{width:max(11px,calc(var(--kc) * 22px));aspect-ratio:184/168;-webkit-mask-image:url(../img/sf/lock-open.png?v=0c75f4391);mask-image:url(../img/sf/lock-open.png?v=0c75f4391)}
.t-work.wa-locked .wa-lock{color:var(--acc-d)}
.t-work.wa-locked .wa-sf-lock{width:max(8.5px,calc(var(--kc) * 17px));aspect-ratio:142/168;-webkit-mask-image:url(../img/sf/lock-fill.png?v=0c75f4391);mask-image:url(../img/sf/lock-fill.png?v=0c75f4391)}
.t-work .tile-ui{overflow:hidden;font-family:var(--wa-sans)}
.wa-door{position:absolute;top:8px;left:10px;width:calc(var(--kc) * 44px);height:calc(var(--kc) * 44px);min-width:22px;min-height:22px;
border-radius:50%;display:grid;place-items:center;color:var(--ink-l);background:rgba(253,250,245,.94);
box-shadow:0 0 0 .5px rgba(60,40,20,.12),0 2px 8px rgba(40,30,20,.16);transition:background .25s ease,color .25s ease}
.t-work.wa-dark .wa-door{background:rgba(48,46,43,.82);color:var(--ink-d);box-shadow:0 0 0 .5px rgba(255,255,255,.14)}
.t-work.wa-door-on .wa-door{color:var(--acc-l)}
.t-work.wa-door-on .wa-door .wa-sf{filter:drop-shadow(.3px 0 0 currentColor)}
.t-work.wa-dark.wa-door-on .wa-door{color:var(--acc-d)}
.wa-toastbox{position:absolute;top:10px;left:calc(var(--capw) + max(22px,var(--kc) * 44px) + 20px);right:calc(max(22px,var(--kc) * 44px) + 20px);display:flex;justify-content:center}
.wa-toast{display:inline-flex;align-items:center;gap:calc(var(--kc) * 9px);max-width:100%;padding:calc(var(--kc) * 11px) calc(var(--kc) * 18px);
border-radius:calc(var(--kc) * 24px);background:rgba(24,23,21,.9);color:#fff;
box-shadow:0 4px 16px rgba(0,0,0,.28),inset 0 0 0 .5px rgba(255,255,255,.12);
font:600 max(9.5px,calc(var(--kc) * 14px))/1.22 var(--wa-sans);font-variant-numeric:tabular-nums;
opacity:0;translate:0 -7px;scale:.96;transition:opacity .25s ease,translate .35s var(--spring),scale .35s var(--spring)}
.wa-toast .wa-sf{opacity:.92}
.wa-toast span{min-width:0}
.t-work.wa-toast-on .wa-toast{opacity:1;translate:0 0;scale:1}
.wa-h{position:absolute;display:block;opacity:0;scale:.78;
transition:opacity .3s ease,scale .5s var(--spring)}
.t-work.wa-on .wa-h{opacity:1;scale:1}
.t-work.wa-on.wa-locked .wa-h,.t-work.wa-on .wa-num.wa-gone{opacity:0;scale:.78}
.t-work.wa-on .wa-move{transition-delay:.12s}.t-work.wa-on .wa-num{transition-delay:.1s}
.wa-corner{width:0;height:0;overflow:visible}
.wa-corner svg{display:block;position:absolute;left:0;top:0;width:2px;height:2px;max-width:none;overflow:visible;transform:scale(var(--kc));transform-origin:0 0}
.wa-corner path{fill:none;stroke-linecap:round}
.wa-corner .o{stroke:rgba(237,231,222,.38)}
.wa-corner .i{stroke:rgba(26,25,23,.94)}
.wa-corner.tl{left:var(--al);top:var(--at)}
.wa-corner.tr{left:var(--ar);top:var(--at)}
.wa-corner.bl{left:var(--al);top:var(--ab)}
.wa-corner.br{left:var(--ar);top:var(--ab)}
.wa-grip{position:absolute;display:block;left:calc(var(--gx,0) * var(--kc) * 1px);top:calc(var(--gy,0) * var(--kc) * 1px);
width:max(38px,calc(var(--kc) * 48px));height:max(38px,calc(var(--kc) * 48px));translate:-50% -50%;border-radius:50%}
.wa-corner:is(.tl,.br) .wa-grip{cursor:nwse-resize!important}
.wa-corner:is(.tr,.bl) .wa-grip{cursor:nesw-resize!important}
.wa-move{left:calc(var(--anx,var(--acx)) + var(--kc) * 44px);top:calc(var(--at) - var(--kc) * 48px);width:calc(var(--kc) * 36px);height:calc(var(--kc) * 36px);translate:-50% -50%;
min-width:18px;min-height:18px;border-radius:50%;display:grid;place-items:center;color:var(--ink-d);background:rgba(34,32,29,.82);
box-shadow:inset 0 0 0 max(.75px,calc(var(--kc) * 1px)) rgba(237,231,222,.34),0 2px 8px rgba(0,0,0,.3);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wa-move::after{content:'';position:absolute;inset:-10px;border-radius:50%}
.t-work.is-detail .wa-move{cursor:move!important}
.t-work.wa-moving .wa-move{scale:1.12}
.wa-num{color:#241F1B;font:600 max(10px,calc(var(--kc) * 24px))/1 var(--wa-mono);letter-spacing:-.02em;white-space:nowrap;
text-shadow:0 0 2px rgba(255,251,248,.98),0 0 4px rgba(255,251,248,.95),0 0 8px rgba(255,251,248,.85),0 0 14px rgba(255,251,248,.6);
transform:scale(var(--pn,1))}
.t-work.wa-dark .wa-num{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.wa-num.t{left:var(--anx,var(--acx));top:calc(var(--at) - var(--kc) * 48px);translate:-50% -50%}
.wa-num.l{left:calc(var(--al) - var(--kc) * 48px);top:var(--any,var(--acy));translate:-50% -50%}
.wa-bar{position:absolute;right:10px;bottom:var(--barb);height:calc(var(--kc) * 44px);min-height:22px;
display:flex;align-items:center;gap:calc(var(--kc) * 10px);padding:0 calc(var(--kc) * 5px) 0 calc(var(--kc) * 15px);
border-radius:99px;color:var(--ink-d);background:rgba(46,44,41,.78);white-space:nowrap;
-webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5);
box-shadow:inset 0 0 0 .75px rgba(255,255,255,.16),0 6px 20px rgba(0,0,0,.36);
font:500 max(9px,calc(var(--kc) * 13px))/1 var(--wa-sans);
transform:scale(var(--barfit));transform-origin:100% 100%;
opacity:0;translate:0 12px;transition:opacity .3s ease .12s,translate .5s var(--spring) .12s}
.t-work.wa-on .wa-bar{opacity:1;translate:0 0}
.wa-count{display:inline-flex;align-items:center;gap:calc(var(--kc) * 6px);font-variant-numeric:tabular-nums;font-weight:500;
transform-origin:0 50%;transition:scale .12s ease}
.t-work.wa-press .wa-count{scale:.93}
.wa-sep{flex:none;width:1px;height:calc(var(--kc) * 22px);background:rgba(237,231,222,.2)}
.wa-out{display:inline-flex;align-items:center;gap:calc(var(--kc) * 7px);font-size:max(9.5px,calc(var(--kc) * 15px));font-weight:500}
.wa-dot{flex:none;width:max(11px,calc(var(--kc) * 26px));height:max(11px,calc(var(--kc) * 26px));border-radius:50%;background:var(--wa-oc,#000);
box-shadow:inset 0 0 0 max(.75px,calc(var(--kc) * 1px)) rgba(237,231,222,.34)}
.wa-reset{height:calc(var(--kc) * 32px);min-height:16px;padding:0 calc(var(--kc) * 13px);display:inline-grid;place-items:center;
border-radius:99px;background:rgba(237,231,222,.1);font-size:max(9.5px,calc(var(--kc) * 15px));font-weight:600}
.wa-look{position:absolute;right:10px;bottom:calc(var(--barb) + max(22px,var(--kc) * 44px) + 10px);width:min(250px,calc(100% - 20px));
display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px 10px;padding:12px 12px 12px 14px;
border-radius:18px;color:var(--ink-d);background:rgba(46,44,41,.9);white-space:nowrap;
-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5);
box-shadow:inset 0 0 0 .75px rgba(255,255,255,.16),0 10px 28px rgba(0,0,0,.34);
font:500 14px/1.2 var(--wa-sans);
opacity:0;visibility:hidden;translate:0 8px;scale:.97;transform-origin:100% 100%;
transition:opacity .2s ease,translate .3s var(--spring),scale .3s var(--spring),visibility 0s linear .3s}
.t-work.wa-look-open .wa-look{opacity:1;visibility:visible;translate:0 0;scale:1;transition-delay:0s}
.wa-well{width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;
box-shadow:inset 0 0 0 1px rgba(237,231,222,.34);overflow:hidden}
.wa-well::-webkit-color-swatch-wrapper{padding:0}
.wa-well::-webkit-color-swatch{border:0;border-radius:50%}
.wa-well::-moz-color-swatch{border:0;border-radius:50%}
.wa-track{width:100%;margin:0;accent-color:var(--acc-d);cursor:pointer}
.wa-pct{min-width:3.4em;text-align:right;font:500 13px/1 var(--wa-mono);color:rgba(237,231,222,.72)}
.t-work.wa-still *{transition:none!important}
@property --wa-cap{syntax:'<color>';inherits:true;initial-value:#FBF4F0}
.bento > .tile.t-work{--wa-cap:var(--tile);transition:--wa-cap .5s var(--ease)}
.bento > .tile.t-work.wa-shade{--wa-cap:#EFD0CB}
html[data-style="night"] .bento > .tile.t-work.wa-shade{--wa-cap:#0E0E10}
.bento > .tile.t-work::before{background:linear-gradient(to top,var(--wa-cap) 18%,color-mix(in srgb,var(--wa-cap) 0%,transparent))}
.bento > .tile.t-work .cap-t{transition:color .5s var(--ease)}
.tile.t-stats{padding:0}
.t-stats .tile-ui,.t-stats .tile-ui *{pointer-events:none}
.t-stats .tile-ui{overflow:hidden;font-family:var(--text);font-variant-numeric:tabular-nums}
.t-stats canvas{display:block;width:100%}
.t-stats .st-mini{--f:clamp(28px,29cqh,52px);position:absolute;left:var(--pad);right:var(--pad);top:0;bottom:28%;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--f) * .24)}
.t-stats .st-stage{position:relative;align-self:stretch;height:calc(var(--f) + 1.5em);font-size:max(11.5px,calc(var(--f) * .32))}
.t-stats .st-item{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.35em;opacity:0;will-change:transform,opacity}
.t-stats .st-fig{--fit:1;display:flex;align-items:baseline;justify-content:center;gap:.16em;white-space:nowrap;
font:var(--display-w) var(--f)/1 var(--display);letter-spacing:-.045em;color:var(--ink);transform:scale(var(--fit));transform-origin:50% 60%}
.t-stats .st-fig b{font-weight:inherit}
.t-stats .st-fig b.mo{font-size:.84em}
.t-stats .st-fig u + b{margin-left:.1em}
.t-stats .st-fig u.ap + b{margin-left:0}
.t-stats .st-fig u{text-decoration:none;font:600 .36em/1 var(--text);letter-spacing:0;color:var(--muted)}
.t-stats .st-fig u.pc{font:700 .5em/1 var(--display);margin-left:-.04em}
.t-stats .st-fig u.ap{margin-right:-.06em;font-size:.5em}
.t-stats .st-cap{font:600 1em/1.2 var(--text);color:var(--muted);white-space:nowrap;text-align:center}
.t-stats .st-pager{display:flex;align-items:center;gap:5px;height:4px}
.t-stats .st-seg{position:relative;display:block;width:6px;height:4px;border-radius:99px;background:color-mix(in srgb,var(--muted) 26%,transparent)}
.t-stats .st-seg::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);opacity:var(--a,0)}
.t-stats:not(.is-detail) .st-panel{display:none}
.t-stats.is-detail .st-mini{display:none}
.t-stats .st-wayrow{position:relative;padding-bottom:1.45em}
.t-stats .st-lab{position:absolute;bottom:0;white-space:nowrap;color:var(--muted)}
.t-stats .st-l-today{left:0;transform:translateX(-50%)}
.t-stats .st-l-fin{right:0;color:var(--ink);font-weight:700}
.t-stats .st-panel{--f:clamp(12px,3.5cqw,15px);position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:none;font-size:var(--f);line-height:1.3;color:var(--ink);outline:0}
.t-stats .st-panel::-webkit-scrollbar{display:none}
.t-stats.is-detail .st-panel,.t-stats.is-detail .st-panel *{pointer-events:auto}
.t-stats.is-detail .st-panel{touch-action:pan-y;-webkit-overflow-scrolling:touch}
.t-stats .st-sheet{padding:1.15em 1.1em 1.4em}
.t-stats .st-panel canvas{pointer-events:none}
.t-stats .st-head{padding-right:2.4em}
.t-stats .st-big{display:flex;align-items:baseline;gap:.12em;font:800 3.1em/1 var(--display);letter-spacing:-.05em}
.t-stats .st-big i{font-style:normal;font-weight:700;font-size:.42em;letter-spacing:0;color:var(--muted)}
.t-stats .st-of{margin:.35em 0 0;font-size:1em;color:var(--muted);font-weight:500}
.t-stats .st-barrow{display:flex;align-items:center;gap:.8em;margin-top:.7em;margin-right:-2.4em}
.t-stats .st-bar{position:relative;flex:1;height:.8em;border-radius:99px;background:color-mix(in srgb,var(--muted) 16%,transparent);overflow:hidden}
.t-stats .st-bar i{position:absolute;left:0;top:0;bottom:0;width:0;min-width:.8em;border-radius:99px;background:var(--accent)}
.t-stats .st-left{flex:none;font-weight:700;font-size:.98em;color:var(--ink);white-space:nowrap}
.t-stats .st-started{margin:.55em 0 0;font-size:.9em;color:var(--muted);font-weight:500}
.t-stats .st-h{margin:1.45em .15em .5em;font:700 1.08em/1.15 var(--text);letter-spacing:0;color:var(--muted)}
.t-stats .st-card{background:var(--tile-2);border-radius:1em;padding:.8em 1em;box-shadow:0 0 0 .5px var(--line)}
.t-stats .st-todayrow{display:flex;align-items:center;gap:.85em}
.t-stats .st-ring{flex:none;width:44px;height:44px}
.t-stats .st-n{font:800 2.05em/1 var(--display);letter-spacing:-.04em;min-width:1.1em}
.t-stats .st-tof{color:var(--muted);font-size:1.05em;font-weight:500}
.t-stats .st-sep{height:1px;background:var(--line);margin:.8em -1em .7em 0}
.t-stats .st-kv{display:flex;justify-content:space-between;align-items:baseline;gap:1em;font-size:1em}
.t-stats .st-kv span{font-weight:600}
.t-stats .st-kv b{font-weight:600;color:var(--muted)}
.t-stats .st-fig3>div{opacity:var(--o,1);transform:translateY(calc((1 - var(--o,1)) * 6px))}
.t-stats .st-fig3{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:.5em}
.t-stats .st-fig3 small{display:block;font-size:.86em;font-weight:500;color:var(--muted);line-height:1.2;margin-bottom:.3em}
.t-stats .st-fig3 b{display:block;font:800 1.32em/1.1 var(--display);letter-spacing:-.035em;white-space:nowrap}
.t-stats .st-fig3 b .u{font:600 .62em/1 var(--text);letter-spacing:0;color:var(--muted)}
.t-stats .st-sent{margin:0 0 .35em;font-size:1.02em;line-height:1.38;color:var(--ink);text-wrap:pretty}
.t-stats .st-card .st-wayrow{font-size:.84em;padding-bottom:1.45em}
.t-stats .st-card .st-l-fin{right:auto}
.t-stats .st-grid{margin:0 auto;cursor:default}
.t-stats .st-key{display:flex;align-items:center;flex-wrap:wrap;gap:.35em .45em;margin:.7em 0 0;font-size:.84em;color:var(--muted)}
.t-stats .st-key span{margin-right:.7em}
.t-stats .st-key .sw{display:inline-block;width:.9em;height:.9em;border-radius:.24em;background:var(--accent)}
.t-stats .st-key .sw.s1{opacity:.34;margin-right:-.15em}.t-stats .st-key .sw.s2{opacity:.52;margin-right:-.15em}.t-stats .st-key .sw.s4{margin-right:.15em}
.t-stats .st-key .sw.s0{background:color-mix(in srgb,var(--muted) 20%,transparent)}
.t-stats .st-key .sw.today{background:none;box-shadow:inset 0 0 0 1.6px var(--ink)}
.t-stats .st-sum{margin:.5em 0 0;font-size:.98em;font-weight:600}
.t-stats .st-fold{display:flex;align-items:center;gap:.45em;cursor:pointer;user-select:none;-webkit-user-select:none}
.t-stats .st-chev{flex:none;width:.78em;height:.78em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transition:transform .25s}
.t-stats .st-fold.shut .st-chev{transform:none}
.t-stats .st-hist.shut{display:none}
.t-stats .st-pill{display:flex;align-items:center;justify-content:center;gap:.55em;height:2.9em;margin:0 0 .55em;border-radius:99px;background:var(--tile-2);
box-shadow:0 0 0 .5px var(--line);font-weight:600;color:var(--ink)}
.t-stats .st-pill svg{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.t-stats .st-week{margin-bottom:.8em;padding:0 1em}
.t-stats .st-wk{display:flex;justify-content:space-between;align-items:baseline;gap:.8em;padding:.85em 0 .8em;border-bottom:1px solid var(--line)}
.t-stats .st-wk b{font:700 1.06em/1.2 var(--text)}
.t-stats .st-wk span{font-size:.86em;color:var(--muted);text-align:right}
.t-stats .st-day{padding:.8em 0 .85em}
.t-stats .st-day + .st-day{border-top:1px solid var(--line)}
.t-stats .st-dh{margin:0;font-weight:500;line-height:1.3}
.t-stats .st-dn{margin:.15em 0 0;font-size:.86em;color:var(--muted)}
.t-stats .st-strip{display:flex;gap:.7em;margin-top:.75em}
.t-stats .st-ph{flex:none;width:5.6em;margin:0;text-align:center;opacity:var(--o,1);transform:translateY(calc((1 - var(--o,1)) * 8px)) scale(calc(.94 + .06 * var(--o,1)))}
.t-stats .st-ph canvas{width:100%;aspect-ratio:1;border-radius:.7em;background:color-mix(in srgb,var(--muted) 14%,transparent)}
.t-stats .st-ph b{display:block;margin-top:.45em;font:700 .92em/1.2 var(--display);letter-spacing:-.01em;white-space:nowrap}
.t-stats .st-ph small{display:block;font-size:.8em;line-height:1.2;color:var(--muted);white-space:nowrap}
@container (max-width:380px){.t-stats .st-fig3 b{font-size:1.12em}.t-stats .st-fig3 small{font-size:.8em}}
@media (prefers-reduced-motion:reduce){.t-stats .st-panel{scroll-behavior:auto}}
.t-colour .tile-ui{
--d:clamp(36px,min(13.2cqw,18.8cqh),58px);
--strip:calc(var(--d) * 1.43);
--app-ink:#2C2925;
--glass-app:rgba(255,252,252,.92);
font-family:var(--text);
}
.tile.t-colour>.chart-canvas{position:absolute;inset:0;flex:none;width:100%;height:100%;margin:0;touch-action:pan-y;cursor:default}
.t-colour .cl-band{position:absolute;left:0;right:0;bottom:0;height:var(--strip);background:rgba(255,251,252,.94);
-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
box-shadow:0 -1px 0 rgba(110,40,60,.08),0 -10px 22px -12px rgba(90,30,50,.26)}
.t-colour .cl-row{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch}
.t-colour .cl-row::-webkit-scrollbar{display:none}
.t-colour .cl-track{display:flex;align-items:center;height:100%;width:max-content;padding:0 calc(var(--d) * .5)}
.t-colour .cl-disc{position:relative;flex:none;width:var(--d);height:var(--d);margin:0 0 0 calc(var(--d) * -.17);padding:0;border:0;
border-radius:50%;background:none;cursor:pointer;color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;
scale:var(--es,1);opacity:var(--eo,1);
transition:margin .22s var(--spring)}
.t-colour .cl-disc:first-child{margin-left:0}
.t-colour .cl-disc:focus-visible{outline:2.5px solid var(--app-accent,#B14A32);outline-offset:3px;border-radius:50%}
.t-colour .cl-face{position:absolute;inset:0;display:block;border-radius:50%;background:var(--c);
box-shadow:0 calc(var(--d) * .038) calc(var(--d) * .075) rgba(0,0,0,.2);
scale:calc(var(--pk,1) * var(--pr,1));opacity:var(--fo,1);
transition:scale .22s var(--spring),opacity .22s var(--ease)}
.t-colour .cl-face.lite{box-shadow:inset 0 0 0 .5px rgba(0,0,0,.3),0 calc(var(--d) * .038) calc(var(--d) * .075) rgba(0,0,0,.2)}
.t-colour .cl-face canvas{display:block;width:100%;height:100%;border-radius:50%}
.t-colour .cl-badge{position:absolute;right:calc(var(--d) * -.03);bottom:calc(var(--d) * -.03);width:calc(var(--d) * .33);height:calc(var(--d) * .33);
border-radius:50%;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.14),0 1px 2px rgba(0,0,0,.25)}
.t-colour .cl-badge svg{display:block;width:100%;height:100%}
.t-colour .cl-disc.is-pick{z-index:2;--pk:1.15;margin-left:calc(var(--d) * .113);margin-right:calc(var(--d) * .283)}
.t-colour .cl-disc.is-pick:first-child{margin-left:calc(var(--d) * .283)}
.t-colour .cl-disc::before{content:"";position:absolute;left:50%;top:calc(var(--d) * -.215);width:calc(var(--d) * .57);height:calc(var(--d) * .06);
border-radius:99px;background:#B14A32;translate:-50% 0;scale:.3 1;opacity:0;transition:scale .22s var(--spring),opacity .16s linear}
.t-colour .cl-disc.is-pick::before{scale:1;opacity:1}
.t-colour .cl-row.has-pick .cl-disc:not(.is-pick){--fo:.7}
.t-colour .cl-disc.is-press,.t-colour .cl-disc:active{--pr:.9}
.t-colour .cl-row .cl-disc.is-press,.t-colour .cl-row .cl-disc:active{--fo:.78!important}
.t-colour .cl-pop{position:absolute;left:0;right:0;bottom:calc(var(--strip) + var(--d) * .15);display:flex;justify-content:center;pointer-events:none;
opacity:0;visibility:hidden;scale:.86;translate:0 calc(var(--d) * .25);transform-origin:50% 100%;
transition:opacity .2s var(--ease),scale .3s var(--spring),translate .3s var(--spring),visibility 0s .3s}
.t-colour .cl-pop.on{opacity:1;visibility:visible;scale:1;translate:0 0;transition-delay:0s}
.t-colour .cl-walk{pointer-events:auto;display:flex;align-items:center;height:calc(var(--d) * .84);padding:0 calc(var(--d) * .08);border-radius:99px;
background:var(--glass-app);color:var(--app-ink);font-size:max(12px,calc(var(--d) * .3));font-weight:600;line-height:1;
-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
box-shadow:0 0 0 .5px rgba(70,45,25,.1),0 3px 12px -2px rgba(50,30,15,.22)}
.t-colour .cw-b{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(var(--d) * .14);height:100%;min-width:calc(var(--d) * .7);
padding:0 calc(var(--d) * .14);border:0;border-radius:99px;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:scale .22s var(--spring),opacity .22s var(--ease)}
.t-colour .cw-play{padding:0 calc(var(--d) * .26) 0 calc(var(--d) * .2)}
.t-colour .cw-b::after{content:"";position:absolute;inset:-5px 0}
.t-colour .cw-b i{display:block;flex:none;width:calc(var(--d) * .26);height:calc(var(--d) * .26);background:var(--app-ink);
-webkit-mask:var(--sf) center/contain no-repeat;mask:var(--sf) center/contain no-repeat}
.t-colour .cw-play i{--sf:url(../img/sf/play-fill.png?v=0c75f4391)}
.t-colour .cw-prev i{--sf:url(../img/sf/chevron-left.png?v=0c75f4391);width:calc(var(--d) * .2)}
.t-colour .cw-next i{--sf:url(../img/sf/chevron-right.png?v=0c75f4391);width:calc(var(--d) * .2)}
.t-colour .cw-stop i{--sf:url(../img/sf/stop-fill.png?v=0c75f4391);width:calc(var(--d) * .22);height:calc(var(--d) * .22)}
.t-colour .cw-at{min-width:4.2ch;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-colour .cl-walk[data-state="ready"] :is(.cw-prev,.cw-at,.cw-next,.cw-stop),.t-colour .cl-walk[data-state="walk"] .cw-play{display:none}
.t-colour .cw-b.is-press,.t-colour .cw-b:active{scale:.88;opacity:.7}
.t-colour .cw-b:focus-visible{outline:2.5px solid #B14A32;outline-offset:-2px}
.t-colour.is-detail .cl-band{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.t-colour:not(.is-detail) .tile-ui,.t-colour:not(.is-detail) .tile-ui *{pointer-events:none}
.t-colour:not(.is-detail)>.chart-canvas{touch-action:auto}
.t-colour:not(.is-detail) .cl-pop{display:none}
.t-colour:not(.is-detail) .cl-row{overflow:hidden;touch-action:auto}
.t-colour:not(.is-detail) .cl-face,.t-colour:not(.is-detail) .cl-disc{transition-duration:.55s}
.t-colour:not(.is-detail) .cl-disc::before{transition-duration:.55s,.4s}
.t-colour.is-detail .tile-cap{display:none}
html[data-style="night"] .t-colour .tile-ui{--glass-app:rgba(38,33,37,.92);--app-ink:#F3ECEE}
html[data-style="night"] .t-colour:not(.is-detail) .cl-band{background:rgba(26,22,25,.9);box-shadow:0 -1px 0 rgba(255,255,255,.06),0 -10px 22px -12px rgba(0,0,0,.6)}
html[data-style="night"] .t-colour .cw-b i{background:#F3ECEE}
@media (prefers-reduced-motion:reduce){.t-colour *{transition:none!important;animation:none!important}}
html[data-motion="paused"] .t-colour *{transition:none!important;animation:none!important}
.tile.t-mark{padding:0}
.tile.t-mark>.chart-canvas{position:absolute;inset:0;width:100%;height:100%;margin:0;flex:none;cursor:pointer;touch-action:auto}
.tile.t-mark.is-detail>.chart-canvas{touch-action:pan-y;cursor:grab}
.tile.t-mark.is-detail>.chart-canvas:active{cursor:grabbing}
.t-mark .tile-ui{--u:.8px;--cr:260px;--ct:10px;--gl:280px;--mk-acc:#AD4830;user-select:none;-webkit-user-select:none;
font-family:system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;
--sp:cubic-bezier(.3,1.2,.5,1);--sp2:cubic-bezier(.3,1.4,.5,1)}
@supports (transition-timing-function:linear(0,1)){
.t-mark .tile-ui{
--sp:linear(0,.0684,.2185,.3923,.5569,.6965,.8059,.8863,.9419,.9777,.9989,1.01,1.0145,1.015,1.0135,1.011,1.0084,1.006,1.004,1.0025,1.0014,1.0007,1.0002,.9999,1);
--sp2:linear(0,.0867,.2783,.4971,.6964,.8536,.9629,1.0287,1.0602,1.0681,1.0616,1.0484,1.0335,1.02,1.0095,1.0022,.9979,.9958,.9954,.9958,.9968,.9978,.9987,.9994,1);
}
}
.t-mark .mk-sf{display:block;flex:none;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.t-mark .mk-sf-look{width:calc(23.9 * var(--u));height:calc(25 * var(--u));-webkit-mask-image:url(../img/sf/hand-raised-fill.png?v=0c75f4391);mask-image:url(../img/sf/hand-raised-fill.png?v=0c75f4391)}
.t-mark .mk-sf-mark{width:calc(26.1 * var(--u));height:calc(26.1 * var(--u));-webkit-mask-image:url(../img/sf/hand-draw-fill.png?v=0c75f4391);mask-image:url(../img/sf/hand-draw-fill.png?v=0c75f4391)}
.t-mark .mk-sf-erase{width:calc(24.2 * var(--u));height:calc(24.2 * var(--u));-webkit-mask-image:url(../img/sf/eraser-fill.png?v=0c75f4391);mask-image:url(../img/sf/eraser-fill.png?v=0c75f4391)}
.t-mark .mk-sf-thumb{width:calc(22.3 * var(--u));height:calc(22.5 * var(--u));-webkit-mask-image:url(../img/sf/hand-thumbsup-fill.png?v=0c75f4391);mask-image:url(../img/sf/hand-thumbsup-fill.png?v=0c75f4391)}
.t-mark .mk-sf-x{width:calc(20.1 * var(--u));height:calc(20.1 * var(--u));color:#C4C2C1;-webkit-mask-image:url(../img/sf/xmark-circle-fill.png?v=0c75f4391);mask-image:url(../img/sf/xmark-circle-fill.png?v=0c75f4391)}
.t-mark .mk-ic{display:grid;place-items:center;transition:transform .34s var(--sp2),opacity .2s}
.t-mark .mk-tb{position:absolute;left:calc(var(--cr) - 162 * var(--u));top:var(--ct);width:calc(162 * var(--u));height:calc(44 * var(--u));--k:0;
-webkit-tap-highlight-color:transparent}
.t-mark .mk-tb-bar{position:absolute;right:0;top:0;height:100%;width:calc(162 * var(--u));border-radius:99px;
background:rgba(255,252,252,.95);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
box-shadow:0 0 0 .5px rgba(110,50,64,.12),0 1px 0 rgba(255,255,255,.9) inset,0 10px 22px -10px rgba(90,30,50,.4);
transition:width .6s var(--sp)}
.t-mark .mk-tb[data-pend] .mk-tb-bar{width:calc(var(--pw, 66px) + 44 * var(--u))}
.t-mark .mk-tb-sel{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;border-radius:99px;
right:calc((2 - var(--k)) * 54 * var(--u));width:calc(54 * var(--u));background:#B14A32;
transition:right .6s var(--sp),width .6s var(--sp),background-color .1s ease,transform .2s var(--sp2)}
.t-mark .mk-tb[data-pend] .mk-tb-sel{right:calc(44 * var(--u));width:var(--pw, 66px);background:#84CC16}
.t-mark .mk-tb-sel.is-down{transform:scale(.95)}
.t-mark .mk-tb-pend{display:flex;align-items:center;gap:calc(6 * var(--u));white-space:nowrap;color:#004100;opacity:0;transition:opacity .12s}
.t-mark .mk-tb[data-pend] .mk-tb-pend{opacity:1;transition:opacity .2s .14s}
.t-mark .mk-tb-pend .mk-sf{flex:none}
.t-mark .mk-tb-pend b{font:600 calc(17 * var(--u))/1 system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0}
.t-mark .mk-tb-segs{position:absolute;right:0;top:0;width:calc(162 * var(--u));height:100%;display:flex;transition:opacity .18s}
.t-mark .mk-tb[data-pend] .mk-tb-segs{opacity:0}
.t-mark .mk-tb-seg{flex:none;width:calc(54 * var(--u));height:100%;display:grid;place-items:center;color:#2C2925;transition:color .22s .06s}
.t-mark .mk-tb[data-tool="look"] .mk-tb-seg[data-tool="look"],
.t-mark .mk-tb[data-tool="mark"] .mk-tb-seg[data-tool="mark"],
.t-mark .mk-tb[data-tool="erase"] .mk-tb-seg[data-tool="erase"]{color:#FFE3CB}
.t-mark .mk-tb-seg.is-down .mk-ic,.t-mark .mk-tb-x.is-down .mk-sf{transform:scale(.84);opacity:.6;transition:transform .14s ease-out,opacity .14s}
.t-mark .mk-tb-x{position:absolute;right:0;top:0;width:calc(44 * var(--u));height:100%;display:grid;place-items:center;opacity:0;transition:opacity .12s}
.t-mark .mk-tb-x .mk-sf{transition:transform .34s var(--sp2),opacity .2s}
.t-mark .mk-tb[data-pend] .mk-tb-x{opacity:1;transition:opacity .2s .16s}
.t-mark .tile-ui *{pointer-events:none}
.t-mark.is-detail .mk-tb-seg{pointer-events:auto;cursor:pointer}
.t-mark.is-detail .mk-tb[data-pend] .mk-tb-seg{pointer-events:none}
.t-mark.is-detail .mk-tb[data-pend] .mk-tb-sel,.t-mark.is-detail .mk-tb[data-pend] .mk-tb-x{pointer-events:auto;cursor:pointer}
.t-mark .mk-goal{position:absolute;top:var(--ct);left:var(--gl);height:calc(44 * var(--u));padding:0 calc(14 * var(--u));
display:inline-flex;align-items:center;justify-content:center;gap:calc(6 * var(--u));border-radius:99px;white-space:nowrap;
font:600 calc(17 * var(--u))/1 system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;
background:var(--mk-acc);color:#FFE3CB;
box-shadow:inset 0 0 0 .5px rgba(255,255,255,.2),0 1px 2px rgba(80,28,12,.32),0 5px 12px -5px rgba(80,28,12,.5)}
.t-mark:not(.is-detail) .mk-goal{display:none}
.t-mark .mk-icons{position:relative;display:inline-grid;place-items:center;width:1.4em;height:1.4em}
.t-mark .mk-icons>.mk-sf,.t-mark .mk-icons>.mk-clap{grid-area:1/1;transition:opacity .3s ease}
.t-mark .mk-sf-scope{width:1.4em;height:1.4em;-webkit-mask-image:url(../img/sf/scope.png?v=0c75f4391);mask-image:url(../img/sf/scope.png?v=0c75f4391)}
.t-mark .mk-clap{position:relative;width:1.55em;height:1.51em;opacity:0;will-change:transform;transform-origin:42% 50%}
.t-mark .mk-clap>.mk-sf{position:absolute;left:0;top:0;width:100%;height:100%}
.t-mark .mk-sf-cb{transform-origin:83% 88%;-webkit-mask-image:url(../img/sf/hands-clap-back.png?v=0c75f4391);mask-image:url(../img/sf/hands-clap-back.png?v=0c75f4391)}
.t-mark .mk-sf-cf{transform-origin:58% 88%;-webkit-mask-image:url(../img/sf/hands-clap-front.png?v=0c75f4391);mask-image:url(../img/sf/hands-clap-front.png?v=0c75f4391)}
.t-mark .mk-sf-cs{transform-origin:55% 72%;-webkit-mask-image:url(../img/sf/hands-clap-sparks.png?v=0c75f4391);mask-image:url(../img/sf/hands-clap-sparks.png?v=0c75f4391)}
.t-mark .mk-clap>s{position:absolute;left:52%;top:42%;width:.2em;height:.2em;margin:-.1em 0 0 -.1em;border-radius:50%;background:#FFE3CB;opacity:0}
.t-mark .mk-clap>s:nth-of-type(2n){background:#FFCF70}
.t-mark .mk-goal.met .mk-clap{opacity:1}
.t-mark .mk-goal.met .mk-sf-scope{opacity:0}
.t-mark .mk-fig{display:inline-grid;justify-items:center}
.t-mark .mk-fig>*{grid-area:1/1;font:inherit;font-style:normal}
.t-mark .mk-size{visibility:hidden}
.t-mark .mk-toast{position:absolute;left:0;top:calc(var(--ct) + 54 * var(--u));display:flex;align-items:center;gap:calc(7 * var(--u));
height:calc(30 * var(--u));padding:0 calc(14 * var(--u)) 0 calc(11 * var(--u));border-radius:99px;white-space:nowrap;
font:600 calc(13.5 * var(--u))/1 system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;letter-spacing:0;color:#2C2925;
background:rgba(255,252,252,.95);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
box-shadow:0 0 0 .5px rgba(110,50,64,.12),0 1px 0 rgba(255,255,255,.9) inset,0 8px 18px -10px rgba(90,30,50,.4);
opacity:0;transform:translate(var(--tx,0px),calc(-6 * var(--u))) scale(.94);transition:opacity .22s ease,transform .4s var(--sp)}
.t-mark .mk-toast.on{opacity:1;transform:translate(var(--tx,0px),0) scale(1)}
.t-mark:not(.is-detail) .mk-toast{display:none}
.t-mark .mk-ti{flex:none;display:block;width:calc(18 * var(--u));height:calc(18 * var(--u));background:#B14A32;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.t-mark .mk-ti[data-ico="look"]{-webkit-mask-image:url(../img/sf/hand-raised-fill.png?v=0c75f4391);mask-image:url(../img/sf/hand-raised-fill.png?v=0c75f4391)}
.t-mark .mk-ti[data-ico="mark"]{-webkit-mask-image:url(../img/sf/hand-draw-fill.png?v=0c75f4391);mask-image:url(../img/sf/hand-draw-fill.png?v=0c75f4391)}
.t-mark .mk-ti[data-ico="erase"]{-webkit-mask-image:url(../img/sf/eraser-fill.png?v=0c75f4391);mask-image:url(../img/sf/eraser-fill.png?v=0c75f4391)}
.t-mark .mk-ti[data-ico="met"]{-webkit-mask-image:url(../img/sf/hands-clap-fill.png?v=0c75f4391);mask-image:url(../img/sf/hands-clap-fill.png?v=0c75f4391)}
.t-mark .mk-tip{position:absolute;left:0;top:0;z-index:3;width:var(--d,30px);height:var(--d,30px);border-radius:50%;opacity:0;will-change:transform,opacity;
background:rgba(112,66,80,.26);box-shadow:0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(80,36,52,.16);
transition:box-shadow .12s,background-color .12s}
.t-mark .mk-tip.down{background:rgba(112,66,80,.36);box-shadow:0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(80,36,52,.14)}
html[data-style="night"] .t-mark .mk-tb-bar,html[data-style="night"] .t-mark .mk-toast{background:rgba(40,34,38,.94);
box-shadow:0 0 0 .5px rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.07) inset,0 10px 22px -10px rgba(0,0,0,.75)}
html[data-style="night"] .t-mark .mk-tb-seg{color:#F3ECEE}
html[data-style="night"] .t-mark .mk-tb[data-tool="look"] .mk-tb-seg[data-tool="look"],
html[data-style="night"] .t-mark .mk-tb[data-tool="mark"] .mk-tb-seg[data-tool="mark"],
html[data-style="night"] .t-mark .mk-tb[data-tool="erase"] .mk-tb-seg[data-tool="erase"]{color:#FFE3CB}
html[data-style="night"] .t-mark .mk-toast{color:#F3ECEE}
html[data-style="night"] .t-mark .mk-ti{background:#FF9C80}
html[data-style="night"] .t-mark .mk-tb-x{filter:brightness(.62)}
html[data-style="night"] .t-mark .mk-tip{background:rgba(255,232,238,.3);box-shadow:0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.4)}
html[data-style="night"] .t-mark .mk-tip.down{background:rgba(255,232,238,.42);box-shadow:0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){
.t-mark .mk-tb-bar,.t-mark .mk-tb-sel,.t-mark .mk-tb-pend,.t-mark .mk-tb-seg,.t-mark .mk-ic,.t-mark .mk-tb-segs,.t-mark .mk-tb-x,.t-mark .mk-tb-x .mk-sf,.t-mark .mk-icons>.mk-sf,.t-mark .mk-icons>.mk-clap,.t-mark .mk-toast{transition:none!important}
.t-mark .mk-tip{transition:none!important}
}
.bento > .tile.t-mark::before{height:46%;background:linear-gradient(to top,#EFD0CB 30%,rgba(239,208,203,.85) 55%,rgba(239,208,203,0))}
html[data-style="night"] .bento > .tile.t-mark::before{background:linear-gradient(to top,#0E0E10 30%,rgba(14,14,16,.85) 55%,rgba(14,14,16,0))}
.tile.t-guide{--gu:.86px;padding:0}
.tile.t-guide>.chart-canvas{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;flex:none;touch-action:auto}
.t-guide .g-over{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.t-guide.is-detail .tile-cap{display:none}
.t-guide:not(.is-detail) .g-dock{display:none}
.t-guide:not(.is-detail) .tile-ui,.t-guide:not(.is-detail) .tile-ui *{pointer-events:none}
.t-guide .g-dock{position:absolute;left:50%;bottom:calc(var(--pad) - 2px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;
gap:calc(var(--gu) * 7);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;color:#1C1C1E;pointer-events:none;white-space:nowrap}
.t-guide .g-tag{display:block;padding:calc(var(--gu) * 4.5) calc(var(--gu) * 12);border-radius:999px;background:rgba(255,255,255,.88);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 6px rgba(40,26,14,.16);
font-size:calc(var(--gu) * 12);font-weight:500;line-height:1.25;color:#3A3A3C;font-variant-numeric:tabular-nums}
.t-guide .g-pill{display:flex;align-items:center;height:calc(var(--gu) * 44);padding:0 calc(var(--gu) * 6);border-radius:999px;
background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 .5px rgba(40,26,14,.08),0 3px 14px rgba(40,26,14,.2)}
.t-guide .g-label{min-width:calc(var(--gu) * 92);padding:0 calc(var(--gu) * 4);text-align:center;font-size:calc(var(--gu) * 13);font-weight:500;color:#3A3A3C;font-variant-numeric:tabular-nums}
.t-guide .g-btn{display:grid;place-items:center;width:calc(var(--gu) * 38);height:calc(var(--gu) * 38);border-radius:50%;pointer-events:auto;cursor:default;
transition:transform .18s var(--spring),background-color .18s}
.t-guide .g-sf{display:block;background:#1C1C1E;-webkit-mask:var(--sf) center/contain no-repeat;mask:var(--sf) center/contain no-repeat}
.t-guide .g-btn[data-g="prev"] .g-sf{--sf:url(../img/sf/chevron-left.png?v=0c75f4391);width:calc(var(--gu) * 10);height:calc(var(--gu) * 14)}
.t-guide .g-btn[data-g="next"] .g-sf{--sf:url(../img/sf/chevron-right.png?v=0c75f4391);width:calc(var(--gu) * 10);height:calc(var(--gu) * 14)}
.t-guide .g-btn[data-g="play"] .g-sf{--sf:url(../img/sf/play-fill.png?v=0c75f4391);width:calc(var(--gu) * 16);height:calc(var(--gu) * 18)}
.t-guide .g-btn[data-g="stop"] .g-sf{--sf:url(../img/sf/stop-fill.png?v=0c75f4391);width:calc(var(--gu) * 16);height:calc(var(--gu) * 15)}
.t-guide .g-btn[data-g="prev"],.t-guide .g-btn[data-g="next"]{width:calc(var(--gu) * 30)}
.t-guide .g-btn[data-g="play"],.t-guide .g-btn[data-g="stop"]{cursor:pointer}
.t-guide .g-btn.on{transform:scale(.88);background:rgba(28,28,30,.12)}
.t-guide .g-btn[data-g="play"]:hover,.t-guide .g-btn[data-g="stop"]:hover{background:rgba(28,28,30,.07)}
html[data-style="night"] .t-guide .g-dock{color:#F3ECEE}
html[data-style="night"] .t-guide .g-tag{background:rgba(40,34,38,.92);color:#E9E0E2;box-shadow:0 0 0 .5px rgba(255,255,255,.1),0 1px 8px rgba(0,0,0,.5)}
html[data-style="night"] .t-guide .g-pill{background:rgba(40,34,38,.94);box-shadow:0 0 0 .5px rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.07) inset,0 10px 22px -10px rgba(0,0,0,.75)}
html[data-style="night"] .t-guide .g-label{color:#E9E0E2}
html[data-style="night"] .t-guide .g-sf{background:#F3ECEE}
html[data-style="night"] .t-guide .g-btn.on{background:rgba(255,255,255,.14)}
html[data-style="night"] .t-guide .g-btn[data-g="play"]:hover,html[data-style="night"] .t-guide .g-btn[data-g="stop"]:hover{background:rgba(255,255,255,.09)}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400 700;font-display:swap;src:url(../../assets/fonts/newsreader-italic-latin.woff2) format('woff2')}
.t-lapse{--lp-h:34px;--lp-a:1;--lp-wa:0;--lp-p:0;--lp-ph:0;--lp-fa:0;--lp-cloth:0;background:radial-gradient(110% 80% at 50% 8%,#F6DEDA 0%,#EFD0CB 55%,#E7C1BB 100%)}
html[data-style="night"] .t-lapse{background:radial-gradient(90% 70% at 50% 100%,rgba(255,92,138,.22),transparent 70%),#0E0E10}
.bento>.t-lapse::before{opacity:var(--lp-cloth);height:25%;background:linear-gradient(to top,color-mix(in srgb,var(--tile) 90%,transparent) 6%,color-mix(in srgb,var(--tile) 0%,transparent))}
.t-lapse{--lp-tp:0}
.t-lapse:not(.is-detail){background:#DCD7CA}
.t-lapse .lp-tp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;opacity:var(--lp-tp);pointer-events:none}
.t-lapse.is-detail .lp-tp{display:none}
.t-lapse:not(.is-detail) .lp-frame{display:none}
html[data-style="night"] .t-lapse .lp-tp{filter:brightness(.92)}
.t-lapse>.chart-canvas{margin-bottom:calc(-1 * var(--pad));touch-action:manipulation}
.t-lapse:not(.is-detail)>.chart-canvas{touch-action:auto}
.t-lapse:not(.is-detail) :is(.lp-when,.lp-player){display:none}
.t-hero[data-detail="lapse"] .detail-stage>.t-lapse{background:transparent}
.t-hero[data-detail="lapse"] .detail-stage>.t-lapse>.chart-canvas{--lp-mk:1;
-webkit-mask:linear-gradient(90deg,transparent calc(28% * var(--lp-mk)),#000 calc(44% * var(--lp-mk)),#000 calc(100% - 9% * var(--lp-mk)),transparent),linear-gradient(180deg,transparent,#000 calc(12% * var(--lp-mk)));
-webkit-mask-composite:source-in;
mask:linear-gradient(90deg,transparent calc(28% * var(--lp-mk)),#000 calc(44% * var(--lp-mk)),#000 calc(100% - 9% * var(--lp-mk)),transparent),linear-gradient(180deg,transparent,#000 calc(12% * var(--lp-mk)));
mask-composite:intersect}
.t-hero[data-detail="lapse"] .detail-stage>.t-lapse:not(.lp-wide)>.chart-canvas{
-webkit-mask:linear-gradient(90deg,transparent,#000 calc(7% * var(--lp-mk)),#000 calc(100% - 7% * var(--lp-mk)),transparent),linear-gradient(180deg,transparent,#000 calc(9% * var(--lp-mk)));
-webkit-mask-composite:source-in;
mask:linear-gradient(90deg,transparent,#000 calc(7% * var(--lp-mk)),#000 calc(100% - 7% * var(--lp-mk)),transparent),linear-gradient(180deg,transparent,#000 calc(9% * var(--lp-mk)));
mask-composite:intersect}
@container (min-aspect-ratio: 1/1){
.t-hero[data-detail="lapse"] .hero-detail{display:block;padding:0}
.t-hero[data-detail="lapse"] .detail-stage{position:absolute;inset:0}
.t-hero[data-detail="lapse"] .detail-stage>.tile{border-radius:0;box-shadow:none}
.t-hero[data-detail="lapse"] .detail-copy{position:absolute;z-index:3;left:clamp(16px,3.2cqmin,32px);top:clamp(18px,4.2cqmin,40px);width:min(34cqw,340px);gap:.55em}
.t-hero[data-detail="lapse"] .detail-title{font-size:clamp(32px,min(6.6cqw,11.6cqh),64px)}
.t-hero[data-detail="lapse"] .detail-text{font-size:clamp(15px,min(2.5cqw,4.6cqh),23px);max-width:22ch;line-height:1.4;text-wrap:balance}
}
.t-lapse .lp-when{position:absolute;display:flex;flex-direction:column;gap:2px;opacity:var(--lp-wa);pointer-events:none;color:var(--ink)}
.t-lapse .lp-when *{pointer-events:none}
.t-lapse .lp-name{font:italic 500 clamp(20px,5.4cqw,28px)/1.1 'Newsreader',Georgia,'Times New Roman',serif;letter-spacing:-.01em}
.t-lapse .lp-span{font:600 clamp(11px,2.9cqw,14px)/1.25 var(--text);letter-spacing:.02em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.t-lapse .lp-days{position:relative;display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(3px,.9cqw,5px);margin-top:clamp(14px,3.4cqw,18px)}
.t-lapse .lp-days i{display:block;aspect-ratio:1;border-radius:2px;background:color-mix(in srgb,var(--ink) 13%,transparent);transition:background-color .35s,box-shadow .35s}
.t-lapse .lp-days i.on{background:var(--ink)}
.t-lapse .lp-days i.now{box-shadow:0 0 0 2px var(--accent,var(--ink))}
.t-lapse .lp-tag{position:absolute;bottom:calc(100% + 4px);left:calc((var(--lp-cell,0) + .5) * (100% - 9 * clamp(3px,.9cqw,5px)) / 10 + var(--lp-cell,0) * clamp(3px,.9cqw,5px));transform:translateX(-50%);
font:700 clamp(10px,2.7cqw,12.5px)/1 var(--text);font-variant-numeric:tabular-nums;color:var(--ink);opacity:0;transition:left .45s var(--ease,ease),opacity .3s}
.t-lapse .lp-tag.show{opacity:1}
.t-lapse .lp-player{position:absolute;display:flex;align-items:center;opacity:var(--lp-a);pointer-events:none;color:var(--ink);transition:opacity .3s}
.t-lapse .lp-btn{flex:none;display:grid;place-items:center;width:var(--lp-h);height:var(--lp-h);padding:0;border:0;border-radius:50%;margin-left:-8px;
background:transparent;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.t-lapse .lp-btn{position:relative}
.t-lapse .lp-btn::after{content:"";position:absolute;inset:-4px}
.t-lapse .lp-sf{display:block;width:46%;height:46%;background:currentColor;
-webkit-mask:var(--sf) center/contain no-repeat;mask:var(--sf) center/contain no-repeat}
.t-lapse .lp-btn[data-sf="play"] .lp-sf{--sf:url(../img/sf/play-fill.png?v=0c75f4391)}
.t-lapse .lp-btn[data-sf="pause"] .lp-sf{--sf:url(../img/sf/pause-fill.png?v=0c75f4391)}
.t-lapse .lp-btn[data-sf="again"] .lp-sf{--sf:url(../img/sf/arrow-counterclockwise.png?v=0c75f4391)}
.t-lapse .lp-btn:active{background:color-mix(in srgb,var(--ink) 10%,transparent)}
.t-lapse .lp-track{position:relative;flex:1;height:var(--lp-h);margin:0 4px 0 2px;cursor:pointer;touch-action:none}
.t-lapse .lp-track i{position:absolute;display:block}
.t-lapse .lp-rail{left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 24%,transparent)}
.t-lapse .lp-done{left:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:var(--ink);width:calc(var(--lp-p) * 100%)}
.t-lapse .lp-thumb{left:calc(var(--lp-p) * 100%);top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
border-radius:50%;background:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.t-lapse .lp-track.drag .lp-thumb{transform:scale(1.5)}
.t-lapse.lp-wide .lp-when{left:clamp(16px,3.2cqmin,32px);bottom:calc(clamp(14px,3cqmin,28px) + var(--lp-h) + 6px);width:min(32cqw,300px)}
.t-lapse.lp-wide .lp-player{left:clamp(16px,3.2cqmin,32px);bottom:clamp(14px,3cqmin,28px);width:min(32cqw,300px)}
.t-lapse:not(.lp-wide) .lp-player{left:10px;right:12px;top:4px}
.t-lapse:not(.lp-wide) .lp-when{left:14px;right:14px;top:calc(4px + var(--lp-h) + 2px);flex-direction:row;align-items:baseline;gap:.6em;flex-wrap:wrap}
.t-lapse:not(.lp-wide) .lp-name{font-size:clamp(18px,5.6cqw,24px)}
.t-lapse:not(.lp-wide) .lp-days{display:none}
.t-lapse .lp-frame{position:absolute;box-sizing:border-box;left:calc(var(--fx) - var(--fm));top:calc(var(--fy) - var(--fm));width:calc(var(--fw) + 2 * var(--fm));height:calc(var(--fh) + 2 * var(--fm));
border:var(--fb) solid;border-color:#FFFFFF #F2F0ED #E6E3DF #F8F7F5;border-radius:1px;pointer-events:none;
opacity:var(--lp-fa);transform:translateY(calc((1 - var(--lp-fa)) * var(--fw) * -.03)) scale(calc(1.05 - .05 * var(--lp-fa)));
box-shadow:0 0 0 .5px rgba(70,40,40,.14),0 calc(var(--fw) * .08 * var(--lp-fa)) calc(var(--fw) * .13 * var(--lp-fa)) calc(var(--fw) * -.055 * var(--lp-fa)) rgba(50,16,22,.42),0 calc(var(--fw) * .014 * var(--lp-fa)) calc(var(--fw) * .034 * var(--lp-fa)) calc(var(--fw) * -.014 * var(--lp-fa)) rgba(50,16,22,.22)}
.t-lapse .lp-frame *{pointer-events:none}
.t-lapse .lp-mat{box-sizing:border-box;width:100%;height:100%;padding:calc(var(--fm) - var(--fb));background:#FCFBF9;box-shadow:inset 0 1px 3px rgba(60,40,30,.16)}
.t-lapse .lp-win{position:relative;width:100%;height:100%;overflow:hidden;box-shadow:0 0 0 max(1.5px,.004 * var(--fw)) #FFFFFF,0 0 0 calc(max(1.5px,.004 * var(--fw)) + .5px) rgba(60,40,30,.22)}
.t-lapse .lp-win::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 2px 7px rgba(30,15,8,.3),inset 0 0 0 1px rgba(30,15,8,.18)}
.t-lapse .lp-photo{display:block;width:100%;height:100%;object-fit:fill;opacity:var(--lp-ph)}
html[data-motion="paused"] .t-lapse .lp-tag{transition:none}
@media (prefers-reduced-motion:reduce){.t-lapse .lp-thumb,.t-lapse .lp-tag,.t-lapse .lp-days i{transition:none}}
.t-files{padding:0;justify-content:flex-end}
.t-files > canvas.files-pages{position:absolute;inset:auto;margin:0;max-width:none;flex:none;pointer-events:none;
transition:opacity .2s var(--ease)}
.t-files .files-pages{touch-action:auto}
.t-files .files-foot{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:var(--pad);
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;pointer-events:none}
.bento > .tile.t-files .files-foot .cap-t{position:static;left:auto;right:auto;bottom:auto;flex:0 1 auto;min-width:0}
.detail-stage .t-files .files-foot{display:none}
.t-sync{justify-content:flex-end;--u:min(.4cqw,.98cqh);--blue:#2F8CF5}
.t-sync .sync-art{position:absolute;inset:0 0 30% 0;width:auto;margin:0;flex:none;display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 5)}
.dv{position:relative;display:block;color:var(--ink)}
.dv .sf{position:absolute;inset:0;width:100%;height:100%}
.dv .scr{position:absolute;z-index:1;overflow:hidden;border-radius:2px;background:#FFFDFB}
.dv .scr canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dv-phone{aspect-ratio:134/166}
.dv-phone .scr{left:24.5%;top:18%;right:25.2%;bottom:16.8%}
.dv-pad{aspect-ratio:200/152}
.dv-pad .scr{left:12%;top:13.7%;right:12.5%;bottom:18.9%}
.dv-mac{aspect-ratio:226/132}
.dv-mac .scr{left:20%;top:14.1%;right:20%;bottom:18.7%}
html[data-style="night"] .t-sync .dv{color:#09080A;filter:drop-shadow(0 0 .6px rgba(255,255,255,.55)) drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0,0,0,.6))}
.sf-iphone{-webkit-mask:url(../img/sf/iphone-thin.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/iphone-thin.png?v=0c75f4391) center/contain no-repeat}
.sf-ipad{-webkit-mask:url(../img/sf/ipad-landscape-thin.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/ipad-landscape-thin.png?v=0c75f4391) center/contain no-repeat}
.sf-mac{-webkit-mask:url(../img/sf/laptopcomputer-thin.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/laptopcomputer-thin.png?v=0c75f4391) center/contain no-repeat}
.icloud{position:relative;flex:none;display:block;width:calc(var(--u) * 40);aspect-ratio:1.45;scale:var(--pulse,1)}
.icloud .sf{position:absolute;inset:0;width:100%;height:100%;
background:linear-gradient(180deg,#6CC0FF 0%,#1F7DF4 100%);
-webkit-mask:url(../img/sf/icloud-fill.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/icloud-fill.png?v=0c75f4391) center/contain no-repeat;
filter:drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(31,125,244,.3))}
.sync-line{position:relative;flex:none;display:block;width:calc(var(--u) * 40);height:calc(var(--u) * 12)}
.sync-line .dash{position:absolute;left:0;right:0;top:50%;height:calc(var(--u) * 2.6);translate:0 -50%;border-radius:99px;
background:repeating-linear-gradient(90deg,rgba(47,140,245,.6) 0 calc(var(--u) * 5),transparent calc(var(--u) * 5) calc(var(--u) * 10));
-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
animation:sync-march .9s linear infinite reverse}
@keyframes sync-march{from{background-position:0 0}to{background-position:calc(var(--u) * 10) 0}}
@media (prefers-reduced-motion:reduce){.sync-line .dash{animation:none}}
.t-sync .pk{position:absolute;left:0;top:0;width:calc(var(--u) * 13);height:calc(var(--u) * 13);margin:calc(var(--u) * -6.5) 0 0 calc(var(--u) * -6.5);
opacity:0;pointer-events:none;will-change:transform,opacity;background:var(--x,none) center/contain no-repeat;
filter:drop-shadow(0 calc(var(--u) * .8) calc(var(--u) * 1.6) rgba(60,20,30,.35))}
.sync-line .pk{top:50%}
.sync-fly{position:absolute;inset:0;pointer-events:none;z-index:3}
.sync-a{--u:min(.34cqw,1.38cqh)}
.sync-a .sync-devs{position:relative;z-index:1;flex:none;width:calc(var(--u) * 156);height:calc(var(--u) * 62)}
.sync-a .dv{position:absolute;bottom:0}
.sync-a .dv-mac{left:0;width:calc(var(--u) * 68)}
.sync-a .dv-pad{left:calc(var(--u) * 59.4);width:calc(var(--u) * 60)}
.sync-a .dv-phone{right:0;height:calc(var(--u) * 62)}
.sync-a .icloud{width:calc(var(--u) * 50);z-index:1}
.detail-stage .t-sync .sync-art{inset:0}
.t-kinds .ka-cv{display:block;width:min(66cqh,50cqw,230px);aspect-ratio:1}
.t-shelf{padding:0;background:var(--tile)}
.shelf-row{position:absolute;inset:5% 0 25% 0;overflow:hidden}
.shelf-track{display:flex;align-items:flex-end;gap:clamp(8px,3cqw,14px);height:100%;width:max-content;padding-left:4%;animation:shelf-drift var(--dur,84s) linear infinite}
@keyframes shelf-drift{to{translate:-50% 0}}
.shelf-card{position:relative;flex:none;margin:0;height:calc(var(--h,1) * 100%);aspect-ratio:var(--ar,.8);border-radius:10px;overflow:hidden;background:#EFE6DA;
box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 10px 18px -12px rgba(60,20,30,.45)}
.shelf-card img{display:block;width:100%;height:100%;object-fit:cover}
.shelf-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.6)}
.shelf-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--accent)}
@media (prefers-reduced-motion:reduce){.shelf-track{animation:none}}
.shelf-scroll{display:none}
.is-detail.t-shelf .shelf-row{display:none}
.is-detail.t-shelf .shelf-scroll{display:block;position:absolute;inset:0;z-index:1;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;outline:none;
-webkit-mask:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%)}
.shelf-scroll::-webkit-scrollbar{display:none}
.shelf-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.shelf-grid{--cell:clamp(124px,17cqw,200px);display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cell),1fr));
gap:clamp(16px,3.4cqw,34px) clamp(8px,1.6cqw,20px);padding:clamp(40px,12cqh,80px) clamp(14px,3.6cqw,46px) clamp(40px,12cqh,80px)}
.sg-cell{margin:0;min-width:0;container-type:inline-size;display:flex;flex-direction:column;align-items:center}
.sg-area{width:100%;aspect-ratio:1;display:grid;place-items:center}
.sg-pic{position:relative;width:var(--w,100%);aspect-ratio:var(--ar,1);overflow:hidden;background:#EFE6DA;
border-radius:min(9px,max(2px,calc(var(--m,1) * 100cqw / 6)));
box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 12px 18px -12px rgba(60,20,30,.5)}
.sg-pic img{display:block;width:100%;height:100%;object-fit:cover}
.sg-pic .shelf-bar{height:clamp(3px,25%,5px);background:rgba(60,40,40,.26)}
.sg-cap{width:100%;margin-top:clamp(6px,5cqw,11px);display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.sg-cap b{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:650 clamp(11px,8.2cqw,15px)/1.25 var(--text);color:var(--ink)}
.sg-cap span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 clamp(9.5px,6.4cqw,12px)/1.25 var(--text);color:var(--ink-2);font-variant-numeric:tabular-nums}
html[lang="uk"] .sg-cap span,html[lang="ru"] .sg-cap span{font-size:clamp(8.5px,5.5cqw,11px);letter-spacing:-.01em}
@container (max-width:139px){.sg-cap span{display:none}}
.t-last{--u:1px}
.t-last.is-detail .ls-pill{left:0;right:0;margin-inline:auto;width:max-content;bottom:clamp(14px,4.4cqh,34px);
font-size:clamp(13px,min(2.3cqw,4.4cqh),19px);padding:.5em 1em;gap:.5em;pointer-events:auto;cursor:pointer}
.t-last.is-detail .ls-pill .sf{width:1.1em;height:1.1em}
.tile.t-last>.chart-canvas,.tile.t-last>.ls-light{position:absolute;inset:0;width:100%;height:100%;margin:0;flex:none;max-width:none}
.tile.t-last>.ls-light{z-index:2;pointer-events:none}
html[data-style="night"] .t-last .ls-pill{background:rgba(40,34,38,.94);color:#F3ECEE;-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
box-shadow:0 0 0 .5px rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.07) inset,0 10px 22px -10px rgba(0,0,0,.75)}
.dt-i{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.dt-i-scissors{--m:url(../img/sf/scissors.png?v=0c75f4391)}
.dt-i-pin{--m:url(../img/sf/pin-fill.png?v=0c75f4391)}
.dt-i-paint{--m:url(../img/sf/paintpalette.png?v=0c75f4391)}
.dt-i-sqsq{--m:url(../img/sf/square-on-square-dashed.png?v=0c75f4391)}
.dt-i-check{--m:url(../img/sf/checkmark.png?v=0c75f4391)}
.dt-i-sqd{--m:url(../img/sf/square-dashed.png?v=0c75f4391)}
.dt-i-wifi{--m:url(../img/sf/wifi.png?v=0c75f4391)}
.dt-i-wifislash{--m:url(../img/sf/wifi-slash.png?v=0c75f4391)}
.dt-i-globe{--m:url(../img/sf/globe.png?v=0c75f4391)}
.dt-i-lock{--m:url(../img/sf/lock-fill.png?v=0c75f4391)}
.dt-i-icloud{--m:url(../img/sf/icloud-fill.png?v=0c75f4391)}
.dt-i-eye{--m:url(../img/sf/eye.png?v=0c75f4391)}
.dt-i-hand{--m:url(../img/sf/hand-point-up-left-fill.png?v=0c75f4391)}
.dt-i-eraser{--m:url(../img/sf/eraser-fill.png?v=0c75f4391)}
.dt-i-uturn{--m:url(../img/sf/arrow-uturn-backward.png?v=0c75f4391)}
.dt-scene{position:absolute;inset:0;z-index:1;overflow:hidden;--u:1px;--ink-app:#2A2522;--ink2-app:#6F655F;--paper:#FBF4F0;color:var(--ink-app)}
.dt-scene canvas{display:block}
.dt-chart,.dt-fx{position:absolute;inset:0;width:100%;height:100%}
.dt-fx{pointer-events:none}
.is-detail.t-rip>.ls-icon,.is-detail.t-park>.park-art,.is-detail.t-offline>.wifi,.is-detail.t-kinds>.kinds-art,.is-detail.t-free>.huge,.is-detail.t-free>.cap-s{display:none!important}
.is-detail.t-rip,.is-detail.t-park,.is-detail.t-offline,.is-detail.t-kinds,.is-detail.t-free{padding:0}
.dt-tip{position:absolute;left:0;top:0;z-index:9;width:calc(30 * var(--u));height:calc(30 * var(--u));border-radius:50%;opacity:0;pointer-events:none;will-change:transform,opacity;
background:rgba(112,66,80,.26);box-shadow:0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(80,36,52,.16);transition:box-shadow .12s,background-color .12s}
.dt-tip.down{background:rgba(112,66,80,.36);box-shadow:0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(80,36,52,.14)}
.dt-lift{position:absolute;left:0;top:0;z-index:5;transform-origin:0 0;border-radius:calc(14 * var(--u));opacity:0;pointer-events:none;will-change:transform}
.dt-lift canvas{width:100%;height:100%;border-radius:calc(14 * var(--u));box-shadow:0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(30,10,20,.34),0 0 0 .5px rgba(0,0,0,.12)}
.dt-lift-cap{position:absolute;left:50%;top:calc(100% + 10 * var(--u));transform:translateX(-50%);width:calc(130 * var(--u));text-align:center;font:600 calc(11.5 * var(--u))/1.25 var(--text);letter-spacing:.01em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.dt-menu{position:absolute;left:0;top:0;z-index:6;width:calc(340 * var(--u));border-radius:calc(22 * var(--u));background:rgba(251,247,245,.97);color:var(--ink-app);
box-shadow:0 calc(18 * var(--u)) calc(48 * var(--u)) rgba(30,10,20,.34),0 0 0 .5px rgba(0,0,0,.1);opacity:0;visibility:hidden;pointer-events:none;
font:400 calc(17 * var(--u))/1.25 var(--text);will-change:transform,opacity}
.dt-strip{display:flex;margin:calc(12 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u));padding:calc(2 * var(--u));border-radius:calc(9 * var(--u));background:rgba(118,118,128,.12);font-size:calc(13 * var(--u));font-weight:500}
.dt-strip i{flex:1;text-align:center;font-style:normal;padding:calc(6 * var(--u)) 0;border-radius:calc(7 * var(--u));color:var(--ink-app)}
.dt-strip i.on{background:#fff;font-weight:650;box-shadow:0 1px 3px rgba(0,0,0,.14),0 0 0 .5px rgba(0,0,0,.04)}
.dt-mbody{display:flex;flex-direction:column;gap:calc(10 * var(--u));padding:calc(12 * var(--u))}
.dt-acts{display:flex;gap:calc(8 * var(--u))}
.dt-act{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(5 * var(--u));min-height:calc(64 * var(--u));padding:calc(10 * var(--u)) calc(6 * var(--u));border-radius:calc(14 * var(--u));
background:rgba(118,118,128,.12);font-size:calc(13 * var(--u));font-weight:650;text-align:center;line-height:1.15;transition:transform .2s var(--spring),opacity .2s}
.dt-act .dt-i{font-size:calc(20 * var(--u))}
.dt-act.dt-press{transform:scale(.93);opacity:.8}
.dt-rows{border-radius:calc(12 * var(--u));background:rgba(116,116,128,.08);overflow:hidden}
.dt-row{display:flex;align-items:center;gap:calc(10 * var(--u));min-height:calc(52 * var(--u));padding:calc(7 * var(--u)) calc(8 * var(--u)) calc(7 * var(--u)) calc(10 * var(--u))}
.dt-sw{flex:none;border-radius:calc(7 * var(--u))}
.dt-rw{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dt-nm{font-size:calc(17 * var(--u));color:var(--ink-app)}
.dt-dt{font-size:calc(13 * var(--u));color:var(--ink2-app)}
.dt-dt .dt-red{font-style:normal;color:#DB1F24}
.dt-mk{flex:none;padding:0 calc(12 * var(--u));height:calc(30 * var(--u));display:inline-flex;align-items:center;border-radius:99px;background:rgba(118,118,128,.12);font-size:calc(13 * var(--u));font-weight:650;color:var(--ink-app)}
.dt-mk.dt-warn{background:rgba(140,26,56,.12);color:#8C1A38}
.dt-park{display:flex;flex-direction:column;gap:calc(4 * var(--u));padding-top:calc(2 * var(--u));border-top:1px solid rgba(60,50,45,.12);margin-top:calc(2 * var(--u))}
.dt-ptitle{padding:calc(8 * var(--u)) 0 0 calc(4 * var(--u));font-size:calc(13 * var(--u));font-weight:500;color:var(--ink2-app)}
.dt-corners{display:flex;gap:calc(4 * var(--u))}
.dt-corner{flex:1;height:calc(56 * var(--u));display:grid;place-items:center;transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.dt-corner.dt-press{transform:scale(.86);opacity:.85}
.dt-cg{width:calc(56 * var(--u));height:calc(56 * var(--u))}
.dt-cg .r{fill:transparent;stroke:#6F655F;stroke-width:1.5;transition:fill .3s}
.dt-cg line{stroke:var(--ink-app);stroke-width:1.8;stroke-linecap:round}
.dt-cg circle{fill:#6F655F;stroke:#FBF4F0;stroke-width:1.4;transition:fill .3s}
.dt-corner.on .r{fill:var(--ink-app);stroke:var(--ink-app)}
.dt-corner.on line{stroke:#FBF4F0}
.dt-corner.on circle{fill:#FBF4F0;stroke:var(--ink-app)}
.dt-foot{position:absolute;left:0;right:0;bottom:calc(14 * var(--u));z-index:3;display:flex;justify-content:center;opacity:0;pointer-events:none}
.dt-pill{display:inline-flex;align-items:center;gap:calc(7 * var(--u));height:calc(44 * var(--u));padding:0 calc(18 * var(--u));border-radius:99px;background:rgba(251,247,245,.94);color:var(--ink-app);
box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(30,10,20,.2);font:600 calc(16 * var(--u))/1 var(--text);white-space:nowrap;transition:transform .2s var(--spring)}
.dt-pill .dt-i{font-size:calc(17 * var(--u))}
.dt-parkfind .dt-foot{opacity:1}
.dt-pk-probe{position:absolute;left:0;top:0;width:var(--pk-ov,0px);height:0;visibility:hidden;pointer-events:none}
.dt-pill.dt-press{transform:scale(.94)}
.dt-seat{position:absolute;left:50%;top:calc(14 * var(--u));z-index:3;display:inline-flex;align-items:center;gap:calc(8 * var(--u));height:calc(40 * var(--u));padding:0 calc(16 * var(--u)) 0 calc(9 * var(--u));border-radius:99px;
background:rgba(251,247,245,.94);box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(30,10,20,.2);font:600 calc(15 * var(--u))/1 var(--text);opacity:0;pointer-events:none}
.dt-pin{position:absolute;left:0;top:0;z-index:4;pointer-events:none;opacity:0;transform-origin:50% 92%;filter:drop-shadow(0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(30,10,20,.34))}
.dt-pin i{position:absolute;inset:0;-webkit-mask:url(../img/sf/pin-fill.png?v=0c75f4391) center/contain no-repeat;mask:url(../img/sf/pin-fill.png?v=0c75f4391) center/contain no-repeat}
.dt-pin .dt-pin-h{inset:-16%;background:#fff}
@media (prefers-reduced-motion:reduce){.dt-act,.dt-pill,.dt-corner{transition:none}}
.dt-offline canvas{position:absolute;inset:0;width:100%;height:100%}
.do-cap{position:absolute;left:0;top:0;z-index:3;display:inline-flex;align-items:center;gap:calc(8 * var(--u));height:calc(40 * var(--u));padding:0 calc(17 * var(--u)) 0 calc(14 * var(--u));
border-radius:99px;background:rgba(255,255,255,.93);box-shadow:0 0 0 .5px rgba(92,14,34,.12),0 calc(8 * var(--u)) calc(22 * var(--u)) calc(-8 * var(--u)) rgba(92,14,34,.35);
font:650 calc(15 * var(--u))/1 var(--text);color:#2A2522;white-space:nowrap;font-variant-numeric:tabular-nums;will-change:transform;transform-origin:50% 50%}
html[data-style="night"] .do-cap{background:rgba(38,33,37,.92);color:#F3ECEE;box-shadow:0 0 0 .5px rgba(255,255,255,.12),0 calc(8 * var(--u)) calc(22 * var(--u)) calc(-8 * var(--u)) rgba(0,0,0,.6)}
html[data-style="night"] .do-badge.do-off{color:#FF8FA9}
.do-wf{display:grid}
.do-wf .dt-i{grid-area:1/1;font-size:calc(19 * var(--u))}
.do-badge.do-off{color:#8C1A38}
.dt-kinds{-webkit-mask:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.dk-roll{position:absolute;left:0;right:0;top:0;will-change:transform}
.dk-list{display:flex;flex-direction:column;gap:clamp(16px,3.6cqh,30px);padding:clamp(18px,4cqh,34px) clamp(4px,1.4cqw,14px)}
.dk-fam{display:flex;flex-direction:column;gap:clamp(7px,1.4cqh,11px)}
.dk-head{display:flex;align-items:center;gap:.55em;margin:0;font:700 clamp(12px,min(1.7cqw,3.2cqh),15px)/1.2 var(--text);color:var(--ink-2)}
.dk-head b{font-weight:800;font-size:.86em;color:var(--accent);background:var(--accent-soft);padding:.18em .55em;border-radius:99px;font-variant-numeric:tabular-nums}
.dk-head::after{content:"";flex:1;height:1px;background:var(--line)}
.dk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(72px,6.4cqw,104px),1fr));gap:clamp(6px,1.1cqw,12px)}
.dk-card{display:flex;flex-direction:column;align-items:center;gap:.45em;margin:0;padding:clamp(6px,1cqw,10px) clamp(5px,.8cqw,9px) clamp(8px,1.2cqw,12px);
border-radius:clamp(12px,1.6cqw,18px);background:color-mix(in srgb,var(--tile) 82%,transparent);box-shadow:0 0 0 .5px var(--line)}
.dk-art{width:100%;aspect-ratio:1;border-radius:clamp(8px,1.1cqw,12px);overflow:hidden;box-shadow:0 0 0 .5px var(--line)}
.dk-cv,.dk-fcv{display:block;width:100%;height:100%}
.dk-name{font:600 clamp(10.5px,min(1.05cqw,2.3cqh),12.5px)/1.18 var(--text);color:var(--ink);text-align:center;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:2.36em}
.dk-card{cursor:pointer;transition:box-shadow .35s var(--ease),transform .35s var(--ease),background-color .35s var(--ease)}
.dk-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dk-card.dk-on{background:var(--tile-hi);transform:translateY(-2px);box-shadow:0 0 0 2px var(--accent),0 6px 16px rgba(92,14,34,.16)}
html[data-style="night"] .dk-card.dk-on{background:var(--tile-2);box-shadow:0 0 0 2px var(--accent),0 6px 18px rgba(0,0,0,.55)}
.dk-feature{display:flex;align-items:center;gap:clamp(10px,1.8cqw,18px);margin-top:clamp(2px,1cqh,10px);max-width:100%}
.dk-fstage{flex:none;width:clamp(110px,min(21cqw,44cqh),220px);aspect-ratio:1;border-radius:clamp(16px,2.6cqmin,24px);overflow:hidden;
box-shadow:0 0 0 .5px var(--line),0 10px 26px rgba(92,14,34,.12)}
html[data-style="night"] .dk-fstage{box-shadow:0 0 0 .5px var(--line),0 10px 26px rgba(0,0,0,.45)}
.dk-fwords{display:flex;flex-direction:column;gap:.3em;min-width:0}
.dk-ffam{font:600 clamp(11px,min(1.2cqw,2.6cqh),13px)/1.2 var(--text);color:var(--muted)}
.dk-fname{font:800 clamp(15px,min(2cqw,4.4cqh),22px)/1.12 var(--display);letter-spacing:-.01em;color:var(--ink)}
.dk-fstep{font:650 clamp(11px,min(1.2cqw,2.6cqh),13px)/1.2 var(--text);color:var(--accent);font-variant-numeric:tabular-nums}
@container (max-aspect-ratio: 1/1){
.dk-feature{margin-top:.3em}
.dk-fstage{width:clamp(84px,24cqw,124px)}
}
.dt-free{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,4cqh,34px);padding:4%}
.dt-chips{display:flex;gap:clamp(8px,2.2cqw,20px);flex-wrap:wrap;justify-content:center}
.dt-chip{position:relative;display:inline-flex;align-items:center;gap:.55em;padding:.7em 1.15em .7em .95em;border-radius:99px;background:var(--tile-2,#F5E6E1);color:var(--ink);font:650 clamp(14px,min(2.9cqw,6.2cqh),24px)/1 var(--text);
opacity:calc(1 - .5 * var(--k,0));--k:0}
.dt-ci{width:1.55em;height:1.55em;color:var(--accent)}
.dt-strike{position:absolute;left:.6em;right:.6em;top:50%;height:max(2.5px,.14em);margin-top:calc(-.07em);border-radius:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--k,0))}
.dt-big{margin:0;font-size:clamp(46px,min(17cqw,30cqh),150px);padding:0 .1em;opacity:0;line-height:.95}
html[lang="uk"] .dt-big,html[lang="ru"] .dt-big{font-size:clamp(38px,min(12cqw,24cqh),110px)}
html[lang="uk"] .dt-big{font-size:clamp(28px,min(10cqw,21cqh),96px)}
html[data-style="night"] .dt-big.grad{background-image:linear-gradient(120deg,#5BE49B,#5AC8FA)}
html[data-style="studio"] .dt-big.grad{background-image:linear-gradient(100deg,#E2557B 0%,#F29A1F 55%,#7A5AF8 100%)}
@container (min-aspect-ratio: 1/1){
.t-hero:is([data-detail="rip"],[data-detail="last"]) .hero-detail{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:0}
.t-hero:is([data-detail="rip"],[data-detail="last"]) .detail-copy{position:relative;z-index:2;padding-right:clamp(6px,1.4cqw,16px)}
.t-hero:is([data-detail="rip"],[data-detail="last"]) .detail-stage{margin-left:calc(-1 * clamp(24px,5cqw,70px))}
.t-hero:is([data-detail="rip"],[data-detail="last"]) .detail-stage :is(.dt-scene>:is(.dt-chart,.dt-fx),.tile.t-last>:is(.chart-canvas,.ls-light)){
-webkit-mask:linear-gradient(90deg,transparent 0,transparent 6%,#000 34%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
-webkit-mask-composite:source-in;
mask:linear-gradient(90deg,transparent 0,transparent 6%,#000 34%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
mask-composite:intersect}
.t-hero[data-detail="park"] .hero-detail{--pk-ov:clamp(32px,6cqw,90px);grid-template-columns:minmax(0,.76fr) minmax(0,1.5fr);gap:0}
.t-hero[data-detail="park"] .detail-copy{position:relative;z-index:2}
.t-hero[data-detail="park"] .detail-stage{margin-left:calc(-1 * var(--pk-ov))}
.t-hero[data-detail="park"] .detail-stage .dt-scene>:is(.dt-chart,.dt-fx){
-webkit-mask:linear-gradient(90deg,transparent 0,transparent var(--pk-ov),#000 calc(var(--pk-ov) + 24%),#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
-webkit-mask-composite:source-in;
mask:linear-gradient(90deg,transparent 0,transparent var(--pk-ov),#000 calc(var(--pk-ov) + 24%),#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
mask-composite:intersect}
.t-hero:is([data-detail="colour"],[data-detail="guide"]) .hero-detail{grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr)}
.t-hero:is([data-detail="colour"],[data-detail="guide"]) .detail-stage{order:-1}
.t-hero:is([data-detail="colour"],[data-detail="guide"]) .detail-copy{padding-right:clamp(36px,6cqmin,52px)}
.t-hero:is([data-detail="mark"],[data-detail="shelf"]) .hero-detail{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:clamp(10px,2.4cqh,20px)}
.t-hero:is([data-detail="mark"],[data-detail="shelf"]) .detail-copy{align-self:start;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);align-items:baseline;gap:.2em clamp(14px,3cqw,30px);padding-right:clamp(40px,6cqmin,56px)}
.t-hero:is([data-detail="mark"],[data-detail="shelf"]) .detail-title{font-size:clamp(26px,min(5cqw,9cqh),44px)}
.t-hero:is([data-detail="mark"],[data-detail="shelf"]) .detail-text{max-width:46ch;font-size:clamp(14px,min(1.9cqw,3.9cqh),18px)}
.t-hero[data-detail="shelf"] .detail-copy{order:2;align-self:end;padding-right:0}
.t-hero[data-detail="shelf"] .hero-detail{grid-template-rows:minmax(0,1fr) auto;padding-top:clamp(52px,9cqh,64px)}
.t-hero:is([data-detail="files"],[data-detail="sync"],[data-detail="offline"],[data-detail="free"]) .hero-detail{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:clamp(8px,2cqh,18px);padding-top:clamp(14px,3cqh,26px)}
.t-hero:is([data-detail="files"],[data-detail="sync"],[data-detail="offline"],[data-detail="free"]) .detail-stage{width:min(100%,88%);justify-self:center}
.t-hero:is([data-detail="files"],[data-detail="sync"],[data-detail="offline"],[data-detail="free"]) .detail-copy{order:2;align-self:end;align-items:center;text-align:center;gap:.35em}
.t-hero:is([data-detail="files"],[data-detail="sync"],[data-detail="offline"],[data-detail="free"]) .detail-title{font-size:clamp(26px,min(5cqw,9cqh),44px)}
.t-hero:is([data-detail="files"],[data-detail="sync"],[data-detail="offline"],[data-detail="free"]) .detail-text{max-width:44ch}
.t-hero:is([data-detail="offline"],[data-detail="free"]) .detail-stage>.tile{background:transparent;box-shadow:none}
.t-hero[data-detail="free"] .detail-title:empty{display:none}
}
.detail-title:empty{display:none}
@container (max-aspect-ratio: 1/1){
.t-hero:is([data-detail="offline"],[data-detail="free"]) .detail-stage>.tile{background:transparent;box-shadow:none}
}
.detail-stage > .tile{background:transparent;box-shadow:none;border-radius:0}
.detail-stage > .tile::after{display:none}
.detail-stage > .tile > canvas,.detail-stage .dt-scene > .dt-chart,.detail-stage .dt-scene > .dt-fx{
-webkit-mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
-webkit-mask-composite:source-in;
mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent),linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
mask-composite:intersect}
.t-hero[data-detail="stats"] .hero-detail{padding-block:0}
.t-hero[data-detail="stats"] .detail-copy{padding-block:clamp(16px,3.4cqmin,34px)}
.t-hero[data-detail="stats"] .t-stats .st-panel{
-webkit-mask:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 11%,#000 89%,transparent 100%)}
.t-hero[data-detail="stats"] .t-stats .st-sheet{padding-top:clamp(40px,11cqh,72px);padding-bottom:clamp(40px,11cqh,72px)}
@container (max-aspect-ratio: 1/1){
.t-hero[data-detail="stats"] .hero-detail{padding-top:clamp(16px,3.4cqmin,34px)}
.t-hero[data-detail="stats"] .detail-copy{padding-block:0}
}
html[data-style="night"] .dt-scene{--ink-app:#F3ECEE;--ink2-app:#A99DA3;--paper:#2A2528}
html[data-style="night"] .dt-tip{background:rgba(255,232,238,.3);box-shadow:0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.4)}
html[data-style="night"] .dt-tip.down{background:rgba(255,232,238,.42);box-shadow:0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.35)}
html[data-style="night"] .dt-menu{background:rgba(40,34,38,.97);box-shadow:0 calc(18 * var(--u)) calc(48 * var(--u)) rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.12)}
html[data-style="night"] .dt-strip{background:rgba(255,255,255,.09)}
html[data-style="night"] .dt-strip i.on{background:#5C5559;box-shadow:0 1px 3px rgba(0,0,0,.4)}
html[data-style="night"] .dt-act,html[data-style="night"] .dt-mk{background:rgba(255,255,255,.1)}
html[data-style="night"] .dt-rows{background:rgba(255,255,255,.06)}
html[data-style="night"] .dt-mk.dt-warn{background:rgba(255,92,138,.2);color:#FF8FAE}
html[data-style="night"] .dt-dt .dt-red{color:#FF6B73}
html[data-style="night"] .dt-park{border-top-color:rgba(255,255,255,.12)}
html[data-style="night"] .dt-cg circle{stroke:var(--paper)}
html[data-style="night"] .dt-corner.on line{stroke:var(--paper)}
html[data-style="night"] .dt-corner.on circle{stroke:var(--ink-app)}
html[data-style="night"] .dt-pill,html[data-style="night"] .dt-seat{background:rgba(40,34,38,.94);color:#F3ECEE;
box-shadow:0 0 0 .5px rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.07) inset,0 calc(8 * var(--u)) calc(20 * var(--u)) calc(-8 * var(--u)) rgba(0,0,0,.75)}
.t-hero,.t-photo{--photo-red:#610514}
.photo-chart,.photo-seg{display:none}
.photo-pic{position:absolute;inset:0}
.t-hero[data-detail="photo"] .hero-detail{display:block;padding:0;background:var(--photo-red)}
.t-hero[data-detail="photo"] .detail-stage{position:absolute;inset:0}
.t-hero[data-detail="photo"] .detail-stage>.tile{border-radius:0;box-shadow:none;background:var(--photo-red)}
.t-hero[data-detail="photo"] .detail-copy{position:absolute;z-index:3;left:clamp(20px,4cqw,48px);top:50%;translate:0 -50%;width:clamp(180px,30cqw,320px);
padding:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;gap:.55em}
.t-hero[data-detail="photo"] .detail-title{color:#fff;font-size:clamp(26px,min(4.9cqw,8.6cqh),44px);line-height:1.04;text-shadow:0 1px 18px rgba(30,0,8,.4)}
.t-hero[data-detail="photo"] .detail-text{color:rgba(255,255,255,.93);font-size:clamp(13px,min(1.8cqw,3.4cqh),16px);line-height:1.45;max-width:25ch;text-shadow:0 1px 12px rgba(30,0,8,.4)}
.t-hero[data-detail="photo"] .detail-stage>.tile:hover{translate:none;scale:none}
.t-photo.is-detail .photo-art::before,.t-photo.is-detail .photo-art::after,.t-photo.is-detail .photo-tag{display:none}
.t-photo.is-detail .photo-pic{--bleed:clamp(0px,5cqw,56px);--pic-w:max(200px,min(115cqh,calc(100cqw - 270px)));
inset:0 calc(-1 * var(--bleed)) 0 auto;width:calc(var(--pic-w) + var(--bleed));
-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 4%,#000 20%);mask-image:linear-gradient(90deg,transparent 0,transparent 4%,#000 20%)}
.t-photo.is-detail .photo-pic img{object-position:100% 8%;opacity:0;transition:opacity .75s ease}
.t-photo.is-detail .photo-pic img.on{opacity:1}
.t-photo.is-detail .photo-pic img.top{z-index:2}
.t-photo.is-detail .photo-chart{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t-photo.is-detail .photo-stitched{clip-path:none}
.t-photo.is-detail .photo-seg{position:absolute;z-index:4;top:var(--top,clamp(10px,2.2cqmin,18px));right:var(--right,calc(clamp(10px,2.2cqmin,18px) + 44px));
display:grid;grid-template-columns:repeat(3,1fr);box-sizing:border-box;height:34px;padding:3px;border-radius:99px;
background:color-mix(in srgb,var(--tile) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 .5px var(--line),0 4px 14px rgba(0,0,0,.12)}
.photo-seg::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:99px;background:var(--ink);
box-shadow:0 2px 8px rgba(0,0,0,.22);transition:transform .45s var(--spring)}
.photo-seg[data-state="1"]::before{transform:translateX(100%)}
.photo-seg[data-state="2"]::before{transform:translateX(200%)}
.photo-seg button{position:relative;z-index:1;margin:0;padding:0 13px;border:0;border-radius:99px;background:none;cursor:pointer;
font:650 12.5px/28px var(--text);white-space:nowrap;color:var(--ink-2);transition:color .3s var(--ease);-webkit-tap-highlight-color:transparent}
.photo-seg button[aria-pressed="true"]{color:var(--tile)}
.photo-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.photo-seg button::after{content:"";position:absolute;inset:-6px 0}
@media (prefers-reduced-motion:reduce){
.t-photo.is-detail .photo-pic img,.photo-seg::before,.photo-seg button{transition:none}
}
@container (max-aspect-ratio: 1/1){
.t-photo.is-detail .photo-pic{inset:clamp(130px,32cqh,240px) 0 0 0;width:auto;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%);mask-image:linear-gradient(180deg,transparent 0,#000 26%)}
.t-photo.is-detail .photo-pic img{object-position:50% 4%}
.t-hero[data-detail="photo"] .detail-copy{left:clamp(16px,5.5cqw,30px);right:clamp(16px,5.5cqw,30px);width:auto;top:calc(clamp(10px,2.2cqmin,18px) + 34px + 16px);translate:none;padding:0;gap:.4em}
.t-hero[data-detail="photo"] .detail-title{font-size:clamp(26px,9cqw,40px)}
.t-hero[data-detail="photo"] .detail-text{max-width:none;font-size:clamp(13px,4cqw,16px)}
}
html[data-style="night"] .t-photo:not(.is-detail) .photo-tag{background:rgba(40,34,38,.88);color:#F3ECEE;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}