@charset "UTF-8";
@use "normalize.css" {}@font-face { font-family: 'Zilla Slab'; font-style: italic; font-weight: 600; font-display: swap; src: local("Zilla Slab SemiBold Italic"), local("ZillaSlab-SemiBoldItalic"), url(fonts/ZillaSlab-SemiBoldItalic.ttf); }

@font-face { font-family: 'Zilla Slab'; font-style: normal; font-weight: 600; font-display: swap; src: local("Zilla Slab SemiBold"), local("ZillaSlab-SemiBold"), url(fonts/ZillaSlab-SemiBold.ttf); }

@font-face { font-family: 'Lato'; font-style: normal; font-weight: normal; font-display: swap; src: url(fonts/Lato-Regular.ttf); }

@font-face { font-family: 'Lato'; font-style: italic; font-weight: normal; font-display: swap; src: url(fonts/Lato-Italic.ttf); }

@font-face { font-family: 'Lato'; font-style: normal; font-weight: bold; font-display: swap; src: url(fonts/Lato-Bold.ttf); }

@font-face { font-family: 'Lato'; font-style: italic; font-weight: bold; font-display: swap; src: url(fonts/Lato-BoldItalic.ttf); }

@font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: normal; font-display: swap; src: url(fonts/RobotoMono-Regular.ttf); }

table { overflow-x: scroll; border-collapse: collapse; }

table th, table td { padding: 0.5rem; border: 1px solid rgba(0, 0, 0, 0.1); }

.page-content a { text-decoration: none; border-bottom: 1px solid; }

.page-content pre, .page-content code { font-family: 'Roboto Mono', monospace; font-size: 90%; line-height: 1.5; }

.page-content figure.highlight { margin: 0 -1rem; padding: 0.5rem 2rem; overflow-x: auto; }

.lander.top, .variant-home .decoration-top .deco-container { height: 60vh; min-height: 600px; }

.lander { display: flex; flex-direction: row; align-content: flex-end; align-items: center; }

.lander .contents { position: relative; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }

.anim-trigger-target { position: absolute; top: 0; left: 0; appearance: none; width: 100%; height: 100%; margin: 0; opacity: 0; z-index: 5; }

.lander .contents { --hole-transform: scale(1.05); --card-transform: rotateZ(30deg) scale(0.9); --card-front-anti-transform: rotateZ(-30deg); }

.lander .contents .anim-trigger-target:checked { pointer-events: none; }

.lander .contents .anim-trigger-target:checked ~ .hole { --hole-transform: scale(40); background: none !important; }

.lander .contents .anim-trigger-target:checked ~ .card { --card-transform: rotateY(180deg); }

.lander .contents .anim-trigger-target:focus-visible ~ .keyboard-label { visibility: visible; }

.lander .contents .anim-trigger-target:checked ~ .keyboard-label { visibility: hidden; }

.lander .contents .anim-trigger-target:checked ~ .brace { --brace-opacity: 0; }

.lander .contents .hole { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; animation: anim-hide-hole-popin 650ms; }

.lander .contents .hole .anim-path { fill-rule: evenodd; transform-origin: center; transform: var(--hole-transform); transition: transform 0.8s ease; }

.lander .contents .brace { display: none; position: absolute; z-index: 1; transition: opacity 0.1s linear; opacity: var(--brace-opacity); top: calc(50% - 30px - 75px); height: 150px; }

.lander .contents .brace.brace-left { transform: translateX(-280px); }

.lander .contents .brace.brace-right { transform: translateX(280px); }

@keyframes anim-card-op { 0% { transform: translateY(-50rem); }
  100% { transform: none; } }

@keyframes anim-hide-hole-popin { 0% { background: black; }
  99% { background: black; }
  100% { background: none; } }

.lander .contents .keyboard-label { position: absolute; bottom: 100px; visibility: hidden; padding: 1rem; border: 1px solid black; border-radius: 4px; box-shadow: 0px 0px 0px 1px white; z-index: 4; }

.lander .contents .keyboard-label key { text-transform: uppercase; font-weight: bold; font-size: 80%; padding: 0.1rem 0.5rem; border-radius: 4px; background: #eeeeee; color: #444; box-shadow: 0px 3px #bbbbbb; margin-right: 0.5rem; }

.lander .contents .card { perspective: 40rem; padding-bottom: 3rem; margin: 0 auto; z-index: 3; animation: anim-card-op 600ms; }

.lander .contents .card-inner { position: relative; height: 333px; width: 250px; transform-style: preserve-3d; transition: transform 0.6s; transform: var(--card-transform); }

.lander .contents .card-front, .lander .contents .card-back { width: 100%; height: 100%; position: absolute; padding: 1em; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.lander .contents .card-back { transform: rotateY(180deg); }

.lander .contents .card-front { background: linear-gradient(-30deg, #7500ff 0%, #0d0091 100%, #261261 100%); box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 0.3) inset, 0px 4px 20px rgba(0, 0, 0, 0.2); border-radius: 12px; color: white; display: flex; justify-content: center; align-items: center; }

.lander .contents .card-front img { transform: var(--card-front-anti-transform); }

.lander .contents .card-back { background: #fafafa; border-radius: 12px; color: black; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; justify-content: flex-end; font-family: Helvetica, Arial, sans-serif; font-size: 80%; }

.lander .contents .card-back .text-stack { display: flex; flex-direction: column; justify-content: flex-end; }

.lander .contents .card-back h1 { font-size: 1.8em; margin: 0 0 0.5em 0; color: #0d0091; }

.lander .contents .card-back h2 { text-transform: uppercase; color: #777777; margin: 0.3em 0 0 0; font-size: 80%; }

.lander .contents .card-back p { margin: 0.3em 0; font-weight: bold; }

.lander .contents .card-back .end-stack { display: flex; flex-direction: row; }

.lander .contents .card-back .card-bottom-cell { width: 33.3333333333%; text-align: center; margin: 0.5em 0 0 0; font-size: 1.5em; }

.lander .contents .card-back .card-bottom-cell img { width: 1em; height: 1em; }

.lander .contents .card-back .card-bottom-cell:not(:last-child) { border-right: 1px solid #ddd; }

@media only screen and (min-width: 569px) { .lander .contents .brace { display: initial; } }

@media only screen and (min-width: 401px) and (min-height: 600px) { .lander .contents .brace { top: calc(50% - 30px - 75px); height: 150px; } .lander .contents .brace-left { transform: translateX(-280px) !important; } .lander .contents .brace-right { transform: translateX(280px) !important; } .lander .contents .card-inner { height: 400px; width: 300px; } .lander .contents .card-inner .card-back { font-size: 90%; } }

@media only screen and (max-width: 719px) { .lander .contents { --card-transform: rotateZ(12deg) scale(0.9); --card-front-anti-transform: rotateZ(-12deg); } .lander .contents .brace-left { transform: translateX(-240px) !important; } .lander .contents .brace-right { transform: translateX(240px) !important; } .lander .contents .hole .anim-path { transition: transform 0.8s ease; } }

@media only screen and (min-width: 900px) and (min-height: 700px) { .lander .contents .brace { top: calc(50% - 30px - 100px); height: 200px; } .lander .contents .brace-left { transform: translateX(-350px) !important; } .lander .contents .brace-right { transform: translateX(350px) !important; } .lander .contents .card-inner { height: 350px; width: 500px; } .lander .contents .card-inner .card-back { font-size: 110%; flex-direction: row; justify-content: space-between; align-items: stretch; } .lander .contents .card-inner .card-back .end-stack { flex-direction: column; } .lander .contents .card-inner .card-bottom-cell { width: 3em; height: 33.3333333333%; margin: 0; display: flex; align-items: center; justify-content: center; font-size: 1.8em; } .lander .contents .card-inner .card-bottom-cell img { width: 1em; height: 1em; } .lander .contents .card-inner .card-bottom-cell:not(:last-child) { border-bottom: 1px solid #ddd; border-right: none; } }

@media only screen and (max-width: 400px) { .lander.top, .variant-home .decoration-top .deco-container { min-height: 512px !important; } }

.row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; position: relative; margin: 0 -1rem 0 -1rem; }

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 100%; padding: 0 1rem; margin-bottom: 1rem; box-sizing: border-box; position: relative; }

.col-1 { width: 8.3333333333%; }

.col-2 { width: 16.6666666667%; }

.col-3 { width: 25%; }

.col-4 { width: 33.3333333333%; }

.col-5 { width: 240%; }

.col-6 { width: 50%; }

.col-7 { width: 171.4285714286%; }

.col-8 { width: 150%; }

.col-9 { width: 133.3333333333%; }

.col-10 { width: 120%; }

.col-11 { width: 109.0909090909%; }

.col-12 { width: 100%; }

@media only screen and (max-width: 1279px) { .row .req-large { width: 100%; } }

@media only screen and (max-width: 799px) { .row .req-medium { width: 100%; } }

.project-list-header { padding: 0 1rem; }

.project-link .contents { border: 1px solid black; border-radius: 8px; display: flex; flex-direction: column; position: relative; }

.project-link .contents img { max-width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; }

.project-link .contents .caption { margin: 1rem; }

.project-link .contents .caption a::after { content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; margin: 0; }

@media (max-width: 400px) { body { font-size: 80%; } }

* { box-sizing: border-box; }

@media (max-width: 799px) { .responsive-body { width: 100%; padding: 0 1rem; padding-right: calc(1rem + env(safe-area-inset-right)); padding-left: calc(1rem + env(safe-area-inset-left)); } }

@media (min-width: 800px) { .responsive-body { margin: 0 auto; max-width: 768px; padding: 0 1rem; padding-right: calc(1rem + env(safe-area-inset-right)); padding-left: calc(1rem + env(safe-area-inset-left)); } }

@media (min-width: 1280px) { .responsive-body { margin: 0 auto; max-width: 1000px; padding: 0 1rem; padding-right: calc(1rem + env(safe-area-inset-right)); padding-left: calc(1rem + env(safe-area-inset-left)); } }

.wrapper { padding: 0 1rem; padding-right: calc(1rem + env(safe-area-inset-right)); padding-left: calc(1rem + env(safe-area-inset-left)); }

.page-nav { display: flex; align-items: center; }

.page-nav .item { margin: 1rem 1rem 1rem 0; padding: 10px 0px; }

.page-nav .item:last-child { margin-right: 0; }

.page-nav .icon { padding: 0; margin: 1rem; }

.page-nav .icon img { vertical-align: middle; }

.page-nav .flexible-space { flex-grow: 2; }

.page-nav .jewel-button { padding: 10px 14px; background: #7b5ab9; border-radius: 6px; text-decoration: none; transition: transform 80ms ease-in; box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.3), 0px 0px 1px 1px rgba(0, 0, 0, 0.4); }

.page-nav .jewel-button:hover { transform: scale(1.1, 1.1); }

.page-nav .jewel-button:active { transform: scale(0.9, 0.9); }

.page-nav .icon-button { padding: 3px 7px; font-size: 0; vertical-align: middle; }

.variant-home .page-nav { justify-content: center; }

.page-content { padding: 1px 1rem; line-height: 1.3; }

.page-content .post { width: 100%; }

.page-content .post header { margin: -1rem -1rem 0 -1rem; padding: 1rem; color: white; border-bottom: 0.5pt dashed black; }

.page-content .post .content { margin: 0 -1rem -1rem -1rem; padding: 1rem; }

.page-content .post header h1 { font-family: "Lato", serif; font-weight: 600; font-size: 1.5rem; margin: 0; }

.page-content .post header p:last-child { margin-bottom: 0; }

.page-content .post .content p:first-child { margin-top: 0; }

.page-content .post .content pre.highlight { overflow-y: auto; overflow-x: auto; margin: 0; }

.page-content .post .content div.highlighter-rouge { margin-left: -1rem; margin-right: -1rem; }

.page-content .post .content div.highlighter-rouge div.highlight { padding: 1rem; }

.page-content .post .content li { padding-inline-start: 1ch; }

.page-content .post .content ul li { list-style-type: '–'; }

.page-content .post .content ul, .page-content .post .content ol { list-style-position: outside; padding-left: 1em; }

.page-content .post .content h1, .page-content .post .content h2, .page-content .post .content h3, .page-content .post .content h4, .page-content .post .content h5, .page-content .post .content h6 { font-weight: 600; }

.page-content.paperlike { display: flex; flex-direction: row; border-radius: 0; position: relative; margin-left: 32px; margin-right: 32px; }

.page-content.paperlike::before, .page-content.paperlike::after { position: absolute; content: " "; width: 32px; height: 100%; }

.page-content.paperlike::before { left: -32px; top: 0; }

.page-content.paperlike::after { right: -32px; top: 0; }

.page-content.paperlike .post .meta { display: flex; justify-content: space-between; font-family: 'Roboto Mono', monospace; font-size: 90%; }

@media (max-width: 400px) { .page-content.paperlike { margin-left: calc(32px - 1rem); margin-right: calc(32px - 1rem); } }

.page-footer { margin-top: 2rem; margin-bottom: 2rem; margin-bottom: calc(2rem + env(safe-area-inset-bottom)); font-size: 80%; font-style: italic; text-align: center; }

.page-footer .gutter { margin: 1rem; }

.page-footer .footer-line { margin: 0.12rem; }

.page-footer code { font-size: 0.9rem; }

.decoration-top { position: absolute; top: 0; width: 100%; z-index: -1; }

.decoration-top .deco-container { height: 15rem; }

.decoration-top .deco-container > .shade { position: absolute; bottom: -1px; width: 100%; height: 130px; }

.decoration-top .deco-container > #deco-top-canvas { width: 100%; height: 100%; }

.variant-home .decoration-top .deco-container { height: 60vh; min-height: 600px; }

@media only screen and (max-width: 568px) { .decoration-top .deco-container > .shade { overflow: hidden; } .decoration-top .deco-container > .shade svg { transform: scaleX(1.5); } }

.kirara-lander { display: flex; flex-direction: row; align-content: flex-end; align-items: center; }

.kirara-lander .contents { position: relative; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 5rem; }

.kirara-lander .logo { width: 100%; max-width: 400px; }

.kirara-home-md-content { text-align: center; }

.kirara-list-ent { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem; border: 2px solid black; border-radius: 8px; font-weight: 600; position: relative; }

.kirara-list-ent .caption { padding-right: 1rem; }

.kirara-list-ent .caption::after { position: absolute; content: " "; top: 0; left: 0; width: 100%; height: 100%; }

.kirara-list-ent .extras { z-index: 3; display: flex; align-items: baseline; }

.kirara-list-ent .extras a { padding-left: 0.5rem; font-size: 80%; }

.kirara-list-ent .extras a:first-child { padding-left: 0; }

.kirara-list-ent a { text-decoration: none; }

.proto-footer { font-weight: 600; font-size: 80%; text-align: center; margin: 0.12rem; }

.page-content { border: 2px solid black; border-radius: 16px; padding: 1px 1rem; }

/*# sourceMappingURL=main.css.map */