@import url(https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap);a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;vertical-align:baseline;font:inherit;font-size:100%}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}audio:not([controls]){display:none;height:0}[hidden],template{display:none}script{display:none!important}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;line-height:1}:focus,a,a:active,a:focus,a:hover,button,button:focus{outline:0}a{-webkit-user-drag:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}a[href]:hover{cursor:pointer}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,serif}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sup{top:-.5em}sub{bottom:-.25em}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}legend{padding:0;border:0}button,input,select,textarea{margin:0;font-size:100%;font-family:inherit;outline-offset:0;outline-style:none;outline-width:0;-webkit-font-smoothing:inherit;background-image:none}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}textarea{overflow:auto;vertical-align:top}img{-webkit-user-drag:none}table{border-spacing:0;border-collapse:collapse}:root{--grayfg:#999;--graybg:#d0d0d0;--graybg-light:#e0e0e0;--black:#090909;--white:#f8f8f8;--pad:10px;--pad2:18px;--pads:5px;--red:#f33;--primary:#447821;--yellowbg:#fdff9a}body,html{font-family:Roboto,sans-serif;font-weight:400;font-size:14px;line-height:18px;background:var(--graybg);background:url(/images/background-2156d9eb97d2622d76fe060f0be01cab.jpg?vsn=d);background-size:500px auto}::selection{background:rgba(68,120,33,.5)}.message.user .bubble:not(:empty)::selection{background:#000}::-moz-selection{background:rgba(68,120,33,.5)}.background-button{color:#fff;background:rgba(0,0,0,.3);white-space:nowrap;cursor:pointer;border:none;padding:var(--pad) var(--pad2);margin:var(--pad);border-radius:20px;text-align:center;text-decoration:none!important}.background-button.over,.background-button:hover{background:var(--primary);color:#fff}a{color:var(--primary)}.app-wrapper{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column}.app-wrapper>div.main{position:relative;flex:1;display:flex;flex-direction:column}.app-wrapper>div.main>div{flex:1;position:relative}.app-wrapper>div.nav{z-index:11;position:absolute;left:20px;bottom:20px}.app-wrapper>div.nav a{margin-left:0}#root .bp3-navbar{background-color:#00619f}::-webkit-scrollbar{margin:2px;width:12px;height:12px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.3);border-radius:12px}.dialog{position:absolute;width:100%;max-width:540px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:4px;background-color:var(--white);left:50%;top:30%;transform:translate(-50%,-30%);padding:var(--pad2)}.dialog .dialog-body{max-height:80vh;overflow:auto}.dialog .dialog-body h1,.dialog .dialog-body h2,.dialog .dialog-body h3{font-weight:700;margin:20px 0 10px}.dialog .dialog-body h1:first-child,.dialog .dialog-body h2:first-child,.dialog .dialog-body h3:first-child{margin-top:10px}.dialog .dialog-body p,.dialog .dialog-body ul{margin-bottom:var(--pad)}.dialog .dialog-body h1{font-size:2em}.dialog .dialog-body h2{font-size:1.5em}.dialog .dialog-body h3{font-size:1.2em}.dialog .dialog-body ul{list-style-type:disc;list-style-position:inside}.dialog .dialog-body ol{list-style-type:decimal;list-style-position:inside}.dialog .dialog-body ol ul,.dialog .dialog-body ul ul{list-style-type:circle;list-style-position:inside;margin-left:15px}.dialog .dialog-body ol ol,.dialog .dialog-body ul ol{list-style-type:lower-latin;list-style-position:inside;margin-left:15px}.dialog .dialog-body code{background:var(--white);display:inline-block;padding:0 2px;border:1px solid var(--grayfg);border-radius:4px}.callout--wrapper{padding:var(--pads) var(--pad);box-shadow:0 1px 2px rgba(0,0,0,.3);background-color:var(--graybg);color:#000;font-size:12px;border-radius:4px}.callout--wrapper.info{background-color:var(--yellowbg)}#root .MuiAppBar-colorPrimary{background-color:rgba(83,127,52,.59)}div.books{position:absolute;left:0;right:0;top:0;bottom:0}div.books .container{max-width:720px;margin:80px auto auto;color:var(--black)}div.books .container h2{font-size:24px;padding:var(--pad);margin-top:var(--pad);color:var(--white)}div.books .container .list{display:grid;grid-template-columns:1fr 1fr 1fr}@media (max-width:480px){div.books .container .list{grid-template-columns:1fr}}div.books .container .list .book{padding:12px var(--pad);box-shadow:0 2px 4px rgba(0,0,0,.3);background-color:var(--white);border-radius:4px;margin:var(--pad);text-align:center;justify-content:center;display:flex;flex-direction:column}div.books .container .list .book h3{font-weight:700;padding-bottom:var(--pads);border-bottom:1px solid #ddd;margin-bottom:var(--pads)}.MuiMenuItem-root{color:#000!important}.code-frame--wrapper{display:flex;flex-direction:row;background-color:var(--graybg-light);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);border-radius:4px}.code-frame--wrapper button{width:36px;height:36px}.code-frame--wrapper div.code{flex:1;padding:var(--pad);overflow:hidden;white-space:nowrap}.stories{position:absolute;z-index:10;left:0;right:0;top:0;bottom:0;padding:var(--pad);display:flex;flex-direction:row;align-items:flex-start;overflow:auto}.stories.readonly *{cursor:auto!important}.stories:after{content:"";position:fixed;width:120px;height:20px;background-image:url(/images/logo.svg);background-size:contain;background-repeat:no-repeat;right:70px;bottom:26px}.stories .story-trashcan{position:fixed;bottom:20vh;text-align:center;background:var(--white);left:50%;transform:translate(-50%);width:100px;height:100px;border-radius:50%;opacity:.7;border:2px solid var(--black)}.stories .story-trashcan svg{padding:10px;width:80px;height:80px}.stories .story-trashcan.over{opacity:1;background:var(--red);color:var(--white)}.stories .create-story{color:#fff;background:rgba(0,0,0,.3);white-space:nowrap;cursor:pointer;border:none;padding:var(--pad) var(--pad2);margin:var(--pad);border-radius:20px;text-align:center;text-decoration:none!important}.stories .create-story.over,.stories .create-story:hover{background:var(--primary);color:#fff}.draggable-bubble.before{border-top:1px dashed var(--grayfg);margin-top:10px}.draggable-bubble+.draggable-bubble.before{margin-top:2px}.draggable-bubble.after{border-bottom:1px dashed var(--grayfg);padding-bottom:2px}.droppable.after:after,.droppable.before:before{content:"";display:block;margin-top:10px;margin-bottom:10px;background:var(--yellowbg);border:1px dashed var(--grayfg);height:10px}.drag-container.dragging .story{transform:rotate(-1deg)}.story--wrapper{box-shadow:0 2px 4px rgba(0,0,0,.3);background-color:var(--white);border-radius:4px;margin:var(--pad);padding:0 0 50px;max-width:400px;min-width:300px}.story--wrapper h3{font-weight:700;font-size:1.4em;padding:var(--pad);line-height:1;margin-bottom:var(--pad)}.story--wrapper h3.active .cell--wrapper{display:block;box-shadow:0 0 0 2px var(--black);padding:3px 4px;margin:-3px -4px;border-radius:4px}.story--wrapper .draggable{cursor:move}.story--wrapper.active{border-color:var(--black)}.story--wrapper .act{padding:var(--pad);padding-top:0;border-top:1px solid var(--graybg);position:relative;--note-width:150px}.story--wrapper .act.active{border-color:var(--black);box-shadow:inset 6px 0 0 0 var(--black)}.story--wrapper .act.active>div.handle{color:var(--black)}.story--wrapper .act.active>div.handle.empty:not(.editing){font-weight:700}.story--wrapper .act.active>div.handle.editing{background-color:var(--yellowbg)}.story--wrapper .act.linked-active{box-shadow:inset 6px 0 0 0 var(--graybg)}.story--wrapper .act>.cell--wrapper .inner{cursor:move}.story--wrapper .act .controls{position:absolute;bottom:100%;right:0;box-shadow:0 2px 4px rgba(0,0,0,.3);background-color:var(--white);border-radius:4px;padding:var(--pads);border:1px solid var(--black)}.story--wrapper .act .split-control{position:relative;height:20px;margin-bottom:-10px;margin-top:-10px;cursor:pointer}.story--wrapper .act .split-control:hover:before{content:"";position:absolute;display:block;height:1px;border-top:1px solid var(--graybg);left:0;top:11px;right:0}.story--wrapper .act .split-control span{opacity:0;position:absolute;left:50%;transform:translate(-50%,-6px);border-radius:1em;padding:6px 14px;outline:none;display:inline-block;white-space:nowrap;cursor:pointer;color:var(--grayfg);border:1px dotted var(--grayfg);background:var(--white);z-index:10;transition:opacity .2s linear;transition-delay:.5s}.story--wrapper .act .split-control span.over,.story--wrapper .act .split-control span:hover{background:var(--primary);color:#fff}.story--wrapper .act .split-control span:hover{color:var(--grayfg);background:#fff}.story--wrapper .act .split-control:hover span{opacity:1}.story--wrapper .act>div.handle{font-size:10px;background:var(--white);user-select:none;cursor:move;display:inline-block;padding:0 6px;line-height:10px;color:var(--grayfg);position:absolute;left:50%;transform:translate(-50%,-58%)}.story--wrapper .act>div.handle.empty:not(.editing){letter-spacing:.2em}.story--wrapper .act>div.note{box-shadow:0 2px 4px rgba(0,0,0,.3);background-color:var(--white);border-radius:4px;position:absolute;right:0;transform:translate(calc(var(--pad)*2));width:var(--note-width);z-index:-1;background:var(--yellowbg);padding:var(--pad);transition:transform .15s ease-out}.story--wrapper .act.active>div.note{transform:translate(calc(var(--pad)*2 + var(--note-width)));z-index:2}.story--wrapper .message{position:relative}.story--wrapper .message div.row{display:flex;flex-direction:row;align-items:center}.story--wrapper .message div.row.toggling-enter{transform:translate(0);opacity:1}.story--wrapper .message div.row.toggling-enter-active{transform:translate(100px);transition:all .2s ease-in}.story--wrapper .message.user div.row{flex-direction:row-reverse}.story--wrapper .message.user div.row.toggling-enter-active{transform:translate(-100px)}.story--wrapper .message .toggle-sender-hint{display:inline-block;line-height:1;padding:2px 6px 4px;margin:4px;white-space:nowrap;cursor:pointer;color:var(--grayfg);border:1px dotted var(--grayfg);border-radius:50%;background:var(--white)}.story--wrapper .message .toggle-sender-hint.over,.story--wrapper .message .toggle-sender-hint:hover{background:var(--primary);color:#fff}.story--wrapper .message .toggle-sender-hint:hover{color:var(--grayfg);background:#fff}.story--wrapper .message .toggle-sender-hint:after{content:"»"}.story--wrapper .message.user .toggle-sender-hint:after{content:"«"}.story--wrapper .message .cell--wrapper>div.animate-wrap{position:absolute;left:100%;top:0}.story--wrapper .message .bubble,.story--wrapper .message span.bubble{border-radius:1em;outline:none;display:inline-block;padding:0;position:relative;background-color:#ddd}.story--wrapper .message .bubble .inner,.story--wrapper .message span.bubble .inner{padding:6px 14px}.story--wrapper .message.bot{text-align:left}.story--wrapper .message.user{text-align:right}.story--wrapper .message.user .bubble:not(.editing){background-color:var(--primary);color:#fff}.story--wrapper .message.user .bubble:empty:before{color:#aaa}.story--wrapper .message.user .bubble>div.animate-wrap{position:absolute;right:100%;left:auto;top:0}.story--wrapper .message .bubble.active{box-shadow:0 0 0 2px var(--black)}.quick-replies--wrapper{font-size:80%;position:relative;z-index:100}.quick-replies--wrapper>div.animate-wrap{display:inline-block}.quick-replies--wrapper .quick-reply{outline:none;display:inline-block;padding:4px 10px;border:2px solid #ddd;margin-top:10px;margin-right:var(--pads);border-radius:20px;z-index:0}.quick-replies--wrapper .quick-reply.cell--wrapper>div.animate-wrap{position:absolute;left:0;top:100%}.quick-replies--wrapper .quick-reply.highlight span.inner{text-decoration:underline}.quick-replies--wrapper .quick-reply.active{box-shadow:0 0 0 2px var(--black);z-index:1}.quick-replies--wrapper .quick-reply.hint{white-space:nowrap;cursor:pointer;color:var(--grayfg);border:1px dotted var(--grayfg)}.quick-replies--wrapper .quick-reply.hint.over,.quick-replies--wrapper .quick-reply.hint:hover{background:var(--primary);color:#fff}.quick-replies--wrapper .quick-reply.hint:hover{color:var(--grayfg);background:#fff}.quick-replies--wrapper .quick-reply.path-hint{background:var(--white);position:absolute;top:100%;left:0;z-index:100}.bubble-act-append-drop-zone{margin-top:var(--pad);padding:var(--pad);border-top:1px solid var(--graybg);margin-bottom:-100px;padding-bottom:100px}.bubble-act-append-drop-zone>div{margin-top:10px;margin-bottom:10px;background:var(--yellowbg);border:1px dashed var(--grayfg);height:10px;opacity:0}.bubble-act-append-drop-zone.over>div{opacity:1}.bubble-append-hint--wrapper{padding:0 var(--pad)}.bubble-append-hint--wrapper.empty{margin-top:var(--pad);padding-top:var(--pad);border-top:1px solid var(--graybg)}.bubble-append-hint--wrapper .bot{float:left}.bubble-append-hint--wrapper .user{float:right}.bubble-append-hint--wrapper span{border-radius:1em;padding:6px 14px;outline:none;display:inline-block;white-space:nowrap;cursor:pointer;color:var(--grayfg);border:1px dotted var(--grayfg)}.bubble-append-hint--wrapper span.over,.bubble-append-hint--wrapper span:hover{background:var(--primary);color:#fff}.bubble-append-hint--wrapper span:hover{color:var(--grayfg);background:#fff}.cell--wrapper{display:inline-block;position:relative}.cell--wrapper.active.editing{background:var(--white);color:var(--black);background:var(--yellowbg)}.cell--wrapper .inner{cursor:pointer;display:inline-block}.cell--wrapper .inner:empty:before{content:attr(data-placeholder);color:var(--grayfg)}.book-title.editing{padding:2px 8px;margin:-2px -8px;border-radius:4px;box-shadow:0 0 0 2px var(--black)}#root.preview ::-webkit-scrollbar{margin:0;width:0;height:0}#root.preview div.create-story,#root.preview div.main header{display:none}#root.preview div.stories{overflow:hidden!important}#root.preview div.stories>.story--wrapper{max-width:none}#root.preview div.stories>.story--wrapper:not(:first-child){display:none}#root.preview div.stories:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40vh;width:100%;z-index:100;background-image:linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff)}.bubble-group>.message:not(.after)+.message{padding-top:2px}.bubble-group .message,.bubble-group .message.before:first-child{padding-top:10px}.bubble-group.bot>.message div.bubble{border-top-left-radius:0;border-bottom-left-radius:0}.bubble-group.bot>.message:first-child div.bubble{border-top-left-radius:1em}.bubble-group.bot>.message:last-child div.bubble{border-bottom-left-radius:1em}.bubble-group.user>.message div.bubble{border-top-right-radius:0;border-bottom-right-radius:0}.bubble-group.user>.message:first-child div.bubble{border-top-right-radius:1em}.bubble-group.user>.message:last-child div.bubble{border-bottom-right-radius:1em}.bubble-group .droppable:not(.after)+.droppable .message{padding-top:2px}.bubble-group .droppable.before:first-child .message{padding-top:10px}.bubble-group.bot>.droppable div.bubble{border-top-left-radius:0;border-bottom-left-radius:0}.bubble-group.bot>.droppable:first-child div.bubble{border-top-left-radius:1em}.bubble-group.bot>.droppable:last-child div.bubble{border-bottom-left-radius:1em}.bubble-group.user>.droppable div.bubble{border-top-right-radius:0;border-bottom-right-radius:0}.bubble-group.user>.droppable:first-child div.bubble{border-top-right-radius:1em}.bubble-group.user>.droppable:last-child div.bubble{border-bottom-right-radius:1em}