body {
    margin: 0;
    overflow: hidden;
    background-color: #000000;
    font-family: Arial, sans-serif;
    color: #dddddd;
}

canvas { display: block; }

.top-left-controls{
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 1006;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: max-content;
}

.top-left-controls > .back-to-portfolio-link,
.top-left-controls > #seoToggle,
.top-left-controls > .seo-toggle,
.top-left-controls > .controls-toggle-button {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

.back-to-portfolio-link {
    padding: 8px 12px;
    background-color: rgba(35,35,35,0.75);
    color: #eeeeee;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    border: 1px solid rgba(120,120,120,0.4);
    box-shadow: 0 2px 3px rgba(0,0,0,0.4),
                inset 0 1px 0 rgba(255,255,255,0.1),
                inset 0 -1px 0 rgba(0,0,0,0.1);
    transition: background-color .2s, transform .2s, box-shadow .2s;
}
.back-to-portfolio-link:hover{
    background-color: rgba(55,55,55,0.9);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.5),
                inset 0 1px 0 rgba(255,255,255,0.15),
                inset 0 -1px 0 rgba(0,0,0,0.15);
}

.controls-toggle-button,
.seo-toggle{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(45,45,45,0.85);
  color: #eeeeee;
  border: 1px solid rgba(80,80,80,0.9);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.controls-toggle-button:hover,
.seo-toggle:hover{ background: rgba(60,60,60,0.9); }

#info-container{
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: #dddddd;
    font-family: Arial, sans-serif;
    font-size: 14px;
    opacity: .8;
    background: rgba(0,0,0,0.5);
    padding: 8px 15px;
    border-radius: 5px;
    text-align: center;
    z-index: 10;
}
#info-container h1{ font-size: 1em; margin: 0 0 5px 0; font-weight: normal; }
#info-container p{ margin: 0; font-size: .85em; }
#controlsToggleBtn{
    display: none;
    position: absolute;
    bottom: 20px; right: 20px;
    z-index: 101;
}
#controls-container{
    position: absolute;
    bottom: 20px; right: 20px;
    padding: 15px;
    background: rgba(25,25,25,0.8);
    border-radius: 8px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.slider-group{ margin-bottom: 12px; }
.slider-group:last-of-type{ margin-bottom: 10px; }
#controls-container label{
    color: #eee;
    font: 12px Arial, sans-serif;
    display: block;
    margin-bottom: 3px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
}
.slider{ width: 150px; display: block; margin: 0; }
#resetColorBtn{
    padding: 7px 12px;
    margin-top: 8px;
    cursor: pointer;
    background: #555;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 12px;
    width: 100%;
}
#resetColorBtn:hover{ background: #666; }

.webgl-fallback{
    text-align: center;
    padding: 50px;
    color: #ccc;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    border-radius: 10px;
}

.seo-panel{
  position: absolute;
  top: 0; right: 0; width: 340px; height: 100%;
  background: rgba(25,25,25,0.95);
  border-left: 1px solid rgba(80,80,80,0.7);
  box-shadow: -20px 0 60px rgba(0,0,0,.35);
  transform: translateX(110%);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  z-index: 120;
}
.seo-panel.open{ transform: translateX(0); opacity: 1; }
.seo-panel__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-bottom:1px solid rgba(80,80,80,0.7);
}
.seo-panel__body{ padding:14px; line-height:1.6; max-height:calc(100% - 48px); overflow:auto; }
.seo-panel__body a{ color:#ddd; text-decoration:underline; }
.seo-panel__close{ background:none; border:0; color:#eee; font-size:22px; cursor:pointer }

@media (max-width: 767px){
    #info-container{
        padding: 6px 10px;
        font-size: 12px;
        top: 60px;
    }
    #info-container h1{ font-size: .9em; }
    #info-container p{ font-size: .8em; }

    #controlsToggleBtn{ display: block; }

    #controls-container{
        bottom: 70px; right: 10px;
        width: calc(100% - 40px);
        max-width: 200px;
        max-height: 0;
        padding-top: 0; padding-bottom: 0;
        overflow: hidden; opacity: 0; visibility: hidden;
        border: 1px solid rgba(80,80,80,0.7);
        transition: max-height .35s cubic-bezier(.25,.1,.25,1),
                    padding-top .35s cubic-bezier(.25,.1,.25,1),
                    padding-bottom .35s cubic-bezier(.25,.1,.25,1),
                    opacity .3s ease-out, visibility 0s .35s;
    }
    #controls-container.expanded{
        max-height: 250px;
        padding-top: 15px; padding-bottom: 15px;
        opacity: 1; visibility: visible;
        transition: max-height .35s cubic-bezier(.25,.1,.25,1),
                    padding-top .35s cubic-bezier(.25,.1,.25,1),
                    padding-bottom .35s cubic-bezier(.25,.1,.25,1),
                    opacity .3s ease-in, visibility 0s 0s;
    }
    .slider{ width: calc(100% - 10px); }
}

@media (max-width: 380px){
    .back-to-portfolio-link, #seoToggle{
        font-size: 12px;
        padding: 6px 8px;
    }
    .top-left-controls{ top: 10px; left: 10px; }
    #info-container{ max-width: calc(100% - 80px); }
}

.top-left-controls > .back-to-portfolio-link,
.top-left-controls > #seoToggle,
.top-left-controls > .controls-toggle-button {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}