:root {
    --bg: #FDFCF9;
    --surface: #FFFFFF;
    --ink: #2D2A26;
    --muted: #4B5563;
    --accent: #7C5CBF;
    --accent-2: #6347A8;
    --border: #2D2A2614;
    --accent-soft: rgba(124,92,191,0.12);
    --accent-border: rgba(124,92,191,0.35);
    --note-bg: #FFFFFF;
    --body: 'Nunito Sans', -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: var(--bg); color: var(--ink); font-family: var(--body); }

body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; background: var(--bg); color: var(--ink); }

h1, h2, h3, h4, h5, h6 { font-family: var(--head); letter-spacing: -0.012em; }
a { text-decoration: none; }

.ks-nav {
    position: relative;
    letter-spacing: 0.01em;
    transition: color .2s;
}
.ks-nav::after {
    content: '';
    position: absolute;
    left: 0; bottom: -5px;
    width: 0; height: 2px;
    background: var(--accent);
    transition: width .22s ease;
}
.ks-nav:hover::after { width: 100%; }

.ks-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 8px 26px rgba(0,0,0,0.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ks-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(0,0,0,0.10);
    border-color: rgba(124,92,191,0.35);
}

.ks-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

.ks-field {
    background: var(--bg);
    border: 1px solid var(--border);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ks-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124,92,191,0.12);
}

.ks-submit {
    background: linear-gradient(100deg, var(--accent), var(--accent-2));
    color: #fff;
    transition: filter .2s ease, transform .15s ease;
}
.ks-submit:hover { filter: brightness(1.07); }
.ks-submit:active { transform: scale(0.99); }

.ks-note {
    background: #EDF1F5;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
}

.ks-burger:active { transform: scale(0.94); }

details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
details[open] summary { color: var(--accent); }