/* Native cover artwork: scoped to this component, with no content-status claims. */
.resource-preview{
    --resource-surface:#fff1e6;
    --resource-wash:#fff9ef;
    --resource-accent:#b65f49;
    --resource-soft:#fce5d5;
    --resource-line:#e2b995;
    position:relative;
    isolation:isolate;
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    aspect-ratio:1.45;
    overflow:hidden;
    box-sizing:border-box;
    container-type:inline-size;
    background:
        radial-gradient(ellipse at 8% 0%,#ffffffa8,transparent 55%),
        linear-gradient(135deg,var(--resource-surface),var(--resource-wash));
}
.resource-preview--document,
.resource-preview--theme-blue{
    --resource-surface:#eaf5ff;
    --resource-wash:#f4fbff;
    --resource-accent:#3f769a;
    --resource-soft:#e0eff7;
    --resource-line:#a8cbdc;
}
.resource-preview--package,
.resource-preview--theme-mint{
    --resource-surface:#eaf6e9;
    --resource-wash:#f6faee;
    --resource-accent:#628166;
    --resource-soft:#e4efd9;
    --resource-line:#b9cda6;
}
.resource-preview--theme-lavender{
    --resource-surface:#f0edff;
    --resource-wash:#fbf7ff;
    --resource-accent:#8571a3;
    --resource-soft:#ece4f8;
    --resource-line:#c5b5df;
}
.resource-preview--theme-yellow{
    --resource-surface:#fff3d9;
    --resource-wash:#fffaec;
    --resource-accent:#aa813c;
    --resource-soft:#f8e8c1;
    --resource-line:#dec99b;
}
.resource-preview .resource-preview__decoration{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}
.resource-preview .resource-preview__orbit{
    position:absolute;
    width:91%;
    height:77%;
    top:12%;
    left:4%;
    border:1px dashed var(--resource-line);
    border-radius:50%;
    opacity:.55;
    transform:rotate(-17deg);
}
.resource-preview .resource-preview__doodle{
    position:absolute;
    display:grid;
    place-items:center;
    width:13%;
    aspect-ratio:1;
}
.resource-preview .resource-preview__doodle .icon{
    width:100%;
    height:100%;
    stroke-width:1.35;
}
.resource-preview .resource-preview__doodle--sun{
    right:5%;
    top:11%;
    color:#d9a943;
    transform:rotate(13deg);
}
.resource-preview .resource-preview__doodle--heart{
    left:5%;
    bottom:12%;
    width:10%;
    color:#df989e;
    transform:rotate(-19deg);
}
.resource-preview .resource-preview__dot{
    position:absolute;
    width:2.1%;
    aspect-ratio:1;
    border-radius:50%;
    background:var(--resource-line);
}
.resource-preview .resource-preview__dot--one{left:12%;top:24%;opacity:.7}
.resource-preview .resource-preview__dot--two{right:11%;bottom:19%;width:1.4%;opacity:.8}
.resource-preview .resource-preview__paper{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    align-items:center;
    justify-items:center;
    gap:clamp(4px,1.5cqw,9px);
    width:66%;
    height:84%;
    min-width:0;
    min-height:0;
    padding:clamp(10px,3cqw,22px);
    box-sizing:border-box;
    border:1px solid #eee5d8;
    border-radius:3px 5px 6px 3px;
    background:linear-gradient(140deg,#fffffc,#fffdf7);
    box-shadow:3px 4px 0 #ffffff8a,7px 11px 19px #33435014;
    transform:rotate(-4deg);
    transform-origin:center;
    transition:transform .24s ease;
}
.resource-preview--document .resource-preview__paper{transform:rotate(3deg);border-color:#dbe6ec}
.resource-preview--package .resource-preview__paper{
    transform:rotate(-3deg);
    border-color:#dce5d2;
    border-radius:3px 7px 7px 3px;
    border-left:clamp(5px,1.5cqw,10px) solid #9bb68c;
    box-shadow:3px 3px 0 #fffdf6,5px 5px 0 #d4ddca,8px 12px 19px #34443117;
}
.resource-preview .resource-preview__brand{
    display:flex;
    align-items:baseline;
    width:100%;
    min-width:0;
    color:#343735;
    font-family:var(--body,Arial,sans-serif);
    font-size:clamp(9px,3cqw,18px);
    font-weight:800;
    line-height:1;
    letter-spacing:-.04em;
}
.resource-preview .resource-preview__brand>span{color:#e3314b}
.resource-preview .resource-preview__brand>i{
    display:block;
    width:20%;
    height:3px;
    margin-left:auto;
    border-radius:9px;
    background:var(--resource-soft);
    align-self:center;
}
.resource-preview .resource-preview__category{
    display:block;
    min-width:0;
    max-width:100%;
    color:var(--resource-accent);
    font-family:var(--body,Arial,sans-serif);
    font-size:clamp(8px,2.9cqw,17px);
    font-weight:700;
    line-height:1.22;
    text-align:center;
    overflow-wrap:anywhere;
    text-wrap:balance;
}
.resource-preview .resource-preview__title{
    display:block;
    align-self:center;
    width:100%;
    min-width:0;
    max-width:100%;
    margin:0;
    color:#34434c;
    font-family:var(--display,Georgia,serif);
    font-size:clamp(16px,6.8cqw,44px);
    font-weight:700;
    line-height:1.1;
    letter-spacing:0;
    text-align:center;
    overflow-wrap:anywhere;
    word-break:normal;
    text-wrap:balance;
}
.resource-preview--long-title .resource-preview__title{font-size:clamp(12px,4.9cqw,32px);line-height:1.09}
.resource-preview--compact-title .resource-preview__paper{width:74%;gap:clamp(3px,1cqw,6px)}
.resource-preview--compact-title .resource-preview__title{font-size:clamp(9px,3cqw,20px);line-height:1.08}
.resource-preview--extra-long-title .resource-preview__title{font-size:clamp(8px,2.7cqw,18px)}
.resource-preview--long-category .resource-preview__category{font-size:clamp(7px,2.2cqw,13px);line-height:1.15}
.resource-preview .resource-preview__illustration{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(7px,3cqw,18px);
    width:100%;
    height:clamp(23px,10cqw,60px);
    color:var(--resource-accent);
}
.resource-preview .resource-preview__emblem{
    display:grid;
    place-items:center;
    height:100%;
    aspect-ratio:1;
    border-radius:44% 56% 53% 47%;
    background:var(--resource-soft);
    transform:rotate(-7deg);
}
.resource-preview .resource-preview__emblem .icon{
    width:65%;
    height:65%;
    stroke-width:1.45;
    transform:rotate(7deg);
}
.resource-preview .resource-preview__little-star,
.resource-preview .resource-preview__little-heart{
    display:grid;
    place-items:center;
    width:clamp(10px,4.7cqw,26px);
    aspect-ratio:1;
    color:#dfb75a;
    transform:rotate(-13deg);
}
.resource-preview .resource-preview__little-heart{color:#d79199;transform:rotate(14deg)}
.resource-preview .resource-preview__little-star .icon,
.resource-preview .resource-preview__little-heart .icon{width:100%;height:100%;stroke-width:1.3}
@media(hover:hover) and (pointer:fine){
    .resource-preview:hover .resource-preview__paper{transform:rotate(-1deg) translateY(-1%)}
}
@media(prefers-reduced-motion:reduce){
    .resource-preview .resource-preview__paper{transition:none}
}

.resource-preview--compact-title .resource-preview__illustration{height:clamp(16px,6cqw,40px)}