:root {
  --mn-paper: #21141F;          
  --mn-raised: #2B1A28;         
  --mn-rule: #402738;           
  --mn-ground: #120A12;         
  --mn-ink: #FFEFE2;            
  --mn-ink-2: #E2CBC2;          
  --mn-ink-3: #B59C9A;          
  --mn-tomato: #FF6A2A;         
  --mn-tomato-fill: #FF6A2A;    
  --mn-on-fill: #120A12;        
  --mn-tomato-deep: #FF8148;    
  --mn-tomato-ink: #FFC4A6;     
  --mn-tomato-tint: #4C1F26;    
  --mn-tomato-wash: #3B1A22;    
  --mn-ok: #9FD48E;             
  --mn-ok-fill: #3F8A4A;        
  --mn-amber: #FFC870;          
  --mn-amber-wash: #3D2324;     
  --mn-face: #FFE6D2;           
  --mn-you: #352030;            
  --mn-lit: rgba(255, 170, 110, .12);   
  --mn-hl: rgba(255, 168, 110, .34);    
  --mn-sh: rgba(6, 2, 8, .6);           
  --mn-sh-2: rgba(6, 2, 8, .85);         
  --mn-shadow: 0 1px 1px var(--mn-sh), -8px 12px 24px -12px var(--mn-sh-2);
  --mn-paper-grain: ;
  --mn-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .045' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.8 0 0 0 0 0.66 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='480' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
  --mn-glaze: radial-gradient(130% 100% at 100% 0%, rgba(255, 106, 42, .16), rgba(255, 106, 42, .05) 38%, transparent 62%);
  --mn-grain: var(--mn-glaze), var(--mn-brush), var(--mn-paper-grain);   
}

.hero .mac .tb.appbar { background: var(--mn-paper); box-shadow: inset 0 -1px 0 var(--mn-rule); }
.hero .mac .tabs span.on { background: var(--mn-tomato-wash); color: var(--mn-tomato-ink); box-shadow: 0 0 0 1px var(--mn-tomato-tint); }
.hero .mac .tabs i { background: var(--mn-tomato); }
.hero .mac .tb .pc { background: var(--mn-paper); box-shadow: 0 0 0 1px var(--mn-rule); }
.hero .mac .face0, .hero .mac .tb.appbar .busy .me { box-shadow: 0 0 0 1px var(--mn-rule); }
.mac .busy .spin { border-color: rgba(255, 106, 42, .2); border-top-color: var(--mn-tomato); }
.hero .mac .plan.doc { background: var(--mn-paper); border-radius: 1.15em; }
.hero .mac .plan.doc .pd-title { font-family: var(--serif); font-weight: 600; font-size: 1.36em; letter-spacing: -.012em; }
.hero .mac .plan.sky { --c: var(--mn-tomato); --c-fill: var(--mn-tomato-fill); --c-on: var(--mn-on-fill); --c-tint: var(--mn-tomato-tint); --c-ink: var(--mn-tomato-ink); }
.hero .mac .plan .pd-days span.open { background: var(--mn-tomato-wash); box-shadow: inset 0 0 0 .08em rgba(255, 106, 42, .45); }
.hero .mac .plan .pd-days span.open small, .hero .mac .plan .pd-open { color: var(--mn-tomato-ink); }

.tr .fc { background-color: var(--mn-paper); background-image: var(--mn-grain); border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--mn-hl), 0 0 0 1px var(--mn-rule), 0 1px 1px var(--mn-sh), -11px 17px 32px -20px var(--mn-sh-2); }
.tr .fc .kd b { display: inline-block; padding: 3px 8px 2px; border: 1.5px solid currentColor; border-radius: 4px; letter-spacing: .13em; font-size: 10.5px;
  color: var(--mn-tomato-deep); background: color-mix(in srgb, var(--mn-tomato-deep) 6%, transparent); }
.tr .fc .tt { font: 600 22px/1.17 var(--serif); letter-spacing: -.008em; color: var(--mn-ink); }
.tr .fc .th > img.ph, .tr .fc .th .mk { box-shadow: inset 0 0 0 1px var(--mn-rule); }
.tr .mk { background: var(--mn-raised); }
.tr .fc .th .badge { background: var(--mn-face); box-shadow: 0 0 0 1px var(--mn-rule), 0 3px 6px -3px var(--mn-sh-2); }
.tr .fc .q { background: var(--mn-raised); box-shadow: inset 0 0 0 1px var(--mn-rule); }
.tr .fc .bars i { background: var(--mn-tomato-tint); border-radius: 4px 4px 2px 2px; box-shadow: inset 0 3px 0 var(--mn-lit);
  background-image: repeating-linear-gradient(to top, transparent 0 9px, var(--mn-paper) 9px 11px); }
.tr .fc .bars i:last-child { background-color: var(--mn-tomato); }
.tr .fb.blue { background: var(--mn-tomato-fill); color: var(--mn-on-fill); }
.tr .fb.soft { background: var(--mn-tomato-tint); color: var(--mn-tomato-ink); }
.tr .fb.quiet { background: var(--mn-paper); color: var(--mn-ink-2); box-shadow: inset 0 0 0 1px var(--mn-rule); }
.tr .cur .tap { background: rgba(255, 106, 42, .2); box-shadow: 0 0 0 2px rgba(255, 106, 42, .35); }

.any { --a: var(--mn-tomato); --a-fill: var(--mn-tomato-fill); --a-tint: var(--mn-tomato-tint); --a-ink: var(--mn-tomato-ink); --a-wash: var(--mn-tomato-wash);
  --u-ink: var(--mn-ink); --u-rule: var(--mn-rule); --u-soft: var(--mn-raised); --u-raised: var(--mn-raised); --u-green: var(--mn-ok); --u-cyan: var(--mn-tomato-deep); }
.any .win { background: var(--mn-ground); }
.any .bar { background: var(--mn-paper); box-shadow: inset 0 -1px 0 var(--mn-rule); }
.any .tabs span.on { background: var(--mn-tomato-wash); color: var(--mn-tomato-ink); box-shadow: 0 0 0 1px var(--mn-tomato-tint); }
.any .cd, .any .hd { background-color: var(--mn-paper); background-image: var(--mn-grain); border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--mn-hl), 0 0 0 1px var(--mn-rule), 0 1px 1px var(--mn-sh), -8px 12px 24px -12px var(--mn-sh-2); }
.any .h1 { font-family: var(--serif); font-weight: 560; font-size: 38px; letter-spacing: -.018em; line-height: 1.02; }
.any .h3, .any .ft { font-family: var(--serif); font-weight: 600; letter-spacing: -.008em; }
.any .kind { display: inline-block; padding: 3px 8px 2px; border: 1.5px solid currentColor; border-radius: 4px; letter-spacing: .13em; font-size: 10px;
  background: color-mix(in srgb, currentColor 6%, transparent); }
.any .stamp { background: var(--mn-paper); }
.any .act.q { background: var(--mn-paper); }
.any .fd { background-color: var(--mn-paper); }
.any .fm .tp { background: var(--mn-raised); }
.any .fg.up { --g: var(--mn-ok); }

.any .win::before { content: ""; position: absolute; left: 0; right: 0; top: 48px; bottom: 0; background: url("hero-bg/h17-hillside.webp") 50% 50% / cover no-repeat; }
.any .pg { transform: scale(.8736); transform-origin: 50% 50%; }   
.any .hd { isolation: isolate; }
.any .hd::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; inline-size: var(--bw); border-radius: inherit;
  background: var(--banner) var(--bp) / var(--bs) auto no-repeat;
  -webkit-mask: linear-gradient(90deg, transparent, #000 38%); mask: linear-gradient(90deg, transparent, #000 38%); }
.any .pg.t .hd { --banner: url("hero-bg/head-trends-gouache.webp"); --bw: 540px; --bp: 50% 52%; --bs: 120%; }
.any .pg.sp .hd { --banner: url("hero-bg/head-sponsors-gouache.webp"); --bw: 470px; --bp: 52% 55%; --bs: 130%; }
.any .pg.co .hd { --banner: url("hero-bg/head-collabs-gouache.webp"); --bw: 480px; --bp: 50% 50%; --bs: 140%; }
.any .hd .stamp { box-shadow: 0 5px 12px -5px var(--mn-sh-2); }
.any .hd .act.q { box-shadow: inset 0 0 0 1px var(--mn-rule), 0 5px 12px -5px var(--mn-sh-2); }

.cu .kd b, .mem .stamp, .tr .fc .kd b, .any .kind { border: 0; border-radius: 3px 6px 4px 7px; color: var(--mn-on-fill); font-weight: 800;
  background: var(--mn-tomato) linear-gradient(100deg, #FF7A3C, var(--mn-tomato) 55%, #F45F23); rotate: -1.6deg; box-shadow: 1px 2px 0 rgba(6, 2, 8, .5); }
.any .act.f, .cu .bt.fill, .tr .fb.blue { background: var(--mn-tomato-fill) linear-gradient(180deg, #FF8148, var(--mn-tomato-fill) 58%, #F45F23);
  box-shadow: inset 0 1px 0 rgba(255, 220, 190, .45), 0 0 18px -4px rgba(255, 106, 42, .55), 0 8px 14px -8px rgba(6, 2, 8, .8); }