/**
 * Copyright 2026 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

@layer reset, ui, demo;

@layer demo {
  .box {
    aspect-ratio: 1;
    inline-size: 20vmin;
    background: blue;
		color: white;
		overflow: hidden;
		
		display: grid;
		place-content: center;
		text-align: center;
		user-select: none;
		
		view-transition-name: box;
		
		
		span {			
			overflow-wrap: break-word;
			hyphens: manual;
		}
  }
}

@layer ui {
	#controls {
		position: fixed;
		top: 0em;
		right: 0em;
		background-color: white;
		padding: 0.5em;
		display: flex;
		flex-direction: row;
		gap: 1em;
		z-index: 1;
	}
}

@layer reset {
	* {
		box-sizing: border-box;
	}
	
	html, body {
		margin: 0;
		padding: 0;
		height: 100%;
	}
  
  body {
    display: grid;
    place-content: center;
		padding: 1em;
  }
  
  html {
    view-transition-name: none;
  }
}