:root{--font-mono: "Courier", "Courier Prime", monospace}*,*:before *:after{box-sizing:border-box}@font-face{font-family:Crimson Pro;font-style:normal;font-weight:400;src:url(/fonts/CrimsonPro-Regular.ttf)}@font-face{font-family:Crimson Pro;font-style:italic;font-weight:400;src:url(/fonts/CrimsonPro-Italic.ttf)}@font-face{font-family:Crimson Pro;font-style:normal;font-weight:600;src:url(/fonts/CrimsonPro-SemiBold.ttf)}@font-face{font-family:Courier Prime;font-style:normal;font-weight:400;src:url(/fonts/CourierPrime-Regular.ttf)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}html,body{margin:0;padding:0}html{height:100%}body{background-color:#f9f9f9;font-family:ヒラギノ明朝 Pro,Hiragino Mincho Pro,游明朝,Yu Mincho,YuMincho,HGS明朝E,Crimson Pro,serif;line-height:1.5;overflow-x:hidden;display:flex;flex-direction:column;min-height:100%;gap:2rem}h1{font-size:2rem;line-height:1}h2{font-size:1.625rem;line-height:1.2}h3{font-size:1.29rem;line-height:1.3}h4,h5,h6{font-size:1.04rem;line-height:1.4}.box{width:1em;height:1em;position:relative}.glyph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat}a{color:#3cb371}a:hover{color:#8fbc8f}a[href*="//"]{display:inline-flex;align-items:center;gap:.1em;width:max-content}a[href*="//"] .glyph{-webkit-mask:url(/icons/ne-arrow.svg) center no-repeat;mask:url(/icons/ne-arrow.svg) center no-repeat;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background-color:currentColor}.sample-list{display:flex;gap:0 .25em;flex-wrap:wrap}input{accent-color:seagreen;color:#fff}textarea,button{font-family:ヒラギノ明朝 Pro,Hiragino Mincho Pro,游明朝,Yu Mincho,YuMincho,HGS明朝E,Crimson Pro,serif}textarea{resize:horizontal;white-space:pre}textarea.wrap{white-space:pre-wrap}button{line-height:1.5;cursor:pointer;background-color:#2e8b57;color:#fff;border:0;border-radius:5px;margin:1px;display:block;font-size:1em}button:disabled{color:#999;background-color:#eee;cursor:default}pre{padding:1em 1.5em;background-color:#f5f5f5;overflow-x:scroll}pre code{margin:0}code,kbd{font-family:var(--font-mono);margin:0 .25em}kbd{display:inline-block;vertical-align:middle;padding:0 .3rem;margin:0 .2rem;font-size:.7rem;background-color:#00000003;border-radius:5px;border:2px solid #dadada;box-shadow:inset 0 -1px #dadada}.hidden{display:none}.invisible{visibility:hidden}hr{border:1px solid rgb(220,220,220);margin-bottom:1em}.modal{background-color:#fff;padding:1em 1.5em 1.5em;border-radius:5px;width:300px;border:none;height:fit-content;box-shadow:1px 1px 20px 20px #00000003}.modal .close-button{position:absolute;right:1.5em;top:1.5em;padding:0;line-height:1;cursor:pointer;background:none}.modal .close-button .box{width:1.2em;height:1.2em}.modal .close-button .glyph{-webkit-mask:url(/icons/remove.svg) center no-repeat;mask:url(/icons/remove.svg) center no-repeat;background-color:#999;transform:.5s background-color}.modal .close-button .glyph:hover{background-color:#777}.modal h2{margin-top:0}header,main,footer{margin-left:1rem;margin-right:1rem;width:calc(100vw - 2rem);overflow:hidden}@media (min-width: 800px){.playground header,.playground main,.playground footer{width:calc(100% - 6rem)}}header{margin-top:1rem}#skip-to-content{position:absolute;top:0;left:0}#skip-to-content:not(:focus){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}footer{margin-bottom:1rem}@media (min-width: 800px){header,main,footer{margin-left:auto;margin-right:auto}header{margin-top:2rem}footer{margin-bottom:2rem}header,footer{max-width:800px}}header{display:flex;justify-content:space-between;flex-direction:column;gap:.5em;align-items:flex-start}header ul{list-style-type:none;display:flex;gap:1em;padding:0;margin:0}header a{text-decoration:none}header .current a{border-bottom:1px solid currentColor}@media (min-width: 800px){header{flex-direction:row;align-items:center}}.title{font-size:24px;margin:0}main{flex:1}@media (min-width: 800px){main{max-width:800px}.playground header,.playground main,.playground footer{max-width:unset;margin-left:3rem;margin-right:3rem}}@media (max-width: 800px){.playground{height:100%;display:flex;flex-direction:column}.playground main{display:flex;flex-direction:column;overflow-x:hidden;flex:1}}.playground .hidable,.playground .focus-note,.playground .exitFocusBtn{transition:.5s ease-in-out opacity}.playground.focus .hidable{opacity:0}.focus-note{position:absolute;left:0;right:0;top:1em;padding:.2em .5em;border-radius:5px;text-align:center;opacity:0}#exitFocusBtn{position:absolute;top:1rem;left:1rem;opacity:0;background:none;color:#999}#exitFocusBtn:hover{color:#2e8b57}.switcher{margin-bottom:1em;font-size:24px}.switcher .proseplay-window{font-style:italic}@media (min-width: 800px){.switcher{display:none}}.viewer{width:100%;height:80vh;display:grid;gap:3rem;grid-template-columns:2fr 2fr 1fr}@media (prefers-reduced-motion: no-preference){.viewer{transition:grid-template-columns .5s ease-in-out}.viewer.focus--input,.viewer.focus--output{grid-template-columns:2fr 2fr 1fr}.focusing:scope{grid-template-columns:0fr 1fr 0fr}}@media (max-width: 800px){.viewer{width:310vw;display:flex;overflow-x:hidden;gap:20vw;flex:1}.viewer.view--input{margin-left:0}.viewer.view--output{margin-left:-110vw}.viewer.view--snapshots{margin-left:-220vw}}@media (max-width: 800px) and (prefers-reduced-motion: no-preference){.viewer{transition:.2s margin-left ease-in-out}}.input-column,.output-column,.snapshots-column{display:flex;flex-direction:column;gap:1rem;width:90vw;height:100%}@media (min-width: 800px){.input-column,.output-column,.snapshots-column{width:unset}}.input-column{overflow:hidden}@media (min-width: 800px){.output-column{display:grid;grid-template-rows:auto 1fr;gap:1rem}}@media (min-width: 1200px){.output-column{grid-template-rows:auto 1fr}}.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.toolbar.toolbar--full button{flex:1;padding:.5em .75em}@media (max-width: 800px){.toolbar button{flex:1}}.toolbar-section{display:flex;gap:.25rem}.toolbar-section+.toolbar-section{padding-left:.5rem;border-left:.5px solid #999}#uploadBtn .glyph{-webkit-mask:url(/icons/upload.svg) center no-repeat;mask:url(/icons/upload.svg) center no-repeat}#saveBtn .glyph{-webkit-mask:url(/icons/save.svg) center no-repeat;mask:url(/icons/save.svg) center no-repeat}.checkbox-container{-webkit-user-select:none;user-select:none}.button-with-icon{display:inline-flex;gap:.25em;align-items:center;justify-content:center;background:none;color:#000;line-height:1;white-space:pre}.button-with-icon:disabled{background:none}.button-with-icon .box{width:1.2em;height:1.2em}.button-with-icon .glyph{background-color:#000}.button-with-icon:disabled .glyph{background-color:#999}.button-with-icon:not(:disabled):hover{color:#2e8b57}.button-with-icon:not(:disabled):hover .glyph{background-color:#2e8b57}#detailBtn.expand .glyph{-webkit-mask:url(/icons/expand.svg) center no-repeat;mask:url(/icons/expand.svg) center no-repeat}#detailBtn.collapse .glyph{-webkit-mask:url(/icons/collapse.svg) center no-repeat;mask:url(/icons/collapse.svg) center no-repeat}#randomiseBtn .glyph{-webkit-mask:url(/icons/randomise.svg) center no-repeat;mask:url(/icons/randomise.svg) center no-repeat}@media (prefers-reduced-motion: no-preference){#randomiseBtn .box{transform:rotate(360deg);transition:.15s}#randomiseBtn.clicked .box{transform:rotate(0);transition:0s}}#clearBtn .glyph{-webkit-mask:url(/icons/remove.svg) center no-repeat;mask:url(/icons/remove.svg) center no-repeat}#focusBtn .glyph{-webkit-mask:url(/icons/focus.svg) center no-repeat;mask:url(/icons/focus.svg) center no-repeat}#helpBtn .glyph{-webkit-mask:url(/icons/help.svg) center no-repeat;mask:url(/icons/help.svg) center no-repeat}.form-container,.form-container .input-form{flex:1;display:flex;flex-direction:column}.form-container .input-form .textarea-container{flex:1}.small-heading{text-transform:uppercase;font-weight:500;font-size:14px;letter-spacing:-.025em;border-bottom:.5px solid currentColor;padding-bottom:.25em;margin-top:0;margin-bottom:0;width:fit-content;color:#777}.loadBtn{display:inline-block;background:none;color:#444;padding:0;font-style:italic;position:relative}.loadBtn:hover{text-decoration:underline}.loadBtn+.loadBtn{padding-left:.75em}.loadBtn+.loadBtn:before{content:"/ ";position:absolute;top:0;left:0;color:#999}.file-name .file-ext{opacity:.6}#input{width:calc(100% - 3.5em);height:calc(100% - 3em);border:1px solid #e5e5e5;padding:1.5em;box-shadow:1px 1px 5px 5px #00000003;line-height:1.5;font-family:var(--font-mono);background-color:#ffffff1a}@media (max-width: 800px){#input{flex:1}}.empty-text{display:none;max-width:30ch;font-size:1rem}.empty{width:calc(100% - 2rem);height:calc(100% - 2rem);background-color:#eee;display:flex;align-items:center;justify-content:center;padding:1rem;color:#999;text-align:center}.empty .empty-text{display:block}.text--toolbar{flex-wrap:wrap}.text-container{font-size:24px;padding-top:2rem}.snapshots-column{overflow:hidden}#snapshotBtn .glyph{-webkit-mask:url(/icons/snapshot.svg) center no-repeat;mask:url(/icons/snapshot.svg) center no-repeat}#clearSnapshotsBtn .glyph{-webkit-mask:url(/icons/clear-snapshots.svg) center no-repeat;mask:url(/icons/clear-snapshots.svg) center no-repeat}.snapshots{max-height:100%;font-size:16px;color:#999;display:flex;flex-direction:column;overflow:auto;gap:1rem}.snapshot{border-radius:7px;background-color:#f5f5f5;padding:1.5em;border:1px solid #ececec;display:flex;flex-direction:column;gap:.5em}.snapshot--header{display:flex;align-items:center}.snapshot--heading{margin:0;font-size:.8em;text-transform:uppercase;flex:1}.snapshot--clear{cursor:pointer;background:none}.snapshot--clear .box{width:24px;height:24px}.snapshot--clear .glyph{-webkit-mask:url(/icons/remove.svg) center no-repeat;mask:url(/icons/remove.svg) center no-repeat;background-color:#999}.snapshot--clear:hover .glyph{background-color:#777}footer{font-size:small;display:flex}footer{justify-content:center}.proseplay{line-height:1.5}.proseplay.proseplay-is-expanded .proseplay-current{cursor:default}.proseplay-plaintext{transition:opacity .15s ease-in-out}.proseplay-window{box-sizing:content-box;height:1.3em;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:none;border-radius:.2em;margin-bottom:-.2em;padding-left:.3em;padding-right:.3em;transition:width .15s ease-in-out;display:inline-block;position:relative;box-shadow:inset .05em .05em .2em #00000026}.proseplay-window.proseplay-horizontal .proseplay-list{flex-direction:row;gap:1em}.proseplay-window.proseplay-horizontal .proseplay-current{cursor:ew-resize}.proseplay-link-ref{opacity:.6;padding-left:3px;line-height:1}.proseplay-list{touch-action:none;flex-direction:column;display:flex;position:absolute}.proseplay-list.proseplay-has-transition{transition:top .15s ease-in-out,left .15s ease-in-out}.proseplay-choice{opacity:0;width:max-content;pointer-events:none;-webkit-user-select:none;user-select:none;touch-action:none;padding-top:.25em;line-height:1;transition:opacity .15s ease-in-out}.proseplay-current{opacity:1;cursor:ns-resize;pointer-events:all}.proseplay-has-hover .proseplay-plaintext,.proseplay-has-hover .proseplay-link-ref,.proseplay-has-hover .proseplay-window .proseplay-choice.proseplay-current{opacity:.2}.proseplay-has-hover .proseplay-window.proseplay-hover .proseplay-choice{opacity:.4}.proseplay-has-hover .proseplay-window.proseplay-hover .proseplay-choice.proseplay-current{opacity:1}