/* Hallmark · checked: 2026-10-24 · genre: editorial · shape: app screen · theme: brand · brand: WanMiles (user asset) · posture: green welcome, paper app · nav: four bottom tabs · footer: replay control · finish-review: subagent, 4 findings, resolved after recapture · built: the project · redesign: polish · v2.0.0 */
/* Hallmark · copy: verbatim · owner-supplied brand positioning: China, made effortless. */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R4 V3 · weakest: E, undersized utility text; raised labels and touch targets. */
@import url('tokens.css');
*{box-sizing:border-box}
body{margin:0;background:var(--color-surface-1);color:var(--ink);font-family:var(--font-body);font-size:14px;-webkit-font-smoothing:antialiased}
body.welcoming{overflow-y:hidden;overflow-x:clip}
button,input{font:inherit}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--color-surface-2);outline-offset:5px}

a{color:inherit;text-decoration:none}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.app-shell{max-width:480px;min-height:100svh;margin:auto;background:var(--paper);padding-bottom:var(--space-100);box-shadow:none}
.app-header{padding:var(--space-28) var(--space-24) var(--space-12);display:flex;align-items:center;justify-content:space-between}
.wordmark{font-size:27px;font-weight:700;letter-spacing:normal;display:flex;align-items:center;gap:var(--space-12)}
.wordmark span{border-left:1px solid var(--color-surface-4);padding-left:var(--space-12);font-size:13px;letter-spacing:normal;font-family:var(--font-chinese);font-weight:500}
.avatar{position:relative;width:36px;height:36px;border:1px solid var(--color-surface-5);background:var(--color-surface-6);border-radius:50%;font-family:var(--font-display);font-size:17px}
.avatar span{position:absolute;width:6px;height:6px;background:var(--gold);border-radius:50%;right:1px;top:1px}
.view{padding:0 var(--space-24);}
.intro{padding:var(--space-28) 0 var(--space-24)}
.eyebrow{font-size:9px;letter-spacing:normal;font-weight:600;margin:0 0 var(--space-16);color:var(--color-surface-7)}
h1{font-family:var(--font-display);font-weight:400;letter-spacing:normal;font-size:43px;line-height:1.08;margin:0 0 var(--space-16)}
.muted{color:var(--muted);line-height:1.7;font-size:13px}
.intro-note{font-size:12px;margin:0}
.search-box{display:flex;gap:var(--space-12);align-items:center;border:1px solid var(--color-surface-8);border-radius:9px;padding:var(--space-12);margin-bottom:var(--space-24);background:var(--color-surface-9)}
.search-box svg{width:18px;height:18px;color:var(--color-surface-10)}
.search-box input{border:0;background:transparent;width:100%;min-width:0;font-size:12px;color:var(--ink)}
.search-box input::placeholder{color:var(--color-surface-11)}
.search-box kbd{color:var(--color-surface-12);font-size:17px}
.hero-card{height:365px;position:relative;overflow:hidden;border-radius:13px;color:var(--paper);background:var(--color-surface-13)}
.hero-card>img,.hero-overlay{width:100%;height:100%;position:absolute;object-fit:cover}
.hero-card>img{object-position:54% center}
.hero-overlay{background:linear-gradient(180deg,var(--color-surface-14) 10%,var(--color-surface-15) 30%,var(--color-surface-16) 100%)}
.hero-top{position:absolute;top:19px;left:19px;right:19px;display:flex;align-items:center;justify-content:space-between}
.hero-tag{font-size:8px;letter-spacing:normal;border:1px solid var(--color-surface-17);border-radius:20px;padding:var(--space-8) var(--space-12);background:var(--color-surface-18);backdrop-filter:blur(8px)}
.round{height:35px;width:35px;border:1px solid var(--color-surface-19);background:transparent;border-radius:50%;display:grid;place-items:center;padding:0;flex-shrink:0}
.round svg{width:17px;height:17px}
.round.light{border:1px solid var(--color-surface-20);background:var(--color-surface-21);color:var(--color-surface-22);backdrop-filter:blur(8px)}
[data-save][aria-pressed=true]{color:var(--color-gold-ink);background:var(--color-surface-24)}
[data-save][aria-pressed=true] svg{fill:currentColor}
.hero-copy{position:absolute;bottom:53px;left:23px;right:23px}
.overline{font-size:9px;letter-spacing:normal}
.hero-copy h2{font-family:var(--font-display);font-size:35px;line-height:1.13;font-weight:400;letter-spacing:normal;margin:var(--space-12) 0 var(--space-20)}
.hero-link{padding:0;display:flex;align-items:center;justify-content:space-between;width:100%;font-size:11px;color:var(--paper);border:0;background:none}
.hero-link svg{width:19px;height:19px}
.hero-index{position:absolute;bottom:16px;left:23px;right:23px;display:flex;justify-content:space-between;border-top:1px solid var(--color-surface-25);padding-top:var(--space-12);font-size:6px;letter-spacing:normal;color:var(--color-surface-26)}
.essentials-banner{display:flex;gap:var(--space-12);align-items:center;padding:var(--space-20) 0 var(--space-24);border-bottom:1px solid var(--line);margin-bottom:var(--space-28)}
.seal{display:grid;place-items:center;min-width:38px;height:41px;font-family:var(--font-chinese);font-size:21px;color:var(--color-gold-ink);border:1px solid var(--color-surface-28);border-radius:4px;background:var(--color-surface-29)}
.essentials-banner h3,.toolkit-note h3{font-size:13px;font-weight:600;margin:0 0 var(--space-4)}
.essentials-banner p,.toolkit-note p{color:var(--muted);font-size:10px;margin:0;line-height:1.6}
.essentials-banner .round{margin-left:auto}
.section-heading{display:flex;align-items:center;justify-content:space-between}
.section-heading .eyebrow{font-size:8px;margin:0 0 var(--space-8);letter-spacing:normal}
.section-heading h2{font-family:var(--font-display);font-size:25px;letter-spacing:normal;font-weight:400;margin:0}
.section-hanzi{font-family:var(--font-chinese);font-size:35px;color:var(--color-surface-30)}
.filters{display:flex;gap:var(--space-8);overflow-x:auto;margin:var(--space-20) var(--space-neg-24) var(--space-20);padding:0 var(--space-24) var(--space-4);scrollbar-width:none}
.filters button{white-space:nowrap;border:1px solid var(--color-surface-31);background:transparent;font-size:10px;border-radius:20px;padding:var(--space-8) var(--space-12);color:var(--color-surface-32)}
.filters .selected{background:var(--green);border-color:var(--green);color:var(--paper)}
.destination-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24) var(--space-12)}
.place{min-width:0}
.place-photo{position:relative;height:202px;background:var(--color-surface-33);border-radius:9px;overflow:hidden}
.place-photo>.photo-button{border:0;padding:0;background:none;width:100%;height:100%}
.place-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.place-photo .round{position:absolute;right:9px;top:9px;width:29px;height:29px;background:var(--color-surface-34);border:0}
.place-photo .round svg{width:15px;height:15px}
.place-title{background:none;border:0;text-align:left;padding:var(--space-12) 0 var(--space-4);display:flex;align-items:center;justify-content:space-between;width:100%;gap:var(--space-8)}
.place-title strong{font-size:15px;font-weight:600;letter-spacing:normal}
.place-title span{font-family:var(--font-chinese);font-size:12px;color:var(--color-surface-35)}
.place p{margin:0;color:var(--muted);font-size:10px;line-height:1.6}
.place-meta{font-size:8px;color:var(--color-surface-36);letter-spacing:normal;margin-top:var(--space-8);display:flex;gap:var(--space-8);align-items:center}
.place-meta i{width:3px;height:3px;background:var(--color-surface-37);border-radius:50%}
.editor-note{padding:var(--space-32) var(--space-24) var(--space-32);background:var(--color-surface-38);margin:var(--space-36) 0 var(--space-24);border-radius:4px;position:relative;overflow:hidden}
.editor-note>.eyebrow{font-size:7px;letter-spacing:normal;color:var(--color-surface-39)}
.editor-note>p:not(.eyebrow){font-family:var(--font-display);font-size:30px;line-height:1.15;margin:var(--space-16) 0}
.editor-note>span{font-size:10px;line-height:1.8;color:var(--color-surface-40)}
.editor-note .note-stamp{position:absolute;right:20px;bottom:29px;writing-mode:vertical-rl;border:1px solid var(--color-surface-41);padding:var(--space-4) var(--space-4);color:var(--color-surface-42);font-family:var(--font-chinese);letter-spacing:normal}
.replay{width:100%;border:0;background:none;text-align:left;display:flex;justify-content:space-between;padding:var(--space-4) 0 var(--space-16);font-size:10px;color:var(--color-surface-43)}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);z-index:5;background:var(--color-surface-44);backdrop-filter:blur(15px);border-top:1px solid var(--color-surface-45);display:grid;grid-template-columns:repeat(4,1fr);padding:var(--space-12) var(--space-8) max(var(--space-16),env(safe-area-inset-bottom));box-shadow:none}
.bottom-nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-8);border:0;background:none;color:var(--color-surface-47);font-size:9px}
.bottom-nav svg{width:21px;height:21px;stroke-width:1.4}
.bottom-nav button.active{color:var(--green);font-weight:700}
.bottom-nav .active:after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold);bottom:-7px}
.bottom-nav i{position:absolute;right:33%;top:0;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.empty{padding:var(--space-32) 0;text-align:center;font-size:12px;color:var(--muted);line-height:1.8}
.empty h2{font-family:var(--font-display);color:var(--ink);font-size:25px;font-weight:400}
.empty-icon{width:45px;height:45px;margin:var(--space-20);stroke-width:1}
.primary{border:0;border-radius:7px;padding:var(--space-16) var(--space-20);background:var(--green);color:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);width:100%;margin:var(--space-20) 0 var(--space-12);font-size:12px}
.primary svg{width:18px;height:18px}
.text-button{display:block;margin:var(--space-16) auto;border:0;background:none;font-size:12px;color:var(--green);text-decoration:underline;text-underline-offset:4px}
.date-field{display:flex;align-items:center;justify-content:space-between;padding:var(--space-16) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px;margin:var(--space-4) 0 var(--space-24)}
.date-field input{background:transparent;border:0;color:var(--ink);max-width:170px}
.trip-item{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-16) 0;border-bottom:1px solid var(--line)}
.trip-item img{width:65px;height:75px;object-fit:cover;border-radius:6px}
.trip-item>div{flex:1}
.trip-item h3{margin:0 0 var(--space-8);font-size:16px;font-weight:500}
.trip-item p{margin:0;color:var(--muted);font-size:10px}
.remove-trip{border:0;background:none;font-size:20px;color:var(--color-surface-48)}
.trip-item .text-button{margin:var(--space-8) 0 0;font-size:10px;text-align:left;padding:0}
.fine-print{font-size:10px;color:var(--color-surface-49);line-height:1.8}
.toolkit-note{padding:var(--space-24) var(--space-16);background:var(--color-surface-50);display:flex;gap:var(--space-16);align-items:center;margin:var(--space-4) 0 var(--space-28);border-radius:6px}
.toolkit-note .seal{font-size:15px}
.small-title{font-family:var(--font-display);font-size:25px;font-weight:400;margin:var(--space-28) 0 var(--space-12)}
.phrase{display:flex;justify-content:space-between;align-items:center;text-align:left;border:0;border-bottom:1px solid var(--line);padding:var(--space-20) 0;background:none;width:100%}
.phrase strong{font-weight:500;font-size:13px}
.phrase small{display:block;font-size:10px;color:var(--color-surface-51);margin-top:var(--space-4)}
.phrase>span:last-child{font-family:var(--font-chinese);font-size:20px;color:var(--color-surface-52)}
details{border-bottom:1px solid var(--line);padding:var(--space-20) 0}
summary{cursor:pointer;font-size:12px}
details p{font-size:12px;line-height:1.9;color:var(--muted)}
dialog{border:0;background:var(--paper);color:var(--ink);padding:var(--space-24);width:calc(100% - 28px);max-width:450px;max-height:88svh;border-radius:16px;box-shadow:0 25px 100px var(--color-surface-53)}
dialog::backdrop{background:var(--color-surface-54);backdrop-filter:blur(6px)}
.close{position:absolute;right:12px;top:12px;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--paper);font-size:23px;z-index:1}
.detail-img{width:calc(100% + 50px);margin:var(--space-neg-24) var(--space-neg-24) var(--space-24);height:230px;object-fit:cover}
.detail-name{font-family:var(--font-display);font-size:38px;font-weight:400;margin:0}
.detail-subtitle{font-size:12px;line-height:1.8;color:var(--muted)}
.day{border-top:1px solid var(--line);padding:var(--space-16) 0;font-size:12px;line-height:1.8}
.day strong{display:block;font-size:8px;letter-spacing:normal;color:var(--color-surface-55);margin-bottom:var(--space-4)}
.phrase-large{font-family:var(--font-chinese);font-size:clamp(30px,8vw,45px);text-align:center;padding:var(--space-20) 0;line-height:1.7}
.phrase-pinyin{text-align:center;color:var(--color-surface-56);line-height:1.8}
.about-logo{width:90px;height:90px;border-radius:23px;margin:var(--space-16) 0 var(--space-24)}
#toast{position:fixed;z-index:30;bottom:100px;left:50%;max-width:90vw;transform:translate(-50%,10px);background:var(--deep);color:var(--paper);border:1px solid var(--color-surface-57);border-radius:7px;box-shadow:none;padding:var(--space-12) var(--space-20);font-size:12px;opacity:0;pointer-events:none;transition:.2s}
#toast.show{opacity:1;transform:translate(-50%,0)}
.js .welcome{position:fixed;inset:0;margin:auto;width:min(100%,480px);height:100%;z-index:20;overflow:hidden;background:var(--green);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(var(--space-60) + env(safe-area-inset-top)) var(--space-24) calc(var(--space-32) + env(safe-area-inset-bottom));isolation:isolate;transition:opacity .72s ease,visibility .72s;will-change:opacity}
.welcome-pattern{position:absolute;inset:-30px;z-index:-1;color:var(--color-surface-59);opacity:.17;transform:scale(1);transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .8s}
.welcome-pattern svg{width:100%;height:100%;stroke:none}
.welcome:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 48%,var(--color-surface-60) 0,var(--color-surface-61) 32%,var(--color-surface-62) 80%)}
.skip{position:absolute;right:24px;top:25px;border:0;background:none;color:var(--color-surface-63);font-size:10px;letter-spacing:normal;padding:var(--space-8) 0}
.welcome-brand{text-align:center;margin-top:var(--space-12);animation:floatIn .65s both}
.welcome-icon{width:88px;height:88px;overflow:hidden;border-radius:23px;margin:0 auto var(--space-16);box-shadow:0 12px 45px var(--color-surface-64)}
.welcome-icon img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.welcome-brand>p{font-size:7px;letter-spacing:normal;color:var(--color-surface-65)}
.welcome-poem{text-align:center;margin-top:var(--space-neg-16)}
.poem-rule{width:1px;height:34px;background:var(--gold);margin:0 auto var(--space-32);animation:floatIn .6s .1s both}
.chinese-poem{font-family:var(--font-chinese);font-size:36px;line-height:1.8;letter-spacing:normal;margin:0 0 var(--space-24);padding-left:var(--space-12);color:var(--color-surface-66);font-weight:400}
.chinese-poem span{display:block;animation:floatIn .7s .15s both}
.chinese-poem span+span{animation-delay:.3s}
.poem-translation{font-family:var(--font-display);font-size:18px;color:var(--color-surface-67);line-height:1.55;margin:0 0 var(--space-24);animation:floatIn .7s .35s both}
.poem-label{font-size:6px;color:var(--color-surface-68);letter-spacing:normal;animation:floatIn .7s .4s both}
.welcome-bottom{text-align:center;width:100%;max-width:210px}
.welcome-bottom>span:first-child{font-size:6px;letter-spacing:normal;color:var(--color-surface-69)}
.progress{height:1px;background:var(--color-surface-70);margin:var(--space-16) auto var(--space-16);width:120px;overflow:hidden}
.progress i{display:block;height:100%;width:100%;background:var(--gold);transform-origin:left;animation:progress 2s linear both}
.welcome-bottom>span:last-child{font-family:var(--font-chinese);font-size:8px;letter-spacing:normal;color:var(--color-surface-71)}
.js .welcome.leaving{opacity:0;visibility:hidden;pointer-events:none}
.js .welcome.leaving .welcome-pattern{transform:scale(2.7) rotate(9deg);opacity:0}
.js .welcome.leaving .welcome-poem{transform:translateY(-18px);opacity:0;transition:.6s}
.js .welcoming .app-shell{transform:scale(.975);opacity:0}
.app-shell{transition:transform .72s cubic-bezier(.22,1,.36,1),opacity .72s ease}
@keyframes floatIn{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes progress{from{transform:scaleX(0)}
to{transform:scaleX(1)}
}
@keyframes arrive{from{opacity:0;transform:translateY(7px)}
to{opacity:1;transform:translateY(0)}
}
[hidden]{display:none!important}
@media(min-width:600px){body{padding:var(--space-24) 0;background:radial-gradient(ellipse at top,var(--color-surface-72),var(--color-surface-73))}
.app-shell{border-radius:22px 22px 0 0;overflow:hidden}
.js .welcome{top:25px;bottom:0;height:calc(100% - 25px);border-radius:22px 22px 0 0}
.bottom-nav{border-radius:14px 14px 0 0}
}
@media(max-height:680px){.js .welcome{padding-top:var(--space-40);padding-bottom:var(--space-20)}
.welcome-icon{width:63px;height:63px;border-radius:18px}
.welcome-brand>p{font-size:6px}
.chinese-poem{font-size:29px;margin-bottom:var(--space-12)}
.poem-rule{height:22px;margin-bottom:var(--space-12)}
.poem-translation{font-size:16px;margin-bottom:var(--space-12)}
.welcome-poem{margin-top:0}
}
@media(max-width:360px){.view{padding:0 var(--space-20)}
.app-header{padding-left:var(--space-20);padding-right:var(--space-20)}
h1{font-size:38px}
.place-photo{height:177px}
.section-heading h2{font-size:22px}
.essentials-banner p{font-size:9px}
.hero-copy h2{font-size:31px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.welcome-pattern{transform:none!important}
}


.welcome{display:none}
html,body{overflow-x:clip}
h1,h2,h3{overflow-wrap:break-word;min-width:0;text-wrap:balance}
.app-shell{box-shadow:none}
.app-header{padding-top:var(--space-28)}
.avatar span{display:none}
.intro{padding-top:var(--space-24);padding-bottom:var(--space-24)}
h1{font-size:42px;line-height:1.12;margin-bottom:var(--space-16)}
.muted{font-size:14px;color:var(--muted)}
.intro-note{font-size:14px}
.search-box{min-height:48px;padding:var(--space-12)}
.search-box input{font-size:14px}
.hero-card{height:360px}
.hero-copy{bottom:28px}
.hero-copy h2{font-size:36px}
.hero-link{min-height:44px;font-size:13px}
.hero-top{justify-content:flex-end}
.essentials-banner h2,.toolkit-note h2{font:600 15px/1.5 var(--font-body);margin:0 0 var(--space-4)}
.essentials-banner p,.toolkit-note p{font-size:12px}
.section-heading h2{font-size:27px}
.filters{gap:var(--space-8)}
.filters button{min-height:44px;font-size:12px;padding:var(--space-8) var(--space-16)}
.round{width:44px;height:44px}
.place-photo .round{width:44px;height:44px;right:4px;top:4px}
.place-photo .round svg{width:19px;height:19px}
.place p{font-size:12px}
.place-meta{font-size:11px;line-height:1.6;flex-wrap:wrap;gap:var(--space-4)}
.place-meta i{display:none}
.place-title{min-height:44px}
.place-title span{font-size:13px;color:var(--muted)}
.bottom-nav{box-shadow:none;background:var(--paper)}
.bottom-nav button{min-height:44px;font-size:11px}
.bottom-nav .active:after{display:none}
.bottom-nav i{display:none}
.editor-note>.eyebrow{display:none}
.editor-note>span{font-size:12px;color:var(--muted)}
.editor-note .note-stamp{color:var(--color-gold-ink)}
.replay{font-size:12px;min-height:44px}
.fine-print{font-size:12px;color:var(--muted)}
.primary{min-height:48px;font-size:14px}
.primary:disabled,button:disabled{opacity:1;background:var(--color-disabled-fill);color:var(--color-disabled-ink);border-color:var(--color-disabled-border);cursor:not-allowed}
.date-field{font-size:14px;min-height:52px}
.date-field input{min-height:44px}
.trip-item p,.trip-item .text-button{font-size:12px}
.remove-trip{min-width:44px;min-height:44px}
.close{width:44px;height:44px}
.phrase strong{font-size:14px}
.phrase small{font-size:12px;color:var(--muted)}
summary,details p{font-size:14px;line-height:1.7}
summary{min-height:24px}
.skip{min-height:44px;font-size:12px}
.poem-label{font-size:11px;color:var(--color-on-green-muted)}
.welcome-brand>p{font-size:11px;color:var(--color-on-green-soft)}
.welcome-bottom>span:first-child,.welcome-bottom>span:last-child{font-size:11px;color:var(--color-on-green-muted)}
.welcome-pattern{opacity:.12}
.welcome:after{background:none}
.welcome-icon{box-shadow:none}
.seal{color:var(--color-gold-ink)}
[data-save][aria-pressed=true]{color:var(--color-gold-ink)}
.round.light{background:var(--deep);backdrop-filter:none;border-color:var(--color-on-green-muted)}
.search-box kbd{display:none}
.empty{font-size:14px}
.text-button{min-height:44px;font-size:13px}
.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.noscript-note{padding:var(--space-24)}
button:hover:not(:disabled){filter:brightness(.94)}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;transition:none}
.hero-link:focus-visible{outline-color:var(--paper)}
.primary[aria-busy=true]{cursor:progress}
img{font-size:12px}
.image-unavailable{position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-16);background:var(--color-placeholder);color:var(--green);font-size:14px}
.hero-card>.image-unavailable{color:var(--paper);background:var(--green)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


.filters{flex-wrap:nowrap}.filters button{flex-shrink:0;white-space:nowrap}

.bottom-nav button,.filters button,.place-meta,.search-box input::placeholder,.replay,.phrase small,.phrase>span:last-child,.phrase-pinyin{color:var(--muted)}.search-box{border-color:var(--color-form-border)}.welcome-pattern circle,.welcome-pattern>svg>path{opacity:.55}
.filters button.selected{color:var(--paper)}