.demo{--main-bg_0: #f8f7f4;--main-bg_1: #ebeae8;--interactive-bg_0: #111;--interactive-bg_0_hover: var(--color-blue-2);--interactive-bg_1: #fff;--interactive-bg_1_hover: var(--color-blue-2);position:relative;width:min(28rem,100%);height:36rem;display:flex;margin:auto;flex-shrink:0;flex-direction:column;border-radius:1rem;border:1px solid rgb(0,0,0,.15);border-bottom-color:#00000040;box-shadow:0 1px 2px #0000001a;font-size:.875rem;overflow:hidden;.start-demo-guide{position:absolute;bottom:7rem;right:6.5rem;z-index:1;transform:rotate(-7deg);color:var(--color-purple-2);font-size:2rem;font-family:Caveat,cursive;.arrow{position:absolute;top:.75rem;right:-5rem;width:55px;height:64px;background:url("data:image/svg+xml,%3csvg%20width='246'%20height='287'%20viewBox='0%200%20246%20287'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_2102_2)'%3e%3cpath%20d='M156.25%20265.656C157.94%20265.444%20158.573%20265.656%20159.207%20265.444C197.847%20242.174%20224.029%20209.172%20233.953%20164.747C236.487%20153.535%20236.065%20141.899%20233.109%20130.476C226.985%20105.936%20206.504%2089.0121%20181.377%2087.5312C168.286%2086.685%20155.617%2088.1659%20144.215%2095.3586C143.37%20101.493%20142.737%20107.628%20141.47%20113.34C139.359%20122.648%20134.502%20130.264%20125.845%20134.918C119.51%20138.515%20113.176%20138.515%20109.798%20135.13C105.363%20130.687%20105.364%20124.764%20108.108%20119.898C111.909%20113.129%20116.554%20106.782%20121.411%20100.859C124.578%2097.051%20128.801%2093.8777%20132.602%2090.7045C129.012%2066.7994%20106.419%2056.645%2079.3921%2066.5878C78.5475%2069.9726%2077.7029%2073.569%2076.6472%2076.9537C72.4242%2089.4352%2064.6117%2098.9549%2051.9427%20103.397C47.0863%20105.09%2041.8075%20105.724%2037.5845%20101.282C34.4173%2097.8972%2034.4173%2091.9738%2037.7957%2086.0504C43.2856%2076.7422%2051.5204%2070.1842%2060.3887%2064.4723C63.5559%2062.5684%2066.7232%2060.6644%2069.8904%2058.972C65.6674%2021.9508%2032.517%20-4.28131%200%2010.5272C0.211149%207.77702%20-1.29001e-05%205.44997%200.844584%204.18067C1.90033%202.69982%204.22297%201.85363%206.12332%201.43053C24.071%20-1.95427%2040.7518%200.161227%2054.4765%2013.2773C64.8228%2023.0086%2071.7908%2034.8554%2076.4361%2048.3946C77.0695%2050.2985%2077.703%2052.2024%2078.5476%2054.1064C78.5476%2054.3179%2078.9698%2054.5295%2079.8144%2055.1641C81.7147%2054.9526%2084.0374%2054.9526%2086.36%2054.5295C114.654%2050.087%20129.434%2057.7027%20142.526%2084.1464C145.06%2083.3002%20148.016%2082.454%20150.761%2081.3963C167.019%2075.896%20183.278%2075.4729%20199.747%2080.9732C226.563%2089.8583%20243.877%20112.917%20245.778%20142.111C246.833%20157.977%20244.089%20173.209%20238.388%20188.017C224.452%20223.769%20201.648%20251.905%20167.441%20270.31C165.752%20271.368%20163.852%20272.214%20162.163%20273.272C161.951%20273.483%20161.74%20273.906%20161.107%20275.176C168.286%20276.868%20175.043%20276.233%20181.8%20275.81C188.345%20275.599%20195.102%20274.964%20202.281%20274.541C201.648%20280.041%20198.691%20282.157%20195.102%20283.426C190.879%20284.695%20186.656%20286.388%20182.433%20286.599C171.031%20287.023%20159.418%20287.234%20147.804%20286.599C138.725%20285.965%20136.191%20281.099%20140.203%20273.695C148.86%20258.04%20157.728%20242.386%20166.597%20226.731C168.075%20224.192%20169.975%20222.077%20172.298%20219.115C176.31%20223.769%20174.62%20227.154%20173.142%20230.327C167.23%20241.751%20161.951%20253.175%20156.25%20265.656ZM43.919%2094.9355C58.4883%2093.0315%2067.5677%2083.7233%2068.2012%2070.6073C58.4883%2076.9537%2049.1978%2082.6656%2043.919%2094.9355ZM115.288%20127.726C127.745%20124.764%20133.658%20116.302%20132.391%20103.397C124.367%20110.167%20117.399%20116.514%20115.288%20127.726Z'%20fill='%239A76C8'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_2102_2'%3e%3crect%20width='246'%20height='287'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");background-size:cover;transform:rotate(-25deg)}}.log{--grid-color: rgba(0, 0, 0, .05);padding:.75rem;display:flex;flex-direction:column;background:var(--main-bg_1);gap:1rem;overflow:scroll;scroll-behavior:smooth;overflow-anchor:none;height:100%;position:relative;background-image:repeating-linear-gradient(22.5deg,transparent,transparent 2px,rgba(75,85,99,.06) 2px,rgba(75,85,99,.06) 3px,transparent 3px,transparent 8px),repeating-linear-gradient(67.5deg,transparent,transparent 2px,rgba(107,114,128,.05) 2px,rgba(107,114,128,.05) 3px,transparent 3px,transparent 8px),repeating-linear-gradient(112.5deg,transparent,transparent 2px,rgba(55,65,81,.04) 2px,rgba(55,65,81,.04) 3px,transparent 3px,transparent 8px),repeating-linear-gradient(157.5deg,transparent,transparent 2px,rgba(31,41,55,.03) 2px,rgba(31,41,55,.03) 3px,transparent 3px,transparent 8px)}&:after{position:absolute;bottom:65px;left:0;right:0;background:linear-gradient(transparent,transparent,rgba(0,0,0,.05));height:.25rem;content:""}.interaction{padding:.75rem;background:var(--main-bg_0);border-top:1px solid rgb(0,0,0,.15);transition:all .2s;height:65px;display:flex;flex-shrink:0;align-items:center}.chat-bubble_row{display:flex;flex-direction:row;width:100%;gap:.5rem;&:has(.chat-bubble_right){align-items:flex-end;justify-content:flex-end}&:has(.chat-bubble_left){align-items:center}.avatar{background:url(/_astro/avatar.CgKanPR-.png);background-size:cover;width:1.5rem;height:1.5rem;border-radius:1rem;display:flex;align-items:center;justify-content:center;justify-self:flex-end;align-self:flex-end;flex-shrink:0;font-size:var(--font-size-small);font-weight:700;color:var(--color-purple-1);box-shadow:inset 0 0 0 1px var(--color-gray-11),0 1px 1px #0000001a;border:1px solid rgba(0,0,0,.1)}.chat-bubble{display:flex;flex-direction:row;gap:.5rem;align-items:center;width:fit-content;max-width:95%;font-weight:500;&.chat-bubble_left{font-weight:700;background:#0000001a;padding:.5rem .75rem;margin-left:-.75rem;border-radius:0 .75rem .75rem 0;&.success{background:#27ae6033;color:var(--color-green-0);.success-icon{width:1.25rem;height:1.25rem;flex-shrink:0;background:var(--color-green-1);border-radius:.75rem;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:inset 0 0 0 2px var(--color-green-5),0 0 0 2px #27ae6033;.icon{color:var(--color-green-5)}}}}&.chat-bubble_right{display:flex;background:linear-gradient(var(--color-gray-11),var(--color-gray-9));border:1px solid var(--color-gray-6);padding:.5rem .75rem;border-radius:.75rem;box-shadow:inset 0 0 0 1px #ffffffbf,0 1px 1px #0000000d;border-bottom-right-radius:0;align-self:flex-end;justify-self:flex-end;margin-left:0}}}.entry{display:flex;flex-direction:column;gap:.5rem;opacity:1;transition:all .5s;will-change:transform}.entry:first-child:not(:has(.tile.selected)):not(:has(.completed-step)){@starting-style{opacity:0}}h3{font-size:1rem;padding-left:.5ch}.options{display:flex;flex-direction:column;gap:.375rem}.tile{position:relative;background:var(--interactive-bg_1);border:1px solid var(--color-gray-7);padding:.75rem;border-radius:.75rem;transition:all .2s;display:flex;flex-direction:row;justify-content:space-between;align-items:center;will-change:transform;&.bare{border:0;padding:0;background:transparent}.tile-row{display:flex;flex-direction:row;align-items:flex-start;gap:.75rem}&:is(a):active{transform:translateY(.125rem)}.tile-details{display:flex;flex-direction:column;gap:.25rem;width:100%}header{display:flex;flex-direction:row;align-items:center;gap:.5rem;h4{font-size:1rem}}.subdued{color:var(--color-gray-4)}.badge{background:var(--color-blue-4);color:var(--u-color_text);border-radius:1rem;width:min-content;white-space:nowrap;border:0;font-size:.675rem;line-height:1;height:auto;height:1.125rem;display:flex;align-items:center;padding:0 .5rem;padding-top:1px;margin-top:-2px;font-family:var(--font-monospace);font-weight:700;text-transform:uppercase;transition:all .2s}.items{display:flex;flex-direction:row;flex-wrap:wrap;gap:.125rem;.item:after{content:",";margin-right:.5ch}.item:last-child:after{content:""}.item-details{margin-left:.5ch}}.chevron{flex-shrink:0;background:var(--color-gray-8);line-height:1;padding-left:1px;width:1.25rem;height:1.25rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;transition:all .2s}&.disabled{opacity:.75}&.focused{opacity:1;border:1px solid var(--color-blue-2);box-shadow:inset 0 0 0 1px var(--color-blue-2),0 0 0 3px #5595f433}&.selected{opacity:1;border:1px solid var(--color-blue-2);box-shadow:inset 0 0 0 1px var(--color-blue-2),0 0 0 3px #5595f433}.selected-icon{position:absolute;top:-.625rem;left:-.625rem;width:1.25rem;height:1.25rem;background:var(--color-blue-2);border-radius:.75rem;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:inset 0 0 0 2px var(--color-blue-5),0 0 0 2px #5595f433;.icon{color:var(--color-blue-5)}}&:is(a):not(.focused),&:is(a):not(.selected){border-bottom-color:var(--color-gray-5)}&:is(a):hover{text-decoration:none}&:is(a):hover:not(.focused),&:is(a):hover:not(.selected){background:var(--color-gray-10);border-color:var(--color-blue-3);box-shadow:inset 0 0 0 1px #ffffffbf}}.faux-text-field{background:var(--color-gray-11);width:100%;border:1px solid var(--color-gray-6);border-top:1px solid var(--color-gray-5);box-shadow:inset 0 1px 1px #0000000d;padding:0 .75rem;display:flex;align-items:center;height:2.5rem;font-size:1rem;border-radius:.5rem;&:focus{outline:none;border:1px solid var(--color-blue-2);box-shadow:inset 0 0 0 1px var(--color-blue-2),0 0 0 3px #5595f433}}.code-input{display:flex;flex-direction:row;gap:.5rem;justify-content:center;padding:.5rem 0}.code-digit{background:var(--color-gray-11);border:1px solid var(--color-gray-6);border-top:1px solid var(--color-gray-5);box-shadow:inset 0 1px 1px #0000000d;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:600;font-family:var(--font-monospace);border-radius:.5rem;color:var(--color-gray-0)}.radio{padding-top:.125rem}.rating-slider{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:var(--color-gray-11);border:1px solid var(--color-gray-7);border-bottom-color:var(--color-gray-5);border-radius:.75rem;.rating-label{font-weight:600;font-size:.875rem;color:var(--color-gray-0)}.slider{-webkit-appearance:none;appearance:none;width:100%;height:.5rem;border-radius:.25rem;background:var(--color-blue-2);border:1px solid var(--color-blue-1);outline:none;transition:all .2s;&::-webkit-slider-thumb,&::-moz-range-thumb{-webkit-appearance:none;appearance:none;width:1.5rem;height:1.5rem;border-radius:1rem;background:var(--color-gray-11);border:1px solid var(--color-blue-2);box-shadow:0 2px 4px #00000040;cursor:pointer}}.rating-value{display:flex;flex-direction:column;gap:.25rem;.rating-name{font-weight:700;font-size:1rem}.rating-desc{font-size:var(--font-size-small)}}}.controls-setup{display:flex;flex-direction:column;gap:.75rem;.approval-checkbox{padding:.75rem;label{display:flex;align-items:flex-start;gap:.5rem;input[type=checkbox]{margin-top:.25rem;flex-shrink:0;width:1rem;height:1rem;cursor:pointer}}}.notification-methods{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;padding-top:0;.notification-label{font-weight:600;font-size:var(--font-size-medium);color:var(--color-gray-0)}}}.step_awaiting-input{width:100%;display:flex;flex-direction:row;align-items:center;gap:0;.faux-text-field{border-bottom-right-radius:0;border-top-right-radius:0}.button{height:2.5rem;width:2.5rem;border-radius:.5rem;border-bottom-left-radius:0;border-top-left-radius:0;.icon{stroke-width:1px;stroke:var(--color-gray-11)}}}.actions{width:100%;display:flex;justify-content:flex-end}.loading,.instruction{display:flex;height:2.5rem;align-items:center;justify-content:center}.status-banner.status-banner_working,.status-banner.status-banner_info{background:var(--color-gray-11);border:1px solid rgba(0,0,0,.1)}.status-banner.status-banner_good,.status-indicator{border:2px solid var(--color-gray-11)}.time-passage{display:flex;align-items:center;justify-content:center;text-align:center;padding:1.5rem 0;margin:.5rem 0;position:relative;color:var(--color-gray-4);font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;&:before,&:after{content:"";flex:1;height:1px;background:linear-gradient(rgba(0,0,0,.15) 20%,rgba(0,0,0,.15) 80%,transparent)}&:before{margin-right:1rem}&:after{margin-left:1rem}}.request-comment-input{width:100%;background:var(--color-gray-11);border:1px solid var(--color-gray-6);border-top-color:var(--color-gray-5);border-radius:.5rem;padding:.5rem .625rem;font-size:.875rem;transition:all .2s;box-shadow:inset 0 1px 1px #0000000d;&::placeholder{color:var(--color-gray-4)}&:focus{outline:none;border-color:var(--color-blue-2);box-shadow:inset 0 0 0 1px var(--color-blue-2),0 0 0 3px #5595f433}&:disabled{opacity:.6;cursor:not-allowed}}.request-actions{display:flex;gap:.5rem;justify-content:flex-end}.faded-choice{opacity:.3}.request-actions .button.disabled{opacity:1}.faded-choice .button.disabled{opacity:.3}.tile-with-response{position:relative;.response-icon{position:absolute;top:-.625rem;left:-.625rem;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;border-radius:.75rem;z-index:1;line-height:1;box-shadow:inset 0 0 0 2px var(--color-gray-11),0 0 0 2px #0000001a;.icon{color:var(--color-gray-11)}}.response-icon.approve-icon{background:var(--color-green-1)}.response-icon.reject-icon{background:var(--color-pink-1);.icon{font-size:.675rem;path{stroke-width:2px}}}}}@media only screen and (max-width:512px){.demo{&:after{bottom:-58px}.interaction{padding:.5rem;height:58px}.faux-text-field{padding:.5rem;line-height:1.2;font-size:var(--font-size-small)}.chat-bubble_row{gap:.25rem;.chat-bubble{font-size:var(--font-size-small);&.chat-bubble_right,&.chat-bubble_left{padding:.25rem .5rem}}}.log{padding:.5rem}}.demo .tile{padding:.5rem;font-size:var(--font-size-small);.tile-row{gap:.25rem}.tile-details{gap:0}.badge{font-size:.5rem;font-weight:600;height:.75rem;padding:0 .25rem;margin-top:1px}header{gap:.25rem;h4{font-size:var(--font-size-medium)}}}}.content-request-details{display:flex;gap:1rem;align-items:flex-start}.content-poster{width:72px;height:108px;object-fit:cover;border-radius:.25rem;flex-shrink:0}.content-info{flex:1;display:flex;flex-direction:column;gap:.5rem;min-height:90px}.content-info .text-field{width:100%}.content-info .text-field textarea::placeholder{color:var(--u-color_text_subdued)}.request-comment-input.disabled{flex:1;min-height:0;padding:.5rem;border:1px solid var(--base-border);border-radius:4px;background-color:var(--base-background);cursor:not-allowed;opacity:.6;display:flex;align-items:flex-start}.request-comment-input.disabled .placeholder-text{color:var(--base-color-medium);font-style:italic}@media only screen and (max-width:646px){.demo .start-demo-guide{font-size:1.5rem}}