* {
    box-sizing: border-box;
    /* cursor: cell; */
}

:root {
    font-family: Inter, system-ui, sans-serif;
    color: #302c2a;
    background: #f8f6f2;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    min-height: 100vh;
}

header {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 5%;
    background: #fff;
    border-bottom: 1px solid #eee8e2;
}

header h1 {
    margin: 0;
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -1.5px;
}

header h1 span {
    color: #ff765e;
}

nav {
    display: flex;
    align-items: center;
    gap: 9px;
}

button {
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid #e6ded7;
    border-radius: 9px;
    background: #fff;
    color: #49413c;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

button:hover {
    background: #f8f3ef;
    border-color: #d4c3b7;
}

button:active {
    transform: translateY(1px);
}

button:focus-visible,
input:focus-visible {
    outline: 2px solid #ff765e;
    outline-offset: 3px;
}

#brush,
#eraser {
    width: 100%;
    min-height: 44px;
    padding: 11px 14px;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #49413c;
}

#brush:hover,
#eraser:hover {
    background: #faf3ee;
    border-color: #f0e2d8;
}

#brush.active,
#eraser.active {
    color: #b94730;
    background: #ffede5;
    border-color: #ffc0ad;
    box-shadow: inset 3px 0 #ff765e;
    font-weight: 700;
}

#undo,
#redo,
#clear {
    background: #f3f0eb;
    border-color: #e5ded5;
    color: #5c554e;
}

#undo:hover,
#redo:hover,
#clear:hover {
    background: #e9e3db;
    border-color: #d5c9bd;
}

#export {
    min-height: 42px;
    padding: 10px 18px;
    color: #fff;
    background: #ff7057;
    border: 1px solid #ff7057;
    border-radius: 9px;
    box-shadow: 0 3px 0 #e7b5a5;
    font-weight: 700;
}

#export:hover {
    background: #ed5d45;
    border-color: #ed5d45;
    box-shadow: 0 3px 0 #dba08e;
}

#export:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #dba08e;
}

main {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 26px;
    padding: 28px 5%;
}

aside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: start;
    gap: 11px;
    padding: 20px 16px;
    background: #fff;
    border: 1px solid #eee7e0;
    border-radius: 16px;
    box-shadow: 0 3px 12px #49321a08;
}

aside h2 {
    margin: 0 0 9px;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -0.3px;
}

aside label {
    margin-top: 10px;
    color: #716860;
    font-size: 12px;
    font-weight: 700;
}

input[type="color"] {
    width: 100%;
    height: 42px;
    padding: 4px;
    border: 1px solid #e5ddd5;
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
}

input[type="range"] {
    width: 100%;
    margin: 5px 0;
    accent-color: #ff765e;
    cursor: pointer;
}

#line,
#rectangle,
#circle,
#arrow,
#text {
    min-height: 44px;
    padding: 11px 14px;
    text-align: left;
    background: #fff;
    border-color: #e8e1da;
}

#line.active,
#rectangle.active,
#circle.active,
#arrow.active,
#text.active {
    color: #b94730;
    background: #fff0e9;
    border-color: #ff9e86;
    box-shadow: inset 3px 0 #ff765e;
    font-weight: 700;
}

#workspace {
    min-width: 0;
    height: calc(100dvh - 132px);
    min-height: 360px;
    padding: 12px;
    background: #fff9f4;
    border: 2px solid #f3c8b8;
    border-radius: 18px;
    box-shadow: 0 4px 0 #efded3;
    overflow: hidden;
    position: relative;
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px dashed #e9c9bb;
    border-radius: 10px;
    touch-action: none;
}

@media (max-width: 760px) {
    header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding: 18px 4%;
    }

    nav {
        width: 100%;
        flex-wrap: wrap;
    }

    nav button {
        flex: 1;
        padding-inline: 10px;
    }

    main {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px 4%;
    }

    aside {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    aside h2 {
        grid-column: 1 / -1;
    }

    aside label {
        align-self: center;
    }

    #workspace {
        height: 60vh;
        min-height: 300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
    }
}

#pixel-art-link {
    position: relative;
    overflow: hidden;
    transition: background 0.15s steps(3), color 0.15s steps(3),
                transform 0.15s steps(3), box-shadow 0.15s steps(3);
}

#pixel-art-link:hover {
    background: #302c2a;
    color: #f8f6f2;
    box-shadow: 3px 3px 0 #ff765e;
    transform: translate(-2px, -2px);
}

#pixel-art-link:active {
    background: #ff765e;
    color: #fff;
    box-shadow: 1px 1px 0 #302c2a;
    transform: translate(1px, 1px);
}

#pixel-art-link:focus-visible {
    outline: 2px dashed #ff765e;
    outline-offset: 4px;
}