.tphone{--tp-screen:#fff;--tp-chrome:url(/img/phone-chrome-light.webp);--tp-glyphs:url(/img/phone-glyphs-light.png);--tp-edge:rgba(0,0,0,.1)}:root[data-theme=dark] .tphone{--tp-screen:#000;--tp-chrome:url(/img/phone-chrome-dark.webp);--tp-glyphs:url(/img/phone-glyphs-dark.png);--tp-edge:rgba(255,255,255,.1)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tphone{--tp-screen:#000;--tp-chrome:url(/img/phone-chrome-dark.webp);--tp-glyphs:url(/img/phone-glyphs-dark.png);--tp-edge:rgba(255,255,255,.1)}}.tphone{position:relative;display:block;aspect-ratio:1470/3000;width:100%}.tphone .tp-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 24px 36px var(--phone-shadow,rgba(60,20,100,.22)))}.tphone .tp-screen{position:absolute;left:5.102%;top:2.2%;width:89.796%;height:95.6%;overflow:hidden;container-type:inline-size;--pt:calc(100cqw / 440);background:var(--tp-screen);border-radius:15.15%/6.97%}.tp-top{position:absolute;left:0;top:0;width:100%;height:calc(var(--pt) * 124);isolation:isolate}.tp-chrome,.tp-glyphs{position:absolute;inset:0}.tp-chrome{background:var(--tp-chrome) 0 0/100% 100%}.tp-glyphs{background:var(--pal-nav);mix-blend-mode:plus-lighter;-webkit-mask:var(--tp-glyphs) 0 0/100% 100%;mask:var(--tp-glyphs) 0 0/100% 100%}.tp-card{position:absolute;left:calc(var(--pt) * var(--card-x));top:calc(var(--pt) * var(--card-y));width:calc(var(--pt) * var(--card-w));height:calc(var(--pt) * var(--card-h));border-radius:calc(var(--pt) * 20)}.tp-clip{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:var(--card-mask);mask-image:var(--card-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.tp-bg{position:absolute;inset:0;background:var(--card-l);isolation:isolate}:root[data-theme=dark] .tp-bg{background:var(--card-d)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tp-bg{background:var(--card-d)}}.tp-noise{position:absolute;inset:0;display:none;opacity:.06;mix-blend-mode:overlay;background:url(/img/phone-noise.png) 0 0/calc(var(--pt) * 64) calc(var(--pt) * 64) repeat}.tp-grain .tp-noise{display:block}.tp-depth,.tp-edge{position:absolute;overflow:visible;pointer-events:none}.tp-depth{mix-blend-mode:overlay}.tp-edge path{stroke:var(--tp-edge)}.tp-year{position:absolute;right:calc(var(--pt) * 48);top:calc(var(--pt) * 20);transform:translateY(-50%);font:600 calc(var(--pt) * 12)/1 -apple-system,"SF Pro Text",system-ui,sans-serif;letter-spacing:calc(var(--pt) * .5);color:color-mix(in srgb,var(--pal-tx) 50%,transparent);font-variant-numeric:tabular-nums}.tp-grid{position:absolute;left:calc(var(--pt) * var(--grid-x));top:calc(var(--pt) * 32);display:grid;grid-template-columns:calc(var(--pt) * var(--dayw)) repeat(12,calc(var(--pt) * var(--cell)));grid-auto-rows:calc(var(--pt) * var(--cell));gap:calc(var(--pt) * var(--gap))}.tp-grid i{display:block;font-style:normal}.tp-lbl{font:400 calc(var(--pt) * 11)/1 -apple-system,"SF Pro Text",system-ui,sans-serif;color:color-mix(in srgb,var(--pal-tx) 70%,transparent);display:flex!important;align-items:center;white-space:nowrap}.tp-mon{justify-content:center}.tp-day{justify-content:flex-end;font-variant-numeric:tabular-nums}.tp-hide .tp-lbl{opacity:0}.tp-cell{border-radius:calc(var(--pt) * var(--cell) * .2);background:var(--pal-0)}.tp-cell.lv1{background:var(--pal-1)}.tp-cell.lv2{background:var(--pal-2)}.tp-cell.lv3{background:var(--pal-3)}.tp-glow .tp-cell.lv1{box-shadow:0 0 calc(var(--pt) * var(--cell) * .7) color-mix(in srgb,var(--pal-1) 60%,transparent)}.tp-glow .tp-cell.lv2{box-shadow:0 0 calc(var(--pt) * var(--cell) * .7) color-mix(in srgb,var(--pal-2) 60%,transparent)}.tp-glow .tp-cell.lv3{box-shadow:0 0 calc(var(--pt) * var(--cell) * .7) color-mix(in srgb,var(--pal-3) 60%,transparent)}.tphone{--tp-spring:linear(0, .0433, .1511, .2942, .45, .6016, .7382, .8532, .944, 1.0109, 1.0559, 1.0822, 1.0935, 1.0937, 1.0861, 1.0739, 1.0596, 1.0448, 1.0311, 1.0191, 1.0093, 1.0019, .9966, .9933, .9915, .991, .9914, .9924, .9937, .9951, .9964, .9976, .9987, .9995, 1.0001, 1.0005, 1.0007, 1.0008, 1.0008, 1.0008, 1)}.tp-pre .tp-cell{opacity:0}@media(prefers-reduced-motion:no-preference){.tp-run-a .tp-cell{animation:tp-in-a calc(.6s * var(--tp-speed,1)) var(--tp-spring) calc(.1s + var(--d) * 1ms * var(--tp-speed,1)) both}.tp-run-b .tp-cell{animation:tp-in-b calc(.6s * var(--tp-speed,1)) var(--tp-spring) calc(.1s + var(--d) * 1ms * var(--tp-speed,1)) both}}@keyframes tp-in-a{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}@keyframes tp-in-b{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}.palettes,.pchip{--pal-bg:var(--pal-bg-l);--pal-0:var(--pal-0-l);--pal-1:var(--pal-1-l);--pal-2:var(--pal-2-l);--pal-3:var(--pal-3-l);--pal-tx:var(--pal-tx-l);--pal-nav:var(--pal-nav-l)}:root[data-theme=dark] .palettes,:root[data-theme=dark] .pchip{--pal-bg:var(--pal-bg-d);--pal-0:var(--pal-0-d);--pal-1:var(--pal-1-d);--pal-2:var(--pal-2-d);--pal-3:var(--pal-3-d);--pal-tx:var(--pal-tx-d);--pal-nav:var(--pal-nav-d)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .palettes,:root:not([data-theme=light]) .pchip{--pal-bg:var(--pal-bg-d);--pal-0:var(--pal-0-d);--pal-1:var(--pal-1-d);--pal-2:var(--pal-2-d);--pal-3:var(--pal-3-d);--pal-tx:var(--pal-tx-d);--pal-nav:var(--pal-nav-d)}}.palettes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-areas:"head stage" "pick stage";gap:28px clamp(28px,5vw,64px);align-items:center}.palettes .sec-head{grid-area:head;align-self:end;margin:0}.pal-stage{grid-area:stage;display:grid;justify-items:center;gap:14px;min-width:0}.pal-pick{grid-area:pick;align-self:start;display:grid;gap:18px;min-width:0}.pal-stage .tphone{width:min(70%,300px);touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}@media(max-width:900px){.palettes{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "pick";row-gap:24px}.pal-progress{display:none}}@media(max-width:520px){.pal-stage .tphone{width:70%}}.pal-hint{display:none;margin:0;color:var(--muted);font-size:14px;line-height:1.4;text-align:center}@media(hover:none)and (pointer:coarse){.pal-hint{display:block;visibility:hidden}.pal-hint.is-on{visibility:visible}}.pal-group{display:grid;gap:10px;padding-left:14px;border-left:3px solid var(--line);transition:border-color .2s ease}.pal-group.is-active{border-left-color:var(--pal-2)}.pal-label{margin:0;color:var(--muted);font-size:15px;line-height:1.45;text-wrap:pretty}.pal-label b{font-family:var(--f-display);font-size:17px;font-weight:600;color:var(--ink);margin-right:4px}.pchips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pchip{--s:10px;display:flex;flex-direction:column;align-items:stretch;gap:7px;min-height:44px;padding:6px 6px 9px;font:600 14px/1 var(--f-body);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:16px;cursor:pointer;transition-property:transform,border-color,box-shadow;transition-duration:.12s;transition-timing-function:ease}.pchip:active{transform:scale(.97)}.pchip:hover{border-color:color-mix(in srgb,var(--ink) 45%,var(--line))}.pchip[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.pchip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.pchip .nm{display:block;text-align:center;line-height:1.2}.lg,.pal-legend{display:flex;align-items:center;justify-content:center;gap:calc(var(--s) * .94);border-radius:10px;background:var(--pal-bg,#ccc);font:400 calc(var(--s) * 1.08)/1 -apple-system,"SF Pro Text",system-ui,sans-serif;color:color-mix(in srgb,var(--pal-tx,#555) 60%,transparent);white-space:nowrap}.lg{padding:9px 6px}.lg-w{font-style:normal}.lg-c{display:flex;gap:calc(var(--s) * .5)}.lg-c b{display:block;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .13)}.lg-0{background:var(--pal-0);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--pal-tx,#555) 30%,transparent)}.lg-1{background:var(--pal-1)}.lg-2{background:var(--pal-2)}.lg-3{background:var(--pal-3)}.pal-legend{--s:12px;padding:9px 14px;border-radius:12px}@media(max-width:520px){.pchip{padding:5px 5px 8px;border-radius:15px;font-size:13.5px;gap:6px}}.pal-progress{visibility:hidden;height:3px;border-radius:2px;background:var(--line);max-width:420px;overflow:hidden}.pal-progress.is-on{visibility:visible}.pal-progress i{display:block;height:100%;width:0;background:var(--link)}.pal-stage .tphone.is-springing{transition:transform .45s cubic-bezier(.18,.89,.32,1.12)}@media(prefers-reduced-motion:reduce){.pal-group,.pchip,.pal-stage .tphone.is-springing{transition:none}.pchip:active{transform:none}}
