.tc{aspect-ratio:16/9;background-color:var(--hover);isolation:isolate;background-position:50%;background-size:cover;border-radius:10px;width:100%;display:block;position:relative;overflow:hidden}.tc:after{content:"";z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);pointer-events:none;position:absolute;inset:0}.tc-mark{color:var(--muted);place-items:center;display:grid}.tc-img{object-fit:cover;object-position:center;width:100%;height:100%;position:absolute;inset:0}.tc-page{background:linear-gradient(160deg,#efefef,#e4e4e4)}:root[data-theme=dark] .tc-page{background:linear-gradient(160deg,#2a2a2d,#1d1d20)}.tc-page-img{width:42%;height:auto;transition:transform var(--ui-med,.18s) var(--ui-ease,ease);border-radius:3px;position:absolute;top:9%;left:50%;transform:translate(-50%);box-shadow:0 14px 28px -14px #00000059,0 0 0 1px #0000000f}.tc-fit-img{width:auto;max-width:86%;height:auto;max-height:82%;transition:transform var(--ui-med,.18s) var(--ui-ease,ease);border-radius:4px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 14px 28px -14px #00000059,0 0 0 1px #0000000f}.tc:is(.tc-frame-page,.tc-frame-square,.tc-frame-sheet,.tc-frame-form){background:linear-gradient(160deg, color-mix(in srgb, var(--c-a) 22%, #f6f6f6), color-mix(in srgb, var(--c-a) 9%, #ededed))}:root[data-theme=dark] .tc:is(.tc-frame-page,.tc-frame-square,.tc-frame-sheet,.tc-frame-form){background:linear-gradient(160deg, color-mix(in srgb, var(--c-a) 30%, #1d1d20), color-mix(in srgb, var(--c-a) 12%, #141416))}.tc:is(.tc-frame-page,.tc-frame-square,.tc-frame-sheet,.tc-frame-form) .tc-art{transition:transform var(--ui-med,.18s) var(--ui-ease,ease);border-radius:4px;bottom:auto;right:auto;box-shadow:0 14px 28px -14px #00000059,0 0 0 1px #0000000f}.tc-frame-page .tc-art{aspect-ratio:3/4;width:42%;top:11%;left:29%}.tc-frame-square .tc-art{aspect-ratio:1;width:45%;top:9%;left:27.5%}.tc-frame-sheet .tc-art{aspect-ratio:16/9;width:82%;top:12%;left:9%}.tc-frame-form .tc-art{aspect-ratio:4/5;border-radius:7px;width:42%;top:11%;left:29%}.tc:has(>.tpl-sketch){container:tpl-sketch/inline-size}.tpl-sketch{--u:calc(100cqw / 240);gap:calc(4 * var(--u));padding:calc(9 * var(--u));border-radius:max(2px, calc(4 * var(--u)));color:#17181c;box-shadow:0 calc(12 * var(--u)) calc(24 * var(--u)) calc(-12 * var(--u)) #00000059, 0 0 0 1px #0000000d;transition:transform var(--ui-med,.18s) var(--ui-ease,ease);background:#fff;flex-direction:column;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.tpl-sketch b{font-size:calc(8.5 * var(--u));letter-spacing:calc(-.1 * var(--u));-webkit-line-clamp:2;-webkit-box-orient:vertical;flex-shrink:0;font-weight:500;line-height:1.2;display:-webkit-box;overflow:hidden}.tpl-sketch i{height:calc(3 * var(--u));border-radius:calc(2 * var(--u));background:#e8e9ec;flex-shrink:0;display:block}.tpl-sketch:is(.is-page,.is-slide,.is-invoice):before{content:"";width:34%;height:calc(3 * var(--u));margin-bottom:calc(2 * var(--u));border-radius:calc(2 * var(--u));background:var(--tpl-c);flex-shrink:0}.tpl-sketch.is-page{aspect-ratio:3/4;width:40%;top:56%}.tpl-sketch.is-page i:nth-of-type(2){width:90%}.tpl-sketch.is-page i:nth-of-type(3){width:96%}.tpl-sketch.is-page i:nth-of-type(4){width:58%}.tpl-sketch.is-slide{aspect-ratio:16/9;justify-content:center;gap:calc(5 * var(--u));width:72%;padding:calc(10 * var(--u)) calc(12 * var(--u))}.tpl-sketch.is-slide b{max-width:70%;font-size:calc(10.5 * var(--u));letter-spacing:calc(-.2 * var(--u))}.tpl-sketch.is-slide i{width:46%}.tpl-sketch.is-slide i:nth-of-type(2){width:30%}.tpl-sketch.is-slide:after{content:"";right:calc(10 * var(--u));bottom:calc(10 * var(--u));aspect-ratio:1;background:color-mix(in srgb, var(--tpl-c) 22%, #fff);border-radius:50%;width:24%;position:absolute}.tpl-sketch.is-sheet{aspect-ratio:3/2;background-image:linear-gradient(#eceef1 1px,#0000 1px),linear-gradient(90deg,#eceef1 1px,#0000 1px);background-size:100% calc(11 * var(--u)), 25% 100%;gap:0;width:76%;padding:0}.tpl-sketch.is-sheet b{padding:calc(6 * var(--u)) calc(8 * var(--u));background:color-mix(in srgb, var(--tpl-c) 16%, #fff);font-size:calc(8 * var(--u));-webkit-line-clamp:1}.tpl-sketch.is-sheet i{display:none}.tpl-sketch.is-form{aspect-ratio:4/5;gap:calc(5 * var(--u));width:40%;top:56%}.tpl-sketch.is-form i{height:calc(9 * var(--u));border-radius:calc(3 * var(--u));background:#fff;border:1px solid #e3e5e9}.tpl-sketch.is-form i:last-of-type{width:46%;height:calc(8 * var(--u));margin-top:calc(2 * var(--u));background:var(--tpl-c);border:0;border-radius:99px}.tpl-sketch.is-invoice{aspect-ratio:3/4;width:40%;top:56%}.tpl-sketch.is-invoice i{height:calc(5 * var(--u));border-radius:max(1px, calc(1 * var(--u)));background:#f1f2f4}.tpl-sketch.is-invoice i:last-of-type{background:color-mix(in srgb, var(--tpl-c) 55%, #fff);align-self:flex-end;width:45%;margin-top:auto}.tpl-sketch.is-board{aspect-ratio:8/5;background:#f6f6f6 radial-gradient(#d6d7dc .8px, transparent 1px) 0 0 / calc(8 * var(--u)) calc(8 * var(--u));width:76%;padding:0}.tpl-sketch.is-board i{aspect-ratio:1;border-radius:calc(2 * var(--u));background:color-mix(in srgb, var(--tpl-c) 32%, #fff);width:22%;height:auto;box-shadow:0 calc(2 * var(--u)) calc(4 * var(--u)) #0000001a;position:absolute}.tpl-sketch.is-board i:first-of-type{top:14%;left:8%;transform:rotate(-4deg)}.tpl-sketch.is-board i:nth-of-type(2){background:#ffe58a;top:9%;left:38%;transform:rotate(3deg)}.tpl-sketch.is-board i:nth-of-type(3){background:#b9efcb;top:17%;left:69%;transform:rotate(-2deg)}.tpl-sketch.is-board i:nth-of-type(4){background:#c4ddff;top:55%;left:20%;transform:rotate(2deg)}.tpl-sketch.is-board i:nth-of-type(5){top:52%;left:52%;transform:rotate(-3deg)}@container tpl-sketch (max-width:140px){.tpl-sketch b{width:72%;height:calc(9 * var(--u));border-radius:calc(2 * var(--u));background:color-mix(in srgb, currentColor 30%, transparent);font-size:0}.tpl-sketch.is-slide b{width:56%;height:calc(11 * var(--u));font-size:0}.tpl-sketch.is-sheet b{width:auto;height:calc(18 * var(--u));background:color-mix(in srgb, var(--tpl-c) 16%, #fff);border-radius:0;font-size:0}.tpl-sketch.is-sheet{background-size:100% calc(22 * var(--u)), 25% 100%}.tpl-sketch.is-board{background-image:none}}
