:root { color-scheme: light; }
body {
    background-image:
        radial-gradient(circle at 8% 5%, rgba(251, 168, 23, .09), transparent 28rem),
        radial-gradient(circle at 92% 30%, rgba(217, 103, 3, .06), transparent 24rem);
}
.hero-orbit { animation: orbit 26s linear infinite; transform-origin: center; }
.float-slow { animation: float 6s ease-in-out infinite; }
.float-delay { animation: float 7s ease-in-out -2s infinite; }
.flash-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .3s; }
.grain::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .16;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
.portfolio-grid {
    background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.3) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    mask-image: linear-gradient(to bottom, black, transparent);
}
.jf-progress { display: block; width: 100%; overflow: hidden; border: 0; border-radius: 999px; background: #ffefc6; appearance: none; }
.jf-progress::-webkit-progress-bar { border-radius: 999px; background: #ffefc6; }
.jf-progress::-webkit-progress-value { border-radius: 999px; background: #f28b08; }
.jf-progress::-moz-progress-bar { border-radius: 999px; background: #f28b08; }
.jf-progress.progress-emerald::-webkit-progress-value { background: #10b981; }
.jf-progress.progress-emerald::-moz-progress-bar { background: #10b981; }
.jf-progress.progress-sky::-webkit-progress-value { background: #0ea5e9; }
.jf-progress.progress-sky::-moz-progress-bar { background: #0ea5e9; }
.field { width: 100%; border: 1px solid rgba(120,47,14,.14); border-radius: .9rem; background: white; color: #23170d; padding: .8rem 1rem; outline: none; transition: .2s; }
.field option { background: white; color: #23170d; }
.field:focus { border-color: #f28b08; box-shadow: 0 0 0 4px rgba(242,139,8,.12); }
.tag-editor { display: flex; min-height: 3.15rem; width: 100%; flex-wrap: wrap; align-items: center; gap: .45rem; border: 1px solid rgba(120,47,14,.14); border-radius: .9rem; background: white; padding: .48rem .65rem; transition: .2s; }
.tag-editor:focus-within { border-color: #f28b08; box-shadow: 0 0 0 4px rgba(242,139,8,.12); }
.tag-list { display: contents; }
.tag-badge { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(242,139,8,.22); border-radius: 999px; background: #fff6df; padding: .38rem .65rem; color: #9a4c05; font-size: .72rem; font-weight: 700; line-height: 1; }
.tag-badge button { display: grid; height: 1rem; width: 1rem; place-items: center; border: 0; border-radius: 999px; background: rgba(154,76,5,.1); color: #9a4c05; cursor: pointer; font-size: .8rem; line-height: 1; }
.tag-badge button:hover { background: rgba(154,76,5,.2); }
.tag-editor-input { min-width: 10rem; flex: 1 1 11rem; border: 0; background: transparent; padding: .35rem .25rem; font-size: .88rem; outline: none; }
.tag-suggest { position: relative; }
.tag-suggestions {
    position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + .35rem);
    max-height: 15rem; overflow-y: auto; border: 1px solid rgba(120,47,14,.14);
    border-radius: .9rem; background: white; padding: .3rem;
    box-shadow: 0 18px 40px rgba(120,47,14,.16);
}
.tag-suggestions[hidden] { display: none; }
.tag-suggestions button {
    display: block; width: 100%; border: 0; border-radius: .6rem; background: transparent;
    padding: .55rem .7rem; text-align: left; font-size: .85rem; font-weight: 600;
    color: #23170d; cursor: pointer;
}
.tag-suggestions button:hover, .tag-suggestions button[aria-selected="true"] { background: #fff6df; color: #9a4c05; }
.label { display: block; margin-bottom: .45rem; font-size: .8rem; font-weight: 700; color: rgba(35,23,13,.72); }
.star-input { direction: rtl; display: inline-flex; }
.star-input input { position: absolute; opacity: 0; }
.star-input label { cursor: pointer; color: #fde3a7; font-size: 2rem; transition: .15s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #f28b08; transform: translateY(-1px); }
.jf-scroll-fade {
    background-color: white;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 14px 100%, 14px 100%;
    background-position: left, right, left, right;
    background-image:
        linear-gradient(to right, white, rgba(255,255,255,0)),
        linear-gradient(to left, white, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(35,23,13,.14), rgba(35,23,13,0)),
        linear-gradient(to left, rgba(35,23,13,.14), rgba(35,23,13,0));
    background-attachment: local, local, scroll, scroll;
}
.jf-scroll-fade-dark {
    background-color: #451603;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%;
    background-position: left, right;
    background-image:
        linear-gradient(to right, #451603, rgba(69,22,3,0)),
        linear-gradient(to left, #451603, rgba(69,22,3,0));
    background-attachment: local, local;
}
.admin-record-menu-trigger { opacity: .55; pointer-events: auto; transform: translateX(0); }
.admin-account-record:hover .admin-record-menu-trigger,
.admin-account-record:focus-within .admin-record-menu-trigger,
.admin-record-menu[data-open="true"] .admin-record-menu-trigger { opacity: 1; pointer-events: auto; transform: translateX(0); }
@media (hover: none) { .admin-record-menu-trigger { opacity: 1; pointer-events: auto; transform: translateX(0); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }