/* Neutral black surfaces. Only backgrounds are translucent, keeping text and paint swatches crisp. */
:root {
    --ebru-paper: #000;
    --ebru-surface: rgba(0, 0, 0, .88);
    --ebru-surface-compact: rgba(0, 0, 0, .84);
    --ebru-surface-dialog: rgba(0, 0, 0, .94);
    --ebru-control: rgba(255, 255, 255, .08);
    --ebru-control-hover: rgba(255, 255, 255, .14);
    --ebru-ink: #e0e0e0;
    --ebru-indigo: #bdbdbd;
    --ebru-madder: #ce8069;
    --ebru-line: rgba(255, 255, 255, .14);
    --ebru-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color-scheme: dark;
}
.ebru-language {
    position: fixed;
    top: 26px;
    left: 80px;
    z-index: 3100;
    display: flex;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--ebru-line);
    border-radius: 10px;
    background: var(--ebru-surface);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
}
.ebru-language button {
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ebru-ink);
    font: 600 12px var(--ebru-ui-font);
    cursor: pointer;
}
.ebru-language button[aria-pressed="true"] { background: var(--ebru-control-hover); color: #fff; }
.ebru-camera-status { max-width: calc(100vw - 40px); box-sizing: border-box; line-height: 1.5; }
.ebru-input-feedback { display: flex; align-items: center; gap: 8px; }
.ebru-ui-toggle {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--ebru-line);
    border-radius: 50%;
    background: var(--ebru-surface-compact);
    color: var(--ebru-ink);
    cursor: pointer;
    pointer-events: auto;
    transition: opacity 150ms ease;
}
.ebru-ui-toggle:hover { background: var(--ebru-surface); }
body.ebru-ui-hidden .dg.ac,
body.ebru-ui-hidden .ebru-info-button,
body.ebru-ui-hidden .ebru-language,
body.ebru-ui-hidden .ebru-info-overlay,
body.ebru-ui-hidden .ebru-color-palette,
body.ebru-ui-hidden .ebru-camera-button,
body.ebru-ui-hidden .ebru-camera-status,
body.ebru-ui-hidden .ebru-mouse-indicator { display: none !important; }
body.ebru-ui-hidden .ebru-ui-toggle { opacity: .35; }
body.ebru-ui-hidden .ebru-ui-toggle:hover,
body.ebru-ui-hidden .ebru-ui-toggle:focus-visible { opacity: .9; }
body.ebru-ui-hidden .ebru-ui-hide-mark { display: none; }
html[lang="tr"] .dg .property-name { width: 49%; font-size: 10px; }
html[lang="tr"] .dg .c { width: 51%; }
.dg {
    opacity: 1;
    color: var(--ebru-ink);
    font-family: var(--ebru-ui-font);
    text-shadow: none;
}
.dg.main {
    background: var(--ebru-surface);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .14);
}
.dg.main > ul { border-radius: 10px 10px 0 0; overflow: hidden; }
.dg li:not(.folder) { background: transparent; border-bottom-color: var(--ebru-line); }
.dg li.title, .dg .closed li.title { background: var(--ebru-control); color: var(--ebru-ink); text-shadow: none; position: relative; }
.dg li.title::before { content: '▾'; position: absolute; left: 5px; color: var(--ebru-indigo); }
.dg .closed li.title::before { content: '▸'; }
.dg .cr.number, .dg .cr.boolean, .dg .cr.function { border-left-color: rgba(255, 255, 255, .24); }
.dg .cr.function:hover, .dg .cr.boolean:hover { background: var(--ebru-control); }
.dg .c input[type="text"] { background: var(--ebru-control); color: var(--ebru-indigo); border-radius: 4px; }
.dg .c input[type="text"]:hover { background: var(--ebru-control-hover); }
.dg .c input[type="text"]:focus { background: var(--ebru-control-hover); color: var(--ebru-ink); }
.dg .cr.number input[type="text"] { color: var(--ebru-indigo); }
.dg .c select { color: var(--ebru-ink); background: var(--ebru-control); border: 1px solid var(--ebru-line); border-radius: 4px; font-family: var(--ebru-ui-font); }
.dg .c select option { background: #171717; color: var(--ebru-ink); }
.dg .c input[type="checkbox"] { accent-color: var(--ebru-indigo); }
.dg .c .slider { background: var(--ebru-control); border-radius: 4px; overflow: hidden; }
.dg .c .slider-fg { background: #888; border-radius: 4px; }
.dg .c .slider:hover { background: var(--ebru-control-hover); }
.dg .c .slider:hover .slider-fg { background: var(--ebru-indigo); }
.dg.main .close-button { background: var(--ebru-surface); color: var(--ebru-ink); border-radius: 0 0 8px 8px; text-shadow: none; }
.dg.main .close-button:hover { background: var(--ebru-surface-dialog); }

.ebru-info-button {
    background: var(--ebru-surface-compact);
    color: var(--ebru-indigo);
    border: 1px solid var(--ebru-line);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .14);
    font-family: var(--ebru-ui-font);
    font-weight: 600;
}
.ebru-info-button:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0, 0, 0, .16); }
.ebru-info-button:active { transform: translateY(1px); }
.ebru-info-overlay {
    background: rgba(0, 0, 0, .34);
    font-family: var(--ebru-ui-font);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.ebru-info-card {
    background: var(--ebru-surface-dialog);
    color: var(--ebru-ink);
    border: 1px solid var(--ebru-line);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    transform: none;
}
.ebru-info-card::before {
    background: #171717;
    color: var(--ebru-indigo);
    border: 1px solid var(--ebru-line);
    border-radius: 5px;
    box-shadow: none;
    transform: none;
    font-weight: 700;
}
.ebru-info-title { font-weight: 750; letter-spacing: -.045em; text-shadow: none; }
.ebru-info-bang { color: var(--ebru-madder); }
.ebru-info-lead {
    background: var(--ebru-control);
    color: var(--ebru-indigo);
    border: 1px solid var(--ebru-line);
    border-radius: 6px;
    transform: none;
    font-weight: 600;
    letter-spacing: .04em;
}
.ebru-info-step {
    background: var(--ebru-control);
    border: 1px solid var(--ebru-line);
    border-radius: 10px;
    box-shadow: none;
}
.ebru-info-step:nth-child(n) { background: var(--ebru-control); transform: none; }
.ebru-info-step strong { font-weight: 650; }
.ebru-info-step p { font-weight: 450; line-height: 1.5; }
.ebru-info-close { background: var(--ebru-control); color: var(--ebru-indigo); border: 1px solid var(--ebru-line); font-weight: 400; }
.ebru-info-close:hover { transform: scale(1.04); }
body .ebru-color-palette { background: var(--ebru-surface); color: var(--ebru-ink); border-color: var(--ebru-line); font-family: var(--ebru-ui-font); box-shadow: 0 4px 18px rgba(0, 0, 0, .22); }
.ebru-color-palette .ebru-color-swatch { border-color: #777; }
.ebru-color-palette .ebru-custom-color { border-color: #777; }
.ebru-color-palette .ebru-color-swatch.selected,
.ebru-color-palette .ebru-custom-color.selected { border-color: #e0e0e0; outline-color: var(--ebru-paper); }
button:focus-visible, .dg input:focus-visible, .dg select:focus-visible { outline: 2px solid var(--ebru-indigo); outline-offset: 2px; }
.ebru-point-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: none;
    pointer-events: none;
    z-index: 1000;
}
.ebru-cursor-ring, .ebru-cursor-ripple {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.ebru-cursor-ring {
    width: 22px;
    height: 22px;
    border: 1.5px solid #171717;
    box-shadow: 0 0 0 1.5px #fff;
    transition: width 100ms ease, height 100ms ease, background-color 100ms ease;
}
.ebru-cursor-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--ebru-paint-color, #c94b3c);
    box-shadow: 0 0 0 1px #fff;
}
.ebru-point-cursor.pinching .ebru-cursor-ring {
    width: 16px;
    height: 16px;
    border-color: var(--ebru-paint-color, #c94b3c);
    background: rgba(19, 87, 255, .22);
    background: color-mix(in srgb, var(--ebru-paint-color, #c94b3c) 22%, transparent);
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0, 0, 0, .5);
}
.ebru-cursor-ripple {
    width: 36px;
    height: 36px;
    border: 1px solid var(--ebru-paint-color, #c94b3c);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .65);
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) { .ebru-cursor-ring { transition: none; } }
@media (prefers-reduced-motion: reduce) { .ebru-info-overlay, .ebru-info-button, .ebru-info-close, .ebru-ui-toggle { animation: none; transition: none; } }
@media (prefers-reduced-transparency: reduce) {
    :root { --ebru-surface: #000; --ebru-surface-compact: #000; --ebru-surface-dialog: #000; }
    .ebru-info-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .8); }
}

/* Fit the drawing surface to the visible viewport, including phone safe areas. */
:root { --ebru-edge: 20px; --ebru-settings-top: 0px; }
html, body { overscroll-behavior: none; }
body { height: 100dvh; }
body > canvas { display: block; touch-action: none; }
.ebru-info-button { top: calc(20px + env(safe-area-inset-top)); left: calc(var(--ebru-edge) + env(safe-area-inset-left)); }
.ebru-language { top: calc(26px + env(safe-area-inset-top)); left: calc(var(--ebru-edge) + 60px + env(safe-area-inset-left)); }
.dg.ac { top: calc(var(--ebru-settings-top) + env(safe-area-inset-top)); z-index: 1100; }
.dg.main { max-width: calc(100vw - 2 * var(--ebru-edge) - env(safe-area-inset-left) - env(safe-area-inset-right)); border-radius: 10px; }
.dg.a { margin-right: calc(var(--ebru-edge) + env(safe-area-inset-right)); }
.dg.main > ul { max-height: calc(100dvh - var(--ebru-settings-top) - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; border-radius: 0 0 10px 10px; }
.dg.main .close-button { box-sizing: border-box; width: 100% !important; }
.dg.main .close-button.close-top { border-radius: 10px 10px 0 0; }
.dg .property-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dg.main > ul.closed, .dg ul.closed > li:not(.title) { display: none; }
.ebru-info-overlay { padding: calc(84px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
.ebru-info-card { width: min(720px, 100%); max-height: 100%; }
body .ebru-color-palette { left: calc(var(--ebru-edge) + env(safe-area-inset-left)); bottom: calc(var(--ebru-edge) + env(safe-area-inset-bottom)); max-width: calc(100vw - 2 * var(--ebru-edge) - env(safe-area-inset-left) - env(safe-area-inset-right)); }
.ebru-palette-toggle { width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font-family: inherit; cursor: pointer; }
.ebru-palette-toggle::after { content: '−'; float: right; margin-left: 8px; }
.ebru-color-palette.is-collapsed .ebru-palette-toggle { margin-bottom: 0; }
.ebru-color-palette.is-collapsed .ebru-palette-toggle::after { content: '+'; }
.ebru-color-palette.is-collapsed .ebru-palette-row { display: none; }
body .ebru-input-controls { right: calc(var(--ebru-edge) + env(safe-area-inset-right)); bottom: calc(var(--ebru-edge) + env(safe-area-inset-bottom)); }
.ebru-touch .ebru-mouse-indicator { display: none !important; }
.ebru-touch .ebru-ui-toggle { width: 44px; height: 44px; }
.ebru-touch .ebru-camera-button { min-height: 44px; }
.ebru-touch .dg.main .close-button { height: 44px; line-height: 44px; font-size: 13px; }
.ebru-touch .dg li:not(.folder):not(.title), .ebru-touch .dg li.title { height: 40px; line-height: 40px; }
.ebru-touch .dg .c input[type="text"], .ebru-touch .dg .c select { font-size: 16px; }
.ebru-touch .dg .c input[type="text"] { height: 30px; margin-top: 5px; box-sizing: border-box; }
.ebru-touch .dg .c .slider { height: 30px; margin-top: 5px; touch-action: none; }
.ebru-touch .dg .c input[type="checkbox"] { width: 18px; height: 18px; margin-top: 11px; }
.ebru-touch .ebru-palette-swatches { display: flex; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; touch-action: pan-x; }
.ebru-touch .ebru-color-swatch { flex: 0 0 44px; width: 44px; height: 44px; }
.ebru-touch .ebru-custom-color-picker { height: 44px; }
.ebru-touch .ebru-palette-actions button { min-height: 44px; }
.ebru-touch .ebru-palette-toggle { min-height: 32px; }

@media (max-width: 760px), (max-height: 500px) {
    :root { --ebru-edge: 12px; --ebru-settings-top: 72px; }
    .ebru-info-button { top: calc(12px + env(safe-area-inset-top)); width: 44px; height: 44px; }
    .ebru-language { top: calc(12px + env(safe-area-inset-top)); left: calc(68px + env(safe-area-inset-left)); }
    .ebru-language button { min-width: 38px; min-height: 36px; padding: 6px; }
    .ebru-info-overlay { padding-top: calc(72px + env(safe-area-inset-top)); }
    .ebru-info-card { padding: 20px 16px; border-radius: 12px; }
    .ebru-info-card::before { position: static; display: inline-block; margin-bottom: 14px; font-size: 10px; }
    .ebru-info-close { position: sticky; float: right; z-index: 1; width: 44px; height: 44px; top: 0; right: auto; margin: -10px -6px 0 6px; background: #171717; }
    .ebru-info-title { margin: 0 0 12px; font-size: clamp(26px, 6vw, 42px); line-height: 1.05; overflow-wrap: anywhere; }
    .ebru-info-lead { margin: 0 0 14px; font-size: 11px; line-height: 1.5; }
    .ebru-info-step { min-height: auto; padding: 12px; }
    .ebru-info-step strong { font-size: 16px; }
    .ebru-info-step p { font-size: 13px; }
    .dg.main .close-button { height: 44px; line-height: 44px; font-size: 13px; }
    .dg.main > ul { max-height: calc(100dvh - var(--ebru-settings-top) - var(--ebru-palette-height, 230px) - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    .dg li:not(.folder):not(.title) { height: 40px; line-height: 40px; font-size: 12px; }
    .dg li.title { height: 40px; line-height: 40px; }
    .dg .c input[type="text"], .dg .c select { font-size: 16px; }
    .dg .c input[type="text"] { height: 30px; margin-top: 5px; box-sizing: border-box; }
    .dg .c .slider { height: 30px; margin-top: 5px; touch-action: none; }
    .dg .c input[type="checkbox"] { width: 18px; height: 18px; margin-top: 11px; }
    body .ebru-color-palette { width: min(440px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); padding: 10px; }
    body .ebru-palette-swatches { display: flex; gap: 6px; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; touch-action: pan-x; }
    body .ebru-color-swatch { flex: 0 0 44px; width: 44px; height: 44px; }
    body .ebru-palette-toggle { min-height: 32px; font-size: 11px; }
    body .ebru-custom-color-picker { height: 44px; }
    body .ebru-palette-actions button { min-height: 44px; font-size: 12px; }
    body .ebru-input-controls { flex-direction: row-reverse; bottom: calc(var(--ebru-palette-height, 230px) + 24px + env(safe-area-inset-bottom)); max-width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
    body .ebru-ui-toggle { width: 44px; height: 44px; }
    body .ebru-camera-button { min-height: 44px; box-sizing: border-box; }
    body .ebru-camera-status { position: absolute !important; bottom: calc(100% + 8px); right: 0; width: max-content; max-width: calc(100vw - 24px); }
    body.ebru-ui-hidden .ebru-input-controls { bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
    .ebru-info-steps { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-height: 500px) and (min-width: 480px) {
    :root { --ebru-settings-top: 12px; }
    .ebru-info-overlay { padding-top: calc(64px + env(safe-area-inset-top)); }
    body .ebru-color-palette { width: min(340px, calc(100vw - 220px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
    body .ebru-input-controls { bottom: calc(12px + env(safe-area-inset-bottom)); }
    .dg.main > ul { max-height: calc(100dvh - var(--ebru-settings-top) - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}