:root {
    color-scheme:light;
    --bg:#faf9f6;
    --card:#fff;
    --ink:#191c23;
    --muted:#536074;
    --line:#d8dbe0;
    --accent:#f5c900;
    --error:#9e2020;
    --focus:#2159b5}
* {
    box-sizing:border-box}
body {
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
    line-height:1.6;
    font-size:16px}
header {
    min-height:84px;
    padding:20px max(24px,4vw);
    display:flex;
    align-items:center;
    gap:24px;
    border-bottom:1px solid var(--line);
    background:var(--card)}
.brand {
    font-weight:850;
    text-decoration:none;
    color:var(--ink);
    letter-spacing:-.04em}
.brand span {
    color:#766000;
    margin-left:4px}
.area-label {
    font-size:14px;
    color:var(--muted);
    flex:1}
main {
    max-width:1220px;
    margin:60px auto;
    padding:0 24px}
.intro {
    margin-bottom:32px}
.eyebrow {
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    margin:0 0 8px;
    color:var(--muted)}
h1 {
    font-size:clamp(28px,4vw,36px);
    line-height:1.2;
    margin:0 0 16px;
    letter-spacing:-.035em}
h2 {
    font-size:22px;
    line-height:1.3;
    margin:0 0 12px;
    overflow-wrap:anywhere}
h3 {
    font-size:20px}
p {
    margin:10px 0 16px}
.intro>p:last-child {
    color:var(--muted)}
.card {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:28px;
    box-shadow:0 3px 12px #19243a04}
.login {
    max-width:460px}
label {
    display:block;
    font-weight:600;
    margin:16px 0 6px}
label:first-child {
    margin-top:0}
input,textarea {
    width:100%;
    font:inherit;
    padding:12px;
    border:1px solid #8a929f;
    border-radius:7px;
    color:var(--ink);
    background:#fff}
textarea {
    resize:vertical}
button {
    min-height:46px;
    padding:11px 20px;
    font:inherit;
    font-weight:650;
    cursor:pointer;
    background:var(--accent);
    border:1px solid transparent;
    border-radius:7px;
    color:#171b22;
    transition:background .16s,border-color .16s}
button:hover {
    background:#e6bd00}
button.secondary {
    background:#fff;
    border-color:var(--line)}
button.secondary:hover {
    border-color:#6c7584;
    background:#f3f4f6}
button:disabled {
    opacity:.6;
    cursor:wait}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
    outline:3px solid var(--focus);
    outline-offset:3px}
form>button {
    width:100%;
    margin-top:24px}
.hint {
    color:var(--muted);
    font-size:14px;
    overflow-wrap:anywhere}
.login .hint {
    margin-bottom:0}
.session-line,.toolbar {
    display:flex;
    gap:16px;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px}
.session-line {
    font-size:14px;
    color:var(--muted)}
.workspace {
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:24px}
.workspace>aside {
    align-self:start;
    padding:20px}
.workspace>aside h2 {
    font-size:16px}
.client {
    display:block;
    width:100%;
    text-align:left;
    margin-top:12px;
    background:#fff4be;
    border:1px solid #ba9700;
    overflow-wrap:anywhere}
.client small {
    display:block;
    font-weight:400;
    font-size:13px;
    color:#4c4c45}
.toolbar {
    margin-top:4px}
.toolbar h2 {
    margin:0}
.toolbar .hint {
    margin:4px 0 0}
nav {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px}
nav [aria-current=page] {
    border-color:#292d33;
    background:#292d33;
    color:white}
dl {
    display:grid;
    grid-template-columns:minmax(110px,1fr) 2fr;
    gap:10px;
    margin:24px 0}
dt {
    color:var(--muted);
    font-size:14px}
dd {
    margin:0;
    overflow-wrap:anywhere;
    font-weight:600}
.actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:20px}
.actions button {
    flex:1}
.entry {
    border-top:1px solid var(--line);
    padding:18px 0;
    overflow-wrap:anywhere}
.entry p {
    margin:6px 0}
.entry small {
    color:var(--muted)}
.entry button {
    margin-top:10px}
#change {
    margin-top:10px}
#change-form {
    border-top:1px solid var(--line);
    margin-top:24px;
    padding-top:8px}
#feedback {
    border:1px solid #93b2a1;
    background:#f0faf4;
    color:#214c34;
    padding:16px;
    border-radius:8px;
    overflow-wrap:anywhere}
#feedback.error {
    border-color:#d49b9b;
    background:#fff5f4;
    color:var(--error)}
footer {
    margin:36px 0;
    color:var(--muted);
    font-size:13px}
[hidden] {
    display:none!important}
@media(max-width:760px) {
    header {
    flex-wrap:wrap;
    gap:10px;
    padding:18px 20px}
.area-label {
    font-size:12px}
main {
    margin:32px auto;
    padding:0 18px}
.workspace {
    grid-template-columns:1fr}
.card {
    padding:22px}
.session-line {
    align-items:start;
    flex-direction:column;
    gap:4px}
.toolbar {
    align-items:start}
.actions {
    flex-direction:column}
dl {
    grid-template-columns:1fr;
    gap:4px}
dd {
    margin-bottom:10px}
nav button {
    padding:10px 14px}
.workspace>aside h2 {
    margin-bottom:4px}
}
@media(prefers-reduced-motion:reduce) {
    * {
    transition:none!important}
}