#mode-calendar { position:fixed; inset:0; z-index:22; background:#cfeee0; } #mode-calendar #cal-frame { position:absolute; left:0; top:0; width:1194px; height:834px; overflow:hidden; background:#cfeee0; font-family:var(--font-read); } #mode-calendar #cal-scene { position:absolute; inset:0; overflow:hidden; perspective:2200px; } #mode-calendar #cal-x::before, #mode-calendar #cal-x::after { content:""; position:absolute; background:#7A4A0A; border-radius:4px; } #mode-calendar #cal-x::before { transform:rotate(45deg); } #mode-calendar #cal-x::after { transform:rotate(-45deg); } #mode-calendar #cal-x { position:absolute; box-sizing:border-box; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } #mode-calendar button { font-family:var(--font-read); } body[data-mode="calendar"] #menu-btn, body[data-mode="calendar"] #title-banner, body[data-mode="calendar"] .al-stamps { opacity:0 !important; pointer-events:none !important; transition:opacity .4s; } #mode-calendar #cal-scene {position:absolute; inset:0; overflow:hidden; perspective:2600px;} #mode-calendar .cal-page {position:absolute; inset:0; z-index:1; backface-visibility:hidden; -webkit-backface-visibility:hidden;} #mode-calendar .cal-page.cal-turning {z-index:2; will-change:transform, opacity;} #mode-calendar .cal-cube {position:absolute; inset:0; z-index:2; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transform-origin:50% 50% -597px; will-change:transform;} #mode-calendar .cal-cube .cal-page {position:absolute; inset:0;} #mode-calendar .cal-cube .cal-face-r {transform-origin:0 50%; transform:translateX(100%) rotateY(90deg);} #mode-calendar .cal-cube .cal-face-l {transform-origin:100% 50%; transform:translateX(-100%) rotateY(-90deg);} #mode-calendar .cal-cube.cal-spin-fwd {animation:calCubeFwd .6s cubic-bezier(.65,0,.35,1) forwards;} #mode-calendar .cal-cube.cal-spin-back {animation:calCubeBack .6s cubic-bezier(.65,0,.35,1) forwards;} @keyframes calCubeFwd { from { transform:rotateY(0deg); } to { transform:rotateY(-90deg); } } @keyframes calCubeBack { from { transform:rotateY(0deg); } to { transform:rotateY(90deg); } } #mode-calendar .cal-page.cal-leave-left {animation:calLeaveL .5s cubic-bezier(.65,0,.35,1) forwards;} #mode-calendar .cal-page.cal-enter-left {animation:calEnterL .5s cubic-bezier(.65,0,.35,1) forwards;} #mode-calendar .cal-page.cal-leave-right {animation:calLeaveR .5s cubic-bezier(.65,0,.35,1) forwards;} #mode-calendar .cal-page.cal-enter-right {animation:calEnterR .5s cubic-bezier(.65,0,.35,1) forwards;} @keyframes calLeaveL { to { transform:translateX(-14%) rotateY(-70deg); opacity:0; } } @keyframes calEnterL { from { transform:translateX(14%) rotateY(70deg); opacity:0; } to { transform:none; opacity:1; } } @keyframes calLeaveR { to { transform:translateX(14%) rotateY(70deg); opacity:0; } } @keyframes calEnterR { from { transform:translateX(-14%) rotateY(-70deg); opacity:0; } to { transform:none; opacity:1; } } #mode-calendar .cal-banner {position:absolute; left:60px; right:60px; top:32px; height:146px; border-radius:26px; overflow:hidden; box-shadow:0 8px 0 #0002, inset 0 -6px 0 #0001;} #mode-calendar .cal-banner .cal-deco {position:absolute; inset:0;} #mode-calendar .cal-banner .cal-deco span {position:absolute; left:50%; top:14px; transform:translateX(-50%); font-size:15px; color:#fff9; letter-spacing:.5px; white-space:nowrap;} #mode-calendar .cal-banner .cal-title {position:absolute; left:292px; right:146px; top:0; bottom:0; display:flex; align-items:center; justify-content:center; gap:22px; pointer-events:none;} #mode-calendar .cal-banner .cal-month {font-size:var(--mfs,74px); font-weight:700; color:#fff; text-shadow:0 4px 0 #0003;} #mode-calendar .cal-banner .cal-year {font-size:44px; font-weight:700; color:#fff; opacity:.85; text-shadow:0 3px 0 #0003;} #mode-calendar .cal-arrow {position:absolute; top:50%; width:112px; height:112px; margin-top:-56px; border-radius:50%; background:linear-gradient(#ffffffb8,#e9e2d1b8); border:3px solid #7A4A0A; box-sizing:border-box; box-shadow:0 8px 0 #7A4A0A55, 0 2px 4px #0004; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;} #mode-calendar .cal-arrow svg {width:56px; height:56px;} #mode-calendar .cal-arrow.cal-l {left:24px;} #mode-calendar .cal-arrow.cal-r {right:24px;} #mode-calendar .cal-grid {position:absolute; left:60px; right:60px; top:194px; bottom:32px; background:#fffdf6; border-radius:26px; box-shadow:0 8px 0 #0002; padding:14px 16px 16px; display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:64px 52px repeat(var(--rows,6),minmax(0,1fr)); gap:8px; box-sizing:border-box;} #mode-calendar .cal-pillslot {grid-column:1 / -1; display:flex; align-items:center; justify-content:center;} #mode-calendar .cal-pillslot span {height:56px; padding:0 36px; border-radius:28px; background:#e9f4fb; border:2px dashed #9cc6e2; color:#6a9cbf; font-size:20px; display:flex; align-items:center;} #mode-calendar .cal-wd {display:flex; align-items:center; justify-content:center; font-size:var(--wdfs,29px); overflow:hidden; font-weight:700; font-family:inherit; border:none; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; touch-action:manipulation; color:#fff; background:#7A4A0A; border-radius:14px; box-shadow:0 3px 0 #4a2a00;} #mode-calendar .cal-wd.cal-sun, #mode-calendar .cal-wd.cal-sat {background:#c0392b; box-shadow:0 3px 0 #7a1f18;} #mode-calendar .cal-day {position:relative; border-radius:16px; font-family:inherit; border:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; background:#f3efe4; display:flex; align-items:flex-start; justify-content:flex-start; padding:6px 0 0 12px; box-sizing:border-box; font-size:38px; font-weight:700; color:#4a3a1a; cursor:pointer;} #mode-calendar .cal-day.cal-other {background:transparent; color:#0000;} #mode-calendar .cal-day.cal-sun, #mode-calendar .cal-day.cal-sat {color:#c0392b;} #mode-calendar .cal-day.cal-today {background:#ffe27a; box-shadow:inset 0 0 0 5px #f4a300;} #mode-calendar .cal-day.cal-today::after {content:''; position:absolute; right:12px; top:12px; width:18px; height:18px; border-radius:50%; background:#e0353b;} #mode-calendar .cal-day .cal-lab {position:absolute; left:0; right:0; bottom:6px; text-align:center; font-size:22px; font-weight:700; color:#2b6cb0; line-height:1;} #mode-calendar .cal-day.cal-today .cal-lab {color:#a05a00;} #mode-calendar #cal-x {position:absolute; left:40px; top:40px; width:64px; height:64px; transform:translate(-50%,-50%); border-radius:50%; background:#f7d774; border:3px solid #7A4A0A; box-sizing:border-box; box-shadow:0 5px 0 #7A4A0A66; display:flex; align-items:center; justify-content:center; pointer-events:auto; cursor:pointer;} #mode-calendar #cal-x i {display:none;} #mode-calendar #cal-x::before, #mode-calendar #cal-x::after {content:""; position:absolute; width:34px; height:6px; background:#7A4A0A; border-radius:4px;} #mode-calendar #cal-x::before {transform:rotate(45deg);} #mode-calendar #cal-x::after {transform:rotate(-45deg);} #mode-calendar #cal-frame .cal-arrow.cal-down, #mode-calendar #cal-frame #cal-x.cal-down, #mode-calendar #cal-frame .cal-banner .cal-month.cal-down, #mode-calendar #cal-frame .cal-banner .cal-year.cal-down {transform:translateY(5px) scale(1.02,.96) !important; box-shadow:0 1px 0 #00000026, inset 0 2px 0 #ffffff7a !important;} #mode-calendar #cal-frame .cal-arrow.cal-up, #mode-calendar #cal-frame #cal-x.cal-up, #mode-calendar #cal-frame .cal-banner .cal-month.cal-up, #mode-calendar #cal-frame .cal-banner .cal-year.cal-up {animation:calKeyPop .35s cubic-bezier(.34,1.56,.64,1) !important;} #mode-calendar [data-look="rainbow"] .cal-wd {color:#4a3a1a; box-shadow:0 3px 0 #0000001a;} #mode-calendar [data-look="rainbow"] .cal-wd:nth-child(2) {background:#ffb9b9} #mode-calendar [data-look="rainbow"] .cal-wd:nth-child(3) {background:#ffd9a3} #mode-calendar [data-look="rainbow"] .cal-wd:nth-child(4) {background:#fff1a6} #mode-calendar [data-look="rainbow"] .cal-wd:nth-child(5) {background:#c9f0b4} #mode-calendar [data-look="rainbow"] .cal-wd:nth-child(6) {background:#b7e6ff} #mode-calendar [data-look="rainbow"] .cal-wd:nth-child(7) {background:#d9c9ff} #mode-calendar [data-look="rainbow"] .cal-wd:nth-child(8) {background:#ffc6e6} #mode-calendar [data-look="rainbow"] .cal-day {background:#fff; border:3px solid #f1e9d9; border-radius:22px; color:#5a4a2a;} #mode-calendar [data-look="rainbow"] .cal-day.cal-sun, #mode-calendar [data-look="rainbow"] .cal-day.cal-sat {color:#e8735a;} #mode-calendar [data-look="rainbow"] .cal-day.cal-other {border-color:transparent; background:transparent;} #mode-calendar [data-look="rainbow"] .cal-day.cal-today {background:#fff2a8; border-color:#ffc21c; box-shadow:0 0 0 6px #ffe98a80;} #mode-calendar [data-look="rainbow"] .cal-day .cal-lab {color:#3b8bd1;} #mode-calendar [data-look="rainbow"] .cal-grid {background:#fff;} #mode-calendar [data-look="sky"] .cal-wd {background:#dff1ff; color:#1f4e79; border-radius:30px; box-shadow:none;} #mode-calendar [data-look="sky"] .cal-wd.cal-sun, #mode-calendar [data-look="sky"] .cal-wd.cal-sat {background:#ffe3c2; color:#a0522d;} #mode-calendar [data-look="sky"] .cal-day {background:#f7fbff; color:#2c5282; border-radius:18px 24px 16px 26px / 24px 16px 26px 18px; box-shadow:0 2px 0 #d5e6f5;} #mode-calendar [data-look="sky"] .cal-day.cal-sun, #mode-calendar [data-look="sky"] .cal-day.cal-sat {color:#d9711c; background:#fff7ee; box-shadow:0 2px 0 #f5e2cc;} #mode-calendar [data-look="sky"] .cal-day.cal-other {background:transparent; box-shadow:none;} #mode-calendar [data-look="sky"] .cal-day.cal-today {background:#fff3b0; box-shadow:0 0 0 5px #ffd54a; color:#7a4a00;} #mode-calendar [data-look="sky"] .cal-day .cal-lab {color:#2b6cb0;} #mode-calendar [data-look="sky"] .cal-grid {background:#fff;} #mode-calendar [data-look="sticker"] .cal-grid {background:#fffdf6;} #mode-calendar [data-look="sticker"] .cal-wd {color:#fff; text-shadow:0 2px 0 #0003; border-radius:0; box-shadow:none; background:linear-gradient(90deg,#ff8a80,#ffb74d,#ffd54f,#aed581,#4fc3f7,#9575cd,#f48fb1); background-size:700% 100%;} #mode-calendar [data-look="sticker"] .cal-wd:nth-child(2) {background-position:0% 0;border-radius:26px 0 0 26px} #mode-calendar [data-look="sticker"] .cal-wd:nth-child(3) {background-position:16.6% 0} #mode-calendar [data-look="sticker"] .cal-wd:nth-child(4) {background-position:33.3% 0} #mode-calendar [data-look="sticker"] .cal-wd:nth-child(5) {background-position:50% 0} #mode-calendar [data-look="sticker"] .cal-wd:nth-child(6) {background-position:66.6% 0} #mode-calendar [data-look="sticker"] .cal-wd:nth-child(7) {background-position:83.3% 0} #mode-calendar [data-look="sticker"] .cal-wd:nth-child(8) {background-position:100% 0;border-radius:0 26px 26px 0} #mode-calendar [data-look="sticker"] .cal-day {background:linear-gradient(#fff,#f4eee2); color:#3a3a5a; border-radius:20px; box-shadow:0 4px 0 #dcd2bd, 0 7px 10px #0000001a, inset 0 2px 0 #fff;} #mode-calendar [data-look="sticker"] .cal-day.cal-sun, #mode-calendar [data-look="sticker"] .cal-day.cal-sat {color:#e07a5f;} #mode-calendar [data-look="sticker"] .cal-day.cal-other {background:transparent; box-shadow:none;} #mode-calendar [data-look="sticker"] .cal-day.cal-today {background:linear-gradient(#fff6b0,#ffe27a); box-shadow:0 4px 0 #e0a800, 0 7px 10px #0000001a, inset 0 2px 0 #fff;} #mode-calendar [data-look="sticker"] .cal-day .cal-lab {color:#3b8bd1;} #mode-calendar [data-look="keys"] .cal-grid {background:#fff;} #mode-calendar [data-look="keys"] .cal-wd {color:#4a3a1a; box-shadow:0 3px 0 #0000001a;} #mode-calendar [data-look="keys"] .cal-wd:nth-child(2) {background:#ffb9b9} #mode-calendar [data-look="keys"] .cal-wd:nth-child(3) {background:#ffd9a3} #mode-calendar [data-look="keys"] .cal-wd:nth-child(4) {background:#fff1a6} #mode-calendar [data-look="keys"] .cal-wd:nth-child(5) {background:#c9f0b4} #mode-calendar [data-look="keys"] .cal-wd:nth-child(6) {background:#b7e6ff} #mode-calendar [data-look="keys"] .cal-wd:nth-child(7) {background:#d9c9ff} #mode-calendar [data-look="keys"] .cal-wd:nth-child(8) {background:#ffc6e6} #mode-calendar [data-look="keys"] .cal-day {--edge:#d9cfb8; --face:#fffaf0; --edge-h:6px; --drop:0 8px 12px #00000014; --rim:2px; --rimc:#e9dfc8; --ol:0px; --olc:#7A4A0A; --num:38px; --rad:20px; color:#5a4a2a; border:var(--ol) solid var(--olc); border-radius:var(--rad); font-size:var(--num); background:linear-gradient(180deg,#ffffff 0%,#ffffffcc 30%,var(--face) 55%,var(--face) 100%); box-shadow:0 var(--edge-h) 0 var(--edge), var(--drop), inset 0 2px 0 #fff, inset 0 0 0 var(--rim) var(--rimc); transition:transform .08s ease-out, box-shadow .08s ease-out; margin-bottom:6px;} #mode-calendar [data-look="keys"] .cal-day.cal-other {background:transparent; box-shadow:none; border-color:transparent; pointer-events:none;} #mode-calendar [data-look="keys"] .cal-day.cal-today {--face:#ffe98a; --edge:#e0a800; --rimc:#f0c53a; color:#7a4a00; background:linear-gradient(180deg,#fffbe0 0%,#fff6c0cc 30%,var(--face) 55%,var(--face) 100%);} #mode-calendar [data-look="keys"] .cal-day .cal-lab {color:#3b8bd1;} #mode-calendar .cal-day {display:flex; flex-direction:column; padding:2px 8px 2px; min-height:0; overflow:visible; margin:3px 4px 6px !important;} #mode-calendar .cal-day.cal-other {margin:3px 4px 6px !important;} #mode-calendar .cal-day .cal-num {flex:1; display:flex; align-items:center; justify-content:flex-start; line-height:1; padding-left:4px; min-height:0;} #mode-calendar [data-numpos="center"] .cal-day .cal-num {justify-content:center; padding-left:0;} #mode-calendar .cal-day .cal-lab {position:static; flex:none; align-self:stretch; height:26px; line-height:26px; font-size:var(--labfs,20px); white-space:nowrap; text-align:center; overflow:visible;} #mode-calendar .cal-grid.cal-rows6 .cal-day {--num:calc(var(--num-base,38px) * .82);} #mode-calendar .cal-grid.cal-rows6 .cal-day .cal-lab {height:22px; line-height:22px;} #mode-calendar [data-look="keys"] .cal-day.cal-today .cal-lab {color:#a05a00;} #mode-calendar [data-look="keys"] .cal-day.cal-down {transform:translateY(var(--edge-h)) scale(1.02,.96); box-shadow:0 1px 0 var(--edge), 0 2px 4px #0000000a, inset 0 2px 0 #fff, inset 0 0 0 var(--rim) var(--rimc);} #mode-calendar [data-look="keys"] .cal-day.cal-up {animation:calKeyPop .35s cubic-bezier(.34,1.56,.64,1);} #mode-calendar [data-outline="thin"] .cal-day {--ol:2px; --olc:#c9b892; --rim:0px;} #mode-calendar [data-outline="medium"] .cal-day {--ol:3px; --olc:#a88a5a; --rim:0px;} #mode-calendar [data-outline="thick"] .cal-day {--ol:4px; --olc:#7A4A0A; --rim:0px;} #mode-calendar [data-outline="ink"] .cal-day {--ol:3px; --olc:#3a3a5a; --rim:0px;} #mode-calendar [data-outline="weekday"] .cal-day {--ol:3px; --olc:var(--cold); --rim:0px;} #mode-calendar [data-outline="weekday-soft"] .cal-day {--ol:4px; --olc:var(--col); --rim:0px;} #mode-calendar [data-outline="month"] .cal-day {--ol:3px; --olc:var(--tint); --rim:0px;} #mode-calendar [data-outline] .cal-day.cal-today {--olc:#e0a800;} #mode-calendar [data-outline="weekday"] .cal-day.cal-today, #mode-calendar [data-outline="weekday-soft"] .cal-day.cal-today {--olc:#e0a800;} #mode-calendar [data-shadow="deeper"] .cal-day {--edge-h:9px;} #mode-calendar [data-shadow="deeper-dark"] .cal-day {--edge-h:9px; --edge:#b8a889; --drop:0 12px 14px #0000001f;} #mode-calendar [data-shadow="soft"] .cal-day {--edge-h:4px; --drop:0 14px 24px #00000026;} #mode-calendar [data-shadow="cartoon"] .cal-day {--edge-h:0px; --drop:5px 6px 0 #3a3a5a; --rim:0px;} #mode-calendar [data-shadow="cartoon"] .cal-day.cal-down {transform:translate(3px,4px); box-shadow:2px 2px 0 #3a3a5a;} #mode-calendar [data-shadow="ink-edge"] .cal-day {--edge:#3a3a5a; --edge-h:6px; --drop:none;} #mode-calendar [data-shadow="weekday-edge"] .cal-day {--edge:var(--cold); --edge-h:7px;} #mode-calendar [data-shadow="weekday-edge"] .cal-day.cal-today {--edge:#e0a800;} #mode-calendar [data-shadow="month-edge"] .cal-day {--edge:var(--tint); --edge-h:7px;} #mode-calendar [data-face="cream"] .cal-day {--face:#fff3d6;} #mode-calendar [data-face="month"] .cal-day {--face:color-mix(in srgb, var(--tint) 16%, #fff);} #mode-calendar [data-face="weekday"] .cal-day {--face:var(--col);} #mode-calendar [data-face="weekday-soft"] .cal-day {--face:color-mix(in srgb, var(--col) 45%, #fff);} #mode-calendar [data-face] .cal-day.cal-today {--face:#ffe98a;} #mode-calendar .cal-day.cal-other {background:transparent !important; box-shadow:none !important; border-color:transparent !important;} #mode-calendar [data-num="big"] .cal-day {--num-base:46px; --num:46px;} #mode-calendar [data-num="huge"] .cal-day {--num-base:54px; --num:54px;} #mode-calendar [data-corner="rounder"] .cal-day {--rad:30px;} #mode-calendar [data-corner="pill"] .cal-day {--rad:40px;} #mode-calendar [data-corner="soft-square"] .cal-day {--rad:12px;} @keyframes calKeyPop { 0%{transform:translateY(5px) scale(1.02,.96)} 60%{transform:translateY(-2px) scale(1.06)} 100%{transform:none} } #mode-calendar [data-look="keys"] .cal-day {box-shadow:0 6px 0 var(--edge), 0 8px 12px #00000014, inset 0 2px 0 #fff, inset 0 0 0 2px #e9dfc8;} #mode-calendar [data-look="keys"] .cal-day.cal-today {box-shadow:0 6px 0 var(--edge), 0 8px 12px #00000014, inset 0 2px 0 #fff, inset 0 0 0 2px #f0c53a;} #mode-calendar [data-look="keys"] .cal-day.cal-down {box-shadow:0 1px 0 var(--edge), 0 2px 4px #0000000a, inset 0 2px 0 #fff, inset 0 0 0 2px #e9dfc8;} #mode-calendar [data-look="keys"] .cal-day.cal-other {box-shadow:none;} #mode-calendar [data-paper="tint"] .cal-grid {background:linear-gradient(180deg, color-mix(in srgb, var(--tint) 22%, #fff), color-mix(in srgb, var(--tint) 10%, #fff));} #mode-calendar [data-paper="notebook"] .cal-grid {background:#fffdf4; background-image:linear-gradient(#cfe3f5 1.5px, transparent 1.5px), linear-gradient(90deg, #cfe3f5 1.5px, transparent 1.5px); background-size:34px 34px;} #mode-calendar [data-paper="sky"] .cal-grid {background: radial-gradient(circle at 18% 22%, #fff 0 60px, transparent 61px), radial-gradient(circle at 27% 18%, #fff 0 44px, transparent 45px), radial-gradient(circle at 75% 30%, #fff 0 52px, transparent 53px), radial-gradient(circle at 84% 34%, #fff 0 40px, transparent 41px), radial-gradient(circle at 50% 78%, #fff 0 48px, transparent 49px), radial-gradient(circle at 58% 82%, #fff 0 38px, transparent 39px), linear-gradient(180deg, #cfeaff, #eef8ff 60%, #fff);} #mode-calendar [data-paper="dots"] .cal-grid {background:#fff; background-image:radial-gradient(color-mix(in srgb, var(--tint) 45%, #fff) 5px, transparent 5.5px); background-size:44px 44px; background-position:22px 22px;} #mode-calendar .cal-grid > * {position:relative; z-index:1;} #mode-calendar .cal-grid::before {content:''; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none; opacity:var(--po,1); background:var(--pbg,none); background-size:var(--pbs,auto); background-position:var(--pbp,0 0);} #mode-calendar [data-paper="dots-diag"] .cal-grid {--po:.55; --pbg:radial-gradient(var(--tint) 5px, transparent 5.5px), radial-gradient(var(--tint) 5px, transparent 5.5px); --pbs:56px 56px; --pbp:0 0, 28px 28px;} #mode-calendar [data-paper="dots-two"] .cal-grid {--po:.45; --pbg:radial-gradient(var(--tint) 6px, transparent 6.5px), radial-gradient(var(--tint) 3px, transparent 3.5px); --pbs:64px 64px; --pbp:0 0, 32px 32px;} #mode-calendar [data-paper="dots-soft"] .cal-grid {--po:.22; --pbg:radial-gradient(var(--tint) 9px, transparent 9.5px), radial-gradient(var(--tint) 9px, transparent 9.5px); --pbs:80px 80px; --pbp:0 0, 40px 40px;} #mode-calendar [data-paper="icons"] .cal-grid {--po:.32; --pbg:var(--icon);} #mode-calendar [data-paper="icons"] .cal-grid::before {background-repeat:repeat;} #mode-calendar [data-paper="icons-sparse"] .cal-grid {--po:.22; --pbg:var(--icon-big);} #mode-calendar [data-paper="icons-sparse"] .cal-grid::before {background-repeat:repeat;} #mode-calendar [data-paper="icons-dots"] .cal-grid {--po:.35; --pbg:var(--icon), radial-gradient(var(--tint) 4px, transparent 4.5px);} #mode-calendar [data-paper="icons-dots"] .cal-grid::before {background-size:120px 120px, 60px 60px; background-position:0 0, 30px 30px; background-repeat:repeat;} #mode-calendar [data-paper="icons-edge"] .cal-grid {--po:.5; --pbg:var(--icon-row), var(--icon-row);} #mode-calendar [data-paper="icons-edge"] .cal-grid::before {background-repeat:repeat-x; background-position:8px 8px, 8px calc(100% - 48px);} #mode-calendar [data-paper="confetti"] .cal-grid {--po:.55; --pbg:var(--confetti);} #mode-calendar [data-paper="confetti"] .cal-grid::before {background-size:180px 180px; background-repeat:repeat;} #mode-calendar [data-paper="stripes"] .cal-grid {--po:.12; --pbg:repeating-linear-gradient(45deg, var(--tint) 0 16px, transparent 16px 48px);} #mode-calendar [data-paper="gingham"] .cal-grid {--po:.14; --pbg:linear-gradient(var(--tint) 50%, transparent 50%), linear-gradient(90deg, var(--tint) 50%, transparent 50%); --pbs:48px 48px;} #mode-calendar [data-paper="stars"] .cal-grid {--po:.3; --pbg:var(--stars);} #mode-calendar [data-paper="stars"] .cal-grid::before {background-repeat:repeat;} #mode-calendar [data-paper="bubbles"] .cal-grid {--po:.35; --pbg:radial-gradient(circle, transparent 12px, var(--tint) 12.5px, var(--tint) 14px, transparent 14.5px), radial-gradient(circle, transparent 7px, var(--tint) 7.5px, var(--tint) 9px, transparent 9.5px); --pbs:90px 90px; --pbp:0 0, 45px 45px;} #mode-calendar [data-paper="tint-icons"] .cal-grid {--po:.28; --pbg:var(--icon); background:linear-gradient(180deg, color-mix(in srgb, var(--tint) 18%, #fff), #fff);} #mode-calendar [data-paper="tint-icons"] .cal-grid::before {background-repeat:repeat;} #mode-calendar #cal-frame[data-backdrop="month"] {background:color-mix(in srgb, var(--tint) 55%, #fff);} #mode-calendar #cal-frame[data-backdrop="month-deep"] {background:color-mix(in srgb, var(--tint) 80%, #333);} #mode-calendar #cal-frame[data-backdrop="month-grad"] {background:linear-gradient(180deg, var(--tint2), var(--tint));} #mode-calendar #cal-frame[data-backdrop="cream"] {background:#f6ecd8;} #mode-calendar #cal-frame[data-backdrop="sky"] {background:linear-gradient(180deg, #bfe4ff, #eaf6ff);} #mode-calendar #cal-frame[data-backdrop="mint"] {background:#cfeee0;} #mode-calendar #cal-frame[data-backdrop="lavender"] {background:#e3dcf7;} #mode-calendar #cal-frame[data-backdrop="wood"] {background:repeating-linear-gradient(90deg, #d9a56b 0 40px, #cf9a5f 40px 80px);} #mode-calendar #cal-frame[data-backdrop="navy"] {background:#2b3a67;} #mode-calendar #cal-frame[data-backdrop="chalk"] {background:#3f6b5a;} #mode-calendar #cal-frame[data-backdrop="white"] {background:#fff;} #mode-calendar [data-weeks="shade"] .cal-day:not(.cal-other) {--face:color-mix(in srgb, var(--col) calc(100% - var(--row) * 11%), #6b4a20);} #mode-calendar [data-weeks="shade"] .cal-day:not(.cal-other):not(.cal-today) {background:linear-gradient(180deg,#ffffff 0%,#ffffffb0 26%,var(--face) 52%,var(--face) 100%);} #mode-calendar [data-weeks="shade-soft"] .cal-day:not(.cal-other) {--face:color-mix(in srgb, var(--col) calc(100% - var(--row) * 6%), #6b4a20);} #mode-calendar [data-weeks="shade-soft"] .cal-day:not(.cal-other):not(.cal-today) {background:linear-gradient(180deg,#ffffff 0%,#ffffffb0 26%,var(--face) 52%,var(--face) 100%);} #mode-calendar [data-weeks="shade-strong"] .cal-day:not(.cal-other) {--face:color-mix(in srgb, var(--col) calc(100% - var(--row) * 15%), #6b4a20);} #mode-calendar [data-weeks="shade-strong"] .cal-day:not(.cal-other):not(.cal-today) {background:linear-gradient(180deg,#ffffff 0%,#ffffffb0 26%,var(--face) 52%,var(--face) 100%);} #mode-calendar [data-weeks="hue"] .cal-day:not(.cal-other) {--face:color-mix(in srgb, var(--col) calc(100% - var(--row) * 16%), var(--cold));} #mode-calendar [data-weeks="hue"] .cal-day:not(.cal-other):not(.cal-today) {background:linear-gradient(180deg,#ffffff 0%,#ffffffb0 26%,var(--face) 52%,var(--face) 100%);} #mode-calendar [data-weeks="hue-strong"] .cal-day:not(.cal-other) {--face:color-mix(in srgb, var(--col) calc(100% - var(--row) * 20%), var(--cold));} #mode-calendar [data-weeks="hue-strong"] .cal-day:not(.cal-other):not(.cal-today) {background:linear-gradient(180deg,#ffffff 0%,#ffffffb0 26%,var(--face) 52%,var(--face) 100%);} #mode-calendar [data-weeks="shade-up"] .cal-day:not(.cal-other) {--face:color-mix(in srgb, var(--col) calc(45% + var(--row) * 11%), #6b4a20);} #mode-calendar [data-weeks="shade-up"] .cal-day:not(.cal-other):not(.cal-today) {background:linear-gradient(180deg,#ffffff 0%,#ffffffb0 26%,var(--face) 52%,var(--face) 100%);} #mode-calendar [data-look="keys"] .cal-wd {--wedge:4px; --wedgec:#0000002e; box-shadow:0 var(--wedge) 0 var(--wedgec), inset 0 2px 0 #ffffffb0; transition:transform .08s ease-out, box-shadow .08s ease-out;} #mode-calendar [data-look="keys"] .cal-wd.cal-down {transform:translateY(var(--wedge)) scale(1.02,.95); box-shadow:0 1px 0 var(--wedgec), inset 0 2px 0 #ffffffb0;} #mode-calendar [data-look="keys"] .cal-wd.cal-up {animation:calKeyPop .35s cubic-bezier(.34,1.56,.64,1);} #mode-calendar .cal-banner .cal-title {pointer-events:none;} #mode-calendar .cal-banner .cal-month {position:relative; pointer-events:auto; cursor:pointer; font-family:inherit; border:none; display:flex; align-items:center; -webkit-tap-highlight-color:transparent; touch-action:manipulation; background:none; color:#fff; padding:0; transition:transform .08s ease-out, box-shadow .08s ease-out;} #mode-calendar [data-plate="plate"] .cal-banner .cal-month {--medge:5px; padding:2px 30px 8px; border-radius:26px; background:linear-gradient(180deg,#ffffff52 0%,#ffffff28 45%,#ffffff1f 100%); box-shadow:0 var(--medge) 0 #00000026, inset 0 2px 0 #ffffff7a;} #mode-calendar [data-plate="underline"] .cal-banner .cal-month {--medge:5px; padding:2px 18px 10px; border-radius:0 0 18px 18px; box-shadow:0 var(--medge) 0 #ffffff8c;} #mode-calendar [data-plate="cream"] .cal-banner .cal-month {--medge:6px; padding:2px 30px 8px; border-radius:26px; background:linear-gradient(180deg,#fffdf6,#f3e9d4); color:#5a4a2a; text-shadow:none; box-shadow:0 var(--medge) 0 #00000033, inset 0 2px 0 #fff;} #mode-calendar .cal-banner .cal-month.cal-down {transform:translateY(var(--medge,4px)) scale(1.01,.97); box-shadow:0 1px 0 #00000026, inset 0 2px 0 #ffffff7a;} #mode-calendar .cal-banner .cal-month.cal-up {animation:calKeyPop .35s cubic-bezier(.34,1.56,.64,1);} #mode-calendar .cal-arrow.cal-l {left:65px; top:calc(50% - 56px); width:112px; height:112px; margin-top:0; transform:none; border-radius:50%; background:linear-gradient(rgba(255,255,255,0.72),rgba(233,226,209,0.72)); border:3px solid #7A4A0A; box-shadow:0 8px 0 #7A4A0A55, 0 2px 4px #0004;} #mode-calendar .cal-arrow.cal-l svg {width:56px; height:56px;} #mode-calendar .cal-arrow.cal-r {right:65px; left:auto; top:calc(50% - 56px); width:112px; height:112px; margin-top:0; transform:none; border-radius:50%; background:linear-gradient(rgba(255,255,255,0.72),rgba(233,226,209,0.72)); border:3px solid #7A4A0A; box-shadow:0 8px 0 #7A4A0A55, 0 2px 4px #0004;} #mode-calendar .cal-arrow.cal-r svg {width:56px; height:56px;} #mode-calendar #cal-x {left:54px; top:24px; width:64px; height:64px; margin-top:0; transform:none; border-radius:50%; background:linear-gradient(rgba(251,227,138,1),rgba(247,215,116,1)); border:3px solid #7A4A0A; box-shadow:0 5px 0 #7A4A0A55, 0 2px 4px #0004;} #mode-calendar #cal-x::before, #mode-calendar #cal-x::after {width:34px; height:6px;} #mode-calendar #cal-frame .cal-banner .cal-month {font-size:74px !important; translate:0px 0px; padding:0 20px !important; height:92px !important; line-height:92px !important; box-sizing:border-box; display:inline-flex; align-items:center; overflow:visible; background:linear-gradient(180deg,rgba(255,255,255,0.32),rgba(255,255,255,0.2)) !important; border:1px solid #7A4A0A !important; border-radius:51px !important; box-shadow:0 4px 0 #00000026, inset 0 2px 0 #ffffff7a !important;} #mode-calendar #cal-frame .cal-banner .cal-title {flex-direction:row;} #mode-calendar #cal-frame .cal-banner .cal-year {font-size:44px !important; opacity:1 !important; color:rgba(255,255,255,0.72) !important; font-weight:700 !important; position:relative; pointer-events:auto; cursor:pointer; transition:transform .08s; translate:-9px -42px; text-shadow:0 3px 0 #0003 !important; padding:0 16px; height:56px; line-height:56px; box-sizing:border-box; display:inline-flex; align-items:center; overflow:visible; background:linear-gradient(180deg,rgba(255,255,255,0.33),rgba(255,255,255,0.21)); border:1px solid #7A4A0A; border-radius:51px; box-shadow:0 4px 0 #00000026, inset 0 2px 0 #ffffff7a;}