:root{--color-border: #000;--color-background: #fff;--color-background-header: #eee;--color-background-hover: #ddd;--color-background-active: #ccc;--color-background-zebra: #f5f5f5;--color-text: #000;--color-text-muted: #666;--color-text-selector: #333;--font-family: monospace;--font-size-base: 14px;--font-size-small: 12px;--font-size-tiny: 10px;--line-height: 1.4;--spacing-small: 4px;--spacing-medium: 8px;--info-btn-size: 14px;--popover-width: 220px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height)}.app{display:flex;flex-direction:column;height:100%}.app-title{padding:var(--spacing-medium);border-bottom:1px solid var(--color-border);text-align:center}.app-title h1{font-size:var(--font-size-base);margin-bottom:var(--spacing-small)}.app-title p{font-size:var(--font-size-small);color:var(--color-text-muted)}.app-title a{color:var(--color-text)}.headers{display:flex;flex-shrink:0}.headers .panel-header{flex:1;border:1px solid var(--color-border)}.headers .panel-header:first-child{border-right:none}.panel-header{padding:var(--spacing-small) var(--spacing-medium);border-bottom:1px solid var(--color-border);background:var(--color-background-header);font-weight:700;display:flex;justify-content:space-between;align-items:center}.panels-content{flex:1;display:flex;overflow:auto;border:1px solid var(--color-border);border-top:none}.panel-column{flex:1;min-width:0}.panel-column:first-child{border-right:1px solid var(--color-border)}.format-btn{font-family:var(--font-family);font-size:var(--font-size-small);padding:2px var(--spacing-medium);background:var(--color-background);border:1px solid var(--color-border);cursor:pointer}.format-btn:hover{background:var(--color-background-hover)}.format-btn:active{background:var(--color-background-active)}.info-btn{width:var(--info-btn-size);height:var(--info-btn-size);margin-left:var(--spacing-small);padding:0;font-family:serif;font-size:var(--font-size-tiny);font-style:italic;font-weight:700;line-height:calc(var(--info-btn-size) - 2px);text-align:center;background:var(--color-background);border:1px solid var(--color-text-muted);border-radius:50%;cursor:pointer;vertical-align:middle}.info-btn:hover{background:var(--color-background-hover)}.total-time{font-weight:400;font-size:var(--font-size-small);color:var(--color-text-muted);position:relative}.info-popover{position:absolute;top:100%;right:0;margin-top:var(--spacing-small);padding:var(--spacing-medium);width:var(--popover-width);background:var(--color-background);border:1px solid var(--color-border);font-size:var(--font-size-small);line-height:var(--line-height);z-index:10}.info-popover p{margin:0 0 var(--spacing-small) 0}.info-popover p:last-child{margin-bottom:0}.html-editor{display:block;width:100%;border:none;outline:none;resize:none;overflow:hidden;font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height);padding:var(--spacing-small) var(--spacing-medium);background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--line-height) * 1em),var(--color-background-zebra) calc(var(--line-height) * 1em),var(--color-background-zebra) calc(var(--line-height) * 2em))}.selector-panel{padding:var(--spacing-small) var(--spacing-medium);background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--line-height) * 1em),var(--color-background-zebra) calc(var(--line-height) * 1em),var(--color-background-zebra) calc(var(--line-height) * 2em))}.selector-line{min-height:calc(var(--line-height) * 1em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selector-line:not(:empty){color:var(--color-text-selector)}.hidden-container{position:absolute;left:-9999px;top:-9999px;visibility:hidden}
