:root{--color-bg-main: oklch(.23 .01 268.24);--color-bg-panel: oklch(.21 .01 258.37);--color-bg-surface-1: oklch(.25 .02 264.15);--color-bg-surface-2: oklch(.3 .03 264);--color-bg-inverse-panel: oklch(.8 .01 258.37);--color-bg-dropdown: oklch(.8 .03 264);--color-text-primary: white;--color-text-secondary: oklch(.85 .02 266.25);--color-text-muted: oklch(.55 0 0);--color-text-inverse-primary: oklch(0 0 0);--color-text-inverse-secondary: oklch(.15 .02 266.25);--color-primary: oklch(.6 .15 266.25);--color-accent-green: oklch(.6 .14 156.03);--color-warning: oklch(.63 .26 29.23);--color-border: oklch(.3 .02 264.15);--color-border-hover: oklch(.5 .1 264.15)}html,body{width:100vw;height:100vh;padding:0;margin:0;color:var(--color-text-primary);background-color:var(--color-bg-main);font-family:Inter,Roboto,Noto Sans TC,Noto Sans JP,sans-serif;font-optical-sizing:auto;font-weight:400;font-style:normal;font-variation-settings:"wdth" 100}body{font-family:inherit}h1{margin-block-start:0}button:disabled{filter:brightness(.5)}pre{font-family:inherit;margin-block:0 .25rem;line-height:1.4}.tab-item{background-color:var(--color-bg-surface-2);height:6vh}.btn-text-tab{background-color:transparent;border:none;font-size:larger;font-weight:700;color:#fff}.btn-svg{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none}.btn-text{background-color:#d4def3;color:#0f1624;font-size:large;height:fit-content;font-family:Inter,Roboto,Noto Sans TC,Noto Sans JP,sans-serif}.btn-bright:hover{filter:brightness(.9)}.btn-dark:hover{filter:brightness(1.1)}.btn-dialog-cancel{padding:10px 24px;font-size:1rem;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;background:var(--color-button-secondary, #3a3a3a);color:var(--color-text, #ffffff)}.btn-dialog-cancel:hover:not(:disabled){background:var(--color-button-secondary-hover, #4a4a4a)}.btn-dialog-warning{background-color:var(--color-warning, #f59e0b);color:var(--color-text, #ffffff);border:none;font-weight:500;font-size:1rem;cursor:pointer;transition:all .2s;padding:10px 24px}.btn-dialog-warning:hover:not(:disabled){filter:brightness(1.1)}.btn-dialog-warning:disabled{opacity:.5;cursor:not-allowed}.btn-dialog-cancel:disabled{opacity:.5;cursor:not-allowed}.btn-dialog-action{padding:10px 24px;font-size:1rem;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;background:var(--color-primary, #589bd5);color:#fff}.btn-dialog-action:hover:not(:disabled){background:var(--color-primary-hover, #4a8bc2);transform:translateY(-1px);box-shadow:0 4px 12px #589bd54d}.btn-dialog-action:disabled{opacity:.5;cursor:not-allowed;transform:none}#root{width:100vw;height:100vh;padding:0;margin:0;overflow:hidden}.header-default{height:15%;width:100%;background-color:var(--color-bg-surface-1);display:flex;justify-content:center}.header-default .header-wrapper{width:70%;height:100%;display:flex;justify-content:space-between;align-items:center}.header-default .header-wrapper img{height:100%}#header-discord{display:flex;align-items:center;justify-content:center;width:5vh}#header-discord img{width:100%}#user-info{display:flex;flex-direction:column;gap:.5rem}#user-info img{height:72px;width:72px;border-radius:999px}main{background-color:var(--color-bg-main);height:85%;width:100%;display:grid;grid-template-columns:20% 1fr;grid-template-rows:1fr}main .left-panel{position:relative;background-color:var(--color-bg-panel);padding:1rem}main .left-panel hr.primary-hr{border:none;height:1px;background-color:var(--color-bg-inverse-panel)}main .left-panel .canvas-character{display:flex;flex-direction:row;justify-content:space-evenly;align-items:end}main .left-panel .canvas-character span{font-size:x-large}main .left-panel .canvas-panel .canvas-panel-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:x-large}main .left-panel .canvas-panel .canvas-panel-header #canvas-panel-header-btns{display:flex;flex-direction:row;align-items:center;gap:.5rem}main .left-panel .canvas-panel .canvas-panel-header .btn-import-canvas{display:flex;align-items:center;justify-content:center;border:none;background-color:#fff}main .left-panel .canvas-panel .canvas-panel-header .btn-create-canvas{display:flex;align-items:center;justify-content:center;border:none;background-color:var(--color-accent-green)}main .left-panel hr.secondary-hr{border:none;height:1px;background-color:var(--color-bg-inverse-panel)}main #konva-content{display:flex;flex-direction:column;width:100%;height:100%;justify-content:center}main #konva-content #canvas-initializing{display:flex;justify-content:center;align-items:center;font-size:xx-large}main #konva-content #konva-container{width:100%;height:100%;position:relative}.canvas-stages{display:flex;flex-direction:column;gap:.5rem}.canvas-stages .stage-item{display:flex;flex-direction:row;justify-content:center;align-items:center}.canvas-stages .stage-item .btn-stage{width:85%;height:100%;display:flex;align-items:center;justify-content:center}.canvas-stages [data-state=active]{border:solid 4px oklch(.7 .03 264.46)}#header-functions{display:flex;flex-direction:row;align-items:center;gap:.75rem}#header-functions button{padding:0}#select-language{color:#fff;background-color:transparent;border:none;height:fit-content;font-size:16px;text-align:center}#select-language option{background-color:#d7deec;color:#020309}#canvas-character-video-vs{display:flex;flex-direction:column}.btn-login{display:flex;flex-direction:row;align-items:center;gap:.25rem;justify-content:space-around;height:2rem;width:fit-content;font-size:16px}.btn-login img{max-height:100%}.stage-dropdown-trigger{width:15%;height:100%;background-color:var(--color-bg-surface-2);border:none;cursor:pointer;transition:background-color .2s}.stage-dropdown-trigger:hover{filter:brightness(1.2)}.stage-dropdown-content{z-index:1000;background:var(--color-bg-dropdown);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 4px 12px #00000080;padding:4px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.stage-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;color:var(--color-text-inverse-primary);font-size:14px;font-family:inherit;font-weight:400;cursor:pointer;border-radius:4px}.stage-dropdown-item:hover{background:var(--color-bg-surface-2);color:var(--color-text-primary)}.stage-dropdown-item:active{background:var(--color-primary);transform:scale(.98)}.stage-dropdown-item svg{color:var(--color-text-inverse-secondary)}.stage-dropdown-item:hover svg{color:var(--color-text-primary)}.canvas-accordion-item [data-accordion-trigger]{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding-left:1rem;margin-bottom:.2rem;width:100%;background-color:#3f4858;color:#fff;font-size:larger;border:none}.canvas-accordion-item [data-state=open] svg{rotate:180deg}.context-menu{position:fixed;z-index:1000;background:var(--color-bg-dropdown);border:1px solid var(--color-border);border-radius:8px;box-shadow:0 4px 12px #00000080;padding:4px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.context-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;color:var(--color-text-inverse-primary);font-size:14px;font-family:inherit;font-weight:400;cursor:pointer;border-radius:4px}.context-menu-item:hover{background:var(--color-bg-surface-2);color:var(--color-text-primary)}.context-menu-item:active{background:var(--color-primary);transform:scale(.98)}.context-menu-item svg{color:var(--color-text-inverse-secondary)}.context-menu-item:hover svg{color:var(--color-text-primary)}