<style>
/* -------------------------------------------------------
 * CGit theme inspired by YOASOBI's "THE BOOK for," EP
 * Cover: purplish-blue night sky, black skyline silhouette,
 *        two shooting stars, minimalist typography
 * Palette extracted from the actual Spotify cover art:
 *   sky #86a0d3, darker #7d98cf, deep navy #0b0b1a
 * ------------------------------------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    overscroll-behavior-y: none;
}
body {
    background-color: #0b0b1a;
    background-image:
        linear-gradient(180deg, #0b0b1a 0%, #15133a 25%, #1e1b52 50%, #1f1d5a 70%, #131422 85%, #0a0a12 100%);
    color: #FCFAF6;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
    padding: 20px;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(252,250,246,0.4), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(252,250,246,0.3), transparent),
        radial-gradient(1.5px 1.5px at 50% 10%, rgba(252,250,246,0.5), transparent),
        radial-gradient(1px 1px at 70% 40%, rgba(252,250,246,0.25), transparent),
        radial-gradient(1px 1px at 90% 80%, rgba(252,250,246,0.3), transparent),
        radial-gradient(1px 1px at 15% 85%, rgba(252,250,246,0.2), transparent),
        radial-gradient(1.5px 1.5px at 45% 45%, rgba(252,250,246,0.35), transparent),
        radial-gradient(1px 1px at 80% 15%, rgba(252,250,246,0.25), transparent),
        radial-gradient(1px 1px at 25% 75%, rgba(252,250,246,0.2), transparent),
        radial-gradient(1px 1px at 65% 90%, rgba(252,250,246,0.15), transparent),
        radial-gradient(1px 1px at 5% 50%, rgba(252,250,246,0.3), transparent),
        radial-gradient(1.2px 1.2px at 55% 30%, rgba(252,250,246,0.25), transparent),
        radial-gradient(1px 1px at 85% 55%, rgba(252,250,246,0.2), transparent),
        radial-gradient(1px 1px at 35% 15%, rgba(252,250,246,0.3), transparent),
        radial-gradient(1px 1px at 75% 70%, rgba(252,250,246,0.15), transparent),
        radial-gradient(1px 1px at 20% 40%, rgba(252,250,246,0.2), transparent),
        radial-gradient(1.5px 1.5px at 60% 5%, rgba(252,250,246,0.35), transparent),
        radial-gradient(1px 1px at 95% 35%, rgba(252,250,246,0.2), transparent),
        radial-gradient(1px 1px at 40% 95%, rgba(252,250,246,0.15), transparent),
        radial-gradient(1px 1px at 8% 8%, rgba(252,250,246,0.25), transparent);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #000000;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath d='M0,100 L0,75 L40,75 L40,45 L70,70 L70,55 L90,55 L90,40 L110,40 L110,60 L130,60 L130,35 L155,35 L155,55 L175,55 L175,25 L200,25 L200,50 L220,50 L220,15 L245,15 L245,40 L270,40 L270,55 L290,55 L290,45 L310,45 L310,65 L340,65 L340,40 L365,40 L365,55 L385,55 L385,20 L410,20 L410,50 L430,50 L430,35 L450,35 L450,60 L475,60 L475,40 L500,40 L500,55 L520,55 L520,45 L540,45 L540,65 L565,65 L565,30 L590,30 L590,50 L610,50 L610,35 L635,35 L635,55 L660,55 L660,40 L680,40 L680,60 L705,60 L705,45 L730,45 L730,20 L755,20 L755,50 L775,50 L775,35 L800,35 L800,55 L820,55 L820,40 L845,40 L845,60 L870,60 L870,45 L890,45 L890,65 L915,65 L915,30 L940,30 L940,55 L960,55 L960,40 L985,40 L985,60 L1010,60 L1010,50 L1030,50 L1030,35 L1055,35 L1055,55 L1080,55 L1080,40 L1100,40 L1100,60 L1125,60 L1125,45 L1150,45 L1150,65 L1200,65 L1200,100 Z'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath d='M0,100 L0,75 L40,75 L40,45 L70,70 L70,55 L90,55 L90,40 L110,40 L110,60 L130,60 L130,35 L155,35 L155,55 L175,55 L175,25 L200,25 L200,50 L220,50 L220,15 L245,15 L245,40 L270,40 L270,55 L290,55 L290,45 L310,45 L310,65 L340,65 L340,40 L365,40 L365,55 L385,55 L385,20 L410,20 L410,50 L430,50 L430,35 L450,35 L450,60 L475,60 L475,40 L500,40 L500,55 L520,55 L520,45 L540,45 L540,65 L565,65 L565,30 L590,30 L590,50 L610,50 L610,35 L635,35 L635,55 L660,55 L660,40 L680,40 L680,60 L705,60 L705,45 L730,45 L730,20 L755,20 L755,50 L775,50 L775,35 L800,35 L800,55 L820,55 L820,40 L845,40 L845,60 L870,60 L870,45 L890,45 L890,65 L915,65 L915,30 L940,30 L940,55 L960,55 L960,40 L985,40 L985,60 L1010,60 L1010,50 L1030,50 L1030,35 L1055,35 L1055,55 L1080,55 L1080,40 L1100,40 L1100,60 L1125,60 L1125,45 L1150,45 L1150,65 L1200,65 L1200,100 Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
}


@keyframes shoot1 {
    0% { transform: translate(0, 0) rotate(-30deg); opacity: 1; }
    3% { opacity: 0.8; }
    6% { opacity: 0.4; }
    10% { transform: translate(600px, 350px) rotate(-30deg); opacity: 0; }
    100% { transform: translate(600px, 350px) rotate(-30deg); opacity: 0; }
}

#star1 {
    position: fixed;
    top: 60px;
    left: 40%;
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, rgba(252,250,246,0), rgba(252,250,246,0.1) 20%, rgba(252,250,246,0.6) 60%, #FCFAF6 100%);
    border-radius: 1px;
    transform: rotate(-30deg);
    animation: shoot1 45s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

#star1::after {
    content: '';
    position: absolute;
    top: -2px;
    right: 0;
    width: 6px;
    height: 6px;
    background: #FCFAF6;
    border-radius: 50%;
    box-shadow: 0 0 8px #FCFAF6, 0 0 16px rgba(252,250,246,0.5);
}

@keyframes shoot2 {
    0% { transform: translate(0, 0) rotate(-25deg); opacity: 1; }
    2% { opacity: 0.9; }
    5% { opacity: 0.3; }
    8% { transform: translate(400px, 180px) rotate(-25deg); opacity: 0; }
    100% { transform: translate(400px, 180px) rotate(-25deg); opacity: 0; }
}

#star2 {
    position: fixed;
    top: 120px;
    left: 55%;
    width: 80px;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(252,250,246,0), rgba(252,250,246,0.08) 20%, rgba(252,250,246,0.5) 60%, #FCFAF6 100%);
    border-radius: 1px;
    transform: rotate(-25deg);
    animation: shoot2 70s ease-in-out infinite 18s;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

#star2::after {
    content: '';
    position: absolute;
    top: -1.5px;
    right: 0;
    width: 4.5px;
    height: 4.5px;
    background: #FCFAF6;
    border-radius: 50%;
    box-shadow: 0 0 6px #FCFAF6, 0 0 12px rgba(252,250,246,0.4);
}

#book-circle {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #000000;
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
}

div#cgit {
    position: relative;
    z-index: 5;
    background: transparent;
    color: #FCFAF6;
    max-width: 1200px;
    margin: 0 auto;
}

a {
    color: #86a0d3;
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover {
    color: #FCFAF6;
    text-decoration: underline;
}

table#header {
    width: 100%;
    background: transparent;
    border: none;
    border-collapse: collapse;
    margin-bottom: 5px;
}

table#header td {
    padding: 8px 0;
    border: none;
}

table#header td.main {
    color: #FCFAF6;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 6px;
    text-transform: uppercase;
}

table#header td.main a {
    color: #FCFAF6;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 6px;
    text-transform: uppercase;
    text-decoration: none;
}

table#header td.main a:hover {
    color: #86a0d3;
    text-decoration: none;
}

table#header td.logo {
    width: 0;
    padding: 0 !important;
}

table#header td.logo img {
    display: none;
}

table#header td.main a {
    font-weight: 400;
}

table#header td.main a:first-child {
    color: rgba(134, 160, 211, 0.5);
    font-size: 14px;
    letter-spacing: 3px;
}

table#header td.main a:first-child:hover {
    color: #86a0d3;
}

table#header td.main a:last-child {
    color: #FCFAF6;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 4px;
}

table#header td.main a:last-child:hover {
    color: #86a0d3;
}

table#header td.main {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
}

table#header td.sub {
    color: rgba(134, 160, 211, 0.6);
    font-size: 10px;
    text-align: left;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 400;
}

table#header td.form {
    text-align: right;
    vertical-align: middle;
}

table.tabs {
    width: 100%;
    background: transparent;
    border-collapse: collapse;
    margin-bottom: 20px;
    margin-top: 10px;
}

table.tabs td.form {
    position: absolute;/* Adjust this value to align perfectly under the branch select */
    right: 0;
    padding: 0;
}

table.tabs td {
    padding: 0;
    border-bottom: 1px solid rgba(134, 160, 211, 0.25);
}

table.tabs td a {
    display: inline-block;
    padding: 8px 18px;
    margin-right: 0;
    color: rgba(134, 160, 211, 0.6);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    position: relative;
    transition: color 0.15s ease;
}

table.tabs td a:hover {
    color: #FCFAF6;
    background: transparent;
    text-decoration: none;
}

table.tabs td a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: #86a0d3;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

table.tabs td a:hover::after {
    transform: scaleX(1);
}

table.tabs td a.active {
    color: #FCFAF6;
    background: transparent;
}

table.tabs td a.active::after {
    transform: scaleX(1);
    background: #FCFAF6;
}

input, select, textarea, button {
    background: rgba(134, 160, 211, 0.08);
    color: #FCFAF6;
    border: 1px solid rgba(134, 160, 211, 0.3);
    padding: 5px 10px;
    font-family: monospace;
    font-size: 12px;
    border-radius: 2px;
    transition: border-color 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: #86a0d3;
    outline: none;
}

table.list {
    width: 100%;
    border-collapse: collapse;
    border: none;
    background: transparent;
    margin-top: 10px;
    margin-bottom: 15px;
}

table.list th, table.list th a {
    background: transparent;
    color: rgba(134, 160, 211, 0.5);
    padding: 10px 12px;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    border: none;
    text-align: left;
}

table.list tr {
    border: none;
}

table.list td {
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid rgba(134, 160, 211, 0.1);
    color: #FCFAF6;
    font-size: 13px;
    transition: background 0.15s ease;
}

table.list tr:hover td {
    background: rgba(134, 160, 211, 0.06);
}

table.list td a {
    font-weight: 700;
    color: #86a0d3;
}

table.list td a:hover {
    color: #FCFAF6;
}

td.toplevel-repo a {
    font-size: 14px;
}

td.toplevel-repo + td a {
    color: rgba(252, 250, 246, 0.5);
    font-weight: 400;
    font-size: 12px;
}

div.content {
    position: relative;
}

div#summary, div.readme-container {
    padding: 20px;
    background: rgba(134, 160, 211, 0.05);
    border: 1px solid rgba(134, 160, 211, 0.15);
    border-radius: 2px;
    color: #FCFAF6;
    margin-top: 15px;
}

a.button {
    display: inline-block;
    padding: 3px 10px;
    margin: 0 2px;
    background: rgba(134, 160, 211, 0.1);
    border: 1px solid rgba(134, 160, 211, 0.25);
    color: #86a0d3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.15s ease;
}

a.button:hover {
    background: rgba(134, 160, 211, 0.25);
    border-color: #86a0d3;
    color: #FCFAF6;
    text-decoration: none;
}

code, pre {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(134, 160, 211, 0.1);
    border-radius: 2px;
    padding: 1px 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

pre {
    padding: 15px;
}

table.diff {
    border: 1px solid rgba(134, 160, 211, 0.15);
    width: 100%;
}

div.footer {
    margin-top: 40px;
    padding: 20px 0;
    color: rgba(134, 160, 211, 0.25);
    font-size: 10px;
    text-align: center;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-top: 1px solid rgba(134, 160, 211, 0.08);
}

div.footer a {
    color: rgba(134, 160, 211, 0.4);
}

img#logo { display: none !important; }

span.decoration a {
    color: rgba(134, 160, 211, 0.5);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1px;
}

a.deco, a.branch-deco, a.tag-deco {
    color: rgba(134, 160, 211, 0.5) !important;
    font-size: 10px;
    font-weight: 400;
    padding-left: 5px;
}
td.age-days, span.age-days {
    color: rgba(134, 160, 211, 0.4);
    font-size: 11px;
}

span.insertions { color: #5cb85c; }
span.deletions { color: #d9534f; }

div.commit-subject {
    font-size: 15px;
    font-weight: 700;
    color: #FCFAF6;
    margin-bottom: 10px;
}

div.commit-msg {
    padding: 15px;
    background: rgba(134, 160, 211, 0.05);
    border: 1px solid rgba(134, 160, 211, 0.15);
    border-radius: 2px;
    color: rgba(252, 250, 246, 0.8);
    line-height: 1.6;
}

div.commit-info {
    color: rgba(134, 160, 211, 0.5);
    font-size: 11px;
    margin-bottom: 15px;
}

span.label {
    color: rgba(134, 160, 211, 0.4);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

div.cgit-panel {
    background: rgba(134, 160, 211, 0.05);
    border: 1px solid rgba(134, 160, 211, 0.15);
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 2px;
}

div.cgit-panel table tr th {
    color: rgba(134, 160, 211, 0.5);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 5px 10px;
}

div.cgit-panel table tr td {
    padding: 5px 10px;
    color: #FCFAF6;
}

td.sha1 {
    font-family: monospace;
    font-size: 12px;
    color: rgba(134, 160, 211, 0.6);
}

div.diffstat-header {
    color: rgba(134, 160, 211, 0.5);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 10px 0;
}

div.diffstat-summary {
    color: rgba(134, 160, 211, 0.4);
    font-size: 11px;
    margin: 5px 0;
}

td.add { color: #5cb85c; }
td.rem { color: #d9534f; }
td.none { color: rgba(134, 160, 211, 0.3); }
td.mode { color: rgba(134, 160, 211, 0.5); font-size: 11px; }
td.ctrl { color: rgba(134, 160, 211, 0.5); }

td.ls-mode { color: rgba(134, 160, 211, 0.4); }
td.ls-size { color: rgba(134, 160, 211, 0.4); }
td.ls-blob a { color: #86a0d3; }

div#cgit table.blob td.linenumbers {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(134, 160, 211, 0.4);
    border: none;
    border-right: 1px solid rgba(134, 160, 211, 0.1);
    padding: 5px 10px;
    text-align: right;
    user-select: none;
}

td.head {
    color: rgba(134, 160, 211, 0.5);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

div.diffstat {
    margin: 10px 0;
}

div#cgit table.blob td.lines {
    background: transparent;
    padding: 5px 15px;
}

.graph {
    background: transparent;
}

td graph td {
    border: none;
}
</style>
