:root{--color-primary: #4A9FD8;--color-primary-hover: #3B8FCC;--color-primary-active: #2E8BC0;--color-success: #16a34a;--color-warning: #ea580c;--color-danger: #dc2626;--color-bg-primary: #ffffff;--color-bg-secondary: #f1f5f9;--color-bg-tertiary: #e2e8f0;--color-text-primary: #0f172a;--color-text-secondary: #475569;--color-text-tertiary: #94a3b8;--color-border: #cbd5e1;--color-border-hover: #94a3b8;--color-button-disabled: #e2e8f0;--color-button-disabled-text: #94a3b8;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--font-xs: .75rem;--font-sm: .875rem;--font-md: 1rem;--font-lg: 1.125rem;--font-xl: 1.25rem;--font-2xl: 1.5rem;--font-3xl: 2rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1);--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .35s ease-in-out;--max-width-content: 688px;--header-height: 80px;--z-base: 1;--z-dropdown: 10;--z-sticky: 100;--z-modal: 1000;--z-tooltip: 2000;--skill-icon-size: 100px;--skill-button-size: 32px;--skill-grid-columns: 3;--skill-grid-gap: var(--space-lg)}@media(prefers-color-scheme:dark){:root:not(.light-theme){--color-bg-primary: #0f172a;--color-bg-secondary: #1e293b;--color-bg-tertiary: #334155;--color-text-primary: #f1f5f9;--color-text-secondary: #cbd5e1;--color-text-tertiary: #64748b;--color-border: #475569;--color-border-hover: #64748b;--color-button-disabled: #334155;--color-button-disabled-text: #64748b}}:root.dark-theme{--color-bg-primary: #0f172a;--color-bg-secondary: #1e293b;--color-bg-tertiary: #334155;--color-text-primary: #f1f5f9;--color-text-secondary: #cbd5e1;--color-text-tertiary: #64748b;--color-border: #475569;--color-border-hover: #64748b;--color-button-disabled: #334155;--color-button-disabled-text: #64748b}@media(max-width:640px){:root{--skill-icon-size: 80px;--skill-button-size: 28px;--skill-grid-gap: var(--space-md);--font-md: .875rem;--font-lg: 1rem;--font-xl: 1.125rem}}*{box-sizing:border-box}html{height:100%}body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg-secondary);color:var(--color-text-primary);font-size:var(--font-md);line-height:1.5;overflow-y:scroll}#root{min-height:100%;display:flex;flex-direction:column}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.App{text-align:center;min-height:100vh;width:100%;display:flex;flex-direction:column}.App-header{position:sticky;top:0;padding:var(--space-md);width:100%;background-color:var(--color-bg-primary);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm);z-index:var(--z-sticky);display:flex;flex-direction:column;gap:var(--space-xs);align-items:center}.App-copiedUrl{overflow:hidden;transition:height var(--transition-base);color:var(--color-success);font-weight:var(--font-medium);font-size:var(--font-sm)}.App-jobContent{max-width:var(--max-width-content);margin:0 auto;padding:var(--space-2xl) var(--space-md);flex-grow:1;width:100%}.App-jobName select{font-size:var(--font-lg);font-weight:var(--font-semibold);padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-bg-primary);color:var(--color-text-primary);cursor:pointer;transition:border-color var(--transition-fast)}.App-jobName select:hover{border-color:var(--color-border-hover)}.App-totalJobPoints{font-size:var(--font-lg);font-weight:var(--font-semibold);color:var(--color-text-secondary)}.App-jobWarning{color:var(--color-warning);font-size:var(--font-sm);font-weight:var(--font-medium);margin-top:var(--space-xs)}.App-jobButtons{display:flex;gap:var(--space-sm)}.App-jobButtons button{padding:var(--space-xs) var(--space-md);font-size:var(--font-sm);font-weight:var(--font-medium);background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast)}.App-jobButtons button:hover{background-color:var(--color-primary-hover)}.App-jobButtons button:active{background-color:var(--color-primary-active)}.App-secondaryButtons{display:flex;gap:var(--space-sm);align-items:center}.App-secondaryButtons button{padding:var(--space-xs) var(--space-md);font-size:var(--font-xs);font-weight:var(--font-medium);background-color:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}.App-secondaryButtons button:hover{background-color:var(--color-border)}.App-footer{margin:var(--space-xl) auto;padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md);align-items:center}@media(max-width:640px){.App-header{padding:var(--space-md) var(--space-sm)}.App-jobContent{padding:var(--space-xl) var(--space-sm)}}.Skill{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-sm)}.Skill-details{display:flex;flex-direction:column;gap:var(--space-sm);width:100%}.Skill-name{font-size:var(--font-md);font-weight:var(--font-medium);color:var(--color-text-primary);min-height:2.5rem;display:flex;align-items:center;justify-content:center;line-height:1.3}.Skill-modifiers{display:flex;justify-content:center;align-items:center;gap:var(--space-sm)}.Skill-value{font-size:var(--font-md);font-weight:var(--font-semibold);color:var(--color-text-primary);min-width:3rem}.Skill-button{display:flex;align-items:center;justify-content:center;width:var(--skill-button-size);height:var(--skill-button-size);font-size:var(--font-lg);font-weight:var(--font-bold);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;background-color:var(--color-primary);color:#fff;transition:all var(--transition-fast);touch-action:manipulation;padding:0}.Skill-button:hover:not(:disabled){background-color:var(--color-primary-hover);transform:scale(1.05)}.Skill-button:active:not(:disabled){background-color:var(--color-primary-active);transform:scale(.95)}.Skill-button:disabled{background-color:var(--color-button-disabled);color:var(--color-button-disabled-text);border-color:var(--color-border);cursor:not-allowed;transform:none}.Skill-spacer{min-height:var(--space-2xl);width:100%}.Skill-connector{min-height:var(--space-2xl);width:100%;position:relative;display:flex;align-items:center;justify-content:center;font-size:var(--font-md);font-weight:var(--font-bold);color:var(--color-text-secondary)}.Skill-connector.is-met{color:var(--color-success)}.Skill-connector:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background-color:var(--color-text-secondary);transform:translate(-50%)}.Skill-connector.is-met:before{background-color:var(--color-success)}.Skill-connector:after{content:attr(data-level);position:absolute;left:calc(50% + var(--space-sm));z-index:1}@media(max-width:640px){.Skill-name{font-size:var(--font-xs);min-height:2rem}.Skill-connector{padding-right:var(--space-lg)}}.Job{display:flex;flex-direction:column;align-items:center;overflow:hidden}.Job-header{margin-bottom:var(--space-2xl)}.Job-title{font-weight:var(--font-bold);font-size:var(--font-3xl);color:var(--color-text-primary)}.Job-skillGrid{display:grid;grid-template-columns:repeat(var(--skill-grid-columns),1fr);column-gap:var(--skill-grid-gap);row-gap:0;width:100%;position:relative}.Job-spacer{min-height:var(--space-2xl);position:relative}.Job-spacer hr{position:absolute;left:50%;top:50%;transform:translate(-50%);width:100vw;max-width:var(--max-width-content);border:none;border-top:2px solid var(--color-text-secondary);margin:0;pointer-events:none}.Job-connector{min-height:var(--space-2xl);position:relative;display:flex;align-items:center;justify-content:center}.Job-connector:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background-color:var(--color-text-secondary);transform:translate(-50%)}.Job-connector.is-met:before{background-color:var(--color-success)!important}.Job-connector hr{position:absolute;left:50%;top:50%;transform:translate(-50%);width:100vw;max-width:var(--max-width-content);border:none;border-top:2px solid var(--color-text-secondary);margin:0;pointer-events:none;z-index:var(--z-base)}@media(max-width:640px){.Job-skillGrid{column-gap:var(--space-md)}.Job-title{font-size:var(--font-2xl)}}.SkillSummary-toggleButton{padding:var(--space-sm) var(--space-lg);font-size:var(--font-sm);font-weight:var(--font-medium);background-color:var(--color-bg-tertiary);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.SkillSummary-toggleButton:hover{background-color:var(--color-border)}.SkillSummary-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.SkillSummary-modal{background-color:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);max-width:500px;max-height:80vh;width:90%;display:flex;flex-direction:column;box-shadow:0 4px 6px #0000001a}.SkillSummary-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);border-bottom:1px solid var(--color-border);gap:var(--space-md)}.SkillSummary-header h3{margin:0;font-size:var(--font-md);color:var(--color-text-primary);flex:1}.SkillSummary-totalPoints{font-size:var(--font-md);font-weight:var(--font-semibold);color:var(--color-text-secondary)}.SkillSummary-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--color-text-secondary);padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.SkillSummary-close:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}.SkillSummary-list{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md);overflow-y:auto}.SkillSummary-footer{padding:var(--space-md);border-top:1px solid var(--color-border);display:flex;justify-content:center}.SkillSummary-copyButton{padding:var(--space-sm) var(--space-lg);font-size:var(--font-md);font-weight:var(--font-medium);background-color:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast)}.SkillSummary-copyButton:hover{background-color:var(--color-primary-hover)}.SkillSummary-copyButton:active{background-color:var(--color-primary-active)}.SkillSummary-itemLine{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm);background-color:var(--color-bg-tertiary);border-radius:var(--radius-sm)}.SkillSummary-miniIcon{width:25px;height:25px;overflow:hidden;flex-shrink:0}.SkillSummary-miniIcon .SkillSprite{transform:scale(.25);transform-origin:left top}.SkillSummary-levelValue{font-size:var(--font-sm);color:var(--color-text-secondary)}
