/* Сгенерировано tools/build-demos.mjs из site/index.html (разделы f-share, f-expenses, f-packing, f-files). Руками не править. */
.demo{--paper: #F2F1EC; --surface: #FBFBF8; --surface-2: #ECEBE4; --line: #E3E2DA; --line-strong: #D3D2C8; --ink: #1B1B18; --ink-2: #6E6D65; --ink-3: #9C9B91; --accent: #C1E069; --accent-ink: #333D17; --flight-bg: #CCC8F3; --flight-ink: #4D427F; --train-bg: #BBDBC0; --train-ink: #295233; --transfer-bg: #B3D2ED; --transfer-ink: #1E507B; --hotel-bg: #D9E6AA; --hotel-ink: #4A5714; --museum-bg: #F1CDAC; --museum-ink: #7B461E; --food-bg: #ECB9B1; --food-ink: #843C35; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --shadow-sm: 0 1px 2px rgba(27,27,24,.05),0 2px 8px rgba(27,27,24,.04); --shadow-md: 0 4px 14px rgba(27,27,24,.07),0 2px 6px rgba(27,27,24,.04); --font-serif: 'Tenor Sans',Georgia,serif; --font-display: 'Bricolage Grotesque',system-ui,-apple-system,sans-serif; --font-ui: 'Hanken Grotesk',system-ui,-apple-system,sans-serif; --font-mono: 'JetBrains Mono',ui-monospace,monospace; --font-hand: 'Caveat',cursive; --stage-w: 1600; --stage-h: 800; --s: 1;}
.demo *{box-sizing: border-box;}
.demo img{display: block; max-width: 100%;}
.demo .ic{display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; background: currentcolor; mask: var(--m) center/contain no-repeat;}
.demo .ic-flight{--m: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Icon%2Fflight%22%3E%20%3Cpath%20id%3D%22icon%22%20d%3D%22M9.20833%202.30208C9.20833%202.00757%208.9716%201.77083%208.67708%201.77083C8.38257%201.77083%208.14583%202.00757%208.14583%202.30208V6.19792C8.14583%206.38106%208.05141%206.55115%207.89612%206.64823L2.47917%2010.0336V10.4334L7.45618%208.87838C7.61746%208.82799%207.79318%208.85716%207.92932%208.95723C8.06548%209.05734%208.14583%209.21642%208.14583%209.38542V13.2812C8.14583%2013.4484%208.06711%2013.6056%207.93347%2013.706L6.72917%2014.6087V14.7021L8.53113%2014.1874L8.60376%2014.1715C8.67684%2014.1613%208.75157%2014.167%208.82304%2014.1874L10.625%2014.7021V14.6087L9.42069%2013.706C9.28706%2013.6056%209.20833%2013.4484%209.20833%2013.2812V9.38542C9.20833%209.21642%209.28868%209.05734%209.42485%208.95723C9.56099%208.85716%209.73671%208.82799%209.89799%208.87838L14.875%2010.4334V10.0336L9.45805%206.64823C9.30276%206.55115%209.20833%206.38106%209.20833%206.19792V2.30208ZM10.2708%205.90324L15.6878%209.28927C15.8431%209.38635%2015.9375%209.55644%2015.9375%209.73958V11.1562C15.9375%2011.3252%2015.8571%2011.4843%2015.721%2011.5844C15.5848%2011.6845%2015.4091%2011.7137%2015.2478%2011.6633L10.2708%2010.1076V13.0156L11.4751%2013.919C11.6088%2014.0194%2011.6875%2014.1766%2011.6875%2014.3437V15.4062C11.6875%2015.573%2011.6089%2015.7299%2011.4758%2015.8303C11.3428%2015.9306%2011.1705%2015.9625%2011.0103%2015.9167L8.67708%2015.2499L6.34387%2015.9167C6.18365%2015.9625%206.0114%2015.9306%205.87834%2015.8303C5.74525%2015.7299%205.66667%2015.573%205.66667%2015.4062V14.3437C5.66667%2014.1766%205.74539%2014.0194%205.87903%2013.919L7.08333%2013.0156V10.1076L2.10632%2011.6633C1.94504%2011.7137%201.76932%2011.6845%201.63318%2011.5844C1.49702%2011.4843%201.41667%2011.3252%201.41667%2011.1562V9.73958L1.42082%209.67179C1.44095%209.51511%201.53045%209.37425%201.66638%209.28927L7.08333%205.90324V2.30208C7.08333%201.42077%207.79577%200.708333%208.67708%200.708333C9.5584%200.708333%2010.2708%201.42077%2010.2708%202.30208V5.90324Z%22%20fill%3D%22currentColor%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");}
.demo .ic-car{--m: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Icon%2Fcar%22%3E%20%3Cg%20id%3D%22icon%22%3E%20%3Cpath%20d%3D%22M11.8085%203.39986L12.0014%203.40974C12.4491%203.4511%2012.8781%203.62335%2013.2378%203.90879C13.6423%204.22989%2013.9362%204.67745%2014.0797%205.18524H14.0813L15.3762%209.31765C15.4801%209.64961%2015.3059%2010.0064%2014.9873%2010.1148C14.6686%2010.223%2014.3261%2010.0416%2014.222%209.70964L12.9271%205.57806C12.9246%205.57022%2012.9221%205.56211%2012.92%205.55418C12.8507%205.29967%2012.7037%205.07547%2012.5018%204.91513C12.3249%204.77478%2012.114%204.69001%2011.8938%204.66972L11.799%204.66478H4.84688L4.75201%204.66972C4.53183%204.69001%204.32092%204.77478%204.14408%204.91513C3.94211%205.07547%203.79513%205.29967%203.72588%205.55418C3.72372%205.56211%203.72122%205.57022%203.71877%205.57806L2.42385%209.70964C2.31979%2010.0416%201.97727%2010.223%201.65859%2010.1148C1.33993%2010.0064%201.16574%209.64961%201.26964%209.31765L2.56456%205.18524C2.70808%204.67735%203.00349%204.22994%203.40808%203.90879C3.8191%203.58257%204.32068%203.40393%204.83739%203.39986H11.8085Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M14.192%2010.1461H2.45388V12.5491C2.45388%2012.605%202.47531%2012.6587%202.51317%2012.6982C2.55112%2012.7377%202.60258%2012.7599%202.65626%2012.7599H3.7899C3.84346%2012.7599%203.89511%2012.7376%203.93299%2012.6982C3.97075%2012.6587%203.99229%2012.6049%203.99229%2012.5491V11.7058C3.99246%2011.3567%204.26422%2011.0734%204.59943%2011.0734H12.0464C12.3816%2011.0734%2012.6534%2011.3567%2012.6535%2011.7058V12.5491C12.6535%2012.6049%2012.6751%2012.6587%2012.7128%2012.6982C12.7507%2012.7376%2012.8024%2012.7599%2012.8559%2012.7599H13.9896C14.0432%2012.7599%2014.0947%2012.7377%2014.1327%2012.6982C14.1705%2012.6587%2014.192%2012.605%2014.192%2012.5491V10.1461ZM15.4062%2012.5491C15.4062%2012.9405%2015.2569%2013.3166%2014.9912%2013.5933C14.7255%2013.8699%2014.3652%2014.0249%2013.9896%2014.0249H12.8559C12.4804%2014.0248%2012.1199%2013.87%2011.8543%2013.5933C11.5886%2013.3166%2011.4393%2012.9405%2011.4393%2012.5491V12.3383H5.20657V12.5491C5.20657%2012.9405%205.05721%2013.3166%204.79153%2013.5933C4.52594%2013.87%204.16548%2014.0248%203.7899%2014.0249H2.65626C2.28064%2014.0249%201.92028%2013.8699%201.65463%2013.5933C1.38896%2013.3166%201.23959%2012.9405%201.23959%2012.5491V9.51364C1.23959%209.16434%201.51142%208.88118%201.84673%208.88118H14.7991C15.1344%208.88118%2015.4062%209.16434%2015.4062%209.51364V12.5491Z%22%20fill%3D%22currentColor%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");}
.demo .ic-hotel{--m: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Icon%2Fhotel%22%3E%20%3Cg%20id%3D%22icon%22%3E%20%3Cpath%20d%3D%22M2.125%2013.9896V11.5104C2.125%2011.217%202.36285%2010.9792%202.65625%2010.9792C2.94965%2010.9792%203.1875%2011.217%203.1875%2011.5104V13.9896C3.1875%2014.283%202.94965%2014.5208%202.65625%2014.5208C2.36285%2014.5208%202.125%2014.283%202.125%2013.9896Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M14.1667%2013.9896V11.5104C14.1667%2011.217%2014.4045%2010.9792%2014.6979%2010.9792C14.9913%2010.9792%2015.2292%2011.217%2015.2292%2011.5104V13.9896C15.2292%2014.283%2014.9913%2014.5208%2014.6979%2014.5208C14.4045%2014.5208%2014.1667%2014.283%2014.1667%2013.9896Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M14.6979%2010.9792C14.9913%2010.9792%2015.2292%2011.217%2015.2292%2011.5104C15.2292%2011.8038%2014.9913%2012.0417%2014.6979%2012.0417H2.65625C2.36285%2012.0417%202.125%2011.8038%202.125%2011.5104C2.125%2011.217%202.36285%2010.9792%202.65625%2010.9792H14.6979Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M14.1667%2011.5104V9.38542C14.1667%209.15059%2014.0733%208.92545%2013.9073%208.7594C13.7412%208.59335%2013.5161%208.5%2013.2812%208.5H4.07292C3.83809%208.5%203.61295%208.59335%203.4469%208.7594C3.28085%208.92545%203.1875%209.15059%203.1875%209.38542V11.5104C3.1875%2011.8038%202.94965%2012.0417%202.65625%2012.0417C2.36285%2012.0417%202.125%2011.8038%202.125%2011.5104V9.38542C2.125%208.8688%202.33037%208.37348%202.69568%208.00818C3.06098%207.64287%203.5563%207.4375%204.07292%207.4375H13.2812C13.7979%207.4375%2014.2932%207.64287%2014.6585%208.00818C15.0238%208.37348%2015.2292%208.8688%2015.2292%209.38542V11.5104C15.2292%2011.8038%2014.9913%2012.0417%2014.6979%2012.0417C14.4045%2012.0417%2014.1667%2011.8038%2014.1667%2011.5104Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M2.125%207.96875V4.07292C2.125%203.77952%202.36285%203.54167%202.65625%203.54167C2.94965%203.54167%203.1875%203.77952%203.1875%204.07292V7.96875C3.1875%208.26215%202.94965%208.5%202.65625%208.5C2.36285%208.5%202.125%208.26215%202.125%207.96875Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M8.71253%207.96875V6.76444C8.71246%206.60486%208.64899%206.45188%208.53614%206.33903C8.4233%206.22618%208.27031%206.16271%208.11073%206.16264H6.12684C5.96726%206.16271%205.81427%206.22618%205.70143%206.33903C5.58858%206.45188%205.52511%206.60486%205.52503%206.76444V7.96875C5.52503%208.26215%205.28719%208.5%204.99378%208.5C4.70038%208.5%204.46253%208.26215%204.46253%207.96875V6.76444C4.46261%206.32307%204.6381%205.89991%204.95021%205.58781C5.26231%205.2757%205.68547%205.10021%206.12684%205.10014H8.11073C8.5521%205.10021%208.97526%205.2757%209.28736%205.58781C9.59947%205.89991%209.77496%206.32307%209.77503%206.76444V7.96875C9.77503%208.26215%209.53719%208.5%209.24378%208.5C8.95038%208.5%208.71253%208.26215%208.71253%207.96875Z%22%20fill%3D%22currentColor%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");}
.demo .ic-museum{--m: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Icon%2Fmuseum%22%3E%20%3Cg%20id%3D%22icon%22%3E%20%3Cpath%20d%3D%22M8.12363%202.16382C8.27247%202.10359%208.44236%202.1134%208.58432%202.19356L14.6052%205.59343C14.8606%205.73771%2014.9507%206.06221%2014.8065%206.31767C14.6622%206.57314%2014.3377%206.66323%2014.0822%206.51896L8.32285%203.26644L2.56349%206.51896C2.30801%206.66323%201.98352%206.57314%201.83925%206.31767C1.69499%206.06221%201.7851%205.73771%202.04054%205.59343L8.06137%202.19356L8.12363%202.16382Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M14.3437%205.52521C14.6372%205.52521%2014.875%205.76306%2014.875%206.05646C14.875%206.34986%2014.6372%206.58771%2014.3437%206.58771H2.30208C2.00868%206.58771%201.77083%206.34986%201.77083%206.05646C1.77083%205.76306%202.00868%205.52521%202.30208%205.52521H14.3437Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M3.54167%2011.7231V6.05646C3.54167%205.76306%203.77952%205.52521%204.07292%205.52521C4.36632%205.52521%204.60417%205.76306%204.60417%206.05646V11.7231C4.60417%2012.0165%204.36632%2012.2544%204.07292%2012.2544C3.77952%2012.2544%203.54167%2012.0165%203.54167%2011.7231Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M6.375%2011.7231V6.05646C6.375%205.76306%206.61285%205.52521%206.90625%205.52521C7.19965%205.52521%207.4375%205.76306%207.4375%206.05646V11.7231C7.4375%2012.0165%207.19965%2012.2544%206.90625%2012.2544C6.61285%2012.2544%206.375%2012.0165%206.375%2011.7231Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M9.20833%2011.7231V6.05646C9.20833%205.76306%209.44618%205.52521%209.73958%205.52521C10.033%205.52521%2010.2708%205.76306%2010.2708%206.05646V11.7231C10.2708%2012.0165%2010.033%2012.2544%209.73958%2012.2544C9.44618%2012.2544%209.20833%2012.0165%209.20833%2011.7231Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M12.0417%2011.7231V6.05646C12.0417%205.76306%2012.2795%205.52521%2012.5729%205.52521C12.8663%205.52521%2013.1042%205.76306%2013.1042%206.05646V11.7231C13.1042%2012.0165%2012.8663%2012.2544%2012.5729%2012.2544C12.2795%2012.2544%2012.0417%2012.0165%2012.0417%2011.7231Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M13.9896%2011.1919C14.283%2011.1919%2014.5208%2011.4297%2014.5208%2011.7231C14.5208%2012.0165%2014.283%2012.2544%2013.9896%2012.2544H2.65625C2.36285%2012.2544%202.125%2012.0165%202.125%2011.7231C2.125%2011.4297%202.36285%2011.1919%202.65625%2011.1919H13.9896Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M14.6979%2013.3169C14.9913%2013.3169%2015.2292%2013.5547%2015.2292%2013.8481C15.2292%2014.1415%2014.9913%2014.3794%2014.6979%2014.3794H1.94792C1.65452%2014.3794%201.41667%2014.1415%201.41667%2013.8481C1.41667%2013.5547%201.65452%2013.3169%201.94792%2013.3169H14.6979Z%22%20fill%3D%22currentColor%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");}
.demo .ic-food{--m: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2213.421%22%20height%3D%2213.421%22%20viewBox%3D%220%200%2013.421%2013.421%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Icon%2Ffood%22%3E%20%3Cg%20id%3D%22icon%22%3E%20%3Cpath%20d%3D%22M1.11841%205.00502V1.53782C1.11841%201.30619%201.30619%201.11842%201.53782%201.11842C1.76945%201.11842%201.95723%201.30619%201.95723%201.53782V5.00502C1.95726%205.22003%202.04274%205.42638%202.19478%205.57842C2.34683%205.73042%202.55319%205.81598%202.76819%205.81598C2.8746%205.81596%202.98005%205.79498%203.07837%205.75427C3.17675%205.71352%203.2663%205.65372%203.34159%205.57842C3.41689%205.50313%203.47669%205.41358%203.51744%205.3152C3.55815%205.21688%203.57913%205.11143%203.57915%205.00502V1.53782C3.57915%201.30619%203.76692%201.11842%203.99855%201.11842C4.23008%201.11853%204.41796%201.30626%204.41796%201.53782V5.00502C4.41794%205.22162%204.37524%205.4362%204.29235%205.63631C4.20945%205.83645%204.08784%206.01831%203.93466%206.17149C3.78148%206.32467%203.59962%206.44628%203.39948%206.52918C3.19937%206.61207%202.98479%206.65477%202.76819%206.65479C2.33072%206.65479%201.91108%206.48079%201.60171%206.17149C1.29237%205.86214%201.11844%205.44249%201.11841%205.00502Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M2.34864%2011.6033V6.23511C2.34864%206.00348%202.53656%205.81598%202.76819%205.81598C2.99982%205.81598%203.18746%206.00348%203.18746%206.23511V11.6033C3.18746%2011.8349%202.99968%2012.0227%202.76805%2012.0227C2.53642%2012.0227%202.34864%2011.8349%202.34864%2011.6033Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M8.61174%2011.6035V6.68254L8.61884%206.60664C8.6505%206.43382%208.78826%206.29565%208.96725%206.26805C9.23968%206.22614%209.46051%206.10531%209.61711%205.90599C9.77593%205.70383%209.89781%205.38319%209.89781%204.89297C9.89781%204.21212%209.77997%203.56419%209.57616%203.02913C9.37024%202.4886%209.08929%202.09461%208.78759%201.87904C8.59915%201.74444%208.55533%201.48264%208.68983%201.29417C8.82443%201.10573%209.08623%201.06192%209.27471%201.19641C9.75581%201.54006%2010.1184%202.09672%2010.3598%202.73041C10.6033%203.36967%2010.7366%204.11992%2010.7366%204.89297C10.7366%205.52105%2010.5793%206.03924%2010.2768%206.42424C10.0535%206.70839%209.76651%206.89853%209.45055%207.00802V11.6035C9.45055%2011.8351%209.26278%2012.0229%209.03115%2012.0229C8.79952%2012.0229%208.61174%2011.8351%208.61174%2011.6035Z%22%20fill%3D%22currentColor%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");}
.demo .ic-plus{--m: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2229.5385%22%20height%3D%2229.5385%22%20viewBox%3D%220%200%2029.5385%2029.5385%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Icon%2Fplus%22%3E%20%3Cg%20id%3D%22icon%22%3E%20%3Cpath%20d%3D%22M13.5385%2023.0769V5.84615C13.5385%205.33635%2013.9517%204.92308%2014.4615%204.92308C14.9713%204.92308%2015.3846%205.33635%2015.3846%205.84615V23.0769C15.3846%2023.5867%2014.9713%2024%2014.4615%2024C13.9517%2024%2013.5385%2023.5867%2013.5385%2023.0769Z%22%20fill%3D%22white%22%2F%3E%20%3Cpath%20d%3D%22M23.0769%2013.5385C23.5867%2013.5385%2024%2013.9517%2024%2014.4615C24%2014.9713%2023.5867%2015.3846%2023.0769%2015.3846H5.84615C5.33635%2015.3846%204.92308%2014.9713%204.92308%2014.4615C4.92308%2013.9517%205.33635%2013.5385%205.84615%2013.5385H23.0769Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");}
.demo .ic-trash{--m: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Icon%2Ftrash%22%3E%20%3Cg%20id%3D%22icon%22%3E%20%3Cpath%20d%3D%22M13.1667%204C13.4428%204%2013.6667%204.22386%2013.6667%204.5C13.6667%204.77614%2013.4428%205%2013.1667%205H3.16667C2.89052%205%202.66667%204.77614%202.66667%204.5C2.66667%204.22386%202.89052%204%203.16667%204H13.1667Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M9.33333%204.5V3.66667H7V4.5C7%204.77614%206.77614%205%206.5%205C6.22386%205%206%204.77614%206%204.5V3.16667C6%202.89052%206.22386%202.66667%206.5%202.66667H9.83333C10.1095%202.66667%2010.3333%202.89052%2010.3333%203.16667V4.5C10.3333%204.77614%2010.1095%205%209.83333%205C9.55719%205%209.33333%204.77614%209.33333%204.5Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M11.3333%205.83333C11.3333%205.3731%2010.9602%205%2010.5%205H5.83333C5.3731%205%205%205.3731%205%205.83333V11.8333C5%2012.2936%205.3731%2012.6667%205.83333%2012.6667H10.5C10.9602%2012.6667%2011.3333%2012.2936%2011.3333%2011.8333V5.83333ZM12.3333%2011.8333C12.3333%2012.8459%2011.5125%2013.6667%2010.5%2013.6667H5.83333C4.82081%2013.6667%204%2012.8459%204%2011.8333V5.83333C4%204.82081%204.82081%204%205.83333%204H10.5C11.5125%204%2012.3333%204.82081%2012.3333%205.83333V11.8333Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M6.33333%2010.5V7.16667C6.33333%206.89052%206.55719%206.66667%206.83333%206.66667C7.10948%206.66667%207.33333%206.89052%207.33333%207.16667V10.5C7.33333%2010.7761%207.10948%2011%206.83333%2011C6.55719%2011%206.33333%2010.7761%206.33333%2010.5Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M9%2010.5V7.16667C9%206.89052%209.22386%206.66667%209.5%206.66667C9.77614%206.66667%2010%206.89052%2010%207.16667V10.5C10%2010.7761%209.77614%2011%209.5%2011C9.22386%2011%209%2010.7761%209%2010.5Z%22%20fill%3D%22currentColor%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");}
.demo .ic-sparkles{--m: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2218.4154%22%20height%3D%2218.4154%22%20viewBox%3D%220%200%2018.4154%2018.4154%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Icon%2Fsparkles%22%3E%20%3Cg%20id%3D%22icon%22%3E%20%3Cpath%20d%3D%22M7.0976%202.68558C7.0976%206.17683%208.9775%208.05673%2012.4688%208.05673C8.9775%208.05673%207.0976%209.93663%207.0976%2013.4279C7.0976%209.93663%205.21769%208.05673%201.72644%208.05673C5.21769%208.05673%207.0976%206.17683%207.0976%202.68558Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M14.0034%2010.3587C14.0034%2012.1004%2014.9472%2013.0442%2016.6889%2013.0442C14.9472%2013.0442%2014.0034%2013.988%2014.0034%2015.7298C14.0034%2013.988%2013.0596%2013.0442%2011.3178%2013.0442C13.0596%2013.0442%2014.0034%2012.1004%2014.0034%2010.3587Z%22%20fill%3D%22currentColor%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");}
.demo .ic-back{--m: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2218.7077%22%20height%3D%2218.7077%22%20viewBox%3D%220%200%2018.7077%2018.7077%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Icon%2Farrow-back%22%3E%20%3Cg%20id%3D%22icon%22%3E%20%3Cpath%20d%3D%22M15.3949%208.9641C15.7177%208.9641%2015.9795%209.22584%2015.9795%209.54872C15.9795%209.87159%2015.7177%2010.1333%2015.3949%2010.1333H3.70256C3.37969%2010.1333%203.11795%209.87159%203.11795%209.54872C3.11795%209.22584%203.37969%208.9641%203.70256%208.9641H15.3949Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M8.35585%204.06867C8.58415%203.84036%208.95422%203.84036%209.18253%204.06867C9.41083%204.29697%209.41083%204.66704%209.18253%204.89535L4.5292%209.54867L9.18253%2014.202C9.41083%2014.4303%209.41083%2014.8004%209.18253%2015.0287C8.95422%2015.257%208.58415%2015.257%208.35585%2015.0287L3.28918%209.96202C3.06087%209.73371%203.06087%209.36364%203.28918%209.13533L8.35585%204.06867Z%22%20fill%3D%22currentColor%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");}
.demo .stage{position: absolute; left: 50%; top: 50%; width: calc(var(--stage-w) * 1px); height: calc(var(--stage-h) * 1px); transform: translate(-50%,-50%) scale(var(--s)); transform-origin: center center;}
.demo .layer{position: absolute; inset: 0px;}
.demo .item{position: absolute; left: 0px; top: 0px; will-change: transform;}
.demo .hl{position: relative; display: inline-block; padding: 0px 6px;}
.demo .hl::before{content: ""; position: absolute; inset: 6px -8px 2px -6px; background: var(--accent); z-index: -1; clip-path: polygon(0px 16%, 100% 0px, 100% 88%, 0px 100%);}
.demo .note{font: 400 22px/1 var(--font-hand); color: rgb(0, 0, 0);}
.demo .arrow img{width: 100%; height: 100%;}
.demo .arrow.a67{width: 91.4px; height: 115px;}
.demo .arrow.a67b{width: 283.9px; height: 236.6px;}
.demo .arrow.a68b{width: 120.4px; height: 50.8px;}
.demo .arrow.fa{width: 162px; height: 50.8px;}
.demo .arrow.fb{width: 96.4px; height: 130.6px;}
.demo .arrow.ea{width: 162px; height: 50.8px;}
.demo .arrow.eb{width: 159.4px; height: 50.8px;}
.demo .arrow.sa{width: 32.8px; height: 83.5px;}
.demo .mark img{width: 100%; height: 100%; display: block;}
.demo .mark.crown{width: 44.1px; height: 44.4px;}
.demo .mark.spark{width: 35px; height: 32.4px;}
.demo .sheetcard{width: 300px; box-sizing: border-box; padding: 12px 18px 18px; border-radius: 24px; background: var(--surface); box-shadow: rgba(27, 27, 24, 0.22) 0px 22px 54px, rgba(27, 27, 24, 0.08) 0px 4px 12px;}
.demo .sheetcard .grab{display: block; width: 40px; height: 4px; margin: 0px auto 14px; border-radius: 999px; background: var(--line-strong);}
.demo .sheetcard .chips{display: flex; align-items: center; gap: 7px; margin-bottom: 12px;}
.demo .sheetcard .tchip{display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px 5px 9px; border-radius: 999px; font: 600 13px/1 var(--font-ui);}
.demo .sheetcard .tchip .ic{width: 14px; height: 14px;}
.demo .sheetcard .tchip.food{background: var(--food-bg); color: var(--food-ink);}
.demo .sheetcard .tchip.del{background: var(--surface-2); color: var(--ink-2);}
.demo .sheetcard .close{position: relative; margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2);}
.demo .sheetcard .close::before,.demo .sheetcard .close::after{content: ""; position: absolute; left: 8px; top: 12px; width: 10px; height: 1.5px; border-radius: 2px; background: var(--ink-2);}
.demo .sheetcard .close::before{transform: rotate(45deg);}
.demo .sheetcard .close::after{transform: rotate(-45deg);}
.demo .sheetcard b{display: block; font: 700 21px/1.2 var(--font-display); color: var(--ink);}
.demo .sheetcard .d{margin-top: 7px; font: 400 14px/1.3 var(--font-ui); color: var(--ink-2);}
.demo .sheetcard .tm{margin-top: 3px; font: 500 14px/1.3 var(--font-mono); color: var(--ink-2);}
.demo .sheetcard .restore{display: block; margin-top: 16px; padding: 14px; border-radius: 100px; background: var(--ink); color: var(--surface); text-align: center; font: 700 16px/1 var(--font-display);}
.demo .arrow.flipv img{transform: scaleY(-1);}
.demo .mat{display: flex; align-items: center; gap: 6px; height: 45.4px; padding: 6px 6px 6px 12px; border-radius: 10px; color: var(--c);}
.demo .mat .tile{position: relative; flex: 0 0 auto; width: 27.7px; height: 27.7px; border-radius: 7.7px; background: rgba(255, 255, 255, 0.5); display: grid; place-items: center;}
.demo .mat .tile .ic{width: 12px; height: 12px;}
.demo .mat .tile .off{position: absolute; top: -3.8px; right: -3.8px; width: 12.6px; height: 12.6px; border-radius: 6.3px; background: var(--surface); border: 1.26px solid var(--paper); display: grid; place-items: center;}
.demo .mat .tile .off .ic{width: 6.9px; height: 6.9px; color: var(--ink-2);}
.demo .mat .t{width: 183px;}
.demo .mat .t b{display: block; font: 500 11.55px/14px var(--font-ui); white-space: nowrap;}
.demo .mat .t small{display: block; margin-top: 1px; font: 500 10px/10px var(--font-mono); opacity: 0.7; white-space: nowrap;}
.demo .mat .open{flex: 0 0 auto; width: 24.6px; height: 24.6px; display: grid; place-items: center;}
.demo .mat .open .ic{width: 12.3px; height: 12.3px;}
.demo .mat.transfer{background: var(--transfer-bg); --c: var(--transfer-ink);}
.demo .ic-doc{--m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpath%20d%3D%22M14%203v5h5%22%2F%3E%3Cpath%20d%3D%22M9%2013h6%22%2F%3E%3Cpath%20d%3D%22M9%2017h6%22%2F%3E%3C%2Fsvg%3E");}
.demo .ic-edit{--m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2016.2V20h3.8L18.6%209.2l-3.8-3.8z%22%2F%3E%3Cpath%20d%3D%22M13.4%206.6l3.8%203.8%22%2F%3E%3C%2Fsvg%3E");}
.demo .ic-external{--m: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2212.3152%22%20height%3D%2212.3152%22%20viewBox%3D%220%200%2012.3152%2012.3152%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Icon%2Fexternal%22%20opacity%3D%220.7%22%3E%20%3Cg%20id%3D%22icon%22%3E%20%3Cpath%20d%3D%22M9.62121%205.19571V2.69419H7.1197C6.80088%202.69419%206.54242%202.43574%206.54242%202.11692C6.54242%201.7981%206.80088%201.53964%207.1197%201.53964H10.1985C10.5173%201.53964%2010.7758%201.7981%2010.7758%202.11692V5.19571C10.7758%205.51452%2010.5173%205.77298%2010.1985%205.77298C9.87967%205.77298%209.62121%205.51452%209.62121%205.19571Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M9.79004%201.70847C10.0155%201.48303%2010.3814%201.48303%2010.6068%201.70847C10.8323%201.93391%2010.8323%202.29984%2010.6068%202.52527L6.37351%206.75861C6.14807%206.98405%205.78215%206.98405%205.55671%206.75861C5.33127%206.53317%205.33127%206.16725%205.55671%205.94181L9.79004%201.70847Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M1.53939%209.04419V4.42601C1.53939%203.9667%201.72173%203.52609%202.04651%203.20131C2.37129%202.87653%202.81191%202.69419%203.27121%202.69419H5.19545C5.51427%202.69419%205.77273%202.95264%205.77273%203.27146C5.77273%203.59028%205.51427%203.84874%205.19545%203.84874H3.27121C3.11811%203.84874%202.97107%203.90935%202.86281%204.01761C2.75455%204.12587%202.69394%204.27291%202.69394%204.42601V9.04419C2.69394%209.19729%202.75455%209.34433%202.86281%209.45259C2.97107%209.56085%203.11811%209.62146%203.27121%209.62146H7.88939L7.94652%209.61846C8.07864%209.60532%208.20309%209.5473%208.29779%209.45259C8.3925%209.35788%208.45052%209.23344%208.46366%209.10132L8.46667%209.04419V7.11995C8.46667%206.80113%208.72512%206.54267%209.04394%206.54267C9.36276%206.54267%209.62121%206.80113%209.62121%207.11995V9.04419C9.62121%209.5035%209.43887%209.94411%209.11409%2010.2689C8.78932%2010.5937%208.3487%2010.776%207.88939%2010.776H3.27121C2.81191%2010.776%202.37129%2010.5937%202.04651%2010.2689C1.72173%209.94411%201.53939%209.5035%201.53939%209.04419Z%22%20fill%3D%22currentColor%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");}
.demo .ic-mat-a{--m: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio%3D%22none%22%20overflow%3D%22visible%22%20style%3D%22display%3A%20block%3B%22%20width%3D%2211.5455%22%20height%3D%2211.5455%22%20viewBox%3D%220%200%2011.5455%2011.5455%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20id%3D%22Icon%22%20clip-path%3D%22url(%23clip0_0_426)%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M7.4674%203.73291L4.15386%207.04646C3.98294%207.27435%203.89996%207.55625%203.92015%207.84039C3.94035%208.12454%204.06236%208.39187%204.26379%208.5933C4.46522%208.79473%204.73255%208.91674%205.01669%208.93694C5.30084%208.95713%205.58274%208.87415%205.81063%208.70323L9.12417%205.38969C9.39033%205.01359%209.51492%204.55549%209.47591%204.0964C9.43691%203.63731%209.23681%203.2068%208.91101%202.881C8.58522%202.55521%208.15471%202.35511%207.69562%202.3161C7.23653%202.2771%206.77843%202.40169%206.40233%202.66784L3.02962%206.04056C2.55335%206.55725%202.29536%207.23812%202.30965%207.94068C2.32395%208.64325%202.60941%209.31306%203.1063%209.80996C3.60319%2010.3068%204.27301%2010.5923%204.97557%2010.6066C5.67814%2010.6209%206.35901%2010.3629%206.8757%209.88664L9.42003%207.34231%22%20stroke%3D%22currentColor%22%20stroke-width%3D%220.887557%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%20%3C%2Fg%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip0_0_426%22%3E%20%3Crect%20width%3D%2211.5455%22%20height%3D%2211.5455%22%20fill%3D%22white%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3C%2Fsvg%3E");}
.demo .ic-wifi-off{--m: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011a13%2013%200%200%201%2018%200%22%2F%3E%3Cpath%20d%3D%22M7%2015a7%207%200%200%201%2010%200%22%2F%3E%3Cpath%20d%3D%22M12%2018.8h0.01%22%2F%3E%3Cpath%20d%3D%22M4%204l16%2016%22%2F%3E%3C%2Fsvg%3E");}
@keyframes hint { 
  0% { transform: scaleY(0); transform-origin: center top; }
  50% { transform: scaleY(1); transform-origin: center top; }
  51% { transform-origin: center bottom; }
  100% { transform: scaleY(0); transform-origin: center bottom; }
}
.demo .fab{width: 64px; height: 64px; border-radius: 50%; background: var(--ink); color: rgb(255, 255, 255); display: grid; place-items: center; box-shadow: rgba(27, 27, 24, 0.2) 0px 5px 11px, rgba(27, 27, 24, 0.1) 0px 2.5px 3.7px;}
.demo .fab .ic{width: 30px; height: 30px;}
.demo .simplify{display: flex; align-items: center; gap: 10px; width: 314px; padding: 11px 13px; border-radius: 17.5px; background: var(--accent); color: var(--accent-ink);}
.demo .simplify .t{flex: 1 1 0%; min-width: 0px;}
.demo .simplify .t b{display: flex; align-items: center; gap: 6px; font: 600 13px/16px var(--font-ui);}
.demo .simplify .t p{margin: 2px 0px 0px; font: 400 10.5px/14px var(--font-ui); opacity: 0.7;}
.demo .simplify .toggle{flex: 0 0 auto; width: 40px; height: 24.5px; border-radius: 12px; background: rgba(27, 27, 24, 0.2); position: relative;}
.demo .simplify .toggle::after{content: ""; position: absolute; left: 1.75px; top: 1.75px; width: 21px; height: 21px; border-radius: 50%; background: var(--surface);}
.demo .phone-wrap{position: absolute; left: 650px; top: 131px; width: 300px; height: 649px; will-change: transform;}
.demo .phone{position: absolute; left: 0px; top: 0px; width: 390px; height: 844px; transform: scale(0.7795); transform-origin: 0px 0px; background: var(--paper); border: 5px solid var(--ink); border-radius: 46px; overflow: hidden; display: flex; flex-direction: column; box-shadow: rgba(27, 27, 24, 0.18) 0px 20px 60px, rgba(27, 27, 24, 0.08) 0px 4px 16px;}
.demo .hdr{flex: 0 0 auto; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0px 4px; background: var(--surface); border-bottom: 1px solid var(--line);}
.demo .hdr .back{width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink);}
.demo .hdr .back .ic{width: 24px; height: 24px;}
.demo .hdr h4{margin: 0px; font: 700 20px/24px var(--font-display);}
.demo .phone-wrap{opacity: 0;}
.demo .phone-wrap{opacity: 1;}
.demo .phone{background: var(--paper);}
.demo .fh{position: absolute; margin: 0px; font: 400 42px/1.2 var(--font-serif); color: rgb(0, 0, 0);}
.demo .fp{position: absolute; margin: 0px; font: 400 19px/1.45 var(--font-ui); color: var(--ink-2);}
.demo .fh .hl::before{inset: 4px -8px 0px -6px;}
.demo .kicker{position: absolute; display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3);}
.demo .kicker i{width: 8px; height: 8px; border-radius: 50%; background: var(--accent);}
.demo .check{display: flex; align-items: center; gap: 12px; width: 260px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font: 500 15px/1.3 var(--font-ui); color: var(--ink);}
.demo .check .box{flex: 0 0 auto; width: 24px; height: 24px; box-sizing: border-box; border-radius: 8px; border: 1.5px solid var(--line-strong); background: var(--surface);}
.demo .check.done .box{background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333D17' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px 15px no-repeat; border-color: var(--accent);}
.demo .check.done{color: var(--ink-3); text-decoration: line-through;}
.demo .av{position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden; font: 700 8px/1 var(--font-display); letter-spacing: 0.5px;}
.demo .av img{position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; display: block;}
.demo .stack{display: inline-flex; align-items: center;}
.demo .stack .av{width: 24px; height: 24px; border: 2px solid var(--surface); box-sizing: content-box; margin-left: -9px;}
.demo .stack .av:first-child{margin-left: 0px;}
.demo .av.b{background: var(--transfer-bg); color: var(--transfer-ink);}
.demo .av.o{background: var(--museum-bg); color: var(--museum-ink);}
.demo .av.r{background: var(--food-bg); color: var(--food-ink);}
.demo .av.g{background: var(--train-bg); color: var(--train-ink);}
.demo .pk{display: flex; flex-direction: column; height: 100%; background: var(--paper);}
.demo .pk .hdr{flex: 0 0 auto;}
.demo .pk .ftabs{flex: 0 0 auto; display: flex; gap: 24px; padding: 0px 18px; height: 53px; background: var(--surface); border-bottom: 1px solid var(--line);}
.demo .pk .ftabs span{display: flex; align-items: center; font: 600 16px/1 var(--font-ui); color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;}
.demo .pk .ftabs span.on{color: var(--ink); border-color: var(--ink);}
.demo .pk .list{flex: 1 1 0%; min-height: 0px; overflow-y: auto; scrollbar-width: none; padding: 16px 18px 90px;}
.demo .pk .list::-webkit-scrollbar{display: none;}
.demo .pk .pc{padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: background-color 0.35s, border-color 0.35s;}
.demo .pk .pc .row{display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;}
.demo .pk .pc b{font: 600 15px/1.2 var(--font-ui); color: var(--ink);}
.demo .pk .pc small{font: 500 12px/1 var(--font-mono); color: var(--ink-3);}
.demo .pk .pc .bar{display: flex; align-items: center; gap: 10px; height: 40px; padding: 0px 14px; border-radius: 100px; background: var(--paper);}
.demo .pk .pc .track{flex: 1 1 0%; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden;}
.demo .pk .pc .fill{height: 100%; width: 0px; background: var(--accent); border-radius: 999px; transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);}
.demo .pk .pc .pct{font: 500 12px/1 var(--font-mono); color: var(--ink-3); min-width: 32px; text-align: right;}
.demo .pk .pc .done{display: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); place-items: center;}
.demo .pk .pc .done::after{content: ""; width: 7px; height: 4px; border-width: 0px 0px 2px 2px; border-style: none none solid solid; border-color: currentcolor currentcolor rgb(255, 255, 255) rgb(255, 255, 255); border-image: none; transform: rotate(-45deg) translate(1px, -1px);}
.demo .pk .cat{display: flex; align-items: center; gap: 8px; margin: 22px 0px 6px;}
.demo .pk .cat b{flex: 1 1 0%; font: 600 16px/1.2 var(--font-display); color: var(--ink);}
.demo .pk .cat.full b{color: var(--ink-3);}
.demo .pk .cat small{font: 500 12px/1 var(--font-mono); color: var(--ink-3);}
.demo .pk .cat .ic{width: 14px; height: 14px; color: var(--ink-3);}
.demo .pk .ci{display: flex; align-items: center; gap: 14px; height: 57px; border-bottom: 1px solid var(--line); cursor: pointer; font: 500 15px/1.3 var(--font-ui); color: var(--ink); user-select: none;}
.demo .pk .ci:hover .box{border-color: var(--ink-3);}
.demo .pk .ci .box{flex: 0 0 auto; width: 24px; height: 24px; box-sizing: border-box; border-radius: 8px; border: 1.5px solid var(--line-strong); background: var(--surface); transition: background-color 0.2s, border-color 0.2s;}
.demo .pk .ci.done .box{background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333D17' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px 15px no-repeat; border-color: var(--accent);}
.demo .pk .ci.done{color: var(--ink-3); text-decoration: line-through;}
.demo .pk .add{display: flex; align-items: center; gap: 8px; height: 34px; font: 500 13px/1 var(--font-ui); color: var(--ink-3);}
.demo .pk .add .ic{width: 12px; height: 12px;}
.demo .pk .fab{position: absolute; right: 20px; bottom: 24px; width: 52px; height: 52px;}
.demo .pk .fab .ic{width: 24px; height: 24px;}
.demo .fl{display: flex; flex-direction: column; height: 100%; background: var(--paper);}
.demo .fl .hdr{flex: 0 0 auto;}
.demo .fl .sub{flex: 0 0 auto; padding: 14px 20px 6px; font: 500 15px/1.2 var(--font-ui); color: var(--ink-2);}
.demo .fl .list{flex: 1 1 0%; min-height: 0px; overflow-y: auto; scrollbar-width: none; padding: 8px 18px 100px;}
.demo .fl .list::-webkit-scrollbar{display: none;}
.demo .fl .grp{margin: 22px 0px 8px; font: 500 11px/1 var(--font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3);}
.demo .fl .grp:first-child{margin-top: 8px;}
.demo .fl .doc{display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; cursor: pointer; transition: border-color 0.22s;}
.demo .fl .doc:hover{border-color: var(--line-strong);}
.demo .fl .doc .tile{flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;}
.demo .fl .doc .tile .ic{width: 20px; height: 20px;}
.demo .fl .tile.other{background: var(--surface-2); color: var(--ink-2);}
.demo .fl .tile.flight{background: var(--flight-bg); color: var(--flight-ink);}
.demo .fl .tile.hotel{background: var(--hotel-bg); color: var(--hotel-ink);}
.demo .fl .tile.museum{background: var(--museum-bg); color: var(--museum-ink);}
.demo .fl .doc .t{flex: 1 1 0%; min-width: 0px;}
.demo .fl .doc .t b{display: block; font: 600 15px/1.3 var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.demo .fl .doc .t small{display: block; margin-top: 3px; font: 400 11px/1 var(--font-mono); color: var(--ink-3);}
.demo .fl .doc .edit{flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3);}
.demo .fl .doc .edit .ic{width: 16px; height: 16px;}
.demo .fl .fab{position: absolute; right: 20px; bottom: 24px; width: 52px; height: 52px;}
.demo .fl .fab .ic{width: 24px; height: 24px;}
.demo .ex{position: relative; height: 100%; overflow: hidden; background: var(--paper);}
.demo .ex .view{position: absolute; inset: 0px; display: flex; flex-direction: column; background: var(--paper); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);}
.demo .ex .view.settle{transform: translateX(100%);}
.demo .ex .hdr{flex: 0 0 auto; justify-content: flex-start;}
.demo .ex .ftabs{flex: 0 0 auto; display: flex; gap: 26px; padding: 0px 20px; height: 54px; background: var(--surface); border-bottom: 1px solid var(--line);}
.demo .ex .ftabs span{display: flex; align-items: center; font: 600 16px/1 var(--font-ui); color: var(--ink-3); border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer;}
.demo .ex .ftabs span.on{color: var(--ink); border-color: var(--ink);}
.demo .ex .scroll{flex: 1 1 0%; min-height: 0px; overflow-y: auto; scrollbar-width: none; padding: 16px 16px 40px;}
.demo .ex .scroll::-webkit-scrollbar{display: none;}
.demo .ex .total{padding: 18px 20px 16px; border-radius: 24px; background: var(--accent); margin-bottom: 12px;}
.demo .ex .total .of{margin-top: 8px; font: 400 12.5px/1.3 var(--font-mono); color: var(--ink-2);}
.demo .ex .total .tog{margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(27, 27, 24, 0.22); font: 400 12.5px/1.3 var(--font-mono); color: var(--ink-2);}
.demo .ex .total .tog b{font-weight: 500; color: var(--ink);}
.demo .ex .day{display: flex; justify-content: space-between; align-items: baseline;}
.demo .ex .day span{letter-spacing: 1px; font-size: 11px; color: var(--ink-3);}
.demo .ex .lbl-mono{font: 500 11px/1 var(--font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-2);}
.demo .ex .total .sum{margin-top: 8px; font: 800 34px/1 var(--font-display); color: var(--ink); letter-spacing: -0.02em;}
.demo .ex .owecard{border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-bottom: 18px; cursor: pointer; transition: border-color 0.22s;}
.demo .ex .owecard:hover{border-color: var(--line-strong);}
.demo .ex .owecard .oh{padding: 11px 16px; background: var(--accent);}
.demo .ex .owecard .ob{display: flex; align-items: center; padding: 13px 16px;}
.demo .ex .owecard .ob div{flex: 1 1 0%;}
.demo .ex .owecard .ov{font: 700 22px/1.1 var(--font-display); color: var(--train-ink);}
.demo .ex .owecard small{display: block; margin-top: 3px; font: 400 13px/1.3 var(--font-ui); color: var(--ink-3);}
.demo .ex .owecard small[hidden]{display: none;}
.demo .ex .owecard .chev{width: 10px; height: 10px; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 0px; border-bottom: 0px; transform: rotate(45deg);}
.demo .ex .day{margin: 16px 2px 8px; font: 500 11px/1 var(--font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3);}
.demo .ex .row{display: flex; align-items: center; gap: 12px; padding: 11px 14px 11px 11px; border-radius: 18px; background: var(--surface); margin-bottom: 8px;}
.demo .ex .row .tile{flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;}
.demo .ex .row .tile .ic{width: 20px; height: 20px;}
.demo .ex .tile.food{background: var(--food-bg); color: var(--food-ink);}
.demo .ex .tile.museum{background: var(--museum-bg); color: var(--museum-ink);}
.demo .ex .tile.transfer{background: var(--transfer-bg); color: var(--transfer-ink);}
.demo .ex .tile.hotel{background: var(--hotel-bg); color: var(--hotel-ink);}
.demo .ex .tile.flight{background: var(--flight-bg); color: var(--flight-ink);}
.demo .ex .tile.other{background: var(--surface-2); color: var(--ink-2);}
.demo .ex .row .t{flex: 1 1 0%; min-width: 0px; margin-right: 10px;}
.demo .ex .row .t b{display: block; height: 22px; font: 700 16px/22px var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.demo .ex .row .t small{display: flex; align-items: center; height: 22px; gap: 7px; margin-top: 6px; font: 400 13px/22px var(--font-ui); color: var(--ink-2); white-space: nowrap;}
.demo .ex .row .t small > .av{width: 22px; height: 22px;}
.demo .ex .row .t small .stack .av{width: 22px; height: 22px; margin-left: -7px; border: 2px solid var(--surface);}
.demo .ex .row .t small .stack .av:first-child{margin-left: 0px;}
.demo .ex .row .sum{flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap;}
.demo .ex .row .sum b{height: 22px; font: 500 16px/22px var(--font-mono); color: var(--ink);}
.demo .ex .row .sum small{display: block; height: 22px; margin-top: 6px; font: 400 12px/22px var(--font-mono); color: var(--ink-3);}
.demo .ex .h5{margin: 6px 0px 14px; font: 700 20px/1.2 var(--font-display); color: var(--ink);}
.demo .ex .simp{display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--accent); color: var(--accent-ink); margin: 0px 0px 22px; cursor: pointer;}
.demo .ex .simp .t{flex: 1 1 0%;}
.demo .ex .simp b{display: flex; align-items: center; gap: 6px; font: 600 15px/1.3 var(--font-ui);}
.demo .ex .simp p{margin: 3px 0px 0px; font: 400 12.5px/1.35 var(--font-ui); opacity: 0.7;}
.demo .ex .simp .tg{flex: 0 0 auto; width: 50px; height: 30px; border-radius: 15px; background: rgba(27, 27, 24, 0.2); position: relative; transition: background-color 0.25s;}
.demo .ex .simp .tg::after{content: ""; position: absolute; left: 2px; top: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);}
.demo .ex .sec{margin: 6px 0px 10px;}
.demo .ex .st{padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px; transition: opacity 0.3s;}
.demo .ex .st .who{display: flex; align-items: center; gap: 8px; font: 600 16px/1.2 var(--font-ui); color: var(--ink);}
.demo .ex .st .who .arr{color: var(--ink-3); font-weight: 400;}
.demo .ex .st .who .amt{margin-left: auto; font: 500 15px/1 var(--font-mono); color: var(--train-ink);}
.demo .ex .st .btn2{margin-top: 12px; height: 44px; border-radius: 100px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/1 var(--font-ui); color: var(--ink); cursor: pointer; transition: background-color 0.22s;}
.demo .ex .st .btn2:hover{background: var(--line);}
.demo .ex .av{width: 26px; height: 26px; font-size: 10px;}
.demo .jr{display: flex; flex-direction: column; height: 100%; background: var(--paper);}
.demo .jr .hdr{flex: 0 0 auto;}
.demo .jr .list{flex: 1 1 0%; min-height: 0px; overflow-y: auto; scrollbar-width: none; padding: 8px 18px 40px;}
.demo .jr .list::-webkit-scrollbar{display: none;}
.demo .jr .list,.demo .ex .scroll,.demo .pk .list,.demo .fl .list{overflow: hidden;}
.demo .jr .day{margin: 22px 0px 10px; font: 500 12px/1 var(--font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-3);}
.demo .jr .day:first-child{margin-top: 10px;}
.demo .jr .en{display: flex; gap: 14px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1.5px solid var(--line); margin-bottom: 10px;}
.demo .jr .en.new{border-color: rgb(227, 121, 0);}
.demo .jr .en .avw{position: relative; flex: 0 0 auto; width: 36px; height: 36px;}
.demo .jr .en .av{width: 36px; height: 36px; font-size: 12px;}
.demo .jr .en.new .avw::after{content: ""; position: absolute; right: -3px; top: -3px; width: 11px; height: 11px; border-radius: 50%; background: rgb(227, 121, 0); border: 2px solid var(--surface);}
.demo .jr .en .t{flex: 1 1 0%; min-width: 0px;}
.demo .jr .en .t p{margin: 0px; font: 400 16px/1.35 var(--font-ui); color: var(--ink-2);}
.demo .jr .en .t p b{font-weight: 700; color: var(--ink);}
.demo .jr .en .t p q{quotes: "«" "»";}
.demo .jr .en .diff{margin-top: 6px; font: 400 14px/1.5 var(--font-mono); color: var(--ink-3);}
.demo .jr .en .diff s{color: var(--ink-3);}
.demo .jr .en .diff em{font-style: normal; color: var(--ink);}
.demo .jr .en time{display: block; margin-top: 8px; font: 400 13px/1 var(--font-mono); color: var(--ink-3);}
.demo .member{display: flex; align-items: center; gap: 12px; width: 300px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);}
.demo .member .av{width: 40px; height: 40px; font-size: 14px;}
.demo .member .t{flex: 1 1 0%;}
.demo .member .t b{display: block; font: 600 15px/1.3 var(--font-ui); color: var(--ink);}
.demo .member .t small{display: block; font: 400 12px/1.3 var(--font-ui); color: var(--ink-3);}
.demo .member .role{font: 500 13px/1 var(--font-mono); color: var(--ink-2);}
.demo .chgbar{display: inline-flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 100px; background: var(--surface); box-shadow: rgba(27, 27, 24, 0.14) 0px 10px 28px, rgba(27, 27, 24, 0.06) 0px 2px 6px; white-space: nowrap;}
.demo .chgbar .av{width: 32px; height: 32px; font-size: 10px;}
.demo .chgbar .txt{font: 400 16px/1 var(--font-ui); color: var(--ink-2);}
.demo .chgbar .txt b{font-weight: 700; color: var(--ink);}
.demo .chgbar .see{margin-left: 18px; font: 600 16px/1 var(--font-ui); color: var(--ink);}
.demo .chgbar .x{width: 14px; height: 14px; position: relative; margin-left: 6px;}
.demo .chgbar .x::before,.demo .chgbar .x::after{content: ""; position: absolute; left: 6px; top: 0px; width: 2px; height: 14px; background: var(--ink-2); border-radius: 1px;}
.demo .chgbar.sm{gap: 8px; padding: 8px 10px 8px 8px;}
.demo .chgbar.sm .av{width: 24px; height: 24px; font-size: 8px;}
.demo .chgbar.sm .txt{font: 400 12.5px/1 var(--font-ui);}
.demo .chgbar.sm .see{margin-left: 12px; font: 600 12.5px/1 var(--font-ui);}
.demo .chgbar.sm .x{width: 11px; height: 11px; margin-left: 4px;}
.demo .chgbar.sm .x::before,.demo .chgbar.sm .x::after{left: 5px; width: 1.6px; height: 11px;}
.demo .chgbar .x::before{transform: rotate(45deg);}
.demo .chgbar .x::after{transform: rotate(-45deg);}
@keyframes caret { 
  50% { opacity: 0; }
}
.demo .reveal{opacity: 0;}
.slider{--ov-n:0}