*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}:root{--editor-line-height: 1.5;--editor-padding: calc(var(--editor-line-height) * 1em);--editor-border-width: 3px;--editor-height: calc(var(--editor-line-height) * 1em * 3 + 2 * var(--editor-padding) + 2 * var(--editor-border-width));--editor-width: 50ch;--preview-border-width: 3px;--color-bg: oklch(.9644 .03 76.11);--color-text1: #26295C;--color-text2: #960000;--space: 1rem;font-size:16px;font-family:Roboto Mono,monospace;font-optical-sizing:auto;font-weight:500;font-style:normal}body{position:relative;margin:0;background-color:var(--color-bg);height:100dvh;padding:5rem max(calc((100vw - 72rem)/2),2em) 2rem}body *{color:var(--color-text1)}.circle1{position:absolute;left:-5rem;border:3px solid currentColor;aspect-ratio:1;width:30rem;border-radius:100%}.circle2{position:absolute;left:calc(50% - 15rem);top:20rem;background-color:var(--color-text2);aspect-ratio:1;width:20rem;border-radius:100%}canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}header h1{font-size:9rem;font-weight:500;view-transition-name:title;margin:0}header h1 span{color:var(--color-text2);font-size:2.3rem;line-height:1;display:inline-block;width:1ch;margin-right:.1em}header nav button{font-size:1.2em;background-color:transparent;border:none;border:0;cursor:pointer;padding:0}header nav:before{content:"";flex:1;border-bottom:3px solid currentColor}p{margin-top:var(--space)}.flex-row{display:flex;flex-direction:row}.flex-column{display:flex;flex-direction:column}.align-center{align-items:center}.align-baseline{align-items:baseline}.align-self-center{align-self:center}.align-self-start{align-self:flex-start}.justify-self-start{justify-self:flex-start}.justify-center{justify-content:center}.justify-around{justify-content:space-around}: .justify-space-between{justify-content:space-between}.h-100{height:100%}.gap{gap:var(--space)}.flex-1{flex:1}.text-center{text-align:center}.btn{border:none;color:var(--color-bg);background-color:var(--color-text1);border-radius:.5em;padding:.5em;cursor:pointer}select{background:none;border:none}dialog{position:relative;width:60ch;color:var(--color-text1);background-color:var(--color-bg);border:3px solid currentColor;border-radius:1em}dialog::backdrop{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}dialog h2,dialog p{margin:0}dialog #dialog-close{position:absolute;top:.2em;right:.2em;color:var(--color-text1);background-color:transparent;border:none;cursor:pointer}#haiku{margin-block-start:3em}#share-button{margin-top:var(--space)}#editor-container{position:relative}#editor-container>div{display:grid;min-height:var(--editor-height)}#editor-container #editor{min-height:var(--editor-height);width:var(--editor-width);border:var(--editor-border-width) solid transparent;border-radius:1em;padding:var(--editor-padding);color:transparent;caret-color:var(--color-text1);grid-row:1;grid-column:1;font-family:Roboto Mono;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}#editor-container #editor-highlight{position:relative;min-height:var(--editor-height);width:var(--editor-width);pointer-events:none;border:var(--editor-border-width) solid currentColor;border-radius:1em;padding:var(--editor-padding);margin:0;white-space:pre-line;grid-row:1;grid-column:1}#editor-container #editor-highlight code{font-family:Roboto Mono}#editor-container #editor-highlight :after{content:"CSS";position:absolute;bottom:calc(-1 * var(--editor-border-width));left:calc(-1ch - .3em);bottom:calc(-1 * var(--preview-border-width));writing-mode:vertical-rl;text-orientation:upright;font-size:1.2em;letter-spacing:-.2em;font-weight:400}#editor-container #editor-warning{color:var(--color-text2)}#preview{--selector-height: 2rem;position:relative;margin-top:calc(-1 * var(--selector-height))}#preview:after{content:"PREVIEW";position:absolute;left:calc(-1ch - .3em);bottom:0;writing-mode:vertical-rl;text-orientation:upright;font-size:1.2em;letter-spacing:-.2em;font-weight:400}#preview>label{display:block;height:var(--selector-height)}#preview>div{width:var(--editor-width);aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border:var(--preview-border-width) solid currentColor;border-radius:1em;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow:hidden}#preview>div div{flex:1}.share-input input{border:2px solid currentColor;padding:calc(.5em - 2px)}.token.property,.token.punctuation{color:var(--color-text2)}