:root{color-scheme:dark;font-family:Segoe UI,Arial,sans-serif;background:#0f172a;color:#f1f5f9}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}a{color:inherit}button{cursor:pointer}header{border-bottom:1px solid #334155;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:24px;direction:ltr}.brand img{width:42px;height:42px}.preview{font-size:13px;color:#cbd5e1}main{max-width:1240px;margin:auto;padding:32px}h1{font-size:30px;margin:0 0 8px}.intro{color:#a9b8cd;margin:0 0 24px;line-height:1.6}.find{display:flex;gap:12px;align-items:center;margin-bottom:28px}.find input{width:100%;min-width:0;max-width:640px;background:#1e293b;border:1px solid #64748b;border-radius:8px;color:inherit;padding:14px 16px}.guide{white-space:nowrap;color:#7dd3fc;text-underline-offset:4px;padding:12px}.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}.categories{display:flex;flex-direction:column;border:1px solid #334155;border-radius:10px;overflow:hidden;background:#172235}.categories button{display:flex;align-items:center;gap:10px;border:0;border-bottom:1px solid #29374e;background:transparent;color:#cbd5e1;text-align:start;padding:14px 16px;min-height:52px;line-height:1.4}.categories button:last-child{border-bottom:0}.categories button:hover{background:#25344a}.categories button[aria-pressed=true]{background:#30415a;color:#f8fafc;font-weight:700}.dot{width:9px;height:9px;background:var(--accent);border-radius:50%;flex-shrink:0}.panel{min-width:0}h2{margin:0 0 8px;font-size:25px;color:var(--accent,#a78bfa)}.description{color:#b8c5d6;line-height:1.7;margin:0 0 24px;max-width:65ch}.tool-list{border-top:1px solid #334155}.tool{display:flex;align-items:center;justify-content:space-between;gap:16px;text-decoration:none;border-bottom:1px solid #334155;padding:19px 8px;min-height:68px;font-weight:600;font-size:18px;line-height:1.5}.tool:hover{background:#1e293b}.tool .arrow{color:var(--accent);font-size:23px}.meta{font-weight:400;font-size:12px;color:#94a3b8;margin-top:3px}.count{font-size:13px;color:#94a3b8;margin:16px 0}.mobile-category{display:none;width:100%;background:#1e293b;color:#f1f5f9;padding:13px;border:1px solid #64748b;border-radius:8px;margin-bottom:24px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #7dd3fc;outline-offset:3px}.credit{margin-top:36px;padding-top:20px;border-top:1px solid #334155;color:#94a3b8;font-size:13px}.credit a{color:#7dd3fc}[hidden]{display:none!important}
@media(max-width:700px){header{padding:12px 16px;flex-wrap:wrap}.brand{font-size:21px}.brand img{width:32px;height:32px}main{padding:24px 18px}.preview{font-size:12px}h1{font-size:25px}.find{flex-wrap:wrap;gap:4px;margin-bottom:18px}.guide{padding:8px 0}.workspace{display:block}.categories{display:none}.mobile-category{display:block}h2{font-size:22px}.tool{font-size:17px;padding:16px 4px}.description{margin-bottom:18px}}
.category-icon{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}.category-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.category-icon img{width:100%;height:100%;object-fit:contain}.category-icon svg use{color:inherit}.panel-heading{display:flex;align-items:center;gap:12px;margin-bottom:8px}.panel-heading h2{margin:0}.panel-heading .category-icon{width:44px;height:44px}.category-mobile-icons{display:none}@media(max-width:700px){.category-mobile-icons{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 20px}.category-mobile-icons button{background:transparent;border:1px solid transparent;border-radius:8px;padding:8px;min-width:44px;min-height:44px}.category-mobile-icons button[aria-pressed=true]{background:#30415a;border-color:var(--accent)}.category-mobile-icons .category-icon{width:26px;height:26px}}

.creator-credit{display:flex;align-items:center;gap:16px;margin:0 0 28px;padding:0 0 20px;border-bottom:1px solid #334155;line-height:1.6}
.creator-copy{flex:1;min-width:0}.creator-copy p{margin:0}.creator-copy .creator-ai-note{font-size:13px;color:#a9b8cd;margin-top:4px;max-width:70ch}
.creator-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:8px;direction:ltr;justify-content:flex-end}.creator-links a{color:#7dd3fc;text-underline-offset:4px;padding:4px 0;overflow-wrap:anywhere}
.creator-photo-frame{order:1;display:block;width:80px;height:80px;flex:0 0 80px;border:2px solid #67c5dc;border-radius:50%;overflow:hidden;position:relative;background:#172235}
.creator-photo{position:absolute;width:240px;height:160px;max-width:none;left:calc(50% - 56px);top:calc(50% - 60px)}
@media(max-width:700px){.creator-credit{gap:12px;align-items:flex-start;margin:0 0 24px;padding:0 0 16px}.creator-photo-frame{width:64px;height:64px;flex-basis:64px}.creator-photo{width:192px;height:128px;left:calc(50% - 45px);top:calc(50% - 48px)}.creator-copy{font-size:14px}.creator-links{justify-content:flex-end;gap:4px 12px}.creator-copy .creator-ai-note{font-size:12px}}

/* Keep the portrait and creator details together in a compact header block. */
.creator-credit{width:fit-content;max-width:100%;margin-inline-start:auto;margin-inline-end:0;gap:16px;flex-direction:row-reverse;justify-content:flex-start}
.creator-photo-frame{order:0}.creator-copy{flex:0 1 auto;max-width:560px}.creator-links{justify-content:flex-end}
@media(max-width:700px){.creator-credit{width:100%;gap:12px}.creator-copy{flex:1;max-width:none}}

.creator-copy{text-align:left}.creator-copy .creator-links{justify-content:flex-start}.creator-name{color:#7dd3fc;text-underline-offset:4px}.creator-photo-wrap{position:relative;flex:0 0 80px;display:block}.creator-photo-frame{padding:0;cursor:pointer}.creator-tooltip{display:none;position:absolute;bottom:calc(100% + 10px);left:0;z-index:10;width:max-content;max-width:min(390px,calc(100vw - 40px));padding:10px 14px;border:1px solid #64748b;border-radius:8px;background:#1e293b;color:#f1f5f9;box-shadow:0 8px 24px #0b122acc;text-align:right;font-size:13px;line-height:1.7;pointer-events:none}.creator-tooltip>span{display:block}.creator-photo-wrap:hover .creator-tooltip,.creator-photo-wrap:focus-within .creator-tooltip,.creator-photo-wrap.is-open .creator-tooltip{display:block}@media(max-width:700px){.creator-photo-wrap{flex-basis:64px}.creator-tooltip{width:calc(100vw - 40px);font-size:12px}}

.creator-credit{margin:32px 0 0;width:100%;padding:20px 0 0;border-bottom:0;border-top:1px solid #334155;justify-content:flex-end}
.creator-copy{display:flex;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap;max-width:none;direction:ltr}
.creator-copy>p{direction:rtl}.creator-copy .creator-links{margin:0;display:flex;gap:4px;direction:ltr;flex-wrap:nowrap}
.creator-links a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border-radius:8px;color:#7dd3fc}
.creator-links a:hover{background:#26364d}.creator-links svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.creator-links a:first-child svg{stroke:none}
@media(max-width:700px){.creator-credit{margin-top:28px;padding-top:16px;justify-content:flex-start}.creator-copy{gap:4px}.creator-copy>p{font-size:13px}.creator-links a{width:44px;height:44px}}

/* Fit the menu into the viewport; compact category selection avoids a tall rail. */
html,body{height:100%;height:100dvh}body{display:flex;flex-direction:column;overflow:hidden}
header{flex:none;padding:12px 24px}main{width:100%;flex:1;min-height:0;padding:20px 28px 12px;display:flex;flex-direction:column}
h1{font-size:26px}.intro{margin-bottom:16px}.find{margin-bottom:18px;flex:none}.workspace{flex:1;min-height:0;grid-template-columns:280px minmax(0,1fr);gap:28px}
.categories{display:grid;grid-template-columns:1fr 1fr;border:0;border-radius:0;gap:4px;background:transparent;align-content:start}
.categories button{padding:8px;min-height:55px;border:1px solid #334155;border-radius:7px;flex-direction:column;justify-content:center;gap:4px;text-align:center;font-size:11px;line-height:1.3}
.categories button:last-child{border-bottom:1px solid #334155}.categories .category-icon{width:23px;height:23px}
.panel{min-height:0;display:flex;flex-direction:column}.panel-heading{flex:none}h2{font-size:23px}.description{font-size:14px;margin-bottom:12px}.tool-list{min-height:0;overflow:auto;overscroll-behavior:contain}.tool{min-height:48px;padding:10px 6px;font-size:16px}.count{margin:8px 0;font-size:12px}
.creator-credit{flex:none;margin-top:12px;padding-top:10px;gap:12px}.creator-photo-wrap{flex-basis:54px}.creator-photo-frame{width:54px;height:54px;flex-basis:54px}.creator-photo{width:162px;height:108px;left:calc(50% - 38px);top:calc(50% - 40px)}.creator-copy>p{font-size:13px}
@media(min-width:701px) and (max-height:760px){main{padding-top:12px}h1{font-size:23px}.intro{margin-bottom:10px;font-size:14px}.find{margin-bottom:10px}.find input{padding:10px 14px}.categories button{min-height:43px;flex-direction:row;text-align:start;justify-content:flex-start;font-size:10px}.categories .category-icon{width:20px;height:20px}.creator-credit{margin-top:8px;padding-top:8px}.description{font-size:13px}.tool{min-height:42px;padding:7px 6px}}
@media(max-width:700px){header{padding:8px 16px}.preview{font-size:11px}main{padding:14px 16px 8px}h1{font-size:22px}.intro{font-size:13px;margin-bottom:10px}.find{margin-bottom:8px}.find input{padding:10px 12px;font-size:14px}.guide{font-size:12px;padding:4px 0}.workspace{display:flex;flex-direction:column;gap:0}.categories,.category-mobile-icons{display:none}.mobile-category{margin-bottom:10px;padding:10px;font-size:14px}#category-label{margin-bottom:4px;font-size:12px}.panel{width:100%;flex:1}.panel-heading .category-icon{width:28px;height:28px}h2{font-size:18px}.description{font-size:12px;line-height:1.5;margin-bottom:8px}.tool{font-size:14px;min-height:42px;padding:8px 4px}.creator-credit{margin-top:8px;padding-top:8px}.creator-copy{gap:0}.creator-copy>p{font-size:11px}.creator-photo-wrap{flex-basis:48px}.creator-photo-frame{width:48px;height:48px;flex-basis:48px}.creator-photo{width:144px;height:96px;left:calc(50% - 34px);top:calc(50% - 36px)}.creator-links a{width:38px;height:38px;padding:8px}}
@media(orientation:landscape) and (max-height:500px){header{padding:4px 16px}.brand{font-size:18px}.brand img{width:28px;height:28px}main{padding:8px 16px}h1{font-size:20px}.intro{display:none}.find{margin:8px 0}.find input{padding:7px 12px}.workspace{grid-template-columns:250px minmax(0,1fr);gap:20px}.categories{grid-template-columns:repeat(3,1fr)}.categories button{min-height:29px;font-size:9px;padding:4px;gap:3px}.categories .category-icon{width:17px;height:17px}.panel-heading .category-icon{width:26px;height:26px}h2{font-size:18px}.description{display:none}.tool-list{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.tool{font-size:13px;min-height:33px;padding:5px}.count{margin:3px 0}.creator-credit{margin-top:6px;padding-top:5px}.creator-photo-wrap{flex-basis:34px}.creator-photo-frame{width:34px;height:34px;flex-basis:34px}.creator-photo{width:102px;height:68px;left:calc(50% - 24px);top:calc(50% - 26px)}.creator-links a{width:34px;height:34px;padding:7px}.creator-copy>p{font-size:11px}}
@media(orientation:landscape) and (max-height:500px){.categories{height:100%;min-height:0;grid-template-rows:repeat(6,minmax(0,1fr));gap:3px}.categories button{min-height:0;overflow:hidden;font-size:8px;padding:3px}.categories .category-icon{width:15px;height:15px}.workspace{overflow:hidden}}

/* Reserve breathing room above the creator footer, including short screens. */
.creator-credit{margin-top:24px;padding-top:16px}
.workspace{overflow:hidden}
@media(max-width:700px){.creator-credit{margin-top:20px;padding-top:12px}}
@media(orientation:landscape) and (max-height:500px){.creator-credit{margin-top:16px;padding-top:10px}}

/* The category grid must share the available height rather than overflow it. */
@media(min-width:701px){
.categories{height:100%;min-height:0;grid-template-rows:repeat(8,minmax(0,1fr));align-content:stretch}
.categories button{min-height:0;min-width:0;padding:5px 7px;flex-direction:row;justify-content:flex-start;text-align:start;font-size:11px;gap:6px;overflow-wrap:anywhere}
.categories .category-icon{width:22px;height:22px}
}
@media(min-width:701px) and (max-height:650px){
main{padding-top:8px}header{padding-block:6px}.intro{margin-bottom:6px}.find{margin-block:6px}.creator-credit{margin-top:14px;padding-top:10px}
.categories button{font-size:10px;padding:3px 5px}.categories .category-icon{width:19px;height:19px}
}
@media(orientation:landscape) and (max-height:500px){.categories{grid-template-rows:repeat(6,minmax(0,1fr))}.categories button{font-size:8px;padding:3px}.categories .category-icon{width:15px;height:15px}}

.header-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13px}.header-actions a{padding:6px 0;color:#cbd5e1;text-underline-offset:4px}.header-actions details{position:relative}.header-actions summary{cursor:pointer;padding:6px}.support-options{position:absolute;top:100%;inset-inline-end:0;z-index:30;min-width:220px;background:#1e293b;border:1px solid #64748b;border-radius:8px;padding:12px;box-shadow:0 8px 24px #0b122acc}.support-options a{display:block;padding:10px}.legal-link{font-size:11px;color:#94a3b8;margin-inline-start:auto;padding:8px}.creator-tooltip{bottom:calc(100% + 10px)}
html[dir=ltr] .categories button{text-align:left}html[dir=ltr] .creator-credit{flex-direction:row;justify-content:flex-start}html[dir=ltr] .creator-copy>p{direction:ltr}html[dir=ltr] .creator-tooltip{text-align:left}
@media(max-width:700px){.header-actions{gap:10px;font-size:11px}.legal-link{font-size:10px;padding:3px}.creator-credit{flex-wrap:wrap}.creator-copy{min-width:0}}

.practice-mantra{flex:none;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 18px;padding:10px 16px;margin:0 0 14px;border:1px solid #334155;border-radius:10px;background:#1e293b;font-size:17px;font-weight:600;line-height:1.4}.practice-mantra span{white-space:nowrap}.practice-mantra b{color:#3b82f6;font-size:1.2em}.practice-mantra i{font-style:normal;color:#38bdf8}.mantra-again{display:inline-flex;align-items:center}.mantra-again img{width:24px;height:24px;object-fit:contain}
@media(max-width:700px){.practice-mantra{gap:4px 8px;padding:7px 8px;margin-bottom:10px;font-size:11px}.mantra-again img{width:17px;height:17px}}
@media(orientation:landscape) and (max-height:500px){.practice-mantra{gap:4px 14px;padding:3px 8px;margin-bottom:6px;font-size:12px}.mantra-again img{width:18px;height:18px}}
        @keyframes pMantraChase1 {
            0%, 20%, 100% { color: #3b82f6; transform: scale(1); opacity: .6; filter: drop-shadow(0 0 0 transparent); }
            8% { color: #3b82f6; transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 12px currentColor); }
        }
        @keyframes pMantraChase2 {
            0%, 20%, 100% { color: #3b82f6; transform: scale(1); opacity: .6; filter: drop-shadow(0 0 0 transparent); }
            8% { color: #6366f1; transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 12px currentColor); }
        }
        @keyframes pMantraChase3 {
            0%, 20%, 100% { color: #3b82f6; transform: scale(1); opacity: .6; filter: drop-shadow(0 0 0 transparent); }
            8% { color: #8b5cf6; transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 12px currentColor); }
        }
        @keyframes pMantraChase4 {
            0%, 20%, 100% { color: #3b82f6; transform: scale(1); opacity: .6; filter: drop-shadow(0 0 0 transparent); }
            8% { color: #a855f7; transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 12px currentColor); }
        }
        @keyframes pMantraChase5 {
            0%, 20%, 100% { color: #3b82f6; transform: scale(1); opacity: .6; filter: drop-shadow(0 0 0 transparent); }
            8% { color: #d946ef; transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 12px currentColor); }
        }
        @keyframes pMantraChase6 {
            0%, 20%, 100% { color: #3b82f6; transform: scale(1); opacity: .6; filter: drop-shadow(0 0 0 transparent); }
            8% { color: #ef4444; transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 12px currentColor); }
        }

        .practice-mantra>span:nth-of-type(1) b { animation: pMantraChase1 3s ease-in-out infinite 0s; }
        .practice-mantra>span:nth-of-type(2) b { animation: pMantraChase2 3s ease-in-out infinite .5s; }
        .practice-mantra>span:nth-of-type(3) b { animation: pMantraChase3 3s ease-in-out infinite 1s; }
        .practice-mantra>span:nth-of-type(4) b { animation: pMantraChase4 3s ease-in-out infinite 1.5s; }
        .practice-mantra>span:nth-of-type(5) b { animation: pMantraChase5 3s ease-in-out infinite 2s; }
        .practice-mantra>span:nth-of-type(6) b { animation: pMantraChase6 3s ease-in-out infinite 2.5s; }


.practice-mantra b{display:inline-block}.practice-mantra>.mantra-again:nth-of-type(6) img{animation:pMantraChase6 3s ease-in-out infinite 2.5s}@media(prefers-reduced-motion:reduce){.practice-mantra b,.practice-mantra .mantra-again img{animation:none!important}}

/* Highlight each full word long enough to make the sequential motto visible. */
@keyframes motto-word-glow{0%,17%,100%{color:#e2e8f0;text-shadow:none;transform:translateY(0)}5%,12%{color:#7dd3fc;text-shadow:0 0 12px #38bdf8,0 0 24px #3b82f6;transform:translateY(-2px)}}
.practice-mantra>span{display:inline-flex;align-items:baseline;animation:motto-word-glow 4.8s ease-in-out infinite}
.practice-mantra>span:nth-of-type(2){animation-delay:.8s}.practice-mantra>span:nth-of-type(3){animation-delay:1.6s}.practice-mantra>span:nth-of-type(4){animation-delay:2.4s}.practice-mantra>span:nth-of-type(5){animation-delay:3.2s}.practice-mantra>span:nth-of-type(6){animation-delay:4s}
@media(prefers-reduced-motion:reduce){.practice-mantra>span{animation-name:motto-word-color}}
@keyframes motto-word-color{0%,17%,100%{color:#e2e8f0;text-shadow:none}5%,12%{color:#7dd3fc;text-shadow:0 0 10px #38bdf8}}

@keyframes studio-logo-pulse{0%,65%,100%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}20%,40%{transform:scale(1.18);filter:drop-shadow(0 0 9px #2dd4bf) drop-shadow(0 0 16px #38bdf8)}}
.brand>img{animation:studio-logo-pulse 4.8s ease-in-out infinite;transform-origin:center}
@keyframes motto-logo-highlight{0%,17%,100%{transform:scale(1);filter:drop-shadow(0 0 0 transparent);opacity:.8}5%,12%{transform:scale(1.4);filter:drop-shadow(0 0 10px #2dd4bf) drop-shadow(0 0 16px #38bdf8);opacity:1}}
.practice-mantra>.mantra-again:nth-of-type(6) img{animation:motto-logo-highlight 4.8s ease-in-out infinite 4s}
@media(prefers-reduced-motion:reduce){.brand>img{animation:none;filter:drop-shadow(0 0 5px #2dd4bf)}.practice-mantra>.mantra-again:nth-of-type(6) img{animation:none!important;filter:drop-shadow(0 0 5px #2dd4bf)}}

/* Logo emphasis belongs to the final Play again beat only. */
.brand>img{animation:motto-logo-highlight 4.8s ease-in-out infinite 4s}
@media(prefers-reduced-motion:reduce){.brand>img{animation:none;filter:none}}

/* Give the final logo its own slot so its pulse cannot cover the next letter. */
.practice-mantra>.mantra-again{align-items:center;gap:8px;animation:none;text-shadow:none;color:#e2e8f0}
.practice-mantra>.mantra-again img{flex-shrink:0;transform-origin:center}
.brand>img{animation:none;filter:none}
@media(max-width:700px){.practice-mantra>.mantra-again{gap:6px}}

/* Brand, motto and navigation share the top toolbar. */
header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px}
header>.practice-mantra{grid-column:2;grid-row:1;margin:0;padding:8px 10px;gap:6px 10px;font-size:13px;min-width:0}
header>.brand{grid-column:1;grid-row:1;font-size:22px}
header>.header-actions,header>.preview{grid-column:3;grid-row:1}
header .mantra-again img{width:21px;height:21px}
@media(max-width:1100px){header{grid-template-columns:1fr auto;gap:8px 16px}header>.practice-mantra{grid-column:1/-1;grid-row:2}header>.header-actions,header>.preview{grid-column:2;grid-row:1}}
@media(max-width:700px){header>.brand{font-size:19px}header>.practice-mantra{font-size:11px;padding:6px;gap:4px 8px}header .mantra-again img{width:17px;height:17px}}
@media(orientation:landscape) and (max-height:500px){header{padding-block:4px;gap:4px 12px}header>.practice-mantra{font-size:10px;padding:2px 6px}header>.brand{font-size:18px}}

.practice-mantra>.mantra-again{gap:0;align-items:baseline}.practice-mantra>.mantra-again b{margin-inline-end:2px}

.brand-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.brand-name{white-space:nowrap}.brand-tagline{font-size:10px;font-weight:400;line-height:1.5;color:#a9b8cd;white-space:normal;max-width:255px;text-align:start}
@media(max-width:700px){.brand-tagline{font-size:9px;max-width:220px}.brand-copy{gap:2px}header{gap:6px 10px}}
@media(orientation:landscape) and (max-height:500px){.brand-tagline{font-size:8px;max-width:230px}.brand-copy{gap:1px}}

/* All six initials share the same cycle; the final P owns the last beat. */
.practice-mantra>span:nth-of-type(1) b{animation:pMantraChase1 4.8s ease-in-out infinite 0s}
.practice-mantra>span:nth-of-type(2) b{animation:pMantraChase2 4.8s ease-in-out infinite .8s}
.practice-mantra>span:nth-of-type(3) b{animation:pMantraChase3 4.8s ease-in-out infinite 1.6s}
.practice-mantra>span:nth-of-type(4) b{animation:pMantraChase4 4.8s ease-in-out infinite 2.4s}
.practice-mantra>span:nth-of-type(5) b{animation:pMantraChase5 4.8s ease-in-out infinite 3.2s}
.practice-mantra>span.mantra-again:nth-of-type(6) b{animation:pMantraChase6 4.8s ease-in-out infinite 4s;transform-origin:center;margin-inline-end:4px}
@keyframes motto-initial-color{0%,20%,100%{color:#3b82f6;text-shadow:none}5%,12%{color:#f472b6;text-shadow:0 0 10px #f472b6}}
@media(prefers-reduced-motion:reduce){.practice-mantra>span.mantra-again:nth-of-type(6) b{animation:motto-initial-color 4.8s ease-in-out infinite 4s!important}}

/* Keep the result count outside the shrinking tool list. */
.panel-heading,.panel>.description,.panel>.count{flex-shrink:0}
.panel>.count{min-height:22px;line-height:22px;padding:0 2px;margin:8px 0 4px;overflow:visible}
.panel>.tool-list{flex:1 1 auto;min-height:0}
@media(orientation:landscape) and (max-height:500px){.panel>.count{min-height:18px;line-height:18px;margin:4px 0 2px}}

@media(min-width:701px){.workspace{grid-template-rows:minmax(0,1fr)}}

@media(min-width:701px){.workspace>.panel{height:100%;max-height:100%;overflow:hidden;align-self:stretch}}

/* Phone layout prioritizes readable choices instead of a miniature desktop rail. */
@media(max-width:700px){
header{padding:10px 16px;grid-template-columns:minmax(0,1fr) auto}.header-actions{gap:4px 12px;justify-content:flex-end;max-width:125px}.header-actions a,.header-actions summary{min-height:32px;display:inline-flex;align-items:center;font-size:12px}
header>.brand{font-size:19px}.brand-tagline{font-size:10px;max-width:190px}header>.practice-mantra{padding:7px 8px;font-size:12px;gap:4px 8px}
main{padding:16px 16px 10px}h1{font-size:21px;margin-bottom:12px}.intro{display:none}.find{margin:0 0 12px;gap:6px}.find input{min-height:46px;font-size:15px}.guide{font-size:13px;min-height:30px;display:flex;align-items:center}
#category-label{font-size:13px;margin-bottom:6px}select.mobile-category{min-height:46px;font-size:15px;margin-bottom:14px}.panel-heading{margin-bottom:10px}h2{font-size:19px}.panel>.description{display:none}.tool{min-height:46px;font-size:15px;padding:10px 4px}.panel>.count{margin-top:8px;font-size:12px}.creator-credit{margin-top:14px;padding-top:10px;gap:10px;flex-wrap:nowrap}.creator-copy{flex:1;gap:2px}.creator-copy>p{font-size:12px;line-height:1.5}.creator-name{white-space:nowrap}.creator-links a{width:40px;height:40px}.legal-link{max-width:78px;line-height:1.6;text-align:center}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:550px){
header{padding:5px 16px;grid-template-columns:auto 1fr;gap:4px 20px}header>.brand{font-size:18px}.brand-tagline{display:none}header>.practice-mantra{grid-column:2;grid-row:1;font-size:11px;padding:5px}.header-actions{grid-column:1/-1!important;grid-row:2!important;justify-content:flex-start;gap:20px;font-size:12px}.header-actions a,.header-actions summary{padding:2px 0;min-height:24px}
main{padding:8px 16px}main>h1,main>.intro,#category-label,.categories,.category-mobile-icons{display:none}.find{margin:0 0 6px;flex-wrap:nowrap;gap:16px}.find input{padding:7px 12px;min-height:38px;font-size:14px}.guide{font-size:12px;min-height:32px}
select.mobile-category{display:block;min-height:38px;padding:7px 12px;font-size:14px;margin:0 0 8px}.workspace{display:flex;flex-direction:column;min-height:0;flex:1;gap:0;overflow:hidden}.workspace>.panel{width:100%;height:100%;min-height:0;flex:1}.panel-heading{margin-bottom:4px}.panel-heading .category-icon{width:24px;height:24px}.panel h2{font-size:17px}.panel>.description{display:none}.tool-list{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.tool{min-height:38px;font-size:14px;padding:6px 4px}.panel>.count{font-size:11px;line-height:18px;min-height:18px;margin:3px 0 0}.creator-credit{margin-top:8px;padding-top:6px;gap:10px}.creator-copy{flex-direction:row;flex-wrap:nowrap;gap:8px;flex:0 1 auto}.creator-copy>p{font-size:11px}.creator-links a{width:34px;height:34px}.legal-link{font-size:10px}
}

/* The final initial must visibly light up on the sixth beat, including reduced motion. */
@keyframes motto-final-p-light{0%,17%,100%{color:#3b82f6;text-shadow:none;opacity:1}5%,12%{color:#b9f2ff;text-shadow:0 0 5px #38bdf8,0 0 12px #38bdf8,0 0 20px #3b82f6;opacity:1}}
.practice-mantra>span.mantra-again:nth-of-type(6) b{animation:motto-final-p-light 4.8s ease-in-out infinite 4s!important;display:inline-block}

@media(max-width:700px),(pointer:coarse) and (max-height:550px){
.panel>.tool-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--tool-rows,4),minmax(0,1fr));gap:6px;border:0;overflow:hidden;flex:1 1 0}
.tool-list>.tool{min-width:0;min-height:0;padding:8px;border:1px solid #334155;border-radius:7px;font-size:14px;line-height:1.4;overflow-wrap:anywhere;gap:6px;background:#172235}
.tool-list>.tool:hover{background:#25344a}.tool-list>.tool .arrow{font-size:18px;flex:none}.tool-list>.tool>span:first-child{min-width:0}
}
@media(max-width:700px) and (max-height:750px){main>h1{font-size:18px;margin-bottom:8px}.guide{min-height:24px}.find{margin-bottom:6px}select.mobile-category{margin-bottom:8px}.panel-heading{margin-bottom:6px}.tool-list>.tool{font-size:12px;padding:6px}.creator-credit{margin-top:8px;padding-top:6px}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:550px){.tool-list>.tool{font-size:12px;padding:4px 8px}}

@media(pointer:coarse) and (orientation:landscape) and (max-height:550px){.panel>.tool-list{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--tool-rows-wide,3),minmax(0,1fr))}.tool-list>.tool{font-size:12px;line-height:1.3}}

/* On phones, move the motto below the tools without changing desktop placement. */
@media(max-width:700px),(pointer:coarse) and (max-height:550px){
body:has(header>.practice-mantra){display:flex}
main>h1{font-size:17px;line-height:1.4;margin-bottom:8px}
main>.practice-mantra{margin:10px 0 0;padding:5px 8px;gap:3px 8px;font-size:10px}
main>.practice-mantra .mantra-again{gap:0}
}

@media(max-width:700px){
header{display:flex;flex-direction:column;align-items:stretch;padding:12px 16px 8px;gap:10px}
header>.brand{justify-content:flex-start;gap:10px;font-size:22px;width:100%}
.brand-copy{flex:1;min-width:0;gap:3px}.brand-tagline{max-width:none;white-space:nowrap;font-size:clamp(8px,2.5vw,10px);line-height:1.5}
header>.header-actions{max-width:none;width:100%;display:flex;justify-content:flex-start;align-items:center;gap:0;border-top:1px solid #29374e;padding-top:6px;font-size:12px}
.header-actions>a,.header-actions>details{flex:0 1 auto}.header-actions>a,.header-actions summary{padding:5px 12px;min-height:32px;white-space:nowrap}.header-actions>a:first-child{padding-inline-start:0}.header-actions>details{margin-inline-start:auto}.header-actions summary{padding-inline-end:0}.header-actions>a+a{border-inline-start:1px solid #334155}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:550px){
header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:7px 16px;gap:16px}
header>.brand{font-size:19px;gap:8px}.brand-copy{gap:1px}.brand-tagline{display:block;white-space:nowrap;max-width:none;font-size:8px}
header>.header-actions{display:flex;justify-content:flex-end;gap:14px;max-width:none;width:auto;border:0;padding:0}.header-actions a,.header-actions summary{min-height:30px;white-space:nowrap;font-size:12px;padding:3px 0}.header-actions>a+a{border:0}
}

/* Category colors orient the eye while retaining the established dark identity. */
main{padding-top:24px}.find{margin-bottom:22px}
.categories button{background:color-mix(in srgb,var(--accent) 9%,#172235);border-color:color-mix(in srgb,var(--accent) 35%,#334155);color:#e2e8f0;font-size:12px}
.categories button:hover{background:color-mix(in srgb,var(--accent) 20%,#172235)}
.categories button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 26%,#172235);border-color:var(--accent);color:#f1f5f9;box-shadow:inset 0 0 0 1px var(--accent)}
.panel-heading{padding:12px 16px;border:1px solid color-mix(in srgb,var(--topic) 35%,#334155);border-radius:10px;background:color-mix(in srgb,var(--topic) 12%,#172235);margin-bottom:12px}
.panel>.description{padding-inline:4px}.tool-list{border-top:0;gap:8px;display:flex;flex-direction:column}
.tool-list>.tool{border:1px solid color-mix(in srgb,var(--accent) 34%,#334155);border-radius:8px;background:color-mix(in srgb,var(--accent) 9%,#172235);padding:12px 16px;color:#eef2f8;transition:background .18s ease-out,border-color .18s ease-out}
.tool-list>.tool:hover{background:color-mix(in srgb,var(--accent) 20%,#172235);border-color:var(--accent)}
@media(max-width:700px),(pointer:coarse) and (max-height:550px){main{padding-top:14px}.find{margin-bottom:12px}.panel-heading{padding:10px 12px;margin-bottom:10px}.tool-list>.tool{background:color-mix(in srgb,var(--accent) 14%,#172235);border-color:color-mix(in srgb,var(--accent) 45%,#334155);padding:8px;font-weight:600}.panel>.tool-list{display:grid;gap:8px}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:550px){main{padding-top:8px}.find{margin-bottom:6px}.panel-heading{padding:5px 10px;margin-bottom:6px}.tool-list>.tool{padding:4px 8px}.panel>.tool-list{gap:5px}}

@media(min-width:701px) and (min-height:551px), (min-width:701px) and (pointer:fine){
header>.find{grid-column:2;grid-row:1;display:flex;align-items:center;gap:14px;margin:0;min-width:0}
header>.find input{min-height:42px;padding:10px 14px;font-size:14px;max-width:none}
header>.find .guide{font-size:13px;padding:8px 0}
main>.practice-mantra{margin:14px 0 0;padding:7px 12px;font-size:13px;gap:5px 18px}
main>.creator-credit{margin-top:12px}
}
@media(min-width:701px) and (max-width:1100px) and (min-height:551px){header>.find{grid-column:1/-1;grid-row:2}}

@media(min-width:701px){
.panel>.tool-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--tool-rows,4),minmax(0,1fr));gap:10px;overflow:hidden;flex:1 1 0}
.tool-list>.tool{min-width:0;min-height:0;padding:10px 14px;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.tool-list>.tool>span:first-child{min-width:0}.tool-list>.tool .arrow{flex:none}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:550px){.panel>.tool-list{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--tool-rows-wide,3),minmax(0,1fr));gap:5px}.tool-list>.tool{font-size:12px;padding:4px 8px}}

/* One color sequence on every screen, with an attached purple final initial. */
@keyframes motto-final-p-light{0%,17%,100%{color:#3b82f6;text-shadow:none;opacity:1}5%,12%{color:#c084fc;text-shadow:0 0 5px #c084fc,0 0 12px #a855f7,0 0 20px #9333ea;opacity:1}}
.practice-mantra>span.mantra-again:nth-of-type(6) b{margin-inline-end:0}
.practice-mantra>span.mantra-again{gap:0}
@media(prefers-reduced-motion:reduce){
.practice-mantra>span:nth-of-type(1) b{animation:pMantraChase1 4.8s ease-in-out infinite 0s!important}
.practice-mantra>span:nth-of-type(2) b{animation:pMantraChase2 4.8s ease-in-out infinite .8s!important}
.practice-mantra>span:nth-of-type(3) b{animation:pMantraChase3 4.8s ease-in-out infinite 1.6s!important}
.practice-mantra>span:nth-of-type(4) b{animation:pMantraChase4 4.8s ease-in-out infinite 2.4s!important}
.practice-mantra>span:nth-of-type(5) b{animation:pMantraChase5 4.8s ease-in-out infinite 3.2s!important}
.practice-mantra>span:nth-of-type(6) b{animation:motto-final-p-light 4.8s ease-in-out infinite 4s!important}
}

/* A restrained cyan-to-violet luminous rim on the tool cards. */
.tool-list>.tool{
 position:relative;isolation:isolate;border-color:transparent;
 box-shadow:inset 2px 0 16px -10px #65dbe5,inset -2px 0 16px -10px #cb77e4,0 0 7px #5ccbd510;
 transition:box-shadow .2s ease,background-color .2s ease;
}
.tool-list>.tool::before{
 content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
 background:linear-gradient(110deg,#76dce3 0%,#579bc8 32%,#8f70cb 65%,#c575d7 100%);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
 opacity:.8;
}
.tool-list>.tool:hover,.tool-list>.tool:focus-visible{
 border-color:transparent;
 box-shadow:inset 3px 0 24px -12px #76dce3,inset -3px 0 24px -12px #cb77e4,0 0 11px #8f70cb28;
}
.tool-list>.tool:hover::before,.tool-list>.tool:focus-visible::before{opacity:1}
@media(prefers-reduced-motion:reduce){.tool-list>.tool{transition:none}}

/* Carry the selected menu category color into each app tab. */
.tool-list>.tool{background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 16%,#172235),color-mix(in srgb,var(--accent) 5%,#172235));box-shadow:inset 2px 0 16px -10px var(--accent),inset -2px 0 16px -10px color-mix(in srgb,var(--accent),#b38add 45%),0 0 7px color-mix(in srgb,var(--accent) 9%,transparent)}
.tool-list>.tool::before{background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 70%,#a8eff5),var(--accent) 40%,color-mix(in srgb,var(--accent) 60%,#b37bda) 100%)}
.tool-list>.tool:hover,.tool-list>.tool:focus-visible{background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 24%,#172235),color-mix(in srgb,var(--accent) 10%,#172235));box-shadow:inset 3px 0 24px -12px var(--accent),inset -3px 0 24px -12px color-mix(in srgb,var(--accent),#b38add 45%),0 0 11px color-mix(in srgb,var(--accent) 18%,transparent)}

/* A consistent category rail: neutral surfaces, color reserved for navigation cues. */
.categories button{background:#1b2639;border-color:#3b475d;color:#dce3ee;box-shadow:none;border-inline-start:2px solid color-mix(in srgb,var(--accent) 62%,#3b475d)}
.categories button:hover{background:#253247;border-color:#71809a;border-inline-start-color:var(--accent)}
.categories button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 18%,#1b2639);border-color:color-mix(in srgb,var(--accent) 72%,#73829b);border-inline-start-color:var(--accent);color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 38%,transparent)}
.categories button .category-icon{opacity:.9}.categories button[aria-pressed=true] .category-icon{opacity:1}

/* Give sparse categories titles proportional to the space available. */
@media(min-width:701px){
 .tool-list[data-tool-count="1"]{grid-template-columns:minmax(0,1fr)}
 .tool-list[data-tool-count="1"]>.tool{font-size:clamp(26px,3vw,42px);padding:24px 30px}
 .tool-list[data-tool-count="2"]>.tool,.tool-list[data-tool-count="3"]>.tool{font-size:clamp(22px,2.2vw,32px);padding:20px 24px}
 .tool-list[data-tool-count="3"]>.tool:last-child{grid-column:1/-1}
 .tool-list[data-tool-count="4"]>.tool{font-size:clamp(20px,1.8vw,27px)}
 .tool-list[data-tool-count="1"]>.tool .arrow,.tool-list[data-tool-count="2"]>.tool .arrow,.tool-list[data-tool-count="3"]>.tool .arrow{font-size:30px}
}
@media(max-width:700px){.tool-list[data-tool-count="1"]>.tool,.tool-list[data-tool-count="2"]>.tool,.tool-list[data-tool-count="3"]>.tool{font-size:clamp(17px,4.5vw,23px)}.tool-list[data-tool-count="1"]{grid-template-columns:minmax(0,1fr)}.tool-list[data-tool-count="3"]>.tool:last-child{grid-column:1/-1}}

/* Keep the final P violet, with a brighter highlight. */
@keyframes motto-final-p-light{0%,17%,100%{color:#3b82f6;text-shadow:none;opacity:1}5%,12%{color:#d8b4fe;text-shadow:0 0 5px #c084fc,0 0 12px #a855f7,0 0 20px #9333ea;opacity:1}}

/* The brand P follows the blue-to-violet sequence on its final beat. */
.practice-mantra .mantra-label{font-size:.8em;font-weight:400;color:#a9b8cd;white-space:nowrap;border-inline-end:1px solid #475569;padding-inline-end:12px}
.practice-mantra>span.mantra-again{display:inline-flex;align-items:center;gap:0}
.practice-mantra>span.mantra-again .mantra-p-logo{display:block;width:22px;height:22px;flex:none;color:#3b82f6;transform-origin:center;animation:mantra-logo-pulse 4.8s ease-in-out infinite 4s!important}
@keyframes mantra-logo-pulse{0%,20%,100%{color:#3b82f6;filter:none;opacity:.65;transform:scale(1)}8%{color:#e879f9;filter:drop-shadow(0 0 5px #d946ef);opacity:1;transform:scale(1.18)}}
@media(max-width:700px){.practice-mantra>span.mantra-again .mantra-p-logo{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){@keyframes mantra-logo-pulse{0%,20%,100%{color:#3b82f6;opacity:.75;filter:none}8%{color:#e879f9;opacity:1;filter:drop-shadow(0 0 4px #d946ef)}}}

.practice-mantra .mantra-link{display:inline-flex;align-items:center;color:inherit;text-decoration:none;border-radius:4px}
.practice-mantra .mantra-link:hover{ text-decoration:underline;text-underline-offset:4px }
.practice-mantra .mantra-link:focus-visible{outline:2px solid #c084fc;outline-offset:4px}

/* Make the journey guide easy to find beside search. */
.find .guide,header>.find .guide{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;min-height:42px;padding:9px 15px;border:1px solid #75e6da;border-radius:10px;background:#5ee0cf;color:#102d36;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 2px 12px #2dd4bf24;transition:background .18s,box-shadow .18s}
.find .guide:hover{background:#83eddd;box-shadow:0 3px 16px #2dd4bf40}
.find .guide:focus-visible{outline:3px solid #f5d777;outline-offset:3px}
.journey-map-icon{flex:none;color:#6d28a3}
@media(max-width:700px){.find .guide,header>.find .guide{padding:8px 10px;font-size:13px;gap:6px;min-height:40px}.journey-map-icon{width:20px;height:20px}}

.publish-platforms{width:min(720px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;padding:38px;border:1px solid #64748b;border-radius:22px;background:radial-gradient(ellipse at top,#26334c,#111827 70%);color:#f1f5f9;text-align:center;box-shadow:0 24px 100px #0008}
.publish-platforms::backdrop{background:#020617bb;backdrop-filter:blur(6px)}
.publish-close{position:absolute;inset-inline-end:14px;top:12px;width:36px;height:36px;border:1px solid #475569;border-radius:50%;background:#1e293b;color:#fff;font-size:24px}
.publish-eyebrow{color:#d8b4fe;letter-spacing:.25em;font-size:12px;font-weight:700;margin:0 0 12px}
.publish-platforms h2{font-size:28px;margin:0 0 10px}.publish-subtitle{color:#b8c9dc;margin:0 0 28px}
.publish-collage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.publish-platform{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:132px;padding:18px 8px;border:1px solid color-mix(in srgb,var(--platform-color) 38%,#334155);border-radius:16px;background:color-mix(in srgb,var(--platform-color) 8%,#182235);color:var(--platform-color)}
.publish-platform svg{width:48px;height:48px}.publish-platform span{color:#eef2ff;font-size:13px;font-weight:600}
@media(max-width:600px){.publish-platforms{padding:42px 18px 24px}.publish-platforms h2{font-size:23px}.publish-collage{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.publish-platform{min-height:112px;padding:12px}.publish-subtitle{margin-bottom:20px}}

.motto-menu{position:fixed;inset:auto;margin:0;padding:12px;border:1px solid #687894;border-radius:12px;background:#1b273c;color:#f1f5f9;box-shadow:0 12px 40px #0008;max-height:calc(100dvh - 24px);overflow:auto;direction:inherit}
.motto-menu strong{display:block;padding:4px 10px 10px;color:#d8b4fe;direction:ltr;text-align:start}
.motto-menu a{display:block;padding:12px 10px;border-radius:7px;text-decoration:none;font-size:14px;line-height:1.4}
.motto-menu a:hover,.motto-menu a:focus-visible{background:#33435d;outline:2px solid #a78bfa;outline-offset:-2px}
.publish-platform{text-decoration:none}.publish-platform:hover,.publish-platform:focus-visible{background:#334155;outline:2px solid var(--platform-color);outline-offset:2px}
.publish-platforms h3{font-size:16px;text-align:start;margin:22px 0 14px;color:#d6e2f1}
.publish-distributors{display:flex;gap:10px;flex-wrap:wrap}.publish-distributors a{flex:1;white-space:nowrap;padding:14px;border:1px solid #8b72b0;border-radius:10px;background:#302840;color:#eee1ff;text-decoration:none;font-weight:600;font-size:14px}.publish-distributors a:hover,.publish-distributors a:focus-visible{background:#4c3966;outline:2px solid #c4b5fd}

/* Seven steps, evenly spaced in the same color progression. */
.practice-mantra>span{animation-duration:5.6s;animation-delay:var(--motto-delay)}
.practice-mantra>span:nth-of-type(1){--motto-delay:0s;--motto-color:#3b82f6}
.practice-mantra>span:nth-of-type(2){--motto-delay:.8s;--motto-color:#6366f1}
.practice-mantra>span:nth-of-type(3){--motto-delay:1.6s;--motto-color:#8b5cf6}
.practice-mantra>span:nth-of-type(4){--motto-delay:2.4s;--motto-color:#a855f7}
.practice-mantra>span:nth-of-type(5){--motto-delay:3.2s;--motto-color:#c35cde}
.practice-mantra>span:nth-of-type(6){--motto-delay:4s;--motto-color:#d946ef}
.practice-mantra>span:nth-of-type(7){--motto-delay:4.8s;--motto-color:#e879f9}
.practice-mantra>span:nth-of-type(n) b,.practice-mantra>span.mantra-again .mantra-p-logo{animation:motto-seven-p 5.6s ease-in-out infinite var(--motto-delay)!important}
@keyframes motto-seven-p{0%,18%,100%{color:#3b82f6;opacity:.65;filter:none}7%{color:var(--motto-color);opacity:1;filter:drop-shadow(0 0 5px var(--motto-color))}}

.motto-menu a{display:flex;align-items:center;gap:10px}
.motto-menu a .category-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;color:var(--accent)}
.motto-menu a .category-icon svg,.motto-menu a .category-icon img{width:100%;height:100%;object-fit:contain}
.motto-menu-label{min-width:0}

/* Compact Publish window with larger, readable destinations. */
.publish-platforms{width:min(600px,calc(100vw - 28px));padding:26px}
.publish-platforms h2{font-size:25px;margin-bottom:8px}
.publish-subtitle{margin-bottom:16px}
.publish-platforms h3{margin:18px 0 10px}
.publish-collage{gap:10px}
.publish-platform{min-height:104px;padding:12px 6px;gap:9px}
.publish-platform svg{width:48px;height:48px}
.publish-platform span{font-size:15px;font-weight:700}
.publish-distributors{gap:8px}
.publish-distributors a{padding:12px 10px;font-size:16px}
@media(max-width:600px){.publish-platforms{padding:38px 16px 20px}.publish-collage{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.publish-platform{min-height:88px;gap:6px;padding:9px 6px}.publish-platform svg{width:36px;height:36px}.publish-platform span{font-size:15px}.publish-distributors a{font-size:15px}}

.motto-menu{border-color:var(--menu-accent);background:color-mix(in srgb,var(--menu-accent) 12%,#172033)}
.motto-menu strong{color:var(--menu-accent)}
.motto-menu a:hover,.motto-menu a:focus-visible{background:color-mix(in srgb,var(--menu-accent) 20%,#172033);outline-color:var(--menu-accent)}
.publish-platforms{border-color:#f0abfc;background:radial-gradient(ellipse at top,#382940,#111827 70%)}

.motto-all-tools{display:block;width:100%;margin-top:8px;padding:12px 10px;border:0;border-top:1px solid color-mix(in srgb,var(--menu-accent) 45%,transparent);background:transparent;color:var(--menu-accent);font:inherit;font-size:14px;font-weight:700;text-align:start;border-radius:0 0 6px 6px;cursor:pointer}
.motto-all-tools:hover,.motto-all-tools:focus-visible{background:color-mix(in srgb,var(--menu-accent) 15%,transparent);outline:2px solid var(--menu-accent);outline-offset:-2px}

/* Reuse the journey artwork as compact covers on platform links. */
.tool-list>.tool{display:grid;grid-template-columns:clamp(64px,8vw,110px) minmax(0,1fr) auto;gap:16px;align-items:center;overflow:hidden}
.tool-artwork{display:block;width:100%;aspect-ratio:1;border-radius:10px;background-color:#101529;background-image:url("assets/guide-art/music-app-atlas.webp");background-size:300% 400%;background-position:var(--art-x) var(--art-y);background-repeat:no-repeat;box-shadow:0 2px 12px #0003}
.tool-label{min-width:0}.tool-list>.tool>.arrow{margin:0}
@media(min-width:701px){.tool-list[data-tool-count="1"]>.tool{grid-template-columns:clamp(150px,23vw,280px) minmax(0,1fr) auto}.tool-list[data-tool-count="2"]>.tool,.tool-list[data-tool-count="3"]>.tool{grid-template-columns:clamp(100px,13vw,170px) minmax(0,1fr) auto}}
@media(max-width:700px){.tool-list>.tool{grid-template-columns:56px minmax(0,1fr) auto;gap:10px;padding:8px 10px;min-height:74px}.tool-list[data-tool-count="1"]>.tool{grid-template-columns:100px minmax(0,1fr) auto}.tool-list[data-tool-count="2"]>.tool,.tool-list[data-tool-count="3"]>.tool{grid-template-columns:64px minmax(0,1fr) auto}.tool-artwork{border-radius:7px}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:550px){.tool-list>.tool{grid-template-columns:38px minmax(0,1fr) auto;gap:7px;min-height:48px}}

/* Keep each illustration inside the available card height. */
.tool-list>.tool{grid-template-rows:minmax(0,1fr)}
.tool-list>.tool .tool-artwork{height:100%;width:auto;max-width:100%;max-height:100%;min-height:0;aspect-ratio:1;justify-self:center;align-self:center}

.tool-artwork-frame{display:grid;place-items:center;container-type:size;width:100%;height:100%;min-height:0}
.tool-list>.tool .tool-artwork{width:min(100cqw,100cqh);height:min(100cqw,100cqh);max-width:none;max-height:none}

.tool-label{min-height:0;line-height:1.35;overflow-wrap:anywhere}

.panel>.tool-list{grid-template-rows:repeat(var(--tool-rows,4),minmax(100px,1fr));overflow-y:auto;overflow-x:hidden}
@media(min-width:701px) and (max-width:1100px){.tool-list>.tool{grid-template-columns:48px minmax(0,1fr) auto;gap:10px}.tool-list[data-tool-count="1"]>.tool{grid-template-columns:100px minmax(0,1fr) auto}}

/* Fit the full category in its panel without internal scrolling. */
.panel>.tool-list{grid-template-rows:repeat(var(--tool-rows,4),minmax(0,1fr));overflow:hidden}
.tool-list>.tool{min-height:0}
@media(max-height:750px){.tool-list>.tool{padding-block:7px}}