:root{line-height:1.5;background-color:#242424}body{margin:0;padding:0;min-height:100vh;font-family:Inter,sans-serif;font-size:16px;font-weight:400;color:#eee}h2{font-size:1.25em}*{box-sizing:border-box}#root{width:100%;height:100%;margin:0;padding:0}.app{--border-color: #555;--header-height: 80px;display:grid;grid-template-areas:"header header" "card controls";grid-template-columns:1fr 350px;grid-template-rows:var(--header-height) 1fr;min-height:100vh;height:100%;max-height:100vh}.app__card-section{display:block;container-type:inline-size;grid-area:card;align-content:center;padding:3rem;border-right:1px solid var(--border-color);height:100%;max-height:calc(100vh - var(--header-height))}.app__controls-section{container-type:inline-size;grid-area:controls;height:100%;max-height:calc(100vh - var(--header-height));overflow-y:scroll}.app__header-section{grid-area:header;color:#eee;padding:0 2rem;border-bottom:1px solid var(--border-color);align-content:center}.app__card-section-aligner{display:flex;flex-direction:column;align-items:center}@property --flip-rotation{syntax: "<number>"; initial-value: 0; inherits: true;}@property --tilt-base{syntax: "<number>"; initial-value: 0; inherits: true;}.card{--foil-highlight-size: 70%;--foil-highlight-opacity: .15;--glare-highlight-opacity: .2;--tilt-base-deg: calc(var(--tilt-base) * 1deg);--flip-rotation: 0;--z-index-content: 1;--z-index-foil: 2;--z-index-glare: 3;font-size:16px;aspect-ratio:8 / 11;width:16em;background:#fff;color:#111;transform:rotateY(calc((var(--tilt-x) * var(--tilt-base-deg)) + (var(--flip-rotation) * 1deg))) rotateX(calc(var(--tilt-y) * var(--tilt-base-deg) * -1));perspective:70px;transform-style:preserve-3d;transition:--flip-rotation .4s,--tilt-base .8s;border-radius:1em;box-shadow:0 0 .5em #00000080}.card--faceDown{--flip-rotation: 180}.card__front,.card__back,.card__glare,.card__foil,.card__sorcery{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;border-radius:inherit}.card__front{background-size:cover;transform:translateZ(.01px);overflow:hidden}.card__foil{mix-blend-mode:screen;opacity:var(--foil-highlight-opacity);background-blend-mode:color,multiply,lighten;background:radial-gradient(circle at calc((var(--tilt-x) * 50%) + 50%) calc((var(--tilt-y) * 50%) + 50%) in hsl,red 5%,orange,blue,violet,transparent var(--foil-highlight-size)),radial-gradient(circle at calc((var(--tilt-x) * 50%) + 50%) calc((var(--tilt-y) * 50%) + 50%),#fff 5%,#000 var(--foil-highlight-size)),url(hexas.svg);background-repeat:repeat;background-size:cover;z-index:var(--z-index-foil)}.card__glare{mix-blend-mode:lighten;background:radial-gradient(circle at calc((var(--tilt-x) * 50%) + 50%) calc((var(--tilt-y) * 50%) + 50%),rgba(from #fff r g b / var(--glare-highlight-opacity)) 10%,transparent 100%);background-repeat:no-repeat;z-index:var(--z-index-glare)}.card__back{transform:rotateY(180deg)}@media (prefers-reduced-motion: reduce){.card{transform:none}.card--faceDown{transform:rotateY(180deg)}}.card__sorcery{display:grid;grid-template-areas:"name cost" "image image" "type type" "text text";grid-template-rows:1.65em 6fr 1.7em 5fr;grid-template-columns:1fr fit-content(7ch);font-family:Texturina,serif;border-radius:inherit;padding:.5em}.card__sorcery--color-red{background:red}.card__sorcery--color-green{background:#208320}.card__sorcery--color-blue{background:#00f}.card__sorcery--color-black{background:#000}.card__sorcery--color-white{background:#fff}.card__sorcery-name{grid-area:name;font-size:1.1em;line-height:1em;vertical-align:top;padding:0 0 .25em;font-weight:600}.card__sorcery-cost{font-size:.8em;font-weight:400;vertical-align:top;padding:0 0 .25em;grid-area:cost;text-align:right}.card__sorcery-cost-mana{letter-spacing:.1em}.card__sorcery-image{grid-area:image;background-size:cover;background-color:#fff;border-radius:.5em;border:2px inset rgba(0,0,0,.3);background-position:center}.card__sorcery-type{grid-area:type;line-height:1.5em;padding:.1em 0}.card__sorcery-text{background:#ffffff80;grid-area:text;padding:.3em;border-radius:.5em;border:2px inset rgba(0,0,0,.3)}.card__sorcery-flavor{font-style:italic}.card__sorcery-illustration-credit{font-size:.8em;font-style:italic;position:absolute}.controls{height:100%;padding:1em}.controls__text-area{width:100%;height:100%;padding:1rem;color:#eee;background-color:#333;border:none}.form-component label{display:flex;flex-direction:column;width:100%}.select select{font-size:1em;padding:.5em;color:inherit;border-color:#111;background-color:#333;width:100%}.toggle__option{color:inherit;background-color:inherit;border:1px solid #111;cursor:pointer;font-size:1em;padding:.5em}.toggle__option.toggle__option--selected{background-color:#333;font-weight:700}.input input{font-size:1em;padding:.5em;color:inherit;border:1px solid #111;background-color:#333;width:100%}