* {
    box-sizing:border-box
}

html,body {
    margin:0;
    width:100%;
    height:100%;
    font:13px system-ui,sans-serif;
    background:#e7ebe1;
    color:#202a27
}

body {
    display:flex;
    flex-direction:column
}

header {
    display:flex;
    align-items:center;
    gap:24px;
    padding:16px 24px;
    background:#f5f4ee;
    border-bottom:1px solid #c4cebd
}

a {
    color:inherit
}

header a {
    text-decoration:none;
    font-weight:600
}

header span {
    color:#65716a
}

header button {
    margin-left:auto;
    cursor:pointer;
    padding:7px 12px;
    background:transparent;
    border:1px solid #b9c4b2;
    border-radius:4px;
    color:inherit
}

#wui {
    position:relative;
    flex:1;
    min-height:300px;
    overflow:auto;
    background-image:radial-gradient(#b8c2b4 .8px,transparent .8px);
    background-size:18px 18px
}

.embedded header {
    display:none
}

.wui-window {
    position:absolute;
    box-shadow:0 15px 40px #20352b26
}

.wui-canvas {
    display:block;
    width:100%;
    height:100%;
    touch-action:none
}

.wui-input {
    position:absolute;
    opacity:0;
    pointer-events:none;
    resize:none;
    padding:0;
    border:0;
    overflow:hidden;
    font:16px sans-serif
}

.wui-input.wui-composing {
    opacity:1;
    background:#fff;
    color:#111;
    outline:1px solid #7ba8dc
}

.wui-restore {
    position:relative;
    margin:8px;
    padding:8px 16px;
    z-index:2147483647
}

.frame-status {
    position:absolute;
    inset:0;
    display:grid;
    place-content:center;
    text-align:center;
    gap:16px;
    padding:30px;
    background:#e7ebe1;
    z-index:2147483646
}

.frame-status[hidden] {
    display:none
}

.frame-status p {
    margin:0;
    color:#65716a
}

.frame-status button {
    justify-self:center;
    padding:9px 20px;
    border:1px solid #202a27;
    border-radius:4px;
    background:#202a27;
    color:white;
    cursor:pointer
}


header { flex-wrap:wrap; }