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

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

    background:#ddd;

}

#container{

    position:relative;

    width:100vw;
    height:100vh;

    overflow:hidden;

}

#ggb-element{

    position:absolute;
    z-index:1;
    inset:0;

    /* Keep touch and pen input in Pointer Events instead of browser panning/zooming. */
    touch-action:none;

}

#imageOverlayCanvas{

    position:absolute;
    z-index:2;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    touch-action:none;

}

.app-title{

    position:absolute;
    z-index:6;
    bottom:max(16px, env(safe-area-inset-bottom));
    left:max(16px, env(safe-area-inset-left));
    padding:7px 11px 7px 34px;
    border:1px solid rgba(15, 23, 42, .16);
    border-radius:999px;
    background:rgba(226, 232, 240, .94);
    backdrop-filter:blur(10px);
    box-shadow:0 6px 16px rgba(15, 23, 42, .14);
    color:#334155;
    font:700 13px/1.2 system-ui, sans-serif;
    letter-spacing:.03em;
    pointer-events:none;
    user-select:none;
    opacity:.96;

}
.app-title{
    background:url('../../../Logo.png') left center/20px 20px no-repeat;
    padding-left:32px;
}

.app-title::before{

    content:"";
    position:absolute;
    top:50%;
    left:10px;
    width:8px;
    height:8px;
    border:1.5px solid #334155;
    border-radius:50%;
    transform:translateY(-50%);

}

.app-title::after{

    content:"VIRTUAL GEOMETRY LAB";
    display:block;
    margin-top:2px;
    color:#475569;
    font:600 7px/1.1 system-ui, sans-serif;
    letter-spacing:.16em;
    opacity:.9;

}

.simulation-guide-button{

    position:absolute;
    z-index:12;
    top:max(20px, env(safe-area-inset-top));
    left:max(20px, env(safe-area-inset-left));
    padding:10px 14px;
    border:1px solid rgba(255, 255, 255, .45);
    border-radius:9px;
    background:linear-gradient(135deg, #1d4ed8, #1e40af);
    box-shadow:0 8px 20px rgba(15, 23, 42, .25);
    color:#fff;
    cursor:pointer;
    font:700 14px/1.2 system-ui, sans-serif;

}

.simulation-guide-button:hover,
.simulation-guide-button:focus-visible{

    background:linear-gradient(135deg, #2563eb, #1d4ed8);
    outline:3px solid rgba(96, 165, 250, .55);
    outline-offset:2px;

}

.mobile-toolbox-toggle{

    position:absolute;
    z-index:12;
    top:max(20px, env(safe-area-inset-top));
    right:max(20px, env(safe-area-inset-right));
    display:grid;
    width:44px;
    height:44px;
    place-content:center;
    gap:5px;
    border:1px solid rgba(255, 255, 255, .45);
    border-radius:9px;
    background:linear-gradient(135deg, #1d4ed8, #1e40af);
    box-shadow:0 8px 20px rgba(15, 23, 42, .25);
    cursor:pointer;

}

.mobile-toolbox-toggle span:not(.sr-only){

    display:block;
    width:21px;
    height:2px;
    border-radius:2px;
    background:#fff;

}

.mobile-toolbox-toggle:hover,
.mobile-toolbox-toggle:focus-visible{

    background:linear-gradient(135deg, #2563eb, #1d4ed8);
    outline:3px solid rgba(96, 165, 250, .55);
    outline-offset:2px;

}

.sr-only{

    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;

}

.simulation-guide{

    position:absolute;
    z-index:20;
    top:50%;
    left:50%;
    width:min(760px, calc(100vw - 32px));
    max-height:min(82dvh, 820px);
    overflow:hidden;
    border:1px solid rgba(30, 41, 59, .2);
    border-radius:14px;
    background:#fff;
    box-shadow:0 24px 60px rgba(15, 23, 42, .38);
    color:#1e293b;
    font:15px/1.55 system-ui, sans-serif;
    transform:translate(-50%, -50%);

}

.simulation-guide[hidden]{ display:none; }

.simulation-guide__header{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:15px 18px;
    border-bottom:1px solid #e2e8f0;
    background:linear-gradient(135deg, #eff6ff, #dbeafe);

}

.simulation-guide__header h1{

    color:#1e3a8a;
    font-size:21px;
    line-height:1.2;

}

.simulation-guide__close{

    display:grid;
    width:32px;
    height:32px;
    place-items:center;
    flex:0 0 auto;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#334155;
    cursor:pointer;
    font:28px/1 system-ui, sans-serif;

}

.simulation-guide__close:hover,
.simulation-guide__close:focus-visible{

    background:#bfdbfe;
    outline:2px solid #2563eb;
    outline-offset:1px;

}

.simulation-guide__content{

    max-height:calc(min(82dvh, 820px) - 65px);
    overflow-y:auto;
    padding:18px 22px 24px;

}

.simulation-guide__content h2{

    margin:22px 0 7px;
    color:#1e3a8a;
    font-size:17px;
    line-height:1.3;

}

.simulation-guide__content h2:first-child{ margin-top:0; }
.simulation-guide__content h3{ margin:13px 0 4px; color:#334155; font-size:15px; }
.simulation-guide__content p{ margin:7px 0; }
.simulation-guide__content ul,
.simulation-guide__content ol{ margin:7px 0 7px 22px; }
.simulation-guide__content li + li{ margin-top:4px; }

@media (max-width:700px){

    .simulation-guide-button{

        top:max(12px, env(safe-area-inset-top));
        right:auto;
        left:max(12px, env(safe-area-inset-left));

    }

    .simulation-guide{

        width:calc(100vw - 24px);
        max-height:calc(100dvh - 24px);

    }

    .simulation-guide__content{

        max-height:calc(100dvh - 89px);
        padding:16px;

    }

}

#inkCanvas{

    position:absolute;
    z-index:3;
    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

    touch-action:none;

}

#eraserGuide{

    position:absolute;
    z-index:5;
    display:none;
    border:2px solid #ea580c;
    border-radius:50%;
    background:rgba(249, 115, 22, .06);
    pointer-events:none;

}

#textCursorGuide{

    position:absolute;
    z-index:5;
    display:none;
    width:2px;
    background:#0f172a;
    box-shadow:0 0 0 1px rgba(255, 255, 255, .8);
    pointer-events:none;

}

#textCursorGuide::before,
#textCursorGuide::after{

    content:"";
    position:absolute;
    left:50%;
    width:10px;
    height:2px;
    border-radius:2px;
    background:#0f172a;
    transform:translateX(-50%);

}

#textCursorGuide::before{ top:0; }
#textCursorGuide::after{ bottom:0; }

.ink-tray{

    position:absolute;
    z-index:10;
    top:72px;
    right:20px;
    bottom:20px;
    left:auto;
    width:290px;
    max-height:calc(100dvh - 92px);
    overflow-y:auto;
    padding:10px;
    border:1px solid rgba(22, 27, 34, .18);
    border-radius:12px;
    background:rgba(255, 255, 255, .96);
    box-shadow:0 8px 24px rgba(0, 0, 0, .18);
    color:#1f2937;
    font:14px/1.25 system-ui, sans-serif;
    visibility:hidden;
    pointer-events:none;
    transform:translateX(calc(100% + 24px));
    transition:transform .2s ease, visibility .2s ease;

}

.ink-tray.is-mobile-open{

    visibility:visible;
    pointer-events:auto;
    transform:translateX(0);

}

.ink-tray.is-minimized #trayContent{ display:none; }

.ink-tray.is-maximized{

    top:12px !important;
    right:12px !important;
    bottom:12px;
    left:12px !important;
    width:auto;
    max-height:none;
    overflow-y:auto;

}

@media (max-width:700px){

    .mobile-toolbox-toggle{

        top:max(12px, env(safe-area-inset-top));
        right:max(12px, env(safe-area-inset-right));
        left:auto;

    }

    .ink-tray{

        top:max(64px, calc(env(safe-area-inset-top) + 52px)) !important;
        right:max(12px, env(safe-area-inset-right)) !important;
        bottom:12px;
        left:auto !important;
        width:min(290px, calc(100vw - 52px));
        max-height:none;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        visibility:hidden;
        pointer-events:none;
        transform:translateX(calc(100% + 20px));
        transition:transform .2s ease, visibility .2s ease;

    }

    .ink-tray.is-maximized{

        top:max(64px, calc(env(safe-area-inset-top) + 52px)) !important;
        right:max(12px, env(safe-area-inset-right)) !important;
        bottom:12px;
        left:auto !important;
        width:min(290px, calc(100vw - 52px));

    }

    .tray-handle{

        cursor:default;

    }

    .tray-handle:active{ cursor:default; }

    .tray-window-button{

        display:none;

    }

    .tool-button,
    .export-button,
    .tray-window-button{

        min-height:44px;

    }

    .tray-window-button{ min-width:44px; }

}

.tray-handle{

    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:-10px -10px 10px;
    padding:10px 12px;
    border-radius:12px 12px 0 0;
    background:#f3f4f6;
    cursor:default;
    font-weight:700;
    touch-action:none;
    user-select:none;

}

.tray-handle:active{ cursor:default; }

.tray-handle > span[aria-hidden="true"]{ display:none; }

.tray-actions{

    display:none;
    gap:4px;

}

.tray-window-button{

    display:grid;
    width:28px;
    height:28px;
    place-items:center;
    border:1px solid #cbd5e1;
    border-radius:5px;
    background:#fff;
    color:#334155;
    cursor:pointer;
    font:18px/1 system-ui, sans-serif;

}

.tray-window-button:hover,
.tray-window-button:focus-visible{

    border-color:#2563eb;
    color:#1d4ed8;

}

.tool-toggle{

    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:6px;
    margin-bottom:12px;

}

.tool-button{

    padding:7px 8px;
    border:1px solid #cbd5e1;
    border-radius:7px;
    background:#fff;
    color:#334155;
    cursor:pointer;
    font:inherit;

}

.image-upload-button{

    width:100%;
    margin-top:8px;

}

.tool-button.active{

    border-color:#2563eb;
    background:#2563eb;
    color:#fff;

}

.grid-button{

    width:100%;
    margin-bottom:12px;

}

.text-button{

    width:100%;
    margin-top:14px;

}

.tool-control{

    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:8px;
    margin-top:10px;
    color:#475569;

}

.tool-control input[type="range"]{ grid-column:1 / -1; width:100%; }
.tool-control input[type="color"]{ width:32px; height:26px; padding:1px; cursor:pointer; }
.tool-control select{ border:1px solid #cbd5e1; border-radius:6px; padding:6px 8px; color:#0f172a; background:#fff; }
.tool-control output{ color:#0f172a; font-weight:700; }
.is-hidden{ display:none; }

.export-button{

    width:100%;
    margin-top:14px;
    padding:9px 10px;
    border:0;
    border-radius:7px;
    background:#0f766e;
    color:#fff;
    cursor:pointer;
    font:inherit;
    font-weight:700;

}

.clear-button{

    width:100%;
    margin-top:14px;
    padding:9px 10px;
    border:1px solid #dc2626;
    border-radius:7px;
    background:#fff;
    color:#b91c1c;
    cursor:pointer;
    font:inherit;
    font-weight:700;

}

.clear-button:hover,
.clear-button:focus-visible{

    background:#fef2f2;
    border-color:#b91c1c;

}

.export-button:hover{ background:#115e59; }

.text-control{

    display:grid;
    gap:5px;
    margin-top:12px;
    color:#475569;

}

.text-control input{

    width:100%;
    padding:7px 8px;
    border:1px solid #cbd5e1;
    border-radius:7px;
    color:#0f172a;
    font:inherit;

}