.link-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:40px;border-radius:var(--size-radius-card);background-color:var(--color-surface-base)}.link-icon-name{display:flex;flex-direction:row;gap:var(--size-gap-sm);align-items:center;color:var(--color-text-primary);text-decoration:none;& p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&:hover{color:var(--color-accent-base)}}.main-content-container{column-width:var(--size-section-width);column-gap:var(--size-gap-lg)}.modal-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--color-modal-dim-bg);backdrop-filter:blur(2px)}.modal-body{display:flex;flex-direction:column;gap:var(--size-gap-md);padding:var(--size-padding-lg);border:var(--size-border-hairline) solid var(--color-border-muted);border-radius:var(--size-radius-modal);background-color:var(--color-modal-bg)}.modal-actions{display:flex;flex-direction:row;gap:var(--size-gap-md)}.nav-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;padding:var(--size-margin-sm);border-radius:var(--size-radius-menu);background-color:var(--color-surface-base);& p{font-size:20px;font-weight:700}}.new-link-input{width:600px}.section-container{display:flex;flex-direction:column;gap:var(--size-gap-sm);break-inside:avoid;width:100%;margin-bottom:var(--size-gap-lg);padding:var(--size-padding-sm);border-radius:var(--size-radius-card);background-color:var(--color-surface-base);transition:box-shadow ease-in-out .2s}.section-header-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:48px;& p{font-weight:700}}.section-header-actions{display:flex;flex-direction:row;gap:var(--size-gap-lg);align-items:center}.section-links-container{overflow-y:scroll;display:flex;flex-direction:column;gap:var(--size-gap-xs);min-height:50px}*{box-sizing:border-box;min-width:0;margin:0}:root{--size-section-width: 350px;--size-section-height: var(--size-section-width)}body{font-family:Ioskeley Mono,monospace;font-size:14px;line-height:1.5;color:var(--color-app-fg);background-color:var(--color-app-bg)}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}input,textarea{padding:var(--size-padding-2xs) var(--size-padding-md);border:var(--size-border-medium) solid var(--color-input-border);border-radius:var(--size-radius-input);color:var(--color-input-fg);background-color:var(--color-input-bg);outline:none}input:hover,textarea:hover{background-color:hsl(from var(--color-input-bg-hover) h s l / 20%)}input:focus,textarea:focus{border-color:var(--color-input-border-focus)}input::placeholder,textarea::placeholder{color:var(--color-input-placeholder)}.input-error{border-color:var(--color-input-error-border);color:var(--color-input-error-fg)}.input-warning{border-color:var(--color-input-warning-border);color:var(--color-input-warning-fg)}button{cursor:pointer;display:flex;gap:var(--size-gap-sm);align-items:center;justify-content:center;padding:var(--size-padding-2xs) var(--size-padding-md);border:none;border-radius:var(--size-radius-button);color:var(--color-button-fg);background-color:var(--color-button-bg);&:hover{background-color:var(--color-button-bg-hover)}&:active{background-color:var(--color-button-bg-active)}}.button-primary{cursor:pointer;padding:var(--size-padding-2xs) var(--size-padding-md);border:none;border-radius:var(--size-radius-button);color:var(--color-button-fg);background-color:var(--color-button-primary);&:hover{background-color:var(--color-button-primary-hover)}&:active{background-color:var(--color-button-primary-active)}}.button-secondary{cursor:pointer;padding:var(--size-padding-2xs) var(--size-padding-md);border:none;border-radius:var(--size-radius-button);color:var(--color-button-fg);background-color:var(--color-button-secondary);&:hover{background-color:var(--color-button-secondary-hover)}&:active{background-color:var(--color-button-secondary-active)}}.drag-handler{cursor:grab;padding:var(--size-padding-2xs) var(--size-padding-xs);border-radius:var(--size-radius-button);color:var(--color-button-fg);background-color:hsl(from var(--color-button-bg) h s l / 20%)}.main-container{display:flex;flex-direction:column;gap:var(--size-gap-lg);margin:var(--size-margin-lg)}.divider{width:100%;height:2px;background-color:var(--color-border-divider)}.icon{cursor:pointer;color:var(--color-icon-muted)}.icon-add-plus{color:var(--color-icon-muted)}.icon-edit{color:var(--color-icon-muted);&:hover{color:var(--color-intent-info-bg)}}.icon-trash{color:var(--color-icon-muted);&:hover{color:var(--color-intent-danger-bg)}}.icon-add-section{width:14px;height:14px;color:var(--color-icon-primary)}:root{--default-gap: var(--size-gap-sm)}.flex-row{display:flex;flex-flow:row wrap;gap:var(--default-gap);align-items:center}.flex-column{display:flex;flex-direction:column;gap:var(--default-gap)}.flex-center{display:flex;gap:var(--default-gap);align-items:center;justify-content:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.align-start{align-items:start}.align-stretch{align-items:stretch}.align-baseline{align-items:baseline}.gap-0{gap:0}.gap-sm{gap:var(--size-gap-sm)}.gap-lg{gap:var(--size-gap-lg)}.nowrap{flex-wrap:nowrap}:root{--fw-light: 300 ;--fw-regular: 400 ;--fw-medium: 500 ;--fw-semibold: 600 ;--fw-bold: 700 ;--fw-extrabold: 800 }@font-face{font-family:Ioskeley Mono;font-weight:300;font-style:normal;font-display:swap;src:url(/startpage/fonts/IoskeleyMono-WOFF2/IoskeleyMono-Light.woff2) format("woff2")}@font-face{font-family:Ioskeley Mono;font-weight:300;font-style:italic;font-display:swap;src:url(/startpage/fonts/IoskeleyMono-WOFF2/IoskeleyMono-LightItalic.woff2) format("woff2")}@font-face{font-family:Ioskeley Mono;font-weight:400;font-style:normal;font-display:swap;src:url(/startpage/fonts/IoskeleyMono-WOFF2/IoskeleyMono-Regular.woff2) format("woff2")}@font-face{font-family:Ioskeley Mono;font-weight:400;font-style:italic;font-display:swap;src:url(/startpage/fonts/IoskeleyMono-WOFF2/IoskeleyMono-Italic.woff2) format("woff2")}@font-face{font-family:Ioskeley Mono;font-weight:500;font-style:normal;font-display:swap;src:url(/startpage/fonts/IoskeleyMono-WOFF2/IoskeleyMono-Medium.woff2) format("woff2")}@font-face{font-family:Ioskeley Mono;font-weight:500;font-style:italic;font-display:swap;src:url(/startpage/fonts/IoskeleyMono-WOFF2/IoskeleyMono-MediumItalic.woff2) format("woff2")}@font-face{font-family:Ioskeley Mono;font-weight:600;font-style:normal;font-display:swap;src:url(/startpage/fonts/IoskeleyMono-WOFF2/IoskeleyMono-SemiBold.woff2) format("woff2")}@font-face{font-family:Ioskeley Mono;font-weight:600;font-style:italic;font-display:swap;src:url(/startpage/fonts/IoskeleyMono-WOFF2/IoskeleyMono-SemiBoldItalic.woff2) format("woff2")}@font-face{font-family:Ioskeley Mono;font-weight:700;font-style:normal;font-display:swap;src:url(/startpage/fonts/IoskeleyMono-WOFF2/IoskeleyMono-Bold.woff2) format("woff2")}@font-face{font-family:Ioskeley Mono;font-weight:700;font-style:italic;font-display:swap;src:url(/startpage/fonts/IoskeleyMono-WOFF2/IoskeleyMono-BoldItalic.woff2) format("woff2")}@font-face{font-family:Ioskeley Mono;font-weight:800;font-style:normal;font-display:swap;src:url(/startpage/fonts/IoskeleyMono-WOFF2/IoskeleyMono-ExtraBold.woff2) format("woff2")}@font-face{font-family:Ioskeley Mono;font-weight:800;font-style:italic;font-display:swap;src:url(/startpage/fonts/IoskeleyMono-WOFF2/IoskeleyMono-ExtraBoldItalic.woff2) format("woff2")}:root{--gray-50: hsl(0, 0%, 95%);--gray-100: hsl(0, 0%, 90%);--gray-200: hsl(0, 0%, 80%);--gray-300: hsl(0, 0%, 70%);--gray-400: hsl(0, 0%, 60%);--gray-500: hsl(0, 0%, 50%);--gray-600: hsl(0, 0%, 40%);--gray-700: hsl(0, 0%, 30%);--gray-800: hsl(0, 0%, 20%);--gray-900: hsl(0, 0%, 10%);--gray-1000: hsl(0, 0%, 5%);--red-50: hsl(0, 44%, 95%);--red-100: hsl(0, 45%, 90%);--red-200: hsl(0, 45%, 80%);--red-300: hsl(0, 45%, 70%);--red-400: hsl(0, 45%, 60%);--red-500: hsl(0, 45%, 50%);--red-600: hsl(0, 45%, 40%);--red-700: hsl(0, 45%, 30%);--red-800: hsl(0, 45%, 20%);--red-900: hsl(0, 45%, 10%);--red-1000: hsl(0, 44%, 5%);--orange-50: hsl(38, 44%, 95%);--orange-100: hsl(39, 45%, 90%);--orange-200: hsl(39, 45%, 80%);--orange-300: hsl(39, 45%, 70%);--orange-400: hsl(39, 45%, 60%);--orange-500: hsl(39, 45%, 50%);--orange-600: hsl(39, 45%, 40%);--orange-700: hsl(39, 45%, 30%);--orange-800: hsl(39, 45%, 20%);--orange-900: hsl(39, 45%, 10%);--orange-1000: hsl(38, 44%, 5%);--yellow-50: hsl(60, 44%, 95%);--yellow-100: hsl(60, 45%, 90%);--yellow-200: hsl(60, 45%, 80%);--yellow-300: hsl(60, 45%, 70%);--yellow-400: hsl(60, 45%, 60%);--yellow-500: hsl(60, 45%, 50%);--yellow-600: hsl(60, 45%, 40%);--yellow-700: hsl(60, 45%, 30%);--yellow-800: hsl(60, 45%, 20%);--yellow-900: hsl(60, 45%, 10%);--yellow-1000: hsl(60, 44%, 5%);--green-50: hsl(120, 44%, 95%);--green-100: hsl(120, 45%, 90%);--green-200: hsl(120, 45%, 80%);--green-300: hsl(120, 45%, 70%);--green-400: hsl(120, 45%, 60%);--green-500: hsl(120, 45%, 50%);--green-600: hsl(120, 45%, 40%);--green-700: hsl(120, 45%, 30%);--green-800: hsl(120, 45%, 20%);--green-900: hsl(120, 45%, 10%);--green-1000: hsl(120, 44%, 5%);--cyan-50: hsl(180, 44%, 95%);--cyan-100: hsl(180, 45%, 90%);--cyan-200: hsl(180, 45%, 80%);--cyan-300: hsl(180, 45%, 70%);--cyan-400: hsl(180, 45%, 60%);--cyan-500: hsl(180, 45%, 50%);--cyan-600: hsl(180, 45%, 40%);--cyan-700: hsl(180, 45%, 30%);--cyan-800: hsl(180, 45%, 20%);--cyan-900: hsl(180, 45%, 10%);--cyan-1000: hsl(180, 44%, 5%);--blue-50: hsl(224, 44%, 95%);--blue-100: hsl(219, 45%, 90%);--blue-200: hsl(220, 45%, 80%);--blue-300: hsl(220, 45%, 70%);--blue-400: hsl(220, 45%, 60%);--blue-500: hsl(220, 45%, 50%);--blue-600: hsl(220, 45%, 40%);--blue-700: hsl(220, 45%, 30%);--blue-800: hsl(220, 45%, 20%);--blue-900: hsl(219, 45%, 10%);--blue-1000: hsl(218, 44%, 5%);--violet-50: hsl(267, 44%, 95%);--violet-100: hsl(269, 45%, 90%);--violet-200: hsl(270, 45%, 80%);--violet-300: hsl(270, 45%, 70%);--violet-400: hsl(270, 45%, 60%);--violet-500: hsl(270, 45%, 50%);--violet-600: hsl(270, 45%, 40%);--violet-700: hsl(270, 45%, 30%);--violet-800: hsl(270, 45%, 20%);--violet-900: hsl(271, 45%, 10%);--violet-1000: hsl(273, 44%, 5%);--purple-50: hsl(300, 44%, 95%);--purple-100: hsl(300, 45%, 90%);--purple-200: hsl(300, 45%, 80%);--purple-300: hsl(300, 45%, 70%);--purple-400: hsl(300, 45%, 60%);--purple-500: hsl(300, 45%, 50%);--purple-600: hsl(300, 45%, 40%);--purple-700: hsl(300, 45%, 30%);--purple-800: hsl(300, 45%, 20%);--purple-900: hsl(300, 45%, 10%);--purple-1000: hsl(300, 44%, 5%);--pink-50: hsl(333, 44%, 95%);--pink-100: hsl(331, 45%, 90%);--pink-200: hsl(330, 45%, 80%);--pink-300: hsl(330, 45%, 70%);--pink-400: hsl(330, 45%, 60%);--pink-500: hsl(330, 45%, 50%);--pink-600: hsl(330, 45%, 40%);--pink-700: hsl(330, 45%, 30%);--pink-800: hsl(330, 45%, 20%);--pink-900: hsl(329, 45%, 10%);--pink-1000: hsl(327, 44%, 5%);--transparent: rgba(255, 255, 255, 0);--color-app-fg: var(--color-text-primary);--color-app-bg: var(--gray-1000);--color-surface-base: var(--gray-900);--color-surface-raised: var(--gray-800);--color-surface-overlay: var(--gray-700);--color-surface-floating: var(--gray-600);--color-border-none: var(--transparent);--color-modal-bg: var(--color-surface-base);--color-modal-dim-bg: rgba(26, 26, 26, .6);--color-surface-sunken: var(--gray-900);--color-border-base: var(--gray-600);--color-border-muted: var(--gray-400);--color-border-strong: var(--gray-200);--color-border-divider: var(--gray-700);--color-accent-base: var(--blue-500);--color-accent-hover: var(--blue-400);--color-accent-active: var(--blue-600);--color-accent-muted: var(--blue-300);--color-text-primary: var(--gray-50);--color-text-secondary: var(--gray-300);--color-text-muted: var(--gray-500);--color-text-dark: var(--gray-700);--color-text-inverse: var(--gray-50);--color-button-fg: var(--color-text-inverse);--color-button-bg-hover: var(--gray-600);--color-button-bg-active: var(--gray-800);--color-button-primary-hover: var(--color-accent-hover);--color-button-primary-active: var(--color-accent-active);--color-button-secondary-hover: var(--violet-400);--color-button-secondary-active: var(--violet-600);--color-button-bg: var(--gray-700);--color-button-primary: var(--color-accent-base);--color-button-secondary: var(--violet-500);--color-status-runable-fg: var(--color-text-inverse);--color-status-runable-bg: var(--green-500);--color-status-runable-border: var(--green-500);--color-status-running-fg: var(--color-text-inverse);--color-status-running-bg: var(--blue-500);--color-status-running-border: var(--blue-500);--color-status-playing-fg: var(--green-600);--color-status-playing-bg: var(--green-500);--color-status-playing-border: var(--color-status-playing-fg);--color-status-finished-fg: var(--blue-600);--color-status-finished-bg: var(--blue-500);--color-status-finished-border: var(--color-status-finished-fg);--color-status-dropped-fg: var(--red-600);--color-status-dropped-bg: var(--red-500);--color-status-dropped-border: var(--color-status-dropped-fg);--color-input-fg: var(--color-text-primary);--color-status-backlog-fg: var(--gray-600);--color-status-backlog-bg: var(--gray-500);--color-input-bg: var(--color-surface-sunken);--color-status-backlog-border: var(--color-status-backlog-fg);--color-input-placeholder: var(--color-text-muted);--color-input-bg-hover: var(--color-surface-floating);--color-input-border-focus: var(--color-accent-base);--color-input-warning-fg: var(--color-input-fg);--color-input-error-fg: var(--color-input-fg);--color-input-warning-border: var(--yellow-600);--color-input-error-border: var(--red-600);--color-input-border: var(--color-border-base);--color-state-disabled-fg: var(--color-text-inverse);--color-state-disabled-bg: var(--gray-500);--color-state-disabled-overlay: rgba(153, 153, 153, .4);--color-progress-bg: var(--transparent);--color-progress-fill: var(--color-accent-base);--color-progress-spinner-bg: var(--color-accent-base);--color-tooltip-fg: var(--color-text-secondary);--color-progress-spinner-muted: var(--color-text-muted);--color-tooltip-bg: var(--color-surface-floating);--color-tooltip-border: var(--color-border-base);--color-intent-danger-fg: var(--color-text-inverse);--color-intent-danger-bg: var(--red-500);--color-intent-danger-hover: var(--red-400);--color-intent-danger-active: var(--red-600);--color-intent-warning-fg: var(--color-text-inverse);--color-intent-warning-bg: var(--yellow-500);--color-intent-warning-hover: var(--yellow-400);--color-intent-warning-active: var(--yellow-600);--color-intent-success-fg: var(--color-text-inverse);--color-intent-success-bg: var(--green-500);--color-intent-success-hover: var(--green-400);--color-intent-success-active: var(--green-600);--color-intent-info-fg: var(--color-text-inverse);--color-intent-info-bg: var(--blue-500);--color-intent-info-hover: var(--blue-400);--color-intent-info-active: var(--blue-600);--color-icon-primary: var(--color-text-primary);--color-icon-muted: var(--color-text-muted);--color-icon-inverse: var(--color-text-inverse);--size-margin-xs: 8px;--size-margin-sm: 12px;--size-margin-md: 16px;--size-margin-lg: 24px;--size-margin-xl: 32px;--size-gap-xs: 4px;--size-padding-2xs: 4px;--size-padding-xs: 8px;--size-padding-sm: 12px;--size-padding-md: 16px;--size-padding-lg: 20px;--size-padding-xl: 24px;--size-padding-inline-sm: 12px;--size-padding-inline-md: 16px;--size-padding-inline-lg: 20px;--size-padding-block-sm: 8px;--size-padding-block-md: 12px;--size-padding-block-lg: 16px;--size-gap-sm: 8px;--size-gap-md: 12px;--size-gap-lg: 16px;--size-gap-xl: 24px;--size-radius-none: 0px;--size-radius-xs: 4px;--size-radius-sm: 6px;--size-radius-md: 8px;--size-radius-lg: 12px;--size-radius-xl: 16px;--size-radius-full: 9999px;--size-radius-button: var(--size-radius-sm);--size-radius-input: var(--size-radius-sm);--size-radius-modal: var(--size-radius-sm);--size-radius-card: var(--size-radius-sm);--size-radius-menu: var(--size-radius-sm);--size-radius-menu-item: var(--size-radius-sm);--size-radius-media: var(--size-radius-sm);--size-radius-badge: var(--size-radius-xl);--size-border-none: 0px;--size-border-hairline: .5px;--size-border-thin: 1px;--size-border-medium: 2px;--size-border-thick: 4px;--size-control-xs: 28px;--size-control-sm: 32px;--size-control-md: 36px;--size-control-lg: 40px;--size-control-xl: 44px;--size-icon-xs: 12px;--size-icon-sm: 16px;--size-icon-md: 20px;--size-icon-lg: 24px;--size-icon-xl: 32px;--size-container-sm: 320px;--size-container-md: 480px;--size-container-lg: 640px;--size-container-xl: 800px;--color-status-unplayed-fg: var(--yellow-600);--color-status-unplayed-bg: var(--yellow-500);--color-status-unplayed-border: var(--color-status-unplayed-fg)}
